Upload 7 files

Dockerfile

@@ -0,0 +1,34 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+ENV HF_HOME=/tmp/huggingface
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Install system dependencies for OpenCV and other tools
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy the requirements file into the container
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code
+COPY . .
+
+# Create necessary directories and set permissions for HF Spaces
+RUN mkdir -p uploads results encoder && chmod -R 777 uploads results encoder
+
+# Expose the target port
+EXPOSE 7860
+
+# Run the application with Gunicorn
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--timeout", "600", "app:app"]

app.py

@@ -0,0 +1,264 @@
+import os
+import zipfile
+import pandas as pd
+from flask import Flask, request, redirect, url_for, send_from_directory, flash, render_template
+from werkzeug.utils import secure_filename
+from tqdm import tqdm
+from sklearn.metrics import classification_report, precision_recall_fscore_support
+from inference_utils import DiamondInference
+from dotenv import load_dotenv
+
+# Load local environment variables from .env
+load_dotenv()
+
+app = Flask(__name__)
+app.secret_key = "supersecretkey"
+
+# Hugging Face Hub Integration
+HF_REPO_ID = os.getenv("HF_REPO_ID", "WebashalarForML/Diamcol")
+HF_TOKEN = os.getenv("HF_TOKEN")
+
+# Model Configuration
+MODEL_ID = "322c4f4d"
+MODEL_NAME = f"model_vit_robust_{MODEL_ID}.keras"
+
+def download_model_from_hf():
+    from huggingface_hub import hf_hub_download
+    print("[INFO] Checking model files from Hugging Face...")
+    
+    # Model file
+    if not os.path.exists(MODEL_NAME):
+        print(f"[INFO] Downloading {MODEL_NAME}...")
+        hf_hub_download(repo_id=HF_REPO_ID, filename=MODEL_NAME, token=HF_TOKEN, local_dir=".")
+
+    # Encoder files (Matches names in inference_utils.py)
+    encoder_files = [
+        f"hyperparameters_{MODEL_ID}.pkl",
+        f"cat_encoders_{MODEL_ID}.pkl",
+        f"num_scaler_{MODEL_ID}.pkl",
+        f"target_encoder_{MODEL_ID}.pkl",
+        f"norm_stats_{MODEL_ID}.pkl"
+    ]
+    os.makedirs("encoder", exist_ok=True)
+    for f in encoder_files:
+        f_path = os.path.join("encoder", f)
+        if not os.path.exists(f_path):
+            print(f"[INFO] Downloading {f}...")
+            # Note: Assuming the structure on HF is encoder/filename
+            hf_hub_download(repo_id=HF_REPO_ID, filename=f"encoder/{f}", token=HF_TOKEN, local_dir=".")
+
+UPLOAD_FOLDER = 'uploads'
+RESULTS_FOLDER = 'results'
+EXTRACT_FOLDER = os.path.join(UPLOAD_FOLDER, 'extracted_images')
+
+for folder in [UPLOAD_FOLDER, RESULTS_FOLDER, EXTRACT_FOLDER]:
+    if not os.path.exists(folder):
+        os.makedirs(folder)
+
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024  # 500MB max upload
+
+# Global inference object (lazy loaded)
+model_path = MODEL_NAME
+encoder_dir = "encoder"
+infer_engine = None   
+
+def get_inference_engine():
+    global infer_engine
+    if infer_engine is None:
+        # Try downloading if missing (for Docker/HF Spaces environment)
+        try:
+            download_model_from_hf()
+        except Exception as e:
+            print(f"[WARNING] Could not download from HF: {e}. Expecting local files.")
+        
+        infer_engine = DiamondInference(model_path, encoder_dir, MODEL_ID)
+    return infer_engine
+
+@app.route('/flush', methods=['POST'])
+def flush_data():
+    import shutil
+    try:
+        # Clear uploads folder
+        for filename in os.listdir(UPLOAD_FOLDER):
+            file_path = os.path.join(UPLOAD_FOLDER, filename)
+            try:
+                if os.path.isfile(file_path) or os.path.islink(file_path):
+                    os.unlink(file_path)
+                elif os.path.isdir(file_path):
+                    shutil.rmtree(file_path)
+            except Exception as e:
+                print(f'Failed to delete {file_path}. Reason: {e}')
+        
+        # Re-create EXTRACT_FOLDER as it might have been deleted if it was a sub-dir
+        if not os.path.exists(EXTRACT_FOLDER):
+            os.makedirs(EXTRACT_FOLDER)
+
+        # Clear results folder
+        for filename in os.listdir(RESULTS_FOLDER):
+            file_path = os.path.join(RESULTS_FOLDER, filename)
+            try:
+                if os.path.isfile(file_path) or os.path.islink(file_path):
+                    os.unlink(file_path)
+                elif os.path.isdir(file_path):
+                    shutil.rmtree(file_path)
+            except Exception as e:
+                print(f'Failed to delete {file_path}. Reason: {e}')
+
+        flash('All data flushed successfully.')
+    except Exception as e:
+        flash(f'Error during flushing: {e}')
+    
+    return redirect(url_for('index'))
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/upload', methods=['POST'])
+def upload_files():
+    if 'zip_file' not in request.files or 'excel_file' not in request.files:
+        flash('Both Zip and Excel files are required.')
+        return redirect(request.url)
+    
+    zip_file = request.files['zip_file']
+    excel_file = request.files['excel_file']
+    
+    if zip_file.filename == '' or excel_file.filename == '':
+        flash('No selected file')
+        return redirect(request.url)
+
+    # Save and Extract Zip
+    zip_path = os.path.join(app.config['UPLOAD_FOLDER'], secure_filename(zip_file.filename))
+    zip_file.save(zip_path)
+    
+    with zipfile.ZipFile(zip_path, 'r') as zip_ref:
+        zip_ref.extractall(EXTRACT_FOLDER)
+    
+    # Process Excel
+    excel_path = os.path.join(app.config['UPLOAD_FOLDER'], secure_filename(excel_file.filename))
+    excel_file.save(excel_path)
+    df = pd.read_excel(excel_path)
+    
+    # Inference Logic
+    engine = get_inference_engine()
+    
+    # Pre-cache all image paths for faster searching
+    all_extracted_files = []
+    for root, dirs, files in os.walk(EXTRACT_FOLDER):
+        for f in files:
+            if f.lower().endswith(('.jpg', '.jpeg', '.png')):
+                all_extracted_files.append(os.path.join(root, f))
+    
+    print(f"[INFO] Found {len(all_extracted_files)} images in extraction folder.")
+
+    # Identifing ground truth for metrics
+    y_true = []
+    y_pred = []
+    
+    print(f"[INFO] Initializing Inference Pipeline for {len(df)} stones...")
+    for index, row in tqdm(df.iterrows(), total=len(df), desc="Inference Progress"):
+        l_code = str(row.get('L_Code', '')).split('.')[0]
+        sr_no = str(row.get('SrNo', '')).split('.')[0]
+        stone_id = str(row.get('Stone_Id', ''))
+        
+        img_path = None
+        for full_path in all_extracted_files:
+            fname = os.path.basename(full_path)
+            if l_code in fname and sr_no in fname:
+                img_path = full_path
+                break
+        
+        if not img_path and stone_id != 'nan' and stone_id:
+            for full_path in all_extracted_files:
+                if stone_id in os.basename(full_path):
+                    img_path = full_path
+                    break
+        
+        if img_path:
+            prediction = engine.predict(row, img_path)
+            # Store filename relative to EXTRACT_FOLDER for web serving
+            web_path = os.path.relpath(img_path, start=EXTRACT_FOLDER)
+            df.at[index, 'Predicted_FGrdCol'] = prediction
+            df.at[index, 'Image_Path'] = web_path
+            
+            # If ground truth exists, collect it
+            if 'FGrdCol' in row and pd.notna(row['FGrdCol']):
+                y_true.append(str(row['FGrdCol']))
+                y_pred.append(str(prediction))
+        else:
+            df.at[index, 'Predicted_FGrdCol'] = "Image Not Found"
+            df.at[index, 'Image_Path'] = "N/A"
+
+    # Calculate Metrics if ground truth is available
+    metrics = None
+    if y_true:
+        report_dict = classification_report(y_true, y_pred, output_dict=True, zero_division=0)
+        
+        # Clean up the report for better display
+        class_metrics = []
+        labels = sorted(list(set(y_true) | set(y_pred)))
+        
+        from sklearn.metrics import confusion_matrix
+        cm = confusion_matrix(y_true, y_pred, labels=labels)
+        
+        for label, scores in report_dict.items():
+            if label not in ['accuracy', 'macro avg', 'weighted avg']:
+                class_metrics.append({
+                    'label': label,
+                    'precision': round(scores['precision'], 4),
+                    'recall': round(scores['recall'], 4),
+                    'f1': round(scores['f1-score'], 4),
+                    'support': scores['support']
+                })
+        
+        metrics = {
+            'accuracy': round(report_dict['accuracy'], 4),
+            'class_metrics': class_metrics,
+            'weighted_avg': report_dict['weighted avg'],
+            'macro_avg': report_dict['macro avg'],
+            'precision': round(report_dict['weighted avg']['precision'], 4),
+            'recall': round(report_dict['weighted avg']['recall'], 4),
+            'f1': round(report_dict['weighted avg']['f1-score'], 4),
+            'macro_f1': round(report_dict['macro avg']['f1-score'], 4),
+            'macro_precision': round(report_dict['macro avg']['precision'], 4),
+            'macro_recall': round(report_dict['macro avg']['recall'], 4),
+            'confusion_matrix': {
+                'labels': labels,
+                'matrix': cm.tolist()
+            }
+        }
+
+    # Model parameters (features used for prediction)
+    model_features = ["StoneType", "Color", "Brown", "BlueUv", "GrdType", "Carat", "Result"]
+    
+    # Identify "out of box" features - only if they actually contain data
+    potential_oob = ['FancyYellow', 'Type2A', 'YellowUv']
+    out_of_box_cols = []
+    for col in potential_oob:
+        if col in df.columns:
+            # Check if there is at least one non-null/non-empty value
+            if df[col].dropna().astype(str).str.strip().replace(['nan', 'None', ''], pd.NA).notna().any():
+                out_of_box_cols.append(col)
+    
+    output_filename = f"report_{secure_filename(excel_file.filename)}"
+    output_path = os.path.join(RESULTS_FOLDER, output_filename)
+    df.to_excel(output_path, index=False)
+    
+    return render_template('report.html', 
+                           report_data=df.to_dict(orient='records'), 
+                           report_file=output_filename,
+                           out_of_box_cols=out_of_box_cols,
+                           model_features=model_features,
+                           metrics=metrics)
+
+@app.route('/download/<filename>')
+def download_file(filename):
+    return send_from_directory(RESULTS_FOLDER, filename)
+
+@app.route('/image/<path:filename>')
+def serve_image(filename):
+    return send_from_directory(EXTRACT_FOLDER, filename)
+
+if __name__ == '__main__':
+    app.run(debug=True)

inference_utils.py

@@ -0,0 +1,170 @@
+import os
+import joblib
+import numpy as np
+import pandas as pd
+import cv2
+import tensorflow as tf
+from patchify import patchify
+
+# 1. Define Custom Layers
+@tf.keras.utils.register_keras_serializable()
+class ClassToken(tf.keras.layers.Layer):
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+    def build(self, input_shape):
+        self.hidden_dim = input_shape[-1]
+        self.w = self.add_weight(
+            name="cls_token",
+            shape=(1, 1, self.hidden_dim),
+            initializer="random_normal",
+            trainable=True,
+        )
+    def call(self, inputs):
+        batch_size = tf.shape(inputs)[0]
+        cls = tf.broadcast_to(self.w, [batch_size, 1, self.hidden_dim])
+        return cls
+
+@tf.keras.utils.register_keras_serializable()
+class ExtractCLSToken(tf.keras.layers.Layer):
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+    def call(self, inputs):
+        return inputs[:, 0, :]
+
+class DiamondInference:
+    def __init__(self, model_path, encoder_dir, model_id=None):
+        # Use provided model_id to load specific artifacts, fallback to generic if not provided
+        self.model_id = model_id
+        
+        if model_id:
+            hp_path = os.path.join(encoder_dir, f"hyperparameters_{model_id}.pkl")
+            cat_path = os.path.join(encoder_dir, f"cat_encoders_{model_id}.pkl")
+            num_path = os.path.join(encoder_dir, f"num_scaler_{model_id}.pkl")
+            target_path = os.path.join(encoder_dir, f"target_encoder_{model_id}.pkl")
+            norm_stats_path = os.path.join(encoder_dir, f"norm_stats_{model_id}.pkl")
+        else:
+            # Fallback to older generic names if no ID is passed
+            hp_path = os.path.join(encoder_dir, "hyperparameters_imagenet_100ep.pkl")
+            cat_path = os.path.join(encoder_dir, "cat_encoders_imagenet_100ep.pkl")
+            num_path = os.path.join(encoder_dir, "num_scaler_imagenet_100ep.pkl")
+            target_path = os.path.join(encoder_dir, "target_encoder_imagenet_100ep.pkl")
+            norm_stats_path = os.path.join(encoder_dir, "norm_stats_imagenet_100ep.pkl")
+
+        print(f"[INFO] Loading artifacts for model ID: {model_id or 'default'}")
+        self.hp = joblib.load(hp_path)
+        self.cat_encoders = joblib.load(cat_path)
+        self.num_scaler = joblib.load(num_path)
+        self.target_encoder = joblib.load(target_path)
+        
+        if os.path.exists(norm_stats_path):
+            self.norm_stats = joblib.load(norm_stats_path)
+        else:
+            # Default fallback to ImageNet stats
+            self.norm_stats = {"mean": np.array([0.485, 0.456, 0.406]), "std": np.array([0.229, 0.224, 0.225])}
+        
+        self.model = tf.keras.models.load_model(
+            model_path, 
+            custom_objects={"ClassToken": ClassToken, "ExtractCLSToken": ExtractCLSToken},
+            compile=False
+        )
+        print(f"[INFO] Model and artifacts loaded successfully from {model_path}.")
+
+    def apply_tta_transform(self, img, transform_type):
+        """Apply specific Test-Time Augmentation transformation"""
+        if transform_type == "original":
+            return img
+        elif transform_type == "horizontal_flip":
+            return cv2.flip(img, 1)
+        elif transform_type == "rotation_5":
+            h, w = img.shape[:2]
+            M = cv2.getRotationMatrix2D((w//2, h//2), 5, 1.0)
+            return cv2.warpAffine(img, M, (w, h), borderMode=cv2.BORDER_REFLECT)
+        elif transform_type == "rotation_minus_5":
+            h, w = img.shape[:2]
+            M = cv2.getRotationMatrix2D((w//2, h//2), -5, 1.0)
+            return cv2.warpAffine(img, M, (w, h), borderMode=cv2.BORDER_REFLECT)
+        elif transform_type == "brightness_up":
+            return np.clip(img * 1.1, 0, 255).astype(np.uint8)
+        return img
+
+    def process_image(self, image_path, tta_transform=None):
+        try:
+            image = cv2.imread(image_path, cv2.IMREAD_COLOR)
+            if image is None:
+                return np.zeros(self.hp["flat_patches_shape"], dtype=np.float32)
+            
+            image = cv2.resize(image, (self.hp["image_size"], self.hp["image_size"]))
+            
+            if tta_transform:
+                image = self.apply_tta_transform(image, tta_transform)
+            
+            image = image / 255.0
+            image = (image - self.norm_stats["mean"]) / (self.norm_stats["std"] + 1e-7)
+            
+            patch_shape = (self.hp["patch_size"], self.hp["patch_size"], self.hp["num_channels"])
+            patches = patchify(image, patch_shape, self.hp["patch_size"])
+            patches = np.reshape(patches, self.hp["flat_patches_shape"]).astype(np.float32)
+            return patches
+        except Exception as e:
+            print(f"[ERROR] Image processing failed: {e}")
+            return np.zeros(self.hp["flat_patches_shape"], dtype=np.float32)
+
+    def predict(self, df_row, image_path, use_tta=True):
+        # 1. Preprocess Tabular Data
+        # Match training categorical features: StoneType, Color, Brown, BlueUv, GrdType, Result
+        categorical_cols = ["StoneType", "Color", "Brown", "BlueUv", "GrdType", "Result"]
+        numerical_cols = ["Carat"]
+        
+        tab_data_list = []
+        for col in categorical_cols:
+            val = str(df_row.get(col, "__missing__"))
+            # Safe transform for categorical values
+            try:
+                # First check if the column exists in encoders
+                if col in self.cat_encoders:
+                    # Check if val is in encoder classes, otherwise fallback to __missing__
+                    if val not in self.cat_encoders[col].classes_:
+                        val = "__missing__" if "__missing__" in self.cat_encoders[col].classes_ else self.cat_encoders[col].classes_[0]
+                    
+                    encoded_val = self.cat_encoders[col].transform([val])[0]
+                else:
+                    print(f"[WARN] Encoder for column {col} not found. Using 0.")
+                    encoded_val = 0
+            except Exception as e:
+                print(f"[ERROR] Encoding failed for {col} with value {val}: {e}. Using 0.")
+                encoded_val = 0
+            tab_data_list.append(encoded_val)
+        
+        for col in numerical_cols:
+            try:
+                val = float(df_row.get(col, 0))
+                # Reshape for scaler (expected 2D array)
+                scaled_val = self.num_scaler.transform([[val]])[0][0]
+            except Exception as e:
+                print(f"[ERROR] Scaling failed for {col}: {e}. Using 0.")
+                scaled_val = 0
+            tab_data_list.append(scaled_val)
+            
+        tab_input = np.expand_dims(np.array(tab_data_list, dtype=np.float32), axis=0)
+        
+        # 2. Inference with TTA
+        if use_tta:
+            tta_transforms = ["original", "horizontal_flip", "rotation_5", "rotation_minus_5", "brightness_up"]
+            all_preds = []
+            
+            for transform in tta_transforms:
+                img_patches = self.process_image(image_path, tta_transform=transform)
+                img_input = np.expand_dims(img_patches, axis=0)
+                preds = self.model.predict([img_input, tab_input], verbose=0)[0]
+                all_preds.append(preds)
+            
+            final_pred_probs = np.mean(all_preds, axis=0)
+        else:
+            img_patches = self.process_image(image_path)
+            img_input = np.expand_dims(img_patches, axis=0)
+            final_pred_probs = self.model.predict([img_input, tab_input], verbose=0)[0]
+        
+        pred_idx = np.argmax(final_pred_probs)
+        decoded_pred = self.target_encoder.inverse_transform([pred_idx])[0]
+        
+        return decoded_pred

requirements.txt

@@ -0,0 +1,16 @@
+flask
+gunicorn
+pandas
+openpyxl
+numpy==1.26.4
+opencv-python-headless
+tensorflow-cpu==2.19.0
+patchify
+joblib
+scikit-learn
+werkzeug
+huggingface_hub
+tqdm
+protobuf<5
+ml-dtypes==0.4.0
+python-dotenv

static/css/style.css

@@ -0,0 +1,641 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap');
+
+:root {
+    --primary-color: #ffffff;
+    --secondary-color: #a855f7;
+    --background-color: #050505;
+    --glass-bg: rgba(255, 255, 255, 0.03);
+    --glass-border: rgba(255, 255, 255, 0.08);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background: var(--background-color);
+    color: white;
+    line-height: 1.5;
+    overflow-x: hidden;
+    min-height: 100vh;
+}
+
+/* Background elements */
+canvas#canvas3d {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.atmospheric-grain {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    pointer-events: none;
+    opacity: 0.03;
+    filter: contrast(150%) brightness(150%);
+    background-image: url('https://grainy-gradients.vercel.app/noise.svg');
+}
+
+.container {
+    position: relative;
+    z-index: 20;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem 0;
+}
+
+.nav-logo {
+    font-size: 10px;
+    letter-spacing: 0.4em;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.nav-meta {
+    display: flex;
+    gap: 1.5rem;
+    font-size: 8px;
+    letter-spacing: 0.2em;
+    opacity: 0.5;
+}
+
+/* Typography */
+header {
+    margin: 3rem 0;
+    text-align: left;
+}
+
+.label-mini {
+    font-size: 9px;
+    letter-spacing: 0.3em;
+    font-weight: 700;
+    text-transform: uppercase;
+    opacity: 0.5;
+    margin-bottom: 0.5rem;
+}
+
+h1 {
+    font-size: clamp(2.5rem, 8vw, 6rem);
+    font-weight: 700;
+    letter-spacing: -0.04em;
+    line-height: 0.9;
+    text-transform: uppercase;
+}
+
+h1 .italic {
+    font-style: italic;
+    font-weight: 300;
+    opacity: 0.4;
+}
+
+/* Components */
+.upload-card {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(15px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    padding: clamp(2rem, 5vw, 4rem);
+    margin: 2rem 0;
+    width: 100%;
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
+.form-group {
+    margin-bottom: 2.5rem;
+}
+
+label {
+    display: block;
+    font-size: 10px;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    margin-bottom: 1rem;
+    opacity: 0.8;
+    color: var(--secondary-color);
+}
+
+/* Custom File Input Styling */
+input[type="file"] {
+    display: block;
+    width: 100%;
+    padding: 0.8rem;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+input[type="file"]::file-selector-button {
+    background: rgba(168, 85, 247, 0.15);
+    border: 1px solid var(--secondary-color);
+    color: var(--secondary-color);
+    padding: 0.5rem 1rem;
+    margin-right: 1rem;
+    text-transform: uppercase;
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+input[type="file"]:hover::file-selector-button {
+    background: var(--secondary-color);
+    color: white;
+}
+
+.btn-launch {
+    display: inline-block;
+    padding: 1.2rem 3rem;
+    background: white;
+    color: black;
+    text-transform: uppercase;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.2em;
+    border: none;
+    cursor: pointer;
+    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.btn-launch:hover {
+    background: var(--secondary-color);
+    color: white;
+    letter-spacing: 0.3em;
+}
+
+/* Metrics Dashboard */
+.metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin: 2.5rem 0;
+}
+
+.metric-item {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 2rem;
+    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+    box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
+}
+
+.metric-item:hover {
+    transform: translateY(-8px);
+    background: rgba(255, 255, 255, 0.08);
+    border-color: var(--secondary-color);
+}
+
+.metric-value {
+    font-size: clamp(2.2rem, 5vw, 3.5rem);
+    font-weight: 800;
+    letter-spacing: -0.05em;
+    display: block;
+    color: white;
+    margin-bottom: 0.5rem;
+}
+
+.metric-label {
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.25em;
+    opacity: 1;
+    font-weight: 800;
+    margin-bottom: 0.5rem;
+    display: block;
+}
+
+.metric-note {
+    font-size: 11px;
+    opacity: 0.4;
+    line-height: 1.4;
+    margin-top: 0.5rem;
+    text-transform: none;
+    letter-spacing: 0.02em;
+}
+
+.summary-metrics {
+    display: flex;
+    gap: 2rem;
+    margin-top: 2rem;
+    flex-wrap: wrap;
+}
+
+.summary-card {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 1.5rem;
+    flex: 1;
+    min-width: 150px;
+    text-align: center;
+}
+
+.summary-card .val {
+    font-size: 2rem;
+    font-weight: 900;
+    display: block;
+    color: var(--secondary-color);
+}
+
+.summary-card .lbl {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    opacity: 0.6;
+}
+
+/* Table */
+.table-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    margin-top: 2rem;
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 4px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    min-width: 800px;
+}
+
+th {
+    text-align: left;
+    padding: 1rem;
+    font-size: 9px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    opacity: 0.5;
+    border-bottom: 1px solid var(--glass-border);
+}
+
+td {
+    padding: 1rem;
+    font-size: 13px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.badge-oob {
+    font-size: 8px;
+    padding: 0.15rem 0.4rem;
+    border: 1px solid var(--secondary-color);
+    color: var(--secondary-color);
+    text-transform: uppercase;
+    font-weight: 700;
+}
+
+/* Loader Overlay */
+#loader-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.98);
+    z-index: 10000;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.loader-container {
+    position: relative;
+    width: 300px;
+    text-align: center;
+}
+
+.loader-line {
+    width: 100%;
+    height: 2px;
+    background: rgba(255, 255, 255, 0.05);
+    margin-bottom: 2rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.loader-progress {
+    height: 100%;
+    width: 0%;
+    background: var(--secondary-color);
+    box-shadow: 0 0 20px var(--secondary-color);
+    transition: width 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
+}
+
+/* Scanning effect */
+.loader-line::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    animation: scan 1.5s infinite;
+}
+
+@keyframes scan {
+    from {
+        left: -100%;
+    }
+
+    to {
+        left: 200%;
+    }
+}
+
+.loader-text {
+    font-size: 11px;
+    letter-spacing: 0.4em;
+    text-transform: uppercase;
+    color: white;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+
+    0%,
+    100% {
+        opacity: 0.4;
+        transform: scale(0.98);
+    }
+
+    50% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* Confusion Matrix */
+.cm-container {
+    margin-top: 3rem;
+    overflow-x: auto;
+}
+
+.cm-table {
+    border-collapse: collapse;
+    font-size: 11px;
+}
+
+.cm-table th,
+.cm-table td {
+    padding: 0.8rem;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    text-align: center;
+    min-width: 50px;
+}
+
+.cm-label-row th {
+    background: rgba(255, 255, 255, 0.03);
+    color: var(--secondary-color);
+}
+
+.cm-value {
+    font-weight: 700;
+    transition: background 0.3s;
+}
+
+.cm-match {
+    background: rgba(168, 85, 247, 0.2);
+    color: white;
+}
+
+.cm-dimmed {
+    opacity: 0.2;
+}
+
+.significance-tag {
+    font-size: 9px;
+    padding: 2px 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    margin-left: 8px;
+    vertical-align: middle;
+    letter-spacing: 0;
+    opacity: 0.8;
+}
+
+.tooltip-v {
+    position: relative;
+    cursor: help;
+}
+
+.tooltip-v::after {
+    content: attr(data-tip);
+    position: absolute;
+    bottom: 120%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 8px 12px;
+    background: #111;
+    border: 1px solid var(--secondary-color);
+    color: white;
+    font-size: 10px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: 0.3s;
+    z-index: 100;
+    letter-spacing: 0.05em;
+    text-transform: none;
+}
+
+.tooltip-v:hover::after {
+    opacity: 1;
+    bottom: 140%;
+}
+
+/* Responsivity fixes */
+@media (max-width: 768px) {
+    .container {
+        padding: 1rem;
+    }
+
+    header {
+        margin: 2rem 0;
+    }
+
+    .upload-card {
+        padding: 1.5rem;
+    }
+}
+
+.animate-up {
+    animation: slideUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.img-thumb {
+    width: 44px;
+    height: 44px;
+    object-fit: cover;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.img-thumb:hover {
+    transform: scale(1.1) rotate(2deg);
+    border-color: var(--secondary-color);
+    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
+}
+
+#image-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.95);
+    z-index: 9999;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: blur(15px);
+}
+
+#image-modal.active {
+    display: flex;
+    animation: fadeIn 0.3s ease;
+}
+
+#modal-img {
+    max-width: 90%;
+    max-height: 85%;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
+}
+
+.modal-close {
+    position: absolute;
+    top: 2rem;
+    right: 2rem;
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+    opacity: 0.5;
+    transition: opacity 0.3s;
+}
+
+.modal-close:hover {
+    opacity: 1;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+/* Flush Section */
+.flush-section {
+    margin-top: 3rem;
+    padding-top: 2rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.btn-flush-data {
+    padding: 0.8rem 2rem;
+    background: transparent;
+    color: #ef4444;
+    /* Red color for danger */
+    border: 1px solid #ef4444;
+    text-transform: uppercase;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.btn-flush-data:hover {
+    background: #ef4444;
+    color: white;
+}
+
+.flush-hint {
+    font-size: 9px;
+    opacity: 0.4;
+    margin-top: 0.8rem;
+    letter-spacing: 0.05em;
+}
+
+/* Flash Messages */
+.flash-container {
+    position: fixed;
+    top: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 11000;
+    width: auto;
+    max-width: 90%;
+}
+
+.flash-message {
+    background: var(--secondary-color);
+    color: white;
+    padding: 1rem 2rem;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    margin-bottom: 0.5rem;
+    transition: opacity 0.5s ease;
+    animation: slideDownFlash 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+@keyframes slideDownFlash {
+    from {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}

templates/index.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Diamond AI / Pipeline</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+
+<body>
+    <canvas id="canvas3d"></canvas>
+    <div class="atmospheric-grain"></div>
+
+    <div id="loader-overlay">
+        <div class="loader-container">
+            <div class="loader-line">
+                <div class="loader-progress" id="js-loader-bar"></div>
+            </div>
+            <div class="loader-text">PROCS / ANALYZING DATA [0%]</div>
+        </div>
+    </div>
+
+    {% with messages = get_flashed_messages() %}
+    {% if messages %}
+    <div class="flash-container">
+        {% for message in messages %}
+        <div class="flash-message">{{ message }}</div>
+        {% endfor %}
+    </div>
+    {% endif %}
+    {% endwith %}
+
+    <div class="container animate-up">
+        <nav>
+            <div class="nav-logo">DIAMOND / AI</div>
+            <div class="nav-meta">
+                <span>SYSTEM V1.0</span>
+                <span>2026</span>
+            </div>
+        </nav>
+
+        <header>
+            <p class="label-mini">Automated Grading Pipeline</p>
+            <h1>DIAMOND<br /><span class="italic">INTELLIGENCE</span></h1>
+        </header>
+
+        <main>
+            <div class="upload-card">
+                <form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
+                    <div class="form-group">
+                        <label>01 / SELECT IMAGE BUNDLE (ZIP)</label>
+                        <input type="file" name="zip_file" accept=".zip" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label>02 / SELECT DATA MANIFEST (EXCEL)</label>
+                        <input type="file" name="excel_file" accept=".xlsx, .xls" required>
+                    </div>
+
+                    <button type="submit" class="btn-launch">Execute Phase</button>
+                </form>
+
+                <div class="flush-section">
+                    <form id="flush-form" action="/flush" method="post" onsubmit="return confirmFlush()">
+                        <button type="submit" class="btn-flush-data">Flush System Data</button>
+                    </form>
+                    <p class="flush-hint">Resets all uploads and results to free up space.</p>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        // Simplified shader logic to be more lightweight and robust
+        const vertexShader = `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`;
+        const fragmentShader = `
+          uniform float uTime;
+          varying vec2 vUv;
+          // Simplex 2D noise
+          vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
+          float snoise(vec2 v){
+            const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
+            vec2 i  = floor(v + dot(v, C.yy) );
+            vec2 x0 = v -   i + dot(i, C.xx);
+            vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+            vec4 x12 = x0.xyxy + C.xxzz;
+            x12.xy -= i1;
+            i = mod(i, 289.0);
+            vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 ));
+            vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
+            m = m*m ; m = m*m ;
+            vec3 x = 2.0 * fract(p * C.www) - 1.0;
+            vec3 h = abs(x) - 0.5;
+            vec3 ox = floor(x + 0.5);
+            vec3 a0 = x - ox;
+            m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
+            vec3 g;
+            g.x  = a0.x  * x0.x  + h.x  * x0.y;
+            g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+            return 130.0 * dot(m, g);
+          }
+          void main() {
+            vec2 uv = vUv;
+            float n = snoise(uv * 1.5 + uTime * 0.05);
+            vec3 color = mix(vec3(0.02, 0.02, 0.05), vec3(0.08, 0.04, 0.15), n * 0.5 + 0.5);
+            gl_FragColor = vec4(color, 1.0);
+          }
+        `;
+
+        const scene = new THREE.Scene();
+        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas3d'), antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+
+        const geometry = new THREE.PlaneGeometry(2, 2);
+        const uniforms = { uTime: { value: 0 } };
+        const material = new THREE.ShaderMaterial({ vertexShader, fragmentShader, uniforms });
+        scene.add(new THREE.Mesh(geometry, material));
+
+        const animate = (t) => {
+            uniforms.uTime.value = t * 0.001;
+            renderer.render(scene, camera);
+            requestAnimationFrame(animate);
+        };
+        requestAnimationFrame(animate);
+
+        document.getElementById('upload-form').addEventListener('submit', function () {
+            document.getElementById('loader-overlay').style.display = 'flex';
+            const loaderBar = document.getElementById('js-loader-bar');
+            const loaderText = document.querySelector('.loader-text');
+            let p = 0;
+            const itv = setInterval(() => {
+                if (p < 99) {
+                    // Logic to simulate real work: slow down as it gets closer to 99
+                    const increment = (99 - p) * 0.03 + 0.1;
+                    p += increment;
+                }
+                const displayP = Math.floor(p);
+                loaderBar.style.width = displayP + '%';
+                loaderText.innerText = `PROCS / ANALYZING DATA [${displayP}%]`;
+            }, 60); // Faster update interval for "aliveness"
+        });
+
+        function confirmFlush() {
+            return confirm("Are you sure you want to flush all data? This will permanently delete all uploaded images and generated reports.");
+        }
+
+        window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight);
+
+        // Auto-hide flash messages
+        setTimeout(() => {
+            const flashes = document.querySelectorAll('.flash-message');
+            flashes.forEach(f => f.style.opacity = '0');
+        }, 3000);
+    </script>
+</body>
+
+</html>

templates/report.html

@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Diamond AI / Results</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+
+<body>
+    <canvas id="canvas3d" style="opacity: 0.8"></canvas>
+    <div class="atmospheric-grain"></div>
+
+    <div class="container animate-up">
+        <nav>
+            <div class="nav-logo">RESULTS / DASHBOARD</div>
+            <div class="nav-meta">
+                <span>STATUS: COMPLETE</span>
+            </div>
+        </nav>
+
+        <header>
+            <p class="label-mini">Batch Processing Overview</p>
+            <h1>ANALYTICS<br /><span class="italic">REPORT</span></h1>
+            <div style="margin-top: 1.5rem;">
+                <a href="/download/{{ report_file }}" class="btn-launch" style="text-decoration: none;">Export Result
+                    Dataset</a>
+            </div>
+        </header>
+
+        {% if metrics %}
+        <section class="upload-card" style="padding: 2.5rem; border-radius: 8px;">
+            <p class="label-mini">Performance Summary</p>
+            <div class="metrics-grid">
+                <div class="metric-item">
+                    <span class="metric-value" style="font-size: 4rem; font-weight: 900;">{{ (metrics.accuracy *
+                        100)|round(2) }}%</span>
+                    <span class="metric-label" style="font-size: 14px; font-weight: 800; opacity: 1;">ACCURACY</span>
+                    <p class="metric-note">Percentage of correct predictions out of total samples.</p>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-value" style="font-size: 4rem; font-weight: 900;">{{ metrics.f1|round(4)
+                        }}</span>
+                    <span class="metric-label" style="font-size: 14px; font-weight: 800; opacity: 1;">WEIGHTED F1</span>
+                    <p class="metric-note">Harmonic mean of precision and recall, weighted by class frequency.</p>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-value" style="font-size: 4rem; font-weight: 900;">{{ metrics.macro_f1|round(4)
+                        }}</span>
+                    <span class="metric-label" style="font-size: 14px; font-weight: 800; opacity: 1;">MACRO F1</span>
+                    <p class="metric-note">Unweighted mean of F1 scores across all classes (highlights imbalance
+                        issues).</p>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-value" style="font-size: 4rem; font-weight: 900;">{{ metrics.precision|round(4)
+                        }}</span>
+                    <span class="metric-label" style="font-size: 14px; font-weight: 800; opacity: 1;">PRECISION</span>
+                    <p class="metric-note">Ability of the classifier not to label a negative sample as positive.</p>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-value" style="font-size: 4rem; font-weight: 900;">{{ metrics.recall|round(4)
+                        }}</span>
+                    <span class="metric-label" style="font-size: 14px; font-weight: 800; opacity: 1;">RECALL</span>
+                    <p class="metric-note">Ability of the classifier to find all positive samples.</p>
+                </div>
+            </div>
+
+            <!-- Confusion Matrix -->
+            <p class="label-mini" style="margin-top: 4rem;">Confusion Matrix (Prediction Stability)</p>
+            <div class="cm-container">
+                <table class="cm-table">
+                    <thead>
+                        <tr class="cm-label-row">
+                            <th>Actual \ Pred</th>
+                            {% for label in metrics.confusion_matrix.labels %}
+                            <th>{{ label }}</th>
+                            {% endfor %}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for row_idx in range(metrics.confusion_matrix.matrix|length) %}
+                        <tr>
+                            <td
+                                style="background: rgba(255,255,255,0.03); font-weight: 700; color: var(--secondary-color);">
+                                {{ metrics.confusion_matrix.labels[row_idx] }}
+                            </td>
+                            {% for col_idx in range(metrics.confusion_matrix.matrix[row_idx]|length) %}
+                            {% set val = metrics.confusion_matrix.matrix[row_idx][col_idx] %}
+                            <td
+                                class="cm-value {% if row_idx == col_idx %}cm-match{% endif %} {% if val == 0 %}cm-dimmed{% endif %}">
+                                {{ val }}
+                            </td>
+                            {% endfor %}
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+
+            <div class="summary-metrics" style="margin-top: 2.5rem; display: flex; gap: 1.5rem; flex-wrap: wrap;">
+                <div class="summary-card"
+                    style="background: rgba(168, 85, 247, 0.05); border: 1px solid var(--secondary-color); padding: 1.5rem; flex: 1; min-width: 200px; text-align: center; border-radius: 4px;">
+                    <span class="lbl"
+                        style="font-size: 11px; font-weight: 800; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem;">Macro
+                        Avg F1</span>
+                    <span class="val" style="font-size: 3rem; font-weight: 900; color: white;">{{
+                        metrics.macro_f1|round(4) }}</span>
+                </div>
+                <div class="summary-card"
+                    style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255,255,255,0.1); padding: 1.5rem; flex: 1; min-width: 200px; text-align: center; border-radius: 4px;">
+                    <span class="lbl"
+                        style="font-size: 11px; font-weight: 800; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem;">Weighted
+                        Avg F1</span>
+                    <span class="val" style="font-size: 3rem; font-weight: 900; color: white;">{{ metrics.f1|round(4)
+                        }}</span>
+                </div>
+                <div class="summary-card"
+                    style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255,255,255,0.1); padding: 1.5rem; flex: 1; min-width: 200px; text-align: center; border-radius: 4px;">
+                    <span class="lbl"
+                        style="font-size: 11px; font-weight: 800; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem;">Overall
+                        Accuracy</span>
+                    <span class="val" style="font-size: 3rem; font-weight: 900; color: white;">{{ (metrics.accuracy *
+                        100)|round(2) }}%</span>
+                </div>
+            </div>
+
+            <p class="label-mini" style="margin-top: 4rem;">Class-Wise Decomposition</p>
+            <div class="table-wrapper">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Grade Class</th>
+                            <th>Precision</th>
+                            <th>Recall</th>
+                            <th>F1-Score</th>
+                            <th>Support</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for item in metrics.class_metrics %}
+                        <tr>
+                            <td style="font-weight: 700; color: var(--secondary-color);">{{ item.label }}</td>
+                            <td>{{ item.precision }}</td>
+                            <td>{{ item.recall }}</td>
+                            <td>{{ item.f1 }}</td>
+                            <td style="opacity: 0.5;">{{ item.support }}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </section>
+        {% endif %}
+
+        <section class="upload-card" style="margin-top: 4rem; padding: 2.5rem; border-radius: 8px;">
+            <p class="label-mini">Inference Manifest</p>
+            <div class="table-wrapper">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Stone Identifier</th>
+                            {% for feature in model_features %}
+                            <th>{{ feature }}</th>
+                            {% endfor %}
+                            <th>AI Result</th>
+                            {% for col in out_of_box_cols %}
+                            <th>{{ col }}</th>
+                            {% endfor %}
+                            <th>Preview</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for row in report_data %}
+                        <tr>
+                            <td style="font-size: 14px; font-weight: 900; color: white;">{{ row.L_Code }}</td>
+                            {% for feature in model_features %}
+                            <td style="opacity: 0.7;">{{ row[feature] }}</td>
+                            {% endfor %}
+                            <td style="color: var(--secondary-color); font-size: 14px; font-weight: 900;">{{
+                                row.Predicted_FGrdCol }}</td>
+                            {% for col in out_of_box_cols %}
+                            <td>
+                                {% if row[col] and row[col]|string != 'nan' %}
+                                <span class="badge-oob">{{ row[col] }}</span>
+                                {% else %}
+                                <span style="opacity: 0.2;">-</span>
+                                {% endif %}
+                            </td>
+                            {% endfor %}
+                            <td>
+                                {% if row.Image_Path != 'N/A' %}
+                                <img src="/image/{{ row.Image_Path }}" class="img-thumb" onclick="openModal(this.src)"
+                                    alt="Diamond Preview">
+                                {% else %}
+                                <span style="font-size: 10px; opacity: 0.3;">NO IMAGE</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </section>
+
+        <footer style="margin-top: 4rem; padding-bottom: 2rem;">
+            <a href="/"
+                style="font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: white; opacity: 0.5; text-decoration: none;">←
+                New Batch</a>
+        </footer>
+    </div>
+
+    <!-- Image Viewer Modal -->
+    <div id="image-modal">
+        <span class="modal-close" onclick="closeModal()">&times;</span>
+        <img id="modal-img" src="" alt="Enlarged View">
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        function openModal(src) {
+            const modal = document.getElementById('image-modal');
+            const modalImg = document.getElementById('modal-img');
+            modal.classList.add('active');
+            modalImg.src = src;
+        }
+
+        function closeModal() {
+            const modal = document.getElementById('image-modal');
+            modal.classList.remove('active');
+        }
+
+        // Close modal on background click
+        document.getElementById('image-modal').onclick = function (e) {
+            if (e.target === this) closeModal();
+        };
+
+        // Shader from index.html repeated for consistency
+        const vertexShader = `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`;
+        const fragmentShader = `
+          uniform float uTime;
+          varying vec2 vUv;
+          vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
+          float snoise(vec2 v){
+            const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
+            vec2 i  = floor(v + dot(v, C.yy) );
+            vec2 x0 = v -   i + dot(i, C.xx);
+            vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+            vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1;
+            i = mod(i, 289.0);
+            vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 ));
+            vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
+            m = m*m ; m = m*m ;
+            vec3 x = 2.0 * fract(p * C.www) - 1.0;
+            vec3 h = abs(x) - 0.5;
+            vec3 ox = floor(x + 0.5);
+            vec3 a0 = x - ox;
+            m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
+            vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+            return 130.0 * dot(m, g);
+          }
+          void main() {
+            vec2 uv = vUv;
+            float n = snoise(uv * 1.5 + uTime * 0.03);
+            vec3 color = mix(vec3(0.0, 0.0, 0.0), vec3(0.05, 0.02, 0.1), n * 0.5 + 0.5);
+            gl_FragColor = vec4(color, 1.0);
+          }
+        `;
+        const scene = new THREE.Scene();
+        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas3d'), antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        const geometry = new THREE.PlaneGeometry(2, 2);
+        const uniforms = { uTime: { value: 0 } };
+        const material = new THREE.ShaderMaterial({ vertexShader, fragmentShader, uniforms });
+        scene.add(new THREE.Mesh(geometry, material));
+        const animate = (t) => {
+            uniforms.uTime.value = t * 0.001;
+            renderer.render(scene, camera);
+            requestAnimationFrame(animate);
+        };
+        requestAnimationFrame(animate);
+        window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight);
+    </script>
+</body>
+
+</html>