Switch to Gradio app for direct external viewing

README.md

@@ -1,9 +1,10 @@
 ---
 title: FigMirror Code Augmentation 10 Cases
-emoji: 📊
 colorFrom: green
 colorTo: gray
-sdk: static
+sdk: gradio
+sdk_version: 5.33.0
+app_file: app.py
 pinned: false
 license: mit
 ---
@@ -14,5 +15,3 @@ Each case compares two code-generated figures:
 
 - left: fresh render from unchanged `original.py`
 - right: fresh render from `augmented.py`, preserving the same data/chart topology while applying FigMirror-style presentation improvements
-
-Open `index.html` in the Space app view.

app.py

@@ -0,0 +1,75 @@
+from __future__ import annotations
+
+import base64
+from pathlib import Path
+import html
+import gradio as gr
+
+ROOT = Path(__file__).resolve().parent
+REPO = "https://huggingface.co/spaces/zcahjl3/figmirror-code-aug10"
+
+CSS = """
+<style>
+body { margin: 0; }
+.fm-wrap { font-family: Arial, sans-serif; color: #172033; background: #f5f6f8; padding: 0 0 28px; }
+.fm-header { background: #fff; border-bottom: 1px solid #d9dee7; padding: 22px 28px; }
+.fm-header h1 { margin: 0 0 8px; font-size: 25px; line-height: 1.2; }
+.fm-header p { margin: 0; color: #667085; font-size: 13px; line-height: 1.45; max-width: 1050px; }
+.fm-main { padding: 20px 28px; display: grid; gap: 18px; }
+.fm-card { background: #fff; border: 1px solid #d9dee7; border-radius: 8px; padding: 14px; }
+.fm-card h2 { margin: 0 0 10px; font-size: 15px; }
+.fm-card img { width: 100%; max-height: 720px; object-fit: contain; display: block; border: 1px solid #e5e7eb; background: #fff; }
+.fm-card p { margin: 8px 0; color: #667085; font-size: 12px; line-height: 1.45; }
+.fm-links { display: flex; flex-wrap: wrap; gap: 8px 14px; }
+.fm-links a { color: #0b61a4; text-decoration: none; font-size: 12px; }
+.fm-links a:hover { text-decoration: underline; }
+code { background: #f2f4f7; padding: 1px 4px; border-radius: 4px; }
+</style>
+"""
+
+
+def image_data(path: Path) -> str:
+    data = base64.b64encode(path.read_bytes()).decode("ascii")
+    return f"data:image/png;base64,{data}"
+
+
+def rel_url(slug: str, filename: str) -> str:
+    return f"{REPO}/resolve/main/{slug}/{filename}"
+
+
+def build_html() -> str:
+    cases = sorted(p for p in ROOT.iterdir() if p.is_dir() and (p / "comparison.png").exists())
+    cards = []
+    for case in cases:
+        slug = case.name
+        parts = slug.split("_", 2)
+        chart_type = html.escape(parts[1] if len(parts) > 1 else slug)
+        label = html.escape(parts[2] if len(parts) > 2 else slug)
+        img = image_data(case / "comparison.png")
+        cards.append(f"""
+<article class="fm-card">
+  <h2>{chart_type} &middot; {label}</h2>
+  <img src="{img}" alt="Original code render versus data-preserving FigMirror code augmentation">
+  <p>Both sides are generated from code. Left: unchanged <code>original.py</code>. Right: <code>augmented.py</code>, preserving the same data and chart topology while improving figure aesthetics.</p>
+  <p class="fm-links">
+    <a href="{rel_url(slug, 'original_render.png')}" target="_blank">original render</a>
+    <a href="{rel_url(slug, 'original.py')}" target="_blank">original code</a>
+    <a href="{rel_url(slug, 'augmented_render.png')}" target="_blank">augmented render</a>
+    <a href="{rel_url(slug, 'augmented.py')}" target="_blank">augmented code</a>
+    <a href="{rel_url(slug, 'comparison.png')}" target="_blank">comparison PNG</a>
+  </p>
+</article>""")
+    return CSS + f"""
+<div class="fm-wrap">
+  <header class="fm-header">
+    <h1>FigMirror Data-Preserving Code Augmentation - 10 Cases</h1>
+    <p>Each case compares two code-generated images. The right-hand figure is not a new task: it keeps the original data, labels, chart type/topology, and analytical relation, then applies FigMirror presentation improvements.</p>
+  </header>
+  <main class="fm-main">{''.join(cards)}</main>
+</div>"""
+
+with gr.Blocks(title="FigMirror Code Augmentation") as demo:
+    gr.HTML(build_html())
+
+if __name__ == "__main__":
+    demo.launch()