Update app.py

app.py

@@ -54,7 +54,6 @@ 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
         temp_dir = tempfile.gettempdir()
         save_path = os.path.join(temp_dir, "rosetta_decoded_result.jpg")
         annotated_image.save(save_path)
@@ -83,21 +82,21 @@ 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 & ANIMATION ---
+# --- 3. UI STYLING ---
 
-# SVG Cursor: Eye of Horus
 cursor_url = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41Ij4KICAgIDxwYXRoIGQ9Ik0xNiw4IEM2LDIwIDI2LDIwIDE2LDggWiIgZmlsbD0icmdiYSgyMTIsIDE3NSwgNTUsIDAuMSkiLz4KICAgIDxjaXJjbGUgY3g9IjE2IiBjeT0iMTUiIHI9IjMiIGZpbGw9IiNkNGFmMzciLz4KICAgIDxwYXRoIGQ9Ik0xNiwyMiBMMTYsMjggTDEwLDI4Ii8+CiAgPC9nPgo8L3N2Zz4=')"
 
 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 {{
-    /* --- DEFAULT: NIGHT MODE (Lapis Lazuli) --- */
+/* --- 1. DEFAULT (DARK/NIGHT MODE) --- */
+/* This applies when the page first loads or when 'light-mode' is NOT active */
+: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;  /* Gold */
+    --text-accent: #d4af37;
     --border-color: #d4af37;
     --btn-grad: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
     --btn-text: #000;
@@ -106,21 +105,23 @@ custom_css = f"""
     --glow-color: rgba(212, 175, 55, 0.4);
 }}
 
-/* --- LIGHT MODE OVERRIDE CLASS (Papyrus) --- */
-body.light-mode {{
-    --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);
+/* --- 2. LIGHT MODE OVERRIDE (PAPYRUS) --- */
+/* We use high specificity (.gradio-container.light-mode) to defeat the OS dark mode */
+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; /* Forces Dark Text */
+    --text-accent: #8b4513 !important;  /* Forces Brown Accent */
+    --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;
+    color: #3d342b !important; /* Force Body Text Dark */
 }}
 
-/* --- GLOBAL SETTINGS --- */
+/* --- GLOBAL LAYOUT --- */
 body, .gradio-container {{
     background: var(--bg-gradient) !important;
     font-family: 'Cairo', sans-serif !important;
@@ -134,7 +135,7 @@ button, a, .cursor-pointer {{
     cursor: {cursor_url} 16 16, pointer !important;
 }}
 
-/* --- CURSOR TRAIL PARTICLES --- */
+/* --- TRAIL --- */
 .gold-dust {{
     position: fixed;
     width: 6px;
@@ -162,6 +163,7 @@ button, a, .cursor-pointer {{
     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 {{
@@ -187,7 +189,6 @@ button.primary-btn:hover {{
     box-shadow: 0 0 25px var(--glow-color);
 }}
 
-/* Toggle Button */
 button.toggle-btn {{
     background: transparent !important;
     border: 1px solid var(--border-color) !important;
@@ -199,53 +200,56 @@ button.toggle-btn:hover {{
     background: var(--info-bg) !important;
 }}
 
-/* --- GUIDE BOXES --- */
+/* --- GUIDE BOXES & TEXT COLORS --- */
 .guide-step {{
-    background-color: var(--info-bg);
-    border-left: 4px solid var(--info-border);
+    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);
+    color: var(--text-primary) !important; /* STRICT COLOR ENFORCEMENT */
 }}
 
 .step-number {{
-    color: var(--text-accent);
+    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);
+    color: var(--text-accent) !important;
     font-weight: bold;
     border: 1px solid var(--border-color);
 }}
 
-/* --- UI CLEANUP & FIXES --- */
+/* --- FIXES --- */
 .gradio-image, .gradio-json {{ background: transparent !important; border: none !important; }}
 
-/* FIX FOR DARK GREY UPLOAD BOX IN LIGHT MODE */
-body.light-mode .gradio-image button {{
-     background-color: rgba(255, 248, 240, 0.7) !important; /* Light papyrus fill */
+/* Fix Light Mode Upload Box Background */
+body.light-mode .gradio-image button, 
+.gradio-container.light-mode .gradio-image button {{
+     background-color: rgba(255, 248, 240, 0.7) !important;
      border: 2px dashed var(--border-color) !important;
-     color: var(--text-primary) !important; /* Dark text */
+     color: var(--text-primary) !important;
 }}
 
 .report-box textarea {{
     background-color: rgba(0,0,0,0.2) !important;
     border: 1px solid var(--border-color) !important;
     font-family: 'Space Mono', monospace !important;
-    color: var(--text-primary) !important;
+    color: var(--text-primary) !important; /* Ensure text matches theme */
     font-size: 14px !important;
 }}
+
 .block-title {{ color: var(--text-accent) !important; }}
 span {{ color: var(--text-primary); }}
 """
@@ -337,7 +341,6 @@ claude_json_content = """{
 
 # --- 4. MAIN APP ASSEMBLY ---
 
-# Trail Script attached to body load
 trail_script = """
 <script>
 document.addEventListener('DOMContentLoaded', () => {
@@ -364,7 +367,6 @@ with gr.Blocks(title="Rosetta Decoder") as demo:
         with gr.Column(scale=4):
             gr.HTML(header_html)
         with gr.Column(scale=1):
-            # JS-based Toggle button
             btn_toggle = gr.Button("🌗 Day / Night", elem_classes="toggle-btn")
 
     gr.HTML(mission_html)
@@ -400,7 +402,7 @@ with gr.Blocks(title="Rosetta Decoder") as demo:
     gr.HTML("</div>")
 
     # Wiring
-    # The toggle button triggers JS to add/remove the 'light-mode' class
+    # JS: Toggle 'light-mode' on body AND container to defeat OS dark mode
     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])