Spaces:
Running on Zero
Running on Zero
| """FLUX.3 image-small — layout-control canvas (private ZeroGPU demo, diffusers modular). | |
| A custom HTML/JS canvas on top of the diffusers-native FLUX.3 modular pipeline | |
| (PR #29, vendored `diffusers/`), running the **step-distilled** flow-map model | |
| (`Flux3DistilledAutoBlocks`, 16 steps, no guider / negative prompt), with its | |
| transformer block stacks **AOT-compiled via aokit** for ZeroGPU (`aokit.load` + | |
| a per-block eager fallback; set `F3_AOTI=0` to run eager). | |
| You drag bounding boxes on an aspect-ratio artboard, give each box an id + a | |
| description, write a one-line scene prompt, and FLUX.3 renders the scene with | |
| every element placed inside its box. | |
| Layout control uses FLUX.3's region format (see `integration-notes/flux3_examples.py`): | |
| the final prompt is the scene caption followed by a JSON list of regions, each | |
| `{"id", "bbox": [y0, x0, y1, x1] (normalized 0-1000), "desc"}`. | |
| """ | |
| import importlib.util | |
| import os | |
| os.environ.setdefault("TORCH_ALLOW_TF32_CUBLAS_OVERRIDE", "1") | |
| spaces = None | |
| if importlib.util.find_spec("spaces"): | |
| import spaces # before torch so ZeroGPU can patch torch | |
| import base64 | |
| import hashlib | |
| import io | |
| import json | |
| import random | |
| from pathlib import Path | |
| import gradio as gr | |
| import torch | |
| from PIL import Image | |
| from huggingface_hub import hf_hub_download, InferenceClient | |
| from diffusers import ModularPipeline | |
| # Step-distilled FLUX.3 image model + its private AOTI artifact. | |
| REPO = os.environ.get("F3_REPO", "diffusers-internal-dev/f3-small-image-distilled") | |
| AOTI_REPO = os.environ.get("F3_AOTI_REPO", "diffusers-modular/f3-small-image-distilled-aoti-sm120") | |
| AOTI_ENABLED = os.environ.get("F3_AOTI", "1") != "0" | |
| HF_TOKEN = os.environ.get("HF_TOKEN") | |
| # Header "button" links (klein-style pills). Point at the model cards; override via env | |
| # when switching to the public klein repos. | |
| LINK_DISTILLED = os.environ.get("F3_LINK_DISTILLED", "https://huggingface.co/black-forest-labs/flux-3-image-klein") | |
| LINK_BASE = os.environ.get("F3_LINK_BASE", "https://huggingface.co/black-forest-labs/flux-3-image-klein-base") | |
| LINK_CODE = os.environ.get("F3_LINK_CODE", "https://github.com/black-forest-labs/flux-3-image-klein") | |
| LINK_BOXES = os.environ.get("F3_LINK_BOXES", "https://docs.bfl.ai/flux_3/flux3_image_bounding_boxes") | |
| MAX_SEED = 2**63 - 1 | |
| DEFAULT_STEPS = int(os.environ.get("F3_STEPS", "16")) # distilled default | |
| torch.backends.cuda.matmul.allow_tf32 = True | |
| torch.backends.cudnn.allow_tf32 = True | |
| # Aspect ratio -> pixel dims (multiples of 16, ~1 MP, the model's default area). | |
| RATIOS = { | |
| "1:1": (1024, 1024), | |
| "3:2": (1216, 816), | |
| "2:3": (816, 1216), | |
| "4:3": (1152, 864), | |
| "3:4": (864, 1152), | |
| "16:9": (1344, 768), | |
| "9:16": (768, 1344), | |
| } | |
| def _eager_fallback(compiled, eager): | |
| """Call the AOTI graph; fall back to the eager forward on any shape it can't | |
| handle (keeps odd resolutions / layouts working instead of crashing).""" | |
| def forward(*args, **kwargs): | |
| try: | |
| return compiled(*args, **kwargs) | |
| except Exception: | |
| return eager(*args, **kwargs) | |
| return forward | |
| def _load_aoti(transformer, repo, token): | |
| """aokit.load the compiled stacks, then wrap each block with an eager fallback. | |
| The artifact's torch version is asserted against the runtime.""" | |
| import aokit | |
| cfg = json.loads(Path(hf_hub_download(repo, "config.json", token=token)).read_text()) | |
| if cfg.get("torch") != torch.__version__: | |
| raise RuntimeError( | |
| f"AOTI artifact built for torch {cfg.get('torch')}, runtime has {torch.__version__}" | |
| ) | |
| stack_names = list(cfg.get("stacks", {})) or [ | |
| "mode_blocks.image", "mode_blocks.image_cond", "txt_mode_blocks", "single_transformer_blocks", | |
| ] | |
| def _blocks(name): | |
| try: | |
| stack = transformer.get_submodule(name) | |
| except AttributeError: | |
| return [] | |
| return list(stack) if isinstance(stack, torch.nn.ModuleList) else [stack] | |
| eager = {name: [blk.forward for blk in _blocks(name)] for name in stack_names} | |
| aokit.load(transformer, repo) # patches block.forward -> compiled (weights stay live) | |
| wrapped = 0 | |
| for name in stack_names: | |
| for blk, eager_fwd in zip(_blocks(name), eager[name]): | |
| blk.forward = _eager_fallback(blk.forward, eager_fwd) | |
| wrapped += 1 | |
| print(f"[app] AOTI loaded from {repo}: {len(stack_names)} stacks, {wrapped} blocks wrapped " | |
| f"(torch {cfg.get('torch')}, {cfg.get('arch')})", flush=True) | |
| return cfg | |
| # ---- load the pipeline on CPU at import; place on cuda + AOTI under ZeroGPU ---- | |
| print(f"[app] loading distilled modular pipeline from {REPO} ...", flush=True) | |
| PIPE = ModularPipeline.from_pretrained(REPO, token=HF_TOKEN) | |
| PIPE.load_components(dtype={"vae": torch.float32, "default": torch.bfloat16}, token=HF_TOKEN) | |
| print("[app] components loaded on CPU.", flush=True) | |
| AOTI_LOADED = False | |
| if spaces is not None: | |
| PIPE.to("cuda") | |
| if AOTI_ENABLED: | |
| try: | |
| _load_aoti(PIPE.transformer, AOTI_REPO, HF_TOKEN) | |
| AOTI_LOADED = True | |
| except Exception as exc: # fall back to eager if the artifact is unavailable | |
| print(f"[app] AOTI unavailable, running eager: {exc!r}", flush=True) | |
| print(f"[app] pipeline on cuda; ready (aoti={AOTI_LOADED}).", flush=True) | |
| def _build_prompt(scene: str, elements: list) -> str: | |
| """Scene caption + JSON region list, FLUX.3's layout-control format.""" | |
| scene = (scene or "").strip() | |
| regions = [] | |
| for e in elements: | |
| desc = (e.get("desc") or "").strip() | |
| if not desc: | |
| continue | |
| bbox = e.get("bbox") | |
| if not (isinstance(bbox, list) and len(bbox) == 4): | |
| continue | |
| regions.append({ | |
| "id": e.get("id") or "element", | |
| "bbox": [int(round(v)) for v in bbox], | |
| "desc": desc, | |
| }) | |
| if not regions: | |
| return scene | |
| return (scene + " " if scene else "") + json.dumps(regions) | |
| REF_MAX_SIDE = 1024 # cap the reference's long side so the VAE encode stays bounded | |
| def _decode_ref(data_uri): | |
| """Decode a `data:image/...;base64,...` reference from the canvas into a | |
| capped RGB PIL image, or None.""" | |
| if not data_uri or not isinstance(data_uri, str) or "," not in data_uri: | |
| return None | |
| try: | |
| raw = base64.b64decode(data_uri.split(",", 1)[1]) | |
| img = Image.open(io.BytesIO(raw)).convert("RGB") | |
| except Exception: | |
| return None | |
| w, h = img.size | |
| s = REF_MAX_SIDE / max(w, h) | |
| if s < 1.0: | |
| img = img.resize((max(16, round(w * s)), max(16, round(h * s))), Image.LANCZOS) | |
| return img | |
| # ---- optional VLM prompt upsampling (klein-style) --------------------------- | |
| VLM_MODEL = os.environ.get("F3_VLM_MODEL", "Qwen/Qwen3-VL-235B-A22B-Instruct") | |
| _hf_client = InferenceClient(api_key=os.environ.get("INFERENCE_TOKEN") or HF_TOKEN) | |
| SYSTEM_PROMPT_TEXT_ONLY = """You are an expert prompt engineer for FLUX.3 by Black Forest Labs. Rewrite user prompts into a full scene caption while strictly preserving their core subject and intent. | |
| Guidelines: | |
| 1. Structure: Keep structured inputs structured (enhance within fields). Convert natural language to detailed paragraphs. | |
| 2. Details: Describe the subject, composition, lighting (quality, direction, color), atmosphere, textures, materials, spatial relationships, and environmental context. | |
| 3. Text in Images: Put ALL text in quotation marks, matching the prompt's language. Always provide explicit quoted text for objects that would contain text in reality (signs, labels, screens, etc.) - without it, the model generates gibberish. | |
| Output only the revised prompt and nothing else.""" | |
| SYSTEM_PROMPT_WITH_IMAGES = """You are FLUX.3 by Black Forest Labs, an image-editing expert. You turn an editing request into a complete caption of the target image: describe the reference image(s) in full with the requested edit folded in (60-120 words). | |
| Rules: | |
| - One caption only, no commentary | |
| - Use clear, analytical language (avoid "whimsical," "cascading," etc.) | |
| - Keep everything the request does not change (faces, lighting, composition) and describe it as it is | |
| - Refer to the references as <ref_image_0>, <ref_image_1>, ... in the order given ("the person from <ref_image_0>") | |
| - Make abstractions concrete ("futuristic" -> "glowing cyan neon, metallic panels") | |
| - Keep content PG-13 | |
| Output only the final caption in plain text and nothing else.""" | |
| def _img_data_uri(img): | |
| buf = io.BytesIO() | |
| img.save(buf, format="PNG") | |
| return "data:image/png;base64," + base64.b64encode(buf.getvalue()).decode() | |
| def _upsample_prompt(prompt, image_list=None): | |
| """Rewrite the prompt into a full scene caption via a VLM; returns the original | |
| prompt on any failure so generation always proceeds.""" | |
| try: | |
| if image_list: | |
| content = [{"type": "text", "text": prompt}] | |
| for img in image_list: | |
| content.append({"type": "image_url", "image_url": {"url": _img_data_uri(img)}}) | |
| messages = [{"role": "system", "content": SYSTEM_PROMPT_WITH_IMAGES}, | |
| {"role": "user", "content": content}] | |
| else: | |
| messages = [{"role": "system", "content": SYSTEM_PROMPT_TEXT_ONLY}, | |
| {"role": "user", "content": prompt}] | |
| r = _hf_client.chat.completions.create(model=VLM_MODEL, messages=messages, max_tokens=1024) | |
| out = (r.choices[0].message.content or "").strip() | |
| return out or prompt | |
| except Exception as e: | |
| print(f"[app] prompt upsampling failed, using raw prompt: {e!r}", flush=True) | |
| return prompt | |
| def _duration(state_json, *_): | |
| try: | |
| st = json.loads(state_json) if state_json else {} | |
| w, h = RATIOS.get(st.get("aspect", "1:1"), (1024, 1024)) | |
| ref = 12 if st.get("ref_image") else 0 # i2i adds a VAE encode | |
| except Exception: | |
| w, h, ref = 1024, 1024, 0 | |
| px = w * h | |
| # Distilled flow-map model: single forward per step (no CFG), so cheaper/step. | |
| return int(min(300, 40 + ref + DEFAULT_STEPS * 1.6 * max(1.0, px / (1024 * 1024)))) | |
| def _generate(state_json): | |
| try: | |
| st = json.loads(state_json) if state_json else {} | |
| except Exception as e: | |
| raise gr.Error(f"Bad canvas state: {e}") | |
| elements = st.get("elements") or [] | |
| scene = st.get("scene") or "" | |
| aspect = st.get("aspect") or "1:1" | |
| # `generate` may have pre-upsampled the prompt (off-GPU); use it if present. | |
| full_prompt = st.get("_final_prompt") or _build_prompt(scene, elements) | |
| if not full_prompt.strip(): | |
| raise gr.Error("Add at least a scene prompt or one described element.") | |
| seed = st.get("seed") | |
| seed = int(seed) if isinstance(seed, (int, float)) and seed >= 0 else random.randint(0, MAX_SEED) | |
| ref = _decode_ref(st.get("ref_image")) | |
| # Distilled flow-map model has no guider / guidance. | |
| kwargs = dict( | |
| prompt=full_prompt, | |
| num_inference_steps=DEFAULT_STEPS, | |
| generator=torch.Generator().manual_seed(seed), | |
| output="images", | |
| ) | |
| if ref is not None: | |
| # i2i: pass the reference; the model keeps its aspect (like the PR examples), | |
| # so don't force height/width. | |
| kwargs["image"] = ref | |
| w, h = ref.size | |
| else: | |
| w, h = RATIOS.get(aspect, (1024, 1024)) | |
| kwargs["height"], kwargs["width"] = h, w | |
| image = PIPE(**kwargs)[0] | |
| if torch.cuda.is_available(): | |
| torch.cuda.synchronize() | |
| w, h = image.size | |
| buf = io.BytesIO() | |
| image.save(buf, format="WEBP", quality=92) | |
| data_uri = "data:image/webp;base64," + base64.b64encode(buf.getvalue()).decode() | |
| print(f"[app] generate {w}x{h} steps={DEFAULT_STEPS} seed={seed} i2i={ref is not None} " | |
| f"elements={len(elements)} prompt_len={len(full_prompt)}", flush=True) | |
| return json.dumps({ | |
| "image": data_uri, | |
| "aspect": aspect, | |
| "w": w, "h": h, | |
| "seed": seed, | |
| "i2i": ref is not None, | |
| "elements": [{"id": e.get("id"), "bbox": e.get("bbox"), "color": e.get("color")} | |
| for e in elements if e.get("bbox")], | |
| "prompt": full_prompt, | |
| }) | |
| _generate_gpu = spaces.GPU(_generate, duration=_duration) if spaces is not None else _generate | |
| # ---- lazy example cache (gradio cache_examples="lazy" style) ----------------- | |
| # A deterministic request (fixed seed, no reference image) is cached to disk on | |
| # the first generation, so later identical requests - i.e. any user opening the | |
| # same example - are served from the cache with no GPU. Custom/edited generations | |
| # use a random seed (seed < 0) and are never cached. | |
| CACHE_DIR = os.environ.get( | |
| "F3_EXAMPLE_CACHE", os.path.join(os.path.dirname(os.path.abspath(__file__)), "example_cache")) | |
| os.makedirs(CACHE_DIR, exist_ok=True) | |
| _CACHE_MEM = {} | |
| def _has_boxes(st): | |
| return any((e.get("desc") or "").strip() for e in (st.get("elements") or [])) | |
| def _cache_key(st): | |
| if st.get("ref_image"): | |
| return None # i2i is not a fixed example | |
| if st.get("prompt_upsampling") and not _has_boxes(st): | |
| return None # VLM upsampling is non-deterministic -> don't cache | |
| seed = st.get("seed") | |
| if not (isinstance(seed, (int, float)) and seed >= 0): | |
| return None # random seed -> not a reproducible example | |
| full_prompt = _build_prompt(st.get("scene") or "", st.get("elements") or []) | |
| if not full_prompt.strip(): | |
| return None | |
| sig = f"{REPO}|{DEFAULT_STEPS}|{st.get('aspect') or '1:1'}|{int(seed)}|{full_prompt}" | |
| return hashlib.sha256(sig.encode("utf-8")).hexdigest()[:24] | |
| def _cache_get(key): | |
| if key in _CACHE_MEM: | |
| return _CACHE_MEM[key] | |
| fp = os.path.join(CACHE_DIR, key + ".json") | |
| if os.path.exists(fp): | |
| try: | |
| data = Path(fp).read_text() | |
| _CACHE_MEM[key] = data | |
| return data | |
| except Exception: | |
| return None | |
| return None | |
| def _cache_put(key, result): | |
| _CACHE_MEM[key] = result | |
| try: | |
| tmp = os.path.join(CACHE_DIR, key + ".json.tmp") | |
| Path(tmp).write_text(result) | |
| os.replace(tmp, os.path.join(CACHE_DIR, key + ".json")) | |
| except Exception as e: | |
| print(f"[app] example cache write failed: {e!r}", flush=True) | |
| def generate(state_json): | |
| try: | |
| st = json.loads(state_json) if state_json else {} | |
| except Exception: | |
| st = {} | |
| # Optional VLM prompt upsampling, done OFF-GPU before allocation. A prompt that | |
| # carries a box table (layout) is sent as-is, matching the klein space. | |
| if st.get("prompt_upsampling") and not _has_boxes(st): | |
| base = _build_prompt(st.get("scene") or "", st.get("elements") or []) | |
| if base.strip(): | |
| ref = _decode_ref(st.get("ref_image")) | |
| up = _upsample_prompt(base, [ref] if ref is not None else None) | |
| if up and up.strip(): | |
| st["_final_prompt"] = up | |
| state_json = json.dumps(st) | |
| print(f"[app] upsampled prompt -> {up[:90]!r}", flush=True) | |
| key = _cache_key(st) | |
| if key: | |
| cached = _cache_get(key) | |
| if cached is not None: | |
| print(f"[app] example cache HIT {key}", flush=True) | |
| return cached | |
| result = _generate_gpu(state_json) | |
| if key: | |
| _cache_put(key, result) | |
| print(f"[app] example cache STORE {key}", flush=True) | |
| return result | |
| # --------------------------------------------------------------------------- | |
| # Preset scenes (the top tabs), reconstructed from BFL's FLUX.3 layout examples. | |
| # bbox is [y0, x0, y1, x1] normalized 0-1000. | |
| # --------------------------------------------------------------------------- | |
| PRESETS = { | |
| "Le Festival du Soleil": { | |
| "aspect": "3:4", | |
| "scene": "A glowing concrete dome rises from a twilight bay, a crowd on the beach before it.", | |
| "elements": [ | |
| {"id": "Fr_Text_1", "bbox": [90, 230, 230, 780], | |
| "desc": "\"LE FESTIVAL DU SOLEIL\" written in a thin, elegant, serif typeface in a light cream color."}, | |
| {"id": "dome_1", "bbox": [250, 150, 650, 850], "desc": "a massive, smooth parabolic dome of pale concrete"}, | |
| {"id": "town_1", "bbox": [250, 640, 430, 900], "desc": "faint lights and small buildings at the foot of the hills"}, | |
| {"id": "swimmers_1", "bbox": [580, 200, 720, 800], | |
| "desc": "dozens of small, silhouetted figures scattered in the dark water, wading"}, | |
| {"id": "crowd_1", "bbox": [740, 0, 1000, 1000], | |
| "desc": "a large crowd of people seated on the beach in casual, light-colored summer attire"}, | |
| ], | |
| }, | |
| "Five frames of winter": { | |
| "aspect": "16:9", | |
| "scene": "Five vertical frames of a quiet winter day, left to right from dawn to dusk.", | |
| "elements": [ | |
| {"id": "frame_1", "bbox": [0, 0, 1000, 190], "desc": "a bare birch forest at pale blue dawn, frost on every branch"}, | |
| {"id": "frame_2", "bbox": [0, 200, 1000, 390], "desc": "a frozen lake under flat grey light, a lone figure skating"}, | |
| {"id": "frame_3", "bbox": [0, 400, 1000, 590], "desc": "heavy snowfall over a red wooden cabin with a lit window"}, | |
| {"id": "frame_4", "bbox": [0, 600, 1000, 790], "desc": "a snowy pine ridge at golden hour, long blue shadows"}, | |
| {"id": "frame_5", "bbox": [0, 800, 1000, 1000], "desc": "the same valley at dusk, deep indigo sky and the first stars"}, | |
| ], | |
| }, | |
| "Knitted iceberg village": { | |
| "aspect": "4:3", | |
| "scene": "A knitted diorama: three cable-knit icebergs with tiny houses, a banner and a magenta whale tail.", | |
| "elements": [ | |
| {"id": "En_Text_1", "bbox": [130, 220, 220, 780], | |
| "desc": "The exact words \"KNITTED ICEBERG VILLAGE\" embroidered in thick, raised navy-blue yarn across a banner."}, | |
| {"id": "iceberg_3", "bbox": [200, 300, 650, 700], | |
| "desc": "The largest central iceberg, a bulky mound of white and pale grey ribbed knitting, dominating the midground with thick, vertical columns of stitches."}, | |
| {"id": "iceberg_1", "bbox": [230, 60, 650, 320], | |
| "desc": "A conical soft sculpture made of stark white, chunky roving yarn in a thick cable-knit pattern. The left side is brightly lit, while the right side falls into deep, fuzzy shadow."}, | |
| {"id": "iceberg_2", "bbox": [230, 680, 640, 960], | |
| "desc": "A tall, asymmetrical peak of white cable-knit yarn, featuring a few visibly dropped stitches near the base and slightly uneven tension in the cables."}, | |
| {"id": "whale_tail_1", "bbox": [500, 380, 850, 620], | |
| "desc": "A giant whale tail knitted from bright magenta and coral-pink yarn, bursting vertically from the teal sea."}, | |
| ], | |
| }, | |
| "Up from the subway": { | |
| "aspect": "3:2", | |
| "scene": "Looking up a subway staircase at dusk, a blurred figure climbing toward the skyline.", | |
| "elements": [ | |
| {"id": "building_1", "bbox": [50, 120, 630, 470], | |
| "desc": "a modern, red-brick high-rise skyscraper stretching into the sky"}, | |
| {"id": "building_2", "bbox": [0, 450, 650, 850], | |
| "desc": "a tall, classical white stone skyscraper with a tiered, set-back top"}, | |
| {"id": "person_1", "bbox": [300, 380, 820, 640], | |
| "desc": "a heavily blurred, dark shape of a person seen from behind"}, | |
| {"id": "stairs_1", "bbox": [600, 200, 1000, 800], | |
| "desc": "a flight of concrete subway stairs filling the bottom center of the frame"}, | |
| {"id": "En_Text_1", "bbox": [300, 760, 640, 1000], | |
| "desc": "a partially visible, glowing green and white sign on the building"}, | |
| ], | |
| }, | |
| } | |
| # A fixed seed per example, so its lazily-cached render is deterministic and the | |
| # cache key is stable across restarts. Order is stable -> seeds are stable. | |
| for _i, _name in enumerate(PRESETS): | |
| PRESETS[_name].setdefault("seed", 1000 + _i) | |
| RATIO_LIST = list(RATIOS.keys()) | |
| CONFIG_JS = ( | |
| "<script>window.F3_PRESETS = " + json.dumps(PRESETS) + ";" | |
| "window.F3_RATIOS = " + json.dumps(RATIO_LIST) + ";" | |
| "window.F3_LINKS = " + json.dumps({"distilled": LINK_DISTILLED, "base": LINK_BASE, | |
| "code": LINK_CODE, "boxes": LINK_BOXES}) + ";" | |
| "window.F3_PRESET_ORDER = " + json.dumps(list(PRESETS.keys())) + ";</script>" | |
| ) | |
| # Styles + behavior live in <head>; the component mounts into #f3-root (gr.HTML). | |
| STYLE = """ | |
| <style> | |
| #f3-root, #f3-root * { box-sizing: border-box; } | |
| #f3-root { | |
| --bg:#09090b; --panel:#101013; --panel2:#0c0c0f; --line:#26262b; --line2:#1b1b1f; | |
| --txt:#e7e7ea; --dim:#8a8a93; --dim2:#5f5f68; --violet:#8b7cf6; --violetbg:rgba(139,124,246,.14); | |
| --green:#3fd19b; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; | |
| font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif; | |
| color:var(--txt); width:100%; | |
| } | |
| #f3-root .tabs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line2); | |
| border-radius:12px;padding:5px;width:max-content;max-width:100%;overflow:auto;margin-bottom:14px;} | |
| #f3-root .tab{padding:9px 16px;border-radius:8px;color:var(--dim);font-size:14px;cursor:pointer; | |
| white-space:nowrap;transition:.15s;} | |
| #f3-root .tab:hover{color:var(--txt);} | |
| #f3-root .tab.active{background:#222228;color:var(--txt);} | |
| #f3-root .main{display:grid;grid-template-columns:1fr 390px;gap:16px;align-items:start;} | |
| @media (max-width:980px){#f3-root .main{grid-template-columns:1fr;}} | |
| #f3-root .canvas-wrap{background:var(--panel2);border:1px solid var(--line2);border-radius:14px; | |
| padding:22px;position:relative;min-height:560px; | |
| background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:17px 17px;} | |
| #f3-root .board{position:relative;margin:0 auto;background-color:#0b0b0e;border:1px solid #34343c; | |
| box-shadow:0 0 0 1px #000 inset; user-select:none; touch-action:none;} | |
| #f3-root .board.empty{background-color:#0b0b0e;} | |
| #f3-root .board img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:1px;} | |
| #f3-root .ratio-tag{position:absolute;left:4px;bottom:-24px;color:var(--dim);font:12px/1 var(--mono);} | |
| #f3-root .board-tools{position:absolute;right:22px;bottom:22px;display:flex;gap:8px;align-items:center;z-index:30;} | |
| #f3-root .btn{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line); | |
| color:var(--dim);border-radius:9px;padding:8px 13px;font-size:13px;cursor:pointer;transition:.15s;} | |
| #f3-root .btn:hover{color:var(--txt);border-color:#3a3a42;} | |
| #f3-root .btn.on{color:var(--txt);} | |
| #f3-root .toggle{width:34px;height:19px;border-radius:12px;background:#2a2a30;position:relative;transition:.15s;flex:none;} | |
| #f3-root .toggle::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%; | |
| background:#777;transition:.15s;} | |
| #f3-root .btn.on .toggle{background:var(--violet);} | |
| #f3-root .btn.on .toggle::after{left:17px;background:#fff;} | |
| #f3-root .box{position:absolute;border:1.5px solid var(--violet);background:var(--violetbg);cursor:move;} | |
| #f3-root .box.sel{box-shadow:0 0 0 1px var(--violet);} | |
| #f3-root .box .tag{position:absolute;left:-1px;top:-22px;display:flex;gap:7px;align-items:center; | |
| background:var(--violet);color:#0a0a0c;font:600 11px/1.4 var(--mono);padding:3px 7px;border-radius:4px; | |
| white-space:nowrap;max-width:420px;} | |
| #f3-root .box .tag .id{outline:none;} | |
| #f3-root .box .tag .coords{color:rgba(10,10,12,.62);font-weight:500;} | |
| #f3-root .box .desc{position:absolute;inset:7px;overflow:auto;color:var(--txt);font-size:12.5px;line-height:1.35; | |
| outline:none;background:transparent;} | |
| #f3-root .box .desc:empty::before{content:'describe this element…';color:var(--dim2);} | |
| #f3-root .box .rm{position:absolute;right:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#222; | |
| border:1px solid var(--line);color:var(--dim);font-size:12px;line-height:16px;text-align:center;cursor:pointer; | |
| display:none;} | |
| #f3-root .box:hover .rm{display:block;} | |
| #f3-root .box .h{position:absolute;width:10px;height:10px;background:#0b0b0e;border:1.5px solid var(--violet);border-radius:2px;} | |
| #f3-root .box .h.se{right:-6px;bottom:-6px;cursor:se-resize;} | |
| #f3-root .box .h.ne{right:-6px;top:-6px;cursor:ne-resize;} | |
| #f3-root .box .h.sw{left:-6px;bottom:-6px;cursor:sw-resize;} | |
| #f3-root .box .h.nw{left:-6px;top:-6px;cursor:nw-resize;} | |
| #f3-root .board.rendered .box{background:transparent;} | |
| #f3-root .board.rendered .box .desc{display:none;} | |
| #f3-root .board.hideboxes .box{display:none;} | |
| #f3-root .board .hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; | |
| color:var(--dim2);font-size:13px;text-align:center;padding:30px;pointer-events:none;} | |
| #f3-root .board .spin{position:absolute;inset:0;display:none;flex-direction:column;gap:15px; | |
| align-items:center;justify-content:center;background:rgba(7,7,10,.86);backdrop-filter:blur(4px); | |
| -webkit-backdrop-filter:blur(4px);color:var(--txt);z-index:40;} | |
| #f3-root .board.busy .spin{display:flex;} | |
| #f3-root .board .spin .spinner{width:38px;height:38px;border-radius:50%; | |
| border:3px solid rgba(255,255,255,.16);border-top-color:var(--violet);animation:f3spin .8s linear infinite;} | |
| #f3-root .board .spin .spinlabel{font-size:15.5px;font-weight:650;letter-spacing:.01em; | |
| animation:f3pulse 1.3s ease-in-out infinite;} | |
| @keyframes f3spin{to{transform:rotate(360deg);}} | |
| @keyframes f3pulse{0%,100%{opacity:.7;}50%{opacity:1;}} | |
| #f3-root .side{background:var(--panel);border:1px solid var(--line2);border-radius:14px;overflow:hidden;} | |
| #f3-root .step{padding:15px 18px;border-bottom:1px solid var(--line2);cursor:pointer;} | |
| #f3-root .step:last-child{border-bottom:none;} | |
| #f3-root .step .row{display:flex;gap:14px;align-items:center;} | |
| #f3-root .step .n{font:12px/1 var(--mono);color:var(--dim2);} | |
| #f3-root .step .t{font-size:15px;color:var(--dim);} | |
| #f3-root .step.active{background:#17171b;} | |
| #f3-root .step.active .t{color:var(--txt);} | |
| #f3-root .step .hint{margin:9px 0 0 26px;color:var(--dim);font-size:13px;line-height:1.45;display:none;} | |
| #f3-root .step.active .hint{display:block;} | |
| #f3-root .summary{border-top:1px solid var(--line2);padding:16px 18px;max-height:230px;overflow:auto;} | |
| #f3-root .summary .e{margin-bottom:13px;} | |
| #f3-root .summary .e .h{font:600 12.5px/1.5 var(--mono);color:var(--violet);} | |
| #f3-root .summary .e .h .c{color:var(--dim2);font-weight:500;} | |
| #f3-root .summary .e .d{color:var(--dim);font-size:13px;line-height:1.4;} | |
| #f3-root .summary .empty{color:var(--dim2);font-size:13px;} | |
| #f3-root .scene{border-top:1px solid var(--line2);padding:16px 18px;} | |
| #f3-root .scene label{display:block;font:11px/1 var(--mono);letter-spacing:.08em;color:var(--dim2);margin-bottom:9px;} | |
| #f3-root .scene textarea{width:100%;background:transparent;border:none;color:var(--txt);font-size:15.5px; | |
| line-height:1.4;resize:none;outline:none;min-height:46px;font-family:inherit;} | |
| #f3-root .scene textarea::placeholder{color:var(--dim2);} | |
| #f3-root .ratios{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 2px 26px;} | |
| #f3-root .chip{padding:6px 11px;border:1px solid var(--line);border-radius:7px;color:var(--dim); | |
| font:12px/1 var(--mono);cursor:pointer;} | |
| #f3-root .chip.sel{border-color:var(--violet);color:var(--txt);background:var(--violetbg);} | |
| #f3-root .gen{margin:12px 18px 18px;} | |
| #f3-root .genbtn{width:100%;background:var(--violet);color:#0a0a0c;border:none;border-radius:10px; | |
| padding:13px;font-size:14.5px;font-weight:600;cursor:pointer;transition:.15s;} | |
| #f3-root .genbtn:hover{filter:brightness(1.08);} | |
| #f3-root .genbtn[disabled]{opacity:.55;cursor:default;} | |
| #f3-root .table-bar{margin-top:16px;background:var(--panel);border:1px solid var(--line2);border-radius:12px; | |
| padding:16px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;} | |
| #f3-root .table-bar .lab{font:12px/1 var(--mono);letter-spacing:.06em;color:var(--dim);} | |
| #f3-root .table-bar .cnt{font:12px/1 var(--mono);color:var(--dim2);} | |
| #f3-root .etable{margin-top:8px;background:var(--panel);border:1px solid var(--line2);border-radius:12px; | |
| overflow:auto;display:none;} | |
| #f3-root .etable.open{display:block;} | |
| #f3-root table{width:100%;border-collapse:collapse;font-size:13px;} | |
| #f3-root th,#f3-root td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line2);vertical-align:top;} | |
| #f3-root th{font:11px/1 var(--mono);letter-spacing:.06em;color:var(--dim2);text-transform:uppercase;} | |
| #f3-root td.id{font:600 12.5px/1.4 var(--mono);color:var(--violet);white-space:nowrap;} | |
| #f3-root td.bb{font:12px/1.4 var(--mono);color:var(--dim);white-space:nowrap;} | |
| #f3-root td.d{color:var(--txt);} | |
| </style> | |
| """ | |
| # Selection accent (green) + small extras, appended to the head styles. | |
| STYLE2 = """ | |
| <style> | |
| #f3-root .box.sel{border-color:var(--green);} | |
| #f3-root .box.sel .tag{background:var(--green);} | |
| #f3-root .box.sel .tag .coords{color:rgba(10,12,11,.6);} | |
| #f3-root .box.sel .h{border-color:var(--green);} | |
| /* title */ | |
| #f3-root .titlebar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 16px;} | |
| #f3-root .titlebar .tb-text{min-width:0;} | |
| #f3-root .titlebar h1{margin:0 0 4px;font-size:22px;font-weight:650;color:var(--txt);letter-spacing:-.01em;} | |
| #f3-root .titlebar p{margin:0;color:var(--dim);font-size:13.5px;max-width:760px;line-height:1.5;} | |
| /* klein-style button links */ | |
| #f3-root .f3-links{display:flex;gap:8px;flex-wrap:wrap;} | |
| #f3-root .f3-links a,#f3-root .f3-links a:visited{text-decoration:none;font-size:12.5px;padding:6px 12px;border-radius:8px; | |
| border:1px solid var(--line2);color:var(--txt);background:var(--panel);white-space:nowrap;transition:border-color .12s,color .12s;} | |
| #f3-root .f3-links a:hover{border-color:var(--violet);color:var(--violet);} | |
| /* prompt-upsampling toggle (under the prompt in the input bar) */ | |
| #f3-root .ib-up{margin-top:9px;} | |
| #f3-root .ib-up .btn{font-size:12px;color:var(--dim);} | |
| #f3-root .ib-up .btn.on{color:var(--txt);} | |
| #f3-root .ib-up .btn .hintq{color:var(--dim2);font-size:11px;} | |
| /* reference image block (i2i) */ | |
| #f3-root .refblock{padding:14px 18px;border-bottom:1px solid var(--line2);} | |
| #f3-root .refblock>label{display:block;font:600 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--dim2);margin-bottom:9px;} | |
| #f3-root .refblock .opt{color:var(--dim);font-weight:500;letter-spacing:0;} | |
| #f3-root .refbox{display:flex;gap:10px;align-items:center;} | |
| #f3-root .refthumb{width:52px;height:52px;flex:none;border-radius:8px;border:1px dashed #3a3a42;background:#0b0b0e center/cover no-repeat;} | |
| #f3-root .refbox.has .refthumb{border-style:solid;border-color:var(--violet);} | |
| #f3-root .refcta{display:flex;flex-direction:column;gap:6px;} | |
| #f3-root .refbtn,#f3-root .refclear{text-align:left;background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:7px;padding:6px 10px;font-size:12.5px;cursor:pointer;} | |
| #f3-root .refbtn:hover,#f3-root .refclear:hover{color:var(--txt);border-color:#3a3a42;} | |
| #f3-root .refclear{display:none;} | |
| #f3-root .refbox.has .refclear{display:block;} | |
| /* board shows the reference while editing — contain (not cover) so the WHOLE image | |
| is resized to fit the canvas, never cropped. */ | |
| #f3-root .board{background-size:contain;background-position:center;background-repeat:no-repeat;} | |
| /* left column stacks the board + the examples row directly under it; | |
| the gap clears the ratio tag that sits just below the board. */ | |
| #f3-root .leftcol{display:flex;flex-direction:column;gap:40px;min-width:0;} | |
| /* examples row (directly below the canvas), a clean 2x2 of the presets */ | |
| #f3-root .examples{margin-top:0;} | |
| #f3-root .ex-head{font:600 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--dim2);margin-bottom:10px;} | |
| #f3-root .ex-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} | |
| @media (max-width:560px){#f3-root .ex-row{grid-template-columns:1fr;}} | |
| #f3-root .excard{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:12px 14px;cursor:pointer;transition:border-color .12s,background .12s;} | |
| #f3-root .excard:hover{border-color:#3a3a42;background:#17171b;} | |
| #f3-root .excard.active{border-color:var(--violet);} | |
| #f3-root .exname{color:var(--txt);font-size:13.5px;font-weight:550;margin-bottom:3px;} | |
| #f3-root .exmeta{color:var(--dim);font:11px/1.3 var(--mono);} | |
| /* ---- INPUT BAR (above the canvas): reference image + prompt + generate ---- | |
| Deliberately a different colour/material from the dark canvas so the "what do | |
| I type / drop here" controls read as a separate, obvious zone. */ | |
| #f3-root .inputbar{display:flex;gap:18px;align-items:stretch; | |
| background:linear-gradient(180deg,#1c1c28,#15151f); | |
| border:1px solid #33334e;border-left:3px solid var(--violet); | |
| border-radius:14px;padding:15px 17px;margin:0 0 20px;} | |
| #f3-root .ib-lab{display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;color:#b9b2e6;margin-bottom:9px;} | |
| #f3-root .ib-lab .opt{color:var(--dim2);font-weight:500;letter-spacing:0;} | |
| #f3-root .ib-ref{flex:none;} | |
| #f3-root .ib-prompt{flex:1;min-width:0;display:flex;flex-direction:column;} | |
| #f3-root .ib-prompt textarea{width:100%;flex:1;background:#0e0e15;border:1px solid #30304a;border-radius:9px; | |
| color:var(--txt);font-size:15px;line-height:1.4;resize:none;outline:none;min-height:56px;padding:10px 12px; | |
| font-family:inherit;transition:border-color .12s;} | |
| #f3-root .ib-prompt textarea:focus{border-color:var(--violet);} | |
| #f3-root .ib-prompt textarea::placeholder{color:var(--dim2);} | |
| #f3-root .ib-gen{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;flex:none;} | |
| #f3-root .ib-gen .genbtn{width:auto;padding:0 26px;height:52px;white-space:nowrap;} | |
| #f3-root .ib-gen .clearBtn{width:auto;padding:9px 26px;background:transparent;border:1px solid var(--line); | |
| color:var(--dim);border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:.15s;} | |
| #f3-root .ib-gen .clearBtn:hover{color:var(--txt);border-color:#3a3a42;} | |
| @media (max-width:760px){#f3-root .inputbar{flex-direction:column;align-items:stretch;} | |
| #f3-root .ib-gen .genbtn{width:100%;}} | |
| </style> | |
| """ | |
| SCRIPT = r""" | |
| <script> | |
| (function(){ | |
| const NS = window.F3 = window.F3 || {}; | |
| const RATIOS = {"1:1":[1024,1024],"3:2":[1216,816],"2:3":[816,1216],"4:3":[1152,864], | |
| "3:4":[864,1152],"16:9":[1344,768],"9:16":[768,1344]}; | |
| const STEP_HINTS = [ | |
| ["Aspect ratio","Pick the frame your scene lives in."], | |
| ["Elements","Drag out a box for every element that matters, then describe what goes in it."], | |
| ["Prompt","One line describing the whole scene — or the edit, if you added a reference image."], | |
| ]; | |
| let S = {aspect:"1:1", elements:[], scene:"", seed:-1, rendered:false, step:1, showBoxes:true, | |
| refImage:null, refW:0, refH:0, upsample:false}; | |
| let seq = 0, sel = null; | |
| function clamp(v,a,b){return Math.max(a,Math.min(b,v));} | |
| function uid(base){ base=(base||"element").replace(/[^A-Za-z0-9_]+/g,"_").replace(/^_+|_+$/g,"")||"element"; | |
| let id=base, n=1; const ids=new Set(S.elements.map(e=>e.id)); | |
| while(ids.has(id)){ id=base+"_"+(++n);} return id; } | |
| // gradio may put elem_id on the field/button itself OR on a wrapper that contains it. | |
| function fieldEl(id){ | |
| const w=document.getElementById(id); if(!w) return null; | |
| return w.matches('textarea,input') ? w : w.querySelector('textarea,input'); | |
| } | |
| function genButton(){ | |
| const g=document.getElementById('f3-gen'); if(!g) return null; | |
| return g.tagName==='BUTTON' ? g : g.querySelector('button'); | |
| } | |
| function setHidden(id,val){ | |
| const el=fieldEl(id); if(!el) return; | |
| const proto = el.tagName==='TEXTAREA'?window.HTMLTextAreaElement.prototype:window.HTMLInputElement.prototype; | |
| const setter=Object.getOwnPropertyDescriptor(proto,'value').set; | |
| setter.call(el,val); el.dispatchEvent(new Event('input',{bubbles:true})); | |
| } | |
| function syncState(){ | |
| setHidden('f3-state', JSON.stringify({ | |
| aspect:S.aspect, scene:S.scene, seed:S.seed, ref_image:S.refImage, prompt_upsampling:S.upsample, | |
| elements:S.elements.map(e=>({id:e.id,bbox:e.bbox,desc:e.desc,color:e.color})), | |
| })); | |
| } | |
| // ---------- board geometry ---------- | |
| // With a reference image the board (and output) follow the image's aspect; otherwise | |
| // the chosen ratio chip. | |
| function aspectWH(){ return S.refImage ? [S.refW||1, S.refH||1] : RATIOS[S.aspect]; } | |
| function boardSize(){ | |
| const wrap=NS.el.wrap; const availW=wrap.clientWidth-44; const maxH=600; | |
| const [W,H]=aspectWH(); let w=availW, h=w*H/W; | |
| if(h>maxH){ h=maxH; w=h*W/H; } if(w>availW){ w=availW; h=w*H/W; } | |
| return [Math.round(w),Math.round(h)]; | |
| } | |
| function layoutBoard(){ | |
| const [w,h]=boardSize(); const b=NS.el.board; b.style.width=w+'px'; b.style.height=h+'px'; | |
| NS.el.ratioTag.textContent = S.refImage ? ('ref '+S.refW+'×'+S.refH) : S.aspect; | |
| b.style.backgroundImage = (S.refImage && !S.rendered) ? ('url('+S.refImage+')') : ''; | |
| } | |
| // ---------- rendering ---------- | |
| function boxEl(e){ | |
| const d=document.createElement('div'); d.className='box'; d.dataset.id=e.id; | |
| d.innerHTML='<div class="tag"><span class="id" contenteditable="true" spellcheck="false"></span>' | |
| +'<span class="coords"></span></div>' | |
| +'<div class="desc" contenteditable="true" spellcheck="false"></div>' | |
| +'<div class="rm">×</div>' | |
| +'<div class="h nw"></div><div class="h ne"></div><div class="h sw"></div><div class="h se"></div>'; | |
| d.querySelector('.id').textContent=e.id; | |
| d.querySelector('.desc').textContent=e.desc||''; | |
| wireBox(d,e); return d; | |
| } | |
| function posBox(d,e){ | |
| const [y0,x0,y1,x1]=e.bbox; | |
| d.style.left=(x0/10)+'%'; d.style.top=(y0/10)+'%'; | |
| d.style.width=((x1-x0)/10)+'%'; d.style.height=((y1-y0)/10)+'%'; | |
| d.querySelector('.coords').textContent='['+[y0,x0,y1,x1].map(Math.round).join(', ')+']'; | |
| } | |
| function renderBoxes(){ | |
| const b=NS.el.board; | |
| b.querySelectorAll('.box').forEach(n=>n.remove()); | |
| S.elements.forEach(e=>{ const d=boxEl(e); posBox(d,e); if(e===sel)d.classList.add('sel'); b.appendChild(d); }); | |
| } | |
| function renderSummary(){ | |
| const s=NS.el.summary; | |
| if(!S.elements.length){ s.innerHTML='<div class="empty">No elements yet — drag a box on the canvas.</div>'; return; } | |
| s.innerHTML=S.elements.map(e=>'<div class="e"><div class="h">'+esc(e.id) | |
| +' <span class="c">['+e.bbox.map(Math.round).join(', ')+']</span></div>' | |
| +'<div class="d">'+esc(e.desc||'')+'</div></div>').join(''); | |
| } | |
| function renderTable(){ | |
| NS.el.cnt.textContent=S.elements.length+' ROW'+(S.elements.length===1?'':'S'); | |
| const body=S.elements.map(e=>'<tr><td class="id">'+esc(e.id)+'</td><td class="bb">[' | |
| +e.bbox.map(Math.round).join(', ')+']</td><td class="d">'+esc(e.desc||'')+'</td></tr>').join(''); | |
| NS.el.etable.innerHTML='<table><thead><tr><th>Element</th><th>bbox [y0,x0,y1,x1]</th><th>Description</th></tr></thead><tbody>' | |
| +(body||'<tr><td colspan="3" class="d" style="color:var(--dim2)">empty</td></tr>')+'</tbody></table>'; | |
| } | |
| function renderSteps(){ | |
| // i2i (a reference is loaded) takes the input image's aspect ratio, so the | |
| // aspect-ratio step/chips only make sense for t2i — hide them when editing. | |
| const i2i = !!S.refImage; | |
| if(NS.el.steps[0]) NS.el.steps[0].style.display = i2i ? 'none' : ''; | |
| NS.el.steps.forEach((st,i)=>st.classList.toggle('active', (i+1)===S.step)); | |
| NS.el.ratios.style.display = (!i2i && S.step===1)?'flex':'none'; | |
| } | |
| function renderAll(){ layoutBoard(); renderBoxes(); renderSummary(); renderTable(); renderSteps(); | |
| NS.el.ratioChips.forEach(c=>c.classList.toggle('sel', c.dataset.r===S.aspect)); | |
| const hint=NS.el.board.querySelector('.hint'); if(hint) hint.style.display=(!S.rendered && !S.refImage && S.elements.length===0)?'flex':'none'; | |
| syncState(); } | |
| function esc(s){return (s||'').replace(/[&<>]/g,m=>({'&':'&','<':'<','>':'>'}[m]));} | |
| function select(e){ sel=e; NS.el.board.querySelectorAll('.box').forEach(d=> | |
| d.classList.toggle('sel', d.dataset.id===(e&&e.id))); } | |
| // Editing the layout after a render drops the stale output image and returns the | |
| // board to edit mode, so the boxes are movable/addable and a re-generate is fresh. | |
| function invalidate(){ | |
| if(!S.rendered) return; | |
| S.rendered=false; S.seed=-1; | |
| const img=NS.el.board.querySelector('img'); if(img)img.remove(); | |
| NS.el.board.classList.remove('rendered','hideboxes'); | |
| if(NS.el.toggleBtn) NS.el.toggleBtn.style.display='none'; | |
| if(NS.el.reuseBtn) NS.el.reuseBtn.style.display='none'; | |
| } | |
| // ---------- box interactions ---------- | |
| function px2norm(ev){ | |
| const r=NS.el.board.getBoundingClientRect(); | |
| return [clamp((ev.clientY-r.top)/r.height*1000,0,1000), clamp((ev.clientX-r.left)/r.width*1000,0,1000)]; | |
| } | |
| function wireBox(d,e){ | |
| const idEl=d.querySelector('.id'), descEl=d.querySelector('.desc'); | |
| d.addEventListener('mousedown',ev=>{ | |
| if(ev.target.classList.contains('h')||ev.target.classList.contains('rm')||ev.target.classList.contains('id')) { select(e); return; } | |
| if(ev.target.classList.contains('desc') && document.activeElement===ev.target) return; // editing: allow caret | |
| select(e); ev.preventDefault(); | |
| const sx=ev.clientX, sy=ev.clientY; let moved=false; const isDesc=ev.target.classList.contains('desc'); | |
| const b=e.bbox.slice(); const p=px2norm(ev); const oy=p[0]-b[0], ox=p[1]-b[1]; | |
| const w=b[3]-b[1], h=b[2]-b[0]; | |
| function mv(ev2){ if(!moved && Math.abs(ev2.clientX-sx)+Math.abs(ev2.clientY-sy)>3) moved=true; | |
| if(moved){ const q=px2norm(ev2); let x0=clamp(q[1]-ox,0,1000-w), y0=clamp(q[0]-oy,0,1000-h); | |
| e.bbox=[y0,x0,y0+h,x0+w]; posBox(d,e); liveMeta(e); } } | |
| function up(){ document.removeEventListener('mousemove',mv); document.removeEventListener('mouseup',up); | |
| if(moved){ invalidate(); renderAll(); } else if(isDesc) descEl.focus(); } | |
| document.addEventListener('mousemove',mv); document.addEventListener('mouseup',up); | |
| }); | |
| d.querySelectorAll('.h').forEach(h=>h.addEventListener('mousedown',ev=>{ | |
| ev.preventDefault(); ev.stopPropagation(); select(e); | |
| startResize(ev,e,d,[...h.classList].find(c=>['nw','ne','sw','se'].includes(c))); | |
| })); | |
| d.querySelector('.rm').addEventListener('click',ev=>{ ev.stopPropagation(); | |
| S.elements=S.elements.filter(x=>x!==e); if(sel===e)sel=null; invalidate(); renderAll(); }); | |
| idEl.addEventListener('blur',()=>{ let v=idEl.textContent.trim().replace(/[^A-Za-z0-9_]+/g,'_'); | |
| if(!v){v=e.id;} if(v!==e.id){ const ids=new Set(S.elements.filter(x=>x!==e).map(x=>x.id)); | |
| let f=v,n=1; while(ids.has(f)){f=v+'_'+(++n);} e.id=f;} idEl.textContent=e.id; renderAll(); }); | |
| idEl.addEventListener('keydown',ev=>{ if(ev.key==='Enter'){ev.preventDefault();idEl.blur();} }); | |
| descEl.addEventListener('input',()=>{ e.desc=descEl.textContent; invalidate(); renderSummaryTable(); syncState(); }); | |
| descEl.addEventListener('focus',()=>select(e)); | |
| } | |
| function renderSummaryTable(){ renderSummary(); renderTable(); } | |
| function startMove(ev,e,d){ | |
| const [y,x]=px2norm(ev); const b=e.bbox.slice(); const oy=y-b[0], ox=x-b[1]; | |
| const w=b[3]-b[1], h=b[2]-b[0]; | |
| function mv(ev2){ const [ny,nx]=px2norm(ev2); let x0=clamp(nx-ox,0,1000-w), y0=clamp(ny-oy,0,1000-h); | |
| e.bbox=[y0,x0,y0+h,x0+w]; posBox(d,e); liveMeta(e); } | |
| function up(){ document.removeEventListener('mousemove',mv); document.removeEventListener('mouseup',up); invalidate(); renderAll(); } | |
| document.addEventListener('mousemove',mv); document.addEventListener('mouseup',up); | |
| } | |
| function startResize(ev,e,d,corner){ | |
| function mv(ev2){ const [ny,nx]=px2norm(ev2); let [y0,x0,y1,x1]=e.bbox; | |
| if(corner.includes('n'))y0=ny; if(corner.includes('s'))y1=ny; | |
| if(corner.includes('w'))x0=nx; if(corner.includes('e'))x1=nx; | |
| e.bbox=[Math.min(y0,y1),Math.min(x0,x1),Math.max(y0,y1),Math.max(x0,x1)]; posBox(d,e); liveMeta(e); } | |
| function up(){ document.removeEventListener('mousemove',mv); document.removeEventListener('mouseup',up); invalidate(); renderAll(); } | |
| document.addEventListener('mousemove',mv); document.addEventListener('mouseup',up); | |
| } | |
| function liveMeta(e){ renderSummary(); renderTable(); } | |
| function startDraw(ev){ | |
| // Draw on the empty board OR on top of a finished render (the result <img> | |
| // covers the board). Drawing over a render clears the stale output so you can | |
| // add more boxes to the layout and re-generate. | |
| const onBoard = (ev.target===NS.el.board) || (S.rendered && ev.target.tagName==='IMG'); | |
| if(!onBoard) return; | |
| invalidate(); | |
| ev.preventDefault(); | |
| const [sy,sx]=px2norm(ev); | |
| const e={id:uid('element'), color:'violet', bbox:[sy,sx,sy,sx], desc:''}; | |
| const d=boxEl(e); NS.el.board.appendChild(d); | |
| function mv(ev2){ const [ny,nx]=px2norm(ev2); | |
| e.bbox=[Math.min(sy,ny),Math.min(sx,nx),Math.max(sy,ny),Math.max(sx,nx)]; posBox(d,e); } | |
| function up(){ document.removeEventListener('mousemove',mv); document.removeEventListener('mouseup',up); | |
| if((e.bbox[2]-e.bbox[0])<30||(e.bbox[3]-e.bbox[1])<30){ d.remove(); return; } | |
| S.elements.push(e); select(e); S.step=2; renderAll(); | |
| const de=NS.el.board.querySelector('.box[data-id="'+e.id+'"] .desc'); if(de)de.focus(); | |
| } | |
| document.addEventListener('mousemove',mv); document.addEventListener('mouseup',up); | |
| } | |
| // ---------- reference image (i2i) ---------- | |
| function clearRef(){ S.refImage=null; S.refW=0; S.refH=0; S.step=1; // back to t2i: aspect step returns | |
| if(NS.el.refThumb){ NS.el.refThumb.style.backgroundImage=''; } | |
| if(NS.el.refBox) NS.el.refBox.classList.remove('has'); | |
| } | |
| function setRef(uri,w,h){ | |
| // Uploading a reference starts a clean edit: drop any preset scene/boxes so the | |
| // user draws fresh regions on their own image. | |
| S.refImage=uri; S.refW=w; S.refH=h; S.rendered=false; sel=null; | |
| S.elements=[]; S.scene=""; S.step=2; | |
| if(NS.el.scene) NS.el.scene.value=""; | |
| (NS.el.exCards||[]).forEach(t=>t.classList.remove('active')); | |
| const img=NS.el.board.querySelector('img'); if(img)img.remove(); | |
| NS.el.board.classList.remove('rendered','hideboxes'); NS.el.toggleBtn.style.display='none'; | |
| if(NS.el.refThumb) NS.el.refThumb.style.backgroundImage='url('+uri+')'; | |
| if(NS.el.refBox) NS.el.refBox.classList.add('has'); | |
| renderAll(); | |
| } | |
| // downscale so the data URI stays light for the state bridge (long side <= 1280), | |
| // and bake the real (orientation-corrected) pixels so the board aspect matches. | |
| function emitRef(srcW,srcH,drawable){ | |
| let w=srcW, h=srcH; const s=Math.min(1,1280/Math.max(w,h)); | |
| w=Math.max(16,Math.round(w*s)); h=Math.max(16,Math.round(h*s)); | |
| const cv=document.createElement('canvas'); cv.width=w; cv.height=h; | |
| cv.getContext('2d').drawImage(drawable,0,0,w,h); | |
| setRef(cv.toDataURL('image/webp',0.9), w, h); | |
| } | |
| function readRefViaImg(file){ | |
| const fr=new FileReader(); | |
| fr.onload=()=>{ const im=new Image(); | |
| im.onload=()=>emitRef(im.naturalWidth,im.naturalHeight,im); im.src=fr.result; }; | |
| fr.readAsDataURL(file); | |
| } | |
| function readRefFile(file){ | |
| if(!file || !/^image\//.test(file.type)) return; | |
| // createImageBitmap applies EXIF orientation, so phone photos don't come out | |
| // rotated/mis-proportioned (which looked like a weird crop under the old path). | |
| if(window.createImageBitmap){ | |
| createImageBitmap(file,{imageOrientation:'from-image'}) | |
| .then(bm=>{ emitRef(bm.width,bm.height,bm); if(bm.close)bm.close(); }) | |
| .catch(()=>readRefViaImg(file)); | |
| return; | |
| } | |
| readRefViaImg(file); | |
| } | |
| // ---------- presets (example row) ---------- | |
| function loadPreset(name){ | |
| const p=window.F3_PRESETS[name]; if(!p) return; | |
| clearRef(); | |
| // Fixed seed so this example's render is deterministic and lazily cacheable. | |
| S.aspect=p.aspect; S.scene=p.scene; S.seed=(p.seed>=0?p.seed:0); S.rendered=false; S.step=2; sel=null; | |
| S.elements=p.elements.map(e=>({id:e.id,color:'violet',bbox:e.bbox.slice(),desc:e.desc})); | |
| NS.el.board.classList.remove('rendered','hideboxes','busy'); | |
| const img=NS.el.board.querySelector('img'); if(img)img.remove(); | |
| NS.el.scene.value=S.scene; NS.el.active=name; | |
| (NS.el.exCards||[]).forEach(t=>t.classList.toggle('active', t.dataset.name===name)); | |
| NS.el.toggleBtn.style.display='none'; | |
| renderAll(); | |
| // Auto-show the example's render: cache HIT returns instantly (no GPU); the | |
| // first visitor to open it generates + caches it (gradio lazy-cache style). | |
| doGenerate(true); | |
| } | |
| // ---------- generate / render ---------- | |
| // fixedSeed=true keeps the current (example) seed so the result is cacheable; | |
| // otherwise re-roll a fresh random seed (custom / replay) and skip the cache. | |
| function doGenerate(fixedSeed){ | |
| if(!S.elements.some(e=>(e.desc||'').trim()) && !(S.scene||'').trim()){ | |
| NS.el.scene.focus(); return; | |
| } | |
| if(!fixedSeed) S.seed=-1; | |
| S.step=3; renderSteps(); syncState(); | |
| NS.el.board.classList.add('busy'); | |
| NS.el.genbtn.setAttribute('disabled',''); | |
| setTimeout(()=>{ const b=genButton(); if(b)b.click(); },70); | |
| clearTimeout(NS._to); NS._to=setTimeout(()=>{ NS.el.board.classList.remove('busy'); | |
| NS.el.genbtn.removeAttribute('disabled'); }, 300000); | |
| } | |
| window.f3_render=function(resStr){ | |
| clearTimeout(NS._to); | |
| NS.el.board.classList.remove('busy'); NS.el.genbtn.removeAttribute('disabled'); | |
| let r; try{ r=JSON.parse(resStr);}catch(e){ return; } | |
| if(!r||!r.image) return; | |
| layoutBoard(); | |
| let img=NS.el.board.querySelector('img'); if(!img){ img=document.createElement('img'); | |
| NS.el.board.insertBefore(img,NS.el.board.firstChild); } img.src=r.image; | |
| S.rendered=true; S.seed=r.seed; | |
| NS.lastResult={image:r.image, w:r.w||0, h:r.h||0}; // for "reuse as input" | |
| NS.el.board.classList.add('rendered'); NS.el.board.classList.remove('hideboxes'); | |
| S.showBoxes=true; updateToggle(); | |
| NS.el.toggleBtn.style.display='inline-flex'; | |
| if(NS.el.reuseBtn) NS.el.reuseBtn.style.display='inline-flex'; | |
| renderBoxes(); | |
| }; | |
| // Reuse the generated output as the i2i reference: it becomes the board image, | |
| // boxes + prompt are cleared (setRef does this), so you can edit it fresh. | |
| function reuseAsInput(){ | |
| if(!NS.lastResult || !NS.lastResult.image) return; | |
| setRef(NS.lastResult.image, NS.lastResult.w||1024, NS.lastResult.h||1024); | |
| if(NS.el.reuseBtn) NS.el.reuseBtn.style.display='none'; | |
| } | |
| // Clear the canvas back to an empty t2i start. | |
| function clearCanvas(){ | |
| clearRef(); | |
| S.elements=[]; S.scene=""; S.seed=-1; S.rendered=false; S.step=1; sel=null; | |
| if(NS.el.scene) NS.el.scene.value=""; | |
| const img=NS.el.board.querySelector('img'); if(img)img.remove(); | |
| NS.el.board.classList.remove('rendered','hideboxes','busy'); | |
| NS.el.toggleBtn.style.display='none'; | |
| if(NS.el.reuseBtn) NS.el.reuseBtn.style.display='none'; | |
| (NS.el.exCards||[]).forEach(t=>t.classList.remove('active')); | |
| renderAll(); | |
| } | |
| function updateToggle(){ | |
| NS.el.toggleBtn.classList.toggle('on',S.showBoxes); | |
| NS.el.board.classList.toggle('hideboxes',!S.showBoxes); | |
| } | |
| // ---------- build DOM ---------- | |
| function build(root){ | |
| const order=window.F3_PRESET_ORDER||Object.keys(window.F3_PRESETS||{}); | |
| root.innerHTML='' | |
| +'<div class="titlebar">' | |
| + '<div class="tb-text"><h1>🦊 FLUX.3 Layout Canvas</h1>' | |
| + '<p>Draw a box for every element, describe it, and the step-distilled FLUX.3 model renders your layout. ' | |
| + 'Upload a reference image to edit it with the same boxes.</p></div>' | |
| + '<div class="f3-links">' | |
| + '<a href="'+((window.F3_LINKS||{}).distilled||'#')+'" target="_blank" rel="noopener">Distilled weights ↗</a>' | |
| + '<a href="'+((window.F3_LINKS||{}).base||'#')+'" target="_blank" rel="noopener">Base weights ↗</a>' | |
| + '<a href="'+((window.F3_LINKS||{}).code||'#')+'" target="_blank" rel="noopener">Code ↗</a>' | |
| + '<a href="'+((window.F3_LINKS||{}).boxes||'#')+'" target="_blank" rel="noopener">Bounding boxes ↗</a>' | |
| + '</div>' | |
| +'</div>' | |
| // INPUT BAR — the type-here / drop-here controls, in their own distinct zone above the canvas | |
| +'<div class="inputbar">' | |
| + '<div class="ib-ref">' | |
| + '<label class="ib-lab">REFERENCE <span class="opt">optional</span></label>' | |
| + '<div class="refbox"><div class="refthumb"></div>' | |
| + '<div class="refcta"><button class="refbtn">Upload / drop</button>' | |
| + '<button class="refclear">Remove</button></div></div>' | |
| + '<input type="file" accept="image/*" class="reffile" style="display:none"></div>' | |
| + '<div class="ib-prompt"><label class="ib-lab">PROMPT</label>' | |
| + '<textarea rows="2" placeholder="Describe the whole scene in one line — or the edit, if you added a reference image."></textarea>' | |
| + '<div class="ib-up"><span class="btn upBtn"><span class="toggle"></span>Enhance prompt ' | |
| + '<span class="hintq">· VLM, text prompts only</span></span></div></div>' | |
| + '<div class="ib-gen"><label class="ib-lab" style="visibility:hidden">GO</label>' | |
| + '<button class="genbtn">Generate</button>' | |
| + '<button class="clearBtn">✕ Clear canvas</button></div>' | |
| +'</div>' | |
| +'<div class="main">' | |
| + '<div class="leftcol">' | |
| + '<div class="canvas-wrap"><div class="board empty"><div class="hint">Drag to draw your first element box, pick an example below, or add a reference image.</div><div class="spin"><div class="spinner"></div><div class="spinlabel">Rendering with FLUX.3…</div></div></div>' | |
| + '<div class="ratio-tag"></div>' | |
| + '<div class="board-tools">' | |
| + '<div class="btn toggleBtn on" style="display:none"><span class="toggle"></span>Bounding boxes</div>' | |
| + '<div class="btn reuseBtn" style="display:none">⟳ Reuse as input</div>' | |
| + '<div class="btn replayBtn">↻ Replay</div>' | |
| + '</div></div>' | |
| + '<div class="examples"><div class="ex-head">EXAMPLES — click to load, or build your own</div><div class="ex-row"></div></div>' | |
| + '</div>' | |
| + '<div class="side">' | |
| + '<div class="steps"></div>' | |
| + '<div class="summary"></div>' | |
| + '</div>' | |
| +'</div>' | |
| +'<div class="table-bar"><span class="lab">+ VIEW THE ELEMENT TABLE</span><span class="cnt">0 ROWS</span></div>' | |
| +'<div class="etable"></div>'; | |
| // example cards (below the canvas, replacing the old top tabs) | |
| const exRow=root.querySelector('.ex-row'); | |
| const exCards=order.map(name=>{ const p=window.F3_PRESETS[name]||{}; | |
| const c=document.createElement('div'); c.className='excard'; c.dataset.name=name; | |
| c.innerHTML='<div class="exname">'+name+'</div>' | |
| +'<div class="exmeta">'+(p.aspect||'')+' · '+((p.elements||[]).length)+' elements</div>'; | |
| c.addEventListener('click',()=>loadPreset(name)); exRow.appendChild(c); return c; }); | |
| // steps | |
| const stepsWrap=root.querySelector('.steps'); const steps=STEP_HINTS.map((h,i)=>{ | |
| const st=document.createElement('div'); st.className='step'; | |
| st.innerHTML='<div class="row"><span class="n">0'+(i+1)+'</span><span class="t">'+h[0]+'</span></div>' | |
| +'<div class="hint">'+h[1]+'</div>'+(i===0?'<div class="ratios"></div>':''); | |
| st.addEventListener('click',()=>{ S.step=i+1; renderSteps(); }); stepsWrap.appendChild(st); return st; }); | |
| // ratio chips in step 1 | |
| const ratiosEl=steps[0].querySelector('.ratios'); | |
| const ratioChips=(window.F3_RATIOS||Object.keys(RATIOS)).map(r=>{ const c=document.createElement('div'); | |
| c.className='chip'; c.dataset.r=r; c.textContent=r; | |
| c.addEventListener('click',ev=>{ ev.stopPropagation(); clearRef(); S.aspect=r; S.rendered=false; | |
| const img=NS.el.board.querySelector('img'); if(img)img.remove(); | |
| NS.el.board.classList.remove('rendered','hideboxes'); NS.el.toggleBtn.style.display='none'; | |
| renderAll(); }); ratiosEl.appendChild(c); return c; }); | |
| NS.el={ root, wrap:root.querySelector('.canvas-wrap'), board:root.querySelector('.board'), | |
| ratioTag:root.querySelector('.ratio-tag'), exCards, steps, ratios:ratiosEl, ratioChips, | |
| summary:root.querySelector('.summary'), scene:root.querySelector('.ib-prompt textarea'), | |
| genbtn:root.querySelector('.genbtn'), toggleBtn:root.querySelector('.toggleBtn'), | |
| replayBtn:root.querySelector('.replayBtn'), cnt:root.querySelector('.table-bar .cnt'), | |
| etable:root.querySelector('.etable'), | |
| reuseBtn:root.querySelector('.reuseBtn'), clearBtn:root.querySelector('.clearBtn'), | |
| upBtn:root.querySelector('.upBtn'), | |
| refBox:root.querySelector('.refbox'), refThumb:root.querySelector('.refthumb'), | |
| reffile:root.querySelector('.reffile') }; | |
| NS.el.board.addEventListener('mousedown',startDraw); | |
| NS.el.scene.addEventListener('input',()=>{ S.scene=NS.el.scene.value; S.step=3; invalidate(); syncState(); }); | |
| NS.el.genbtn.addEventListener('click',()=>doGenerate(false)); | |
| NS.el.replayBtn.addEventListener('click',()=>doGenerate(false)); | |
| NS.el.clearBtn.addEventListener('click',clearCanvas); | |
| NS.el.reuseBtn.addEventListener('click',reuseAsInput); | |
| NS.el.toggleBtn.addEventListener('click',()=>{ S.showBoxes=!S.showBoxes; updateToggle(); }); | |
| NS.el.upBtn.addEventListener('click',()=>{ S.upsample=!S.upsample; | |
| NS.el.upBtn.classList.toggle('on',S.upsample); syncState(); }); | |
| root.querySelector('.table-bar').addEventListener('click',()=>NS.el.etable.classList.toggle('open')); | |
| window.addEventListener('resize',()=>{ layoutBoard(); }); | |
| // reference image (i2i): upload button, remove, and drag-drop onto the canvas | |
| root.querySelector('.refbtn').addEventListener('click',()=>NS.el.reffile.click()); | |
| NS.el.reffile.addEventListener('change',ev=>{ const f=ev.target.files&&ev.target.files[0]; | |
| if(f) readRefFile(f); ev.target.value=''; }); | |
| root.querySelector('.refclear').addEventListener('click',()=>{ clearRef(); | |
| const img=NS.el.board.querySelector('img'); if(img)img.remove(); S.rendered=false; | |
| NS.el.board.classList.remove('rendered','hideboxes'); NS.el.toggleBtn.style.display='none'; | |
| renderAll(); }); | |
| NS.el.wrap.addEventListener('dragover',ev=>{ ev.preventDefault(); }); | |
| NS.el.wrap.addEventListener('drop',ev=>{ ev.preventDefault(); | |
| const f=ev.dataTransfer&&ev.dataTransfer.files&&ev.dataTransfer.files[0]; if(f) readRefFile(f); }); | |
| // Start EMPTY — no boxes. The canvas populates only when the user draws a box, | |
| // clicks an example below, or drops a reference image. | |
| S.step=1; renderAll(); | |
| } | |
| function init(){ | |
| const root=document.getElementById('f3-root'); | |
| if(!root || !fieldEl('f3-state') || !genButton()){ | |
| return false; | |
| } | |
| if(root.dataset.ready) return true; | |
| root.dataset.ready='1'; build(root); return true; | |
| } | |
| const iv=setInterval(()=>{ if(init()) clearInterval(iv); }, 120); | |
| })(); | |
| </script> | |
| """ | |
| HEAD = STYLE + STYLE2 + CONFIG_JS + SCRIPT | |
| with gr.Blocks(head=HEAD, title="FLUX.3 layout canvas", | |
| css="footer{display:none!important} .gradio-container{max-width:1240px!important}" | |
| " .f3-bridge{position:absolute!important;left:-9999px!important;top:0;" | |
| "width:1px!important;height:1px!important;overflow:hidden!important;" | |
| "opacity:0!important;pointer-events:none!important;}") as demo: | |
| # Bridge components: kept MOUNTED (not visible=False, which unmounts them from the | |
| # DOM in gradio 5.x) but hidden off-screen via CSS, so the canvas JS can find them. | |
| state_box = gr.Textbox(elem_id="f3-state", elem_classes=["f3-bridge"]) | |
| result_box = gr.Textbox(elem_id="f3-result", elem_classes=["f3-bridge"]) | |
| gen_btn = gr.Button("gen", elem_id="f3-gen", elem_classes=["f3-bridge"]) | |
| gr.HTML('<div id="f3-root"></div>') | |
| ev = gen_btn.click(generate, [state_box], [result_box], api_name="generate", | |
| show_progress="hidden") | |
| ev.then(None, [result_box], None, js="(r)=>{ if(window.f3_render) window.f3_render(r); }") | |
| if __name__ == "__main__": | |
| demo.queue(max_size=12).launch(show_error=True) | |