Improved the frontend to support gradcam

frontend/src/Components/UploadBox.js

@@ -6,6 +6,9 @@ export default function UploadBox() {
   const [dragActive, setDragActive] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [result, setResult] = useState(null);
+  const [explanation, setExplanation] = useState(null);
+  const [gradcamImage, setGradcamImage] = useState(null);
+  const [loadingExplanation, setLoadingExplanation] = useState(false);
   const fileInputRef = useRef(null);
 
   const handleDragOver = e => {
@@ -40,20 +43,45 @@ export default function UploadBox() {
   const uploadFile = async (file) => {
     setUploading(true);
     setResult(null);
+    setExplanation(null);
+    setGradcamImage(null);
 
     const formData = new FormData();
-    formData.append('video', file);
+    formData.append('file', file);
 
     try {
-      // Connect to the Flask API running on port 5000
-      const response = await fetch('http://localhost:5000/api/detect', {
+      // Determine endpoint based on file type
+      const isVideo = file.type.startsWith('video/');
+      const endpoint = isVideo ? 'analyze/video' : 'analyze/image';
+      
+      // Connect to the Flask API running on port 8000
+      const response = await fetch(`http://localhost:8000/${endpoint}`, {
         method: 'POST',
         body: formData,
       });
 
       if (response.ok) {
         const data = await response.json();
-        setResult(data);
+        // Transform the response to match the frontend's expected format
+        const transformedResult = {
+          is_deepfake: data.label === 'fake',
+          confidence: data.label === 'fake' ? data.confidence : (1 - data.confidence), // How confident we are in the prediction
+          fake_probability: data.confidence, // Raw fake probability from model
+          faces_detected: data.faces_detected || 1,
+          processing_time: data.processing_time || 'N/A',
+          models_used: [`${data.details}`],
+          file_type: isVideo ? 'video' : 'image',
+          fake_frames: data.fake_frames || [], // Frames detected as fake
+          gradcam_image: data.gradcam_image || null // Base64 encoded Grad-CAM image
+        };
+        setResult(transformedResult);
+        
+        if (data.gradcam_image) {
+          setGradcamImage(data.gradcam_image);
+        }
+        
+        // Get AI explanation after getting the result
+        generateExplanation(transformedResult);
       } else {
         const errorData = await response.json();
         setResult({ error: errorData.error || 'Detection failed' });
@@ -61,13 +89,86 @@ export default function UploadBox() {
     } catch (error) {
       console.error('Backend error:', error);
       setResult({ 
-        error: 'Backend connection failed. Please ensure the Flask server is running on port 5000.' 
+        error: 'Backend connection failed. Please ensure the Flask server is running on port 8000.' 
       });
     } finally {
       setUploading(false);
     }
   };
 
+  const generateExplanation = async (analysisResult) => {
+    setLoadingExplanation(true);
+    try {
+      const prompt = `Based on this deepfake analysis result, provide a clear explanation of why this ${analysisResult.file_type} was classified as ${analysisResult.is_deepfake ? 'fake' : 'real'}:
+
+- Status: ${analysisResult.is_deepfake ? 'DEEPFAKE DETECTED' : 'APPEARS AUTHENTIC'}
+- Confidence: ${(analysisResult.confidence * 100).toFixed(1)}%
+- Fake Probability: ${(analysisResult.fake_probability * 100).toFixed(1)}%
+- File Type: ${analysisResult.file_type}
+${analysisResult.fake_frames.length > 0 ? `- Suspicious Frames: ${analysisResult.fake_frames.join(', ')}` : ''}
+
+Please explain in simple terms what factors likely contributed to this classification and what users should look for when detecting deepfakes.`;
+
+      const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${process.env.NEXT_PUBLIC_OPENROUTER_API_KEY}`,
+          'HTTP-Referer': window.location.origin,
+          'X-Title': 'UnMask Deepfake Detector',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          model: 'meta-llama/llama-3.2-3b-instruct:free',
+          messages: [
+            {
+              role: 'system',
+              content: 'You are an AI expert in deepfake detection. Provide clear, educational explanations about deepfake analysis results in 2-3 sentences.'
+            },
+            {
+              role: 'user',
+              content: prompt
+            }
+          ],
+          max_tokens: 150,
+          temperature: 0.7,
+        }),
+      });
+
+      console.log('OpenRouter response status:', response.status);
+      
+      if (response.ok) {
+        const data = await response.json();
+        console.log('OpenRouter full response:', JSON.stringify(data, null, 2));
+        
+        if (data.choices && Array.isArray(data.choices) && data.choices.length > 0) {
+          const firstChoice = data.choices[0];
+          console.log('First choice:', firstChoice);
+          
+          if (firstChoice.message && firstChoice.message.content) {
+            const content = firstChoice.message.content.trim();
+            console.log('Extracted content:', content);
+            setExplanation(content);
+          } else {
+            console.error('Missing message content in choice:', firstChoice);
+            setExplanation('AI explanation received but content was empty.');
+          }
+        } else {
+          console.error('No choices in response:', data);
+          setExplanation('AI explanation service returned no results.');
+        }
+      } else {
+        const errorData = await response.text();
+        console.error('OpenRouter error:', response.status, errorData);
+        setExplanation(`Unable to generate AI explanation (Error ${response.status}). Please check your API key.`);
+      }
+    } catch (error) {
+      console.error('Explanation generation error:', error);
+      setExplanation('Unable to generate AI explanation at this time.');
+    } finally {
+      setLoadingExplanation(false);
+    }
+  };
+
   return (
     <div className={styles.container}>
       <div
@@ -125,30 +226,59 @@ export default function UploadBox() {
                   </p>
                   <p><strong>Confidence:</strong> {(result.confidence * 100).toFixed(1)}%</p>
                   <p><strong>Fake Probability:</strong> {(result.fake_probability * 100).toFixed(1)}%</p>
+                  <p><strong>File Type:</strong> {result.file_type}</p>
                 </div>
                 
-                {result.faces_detected && (
-                  <div className={styles.details}>
-                    <h4>📊 Analysis Details</h4>
-                    <p><strong>Faces Detected:</strong> {result.faces_detected}</p>
-                    <p><strong>Processing Time:</strong> {result.processing_time}s</p>
-                    {result.models_used && (
-                      <p><strong>Models Used:</strong> {result.models_used.join(', ')}</p>
-                    )}
+                
+
+                {/* Frame Analysis for Videos */}
+                {result.file_type === 'video' && result.fake_frames && result.fake_frames.length > 0 && (
+                  <div className={styles.frameAnalysis}>
+                    <h4>🎬 Suspicious Frames Detected</h4>
+                    <p>The following frames were flagged as potentially manipulated:</p>
+                    <div className={styles.frameList}>
+                      {result.fake_frames.map((frame, index) => (
+                        <div key={index} className={styles.frameItem}>
+                          Frame {frame}
+                        </div>
+                      ))}
+                    </div>
                   </div>
                 )}
-                
-                {result.individual_predictions && (
-                  <div className={styles.modelResults}>
-                    <h4>🤖 Individual Model Results</h4>
-                    {Object.entries(result.individual_predictions).map(([model, pred]) => (
-                      <div key={model} className={styles.modelResult}>
-                        <span className={styles.modelName}>{model}:</span>
-                        <span className={pred.is_fake ? styles.fake : styles.real}>
-                          {pred.is_fake ? 'Fake' : 'Real'} ({(pred.confidence * 100).toFixed(1)}%)
-                        </span>
+
+                {/* Grad-CAM Visualization with AI Explanation */}
+                {gradcamImage && (
+                  <div className={styles.gradcam}>
+                    <h4>🔍 Visual Explanation (Grad-CAM)</h4>
+                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '32px' }}>
+                      <div>
+                        <img 
+                          src={`data:image/png;base64,${gradcamImage}`} 
+                          alt="Grad-CAM visualization" 
+                          className={styles.gradcamImage}
+                        />
+                        <p style={{ marginTop: '8px', color: '#92400e', fontWeight: 500 }}>
+                          <span style={{ fontWeight: 600 }}>Red areas</span> show regions the AI focused on when making its decision.
+                        </p>
+                      </div>
+                      <div style={{ flex: 1 }}>
+                        <h4 style={{ margin: '0 0 8px 0', color: '#0c4a6e', fontSize: '1.05rem', fontWeight: 600 }}>🤖 AI Explanation</h4>
+                        {loadingExplanation ? (
+                          <div className={styles.loadingExplain}>
+                            <div className={styles.loadingSpinner}></div>
+                            <span>Generating explanation...</span>
+                          </div>
+                        ) : explanation ? (
+                          <div style={{ background: '#f0f9ff', padding: '12px 16px', borderRadius: '8px', border: '1px solid #0ea5e9', color: '#164e63', fontSize: '0.98rem', fontWeight: 500, lineHeight: 1.7 }}>
+                            {explanation.split(/\n|\r/).map((line, idx) => (
+                              <p key={idx} style={{ margin: '8px 0' }}>{line.trim()}</p>
+                            ))}
+                          </div>
+                        ) : (
+                          <p>AI explanation will appear here after analysis.</p>
+                        )}
                       </div>
-                    ))}
+                    </div>
                   </div>
                 )}
               </div>

frontend/src/Components/UploadBox.module.css

@@ -102,73 +102,156 @@
   padding: 20px;
   border-radius: 8px;
   border: 1px solid #e5e7eb;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 }
 
 .mainResult p {
-  margin: 8px 0;
+  margin: 12px 0;
   font-size: 1.1rem;
+  color: #1f2937;
+  font-weight: 500;
 }
 
-.details {
-  background: #f8fafc;
-  padding: 16px;
+.mainResult strong {
+  color: #111827;
+  font-weight: 600;
+}
+
+
+
+.fake {
+  color: #dc2626;
+  font-weight: 600;
+  background: #fee2e2;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.real {
+  color: #16a34a;
+  font-weight: 600;
+  background: #dcfce7;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+/* New styles for explainability and frame analysis */
+.explainability {
+  background: #f0f9ff;
+  padding: 20px;
   border-radius: 8px;
-  border: 1px solid #e2e8f0;
+  border: 1px solid #0ea5e9;
+  margin-top: 16px;
+  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
 }
 
-.details h4 {
+.explainability h4 {
   margin: 0 0 12px 0;
-  color: #374151;
+  color: #0c4a6e;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.details p {
-  margin: 6px 0;
+.explainability p {
+  margin: 8px 0;
+  color: #164e63;
+  line-height: 1.6;
   font-size: 0.95rem;
-  color: #6b7280;
+  font-weight: 500;
 }
 
-.modelResults {
-  background: #fefefe;
+.gradcam {
+  background: #fefce8;
   padding: 16px;
   border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #eab308;
+  margin-top: 16px;
 }
 
-.modelResults h4 {
+.gradcam h4 {
   margin: 0 0 12px 0;
-  color: #374151;
+  color: #92400e;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+.gradcam p {
+  margin: 8px 0;
+  color: #92400e;
+  line-height: 1.6;
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+.gradcamImage {
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+  border-radius: 8px;
+  border: 2px solid #d97706;
+  margin: 12px 0;
+}
+
+.frameAnalysis {
+  background: #fef3f2;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #f87171;
+  margin-top: 16px;
 }
 
-.modelResult {
+.frameAnalysis h4 {
+  margin: 0 0 12px 0;
+  color: #991b1b;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px solid #f3f4f6;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 1.1rem;
 }
 
-.modelResult:last-child {
-  border-bottom: none;
+.frameAnalysis p {
+  margin: 8px 0;
+  color: #991b1b;
+  line-height: 1.6;
+  font-size: 0.95rem;
+  font-weight: 500;
 }
 
-.modelName {
-  font-weight: 500;
-  color: #4b5563;
-  text-transform: capitalize;
+.frameList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
 }
 
-.fake {
-  color: #dc2626;
-  font-weight: 600;
+.frameItem {
   background: #fee2e2;
-  padding: 4px 8px;
-  border-radius: 4px;
+  color: #991b1b;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  border: 1px solid #fecaca;
 }
 
-.real {
-  color: #16a34a;
-  font-weight: 600;
-  background: #dcfce7;
-  padding: 4px 8px;
-  border-radius: 4px;
+.loadingExplain {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #6b7280;
+  font-style: italic;
+}
+
+.loadingSpinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #0070f3;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
 }