Clarify generation progress and carousel playback; allow deleting results

README.md

@@ -31,6 +31,8 @@ per axis, in multiples of 16.
 The result viewer keeps the latest 20 successful generations in the current session.
 Selecting a thumbnail restores its recipe. Downloaded PNGs include the actual prompt,
 dimensions, seed, steps, CFG, sampler, and model identifier in the `inko` metadata field.
+**Delete image** removes the selected generation and selects a neighboring image.
+Deleting the last image clears the viewer and keeps your input for another generation.
 History clears with a new session; download images you want to keep.
 
 The carousel contains the 18 release-model images from

demo/app.py

@@ -47,6 +47,10 @@ SHOWCASE = json.loads((SHOWCASE_DIR / "prompts.json").read_text())
 RESULT_DIR = Path(tempfile.mkdtemp(prefix="inko-results-"))
 gr.set_static_paths(paths=[SHOWCASE_DIR, RESULT_DIR])
 PROGRESS = gr.Progress()
+ACTIVITY_INDICATOR = (
+    '<div class="activity-indicator" role="progressbar" '
+    'aria-label="Request in progress"><span></span></div>'
+)
 
 
 def image_url(path):
@@ -69,7 +73,9 @@ def carousel_html():
         f'<div class="showcase-track"><div class="showcase-group">{cards}</div>'
         f'<div class="showcase-group" aria-hidden="true">{duplicate}</div></div></div>'
         '<div class="showcase-caption"><span>Choose a painting to load its prompt and settings.</span>'
-        '<button type="button" class="motion-toggle" aria-label="Pause carousel">Pause</button></div>'
+        '<button type="button" class="motion-toggle" aria-label="Pause carousel">'
+        '<span class="motion-icon" aria-hidden="true">Ⅱ</span>'
+        '<span class="motion-label">Pause</span></button></div>'
     )
 
 
@@ -118,7 +124,12 @@ def canvas_ui(aspect, resolution, width, height, enhance):
 
 
 def interaction_updates(is_busy):
-    return {control: gr.update(interactive=not is_busy) for control in input_controls}
+    updates = {
+        control: gr.update(interactive=not is_busy) for control in input_controls
+    }
+    if not is_busy:
+        updates[generate_button] = gr.update(value="Generate", interactive=True)
+    return updates
 
 
 def prepare_request(
@@ -137,8 +148,13 @@ def prepare_request(
     yield {
         busy: True,
         status: "Enhancing prompt…" if enhance else "Preparing your painting…",
+        progress_display: ACTIVITY_INDICATOR,
         reuse_button: gr.update(interactive=False),
+        delete_button: gr.update(interactive=False),
         **interaction_updates(True),
+        generate_button: gr.update(
+            value="Enhancing…" if enhance else "Preparing…", interactive=False
+        ),
     }
     try:
         sampling = sampling_settings(seed, randomize_seed, steps, guidance)
@@ -147,7 +163,11 @@ def prepare_request(
         )
     except ValueError as error:
         raise gr.Error(str(error)) from error
-    yield {pending: prepared | sampling, status: "Generating image…"}
+    yield {
+        pending: prepared | sampling,
+        status: "Generating image…",
+        generate_button: gr.update(value="Generating…", interactive=False),
+    }
 
 
 def gpu_duration(request, progress=PROGRESS):
@@ -202,6 +222,9 @@ def display_updates(record, records):
         ),
         history_gallery: history_html(records, record["image"]),
         reuse_button: gr.update(interactive=True),
+        delete_button: gr.update(
+            visible=record["kind"] == "Generated", interactive=True
+        ),
     }
 
 
@@ -213,6 +236,7 @@ def commit_result(path, records):
         history: updated,
         busy: False,
         status: "",
+        progress_display: "",
         **interaction_updates(False),
         seed: record["seed"],
         width: record["width"],
@@ -265,6 +289,38 @@ def select_history(is_busy, records, event: gr.SelectData):
     return restore_record(records[index], records)
 
 
+def delete_selected(record, is_busy, records):
+    if is_busy:
+        raise gr.Error("Wait for the current generation before deleting an image.")
+    index = next(
+        (
+            index
+            for index, item in enumerate(records)
+            if record is not None and item["image"] == record["image"]
+        ),
+        None,
+    )
+    if index is None:
+        raise gr.Error("Select an image from your generation history to delete.")
+    updated = records[:index] + records[index + 1 :]
+    if updated:
+        changes = restore_record(updated[min(index, len(updated) - 1)], updated)
+    else:
+        changes = {
+            selected: None,
+            output: None,
+            used_prompt: "",
+            recipe: gr.update(value="", visible=False),
+            result_notice: gr.update(value="", visible=False),
+            history_gallery: history_html([]),
+            reuse_button: gr.update(interactive=False),
+            delete_button: gr.update(visible=False, interactive=False),
+            status: "",
+        }
+    delete_results([records[index]], RESULT_DIR)
+    return {**changes, history: updated}
+
+
 def reuse_prompt(record, is_busy):
     if is_busy or record is None:
         return {prompt: gr.skip()}
@@ -285,7 +341,9 @@ def failed_request(record):
     return {
         busy: False,
         status: "The request failed. You can try again with the same settings.",
+        progress_display: "",
         reuse_button: gr.update(interactive=record is not None),
+        delete_button: gr.update(interactive=record is not None),
         **interaction_updates(False),
     }
 
@@ -353,6 +411,9 @@ with gr.Blocks(title="Inko", delete_cache=(3600, 3600)) as demo:
                 "Generate", variant="primary", elem_id="generate-button"
             )
             status = gr.Markdown("", elem_id="generation-status")
+            progress_display = gr.HTML(
+                "", elem_id="generation-progress", apply_default_css=False
+            )
             with gr.Accordion("Generation settings", open=False):
                 randomize_seed = gr.Checkbox(value=True, label="Randomize seed")
                 seed = gr.Number(
@@ -390,6 +451,9 @@ with gr.Blocks(title="Inko", delete_cache=(3600, 3600)) as demo:
                 elem_id="result-history",
                 apply_default_css=False,
             )
+            delete_button = gr.Button(
+                "Delete image", size="sm", visible=False, elem_id="delete-image"
+            )
             used_prompt = gr.Textbox(
                 label="Prompt used",
                 lines=4,
@@ -432,6 +496,7 @@ with gr.Blocks(title="Inko", delete_cache=(3600, 3600)) as demo:
         result_notice,
         history_gallery,
         reuse_button,
+        delete_button,
     ]
     restore_outputs = [
         *result_outputs,
@@ -440,7 +505,14 @@ with gr.Blocks(title="Inko", delete_cache=(3600, 3600)) as demo:
         canvas_label,
         status,
     ]
-    busy_outputs = [busy, status, reuse_button, *input_controls]
+    busy_outputs = [
+        busy,
+        status,
+        progress_display,
+        reuse_button,
+        delete_button,
+        *input_controls,
+    ]
     gr.on(
         triggers=[
             aspect.input,
@@ -469,6 +541,13 @@ with gr.Blocks(title="Inko", delete_cache=(3600, 3600)) as demo:
         queue=False,
         api_visibility="private",
     )
+    delete_button.click(
+        delete_selected,
+        inputs=[selected, busy, history],
+        outputs=[*restore_outputs, history],
+        queue=False,
+        api_visibility="private",
+    )
     reuse_button.click(
         reuse_prompt,
         inputs=[selected, busy],
@@ -492,15 +571,16 @@ with gr.Blocks(title="Inko", delete_cache=(3600, 3600)) as demo:
         outputs=[pending, *busy_outputs],
         api_name="prepare_prompt",
         trigger_mode="once",
-        show_progress="hidden",
+        show_progress="full",
+        show_progress_on=progress_display,
     )
     generation = preparation.success(
         generate,
         inputs=pending,
         outputs=completed,
         api_name="generate",
-        show_progress="minimal",
-        show_progress_on=status,
+        show_progress="full",
+        show_progress_on=progress_display,
     )
     committed = generation.success(
         commit_result,

demo/gallery.js

@@ -13,24 +13,27 @@ if (strip) {
   const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
   let paused = reducedMotion.matches;
   let hovered = false;
-  let focused = false;
   let touching = false;
   let previousTime = null;
   let position = strip.scrollLeft;
 
   const updateToggle = () => {
-    toggle.textContent = paused ? "Play" : "Pause";
+    toggle.querySelector(".motion-icon").textContent = paused ? "▶" : "Ⅱ";
+    toggle.querySelector(".motion-label").textContent = paused ? "Play" : "Pause";
     toggle.setAttribute("aria-label", paused ? "Play carousel" : "Pause carousel");
   };
+  const pauseForSelection = () => { paused = true; updateToggle(); };
   toggle.addEventListener("click", () => { paused = !paused; updateToggle(); });
   reducedMotion.addEventListener("change", () => { paused = reducedMotion.matches; updateToggle(); });
-  strip.addEventListener("pointerenter", () => { hovered = true; });
+  strip.addEventListener("pointerenter", (event) => { hovered = event.pointerType === "mouse"; });
   strip.addEventListener("pointerleave", () => { hovered = false; touching = false; });
   strip.addEventListener("pointerdown", () => { touching = true; });
   strip.addEventListener("pointerup", () => { touching = false; });
   strip.addEventListener("pointercancel", () => { touching = false; });
-  strip.addEventListener("focusin", () => { focused = true; });
-  strip.addEventListener("focusout", () => { focused = false; });
+  strip.addEventListener("focusin", pauseForSelection);
+  strip.addEventListener("click", (event) => {
+    if (event.target.closest(".painting-card")) pauseForSelection();
+  });
   strip.addEventListener("scroll", () => { position = strip.scrollLeft; }, { passive: true });
   strip.addEventListener("keydown", (event) => {
     if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
@@ -45,7 +48,7 @@ if (strip) {
     const elapsed = previousTime === null ? 0 : Math.min(time - previousTime, 64);
     previousTime = time;
     const distance = group.getBoundingClientRect().width + 16;
-    if (!paused && !hovered && !focused && !touching && !document.hidden && distance > 16) {
+    if (!paused && !hovered && !touching && !document.hidden && distance > 16) {
       position += elapsed * 0.022;
       if (position >= distance) position -= distance;
       strip.scrollLeft = position;

demo/style.css

@@ -24,15 +24,30 @@ body { background: #f4f0e8; }
 .painting-card:hover, .painting-card:focus-visible { transform: translateY(-3px); box-shadow: 0 5px 14px #4c39212b; outline: 2px solid #a94f3c; outline-offset: 2px; }
 .painting-card:hover span, .painting-card:focus-visible span { opacity: 1; }
 .showcase-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #85786b; font-size: 12px; padding: 3px 0 16px; }
-.motion-toggle { border: 0; background: transparent; color: #766052; cursor: pointer; padding: 4px 8px; font-size: 12px; }
+.motion-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 7px; min-width: 88px; min-height: 38px; border: 1px solid #ba7e68; border-radius: 8px; background: #eee0d3; color: #793d2d; cursor: pointer; padding: 8px 12px; font-size: 13px; font-weight: 600; }
+.motion-toggle:hover { background: #e3cfbd; border-color: #a94f3c; }
+.motion-icon { width: 14px; font-size: 12px; text-align: center; }
 .motion-toggle:focus-visible { outline: 2px solid #a94f3c; outline-offset: 2px; }
 #workspace { gap: 30px; align-items: flex-start; }
 #prompt-panel, #result-panel { gap: 13px; }
 #prompt-panel { padding: 20px; background: #fbf8f1; border: 1px solid #e2d9cb; border-radius: 12px; }
 #prompt-panel .block { box-shadow: none; }
 #generate-button { min-height: 48px; border-radius: 8px; box-shadow: none; font-weight: 600; letter-spacing: .02em; }
-.canvas-note, #generation-status { font-size: 12px; color: #85786b; min-height: 0 !important; }
+.canvas-note { font-size: 12px; color: #85786b; min-height: 0 !important; }
+#generation-status { font-size: 15px; font-weight: 600; color: #91412f; min-height: 0 !important; }
 .canvas-note p, #generation-status p { margin: 0; }
+#generation-progress { padding: 0 !important; min-height: 0 !important; }
+#generation-progress .html-container { padding: 0; }
+#generation-progress:has(.activity-indicator), #generation-progress:has([data-testid="status-tracker"]:not(.hide)) { min-height: 104px !important; background: #f3e9dc; border: 1px solid #d5ae95; border-radius: 9px; }
+#generation-progress [data-testid="status-tracker"] { height: 100%; box-sizing: border-box; padding: 16px !important; background: #f3e9dc; }
+#generation-progress [data-testid="status-tracker"].generating { display: none; }
+#generation-progress .progress-bar-wrap { width: 100%; height: 12px; border: 0; border-radius: 6px; background: #decab6; overflow: hidden; }
+#generation-progress .progress-bar { background: #a94f3c; }
+#generation-progress .progress-level-inner { font-family: inherit; font-size: 14px; font-weight: 600; color: #793d2d; }
+#generation-progress .progress-text { top: 8px; right: 12px; transform: none; color: #766052; font-size: 12px; }
+.activity-indicator { position: relative; height: 12px; margin: 45px 16px; overflow: hidden; border-radius: 6px; background: #decab6; }
+.activity-indicator span { display: block; width: 35%; height: 100%; border-radius: inherit; background: #a94f3c; animation: inko-progress 1.4s ease-in-out infinite alternate; }
+@keyframes inko-progress { from { transform: translateX(0); } to { transform: translateX(185%); } }
 #result-viewer { height: min(58vh, 640px) !important; min-height: 0 !important; background: #ebe5da !important; border: 1px solid #ded6c9; border-radius: 12px; overflow: hidden; }
 #result-viewer .image-container { padding: 24px; box-sizing: border-box; height: 100% !important; min-height: 0 !important; }
 #result-viewer img { object-fit: contain !important; max-height: calc(min(58vh, 640px) - 48px) !important; max-width: 100% !important; }
@@ -48,6 +63,7 @@ body { background: #f4f0e8; }
 .history-card[aria-pressed="true"], .history-card:focus-visible { border-color: #a94f3c; outline: none; }
 .history-card:hover { background: #e3d8c9; }
 .history-empty { margin: 2px 0; color: #968879; font-size: 12px; }
+#delete-image { align-self: flex-end; width: auto; min-width: 116px; padding: 7px 12px; color: #91412f; border: 1px solid #d5ae95; }
 @media (max-width: 760px) {
   .gradio-container { padding: 20px 16px 28px !important; }
   .gradio-container > .main { padding: 0 !important; }
@@ -64,4 +80,5 @@ body { background: #f4f0e8; }
 }
 @media (prefers-reduced-motion: reduce) {
   .painting-card, .painting-card span { transition: none; }
+  .activity-indicator span { animation: none; width: 100%; opacity: .65; }
 }