Update

frontend/src/components/ResultsPanel.tsx

@@ -5,9 +5,9 @@ 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) {
@@ -16,13 +16,8 @@ export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelPro
   const handleGenerateReport = async (formData: FormData) => {
     try {
       const baseURL = import.meta.env.MODE === "development"
-<<<<<<< HEAD
-        ? "http://127.0.0.1:8000"
-=======
         ? "http://127.0.0.1:7860"
->>>>>>> 63ecad7fc192f2b4ac24e8b13d2e500df74df63d
         : window.location.origin;
-
       const response = await axios.post(`${baseURL}/reports/`, formData, {
         headers: { "Content-Type": "multipart/form-data" },
       });
@@ -47,7 +42,7 @@ export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelPro
     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> 
+        <p className="text-teal-700 font-medium">Analyzing image...</p> 
       </div>
     );
   }
@@ -58,172 +53,173 @@ export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelPro
         No analysis result available yet. 
       </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>
+  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();
+    }
+  };
 
-    <div className="flex items-center gap-3">
-      {annotated_image_url && (
+  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>
+
+      <div className="flex items-center gap-3">
+        {annotated_image_url && (
+          <button
+            onClick={handleDownload}
+            className="flex items-center gap-2 bg-gradient-to-r from-teal-700 via-teal-600 to-teal-700 text-white px-4 py-2 rounded-lg hover:opacity-90 transition-all"
+          >
+            <DownloadIcon className="w-4 h-4" />
+            Download Image
+          </button>
+        )}
         <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"
+          onClick={() => setShowReportModal(true)}
+          className="flex items-center gap-2 bg-gradient-to-r from-teal-700 via-teal-600 to-teal-700 text-white px-4 py-2 rounded-lg hover:opacity-90 transition-all"
         >
-          <DownloadIcon className="w-4 h-4" />
-          Download Image
+          <FileTextIcon className="w-4 h-4" />
+          Generate Report
         </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>
-  </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>
+    {/* 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."}
+    {/* 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>
-    </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>
-  )}
-
-  {/* Probability / MWT visualization */}
-  {confidence && (
-    <div className="mb-6">
-      <h4 className="font-semibold text-gray-900 mb-3">Confidence Levels</h4>
-
-  {/* 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="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 bg-gray-200 rounded-full h-4 overflow-hidden">
-              <div
-                className="h-4 bg-gradient-to-r from-amber-600 to-amber-400"
-                style={{ width: `${summary?.avg_confidence ?? 0}%` }}
-              />
+    )}
+
+    {/* 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>
+    )}
+
+    {/* Probability / MWT visualization */}
+    {confidence && (
+      <div className="mb-6">
+        <h4 className="font-semibold text-gray-900 mb-3">Confidence Levels</h4>
+
+        {/* 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="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 bg-gray-200 rounded-full h-4 overflow-hidden">
+                <div
+                  className="h-4 bg-gradient-to-r from-amber-600 to-amber-400"
+                  style={{ width: `${summary?.avg_confidence ?? 0}%` }}
+                />
+              </div>
             </div>
-          </div>
 
-          {/* 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)}%` }}
-                    />
+            {/* 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>
-              );
-            })}
-          </div>
+                );
+              })}
+            </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."}
+            {/* 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>
-        </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>
-);
+        ) : (
+          // 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>
+  );
 }
+