Update frontend/src/components/ResultsPanel.tsx

frontend/src/components/ResultsPanel.tsx

@@ -1,183 +1,225 @@
-import { useState, useEffect } from "react";
-import { DownloadIcon, InfoIcon, Loader2Icon } from "lucide-react";
+import { useState } from "react";
+import { DownloadIcon, FileTextIcon, Loader2Icon } from "lucide-react";
+import { ImageWithFallback } from "./ImageWithFallback";
+import { ReportModal } from "./ReportModal";
+import axios from "axios";
 
 interface ResultsPanelProps {
-  uploadedImage: string | null;
-  result?: any;
-  loading?: boolean;
+uploadedImage: string | null;
+result?: any;
+loading?: boolean;
 }
 
 export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelProps) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalImage, setModalImage] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (result?.annotated_image_url) {
-      setModalImage(result.annotated_image_url);
-    } else if (uploadedImage) {
-      setModalImage(uploadedImage);
-    } else {
-      setModalImage(null);
+  const [showReportModal, setShowReportModal] = useState(false);
+  
+  const handleGenerateReport = async (formData: FormData) => {
+    try {
+      const baseURL = import.meta.env.MODE === "development"
+        ? "http://127.0.0.1:7860"
+        : window.location.origin;
+
+      const response = await axios.post(`${baseURL}/reports/`, formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+
+      if (response.data.html_url) {
+        // Open report in new tab
+        window.open(`${baseURL}${response.data.html_url}`, "_blank");
+      }
+      if (response.data.pdf_url) {
+        // Open PDF in new tab when available
+        window.open(`${baseURL}${response.data.pdf_url}`, "_blank");
+      }
+      
+      setShowReportModal(false);
+    } catch (err: any) {
+      console.error("Failed to generate report:", err);
+      alert(err.response?.data?.error || "Failed to generate report");
     }
-  }, [result, uploadedImage]);
+  };
 
-  // Loading state UI
   if (loading) {
-    return (
-      <div className="bg-white rounded-lg shadow-sm p-8 flex flex-col items-center justify-center">
-        <Loader2Icon className="w-12 h-12 text-transparent bg-clip-text bg-gradient-to-r from-blue-800 to-teal-600 animate-spin mb-4" />
-        <p className="text-gray-700 font-medium mb-2">Analyzing image... Please wait</p>
-        <div className="w-56 h-2 rounded-full overflow-hidden mt-2">
-          <div className="h-full bg-gradient-to-r from-blue-800 to-teal-600 animate-pulse" />
-        </div>
+    return ( 
+      <div className="bg-white rounded-lg shadow-sm p-6 flex flex-col items-center justify-center"> 
+        <Loader2Icon className="w-10 h-10 text-blue-600 animate-spin mb-3" /> 
+        <p className="text-gray-600 font-medium">Analyzing image...</p> 
       </div>
     );
   }
 
   if (!result) {
-    return (
+    return ( 
       <div className="bg-white rounded-lg shadow-sm p-6 text-center text-gray-500">
-        No analysis result available yet.
+        No analysis result available yet. 
       </div>
     );
-  }
-
-  const {
-    prediction,
-    confidence,
-    probabilities,
-    detections,
-    summary,
-    annotated_image_url,
-    model_name,
-    analysis_type,
-  } = result;
-
-  const handleDownload = () => {
-    if (annotated_image_url) {
-      const link = document.createElement("a");
-      link.href = annotated_image_url;
-      link.download = "analysis_result.jpg";
-      link.click();
-    }
-  };
-
-  const openModal = (url?: string) => {
-    setModalImage(url || annotated_image_url || uploadedImage);
-    setIsModalOpen(true);
-  };
-
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
+}
 
-  return (
-    <div className="bg-white rounded-lg shadow-sm p-6">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h2 className="text-2xl font-bold text-gray-800">
-            {model_name ? model_name.toUpperCase() : "Analysis Result"}
-          </h2>
-          <p className="text-sm text-gray-500 capitalize">{analysis_type || "Test Type"}</p>
-        </div>
+const {
+model_used,
+detections,
+annotated_image_url,
+summary,
+  // prediction (not used here)
+confidence,
+} = result;
+
+const handleDownload = () => {
+if (annotated_image_url) {
+const link = document.createElement("a");
+link.href = annotated_image_url;
+link.download = "analysis_result.jpg";
+link.click();
+}
+};
+
+return ( <div className="bg-white rounded-lg shadow-sm p-6">
+{/* Header */} 
+  <div className="flex items-center justify-between mb-6"> 
+    <div> 
+      <h2 className="text-2xl font-bold text-gray-800">
+        {model_used || "Analysis Result"} 
+      </h2> 
+      <p className="text-sm text-gray-500">Automated Image Analysis</p> 
+    </div>
 
-        {annotated_image_url && (
-          <button
-            onClick={handleDownload}
-            className="flex items-center gap-2 bg-gradient-to-r from-blue-800 to-teal-600 text-white px-4 py-2 rounded-lg hover:opacity-90 transition-all"
-          >
-            <DownloadIcon className="w-4 h-4" />
-            Download Image
-          </button>
-        )}
+    <div className="flex items-center gap-3">
+      {annotated_image_url && (
+        <button
+          onClick={handleDownload}
+          className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors"
+        >
+          <DownloadIcon className="w-4 h-4" />
+          Download Image
+        </button>
+      )}
+      <button
+        onClick={() => setShowReportModal(true)}
+        className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
+      >
+        <FileTextIcon className="w-4 h-4" />
+        Generate Report
+      </button>
+    </div>
+  </div>
+
+  {/* Image */}
+  <div className="relative mb-6 rounded-lg overflow-hidden border border-gray-200">
+    <ImageWithFallback
+      src={annotated_image_url || uploadedImage || "/ui.jpg"}
+      alt="Analysis Result"
+      className="w-full h-64 object-cover"
+    />
+  </div>
+
+  {/* Summary Section */}
+  {summary && (
+    <div className="bg-gray-50 p-4 rounded-lg mb-6">
+      <h3 className="text-lg font-semibold text-gray-800 mb-2">
+        AI Summary
+      </h3>
+      <p className="text-gray-700 text-sm leading-relaxed">
+        <strong>Abnormal Cells:</strong> {summary.abnormal_cells} <br />
+        <strong>Normal Cells:</strong> {summary.normal_cells} <br />
+        <strong>Average Confidence:</strong> {summary.avg_confidence?.toFixed(2)}% <br />
+      </p>
+      <div className="mt-3 text-gray-800 text-sm italic border-t pt-2">
+        {summary.ai_interpretation || "No AI interpretation available."}
       </div>
+    </div>
+  )}
+
+  {/* Detection list */}
+  {detections && detections.length > 0 && (
+    <div className="mb-6">
+      <h4 className="font-semibold text-gray-900 mb-3">
+        Detected Objects
+      </h4>
+      <ul className="text-sm text-gray-700 list-disc list-inside space-y-1">
+        {detections.map((det: any, i: number) => (
+          <li key={i}>
+            {det.name || "Object"} – {(det.confidence * 100).toFixed(1)}%
+          </li>
+        ))}
+      </ul>
+    </div>
+  )}
 
-      {/* Image (click to zoom) */}
-      <div className="relative mb-6 rounded-lg overflow-hidden border border-gray-200">
-        <img
-          src={annotated_image_url || uploadedImage || "/ui.jpg"}
-          alt="Analysis Result"
-          className="w-full h-64 object-cover cursor-pointer transition-transform hover:scale-105"
-          onClick={() => openModal()}
-        />
-      </div>
+  {/* Probability / MWT visualization */}
+  {confidence && (
+    <div className="mb-6">
+      <h4 className="font-semibold text-gray-900 mb-3">Confidence Levels</h4>
 
-      {/* Results Summary */}
-      <div className="mb-6">
-        {prediction && (
-          <h3
-            className={`text-3xl font-bold ${
-              prediction.toLowerCase().includes("malignant") || prediction.toLowerCase().includes("abnormal")
-                ? "text-red-600"
-                : "text-green-600"
-            }`}
-          >
-            {prediction}
-          </h3>
-        )}
-
-        {confidence && (
-          <div className="mt-2">
+  {/* If MWT, CIN, or Histopathology classifier, show a visual bar for average confidence and per-class bars */}
+  {model_used && /mwt|cin|histopathology/i.test(model_used) ? (
+        <div>
+          {/* Average confidence bar */}
+          <div className="mb-3">
             <div className="flex items-center justify-between mb-1">
-              <span className="font-semibold text-gray-900">Confidence: {(confidence * 100).toFixed(2)}%</span>
-              <InfoIcon className="w-4 h-4 text-gray-400" />
+              <span className="text-sm font-medium text-gray-700">Average confidence</span>
+              <span className="text-sm font-mono text-gray-600">
+                {summary?.avg_confidence ? `${summary.avg_confidence.toFixed(2)}%` : "-"}
+              </span>
             </div>
-            <div className="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
+            <div className="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
               <div
-                className={`h-full ${
-                  confidence > 0.7 ? "bg-green-500" : confidence > 0.4 ? "bg-yellow-500" : "bg-red-500"
-                }`}
-                style={{ width: `${confidence * 100}%` }}
+                className="h-4 bg-gradient-to-r from-amber-600 to-amber-400"
+                style={{ width: `${summary?.avg_confidence ?? 0}%` }}
               />
             </div>
           </div>
-        )}
-
-        {summary && (
-          <p className="mt-4 text-gray-700 text-sm leading-relaxed">{summary}</p>
-        )}
-      </div>
-
-      {/* Detections / Probabilities */}
-      {detections && detections.length > 0 && (
-        <div className="mb-6">
-          <h4 className="font-semibold text-gray-900 mb-3">Detected Regions:</h4>
-          <ul className="text-sm text-gray-700 list-disc list-inside space-y-1">
-            {detections.map((det: any, i: number) => (
-              <li key={i}>{det.name || "object"} – {(det.confidence * 100).toFixed(1)}%</li>
-            ))}
-          </ul>
-        </div>
-      )}
 
-      {probabilities && (
-        <div className="mb-6">
-          <h4 className="font-semibold text-gray-900 mb-3">Class Probabilities:</h4>
-          <pre className="bg-gray-100 rounded-lg p-3 text-sm">{JSON.stringify(probabilities, null, 2)}</pre>
-        </div>
-      )}
-
-      {/* Report Button */}
-      <button className="w-full bg-gradient-to-r from-blue-800 to-teal-600 text-white py-3 rounded-lg font-medium hover:opacity-95 transition-colors flex items-center justify-center gap-2">
-        <DownloadIcon className="w-5 h-5" />
-        Generate Report
-      </button>
+          {/* Per-class bars */}
+          <div className="space-y-2">
+            {Object.entries(confidence).map(([cls, val]) => {
+              const num = Number(val as any) || 0;
+              const pct = (num * 100);
+              
+              // Color coding: Positive/Malignant/High-grade = red, Negative/Benign/Low-grade = green
+              const isNegative = cls.toLowerCase().includes("negative") || 
+                                cls.toLowerCase().includes("benign") || 
+                                cls.toLowerCase().includes("low-grade");
+              
+              return (
+                <div key={cls}>
+                  <div className="flex items-center justify-between text-sm mb-1">
+                    <span className="text-gray-700">{cls}</span>
+                    <span className="text-gray-600">{pct.toFixed(2)}%</span>
+                  </div>
+                  <div className="w-full bg-gray-100 rounded-full h-3">
+                    <div
+                      className={`h-3 rounded-full ${isNegative ? "bg-green-500" : "bg-red-500"}`}
+                      style={{ width: `${pct.toFixed(2)}%` }}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
 
-      {/* Modal for zoom */}
-      {isModalOpen && modalImage && (
-        <div
-          className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4"
-          onClick={closeModal}
-        >
-          <div className="max-w-5xl max-h-[90vh] w-full" onClick={(e) => e.stopPropagation()}>
-            <img src={modalImage} alt="Zoomed result" className="w-full h-auto object-contain rounded-lg shadow-2xl" />
-            <div className="mt-3 text-right">
-              <button onClick={closeModal} className="px-4 py-2 bg-white rounded-md">Close</button>
-            </div>
+          {/* Mistral comment */}
+          <div className="mt-4 bg-gray-50 p-3 rounded-lg text-sm italic text-gray-800 border-t">
+            {summary?.ai_interpretation || "No AI interpretation available."}
           </div>
         </div>
+      ) : (
+        // Fallback display for non-MWT models
+        <pre className="bg-gray-100 rounded-lg p-3 text-sm overflow-x-auto">
+          {JSON.stringify(confidence, null, 2)}
+        </pre>
       )}
     </div>
-  );
-}
+  )}
+
+  {/* Report Generation Modal */}
+  <ReportModal 
+    isOpen={showReportModal}
+    onClose={() => setShowReportModal(false)}
+    onSubmit={handleGenerateReport}
+    analysisId={annotated_image_url || ""}
+    analysisSummaryJson={summary ? JSON.stringify({ ...summary, model_used, confidence }) : "{}"}
+  />
+</div>
+);
+}