✦ AI Comic Studio · Issue #01
Comic Book
Generator
Type a story idea and get a full {PAGES}-page, {TOTAL_PANELS}-panel comic —
written by Gemma 4, inked by FLUX, start to finish in about a minute.
{PAGES} Pages
{TOTAL_PANELS} Panels
Consistent Cast
Live Timer
"""
_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"),
)