Update

frontend/src/components/ResultsPanel.tsx

@@ -1,5 +1,30 @@
 import { useState } from "react";
-import { DownloadIcon, FileTextIcon, Loader2Icon } from "lucide-react";
+
+/* Minimal inline SVG icon components to avoid requiring 'lucide-react' */
+const DownloadIcon = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+    <path d="M12 3v12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M8 11l4 4 4-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M21 21H3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const FileTextIcon = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M14 2v6h6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M16 13H8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M16 17H8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const Loader2Icon = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" strokeOpacity="0.25"/>
+    <path d="M22 12a10 10 0 0 0-10-10" stroke="currentColor" strokeWidth="4" strokeLinecap="round"/>
+  </svg>
+);
+
 import { ImageWithFallback } from "./ImageWithFallback";
 import { ReportModal } from "./ReportModal";
 import axios from "axios";
@@ -67,6 +92,22 @@ export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelPro
     }
   };
 
+  // Precompute some helpers for rendering confidences
+  const isCINModel = /cin/i.test(String(model_used || ""));
+  // Determine predicted class from summary.prediction if available, otherwise pick the highest confidence
+  const predictedClassFromConfidence = (conf: any) => {
+    try {
+      const entries = Object.entries(conf || {});
+      if (entries.length === 0) return "";
+      return entries.reduce((a: any, b: any) => (Number(a[1]) > Number(b[1]) ? a : b))[0];
+    } catch (e) {
+      return "";
+    }
+  };
+  const predictedClass = (summary && (summary.prediction || summary.result))
+    ? String(summary.prediction || summary.result)
+    : predictedClassFromConfidence(confidence || {});
+
   
 
   return (
@@ -208,30 +249,63 @@ export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelPro
 
             {/* 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>
+              {isCINModel ? (
+                // For CIN/colposcopy classifiers, show ONLY the predicted grade (no bars for other classes)
+                (() => {
+                  const cls = String(predictedClass || "");
+                  const val = (confidence && (confidence as any)[cls]) || 0;
+                  const num = Number(val) || 0;
+                  const pct = num * 100;
+                  const isNegative = cls.toLowerCase().includes("negative") ||
+                                    cls.toLowerCase().includes("benign") ||
+                                    cls.toLowerCase().includes("low-grade") ||
+                                    cls.toLowerCase().includes("cin1");
+
+                  if (!cls) {
+                    return <div className="text-sm text-gray-600">Prediction not available.</div>;
+                  }
+
+                  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 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)}%` }}
-                      />
+                  );
+                })()
+              ) : (
+                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>
 
             {/* Mistral comment */}
@@ -249,7 +323,6 @@ export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelPro
     )}
 
     {/* Report Generation Modal */}
-    {/* Move Generate Report button here so it's shown after analysis details. */}
     {/* Show only when not loading and we have at least a result (so Generate Report is available even if summary/confidence are missing) */}
     {!isLoading && result && (
       <div className="flex items-center justify-end mb-6">