front-end routing and missing imports

Dockerfile

@@ -1,4 +1,4 @@
-# Step 1: Build the React Frontend
+#1: Build the React Frontend
 FROM node:20 AS frontend-builder
 WORKDIR /app/frontend
 COPY frontend/package*.json ./
@@ -6,11 +6,11 @@ RUN npm install
 COPY frontend/ ./
 RUN npm run build
 
-# 1. Start with a Python base
+# 2. Start with a Python base
 FROM python:3.11-slim
 WORKDIR /app
 
-# 2. Install system-level audio dependencies
+# 3. Install system-level audio dependencies
 USER root
 RUN apt-get update && apt-get install -y \
     ffmpeg \
@@ -25,23 +25,22 @@ RUN apt-get update && apt-get install -y \
     libasound2-dev \
     libportaudio2 \
     && rm -rf /var/lib/apt/lists/*
-USER user
 
-# 3. Set up a non-root user (Hugging Face Requirement)
-RUN useradd -m -u 1000 user
-USER user
+# 4. Set up a non-root user
+RUN useradd -m -u 1000 user || echo "User already exists"
 ENV HOME=/home/user \
     PATH=/home/user/.local/bin:$PATH
 WORKDIR $HOME/app
+USER user
 
-# 4. Install Python dependencies
+# 5. Install Python dependencies
 COPY --chown=user requirements.txt .
 RUN pip install --no-cache-dir --upgrade pip && \
     pip install --no-cache-dir -r requirements.txt
 
-# 5. Copy the rest of your code
+# 6. Copy the rest of your code
 COPY --chown=user . .
 COPY --from=frontend-builder --chown=user /app/frontend/dist ./frontend/dist
 
-# 6. Run the app on HF's specific port
+# 7. Run the app on HF's specific port
 CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -4,6 +4,7 @@ from agent import TeacherAgent
 from fastapi.staticfiles import StaticFiles
 from contextlib import asynccontextmanager
 import asyncio
+import os
 
 # 1. Global Agent Variable
 teacher_agent = None
@@ -20,12 +21,7 @@ async def lifespan(app: FastAPI):
 
 app = FastAPI(lifespan=lifespan)
 
-# 2. Simple HTML Frontend (Temporary for testing)
-@app.get("/")
-async def get():
-    return FileResponse("index.html")
-
-# 3. The WebSocket "Bridge"
+# 2. The WebSocket "Bridge"
 @app.websocket("/ws")
 async def websocket_endpoint(websocket: WebSocket):
     await websocket.accept()
@@ -37,14 +33,19 @@ async def websocket_endpoint(websocket: WebSocket):
     except Exception as e:
         print(f"⚠️ Error: {e}")
 
-        # 1. Mount the "dist" folder (where Vite builds the files)
+# 3. Serve the React Frontend     
 # Check if the directory exists to avoid errors during local dev
-if os.path.exists("frontend/dist"):
-    app.mount("/", StaticFiles(directory="frontend/dist", html=True), name="static")
+frontend_path = os.path.join(os.getcwd(), "frontend/dist")
 
-# 2. Catch-all route for React Router (if you add pages later)
-@app.get("/{catchall:path}")
-async def read_index(catchall: str):
-    if os.path.exists("frontend/dist/index.html"):
-        return FileResponse("frontend/dist/index.html")
-    return {"message": "Frontend not built yet. Run npm run build."}
+if os.path.exists(frontend_path):
+    # This serves all the CSS/JS files
+    app.mount("/assets", StaticFiles(directory=os.path.join(frontend_path, "assets")), name="assets")
+    
+    # This serves the main React page for the root and any sub-pages
+    @app.get("/{catchall:path}")
+    async def serve_react_app(catchall: str):
+        return FileResponse(os.path.join(frontend_path, "index.html"))
+else:
+    @app.get("/")
+    async def index():
+        return {"error": "Frontend build not found. Please run 'npm run build'."}