Spaces:
Running on Zero
Running on Zero
| """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>' | |