Spaces:

6chan
/

ming-image-layered

Running on Zero

style: align layout, radio pills, and button styling with HF App reference

3075e82 verified 21 days ago

20 kB

# -*- coding: utf-8 -*-
"""Universal Space Design System and Theme Utilities (Catppuccin Minimalist Edition).
Theme: Catppuccin Mocha (#1e1e2e Base / #181825 Mantle / #cba6f7 Mauve)
Attribution: Built by @6chan
"""

from __future__ import annotations

import base64
import io
from typing import List, Sequence
import gradio as gr
from PIL import Image

# Catppuccin Mocha Tokens
CAT_BASE = "#1e1e2e"
CAT_MANTLE = "#181825"
CAT_SURFACE = "#242436"
CAT_ELEVATED = "#2f2f45"
CAT_BORDER = "#313244"
CAT_BORDER_HOVER = "#45475a"
CAT_TEXT = "#cdd6f4"
CAT_SUBTEXT = "#a6adc8"
CAT_MUTED = "#6c7086"
CAT_MAUVE = "#cba6f7"
CAT_LAVENDER = "#b4befe"
CAT_DARK = "#11111b"


def build_catppuccin_theme() -> gr.Theme:
    """Build the clean Catppuccin Mocha Gradio theme aligned with Hugging Face App styling."""
    return gr.themes.Default(
        primary_hue=gr.themes.colors.indigo,
        secondary_hue=gr.themes.colors.slate,
        neutral_hue=gr.themes.colors.slate,
        radius_size=gr.themes.sizes.radius_md,
        font=[
            gr.themes.GoogleFont("Inter"),
            "system-ui",
            "-apple-system",
            "sans-serif",
        ],
        font_mono=[
            gr.themes.GoogleFont("JetBrains Mono"),
            "ui-monospace",
            "monospace",
        ],
    ).set(
        body_background_fill=CAT_MANTLE,
        body_text_color=CAT_TEXT,
        block_background_fill=CAT_BASE,
        block_border_color=CAT_BORDER,
        block_border_width="1px",
        block_radius="8px",
        block_label_background_fill=CAT_SURFACE,
        block_label_border_color=CAT_BORDER,
        block_label_text_color=CAT_SUBTEXT,
        block_title_text_color=CAT_SUBTEXT,
        input_background_fill=CAT_MANTLE,
        input_border_color=CAT_BORDER,
        input_border_color_focus=CAT_MAUVE,
        input_radius="6px",
        checkbox_background_color=CAT_MANTLE,
        checkbox_background_color_selected=CAT_MAUVE,
        checkbox_border_color=CAT_BORDER,
        checkbox_border_color_selected=CAT_MAUVE,
        checkbox_label_background_fill=CAT_MANTLE,
        checkbox_label_background_fill_hover=CAT_SURFACE,
        checkbox_label_background_fill_selected=CAT_ELEVATED,
        checkbox_label_border_color=CAT_BORDER,
        checkbox_label_border_color_hover=CAT_BORDER_HOVER,
        checkbox_label_border_color_selected=CAT_MAUVE,
        checkbox_label_text_color=CAT_SUBTEXT,
        checkbox_label_text_color_selected=CAT_TEXT,
        button_primary_background_fill=CAT_MAUVE,
        button_primary_background_fill_hover=CAT_LAVENDER,
        button_primary_text_color=CAT_DARK,
        button_primary_border_color=CAT_MAUVE,
        button_secondary_background_fill=CAT_SURFACE,
        button_secondary_background_fill_hover=CAT_ELEVATED,
        button_secondary_text_color=CAT_TEXT,
        button_secondary_border_color=CAT_BORDER,

        body_background_fill_dark=CAT_MANTLE,
        body_text_color_dark=CAT_TEXT,
        block_background_fill_dark=CAT_BASE,
        block_border_color_dark=CAT_BORDER,
        block_border_width_dark="1px",
        block_label_background_fill_dark=CAT_SURFACE,
        block_label_border_color_dark=CAT_BORDER,
        block_label_text_color_dark=CAT_SUBTEXT,
        block_title_text_color_dark=CAT_SUBTEXT,
        input_background_fill_dark=CAT_MANTLE,
        input_border_color_dark=CAT_BORDER,
        input_border_color_focus_dark=CAT_MAUVE,
        checkbox_background_color_dark=CAT_MANTLE,
        checkbox_background_color_selected_dark=CAT_MAUVE,
        checkbox_border_color_dark=CAT_BORDER,
        checkbox_border_color_selected_dark=CAT_MAUVE,
        checkbox_label_background_fill_dark=CAT_MANTLE,
        checkbox_label_background_fill_hover_dark=CAT_SURFACE,
        checkbox_label_background_fill_selected_dark=CAT_ELEVATED,
        checkbox_label_border_color_dark=CAT_BORDER,
        checkbox_label_border_color_hover_dark=CAT_BORDER_HOVER,
        checkbox_label_border_color_selected_dark=CAT_MAUVE,
        checkbox_label_text_color_dark=CAT_SUBTEXT,
        checkbox_label_text_color_selected_dark=CAT_TEXT,
        button_primary_background_fill_dark=CAT_MAUVE,
        button_primary_background_fill_hover_dark=CAT_LAVENDER,
        button_primary_text_color_dark=CAT_DARK,
        button_primary_border_color_dark=CAT_MAUVE,
        button_secondary_background_fill_dark=CAT_SURFACE,
        button_secondary_background_fill_hover_dark=CAT_ELEVATED,
        button_secondary_text_color_dark=CAT_TEXT,
        button_secondary_border_color_dark=CAT_BORDER,
    )


build_slate_theme = build_catppuccin_theme
build_charcoal_theme = build_catppuccin_theme
build_pi_theme = build_catppuccin_theme


SPACE_CSS = """
/* Clean Minimal Catppuccin Typography */
body, input, textarea, select, button {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
code, pre, .font-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
.gradio-container {
  max-width: 1260px !important;
  margin: 0 auto !important;
  padding: 1.5rem 1.5rem 2rem 1.5rem !important;
}
/* Centered Hugging Face App Header */
.space-header {
  text-align: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
}
.space-title {
  margin: 0 0 0.4rem 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #cdd6f4;
}
.space-subtitle {
  margin: 0 0 0.65rem 0;
  font-size: 0.92rem;
  color: #a6adc8;
}
.space-links {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: #6c7086;
}
.space-links a {
  color: #b4befe;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.12s ease;
}
.space-links a:hover {
  color: #cba6f7;
  text-decoration: underline;
}
.space-signature {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.76rem;
  font-weight: 500;
  padding: 0.12rem 0.48rem;
  background: #242436;
  color: #cba6f7 !important;
  border-radius: 5px;
  border: 1px solid #313244;
  text-decoration: none !important;
}
.space-signature:hover {
  border-color: #cba6f7;
  background: #2f2f45;
}
.space-helper-line {
  font-size: 0.85rem;
  color: #a6adc8;
  margin-bottom: 0.65rem;
}
/* Hugging Face App Style Radio Pills & Inputs */
.gradio-container .wrap.svelte-1cl284s,
.gradio-container .form {
  border-color: #313244 !important;
}
/* Primary Action Button (Aligned with HF App Button Layout) */
.btn-extract {
  background: #cba6f7 !important;
  color: #11111b !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  height: 42px !important;
  border-radius: 6px !important;
  border: 1px solid #cba6f7 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.08s ease !important;
  margin-top: 0.25rem !important;
}
.btn-extract:hover {
  background: #b4befe !important;
  border-color: #b4befe !important;
}
.btn-extract:active {
  transform: translateY(1px) !important;
}
/* Workstation Tabs */
#workbench-tabs {
  border: none !important;
  background: transparent !important;
}
#workbench-tabs .tab-nav {
  border-bottom: 1px solid #313244 !important;
  margin-bottom: 0.5rem !important;
}
#workbench-tabs .tab-nav button {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 0.45rem 0.9rem !important;
  color: #a6adc8 !important;
  border: none !important;
  background: transparent !important;
}
#workbench-tabs .tab-nav button.selected {
  color: #cba6f7 !important;
  border-bottom: 2px solid #cba6f7 !important;
  font-weight: 600 !important;
}
/* Checkerboard Background for RGBA Gallery & Preview */
#layers .preview,
#layers .thumbnail-item,
#layers .gallery-item,
#layers img,
#preview-container img {
  background-color: #181825 !important;
  background-image:
    linear-gradient(45deg, #242436 25%, transparent 25%),
    linear-gradient(-45deg, #242436 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #242436 75%),
    linear-gradient(-45deg, transparent 75%, #242436 75%) !important;
  background-size: 16px 16px !important;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0 !important;
  border-radius: 6px !important;
}
.layer-caption-note {
  font-size: 0.8rem;
  color: #a6adc8;
  margin: 0.35rem 0 0.65rem 0.15rem;
}
/* Result status bar */
.result-status {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.76rem;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  background: #242436;
  border: 1px solid #313244;
  color: #cdd6f4;
  margin-bottom: 0.5rem;
}
/* Interactive Canvas Stage */
.sl-panel {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  padding: 4px 0;
}
.sl-panel .sl-stagewrap {
  flex: 1 1 360px;
  min-width: 280px;
}
.sl-panel .sl-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #313244;
  touch-action: none;
  cursor: grab;
  background-color: #181825;
  background-image:
    linear-gradient(45deg, #242436 25%, transparent 25%, transparent 75%, #242436 75%),
    linear-gradient(45deg, #242436 25%, transparent 25%, transparent 75%, #242436 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.sl-panel .sl-stage:active {
  cursor: grabbing;
}
.sl-panel .sl-lyr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.sl-panel .sl-lyr.sl-off {
  opacity: 0 !important;
}
.sl-panel .sl-side {
  flex: 0 0 230px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sl-panel .sl-sidehead {
  font-size: 11px;
  font-weight: 500;
  color: #a6adc8;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
}
.sl-panel .sl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  background: #242436;
  transition: all 0.12s ease;
}
.sl-panel .sl-row:hover {
  background: #2f2f45;
  border-color: #45475a;
}
.sl-panel .sl-row.sl-sel {
  border-color: #cba6f7 !important;
  background-color: #2f2f45 !important;
}
.sl-panel .sl-row.sl-dim, .sl-panel .sl-row.sl-blank {
  opacity: 0.35;
}
.sl-panel .sl-eye {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 3px;
  color: #6c7086;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.sl-panel .sl-eye:hover {
  color: #cdd6f4;
}
.sl-panel .sl-th {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 4px;
  flex: 0 0 34px;
  border: 1px solid #313244;
  background-color: #181825;
  background-image:
    linear-gradient(45deg, #242436 25%, transparent 25%, transparent 75%, #242436 75%),
    linear-gradient(45deg, #242436 25%, transparent 25%, transparent 75%, #242436 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}
.sl-panel .sl-name {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  color: #cdd6f4;
  display: flex;
  flex-direction: column;
}
.sl-panel .sl-name em {
  font-style: normal;
  font-size: 10px;
  color: #6c7086;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.sl-panel .sl-reset {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid #313244;
  background: transparent;
  color: #a6adc8;
  cursor: pointer;
  transition: all 0.12s ease;
  width: 100%;
  text-align: center;
}
.sl-panel .sl-reset:hover {
  color: #cdd6f4;
  border-color: #45475a;
  background: #242436;
}
/* Footer with Signature */
.space-footer {
  margin-top: 1.75rem;
  padding-top: 1rem;
  text-align: center;
  border-top: 1px solid #313244;
  font-size: 0.76rem;
  color: #6c7086;
}
.space-footer a {
  color: #b4befe;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.12s ease;
}
.space-footer a:hover {
  color: #cba6f7;
  text-decoration: underline;
}
"""


PANEL_JS = r"""
() => {
  if (window.__slPanelWired) return;
  window.__slPanelWired = true;
  document.addEventListener("click", (e) => {
    const eyeBtn = e.target.closest(".sl-eye");
    if (eyeBtn) {
      e.stopPropagation();
      const panel = eyeBtn.closest(".sl-panel");
      if (!panel) return;
      const l = panel.querySelector('.sl-lyr[data-i="' + eyeBtn.dataset.eye + '"]');
      if (!l) return;
      const hidden = l.classList.toggle("sl-off");
      eyeBtn.classList.toggle("sl-hid", hidden);
      const row = eyeBtn.closest(".sl-row");
      if (row) row.classList.toggle("sl-dim", hidden);
      return;
    }
    const resetBtn = e.target.closest(".sl-reset");
    if (resetBtn) {
      e.stopPropagation();
      const panel = resetBtn.closest(".sl-panel");
      if (!panel) return;
      panel.querySelectorAll(".sl-lyr").forEach((l) => {
        l.classList.remove("sl-off");
        l.style.transform = "";
        l.dataset.tx = 0;
        l.dataset.ty = 0;
      });
      panel.querySelectorAll(".sl-eye").forEach((b) => b.classList.remove("sl-hid"));
      panel.querySelectorAll(".sl-row").forEach((r) => r.classList.remove("sl-dim"));
      return;
    }
    const row = e.target.closest(".sl-row");
    if (row) {
      const panel = row.closest(".sl-panel");
      if (!panel) return;
      panel.querySelectorAll(".sl-row").forEach((r) => r.classList.remove("sl-sel"));
      row.classList.add("sl-sel");
      panel.dataset.sel = row.dataset.i;
    }
  });
  let drag = null;
  const pt = (e) => {
    const t = e.touches && e.touches[0];
    return t ? { x: t.clientX, y: t.clientY } : { x: e.clientX, y: e.clientY };
  };
  const move = (e) => {
    if (!drag) return;
    const s = pt(e);
    const tx = drag.tx + (s.x - drag.sx);
    const ty = drag.ty + (s.y - drag.sy);
    drag.l.dataset.tx = tx;
    drag.l.dataset.ty = ty;
    drag.l.style.transform = "translate(" + tx + "px," + ty + "px)";
    e.preventDefault();
  };
  const up = () => {
    drag = null;
    document.removeEventListener("mousemove", move);
    document.removeEventListener("mouseup", up);
    document.removeEventListener("touchmove", move);
    document.removeEventListener("touchend", up);
  };
  const down = (e) => {
    const stage = e.target.closest(".sl-stage");
    if (!stage) return;
    const panel = stage.closest(".sl-panel");
    if (!panel) return;
    const l = panel.querySelector('.sl-lyr[data-i="' + panel.dataset.sel + '"]');
    if (!l || l.classList.contains("sl-off")) return;
    const s = pt(e);
    drag = {
      l: l,
      sx: s.x,
      sy: s.y,
      tx: parseFloat(l.dataset.tx || 0),
      ty: parseFloat(l.dataset.ty || 0),
    };
    document.addEventListener("mousemove", move);
    document.addEventListener("mouseup", up);
    document.addEventListener("touchmove", move, { passive: false });
    document.addEventListener("touchend", up);
    e.preventDefault();
  };
  document.addEventListener("mousedown", down);
  document.addEventListener("touchstart", down, { passive: false });
}
"""

SVG_EYE_ICON = """<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path><circle cx="12" cy="12" r="3"></circle></svg>"""


def pil_to_data_uri(im: Image.Image, max_dim: int | None = None) -> str:
    """Encode PIL image to inline base64 PNG data URI."""
    if max_dim:
        w, h = im.size
        scale = max_dim / max(w, h)
        if scale < 1.0:
            im = im.resize((max(1, int(w * scale)), max(1, int(h * scale))), Image.Resampling.LANCZOS)
    buf = io.BytesIO()
    im.save(buf, format="PNG")
    b64 = base64.b64encode(buf.getvalue()).decode("ascii")
    return f"data:image/png;base64,{b64}"


def build_layer_panel(
    layer_pils: list[Image.Image],
    coverage: list[float],
    layer_names: Sequence[str] | None = None,
    width: int = 512,
    height: int = 552,
) -> str:
    """Render minimalist Catppuccin layer canvas and inspector."""
    n = len(layer_pils)
    if n == 0:
        return '<div class="sl-panel"><div class="text-xs text-[#a6adc8]">No layers extracted yet.</div></div>'

    sel_i = next((i for i in range(n - 1, 0, -1) if coverage[i] >= 0.5), 0)
    stack = []
    rows = []

    for i, pil in enumerate(layer_pils):
        uri = pil_to_data_uri(pil)
        stack.append(
            f'<img class="sl-lyr" data-i="{i}" src="{uri}" draggable="false" alt="layer {i}">'
        )

    for i in range(n - 1, -1, -1):
        if layer_names and i < len(layer_names):
            name = layer_names[i]
        elif i == 0:
            name = "Background"
        elif i == n - 1:
            name = "Foreground"
        else:
            name = f"Layer {i + 1}"

        pct = coverage[i]
        empty = pct < 0.5
        tag = "Empty" if empty else f"{pct:.1f}% cover"
        cls = " sl-sel" if i == sel_i else ""
        cls += " sl-blank" if empty else ""
        th_uri = pil_to_data_uri(layer_pils[i], max_dim=72)
        rows.append(
            f'<div class="sl-row{cls}" data-i="{i}">'
            f'<button class="sl-eye" data-eye="{i}" title="Toggle visibility">{SVG_EYE_ICON}</button>'
            f'<img class="sl-th" src="{th_uri}" draggable="false" alt="">'
            f'<span class="sl-name">{name}<em>{tag}</em></span>'
            f'</div>'
        )

    return (
        f'<div class="sl-panel" data-sel="{sel_i}">'
        f'  <div class="sl-stagewrap">'
        f'    <div class="sl-stage" style="aspect-ratio:{width}/{height}">{"".join(stack)}</div>'
        f'  </div>'
        f'  <div class="sl-side">'
        f'    <div class="sl-sidehead"><span>Layers ({n})</span><span>Drag on canvas · Eye to hide</span></div>'
        f'    {"".join(rows)}'
        f'    <button class="sl-reset">Reset positions</button>'
        f'  </div>'
        f'</div>'
    )


def render_header(
    title: str = "Ming-Image-Layers",
    handle: str = "6chan",
    subtitle: str = "Decompose flattened designs into independently editable transparent layers.",
) -> str:
    """Render a centered Hugging Face App header with author signature."""
    return f"""
<div class="space-header">
  <h1 class="space-title">{title}</h1>
  <p class="space-subtitle">{subtitle}</p>
  <div class="space-links">
    <a href="https://huggingface.co/6chan/Ming-Image-0.1-Design-Layer-FP8" target="_blank">FP8 Model</a>
    <span>·</span>
    <a href="https://huggingface.co/inclusionAI/Ming-Image-0.1-Design-Layer" target="_blank">Base Model</a>
    <span>·</span>
    <a href="https://github.com/inclusionAI/Ming-Image" target="_blank">GitHub</a>
    <span>·</span>
    <a href="https://huggingface.co/{handle}" target="_blank" class="space-signature">@{handle}</a>
  </div>
</div>
<div class="space-helper-line">
  Describe the elements you want on each layer, ordered front to back, with the background last.
</div>
""".strip()


def render_footer(
    handle: str = "6chan",
    model_name: str | None = None,
    model_url: str | None = None,
    extra_links: list[tuple[str, str]] | None = None,
) -> str:
    """Render a minimalist developer footer with clear attribution."""
    links_html = []
    if model_name and model_url:
        links_html.append(f'<a href="{model_url}" target="_blank">{model_name}</a>')
    if extra_links:
        for name, url in extra_links:
            links_html.append(f'<a href="{url}" target="_blank">{name}</a>')

    links_str = " · ".join(links_html)
    links_block = f'<div style="margin-top: 0.25rem;">{links_str}</div>' if links_str else ""

    return f"""
<div class="space-footer">
  <div>Built by <a href="https://huggingface.co/{handle}" target="_blank">@{handle}</a> · Layer decomposition studio</div>
  {links_block}
</div>
""".strip()

	# -- coding: utf-8 --
	"""Universal Space Design System and Theme Utilities (Catppuccin Minimalist Edition).

	Theme: Catppuccin Mocha (#1e1e2e Base / #181825 Mantle / #cba6f7 Mauve)
	Attribution: Built by @6chan
	"""

	from __future__ import annotations

	import base64
	import io
	from typing import List, Sequence
	import gradio as gr
	from PIL import Image

	# Catppuccin Mocha Tokens
	CAT_BASE = "#1e1e2e"
	CAT_MANTLE = "#181825"
	CAT_SURFACE = "#242436"
	CAT_ELEVATED = "#2f2f45"
	CAT_BORDER = "#313244"
	CAT_BORDER_HOVER = "#45475a"
	CAT_TEXT = "#cdd6f4"
	CAT_SUBTEXT = "#a6adc8"
	CAT_MUTED = "#6c7086"
	CAT_MAUVE = "#cba6f7"
	CAT_LAVENDER = "#b4befe"
	CAT_DARK = "#11111b"


	def build_catppuccin_theme() -> gr.Theme:
	"""Build the clean Catppuccin Mocha Gradio theme aligned with Hugging Face App styling."""
	return gr.themes.Default(
	primary_hue=gr.themes.colors.indigo,
	secondary_hue=gr.themes.colors.slate,
	neutral_hue=gr.themes.colors.slate,
	radius_size=gr.themes.sizes.radius_md,
	font=[
	gr.themes.GoogleFont("Inter"),
	"system-ui",
	"-apple-system",
	"sans-serif",
	],
	font_mono=[
	gr.themes.GoogleFont("JetBrains Mono"),
	"ui-monospace",
	"monospace",
	],
	).set(
	body_background_fill=CAT_MANTLE,
	body_text_color=CAT_TEXT,
	block_background_fill=CAT_BASE,
	block_border_color=CAT_BORDER,
	block_border_width="1px",
	block_radius="8px",
	block_label_background_fill=CAT_SURFACE,
	block_label_border_color=CAT_BORDER,
	block_label_text_color=CAT_SUBTEXT,
	block_title_text_color=CAT_SUBTEXT,
	input_background_fill=CAT_MANTLE,
	input_border_color=CAT_BORDER,
	input_border_color_focus=CAT_MAUVE,
	input_radius="6px",
	checkbox_background_color=CAT_MANTLE,
	checkbox_background_color_selected=CAT_MAUVE,
	checkbox_border_color=CAT_BORDER,
	checkbox_border_color_selected=CAT_MAUVE,
	checkbox_label_background_fill=CAT_MANTLE,
	checkbox_label_background_fill_hover=CAT_SURFACE,
	checkbox_label_background_fill_selected=CAT_ELEVATED,
	checkbox_label_border_color=CAT_BORDER,
	checkbox_label_border_color_hover=CAT_BORDER_HOVER,
	checkbox_label_border_color_selected=CAT_MAUVE,
	checkbox_label_text_color=CAT_SUBTEXT,
	checkbox_label_text_color_selected=CAT_TEXT,
	button_primary_background_fill=CAT_MAUVE,
	button_primary_background_fill_hover=CAT_LAVENDER,
	button_primary_text_color=CAT_DARK,
	button_primary_border_color=CAT_MAUVE,
	button_secondary_background_fill=CAT_SURFACE,
	button_secondary_background_fill_hover=CAT_ELEVATED,
	button_secondary_text_color=CAT_TEXT,
	button_secondary_border_color=CAT_BORDER,

	body_background_fill_dark=CAT_MANTLE,
	body_text_color_dark=CAT_TEXT,
	block_background_fill_dark=CAT_BASE,
	block_border_color_dark=CAT_BORDER,
	block_border_width_dark="1px",
	block_label_background_fill_dark=CAT_SURFACE,
	block_label_border_color_dark=CAT_BORDER,
	block_label_text_color_dark=CAT_SUBTEXT,
	block_title_text_color_dark=CAT_SUBTEXT,
	input_background_fill_dark=CAT_MANTLE,
	input_border_color_dark=CAT_BORDER,
	input_border_color_focus_dark=CAT_MAUVE,
	checkbox_background_color_dark=CAT_MANTLE,
	checkbox_background_color_selected_dark=CAT_MAUVE,
	checkbox_border_color_dark=CAT_BORDER,
	checkbox_border_color_selected_dark=CAT_MAUVE,
	checkbox_label_background_fill_dark=CAT_MANTLE,
	checkbox_label_background_fill_hover_dark=CAT_SURFACE,
	checkbox_label_background_fill_selected_dark=CAT_ELEVATED,
	checkbox_label_border_color_dark=CAT_BORDER,
	checkbox_label_border_color_hover_dark=CAT_BORDER_HOVER,
	checkbox_label_border_color_selected_dark=CAT_MAUVE,
	checkbox_label_text_color_dark=CAT_SUBTEXT,
	checkbox_label_text_color_selected_dark=CAT_TEXT,
	button_primary_background_fill_dark=CAT_MAUVE,
	button_primary_background_fill_hover_dark=CAT_LAVENDER,
	button_primary_text_color_dark=CAT_DARK,
	button_primary_border_color_dark=CAT_MAUVE,
	button_secondary_background_fill_dark=CAT_SURFACE,
	button_secondary_background_fill_hover_dark=CAT_ELEVATED,
	button_secondary_text_color_dark=CAT_TEXT,
	button_secondary_border_color_dark=CAT_BORDER,
	)


	build_slate_theme = build_catppuccin_theme
	build_charcoal_theme = build_catppuccin_theme
	build_pi_theme = build_catppuccin_theme


	SPACE_CSS = """
	/* Clean Minimal Catppuccin Typography */
	body, input, textarea, select, button {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	}

	code, pre, .font-mono {
	font-family: 'JetBrains Mono', ui-monospace, monospace !important;
	}

	.gradio-container {
	max-width: 1260px !important;
	margin: 0 auto !important;
	padding: 1.5rem 1.5rem 2rem 1.5rem !important;
	}

	/* Centered Hugging Face App Header */
	.space-header {
	text-align: center;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	}

	.space-title {
	margin: 0 0 0.4rem 0;
	font-size: 1.55rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #cdd6f4;
	}

	.space-subtitle {
	margin: 0 0 0.65rem 0;
	font-size: 0.92rem;
	color: #a6adc8;
	}

	.space-links {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.84rem;
	color: #6c7086;
	}

	.space-links a {
	color: #b4befe;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.12s ease;
	}

	.space-links a:hover {
	color: #cba6f7;
	text-decoration: underline;
	}

	.space-signature {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.76rem;
	font-weight: 500;
	padding: 0.12rem 0.48rem;
	background: #242436;
	color: #cba6f7 !important;
	border-radius: 5px;
	border: 1px solid #313244;
	text-decoration: none !important;
	}

	.space-signature:hover {
	border-color: #cba6f7;
	background: #2f2f45;
	}

	.space-helper-line {
	font-size: 0.85rem;
	color: #a6adc8;
	margin-bottom: 0.65rem;
	}

	/* Hugging Face App Style Radio Pills & Inputs */
	.gradio-container .wrap.svelte-1cl284s,
	.gradio-container .form {
	border-color: #313244 !important;
	}

	/* Primary Action Button (Aligned with HF App Button Layout) */
	.btn-extract {
	background: #cba6f7 !important;
	color: #11111b !important;
	font-weight: 600 !important;
	font-size: 0.92rem !important;
	height: 42px !important;
	border-radius: 6px !important;
	border: 1px solid #cba6f7 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
	transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.08s ease !important;
	margin-top: 0.25rem !important;
	}

	.btn-extract:hover {
	background: #b4befe !important;
	border-color: #b4befe !important;
	}

	.btn-extract:active {
	transform: translateY(1px) !important;
	}

	/* Workstation Tabs */
	#workbench-tabs {
	border: none !important;
	background: transparent !important;
	}

	#workbench-tabs .tab-nav {
	border-bottom: 1px solid #313244 !important;
	margin-bottom: 0.5rem !important;
	}

	#workbench-tabs .tab-nav button {
	font-size: 0.82rem !important;
	font-weight: 500 !important;
	padding: 0.45rem 0.9rem !important;
	color: #a6adc8 !important;
	border: none !important;
	background: transparent !important;
	}

	#workbench-tabs .tab-nav button.selected {
	color: #cba6f7 !important;
	border-bottom: 2px solid #cba6f7 !important;
	font-weight: 600 !important;
	}

	/* Checkerboard Background for RGBA Gallery & Preview */
	#layers .preview,
	#layers .thumbnail-item,
	#layers .gallery-item,
	#layers img,
	#preview-container img {
	background-color: #181825 !important;
	background-image:
	linear-gradient(45deg, #242436 25%, transparent 25%),
	linear-gradient(-45deg, #242436 25%, transparent 25%),
	linear-gradient(45deg, transparent 75%, #242436 75%),
	linear-gradient(-45deg, transparent 75%, #242436 75%) !important;
	background-size: 16px 16px !important;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0 !important;
	border-radius: 6px !important;
	}

	.layer-caption-note {
	font-size: 0.8rem;
	color: #a6adc8;
	margin: 0.35rem 0 0.65rem 0.15rem;
	}

	/* Result status bar */
	.result-status {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.76rem;
	padding: 0.4rem 0.7rem;
	border-radius: 6px;
	background: #242436;
	border: 1px solid #313244;
	color: #cdd6f4;
	margin-bottom: 0.5rem;
	}

	/* Interactive Canvas Stage */
	.sl-panel {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 100%;
	padding: 4px 0;
	}

	.sl-panel .sl-stagewrap {
	flex: 1 1 360px;
	min-width: 280px;
	}

	.sl-panel .sl-stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid #313244;
	touch-action: none;
	cursor: grab;
	background-color: #181825;
	background-image:
	linear-gradient(45deg, #242436 25%, transparent 25%, transparent 75%, #242436 75%),
	linear-gradient(45deg, #242436 25%, transparent 25%, transparent 75%, #242436 75%);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
	}

	.sl-panel .sl-stage:active {
	cursor: grabbing;
	}

	.sl-panel .sl-lyr {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
	transition: opacity 0.15s ease;
	}

	.sl-panel .sl-lyr.sl-off {
	opacity: 0 !important;
	}

	.sl-panel .sl-side {
	flex: 0 0 230px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	}

	.sl-panel .sl-sidehead {
	font-size: 11px;
	font-weight: 500;
	color: #a6adc8;
	margin-bottom: 2px;
	display: flex;
	justify-content: space-between;
	}

	.sl-panel .sl-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
	background: #242436;
	transition: all 0.12s ease;
	}

	.sl-panel .sl-row:hover {
	background: #2f2f45;
	border-color: #45475a;
	}

	.sl-panel .sl-row.sl-sel {
	border-color: #cba6f7 !important;
	background-color: #2f2f45 !important;
	}

	.sl-panel .sl-row.sl-dim, .sl-panel .sl-row.sl-blank {
	opacity: 0.35;
	}

	.sl-panel .sl-eye {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 3px;
	color: #6c7086;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	}

	.sl-panel .sl-eye:hover {
	color: #cdd6f4;
	}

	.sl-panel .sl-th {
	width: 34px;
	height: 34px;
	object-fit: contain;
	border-radius: 4px;
	flex: 0 0 34px;
	border: 1px solid #313244;
	background-color: #181825;
	background-image:
	linear-gradient(45deg, #242436 25%, transparent 25%, transparent 75%, #242436 75%),
	linear-gradient(45deg, #242436 25%, transparent 25%, transparent 75%, #242436 75%);
	background-size: 8px 8px;
	background-position: 0 0, 4px 4px;
	}

	.sl-panel .sl-name {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.25;
	color: #cdd6f4;
	display: flex;
	flex-direction: column;
	}

	.sl-panel .sl-name em {
	font-style: normal;
	font-size: 10px;
	color: #6c7086;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	}

	.sl-panel .sl-reset {
	margin-top: 6px;
	font-size: 11px;
	font-weight: 500;
	padding: 6px 10px;
	border-radius: 5px;
	border: 1px solid #313244;
	background: transparent;
	color: #a6adc8;
	cursor: pointer;
	transition: all 0.12s ease;
	width: 100%;
	text-align: center;
	}

	.sl-panel .sl-reset:hover {
	color: #cdd6f4;
	border-color: #45475a;
	background: #242436;
	}

	/* Footer with Signature */
	.space-footer {
	margin-top: 1.75rem;
	padding-top: 1rem;
	text-align: center;
	border-top: 1px solid #313244;
	font-size: 0.76rem;
	color: #6c7086;
	}

	.space-footer a {
	color: #b4befe;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.12s ease;
	}

	.space-footer a:hover {
	color: #cba6f7;
	text-decoration: underline;
	}
	"""


	PANEL_JS = r"""
	() => {
	if (window.__slPanelWired) return;
	window.__slPanelWired = true;

	document.addEventListener("click", (e) => {
	const eyeBtn = e.target.closest(".sl-eye");
	if (eyeBtn) {
	e.stopPropagation();
	const panel = eyeBtn.closest(".sl-panel");
	if (!panel) return;
	const l = panel.querySelector('.sl-lyr[data-i="' + eyeBtn.dataset.eye + '"]');
	if (!l) return;
	const hidden = l.classList.toggle("sl-off");
	eyeBtn.classList.toggle("sl-hid", hidden);
	const row = eyeBtn.closest(".sl-row");
	if (row) row.classList.toggle("sl-dim", hidden);
	return;
	}

	const resetBtn = e.target.closest(".sl-reset");
	if (resetBtn) {
	e.stopPropagation();
	const panel = resetBtn.closest(".sl-panel");
	if (!panel) return;
	panel.querySelectorAll(".sl-lyr").forEach((l) => {
	l.classList.remove("sl-off");
	l.style.transform = "";
	l.dataset.tx = 0;
	l.dataset.ty = 0;
	});
	panel.querySelectorAll(".sl-eye").forEach((b) => b.classList.remove("sl-hid"));
	panel.querySelectorAll(".sl-row").forEach((r) => r.classList.remove("sl-dim"));
	return;
	}

	const row = e.target.closest(".sl-row");
	if (row) {
	const panel = row.closest(".sl-panel");
	if (!panel) return;
	panel.querySelectorAll(".sl-row").forEach((r) => r.classList.remove("sl-sel"));
	row.classList.add("sl-sel");
	panel.dataset.sel = row.dataset.i;
	}
	});

	let drag = null;
	const pt = (e) => {
	const t = e.touches && e.touches[0];
	return t ? { x: t.clientX, y: t.clientY } : { x: e.clientX, y: e.clientY };
	};
	const move = (e) => {
	if (!drag) return;
	const s = pt(e);
	const tx = drag.tx + (s.x - drag.sx);
	const ty = drag.ty + (s.y - drag.sy);
	drag.l.dataset.tx = tx;
	drag.l.dataset.ty = ty;
	drag.l.style.transform = "translate(" + tx + "px," + ty + "px)";
	e.preventDefault();
	};
	const up = () => {
	drag = null;
	document.removeEventListener("mousemove", move);
	document.removeEventListener("mouseup", up);
	document.removeEventListener("touchmove", move);
	document.removeEventListener("touchend", up);
	};
	const down = (e) => {
	const stage = e.target.closest(".sl-stage");
	if (!stage) return;
	const panel = stage.closest(".sl-panel");
	if (!panel) return;
	const l = panel.querySelector('.sl-lyr[data-i="' + panel.dataset.sel + '"]');
	if (!l \|\| l.classList.contains("sl-off")) return;
	const s = pt(e);
	drag = {
	l: l,
	sx: s.x,
	sy: s.y,
	tx: parseFloat(l.dataset.tx \|\| 0),
	ty: parseFloat(l.dataset.ty \|\| 0),
	};
	document.addEventListener("mousemove", move);
	document.addEventListener("mouseup", up);
	document.addEventListener("touchmove", move, { passive: false });
	document.addEventListener("touchend", up);
	e.preventDefault();
	};
	document.addEventListener("mousedown", down);
	document.addEventListener("touchstart", down, { passive: false });
	}
	"""

	SVG_EYE_ICON = """<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path><circle cx="12" cy="12" r="3"></circle></svg>"""


	def pil_to_data_uri(im: Image.Image, max_dim: int \| None = None) -> str:
	"""Encode PIL image to inline base64 PNG data URI."""
	if max_dim:
	w, h = im.size
	scale = max_dim / max(w, h)
	if scale < 1.0:
	im = im.resize((max(1, int(w * scale)), max(1, int(h * scale))), Image.Resampling.LANCZOS)
	buf = io.BytesIO()
	im.save(buf, format="PNG")
	b64 = base64.b64encode(buf.getvalue()).decode("ascii")
	return f"data:image/png;base64,{b64}"


	def build_layer_panel(
	layer_pils: list[Image.Image],
	coverage: list[float],
	layer_names: Sequence[str] \| None = None,
	width: int = 512,
	height: int = 552,
	) -> str:
	"""Render minimalist Catppuccin layer canvas and inspector."""
	n = len(layer_pils)
	if n == 0:
	return '<div class="sl-panel"><div class="text-xs text-[#a6adc8]">No layers extracted yet.</div></div>'

	sel_i = next((i for i in range(n - 1, 0, -1) if coverage[i] >= 0.5), 0)
	stack = []
	rows = []

	for i, pil in enumerate(layer_pils):
	uri = pil_to_data_uri(pil)
	stack.append(
	f'<img class="sl-lyr" data-i="{i}" src="{uri}" draggable="false" alt="layer {i}">'
	)

	for i in range(n - 1, -1, -1):
	if layer_names and i < len(layer_names):
	name = layer_names[i]
	elif i == 0:
	name = "Background"
	elif i == n - 1:
	name = "Foreground"
	else:
	name = f"Layer {i + 1}"

	pct = coverage[i]
	empty = pct < 0.5
	tag = "Empty" if empty else f"{pct:.1f}% cover"
	cls = " sl-sel" if i == sel_i else ""
	cls += " sl-blank" if empty else ""
	th_uri = pil_to_data_uri(layer_pils[i], max_dim=72)
	rows.append(
	f'<div class="sl-row{cls}" data-i="{i}">'
	f'<button class="sl-eye" data-eye="{i}" title="Toggle visibility">{SVG_EYE_ICON}</button>'
	f'<img class="sl-th" src="{th_uri}" draggable="false" alt="">'
	f'<span class="sl-name">{name}<em>{tag}</em></span>'
	f'</div>'
	)

	return (
	f'<div class="sl-panel" data-sel="{sel_i}">'
	f' <div class="sl-stagewrap">'
	f' <div class="sl-stage" style="aspect-ratio:{width}/{height}">{"".join(stack)}</div>'
	f' </div>'
	f' <div class="sl-side">'
	f' <div class="sl-sidehead"><span>Layers ({n})</span><span>Drag on canvas · Eye to hide</span></div>'
	f' {"".join(rows)}'
	f' <button class="sl-reset">Reset positions</button>'
	f' </div>'
	f'</div>'
	)


	def render_header(
	title: str = "Ming-Image-Layers",
	handle: str = "6chan",
	subtitle: str = "Decompose flattened designs into independently editable transparent layers.",
	) -> str:
	"""Render a centered Hugging Face App header with author signature."""
	return f"""
	<div class="space-header">
	<h1 class="space-title">{title}</h1>
	<p class="space-subtitle">{subtitle}</p>
	<div class="space-links">
	<a href="https://huggingface.co/6chan/Ming-Image-0.1-Design-Layer-FP8" target="_blank">FP8 Model</a>
	<span>·</span>
	<a href="https://huggingface.co/inclusionAI/Ming-Image-0.1-Design-Layer" target="_blank">Base Model</a>
	<span>·</span>
	<a href="https://github.com/inclusionAI/Ming-Image" target="_blank">GitHub</a>
	<span>·</span>
	<a href="https://huggingface.co/{handle}" target="_blank" class="space-signature">@{handle}</a>
	</div>
	</div>
	<div class="space-helper-line">
	Describe the elements you want on each layer, ordered front to back, with the background last.
	</div>
	""".strip()


	def render_footer(
	handle: str = "6chan",
	model_name: str \| None = None,
	model_url: str \| None = None,
	extra_links: list[tuple[str, str]] \| None = None,
	) -> str:
	"""Render a minimalist developer footer with clear attribution."""
	links_html = []
	if model_name and model_url:
	links_html.append(f'<a href="{model_url}" target="_blank">{model_name}</a>')
	if extra_links:
	for name, url in extra_links:
	links_html.append(f'<a href="{url}" target="_blank">{name}</a>')

	links_str = " · ".join(links_html)
	links_block = f'<div style="margin-top: 0.25rem;">{links_str}</div>' if links_str else ""

	return f"""
	<div class="space-footer">
	<div>Built by <a href="https://huggingface.co/{handle}" target="_blank">@{handle}</a> · Layer decomposition studio</div>
	{links_block}
	</div>
	""".strip()