fixing up themes, adding in an endpoint for llm.

2026-02-12 05:27:13 -05:00
parent 861f11e22b
commit af67984737
4 changed files with 545 additions and 0 deletions
--- a/theme.py
+++ b/theme.py
@@ -75,10 +75,38 @@ def get_lab_theme() -> gr.Theme:
        block_background_fill_dark=CYBER_GRAY,
        block_border_color="#2a2a2a",
        block_border_color_dark="#2a2a2a",
+        block_label_background_fill="#1a1a00",
+        block_label_background_fill_dark="#1a1a00",
        block_label_text_color=CYBER_YELLOW,
        block_label_text_color_dark=CYBER_YELLOW,
+        block_label_border_color=CYBER_YELLOW,
+        block_label_border_color_dark=CYBER_YELLOW,
        block_title_text_color=CYBER_TEXT,
        block_title_text_color_dark=CYBER_TEXT,
+        # Table / Dataframe
+        table_border_color="#2a2a2a",
+        table_even_background_fill="#111111",
+        table_even_background_fill_dark="#111111",
+        table_odd_background_fill=CYBER_GRAY,
+        table_odd_background_fill_dark=CYBER_GRAY,
+        table_row_focus="#1f1a00",
+        table_row_focus_dark="#1f1a00",
+        # Panel / accordion
+        panel_background_fill=CYBER_DARK,
+        panel_background_fill_dark=CYBER_DARK,
+        panel_border_color="#2a2a2a",
+        panel_border_color_dark="#2a2a2a",
+        # Checkbox / radio
+        checkbox_background_color=CYBER_DARKER,
+        checkbox_background_color_dark=CYBER_DARKER,
+        checkbox_label_background_fill=CYBER_GRAY,
+        checkbox_label_background_fill_dark=CYBER_GRAY,
+        checkbox_label_text_color=CYBER_TEXT,
+        checkbox_label_text_color_dark=CYBER_TEXT,
+        # Colors
+        color_accent=CYBER_YELLOW,
+        color_accent_soft="#1f1a00",
+        color_accent_soft_dark="#1f1a00",
    )


@@ -338,6 +366,154 @@ label, .gr-label {
 .glow-text {
    text-shadow: 0 0 10px var(--cyber-yellow), 0 0 20px var(--cyber-yellow);
 }
+
+/* ── Examples table / Dataframe overrides ── */
+/* Gradio renders Examples as a <table> inside a Dataset component.
+   The default styles inject white / light-gray rows that blow out the
+   cyberpunk palette.  Force them dark here. */
+.gr-samples-table,
+.gr-sample-textbox,
+table.table,
+.gr-examples table,
+div[class*="dataset"] table {
+    background: var(--cyber-dark) !important;
+    color: var(--cyber-text) !important;
+}
+
+.gr-samples-table tr,
+.gr-examples table tr,
+div[class*="dataset"] table tr {
+    background: #111111 !important;
+    border-bottom: 1px solid #222 !important;
+}
+
+.gr-samples-table tr:nth-child(even),
+.gr-examples table tr:nth-child(even),
+div[class*="dataset"] table tr:nth-child(even) {
+    background: #0d0d0d !important;
+}
+
+.gr-samples-table tr:hover,
+.gr-examples table tr:hover,
+div[class*="dataset"] table tr:hover {
+    background: #1f1a00 !important;
+    cursor: pointer;
+}
+
+.gr-samples-table th,
+.gr-examples table th,
+div[class*="dataset"] table th {
+    background: var(--cyber-gray) !important;
+    color: var(--cyber-yellow) !important;
+    text-transform: uppercase !important;
+    font-size: 0.75rem !important;
+    letter-spacing: 0.1em !important;
+    border-bottom: 2px solid var(--cyber-yellow) !important;
+    padding: 10px 16px !important;
+}
+
+.gr-samples-table td,
+.gr-examples table td,
+div[class*="dataset"] table td {
+    color: #999 !important;
+    border-bottom: 1px solid #1a1a1a !important;
+    padding: 10px 16px !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.85rem !important;
+}
+
+/* ── Block label pill (e.g. "GENERATED AUDIO", "STATUS") ── */
+/* These are the small floating labels above each component block */
+span[class*="label-wrap"],
+.gr-block-label,
+.label-wrap {
+    background: #1a1a00 !important;
+    border: 1px solid var(--cyber-yellow) !important;
+    color: var(--cyber-yellow) !important;
+}
+
+/* ── Dropdown / select menus ── */
+.gr-dropdown,
+select,
+ul[role="listbox"],
+div[class*="dropdown"],
+.secondary-wrap {
+    background: #0a0a0a !important;
+    color: var(--cyber-text) !important;
+    border-color: #333 !important;
+}
+
+ul[role="listbox"] li,
+div[class*="dropdown"] li {
+    background: #0a0a0a !important;
+    color: var(--cyber-text) !important;
+}
+
+ul[role="listbox"] li:hover,
+ul[role="listbox"] li[aria-selected="true"],
+div[class*="dropdown"] li:hover {
+    background: #1f1a00 !important;
+    color: var(--cyber-yellow) !important;
+}
+
+/* ── Audio player ── */
+.gr-audio,
+audio {
+    background: var(--cyber-dark) !important;
+    border: 1px solid #2a2a2a !important;
+}
+
+/* Audio waveform container */
+div[data-testid="waveform-container"],
+div[class*="audio"] {
+    background: #0a0a0a !important;
+}
+
+/* ── Markdown inside blocks ── */
+.gr-markdown,
+.gr-markdown p,
+.prose {
+    color: var(--cyber-text) !important;
+}
+
+.gr-markdown h3,
+.gr-markdown h2 {
+    color: var(--cyber-yellow) !important;
+    letter-spacing: 0.05em !important;
+}
+
+.gr-markdown strong {
+    color: var(--cyber-gold) !important;
+}
+
+/* ── Examples accordion header ("Examples" label) ── */
+.gr-examples .label-wrap,
+div[id*="examples"] .label-wrap,
+span[data-testid="block-label"] {
+    background: #1a1a00 !important;
+    color: var(--cyber-yellow) !important;
+    border: 1px solid var(--cyber-yellow) !important;
+    font-size: 0.7rem !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.1em !important;
+}
+
+/* ── Misc: tooltip, info text ── */
+.gr-info,
+.gr-description {
+    color: #666 !important;
+}
+
+/* ── Svelte internal: make sure no white backgrounds leak ── */
+.contain > div,
+.wrap > div {
+    background: inherit !important;
+}
+
+/* ── Tab content panels ── */
+.tabitem {
+    background: var(--cyber-dark) !important;
+}
 """