Initial Space

frontend/src/App.tsx

@@ -103,12 +103,10 @@ return ( <div className="flex flex-col min-h-screen w-full bg-gray-50"> <Header
           onAnalyze={handleAnalyze}
         />
 
-        {/* Results Panel */}
-        {showResults && (
+        {/* Results Panel (show while loading OR when results ready) */}
+        {(loading || showResults) && (
           <ResultsPanel
-            uploadedImage={
-              apiResult?.annotated_image_url || uploadedImage
-            }
+            uploadedImage={apiResult?.annotated_image_url || uploadedImage}
             result={apiResult}
             loading={loading}
           />

frontend/src/components/Header.tsx

@@ -1,3 +1,4 @@
+
 export function Header() {
   return (
     <div className="w-full bg-white">
@@ -17,9 +18,11 @@ export function Header() {
               alt="Manalife Logo"
               className="h-16 w-auto"
             />
-            <h1 className="text-white text-2xl font-semibold tracking-wide">
-              Manalife AI Pathology Assistant
-            </h1>
+            <h1 className="text-white text-3xl font-bold">Pathora</h1>
+            <div className="h-8 border-l border-white/70" />
+            <h3 className="text-white text-1xl font-semibold tracking-wide">
+              Manalife's AI Pathology Assistant
+            </h3>
           </div>
         </div>
       </div>

frontend/src/components/ResultsPanel.tsx

@@ -1,143 +1,183 @@
+import { useState, useEffect } from "react";
 import { DownloadIcon, InfoIcon, Loader2Icon } from "lucide-react";
 
 interface ResultsPanelProps {
-uploadedImage: string | null;
-result?: any;
-loading?: boolean;
+  uploadedImage: string | null;
+  result?: any;
+  loading?: boolean;
 }
 
 export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelProps) {
-if (loading) {
-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 ( <div className="bg-white rounded-lg shadow-sm p-6 text-center text-gray-500">
-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();
-}
-};
-
-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>
-{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>
-)} </div>
-
-
-  {/* Image */}
-  <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"
-    />
-  </div>
-
-  {/* 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">
-        <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" />
+  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);
+    }
+  }, [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>
-        <div className="w-full h-3 bg-gray-200 rounded-full 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}%` }}
-          />
+      </div>
+    );
+  }
+
+  if (!result) {
+    return (
+      <div className="bg-white rounded-lg shadow-sm p-6 text-center text-gray-500">
+        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>
+
+        {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>
-    )}
-
-    {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-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
-    <DownloadIcon className="w-5 h-5" />
-    Generate Report
-  </button>
-</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>
+
+      {/* 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">
+            <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" />
+            </div>
+            <div className="w-full h-3 bg-gray-200 rounded-full 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}%` }}
+              />
+            </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>
+
+      {/* 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>
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }

frontend/src/components/Sidebar.tsx

@@ -1,54 +1,62 @@
-import React, { useState } from 'react';
-import { ChevronDownIcon, FileTextIcon, HelpCircleIcon } from 'lucide-react';
+import { FileTextIcon, HelpCircleIcon } from 'lucide-react';
+
 interface SidebarProps {
   selectedTest: string;
   onTestChange: (test: string) => void;
 }
-export function Sidebar({
-  selectedTest,
-  onTestChange
-}: SidebarProps) {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const testTypes = [{
-    value: 'cytology',
-    label: 'Cytology Analysis'
-  }, {
-    value: 'colposcopy',
-    label: 'Colposcopy Analysis'
-  }, {
-    value: 'histopathology',
-    label: 'Histopathology Analysis'
-  }];
-  return <aside className="w-64 bg-white border-r border-gray-200 p-4">
-      <div className="space-y-2">
-        {/* New Test Dropdown */}
-        <div className="relative">
-          <button onClick={() => setIsDropdownOpen(!isDropdownOpen)} className="w-full bg-blue-600 text-white rounded-lg px-4 py-3 flex items-center justify-between hover:bg-blue-700 transition-colors">
-            <div className="flex items-center gap-2">
-              <div className="w-2 h-2 bg-white rounded-full" />
-              <span className="font-medium">New Test</span>
-            </div>
-            <ChevronDownIcon className={`w-5 h-5 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} />
-          </button>
-          {isDropdownOpen && <div className="absolute top-full left-0 right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg z-10">
-              {testTypes.map(test => <button key={test.value} onClick={() => {
-            onTestChange(test.value);
-            setIsDropdownOpen(false);
-          }} className={`w-full text-left px-4 py-3 hover:bg-gray-50 transition-colors ${selectedTest === test.value ? 'bg-blue-50 text-blue-600' : 'text-gray-700'}`}>
-                  {test.label}
-                </button>)}
-            </div>}
+
+export function Sidebar({ selectedTest, onTestChange }: SidebarProps) {
+  const testTypes = [
+    { value: 'cytology', label: 'Cytology Analysis' },
+    { value: 'colposcopy', label: 'Colposcopy Analysis' },
+    { value: 'histopathology', label: 'Histopathology Analysis' },
+  ];
+
+  return (
+    <aside className="w-64 bg-white border-r border-gray-200 p-4">
+      <div className="space-y-4">
+        {/* Gradient Header */}
+        <h3 className="text-lg font-semibold text-white mb-3 px-3 py-2 rounded-md bg-gradient-to-r from-blue-800 to-teal-600 shadow-sm">
+          New Test
+        </h3>
+
+        {/* Test Selection */}
+        <div className="flex flex-col gap-2">
+          {testTypes.map((test) => (
+            <label
+              key={test.value}
+              className={`flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer border transition-all duration-200 
+                ${
+                  selectedTest === test.value
+                    ? 'border-blue-600 bg-blue-50 text-blue-900 font-medium shadow-sm'
+                    : 'border-gray-200 hover:border-blue-300 hover:bg-gray-50 text-gray-700'
+                }`}
+            >
+              <input
+                type="radio"
+                name="testType"
+                value={test.value}
+                checked={selectedTest === test.value}
+                onChange={() => onTestChange(test.value)}
+                className="form-radio h-4 w-4 text-blue-600 focus:ring-blue-500"
+              />
+              <span>{test.label}</span>
+            </label>
+          ))}
         </div>
+
         {/* History */}
         <button className="w-full flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
           <FileTextIcon className="w-5 h-5" />
           <span>History</span>
         </button>
+
         {/* Help */}
         <button className="w-full flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
           <HelpCircleIcon className="w-5 h-5" />
           <span>Help</span>
         </button>
       </div>
-    </aside>;
+    </aside>
+  );
 }

frontend/src/components/UploadSection.tsx

@@ -24,16 +24,16 @@ export function UploadSection({
 
   const modelOptions = {
     cytology: [
-      { value: 'mwt', label: 'MWT' },
-      { value: 'yolo', label: 'YOLOv8' },
+      { value: 'mwt', label: 'Manalife_AI_MWT' },
+      { value: 'yolo', label: 'Manalife_AI_YOLOv8' },
     ],
     colposcopy: [
-      { value: 'cin', label: 'Logistic-Colpo' },
-  
+      { value: 'cin', label: 'Manalife_MaANIA_Colpo' },
+
     ],
     histopathology: [
-      { value: 'histopathology', label: 'Path Foundation Model' },
-  
+      { value: 'histopathology', label: 'ManalifeAI__Path Foundation Model' },
+
     ],
   };
 
@@ -156,7 +156,11 @@ export function UploadSection({
       <button
         onClick={onAnalyze}
         disabled={!uploadedImage || !selectedModel}
-        className="w-full mt-6 bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
+        className={`w-full mt-6 text-white py-3 rounded-lg font-medium transition-colors ${
+          !uploadedImage || !selectedModel
+            ? 'bg-gray-300 disabled:cursor-not-allowed'
+            : 'bg-gradient-to-r from-blue-800 to-teal-600 hover:opacity-95'
+        }`}
       >
         Analyze
       </button>
@@ -174,16 +178,12 @@ export function UploadSection({
             (img, index) => (
               <div
                 key={index}
-                className={`w-20 h-20 rounded-lg border-2 cursor-pointer transition-transform hover:scale-105 hover:border-blue-500 overflow-hidden ${
-                  uploadedImage === img ? 'border-blue-600' : 'border-gray-300'
+                className={`w-20 h-20 rounded-lg border-2 cursor-pointer transition-transform hover:scale-105 overflow-hidden ${
+                  uploadedImage === img ? 'ring-2 ring-offset-1 ring-blue-800' : 'border-gray-300'
                 }`}
                 onClick={() => handleSampleClick(img)}
               >
-                <img
-                  src={img}
-                  alt={`Sample ${index + 1}`}
-                  className="w-full h-full object-cover"
-                />
+                <img src={img} alt={`Sample ${index + 1}`} className="w-full h-full object-cover" />
               </div>
             )
           )}