Upload app.old.py

app.old.py

@@ -0,0 +1,872 @@
+import basicsr_shim      # noqa: F401  basicsr の代替シム（torchvision互換問題を回避）
+import patch_annotators  # noqa: F401  各アノテーターの互換性パッチ
+import gradio as gr
+import cv2
+import numpy as np
+
+from annotator.util import resize_image, HWC3
+
+
+DESCRIPTION = '# ControlNet v1.1 Annotators (that runs on cpu only)'
+DESCRIPTION += '\n<p>This app generates Control Image for Mochi Diffusion&apos;s ControlNet.</p>'
+DESCRIPTION += '\n<p>HEIC image is not converted. Please use PNG or JPG image.</p>'
+DESCRIPTION += '\n<p>Gradioのバージョンが上がって変換された画像がWebpになっています。最新のMochiDiffusionでは問題なく使えるようです。</p>'
+
+
+model_canny = None
+
+
+def canny(img, res, l, h):
+    img = resize_image(HWC3(img), res)
+    global model_canny
+    if model_canny is None:
+        from annotator.canny import CannyDetector
+        model_canny = CannyDetector()
+    result = model_canny(img, l, h)
+    return [result]
+
+
+model_hed = None
+
+
+def hed(img, res):
+    img = resize_image(HWC3(img), res)
+    global model_hed
+    if model_hed is None:
+        from annotator.hed import HEDdetector
+        model_hed = HEDdetector()
+    result = model_hed(img)
+    return [result]
+
+
+model_pidi = None
+
+
+def pidi(img, res):
+    img = resize_image(HWC3(img), res)
+    global model_pidi
+    if model_pidi is None:
+        from annotator.pidinet import PidiNetDetector
+        model_pidi = PidiNetDetector()
+    result = model_pidi(img)
+    return [result]
+
+
+model_mlsd = None
+
+
+def mlsd(img, res, thr_v, thr_d):
+    img = resize_image(HWC3(img), res)
+    global model_mlsd
+    if model_mlsd is None:
+        from annotator.mlsd import MLSDdetector
+        model_mlsd = MLSDdetector()
+    result = model_mlsd(img, thr_v, thr_d)
+    return [result]
+
+
+model_midas = None
+
+
+def midas(img, res):
+    img = resize_image(HWC3(img), res)
+    global model_midas
+    if model_midas is None:
+        from annotator.midas import MidasDetector
+        model_midas = MidasDetector()
+    result = model_midas(img)
+    return [result]
+
+
+model_zoe = None
+
+
+def zoe(img, res):
+    img = resize_image(HWC3(img), res)
+    global model_zoe
+    if model_zoe is None:
+        from annotator.zoe import ZoeDetector
+        model_zoe = ZoeDetector()
+    result = model_zoe(img)
+    return [result]
+
+
+model_normalbae = None
+
+
+def normalbae(img, res):
+    img = resize_image(HWC3(img), res)
+    global model_normalbae
+    if model_normalbae is None:
+        from annotator.normalbae import NormalBaeDetector
+        model_normalbae = NormalBaeDetector()
+    result = model_normalbae(img)
+    return [result]
+
+
+model_openpose = None
+
+
+def openpose(img, res, hand_and_face):
+    img = resize_image(HWC3(img), res)
+    global model_openpose
+    if model_openpose is None:
+        from annotator.openpose import OpenposeDetector
+        model_openpose = OpenposeDetector()
+    result = model_openpose(img, hand_and_face)
+    return [result]
+
+
+model_dwpose = None
+
+
+def dwpose(img, res):
+    img = resize_image(HWC3(img), res)
+    global model_dwpose
+    if model_dwpose is None:
+        from annotator.dwpose import DWposeDetector
+        model_dwpose = DWposeDetector()
+    result = model_dwpose(img)
+    return [result]
+
+
+model_lineart_anime = None
+
+
+def lineart_anime(img, res, invert=True):
+    img = resize_image(HWC3(img), res)
+    global model_lineart_anime
+    if model_lineart_anime is None:
+        from annotator.lineart_anime import LineartAnimeDetector
+        model_lineart_anime = LineartAnimeDetector()
+    if invert:
+        result = cv2.bitwise_not(model_lineart_anime(img))
+    else:
+        result = model_lineart_anime(img)
+    return [result]
+
+
+model_lineart = None
+
+
+def lineart(img, res, coarse=False, invert=True):
+    img = resize_image(HWC3(img), res)
+    global model_lineart
+    if model_lineart is None:
+        from annotator.lineart import LineartDetector
+        model_lineart = LineartDetector()
+    if invert:
+        result = cv2.bitwise_not(model_lineart(img, coarse))
+    else:
+        result = model_lineart(img, coarse)
+    return [result]
+
+
+model_oneformer_coco = None
+
+
+def oneformer_coco(img, res):
+    img = resize_image(HWC3(img), res)
+    global model_oneformer_coco
+    if model_oneformer_coco is None:
+        from annotator.oneformer import OneformerCOCODetector
+        model_oneformer_coco = OneformerCOCODetector()
+    result = model_oneformer_coco(img)
+    return [result]
+
+
+model_oneformer_ade20k = None
+
+
+def oneformer_ade20k(img, res):
+    img = resize_image(HWC3(img), res)
+    global model_oneformer_ade20k
+    if model_oneformer_ade20k is None:
+        from annotator.oneformer import OneformerADE20kDetector
+        model_oneformer_ade20k = OneformerADE20kDetector()
+    result = model_oneformer_ade20k(img)
+    return [result]
+
+
+model_content_shuffler = None
+
+
+def content_shuffler(img, res):
+    img = resize_image(HWC3(img), res)
+    global model_content_shuffler
+    if model_content_shuffler is None:
+        from annotator.shuffle import ContentShuffleDetector
+        model_content_shuffler = ContentShuffleDetector()
+    result = model_content_shuffler(img)
+    return [result]
+
+
+model_color_shuffler = None
+
+
+def color_shuffler(img, res):
+    img = resize_image(HWC3(img), res)
+    global model_color_shuffler
+    if model_color_shuffler is None:
+        from annotator.shuffle import ColorShuffleDetector
+        model_color_shuffler = ColorShuffleDetector()
+    result = model_color_shuffler(img)
+    return [result]
+
+
+model_inpaint = None
+
+
+def inpaint(image, invert):
+    # Gradio 4.x: ImageEditor returns dict with "background" and "layers"
+    # background: numpy array (H, W, 3) RGB
+    # layers: list of numpy arrays (H, W, 4) RGBA
+    if image is None:
+        return []
+
+    background = image.get("background")
+    layers = image.get("layers", [])
+
+    if background is None:
+        return []
+
+    color = HWC3(background)
+
+    if layers and layers[0] is not None:
+        layer = layers[0]
+        # Alpha channel is at index 3
+        if layer.shape[2] == 4:
+            alpha = layer[:, :, 3:4]
+        else:
+            # Fallback: no alpha, use white mask
+            alpha = np.ones((*layer.shape[:2], 1), dtype=np.uint8) * 255
+    else:
+        # No layer drawn: use fully transparent mask
+        alpha = np.zeros((*color.shape[:2], 1), dtype=np.uint8)
+
+    if invert:
+        alpha = 255 - alpha
+
+    # Resize alpha to match background if needed
+    if alpha.shape[:2] != color.shape[:2]:
+        alpha = cv2.resize(alpha, (color.shape[1], color.shape[0]))
+        alpha = alpha[:, :, np.newaxis] if alpha.ndim == 2 else alpha
+
+    result = np.concatenate([color, alpha], axis=2)
+    return [result]
+
+
+custom_theme = gr.themes.Soft(primary_hue="blue", neutral_hue="slate").set(
+    button_primary_background_fill="*primary_500",
+    button_primary_background_fill_hover="*primary_600",
+    button_primary_text_color="white",
+    button_secondary_background_fill="*neutral_200",
+    button_secondary_background_fill_hover="*neutral_300",
+    button_secondary_text_color="*neutral_800",
+)
+custom_css = """
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Base
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.gradio-container {
+    max-width: 1400px !important;
+    margin: auto !important;
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Description
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.app-description {
+    border-radius: 18px;
+    padding: 14px;
+    margin-bottom: 0.8rem;
+
+    background:
+        color-mix(
+            in srgb,
+            var(--background-fill-secondary) 88%,
+            transparent
+        );
+
+    border: 1px solid var(--border-color-primary);
+
+    box-shadow:
+        0 2px 10px rgba(0,0,0,0.04);
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Selector
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.jump-selector {
+
+    position: sticky;
+
+    top: 0;
+
+    z-index: 1000;
+
+    margin-bottom: 1rem;
+
+    padding: 10px;
+
+    border-radius: 14px;
+
+    backdrop-filter: blur(10px);
+
+    background:
+        color-mix(
+            in srgb,
+            var(--background-fill-primary) 85%,
+            transparent
+        );
+
+    border:
+        1px solid
+        color-mix(
+            in srgb,
+            var(--border-color-primary) 75%,
+            transparent
+        );
+}
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Section Header
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.section-header {
+    border-left: 5px solid var(--color-accent, #3b82f6);
+
+    border-radius: 0 12px 12px 0;
+
+    padding: 12px 18px !important;
+
+    margin-bottom: 10px !important;
+
+    background:
+        color-mix(
+            in srgb,
+            var(--color-accent, #3b82f6) 10%,
+            var(--background-fill-secondary)
+        );
+
+    border:
+        1px solid
+        color-mix(
+            in srgb,
+            var(--color-accent, #3b82f6) 25%,
+            var(--border-color-primary)
+        );
+}
+
+.section-header h2 {
+    margin: 0 !important;
+    font-size: 1.15rem !important;
+    font-weight: 700 !important;
+    color: var(--body-text-color) !important;
+}
+
+.section-header p {
+    margin-top: 6px !important;
+    margin-bottom: 0 !important;
+
+    font-size: 0.86rem !important;
+
+    color: var(--body-text-color-subdued) !important;
+
+    line-height: 1.45;
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Section Card
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+.section-card {
+    border-radius: 18px;
+    padding: 14px;
+    margin-bottom: 0.8rem;
+    border:
+        1px solid
+        color-mix(
+            in srgb,
+            var(--border-color-primary) 75%,
+            transparent
+        );
+    background:
+        color-mix(
+            in srgb,
+            var(--background-fill-primary) 97%,
+            var(--background-fill-secondary)
+        );
+    box-shadow:
+        0 1px 6px rgba(0,0,0,0.035);
+}
+/* ダーク時は少し強め */
+.dark .section-card {
+    box-shadow:
+        0 2px 10px rgba(0,0,0,0.18);
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Input / Output Panels
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.input-panel {
+    border-radius: 14px;
+
+    padding: 14px;
+
+    border: 1px solid var(--border-color-primary);
+
+    background:
+        color-mix(
+            in srgb,
+            var(--background-fill-secondary) 82%,
+            transparent
+        );
+}
+
+.output-panel {
+    border-radius: 14px;
+
+    padding: 14px;
+
+    border: 1px solid var(--border-color-primary);
+
+    background:
+        color-mix(
+            in srgb,
+            var(--color-accent, #3b82f6) 4%,
+            var(--background-fill-secondary)
+        );
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Run Button
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.run-btn {
+    margin-top: 12px !important;
+
+    height: 46px !important;
+
+    border-radius: 12px !important;
+
+    font-size: 0.96rem !important;
+
+    font-weight: 700 !important;
+
+    letter-spacing: 0.02em !important;
+
+    transition:
+        transform 0.12s ease,
+        box-shadow 0.12s ease !important;
+}
+
+.run-btn:hover {
+    transform: translateY(-2px) !important;
+
+    box-shadow:
+        0 8px 18px
+        color-mix(
+            in srgb,
+            var(--color-accent, #3b82f6) 35%,
+            transparent
+        ) !important;
+}
+
+.run-btn:active {
+    transform: translateY(0) !important;
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Gallery
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.output-gallery {
+    border-radius: 14px !important;
+
+    border: 1px solid var(--border-color-primary) !important;
+
+    min-height: 280px;
+
+    overflow: hidden;
+
+    background:
+        color-mix(
+            in srgb,
+            var(--background-fill-primary) 92%,
+            transparent
+        );
+}
+
+/* Gallery image hover */
+
+.output-gallery img {
+    transition:
+        transform 0.14s ease,
+        opacity 0.14s ease;
+}
+
+.output-gallery img:hover {
+    transform: scale(1.015);
+    opacity: 0.96;
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Sliders / Inputs
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.gradio-slider {
+    padding-top: 4px !important;
+    padding-bottom: 4px !important;
+}
+
+.gradio-checkbox {
+    margin-top: 6px !important;
+    margin-bottom: 6px !important;
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Divider
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.section-divider {
+    border: none !important;
+
+    border-top:
+        1px solid
+        color-mix(
+            in srgb,
+            var(--border-color-primary) 70%,
+            transparent
+        ) !important;
+
+    margin:
+        0.35rem 0
+        0.6rem !important;
+
+    opacity: 0.55;
+}
+"""
+
+block = gr.Blocks().queue()
+
+with block:
+    gr.Markdown(DESCRIPTION, elem_classes=["app-description"])
+    gr.HTML('''
+    <div class="jump-selector">
+        <label style="font-size:0.85rem; font-weight:600; color:var(--body-text-color-subdued); margin-bottom:4px; display:block;">Jump to Section</label>
+        <select id="section-jump-select" onchange="
+            var sectionId = this.value;
+            if (!sectionId) return;
+            setTimeout(function() {
+                var el = document.getElementById(sectionId);
+                if (!el) return;
+                function getScrollParent(node) {
+                    if (!node || node === document.body) return window;
+                    var style = getComputedStyle(node);
+                    var overflow = style.overflow + style.overflowY;
+                    if (/(auto|scroll)/.test(overflow) && node.scrollHeight > node.clientHeight) return node;
+                    return getScrollParent(node.parentElement);
+                }
+                var container = getScrollParent(el.parentElement);
+                if (container === window) {
+                    var top = el.getBoundingClientRect().top + window.scrollY - 8;
+                    window.scrollTo({ top: top, behavior: 'smooth' });
+                } else {
+                    var containerTop = container.getBoundingClientRect().top;
+                    var elTop = el.getBoundingClientRect().top;
+                    container.scrollBy({ top: elTop - containerTop - 8, behavior: 'smooth' });
+                }
+            }, 100);
+        " style="
+            width: 100%;
+            padding: 8px 12px;
+            border-radius: 8px;
+            border: 1px solid var(--border-color-primary);
+            background: var(--background-fill-primary);
+            color: var(--body-text-color);
+            font-size: 0.95rem;
+            cursor: pointer;
+        ">
+            <option value="section-canny">Canny</option>
+            <option value="section-inpaint">Inpaint</option>
+            <option value="section-hed">HED</option>
+            <option value="section-pidi">Pidi</option>
+            <option value="section-mlsd">MLSD</option>
+            <option value="section-midas">MIDAS</option>
+            <option value="section-zoe">Zoe</option>
+            <option value="section-normalbae">NormalBae</option>
+            <option value="section-dwpose">DWPose</option>
+            <option value="section-openpose">OpenPose</option>
+            <option value="section-lineart-anime">Lineart Anime</option>
+            <option value="section-lineart">Lineart</option>
+            <option value="section-oneformer-coco">OneFormer COCO</option>
+            <option value="section-oneformer-ade20k">OneFormer ADE20K</option>
+            <option value="section-content-shuffle">Content Shuffle</option>
+            <option value="section-color-shuffle">Color Shuffle</option>
+        </select>
+    </div>
+    ''')
+
+    # ── Canny ──────────────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-canny"):
+        with gr.Row():
+            gr.Markdown("## Canny Edge", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                low_threshold = gr.Slider(label="low_threshold", minimum=1, maximum=255, value=100, step=1)
+                high_threshold = gr.Slider(label="high_threshold", minimum=1, maximum=255, value=200, step=1)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=canny, inputs=[input_image, resolution, low_threshold, high_threshold], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── Inpaint ────────────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-inpaint"):
+        with gr.Row():
+            gr.Markdown("## Inpaint \n<p>画像はツールのUpload buttonを押してアップロードして下さい。", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                # Gradio 4.x: use ImageEditor instead of deprecated ImageMask
+                input_image_inpaint = gr.ImageEditor(
+                    label="Input Image (draw mask)",
+                    type="numpy",
+                    height=480,
+                    sources=["upload"],
+                    brush=gr.Brush(colors=["#000000"], default_size=20),
+                    layers=True,
+                )
+                invert = gr.Checkbox(label="Invert Mask", value=False)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=inpaint, inputs=[input_image_inpaint, invert], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── HED ────────────────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-hed"):
+        with gr.Row():
+            gr.Markdown('## HED Edge&nbsp;"SoftEdge"', elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+    run_button.click(fn=hed, inputs=[input_image, resolution], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+    
+    # ── Pidi ───────────────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-pidi"):
+        with gr.Row():
+            gr.Markdown('## Pidi Edge&nbsp;"SoftEdge"', elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+    run_button.click(fn=pidi, inputs=[input_image, resolution], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── MLSD ───────────────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-mlsd"):
+        with gr.Row():
+            gr.Markdown("## MLSD Edge", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                value_threshold = gr.Slider(label="value_threshold", minimum=0.01, maximum=2.0, value=0.1, step=0.01)
+                distance_threshold = gr.Slider(label="distance_threshold", minimum=0.01, maximum=20.0, value=0.1, step=0.01)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=384, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=mlsd, inputs=[input_image, resolution, value_threshold, distance_threshold], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── MIDAS ──────────────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-midas"):
+        with gr.Row():
+            gr.Markdown("## MIDAS Depth", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=384, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=midas, inputs=[input_image, resolution], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── Zoe ────────────────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-zoe"):
+        with gr.Row():
+            gr.Markdown("## Zoe Depth", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=zoe, inputs=[input_image, resolution], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── Normal Bae ─────────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-normalbae"):
+        with gr.Row():
+            gr.Markdown("## Normal Bae", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=normalbae, inputs=[input_image, resolution], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── DWPose ─────────────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-dwpose"):
+        with gr.Row():
+            gr.Markdown("## DWPose", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=dwpose, inputs=[input_image, resolution], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── Openpose ───────────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-openpose"):
+        with gr.Row():
+            gr.Markdown("## Openpose", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                hand_and_face = gr.Checkbox(label="Hand and Face", value=False)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=openpose, inputs=[input_image, resolution, hand_and_face], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── Lineart Anime ──────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-lineart-anime"):
+        with gr.Row():
+            gr.Markdown("## Lineart Anime \n<p>Check Invert to use with Mochi Diffusion.", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                invert = gr.Checkbox(label="Invert", value=True)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=lineart_anime, inputs=[input_image, resolution, invert], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── Lineart ────────────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-lineart"):
+        with gr.Row():
+            gr.Markdown("## Lineart \n<p>Check Invert to use with Mochi Diffusion. Inverted image can also be created here for use with ControlNet Scribble.", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                coarse = gr.Checkbox(label="Using coarse model", value=False)
+                invert = gr.Checkbox(label="Invert", value=True)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=lineart, inputs=[input_image, resolution, coarse, invert], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── Oneformer COCO ─────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-oneformer-coco"):
+        with gr.Row():
+            gr.Markdown("## Oneformer COCO Segmentation", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=oneformer_coco, inputs=[input_image, resolution], outputs=[gallery])
+
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── Oneformer ADE20K ───────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-oneformer-ade20k"):
+        with gr.Row():
+            gr.Markdown("## Oneformer ADE20K Segmentation", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=640, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=oneformer_ade20k, inputs=[input_image, resolution], outputs=[gallery])
+    
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── Content Shuffle ────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-content-shuffle"):
+        with gr.Row():
+            gr.Markdown("## Content Shuffle", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=content_shuffler, inputs=[input_image, resolution], outputs=[gallery])
+    
+    # gr.HTML("<hr class='section-divider'>")
+
+    # ── Color Shuffle ──────────────────────────────────────────────────────
+    with gr.Group(elem_classes=["section-card"], elem_id="section-color-shuffle"):
+        with gr.Row():
+            gr.Markdown("## Color Shuffle", elem_classes=["section-header"])
+        with gr.Row():
+            with gr.Column(elem_classes=["input-panel"]):
+                input_image = gr.Image(label="Input Image", type="numpy", height=480)
+                resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                run_button = gr.Button("▶ Run", elem_classes=["run-btn"])
+            with gr.Column(elem_classes=["output-panel"]):
+                gallery = gr.Gallery(label="Generated images", show_label=False, height="auto", elem_classes=["output-gallery"])
+        run_button.click(fn=color_shuffler, inputs=[input_image, resolution], outputs=[gallery])
+
+
+block.launch(
+    server_name="0.0.0.0",
+    theme=custom_theme,
+    css=custom_css
+)