Redesign Space interface

README.md

@@ -1,7 +1,7 @@
 ---
 title: Image Generator for HTML Games
 emoji: 🎮
-colorFrom: blue
+colorFrom: indigo
 colorTo: green
 sdk: gradio
 sdk_version: 6.14.0

app.py

@@ -2385,84 +2385,253 @@ def check_hf_token() -> str:
         return f"HF_TOKEN check failed: {short_error(exc)}"
 
 
+APP_CSS = """
+:root {
+  --canvas: #070a12;
+  --surface: #0d1320;
+  --surface-raised: #111a2b;
+  --border: #25324a;
+  --border-bright: #344766;
+  --text: #f4f7fb;
+  --muted: #9aa8bd;
+  --accent: #72f2cf;
+  --accent-strong: #42dbb5;
+  --violet: #a89bff;
+}
+
+.gradio-container {
+  background:
+    radial-gradient(circle at 8% 0%, rgba(82, 65, 170, .22), transparent 31rem),
+    radial-gradient(circle at 92% 12%, rgba(26, 173, 145, .12), transparent 26rem),
+    var(--canvas) !important;
+  color: var(--text) !important;
+  max-width: none !important;
+  padding: 0 !important;
+}
+
+.app-shell { max-width: 1440px; margin: 0 auto; padding: 28px 28px 64px; }
+
+.hero {
+  position: relative;
+  overflow: hidden;
+  padding: 34px 38px;
+  margin-bottom: 22px;
+  border: 1px solid var(--border-bright);
+  border-radius: 24px;
+  background: linear-gradient(135deg, rgba(20, 30, 51, .96), rgba(11, 17, 29, .95));
+  box-shadow: 0 22px 60px rgba(0, 0, 0, .25);
+}
+
+.hero::after {
+  content: "";
+  position: absolute;
+  right: -70px;
+  top: -100px;
+  width: 320px;
+  height: 320px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(114, 242, 207, .18), transparent 66%);
+}
+
+.eyebrow {
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .16em;
+  text-transform: uppercase;
+}
+
+.hero h1 {
+  max-width: 820px;
+  margin: 10px 0 12px;
+  color: #fff;
+  font-size: clamp(34px, 5vw, 62px);
+  line-height: .98;
+  letter-spacing: -.045em;
+}
+
+.hero p { max-width: 760px; margin: 0; color: #b9c5d7; font-size: 17px; line-height: 1.6; }
+.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
+.hero-chips span {
+  padding: 7px 11px;
+  border: 1px solid #30415d;
+  border-radius: 999px;
+  background: rgba(8, 13, 23, .65);
+  color: #cfdaea;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.step-heading { margin: 28px 0 12px; }
+.step-heading span { color: var(--accent); font: 800 12px/1 sans-serif; letter-spacing: .14em; text-transform: uppercase; }
+.step-heading h2 { margin: 7px 0 3px; color: var(--text); font-size: 24px; letter-spacing: -.025em; }
+.step-heading p { margin: 0; color: var(--muted); font-size: 14px; }
+
+.panel {
+  border: 1px solid var(--border) !important;
+  border-radius: 18px !important;
+  background: linear-gradient(180deg, rgba(17, 26, 43, .92), rgba(12, 18, 31, .96)) !important;
+  box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
+  padding: 18px !important;
+}
+
+.gradio-container label, .gradio-container .label-wrap { color: #dce5f2 !important; font-weight: 700 !important; }
+.gradio-container .info { color: var(--muted) !important; }
+.gradio-container textarea,
+.gradio-container input,
+.gradio-container select,
+.gradio-container [role="listbox"] {
+  color: var(--text) !important;
+  background: #090f1b !important;
+  border-color: var(--border) !important;
+}
+.gradio-container textarea:focus,
+.gradio-container input:focus { border-color: var(--accent-strong) !important; box-shadow: 0 0 0 2px rgba(66, 219, 181, .12) !important; }
+
+#generate-button {
+  min-height: 52px;
+  border: 0 !important;
+  border-radius: 12px !important;
+  background: linear-gradient(135deg, var(--accent), #91f6a9) !important;
+  color: #06110e !important;
+  font-weight: 850 !important;
+  box-shadow: 0 10px 28px rgba(66, 219, 181, .18);
+}
+#generate-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
+.secondary-action { border-color: var(--border-bright) !important; background: #151f31 !important; color: #e7eef8 !important; }
+.status-card { margin-top: 10px; padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: 8px; background: rgba(114, 242, 207, .06); }
+.status-card p { margin: 0; color: #c9d6e6; }
+.gallery-panel .grid-wrap { background: transparent !important; }
+.preview-panel iframe { border: 1px solid var(--border-bright) !important; border-radius: 12px !important; }
+.diagnostics { margin-top: 20px; border-color: var(--border) !important; background: var(--surface) !important; }
+.pipeline-note { color: var(--muted); font-size: 13px; }
+.footer-note { margin-top: 28px; color: #718096; text-align: center; font-size: 12px; }
+
+@media (max-width: 780px) {
+  .app-shell { padding: 14px 14px 42px; }
+  .hero { padding: 26px 22px; border-radius: 18px; }
+  .hero h1 { font-size: 38px; }
+  .hero p { font-size: 15px; }
+  .panel { padding: 13px !important; }
+}
+"""
+
+
 with gr.Blocks(title="Image Generator for HTML Games") as demo:
-    gr.Markdown(
-        "# Image Generator for HTML Games\n"
-        "Generate game assets and embed them only when the submitted game exposes deterministic "
-        "`GAME_ASSETS.<role>` hooks or exact role filenames such as `sprite_player.png`. "
-        "Primitive canvas geometry is preserved and never silently guessed."
-    )
-    gr.Markdown(model_configuration_summary())
+    with gr.Column(elem_classes=["app-shell"]):
+        gr.HTML(
+            """
+            <header class="hero">
+              <div class="eyebrow">Game asset studio</div>
+              <h1>Turn your game code into a visual world.</h1>
+              <p>Describe the art direction, generate camera-aware assets, and embed them into deterministic image hooks—without rewriting your game logic.</p>
+              <div class="hero-chips">
+                <span>Camera-aware prompts</span><span>Game-ready PNGs</span><span>Safe code integration</span>
+              </div>
+            </header>
+            """
+        )
 
-    generation_state = gr.State({})
+        generation_state = gr.State({})
 
-    with gr.Row():
-        with gr.Column(scale=1):
-            roles = gr.Textbox(
-                label="Image roles to generate",
-                lines=8,
-                placeholder=ROLE_PLACEHOLDER,
-                value=DEFAULT_ROLES,
-                info="One per line: role: image description. Example: player: blue robot hero",
-            )
-            game_type = gr.Dropdown(
-                label="Game type",
-                choices=[
-                    "Top-down action / RPG",
-                    "Platformer / side-scroller",
-                    "Isometric strategy / simulation",
-                    "First-person",
-                    "Card / board game",
-                    "Other / custom",
-                ],
-                value="Top-down action / RPG",
-            )
-            perspective = gr.Dropdown(
-                label="Camera perspective",
-                choices=[
-                    "Top-down / overhead",
-                    "Side view",
-                    "Isometric 3/4 view",
-                    "First-person",
-                    "Front-facing",
-                    "Auto-detect from code",
-                ],
-                value="Top-down / overhead",
-            )
-            theme = gr.Textbox(
-                label="Theme and shared visual style",
-                lines=2,
-                placeholder="Describe the setting, palette, medium, mood, and constraints.",
-            )
-            generate_btn = gr.Button("Generate Images + Embed Game", variant="primary")
-            status = gr.Markdown("Ready.")
-            token_btn = gr.Button("Check HF Token")
-            token_status = gr.Markdown("")
-            gallery = gr.Gallery(label="Generated assets", columns=2, height=300)
-            selected_role = gr.Dropdown(
-                label="Asset to regenerate",
-                choices=[],
-                interactive=True,
-            )
-            regenerate_btn = gr.Button("Regenerate selected asset")
-            approved_roles = gr.CheckboxGroup(
-                label="Visually approved assets",
-                choices=[],
-                info="Approve assets only after checking subject, perspective, style, and transparency.",
-            )
+        gr.HTML(
+            '<div class="step-heading"><span>Step 01</span><h2>Set up your generation</h2>'
+            '<p>Paste the game first, then define the assets and shared art direction.</p></div>'
+        )
+        with gr.Row(equal_height=False):
+            with gr.Column(scale=3, elem_classes=["panel"]):
+                html_input = gr.Textbox(
+                    label="Original HTML game code",
+                    lines=22,
+                    placeholder="Paste your full HTML game code here.",
+                    value=STARTER_HTML,
+                    info="Use GAME_ASSETS.<role> or sprite_<role>.png for deterministic embedding.",
+                )
+            with gr.Column(scale=2, elem_classes=["panel"]):
+                roles = gr.Textbox(
+                    label="Assets to create",
+                    lines=8,
+                    placeholder=ROLE_PLACEHOLDER,
+                    value=DEFAULT_ROLES,
+                    info="One per line: role: image description",
+                )
+                with gr.Row():
+                    game_type = gr.Dropdown(
+                        label="Game type",
+                        choices=[
+                            "Top-down action / RPG",
+                            "Platformer / side-scroller",
+                            "Isometric strategy / simulation",
+                            "First-person",
+                            "Card / board game",
+                            "Other / custom",
+                        ],
+                        value="Top-down action / RPG",
+                    )
+                    perspective = gr.Dropdown(
+                        label="Camera perspective",
+                        choices=[
+                            "Top-down / overhead",
+                            "Side view",
+                            "Isometric 3/4 view",
+                            "First-person",
+                            "Front-facing",
+                            "Auto-detect from code",
+                        ],
+                        value="Top-down / overhead",
+                    )
+                theme = gr.Textbox(
+                    label="Theme and shared visual style",
+                    lines=3,
+                    placeholder="Example: moonlit forest, indigo and moss palette, crisp pixel art, readable silhouettes",
+                )
+                generate_btn = gr.Button(
+                    "Generate assets + build game",
+                    variant="primary",
+                    elem_id="generate-button",
+                )
+                status = gr.Markdown("Ready for your game code.", elem_classes=["status-card"])
 
-        with gr.Column(scale=2):
-            html_input = gr.Textbox(
-                label="Original HTML game code",
-                lines=18,
-                placeholder="Paste your full HTML game code here.",
-                value=STARTER_HTML,
-            )
+        gr.HTML(
+            '<div class="step-heading"><span>Step 02</span><h2>Review generated assets</h2>'
+            '<p>Check subject, perspective, style, and transparency before approving an asset.</p></div>'
+        )
+        with gr.Row(equal_height=False):
+            with gr.Column(scale=3, elem_classes=["panel", "gallery-panel"]):
+                gallery = gr.Gallery(label="Generated assets", columns=2, height=420)
+            with gr.Column(scale=2, elem_classes=["panel"]):
+                selected_role = gr.Dropdown(
+                    label="Asset to regenerate",
+                    choices=[],
+                    interactive=True,
+                )
+                regenerate_btn = gr.Button(
+                    "Regenerate selected asset",
+                    elem_classes=["secondary-action"],
+                )
+                approved_roles = gr.CheckboxGroup(
+                    label="Visually approved assets",
+                    choices=[],
+                    info="Approval is a manual review marker; automated checks cannot prove artistic correctness.",
+                )
+
+        gr.HTML(
+            '<div class="step-heading"><span>Step 03</span><h2>Play and export</h2>'
+            '<p>Test the integrated game, then copy the rewritten HTML when it looks right.</p></div>'
+        )
+        with gr.Column(elem_classes=["panel", "preview-panel"]):
+            preview = gr.HTML("")
+        with gr.Column(elem_classes=["panel"]):
             output_code = gr.Code(
                 label="Rewritten HTML with embedded images",
                 language="html",
                 lines=18,
             )
+
+        with gr.Accordion("Generation details and diagnostics", open=False, elem_classes=["diagnostics"]):
+            gr.Markdown(model_configuration_summary(), elem_classes=["pipeline-note"])
+            token_btn = gr.Button("Check HF token", elem_classes=["secondary-action"])
+            token_status = gr.Markdown("")
             prompt_preview = gr.Textbox(
                 label="Interpreted image prompts",
                 lines=8,
@@ -2479,42 +2648,43 @@ with gr.Blocks(title="Image Generator for HTML Games") as demo:
                 interactive=False,
             )
 
-    gr.Markdown("## Game preview")
-    preview = gr.HTML("")
-
-    generate_btn.click(
-        fn=generate_images_and_game,
-        inputs=[html_input, roles, game_type, perspective, theme],
-        outputs=[
-            output_code,
-            status,
-            gallery,
-            prompt_preview,
-            model_report,
-            quality_report,
-            preview,
-            generation_state,
-            selected_role,
-            approved_roles,
-        ],
-    )
-    regenerate_btn.click(
-        fn=regenerate_selected_asset,
-        inputs=[generation_state, selected_role, approved_roles],
-        outputs=[
-            output_code,
-            status,
-            gallery,
-            prompt_preview,
-            model_report,
-            quality_report,
-            preview,
-            generation_state,
-            approved_roles,
-        ],
-    )
-    token_btn.click(fn=check_hf_token, inputs=None, outputs=token_status)
+        gr.HTML(
+            '<div class="footer-note">Deterministic hooks only · Game logic remains untouched · Human visual review required</div>'
+        )
+
+        generate_btn.click(
+            fn=generate_images_and_game,
+            inputs=[html_input, roles, game_type, perspective, theme],
+            outputs=[
+                output_code,
+                status,
+                gallery,
+                prompt_preview,
+                model_report,
+                quality_report,
+                preview,
+                generation_state,
+                selected_role,
+                approved_roles,
+            ],
+        )
+        regenerate_btn.click(
+            fn=regenerate_selected_asset,
+            inputs=[generation_state, selected_role, approved_roles],
+            outputs=[
+                output_code,
+                status,
+                gallery,
+                prompt_preview,
+                model_report,
+                quality_report,
+                preview,
+                generation_state,
+                approved_roles,
+            ],
+        )
+        token_btn.click(fn=check_hf_token, inputs=None, outputs=token_status)
 
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(css=APP_CSS)