Dark mode, debug decoder key matching

app.py

@@ -185,11 +185,27 @@ def get_model():
         decoder_state = {k.replace("gcode_decoder.", ""): v for k, v in state_dict.items() 
                         if k.startswith("gcode_decoder.")}
         if decoder_state:
-            gcode_decoder.load_state_dict(decoder_state, strict=False)
-            print(f"Loaded {len(decoder_state)} decoder weights")
+            # Check what keys the model expects vs what we have
+            model_keys = set(gcode_decoder.state_dict().keys())
+            ckpt_keys = set(decoder_state.keys())
+            missing = model_keys - ckpt_keys
+            extra = ckpt_keys - model_keys
+            print(f"Decoder: model expects {len(model_keys)} keys, checkpoint has {len(ckpt_keys)}")
+            if missing:
+                print(f"Missing keys: {list(missing)[:5]}")
+            if extra:
+                print(f"Extra keys: {list(extra)[:5]}")
+            
+            # Try loading with strict=True to see errors
+            try:
+                gcode_decoder.load_state_dict(decoder_state, strict=True)
+                print(f"Loaded {len(decoder_state)} decoder weights (strict)")
+            except Exception as e:
+                print(f"Strict load failed: {e}")
+                gcode_decoder.load_state_dict(decoder_state, strict=False)
+                print(f"Loaded {len(decoder_state)} decoder weights (non-strict)")
         else:
             print("WARNING: No gcode_decoder weights found!")
-            print(f"Looking for keys starting with 'gcode_decoder.', but found: {[k for k in state_dict.keys() if 'decoder' in k.lower()][:10]}")
         
         gcode_decoder.eval()
         
@@ -291,23 +307,37 @@ def gcode_to_svg(gcode: str) -> str:
     h = BOUNDS["top"] - BOUNDS["bottom"]
     padding = 20
     
-    # Minimal monochrome styling
+    # Dark mode compatible SVG
     svg = f'''<svg xmlns="http://www.w3.org/2000/svg" 
                   viewBox="{BOUNDS["left"] - padding} {-BOUNDS["top"] - padding} {w + 2*padding} {h + 2*padding}" 
-                  style="background: #fff; width: 100%; height: 480px; border: 1px solid #e0e0e0;">
-        <rect x="{BOUNDS["left"]}" y="{-BOUNDS["top"]}" width="{w}" height="{h}" 
-              fill="#fafafa" stroke="#ccc" stroke-width="1"/>
+                  style="width: 100%; height: 480px; border: 1px solid var(--border, #e0e0e0); border-radius: 4px;">
+        <style>
+            @media (prefers-color-scheme: dark) {{
+                .bg {{ fill: #2a2b30; }}
+                .work {{ fill: #212226; stroke: #3a3b40; }}
+                .stroke {{ stroke: #e8e8e8; }}
+                .label {{ fill: #666; }}
+            }}
+            @media (prefers-color-scheme: light) {{
+                .bg {{ fill: #fff; }}
+                .work {{ fill: #fafafa; stroke: #ccc; }}
+                .stroke {{ stroke: #1a1a1a; }}
+                .label {{ fill: #999; }}
+            }}
+        </style>
+        <rect class="bg" x="{BOUNDS["left"] - padding}" y="{-BOUNDS["top"] - padding}" width="{w + 2*padding}" height="{h + 2*padding}"/>
+        <rect class="work" x="{BOUNDS["left"]}" y="{-BOUNDS["top"]}" width="{w}" height="{h}" stroke-width="1"/>
     '''
 
     for path in paths:
         if len(path) < 2:
             continue
         d = " ".join(f"{'M' if i == 0 else 'L'}{p[0]:.1f},{-p[1]:.1f}" for i, p in enumerate(path))
-        svg += f'<path d="{d}" fill="none" stroke="#000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>'
+        svg += f'<path class="stroke" d="{d}" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>'
 
     total_points = sum(len(p) for p in paths)
     svg += f'''
-        <text x="{BOUNDS["left"] + 8}" y="{-BOUNDS["top"] + 20}" fill="#999" font-family="monospace" font-size="12">
+        <text class="label" x="{BOUNDS["left"] + 8}" y="{-BOUNDS["top"] + 20}" font-family="monospace" font-size="12">
             {len(paths)} paths / {total_points} points
         </text>
     '''
@@ -394,56 +424,93 @@ def generate(prompt: str, temperature: float, max_tokens: int, num_steps: int, g
         return f"; Error: {e}", gcode_to_svg("")
 
 
-# Minimal monochrome CSS
+# Minimal monochrome CSS with dark mode
 css = """
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');
 
+:root {
+    --bg: #ffffff;
+    --bg-secondary: #fafafa;
+    --text: #1a1a1a;
+    --text-secondary: #666;
+    --border: #e0e0e0;
+    --btn-bg: #f0f0f0;
+    --btn-hover: #e0e0e0;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #212226;
+        --bg-secondary: #2a2b30;
+        --text: #e8e8e8;
+        --text-secondary: #999;
+        --border: #3a3b40;
+        --btn-bg: #3a3b40;
+        --btn-hover: #4a4b50;
+    }
+}
+
 * {
     font-family: 'IBM Plex Mono', monospace !important;
 }
 
+body, .gradio-container {
+    background: var(--bg) !important;
+    color: var(--text) !important;
+}
+
 .gradio-container {
     max-width: 900px !important;
     margin: auto;
-    background: #fff !important;
 }
 
-.gr-button-primary {
-    background: #e8e8e8 !important;
-    border: 1px solid #ccc !important;
-    color: #333 !important;
+.gr-button {
+    background: var(--btn-bg) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
     font-weight: 500 !important;
 }
 
-.gr-button-primary:hover {
-    background: #d8d8d8 !important;
+.gr-button:hover {
+    background: var(--btn-hover) !important;
 }
 
 .gr-examples {
     margin-top: 8px !important;
 }
 
-.gr-examples .gr-sample-textbox {
-    display: inline-block !important;
-    margin-right: 8px !important;
-}
-
 footer {
     display: none !important;
 }
 
-h1 {
-    font-weight: 500 !important;
-    letter-spacing: -0.02em !important;
+h1, h2, h3, p, span, label {
+    color: var(--text) !important;
 }
 
-.gr-box {
-    border-radius: 0 !important;
-    border: 1px solid #e0e0e0 !important;
+.gr-box, .gr-panel, .gr-form {
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 4px !important;
 }
 
 input, textarea {
-    border-radius: 0 !important;
+    background: var(--bg) !important;
+    color: var(--text) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 4px !important;
+}
+
+.gr-accordion {
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border) !important;
+}
+
+a {
+    color: var(--text-secondary) !important;
+}
+
+a:hover {
+    color: var(--text) !important;
 }
 """