Update app.py

app.py

@@ -4,14 +4,16 @@ from PIL import Image
 import os
 from huggingface_hub import hf_hub_download
 import numpy as np
+import tempfile
 
 # --- 1. SETUP & MODEL LOADING ---
 MODEL_REPO = "youkii-xr/hieroglyphic-detection"
 MODEL_FILENAME = "best.pt"
+# Fix for the Ultralytics config warning in containers
 os.environ["YOLO_CONFIG_DIR"] = "/tmp/Ultralytics"
 
 try:
-    print("System: Downloading model weights...")
+    print("System: Initializing Rosetta Decoder Core...")
     model_path = hf_hub_download(
         repo_id=MODEL_REPO,
         filename=MODEL_FILENAME,
@@ -23,37 +25,48 @@ except Exception as e:
     print(f"Error: {e}")
     model = None
 
-# --- 2. LOGIC ---
+# --- 2. LOGIC: DECODING & REPORTING ---
 def generate_human_report(detections, counts):
+    """Generates a natural language summary of the findings."""
     if not detections:
-        return "The system detects no intelligible glyphs in this image."
+        return "Rosetta Decoder detects no identifiable Gardiner codes in this image."
     
     total = len(detections)
     sorted_counts = sorted(counts.items(), key=lambda item: item[1], reverse=True)
     
-    report = f"🔎 ANALYSIS COMPLETE\n"
-    report += f"-----------------------------------\n"
-    report += f"Total Glyphs Detected: {total}\n\n"
-    report += "📝 SYMBOL INVENTORY:\n"
+    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"• Gardiner Code '{code}': {count} instance(s)\n"
-    report += f"\n-----------------------------------\n"
-    report += f"CONFIDENCE ASSESSMENT: High\n"
-    report += f"TRANSLATION STATUS: Ready for context analysis."
+        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, "Please provide an image input."
+        return None, None, "Input source required.", None
     if model is None: 
-        return None, {"error": "Model failed"}, "System Error: Model not loaded."
+        return None, {"error": "Model failed"}, "Critical Error: Weights not loaded.", None
 
     try:
         results = model.predict(source=image, conf=conf_threshold, iou=0.45, imgsz=640, verbose=False, device='cpu', max_det=300)
         
+        # Visual
         annotated_array = results[0].plot() 
         annotated_image = Image.fromarray(annotated_array[..., ::-1])
         
+        # Save for Download Button
+        # We create a temp file so the download button can find it
+        temp_dir = tempfile.gettempdir()
+        save_path = os.path.join(temp_dir, "rosetta_decoded_result.jpg")
+        annotated_image.save(save_path)
+        
+        # Data
         detections = []
         gardiner_counts = {}
         
@@ -74,44 +87,54 @@ def detect_hieroglyphs(image: Image.Image, conf_threshold: float = 0.25):
         }
         
         text_report = generate_human_report(detections, gardiner_counts)
-        return annotated_image, summary_json, text_report
+        
+        # Return: Image, JSON, Text, FilePath (for download)
+        return annotated_image, summary_json, text_report, save_path
 
     except Exception as e:
-        return None, {"error": str(e)}, f"Critical Error: {str(e)}"
+        return None, {"error": str(e)}, f"System Failure: {str(e)}", None
 
-# --- 3. THE MYSTICAL UI (CSS) ---
+# --- 3. UI STYLING (HTML/CSS INJECTION) ---
 
-# Eye of Horus Cursor (SVG Base64)
-cursor_url = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMiI+CiAgICA8cGF0aCBkPSZNMTYsOCBDNiwyMCAyNiwyMCAxNiw4IFoiIGZpbGw9InJnYmEoMjEyLCAxNzUsIDU1LCAwLjEpIi8+CiAgICA8cGF0aCBkPSZNMTYsMjIgTDEwLDI4IEwyMiwyOCIvPgogICAgPGNpcmNsZSBjeD0iMTYiIGN5PSIxNSIgcj0iMyIgZmlsbD0iI2Q0YWYzNyIvPgogIDwvZz4KPC9zdmc+')"
+# SVG Cursor: A stylized "Lens"
+cursor_url = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41Ij4KICAgIDxjaXJjbGUgY3g9IjE2IiBjeT0iMTYiIHI9IjgiIGZpbGw9InJnYmEoMjEyLCAxNzUsIDU1LCAwLjEpIi8+CiAgICA8cGF0aCBkPSZNMTYsNCBMMTYsOCIvPgogICAgPHBhdGggZD0iTTE2LDI0IEwxNiwyOCIvPgogICAgPHBhdGggZD0iTTQsMTYgTDgsMTYiLz4KICAgIDxwYXRoIGQ9Ik0yNCwxNiBMMjgsMTYiLz4KICAgIDxjaXJjbGUgY3g9IjE2IiBjeT0iMTYiIHI9IjIiIGZpbGw9IiNkNGFmMzciLz4KICA8L2c+Cjwvc3ZnPg==')"
 
 custom_css = f"""
 @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
 
-/* --- THEME VARIABLES (DAY vs NIGHT) --- */
+/* --- THEME VARIABLES --- */
 :root {{
-    /* DAY MODE (PAPYRUS) */
-    --bg-gradient: linear-gradient(135deg, #fdf6e3 0%, #f5e6d3 100%);
+    /* DAY MODE */
+    --bg-gradient: linear-gradient(135deg, #f0e6d2 0%, #e6dcc3 100%);
     --card-bg: rgba(255, 255, 255, 0.6);
-    --text-primary: #5c4033;
-    --text-accent: #b8860b;
-    --border-color: #d4af37;
-    --warning-bg: rgba(255, 0, 0, 0.05);
-    --warning-border: #cc0000;
+    --text-primary: #3d342b;
+    --text-accent: #8b4513;   /* Saddle Brown */
+    --border-color: #8b4513;
+    --btn-grad: linear-gradient(135deg, #cd853f 0%, #8b4513 100%);
+    --btn-text: #fff;
+    --glow-color: rgba(139, 69, 19, 0.3);
+    /* Guide Box Colors (Golden/Info) */
+    --info-bg: rgba(212, 175, 55, 0.1); 
+    --info-border: #d4af37;
 }}
 
 .dark {{
-    /* NIGHT MODE (LAPIS) */
-    --bg-gradient: radial-gradient(circle at 50% 0%, #1a1f35 0%, #050510 100%);
-    --card-bg: rgba(10, 15, 30, 0.7);
-    --text-primary: #e0e7ff;
-    --text-accent: #ffd700;
+    /* DARK MODE */
+    --bg-gradient: radial-gradient(circle at 50% 0%, #1c1c1c 0%, #0a0a0a 100%);
+    --card-bg: rgba(30, 30, 30, 0.7);
+    --text-primary: #dcdcdc; 
+    --text-accent: #d4af37;  /* Gold */
     --border-color: #d4af37;
-    --warning-bg: rgba(255, 99, 71, 0.1);
-    --warning-border: #ff6b6b;
+    --btn-grad: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
+    --btn-text: #000;
+    --glow-color: rgba(212, 175, 55, 0.4);
+    /* Guide Box Colors (Golden/Info) */
+    --info-bg: rgba(212, 175, 55, 0.1);
+    --info-border: #d4af37;
 }}
 
-/* --- GLOBAL --- */
+/* --- GLOBAL SETTINGS --- */
 body, .gradio-container {{
     background: var(--bg-gradient) !important;
     font-family: 'Cinzel', serif !important;
@@ -123,70 +146,84 @@ button, a, .cursor-pointer {{
     cursor: {cursor_url} 16 16, pointer !important;
 }}
 
-/* --- CARDS & ANIMATIONS --- */
+/* --- ANIMATED CARDS --- */
 .card {{
     background: var(--card-bg) !important;
-    border: 1px solid rgba(212, 175, 55, 0.3) !important;
-    border-radius: 15px;
-    padding: 20px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(10px);
-    margin-bottom: 20px;
-    transition: all 0.4s ease;
+    border: 1px solid rgba(128, 128, 128, 0.2) !important;
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(12px);
+    margin-bottom: 24px;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }}
 
-/* HOVER EFFECT: Pulse */
 .card:hover {{
-    transform: translateY(-5px);
+    transform: translateY(-4px);
     border-color: var(--border-color) !important;
-    box-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
-}}
-
-.card-title {{
-    font-size: 16px;
-    font-weight: 700;
-    color: var(--text-accent);
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
-    padding-bottom: 8px;
-    margin-bottom: 15px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 15px var(--glow-color);
 }}
 
 /* --- BUTTONS --- */
 button.primary-btn {{
-    background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%) !important;
-    border: 1px solid #ffd700 !important;
-    color: #fff !important;
-    font-weight: bold !important;
-    font-family: 'Cinzel', serif !important;
+    background: var(--btn-grad) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--btn-text) !important;
+    font-weight: 700 !important;
+    font-family: 'Space Mono', monospace !important;
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: 2px;
     transition: all 0.3s ease;
 }}
-
 button.primary-btn:hover {{
-    transform: scale(1.05);
-    box-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
+    transform: scale(1.02);
+    box-shadow: 0 0 20px var(--glow-color);
+}}
+
+/* --- TYPOGRAPHY --- */
+.card-title {{
+    font-family: 'Space Mono', monospace;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--text-accent);
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    border-bottom: 1px solid rgba(128,128,128, 0.2);
+    padding-bottom: 12px;
+    margin-bottom: 18px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }}
 
-/* --- WARNING BOXES --- */
-.warning-box {{
-    background-color: var(--warning-bg);
-    border-left: 5px solid var(--warning-border);
-    padding: 15px;
-    margin: 10px 0;
-    border-radius: 0 10px 10px 0;
-    font-family: 'Courier Prime', monospace;
+/* --- GOLDEN GUIDE BOXES --- */
+.guide-step {{
+    background-color: var(--info-bg);
+    border-left: 4px solid var(--info-border);
+    padding: 16px;
+    margin: 12px 0;
+    border-radius: 0 8px 8px 0;
+    font-family: 'Space Mono', monospace;
     font-size: 13px;
+    line-height: 1.6;
+}}
+
+.step-number {{
+    color: var(--text-accent);
+    font-weight: bold;
+    text-transform: uppercase;
+    display: block;
+    margin-bottom: 6px;
+    font-size: 11px;
+    letter-spacing: 1px;
 }}
 
-.path-box {{
-    background: rgba(128, 128, 128, 0.2);
+.path-highlight {{
+    background: rgba(128,128,128,0.2);
     padding: 2px 6px;
     border-radius: 4px;
-    font-weight: bold;
     color: var(--text-accent);
+    font-weight: bold;
 }}
 
 /* UI CLEANUP */
@@ -194,53 +231,70 @@ button.primary-btn:hover {{
 .report-box textarea {{
     background-color: rgba(0,0,0,0.2) !important;
     border: 1px solid var(--border-color) !important;
-    font-family: 'Courier Prime', monospace !important;
+    font-family: 'Space Mono', monospace !important;
     color: var(--text-accent) !important;
+    font-size: 13px !important;
 }}
 """
 
 header_html = """
-<div style="display: flex; align-items: center; gap: 20px; padding: 20px 0;">
-    <div style="font-size: 40px;">👁️</div>
-    <div>
-        <h1 style="margin: 0; font-size: 32px; color: var(--text-accent);">HORUS VISION</h1>
-        <p style="margin: 0; font-size: 12px; letter-spacing: 2px; opacity: 0.8;">HIEROGLYPHIC TRANSLATION & PRESERVATION</p>
+<div style="padding: 20px 0; border-bottom: 1px solid rgba(128,128,128,0.1); margin-bottom: 20px;">
+    <div style="display: flex; align-items: center; gap: 15px;">
+        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="var(--text-accent)" stroke-width="2">
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <path d="M7 7h10" />
+            <path d="M7 12h10" />
+            <path d="M7 17h10" />
+            <circle cx="12" cy="12" r="3" stroke="var(--text-accent)" fill="none"/>
+        </svg>
+        <div>
+            <h1 style="margin: 0; font-size: 28px; font-family: 'Cinzel', serif; letter-spacing: 1px; color: var(--text-primary);">ROSETTA DECODER</h1>
+            <p style="margin: 0; font-family: 'Space Mono', monospace; font-size: 11px; color: var(--text-accent); letter-spacing: 3px;">AI HIEROGLYPHIC TRANSLATION SYSTEM</p>
+        </div>
     </div>
 </div>
 """
 
 mission_html = """
 <div class="card">
-    <div class="card-title">📜 MISSION BRIEF</div>
-    <p style="opacity: 0.9; font-size: 14px; line-height: 1.6;">
-        <b>To preserve the past is to save the future.</b><br>
-        This tool uses AI to digitize Ancient Egyptian inscriptions. 
-        <span style="font-size:12px; float:right;">(Hover over cards to see the aura)</span>
+    <div class="card-title">📡 VISION STATEMENT</div>
+    <p style="opacity: 0.9; font-size: 15px; line-height: 1.8;">
+        <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>
 """
 
 guide_instructions_html = """
-<div class="card" style="border-color: var(--warning-border) !important;">
-    <div class="card-title" style="color: var(--warning-border);">🤖 CLAUDE DESKTOP CONFIGURATION</div>
+<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="warning-box">
-        <strong style="font-size:14px; display:block; margin-bottom:5px; color: var(--warning-border);">⚠️ STEP 1: IMAGE FOLDER (CRITICAL)</strong>
-        Claude Desktop is "sandboxed" (isolated). It cannot see your Desktop or Downloads.<br><br>
-        1. Create this EXACT folder: <span class="path-box">C:\\Claude_Work</span><br>
-        2. Put your images INSIDE it.<br>
-        3. <b>Prompting:</b> "Analyze the image at C:\\Claude_Work\\my_image.jpg"
+    <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="warning-box" style="border-color: var(--text-accent);">
-        <strong style="font-size:14px; display:block; margin-bottom:5px; color: var(--text-accent);">🐍 STEP 2: PYTHON PATH</strong>
-        The code below assumes Python is at <code>C:\\Python313\\python.exe</code>.<br>
-        If your Python is installed elsewhere, you must change this line in the JSON.<br>
-        <i>(Run <code>where python</code> in CMD to find your real path).</i>
+    <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>
 
-    <div style="margin-top: 15px; opacity: 0.9; font-size: 13px;">
-        <b>FINAL STEP:</b> Copy the JSON below into <code>%APPDATA%\\Claude\\claude_desktop_config.json</code> and RESTART Claude.
+    <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>
+
+    <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>
 """
 
@@ -268,49 +322,64 @@ claude_json_content = """{
   }
 }"""
 
-# --- 4. MAIN APP ---
-# NOTE: removed 'theme' argument to prevent errors. Styling is handled by custom_css.
-with gr.Blocks(title="Horus Vision") as demo:
-    
-    # Inject CSS
+# --- 4. MAIN APP ASSEMBLY ---
+with gr.Blocks(title="Rosetta Decoder") as demo:
+    # Inject Styles
     gr.HTML(f"<style>{custom_css}</style>")
     
-    # Header
+    # Top Section
     gr.HTML(header_html)
     gr.HTML(mission_html)
     
     # Workspace
     with gr.Row():
+        # INPUT COLUMN
         with gr.Column(scale=1):
-            gr.HTML('<div class="card"><div class="card-title">SOURCE ARTIFACT</div>')
+            gr.HTML('<div class="card"><div class="card-title">INPUT IMAGE</div>')
             with gr.Tabs():
-                with gr.TabItem("📜 Upload Scroll"):
-                    img_upload = gr.Image(type="pil", sources=["upload", "clipboard"], label="Upload", height=300)
-                    slider_upload = gr.Slider(0.1, 1.0, 0.25, label="Confidence")
-                    btn_upload = gr.Button("🔮 DECIPHER SCROLL", elem_classes="primary-btn")
+                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("👁️ Divine Sight"):
-                    img_cam = gr.Image(type="pil", sources=["webcam"], label="Camera", height=300)
-                    slider_cam = gr.Slider(0.1, 1.0, 0.25, label="Confidence")
-                    btn_cam = gr.Button("🔮 DECIPHER VISION", 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>')
 
+        # OUTPUT COLUMN
         with gr.Column(scale=1):
-            gr.HTML('<div class="card"><div class="card-title">INTERPRETATION</div>')
-            out_image = gr.Image(label="Annotated Artifact", interactive=False)
-            out_report = gr.Textbox(label="Scribe's Report", lines=6, elem_classes="report-box", placeholder="Awaiting input...")
+            gr.HTML('<div class="card"><div class="card-title">AI ANALYSIS RESULTS</div>')
+            out_image = gr.Image(label="Decoded Result", interactive=False)
+            
+            # Download Button (Standard Gradio Component)
+            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>')
 
-    # Config Section (Footer)
+    # Footer Section
     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>")
 
-    # Wiring
-    btn_upload.click(fn=detect_hieroglyphs, inputs=[img_upload, slider_upload], outputs=[out_image, out_json, out_report])
-    btn_cam.click(fn=detect_hieroglyphs, inputs=[img_cam, slider_cam], outputs=[out_image, out_json, out_report])
+    # Event Wiring
+    # Note: detect_hieroglyphs now returns 4 values: Image, JSON, Text, FilePath
+    
+    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]
+    )
 
 if __name__ == "__main__":
     demo.launch(mcp_server=True, ssr_mode=False, allowed_paths=["/tmp"])