fix app.js and index.html

.gitignore

@@ -2,5 +2,5 @@ __pycache__/
 *.py[cod]
 .env
 temp_* 
-*.txt
+note*.txt
 *.pdf

Dockerfile

@@ -1,15 +1,11 @@
-FROM python:3.9-slim
+FROM python:3.9
 
-WORKDIR /app
+WORKDIR /code
 
-# Copy requirements from root directory
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
+COPY ./requirements.txt /code/requirements.txt
+COPY ./backend /code/backend
+COPY ./frontend/dist /code/frontend/dist
 
-# Copy backend files  
-COPY backend/ .
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
 
-# Copy frontend files
-COPY frontend/dist/ ./static/
-
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]
+CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "7860"]

backend/main.py

@@ -1,11 +1,17 @@
 from fastapi import FastAPI, UploadFile, File, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse
 from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
 from pydantic import BaseModel
 from typing import List
 import os
 from dotenv import load_dotenv
+import tempfile
+import logging
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
 
 # Import our local utilities instead of aimakerspace
 from text_utils import CharacterTextSplitter, TextFileLoader, PDFLoader
@@ -16,10 +22,10 @@ load_dotenv()
 
 app = FastAPI()
 
-# Configure CORS
+# Configure CORS - update to be more specific
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],
+    allow_origins=["http://localhost:8000", "http://localhost:3000", "http://127.0.0.1:8000", "http://127.0.0.1:3000"],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -53,11 +59,11 @@ class QueryRequest(BaseModel):
 @app.post("/upload")
 async def upload_file(file: UploadFile = File(...)):
     try:
-        # Save file temporarily
-        file_path = f"temp_{file.filename}"
-        with open(file_path, "wb") as f:
+        # Use tempfile instead of direct file writing
+        with tempfile.NamedTemporaryFile(delete=False) as temp_file:
             content = await file.read()
-            f.write(content)
+            temp_file.write(content)
+            file_path = temp_file.name
 
         # Process file
         loader = PDFLoader(file_path) if file.filename.lower().endswith('.pdf') else TextFileLoader(file_path)
@@ -74,7 +80,7 @@ async def upload_file(file: UploadFile = File(...)):
         vector_dbs[session_id] = vector_db
 
         # Cleanup
-        os.remove(file_path)
+        os.unlink(file_path)
 
         return {"session_id": session_id, "message": "File processed successfully"}
 
@@ -84,11 +90,14 @@ async def upload_file(file: UploadFile = File(...)):
 @app.post("/query")
 async def query(request: QueryRequest):
     try:
+        logger.info(f"Received query request with session_id: {request.session_id}")
         vector_db = vector_dbs.get(request.session_id)
         if not vector_db:
+            logger.error(f"Session not found: {request.session_id}")
             raise HTTPException(status_code=404, detail="Session not found")
 
         # Retrieve context
+        logger.info(f"Searching for context with query: {request.query}")
         context_list = await vector_db.search_by_text(request.query, k=4)
         context_prompt = "\n".join([str(context[0]) for context in context_list])
 
@@ -100,9 +109,11 @@ async def query(request: QueryRequest):
         )
 
         # Get response
+        logger.info("Getting response from OpenAI")
         response = await chat_openai.acomplete(
             [formatted_system_prompt, formatted_user_prompt]
         )
+        logger.info(f"Got response: {response}")
 
         return {
             "answer": str(response),
@@ -110,6 +121,7 @@ async def query(request: QueryRequest):
         }
 
     except Exception as e:
+        logger.error(f"Error processing query: {str(e)}", exc_info=True)
         raise HTTPException(status_code=500, detail=str(e))
 
 # Optional: Cleanup endpoint
@@ -120,9 +132,14 @@ async def cleanup_session(session_id: str):
         return {"message": "Session cleaned up successfully"}
     raise HTTPException(status_code=404, detail="Session not found")
 
-# Serve static files from static directory
-app.mount("/static", StaticFiles(directory="static"), name="static")
+# Keep the root endpoint
+# @app.get("/")
+# async def read_root():
+#     return JSONResponse(content={"message": "API is running"})
+
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy"}
 
-@app.get("/")
-async def read_root():
-    return FileResponse('static/index.html') 
+# Move this to the end of the file, after all routes
+app.mount("/", StaticFiles(directory="../frontend/dist", html=True), name="static") 

frontend/dist/index.html

@@ -14,17 +14,17 @@
             <h2>Upload Document</h2>
             <input type="file" id="fileInput" accept=".txt,.pdf">
             <button id="uploadButton" onclick="uploadFile()">Upload</button>
-            <span id="uploadSpinner" class="spinner">Processing...</span>
+            <span id="uploadSpinner" class="spinner" style="display: none;">Processing...</span>
         </div>
 
-        <div id="querySection" class="query-section">
+        <div class="query-section">
             <h2>Ask a Question</h2>
             <textarea id="queryInput" placeholder="Enter your question here..."></textarea>
             <button id="queryButton" onclick="submitQuery()">Submit Query</button>
             <span id="querySpinner" class="spinner">Processing...</span>
         </div>
 
-        <div id="responseSection">
+        <div class="response-section">
             <h2>Response</h2>
             <div id="answer"></div>
             <div class="switch-container">

frontend/dist/js/app.js

@@ -28,7 +28,7 @@ async function uploadFile() {
     const formData = new FormData();
     formData.append('file', file);
 
-    uploadSpinner.style.display = 'inline';
+    setLoading(true, 'upload');
     
     try {
         const response = await fetch('/upload', {
@@ -38,25 +38,23 @@ async function uploadFile() {
         
         const data = await response.json();
         sessionId = data.session_id;
-        document.getElementById('querySection').style.display = 'block';
         
     } catch (error) {
         alert('Error uploading file: ' + error);
     } finally {
-        uploadSpinner.style.display = 'none';
+        setLoading(false, 'upload');
     }
 }
 
 async function submitQuery() {
-    if (!sessionId) {
-        alert('Please upload a document first');
+    const queryInput = document.getElementById('queryInput');
+    
+    if (!queryInput.value.trim()) {
+        alert('Please enter a question');
         return;
     }
 
-    const queryInput = document.getElementById('queryInput');
-    const querySpinner = document.getElementById('querySpinner');
-    
-    querySpinner.style.display = 'inline';
+    setLoading(true, 'query');
     
     try {
         const response = await fetch('/query', {
@@ -71,13 +69,31 @@ async function submitQuery() {
         });
         
         const data = await response.json();
-        document.getElementById('answer').textContent = data.answer;
+        
+        // Show response section and its components
+        const responseSection = document.querySelector('.response-section');
+        responseSection.style.display = 'block';
+        
+        // Update and show answer
+        const answerElement = document.getElementById('answer');
+        answerElement.textContent = data.answer;
+        answerElement.style.display = 'block';
+        
+        // Show switch container
+        document.querySelector('.switch-container').style.display = 'block';
+        
+        // Update context
         document.getElementById('context').innerHTML = data.context.join('<br><br>');
         
+        // Show context section if toggle is checked
+        if (document.getElementById('contextToggle').checked) {
+            document.getElementById('contextSection').style.display = 'block';
+        }
+        
     } catch (error) {
         alert('Error submitting query: ' + error);
     } finally {
-        querySpinner.style.display = 'none';
+        setLoading(false, 'query');
     }
 }
 
@@ -86,5 +102,18 @@ function toggleContext() {
     contextSection.style.display = document.getElementById('contextToggle').checked ? 'block' : 'none';
 }
 
-// Initially hide the query section
-document.getElementById('querySection').style.display = 'none'; 
+// Initialize UI state
+document.addEventListener('DOMContentLoaded', function() {
+    // Hide all spinners by default
+    const spinners = document.querySelectorAll('.spinner');
+    spinners.forEach(spinner => {
+        spinner.style.display = 'none';
+    });
+    
+    // Show response section but hide context section
+    document.querySelector('.response-section').style.display = 'block';
+    document.getElementById('contextSection').style.display = 'none';
+    
+    // Show switch container
+    document.querySelector('.switch-container').style.display = 'block';
+}); 

frontend/src/App.js

@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import { 
+  Container, 
+  Typography, 
+  Button, 
+  TextField, 
+  Box,
+  Paper
+} from '@mui/material';
+
+function App() {
+  const [file, setFile] = useState(null);
+  const [question, setQuestion] = useState('');
+  const [response, setResponse] = useState('');
+  const [sessionId, setSessionId] = useState('');
+  const [error, setError] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const handleFileUpload = async (event) => {
+    const formData = new FormData();
+    formData.append('file', event.target.files[0]);
+    setError('');
+    setIsProcessing(true);
+
+    try {
+      const response = await fetch('http://localhost:8000/upload', {
+        method: 'POST',
+        body: formData,
+      });
+      const data = await response.json();
+      if (data.session_id) {
+        setSessionId(data.session_id);
+        console.log('Upload successful, session ID:', data.session_id);
+      } else {
+        setError('Upload failed: No session ID received');
+        console.error('Upload response:', data);
+      }
+    } catch (error) {
+      setError('Upload failed: ' + error.message);
+      console.error('Upload error:', error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleQuestionSubmit = async () => {
+    if (!sessionId) {
+      setError('Please upload a document first');
+      return;
+    }
+    setError('');
+    setResponse(''); // Clear previous response
+
+    try {
+      console.log('Sending query with session ID:', sessionId);
+      const response = await fetch('http://localhost:8000/query', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+        },
+        body: JSON.stringify({
+          session_id: sessionId,
+          query: question
+        }),
+      });
+      
+      console.log('Response status:', response.status);
+      const responseText = await response.text();
+      console.log('Raw response:', responseText);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}, body: ${responseText}`);
+      }
+      
+      const data = JSON.parse(responseText);
+      console.log('Parsed response data:', data);
+      
+      if (data.answer) {
+        console.log('Setting response:', data.answer);
+        setResponse(data.answer);
+        console.log('Response state after setting:', data.answer);
+      } else {
+        setError('No answer received from the server');
+        console.error('Unexpected response format:', data);
+      }
+    } catch (error) {
+      setError('Query failed: ' + error.message);
+      console.error('Query error:', error);
+    }
+  };
+
+  return (
+    <Container maxWidth="md">
+      <Box sx={{ my: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          RAG Application
+        </Typography>
+        
+        <Paper sx={{ p: 2, mb: 2 }}>
+          <Typography variant="h6" gutterBottom>
+            Upload Document
+          </Typography>
+          <Button
+            variant="contained"
+            component="label"
+            disabled={isProcessing}
+          >
+            {isProcessing ? 'Processing...' : 'Choose File'}
+            <input
+              type="file"
+              hidden
+              onChange={handleFileUpload}
+              disabled={isProcessing}
+            />
+          </Button>
+          <Typography sx={{ mt: 1, color: isProcessing ? 'info.main' : 'success.main' }}>
+            {isProcessing ? 'Processing document...' : 
+             sessionId ? 'Document uploaded and processed successfully!' : 
+             'No document uploaded yet'}
+          </Typography>
+        </Paper>
+
+        <Paper sx={{ p: 2, mb: 2 }}>
+          <Typography variant="h6" gutterBottom>
+            Ask a Question
+          </Typography>
+          <TextField
+            fullWidth
+            multiline
+            rows={2}
+            value={question}
+            onChange={(e) => setQuestion(e.target.value)}
+            sx={{ mb: 2 }}
+            placeholder="Enter your question here..."
+          />
+          <Button 
+            variant="contained" 
+            onClick={handleQuestionSubmit}
+            disabled={!sessionId || isProcessing}
+          >
+            Submit Query
+          </Button>
+        </Paper>
+
+        <Paper sx={{ p: 2 }}>
+          <Typography variant="h6" gutterBottom>
+            Response
+          </Typography>
+          
+          <Box sx={{ mb: 2 }}>
+            {error && (
+              <Typography sx={{ color: 'error.main', mb: 2 }}>
+                {error}
+              </Typography>
+            )}
+            
+            <Typography sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+              {response || "No response yet. Please upload a document and ask a question."}
+            </Typography>
+          </Box>
+        </Paper>
+      </Box>
+    </Container>
+  );
+}
+
+export default App; 

requirements.txt

@@ -6,5 +6,4 @@ openai
 pydantic
 pypdf
 langchain
-faiss-cpu 
 PyPDF2