Spaces:
Configuration error
Configuration error
| # Plan — Branch `ui-styling` (UI-Verschönerung) | |
| **Branch-Basis:** master @ 286e987 | |
| **User-Scope (bestätigt):** Nur Styling — keine Funktionsänderung | |
| **Status:** Scope-Dokument vor Implementierung (DevMind-Regel: 2× fragen) | |
| ## Ziel | |
| Visuelle Politur der Gradio-WebUI (chat_tab + TTS-Accordion + Profile-Editor + Sessions-Tab), ohne die zugrundeliegende Logik anzufassen. Schneller ästhetischer Gewinn mit minimalem Risiko. | |
| ## In-Scope | |
| ### 1. CSS-Variablen + Theme-Basis | |
| - Einheitliche CSS-Variablen für Farben, Spacing, Border-Radius in einer neuen Datei `gradio_tabs/_styles.py`. | |
| - Definiert einen `--bg-primary`, `--bg-secondary`, `--accent`, `--text-primary` etc., aus denen die Komponenten ihre Werte ziehen. | |
| - Keine Hardcoded-Farben in chat_tab.py mehr; alle bestehenden Inline-Styles durch Variablen ersetzt. | |
| ### 2. Chatbot-Polish | |
| - **Bubble-Alignment** User rechts / Assistant links (heute unklar). | |
| - **Avatar-Platzhalter** für User und Assistant (Initial-Buchstabe in Kreis, kein Bild-Asset nötig). | |
| - **Code-Block-Highlight** via gr.Code(component) statt reinem Markdown für ```-Blöcke. | |
| - **Markdown-Rendering** für Assistant-Antworten aktivieren (gr.Markdown statt plain text). | |
| - **Token-Counter**-Badge rechts oben in der Toolbar (prompt_tokens / completion_tokens / total). | |
| ### 3. Sidebar / Layout | |
| - Linke Sidebar mit Logo, Session-Liste, Profile-Auswahl in eigenem Block. | |
| - Hauptbereich Chat + rechte Sidebar mit Settings-Akkordeon (TTS, Profile, Auto-Tune). | |
| - 3-Spalten-Layout via `gr.Row` + `gr.Column(scale=...)`. | |
| - Tabs oben ersetzen Sidebar-Tabs (Settings/Sessions/Profile/TTS) zu Bottom-Panel-Accordion. | |
| ### 4. Komponenten-Polish | |
| - Buttons: einheitliche Border-Radius (8px), Hover-Effekt, Disabled-State deutlich. | |
| - Accordions: Pfeil-Rotation beim Öffnen, Übergangs-Animation. | |
| - Dropdowns: Suche-Prompt wenn >5 Items, klare Selected-Highlight-Farbe. | |
| - Textbox: Placeholder-Italic, Focus-Border akzentfarben. | |
| ### 5. TTS-Accordion-Schönheit | |
| - Engine-Auswahl als Radio-Buttons mit Engine-Icon (Buchstabe oder Initial in Quadrat). | |
| - Audio-Player zentriert statt full-width. | |
| - Status-Pill oben rechts ("Engine: piper ✓"). | |
| ## Out-of-Scope (EXPLIZIT) | |
| - **Keine** neuen Features (z.B. kein Multi-Chat, kein Theme-Toggle Light/Dark, keine Animation-Frameworks). | |
| - **Keine** Änderungen an Server-Endpoints, generators.py, patch.py, model_manager.py — **Motor unangetastet** (DevMind-Regel: kein motor-touch). | |
| - **Keine** Änderungen an der Session-Logik, Auto-Tune-Lock, Profile-Resolution. | |
| - **Keine** Änderungen an Tests, die Logik pinnen — nur ggf. neue CSS-/Visual-Tests (Pillow-Snapshot-Tests von Gradio-Komponenten, falls Zeit reicht). | |
| - **Keine** Dependency-Additions (kein tailwindcss, kein npm, alles in reinem Gradio-CSS/Inline-Style). | |
| ## Erlaubte Dateien (lesen + editieren) | |
| - `gradio_tabs/chat_tab.py` (UI-Komposition) | |
| - `gradio_tabs/_styles.py` (NEU — CSS-Variablen) | |
| - `app.py` (nur Mount-Order / Reihenfolge der Tabs, KEINE Logik) | |
| - `gradio_tabs/__init__.py` (Re-Exports der neuen Helper) | |
| - `tests/test_ui_styling.py` (NEU — Smoke-Tests: Komponenten gerendert, CSS-Vars vorhanden) | |
| ## Verifikation | |
| 1. `bash run.sh` startet sauber, keine Warnings. | |
| 2. UI lädt in <2s (kein zusätzlicher Network-IO). | |
| 3. Alle bestehenden Tests grün (189+). | |
| 4. Manuelle Sichtprüfung: Chat-Bubbles aligned, Avatar sichtbar, TTS-Akkordeon ästhetisch, keine 1-Pixel-Bugs. | |
| 5. Optional: Pillow-Snapshot-Test (Vergleich vorher/nachher — hartes Kriterium für "kein Stil-Regress"). | |
| ## Risiken | |
| - **Gradio-CSS-Spezifität**: Inline-Styles in Gradio-Komponenten werden oft von Gradio-Defaults überschrieben. Mitigiert durch `css=`-Argument in `gr.Blocks(css=...)` + höhere Spezifität. | |
| - **Visuelle Regression in 1b vs 4b**: Falls das UI Preset-spezifische States hat (PX-Engine-Aktiv-Indikator). Smoke-Test in beiden Presets. | |
| - **Lade-Regression**: Zu viele CSS-Variablen können Theme-Init verlangsamen. Mitigiert durch <50 Variablen. | |
| ## Reihenfolge | |
| 1. `gradio_tabs/_styles.py` mit zentralen CSS-Variablen. | |
| 2. `chat_tab.py` minimal-invasiv: Inline-Styles → Variablen, Avatar hinzu, Markdown-Renderer. | |
| 3. Layout-Refactor 3-Spalten (Sidebar + Chat + Settings). | |
| 4. TTS-Accordion-Polish. | |
| 5. Tests + Smoke (Server lokal, Screenshot-Vergleich). | |
| 6. Commit pro Sub-Bereich, nicht ein Mega-Commit. | |
| ## Was NICHT in diesem Plan ist | |
| - KEINE Auto-Tune-Logik-Änderung. | |
| - KEIN Light/Dark-Toggle (User-Wahl: "Nur Styling", keine Features). | |
| - KEINE neuen TTS-Engines. | |
| - KEINE Modal-Overlays oder Toasts (Gradio-Standard reicht). | |
| - KEINE Mobile-Optimierung (Gradio handhabt das selbst). | |
| ## Verwandte | |
| - Branch `self-conversation` (separater Branch, separat dokumentiert) | |
| - Branch `relay-layer-discovery` (separater Branch, separat dokumentiert) | |