Update app.py

app.py

@@ -36,10 +36,8 @@ def generate_human_report(detections, counts):
     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."
@@ -57,7 +55,7 @@ def detect_hieroglyphs(image: Image.Image, conf_threshold: float = 0.25):
         annotated_array = results[0].plot() 
         annotated_image = Image.fromarray(annotated_array[..., ::-1])
         
-        # Save for Download Button
+        # Save for Download
         temp_dir = tempfile.gettempdir()
         save_path = os.path.join(temp_dir, "rosetta_decoded_result.jpg")
         annotated_image.save(save_path)
@@ -87,52 +85,65 @@ def detect_hieroglyphs(image: Image.Image, conf_threshold: float = 0.25):
     except Exception as e:
         return None, {"error": str(e)}, f"System Failure: {str(e)}", None
 
-# --- 3. UI STYLING (THE BLUE LAPIS THEME) ---
+# --- 3. UI STYLING & MYSTICAL CURSOR ---
 
-cursor_url = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41Ij4KICAgIDxjaXJjbGUgY3g9IjE2IiBjeT0iMTYiIHI9IjgiIGZpbGw9InJnYmEoMjEyLCAxNzUsIDU1LCAwLjEpIi8+CiAgICA8cGF0aCBkPSZNMTYsNCBMMTYsOCIvPgogICAgPHBhdGggZD0iTTE2LDI0IEwxNiwyOCIvPgogICAgPHBhdGggZD0iTTQsMTYgTDgsMTYiLz4KICAgIDxwYXRoIGQ9Ik0yNCwxNiBMMjgsMTYiLz4KICAgIDxjaXJjbGUgY3g9IjE2IiBjeT0iMTYiIHI9IjIiIGZpbGw9IiNkNGFmMzciLz4KICA8L2c+Cjwvc3ZnPg==')"
+# SVG Cursor: An Golden Ankh (Key of Life)
+cursor_url = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iNiIgcj0iNCIgZmlsbD0icmdiYSgyMTIsIDE3NSwgNTUsIDAuMSkiLz48bGluZSB4MT0iMTIiIHkxPSIxMCIgeDI9IjEyIiB5Mj0iMjIiLz48bGluZSB4MT0iOCIgeTE9IjE1IiB4Mj0iMTYiIHkyPSIxNSIvPjwvc3ZnPg==')"
 
 custom_css = f"""
-/* Import 'Cairo' font: Modern, readable, fits the region */
 @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');
 
+/* --- THEME VARIABLES --- */
 :root {{
-    /* --- LAPIS LAZULI NIGHT THEME --- */
-    --bg-gradient: radial-gradient(circle at 50% 0%, #0a0a2e 0%, #000000 100%); /* Deep Blue to Black */
+    /* DAY MODE (Papyrus) */
+    --bg-gradient: linear-gradient(135deg, #f0e6d2 0%, #e6dcc3 100%);
+    --card-bg: rgba(255, 255, 255, 0.6);
+    --text-primary: #3d342b;
+    --text-accent: #8b4513; 
+    --border-color: #8b4513;
+    --btn-grad: linear-gradient(135deg, #cd853f 0%, #8b4513 100%);
+    --btn-text: #fff;
+    --info-bg: rgba(139, 69, 19, 0.05); 
+    --info-border: #8b4513;
+    --glow-color: rgba(139, 69, 19, 0.3);
+}}
+
+.dark {{
+    /* NIGHT MODE (Lapis Lazuli) */
+    --bg-gradient: radial-gradient(circle at 50% 0%, #0a0a2e 0%, #000000 100%);
     --card-bg: rgba(15, 15, 35, 0.7);
-    --text-primary: #e0e7ff; /* Soft Blue-White for comfortable reading */
-    --text-accent: #d4af37;  /* Gold */
+    --text-primary: #e0e7ff; 
+    --text-accent: #d4af37;  
     --border-color: #d4af37;
     --btn-grad: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
     --btn-text: #000;
-    --glow-color: rgba(212, 175, 55, 0.4);
-    
-    /* Guide Box Colors */
     --info-bg: rgba(212, 175, 55, 0.08); 
     --info-border: #d4af37;
+    --glow-color: rgba(212, 175, 55, 0.4);
 }}
 
-/* --- GLOBAL SETTINGS --- */
+/* --- GLOBAL --- */
 body, .gradio-container {{
     background: var(--bg-gradient) !important;
-    font-family: 'Cairo', sans-serif !important; /* Replaced Cinzel with Cairo */
+    font-family: 'Cairo', sans-serif !important;
     color: var(--text-primary) !important;
-    cursor: {cursor_url} 16 16, auto !important; 
-    -webkit-font-smoothing: antialiased; /* Fixes pixelation */
-    -moz-osx-font-smoothing: grayscale;
+    cursor: {cursor_url} 12 12, auto !important; 
+    -webkit-font-smoothing: antialiased;
 }}
 
-button, a, .cursor-pointer {{
-    cursor: {cursor_url} 16 16, pointer !important;
+/* Force all clickable elements to use the Ankh cursor */
+button, a, .cursor-pointer, .gradio-button {{
+    cursor: {cursor_url} 12 12, pointer !important;
 }}
 
 /* --- CARDS --- */
 .card {{
     background: var(--card-bg) !important;
-    border: 1px solid rgba(212, 175, 55, 0.2) !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.3);
+    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);
@@ -141,7 +152,7 @@ button, a, .cursor-pointer {{
 .card:hover {{
     transform: translateY(-4px);
     border-color: var(--border-color) !important;
-    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 20px var(--glow-color);
+    box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 0 20px var(--glow-color);
 }}
 
 /* --- BUTTONS --- */
@@ -161,15 +172,27 @@ button.primary-btn:hover {{
     box-shadow: 0 0 25px var(--glow-color);
 }}
 
+/* Toggle Button Styling */
+button.toggle-btn {{
+    background: transparent !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-accent) !important;
+    font-size: 14px !important;
+    padding: 5px 15px !important;
+}}
+button.toggle-btn:hover {{
+    background: var(--info-bg) !important;
+}}
+
 /* --- TYPOGRAPHY --- */
 .card-title {{
     font-family: 'Cairo', sans-serif;
-    font-size: 18px; /* Larger for better reading */
+    font-size: 18px;
     font-weight: 700;
     color: var(--text-accent);
     text-transform: uppercase;
     letter-spacing: 2px;
-    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
+    border-bottom: 1px solid rgba(128,128,128, 0.2);
     padding-bottom: 12px;
     margin-bottom: 18px;
     display: flex;
@@ -177,19 +200,17 @@ button.primary-btn:hover {{
     gap: 8px;
 }}
 
-/* --- GOLDEN GUIDE BOXES --- */
+/* --- 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; /* Keep mono for technical instructions */
+    font-family: 'Space Mono', monospace;
     font-size: 13px;
     line-height: 1.6;
-    color: #e0e7ff;
 }}
-
 .step-number {{
     color: var(--text-accent);
     font-weight: bold;
@@ -197,34 +218,31 @@ button.primary-btn:hover {{
     display: block;
     margin-bottom: 6px;
     font-size: 12px;
-    letter-spacing: 1px;
 }}
-
 .path-highlight {{
-    background: rgba(212, 175, 55, 0.15);
+    background: rgba(128,128,128,0.2);
     padding: 3px 8px;
     border-radius: 4px;
     color: var(--text-accent);
     font-weight: bold;
-    border: 1px solid rgba(212, 175, 55, 0.3);
+    border: 1px solid var(--border-color);
 }}
 
-/* UI CLEANUP */
+/* CLEANUP */
 .gradio-image, .gradio-json {{ background: transparent !important; border: none !important; }}
 .report-box textarea {{
-    background-color: rgba(10, 10, 20, 0.5) !important;
+    background-color: rgba(0,0,0,0.2) !important;
     border: 1px solid var(--border-color) !important;
     font-family: 'Space Mono', monospace !important;
-    color: #a5b4fc !important; /* Lighter text for better contrast */
+    color: var(--text-primary) !important;
     font-size: 14px !important;
 }}
-/* Override default gradio text color */
 .block-title {{ color: var(--text-accent) !important; }}
 span {{ color: var(--text-primary); }}
 """
 
 header_html = """
-<div style="padding: 20px 0; border-bottom: 1px solid rgba(212, 175, 55, 0.2); margin-bottom: 20px;">
+<div style="padding: 20px 0; border-bottom: 1px solid rgba(128,128,128,0.2); margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
     <div style="display: flex; align-items: center; gap: 20px;">
         <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#d4af37" stroke-width="2">
             <rect x="3" y="3" width="18" height="18" rx="2" />
@@ -234,8 +252,8 @@ header_html = """
             <circle cx="12" cy="12" r="3" stroke="#d4af37" fill="none"/>
         </svg>
         <div>
-            <h1 style="margin: 0; font-size: 36px; font-weight: 700; color: #e0e7ff; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);">ROSETTA DECODER</h1>
-            <p style="margin: 0; font-size: 14px; color: #d4af37; letter-spacing: 3px; font-weight: 600;">AI HIEROGLYPHIC TRANSLATION SYSTEM</p>
+            <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>
         </div>
     </div>
 </div>
@@ -244,7 +262,7 @@ header_html = """
 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: #e0e7ff;">
+    <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, 
@@ -309,17 +327,30 @@ claude_json_content = """{
 }"""
 
 # --- 4. MAIN APP ASSEMBLY ---
+# JavaScript to toggle the 'dark' class on the body element
+toggle_js = """
+() => {
+    document.body.classList.toggle('dark');
+    document.querySelector('.gradio-container').classList.toggle('dark');
+}
+"""
+
 with gr.Blocks(title="Rosetta Decoder") as demo:
-    # Inject Styles
+    # Inject CSS
     gr.HTML(f"<style>{custom_css}</style>")
     
-    # Top Section
-    gr.HTML(header_html)
+    # Top Section (Header + Toggle Button)
+    with gr.Row(elem_classes="header-row"):
+        with gr.Column(scale=4):
+            gr.HTML(header_html)
+        with gr.Column(scale=1):
+            # The Magic Toggle Button
+            btn_toggle = gr.Button("🌗 Day / Night", elem_classes="toggle-btn")
+
     gr.HTML(mission_html)
     
     # Workspace
     with gr.Row():
-        # INPUT COLUMN
         with gr.Column(scale=1):
             gr.HTML('<div class="card"><div class="card-title">INPUT IMAGE</div>')
             with gr.Tabs():
@@ -334,36 +365,25 @@ with gr.Blocks(title="Rosetta Decoder") as demo:
                     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">AI ANALYSIS RESULTS</div>')
             out_image = gr.Image(label="Decoded Result", interactive=False)
-            
-            # Download Button
             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>')
 
-    # Footer Section
+    # Footer
     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>")
 
     # Event Wiring
-    btn_upload.click(
-        fn=detect_hieroglyphs, 
-        inputs=[img_upload, slider_upload], 
-        outputs=[out_image, out_json, out_report, btn_download]
-    )
+    btn_toggle.click(None, None, None, js=toggle_js)
     
-    btn_cam.click(
-        fn=detect_hieroglyphs, 
-        inputs=[img_cam, slider_cam], 
-        outputs=[out_image, out_json, out_report, btn_download]
-    )
+    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"])