theme.py

"""Gradio theme and CSS in the style of interhuman.ai.

The site is a monochrome, shadcn-style system: white (dark mode: near-black)
background, near-black text, black primary buttons, hairline grey borders, a
10px radius, tight bold headlines, JetBrains Mono for code, and one purple
accent (#c181ff). Its body face, AT Surt, is commercial, so Inter stands in.
"""

from __future__ import annotations

import gradio as gr

ACCENT = "#c181ff"

THEME = gr.themes.Base(
    primary_hue=gr.themes.colors.neutral,
    secondary_hue=gr.themes.colors.neutral,
    neutral_hue=gr.themes.colors.neutral,
    radius_size=gr.themes.sizes.radius_md,
    font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
    font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
).set(
    body_background_fill="#ffffff",
    body_background_fill_dark="#050505",
    body_text_color="#0a0a0a",
    body_text_color_dark="#f5f5f5",
    body_text_color_subdued="#8e8e8e",
    body_text_color_subdued_dark="#8e8e8e",
    background_fill_primary="#ffffff",
    background_fill_primary_dark="#121212",
    background_fill_secondary="#fafafa",
    background_fill_secondary_dark="#1a1a1a",
    block_background_fill="#fdfdfd",
    block_background_fill_dark="#121212",
    block_border_color="#e5e5e5",
    block_border_color_dark="rgba(255,255,255,0.1)",
    block_border_width="1px",
    block_shadow="none",
    block_shadow_dark="none",
    block_radius="10px",
    block_label_background_fill="transparent",
    block_label_background_fill_dark="transparent",
    block_label_text_color="#8e8e8e",
    block_label_text_color_dark="#8e8e8e",
    block_title_text_weight="500",
    input_background_fill="#ffffff",
    input_background_fill_dark="#0f0f0f",
    input_border_color="#e5e5e5",
    input_border_color_dark="rgba(255,255,255,0.12)",
    input_border_color_focus="#a3a3a3",
    input_border_color_focus_dark="rgba(255,255,255,0.3)",
    input_shadow="none",
    input_shadow_focus="none",
    button_primary_background_fill="#171717",
    button_primary_background_fill_hover="#000000",
    button_primary_background_fill_dark="#f5f5f5",
    button_primary_background_fill_hover_dark="#ffffff",
    button_primary_text_color="#fafafa",
    button_primary_text_color_dark="#171717",
    button_primary_border_color="transparent",
    button_primary_border_color_dark="transparent",
    button_secondary_background_fill="#f5f5f5",
    button_secondary_background_fill_hover="#ebebeb",
    button_secondary_background_fill_dark="#262626",
    button_secondary_background_fill_hover_dark="#303030",
    button_secondary_text_color="#171717",
    button_secondary_text_color_dark="#f5f5f5",
    button_secondary_border_color="transparent",
    button_secondary_border_color_dark="transparent",
    button_large_radius="8px",
    button_medium_radius="8px",
    button_primary_shadow="none",
    button_secondary_shadow="none",
    checkbox_background_color_selected="#171717",
    checkbox_background_color_selected_dark=ACCENT,
    checkbox_border_color_selected="#171717",
    checkbox_border_color_selected_dark=ACCENT,
    slider_color="#171717",
    slider_color_dark="#f5f5f5",
    color_accent=ACCENT,
    color_accent_soft="rgba(193,129,255,0.12)",
)

CSS = f"""
.gradio-container {{ max-width: 1120px !important; margin: 0 auto !important; }}
.ih-hero {{ padding: 40px 0 24px; }}
.ih-eyebrow {{
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--body-text-color-subdued); display: flex; align-items: center; gap: 8px;
}}
.ih-eyebrow::before {{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: {ACCENT}; }}
.ih-hero h1 {{ font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; margin: 14px 0 12px; }}
.ih-hero p {{ max-width: 640px; color: var(--body-text-color-subdued); font-size: 16px; line-height: 1.6; margin: 0; }}
.ih-card {{
  border: 1px solid var(--block-border-color); border-radius: 10px; padding: 18px 20px;
  background: var(--block-background-fill); min-height: 120px;
}}
.ih-caption {{
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--body-text-color-subdued);
}}
.ih-headline {{ font-size: 32px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 4px; }}
.ih-meta {{ font-size: 14px; color: var(--body-text-color-subdued); }}
.ih-note {{ font-size: 14px; line-height: 1.55; color: var(--body-text-color-subdued); margin: 10px 0 0; }}
.ih-warning {{ font-size: 13px; color: var(--body-text-color-subdued); margin: 0 0 12px; font-style: italic; }}
.ih-tiles {{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }}
.ih-tile {{ border: 1px solid var(--block-border-color); border-radius: 8px; padding: 9px 10px; min-width: 0; }}
.ih-value {{
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-top: 4px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}}
.ih-section {{ margin: 20px 0 4px; padding-top: 14px; border-top: 1px solid var(--block-border-color); }}
.ih-signal {{ padding: 10px 0; border-bottom: 1px solid var(--block-border-color); }}
.ih-signal:last-child {{ border-bottom: none; padding-bottom: 0; }}
.ih-signal .ih-note {{ margin-top: 4px; }}
.ih-signal-head {{ font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }}
.ih-badge {{
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--block-border-color);
  color: var(--body-text-color-subdued); text-transform: lowercase; letter-spacing: 0.02em;
}}
.ih-badge-high {{ background: rgba(193,129,255,0.14); border-color: rgba(193,129,255,0.45); color: var(--body-text-color); }}
.ih-footer {{
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--block-border-color);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--body-text-color-subdued);
}}
footer {{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }}
@media (max-width: 640px) {{ .ih-hero h1 {{ font-size: 32px; }} }}
"""

HERO = """
<div class="ih-hero">
  <div class="ih-eyebrow">Inter-2 Audio</div>
  <h1>Hear how it was said.</h1>
  <p>Upload or record a speech clip and the model reads emotion, social signals and vocal delivery from the
  voice: tone, prosody, pace and intensity. Pick a task, edit the prompt, or tick the schema to speed up inference.</p>
</div>
"""

FOOTER = '<div class="ih-footer">Interhuman AI · first 30 s of each clip are used</div>'