feat: Update Dockerfile, README, and Nginx configuration for improved deployment and documentation; enhance search functionality and UI components

Dockerfile

@@ -2,16 +2,26 @@
 FROM node:20-alpine as build
 
 WORKDIR /app
+
+# Copy package.json and install dependencies
 COPY package*.json ./
-RUN npm install
+RUN npm ci
+
+# Copy the rest of the application code
 COPY . .
+
+# Build the app
 RUN npm run build
 
-# Production stage
-FROM nginx:stable
+# Production stage with nginx
+FROM nginx:alpine
 
+# Copy built app to nginx
 COPY --from=build /app/build /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 
-EXPOSE 80
+# Expose port
+EXPOSE 3000
+
+# Start nginx
 CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -8,5 +8,30 @@ app_port: 3000
 pinned: false 
 license: mit
 duplicated_from: HumbleBeeAI/al-ghazali-rag-retrieval-api
-enable_emotes: true  # Allows reactions on your Space
----
+---
+
+# EnlightenQalb: Al-Ghazali's Wisdom Search
+
+A React application that allows users to search through "The Alchemy of Happiness" by Imam Al-Ghazali using modern AI-powered semantic search technology.
+
+## Features
+
+- Semantic search across Al-Ghazali's text
+- Compare results from different embedding models
+- Simple emoji-based feedback system
+- Light/dark theme support
+
+## Technical Details
+
+This application uses:
+- React with Material UI for the frontend
+- Sentence Transformer models (BGE-Large and UAE-Large) on the backend
+- Docker for containerization
+
+## Development
+
+To run locally:
+
+```bash
+npm install
+npm start

nginx.conf

@@ -1,5 +1,5 @@
 server {
-    listen 80;
+    listen 3000; # Changed from 80 to 3000 for HF Spaces
     server_name localhost;
     
     location / {
@@ -10,10 +10,11 @@ server {
 
     # Proxy API requests to your backend
     location /api/ {
-        proxy_pass https://huggingface.co/spaces/HumbleBeeAI/al-ghazali-rag-retrieval-api/;
+        proxy_pass https://humblebeeai-al-ghazali-rag-retrieval-api.hf.space/;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
     }
     
     error_page 500 502 503 504 /50x.html;

src/components/Search/FeedbackForm.jsx

@@ -31,16 +31,10 @@ const FeedbackForm = ({ searchResult, query, onFeedbackSubmitted }) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(false);
-
-  // Debug to check what searchResult contains
-  console.log('SearchResult:', searchResult);
   
-  // Ensure we have a proper searchResult object
   if (!searchResult || typeof searchResult !== 'object') {
     return (
-      <StyledPaper elevation={2}>
-        <Alert severity="error">Invalid search result data</Alert>
-      </StyledPaper>
+      <Alert severity="error">Invalid search result data</Alert>
     );
   }
 
@@ -50,15 +44,17 @@ const FeedbackForm = ({ searchResult, query, onFeedbackSubmitted }) => {
     setError(null);
 
     try {
-      // Extract only the needed text properties safely
+      // Extract only the needed properties for the backend
       const feedbackData = {
         user_type: 'user',
         username: user || 'anonymous',
         query: query || '',
         retrieved_text: searchResult.content || searchResult.text || JSON.stringify(searchResult),
         model_type: searchResult.model_type || 'unknown',
+        result_label: searchResult.resultLabel || '',
         reaction,
-        confidence_score: confidence,
+        confidence_score: searchResult.similarity || 0, // Send the model confidence score
+        user_confidence: confidence, // User's confidence in their rating
         rating
       };
 
@@ -148,4 +144,4 @@ const FeedbackForm = ({ searchResult, query, onFeedbackSubmitted }) => {
   );
 };
 
-export default FeedbackForm;
+export default FeedbackForm;

src/components/Search/SearchForm.jsx

@@ -5,10 +5,7 @@ import {
   Button, 
   Typography, 
   Paper, 
-  CircularProgress,
-  Grid,
-  ToggleButton,
-  ToggleButtonGroup
+  CircularProgress
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import styled from '@emotion/styled';
@@ -20,12 +17,11 @@ const StyledPaper = styled(Paper)(({ theme }) => ({
 
 const SearchForm = ({ onSearch, isLoading }) => {
   const [query, setQuery] = useState('');
-  const [modelPreference, setModelPreference] = useState('both');
 
   const handleSubmit = (e) => {
     e.preventDefault();
     if (query.trim()) {
-      onSearch(query, modelPreference);
+      onSearch(query, 'both'); // Always use both models
     }
   };
 
@@ -59,28 +55,6 @@ const SearchForm = ({ onSearch, isLoading }) => {
             ),
           }}
         />
-        
-        <Box sx={{ mt: 2 }}>
-          <Typography variant="subtitle2" gutterBottom>
-            Model Preference:
-          </Typography>
-          <ToggleButtonGroup
-            value={modelPreference}
-            exclusive
-            onChange={(e, newValue) => newValue && setModelPreference(newValue)}
-            aria-label="model preference"
-          >
-            <ToggleButton value="uae" aria-label="uae model">
-              UAE-Large
-            </ToggleButton>
-            <ToggleButton value="bge" aria-label="bge model">
-              BGE-Large
-            </ToggleButton>
-            <ToggleButton value="both" aria-label="both models">
-              Both
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </Box>
       </Box>
     </StyledPaper>
   );

src/components/Search/SearchResults.jsx

@@ -1,49 +1,65 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { 
   Box, 
   Paper, 
   Typography, 
-  Divider, 
-  Chip, 
-  CircularProgress,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  Alert
+  IconButton,
+  Alert,
+  Grid
 } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import styled from '@emotion/styled';
-import FeedbackForm from './FeedbackForm';
+import { saveFeedback } from '../../services/search';
+import { useAuth } from '../../hooks/useAuth';
 
-const StyledPaper = styled(Paper)(({ theme }) => ({
-  padding: theme.spacing(2),
-  marginBottom: theme.spacing(2),
-  backgroundColor: theme.palette.background.paper,
+const ResultCard = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(3),
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
 }));
 
-const ModelChip = styled(Chip)(({ theme, modeltype }) => ({
-  marginLeft: theme.spacing(1),
-  backgroundColor: modeltype === 'WhereIsAI_UAE_Large_V1' 
-    ? theme.palette.primary.light 
-    : theme.palette.secondary.light,
-  color: theme.palette.getContrastText(
-    modeltype === 'WhereIsAI_UAE_Large_V1' 
-      ? theme.palette.primary.light 
-      : theme.palette.secondary.light
-  ),
+const EmojiButton = styled(IconButton)(({ theme }) => ({
+  fontSize: '1.5rem',
+  padding: theme.spacing(1),
 }));
 
 const SearchResults = ({ results, query, isLoading, error }) => {
-  const [expandedResult, setExpandedResult] = useState(null);
-  const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
+  const { user, authTokens } = useAuth();
+  const [shuffledResults, setShuffledResults] = useState([]);
+  const [feedbackStatus, setFeedbackStatus] = useState({});
+  const [savingFeedback, setSavingFeedback] = useState(false);
 
-  if (isLoading) {
-    return (
-      <Box display="flex" justifyContent="center" my={4}>
-        <CircularProgress />
-      </Box>
-    );
-  }
+  // Shuffle and limit to 2 results when results change
+  useEffect(() => {
+    if (results && results.length) {
+      // Get one result from each model type if possible
+      const bgeResult = results.find(r => r.model_type?.includes('BGE'));
+      const uaeResult = results.find(r => r.model_type?.includes('UAE'));
+      
+      let selectedResults = [];
+      if (bgeResult && uaeResult) {
+        selectedResults = [bgeResult, uaeResult];
+      } else {
+        // If we don't have both models, take top 2 (or all if less than 2)
+        selectedResults = results.slice(0, 2);
+      }
+      
+      // Randomly shuffle the order
+      const shuffled = [...selectedResults].sort(() => Math.random() - 0.5);
+      
+      // Assign labels (A and B)
+      setShuffledResults(shuffled.map((result, index) => ({
+        ...result,
+        resultLabel: index === 0 ? 'A' : 'B'
+      })));
+
+      // Reset feedback status
+      setFeedbackStatus({});
+    } else {
+      setShuffledResults([]);
+    }
+  }, [results]);
 
   if (error) {
     return (
@@ -61,49 +77,101 @@ const SearchResults = ({ results, query, isLoading, error }) => {
     );
   }
 
+  const handleReaction = async (result, reaction) => {
+    // Prevent multiple submissions
+    if (feedbackStatus[result.resultLabel] || savingFeedback) return;
+    
+    setSavingFeedback(true);
+    
+    try {
+      // Prepare feedback data
+      const feedbackData = {
+        user_type: 'user',
+        username: user || 'anonymous',
+        query: query || '',
+        retrieved_text: result.content || result.text || JSON.stringify(result),
+        model_type: result.model_type || 'unknown',
+        result_label: result.resultLabel || '',
+        reaction: reaction === '👍' ? 'relevant' : reaction === '👎' ? 'not_relevant' : 'somewhat_relevant',
+        confidence_score: result.similarity || 0, // Send the model confidence score
+      };
+
+      // Save the feedback
+      await saveFeedback(feedbackData, authTokens.access);
+      
+      // Update UI to show feedback was saved
+      setFeedbackStatus(prev => ({
+        ...prev,
+        [result.resultLabel]: { status: 'success', reaction }
+      }));
+      
+    } catch (err) {
+      console.error("Feedback submission error:", err);
+      setFeedbackStatus(prev => ({
+        ...prev,
+        [result.resultLabel]: { status: 'error', message: 'Failed to save feedback' }
+      }));
+    } finally {
+      setSavingFeedback(false);
+    }
+  };
+
   return (
     <Box>
       <Typography variant="h6" gutterBottom>
         Search Results
       </Typography>
       
-      {results.map((result, index) => (
-        <Accordion 
-          key={index} 
-          expanded={expandedResult === index}
-          onChange={() => setExpandedResult(expandedResult === index ? null : index)}
-        >
-          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-            <Box width="100%">
-              <Box display="flex" alignItems="center">
-                <Typography variant="subtitle1" noWrap sx={{ flexGrow: 1 }}>
-                  Excerpt from "{result.model_type.includes('UAE') ? 'UAE' : 'BGE'} Model"
-                </Typography>
-                <ModelChip 
-                  label={`${(result.similarity * 100).toFixed(1)}% match`} 
-                  modeltype={result.model_type}
-                />
-              </Box>
-              <Typography variant="caption" color="textSecondary">
-                Click to {expandedResult === index ? 'collapse' : 'expand'}
+      <Grid container spacing={3} sx={{ mb: 4 }}>
+        {shuffledResults.map((result) => (
+          <Grid item xs={12} md={6} key={result.resultLabel}>
+            <ResultCard elevation={3}>
+              <Typography variant="h6" gutterBottom>
+                Result {result.resultLabel}
+              </Typography>
+              <Typography variant="body1" paragraph sx={{ flexGrow: 1 }}>
+                {result.text}
               </Typography>
-            </Box>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography variant="body1" paragraph>
-              {result.text}
-            </Typography>
-            
-            <Divider sx={{ my: 2 }} />
-            
-            <FeedbackForm 
-              searchResult={result}
-              query={query} 
-              onFeedbackSubmitted={() => setFeedbackSubmitted(true)} 
-            />
-          </AccordionDetails>
-        </Accordion>
-      ))}
+              
+              <Box mt={2}>
+                {feedbackStatus[result.resultLabel]?.status === 'success' ? (
+                  <Typography variant="body2" color="success.main" align="center">
+                    Thank you for your feedback! You selected {feedbackStatus[result.resultLabel].reaction}
+                  </Typography>
+                ) : feedbackStatus[result.resultLabel]?.status === 'error' ? (
+                  <Typography variant="body2" color="error" align="center">
+                    {feedbackStatus[result.resultLabel].message}
+                  </Typography>
+                ) : (
+                  <Box display="flex" justifyContent="center" gap={2}>
+                    <EmojiButton 
+                      onClick={() => handleReaction(result, '👍')} 
+                      disabled={savingFeedback}
+                      aria-label="Good result"
+                    >
+                      👍
+                    </EmojiButton>
+                    <EmojiButton 
+                      onClick={() => handleReaction(result, '🤷‍♂️')} 
+                      disabled={savingFeedback}
+                      aria-label="Somewhat relevant"
+                    >
+                      🤷‍♂️
+                    </EmojiButton>
+                    <EmojiButton 
+                      onClick={() => handleReaction(result, '👎')} 
+                      disabled={savingFeedback}
+                      aria-label="Not relevant"
+                    >
+                      👎
+                    </EmojiButton>
+                  </Box>
+                )}
+              </Box>
+            </ResultCard>
+          </Grid>
+        ))}
+      </Grid>
     </Box>
   );
 };

src/components/UI/ThemeToggle.jsx

@@ -1,23 +1,32 @@
-import React from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import React, { useCallback } from 'react';
+import { IconButton, Tooltip, useTheme as useMuiTheme } from '@mui/material';
 import { Brightness4, Brightness7 } from '@mui/icons-material';
-import { useTheme as useMuiTheme } from '@mui/material/styles';
 import { useTheme } from '../../hooks/useTheme'; 
 
 const ThemeToggle = ({ size = 'medium' }) => {
   const { toggleTheme, isDark } = useTheme();
   const theme = useMuiTheme();
 
+  const handleToggle = useCallback(() => {
+    toggleTheme();
+  }, [toggleTheme]);
+
   return (
     <Tooltip title={`Switch to ${isDark ? 'light' : 'dark'} mode`}>
       <IconButton
-        onClick={toggleTheme}
+        onClick={handleToggle}
         color="inherit"
         size={size}
         aria-label="toggle theme"
+        sx={{
+          transition: 'transform 0.3s ease',
+          '&:hover': {
+            transform: 'rotate(15deg)'
+          }
+        }}
       >
         {isDark ? (
-          <Brightness7 sx={{ color: theme.palette.warning?.main || theme.palette.primary.main }} />
+          <Brightness7 sx={{ color: theme.palette.warning?.main || '#ffc107' }} />
         ) : (
           <Brightness4 sx={{ color: theme.palette.grey[600] }} />
         )}

src/hooks/useSearch.js

@@ -1,6 +1,5 @@
-// src/hooks/useSearch.js
 import { useState, useCallback } from 'react';
-import { searchQuery } from '../services/search';
+import { searchQuery as searchQueryApi } from '../services/search';
 import { useAuth } from './useAuth';
 
 export const useSearch = () => {
@@ -8,6 +7,7 @@ export const useSearch = () => {
   const [results, setResults] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState('');
 
   const handleSearch = useCallback(async (query) => {
     if (!query.trim()) {
@@ -15,16 +15,13 @@ export const useSearch = () => {
       return;
     }
 
+    setSearchQuery(query);
     setIsLoading(true);
     setError(null);
     
     try {
-      const searchResults = await searchQuery(query, authTokens.access);
-      
-      // Combine and sort results by similarity (highest first)
-      const sortedResults = [...searchResults].sort((a, b) => b.similarity - a.similarity);
-      
-      setResults(sortedResults);
+      const searchResults = await searchQueryApi(query, authTokens.access);
+      setResults(searchResults);
     } catch (err) {
       setError(err.message || 'Failed to perform search');
       setResults([]);
@@ -44,5 +41,6 @@ export const useSearch = () => {
     error,
     handleSearch,
     clearResults,
+    searchQuery,
   };
 };

src/hooks/useTheme.js

@@ -23,7 +23,7 @@ const useThemeState = () => {
   const [themeLoading, setThemeLoading] = useState(true);
 
   useEffect(() => {
-    // Apply the theme class to document body
+    // Apply the theme class to document body immediately
     if (isDark) {
       document.body.classList.add('dark-mode');
       document.body.classList.remove('light-mode');

src/pages/Dashboard.jsx

@@ -1,40 +1,21 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
 import { useAuth } from '../hooks/useAuth';
 import { useSearch } from '../hooks/useSearch';
 import SearchForm from '../components/Search/SearchForm';
 import SearchResults from '../components/Search/SearchResults';
-import FeedbackForm from '../components/Search/FeedbackForm';
 import LoadingSpinner from '../components/UI/LoadingSpinner';
 import ErrorMessage from '../components/UI/ErrorMessage';
 import { Box, Typography, Container } from '@mui/material';
 
 const Dashboard = () => {
-  const { isAuthenticated, user } = useAuth();
+  const { user } = useAuth();
   const { 
-    searchQuery, 
     results, 
-    loading, 
+    isLoading,
     error, 
-    handleSearch, 
-    handleFeedbackSubmit 
+    handleSearch,
+    searchQuery
   } = useSearch();
-  const [selectedResult, setSelectedResult] = useState(null);
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (!isAuthenticated) {
-      navigate('/login');
-    }
-  }, [isAuthenticated, navigate]);
-
-  const handleResultSelect = (result) => {
-    setSelectedResult(result);
-  };
-
-  if (!isAuthenticated) {
-    return null;
-  }
 
   return (
     <Container maxWidth="lg" sx={{ py: 4 }}>
@@ -43,28 +24,22 @@ const Dashboard = () => {
       </Typography>
       
       <Box sx={{ mb: 4 }}>
-        <SearchForm onSearch={handleSearch} />
+        <SearchForm 
+          onSearch={handleSearch} 
+          isLoading={isLoading}
+        />
       </Box>
 
-      {loading && <LoadingSpinner />}
+      {isLoading && <LoadingSpinner />}
       {error && <ErrorMessage message={error} />}
 
-      {results && (
+      {results && results.length > 0 && (
         <Box sx={{ mb: 4 }}>
           <SearchResults 
             results={results} 
             query={searchQuery}
-            onSelect={handleResultSelect}
-          />
-        </Box>
-      )}
-
-      {selectedResult && (
-        <Box sx={{ mb: 4 }}>
-          <FeedbackForm 
-            searchResult={selectedResult} 
-            query={searchQuery}
-            onFeedbackSubmitted={handleFeedbackSubmit}
+            isLoading={isLoading}
+            error={error}
           />
         </Box>
       )}

src/styles/theme.js

@@ -1,5 +1,5 @@
 import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import useTheme from '../hooks/useTheme';
 
 const getTheme = (isDark) => createTheme({
@@ -8,16 +8,89 @@ const getTheme = (isDark) => createTheme({
     primary: {
       main: isDark ? '#7986cb' : '#3f51b5',
     },
+    secondary: {
+      main: isDark ? '#ff9800' : '#f50057',
+    },
     background: {
       default: isDark ? '#121212' : '#f9f9f9',
+      paper: isDark ? '#1e1e1e' : '#ffffff',
+    },
+    text: {
+      primary: isDark ? '#ffffff' : '#121212',
+      secondary: isDark ? '#b0bec5' : '#666666',
+    },
+    // Add spiritual palette for specialized components
+    spiritual: {
+      light: isDark ? '#303f9f' : '#e8eaf6',
+      dark: isDark ? '#1a237e' : '#c5cae9',
+      accent: isDark ? '#ffcc80' : '#7986cb',
+      quoteBorder: isDark ? '#5c6bc0' : '#3f51b5',
+    },
+  },
+  typography: {
+    fontFamily: '"Poppins", "Roboto", "Helvetica", "Arial", sans-serif',
+    h1: {
+      fontWeight: 700,
+    },
+    h2: {
+      fontWeight: 600,
+    },
+    h3: {
+      fontWeight: 600,
+    },
+    h4: {
+      fontWeight: 600,
+    },
+    h5: {
+      fontWeight: 500,
+    },
+    h6: {
+      fontWeight: 500,
+    },
+  },
+  shape: {
+    borderRadius: 8,
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          borderRadius: 8,
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 12,
+        },
+      },
     },
   },
 });
 
+// Enhanced ThemeProvider that forces re-render on theme change
 export const ThemeProvider = ({ children }) => {
   const { isDark } = useTheme();
-
+  
+  // Create a new theme whenever isDark changes
   const theme = useMemo(() => getTheme(isDark), [isDark]);
+  
+  // Force a style update when theme changes
+  useEffect(() => {
+    // This helps force Material-UI to reapply styles
+    document.documentElement.style.setProperty(
+      '--mui-palette-mode', 
+      isDark ? 'dark' : 'light'
+    );
+    
+    // Apply additional custom CSS variables if needed
+    document.documentElement.style.setProperty(
+      '--app-background', 
+      isDark ? '#121212' : '#f9f9f9'
+    );
+  }, [isDark]);
 
   return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
 };