+ {/* Upload & Model Selection */}
+
+
+
+
+
+
+
+
+ {/* Banner */}
+
+ );
+}
diff --git a/frontend/src/components/ResultsPanel.tsx b/frontend/src/components/ResultsPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..99dc46d6c74bf9c1cf6171632fca615f21be3b42
--- /dev/null
+++ b/frontend/src/components/ResultsPanel.tsx
@@ -0,0 +1,143 @@
+import { DownloadIcon, InfoIcon, Loader2Icon } from "lucide-react";
+
+interface ResultsPanelProps {
+uploadedImage: string | null;
+result?: any;
+loading?: boolean;
+}
+
+export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelProps) {
+if (loading) {
+return (
+
+
+ {/* Disclaimer */}
+
+ {/* Logo + Title */}
+
+
+ 
+
+
+ + Manalife AI Pathology Assistant +
+
+
+ Public Disclaimer
++ Manalife AI models are research prototypes developed to advance + innovation in women's health and digital pathology. They are not + certified medical devices and are not intended for direct diagnosis or + treatment. Clinical validation and regulatory approval are required + before any medical use. +
+Analyzing image...
+No analysis result available yet.
+);
+}
+
+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 (
+{/* Header */}
+{annotated_image_url && (
+)}
+
+
+ {/* Image */}
+ (null);
+
+ const modelOptions = {
+ cytology: [
+ { value: 'mwt', label: 'MWT' },
+ { value: 'yolo', label: 'YOLOv8' },
+ ],
+ colposcopy: [
+ { value: 'cin', label: 'Logistic-Colpo' },
+
+ ],
+ histopathology: [
+ { value: 'histopathology', label: 'Path Foundation Model' },
+
+ ],
+ };
+
+
+ const sampleImages = {
+ cytology: [
+ "/cyto/cyt1.jpg",
+ "/cyto/cyt2.png",
+ "/cyto/cyt3.png",
+ ],
+ colposcopy: [
+ "/colpo/colp1.jpg",
+ "/colpo/colp2.jpg",
+ "/colpo/colp3.jpg",
+ ],
+ histopathology: [
+ "/histo/hist1.png",
+ "/histo/hist2.png",
+ "/histo/hist3.jpg",
+ ],
+ };
+
+ const currentModels =
+ modelOptions[selectedTest as keyof typeof modelOptions] || [];
+
+ const handleFileChange = (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ setUploadedImage(event.target?.result as string);
+ };
+ reader.readAsDataURL(file);
+ }
+ };
+
+ const handleDrop = (e: React.DragEvent) => {
+ e.preventDefault();
+ const file = e.dataTransfer.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ setUploadedImage(event.target?.result as string);
+ };
+ reader.readAsDataURL(file);
+ }
+ };
+
+ // Handle click on sample image
+ const handleSampleClick = (imgUrl: string) => {
+ setUploadedImage(imgUrl);
+ };
+
+ return (
+
+{model_name ? model_name.toUpperCase() : "Analysis Result"}
+{analysis_type || "Test Type"}
+ 
+
+
+ {/* Results Summary */}
+
+ {prediction && (
+
+
+
+);
+}
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..719d2f03e732ca4ad86fa6215d5ee6417f693453
--- /dev/null
+++ b/frontend/src/components/Sidebar.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { ChevronDownIcon, 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 ;
+}
\ No newline at end of file
diff --git a/frontend/src/components/UploadSection.tsx b/frontend/src/components/UploadSection.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..23b22e097ec69c811531cc1bc96fe2396c6b2b8a
--- /dev/null
+++ b/frontend/src/components/UploadSection.tsx
@@ -0,0 +1,194 @@
+import React, { useRef } from 'react';
+import { UploadIcon } from 'lucide-react';
+
+interface UploadSectionProps {
+ selectedTest: string;
+ uploadedImage: string | null;
+ setUploadedImage: (image: string | null) => void;
+ selectedModel: string;
+ setSelectedModel: (model: string) => void;
+ onAnalyze: () => void;
+}
+
+
+
+export function UploadSection({
+ selectedTest,
+ uploadedImage,
+ setUploadedImage,
+ selectedModel,
+ setSelectedModel,
+ onAnalyze,
+}: UploadSectionProps) {
+ const fileInputRef = useRef+ {prediction} +
+ )} + + {confidence && ( +
+
+
+ {/* Detections / Probabilities */}
+ {detections && detections.length > 0 && (
+
+
+ Confidence: {(confidence * 100).toFixed(2)}%
+
+
+
+
+ )}
+
+ {summary && (
+ 0.7
+ ? "bg-green-500"
+ : confidence > 0.4
+ ? "bg-yellow-500"
+ : "bg-red-500"
+ }`}
+ style={{ width: `${confidence * 100}%` }}
+ />
+
+ + {summary} +
+ )} +
+
+ )}
+
+ {probabilities && (
+ + Detected Regions: +
+-
+ {detections.map((det: any, i: number) => (
+
- + {det.name || "object"} – {(det.confidence * 100).toFixed(1)}% + + ))} +
+
+ )}
+
+ {/* Report Button */}
+
++ Class Probabilities: +
+
+ {JSON.stringify(probabilities, null, 2)}
+
+
+
+ + {/* Sample Images Section */} +
+ );
+}
diff --git a/frontend/src/components/progressbar.tsx b/frontend/src/components/progressbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..28e763212ce04c7d1d81c3c43d73a4fd6de66aa2
--- /dev/null
+++ b/frontend/src/components/progressbar.tsx
@@ -0,0 +1,61 @@
+import { Fragment } from "react";
+import { CheckIcon, FileTextIcon } from "lucide-react";
+
+interface ProgressBarProps {
+ currentStep: number;
+}
+
+export function ProgressBar({ currentStep }: ProgressBarProps) {
+ const steps = [
+ { label: "Upload", index: 0 },
+ { label: "Analyze", index: 1 },
+ { label: "Report", index: 2 },
+ ];
+
+ return (
+ + Upload an image of a tissue sample +
+ + {/* Upload Area */} + e.preventDefault()}
+ onClick={() => fileInputRef.current?.click()}
+ className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-blue-400 transition-colors"
+ >
+
+
+
+ {/* Model Selection */}
+
+
+
+
+ {uploadedImage ? (
+ <>
+ + Image uploaded successfully! +
++ Click to upload a different image +
+
+ 
+
+
+ ) : (
+ Drag and drop or click to upload
+ )} +
+
+
+
+
+ {/* Analyze Button */}
+
+
+ {/* Separator */}
+ + + {/* Sample Images Section */} +
+
+ + Samples Images +
+
+ {(sampleImages[selectedTest as keyof typeof sampleImages] || []).map(
+ (img, index) => (
+
+ handleSampleClick(img)}
+ >
+ 
+
+ )
+ )}
+
+
+ {steps.map((step, index) => (
+
+
+ );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ab6b3df45bac8a47fc64ba78435f724b50afe045
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,5 @@
+/* PLEASE NOTE: THESE TAILWIND IMPORTS SHOULD NEVER BE DELETED */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+/* DO NOT DELETE THESE TAILWIND IMPORTS, OTHERWISE THE STYLING WILL NOT RENDER AT ALL */
\ No newline at end of file
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cd789be8c7443e0ff402f649b00a2f22b7a2310a
--- /dev/null
+++ b/frontend/src/index.tsx
@@ -0,0 +1,5 @@
+import './index.css';
+import React from "react";
+import { render } from "react-dom";
+import { App } from "./App";
+render(
+ {/* Step circle */}
+
+
+ {/* Connecting line */}
+ {index < steps.length - 1 && (
+ step.index
+ ? "bg-gradient-to-r from-blue-800 to-teal-600"
+ : currentStep === step.index
+ ? "bg-gradient-to-r from-blue-600 to-teal-500"
+ : "bg-gray-300 text-gray-600"
+ }`}
+ >
+ {currentStep > step.index ? (
+
+
+ {/* Label */}
+
+ {step.label}
+
+ step.index
+ ? "bg-gradient-to-r from-blue-800 to-teal-600"
+ : "bg-gray-300"
+ }`}
+ />
+ )}
+
+ ))}
+
+