Publish Qwen 2.1 Image source 7fd03f3543e8 (part 2)

scripts/verify_ui.py

@@ -8,6 +8,7 @@ Usage: uv run --with playwright==1.58.0 --with huggingface_hub==1.32.0
 import argparse
 from datetime import datetime, timezone
 import hashlib
+from io import BytesIO
 import httpx
 import json
 from pathlib import Path
@@ -28,7 +29,7 @@ from settings import EXAMPLE_PROMPTS, SIZES, STEPS
 def main():
     parser = argparse.ArgumentParser(description=__doc__)
     parser.add_argument("--space", default="Mike0021/still-image21-studio")
-    parser.add_argument("--phase", choices=["layout", "inspect", "controls", "generate", "examples", "edit", "upload"], default="layout")
+    parser.add_argument("--phase", choices=["layout", "inspect", "keyboard", "controls", "generate", "examples", "edit", "upload"], default="layout")
     parser.add_argument("--mobile", action="store_true")
     parser.add_argument("--reference", type=Path)
     parser.add_argument("--resolution", choices=list(SIZES))
@@ -112,6 +113,10 @@ def main():
         page.goto(url, wait_until="domcontentloaded", timeout=60000)
         expect(page.get_by_role("button", name="Generate image")).to_be_visible(timeout=60000)
         config = context.request.get(url+"/config").json()
+        expect(page).to_have_title("Qwen 2.1 Image")
+        expect(page.get_by_role("heading", name="Qwen 2.1 Image", exact=True)).to_be_visible()
+        assert info.card_data["title"] == "Qwen 2.1 Image"
+        evidence["titles"] = {"browser": page.title(), "space": info.card_data["title"]}
         generation_index = next(d["id"] for d in config["dependencies"] if d.get("api_name") == "generate")
 
         def capture(name):
@@ -150,6 +155,46 @@ def main():
                 "status_text": page.locator("#result-status").inner_text(), "downloads_verified": True})
             return record
 
+        def tab_to(target):
+            for _ in range(80):
+                page.keyboard.press("Tab")
+                if target.evaluate("e => e === document.activeElement"):
+                    return
+            raise AssertionError("Target not reachable by sequential Tab navigation")
+
+        def focus_evidence(target, name, proxy=None):
+            tab_to(target)
+            proxy = proxy or target
+            row = proxy.evaluate("""e => {
+              const r=e.getBoundingClientRect(), s=getComputedStyle(e);
+              let bounds={left:r.left,top:r.top,right:r.right,bottom:r.bottom}, clips=[];
+              for(let p=e.parentElement;p;p=p.parentElement) {
+                const c=getComputedStyle(p), b=p.getBoundingClientRect();
+                if(/hidden|clip|scroll|auto/.test(c.overflowX)) {
+                  bounds.left=Math.max(bounds.left,b.left); bounds.right=Math.min(bounds.right,b.right);
+                }
+                if(/hidden|clip|scroll|auto/.test(c.overflowY)) {
+                  bounds.top=Math.max(bounds.top,b.top); bounds.bottom=Math.min(bounds.bottom,b.bottom);
+                }
+              }
+              return {outline:s.outline,offset:s.outlineOffset,font:s.fontFamily,
+                width:r.width,height:r.height,visibleWidth:bounds.right-bounds.left,
+                visibleHeight:bounds.bottom-bounds.top,focused:document.activeElement.outerHTML.slice(0,500)};
+            }""")
+            assert row["outline"].startswith("rgb("), row
+            assert "solid 3px" in row["outline"], row
+            assert row["visibleWidth"] >= row["width"]-1 and row["visibleHeight"] >= row["height"]-1, row
+            # Inspect the rendered control, not just CSS declarations. Each side
+            # must contain focus-blue pixels inside its bounding box.
+            bitmap = Image.open(BytesIO(proxy.screenshot())).convert("RGB")
+            colors = {(37,99,235), (147,197,253)}
+            w,h=bitmap.size
+            strips = [bitmap.crop(box) for box in [(0,0,w,4),(0,h-4,w,h),(0,0,4,h),(w-4,0,w,h)]]
+            row["focus_pixels_top_bottom_left_right"] = [sum(pixel in colors for pixel in strip.get_flattened_data()) for strip in strips]
+            assert all(n >= 3 for n in row["focus_pixels_top_bottom_left_right"]), row
+            evidence.setdefault("focus_checks", []).append({"name":name, **row})
+            page.screenshot(path=str(out / f"focus-{name}-screen.png"), full_page=True)
+
         def fullscreen():
             page.get_by_role("button", name="Fullscreen", exact=True).click()
             expect(page.get_by_role("button", name="Exit fullscreen mode", exact=True)).to_be_visible()
@@ -171,8 +216,68 @@ def main():
                     "qualification": "CSS zoom check, not physical-device or browser-chrome zoom certification"})
                 page.evaluate("document.body.style.zoom = ''")
                 evidence["body_text"] = page.locator("body").inner_text()
+            elif args.phase == "keyboard":
+                fonts = page.locator(".gradio-container").evaluate("""root => [...new Set(
+                  [...root.querySelectorAll('*')].filter(e=>e.getClientRects().length &&
+                    [...e.childNodes].some(n=>n.nodeType===3 && n.textContent.trim()))
+                    .map(e=>getComputedStyle(e).fontFamily))]""")
+                assert fonts == ["Arial, sans-serif"], fonts
+                evidence["visible_text_font_families"] = fonts
+                focus_evidence(page.get_by_label("Prompt", exact=True), "prompt")
+                for shape in ["1:1", "4:3", "3:4", "16:9", "9:16"]:
+                    radio = page.get_by_role("radio", name=shape, exact=True)
+                    # Native radio groups expose the checked item to Tab and
+                    # use arrow keys to reach the other items.
+                    radio.check()
+                    focus_evidence(radio, "shape-"+shape.replace(":","-"), radio.locator(".."))
+                page.keyboard.press("ArrowLeft")
+                expect(page.get_by_role("radio", name="16:9", exact=True)).to_be_checked()
+                expect(page.locator("#size-hint")).to_have_text("1,376 × 768 pixels")
+                evidence["after_radio_arrow"] = page.locator("#shape").evaluate("e=>({active:document.activeElement.outerHTML,selected:[...e.querySelectorAll('input')].filter(n=>n.checked).map(n=>n.value)})")
+                for size in ["1K","2K"]:
+                    radio = page.get_by_role("radio", name=size, exact=True)
+                    radio.check()
+                    focus_evidence(radio, "size-"+size, radio.locator(".."))
+                combo=page.get_by_role("combobox",name="Quality")
+                focus_evidence(combo, "quality")
+                page.keyboard.press("ArrowDown")
+                expect(page.get_by_role("option").first).to_be_visible()
+                page.screenshot(path=str(out / "quality-keyboard-open-screen.png"), full_page=True)
+                page.keyboard.press("Escape")
+                check=page.get_by_label("Transparent background",exact=True)
+                focus_evidence(check, "transparency", check.locator(".."))
+                page.keyboard.press("Space")
+                expect(check).to_be_checked()
+                ref=page.locator("#reference-settings > button")
+                focus_evidence(ref, "reference-accordion")
+                page.keyboard.press("Enter")
+                expect(page.locator("#reference")).to_be_visible()
+                evidence["reference_upload_aria"] = page.locator("#reference").aria_snapshot()
+                page.keyboard.press("Enter")
+                seed=page.locator("#seed-settings > button")
+                focus_evidence(seed, "seed-accordion")
+                page.keyboard.press("Space")
+                randomize=page.get_by_label("New seed each time",exact=True)
+                focus_evidence(randomize,"new-seed",randomize.locator(".."))
+                page.keyboard.press("Space")
+                expect(randomize).not_to_be_checked()
+                focus_evidence(page.get_by_label("Seed",exact=True),"seed-number")
+                page.keyboard.type("123")
+                button=page.get_by_role("button",name="Generate image",exact=True)
+                focus_evidence(button,"generate")
+                page.keyboard.press("Enter")
+                expect(page.get_by_text("Describe the image you would like to make.",exact=False)).to_be_visible(timeout=15000)
+                expect(button).to_be_enabled()
+                evidence["keyboard_empty_validation"] = True
+                for name in ["Glass pear","Typography","Architecture","Transparent object"]:
+                    focus_evidence(page.get_by_role("button",name=name,exact=True), "example-"+name.lower().replace(" ","-"))
+                focus_evidence(page.get_by_role("link",name="Qwen Research License"),"license")
+                for width in [320,390] if args.mobile else [1440]:
+                    page.set_viewport_size({"width":width,"height":844 if args.mobile else 1000})
+                    focus_evidence(button,"generate-width-"+str(width))
             elif args.phase == "inspect":
                 evidence["aria"] = page.locator("body").aria_snapshot()
+                evidence["control_html"] = {name: page.locator(name).evaluate("e=>e.outerHTML") for name in ["#quality","#reference-settings","#seed-settings","#shape"]}
                 evidence["canvas_html"] = page.locator("#canvas").evaluate("e=>e.outerHTML")
                 evidence["header_ancestors"] = page.locator(".app-bar").evaluate("""e => {
                     let rows=[]; while(e && rows.length<10) {const s=getComputedStyle(e);

style.css

@@ -9,6 +9,7 @@ main, .gradio-container, .gradio-container > .main, .gradio-container .fillable
 .gradio-container .form { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
 .gradio-container .block { background: transparent; border-color: var(--line); box-shadow: none; }
 .gradio-container input:not([type="checkbox"]):not([type="radio"]), .gradio-container textarea { background: white !important; color: var(--ink) !important; }
+.gradio-container ::placeholder { color: #68707b !important; opacity: 1 !important; }
 .app-bar { display: flex; align-items: center; min-height: 72px; border-bottom: 1px solid #e5e7eb; margin-bottom: 8px; }
 .app-bar h1 { margin: 0 !important; font-size: 20px !important; font-weight: 600; letter-spacing: -.4px; line-height: 1.4; }
 #studio { gap: 32px; }
@@ -17,7 +18,7 @@ main, .gradio-container, .gradio-container > .main, .gradio-container .fillable
 #controls .form { gap: 16px !important; }
 #controls .details { border: 1px solid var(--line); padding: 0 !important; }
 #controls .details > .label-wrap { min-height: 44px; padding: 12px !important; box-sizing: border-box; border-radius: 5px; }
-#controls .details > .wrap { padding: 0 12px 12px !important; }
+#controls .details > [data-testid="accordion-content"] { padding: 0 12px 12px !important; }
 #controls .details .prose p { font-size: 12px; line-height: 1.5; color: var(--muted); }
 #prompt textarea { font-size: 15px; line-height: 1.6; padding: 12px; border: 1px solid var(--line) !important; border-radius: 6px; }
 #controls label { font-size: 13px; }
@@ -25,7 +26,11 @@ main, .gradio-container, .gradio-container > .main, .gradio-container .fillable
 #shape label:has(input), #resolution label:has(input) { min-height: 44px; min-width: 0; flex: 1; justify-content: center; padding: 10px 4px; gap: 0; background: white; border: 1px solid var(--line); border-radius: 5px; box-sizing: border-box; }
 #shape label:has(input:checked), #resolution label:has(input:checked) { background: #eef0f3; border-color: #737983; color: var(--ink); }
 #shape input, #resolution input { position: absolute; opacity: 0; width: 1px; height: 1px; }
-#quality input { min-height: 44px; }
+#quality .container > .wrap { padding: 0 !important; border: 1px solid var(--line) !important; border-radius: 5px; background: white !important; }
+#quality .wrap-inner { padding: 0 !important; }
+#quality .secondary-wrap { padding: 0 10px !important; }
+#quality input { min-height: 42px; }
+#seed-settings input[type="number"] { min-height: 44px; border: 1px solid var(--line) !important; border-radius: 5px; padding: 10px !important; }
 #transparent > label { min-height: 36px; align-items: center; padding: 6px 4px !important; border-radius: 4px; }
 #size-hint p, #queue-note p, #example-note p { color: var(--muted); font-size: 12px; line-height: 1.5; }
 #size-hint { margin-top: -9px; }