refactor: reorganize UI layout for better UX

Major UI restructuring:
- Add Tabs for model selection (Preset Models / Custom GGUF)
- Move Language + File Upload to top as 'Input' section
- Split Advanced Settings into Hardware Config and Inference Params
- Move Debug panel inside Advanced Settings accordion
- Move 'Copy Thinking' button to Thinking group (was in Summary)
- Simplify header/instructions by removing unnecessary Row/Column wrappers
- Move State components outside visual Groups for cleaner code
- Hide download_output until file is generated
- Add separate custom_info_output for Custom GGUF tab model info

Removes toggle_custom_model_ui handler (replaced by Tabs)

app.py

@@ -1517,94 +1517,115 @@ def create_interface():
         css=custom_css
     ) as demo:
         
-        # Header section
-        with gr.Row():
-            with gr.Column():
-                gr.HTML("""
-                <div class="app-header">
-                    <h1>📄 Tiny Scribe</h1>
-                    <p>AI-Powered Transcript Summarization with Real-Time Streaming</p>
-                    <div class="model-badge">
-                        <span>Select a model below to get started</span>
-                    </div>
-                </div>
-                """)
+        # Header section (simplified - no Row/Column wrapper needed for full-width)
+        gr.HTML("""
+        <div class="app-header">
+            <h1>📄 Tiny Scribe</h1>
+            <p>AI-Powered Transcript Summarization with Real-Time Streaming</p>
+            <div class="model-badge">
+                <span>Select a model below to get started</span>
+            </div>
+        </div>
+        """)
         
-        # Instructions
-        with gr.Row():
-            with gr.Column():
-                gr.HTML("""
-                <div class="instructions">
-                    <strong>📋 How to use:</strong>
-                    <ul>
-                        <li>Upload a .txt file containing your transcript, notes, or document</li>
-                        <li>Click "Generate Summary" to start AI processing</li>
-                        <li>Watch the <strong>Thinking Process</strong> (left) - see how the AI reasons</li>
-                        <li>Read the <strong>Final Summary</strong> (right) - the polished result</li>
-                        <li>Both outputs stream in real-time as the AI generates content</li>
-                    </ul>
-                </div>
-                """)
+        # Instructions (simplified)
+        gr.HTML("""
+        <div class="instructions">
+            <strong>📋 How to use:</strong>
+            <ul>
+                <li>Upload a .txt file containing your transcript, notes, or document</li>
+                <li>Click "Generate Summary" to start AI processing</li>
+                <li>Watch the <strong>Thinking Process</strong> (left) - see how the AI reasons</li>
+                <li>Read the <strong>Final Summary</strong> (right) - the polished result</li>
+                <li>Both outputs stream in real-time as the AI generates content</li>
+            </ul>
+        </div>
+        """)
         
         # Main content area
         with gr.Row():
-            # Left column - Input
+            # Left column - Configuration
             with gr.Column(scale=1):
+                
+                # ==========================================
+                # Section 1: Input Configuration (Language + File)
+                # ==========================================
                 with gr.Group():
-                    gr.HTML('<div class="section-header"><span class="section-icon">🌐</span> Output Language</div>')
+                    gr.HTML('<div class="section-header"><span class="section-icon">📤</span> Input</div>')
                     
                     language_selector = gr.Dropdown(
                         choices=[("English", "en"), ("Traditional Chinese (zh-TW)", "zh-TW")],
                         value="en",
-                        label="Select Language",
+                        label="🌐 Output Language",
                         info="Choose the target language for your summary"
                     )
                     
-                    # Model Selection - Moved to top level for easy access
-                    gr.HTML('<div class="section-header" style="margin-top: 20px;"><span class="section-icon">🤖</span> Model</div>')
-                    
-                    model_dropdown = gr.Dropdown(
-                        choices=[(info["name"] + (" ⚡" if info.get("supports_reasoning", False) and not info.get("supports_toggle", False) else ""), key) for key, info in AVAILABLE_MODELS.items()],
-                        value=DEFAULT_MODEL_KEY,
-                        label="Select Model",
-                        info="Models ordered by size (0.6B to 30B). Smaller = faster. Large files need bigger context. ⚡ = Always-reasoning models."
+                    file_input = gr.File(
+                        label="📄 Upload Transcript (.txt)",
+                        file_types=[".txt"],
+                        type="filepath",
+                        elem_classes=["file-upload-area"]
                     )
+                
+                # ==========================================
+                # Section 2: Model Selection (Tabs)
+                # ==========================================
+                with gr.Tabs() as model_tabs:
                     
-                    enable_reasoning = gr.Checkbox(
-                        value=True,
-                        label="Enable Reasoning Mode",
-                        info="Uses /think for deeper analysis (slower) or /no_think for direct output (faster). Only available for Qwen3 models.",
-                        interactive=True,
-                        visible=AVAILABLE_MODELS[DEFAULT_MODEL_KEY].get("supports_toggle", False)
-                    )
+                    # --- Tab 1: Preset Models ---
+                    with gr.TabItem("🤖 Preset Models"):
+                        # Filter out custom_hf from preset choices
+                        preset_choices = [
+                            (info["name"] + (" ⚡" if info.get("supports_reasoning", False) and not info.get("supports_toggle", False) else ""), key) 
+                            for key, info in AVAILABLE_MODELS.items() 
+                            if key != "custom_hf"
+                        ]
+                        
+                        model_dropdown = gr.Dropdown(
+                            choices=preset_choices,
+                            value=DEFAULT_MODEL_KEY,
+                            label="Select Model",
+                            info="Smaller = faster. ⚡ = Always-reasoning models."
+                        )
+                        
+                        enable_reasoning = gr.Checkbox(
+                            value=True,
+                            label="Enable Reasoning Mode",
+                            info="Uses /think for deeper analysis (slower) or /no_think for direct output (faster).",
+                            interactive=True,
+                            visible=AVAILABLE_MODELS[DEFAULT_MODEL_KEY].get("supports_toggle", False)
+                        )
+                        
+                        # Model info for preset models
+                        gr.HTML('<div class="section-header" style="margin-top: 12px;"><span class="section-icon">📊</span> Model Information</div>')
+                        _default_threads = DEFAULT_CUSTOM_THREADS if DEFAULT_CUSTOM_THREADS > 0 else 2
+                        info_output = gr.Markdown(
+                            value=get_model_info(DEFAULT_MODEL_KEY, n_threads=_default_threads)[0],
+                            elem_classes=["stats-grid"]
+                        )
                     
-                    # Custom Model UI (hidden by default, shown when custom_hf selected)
-                    with gr.Group(visible=False) as custom_model_group:
-                        gr.HTML('<div class="section-header" style="margin-top: 20px;"><span class="section-icon">🔧</span> Load Custom GGUF Model</div>')
+                    # --- Tab 2: Custom GGUF ---
+                    with gr.TabItem("🔧 Custom GGUF"):
+                        gr.HTML('<div style="font-size: 0.85em; color: #64748b; margin-bottom: 10px;">Load any GGUF model from HuggingFace Hub</div>')
                         
-                        # NEW: Native HF Hub Search Component
+                        # HF Hub Search Component
                         model_search_input = HuggingfaceHubSearch(
                             label="🔍 Search HuggingFace Models",
-                            placeholder="Type model name to search (e.g., 'llama', 'qwen', 'phi')",
+                            placeholder="Type model name (e.g., 'qwen', 'phi', 'llama')",
                             search_type="model",
                         )
                         
-                        # Hidden fields to store discovered file data
-                        custom_repo_files = gr.State([])
-                        
                         # File dropdown (populated after repo discovery)
                         custom_file_dropdown = gr.Dropdown(
-                            label="📦 Select GGUF File (Precision)",
+                            label="📦 Select GGUF File",
                             choices=[],
                             value=None,
-                            info="Available GGUF files will appear after selecting a model above",
+                            info="GGUF files appear after selecting a model above",
                             interactive=True,
-                            visible=True,
                         )
                         
-                        # Action buttons
-                        with gr.Row():
-                            load_btn = gr.Button("⬇️ Load Selected Model", variant="primary", size="sm")
+                        # Load button
+                        load_btn = gr.Button("⬇️ Load Selected Model", variant="primary", size="sm")
                         
                         # Status message
                         custom_status = gr.Textbox(
@@ -1615,102 +1636,110 @@ def create_interface():
                         )
                         
                         retry_btn = gr.Button("🔄 Retry", variant="secondary", visible=False)
+                        
+                        # Model info for custom models (shows after loading)
+                        gr.HTML('<div class="section-header" style="margin-top: 12px;"><span class="section-icon">📊</span> Custom Model Info</div>')
+                        custom_info_output = gr.Markdown(
+                            value="*Load a model to see its specifications...*",
+                            elem_classes=["stats-grid"]
+                        )
+                
+                # ==========================================
+                # Section 3: Advanced Settings
+                # ==========================================
+                with gr.Accordion("⚙️ Advanced Settings", open=False):
                     
-                    gr.HTML('<div class="section-header" style="margin-top: 20px;"><span class="section-icon">📤</span> Upload File</div>')
+                    # Hardware Configuration
+                    gr.HTML('<div class="section-header"><span class="section-icon">🖥️</span> Hardware Configuration</div>')
                     
-                    file_input = gr.File(
-                        label="Drag & drop or click to upload",
-                        file_types=[".txt"],
-                        type="filepath",
-                        elem_classes=["file-upload-area"]
+                    thread_config_dropdown = gr.Dropdown(
+                        choices=[
+                            ("HF Spaces Free Tier (2 vCPUs)", "free"),
+                            ("HF Spaces CPU Upgrade (8 vCPUs)", "upgrade"),
+                            ("Custom (manual)", "custom"),
+                        ],
+                        value=DEFAULT_THREAD_PRESET,
+                        label="CPU Thread Preset",
+                        info="Select hardware tier or specify custom thread count"
+                    )
+
+                    custom_threads_slider = gr.Slider(
+                        minimum=1,
+                        maximum=32,
+                        value=DEFAULT_CUSTOM_THREADS if DEFAULT_CUSTOM_THREADS > 0 else 4,
+                        step=1,
+                        label="Custom Thread Count",
+                        info="Number of CPU threads for model inference (1-32)",
+                        visible=DEFAULT_THREAD_PRESET == "custom"
                     )
                     
-                    with gr.Accordion("⚙️ Advanced Settings", open=False):
-                        with gr.Group(elem_classes=["advanced-settings"]):
-                            gr.HTML('<div class="section-header" style="margin-top: 10px;"><span class="section-icon">🖥️</span> Hardware Configuration</div>')
-
-                            thread_config_dropdown = gr.Dropdown(
-                                choices=[
-                                    ("HF Spaces Free Tier (2 vCPUs)", "free"),
-                                    ("HF Spaces CPU Upgrade (8 vCPUs)", "upgrade"),
-                                    ("Custom (manual)", "custom"),
-                                ],
-                                value=DEFAULT_THREAD_PRESET,
-                                label="CPU Thread Preset",
-                                info="Select hardware tier or specify custom thread count"
-                            )
-
-                            custom_threads_slider = gr.Slider(
-                                minimum=1,
-                                maximum=32,
-                                value=DEFAULT_CUSTOM_THREADS if DEFAULT_CUSTOM_THREADS > 0 else 4,
-                                step=1,
-                                label="Custom Thread Count",
-                                info="Number of CPU threads for model inference (1-32)",
-                                visible=DEFAULT_THREAD_PRESET == "custom"
-                            )
-
-                            temperature_slider = gr.Slider(
-                                minimum=0.0,
-                                maximum=2.0,
-                                value=0.6,
-                                step=0.1,
-                                label="Temperature",
-                                info="Lower = more focused, Higher = more creative"
-                            )
-                            max_tokens = gr.Slider(
-                                minimum=256,
-                                maximum=4096,
-                                value=2048,
-                                step=256,
-                                label="Max Output Tokens",
-                                info="Higher = more detailed summary"
-                            )
-                            top_p = gr.Slider(
-                                minimum=0.0,
-                                maximum=1.0,
-                                value=0.95,
-                                step=0.05,
-                                label="Top P (Nucleus Sampling)",
-                                info="Lower = more focused, Higher = more diverse"
-                            )
-                            top_k = gr.Slider(
-                                minimum=0,
-                                maximum=100,
-                                value=20,
-                                step=5,
-                                label="Top K",
-                                info="Limits token selection to top K tokens (0 = disabled)"
-                            )
+                    # Inference Parameters
+                    gr.HTML('<div class="section-header" style="margin-top: 16px;"><span class="section-icon">🎛️</span> Inference Parameters</div>')
                     
-                    submit_btn = gr.Button(
-                        "✨ Generate Summary",
-                        variant="primary",
-                        elem_classes=["submit-btn"]
+                    temperature_slider = gr.Slider(
+                        minimum=0.0,
+                        maximum=2.0,
+                        value=0.6,
+                        step=0.1,
+                        label="Temperature",
+                        info="Lower = more focused, Higher = more creative"
+                    )
+                    max_tokens = gr.Slider(
+                        minimum=256,
+                        maximum=4096,
+                        value=2048,
+                        step=256,
+                        label="Max Output Tokens",
+                        info="Higher = more detailed summary"
+                    )
+                    top_p = gr.Slider(
+                        minimum=0.0,
+                        maximum=1.0,
+                        value=0.95,
+                        step=0.05,
+                        label="Top P (Nucleus Sampling)",
+                        info="Lower = more focused, Higher = more diverse"
+                    )
+                    top_k = gr.Slider(
+                        minimum=0,
+                        maximum=100,
+                        value=20,
+                        step=5,
+                        label="Top K",
+                        info="Limits token selection to top K tokens (0 = disabled)"
                     )
-
-                    # Hidden state to store generation metrics
-                    metrics_state = gr.State(value={})
-                    
-                    # Hidden state to store loaded custom model
-                    custom_model_state = gr.State(value=None)
                     
-                    # Hidden state to store custom model metadata (repo_id, filename, size)
-                    custom_model_metadata = gr.State(value={
-                        "repo_id": None,
-                        "filename": None,
-                        "size_mb": 0,
-                    })
+                    # Debug Tools (nested accordion)
+                    with gr.Accordion("🐛 Debug Tools", open=False):
+                        system_prompt_debug = gr.Textbox(
+                            label="System Prompt (Read-Only)",
+                            lines=5,
+                            max_lines=10,
+                            interactive=False,
+                            value="Select a model and click 'Generate Summary' to see the system prompt.",
+                            info="This shows the exact system prompt sent to the LLM"
+                        )
                 
-                # Model info section (dynamic)
-                with gr.Group():
-                    gr.HTML('<div class="section-header"><span class="section-icon">📊</span> Model Information</div>')
-                    # Get default thread count for initial display
-                    _default_threads = DEFAULT_CUSTOM_THREADS if DEFAULT_CUSTOM_THREADS > 0 else 2
-                    info_output = gr.Markdown(
-                        value=get_model_info(DEFAULT_MODEL_KEY, n_threads=_default_threads)[0],
-                        elem_classes=["stats-grid"]
-                    )
+                # ==========================================
+                # Submit Button
+                # ==========================================
+                submit_btn = gr.Button(
+                    "✨ Generate Summary",
+                    variant="primary",
+                    elem_classes=["submit-btn"]
+                )
+                
+                # ==========================================
+                # State Components (invisible, outside visual groups)
+                # ==========================================
+                metrics_state = gr.State(value={})
+                custom_model_state = gr.State(value=None)
+                custom_model_metadata = gr.State(value={
+                    "repo_id": None,
+                    "filename": None,
+                    "size_mb": 0,
+                })
+                custom_repo_files = gr.State([])
             
             # Right column - Outputs
             with gr.Column(scale=2):
@@ -1725,6 +1754,8 @@ def create_interface():
                         placeholder="The AI's reasoning process will appear here in real-time...",
                         elem_classes=["thinking-box"]
                     )
+                    # Copy Thinking button - now in the correct group
+                    copy_thinking_btn = gr.Button("📋 Copy Thinking", size="sm")
                 
                 # Summary Output
                 with gr.Group():
@@ -1734,25 +1765,13 @@ def create_interface():
                         elem_classes=["summary-box"]
                     )
                     
-                    # Action buttons for outputs
+                    # Action buttons for summary
                     with gr.Row():
                         copy_summary_btn = gr.Button("📋 Copy Summary", size="sm")
-                        copy_thinking_btn = gr.Button("📋 Copy Thinking", size="sm")
                         download_btn = gr.Button("⬇️ Download (JSON)", size="sm")
                     
-                    # File output component for download
-                    download_output = gr.File(label="Download JSON", visible=True)
-                    
-                    # Debug: System Prompt display
-                    with gr.Accordion("🐛 Debug: System Prompt", open=False):
-                        system_prompt_debug = gr.Textbox(
-                            label="System Prompt (Read-Only)",
-                            lines=5,
-                            max_lines=10,
-                            interactive=False,
-                            value="Select a model and click 'Generate Summary' to see the system prompt.",
-                            info="This shows the exact system prompt sent to the LLM"
-                        )
+                    # File output component for download (hidden until generated)
+                    download_output = gr.File(label="Download JSON", visible=False)
         
         # Function to update settings when model changes
         def update_settings_on_model_change(model_key, thread_config, custom_threads, custom_metadata=None):
@@ -1823,17 +1842,7 @@ def create_interface():
         # NEW: Custom Model Loader Event Handlers
         # ==========================================
 
-        # Show/hide custom model UI based on model selection
-        def toggle_custom_model_ui(model_key):
-            """Show or hide custom model UI based on selection."""
-            is_custom = model_key == "custom_hf"
-            return gr.update(visible=is_custom)
-
-        model_dropdown.change(
-            fn=toggle_custom_model_ui,
-            inputs=[model_dropdown],
-            outputs=[custom_model_group],
-        )
+        # Note: toggle_custom_model_ui removed - now using Tabs instead of hidden Group
 
         # Update system prompt debug when model or reasoning changes
         def update_system_prompt_debug(model_key, enable_reasoning, language):
@@ -2014,9 +2023,9 @@ def create_interface():
             inputs=[model_search_input, custom_file_dropdown, custom_repo_files],
             outputs=[custom_status, retry_btn, custom_model_state, custom_model_metadata],
         ).then(
-            fn=update_settings_on_model_change,
-            inputs=[model_dropdown, thread_config_dropdown, custom_threads_slider, custom_model_metadata],
-            outputs=[temperature_slider, top_p, top_k, info_output],
+            fn=lambda metadata, thread_config, custom_threads: get_model_info("custom_hf", n_threads=get_thread_count(thread_config, custom_threads), custom_metadata=metadata)[0],
+            inputs=[custom_model_metadata, thread_config_dropdown, custom_threads_slider],
+            outputs=[custom_info_output],
         )
 
         # Retry button - same as load
@@ -2025,9 +2034,9 @@ def create_interface():
             inputs=[model_search_input, custom_file_dropdown, custom_repo_files],
             outputs=[custom_status, retry_btn, custom_model_state, custom_model_metadata],
         ).then(
-            fn=update_settings_on_model_change,
-            inputs=[model_dropdown, thread_config_dropdown, custom_threads_slider, custom_model_metadata],
-            outputs=[temperature_slider, top_p, top_k, info_output],
+            fn=lambda metadata, thread_config, custom_threads: get_model_info("custom_hf", n_threads=get_thread_count(thread_config, custom_threads), custom_metadata=metadata)[0],
+            inputs=[custom_model_metadata, thread_config_dropdown, custom_threads_slider],
+            outputs=[custom_info_output],
         )
 
         # Also update submit button to use custom model state