Spaces:
Running
Running
Tiny Scribe UI Layout Review
Current UI Structure (as of commit c9dbd58)
Overall Layout
┌─────────────────────────────────────────────────────────────────────────┐
│ 📄 Tiny Scribe │
│ AI-Powered Transcript Summarization │
└─────────────────────────────────────────────────────────────────────────┘
┌──────────────────────┬──────────────────────────────────────────────────┐
│ LEFT COLUMN (1/3) │ RIGHT COLUMN (2/3) │
│ │ │
│ [Input & Settings] │ [Output Display] │
└──────────────────────┴──────────────────────────────────────────────────┘
LEFT COLUMN (Settings & Input)
1. Global Settings Section
┌─────────────────────────────────────┐
│ 🌐 Global Settings │
├─────────────────────────────────────┤
│ • Output Language: [en / zh-TW] │
└─────────────────────────────────────┘
2. Input Content Section
┌─────────────────────────────────────┐
│ 📥 Input Content │
├─────────────────────────────────────┤
│ [Tabs] │
│ ├─ 📄 Upload File │
│ │ └─ File upload component │
│ └─ ✍️ Paste Text │
│ └─ Textbox (10-20 lines) │
└─────────────────────────────────────┘
3. Mode Selection
┌─────────────────────────────────────┐
│ 🎯 Summarization Mode │
├─────────────────────────────────────┤
│ ○ Standard Mode │
│ ○ Advanced Mode (3-Model Pipeline) │
└─────────────────────────────────────┘
4A. Standard Mode Settings (visible when Standard selected)
┌─────────────────────────────────────┐
│ 📊 Standard Mode │
│ Single-model direct summarization │
├─────────────────────────────────────┤
│ [Nested Tabs for Model Selection] │
│ ├─ 🤖 Preset Models │
│ │ ├─ Model Dropdown │
│ │ └─ Enable Reasoning Checkbox │
│ └─ 🔧 Custom GGUF │
│ ├─ HF Hub Search │
│ ├─ File Dropdown │
│ ├─ Load Button │
│ └─ Retry Button │
├─────────────────────────────────────┤
│ 🖥️ Hardware Configuration │
│ ├─ CPU Thread Preset Dropdown │
│ └─ Custom Thread Count Slider │
├─────────────────────────────────────┤
│ 🎛️ Inference Parameters │
│ ├─ Temperature (0.0-2.0) │
│ ├─ Max Output Tokens (256-4096) │
│ ├─ Top P (0.0-1.0) │
│ └─ Top K (0-100) │
└─────────────────────────────────────┘
4B. Advanced Mode Settings (visible when Advanced selected)
┌─────────────────────────────────────┐
│ 🧠 Advanced Mode (3-Model Pipeline) │
│ Extraction → Deduplication → Synth │
├─────────────────────────────────────┤
│ 🔍 Stage 1: Extraction │
│ ├─ Extraction Model Dropdown │
│ ├─ Context Window Slider (2K-8K) │
│ ├─ Window Overlap Slider (1-5) │
│ ├─ Enable Reasoning Checkbox │
│ └─ [Accordion] Model Details │
├─────────────────────────────────────┤
│ 🧬 Stage 2: Deduplication │
│ ├─ Embedding Model Dropdown │
│ ├─ Similarity Threshold (0.7-0.95) │
│ └─ [Accordion] Model Details │
├─────────────────────────────────────┤
│ ✨ Stage 3: Synthesis │
│ ├─ Synthesis Model Dropdown │
│ ├─ Enable Reasoning Checkbox │
│ ├─ Max Output Tokens (512-4096) │
│ ├─ Temperature (0.0-2.0) │
│ ├─ Top P (0.0-1.0) │
│ ├─ Top K (0-100) │
│ └─ [Accordion] Model Details │
├─────────────────────────────────────┤
│ ⚙️ Global Settings │
│ ├─ CPU Thread Preset Dropdown │
│ ├─ Custom Thread Count Slider │
│ └─ Enable Trace Logging Checkbox │
└─────────────────────────────────────┘
5. Debug Tools (collapsed by default)
┌─────────────────────────────────────┐
│ 🐛 Debug Tools [Accordion] │
│ └─ System Prompt (Read-Only) │
└─────────────────────────────────────┘
6. Submit Button
┌─────────────────────────────────────┐
│ ✨ Generate Summary │
└─────────────────────────────────────┘
RIGHT COLUMN (Output Display)
1. Model Information Panel
┌─────────────────────────────────────┐
│ 📊 Model Information │
├─────────────────────────────────────┤
│ Standard Mode: │
│ • Shows 1 model spec │
│ │
│ Advanced Mode: │
│ • Extraction Model specs │
│ • Embedding Model specs │
│ • Synthesis Model specs │
└─────────────────────────────────────┘
2. Model Thinking Process
┌─────────────────────────────────────┐
│ 🧠 Model Thinking Process │
├─────────────────────────────────────┤
│ (Textbox - 12-20 lines) │
│ Real-time reasoning display │
│ │
│ [📋 Copy Thinking] │
└─────────────────────────────────────┘
3. Final Summary
┌─────────────────────────────────────┐
│ 📝 Final Summary │
├─────────────────────────────────────┤
│ (Markdown output) │
│ Summary content appears here │
│ │
│ (Completion metrics if Advanced) │
│ │
│ [📋 Copy Summary] [⬇️ Download] │
└─────────────────────────────────────┘
UI Statistics
Total UI Code: 998 lines
Components Used:
- Groups: 7
- Accordions: 4
- Tabs: 2
- Rows: 4
- Columns: 2
- Buttons: 6
- Dropdowns: 8
- Sliders: 13
- Checkboxes: 4
- Radio: 1
- Textboxes: 4
- Markdown: 6
Strengths ✅
Clear Two-Column Layout
- Left: Input & Settings
- Right: Output & Results
- Good separation of concerns
Single Mode Selector
- Radio button to switch between Standard/Advanced
- No redundant tab system
- Clean mode switching
Stage-Based Advanced Mode
- Clear pipeline flow: Extraction → Dedup → Synthesis
- Each stage has dedicated section
- Logical grouping of parameters
Unified Model Information
- Single panel in right column
- Shows 1 model (Standard) or 3 models (Advanced)
- Updates dynamically
Single Global Language Selector
- No duplicates
- Applies to both modes
- In Global Settings section
Mode-Specific Parameters
- Standard Mode: Simple inference params
- Advanced Mode: Stage-specific params + global settings
- No confusion about which params apply where
Potential Issues ⚠️
1. Nested Tabs in Standard Mode
Current:
Standard Mode Group
└─ Tabs (model_tabs)
├─ Preset Models
└─ Custom GGUF
Issue: Extra nesting level that might not be necessary
Suggestion: Consider using an Accordion or Radio button for model source selection instead of nested tabs
2. Inconsistent "Global Settings" Naming
Current:
- Section 1: "🌐 Global Settings" (language selector)
- Advanced Mode: "⚙️ Global Settings" (hardware config)
Issue: Two sections with same semantic name but different content
Suggestion:
- Rename first one to "Output Settings" or "Language Settings"
- Or consolidate into one global section at top
3. Hardware Configuration Duplication
Current:
- Standard Mode has its own hardware config
- Advanced Mode has its own hardware config (in "Global Settings" subsection)
Issue: Same control duplicated across modes
Suggestion: Move to a true global section that applies to both modes (could be above mode selector)
4. Long Left Column in Advanced Mode
Current Structure:
- Stage 1: ~40 lines
- Stage 2: ~25 lines
- Stage 3: ~60 lines
- Global Settings: ~30 lines
- Total: ~155 lines of settings
Issue: Lots of scrolling required in Advanced Mode
Suggestion: Consider collapsing stages into accordions or using a more compact layout
5. Model Details Accordions in Advanced Mode
Current:
- Each stage has a collapsed "Model Details" accordion
- 3 separate accordions
Issue: Redundant with unified Model Information panel in right column
Suggestion: Remove individual accordions and rely only on unified panel in right column
6. Missing Visual Feedback for Mode Selection
Current:
- Mode radio button at top
- Settings groups show/hide based on selection
Issue: No clear visual indicator of which mode is active besides radio button
Suggestion: Add visual styling/badge to mode groups (e.g., highlighted border when active)
7. Debug Tools Position
Current:
- Located between Submit button and Output column
- In left column after all settings
Issue: Might be better positioned elsewhere or combined with other debug features
Suggestion: Move to a footer section or integrate with completion info
8. Completion Metrics Display
Current:
- Shows inside "Final Summary" section
- Below the summary text
Issue: Not clearly separated from summary content
Suggestion: Create a dedicated "Generation Metrics" section or improve visual separation
9. Input Content Position
Current:
- Near top of left column, before mode selection
Issue: Users might want to select mode first, then provide input
Suggestion: Consider moving Input Content below Mode Selection
10. Multiple Accordions in Advanced Mode
Current:
- 3 "Model Details" accordions (one per stage)
- 1 Debug Tools accordion
Issue: Too many collapsible sections might hide important information
Suggestion: Reduce accordion usage or make certain ones open by default
Recommended Improvements 🎯
Priority 1 (High Impact, Low Effort)
Remove Stage-Specific Model Details Accordions
- Rely only on unified Model Information panel
- Reduces clutter in left column
- Eliminates redundancy
Rename Conflicting "Global Settings"
- First section → "Output Settings"
- Advanced Mode section → "Pipeline Settings"
- Improves clarity
Add Visual Mode Indicator
- Highlight active mode group with colored border
- Add badge showing "ACTIVE" state
- Better visual feedback
Priority 2 (Medium Impact, Medium Effort)
Consolidate Hardware Configuration
- Move to single global section above mode selector
- Applies to both Standard and Advanced modes
- Reduces duplication
Simplify Standard Mode Model Selection
- Replace nested tabs with Radio buttons or Dropdown
- "Preset Models" vs "Custom GGUF" selection
- Reduces UI nesting
Improve Completion Metrics Display
- Separate section in Final Summary group
- Clear visual separator (border/background)
- More prominent typography
Priority 3 (Lower Impact, Higher Effort)
Optimize Advanced Mode Layout
- Consider using collapsible accordions for stages
- Or use a stepper/wizard UI for pipeline stages
- Reduce vertical scrolling
Reorganize Input Position
- Move Input Content below Mode Selection
- Logical flow: Mode → Settings → Input → Generate
- More intuitive workflow
Consolidate Debug Features
- Move Debug Tools to footer or separate tab
- Combine with other developer features
- Keep main UI focused on user workflow
Proposed Optimal Layout
Left Column (Top to Bottom)
1. Output Settings (language selector)
2. Hardware Configuration (global - applies to both modes)
3. Mode Selection (radio button)
4. Input Content (file upload / paste text tabs)
5. [Mode-Specific Settings - show/hide based on mode]
- Standard Mode: Model Selection (radio/dropdown) + Inference Params
- Advanced Mode: Stage 1, 2, 3 sections
6. Submit Button
Right Column (Top to Bottom)
1. Model Information (unified panel)
2. Model Thinking Process
3. Final Summary
4. Generation Metrics (separate visual section)
5. Action Buttons (Copy, Download)
Footer
Debug Tools (collapsed) + Version Info
Summary
Overall Assessment: ⭐⭐⭐⭐☆ (4/5)
The UI is well-structured with clear separation between input/settings and output. The recent refactoring improved consistency by:
- Unifying model information display
- Removing duplicate language selectors
- Organizing Advanced Mode by pipeline stages
Main Strengths:
- Clean two-column layout
- Logical stage-based organization for Advanced Mode
- Good use of show/hide for mode switching
Main Weaknesses:
- Some redundancy (hardware config, model details accordions)
- Naming conflicts ("Global Settings" used twice)
- Could reduce nesting in Standard Mode
- Long vertical scroll in Advanced Mode
Recommended Next Steps:
- Remove redundant Model Details accordions in Advanced Mode
- Consolidate hardware configuration into one global section
- Rename conflicting "Global Settings" sections
- Add visual feedback for active mode
- Consider simplifying Standard Mode model selection UI