Fixed loader stuck, Added a new feedback mechanism, and fixed sound upon analysis

backend/app/ai/meta_classifier.py

@@ -15,14 +15,17 @@ def retrain_from_feedback():
     
     data = db.query(Feedback).all()
     
-    if len(data) < 5:
+    if len(data) < 10:
         print("Not enough feedback to retrain")
+        db.close()
         return
 
     X = []
     y = []
     
-    for row in data:
+    batch = data[:10]
+    
+    for row in batch:
         X.append([row.freq_score, row.cnn_score])
         y.append(1 if row.label == "ai" else 0)
     
@@ -35,6 +38,11 @@ def retrain_from_feedback():
     joblib.dump(model, get_model_path())
     
     print("Model retrained on real feedback data")
+    
+    for row in batch:
+        db.delete(row)
+    db.commit()
+    db.close()
 
 def train_meta_model():
     X = np.array([

backend/app/ai/model_loader.py

@@ -8,13 +8,13 @@ class ModelLoader:
     def __init__(self):
         self.model_dir = Path(settings.MODEL_DIR)
         self.model_dir.mkdir(parents=True, exist_ok=True)
-        self.current_version = "v1.0 (Fallback)"
+        self.current_version = "meta_model.pkl"
 
     def get_latest_model_version(self) -> str:
         try:
             files = [f.name for f in self.model_dir.iterdir() if f.is_file()]
             if not files:
-                logger.warning("No model files found in directory. Using Fallback.")
+                logger.warning("No model files found in directory. Using generated meta_model.")
                 return self.current_version
             
             latest_file = sorted(files)[-1]

backend/app/api/feedback_routes.py

@@ -1,31 +1,38 @@
-from fastapi import APIRouter, Depends
+from fastapi import APIRouter, Depends, HTTPException, BackgroundTasks
 from sqlalchemy.orm import Session
 from app.db.session import get_db
 from app.models.feedback_model import Feedback
 from app.core.auth_dependancy import get_current_user
+from app.schemas.feedback_schema import FeedbackCreate
+from app.ai.meta_classifier import retrain_from_feedback
 
 router = APIRouter(prefix="/feedback", tags=["Feedback"])
 
 @router.post("/")
 def submit_feedback(
-    file_id: int,
-    label: str,
-    confidence: float,
-    freq_score: float,
-    cnn_score: float,
+    payload: FeedbackCreate,
+    background_tasks: BackgroundTasks,
     db: Session = Depends(get_db),
     user = Depends(get_current_user)
 ):
+    # Check if user already submitted feedback for this file
+    existing = db.query(Feedback).filter(Feedback.file_id == payload.file_id, Feedback.user_id == user.id).first()
+    if existing:
+        raise HTTPException(status_code=400, detail="Feedback already submitted for this file.")
+
     fb = Feedback(
-        file_id=file_id,
+        file_id=payload.file_id,
         user_id=user.id,
-        label=label,
-        confidence=confidence,
-        freq_score=freq_score,
-        cnn_score=cnn_score
+        label=payload.label,
+        confidence=payload.confidence,
+        freq_score=payload.freq_score,
+        cnn_score=payload.cnn_score
     )
     
     db.add(fb)
     db.commit()
+
+    # Trigger async retraining check
+    background_tasks.add_task(retrain_from_feedback)
     
     return {"message": "Feedback saved"}

backend/app/schemas/feedback_schema.py

@@ -0,0 +1,9 @@
+from pydantic import BaseModel
+from typing import Optional
+
+class FeedbackCreate(BaseModel):
+    file_id: int
+    label: str
+    confidence: float
+    freq_score: float
+    cnn_score: float

frontend/app/dashboard/page.tsx

@@ -137,7 +137,7 @@ export default function DashboardPage() {
 
     useEffect(() => {
         if (!loading) {
-            window.dispatchEvent(new Event('app-page-loaded'));
+            (window as any).__PAGE_LOADED = true;
         }
     }, [loading]);
 

frontend/app/login/page.tsx

@@ -19,6 +19,7 @@ export default function LoginPage() {
 
     // OAuth Token Intake
     useEffect(() => {
+        (window as any).__PAGE_LOADED = true;
         const token = new URLSearchParams(window.location.search).get('access_token');
         if (token) {
             localStorage.setItem('access_token', token);
@@ -90,7 +91,12 @@ export default function LoginPage() {
                 setLoading(false);
             }
         } catch (err: any) {
-            setError(err.response?.data?.detail || "Authentication Failed");
+            const detail = err.response?.data?.detail;
+            if (Array.isArray(detail)) {
+                setError(detail[0]?.msg || "Validation Error");
+            } else {
+                setError(detail || "Authentication Failed");
+            }
             setLoading(false);
         }
     };

frontend/app/profile/page.tsx

@@ -113,7 +113,7 @@ export default function ProfilePage() {
 
     useEffect(() => {
         if (!loading) {
-            window.dispatchEvent(new Event('app-page-loaded'));
+            (window as any).__PAGE_LOADED = true;
         }
     }, [loading]);
 

frontend/app/result/[id]/page.tsx

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import axios from "axios";
-import { ArrowLeft, ArrowRight, Network, Activity, Layers, Hash, X } from "lucide-react";
+import { ArrowLeft, ArrowRight, Network, Activity, Layers, Hash, X, ThumbsUp, ThumbsDown } from "lucide-react";
 import UploadZone from "@/components/upload/UploadZone";
 import Navbar from "@/components/shared/Navbar";
 import { useAuth } from "@/contexts/AuthContext";
@@ -39,6 +39,12 @@ export default function ResultPage() {
     const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
     const [mediaLoaded, setMediaLoaded] = useState(false);
     const [heatmapLoaded, setHeatmapLoaded] = useState(false);
+    
+    // Feedback States
+    const [showFeedbackPopup, setShowFeedbackPopup] = useState(false);
+    const [showFeedbackModal, setShowFeedbackModal] = useState(false);
+    const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
+    const [feedbackLoading, setFeedbackLoading] = useState(false);
 
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
@@ -115,7 +121,7 @@ export default function ResultPage() {
 
     useEffect(() => {
         if (!loading) {
-            window.dispatchEvent(new Event('app-page-loaded'));
+            (window as any).__PAGE_LOADED = true;
         }
     }, [loading]);
 
@@ -207,6 +213,33 @@ export default function ResultPage() {
     const isVideo = fileData?.type?.startsWith("video/");
     const allLoaded = isVideo ? mediaLoaded : (mediaLoaded && (!heatmapUrl || heatmapLoaded));
 
+    useEffect(() => {
+        if (allLoaded && isAuthenticated && !feedbackSubmitted && verdictStatus) {
+            const timer = setTimeout(() => setShowFeedbackPopup(true), 2000);
+            return () => clearTimeout(timer);
+        }
+    }, [allLoaded, isAuthenticated, feedbackSubmitted, verdictStatus]);
+
+    const submitFeedback = async (selectedLabel: string) => {
+        setFeedbackLoading(true);
+        try {
+            await apiLayer.submitFeedback({
+                file_id: parseInt(fileId),
+                label: selectedLabel.toLowerCase(),
+                confidence: confidenceVal || 0,
+                freq_score: freqScore || 0,
+                cnn_score: cnnScore || 0
+            });
+            setFeedbackSubmitted(true);
+            setShowFeedbackPopup(false);
+            setShowFeedbackModal(false);
+        } catch (err: any) {
+            console.error("Feedback error", err);
+        } finally {
+            setFeedbackLoading(false);
+        }
+    };
+
     return (
         <main className="min-h-screen bg-[var(--theme-bg)] text-[var(--theme-text)] selection:bg-[var(--theme-text)]/20 selection:text-[var(--theme-text)] pb-32 !cursor-none relative overflow-x-hidden">
             <style dangerouslySetInnerHTML={{__html: `
@@ -514,6 +547,94 @@ export default function ResultPage() {
                     </AnimatePresence>
                 </div>
             </div>
+
+            {/* Sticky Floating Feedback Popup */}
+            <AnimatePresence>
+                {showFeedbackPopup && !showFeedbackModal && !feedbackSubmitted && (
+                    <motion.div 
+                        initial={{ opacity: 0, x: 50, y: 0 }}
+                        animate={{ opacity: 1, x: 0, y: 0 }}
+                        exit={{ opacity: 0, x: 50, scale: 0.95 }}
+                        className="fixed right-6 bottom-6 z-40 bg-[var(--theme-glass)] backdrop-blur-2xl border border-[var(--theme-border)] shadow-[0_10px_40px_rgba(0,0,0,0.8)] rounded-2xl p-4 md:p-6 w-80 max-w-[calc(100vw-32px)] flex flex-col gap-3 !cursor-none group"
+                    >
+                        <button onClick={() => setShowFeedbackPopup(false)} className="absolute top-3 right-3 text-theme-text/40 hover:text-[var(--theme-text)] transition !cursor-none">
+                            <X className="w-4 h-4" />
+                        </button>
+                        <h4 className="text-sm font-bold uppercase tracking-widest text-[var(--theme-text)]">Rate Analysis</h4>
+                        <p className="text-xs text-[#d0c4bb]/70 leading-relaxed">
+                            Did the Spotix engine analyze this media correctly? Your feedback improves the core model.
+                        </p>
+                        <div className="flex gap-3 mt-2">
+                            <button 
+                                onClick={() => submitFeedback(verdictStatus)} 
+                                disabled={feedbackLoading}
+                                className="flex-1 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border border-emerald-500/20 rounded-lg py-2 flex justify-center items-center gap-2 transition !cursor-none disabled:opacity-50"
+                            >
+                                <ThumbsUp className="w-4 h-4" />
+                                <span className="text-xs font-bold uppercase tracking-wider">Accurate</span>
+                            </button>
+                            <button 
+                                onClick={() => { setShowFeedbackPopup(false); setShowFeedbackModal(true); }}
+                                disabled={feedbackLoading}
+                                className="flex-1 bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 rounded-lg py-2 flex justify-center items-center gap-2 transition !cursor-none disabled:opacity-50"
+                            >
+                                <ThumbsDown className="w-4 h-4" />
+                                <span className="text-xs font-bold uppercase tracking-wider">Incorrect</span>
+                            </button>
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            {/* Blurred Thumbs Down Modal */}
+            <AnimatePresence>
+                {showFeedbackModal && (
+                    <motion.div 
+                        initial={{ opacity: 0, backdropFilter: 'blur(0px)' }} 
+                        animate={{ opacity: 1, backdropFilter: 'blur(20px)' }} 
+                        exit={{ opacity: 0, backdropFilter: 'blur(0px)' }}
+                        className="fixed inset-0 z-[100] bg-black/60 flex justify-center items-center p-4 !cursor-none"
+                        onClick={(e) => { if (e.target === e.currentTarget) setShowFeedbackModal(false); }}
+                    >
+                        <motion.div 
+                            initial={{ scale: 0.95, y: 20 }}
+                            animate={{ scale: 1, y: 0 }}
+                            exit={{ scale: 0.95, y: 20 }}
+                            className="w-full max-w-md bg-[var(--theme-bg)] border border-[var(--theme-border)] shadow-[0_0_50px_rgba(0,0,0,0.8)] rounded-3xl p-8 relative flex flex-col items-center text-center"
+                        >
+                            <button onClick={() => setShowFeedbackModal(false)} className="absolute top-6 right-6 text-theme-text/40 hover:text-[var(--theme-text)] transition group z-10 !cursor-none">
+                                <X className="w-6 h-6 group-hover:rotate-90 transition-transform" />
+                            </button>
+
+                            <div className="w-16 h-16 rounded-full bg-rose-500/10 flex items-center justify-center mb-6">
+                                <ThumbsDown className="w-8 h-8 text-rose-500" />
+                            </div>
+
+                            <h3 className="text-xl tracking-widest font-bold mb-3 font-sans uppercase">
+                                Flag Incorrect Result
+                            </h3>
+                            
+                            <p className="text-[#d0c4bb]/70 text-sm leading-relaxed mb-8">
+                                Select the correct classification below. This data will be used to automatically retrain the Spotix Meta-Classifier.
+                            </p>
+
+                            <div className="flex flex-col gap-3 w-full">
+                                {['AI', 'Suspicious', 'Real'].map((lbl) => (
+                                    <button 
+                                        key={lbl}
+                                        onClick={() => submitFeedback(lbl)}
+                                        disabled={feedbackLoading}
+                                        className={`w-full py-4 rounded-xl relative overflow-hidden group dash-border transition !cursor-none font-bold tracking-widest text-sm uppercase ${lbl === 'AI' ? 'bg-red-500/10 text-red-400 hover:bg-red-500/20 border border-red-500/20' : lbl === 'Suspicious' ? 'bg-amber-500/10 text-amber-400 hover:bg-amber-500/20 border border-amber-500/20' : 'bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 border border-emerald-500/20'}`}
+                                    >
+                                        It was actually {lbl}
+                                    </button>
+                                ))}
+                            </div>
+                        </motion.div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
             </>
             )}
         </main>

frontend/components/shared/PageLoader.tsx

@@ -21,17 +21,13 @@ export default function PageLoader({ children }: { children: React.ReactNode })
         setLoadProgress(0);
 
         let progress = 0;
-        let isPageActuallyLoaded = false;
+        // Reset the flag to false on path change
+        (window as any).__PAGE_LOADED = false;
         
-        const handlePageLoaded = () => {
-            isPageActuallyLoaded = true;
-        };
-        window.addEventListener('app-page-loaded', handlePageLoaded);
-
         const interval = setInterval(() => {
             if (progress < 90) {
                 progress += Math.random() * 15 + 5;
-            } else if (isPageActuallyLoaded) {
+            } else if ((window as any).__PAGE_LOADED) {
                 progress = 100;
             }
 
@@ -46,7 +42,6 @@ export default function PageLoader({ children }: { children: React.ReactNode })
 
         return () => {
             clearInterval(interval);
-            window.removeEventListener('app-page-loaded', handlePageLoaded);
         };
     }, [pathname]);
 

frontend/lib/api.ts

@@ -37,7 +37,7 @@ export const apiLayer = {
     updateUsername: (username: string) => api.put('/profile/username', { username }),
 
     // Feedback
-    submitFeedback: (data: { issue_type: string, message: string }) => api.post('/issues/', data),
+    submitFeedback: (data: { file_id: number, label: string, confidence: number, freq_score: number, cnn_score: number }) => api.post('/feedback/', data),
 
     // Account deletion
     deleteAccount: () => api.delete('/users/delete')