File size: 22,550 Bytes
af7647d
 
 
4f7b79b
af7647d
4f7b79b
 
 
af7647d
3d7bbf9
af7647d
4f7b79b
 
 
 
 
 
db4e1b2
af7647d
4f7b79b
 
 
200b1a9
 
4f7b79b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
af7647d
 
 
 
4f7b79b
af7647d
 
200b1a9
af7647d
4f7b79b
af7647d
 
4f7b79b
 
 
 
 
 
 
 
 
eb337ce
4f7b79b
 
 
 
eb337ce
4f7b79b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
af7647d
 
da8eae7
af7647d
 
4f7b79b
3d7bbf9
af7647d
4f7b79b
 
 
af7647d
 
 
 
 
 
4f7b79b
 
 
 
 
 
 
 
 
 
 
eb337ce
4f7b79b
 
 
 
af7647d
eb337ce
4f7b79b
f6fedbb
4f7b79b
004bb8f
c045ef8
004bb8f
 
74b222d
 
f6fedbb
352c573
c045ef8
 
 
352c573
c045ef8
 
 
 
 
 
 
352c573
 
 
675ad2e
 
352c573
 
 
 
 
675ad2e
d17f949
 
004bb8f
 
d17f949
004bb8f
c045ef8
4f7b79b
004bb8f
352c573
4f7b79b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
675ad2e
f6fedbb
 
da8eae7
d17f949
74b222d
 
3d7bbf9
 
 
 
74b222d
3d7bbf9
 
d17f949
4f7b79b
3d7bbf9
da8eae7
 
 
 
eb337ce
4f7b79b
eb337ce
 
4f7b79b
 
 
 
 
 
 
 
 
 
eb337ce
4f7b79b
3d7bbf9
4f7b79b
004bb8f
4f7b79b
c045ef8
4f7b79b
200b1a9
c045ef8
004bb8f
d17f949
4f7b79b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f6fedbb
af7647d
4f7b79b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
import gradio as gr
from ultralytics import YOLO
from PIL import Image
from google import genai
import os
import json
import matplotlib.pyplot as plt
import re
from huggingface_hub import hf_hub_download
import tempfile

# --- 1. CONFIGURATION & SECRETS ---
# Reading secrets from Hugging Face Environment Variables
GOOGLE_API_KEY = os.environ.get("GOOGLE_API_KEY")
HF_TOKEN = os.environ.get("HF_TOKEN")

# Model Configuration
MODEL_REPO = "youkii-xr/hieroglyphic-detection"
MODEL_FILENAME = "best.pt"
JSON_DB_PATH = "gardiner_codes.json"

# Configure YOLO to use a writable temp directory in HF Spaces
os.environ["YOLO_CONFIG_DIR"] = "/tmp/Ultralytics"

# --- 2. DATA LOADING (GARDINER CODES) ---

def load_gardiner_database():
    """Loads the Gardiner Code database from the external JSON file."""
    if os.path.exists(JSON_DB_PATH):
        try:
            print(f"System: Loading Gardiner codes from {JSON_DB_PATH}...")
            with open(JSON_DB_PATH, "r", encoding='utf-8') as f:
                return json.load(f)
        except Exception as e:
            print(f"โš ๏ธ Error reading JSON: {e}")
            return {}
    else:
        print(f"โš ๏ธ Warning: {JSON_DB_PATH} not found. Gardiner Code tab will be empty.")
        return {}

gardiner_data = load_gardiner_database()
gardiner_map = {k: v.get("Description", k) for k, v in gardiner_data.items()}

# --- 3. HTML TABLE GENERATOR ---

CATEGORIES = {
    'A': "Men & Monarchs", 'B': "Women & Human Activities", 'C': "Deities",
    'D': "Parts of Human Body", 'E': "Mammals", 'F': "Parts of Mammals",
    'G': "Birds", 'H': "Parts of Birds", 'I': "Reptiles & Amphibians",
    'K': "Fishes", 'L': "Invertebrates", 'M': "Trees & Plants",
    'N': "Sky, Earth, Water", 'O': "Buildings", 'P': "Ships",
    'Q': "Furniture", 'R': "Temple Furniture", 'S': "Crowns & Dress",
    'T': "Warfare & Hunting", 'U': "Agriculture & Crafts", 'V': "Rope & Baskets",
    'W': "Vessels", 'X': "Loaves & Cakes", 'Y': "Writings & Games",
    'Z': "Strokes & Figures", 'Aa': "Unclassified"
}

def generate_gardiner_html():
    if not gardiner_data:
        return "<tr><td colspan='4'>No data loaded. Please upload gardiner_codes.json to the Space.</td></tr>"

    html_rows = ""
    grouped = {}
    for key, data in gardiner_data.items():
        match = re.match(r"([A-Za-z]+)", data.get("Code", key))
        prefix = match.group(1) if match else "Unk"
        if prefix not in grouped: grouped[prefix] = []
        grouped[prefix].append(data)
    
    sorted_prefixes = sorted(grouped.keys(), key=lambda x: (len(x), x))
    
    for prefix in sorted_prefixes:
        cat_name = CATEGORIES.get(prefix, f"Category {prefix}")
        html_rows += f"<tr><td colspan='4' class='category-header'>{cat_name}</td></tr>"
        items = sorted(grouped[prefix], key=lambda x: int(re.search(r'\d+', x.get("Code", "0")).group()) if re.search(r'\d+', x.get("Code", "0")) else 0)
        
        for item in items:
            html_rows += f"""
            <tr>
                <td style="font-weight:bold; color: #fff;">{item.get("Code", "?")}</td>
                <td>{item.get("Description", "-")}</td>
                <td style="font-family:serif; font-size:1.1em;">{item.get("Transliteration", "-")}</td>
                <td><span class="type-badge">{item.get("Type", "-")}</span></td>
            </tr>
            """
    return html_rows

GARDINER_TABLE_CONTENT = generate_gardiner_html()

# --- 4. LOAD MODEL (FROM PRIVATE REPO) ---

print("System: Initializing Rosetta Decoder Core...")
try:
    model_path = hf_hub_download(
        repo_id=MODEL_REPO,
        filename=MODEL_FILENAME,
        token=HF_TOKEN
    )
    model = YOLO(model_path)
    print("System: Model loaded successfully.")
except Exception as e:
    print(f"Error loading model: {e}")
    model = None

# --- 5. CORE PROCESSING LOGIC ---

def clean_ai_text(text):
    text = re.sub(r'^\d+[\.\)]\s*', '', text)
    text = text.replace("**", "")
    return text

def generate_analytics_plots(detections, img_width, img_height):
    if not detections: return None
    
    codes = [d['code'] for d in detections]
    confs = [d['confidence'] for d in detections]
    x_centers = [d['box'][0] + (d['box'][2] - d['box'][0])/2 for d in detections]
    y_centers = [d['box'][1] + (d['box'][3] - d['box'][1])/2 for d in detections]
    
    fig = plt.figure(figsize=(10, 15))
    fig.patch.set_facecolor('#0f0f23') 
    
    ax1 = plt.subplot(3, 1, 1)
    unique_codes = list(set(codes))
    counts = [codes.count(c) for c in unique_codes]
    ax1.bar(unique_codes, counts, color='#d4af37')
    ax1.set_title('Symbol Frequency', color='white', fontsize=12, pad=10)
    ax1.tick_params(colors='white')
    ax1.set_facecolor('none')
    for spine in ax1.spines.values(): spine.set_color('#d4af37')

    ax2 = plt.subplot(3, 1, 2)
    ax2.scatter(range(len(confs)), confs, color='#d4af37', alpha=0.7, s=50)
    ax2.set_title('AI Confidence Levels', color='white', fontsize=12, pad=10)
    ax2.set_ylim(0, 1.1)
    ax2.tick_params(colors='white')
    ax2.set_facecolor('none')
    for spine in ax2.spines.values(): spine.set_color('#d4af37')

    ax3 = plt.subplot(3, 1, 3)
    h = ax3.hist2d(x_centers, y_centers, bins=[20, 20], range=[[0, img_width], [0, img_height]], cmap='inferno')
    ax3.set_title('Glyph Spatial Heatmap', color='white', fontsize=12, pad=10)
    ax3.set_xlim(0, img_width)
    ax3.set_ylim(img_height, 0)
    ax3.tick_params(colors='white')
    cbar = plt.colorbar(h[3], ax=ax3)
    cbar.ax.yaxis.set_tick_params(color='white')
    plt.setp(plt.getp(cbar.ax.axes, 'yticklabels'), color='white')

    plt.tight_layout(pad=4.0)
    return fig

def get_ai_translation_all_styles(keywords_list):
    if not GOOGLE_API_KEY:
        return "โš ๏ธ Error: Google API Key not found in Secrets.", "Error"
    if not keywords_list:
        return "No hieroglyphs detected.", "No data."

    keywords_str = ", ".join(keywords_list)
    prompt = f"""
    You are an expert Egyptologist AI. I have detected these symbols: [{keywords_str}].
    Please provide 2 distinct outputs separated by "|||SEPARATOR|||".
    1. A Mystical Story: Highly atmospheric, sounding like an ancient prophecy. 
       Do NOT number this section. Use HTML tags <b> for bolding keywords and <br> for new lines.
    2. An Academic Translation: Direct, linguistic, focusing on grammar. Use standard text.
    """
    try:
        client = genai.Client(api_key=GOOGLE_API_KEY)
        response = client.models.generate_content(model="gemini-2.5-flash", contents=prompt)
        parts = response.text.split("|||SEPARATOR|||")
        if len(parts) < 2: return clean_ai_text(response.text), "Could not parse academic style."
        return clean_ai_text(parts[0].strip()), clean_ai_text(parts[1].strip())
    except Exception as e:
        return f"Error: {str(e)}", "Error"

def process_pipeline(image, conf_threshold):
    if image is None: return None, "", "", None, "", None, []
    if model is None: return None, "Error: Model not loaded.", "", None, "", None, []

    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])
        img_w, img_h = image.size
        
        detections = []
        unique_codes = set()
        crops = []
        
        for box in results[0].boxes:
            if box.cls.numel() > 0:
                cls_id = int(box.cls[0])
                if 0 <= cls_id < len(model.names):
                    code = model.names[cls_id]
                    conf = float(box.conf[0])
                    unique_codes.add(code)
                    xyxy = box.xyxy[0].tolist()
                    detections.append({"code": code, "confidence": round(conf, 2), "box": xyxy})
                    
                    crop_img = image.crop((xyxy[0], xyxy[1], xyxy[2], xyxy[3]))
                    crops.append((crop_img, f"{code}\n({int(conf*100)}%)"))

        mapped_words = [gardiner_map.get(code, f"[{code}]") for code in unique_codes]
        analytics_plot = generate_analytics_plots(detections, img_w, img_h)
        mystical, academic = get_ai_translation_all_styles(mapped_words)
        text_report = f"Total Symbols: {len(detections)}\nUnique Codes: {', '.join(unique_codes)}"
        
        formatted_mystical = f"""<div class="mystical-container"><h3>โœจ THE ANCIENT WHISPER</h3><p>{mystical}</p></div>"""
        json_output = {"count": len(detections), "detections": detections}

        return annotated_image, formatted_mystical, academic, analytics_plot, text_report, json_output, crops

    except Exception as e:
        return None, f"System Failure: {str(e)}", "", None, str(e), None, []

# --- 6. UI STYLING ---

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, .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;
    --border-color: #d4af37;
    --btn-grad: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
    --info-bg: rgba(212, 175, 55, 0.08); 
    --info-border: #d4af37;
    --glow-color: rgba(212, 175, 55, 0.4);
}}

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;
    --text-accent: #8b4513 !important;
    --border-color: #8b4513 !important;
    --btn-grad: linear-gradient(135deg, #cd853f 0%, #8b4513 100%) !important;
    --info-bg: rgba(139, 69, 19, 0.05) !important; 
    --info-border: #8b4513 !important;
    --glow-color: rgba(139, 69, 19, 0.3) !important;
    color: var(--text-primary) !important;
}}

body, .gradio-container {{
    background: var(--bg-gradient) !important;
    font-family: 'Cairo', sans-serif !important;
    color: var(--text-primary) !important;
    cursor: {cursor_url} 16 16, auto !important; 
    transition: background 0.5s ease;
}}

.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); }}
@keyframes fadeDust {{ 0% {{ opacity: 1; transform: scale(1); }} 100% {{ opacity: 0; transform: scale(0); }} }}

button, a, .cursor-pointer {{ cursor: {cursor_url} 16 16, pointer !important; }}
.tabs button {{ padding: 5px 10px !important; font-size: 14px !important; min-width: auto !important; }}

.card {{ background: var(--card-bg) !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.1); backdrop-filter: blur(12px); margin-bottom: 24px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }}
.card:hover {{ transform: translateY(-4px); border-color: var(--border-color) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 0 20px var(--glow-color); }}

.card-title {{ font-family: 'Cairo', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-accent) !important; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid rgba(128,128,128, 0.2); padding-bottom: 15px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; }}
.guide-step {{ background: rgba(255, 255, 255, 0.03); border-left: 4px solid #d4af37; padding: 16px; margin-bottom: 16px; border-radius: 0 6px 6px 0; }}
.step-title {{ color: #d4af37; font-family: 'Space Mono', monospace; font-weight: bold; display: block; margin-bottom: 8px; font-size: 14px; }}
.path-highlight {{ background: rgba(212, 175, 55, 0.15); border: 1px solid #d4af37; padding: 2px 6px; border-radius: 4px; color: #fff; font-family: 'Space Mono', monospace; }}
code {{ font-family: 'Space Mono', monospace; background: rgba(0,0,0,0.3); padding: 2px 5px; border-radius: 4px; color: #e0e7ff; }}

.gardiner-table {{ width: 100%; border-collapse: collapse; font-family: 'Space Mono', monospace; font-size: 13px; margin-top: 10px; border: 1px solid #d4af37; }}
.gardiner-table th {{ color: #ffffff; text-align: left; padding: 12px; border-bottom: 2px solid #d4af37; text-transform: uppercase; letter-spacing: 1px; background: rgba(212, 175, 55, 0.1); }}
.gardiner-table td {{ padding: 10px; border-bottom: 1px solid rgba(212, 175, 55, 0.2); color: #e0e0e0; }}
.gardiner-table tr:hover {{ background: rgba(212, 175, 55, 0.1); }}
.category-header {{ background: rgba(212, 175, 55, 0.2); color: #d4af37; font-weight: bold; text-align: center; padding: 8px; text-transform: uppercase; letter-spacing: 2px; }}
.type-badge {{ border: 1px solid #d4af37; color: #d4af37; padding: 2px 6px; border-radius: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }}

.mystical-container {{ font-family: 'Cairo', serif; font-size: 18px; line-height: 1.8; color: #fff8e1; padding: 20px; border: 1px solid var(--border-color); background: rgba(212, 175, 55, 0.05); border-radius: 8px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }}
.mystical-container:hover {{ transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 0 20px var(--glow-color); }}
.mystical-container h3 {{ color: var(--text-accent); text-align: center; border-bottom: 1px dashed var(--border-color); padding-bottom: 10px; }}
.mystical-container b {{ color: #d4af37; text-shadow: 0 0 5px rgba(212, 175, 55, 0.5); }}
.scrollable-box textarea {{ overflow-y: auto !important; max-height: 400px !important; background-color: rgba(0,0,0,0.3) !important; }}
button.primary-btn {{ background: var(--btn-grad) !important; border: 1px solid var(--border-color) !important; color: #000 !important; font-weight: 700 !important; font-size: 16px !important; }}
.gradio-image, .gradio-json {{ background: transparent !important; border: none !important; }}
"""

header_html = """
<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" />
            <path d="M7 7h10" />
            <path d="M7 12h10" />
            <path d="M7 17h10" />
            <circle cx="12" cy="12" r="3" stroke="#d4af37" fill="none"/>
        </svg>
        <div>
            <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;">HIEROGLYPHIC DETECTOR AND TRANSLATOR</p>
        </div>
    </div>
</div>
"""

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: 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, context-aware translation of Pharaonic wisdom.</p></div>
"""

guide_html = """
<div class="card" style="border-color: #d4af37;">
    <div class="card-title" style="color: #d4af37;">๐Ÿค– CLAUDE DESKTOP SETUP GUIDE</div>
    <div class="guide-step"><span class="step-title">STEP 0: PREREQUISITE</span><p>Ensure you have <b>Node.js</b> installed (Required for the `npx` command used by MCP).</p><p><a href="https://nodejs.org/" target="_blank" style="color: #d4af37; text-decoration: underline;">Download Node.js Official Website</a></p></div>
    <div class="guide-step"><span class="step-title">STEP 1: PREPARE WORKSPACE</span><p>Claude is sandboxed. It cannot see your Desktop. You must create a bridge.</p>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="guide-step"><span class="step-title">STEP 2: VERIFY PYTHON</span><p>The code below assumes Python is at: <code>C:\\Python313\\python.exe</code></p><p><b>Check your path:</b> Open CMD and type <code>where python</code>.</p><p><i>Note: If your path is different, replace the path in the JSON code block below before copying.</i></p></div>
    <div class="guide-step"><span class="step-title">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-title">STEP 4: USAGE</span><p>Prompt Claude: <i>"Analyze the image at C:\\Claude_Work\\my_tablet.jpg"</i></p></div>
</div>
"""

claude_json_content = """{ "mcpServers": { "gradio": { "command": "npx", "args": [ "mcp-remote", "https://youkii-xr-hieroglyph-mcp-server.hf.space/gradio_api/mcp/", "--transport", "streamable-http" ] }, "upload_helper": { "command": "C:\\\\Python313\\\\python.exe", "args": [ "-m", "gradio", "upload-mcp", "https://youkii-xr-hieroglyph-mcp-server.hf.space/", "C:\\\\Claude_Work" ] } } }"""

trail_script = """<script>document.addEventListener('DOMContentLoaded', () => { document.addEventListener('mousemove', (e) => { if (Math.random() > 0.7) 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); setTimeout(() => dust.remove(), 600); }); });</script>"""

# --- 7. MAIN APP ASSEMBLY ---

with gr.Blocks(title="Rosetta Decoder Ultimate") as demo:
    gr.HTML(f"<style>{custom_css}</style>")
    gr.HTML(trail_script)
    
    with gr.Row(elem_classes="header-row"):
        with gr.Column(scale=4): gr.HTML(header_html)
        with gr.Column(scale=1): btn_toggle = gr.Button("๐ŸŒ— Day / Night")

    with gr.Tabs():
        # TAB 1: DECODER
        with gr.TabItem("๐Ÿ”ฎ DECODER WORKSTATION"):
            with gr.Row():
                with gr.Column(scale=1):
                    gr.HTML('<div class="card"><div class="card-title">Input Source</div>')
                    with gr.Tabs():
                        with gr.TabItem("๐Ÿ“œ Upload File"):
                            img_upload = gr.Image(type="pil", sources=["upload", "clipboard"], label="Upload", height=280)
                            slider_conf = gr.Slider(0.1, 1.0, 0.25, label="Scan Sensitivity")
                            btn_upload = gr.Button("โœจ START DECODING", elem_classes="primary-btn")
                        with gr.TabItem("๐ŸŽฅ Live Camera"):
                            img_cam = gr.Image(type="pil", sources=["webcam"], label="Camera", height=280)
                            slider_conf_cam = gr.Slider(0.1, 1.0, 0.25, label="Scan Sensitivity")
                            btn_cam = gr.Button("โœจ START DECODING", elem_classes="primary-btn")
                    gr.HTML('</div>')

                with gr.Column(scale=1):
                    gr.HTML('<div class="card"><div class="card-title">Result</div>')
                    with gr.Tabs():
                        with gr.TabItem("๐Ÿ”ฎ Mystical"): out_mystical = gr.HTML(label="Prophecy")
                        with gr.TabItem("๐Ÿ›๏ธ Academic"): out_academic = gr.Textbox(label="Scientific Translation", lines=15, show_label=False, elem_classes="scrollable-box")
                        with gr.TabItem("๐Ÿ–ผ๏ธ Visuals"):
                            out_image = gr.Image(label="Annotated Result", interactive=False)
                            out_gallery = gr.Gallery(label="Extracted Glyphs", columns=4, height="auto")
                        with gr.TabItem("๐Ÿ“Š Analytics"): out_plot = gr.Plot(label="Analysis Charts")
                        with gr.TabItem("๐Ÿ› ๏ธ Logs"):
                            out_report = gr.Textbox(label="Detection Log", lines=5)
                            out_json = gr.JSON(label="JSON Data")
                    gr.HTML('</div>')

        # TAB 2: ABOUT
        with gr.TabItem("๐Ÿ“œ VISION & ABOUT"): gr.HTML(mission_html)

        # TAB 3: SETUP
        with gr.TabItem("๐Ÿค– SYSTEM SETUP"):
            gr.HTML(guide_html)
            gr.Code(value=claude_json_content, language="json", label="claude_desktop_config.json", interactive=False, lines=15)

        # TAB 4: GARDINER CODES
        with gr.TabItem("๐“€€ GARDINER CODES"):
            gr.HTML(f"""<div class="card"><div class="card-title">๐Ÿ“œ SUPPORTED GARDINER CODES</div><div style="overflow-x: auto; max-height: 600px; overflow-y: auto;"><table class="gardiner-table"><thead><tr><th>Code</th><th>Description</th><th>Transliteration</th><th>Type</th></tr></thead><tbody>{GARDINER_TABLE_CONTENT}</tbody></table></div></div>""")

    gr.HTML('<div style="text-align: center; color: var(--text-accent); opacity: 0.5; padding: 20px;"></div>')

    # Events
    btn_toggle.click(None, None, None, js="() => { document.body.classList.toggle('light-mode'); const container = document.querySelector('.gradio-container'); if(container) container.classList.toggle('light-mode'); }")
    outputs = [out_image, out_mystical, out_academic, out_plot, out_report, out_json, out_gallery]
    btn_upload.click(fn=process_pipeline, inputs=[img_upload, slider_conf], outputs=outputs)
    btn_cam.click(fn=process_pipeline, inputs=[img_cam, slider_conf_cam], outputs=outputs)

if __name__ == "__main__":
    demo.launch(mcp_server=True, ssr_mode=False, allowed_paths=["/tmp", "."])