Update assets/theme.py

assets/theme.py

@@ -1,281 +1,254 @@
-from __future__ import annotations
+apple_css = """
 
-from typing import Iterable
-import gradio as gr
 
-# gr.themes.builder()
-from gradio.themes.base import Base
-from gradio.themes.utils import colors, fonts, sizes
+:root {
+    --ios-blur: 20px;
+    --ios-radius: 20px;
+    --ios-btn-radius: 14px;
+    --ios-blue: #007AFF;
+    --ios-blue-hover: #005ecb;
+    --ios-bg-light: #F2F2F7;
+    --ios-card-light: #FFFFFF;
+    --ios-text-primary: #000000;
+    --ios-text-secondary: #8E8E93;
+    --ios-border-light: rgba(60, 60, 67, 0.12);
+    
+    --ios-bg-dark: #000000;
+    --ios-card-dark: #1C1C1E;
+    --ios-text-primary-dark: #FFFFFF;
+    --ios-text-secondary-dark: #98989F;
+    --ios-border-dark: rgba(84, 84, 88, 0.35);
+}
 
+/* --- Global Reset & Typography --- */
+body, .gradio-container {
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
+    -webkit-font-smoothing: antialiased !important;
+    color: var(--ios-text-primary);
+}
 
-class Ilaria(Base):
-    def __init__(
-        self,
-        *,
-        primary_hue: colors.Color | str = colors.pink,
-        secondary_hue: colors.Color | str = colors.pink,
-        neutral_hue: colors.Color | str = colors.gray,
-        spacing_size: sizes.Size | str = sizes.spacing_md,
-        radius_size: sizes.Size | str = sizes.radius_md,
-        text_size: sizes.Size | str = sizes.text_lg,
-        font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            "Syne V",
-            fonts.GoogleFont("Syne"),
-            "ui-sans-serif",
-            "system-ui",
-        ),
-        font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            "ui-monospace",
-            fonts.GoogleFont("Nunito Sans"),
-        ),
-    ):
-        super().__init__(
-            primary_hue=primary_hue,
-            secondary_hue=secondary_hue,
-            neutral_hue=neutral_hue,
-            spacing_size=spacing_size,
-            radius_size=radius_size,
-            text_size=text_size,
-            font=font,
-            font_mono=font_mono,
-        )
-        self.name = ("Ilaria",)
-        self.pink_50 = "#FDF2F8"
-        self.pink_100 = "#FCE7F3"
-        self.pink_200 = "#FBCFE8"
-        self.pink_300 = "#F9A8D4"
-        self.pink_400 = "#F472B6"
-        self.pink_500 = "#EC4899"
-        self.pink_600 = "#DB2777"
-        self.pink_700 = "#BE185D"
-        self.pink_800 = "#9D174D"
-        self.pink_900 = "#831843"
-        self.pink_950 = "#500724"
+.gradio-container {
+    max-width: 900px !important;
+    background-color: var(--ios-bg-light) !important;
+    padding: 24px !important;
+}
 
-        super().set(
-            # Bf667
-            background_fill_primary="#FFFFFF",
-            background_fill_primary_dark="#110F0F",
-            background_fill_secondary="#FFFFFF",
-            background_fill_secondary_dark="#110F0F",
-            block_background_fill="*neutral_800",
-            block_background_fill_dark="*neutral_800",
-            block_border_color="*border_color_primary",
-            block_border_color_dark="*border_color_primary",
-            block_border_width="1px",
-            block_border_width_dark="1px",
-            block_info_text_color="*body_text_color_subdued",
-            block_info_text_color_dark="*body_text_color_subdued",
-            block_info_text_size="*text_sm",
-            block_info_text_weight="400",
-            block_label_background_fill="*background_fill_primary",
-            block_label_background_fill_dark="*background_fill_secondary",
-            block_label_border_color="*border_color_primary",
-            block_label_border_color_dark="*border_color_primary",
-            block_label_border_width="1px",
-            block_label_border_width_dark="1px",
-            block_label_margin="0",
-            block_label_padding="*spacing_sm *spacing_lg",
-            block_label_radius="calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px) 0",
-            block_label_right_radius="0 calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px)",
-            block_label_shadow="*block_shadow",
-            block_label_text_color="*#110F0F",
-            block_label_text_color_dark="*#110F0F",
-            block_label_text_weight="400",
-            block_padding="*spacing_xl",
-            block_radius="*radius_md",
-            block_shadow="none",
-            block_shadow_dark="none",
-            block_title_background_fill="rgb(255,255,255)",
-            block_title_background_fill_dark="rgb(255,255,255)",
-            block_title_border_color="none",
-            block_title_border_color_dark="none",
-            block_title_border_width="0px",
-            block_title_padding="*block_label_padding",
-            block_title_radius="*block_label_radius",
-            block_title_text_color="#110F0F",
-            block_title_text_color_dark="#110F0F",
-            block_title_text_size="*text_md",
-            block_title_text_weight="600",
-            body_background_fill="#FFFFFF",
-            body_background_fill_dark="#110F0F",
-            body_text_color="white",
-            body_text_color_dark="white",
-            body_text_color_subdued="*neutral_400",
-            body_text_color_subdued_dark="*neutral_400",
-            body_text_size="*text_md",
-            body_text_weight="400",
-            border_color_accent="*neutral_600",
-            border_color_accent_dark="*neutral_600",
-            border_color_primary="*neutral_800",
-            border_color_primary_dark="*neutral_800",
-            button_border_width="*input_border_width",
-            button_border_width_dark="*input_border_width",
-            button_cancel_background_fill="*button_secondary_background_fill",
-            button_cancel_background_fill_dark="*button_secondary_background_fill",
-            button_cancel_background_fill_hover="*button_cancel_background_fill",
-            button_cancel_background_fill_hover_dark="*button_cancel_background_fill",
-            button_cancel_border_color="*button_secondary_border_color",
-            button_cancel_border_color_dark="*button_secondary_border_color",
-            button_cancel_border_color_hover="*button_cancel_border_color",
-            button_cancel_border_color_hover_dark="*button_cancel_border_color",
-            button_cancel_text_color="#110F0F",
-            button_cancel_text_color_dark="#110F0F",
-            button_cancel_text_color_hover="#110F0F",
-            button_cancel_text_color_hover_dark="#110F0F",
-            button_large_padding="*spacing_lg calc(2 * *spacing_lg)",
-            button_large_radius="*radius_lg",
-            button_large_text_size="*text_lg",
-            button_large_text_weight="600",
-            button_primary_background_fill="*primary_600",
-            button_primary_background_fill_dark="*primary_600",
-            button_primary_background_fill_hover="*primary_500",
-            button_primary_background_fill_hover_dark="*primary_500",
-            button_primary_border_color="*primary_500",
-            button_primary_border_color_dark="*primary_500",
-            button_primary_border_color_hover="*primary_400",
-            button_primary_border_color_hover_dark="*primary_400",
-            button_primary_text_color="white",
-            button_primary_text_color_dark="white",
-            button_primary_text_color_hover="#110F0F",
-            button_primary_text_color_hover_dark="#110F0F",
-            button_secondary_background_fill="transparent",
-            button_secondary_background_fill_dark="transparent",
-            button_secondary_background_fill_hover="*neutral_800",
-            button_secondary_background_fill_hover_dark="*neutral_800",
-            button_secondary_border_color="*neutral_700",
-            button_secondary_border_color_dark="*neutral_700",
-            button_secondary_border_color_hover="*neutral_600",
-            button_secondary_border_color_hover_dark="*neutral_600",
-            button_secondary_text_color="white",
-            button_secondary_text_color_dark="white",
-            button_secondary_text_color_hover="*button_secondary_text_color",
-            button_secondary_text_color_hover_dark="*button_secondary_text_color",
-            button_small_padding="*spacing_sm calc(2 * *spacing_sm)",
-            button_small_radius="*radius_lg",
-            button_small_text_size="*text_md",
-            button_small_text_weight="400",
-            button_transition="0.3s ease all",
-            checkbox_background_color="*neutral_700",
-            checkbox_background_color_dark="*neutral_700",
-            checkbox_background_color_focus="*checkbox_background_color",
-            checkbox_background_color_focus_dark="*checkbox_background_color",
-            checkbox_background_color_hover="*checkbox_background_color",
-            checkbox_background_color_hover_dark="*checkbox_background_color",
-            checkbox_background_color_selected="*pink_600",
-            checkbox_background_color_selected_dark="*pink_600",
-            checkbox_border_color="*neutral_700",
-            checkbox_border_color_dark="*neutral_700",
-            checkbox_border_color_focus="*pink_500",
-            checkbox_border_color_focus_dark="*pink_500",
-            checkbox_border_color_hover="*neutral_600",
-            checkbox_border_color_hover_dark="*neutral_600",
-            checkbox_border_color_selected="*pink_600",
-            checkbox_border_color_selected_dark="*pink_600",
-            checkbox_border_radius="*radius_sm",
-            checkbox_border_width="*input_border_width",
-            checkbox_border_width_dark="*input_border_width",
-            checkbox_check="url(\"data:image/svg+xml,%3csvg viewBox=\'0 0 16 16\' fill=\'white\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\'%3e%3c/path%3e%3c/svg%3e\")",
-            checkbox_label_background_fill="transparent",
-            checkbox_label_background_fill_dark="transparent",
-            checkbox_label_background_fill_hover="transparent",
-            checkbox_label_background_fill_hover_dark="transparent",
-            checkbox_label_background_fill_selected="transparent",
-            checkbox_label_background_fill_selected_dark="transparent",
-            checkbox_label_border_color="transparent",
-            checkbox_label_border_color_dark="transparent",
-            checkbox_label_border_color_hover="transparent",
-            checkbox_label_border_color_hover_dark="transparent",
-            checkbox_label_border_width="transparent",
-            checkbox_label_border_width_dark="transparent",
-            checkbox_label_gap="*spacing_lg",
-            checkbox_label_padding="*spacing_md calc(2 * *spacing_md)",
-            checkbox_label_shadow="none",
-            checkbox_label_text_color="*body_text_color",
-            checkbox_label_text_color_dark="*body_text_color",
-            checkbox_label_text_color_selected="*checkbox_label_text_color",
-            checkbox_label_text_color_selected_dark="*checkbox_label_text_color",
-            checkbox_label_text_size="*text_md",
-            checkbox_label_text_weight="400",
-            checkbox_shadow="*input_shadow",
-            color_accent="*primary_500",
-            color_accent_soft="*pink_50",
-            color_accent_soft_dark="*neutral_700",
-            container_radius="*radius_xl",
-            embed_radius="*radius_lg",
-            error_background_fill="*background_fill_primary",
-            error_background_fill_dark="*background_fill_primary",
-            error_border_color="*border_color_primary",
-            error_border_color_dark="*border_color_primary",
-            error_border_width="1px",
-            error_border_width_dark="1px",
-            error_text_color="#ef4444",
-            error_text_color_dark="#ef4444",
-            form_gap_width="0px",
-            input_background_fill="*neutral_900",
-            input_background_fill_dark="*neutral_900",
-            input_background_fill_focus="*pink_600",
-            input_background_fill_focus_dark="*pink_600",
-            input_background_fill_hover="*input_background_fill",
-            input_background_fill_hover_dark="*input_background_fill",
-            input_border_color="*neutral_700",
-            input_border_color_dark="*neutral_700",
-            input_border_color_focus="*pink_600",
-            input_border_color_focus_dark="*primary_600",
-            input_border_color_hover="*input_border_color",
-            input_border_color_hover_dark="*input_border_color",
-            input_border_width="1px",
-            input_border_width_dark="1px",
-            input_padding="*spacing_xl",
-            input_placeholder_color="*neutral_500",
-            input_placeholder_color_dark="*neutral_500",
-            input_radius="*radius_lg",
-            input_shadow="none",
-            input_shadow_dark="none",
-            input_shadow_focus="*input_shadow",
-            input_shadow_focus_dark="*input_shadow",
-            input_text_size="*text_md",
-            input_text_weight="400",
-            layout_gap="*spacing_xxl",
-            link_text_color="*pink_500",
-            link_text_color_active="*pink_500",
-            link_text_color_active_dark="*pink_500",
-            link_text_color_dark="*pink_500",
-            link_text_color_hover="*pink_400",
-            link_text_color_hover_dark="*pink_400",
-            link_text_color_visited="*pink_600",
-            link_text_color_visited_dark="*pink_600",
-            loader_color="*color_accent",
-            loader_color_dark="*color_accent",
-            panel_background_fill="*background_fill_secondary",
-            panel_background_fill_dark="*background_fill_secondary",
-            panel_border_color="*border_color_primary",
-            panel_border_color_dark="*border_color_primary",
-            panel_border_width="1px",
-            panel_border_width_dark="1px",
-            prose_header_text_weight="600",
-            prose_text_size="*text_md",
-            prose_text_weight="400",
-            radio_circle="url(\"data:image/svg+xml,%3csvg viewBox=\'0 0 16 16\' fill=\'white\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3ccircle cx=\'8\' cy=\'8\' r=\'3\'%3e%3c/circle%3e%3c/svg%3e\")",
-            section_header_text_size="*text_md",
-            section_header_text_weight="400",
-            shadow_drop="rgba(0,0,0,0.05) 0px 1px 2px 0px",
-            shadow_drop_lg="0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-            shadow_inset="rgba(0,0,0,0.05) 0px 2px 4px 0px inset",
-            shadow_spread="3px",
-            shadow_spread_dark="1px",
-            slider_color="#9E9E9E",
-            slider_color_dark="#9E9E9E",
-            stat_background_fill="*primary_500",
-            stat_background_fill_dark="*primary_500",
-            table_border_color="*neutral_700",
-            table_border_color_dark="*neutral_700",
-            table_even_background_fill="*neutral_950",
-            table_even_background_fill_dark="*neutral_950",
-            table_odd_background_fill="*neutral_900",
-            table_odd_background_fill_dark="*neutral_900",
-            table_radius="*radius_lg",
-            table_row_focus="*color_accent_soft",
-            table_row_focus_dark="*color_accent_soft",
-        )
+/* --- Scrollbar --- */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+}
 
+/* --- Header --- */
+.header-container {
+    text-align: center;
+    margin-bottom: 32px;
+    margin-top: 16px;
+}
+
+.main-title {
+    font-size: 34px !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.5px !important;
+    margin: 0 0 8px 0 !important;
+    color: var(--ios-text-primary) !important;
+}
+
+.subtitle {
+    font-size: 17px !important;
+    font-weight: 400 !important;
+    color: var(--ios-text-secondary) !important;
+    margin: 0 !important;
+}
+
+/* --- iOS Card Design --- */
+.input-section, .output-section {
+    background: var(--ios-card-light);
+    border-radius: var(--ios-radius) !important;
+    padding: 24px !important;
+    margin-bottom: 20px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
+    border: 1px solid rgba(255,255,255,0.4) !important;
+}
+
+/* --- Inputs (Text, Dropdowns, Sliders) --- */
+textarea, input[type="text"], select, .gr-textbox, .gr-dropdown {
+    background-color: #EFEFF4 !important; /* iOS Input Background */
+    border: 1px solid transparent !important;
+    border-radius: 10px !important;
+    padding: 12px 14px !important;
+    font-size: 17px !important;
+    color: var(--ios-text-primary) !important;
+    transition: all 0.2s ease !important;
+    -webkit-appearance: none !important;
+}
+
+textarea:focus, input:focus, select:focus {
+    outline: none !important;
+    background-color: #FFFFFF !important;
+    box-shadow: 0 0 0 2px var(--ios-blue) !important;
+}
+
+/* Sliders */
+input[type=range] {
+    -webkit-appearance: none; 
+    background: transparent; 
+}
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    background: #FFFFFF;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+    margin-top: -10px;
+    cursor: pointer;
+}
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 4px;
+    background: #D1D1D6;
+    border-radius: 2px;
+}
+
+/* --- Tabs --- */
+.tabs {
+    border-bottom: 1px solid transparent !important;
+    background: transparent !important;
+}
+.tabitem {
+    border: none !important;
+    font-size: 15px !important;
+    font-weight: 500 !important;
+    color: var(--ios-text-secondary) !important;
+    padding: 10px 16px !important;
+    background: transparent !important;
+    border-radius: 8px !important;
+    transition: all 0.2s ease !important;
+}
+.tabitem.selected {
+    color: var(--ios-blue) !important;
+    background: rgba(0, 122, 255, 0.1) !important;
+    font-weight: 600 !important;
+}
+
+/* --- Buttons --- */
+button.primary {
+    background-color: var(--ios-blue) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: var(--ios-btn-radius) !important;
+    padding: 14px 24px !important;
+    font-size: 17px !important;
+    font-weight: 600 !important;
+    transition: transform 0.1s ease, background-color 0.2s ease !important;
+    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25) !important;
+    cursor: pointer !important;
+    width: 100%;
+}
+
+button.primary:hover {
+    background-color: var(--ios-blue-hover) !important;
+}
+
+button.primary:active {
+    transform: scale(0.97) !important;
+}
+
+button.secondary {
+    background-color: rgba(118, 118, 128, 0.12) !important;
+    color: var(--ios-blue) !important;
+    border: none !important;
+    border-radius: var(--ios-btn-radius) !important;
+    padding: 12px 20px !important;
+    font-size: 17px !important;
+    font-weight: 600 !important;
+    transition: background-color 0.2s !important;
+}
+button.secondary:hover {
+    background-color: rgba(118, 118, 128, 0.2) !important;
+}
+
+/* --- Accordions --- */
+.gr-accordion {
+    border: none !important;
+    background: transparent !important;
+}
+.gr-accordion-label {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    padding: 12px 0 !important;
+    color: var(--ios-text-primary) !important;
+    border-bottom: 1px solid var(--ios-border-light) !important;
+}
+
+/* --- Footer --- */
+.footer-text {
+    margin-top: 40px;
+    color: var(--ios-text-secondary) !important;
+    font-size: 13px !important;
+    text-align: center;
+}
+.attribution-link {
+    color: var(--ios-blue) !important;
+    text-decoration: none !important;
+}
+
+/* --- Dark Mode Overrides --- */
+.dark .gradio-container {
+    background-color: var(--ios-bg-dark) !important;
+}
+.dark .main-title {
+    color: var(--ios-text-primary-dark) !important;
+}
+.dark .subtitle {
+    color: var(--ios-text-secondary-dark) !important;
+}
+.dark .input-section, 
+.dark .output-section {
+    background: var(--ios-card-dark) !important;
+    border-color: var(--ios-border-dark) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+}
+.dark textarea, 
+.dark input, 
+.dark select {
+    background-color: #2C2C2E !important;
+    color: var(--ios-text-primary-dark) !important;
+    border-color: var(--ios-border-dark) !important;
+}
+.dark .gr-accordion-label {
+    color: var(--ios-text-primary-dark) !important;
+    border-color: var(--ios-border-dark) !important;
+}
+.dark .tabitem.selected {
+    background: rgba(10, 132, 255, 0.2) !important;
+}
+.dark button.primary {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
+}
+
+/* --- Mobile Responsive --- */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 16px !important;
+    }
+    .main-title {
+        font-size: 28px !important;
+    }
+    .input-section, .output-section {
+        padding: 16px !important;
+        border-radius: 16px !important;
+    }
+    button.primary {
+        padding: 16px !important; /* Larger touch targets */
+    }
+}
+
+"""