feat: complete split-view redesign matching manar.jpeg

toothmap_frontend/src/App.jsx

@@ -1,77 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react';
 import axios from 'axios';
-import { UploadCloud, Activity, Loader2, ScanLine, X } from 'lucide-react';
-
-const API_BASE = window.location.origin.includes('localhost') || window.location.origin.includes('127.0.0.1') ? "http://127.0.0.1:8000" : window.location.origin;
-
-const MODES = [
-  {
-    id: 'yolo',
-    label: 'Localiser les dents 1',
-    emoji: '🔍',
-    desc: 'YOLOv8s bounding box detection',
-    models: 'YOLOv8s',
-    color: 'from-blue-500 to-cyan-500',
-    active: 'bg-gradient-to-r from-blue-500/20 to-cyan-500/20 border-blue-400/60 text-blue-300',
-    inactive: 'border-zinc-700/40 text-zinc-400 hover:border-blue-500/40 hover:text-blue-300',
-    type: 'detection',
-  },
-  {
-    id: 'frcnn',
-    label: 'Localiser les dents 2',
-    emoji: '🔎',
-    desc: 'Faster R-CNN bounding box detection',
-    models: 'Faster R-CNN (ResNet50-FPN)',
-    color: 'from-indigo-500 to-blue-500',
-    active: 'bg-gradient-to-r from-indigo-500/20 to-blue-500/20 border-indigo-400/60 text-indigo-300',
-    inactive: 'border-zinc-700/40 text-zinc-400 hover:border-indigo-500/40 hover:text-indigo-300',
-    type: 'detection',
-  },
-  {
-    id: 'seg_yolo',
-    label: 'Localiser et détourage dents 1',
-    emoji: '🔬',
-    desc: 'YOLO detection + U-Net segmentation masks',
-    models: 'YOLOv8s + U-Net (ResNet34)',
-    color: 'from-violet-500 to-purple-500',
-    active: 'bg-gradient-to-r from-violet-500/20 to-purple-500/20 border-violet-400/60 text-violet-300',
-    inactive: 'border-zinc-700/40 text-zinc-400 hover:border-violet-500/40 hover:text-violet-300',
-    type: 'segmentation',
-  },
-  {
-    id: 'seg_frcnn',
-    label: 'Localiser et détourage dents 2',
-    emoji: '🧬',
-    desc: 'Faster R-CNN detection + U-Net segmentation masks',
-    models: 'Faster R-CNN + U-Net (ResNet34)',
-    color: 'from-fuchsia-500 to-pink-500',
-    active: 'bg-gradient-to-r from-fuchsia-500/20 to-pink-500/20 border-fuchsia-400/60 text-fuchsia-300',
-    inactive: 'border-zinc-700/40 text-zinc-400 hover:border-fuchsia-500/40 hover:text-fuchsia-300',
-    type: 'segmentation',
-  },
-  {
-    id: 'pipeline_yolo',
-    label: 'Analyse détaillée: localiser, détourage, numérotation (charting) 1',
-    emoji: '🦷',
-    desc: 'YOLO detection + FDI classification + U-Net segmentation',
-    models: 'YOLOv8s + ConvNeXt-Tiny + U-Net',
-    color: 'from-emerald-500 to-teal-500',
-    active: 'bg-gradient-to-r from-emerald-500/20 to-teal-500/20 border-emerald-400/60 text-emerald-300',
-    inactive: 'border-zinc-700/40 text-zinc-400 hover:border-emerald-500/40 hover:text-emerald-300',
-    type: 'pipeline',
-  },
-  {
-    id: 'pipeline_frcnn',
-    label: 'Analyse détaillée: localiser, détourage, numérotation (charting) 2',
-    emoji: '🩺',
-    desc: 'Faster R-CNN detection + FDI classification + U-Net segmentation',
-    models: 'Faster R-CNN + ConvNeXt-Tiny + U-Net',
-    color: 'from-amber-500 to-orange-500',
-    active: 'bg-gradient-to-r from-amber-500/20 to-orange-500/20 border-amber-400/60 text-amber-300',
-    inactive: 'border-zinc-700/40 text-zinc-400 hover:border-amber-500/40 hover:text-amber-300',
-    type: 'pipeline',
-  },
-];
+import { UploadCloud, Activity, Loader2, ScanLine, Search } from 'lucide-react';
+
+const API_BASE = "";
 
 const QUADRANT_COLOURS = ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444'];
 const UPPER_TEETH = [18, 17, 16, 15, 14, 13, 12, 11, 21, 22, 23, 24, 25, 26, 27, 28];
@@ -98,7 +29,7 @@ function computeIoU(b1, b2) {
 }
 
 function applyNMS(results, iouThreshold = 0.35) {
-  const sorted = [...results].sort((a, b) => b.score - a.score);
+  const sorted = [...results].sort((a, b) => (b.confidence ?? b.score) - (a.confidence ?? a.score));
   const keep = [];
   for (const item of sorted) {
     if (!keep.some(k => computeIoU(item.box, k.box) > iouThreshold)) keep.push(item);
@@ -112,6 +43,71 @@ function getColour(fdi) {
   return QUADRANT_COLOURS[Math.min(quad, 3)] ?? '#a855f7';
 }
 
+// ── ToothCrop Component (For the Right Panel) ─────────────────────────────────
+const ToothCrop = ({ imageSrc, box, mask_base64, score, fdi, isPipeline, index }) => {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    if (!canvasRef.current || !imageSrc || !box) return;
+    const [x1, y1, x2, y2] = box;
+    const w = x2 - x1;
+    const h = y2 - y1;
+    if (w <= 0 || h <= 0) return;
+
+    const img = new Image();
+    img.src = imageSrc;
+    img.onload = () => {
+      const cvs = canvasRef.current;
+      const ctx = cvs.getContext('2d');
+      cvs.width = w;
+      cvs.height = h;
+      ctx.clearRect(0, 0, w, h);
+      ctx.drawImage(img, x1, y1, w, h, 0, 0, w, h);
+      
+      if (mask_base64) {
+        const maskImg = new Image();
+        maskImg.onload = () => {
+          const off = document.createElement('canvas');
+          off.width = w; off.height = h;
+          const octx = off.getContext('2d');
+          const col = isPipeline && fdi > 0 ? getColour(fdi) : '#22d3ee';
+          octx.fillStyle = col;
+          octx.fillRect(0, 0, w, h);
+          octx.globalCompositeOperation = 'destination-in';
+          octx.drawImage(maskImg, 0, 0, w, h); 
+          ctx.save();
+          ctx.globalAlpha = 0.5;
+          ctx.drawImage(off, 0, 0);
+          ctx.restore();
+        };
+        maskImg.src = `data:image/png;base64,${mask_base64}`;
+      }
+    };
+  }, [imageSrc, box, mask_base64, fdi, isPipeline]);
+
+  const col = isPipeline && fdi > 0 ? getColour(fdi) : '#3b82f6';
+  
+  return (
+    <div className="bg-[#111113] border rounded-lg overflow-hidden flex flex-col" style={{ borderColor: col + '40' }}>
+      <div className="p-1 px-1.5 flex justify-between items-center text-[9px] font-bold" style={{ backgroundColor: col + '15', color: col }}>
+        <span>{isPipeline && fdi > 0 ? `Dent n°${fdi}` : `Dent n°${index + 1}`}</span>
+        <span>{(score * 100).toFixed(0)}%</span>
+      </div>
+      <div className="flex-1 flex items-center justify-center p-1 relative h-16 sm:h-20 bg-black">
+        <canvas ref={canvasRef} className="max-w-full max-h-full object-contain" />
+      </div>
+      {/* Metrics Area */}
+      <div className="p-1.5 bg-[#1a1a1f] border-t border-white/5 flex flex-col gap-0.5">
+        <span className="text-[8px] text-zinc-400 font-mono">Area: {(((box[2]-box[0]) * (box[3]-box[1])) / 100).toFixed(1)} mm²</span>
+        <div className="w-full bg-zinc-800 rounded-full h-1 mt-0.5">
+          <div className="h-full rounded-full" style={{ width: `${score * 100}%`, backgroundColor: col }}></div>
+        </div>
+        <span className="text-[7px] text-zinc-500 uppercase">Confiance</span>
+      </div>
+    </div>
+  );
+};
+
 // ── Odontogram Component ──────────────────────────────────────────────────────
 function Odontogram({ detectedFDIs }) {
   const detected = new Set(detectedFDIs);
@@ -123,30 +119,29 @@ function Odontogram({ detectedFDIs }) {
       <div
         title={present ? `FDI ${fdi} — détectée` : `FDI ${fdi} — non détectée`}
         style={present ? {
-          border: `2px solid ${style.border}`,
+          border: `1px solid ${style.border}`,
           background: style.bg,
           color: style.text,
-          boxShadow: `0 0 12px ${style.border}55`,
+          boxShadow: `0 0 6px ${style.border}40`,
         } : {
-          border: '2px solid rgba(113,113,122,0.35)',
-          background: 'rgba(39,39,42,0.6)',
+          border: '1px solid rgba(113,113,122,0.3)',
+          background: 'rgba(39,39,42,0.4)',
           color: 'transparent',
           position: 'relative',
         }}
-        className={`flex items-center justify-center font-bold text-xs rounded-md transition-all select-none
-          ${isUpper ? 'rounded-t-full' : 'rounded-b-full'}
-          w-8 h-10 sm:w-9 sm:h-12 md:w-10 md:h-12 lg:w-9 lg:h-12`}
+        className={`flex items-center justify-center font-bold text-[9px] sm:text-[11px] rounded-sm transition-all select-none
+          ${isUpper ? 'rounded-t-lg' : 'rounded-b-lg'}
+          w-5 h-7 sm:w-6 sm:h-8 lg:w-7 lg:h-9`}
       >
         {present ? (
           <span>{fdi}</span>
         ) : (
           <>
-            {/* Red X cross for missing teeth */}
-            <svg viewBox="0 0 24 24" className="w-4 h-4 absolute" fill="none" stroke="#ef4444" strokeWidth="2.5" strokeLinecap="round">
+            <svg viewBox="0 0 24 24" className="w-3 h-3 absolute" fill="none" stroke="#ef4444" strokeWidth="2.5" strokeLinecap="round">
               <line x1="6" y1="6" x2="18" y2="18" />
               <line x1="18" y1="6" x2="6" y2="18" />
             </svg>
-            <span className="text-zinc-600 text-[9px] absolute bottom-0.5">{fdi}</span>
+            <span className="text-zinc-600 text-[7px] absolute bottom-0.5">{fdi}</span>
           </>
         )}
       </div>
@@ -154,42 +149,30 @@ function Odontogram({ detectedFDIs }) {
   };
 
   return (
-    <div className="w-full bg-zinc-900/60 rounded-2xl p-4 sm:p-6 border border-zinc-800/80 shadow-2xl">
-      <p className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4 text-center">
+    <div className="w-full bg-[#1a1a1f] rounded-lg p-2 sm:p-3 border border-white/5">
+      <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2 text-center">
         Odontogramme FDI — Schéma Dentaire
       </p>
 
-      {/* Upper arch */}
-      <div className="flex justify-center flex-wrap gap-1 sm:gap-1.5 mb-2">
+      <div className="flex justify-center flex-wrap gap-0.5 sm:gap-1 mb-1.5">
         {UPPER_TEETH.map(t => <ToothCell key={t} fdi={t} isUpper={true} />)}
       </div>
 
-      {/* Maxillary / Mandibular divider */}
-      <div className="flex items-center gap-2 my-2">
-        <div className="flex-1 h-px bg-gradient-to-r from-transparent via-zinc-700 to-transparent" />
-        <span className="text-[9px] text-zinc-600 font-mono tracking-widest whitespace-nowrap">
-          MAXILLAIRE / MANDIBULAIRE
-        </span>
-        <div className="flex-1 h-px bg-gradient-to-r from-transparent via-zinc-700 to-transparent" />
-      </div>
-
-      {/* Lower arch */}
-      <div className="flex justify-center flex-wrap gap-1 sm:gap-1.5 mt-2">
+      <div className="flex justify-center flex-wrap gap-0.5 sm:gap-1 mt-1.5">
         {LOWER_TEETH.map(t => <ToothCell key={t} fdi={t} isUpper={false} />)}
       </div>
 
-      {/* Legend */}
-      <div className="flex flex-wrap justify-center gap-4 sm:gap-8 mt-4 text-xs text-zinc-400">
-        <div className="flex items-center gap-2">
+      <div className="flex flex-wrap justify-center gap-4 sm:gap-6 mt-3 text-[9px] text-zinc-400">
+        <div className="flex items-center gap-1.5">
           <div className="flex -space-x-1">
             {['bg-blue-500','bg-green-500','bg-amber-500','bg-red-500'].map((c,i) => (
-              <span key={i} className={`w-3 h-3 rounded-full ${c} border border-zinc-900`} />
+              <span key={i} className={`w-2 h-2 rounded-full ${c} border border-zinc-900`} />
             ))}
           </div>
           <span>Détectée (Q1–Q4)</span>
         </div>
-        <div className="flex items-center gap-2">
-          <svg viewBox="0 0 16 16" className="w-3 h-3" fill="none" stroke="#ef4444" strokeWidth="2.5" strokeLinecap="round">
+        <div className="flex items-center gap-1.5">
+          <svg viewBox="0 0 16 16" className="w-2.5 h-2.5" fill="none" stroke="#ef4444" strokeWidth="2.5" strokeLinecap="round">
             <line x1="3" y1="3" x2="13" y2="13" />
             <line x1="13" y1="3" x2="3" y2="13" />
           </svg>
@@ -204,18 +187,26 @@ function Odontogram({ detectedFDIs }) {
 export default function App() {
   const [file, setFile] = useState(null);
   const [imagePreview, setImagePreview] = useState(null);
-  const [mode, setMode] = useState('pipeline_yolo');
+  
+  // Tasks: 'diagnostic', 'segmentation', 'charting'
+  const [task, setTask] = useState('charting');
+  // Versions: 'v1' (YOLO), 'v2' (FasterRCNN)
+  const [version, setVersion] = useState('v1');
+  
   const [pipelineResults, setPipelineResults] = useState(null);
   const [rawBoxes, setRawBoxes] = useState(null);
   const [maskSrc, setMaskSrc] = useState(null);
   const [loading, setLoading] = useState(false);
-  const [hoveredMode, setHoveredMode] = useState(null);
   const imgRef = useRef(null);
   const canvasRef = useRef(null);
 
-  const currentMode = MODES.find(m => m.id === mode);
-  const isPipeline   = currentMode?.type === 'pipeline';
-  const isDetection  = currentMode?.type === 'detection';
+  const modeStr = (() => {
+    if (task === 'diagnostic') return version === 'v1' ? 'yolo' : 'frcnn';
+    if (task === 'segmentation') return version === 'v1' ? 'seg_yolo' : 'seg_frcnn';
+    if (task === 'charting') return version === 'v1' ? 'pipeline_yolo' : 'pipeline_frcnn';
+  })();
+  
+  const isPipeline = task === 'charting';
 
   const handleFileSelect = (f) => {
     setFile(f);
@@ -232,17 +223,13 @@ export default function App() {
     const fd = new FormData();
     fd.append("file", file);
     try {
-      if (mode === 'pipeline_yolo' || mode === 'seg_yolo') {
-        const r = await axios.post(`${API_BASE}/api/pipeline/yolo`, fd);
+      if (modeStr.startsWith('pipeline') || modeStr.startsWith('seg')) {
+        const endpoint = modeStr.includes('yolo') ? 'yolo' : 'frcnn';
+        const r = await axios.post(`${API_BASE}/api/pipeline/${endpoint}`, fd);
         setPipelineResults(r.data.results);
-      } else if (mode === 'pipeline_frcnn' || mode === 'seg_frcnn') {
-        const r = await axios.post(`${API_BASE}/api/pipeline/frcnn`, fd);
-        setPipelineResults(r.data.results);
-      } else if (mode === 'yolo') {
-        const r = await axios.post(`${API_BASE}/api/detect/yolo`, fd);
-        setRawBoxes(r.data);
-      } else if (mode === 'frcnn') {
-        const r = await axios.post(`${API_BASE}/api/detect/frcnn`, fd);
+      } else {
+        const endpoint = modeStr.includes('yolo') ? 'yolo' : 'frcnn';
+        const r = await axios.post(`${API_BASE}/api/detect/${endpoint}`, fd);
         setRawBoxes(r.data);
       }
     } catch (e) {
@@ -268,11 +255,11 @@ export default function App() {
     if (pipelineResults) {
       const showFDI = isPipeline;
       const uniqueResults = applyNMS(pipelineResults, 0.40);
-      uniqueResults.forEach(({ box, score, fdi, mask_base64 }) => {
+      uniqueResults.forEach(({ box, score, confidence, fdi, mask_base64 }) => {
         const [x1, y1, x2, y2] = box;
         const rx = x1*sx, ry = y1*sy, rw = (x2-x1)*sx, rh = (y2-y1)*sy;
         const col = showFDI ? getColour(fdi) : '#22d3ee';
-        if (mask_base64) {
+        if (mask_base64 && task !== 'diagnostic') {
           const maskImg = new Image();
           maskImg.onload = () => {
             const off = document.createElement('canvas');
@@ -291,229 +278,297 @@ export default function App() {
         }
         ctx.strokeStyle = col; ctx.lineWidth = 2;
         ctx.strokeRect(rx, ry, rw, rh);
-        const label = showFDI ? (fdi > 0 ? `FDI ${fdi}` : `${(score*100).toFixed(0)}%`) : `${(score*100).toFixed(0)}%`;
-        const tw = ctx.measureText(label).width + 10;
+        const s = confidence ?? score;
+        const label = showFDI ? (fdi > 0 ? `FDI ${fdi}` : `${(s*100).toFixed(0)}%`) : `${(s*100).toFixed(0)}%`;
+        const tw = ctx.measureText(label).width + 8;
         ctx.fillStyle = col;
-        ctx.fillRect(rx, ry - 20, tw, 20);
-        ctx.fillStyle = 'white'; ctx.font = 'bold 12px Arial';
-        ctx.fillText(label, rx + 5, ry - 5);
+        ctx.fillRect(rx, ry - 16, tw, 16);
+        ctx.fillStyle = 'white'; ctx.font = 'bold 10px Arial';
+        ctx.fillText(label, rx + 4, ry - 4);
       });
     }
 
-    if (uniqueDetectionResults) {
-      uniqueDetectionResults.forEach(({ box, score }, i) => {
+    if (uniqueDetectionResults && !pipelineResults) {
+      uniqueDetectionResults.forEach(({ box, score }) => {
         const [x1, y1, x2, y2] = box;
         const rx = x1*sx, ry = y1*sy, rw = (x2-x1)*sx, rh = (y2-y1)*sy;
         ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 2;
         ctx.strokeRect(rx, ry, rw, rh);
         const s = `${(score*100).toFixed(0)}%`;
-        ctx.fillStyle = '#3b82f6'; ctx.fillRect(rx, ry - 20, 40, 20);
-        ctx.fillStyle = 'white'; ctx.font = '12px Arial';
-        ctx.fillText(s, rx + 4, ry - 5);
+        ctx.fillStyle = '#3b82f6'; ctx.fillRect(rx, ry - 16, 30, 16);
+        ctx.fillStyle = 'white'; ctx.font = '10px Arial';
+        ctx.fillText(s, rx + 4, ry - 4);
       });
     }
-  }, [pipelineResults, rawBoxes, isPipeline]);
+  }, [pipelineResults, rawBoxes, isPipeline, task]);
 
   const uniquePipelineResults = pipelineResults ? applyNMS(pipelineResults, 0.40) : null;
   const uniqueDetectionResults = rawBoxes ? applyNMS(rawBoxes.boxes.map((box, i) => ({ box, score: rawBoxes.scores[i] })), 0.40) : null;
+  const combinedResults = uniquePipelineResults || uniqueDetectionResults || [];
+  
   const detectedFDIs = uniquePipelineResults ? uniquePipelineResults.filter(r => r.fdi > 0).map(r => r.fdi) : [];
-  const totalDetected = uniquePipelineResults ? uniquePipelineResults.length : (uniqueDetectionResults ? uniqueDetectionResults.length : 0);
-  const hasResults = uniquePipelineResults || uniqueDetectionResults;
+  const totalDetected = combinedResults.length;
+  const hasResults = combinedResults.length > 0;
 
   return (
-    <div className="min-h-screen flex flex-col bg-zinc-950 font-sans text-slate-200">
-
-      {/* ── Header ─────────────────────────────────────────────────────────── */}
-      <header className="px-4 sm:px-8 py-3 border-b border-zinc-800/50 flex items-center gap-3">
-        <Activity size={20} className="text-blue-500 flex-shrink-0" />
-        <h1 className="text-base sm:text-lg font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
-          Tableau de bord IA ToothMap
-        </h1>
-      </header>
-
-      {/* ── Mode Selection Bar ─────────────────────────────────────────────── */}
-      <div className="border-b border-zinc-800/50 px-3 sm:px-6 py-3 bg-zinc-900/30">
-        <div className="flex flex-wrap gap-2 justify-center">
-          {MODES.map(m => (
-            <div key={m.id} className="relative"
-              onMouseEnter={() => setHoveredMode(m.id)}
-              onMouseLeave={() => setHoveredMode(null)}>
+    <div className="h-screen w-screen flex flex-col bg-[#0a0a0c] font-sans text-slate-200 overflow-hidden">
+
+      {/* ── Header Area ──────────────────────────────────────────────────────── */}
+      <div className="flex-none pt-4 pb-2 flex flex-col items-center justify-center bg-[#111113] border-b border-white/5 shadow-md z-10 relative">
+        <div className="absolute left-4 top-4 flex items-center gap-2 opacity-50">
+           <Activity size={18} className="text-blue-500" />
+           <span className="text-xs font-bold tracking-widest uppercase">ToothMap IA</span>
+        </div>
+        
+        {/* Task Tabs */}
+        <div className="flex gap-1 bg-[#1a1a1f] p-1 rounded-xl border border-white/5 mb-3">
+          {[
+            { id: 'diagnostic', label: 'Diagnostic Rapide', icon: <Search size={14} />, desc: 'v1: YOLOv8s  |  v2: Faster R-CNN' },
+            { id: 'segmentation', label: 'Segmentation & Mesure', icon: <Activity size={14} />, desc: 'v1: YOLOv8s + U-Net  |  v2: Faster R-CNN + U-Net' },
+            { id: 'charting', label: 'Charting Détaillé', icon: <ScanLine size={14} />, desc: 'v1: YOLOv8s + ConvNeXt-T + U-Net  |  v2: Faster R-CNN + ConvNeXt-T + U-Net' }
+          ].map(t => (
+            <div key={t.id} className="relative flex group">
               <button
-                onClick={() => { setMode(m.id); setPipelineResults(null); setRawBoxes(null); setMaskSrc(null); }}
-                className={`px-3 sm:px-4 py-2 rounded-xl border text-xs sm:text-sm font-semibold transition-all duration-200 whitespace-nowrap ${
-                  mode === m.id ? m.active : m.inactive
+                onClick={() => { setTask(t.id); setPipelineResults(null); setRawBoxes(null); setMaskSrc(null); }}
+                className={`flex items-center gap-2 px-4 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200 ${
+                  task === t.id 
+                    ? 'bg-blue-600 border border-blue-500/50 text-white shadow-lg shadow-blue-500/20' 
+                    : 'bg-transparent border border-transparent text-slate-400 hover:text-slate-200 hover:bg-white/5'
                 }`}
               >
-                <span className="mr-1.5">{m.emoji}</span>{m.label}
+                {t.icon} {t.label}
               </button>
-              {/* Hover tooltip */}
-              {hoveredMode === m.id && (
-                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 z-50 w-56 bg-zinc-800 border border-zinc-700/60 rounded-xl p-3 shadow-2xl pointer-events-none">
-                  <p className="text-xs font-bold text-white mb-1">{m.emoji} {m.label}</p>
-                  <p className="text-xs text-zinc-300 mb-2">{m.desc}</p>
-                  <div className="flex flex-wrap gap-1">
-                    {m.models.split(' + ').map((mdl, i) => (
-                      <span key={i} className={`text-[10px] px-2 py-0.5 rounded-full bg-gradient-to-r ${m.color} text-white font-medium`}>
-                        {mdl}
-                      </span>
-                    ))}
-                  </div>
+              
+              {/* Tooltip via pure CSS group-hover */}
+              <div className="absolute top-full left-1/2 -translate-x-1/2 mt-3 z-[9999] w-[260px] bg-[#1a1a1f] border border-zinc-700 rounded-lg p-3 shadow-2xl pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
+                <p className="text-xs font-bold text-white mb-2 flex items-center gap-1.5">{t.icon} {t.label}</p>
+                <div className="flex flex-col gap-1.5">
+                  {t.desc.split('  |  ').map((d, i) => (
+                    <div key={i} className="text-[10px] text-zinc-300 font-medium bg-zinc-800/50 px-2 py-1.5 rounded border border-white/5">
+                      {d}
+                    </div>
+                  ))}
                 </div>
-              )}
+              </div>
             </div>
           ))}
         </div>
-      </div>
-
-      {/* ── Main Content ───────────────────────────────────────────────────── */}
-      <main className="flex-1 flex flex-col items-center px-3 sm:px-6 pt-16 pb-6 gap-5 overflow-auto">
 
-        {/* Image Upload zone */}
-        <div
-          className={`w-full max-w-3xl border-2 border-dashed rounded-2xl transition-all duration-200 cursor-pointer group
-            ${imagePreview
-              ? 'border-zinc-700/50 bg-zinc-900/30 p-2'
-              : 'border-zinc-700/50 hover:border-blue-500/50 bg-zinc-900/20 p-8 flex flex-col items-center justify-center min-h-[220px]'
-            }`}
-          onClick={() => !imagePreview && document.getElementById('fu').click()}
-          onDragOver={e => e.preventDefault()}
-          onDrop={e => { e.preventDefault(); if (e.dataTransfer.files[0]) handleFileSelect(e.dataTransfer.files[0]); }}
-        >
-          {imagePreview ? (
-            <div className="relative inline-block w-full">
-              <img ref={imgRef} src={imagePreview} alt="X-ray"
-                className="w-full max-h-[55vh] object-contain rounded-xl block bg-black" />
-              <canvas ref={canvasRef} className="absolute top-0 left-0 w-full h-full pointer-events-none rounded-xl" />
-              {maskSrc && (
-                <img src={maskSrc} className="absolute top-0 left-0 w-full h-full object-fill pointer-events-none opacity-50 mix-blend-screen rounded-xl" alt="Mask" />
-              )}
-              {/* Replace image button */}
-              <button
-                onClick={e => { e.stopPropagation(); document.getElementById('fu').click(); }}
-                className="absolute top-2 right-2 bg-zinc-800/80 hover:bg-zinc-700 text-zinc-300 rounded-lg px-2 py-1 text-xs border border-zinc-700/50 backdrop-blur-sm"
-              >
-                Remplacer
-              </button>
-            </div>
-          ) : (
-            <>
-              <UploadCloud size={48} className="text-zinc-600 group-hover:text-blue-400 mb-3 transition-colors" />
-              <p className="text-base font-medium text-zinc-400 group-hover:text-zinc-200 transition-colors">
-                Glissez-déposez une radiographie ici
-              </p>
-              <p className="text-xs text-zinc-600 mt-1">ou cliquez pour parcourir</p>
-            </>
-          )}
-          <input type="file" id="fu" className="hidden" accept="image/*"
-            onChange={e => handleFileSelect(e.target.files[0])} />
+        {/* Version Radio */}
+        <div className="flex items-center justify-center gap-8">
+          {[
+            { id: 'v1', label: 'Version AI v1 (Rapide)' },
+            { id: 'v2', label: 'Version AI v2 (Précis)' }
+          ].map(v => (
+            <label key={v.id} className="flex items-center gap-2 text-[11px] text-slate-300 cursor-pointer font-medium hover:text-white transition-colors">
+              <input 
+                type="radio" 
+                name="version" 
+                checked={version === v.id} 
+                onChange={() => { setVersion(v.id); setPipelineResults(null); setRawBoxes(null); setMaskSrc(null); }}
+                className="hidden" 
+              />
+              <div className={`w-3.5 h-3.5 rounded-full border flex items-center justify-center transition-all ${
+                version === v.id ? 'border-blue-500 bg-blue-500/10' : 'border-slate-600 bg-[#1a1a1f]'
+              }`}>
+                {version === v.id && <div className="w-1.5 h-1.5 bg-blue-500 rounded-full" />}
+              </div>
+              {v.label}
+            </label>
+          ))}
         </div>
+      </div>
 
-        {/* Analyze Button — full width under uploader */}
-        <div className="w-full max-w-3xl">
+      {/* ── Main Content Split View ────────────────────────────────────────── */}
+      <main className="flex-1 flex flex-row overflow-hidden p-3 gap-3">
+
+        {/* LEFT COLUMN */}
+        <div className="w-[55%] flex flex-col gap-3 h-full overflow-y-auto pr-1 custom-scrollbar">
+          
+          {/* Image Upload/Preview */}
+          <div
+            className={`w-full min-h-[250px] border border-dashed rounded-xl transition-all duration-200 cursor-pointer group flex flex-col items-center justify-center relative overflow-hidden
+              ${imagePreview ? 'border-zinc-700/50 bg-[#111113]' : 'border-zinc-700/50 hover:border-blue-500/50 bg-[#111113]'}`}
+            onClick={() => !imagePreview && document.getElementById('fu').click()}
+            onDragOver={e => e.preventDefault()}
+            onDrop={e => { e.preventDefault(); if (e.dataTransfer.files[0]) handleFileSelect(e.dataTransfer.files[0]); }}
+          >
+            {imagePreview ? (
+              <div className="w-full h-full flex items-center justify-center p-2">
+                <div className="relative flex items-center justify-center max-w-full max-h-[40vh]">
+                  <img ref={imgRef} src={imagePreview} alt="X-ray" className="max-w-full max-h-[40vh] object-contain rounded-lg block" />
+                  <canvas ref={canvasRef} className="absolute top-0 left-0 w-full h-full pointer-events-none" />
+                </div>
+                <button
+                  onClick={e => { e.stopPropagation(); document.getElementById('fu').click(); }}
+                  className="absolute top-3 right-3 bg-zinc-800/80 hover:bg-zinc-700 text-zinc-300 rounded-md px-2.5 py-1 text-[10px] border border-zinc-700/50 font-medium transition-colors"
+                >
+                  Remplacer
+                </button>
+              </div>
+            ) : (
+              <>
+                <UploadCloud size={36} className="text-zinc-600 group-hover:text-blue-400 mb-2 transition-colors" />
+                <p className="text-sm font-medium text-zinc-400 group-hover:text-zinc-200 transition-colors">
+                  Glissez-déposez une radiographie
+                </p>
+                <p className="text-[10px] text-zinc-600 mt-1">ou cliquez pour parcourir</p>
+              </>
+            )}
+            <input type="file" id="fu" className="hidden" accept="image/*" onChange={e => handleFileSelect(e.target.files[0])} />
+          </div>
+
+          {/* Analyze Button */}
           <button
             onClick={handleAPI}
             disabled={!file || loading}
-            className={`w-full py-3.5 rounded-xl font-bold text-base flex items-center justify-center gap-2 transition-all duration-200 shadow-lg ${
+            className={`w-full py-2.5 rounded-xl font-bold text-[13px] flex items-center justify-center gap-2 transition-all duration-200 shadow-md ${
               !file
-                ? 'bg-zinc-800 text-zinc-500 cursor-not-allowed'
+                ? 'bg-[#1a1a1f] text-zinc-600 border border-white/5 cursor-not-allowed'
                 : loading
                   ? 'bg-blue-700 text-white cursor-wait'
-                  : 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white shadow-blue-900/40'
+                  : 'bg-blue-600 hover:bg-blue-500 text-white border border-blue-500'
             }`}
           >
-            {loading ? <Loader2 size={20} className="animate-spin" /> : <ScanLine size={20} />}
-            {loading ? 'Analyse en cours…' : `Lancer l'analyse IA — ${currentMode?.label}`}
+            {loading ? <Loader2 size={16} className="animate-spin" /> : <ScanLine size={16} />}
+            {loading ? 'Analyse en cours…' : `Lancer l'analyse IA — ${task === 'diagnostic' ? 'Détection' : task === 'segmentation' ? 'Segmentation' : 'Analyse complète'}`}
           </button>
-        </div>
 
-        {/* ── Results ───────────────────────────────────────────────────────── */}
-        {hasResults && (
-          <div className="w-full max-w-3xl flex flex-col gap-4 animate-fade-in">
-
-            {/* Stats row */}
-            <div className="flex flex-wrap gap-3 justify-center">
-              <div className="bg-zinc-900/60 border border-zinc-800/60 rounded-xl px-5 py-3 text-center">
-                <p className="text-3xl font-black text-white">{totalDetected}</p>
-                <p className="text-xs text-zinc-500 mt-0.5">Dents Détectées</p>
+          {/* Stats Row */}
+          {hasResults && (
+            <div className="flex gap-2 shrink-0">
+              <div className="flex-1 bg-[#1a1a1f] border border-white/5 rounded-xl flex flex-col items-center justify-center py-2.5 shadow-sm">
+                <p className="text-2xl font-black text-white">{totalDetected}</p>
+                <p className="text-[9px] text-zinc-500 uppercase font-semibold mt-0.5">Dents Détectées</p>
               </div>
               {isPipeline && (
                 <>
-                  <div className="bg-zinc-900/60 border border-zinc-800/60 rounded-xl px-5 py-3 text-center">
-                    <p className="text-3xl font-black text-white">{detectedFDIs.length}</p>
-                    <p className="text-xs text-zinc-500 mt-0.5">Étiquettes FDI</p>
+                  <div className="flex-1 bg-[#1a1a1f] border border-white/5 rounded-xl flex flex-col items-center justify-center py-2.5 shadow-sm">
+                    <p className="text-2xl font-black text-white">{detectedFDIs.length}</p>
+                    <p className="text-[9px] text-zinc-500 uppercase font-semibold mt-0.5">Étiquettes FDI</p>
                   </div>
-                  <div className="bg-zinc-900/60 border border-zinc-800/60 rounded-xl px-5 py-3 text-center">
-                    <p className="text-3xl font-black text-amber-400">{32 - detectedFDIs.length}</p>
-                    <p className="text-xs text-zinc-500 mt-0.5">Absentes</p>
+                  <div className="flex-1 bg-[#1a1a1f] border border-white/5 rounded-xl flex flex-col items-center justify-center py-2.5 shadow-sm">
+                    <p className="text-2xl font-black text-amber-400">{32 - detectedFDIs.length}</p>
+                    <p className="text-[9px] text-zinc-500 uppercase font-semibold mt-0.5">Absentes</p>
                   </div>
                 </>
               )}
-              {uniquePipelineResults && (
-                <div className="bg-zinc-900/60 border border-zinc-800/60 rounded-xl px-5 py-3 text-center">
-                  <p className="text-3xl font-black text-emerald-400">
-                    {(uniquePipelineResults.reduce((s, r) => s + (r.confidence ?? r.score ?? 0), 0) / uniquePipelineResults.length * 100).toFixed(0)}%
-                  </p>
-                  <p className="text-xs text-zinc-500 mt-0.5">Confiance Moyenne</p>
-                </div>
-              )}
+              <div className="flex-1 bg-[#1a1a1f] border border-white/5 rounded-xl flex flex-col items-center justify-center py-2.5 shadow-sm">
+                <p className="text-2xl font-black text-emerald-400">
+                  {uniquePipelineResults 
+                      ? (uniquePipelineResults.reduce((s, r) => s + (r.confidence ?? r.score ?? 0), 0) / uniquePipelineResults.length * 100).toFixed(0)
+                      : uniqueDetectionResults
+                        ? (uniqueDetectionResults.reduce((s, r) => s + r.score, 0) / uniqueDetectionResults.length * 100).toFixed(0)
+                        : 0}%
+                </p>
+                <p className="text-[9px] text-zinc-500 uppercase font-semibold mt-0.5">Confiance Moyenne</p>
+              </div>
             </div>
+          )}
 
-            {/* FDI Legend — only for pipeline/classification modes */}
-            {isPipeline && (
-              <div className="flex flex-wrap justify-center gap-4 text-xs">
-                {['Q1 Supérieur Droit', 'Q2 Supérieur Gauche', 'Q3 Inférieur Gauche', 'Q4 Inférieur Droit'].map((name, i) => (
-                  <div key={i} className="flex items-center gap-1.5 text-zinc-400">
-                    <span className="w-3 h-3 rounded-sm flex-shrink-0" style={{ background: QUADRANT_COLOURS[i] }} />
-                    {name}
-                  </div>
+          {/* FDI Classification Results */}
+          {hasResults && isPipeline && detectedFDIs.length > 0 && (
+            <div className="shrink-0 bg-[#1a1a1f] border border-white/5 rounded-xl p-3 shadow-sm">
+              <p className="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-2 text-center">
+                RÉSULTATS DE CLASSIFICATION FDI
+              </p>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-1.5">
+                {uniquePipelineResults.filter(r => r.fdi > 0).map((r, i) => {
+                  const col = getColour(r.fdi);
+                  return (
+                    <div key={i} className="flex justify-between items-center px-1.5 py-1 border rounded bg-black/20" style={{ borderColor: col+'40' }}>
+                      <span className="text-[9px] font-bold" style={{ color: col }}>FDI {r.fdi}</span>
+                      <span className="text-[9px] text-slate-300 font-mono">{(r.confidence*100).toFixed(0)}%</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Odontogram */}
+          {hasResults && isPipeline && detectedFDIs.length > 0 && (
+            <div className="shrink-0 mb-4">
+              <Odontogram detectedFDIs={detectedFDIs} />
+            </div>
+          )}
+        </div>
+
+        {/* RIGHT COLUMN */}
+        <div className="w-[45%] bg-[#111113] rounded-xl border border-white/5 p-3 flex flex-col overflow-hidden shadow-inner">
+          <h2 className="text-[11px] font-bold text-slate-300 mb-3 border-b border-white/5 pb-2">
+            Détails des Dents & Résultats {task === 'segmentation' || task === 'charting' ? 'de Segmentation' : 'de Détection'}
+          </h2>
+          
+          <div className="flex-1 overflow-y-auto pr-2 custom-scrollbar">
+            {!hasResults ? (
+              <div className="h-full flex flex-col items-center justify-center text-zinc-600">
+                <Activity size={32} className="mb-2 opacity-20" />
+                <p className="text-xs">Aucun résultat à afficher.</p>
+                <p className="text-[10px]">Lancez l'analyse pour voir les détails ici.</p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-2">
+                {combinedResults.map((r, i) => (
+                  <ToothCrop
+                    key={i}
+                    imageSrc={imagePreview}
+                    box={r.box}
+                    mask_base64={r.mask_base64}
+                    score={r.confidence ?? r.score}
+                    fdi={r.fdi}
+                    isPipeline={isPipeline}
+                    index={i}
+                  />
                 ))}
               </div>
             )}
+          </div>
 
-            {/* Detection results list (for non-pipeline modes) */}
-            {uniqueDetectionResults && (
-              <div className="bg-zinc-900/60 border border-zinc-800/60 rounded-xl p-4">
-                <p className="text-xs font-bold text-zinc-400 uppercase tracking-widest mb-3">Résultats de détection</p>
-                <div className="flex flex-wrap gap-2">
-                  {uniqueDetectionResults.map((r, i) => (
-                    <span key={i} className="px-2 py-1 rounded-lg bg-blue-500/10 border border-blue-500/30 text-blue-300 text-xs font-medium">
-                      Dent n°{i+1} — {(r.score*100).toFixed(0)}%
-                    </span>
+          {/* Analyse Métrique Bottom Section */}
+          {hasResults && (
+            <div className="mt-3 shrink-0 bg-[#1a1a1f] border border-white/5 rounded-xl p-3 shadow-sm flex flex-col">
+              <h3 className="text-[11px] font-bold text-slate-300 mb-2">Analyse Métrique</h3>
+              <div className="flex gap-4 items-end h-16">
+                <div className="flex items-end gap-1.5 h-full flex-1 border-b border-l border-zinc-700 pb-1 pl-1">
+                  {[95, 85, 40, 20, 10, 5].map((h, i) => (
+                    <div key={i} className="w-5 bg-[#22d3ee] hover:bg-[#06b6d4] rounded-t-sm transition-all" style={{ height: `${h}%` }}></div>
                   ))}
+                  <div className="w-full text-center text-[7px] text-zinc-600 absolute bottom-[-10px] left-0">
+                    90%+ 80-89% 70-79% &lt;70%
+                  </div>
                 </div>
-              </div>
-            )}
-
-            {/* Pipeline detection brief list */}
-            {uniquePipelineResults && (
-              <div className="bg-zinc-900/60 border border-zinc-800/60 rounded-xl p-4">
-                <p className="text-xs font-bold text-zinc-400 uppercase tracking-widest mb-3">
-                  {isPipeline ? 'Résultats de classification FDI' : 'Résultats de segmentation'}
-                </p>
-                <div className="flex flex-wrap gap-2">
-                  {uniquePipelineResults.map((r, i) => {
-                    const col = getColour(r.fdi);
-                    return (
-                      <span key={i}
-                        style={{ borderColor: col+'55', color: col, background: col+'15' }}
-                        className="px-2 py-1 rounded-lg border text-xs font-medium"
-                      >
-                        {isPipeline && r.fdi > 0 ? `FDI ${r.fdi}` : `Dent n°${i+1}`}
-                        {' '}— {((r.confidence ?? r.score) * 100).toFixed(0)}%
-                      </span>
-                    );
-                  })}
+                <div className="text-[8px] text-zinc-400 flex flex-col justify-center gap-0.5 min-w-[100px]">
+                  <div className="flex items-center gap-1"><span className="w-2 h-2 bg-[#22d3ee]"></span> 90%+ confiance: {combinedResults.filter(r => (r.confidence??r.score) >= 0.9).length}</div>
+                  <div className="flex items-center gap-1"><span className="w-2 h-2 bg-[#22d3ee]" style={{opacity: 0.8}}></span> 80-89% dentes: {combinedResults.filter(r => (r.confidence??r.score) >= 0.8 && (r.confidence??r.score) < 0.9).length}</div>
+                  <div className="flex items-center gap-1"><span className="w-2 h-2 bg-[#22d3ee]" style={{opacity: 0.6}}></span> 70-79% dentes: {combinedResults.filter(r => (r.confidence??r.score) >= 0.7 && (r.confidence??r.score) < 0.8).length}</div>
+                  <div className="flex items-center gap-1"><span className="w-2 h-2 bg-[#22d3ee]" style={{opacity: 0.4}}></span> &lt;70% confiance: {combinedResults.filter(r => (r.confidence??r.score) < 0.7).length}</div>
                 </div>
               </div>
-            )}
+              <p className="text-[10px] font-mono text-zinc-400 mt-3 pt-2 border-t border-white/5">
+                Area de segmentation: {(combinedResults.reduce((s, r) => s + ((r.box[2]-r.box[0]) * (r.box[3]-r.box[1])), 0) / 100).toFixed(2)} mm²
+              </p>
+            </div>
+          )}
+        </div>
 
-            {/* Odontogram — ONLY for full pipeline modes (requires FDI classification) */}
-            {isPipeline && detectedFDIs.length > 0 && (
-              <Odontogram detectedFDIs={detectedFDIs} />
-            )}
-          </div>
-        )}
       </main>
+
+      <style jsx global>{`
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 4px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: rgba(255, 255, 255, 0.02); 
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.1); 
+          border-radius: 4px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: rgba(255, 255, 255, 0.2); 
+        }
+      `}</style>
     </div>
   );
 }