Update app.py

app.py

@@ -1,88 +1,219 @@
 import gradio as gr
 from ultralytics import YOLO
 from PIL import Image
+from google import genai
 import os
+import json
+import matplotlib.pyplot as plt
+import re
 from huggingface_hub import hf_hub_download
-import numpy as np
 import tempfile
 
-# --- 1. SETUP & MODEL LOADING ---
+# --- 1. CONFIGURATION & SECRETS ---
+# Reading secrets from Hugging Face Environment Variables
+GOOGLE_API_KEY = os.environ.get("GOOGLE_API_KEY")
+HF_TOKEN = os.environ.get("HF_TOKEN")
+
+# Model Configuration
 MODEL_REPO = "youkii-xr/hieroglyphic-detection"
 MODEL_FILENAME = "best.pt"
+JSON_DB_PATH = "gardiner_codes.json"
+
+# Configure YOLO to use a writable temp directory in HF Spaces
 os.environ["YOLO_CONFIG_DIR"] = "/tmp/Ultralytics"
 
+# --- 2. DATA LOADING (GARDINER CODES) ---
+
+def load_gardiner_database():
+    """Loads the Gardiner Code database from the external JSON file."""
+    if os.path.exists(JSON_DB_PATH):
+        try:
+            print(f"System: Loading Gardiner codes from {JSON_DB_PATH}...")
+            with open(JSON_DB_PATH, "r", encoding='utf-8') as f:
+                return json.load(f)
+        except Exception as e:
+            print(f"⚠️ Error reading JSON: {e}")
+            return {}
+    else:
+        print(f"⚠️ Warning: {JSON_DB_PATH} not found. Gardiner Code tab will be empty.")
+        return {}
+
+gardiner_data = load_gardiner_database()
+gardiner_map = {k: v.get("Description", k) for k, v in gardiner_data.items()}
+
+# --- 3. HTML TABLE GENERATOR ---
+
+CATEGORIES = {
+    'A': "Men & Monarchs", 'B': "Women & Human Activities", 'C': "Deities",
+    'D': "Parts of Human Body", 'E': "Mammals", 'F': "Parts of Mammals",
+    'G': "Birds", 'H': "Parts of Birds", 'I': "Reptiles & Amphibians",
+    'K': "Fishes", 'L': "Invertebrates", 'M': "Trees & Plants",
+    'N': "Sky, Earth, Water", 'O': "Buildings", 'P': "Ships",
+    'Q': "Furniture", 'R': "Temple Furniture", 'S': "Crowns & Dress",
+    'T': "Warfare & Hunting", 'U': "Agriculture & Crafts", 'V': "Rope & Baskets",
+    'W': "Vessels", 'X': "Loaves & Cakes", 'Y': "Writings & Games",
+    'Z': "Strokes & Figures", 'Aa': "Unclassified"
+}
+
+def generate_gardiner_html():
+    if not gardiner_data:
+        return "<tr><td colspan='4'>No data loaded. Please upload gardiner_codes.json to the Space.</td></tr>"
+
+    html_rows = ""
+    grouped = {}
+    for key, data in gardiner_data.items():
+        match = re.match(r"([A-Za-z]+)", data.get("Code", key))
+        prefix = match.group(1) if match else "Unk"
+        if prefix not in grouped: grouped[prefix] = []
+        grouped[prefix].append(data)
+    
+    sorted_prefixes = sorted(grouped.keys(), key=lambda x: (len(x), x))
+    
+    for prefix in sorted_prefixes:
+        cat_name = CATEGORIES.get(prefix, f"Category {prefix}")
+        html_rows += f"<tr><td colspan='4' class='category-header'>{cat_name}</td></tr>"
+        items = sorted(grouped[prefix], key=lambda x: int(re.search(r'\d+', x.get("Code", "0")).group()) if re.search(r'\d+', x.get("Code", "0")) else 0)
+        
+        for item in items:
+            html_rows += f"""
+            <tr>
+                <td style="font-weight:bold; color: #fff;">{item.get("Code", "?")}</td>
+                <td>{item.get("Description", "-")}</td>
+                <td style="font-family:serif; font-size:1.1em;">{item.get("Transliteration", "-")}</td>
+                <td><span class="type-badge">{item.get("Type", "-")}</span></td>
+            </tr>
+            """
+    return html_rows
+
+GARDINER_TABLE_CONTENT = generate_gardiner_html()
+
+# --- 4. LOAD MODEL (FROM PRIVATE REPO) ---
+
+print("System: Initializing Rosetta Decoder Core...")
 try:
-    print("System: Initializing Rosetta Decoder Core...")
     model_path = hf_hub_download(
         repo_id=MODEL_REPO,
         filename=MODEL_FILENAME,
-        token=os.environ.get("HF_TOKEN")
+        token=HF_TOKEN
     )
     model = YOLO(model_path)
     print("System: Model loaded successfully.")
 except Exception as e:
-    print(f"Error: {e}")
+    print(f"Error loading model: {e}")
     model = None
 
-# --- 2. LOGIC ---
-def generate_human_report(detections, counts):
-    if not detections:
-        return "Rosetta Decoder detects no identifiable Gardiner codes in this image."
+# --- 5. CORE PROCESSING LOGIC ---
+
+def clean_ai_text(text):
+    text = re.sub(r'^\d+[\.\)]\s*', '', text)
+    text = text.replace("**", "")
+    return text
+
+def generate_analytics_plots(detections, img_width, img_height):
+    if not detections: return None
     
-    total = len(detections)
-    sorted_counts = sorted(counts.items(), key=lambda item: item[1], reverse=True)
+    codes = [d['code'] for d in detections]
+    confs = [d['confidence'] for d in detections]
+    x_centers = [d['box'][0] + (d['box'][2] - d['box'][0])/2 for d in detections]
+    y_centers = [d['box'][1] + (d['box'][3] - d['box'][1])/2 for d in detections]
     
-    report = f"🔓 DECODING SEQUENCE COMPLETE\n"
-    report += f"===================================\n"
-    report += f"Glyph Density: {total} Symbols Identified\n\n"
-    report += "🔣 GARDINER CODE INVENTORY:\n"
-    for code, count in sorted_counts:
-        report += f"• Code [{code}]: {count} instance(s)\n"
-    report += f"\n===================================\n"
-    report += f"CONFIDENCE: High\n"
-    report += f"STATUS: Digitized & Ready for Translation."
-    return report
-
-def detect_hieroglyphs(image: Image.Image, conf_threshold: float = 0.25):
-    if image is None: 
-        return None, None, "Input source required.", None
-    if model is None: 
-        return None, {"error": "Model failed"}, "Critical Error: Weights not loaded.", None
+    fig = plt.figure(figsize=(10, 15))
+    fig.patch.set_facecolor('#0f0f23') 
+    
+    ax1 = plt.subplot(3, 1, 1)
+    unique_codes = list(set(codes))
+    counts = [codes.count(c) for c in unique_codes]
+    ax1.bar(unique_codes, counts, color='#d4af37')
+    ax1.set_title('Symbol Frequency', color='white', fontsize=12, pad=10)
+    ax1.tick_params(colors='white')
+    ax1.set_facecolor('none')
+    for spine in ax1.spines.values(): spine.set_color('#d4af37')
+
+    ax2 = plt.subplot(3, 1, 2)
+    ax2.scatter(range(len(confs)), confs, color='#d4af37', alpha=0.7, s=50)
+    ax2.set_title('AI Confidence Levels', color='white', fontsize=12, pad=10)
+    ax2.set_ylim(0, 1.1)
+    ax2.tick_params(colors='white')
+    ax2.set_facecolor('none')
+    for spine in ax2.spines.values(): spine.set_color('#d4af37')
+
+    ax3 = plt.subplot(3, 1, 3)
+    h = ax3.hist2d(x_centers, y_centers, bins=[20, 20], range=[[0, img_width], [0, img_height]], cmap='inferno')
+    ax3.set_title('Glyph Spatial Heatmap', color='white', fontsize=12, pad=10)
+    ax3.set_xlim(0, img_width)
+    ax3.set_ylim(img_height, 0)
+    ax3.tick_params(colors='white')
+    cbar = plt.colorbar(h[3], ax=ax3)
+    cbar.ax.yaxis.set_tick_params(color='white')
+    plt.setp(plt.getp(cbar.ax.axes, 'yticklabels'), color='white')
+
+    plt.tight_layout(pad=4.0)
+    return fig
+
+def get_ai_translation_all_styles(keywords_list):
+    if not GOOGLE_API_KEY:
+        return "⚠️ Error: Google API Key not found in Secrets.", "Error"
+    if not keywords_list:
+        return "No hieroglyphs detected.", "No data."
+
+    keywords_str = ", ".join(keywords_list)
+    prompt = f"""
+    You are an expert Egyptologist AI. I have detected these symbols: [{keywords_str}].
+    Please provide 2 distinct outputs separated by "|||SEPARATOR|||".
+    1. A Mystical Story: Highly atmospheric, sounding like an ancient prophecy. 
+       Do NOT number this section. Use HTML tags <b> for bolding keywords and <br> for new lines.
+    2. An Academic Translation: Direct, linguistic, focusing on grammar. Use standard text.
+    """
+    try:
+        client = genai.Client(api_key=GOOGLE_API_KEY)
+        response = client.models.generate_content(model="gemini-2.5-flash", contents=prompt)
+        parts = response.text.split("|||SEPARATOR|||")
+        if len(parts) < 2: return clean_ai_text(response.text), "Could not parse academic style."
+        return clean_ai_text(parts[0].strip()), clean_ai_text(parts[1].strip())
+    except Exception as e:
+        return f"Error: {str(e)}", "Error"
+
+def process_pipeline(image, conf_threshold):
+    if image is None: return None, "", "", None, "", None, []
+    if model is None: return None, "Error: Model not loaded.", "", None, "", None, []
 
     try:
         results = model.predict(source=image, conf=conf_threshold, iou=0.45, imgsz=640, verbose=False, device='cpu', max_det=300)
         annotated_array = results[0].plot() 
         annotated_image = Image.fromarray(annotated_array[..., ::-1])
-        
-        temp_dir = tempfile.gettempdir()
-        save_path = os.path.join(temp_dir, "rosetta_decoded_result.jpg")
-        annotated_image.save(save_path)
+        img_w, img_h = image.size
         
         detections = []
-        gardiner_counts = {}
+        unique_codes = set()
+        crops = []
+        
         for box in results[0].boxes:
             if box.cls.numel() > 0:
                 cls_id = int(box.cls[0])
                 if 0 <= cls_id < len(model.names):
                     code = model.names[cls_id]
                     conf = float(box.conf[0])
-                    if code not in gardiner_counts: gardiner_counts[code] = 0
-                    gardiner_counts[code] += 1
-                    detections.append({"code": code, "confidence": round(conf, 2)})
-
-        summary_json = {
-            "status": "success",
-            "total_found": len(detections),
-            "counts": gardiner_counts
-        }
+                    unique_codes.add(code)
+                    xyxy = box.xyxy[0].tolist()
+                    detections.append({"code": code, "confidence": round(conf, 2), "box": xyxy})
+                    
+                    crop_img = image.crop((xyxy[0], xyxy[1], xyxy[2], xyxy[3]))
+                    crops.append((crop_img, f"{code}\n({int(conf*100)}%)"))
+
+        mapped_words = [gardiner_map.get(code, f"[{code}]") for code in unique_codes]
+        analytics_plot = generate_analytics_plots(detections, img_w, img_h)
+        mystical, academic = get_ai_translation_all_styles(mapped_words)
+        text_report = f"Total Symbols: {len(detections)}\nUnique Codes: {', '.join(unique_codes)}"
         
-        text_report = generate_human_report(detections, gardiner_counts)
-        return annotated_image, summary_json, text_report, save_path
+        formatted_mystical = f"""<div class="mystical-container"><h3>✨ THE ANCIENT WHISPER</h3><p>{mystical}</p></div>"""
+        json_output = {"count": len(detections), "detections": detections}
+
+        return annotated_image, formatted_mystical, academic, analytics_plot, text_report, json_output, crops
 
     except Exception as e:
-        return None, {"error": str(e)}, f"System Failure: {str(e)}", None
+        return None, f"System Failure: {str(e)}", "", None, str(e), None, []
 
-# --- 3. UI STYLING ---
+# --- 6. UI STYLING ---
 
 cursor_url = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41Ij4KICAgIDxwYXRoIGQ9Ik0xNiw4IEM2LDIwIDI2LDIwIDE2LDggWiIgZmlsbD0icmdiYSgyMTIsIDE3NSwgNTUsIDAuMSkiLz4KICAgIDxjaXJjbGUgY3g9IjE2IiBjeT0iMTUiIHI9IjMiIGZpbGw9IiNkNGFmMzciLz4KICAgIDxwYXRoIGQ9Ik0xNiwyMiBMMTYsMjggTDEwLDI4Ii8+CiAgPC9nPgo8L3N2Zz4=')"
 
@@ -90,7 +221,6 @@ custom_css = f"""
 @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
 
-/* --- 1. DEFAULT (DARK/NIGHT MODE) --- */
 :root, .dark, body {{
     --bg-gradient: radial-gradient(circle at 50% 0%, #0a0a2e 0%, #000000 100%);
     --card-bg: rgba(15, 15, 35, 0.7);
@@ -98,14 +228,11 @@ custom_css = f"""
     --text-accent: #d4af37;
     --border-color: #d4af37;
     --btn-grad: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
-    --btn-text: #000;
     --info-bg: rgba(212, 175, 55, 0.08); 
     --info-border: #d4af37;
     --glow-color: rgba(212, 175, 55, 0.4);
-    --input-bg: rgba(0,0,0,0.2);
 }}
 
-/* --- 2. LIGHT MODE OVERRIDE (PAPYRUS) --- */
 body.light-mode, .gradio-container.light-mode {{
     --bg-gradient: linear-gradient(135deg, #f0e6d2 0%, #e6dcc3 100%) !important;
     --card-bg: rgba(255, 255, 255, 0.6) !important;
@@ -113,189 +240,49 @@ body.light-mode, .gradio-container.light-mode {{
     --text-accent: #8b4513 !important;
     --border-color: #8b4513 !important;
     --btn-grad: linear-gradient(135deg, #cd853f 0%, #8b4513 100%) !important;
-    --btn-text: #fff !important;
     --info-bg: rgba(139, 69, 19, 0.05) !important; 
     --info-border: #8b4513 !important;
     --glow-color: rgba(139, 69, 19, 0.3) !important;
-    --input-bg: rgba(255, 255, 255, 0.7) !important;
     color: var(--text-primary) !important;
 }}
 
-/* --- GLOBAL LAYOUT --- */
 body, .gradio-container {{
     background: var(--bg-gradient) !important;
     font-family: 'Cairo', sans-serif !important;
     color: var(--text-primary) !important;
     cursor: {cursor_url} 16 16, auto !important; 
-    -webkit-font-smoothing: antialiased;
-    transition: background 0.5s ease, color 0.5s ease;
-}}
-
-button, a, .cursor-pointer {{
-    cursor: {cursor_url} 16 16, pointer !important;
-}}
-
-/* --- TRAIL --- */
-.gold-dust {{
-    position: fixed;
-    width: 6px;
-    height: 6px;
-    background: var(--text-accent);
-    border-radius: 50%;
-    pointer-events: none;
-    z-index: 9999;
-    animation: fadeDust 0.6s linear forwards;
-    box-shadow: 0 0 5px var(--text-accent);
-}}
-@keyframes fadeDust {{
-    0% {{ opacity: 1; transform: scale(1); }}
-    100% {{ opacity: 0; transform: scale(0); }}
-}}
-
-/* --- CARDS & TITLES --- */
-.card {{
-    background: var(--card-bg) !important;
-    border: 1px solid rgba(128, 128, 128, 0.2) !important;
-    border-radius: 12px;
-    padding: 24px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(12px);
-    margin-bottom: 24px;
-    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-    color: var(--text-primary) !important;
-}}
-.card:hover {{
-    transform: translateY(-4px);
-    border-color: var(--border-color) !important;
-    box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 0 20px var(--glow-color);
-}}
-.card-title {{
-    font-family: 'Cairo', sans-serif;
-    font-size: 20px;
-    font-weight: 700;
-    color: var(--text-accent) !important;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    border-bottom: 1px solid rgba(128,128,128, 0.2);
-    padding-bottom: 15px;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-}}
-
-/* --- BUTTONS --- */
-button.primary-btn {{
-    background: var(--btn-grad) !important;
-    border: 1px solid var(--border-color) !important;
-    color: var(--btn-text) !important;
-    font-weight: 700 !important;
-    font-family: 'Cairo', sans-serif !important;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    transition: all 0.3s ease;
-    font-size: 16px !important;
-}}
-button.primary-btn:hover {{
-    transform: scale(1.02);
-    box-shadow: 0 0 25px var(--glow-color);
-}}
-button.toggle-btn {{
-    background: transparent !important;
-    border: 1px solid var(--border-color) !important;
-    color: var(--text-accent) !important;
-    padding: 5px 15px !important;
-    font-family: 'Space Mono', monospace;
-}}
-button.toggle-btn:hover {{
-    background: var(--info-bg) !important;
-}}
-
-/* --- GUIDE BOXES --- */
-.guide-step {{
-    background-color: var(--info-bg) !important;
-    border-left: 4px solid var(--info-border) !important;
-    padding: 16px;
-    margin: 12px 0;
-    border-radius: 0 8px 8px 0;
-    font-family: 'Space Mono', monospace;
-    font-size: 13px;
-    line-height: 1.6;
-    color: var(--text-primary) !important;
-}}
-.step-number {{
-    color: var(--text-accent) !important;
-    font-weight: bold;
-    text-transform: uppercase;
-    display: block;
-    margin-bottom: 6px;
-    font-size: 12px;
-}}
-.path-highlight {{
-    background: rgba(128,128,128,0.2);
-    padding: 3px 8px;
-    border-radius: 4px;
-    color: var(--text-accent) !important;
-    font-weight: bold;
-    border: 1px solid var(--border-color);
-}}
-
-/* --- DEEP LIGHT MODE FIXES --- */
-
-/* 1. Force Image Containers to be Light/Transparent in Light Mode */
-body.light-mode .gradio-image,
-body.light-mode .image-container,
-body.light-mode .gradio-image > div {{
-    background-color: rgba(255, 255, 255, 0.4) !important;
-}}
-/* Fix the upload area button specifically */
-body.light-mode .gradio-image button {{
-     background-color: rgba(255, 248, 240, 0.8) !important;
-     border: 2px dashed var(--border-color) !important;
-     color: var(--text-primary) !important;
-}}
-
-/* 2. Fix Analysis Log (Textbox) Background & Text */
-.report-box textarea {{
-    background-color: var(--input-bg) !important; /* Uses variable now */
-    border: 1px solid var(--border-color) !important;
-    font-family: 'Space Mono', monospace !important;
-    color: var(--text-primary) !important;
-    font-size: 14px !important;
+    transition: background 0.5s ease;
 }}
 
-/* 3. Fix Accordion/JSON in Light Mode */
-body.light-mode .accordion {{
-    background-color: rgba(255, 255, 255, 0.5) !important;
-    border: 1px solid var(--border-color) !important;
-}}
-body.light-mode .accordion span, 
-body.light-mode .accordion label {{
-    color: var(--text-primary) !important;
-}}
-
-/* 4. Fix General Text Visibility */
-body.light-mode span, .gradio-container.light-mode span,
-body.light-mode p, .gradio-container.light-mode p {{
-     color: var(--text-primary) !important;
-}}
-body.light-mode .guide-step code {{
-    background-color: rgba(139, 69, 19, 0.1);
-    color: var(--text-accent) !important;
-}}
-body.light-mode .tab-nav button {{
-    color: var(--text-primary) !important;
-    opacity: 0.7;
-}}
-body.light-mode .tab-nav button.selected {{
-    color: var(--text-accent) !important;
-    opacity: 1;
-}}
-
-/* Cleanup */
+.gold-dust {{ position: fixed; width: 6px; height: 6px; background: var(--text-accent); border-radius: 50%; pointer-events: none; z-index: 9999; animation: fadeDust 0.6s linear forwards; box-shadow: 0 0 5px var(--text-accent); }}
+@keyframes fadeDust {{ 0% {{ opacity: 1; transform: scale(1); }} 100% {{ opacity: 0; transform: scale(0); }} }}
+
+button, a, .cursor-pointer {{ cursor: {cursor_url} 16 16, pointer !important; }}
+.tabs button {{ padding: 5px 10px !important; font-size: 14px !important; min-width: auto !important; }}
+
+.card {{ background: var(--card-bg) !important; border: 1px solid rgba(128, 128, 128, 0.2) !important; border-radius: 12px; padding: 24px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); backdrop-filter: blur(12px); margin-bottom: 24px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }}
+.card:hover {{ transform: translateY(-4px); border-color: var(--border-color) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 0 20px var(--glow-color); }}
+
+.card-title {{ font-family: 'Cairo', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-accent) !important; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid rgba(128,128,128, 0.2); padding-bottom: 15px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; }}
+.guide-step {{ background: rgba(255, 255, 255, 0.03); border-left: 4px solid #d4af37; padding: 16px; margin-bottom: 16px; border-radius: 0 6px 6px 0; }}
+.step-title {{ color: #d4af37; font-family: 'Space Mono', monospace; font-weight: bold; display: block; margin-bottom: 8px; font-size: 14px; }}
+.path-highlight {{ background: rgba(212, 175, 55, 0.15); border: 1px solid #d4af37; padding: 2px 6px; border-radius: 4px; color: #fff; font-family: 'Space Mono', monospace; }}
+code {{ font-family: 'Space Mono', monospace; background: rgba(0,0,0,0.3); padding: 2px 5px; border-radius: 4px; color: #e0e7ff; }}
+
+.gardiner-table {{ width: 100%; border-collapse: collapse; font-family: 'Space Mono', monospace; font-size: 13px; margin-top: 10px; border: 1px solid #d4af37; }}
+.gardiner-table th {{ color: #ffffff; text-align: left; padding: 12px; border-bottom: 2px solid #d4af37; text-transform: uppercase; letter-spacing: 1px; background: rgba(212, 175, 55, 0.1); }}
+.gardiner-table td {{ padding: 10px; border-bottom: 1px solid rgba(212, 175, 55, 0.2); color: #e0e0e0; }}
+.gardiner-table tr:hover {{ background: rgba(212, 175, 55, 0.1); }}
+.category-header {{ background: rgba(212, 175, 55, 0.2); color: #d4af37; font-weight: bold; text-align: center; padding: 8px; text-transform: uppercase; letter-spacing: 2px; }}
+.type-badge {{ border: 1px solid #d4af37; color: #d4af37; padding: 2px 6px; border-radius: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }}
+
+.mystical-container {{ font-family: 'Cairo', serif; font-size: 18px; line-height: 1.8; color: #fff8e1; padding: 20px; border: 1px solid var(--border-color); background: rgba(212, 175, 55, 0.05); border-radius: 8px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }}
+.mystical-container:hover {{ transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 0 20px var(--glow-color); }}
+.mystical-container h3 {{ color: var(--text-accent); text-align: center; border-bottom: 1px dashed var(--border-color); padding-bottom: 10px; }}
+.mystical-container b {{ color: #d4af37; text-shadow: 0 0 5px rgba(212, 175, 55, 0.5); }}
+.scrollable-box textarea {{ overflow-y: auto !important; max-height: 400px !important; background-color: rgba(0,0,0,0.3) !important; }}
+button.primary-btn {{ background: var(--btn-grad) !important; border: 1px solid var(--border-color) !important; color: #000 !important; font-weight: 700 !important; font-size: 16px !important; }}
 .gradio-image, .gradio-json {{ background: transparent !important; border: none !important; }}
-.block-title {{ color: var(--text-accent) !important; }}
 """
 
 header_html = """
@@ -310,142 +297,91 @@ header_html = """
         </svg>
         <div>
             <h1 style="margin: 0; font-size: 36px; font-weight: 700; color: var(--text-primary); text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);">ROSETTA DECODER</h1>
-            <p style="margin: 0; font-size: 14px; color: var(--text-accent); letter-spacing: 3px; font-weight: 600;">AI HIEROGLYPHIC TRANSLATION SYSTEM</p>
+            <p style="margin: 0; font-size: 14px; color: var(--text-accent); letter-spacing: 3px; font-weight: 600;">HIEROGLYPHIC DETECTOR AND TRANSLATOR</p>
         </div>
     </div>
 </div>
 """
 
 mission_html = """
-<div class="card">
-    <div class="card-title">📡 VISION STATEMENT</div>
-    <p style="opacity: 0.9; font-size: 16px; line-height: 1.8; color: var(--text-primary);">
-        <b>Bridging the Ancient and the Digital.</b><br>
-        The Rosetta Decoder project utilizes advanced computer vision to identify and catalog Ancient Egyptian hieroglyphs. 
-        By automating the detection of Gardiner codes, we are creating a digital bridge that will eventually allow for instant, 
-        context-aware translation of Pharaonic wisdom, making the voices of the past accessible to everyone.
-    </p>
-</div>
+<div class="card"><div class="card-title">📡 VISION STATEMENT</div><p style="opacity: 0.9; font-size: 16px; line-height: 1.8; color: var(--text-primary);"><b>Bridging the Ancient and the Digital.</b><br>The Rosetta Decoder project utilizes advanced computer vision to identify and catalog Ancient Egyptian hieroglyphs. By automating the detection of Gardiner codes, we are creating a digital bridge that will eventually allow for instant, context-aware translation of Pharaonic wisdom.</p></div>
 """
 
-guide_instructions_html = """
-<div class="card" style="border-color: var(--info-border) !important;">
-    <div class="card-title" style="color: var(--info-border) !important;">🤖 CLAUDE DESKTOP SETUP GUIDE</div>
-    
-    <div class="guide-step">
-        <span class="step-number">STEP 1: PREPARE WORKSPACE</span>
-        Claude is sandboxed. It cannot see your Desktop. You must create a bridge.<br>
-        1. Create this EXACT folder on your PC: <span class="path-highlight">C:\\Claude_Work</span><br>
-        2. Move your hieroglyph images <b>INSIDE</b> this folder.
-    </div>
-
-    <div class="guide-step">
-        <span class="step-number">STEP 2: VERIFY PYTHON</span>
-        The code below assumes Python is at: <code>C:\\Python313\\python.exe</code><br>
-        <b>Check your path:</b> Open CMD and type <code>where python</code>.<br>
-        <i>Note: If your path is different, replace the path in the JSON code block below before copying.</i>
-    </div>
+guide_html = """
+<div class="card" style="border-color: #d4af37;">
+    <div class="card-title" style="color: #d4af37;">🤖 CLAUDE DESKTOP SETUP GUIDE</div>
+    <div class="guide-step"><span class="step-title">STEP 0: PREREQUISITE</span><p>Ensure you have <b>Node.js</b> installed (Required for the `npx` command used by MCP).</p><p><a href="https://nodejs.org/" target="_blank" style="color: #d4af37; text-decoration: underline;">Download Node.js Official Website</a></p></div>
+    <div class="guide-step"><span class="step-title">STEP 1: PREPARE WORKSPACE</span><p>Claude is sandboxed. It cannot see your Desktop. You must create a bridge.</p>1. Create this EXACT folder on your PC: <span class="path-highlight">C:\\Claude_Work</span><br>2. Move your hieroglyph images <b>INSIDE</b> this folder.</div>
+    <div class="guide-step"><span class="step-title">STEP 2: VERIFY PYTHON</span><p>The code below assumes Python is at: <code>C:\\Python313\\python.exe</code></p><p><b>Check your path:</b> Open CMD and type <code>where python</code>.</p><p><i>Note: If your path is different, replace the path in the JSON code block below before copying.</i></p></div>
+    <div class="guide-step"><span class="step-title">STEP 3: CONFIGURE CLAUDE</span>1. Open Config: <code>%APPDATA%\\Claude\\claude_desktop_config.json</code><br>2. Paste the JSON below into the <code>"mcpServers"</code> section.<br>3. <b>IMPORTANT:</b> Close Claude from the System Tray (near the clock) and restart it.</div>
+    <div class="guide-step"><span class="step-title">STEP 4: USAGE</span><p>Prompt Claude: <i>"Analyze the image at C:\\Claude_Work\\my_tablet.jpg"</i></p></div>
+</div>
+"""
 
-    <div class="guide-step">
-        <span class="step-number">STEP 3: CONFIGURE CLAUDE</span>
-        1. Open Config: <code>%APPDATA%\\Claude\\claude_desktop_config.json</code><br>
-        2. Paste the JSON below into the <code>"mcpServers"</code> section.<br>
-        3. <b>IMPORTANT:</b> Close Claude from the System Tray (near the clock) and restart it.
-    </div>
+claude_json_content = """{ "mcpServers": { "gradio": { "command": "npx", "args": [ "mcp-remote", "https://youkii-xr-hieroglyph-mcp-server.hf.space/gradio_api/mcp/", "--transport", "streamable-http" ] }, "upload_helper": { "command": "C:\\\\Python313\\\\python.exe", "args": [ "-m", "gradio", "upload-mcp", "https://youkii-xr-hieroglyph-mcp-server.hf.space/", "C:\\\\Claude_Work" ] } } }"""
 
-    <div class="guide-step">
-        <span class="step-number">STEP 4: USAGE</span>
-        Prompt Claude: <i>"Analyze the image at C:\\Claude_Work\\my_tablet.jpg"</i>
-    </div>
-"""
+trail_script = """<script>document.addEventListener('DOMContentLoaded', () => { document.addEventListener('mousemove', (e) => { if (Math.random() > 0.7) return; const dust = document.createElement('div'); dust.classList.add('gold-dust'); dust.style.left = e.clientX + 'px'; dust.style.top = e.clientY + 'px'; document.body.appendChild(dust); setTimeout(() => dust.remove(), 600); }); });</script>"""
 
-claude_json_content = """{
-  "mcpServers": {
-    "gradio": {
-      "command": "npx",
-      "args": [
-        "mcp-remote",
-        "https://youkii-xr-hieroglyph-mcp-server.hf.space/gradio_api/mcp/",
-        "--transport",
-        "streamable-http"
-      ]
-    },
-    "upload_helper": {
-      "command": "C:\\\\Python313\\\\python.exe",
-      "args": [
-        "-m",
-        "gradio",
-        "upload-mcp",
-        "https://youkii-xr-hieroglyph-mcp-server.hf.space/",
-        "C:\\\\Claude_Work"
-      ]
-    }
-  }
-}"""
-
-# --- 4. MAIN APP ASSEMBLY ---
-
-trail_script = """
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-    document.addEventListener('mousemove', (e) => {
-        if (Math.random() > 0.7) return; 
-        const dust = document.createElement('div');
-        dust.classList.add('gold-dust');
-        dust.style.left = e.clientX + 'px';
-        dust.style.top = e.clientY + 'px';
-        document.body.appendChild(dust);
-        setTimeout(() => dust.remove(), 600);
-    });
-});
-</script>
-"""
+# --- 7. MAIN APP ASSEMBLY ---
 
-with gr.Blocks(title="Rosetta Decoder") as demo:
+with gr.Blocks(title="Rosetta Decoder Ultimate") as demo:
     gr.HTML(f"<style>{custom_css}</style>")
     gr.HTML(trail_script)
     
     with gr.Row(elem_classes="header-row"):
-        with gr.Column(scale=4):
-            gr.HTML(header_html)
-        with gr.Column(scale=1):
-            btn_toggle = gr.Button("🌗 Day / Night", elem_classes="toggle-btn")
-
-    gr.HTML(mission_html)
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.HTML('<div class="card"><div class="card-title">INPUT IMAGE</div>')
-            with gr.Tabs():
-                with gr.TabItem("📜 Upload File"):
-                    img_upload = gr.Image(type="pil", sources=["upload", "clipboard"], label="Upload", height=320)
-                    slider_upload = gr.Slider(0.1, 1.0, 0.25, label="Scan Sensitivity")
-                    btn_upload = gr.Button("🔍 START DECODING", elem_classes="primary-btn")
-                
-                with gr.TabItem("🎥 Live Camera"):
-                    img_cam = gr.Image(type="pil", sources=["webcam"], label="Camera", height=320)
-                    slider_cam = gr.Slider(0.1, 1.0, 0.25, label="Scan Sensitivity")
-                    btn_cam = gr.Button("🔍 LIVE DECODE", elem_classes="primary-btn")
-            gr.HTML('</div>')
-
-        with gr.Column(scale=1):
-            gr.HTML('<div class="card"><div class="card-title">AI ANALYSIS RESULTS</div>')
-            out_image = gr.Image(label="Decoded Result", interactive=False)
-            btn_download = gr.DownloadButton("💾 DOWNLOAD RESULT", visible=True)
-            out_report = gr.Textbox(label="Analysis Log", lines=6, elem_classes="report-box", placeholder="Waiting for data stream...")
-            with gr.Accordion("Raw Glyph Data (JSON)", open=False):
-                out_json = gr.JSON(label="JSON Data")
-            gr.HTML('</div>')
-
-    gr.HTML(guide_instructions_html)
-    gr.Code(value=claude_json_content, language="json", label="claude_desktop_config.json", interactive=False, lines=15)
-    gr.HTML("</div>")
-
-    # JS Toggle Logic
-    btn_toggle.click(None, None, None, js="() => { document.body.classList.toggle('light-mode'); document.querySelector('.gradio-container').classList.toggle('light-mode'); }")
-    
-    btn_upload.click(fn=detect_hieroglyphs, inputs=[img_upload, slider_upload], outputs=[out_image, out_json, out_report, btn_download])
-    btn_cam.click(fn=detect_hieroglyphs, inputs=[img_cam, slider_cam], outputs=[out_image, out_json, out_report, btn_download])
+        with gr.Column(scale=4): gr.HTML(header_html)
+        with gr.Column(scale=1): btn_toggle = gr.Button("🌗 Day / Night")
+
+    with gr.Tabs():
+        # TAB 1: DECODER
+        with gr.TabItem("🔮 DECODER WORKSTATION"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.HTML('<div class="card"><div class="card-title">Input Source</div>')
+                    with gr.Tabs():
+                        with gr.TabItem("📜 Upload File"):
+                            img_upload = gr.Image(type="pil", sources=["upload", "clipboard"], label="Upload", height=280)
+                            slider_conf = gr.Slider(0.1, 1.0, 0.25, label="Scan Sensitivity")
+                            btn_upload = gr.Button("✨ START DECODING", elem_classes="primary-btn")
+                        with gr.TabItem("🎥 Live Camera"):
+                            img_cam = gr.Image(type="pil", sources=["webcam"], label="Camera", height=280)
+                            slider_conf_cam = gr.Slider(0.1, 1.0, 0.25, label="Scan Sensitivity")
+                            btn_cam = gr.Button("✨ START DECODING", elem_classes="primary-btn")
+                    gr.HTML('</div>')
+
+                with gr.Column(scale=1):
+                    gr.HTML('<div class="card"><div class="card-title">Result</div>')
+                    with gr.Tabs():
+                        with gr.TabItem("🔮 Mystical"): out_mystical = gr.HTML(label="Prophecy")
+                        with gr.TabItem("🏛️ Academic"): out_academic = gr.Textbox(label="Scientific Translation", lines=15, show_label=False, elem_classes="scrollable-box")
+                        with gr.TabItem("🖼️ Visuals"):
+                            out_image = gr.Image(label="Annotated Result", interactive=False)
+                            out_gallery = gr.Gallery(label="Extracted Glyphs", columns=4, height="auto")
+                        with gr.TabItem("📊 Analytics"): out_plot = gr.Plot(label="Analysis Charts")
+                        with gr.TabItem("🛠️ Logs"):
+                            out_report = gr.Textbox(label="Detection Log", lines=5)
+                            out_json = gr.JSON(label="JSON Data")
+                    gr.HTML('</div>')
+
+        # TAB 2: ABOUT
+        with gr.TabItem("📜 VISION & ABOUT"): gr.HTML(mission_html)
+
+        # TAB 3: SETUP
+        with gr.TabItem("🤖 SYSTEM SETUP"):
+            gr.HTML(guide_html)
+            gr.Code(value=claude_json_content, language="json", label="claude_desktop_config.json", interactive=False, lines=15)
+
+        # TAB 4: GARDINER CODES
+        with gr.TabItem("𓀀 GARDINER CODES"):
+            gr.HTML(f"""<div class="card"><div class="card-title">📜 SUPPORTED GARDINER CODES</div><div style="overflow-x: auto; max-height: 600px; overflow-y: auto;"><table class="gardiner-table"><thead><tr><th>Code</th><th>Description</th><th>Transliteration</th><th>Type</th></tr></thead><tbody>{GARDINER_TABLE_CONTENT}</tbody></table></div></div>""")
+
+    gr.HTML('<div style="text-align: center; color: var(--text-accent); opacity: 0.5; padding: 20px;"></div>')
+
+    # Events
+    btn_toggle.click(None, None, None, js="() => { document.body.classList.toggle('light-mode'); const container = document.querySelector('.gradio-container'); if(container) container.classList.toggle('light-mode'); }")
+    outputs = [out_image, out_mystical, out_academic, out_plot, out_report, out_json, out_gallery]
+    btn_upload.click(fn=process_pipeline, inputs=[img_upload, slider_conf], outputs=outputs)
+    btn_cam.click(fn=process_pipeline, inputs=[img_cam, slider_conf_cam], outputs=outputs)
 
 if __name__ == "__main__":
-    demo.launch(mcp_server=True, ssr_mode=False, allowed_paths=["/tmp"])
+    demo.launch(mcp_server=True, ssr_mode=False, allowed_paths=["/tmp", "."])