Update app.py

app.py

@@ -1,6 +1,6 @@
 import gradio as gr
 from ultralytics import YOLO
-from PIL import Image
+from PIL import Image, ImageDraw, ImageFont
 from google import genai
 import os
 import json
@@ -9,6 +9,8 @@ import re
 from huggingface_hub import hf_hub_download
 import tempfile
 import numpy as np
+import shutil
+import zipfile
 from typing import List, Tuple, Dict, Any
 
 # --- 1. CONFIGURATION & SECRETS ---
@@ -20,7 +22,6 @@ MODEL_FILENAME = "best.pt"
 JSON_DB_PATH = "gardiner_codes.json"
 
 os.environ["YOLO_CONFIG_DIR"] = "/tmp/Ultralytics"
-# Ensure temp directory exists for plot saving
 os.makedirs("/tmp/gradio_results", exist_ok=True)
 
 # --- 2. DATA LOADING ---
@@ -41,7 +42,65 @@ def load_gardiner_database():
 gardiner_data = load_gardiner_database()
 gardiner_map = {k: v.get("Description", k) for k, v in gardiner_data.items()}
 
-# --- 3. CORE LOGIC FUNCTIONS (Reusable) ---
+# --- 3. CORE LOGIC FUNCTIONS ---
+
+def create_labeled_zip(image, detections):
+    """
+    Crops glyphs, draws label (Code + Conf) on bottom right, and zips them.
+    """
+    if not detections: return None
+
+    zip_dir = tempfile.mkdtemp()
+    zip_path = os.path.join(tempfile.gettempdir(), "rosetta_glyphs.zip")
+    
+    try:
+        # Load a font (try-except block for system compatibility)
+        try:
+            # Try loading a standard font, fallback to default if fails
+            font = ImageFont.truetype("arial.ttf", 16)
+        except IOError:
+            font = ImageFont.load_default()
+
+        for i, d in enumerate(detections):
+            # Crop
+            box = d['box']
+            crop = image.crop((box[0], box[1], box[2], box[3]))
+            
+            # Prepare Label
+            label_text = f"{d['code']} {int(d['confidence']*100)}%"
+            draw = ImageDraw.Draw(crop)
+            
+            # Calculate text size using textbbox (newer PIL versions)
+            left, top, right, bottom = draw.textbbox((0, 0), label_text, font=font)
+            text_w = right - left
+            text_h = bottom - top
+            
+            img_w, img_h = crop.size
+            
+            # Draw background rectangle (bottom right)
+            # Check if image is too small for label, if so, skip drawing to avoid crash
+            if img_w > text_w and img_h > text_h:
+                rect_x0 = img_w - text_w - 4
+                rect_y0 = img_h - text_h - 4
+                rect_x1 = img_w
+                rect_y1 = img_h
+                
+                draw.rectangle([rect_x0, rect_y0, rect_x1, rect_y1], fill="black")
+                draw.text((rect_x0 + 2, rect_y0), label_text, fill="white", font=font)
+            
+            # Save crop
+            filename = f"{d['code']}_{i}.png"
+            crop.save(os.path.join(zip_dir, filename))
+
+        # Create Zip
+        shutil.make_archive(zip_path.replace('.zip', ''), 'zip', zip_dir)
+        return zip_path
+        
+    except Exception as e:
+        print(f"Zip creation error: {e}")
+        return None
+    finally:
+        shutil.rmtree(zip_dir, ignore_errors=True)
 
 def core_detect(image, conf_threshold):
     """Core YOLO detection logic."""
@@ -72,7 +131,7 @@ def core_detect(image, conf_threshold):
                 }
                 detections.append(detection)
                 
-                # Create crop
+                # Create crop (Clean crop for Gallery display)
                 crop_img = image.crop((xyxy[0], xyxy[1], xyxy[2], xyxy[3]))
                 crops.append((crop_img, f"{code}\n({int(conf*100)}%)"))
                 
@@ -166,77 +225,68 @@ except Exception as e:
     model = None
 
 # --- 5. MAIN UI PIPELINE (Orchestrator) ---
-# Used *only* by the Web Interface (Returns complex Objects like gr.Plot)
 
 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, []
+    """
+    Main function used by the Web UI. 
+    """
+    if image is None: return None, None, None, "", "", None, "", "", "", []
+    if model is None: return None, None, None, "Error: Model not loaded.", "", None, "", "", "", []
 
     try:
         img_w, img_h = image.size
+        # 1. Detect
         annotated_img, detections, crops = core_detect(image, conf_threshold)
+        
+        # 2. Prepare Downloads
+        # A. Annotated Image
+        ann_path = os.path.join(tempfile.gettempdir(), "annotated_hieroglyphs.jpg")
+        annotated_img.save(ann_path)
+        
+        # B. Zip File with Labels
+        zip_path = create_labeled_zip(image, detections)
+        
+        # 3. Extract Keywords & Translate
         unique_codes = list(set([d['code'] for d in detections]))
         mapped_words = [gardiner_map.get(code, f"[{code}]") for code in unique_codes]
         mystical, academic = core_translate(mapped_words)
+        
+        # 4. Analytics
         analytics_plot = core_analytics(detections, img_w, img_h)
+        
+        # 5. Reports
         text_report = f"Total Symbols: {len(detections)}\nUnique Codes: {', '.join(unique_codes)}"
         json_output = {"count": len(detections), "detections": detections}
         formatted_mystical = f"""<div class="mystical-container"><h3>✨ THE ANCIENT WHISPER</h3><p>{mystical}</p></div>"""
 
-        return annotated_img, formatted_mystical, academic, analytics_plot, text_report, json_output, crops
+        return annotated_img, ann_path, zip_path, formatted_mystical, academic, analytics_plot, text_report, json_output, crops
 
     except Exception as e:
-        return None, f"System Failure: {str(e)}", "", None, str(e), None, []
+        print(f"Pipeline Error: {e}")
+        return None, None, None, f"System Failure: {str(e)}", "", None, str(e), None, []
 
-# --- 6. MCP API FUNCTIONS (Optimized for Claude) ---
-# These functions use TYPE HINTS so Claude knows what arguments to provide.
-# They return FILE PATHS (strings) for images, not base64 objects.
+# --- 6. MCP API FUNCTIONS ---
 
 def detect_hieroglyphs_api(image: Image.Image, conf: float = 0.25) -> Tuple[str, Dict[str, Any]]:
-    """
-    Scans an image for Egyptian hieroglyphs.
-    Returns a tuple containing:
-    1. The file path to the annotated image result.
-    2. A JSON summary of detected codes and their bounding boxes.
-    """
     ann_img, dets, _ = core_detect(image, conf)
-    
-    # Save to a temp file and return the PATH string
-    # Using a fixed temp dir ensures the path is accessible
     with tempfile.NamedTemporaryFile(dir="/tmp/gradio_results", suffix=".jpg", delete=False) as t:
         ann_img.save(t.name)
         path = t.name
-        
     return path, {"count": len(dets), "detections": dets}
 
 def translate_codes_api(keywords_text: str) -> Tuple[str, str]:
-    """
-    Takes a comma-separated string of Gardiner codes (e.g., 'G43, X1, N5').
-    Returns two translations: a mystical interpretation and an academic translation.
-    """
     if isinstance(keywords_text, str):
         keywords = [k.strip() for k in keywords_text.split(',')]
     else:
         keywords = ["Unknown"]
     mystical, academic = core_translate(keywords)
-    # Strip HTML tags for clean text return to Claude
     clean_mystical = re.sub('<[^<]+?>', '', mystical) 
     return clean_mystical, academic
 
 def get_analytics_chart_api(json_data: Dict[str, Any]) -> str:
-    """
-    Generates statistical charts based on detection data.
-    Input: The JSON output from the 'detect' tool.
-    Returns: The file path to the generated chart image.
-    """
     dets = json_data.get("detections", [])
-    # Use fixed dimensions for consistency
     fig = core_analytics(dets, 640, 640) 
-    
-    if fig is None:
-        return "No data to plot."
-
-    # Save to a temp file and return the PATH string
+    if fig is None: return "No data."
     with tempfile.NamedTemporaryFile(dir="/tmp/gradio_results", suffix=".png", delete=False) as t:
         fig.savefig(t.name, format='png', facecolor='#0f0f23')
         path = t.name
@@ -244,10 +294,6 @@ def get_analytics_chart_api(json_data: Dict[str, Any]) -> str:
     return path
 
 def list_all_codes_api() -> Dict[str, Any]:
-    """
-    Returns the complete database of supported Gardiner codes and their descriptions.
-    Useful for looking up specific symbol meanings.
-    """
     return gardiner_data
 
 # --- 7. HTML GENERATORS ---
@@ -267,7 +313,6 @@ CATEGORIES = {
 def generate_gardiner_html():
     if not gardiner_data:
         return "<tr><td colspan='4'>No data loaded. Please upload gardiner_codes.json.</td></tr>"
-
     html_rows = ""
     grouped = {}
     for key, data in gardiner_data.items():
@@ -275,23 +320,13 @@ def generate_gardiner_html():
         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>
-            """
+            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()
@@ -303,62 +338,26 @@ cursor_url = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5
 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');
-
-:root, .dark, body {{
-    --bg-gradient: radial-gradient(circle at 50% 0%, #0a0a2e 0%, #000000 100%);
-    --card-bg: rgba(15, 15, 35, 0.7);
-    --text-primary: #e0e7ff; 
-    --text-accent: #d4af37;
-    --border-color: #d4af37;
-    --btn-grad: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
-    --info-bg: rgba(212, 175, 55, 0.08); 
-    --info-border: #d4af37;
-    --glow-color: rgba(212, 175, 55, 0.4);
-}}
-
-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;
-    --text-primary: #3d342b !important;
-    --text-accent: #8b4513 !important;
-    --border-color: #8b4513 !important;
-    --btn-grad: linear-gradient(135deg, #cd853f 0%, #8b4513 100%) !important;
-    --info-bg: rgba(139, 69, 19, 0.05) !important; 
-    --info-border: #8b4513 !important;
-    --glow-color: rgba(139, 69, 19, 0.3) !important;
-    color: var(--text-primary) !important;
-}}
-
-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; 
-    transition: background 0.5s ease;
-}}
-
+:root, .dark, body {{ --bg-gradient: radial-gradient(circle at 50% 0%, #0a0a2e 0%, #000000 100%); --card-bg: rgba(15, 15, 35, 0.7); --text-primary: #e0e7ff; --text-accent: #d4af37; --border-color: #d4af37; --btn-grad: linear-gradient(135deg, #b8860b 0%, #d4af37 100%); --info-bg: rgba(212, 175, 55, 0.08); --info-border: #d4af37; --glow-color: rgba(212, 175, 55, 0.4); }}
+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; --text-primary: #3d342b !important; --text-accent: #8b4513 !important; --border-color: #8b4513 !important; --btn-grad: linear-gradient(135deg, #cd853f 0%, #8b4513 100%) !important; --info-bg: rgba(139, 69, 19, 0.05) !important; --info-border: #8b4513 !important; --glow-color: rgba(139, 69, 19, 0.3) !important; color: var(--text-primary) !important; }}
+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; transition: background 0.5s ease; }}
 .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; }}
@@ -366,19 +365,8 @@ code {{ font-family: 'Space Mono', monospace; background: rgba(0,0,0,0.3); paddi
 .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; }}
-
-/* FIXED TOGGLE BUTTON */
-button.toggle-btn {{
-    background: #0a0a2e !important; 
-    border: 1px solid var(--border-color) !important; 
-    color: var(--text-accent) !important; 
-    padding: 5px 15px !important; 
-    font-family: 'Space Mono', monospace; 
-    box-shadow: none !important;
-}}
-button.toggle-btn:hover {{
-    background: var(--info-bg) !important;
-}}
+button.toggle-btn {{ background: #0a0a2e !important; border: 1px solid var(--border-color) !important; color: var(--text-accent) !important; padding: 5px 15px !important; font-family: 'Space Mono', monospace; box-shadow: none !important; }}
+button.toggle-btn:hover {{ background: var(--info-bg) !important; }}
 """
 
 header_html = """
@@ -399,22 +387,26 @@ header_html = """
 </div>
 """
 
+# UPDATED VISION STATEMENT
 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.</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>Echoes of Humanity, Decoded.</b><br>
+It's not just about code; it's about connection. For millennia, the voices of ancient Egypt have been locked in stone, waiting to be heard. 
+Rosetta Decoder isn't just a tool—it's a bridge across time. We are using modern AI to re-awaken these silent stories, allowing us to listen 
+to the hopes, prayers, and daily lives of those who walked before us. We are decoding history to understand our shared humanity.
+</p></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 class="guide-step"><span class="step-title">STEP 0: PREREQUISITE</span><p>Ensure you have <b>Node.js</b> installed.</p></div>
+    <div class="guide-step"><span class="step-title">STEP 1: PREPARE WORKSPACE</span>1. Create: <span class="path-highlight">C:\\Claude_Work</span><br>2. Move images inside.</div>
+    <div class="guide-step"><span class="step-title">STEP 2: CONFIGURE CLAUDE</span>1. Edit: <code>%APPDATA%\\Claude\\claude_desktop_config.json</code><br>2. Paste the JSON below.<br>3. Restart Claude.</div>
 </div>
 """
 
-# FIX 1: Reformatted JSON string with multiline triple-quotes so it displays expanded.
+# URL UPDATED TO: youkii-xr/hieroglyph-mcp-server
 claude_json_content = """{
   "mcpServers": {
     "gradio": {
@@ -447,47 +439,19 @@ with gr.Blocks(title="Rosetta Decoder Ultimate") as demo:
     gr.HTML(f"<style>{custom_css}</style>")
     gr.HTML(trail_script)
     
-    # --- MCP TOOL REGISTRATION LAYER (Hidden from UI) ---
-    # This is the correct, standard way to register tools in Gradio for MCP.
-    # We use hidden buttons connected to our specific API functions.
-    # The 'api_name' argument defines the short name you see in Claude.
-    
+    # --- MCP TOOL REGISTRATION LAYER (Hidden) ---
     with gr.Row(visible=False):
-        # 1. Detect Tool (Short name: "detect")
         btn_detect = gr.Button("Detect")
-        btn_detect.click(
-            fn=detect_hieroglyphs_api,
-            inputs=[gr.Image(label="img"), gr.Number(label="conf")],
-            outputs=[gr.Textbox(label="path"), gr.JSON(label="json")],
-            api_name="detect" # << SHORT NAME HERE
-        )
-
-        # 2. Translate Tool (Short name: "translate")
+        btn_detect.click(fn=detect_hieroglyphs_api, inputs=[gr.Image(label="img"), gr.Number(label="conf")], outputs=[gr.Textbox(label="path"), gr.JSON(label="json")], api_name="detect")
+        
         btn_trans = gr.Button("Translate")
-        btn_trans.click(
-            fn=translate_codes_api,
-            inputs=[gr.Textbox(label="text")],
-            outputs=[gr.Textbox(label="mystic"), gr.Textbox(label="academic")],
-            api_name="translate" # << SHORT NAME HERE
-        )
-
-        # 3. Analytics Tool (Short name: "analytics")
+        btn_trans.click(fn=translate_codes_api, inputs=[gr.Textbox(label="text")], outputs=[gr.Textbox(label="mystic"), gr.Textbox(label="academic")], api_name="translate")
+        
         btn_anal = gr.Button("Analytics")
-        btn_anal.click(
-            fn=get_analytics_chart_api,
-            inputs=[gr.JSON(label="data")],
-            outputs=[gr.Textbox(label="chart_path")],
-            api_name="analytics" # << SHORT NAME HERE
-        )
-
-        # 4. List Codes Tool (Short name: "list_codes")
+        btn_anal.click(fn=get_analytics_chart_api, inputs=[gr.JSON(label="data")], outputs=[gr.Textbox(label="chart_path")], api_name="analytics")
+        
         btn_list = gr.Button("List")
-        btn_list.click(
-            fn=list_all_codes_api,
-            inputs=[],
-            outputs=[gr.JSON(label="data")],
-            api_name="list_codes" # << SHORT NAME HERE
-        )
+        btn_list.click(fn=list_all_codes_api, inputs=[], outputs=[gr.JSON(label="data")], api_name="list_codes")
 
     # --- Visible UI ---
     with gr.Row(elem_classes="header-row"):
@@ -518,6 +482,9 @@ with gr.Blocks(title="Rosetta Decoder Ultimate") as demo:
                         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)
+                            with gr.Row():
+                                btn_download_img = gr.DownloadButton("💾 Download Annotated Image")
+                                btn_download_zip = gr.DownloadButton("📦 Download Glyphs (ZIP)")
                             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"):
@@ -531,7 +498,6 @@ with gr.Blocks(title="Rosetta Decoder Ultimate") as demo:
         # TAB 3: SETUP
         with gr.TabItem("🤖 SYSTEM SETUP"):
             gr.HTML(guide_html)
-            # JSON box will now be expanded due to multiline string above
             gr.Code(value=claude_json_content, language="json", label="claude_desktop_config.json", interactive=False, lines=30)
 
         # TAB 4: GARDINER CODES
@@ -542,14 +508,12 @@ with gr.Blocks(title="Rosetta Decoder Ultimate") as demo:
 
     # 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]
+    
+    # OUTPUTS: Image, ImgPath, ZipPath, Mystical, Academic, Plot, TextReport, JSON, Crops
+    outputs = [out_image, btn_download_img, btn_download_zip, 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__":
-    # Standard launch. Tools are registered via the hidden buttons above.
-    demo.launch(
-        mcp_server=True, 
-        ssr_mode=False, 
-        allowed_paths=["/tmp", "/tmp/gradio_results", "."]
-    )
+    demo.launch(mcp_server=True, ssr_mode=False, allowed_paths=["/tmp", "/tmp/gradio_results", "."])