Upload app.py with huggingface_hub

app.py

@@ -0,0 +1,442 @@
+"""Comic Book Generator — Gradio app (live-demo build).
+
+Flow for the video:
+  1. Type an idea, press Enter / Generate.
+  2. A big STOPWATCH starts (gr.Timer) and ticks live while the comic is made — Gemma
+     gatekeeps + writes a 25-page / 50-panel story, FLUX paints every panel, and the
+     latest finished panel shows as a live thumbnail.
+  3. At the end the stopwatch FREEZES on the exact generation time (no cold start, because
+     the GPUs are pre-warmed) and the full comic reader is revealed: header (with the time),
+     two image+caption panels per page, and ◀ ▶ arrows to page through all 25 pages.
+
+Run:
+    COMIC_BACKEND=mock  python app.py     # offline, no GPU
+    COMIC_BACKEND=modal python app.py     # live Gemma + FLUX on Modal (pre-warm first!)
+"""
+
+from __future__ import annotations
+
+import io
+import os
+import threading
+import time
+
+import gradio as gr
+from PIL import Image
+
+from comic import generate_comic, make_backends
+from comic.schema import PAGES, TOTAL_PANELS
+
+BACKEND = os.environ.get("COMIC_BACKEND", "mock")
+WRITER, ARTIST = make_backends(BACKEND)     # bound once; pre-warm + generation share them
+
+# Module-level timing state, polled by the gr.Timer to tick the stopwatch smoothly while
+# the (long-running) generator streams. Single-user demo -> a global is fine.
+TIMER = {"t0": None, "running": False, "final": None}
+
+
+# ── small renderers ──────────────────────────────────────────────────────────
+
+def _pil(b):
+    return Image.open(io.BytesIO(b)).convert("RGB") if b else None
+
+
+def _fmt(elapsed: float) -> str:
+    m = int(elapsed // 60)
+    s = elapsed - 60 * m
+    return f"{m}:{s:04.1f}" if m else f"{s:.1f}s"
+
+
+_INK = "#16120d"
+_PAPER2 = "#fbf6e9"
+
+
+def _clock_html(elapsed: float, running: bool) -> str:
+    col = "#e23b2e" if running else "#1f8a4c"
+    sub = "INKING YOUR COMIC…" if running else "DONE · TOTAL TIME (GPUS PRE-WARMED)"
+    return (
+        f"<div style='text-align:center;background:{_PAPER2};border:3px solid {_INK};"
+        f"border-radius:5px;box-shadow:7px 7px 0 {_INK};padding:18px 10px;margin:4px 0 8px'>"
+        f"<div style='font-family:Anton,sans-serif;font-size:62px;color:{col};line-height:1;"
+        f"letter-spacing:2px'>{_fmt(elapsed)}</div>"
+        f"<div style='font-size:12px;font-weight:700;letter-spacing:2px;color:{_INK};"
+        f"margin-top:6px'>{sub}</div></div>"
+    )
+
+
+def _progress_html(message: str, progress: float = 0.0, tone: str = "info") -> str:
+    colors = {"info": "#214bd6", "error": "#e23b2e", "refuse": "#f4ad15", "ok": "#1f8a4c"}
+    bar = max(0.0, min(1.0, progress))
+    col = colors.get(tone, "#214bd6")
+    return (
+        f"<div style='font-family:\"Spline Sans\",system-ui;color:{_INK};font-size:14px'>"
+        f"<div style='margin-bottom:7px;font-weight:600'>{message}</div>"
+        f"<div style='background:#e3d8bd;border:2px solid {_INK};border-radius:4px;height:12px;"
+        f"overflow:hidden'>"
+        f"<div style='width:{bar*100:.0f}%;height:12px;background:{col};"
+        f"transition:width .3s'></div></div></div>"
+    )
+
+
+def _title_html(title: str, logline: str = "", time_note: str = "") -> str:
+    sub = (f"<div style='font-size:14px;color:#6d6453;margin-top:6px;font-style:italic'>"
+           f"{logline}</div>" if logline else "")
+    tn = (f"<div style='display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;"
+          f"text-transform:uppercase;color:#fff;background:#1f8a4c;border:2px solid {_INK};"
+          f"box-shadow:2px 2px 0 {_INK};padding:4px 10px;margin-top:10px'>{time_note}</div>"
+          if time_note else "")
+    return (
+        f"<div style='text-align:center;padding:18px 16px;background:{_PAPER2};"
+        f"border:3px solid {_INK};border-radius:5px;box-shadow:7px 7px 0 {_INK}'>"
+        f"<div style='font-family:Anton,sans-serif;font-size:34px;letter-spacing:1px;"
+        f"text-transform:uppercase;color:{_INK};line-height:1'>{title}</div>{sub}{tn}</div>"
+    )
+
+
+def _caption_html(text: str) -> str:
+    text = text or ""
+    return (
+        f"<div style='font-family:\"Spline Sans\",system-ui;font-size:15px;line-height:1.55;"
+        f"color:{_INK};background:{_PAPER2};border:3px solid {_INK};border-radius:4px;"
+        f"box-shadow:4px 4px 0 {_INK};padding:12px 15px;margin:6px 0 14px;font-weight:500'>{text}</div>"
+    )
+
+
+def _label_html(idx: int) -> str:
+    return (f"<div style='font-family:Anton,sans-serif;font-size:20px;letter-spacing:1px;"
+            f"color:{_INK};text-align:right;padding-top:8px'>PAGE {idx + 1} / {PAGES}</div>")
+
+
+def _page_view(comic, idx: int):
+    """(img1, cap1, img2, cap2, label) for a 0-based page index."""
+    panels = comic.page_panels(idx + 1) if comic else []
+    p1 = panels[0] if len(panels) > 0 else None
+    p2 = panels[1] if len(panels) > 1 else None
+    return (
+        _pil(p1.image) if p1 else None,
+        _caption_html(p1.caption if p1 else ""),
+        _pil(p2.image) if p2 else None,
+        _caption_html(p2.caption if p2 else ""),
+        _label_html(idx),
+    )
+
+
+# ── output bundle plumbing ───────────────────────────────────────────────────
+_KEYS = ["input_view", "gen_view", "reader_view", "gen_btn", "clock", "status",
+         "status0", "live_img", "gen_timer", "title", "img1", "cap1", "img2", "cap2",
+         "label", "comic", "idx"]
+_POS = {k: i for i, k in enumerate(_KEYS)}
+
+
+def _bundle(**kw):
+    out = [gr.skip()] * len(_KEYS)
+    for k, v in kw.items():
+        out[_POS[k]] = v
+    return tuple(out)
+
+
+# ── callbacks ────────────────────────────────────────────────────────────────
+
+def on_generate(idea):
+    """Generator: run the pipeline, tick the stopwatch, reveal the full comic at done."""
+    idea = (idea or "").strip()
+    if not idea:
+        yield _bundle(status0=_progress_html("Please describe the comic you want.", 0, "error"))
+        return
+
+    # start the stopwatch + switch to the generation view
+    TIMER["t0"] = time.monotonic()
+    TIMER["running"] = True
+    TIMER["final"] = None
+    yield _bundle(
+        input_view=gr.update(visible=False),
+        gen_view=gr.update(visible=True),
+        gen_btn=gr.update(interactive=False),
+        gen_timer=gr.update(active=True),
+        clock=_clock_html(0.0, True),
+        status=_progress_html("Reading your idea and planning the story…", 0.02),
+        live_img=None,
+    )
+
+    def elapsed():
+        return time.monotonic() - TIMER["t0"]
+
+    comic = None
+    for ev in generate_comic(idea, writer=WRITER, artist=ARTIST):
+        if ev.comic is not None:
+            comic = ev.comic
+
+        if ev.kind in ("refused", "error"):
+            TIMER["running"] = False
+            tone = "refuse" if ev.kind == "refused" else "error"
+            icon = "🚫 " if ev.kind == "refused" else "⚠ "
+            yield _bundle(
+                input_view=gr.update(visible=True),
+                gen_view=gr.update(visible=False),
+                gen_btn=gr.update(interactive=True),
+                gen_timer=gr.update(active=False),
+                status0=_progress_html(icon + ev.message, 0.0, tone))
+            return
+
+        if ev.kind == "image" and ev.panel is not None and ev.panel.image:
+            yield _bundle(
+                comic=comic,
+                clock=_clock_html(elapsed(), True),
+                status=_progress_html(ev.message, ev.progress),
+                live_img=_pil(ev.panel.image))
+            continue
+
+        if ev.kind == "done":
+            TIMER["running"] = False
+            TIMER["final"] = elapsed()
+            img1, cap1, img2, cap2, label = _page_view(comic, 0)
+            note = f"✨ {TOTAL_PANELS} panels generated in {_fmt(TIMER['final'])}"
+            yield _bundle(
+                gen_view=gr.update(visible=False),
+                reader_view=gr.update(visible=True),
+                gen_timer=gr.update(active=False),
+                clock=_clock_html(TIMER["final"], False),
+                title=_title_html(comic.bible.title, comic.bible.logline, note),
+                img1=img1, cap1=cap1, img2=img2, cap2=cap2, label=label,
+                comic=comic, idx=0)
+            return
+
+        # status / bible / panels
+        yield _bundle(comic=comic, clock=_clock_html(elapsed(), True),
+                      status=_progress_html(ev.message, ev.progress))
+
+
+def on_clock_tick():
+    """Smoothly tick the stopwatch between generator yields; freeze when not running."""
+    if TIMER["running"] and TIMER["t0"] is not None:
+        return gr.update(value=_clock_html(time.monotonic() - TIMER["t0"], True))
+    return gr.skip()
+
+
+def on_prev(comic, idx):
+    if comic is None:
+        return (gr.skip(),) * 6
+    idx = max(0, int(idx) - 1)
+    img1, cap1, img2, cap2, label = _page_view(comic, idx)
+    return img1, cap1, img2, cap2, label, idx
+
+
+def on_next(comic, idx):
+    if comic is None:
+        return (gr.skip(),) * 6
+    idx = min(PAGES - 1, int(idx) + 1)
+    img1, cap1, img2, cap2, label = _page_view(comic, idx)
+    return img1, cap1, img2, cap2, label, idx
+
+
+def on_new():
+    TIMER["running"] = False
+    return (
+        gr.update(visible=True),                 # input_view
+        gr.update(visible=False),                # gen_view
+        gr.update(visible=False),                # reader_view
+        gr.update(value="", interactive=True),   # idea
+        gr.update(interactive=True),             # gen_btn
+        gr.update(active=False),                 # gen_timer
+        None,                                    # live_img
+        None,                                    # comic
+        0,                                       # idx
+    )
+
+
+def on_warm():
+    threading.Thread(target=WRITER.warm, daemon=True).start()
+    threading.Thread(target=ARTIST.warm, daemon=True).start()
+    note = ("Models warming… give them a moment, then generate."
+            if BACKEND == "modal" else "Ready (mock backend).")
+    return gr.update(value=_progress_html(note, 0.0))
+
+
+# ── UI ───────────────────────────────────────────────────────────────────────
+
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Anton&family=Spline+Sans:wght@400;500;600;700&display=swap');
+
+:root {
+  --paper:#f0e6cf; --paper2:#fbf6e9; --ink:#16120d; --ink-soft:#6d6453;
+  --red:#e23b2e; --blue:#214bd6; --yellow:#f4ad15;
+}
+
+/* warm paper + halftone-dot page */
+gradio-app, .gradio-container, body {
+  background-color: var(--paper) !important;
+  background-image: radial-gradient(rgba(22,18,13,0.07) 0.7px, transparent 0.8px) !important;
+  background-size: 15px 15px !important;
+  color: var(--ink) !important;
+  font-family:'Spline Sans', ui-sans-serif, sans-serif !important;
+}
+.gradio-container {max-width: 940px !important; margin: 0 auto !important;}
+#landing {max-width: 720px; margin: 0 auto;}
+
+/* hero comic panel */
+.comic-hero {position:relative; text-align:center; padding:38px 26px 24px; margin:10px 0 22px;
+  background:var(--paper2); border:3px solid var(--ink); border-radius:5px;
+  box-shadow:9px 9px 0 var(--ink); overflow:hidden;}
+.comic-hero::before {content:''; position:absolute; inset:0;
+  background-image:radial-gradient(var(--ink) 1px, transparent 1.3px);
+  background-size:11px 11px; opacity:.05; pointer-events:none;}
+.comic-hero .kicker {position:relative; display:inline-block; font-weight:700; font-size:12px;
+  letter-spacing:3px; text-transform:uppercase; color:var(--paper2); background:var(--ink);
+  padding:5px 13px; transform:rotate(-1.4deg);}
+.comic-hero h1 {position:relative; font-family:'Anton',sans-serif; font-weight:400; font-size:62px;
+  line-height:0.9; letter-spacing:1px; margin:20px 0 0; text-transform:uppercase; color:var(--ink);
+  text-shadow:3px 3px 0 rgba(226,59,46,0.9);}
+.comic-hero h1 .accent {color:var(--red); text-shadow:3px 3px 0 var(--ink);}
+.comic-hero p {position:relative; color:var(--ink-soft); font-size:16px; max-width:520px;
+  margin:18px auto 0; line-height:1.55;}
+.comic-hero p b {color:var(--ink); font-weight:700;}
+.comic-hero .pills {position:relative; margin-top:18px; display:flex; gap:9px; justify-content:center;
+  flex-wrap:wrap;}
+.comic-hero .pill {font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
+  color:var(--ink); background:var(--paper); border:2px solid var(--ink); border-radius:3px;
+  padding:5px 11px; box-shadow:2px 2px 0 var(--ink);}
+
+/* the idea textbox as an inked panel */
+#idea_box {background:transparent !important; border:none !important; box-shadow:none !important;}
+#idea_box textarea {background:var(--paper2) !important; border:3px solid var(--ink) !important;
+  box-shadow:6px 6px 0 var(--ink) !important; border-radius:4px !important; color:var(--ink) !important;
+  font-family:'Spline Sans' !important; font-size:16px !important; line-height:1.5; min-height:104px;
+  padding:14px 16px !important;}
+#idea_box textarea::placeholder {color:#a79c86 !important;}
+
+/* example chips + nav buttons as comic stickers */
+#examples {gap:9px; justify-content:center; flex-wrap:wrap; margin-top:4px;}
+#examples button, #reader_col button {flex:0 0 auto !important; min-width:0 !important;
+  background:var(--paper2) !important; color:var(--ink) !important; border:2.5px solid var(--ink) !important;
+  box-shadow:3px 3px 0 var(--ink) !important; border-radius:3px !important; font-weight:600 !important;
+  transition:transform .08s ease, box-shadow .08s ease !important;}
+#examples button:hover, #reader_col button:hover {transform:translate(-1px,-1px) !important;
+  box-shadow:4px 4px 0 var(--ink) !important;}
+#examples button:active, #reader_col button:active {transform:translate(2px,2px) !important;
+  box-shadow:1px 1px 0 var(--ink) !important;}
+
+/* the big generate CTA */
+#gen_btn {margin-top:10px; background:var(--red) !important; color:#fff !important;
+  border:3px solid var(--ink) !important; box-shadow:7px 7px 0 var(--ink) !important;
+  border-radius:4px !important; font-family:'Anton',sans-serif !important; font-weight:400 !important;
+  font-size:22px !important; letter-spacing:1.5px; text-transform:uppercase;
+  transition:transform .1s ease, box-shadow .1s ease !important;}
+#gen_btn:hover {transform:translate(-2px,-2px) !important; box-shadow:10px 10px 0 var(--ink) !important;}
+#gen_btn:active {transform:translate(3px,3px) !important; box-shadow:3px 3px 0 var(--ink) !important;}
+
+/* staggered entrance */
+@keyframes riseIn {from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
+.comic-hero {animation:riseIn .5s both;}
+#idea_box {animation:riseIn .5s .08s both;}
+#examples {animation:riseIn .5s .16s both;}
+#gen_btn {animation:riseIn .5s .24s both;}
+
+#reader_col {max-width: 760px; margin: 0 auto;}
+#gen_col {max-width: 680px; margin: 0 auto;}
+#panel_img img, #live_img img {border:3px solid var(--ink) !important; border-radius:4px;
+  box-shadow:6px 6px 0 var(--ink);}
+"""
+
+_HERO = f"""
+<div class='comic-hero'>
+  <div class='kicker'>✦ AI Comic Studio &nbsp;·&nbsp; Issue #01</div>
+  <h1>Comic <span class='accent'>Book</span><br>Generator</h1>
+  <p>Type a story idea and get a full <b>{PAGES}-page, {TOTAL_PANELS}-panel</b> comic —
+  written by <b>Gemma&nbsp;4</b>, inked by <b>FLUX</b>, start to finish in about a minute.</p>
+  <div class='pills'>
+    <span class='pill'>{PAGES} Pages</span>
+    <span class='pill'>{TOTAL_PANELS} Panels</span>
+    <span class='pill'>Consistent Cast</span>
+    <span class='pill'>Live Timer</span>
+  </div>
+</div>
+"""
+
+_EXAMPLE_LABELS = ["🏚️ Lighthouse keeper", "🤖 Robot painter",
+                   "🗺️ Lost city", "🍜 Space-pirate noodle shop"]
+_EXAMPLE_TEXTS = [
+    "On a storm-battered coast, the last lighthouse keeper guards a secret that washes ashore. Moody, atmospheric mystery.",
+    "A shy robot in a flooded future city learns to paint, and befriends a stray cat that changes everything.",
+    "A brave cartographer and her apprentice brave the jungle to find a legendary lost city.",
+    "A retired space-pirate runs a tiny noodle shop on a backwater moon, until her old crew comes calling.",
+]
+
+
+def build_ui():
+    with gr.Blocks(title="Comic Book Generator") as demo:
+        comic_state = gr.State(None)
+        page_idx = gr.State(0)
+
+        # ── input / landing view ──
+        with gr.Column(visible=True, elem_id="landing") as input_view:
+            gr.HTML(_HERO)
+            idea = gr.Textbox(
+                show_label=False,
+                placeholder="Describe your comic…   e.g. On a storm-battered coast, the "
+                            "last lighthouse keeper guards a secret that washes ashore.",
+                lines=3, elem_id="idea_box",
+            )
+            with gr.Row(elem_id="examples"):
+                ex_btns = [gr.Button(lbl, size="sm") for lbl in _EXAMPLE_LABELS]
+            gen_btn = gr.Button("✨  Generate comic", variant="primary", size="lg",
+                                elem_id="gen_btn")
+            status0 = gr.HTML(_progress_html("Describe a comic, or tap an example, to begin."))
+
+        # ── generation view (stopwatch) ──
+        with gr.Column(visible=False, elem_id="gen_col") as gen_view:
+            clock = gr.HTML(_clock_html(0.0, True))
+            status = gr.HTML(_progress_html("Starting…", 0.0))
+            live_img = gr.Image(type="pil", height=360, interactive=False,
+                                show_label=True, label="latest panel", elem_id="live_img")
+
+        # ── reader view ──
+        with gr.Column(visible=False, elem_id="reader_col") as reader_view:
+            title_html = gr.HTML()
+            img1 = gr.Image(type="pil", height=380, interactive=False,
+                            show_label=False, elem_id="panel_img")
+            cap1 = gr.HTML()
+            img2 = gr.Image(type="pil", height=380, interactive=False,
+                            show_label=False, elem_id="panel_img")
+            cap2 = gr.HTML()
+            with gr.Row():
+                label = gr.HTML(_label_html(0))
+                prev_btn = gr.Button("←", scale=0, min_width=64)
+                next_btn = gr.Button("→", scale=0, min_width=64)
+            new_btn = gr.Button("＋ New comic", variant="secondary")
+
+        gen_timer = gr.Timer(0.1, active=False)
+
+        # wiring. status (gen view) shows live progress; status0 (input view) shows
+        # refusals/empty-input errors, since the gen view is hidden in those cases.
+        gen_outputs = [input_view, gen_view, reader_view, gen_btn, clock, status,
+                       status0, live_img, gen_timer, title_html, img1, cap1, img2, cap2,
+                       label, comic_state, page_idx]
+        gen_btn.click(on_generate, [idea], gen_outputs)
+        idea.submit(on_generate, [idea], gen_outputs)
+
+        # example chips populate the textbox (tap, then Generate)
+        for b, text in zip(ex_btns, _EXAMPLE_TEXTS):
+            b.click(lambda t=text: t, None, idea)
+
+        gen_timer.tick(on_clock_tick, None, [clock])
+
+        nav_outputs = [img1, cap1, img2, cap2, label, page_idx]
+        prev_btn.click(on_prev, [comic_state, page_idx], nav_outputs)
+        next_btn.click(on_next, [comic_state, page_idx], nav_outputs)
+
+        new_btn.click(on_new, None,
+                      [input_view, gen_view, reader_view, idea, gen_btn, gen_timer,
+                       live_img, comic_state, page_idx])
+
+        demo.load(on_warm, None, [status0])
+
+    return demo
+
+
+if __name__ == "__main__":
+    demo = build_ui()
+    demo.queue(default_concurrency_limit=8).launch(
+        theme=gr.themes.Base(), css=CSS,
+        share=os.environ.get("COMIC_SHARE") == "1",
+        server_name=os.environ.get("GRADIO_SERVER_NAME", "127.0.0.1"),
+    )