feat: initialize project structure with core inference logic and interactive dashboard UI

README.md

@@ -59,21 +59,27 @@ cargo build --release
 ### Step 1: Training the AI Model
 To optimize the neural network for your local environment, run the training mode:
 ```bash
-# Starts the training cycle (Configured for 50 Epochs)
-cargo run
+# Starts the training cycle
+cargo run -- train
 ```
-*Tip: Allow the loss to converge below 0.05 for optimal results.*
 
-### Step 2: Running the Dashboard
-After training is complete (generating the `model_weights.bin` file), launch the testing interface:
+### Step 2: Running the Professional Dashboard
+Launch the visual testing interface to see real-time detections and scores:
 ```bash
-# Starts the Axum web server
+# Starts the modular Axum web server
 cargo run -- gui
 ```
 **Features:**
-- **Image Upload**: Test local image samples via the dashboard.
-- **Point Visualization**: Inspect detected calibration points and dart locations.
-- **Automatic Scoring**: Instant sector calculation and latency reporting.
+- **Dynamic Image Upload**: Test board imagery via the premium glassmorphism dashboard.
+- **Neural Point Mapping**: Inspect detected calibration corners and dart locations with hover effects.
+- **Real-time Scoring**: Instant sector calculation based on official BDO geometry.
+
+### Step 3: CLI Model Testing
+Test individual images directly from the terminal:
+```bash
+# Test a specific image
+cargo run -- test path/to/image.jpg
+```
 
 ---
 
@@ -125,6 +131,7 @@ If you encounter a bug or wish to provide performance optimizations, please subm
 
 ## Resources
 
+- **Core AI Framework**: [Burn - A Flexible & Comprehensive Deep Learning Framework](https://burn.dev/)
 - **Original Inspiration**: [Paper: Keypoints as Objects for Automatic Scorekeeping](https://arxiv.org/abs/2105.09880)
 - **Model Training Resources**: [Download from Google Drive](https://drive.google.com/file/d/1ZEvuzg9zYbPd1FdZgV6v1aT4sqbqmLqp/view?usp=sharing)
 - **Official Documentation Reference**: [IEEE Dataport Dataset](https://ieee-dataport.org/open-access/deepdarts-dataset)

src/args.rs

@@ -0,0 +1,40 @@
+pub enum Command {
+    Gui,
+    Test { img_path: String },
+    Train,
+}
+
+pub struct AppArgs {
+    pub command: Command,
+}
+
+impl AppArgs {
+    pub fn parse() -> Self {
+        let args: Vec<String> = std::env::args().collect();
+
+        if args.len() > 1 {
+            match args[1].as_str() {
+                "gui" => Self {
+                    command: Command::Gui,
+                },
+                "test" => {
+                    let img_path = if args.len() > 2 {
+                        args[2].clone()
+                    } else {
+                        "test.jpg".to_string()
+                    };
+                    Self {
+                        command: Command::Test { img_path },
+                    }
+                }
+                _ => Self {
+                    command: Command::Train,
+                },
+            }
+        } else {
+            Self {
+                command: Command::Train,
+            }
+        }
+    }
+}

src/inference.rs

@@ -3,7 +3,7 @@ use burn::module::Module;
 use burn::record::{BinFileRecorder, FullPrecisionSettings, Recorder};
 use burn::tensor::backend::Backend;
 use burn::tensor::{Tensor, TensorData};
-use image::{DynamicImage, GenericImageView};
+use image;
 
 pub fn run_inference<B: Backend>(device: &B::Device, image_path: &str) {
     println!("🔍 Loading model for inference...");

src/lib.rs

@@ -0,0 +1,9 @@
+pub mod args;
+pub mod data;
+pub mod loss;
+pub mod model;
+pub mod scoring;
+pub mod server;
+pub mod train;
+pub mod tests;
+pub mod inference;

src/main.rs

@@ -1,88 +1,37 @@
-use crate::model::DartVisionModel;
-use crate::server::start_gui;
-use crate::train::{train, TrainingConfig};
+use rust_auto_score_engine::args::{AppArgs, Command};
+use rust_auto_score_engine::server::start_gui;
+use rust_auto_score_engine::train::{train, TrainingConfig};
+use rust_auto_score_engine::tests::test_model;
 use burn::backend::wgpu::WgpuDevice;
 use burn::backend::Wgpu;
-use burn::prelude::*;
-use burn::record::{BinFileRecorder, FullPrecisionSettings, Recorder};
-
-pub mod data;
-pub mod loss;
-pub mod model;
-pub mod scoring;
-pub mod server;
-pub mod train;
 
 fn main() {
+    let app_args = AppArgs::parse();
     let device = WgpuDevice::default();
-    let args: Vec<String> = std::env::args().collect();
-
-    if args.len() > 1 && args[1] == "gui" {
-        println!("🌐 [Burn-DartVision] Starting Professional Dashboard...");
-        tokio::runtime::Builder::new_multi_thread()
-            .enable_all()
-            .build()
-            .unwrap()
-            .block_on(start_gui(device));
-    } else if args.len() > 1 && args[1] == "test" {
-        let img_path = if args.len() > 2 { &args[2] } else { "test.jpg" };
-        test_model(device, img_path);
-    } else {
-        println!("🚀 [Burn-DartVision] Starting Full Project Training...");
-        let dataset_path = "dataset/labels.json";
-
-        let config = TrainingConfig {
-            num_epochs: 50,
-            batch_size: 1,
-            lr: 1e-3,
-        };
-
-        train::<burn::backend::Autodiff<Wgpu>>(device, dataset_path, config);
-    }
-}
 
-fn test_model(device: WgpuDevice, img_path: &str) {
-    println!("🔍 Testing model on: {}", img_path);
-    let recorder = BinFileRecorder::<FullPrecisionSettings>::default();
-    let model = DartVisionModel::<Wgpu>::new(&device);
-
-    let record = match recorder.load("model_weights".into(), &device) {
-        Ok(r) => r,
-        Err(_) => {
-            println!("⚠️ Weights not found, using initial model.");
-            model.clone().into_record()
+    match app_args.command {
+        Command::Gui => {
+            println!("🌐 [Burn-DartVision] Starting Professional Dashboard...");
+            tokio::runtime::Builder::new_multi_thread()
+                .enable_all()
+                .build()
+                .unwrap()
+                .block_on(start_gui(device));
         }
-    };
-    let model = model.load_record(record);
-
-    let img = image::open(img_path).unwrap_or_else(|_| {
-        println!("❌ Image not found at {}. Using random tensor.", img_path);
-        image::DynamicImage::new_rgb8(416, 416)
-    });
-    let resized = img.resize_exact(416, 416, image::imageops::FilterType::Triangle);
-    let pixels: Vec<f32> = resized
-        .to_rgb8()
-        .pixels()
-        .flat_map(|p| {
-            vec![
-                p[0] as f32 / 255.0,
-                p[1] as f32 / 255.0,
-                p[2] as f32 / 255.0,
-            ]
-        })
-        .collect();
-
-    let tensor_data = TensorData::new(pixels, [1, 416, 416, 3]);
-    let input = Tensor::<Wgpu, 4>::from_data(tensor_data, &device).permute([0, 3, 1, 2]);
-    let (out, _): (Tensor<Wgpu, 4>, _) = model.forward(input);
+        Command::Test { img_path } => {
+            test_model(device, &img_path);
+        }
+        Command::Train => {
+            println!("🚀 [Burn-DartVision] Starting Full Project Training...");
+            let dataset_path = "dataset/labels.json";
 
-    let obj = burn::tensor::activation::sigmoid(out.clone().narrow(1, 4, 1));
-    let (max_val, _) = obj.reshape([1, 676]).max_dim_with_indices(1);
+            let config = TrainingConfig {
+                num_epochs: 50,
+                batch_size: 1,
+                lr: 1e-3,
+            };
 
-    let score = max_val
-        .to_data()
-        .convert::<f32>()
-        .as_slice::<f32>()
-        .unwrap()[0];
-    println!("📊 Max Objectness Score: {:.6}", score);
+            train::<burn::backend::Autodiff<Wgpu>>(device, dataset_path, config);
+        }
+    }
 }

src/tests.rs

@@ -0,0 +1,57 @@
+use crate::model::DartVisionModel;
+use burn::backend::Wgpu;
+use burn::backend::wgpu::WgpuDevice;
+use burn::prelude::*;
+use burn::record::{BinFileRecorder, FullPrecisionSettings, Recorder};
+
+pub fn test_model(device: WgpuDevice, img_path: &str) {
+    println!("🔍 Testing model on: {}", img_path);
+    let recorder = BinFileRecorder::<FullPrecisionSettings>::default();
+    let model = DartVisionModel::<Wgpu>::new(&device);
+
+    let record = match recorder.load("model_weights".into(), &device) {
+        Ok(r) => r,
+        Err(_) => {
+            println!("⚠️ Weights not found, using initial model.");
+            model.clone().into_record()
+        }
+    };
+    let model = model.load_record(record);
+
+    let img = image::open(img_path).unwrap_or_else(|_| {
+        println!("❌ Image not found at {}. Using random tensor.", img_path);
+        image::DynamicImage::new_rgb8(416, 416)
+    });
+    let resized = img.resize_exact(416, 416, image::imageops::FilterType::Triangle);
+    let pixels: Vec<f32> = resized
+        .to_rgb8()
+        .pixels()
+        .flat_map(|p| {
+            vec![
+                p[0] as f32 / 255.0,
+                p[1] as f32 / 255.0,
+                p[2] as f32 / 255.0,
+            ]
+        })
+        .collect();
+
+    let tensor_data = TensorData::new(pixels, [1, 416, 416, 3]);
+    let input = Tensor::<Wgpu, 4>::from_data(tensor_data, &device).permute([0, 3, 1, 2]);
+    let (out, _): (Tensor<Wgpu, 4>, _) = model.forward(input);
+
+    let obj = burn::tensor::activation::sigmoid(out.clone().narrow(1, 4, 1));
+    let (max_val, _) = obj.reshape([1, 676]).max_dim_with_indices(1);
+
+    let score = max_val
+        .to_data()
+        .convert::<f32>()
+        .as_slice::<f32>()
+        .unwrap()[0];
+    println!("📊 Max Objectness Score: {:.6}", score);
+    
+    if score > 0.1 {
+        println!("✅ Model detection looks promising!");
+    } else {
+        println!("⚠️ Low confidence detection. Training may still be in progress.");
+    }
+}

static/index.html

@@ -13,8 +13,9 @@
             --secondary: #00d4ff;
             --accent: #ff4d4d;
             --bg: #0a0e14;
-            --card-bg: rgba(255, 255, 255, 0.05);
-            --glass-border: rgba(255, 255, 255, 0.1);
+            --card-bg: rgba(255, 255, 255, 0.03);
+            --glass-border: rgba(255, 255, 255, 0.08);
+            --panel-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
         }
 
         * {
@@ -32,78 +33,102 @@
             flex-direction: column;
             align-items: center;
             overflow-x: hidden;
+            background-image: 
+                radial-gradient(circle at 20% 20%, rgba(0, 255, 136, 0.05) 0%, transparent 40%),
+                radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 40%);
         }
 
-        .bg-glow {
+        .bg-grid {
             position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: radial-gradient(circle at 50% 50%, #00ff8811 0%, transparent 50%),
-                        radial-gradient(circle at 80% 20%, #00d4ff11 0%, transparent 40%);
+            top: 0; left: 0; width: 100%; height: 100%;
+            background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+                              linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+            background-size: 50px 50px;
             z-index: -1;
             pointer-events: none;
         }
 
         header {
-            padding: 2rem;
+            padding: 3rem 2rem;
             text-align: center;
+            width: 100%;
+            background: linear-gradient(to bottom, rgba(10, 14, 20, 0.8), transparent);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--glass-border);
+            margin-bottom: 2rem;
         }
 
         h1 {
             font-size: 3.5rem;
             font-weight: 800;
-            background: linear-gradient(to right, var(--primary), var(--secondary));
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
             -webkit-background-clip: text;
             background-clip: text;
             -webkit-text-fill-color: transparent;
             margin-bottom: 0.5rem;
-            letter-spacing: -1px;
+            letter-spacing: -2px;
+            filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.3));
         }
 
         p.subtitle {
             color: #8892b0;
-            font-size: 1.1rem;
-            letter-spacing: 2px;
+            font-size: 0.9rem;
+            letter-spacing: 4px;
             text-transform: uppercase;
+            font-weight: 400;
+            opacity: 0.8;
         }
 
         main {
-            width: 90%;
-            max-width: 1200px;
+            width: 95%;
+            max-width: 1400px;
             display: grid;
-            grid-template-columns: 1fr 380px;
-            gap: 2rem;
-            padding: 2rem 0;
+            grid-template-columns: 1fr 400px;
+            gap: 2.5rem;
+            padding: 0 0 4rem 0;
+            animation: fadeIn 0.8s ease-out;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
         .visual-area {
             display: flex;
             flex-direction: column;
-            gap: 1rem;
+            gap: 1.5rem;
         }
 
         .upload-container {
             background: var(--card-bg);
-            backdrop-filter: blur(20px);
+            backdrop-filter: blur(30px);
             border: 1px solid var(--glass-border);
-            border-radius: 24px;
-            padding: 1rem;
+            border-radius: 32px;
+            padding: 1.5rem;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             cursor: pointer;
-            transition: all 0.4s;
-            min-height: 600px;
+            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+            min-height: 700px;
             position: relative;
             overflow: hidden;
+            box-shadow: var(--panel-shadow);
         }
 
-        .upload-container:hover, .upload-container.drag-over {
+        .upload-container:hover {
             border-color: var(--primary);
-            box-shadow: 0 0 40px rgba(0, 255, 136, 0.1);
+            box-shadow: 0 0 60px rgba(0, 255, 136, 0.15);
+            background: rgba(255, 255, 255, 0.05);
+            transform: scale(1.005);
+        }
+
+        .upload-container.drag-over {
+            border-color: var(--secondary);
+            background: rgba(0, 212, 255, 0.08);
+            transform: scale(1.01);
         }
 
         .preview-wrapper {
@@ -113,14 +138,17 @@
             display: none;
             justify-content: center;
             align-items: center;
+            border-radius: 20px;
+            overflow: hidden;
         }
 
         #preview-img {
             max-width: 100%;
-            max-height: 550px;
-            border-radius: 12px;
+            max-height: 650px;
+            border-radius: 24px;
             display: block;
             object-fit: contain;
+            transition: 0.3s;
         }
 
         #overlay-svg {
@@ -130,11 +158,30 @@
             width: 100%;
             height: 100%;
             pointer-events: none;
+            z-index: 10;
         }
 
-        .upload-icon { font-size: 4rem; margin-bottom: 1rem; }
-        .upload-text { font-size: 1.5rem; color: #ccd6f6; }
-        .upload-subtext { color: #8892b0; margin-top: 1rem; }
+        .scanline {
+            position: absolute;
+            top: -100%;
+            left: 0;
+            width: 100%;
+            height: 80px;
+            background: linear-gradient(to bottom, transparent, rgba(0, 255, 136, 0.2), transparent);
+            opacity: 0.8;
+            display: none;
+            z-index: 20;
+            pointer-events: none;
+        }
+
+        @keyframes scan {
+            0% { top: -10%; }
+            100% { top: 110%; }
+        }
+
+        .upload-icon { font-size: 5rem; margin-bottom: 1.5rem; filter: drop-shadow(0 0 15px rgba(255,255,255,0.2)); }
+        .upload-text { font-size: 1.8rem; font-weight: 600; color: #fff; letter-spacing: -0.5px; }
+        .upload-subtext { color: #8892b0; margin-top: 1rem; font-size: 1rem; }
 
         .stats-panel {
             display: flex;
@@ -143,25 +190,38 @@
         }
 
         .stat-card {
-            background: rgba(255, 255, 255, 0.03);
+            background: var(--card-bg);
+            backdrop-filter: blur(20px);
             border: 1px solid var(--glass-border);
-            border-radius: 20px;
-            padding: 1.5rem;
+            border-radius: 28px;
+            padding: 1.8rem;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .stat-card:hover {
+            border-color: rgba(255,255,255,0.2);
+            background: rgba(255, 255, 255, 0.06);
+            transform: translateY(-5px);
         }
 
-        .stat-label { color: #8892b0; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; }
-        .stat-value { font-size: 2rem; font-weight: 600; }
-        .conf-bar { height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; margin-top: 1rem; overflow: hidden; }
-        .conf-fill { height: 100%; width: 0%; background: linear-gradient(to right, var(--primary), var(--secondary)); transition: 1s; }
+        .stat-label { color: #8892b0; font-size: 0.75rem; font-weight: 700; margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 2px; }
+        .stat-value { font-size: 2.2rem; font-weight: 800; margin-bottom: 0.5rem; }
+        .conf-bar { height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; margin-top: 1.2rem; overflow: hidden; }
+        .conf-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: 1.5s cubic-bezier(0.19, 1, 0.22, 1); }
 
         .loading-spinner {
-            width: 40px; height: 40px;
-            border: 3px solid rgba(0, 255, 136, 0.1);
-            border-top: 3px solid var(--primary);
+            width: 70px; height: 70px;
+            border: 5px solid rgba(0, 255, 136, 0.05);
+            border-top: 5px solid var(--primary);
             border-radius: 50%;
-            animation: spin 1s linear infinite;
+            animation: spin 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
             display: none;
             position: absolute;
+            z-index: 30;
+            filter: drop-shadow(0 0 15px var(--primary));
         }
 
         @keyframes spin { 100% { transform: rotate(360deg); } }
@@ -169,32 +229,58 @@
         .keypoint-marker {
             fill: var(--primary);
             stroke: #fff;
-            stroke-width: 2px;
-            filter: drop-shadow(0 0 5px var(--primary));
-            animation: pulse 1.5s infinite;
+            stroke-width: 2.5px;
+            filter: drop-shadow(0 0 10px var(--primary));
+            animation: pulse-marker 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
         }
 
-        @keyframes pulse {
-            0% { r: 5; opacity: 1; }
-            50% { r: 8; opacity: 0.7; }
-            100% { r: 5; opacity: 1; }
+        @keyframes pulse-marker {
+            0%, 100% { r: 6; opacity: 1; }
+            50% { r: 10; opacity: 0.6; }
         }
+
+        .result-item {
+            padding: 14px 0;
+            border-bottom: 1px solid rgba(255,255,255,0.04);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            animation: slideIn 0.4s ease-out forwards;
+        }
+
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateX(20px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+
+        .badge {
+            padding: 5px 12px;
+            border-radius: 20px;
+            font-size: 0.75rem;
+            font-weight: 800;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .badge-dart { background: linear-gradient(135deg, #ff4d4d, #c00); color: white; box-shadow: 0 4px 15px rgba(255, 77, 77, 0.4); }
+        .badge-cal { background: linear-gradient(135deg, #00ff88, #00d4ff); color: #0a0e14; box-shadow: 0 4px 15px rgba(0, 255, 136, 0.2); }
     </style>
 </head>
 <body>
-    <div class="bg-glow"></div>
+    <div class="bg-grid"></div>
     <header>
-        <h1>DARTVISION <span style="font-weight: 300; opacity: 0.5;">AI</span></h1>
-        <p class="subtitle">Intelligent Labelling & Scoring Dashboard</p>
+        <h1>DARTVISION <span style="font-weight: 200; opacity: 0.4;">CORE</span></h1>
+        <p class="subtitle">Neural Scoring & Board Analytics</p>
     </header>
 
     <main>
         <section class="visual-area">
             <div class="upload-container" id="drop-zone">
+                <div class="scanline" id="scanline"></div>
                 <div id="initial-state">
-                    <div class="upload-icon">🎯</div>
-                    <div class="upload-text">Drag & Drop Image</div>
-                    <div class="upload-subtext">calibration and scoring results will appear here</div>
+                    <div class="upload-icon">💠</div>
+                    <div class="upload-text">Initialize Vision System</div>
+                    <div class="upload-subtext">Drop board imagery for real-time neural mapping</div>
                 </div>
                 <div class="preview-wrapper" id="preview-wrapper">
                     <img id="preview-img">
@@ -208,7 +294,7 @@
         <aside class="stats-panel">
             <div class="stat-card">
                 <div class="stat-label">Model Status</div>
-                <div class="stat-value" id="status-text" style="font-size: 1.2rem; color: var(--primary);">System Ready</div>
+                <div class="stat-value" id="status-text" style="font-size: 1.4rem; color: var(--primary);">System Ready</div>
             </div>
             <div class="stat-card">
                 <div class="stat-label">AI Confidence</div>
@@ -217,7 +303,7 @@
             </div>
             <div class="stat-card">
                 <div class="stat-label">Detection Result</div>
-                <div class="stat-value" id="result-text" style="font-size: 1.1rem; opacity: 0.8;">No Image Uploaded</div>
+                <div class="stat-value" id="result-text" style="font-size: 1.1rem; opacity: 0.8;">No Frame Captured</div>
             </div>
         </aside>
     </main>
@@ -230,6 +316,7 @@
         const initialState = document.getElementById('initial-state');
         const svgOverlay = document.getElementById('overlay-svg');
         const spinner = document.getElementById('spinner');
+        const scanline = document.getElementById('scanline');
 
         dropZone.onclick = () => fileInput.click();
         fileInput.onchange = (e) => handleFile(e.target.files[0]);
@@ -251,21 +338,36 @@
             reader.readAsDataURL(file);
 
             spinner.style.display = 'block';
+            scanline.style.display = 'block';
+            scanline.style.animation = 'scan 2s linear infinite';
+            
+            document.getElementById('status-text').innerText = 'Neural Processing...';
+            document.getElementById('status-text').style.color = 'var(--secondary)';
+
             const formData = new FormData();
             formData.append('image', file);
 
             try {
                 const response = await fetch('/api/predict', { method: 'POST', body: formData });
                 const data = await response.json();
+                
                 spinner.style.display = 'none';
+                scanline.style.display = 'none';
                 
                 if (data.status === 'success') {
+                    document.getElementById('status-text').innerText = 'Analysis Complete';
+                    document.getElementById('status-text').style.color = 'var(--primary)';
                     updateUI(data);
                     drawKeypoints(data.keypoints);
+                } else {
+                    document.getElementById('status-text').innerText = 'Analysis Failed';
+                    document.getElementById('status-text').style.color = 'var(--accent)';
                 }
             } catch (err) {
                 spinner.style.display = 'none';
-                document.getElementById('status-text').innerText = 'Error';
+                scanline.style.display = 'none';
+                document.getElementById('status-text').innerText = 'System Error';
+                document.getElementById('status-text').style.color = 'var(--accent)';
             }
         }
 
@@ -274,26 +376,33 @@
             document.getElementById('conf-val').innerText = `${conf}%`;
             document.getElementById('conf-fill').style.width = `${conf}%`;
             
-            let resultHtml = `<div style="margin-top: 1rem; font-size: 0.9rem; line-height: 1.5;">${data.message}</div>`;
+            let resultHtml = `<div style="margin: 1.5rem 0 1rem 0; font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.9);">${data.message}</div>`;
             if (data.keypoints && data.keypoints.length >= 8) {
                 const names = ["Cal 1", "Cal 2", "Cal 3", "Cal 4", "Dart"];
-                resultHtml += `<div style="font-size: 0.8rem; opacity: 0.6; margin-top: 5px;">Results & Mapping:</div>`;
+                resultHtml += `<div style="font-size: 0.75rem; color: #8892b0; margin: 1.5rem 0 0.8rem 0; letter-spacing: 2px; text-transform: uppercase;">MAPPED DATA</div>`;
+                
                 for (let i = 0; i < data.keypoints.length; i += 2) {
                     const classIdx = i / 2;
+                    const isCal = classIdx < 4;
                     const name = names[classIdx] || `Dart ${Math.floor(classIdx - 3)}`;
                     const x = data.keypoints[i].toFixed(3);
                     const y = data.keypoints[i+1].toFixed(3);
                     
-                    // Get score label if it's a dart
-                    let scoreLabel = "";
+                    let scoreHtml = "";
                     if (classIdx >= 4 && data.scores && data.scores[classIdx - 4]) {
-                        scoreLabel = ` <span style="background: #ff4d4d; color: white; padding: 2px 6px; border-radius: 4px; font-weight: 800; margin-left: 10px;">${data.scores[classIdx - 4]}</span>`;
+                        scoreHtml = `<span class="badge badge-dart">${data.scores[classIdx - 4]}</span>`;
+                    } else if (isCal) {
+                        scoreHtml = `<span class="badge badge-cal" style="font-size: 0.6rem;">LOCKED</span>`;
                     }
 
-                    resultHtml += `<div style="font-size: 0.85rem; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: space-between;">
-                        <span><span style="color: ${i < 8 ? '#00ff88' : '#ff4d4d'}">${name}</span>: [${x}, ${y}]</span>
-                        ${scoreLabel}
-                    </div>`;
+                    resultHtml += `
+                        <div class="result-item" style="animation-delay: ${classIdx * 0.1}s">
+                            <div style="display: flex; flex-direction: column;">
+                                <span style="font-weight: 600; font-size: 0.95rem; color: ${isCal ? 'var(--primary)' : 'var(--accent)'}">${name}</span>
+                                <span style="font-size: 0.7rem; color: #8892b0; font-family: monospace; letter-spacing: 0.5px;">X:${x} Y:${y}</span>
+                            </div>
+                            ${scoreHtml}
+                        </div>`;
                 }
             }
             document.getElementById('result-text').innerHTML = resultHtml;
@@ -307,43 +416,59 @@
             clearKeypoints();
             if (!pts || pts.length === 0) return;
 
-            // Wait for image to render to get actual display dimensions
             setTimeout(() => {
                 const rect = previewImg.getBoundingClientRect();
                 const wrapperRect = previewWrapper.getBoundingClientRect();
                 
-                // Offset calculation relative to wrapper
                 const offsetX = rect.left - wrapperRect.left;
                 const offsetY = rect.top - wrapperRect.top;
                 const width = rect.width;
                 const height = rect.height;
 
-                const classNames = ["Cal 1", "Cal 2", "Cal 3", "Cal 4", "Dart"];
+                const classNames = ["CALIBRATION CORNER 1", "CALIBRATION CORNER 2", "CALIBRATION CORNER 3", "CALIBRATION CORNER 4", "DART POINT"];
                 for (let i = 0; i < pts.length; i += 2) {
+                    const classIdx = i / 2;
+                    const isCal = classIdx < 4;
                     const x = pts[i] * width + offsetX;
                     const y = pts[i+1] * height + offsetY;
-                    const classIdx = i / 2;
-                    const name = classNames[classIdx] || `Dart ${Math.floor(classIdx - 3)}`;
+                    const name = classNames[classIdx] || `DART POINT`;
 
+                    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+                    
                     const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
                     circle.setAttribute("cx", x);
                     circle.setAttribute("cy", y);
-                    circle.setAttribute("r", 6);
+                    circle.setAttribute("r", 7);
                     circle.setAttribute("class", "keypoint-marker");
-                    if (classIdx >= 4) circle.style.fill = "#ff4d4d"; // Red for dart
+                    if (!isCal) {
+                        circle.style.fill = "#ff4d4d";
+                        circle.style.filter = "drop-shadow(0 0 15px rgba(255, 77, 77, 0.6))";
+                    }
                     
+                    const labelBg = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                    labelBg.setAttribute("x", x + 15);
+                    labelBg.setAttribute("y", y - 25);
+                    labelBg.setAttribute("width", name.length * 7 + 12);
+                    labelBg.setAttribute("height", "22");
+                    labelBg.setAttribute("rx", "11");
+                    labelBg.setAttribute("fill", "rgba(0,0,0,0.7)");
+                    labelBg.setAttribute("style", "backdrop-filter: blur(8px); stroke: rgba(255,255,255,0.1); stroke-width: 1;");
+
                     const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
-                    label.setAttribute("x", x + 10);
-                    label.setAttribute("y", y - 10);
-                    label.setAttribute("fill", classIdx < 4 ? "#00ff88" : "#ff4d4d");
-                    label.setAttribute("font-size", "14px");
-                    label.setAttribute("font-weight", "600");
+                    label.setAttribute("x", x + 21);
+                    label.setAttribute("y", y - 9);
+                    label.setAttribute("fill", isCal ? "#00ff88" : "#ff4d4d");
+                    label.setAttribute("font-size", "10px");
+                    label.setAttribute("font-weight", "900");
+                    label.setAttribute("style", "text-transform: uppercase; letter-spacing: 1.5px;");
                     label.textContent = name;
                     
-                    svgOverlay.appendChild(circle);
-                    svgOverlay.appendChild(label);
+                    group.appendChild(circle);
+                    group.appendChild(labelBg);
+                    group.appendChild(label);
+                    svgOverlay.appendChild(group);
                 }
-            }, 50);
+            }, 100);
         }
     </script>
 </body>