| """Custom Gradio theme for the Project Halide workbench.""" |
|
|
| from __future__ import annotations |
|
|
| import gradio as gr |
|
|
| BRASS = "#d29a45" |
| BRASS_DARK = "#8c5a1f" |
| COPPER = "#be5f38" |
| TEAL = "#9aae6f" |
| VIOLET = "#8b5e4f" |
| RED = "#d85c45" |
|
|
| INK = "#100d0a" |
| CARBON = "#17110d" |
| SURFACE = "#1f1711" |
| SURFACE_SOFT = "#2b2118" |
| SURFACE_LIFT = "#3a2b1f" |
| PAPER = "#fff0d8" |
| PAPER_SOFT = "#e6d1b6" |
| MUTED = "#b89c77" |
| BORDER = "#5a432f" |
| BLACK = "#080604" |
|
|
| THEME_CSS = f""" |
| :root {{ |
| --halide-brass: {BRASS}; |
| --halide-brass-dark: {BRASS_DARK}; |
| --halide-copper: {COPPER}; |
| --halide-teal: {TEAL}; |
| --halide-violet: {VIOLET}; |
| --halide-red: {RED}; |
| --halide-ink: {INK}; |
| --halide-carbon: {CARBON}; |
| --halide-surface: {SURFACE}; |
| --halide-surface-soft: {SURFACE_SOFT}; |
| --halide-surface-lift: {SURFACE_LIFT}; |
| --halide-paper: {PAPER}; |
| --halide-paper-soft: {PAPER_SOFT}; |
| --halide-muted: {MUTED}; |
| --halide-border: {BORDER}; |
| --halide-black: {BLACK}; |
| }} |
| |
| html, |
| body, |
| .gradio-container {{ |
| background: var(--halide-ink) !important; |
| color: var(--halide-paper) !important; |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, |
| "Segoe UI", sans-serif !important; |
| letter-spacing: 0 !important; |
| }} |
| |
| body::before {{ |
| content: ""; |
| position: fixed; |
| inset: 0; |
| pointer-events: none; |
| background: |
| repeating-linear-gradient( |
| 90deg, |
| rgba(255, 240, 216, 0.018) 0, |
| rgba(255, 240, 216, 0.018) 1px, |
| transparent 1px, |
| transparent 16px |
| ); |
| opacity: 0.45; |
| }} |
| |
| .gradio-container {{ |
| max-width: none !important; |
| min-height: 100vh !important; |
| padding: 0 18px 18px !important; |
| }} |
| |
| #halide-app {{ |
| min-height: 100vh; |
| }} |
| |
| #halide-header {{ |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 18px; |
| max-width: 1720px; |
| margin: 0 auto; |
| padding: 18px 0 14px; |
| border-bottom: 1px solid rgba(197, 154, 82, 0.34); |
| }} |
| |
| .halide-brand-lockup {{ |
| display: flex; |
| align-items: center; |
| gap: 14px; |
| min-width: 0; |
| }} |
| |
| .halide-brand-mark {{ |
| width: 46px; |
| height: 46px; |
| border-radius: 8px; |
| object-fit: cover; |
| border: 1px solid rgba(197, 154, 82, 0.45); |
| background: var(--halide-black); |
| }} |
| |
| #halide-header h1 {{ |
| color: var(--halide-paper); |
| font-size: clamp(1.5rem, 2.2vw, 2.35rem); |
| line-height: 1.04; |
| margin: 2px 0 0; |
| font-weight: 860; |
| letter-spacing: 0 !important; |
| }} |
| |
| .halide-kicker {{ |
| color: var(--halide-teal); |
| display: inline-block; |
| font-size: 0.72rem; |
| font-weight: 840; |
| letter-spacing: 0.12em !important; |
| text-transform: uppercase; |
| }} |
| |
| .halide-model-strip {{ |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| gap: 10px; |
| min-width: min(42vw, 36rem); |
| }} |
| |
| .halide-model-strip span, |
| .halide-model-strip a {{ |
| border: 1px solid rgba(197, 154, 82, 0.32); |
| color: var(--halide-paper); |
| background: rgba(24, 23, 21, 0.92); |
| border-radius: 8px; |
| padding: 9px 13px; |
| font-size: 0.76rem; |
| font-weight: 780; |
| line-height: 1.08; |
| text-decoration: none; |
| white-space: nowrap; |
| }} |
| |
| .halide-model-strip a {{ |
| color: #f5dfac; |
| border-color: rgba(154, 174, 111, 0.42); |
| background: rgba(58, 43, 31, 0.92); |
| }} |
| |
| .halide-workbench {{ |
| max-width: 1720px; |
| margin: 14px auto 0 !important; |
| gap: 14px !important; |
| align-items: flex-start; |
| }} |
| |
| .halide-main-stage, |
| .halide-inspector, |
| .halide-intake-panel {{ |
| min-width: 0 !important; |
| }} |
| |
| .halide-intake-panel, |
| .halide-inspector {{ |
| background: rgba(17, 17, 17, 0.98); |
| border: 1px solid rgba(58, 53, 46, 0.95); |
| border-radius: 8px; |
| padding: 12px; |
| }} |
| |
| .halide-panel-title {{ |
| color: var(--halide-paper); |
| font-size: 0.76rem; |
| font-weight: 880; |
| letter-spacing: 0.1em !important; |
| text-transform: uppercase; |
| margin: 0 0 8px; |
| }} |
| |
| .halide-rail-copy {{ |
| color: var(--halide-muted); |
| font-size: 0.84rem; |
| line-height: 1.42; |
| margin: 0 0 12px; |
| }} |
| |
| .halide-model-card {{ |
| border: 1px solid rgba(154, 174, 111, 0.30); |
| background: rgba(154, 174, 111, 0.075); |
| border-radius: 8px; |
| padding: 12px; |
| margin-top: 12px; |
| }} |
| |
| .halide-model-card span {{ |
| color: var(--halide-teal); |
| display: block; |
| font-size: 0.68rem; |
| font-weight: 860; |
| letter-spacing: 0.11em !important; |
| text-transform: uppercase; |
| margin-bottom: 5px; |
| }} |
| |
| .halide-model-card strong {{ |
| color: var(--halide-paper); |
| display: block; |
| font-size: 0.98rem; |
| line-height: 1.2; |
| }} |
| |
| .halide-model-card p {{ |
| color: var(--halide-muted); |
| margin: 6px 0 0; |
| font-size: 0.82rem; |
| line-height: 1.35; |
| }} |
| |
| .halide-run-state {{ |
| display: grid; |
| grid-template-columns: minmax(0, 1fr); |
| gap: 5px; |
| border-radius: 8px; |
| padding: 13px 15px; |
| margin-bottom: 12px; |
| background: var(--halide-surface); |
| border: 1px solid rgba(197, 154, 82, 0.30); |
| min-height: 76px; |
| }} |
| |
| .halide-run-state strong {{ |
| color: var(--halide-paper); |
| font-size: clamp(1.08rem, 1.5vw, 1.45rem); |
| line-height: 1.1; |
| }} |
| |
| .halide-run-state span:last-child {{ |
| color: var(--halide-muted); |
| font-size: 0.84rem; |
| }} |
| |
| .halide-run-state.active {{ |
| border-color: rgba(154, 174, 111, 0.48); |
| }} |
| |
| .halide-run-state.quiet {{ |
| border-color: rgba(139, 94, 79, 0.38); |
| }} |
| |
| .halide-run-eyebrow {{ |
| color: var(--halide-brass); |
| font-size: 0.68rem; |
| font-weight: 860; |
| letter-spacing: 0.12em !important; |
| text-transform: uppercase; |
| }} |
| |
| .halide-lighttable {{ |
| background: #120d09 !important; |
| border: 1px solid rgba(197, 154, 82, 0.34) !important; |
| border-radius: 8px !important; |
| padding: 13px !important; |
| box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42) !important; |
| }} |
| |
| .halide-empty-lighttable {{ |
| position: relative; |
| min-height: clamp(360px, 54vh, 760px); |
| overflow: hidden; |
| display: grid; |
| place-items: center; |
| border-radius: 7px; |
| border: 1px solid rgba(243, 234, 219, 0.26); |
| background: |
| linear-gradient(180deg, rgba(33, 31, 28, 0.76), rgba(5, 5, 5, 0.96)), |
| repeating-linear-gradient( |
| 0deg, |
| rgba(243, 234, 219, 0.035) 0, |
| rgba(243, 234, 219, 0.035) 1px, |
| transparent 1px, |
| transparent 24px |
| ); |
| }} |
| |
| .halide-empty-lighttable::after {{ |
| content: ""; |
| position: absolute; |
| inset: 24px; |
| border: 1px solid rgba(243, 234, 219, 0.12); |
| box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.82); |
| pointer-events: none; |
| }} |
| |
| .halide-empty-frame-grid {{ |
| position: absolute; |
| inset: 18px; |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 1px; |
| opacity: 0.86; |
| }} |
| |
| .halide-empty-frame-grid > div {{ |
| position: relative; |
| min-width: 0; |
| background: |
| linear-gradient(135deg, rgba(17, 17, 17, 0.9), rgba(44, 41, 36, 0.46)), |
| repeating-linear-gradient( |
| 90deg, |
| rgba(197, 154, 82, 0.06) 0, |
| rgba(197, 154, 82, 0.06) 1px, |
| transparent 1px, |
| transparent 38px |
| ); |
| border: 1px solid rgba(58, 53, 46, 0.92); |
| }} |
| |
| .halide-empty-frame-grid span {{ |
| position: absolute; |
| top: 12px; |
| left: 12px; |
| color: rgba(243, 234, 219, 0.72); |
| font-size: 0.7rem; |
| font-weight: 860; |
| letter-spacing: 0.1em !important; |
| text-transform: uppercase; |
| }} |
| |
| .halide-empty-center {{ |
| position: relative; |
| z-index: 2; |
| display: grid; |
| gap: 8px; |
| min-width: min(22rem, calc(100% - 48px)); |
| padding: 18px 20px; |
| text-align: center; |
| border-radius: 8px; |
| border: 1px solid rgba(197, 154, 82, 0.42); |
| background: rgba(10, 10, 10, 0.78); |
| box-shadow: 0 18px 50px rgba(0, 0, 0, 0.46); |
| }} |
| |
| .halide-empty-center span {{ |
| color: var(--halide-brass); |
| font-size: 0.68rem; |
| font-weight: 880; |
| letter-spacing: 0.12em !important; |
| text-transform: uppercase; |
| }} |
| |
| .halide-empty-center strong {{ |
| color: var(--halide-paper); |
| font-size: clamp(1.05rem, 1.8vw, 1.6rem); |
| line-height: 1.12; |
| }} |
| |
| .halide-empty-lighttable.active {{ |
| border-color: rgba(154, 174, 111, 0.36); |
| }} |
| |
| .halide-empty-lighttable.active .halide-empty-center {{ |
| border-color: rgba(154, 174, 111, 0.44); |
| }} |
| |
| .halide-empty-lighttable.active .halide-empty-center span {{ |
| color: var(--halide-teal); |
| }} |
| |
| .halide-section-header {{ |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 12px; |
| margin-bottom: 12px; |
| }} |
| |
| .halide-section-header span {{ |
| color: var(--halide-brass); |
| display: block; |
| font-size: 0.68rem; |
| font-weight: 880; |
| letter-spacing: 0.12em !important; |
| text-transform: uppercase; |
| }} |
| |
| .halide-section-header strong {{ |
| color: var(--halide-paper); |
| display: block; |
| font-size: 1rem; |
| line-height: 1.2; |
| margin-top: 3px; |
| }} |
| |
| .halide-section-header small {{ |
| color: var(--halide-muted); |
| border: 1px solid rgba(197, 154, 82, 0.26); |
| border-radius: 999px; |
| padding: 5px 9px; |
| font-size: 0.72rem; |
| line-height: 1; |
| }} |
| |
| .halide-review-gallery {{ |
| background: var(--halide-black) !important; |
| }} |
| |
| .halide-review-gallery {{ |
| margin-top: 12px !important; |
| }} |
| |
| .halide-upload img, |
| .halide-review-gallery img {{ |
| background: var(--halide-black) !important; |
| object-fit: contain !important; |
| }} |
| |
| #halide-compare {{ |
| min-height: 0 !important; |
| }} |
| |
| .halide-compare-viewer {{ |
| display: grid; |
| gap: 12px; |
| background: var(--halide-black); |
| border: 1px solid rgba(255, 240, 216, 0.16); |
| border-radius: 8px; |
| padding: 12px; |
| }} |
| |
| .halide-compare-stage {{ |
| position: relative; |
| min-height: clamp(380px, 58vh, 720px); |
| overflow: hidden; |
| display: grid; |
| place-items: center; |
| background: |
| linear-gradient(180deg, rgba(31, 23, 17, 0.82), rgba(8, 6, 4, 0.98)), |
| repeating-linear-gradient( |
| 90deg, |
| rgba(210, 154, 69, 0.055) 0, |
| rgba(210, 154, 69, 0.055) 1px, |
| transparent 1px, |
| transparent 34px |
| ); |
| border-radius: 7px; |
| }} |
| |
| .halide-compare-stage img {{ |
| position: absolute; |
| inset: 0; |
| width: 100%; |
| height: 100%; |
| object-fit: contain; |
| background: var(--halide-black); |
| }} |
| |
| .halide-compare-overlay {{ |
| position: absolute; |
| inset: 0; |
| clip-path: inset(0 calc(100% - var(--halide-split)) 0 0); |
| }} |
| |
| .halide-compare-divider {{ |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| left: var(--halide-split); |
| width: 2px; |
| transform: translateX(-1px); |
| background: rgba(255, 240, 216, 0.88); |
| box-shadow: 0 0 0 1px rgba(8, 6, 4, 0.70), 0 0 18px rgba(190, 95, 56, 0.38); |
| }} |
| |
| .halide-compare-label {{ |
| position: absolute; |
| top: 12px; |
| z-index: 2; |
| border: 1px solid rgba(255, 240, 216, 0.20); |
| background: rgba(16, 13, 10, 0.78); |
| color: var(--halide-paper); |
| border-radius: 999px; |
| padding: 6px 9px; |
| font-size: 0.70rem; |
| font-weight: 820; |
| line-height: 1; |
| }} |
| |
| .halide-compare-label.original {{ |
| left: 12px; |
| }} |
| |
| .halide-compare-label.overlay {{ |
| right: 12px; |
| }} |
| |
| .halide-compare-range {{ |
| width: 100%; |
| accent-color: var(--halide-copper); |
| }} |
| |
| #halide-run-button, |
| button.primary, |
| .primary button {{ |
| background: var(--halide-copper) !important; |
| color: white !important; |
| border: 1px solid rgba(255, 255, 255, 0.16) !important; |
| border-radius: 8px !important; |
| font-weight: 860 !important; |
| letter-spacing: 0 !important; |
| min-height: 46px !important; |
| box-shadow: 0 16px 30px rgba(184, 95, 63, 0.24) !important; |
| }} |
| |
| #halide-run-button:hover, |
| button.primary:hover, |
| .primary button:hover {{ |
| background: #ca6f4c !important; |
| }} |
| |
| button.secondary, |
| .secondary button, |
| button {{ |
| border-radius: 8px !important; |
| font-weight: 760 !important; |
| }} |
| |
| .halide-section-title {{ |
| color: var(--halide-paper); |
| font-size: 0.76rem; |
| font-weight: 880; |
| letter-spacing: 0.1em !important; |
| text-transform: uppercase; |
| margin: 0 0 10px; |
| }} |
| |
| .halide-subsection {{ |
| color: var(--halide-muted); |
| font-size: 0.72rem; |
| font-weight: 860; |
| letter-spacing: 0.08em !important; |
| margin: 14px 0 7px; |
| text-transform: uppercase; |
| }} |
| |
| .halide-muted {{ |
| color: var(--halide-muted); |
| margin: 0; |
| }} |
| |
| .halide-empty-card {{ |
| background: rgba(33, 31, 28, 0.82); |
| border: 1px solid rgba(197, 154, 82, 0.28); |
| border-radius: 8px; |
| padding: 13px; |
| }} |
| |
| .halide-empty-card span {{ |
| color: var(--halide-brass); |
| display: block; |
| font-size: 0.68rem; |
| font-weight: 880; |
| letter-spacing: 0.12em !important; |
| text-transform: uppercase; |
| margin-bottom: 6px; |
| }} |
| |
| .halide-empty-card strong {{ |
| color: var(--halide-paper); |
| display: block; |
| font-size: 1rem; |
| line-height: 1.2; |
| }} |
| |
| .halide-empty-card p {{ |
| color: var(--halide-muted); |
| font-size: 0.84rem; |
| line-height: 1.4; |
| margin: 7px 0 0; |
| }} |
| |
| .halide-notice {{ |
| border-radius: 8px; |
| padding: 11px 12px; |
| border: 1px solid var(--halide-border); |
| color: var(--halide-paper); |
| background: rgba(33, 31, 28, 0.9); |
| font-size: 0.88rem; |
| line-height: 1.42; |
| margin-bottom: 10px; |
| }} |
| |
| .halide-notice.good {{ |
| border-color: rgba(154, 174, 111, 0.40); |
| background: rgba(154, 174, 111, 0.085); |
| }} |
| |
| .halide-notice.caution {{ |
| border-color: rgba(197, 154, 82, 0.48); |
| background: rgba(197, 154, 82, 0.08); |
| }} |
| |
| .halide-notice.neutral {{ |
| border-color: rgba(139, 94, 79, 0.38); |
| background: rgba(139, 94, 79, 0.085); |
| }} |
| |
| .halide-stats {{ |
| display: grid; |
| gap: 0; |
| }} |
| |
| .halide-stats.compact {{ |
| gap: 0; |
| }} |
| |
| .halide-stat {{ |
| display: grid; |
| grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr); |
| gap: 12px; |
| padding: 8px 0; |
| border-bottom: 1px solid rgba(58, 53, 46, 0.85); |
| color: var(--halide-paper); |
| min-width: 0; |
| }} |
| |
| .halide-stat:last-child {{ |
| border-bottom: 0; |
| }} |
| |
| .halide-stat-label {{ |
| color: var(--halide-muted); |
| font-weight: 780; |
| }} |
| |
| .halide-stat span:last-child {{ |
| overflow-wrap: anywhere; |
| text-align: right; |
| }} |
| |
| .halide-report {{ |
| display: grid; |
| gap: 10px; |
| }} |
| |
| .halide-report-section {{ |
| background: rgba(33, 31, 28, 0.82); |
| border: 1px solid rgba(58, 53, 46, 0.94); |
| border-left: 3px solid var(--halide-brass); |
| border-radius: 8px; |
| padding: 12px 13px; |
| }} |
| |
| .halide-report-heading {{ |
| color: var(--halide-paper); |
| font-size: 0.78rem; |
| font-weight: 880; |
| letter-spacing: 0.1em !important; |
| margin-bottom: 8px; |
| text-transform: uppercase; |
| }} |
| |
| .halide-report-body {{ |
| color: var(--halide-paper-soft); |
| font-size: 0.93rem; |
| line-height: 1.56; |
| }} |
| |
| .halide-report-body p {{ |
| margin: 0 0 8px; |
| }} |
| |
| .halide-report-body p:last-child {{ |
| margin-bottom: 0; |
| }} |
| |
| .halide-report-body ul, |
| .halide-report-body ol {{ |
| margin: 0; |
| padding-left: 1.15rem; |
| }} |
| |
| .halide-report-body li {{ |
| margin: 5px 0; |
| padding-left: 2px; |
| }} |
| |
| .halide-pill-row {{ |
| display: flex; |
| flex-wrap: wrap; |
| gap: 7px; |
| margin-bottom: 10px; |
| }} |
| |
| .halide-defect-pill {{ |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| background: rgba(184, 95, 63, 0.13); |
| color: #ffe4d8; |
| border: 1px solid rgba(184, 95, 63, 0.38); |
| padding: 6px 9px; |
| border-radius: 999px; |
| font-size: 0.78rem; |
| font-weight: 780; |
| white-space: nowrap; |
| }} |
| |
| .halide-defect-pill strong {{ |
| color: var(--halide-paper); |
| }} |
| |
| .halide-defect-pill.dust {{ |
| background: rgba(197, 154, 82, 0.13); |
| border-color: rgba(197, 154, 82, 0.38); |
| }} |
| |
| .halide-defect-pill.dirt {{ |
| background: rgba(184, 95, 63, 0.13); |
| border-color: rgba(184, 95, 63, 0.38); |
| }} |
| |
| .halide-defect-pill.scratch {{ |
| background: rgba(239, 93, 82, 0.14); |
| border-color: rgba(239, 93, 82, 0.42); |
| }} |
| |
| .halide-defect-pill.long_hair {{ |
| background: rgba(139, 94, 79, 0.14); |
| border-color: rgba(139, 94, 79, 0.40); |
| }} |
| |
| .halide-defect-pill.short_hair {{ |
| background: rgba(154, 174, 111, 0.12); |
| border-color: rgba(154, 174, 111, 0.38); |
| }} |
| |
| .halide-defect-pill.emulsion_damage {{ |
| background: rgba(215, 203, 184, 0.12); |
| border-color: rgba(215, 203, 184, 0.34); |
| }} |
| |
| .halide-defect-pill.chemical_stain {{ |
| background: rgba(154, 174, 111, 0.13); |
| border-color: rgba(154, 174, 111, 0.38); |
| }} |
| |
| .halide-defect-pill.light_leak {{ |
| background: rgba(244, 114, 182, 0.13); |
| border-color: rgba(244, 114, 182, 0.36); |
| }} |
| |
| .halide-history-detail {{ |
| display: grid; |
| gap: 8px; |
| }} |
| |
| .halide-intake-panel .block, |
| .halide-inspector .block, |
| .halide-lighttable .block {{ |
| background: rgba(24, 23, 21, 0.95) !important; |
| border-color: rgba(58, 53, 46, 0.95) !important; |
| border-radius: 8px !important; |
| box-shadow: none !important; |
| outline: none !important; |
| overflow: hidden !important; |
| }} |
| |
| .halide-intake-panel .block:focus-within, |
| .halide-inspector .block:focus-within, |
| .halide-lighttable .block:focus-within {{ |
| border-color: rgba(197, 154, 82, 0.48) !important; |
| box-shadow: 0 0 0 1px rgba(197, 154, 82, 0.16) !important; |
| }} |
| |
| .halide-intake-panel .form, |
| .halide-inspector .form, |
| .halide-lighttable .form {{ |
| background: transparent !important; |
| border-color: transparent !important; |
| overflow: visible !important; |
| }} |
| |
| input, |
| textarea, |
| select, |
| .wrap, |
| .input-container, |
| .tokenizer, |
| .prose {{ |
| background-color: var(--halide-surface-soft) !important; |
| color: var(--halide-paper) !important; |
| border-color: rgba(58, 53, 46, 0.95) !important; |
| outline: none !important; |
| }} |
| |
| label, |
| .label, |
| .gradio-radio label, |
| .gradio-checkbox label {{ |
| color: var(--halide-muted) !important; |
| font-weight: 760 !important; |
| }} |
| |
| .label-wrap, |
| .label-wrap span, |
| label[data-testid="block-label"] {{ |
| background: rgba(33, 31, 28, 0.98) !important; |
| border-color: rgba(197, 154, 82, 0.24) !important; |
| color: var(--halide-paper) !important; |
| border-radius: 6px !important; |
| font-weight: 780 !important; |
| box-shadow: none !important; |
| }} |
| |
| label[data-testid="block-label"] span {{ |
| color: var(--halide-paper) !important; |
| }} |
| |
| label[data-testid$="-radio-label"] {{ |
| background: rgba(33, 31, 28, 0.98) !important; |
| border: 1px solid rgba(243, 234, 219, 0.18) !important; |
| border-radius: 8px !important; |
| box-shadow: none !important; |
| opacity: 1 !important; |
| }} |
| |
| label[data-testid$="-radio-label"].selected {{ |
| background: rgba(197, 154, 82, 0.16) !important; |
| border-color: rgba(197, 154, 82, 0.5) !important; |
| }} |
| |
| label[data-testid$="-radio-label"] span, |
| label[data-testid$="-radio-label"] input, |
| .gradio-checkbox label span {{ |
| color: var(--halide-paper) !important; |
| opacity: 1 !important; |
| }} |
| |
| label[data-testid$="-radio-label"] input {{ |
| accent-color: var(--halide-brass); |
| }} |
| |
| .tabs {{ |
| gap: 4px !important; |
| }} |
| |
| .tabs button {{ |
| color: var(--halide-muted) !important; |
| font-weight: 820 !important; |
| border-radius: 8px !important; |
| }} |
| |
| .tabs button.selected {{ |
| color: var(--halide-paper) !important; |
| border-color: var(--halide-brass) !important; |
| background: rgba(197, 154, 82, 0.10) !important; |
| }} |
| |
| table, |
| thead, |
| tbody, |
| tr, |
| td, |
| th {{ |
| color: var(--halide-paper) !important; |
| }} |
| |
| pre, |
| code {{ |
| font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace !important; |
| }} |
| |
| footer {{ |
| max-width: 1720px; |
| margin: 0 auto; |
| color: var(--halide-muted) !important; |
| text-align: center; |
| padding: 14px 8px 4px; |
| font-size: 0.82rem; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-wrap: wrap; |
| gap: 10px 16px; |
| }} |
| |
| footer a {{ |
| color: var(--halide-amber-light) !important; |
| text-decoration: none; |
| border-bottom: 1px solid rgba(236, 177, 107, 0.35); |
| }} |
| |
| footer a:hover {{ |
| color: var(--halide-paper) !important; |
| border-bottom-color: rgba(236, 177, 107, 0.75); |
| }} |
| |
| #halide-header {{ |
| background: rgba(17, 17, 17, 0.86); |
| border: 1px solid rgba(197, 154, 82, 0.28); |
| border-top: 0; |
| border-radius: 0 0 8px 8px; |
| padding: 16px 18px 15px; |
| box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); |
| }} |
| |
| .halide-inspector {{ |
| position: sticky; |
| top: 14px; |
| max-height: calc(100vh - 32px); |
| overflow-y: auto; |
| scrollbar-color: rgba(197, 154, 82, 0.48) rgba(17, 17, 17, 0.88); |
| }} |
| |
| .halide-intake-panel {{ |
| align-self: flex-start; |
| height: auto !important; |
| overflow: visible !important; |
| }} |
| |
| .halide-main-stage {{ |
| align-self: stretch; |
| }} |
| |
| .halide-lighttable {{ |
| position: relative; |
| overflow: hidden; |
| padding: 16px 20px !important; |
| background: |
| linear-gradient(180deg, rgba(17, 17, 17, 0.98), rgba(5, 5, 5, 0.98)), |
| repeating-linear-gradient( |
| 90deg, |
| rgba(243, 234, 219, 0.026) 0, |
| rgba(243, 234, 219, 0.026) 1px, |
| transparent 1px, |
| transparent 28px |
| ) !important; |
| }} |
| |
| .halide-lighttable::before {{ |
| content: ""; |
| position: absolute; |
| inset: 14px 8px; |
| pointer-events: none; |
| border-left: 1px solid rgba(197, 154, 82, 0.22); |
| border-right: 1px solid rgba(197, 154, 82, 0.22); |
| background: |
| repeating-linear-gradient( |
| 0deg, |
| rgba(197, 154, 82, 0.24) 0, |
| rgba(197, 154, 82, 0.24) 7px, |
| transparent 7px, |
| transparent 22px |
| ) left center / 5px 100% no-repeat, |
| repeating-linear-gradient( |
| 0deg, |
| rgba(197, 154, 82, 0.24) 0, |
| rgba(197, 154, 82, 0.24) 7px, |
| transparent 7px, |
| transparent 22px |
| ) right center / 5px 100% no-repeat; |
| opacity: 0.55; |
| }} |
| |
| .halide-lighttable > * {{ |
| position: relative; |
| z-index: 1; |
| }} |
| |
| .halide-review-actions {{ |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-top: 12px; |
| }} |
| |
| .halide-review-actions a, |
| .halide-history-preview-actions a {{ |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| min-height: 36px; |
| padding: 0 12px; |
| border-radius: 8px; |
| border: 1px solid rgba(154, 174, 111, 0.38); |
| background: rgba(154, 174, 111, 0.09); |
| color: #f5dfac !important; |
| text-decoration: none !important; |
| font-size: 0.78rem; |
| font-weight: 820; |
| }} |
| |
| .halide-review-actions a:hover, |
| .halide-history-preview-actions a:hover {{ |
| border-color: rgba(154, 174, 111, 0.62); |
| background: rgba(154, 174, 111, 0.14); |
| }} |
| |
| .halide-report-subheading {{ |
| color: var(--halide-teal); |
| font-size: 0.82rem; |
| font-weight: 860; |
| margin: 10px 0 6px; |
| }} |
| |
| .halide-report-body strong {{ |
| color: var(--halide-paper); |
| }} |
| |
| .halide-report-body em {{ |
| color: var(--halide-paper-soft); |
| }} |
| |
| .halide-report-body code {{ |
| color: #f5dfac; |
| background: rgba(154, 174, 111, 0.10); |
| border: 1px solid rgba(154, 174, 111, 0.24); |
| border-radius: 5px; |
| padding: 1px 5px; |
| }} |
| |
| .halide-tab-note {{ |
| color: var(--halide-muted); |
| font-size: 0.8rem; |
| line-height: 1.35; |
| margin: 0 0 8px; |
| }} |
| |
| .halide-history-actions {{ |
| gap: 8px !important; |
| margin: 6px 0 8px !important; |
| }} |
| |
| .halide-history-actions button {{ |
| min-height: 36px !important; |
| }} |
| |
| .halide-history-table tbody tr {{ |
| cursor: pointer; |
| }} |
| |
| .halide-history-table table {{ |
| table-layout: fixed !important; |
| }} |
| |
| .halide-history-table th, |
| .halide-history-table td {{ |
| font-size: 0.78rem !important; |
| line-height: 1.25 !important; |
| vertical-align: top !important; |
| }} |
| |
| .halide-history-table th:nth-child(1), |
| .halide-history-table td:nth-child(1) {{ |
| width: 24% !important; |
| }} |
| |
| .halide-history-table th:nth-child(2), |
| .halide-history-table td:nth-child(2) {{ |
| width: 31% !important; |
| }} |
| |
| .halide-history-table th:nth-child(3), |
| .halide-history-table td:nth-child(3) {{ |
| width: 14% !important; |
| text-align: center !important; |
| }} |
| |
| .halide-history-table th:nth-child(4), |
| .halide-history-table td:nth-child(4) {{ |
| width: 31% !important; |
| }} |
| |
| .halide-history-table tbody tr:hover td {{ |
| background: rgba(197, 154, 82, 0.10) !important; |
| }} |
| |
| .halide-history-preview {{ |
| border: 1px solid rgba(197, 154, 82, 0.26); |
| background: rgba(5, 5, 5, 0.74); |
| border-radius: 8px; |
| padding: 8px; |
| display: grid; |
| gap: 8px; |
| }} |
| |
| .halide-history-preview img {{ |
| width: 100%; |
| max-height: 220px; |
| object-fit: contain; |
| background: var(--halide-black); |
| border-radius: 6px; |
| }} |
| |
| .halide-history-preview-actions {{ |
| display: flex; |
| flex-wrap: wrap; |
| gap: 7px; |
| }} |
| |
| .halide-inspector-tabs {{ |
| min-width: 0; |
| }} |
| |
| .halide-inspector-tabs .tab-nav, |
| .halide-inspector-tabs [role="tablist"] {{ |
| overflow-x: auto; |
| }} |
| |
| @media (max-width: 1380px) {{ |
| .halide-workbench {{ |
| flex-direction: column !important; |
| gap: 12px !important; |
| }} |
| |
| .halide-intake-panel, |
| .halide-main-stage, |
| .halide-inspector {{ |
| width: 100% !important; |
| }} |
| |
| .halide-inspector {{ |
| min-width: 0 !important; |
| }} |
| |
| .halide-lighttable {{ |
| padding: 11px !important; |
| }} |
| |
| .halide-inspector {{ |
| position: static; |
| max-height: none; |
| }} |
| }} |
| |
| @media (max-width: 760px) {{ |
| .gradio-container {{ |
| padding: 0 10px 12px !important; |
| }} |
| |
| #halide-header {{ |
| align-items: flex-start; |
| flex-direction: column; |
| gap: 12px; |
| padding-top: 14px; |
| }} |
| |
| #halide-header h1 {{ |
| font-size: 1.42rem; |
| max-width: 11rem; |
| }} |
| |
| .halide-model-strip {{ |
| justify-content: flex-start; |
| min-width: 0; |
| width: 100%; |
| gap: 6px; |
| }} |
| |
| .halide-model-strip span, |
| .halide-model-strip a {{ |
| padding: 7px 8px; |
| font-size: 0.68rem; |
| }} |
| |
| .halide-brand-mark {{ |
| width: 40px; |
| height: 40px; |
| }} |
| |
| .halide-intake-panel, |
| .halide-inspector {{ |
| padding: 10px; |
| }} |
| |
| .halide-run-state {{ |
| min-height: 68px; |
| padding: 12px; |
| }} |
| |
| .halide-empty-lighttable {{ |
| min-height: 370px; |
| }} |
| |
| .halide-empty-frame-grid {{ |
| inset: 10px; |
| }} |
| |
| .halide-empty-lighttable::after {{ |
| inset: 16px; |
| }} |
| |
| .halide-empty-frame-grid span {{ |
| top: 10px; |
| left: 10px; |
| font-size: 0.62rem; |
| }} |
| |
| .halide-empty-center {{ |
| min-width: calc(100% - 40px); |
| padding: 15px 16px; |
| }} |
| |
| .tabs button {{ |
| min-height: 42px !important; |
| padding: 9px 10px !important; |
| }} |
| |
| .halide-review-gallery {{ |
| height: 190px !important; |
| }} |
| |
| .halide-compare-stage {{ |
| min-height: 360px !important; |
| }} |
| |
| #halide-run-button, |
| button.primary, |
| .primary button {{ |
| min-height: 48px !important; |
| }} |
| |
| .halide-stat {{ |
| grid-template-columns: 1fr; |
| gap: 3px; |
| }} |
| |
| .halide-stat span:last-child {{ |
| text-align: left; |
| }} |
| }} |
| """ |
|
|
|
|
| def build_theme() -> gr.Theme: |
| """Build a compact custom workbench theme.""" |
| return gr.themes.Base( |
| primary_hue=gr.themes.Color( |
| c50="#fff8ed", |
| c100="#f8ead2", |
| c200="#ebd1a3", |
| c300="#d9b36d", |
| c400=BRASS, |
| c500=BRASS, |
| c600=BRASS_DARK, |
| c700="#694a24", |
| c800="#4d361d", |
| c900="#332313", |
| c950="#1c1209", |
| ), |
| secondary_hue=gr.themes.Color( |
| c50="#f8faec", |
| c100="#eef3d1", |
| c200="#dbe6a9", |
| c300=TEAL, |
| c400="#7f9857", |
| c500="#667a43", |
| c600="#506236", |
| c700="#3e4d2b", |
| c800="#303c22", |
| c900="#252f1b", |
| c950="#131a0d", |
| ), |
| neutral_hue=gr.themes.Color( |
| c50="#fbf7ef", |
| c100=PAPER, |
| c200=PAPER_SOFT, |
| c300=MUTED, |
| c400="#85796a", |
| c500="#6e6357", |
| c600="#544d44", |
| c700=BORDER, |
| c800=SURFACE_SOFT, |
| c900=SURFACE, |
| c950=BLACK, |
| ), |
| font=gr.themes.GoogleFont("Inter"), |
| font_mono=gr.themes.GoogleFont("JetBrains Mono"), |
| ).set( |
| body_background_fill=INK, |
| body_background_fill_dark=INK, |
| body_text_color=PAPER, |
| body_text_color_dark=PAPER, |
| button_primary_background_fill=COPPER, |
| button_primary_background_fill_dark=COPPER, |
| button_primary_text_color="#ffffff", |
| button_primary_text_color_dark="#ffffff", |
| block_background_fill=SURFACE, |
| block_background_fill_dark=SURFACE, |
| block_border_color=BORDER, |
| block_border_color_dark=BORDER, |
| input_background_fill=SURFACE_SOFT, |
| input_background_fill_dark=SURFACE_SOFT, |
| input_border_color=BORDER, |
| input_border_color_dark=BORDER, |
| ) |
|
|
