Update app.py

app.py

@@ -9,7 +9,6 @@ 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:
@@ -25,9 +24,8 @@ except Exception as e:
     print(f"Error: {e}")
     model = None
 
-# --- 2. LOGIC: DECODING & REPORTING ---
+# --- 2. LOGIC ---
 def generate_human_report(detections, counts):
-    """Generates a natural language summary of the findings."""
     if not detections:
         return "Rosetta Decoder detects no identifiable Gardiner codes in this image."
     
@@ -56,17 +54,14 @@ 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)
         
-        # 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 = {}
         
@@ -87,72 +82,57 @@ def detect_hieroglyphs(image: Image.Image, conf_threshold: float = 0.25):
         }
         
         text_report = generate_human_report(detections, gardiner_counts)
-        
-        # 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"System Failure: {str(e)}", None
 
-# --- 3. UI STYLING (HTML/CSS INJECTION) ---
+# --- 3. UI STYLING (THE BLUE LAPIS THEME) ---
 
-# 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=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
+/* 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 {{
-    /* DAY MODE */
-    --bg-gradient: linear-gradient(135deg, #f0e6d2 0%, #e6dcc3 100%);
-    --card-bg: rgba(255, 255, 255, 0.6);
-    --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 {{
-    /* 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; 
+    /* --- LAPIS LAZULI NIGHT THEME --- */
+    --bg-gradient: radial-gradient(circle at 50% 0%, #0a0a2e 0%, #000000 100%); /* Deep Blue to Black */
+    --card-bg: rgba(15, 15, 35, 0.7);
+    --text-primary: #e0e7ff; /* Soft Blue-White for comfortable reading */
     --text-accent: #d4af37;  /* Gold */
     --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 (Golden/Info) */
-    --info-bg: rgba(212, 175, 55, 0.1);
+    
+    /* Guide Box Colors */
+    --info-bg: rgba(212, 175, 55, 0.08); 
     --info-border: #d4af37;
 }}
 
 /* --- GLOBAL SETTINGS --- */
 body, .gradio-container {{
     background: var(--bg-gradient) !important;
-    font-family: 'Cinzel', serif !important;
+    font-family: 'Cairo', sans-serif !important; /* Replaced Cinzel with Cairo */
     color: var(--text-primary) !important;
     cursor: {cursor_url} 16 16, auto !important; 
+    -webkit-font-smoothing: antialiased; /* Fixes pixelation */
+    -moz-osx-font-smoothing: grayscale;
 }}
 
 button, a, .cursor-pointer {{
     cursor: {cursor_url} 16 16, pointer !important;
 }}
 
-/* --- ANIMATED CARDS --- */
+/* --- CARDS --- */
 .card {{
     background: var(--card-bg) !important;
-    border: 1px solid rgba(128, 128, 128, 0.2) !important;
+    border: 1px solid rgba(212, 175, 55, 0.2) !important;
     border-radius: 12px;
     padding: 24px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(12px);
     margin-bottom: 24px;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -161,7 +141,7 @@ button, a, .cursor-pointer {{
 .card:hover {{
     transform: translateY(-4px);
     border-color: var(--border-color) !important;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 15px var(--glow-color);
+    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 20px var(--glow-color);
 }}
 
 /* --- BUTTONS --- */
@@ -170,25 +150,26 @@ button.primary-btn {{
     border: 1px solid var(--border-color) !important;
     color: var(--btn-text) !important;
     font-weight: 700 !important;
-    font-family: 'Space Mono', monospace !important;
+    font-family: 'Cairo', sans-serif !important;
     text-transform: uppercase;
-    letter-spacing: 2px;
+    letter-spacing: 1px;
     transition: all 0.3s ease;
+    font-size: 16px !important;
 }}
 button.primary-btn:hover {{
     transform: scale(1.02);
-    box-shadow: 0 0 20px var(--glow-color);
+    box-shadow: 0 0 25px var(--glow-color);
 }}
 
 /* --- TYPOGRAPHY --- */
 .card-title {{
-    font-family: 'Space Mono', monospace;
-    font-size: 14px;
+    font-family: 'Cairo', sans-serif;
+    font-size: 18px; /* Larger for better reading */
     font-weight: 700;
     color: var(--text-accent);
     text-transform: uppercase;
-    letter-spacing: 3px;
-    border-bottom: 1px solid rgba(128,128,128, 0.2);
+    letter-spacing: 2px;
+    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
     padding-bottom: 12px;
     margin-bottom: 18px;
     display: flex;
@@ -203,9 +184,10 @@ button.primary-btn:hover {{
     padding: 16px;
     margin: 12px 0;
     border-radius: 0 8px 8px 0;
-    font-family: 'Space Mono', monospace;
+    font-family: 'Space Mono', monospace; /* Keep mono for technical instructions */
     font-size: 13px;
     line-height: 1.6;
+    color: #e0e7ff;
 }}
 
 .step-number {{
@@ -214,42 +196,46 @@ button.primary-btn:hover {{
     text-transform: uppercase;
     display: block;
     margin-bottom: 6px;
-    font-size: 11px;
+    font-size: 12px;
     letter-spacing: 1px;
 }}
 
 .path-highlight {{
-    background: rgba(128,128,128,0.2);
-    padding: 2px 6px;
+    background: rgba(212, 175, 55, 0.15);
+    padding: 3px 8px;
     border-radius: 4px;
     color: var(--text-accent);
     font-weight: bold;
+    border: 1px solid rgba(212, 175, 55, 0.3);
 }}
 
 /* UI CLEANUP */
 .gradio-image, .gradio-json {{ background: transparent !important; border: none !important; }}
 .report-box textarea {{
-    background-color: rgba(0,0,0,0.2) !important;
+    background-color: rgba(10, 10, 20, 0.5) !important;
     border: 1px solid var(--border-color) !important;
     font-family: 'Space Mono', monospace !important;
-    color: var(--text-accent) !important;
-    font-size: 13px !important;
+    color: #a5b4fc !important; /* Lighter text for better contrast */
+    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(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">
+<div style="padding: 20px 0; border-bottom: 1px solid rgba(212, 175, 55, 0.2); margin-bottom: 20px;">
+    <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" />
             <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"/>
+            <circle cx="12" cy="12" r="3" stroke="#d4af37" 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>
+            <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>
         </div>
     </div>
 </div>
@@ -258,7 +244,7 @@ header_html = """
 mission_html = """
 <div class="card">
     <div class="card-title">📡 VISION STATEMENT</div>
-    <p style="opacity: 0.9; font-size: 15px; line-height: 1.8;">
+    <p style="opacity: 0.9; font-size: 16px; line-height: 1.8; color: #e0e7ff;">
         <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, 
@@ -353,7 +339,7 @@ with gr.Blocks(title="Rosetta Decoder") as demo:
             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)
+            # 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...")
@@ -367,8 +353,6 @@ with gr.Blocks(title="Rosetta Decoder") as demo:
     gr.HTML("</div>")
 
     # Event Wiring
-    # Note: detect_hieroglyphs now returns 4 values: Image, JSON, Text, FilePath
-    
     btn_upload.click(
         fn=detect_hieroglyphs, 
         inputs=[img_upload, slider_upload],