Update app.py

app.py

@@ -51,7 +51,6 @@ def detect_hieroglyphs(image: Image.Image, conf_threshold: float = 0.25):
 
     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])
         
@@ -62,7 +61,6 @@ def detect_hieroglyphs(image: Image.Image, conf_threshold: float = 0.25):
         
         detections = []
         gardiner_counts = {}
-        
         for box in results[0].boxes:
             if box.cls.numel() > 0:
                 cls_id = int(box.cls[0])
@@ -85,18 +83,31 @@ 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 & MYSTICAL CURSOR ---
+# --- 3. UI STYLING & ANIMATION ---
 
-# SVG Cursor: An Golden Ankh (Key of Life)
-cursor_url = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iNiIgcj0iNCIgZmlsbD0icmdiYSgyMTIsIDE3NSwgNTUsIDAuMSkiLz48bGluZSB4MT0iMTIiIHkxPSIxMCIgeDI9IjEyIiB5Mj0iMjIiLz48bGluZSB4MT0iOCIgeTE9IjE1IiB4Mj0iMTYiIHkyPSIxNSIvPjwvc3ZnPg==')"
+# 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');
 
-/* --- THEME VARIABLES --- */
 :root {{
-    /* DAY MODE (Papyrus) */
+    /* --- DEFAULT: NIGHT MODE (Since your system is dark) --- */
+    --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 */
+    --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);
+}}
+
+/* --- LIGHT MODE OVERRIDE CLASS --- */
+body.light-mode {{
     --bg-gradient: linear-gradient(135deg, #f0e6d2 0%, #e6dcc3 100%);
     --card-bg: rgba(255, 255, 255, 0.6);
     --text-primary: #3d342b;
@@ -109,32 +120,36 @@ custom_css = f"""
     --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; 
-    --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);
-}}
-
-/* --- GLOBAL --- */
+/* --- GLOBAL SETTINGS --- */
 body, .gradio-container {{
     background: var(--bg-gradient) !important;
     font-family: 'Cairo', sans-serif !important;
     color: var(--text-primary) !important;
-    cursor: {cursor_url} 12 12, auto !important; 
+    cursor: {cursor_url} 16 16, auto !important; 
     -webkit-font-smoothing: antialiased;
+    transition: background 0.5s ease; /* Smooth Theme Switch */
+}}
+
+button, a, .cursor-pointer {{
+    cursor: {cursor_url} 16 16, pointer !important;
+}}
+
+/* --- CURSOR TRAIL PARTICLES --- */
+.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);
 }}
 
-/* Force all clickable elements to use the Ankh cursor */
-button, a, .cursor-pointer, .gradio-button {{
-    cursor: {cursor_url} 12 12, pointer !important;
+@keyframes fadeDust {{
+    0% {{ opacity: 1; transform: scale(1); }}
+    100% {{ opacity: 0; transform: scale(0); }}
 }}
 
 /* --- CARDS --- */
@@ -172,34 +187,18 @@ button.primary-btn:hover {{
     box-shadow: 0 0 25px var(--glow-color);
 }}
 
-/* Toggle Button Styling */
+/* Toggle Button */
 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;
+    font-family: 'Space Mono', monospace;
 }}
 button.toggle-btn:hover {{
     background: var(--info-bg) !important;
 }}
 
-/* --- TYPOGRAPHY --- */
-.card-title {{
-    font-family: 'Cairo', sans-serif;
-    font-size: 18px;
-    font-weight: 700;
-    color: var(--text-accent);
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    border-bottom: 1px solid rgba(128,128,128, 0.2);
-    padding-bottom: 12px;
-    margin-bottom: 18px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}}
-
 /* --- GUIDE BOXES --- */
 .guide-step {{
     background-color: var(--info-bg);
@@ -210,7 +209,9 @@ button.toggle-btn:hover {{
     font-family: 'Space Mono', monospace;
     font-size: 13px;
     line-height: 1.6;
+    color: var(--text-primary);
 }}
+
 .step-number {{
     color: var(--text-accent);
     font-weight: bold;
@@ -327,24 +328,73 @@ claude_json_content = """{
 }"""
 
 # --- 4. MAIN APP ASSEMBLY ---
-# JavaScript to toggle the 'dark' class on the body element
-toggle_js = """
+
+# JS: Toggle Theme AND Add Mouse Trail
+js_code = """
 () => {
-    document.body.classList.toggle('dark');
-    document.querySelector('.gradio-container').classList.toggle('dark');
+    // 1. Toggle Logic
+    const toggleTheme = () => {
+        document.body.classList.toggle('light-mode');
+        const container = document.querySelector('.gradio-container');
+        if (container) container.classList.toggle('light-mode');
+    }
+
+    // 2. Mouse Trail Logic
+    const addTrail = () => {
+        document.addEventListener('mousemove', function(e) {
+            // Rate limit to prevent too many elements
+            if (Math.random() > 0.5) 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);
+            
+            // Remove after animation
+            setTimeout(() => {
+                dust.remove();
+            }, 600);
+        });
+    }
+
+    // Initialize
+    addTrail();
+    
+    // Return the toggle function for the button click
+    return toggleTheme;
 }
 """
 
+# We need to run the trail logic on load, but Gradio JS usually runs on events.
+# We will attach the trail logic to the body load via an HTML script injection.
+trail_script = """
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    document.addEventListener('mousemove', (e) => {
+        if (Math.random() > 0.7) return; // limit density
+        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>
+"""
+
 with gr.Blocks(title="Rosetta Decoder") as demo:
-    # Inject CSS
+    # Inject CSS & Trail Script
     gr.HTML(f"<style>{custom_css}</style>")
+    gr.HTML(trail_script)
     
-    # Top Section (Header + Toggle Button)
+    # Top Section
     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
+            # JS-based Toggle
             btn_toggle = gr.Button("🌗 Day / Night", elem_classes="toggle-btn")
 
     gr.HTML(mission_html)
@@ -379,8 +429,9 @@ with gr.Blocks(title="Rosetta Decoder") as demo:
     gr.Code(value=claude_json_content, language="json", label="claude_desktop_config.json", interactive=False, lines=15)
     gr.HTML("</div>")
 
-    # Event Wiring
-    btn_toggle.click(None, None, None, js=toggle_js)
+    # Wiring
+    # The toggle button triggers a JS function that adds the 'light-mode' class
+    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])