"""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 = """
Inter-2 Audio

Hear how it was said.

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.

""" FOOTER = '
Interhuman AI ยท first 30 s of each clip are used
'