style: reorganize UI into tabs and refine button hierarchy

- Implemented gr.Tabs for character attributes
- Aligned randomization dice with dropdowns on the same line
- Reordered output column (prompts above image)
- Grouped Save/Load buttons with example characters
- Moved 'Randomize' button below technical prompt
- Updated design docs with process management lessons

app.py

@@ -426,8 +426,8 @@ def generate_image_master(refined_prompt, technical_prompt, aspect_ratio, backen
 
 def build_ui():
     with gr.Blocks(title="RPGPortrait Prompt Builder Pro") as demo:
-        gr.Markdown("# 🎨 RPGPortrait Prompt Builder Pro")
-        gr.Markdown("Create professional AI prompts and generate portraits with Gemini integration.")
+        gr.Markdown("# 🎨 RPGPortrait Pro")
+        gr.Markdown("Create professional AI prompts and generate portraits.")
 
         dropdowns = []
         checkboxes = []
@@ -435,127 +435,121 @@ def build_ui():
 
         def create_feature_ui(category, subcategory, label, default_value):
             choices = list(features_data[category][subcategory].keys())
-            with gr.Row():
-                dd = gr.Dropdown(choices=choices, label=label, value=default_value, scale=4)
-                cb = gr.Checkbox(label="🎲", value=False, scale=1, min_width=50)
+            gr.Markdown(f"**{label}**")
+            with gr.Row(equal_height=True):
+                dd = gr.Dropdown(choices=choices, value=default_value, scale=12, show_label=False)
+                cb = gr.Checkbox(label="🎲", value=False, scale=1, min_width=50, container=False)
             dropdowns.append(dd)
             checkboxes.append(cb)
 
         with gr.Row():
-            with gr.Column():
-                gr.Markdown("### 👤 Identity")
-                create_feature_ui('identity', 'race', "Race", "Human")
-                create_feature_ui('identity', 'class', "Class", "Fighter")
-                create_feature_ui('identity', 'gender', "Gender", "Male")
-                create_feature_ui('identity', 'age', "Age", "Young Adult")
-                extra_id = gr.Textbox(placeholder="Extra Identity details (e.g. lineage, title)", label="Additional Identity Info")
-                extra_texts.append(extra_id)
+            with gr.Column(scale=2):
+                with gr.Tabs():
+                    with gr.TabItem("👤 Identity & Expression"):
+                        gr.Markdown("### 👤 Identity")
+                        create_feature_ui('identity', 'race', "Race", "Human")
+                        create_feature_ui('identity', 'class', "Class", "Fighter")
+                        create_feature_ui('identity', 'gender', "Gender", "Male")
+                        create_feature_ui('identity', 'age', "Age", "Young Adult")
+                        extra_id = gr.Textbox(placeholder="Extra Identity details (e.g. lineage, title)", label="Additional Identity Info")
+                        extra_texts.append(extra_id)
+                        
+                        gr.Markdown("### 🎭 Expression & Pose")
+                        create_feature_ui('expression_pose', 'expression', "Expression", "Determined")
+                        create_feature_ui('expression_pose', 'pose', "Pose", "Standing")
+
+                    with gr.TabItem("🎨 Appearance"):
+                        gr.Markdown("### 🎨 Appearance")
+                        create_feature_ui('appearance', 'hair_color', "Hair Color", "Brown")
+                        create_feature_ui('appearance', 'hair_style', "Hair Style", "Short")
+                        create_feature_ui('appearance', 'eye_color', "Eye Color", "Brown")
+                        create_feature_ui('appearance', 'build', "Build", "Average")
+                        create_feature_ui('appearance', 'skin_tone', "Skin Tone", "Fair")
+                        create_feature_ui('appearance', 'distinguishing_feature', "Distinguishing Feature", "None")
+                        extra_app = gr.Textbox(placeholder="Extra Appearance details (e.g. tattoos, scars)", label="Additional Appearance Info")
+                        extra_texts.append(extra_app)
+
+                    with gr.TabItem("⚔️ Equipment"):
+                        gr.Markdown("### ⚔️ Equipment")
+                        create_feature_ui('equipment', 'armor', "Armor/Clothing", "Travelers Clothes")
+                        create_feature_ui('equipment', 'weapon', "Primary Weapon", "Longsword")
+                        create_feature_ui('equipment', 'accessory', "Accessory 1", "None")
+                        create_feature_ui('equipment', 'accessory', "Accessory 2", "None")
+                        create_feature_ui('equipment', 'material', "Material Detail", "Weathered")
+                        extra_eq = gr.Textbox(placeholder="Extra Equipment details (e.g. weapon enchantments)", label="Additional Equipment Info")
+                        extra_texts.append(extra_eq)
+
+                    with gr.TabItem("🌍 Environment"):
+                        gr.Markdown("### 🌍 Environment")
+                        create_feature_ui('environment', 'background', "Background", "Forest")
+                        create_feature_ui('environment', 'lighting', "Lighting", "Natural Sunlight")
+                        create_feature_ui('environment', 'atmosphere', "Atmosphere", "Clear")
+                        extra_env = gr.Textbox(placeholder="Extra Environment details (e.g. time of day, weather)", label="Additional Environment Info")
+                        extra_texts.append(extra_env)
+
+                    with gr.TabItem("🪄 Style & Technical"):
+                        gr.Markdown("### 🪄 Style & Effects")
+                        create_feature_ui('vfx_style', 'vfx', "Special Effects", "None")
+                        create_feature_ui('vfx_style', 'style', "Art Style", "Digital Illustration")
+                        create_feature_ui('vfx_style', 'mood', "Mood", "Heroic")
+                        create_feature_ui('vfx_style', 'camera', "Camera Angle", "Bust")
+                        extra_sty = gr.Textbox(placeholder="Extra Style details (e.g. specific artists, colors)", label="Additional Style Info")
+                        extra_texts.append(extra_sty)
+                        
+                        gr.Markdown("### ⚙️ Technical")
+                        create_feature_ui('technical', 'aspect_ratio', "Aspect Ratio", "1:1")
+
+                gr.Markdown("---")
                 
-                gr.Markdown("### 🎭 Expression & Pose")
-                create_feature_ui('expression_pose', 'expression', "Expression", "Determined")
-                create_feature_ui('expression_pose', 'pose', "Pose", "Standing")
-
-            with gr.Column():
-                gr.Markdown("### 🎨 Appearance")
-                create_feature_ui('appearance', 'hair_color', "Hair Color", "Brown")
-                create_feature_ui('appearance', 'hair_style', "Hair Style", "Short")
-                create_feature_ui('appearance', 'eye_color', "Eye Color", "Brown")
-                create_feature_ui('appearance', 'build', "Build", "Average")
-                create_feature_ui('appearance', 'skin_tone', "Skin Tone", "Fair")
-                create_feature_ui('appearance', 'distinguishing_feature', "Distinguishing Feature", "None")
-                extra_app = gr.Textbox(placeholder="Extra Appearance details (e.g. tattoos, scars)", label="Additional Appearance Info")
-                extra_texts.append(extra_app)
-
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("### ⚔️ Equipment")
-                create_feature_ui('equipment', 'armor', "Armor/Clothing", "Travelers Clothes")
-                create_feature_ui('equipment', 'weapon', "Primary Weapon", "Longsword")
-                create_feature_ui('equipment', 'accessory', "Accessory 1", "None")
-                create_feature_ui('equipment', 'accessory', "Accessory 2", "None")
-                create_feature_ui('equipment', 'material', "Material Detail", "Weathered")
-                extra_eq = gr.Textbox(placeholder="Extra Equipment details (e.g. weapon enchantments)", label="Additional Equipment Info")
-                extra_texts.append(extra_eq)
-
-            with gr.Column():
-                gr.Markdown("### 🌍 Environment")
-                create_feature_ui('environment', 'background', "Background", "Forest")
-                create_feature_ui('environment', 'lighting', "Lighting", "Natural Sunlight")
-                create_feature_ui('environment', 'atmosphere', "Atmosphere", "Clear")
-                extra_env = gr.Textbox(placeholder="Extra Environment details (e.g. time of day, weather)", label="Additional Environment Info")
-                extra_texts.append(extra_env)
+                with gr.Row():
+                    example_dropdown = gr.Dropdown(choices=get_example_list(), label="Example Characters", scale=3)
+                    load_example_btn = gr.Button("📂 Load Example", variant="secondary", scale=1)
+                    save_btn = gr.Button("💾 Save Character", variant="secondary", scale=1)
+                    load_btn = gr.UploadButton("📂 Load Character", file_types=[".json"], variant="secondary", scale=1)
+                
+                with gr.Group():
+                    gr.Markdown("### ⚙️ Settings & Generation")
+                    with gr.Row():
+                        ollama_models = get_ollama_models()
+                        ollama_active = len(ollama_models) > 0
+                        
+                        refinement_backend = gr.Radio(
+                            choices=["Gemini (Cloud)", "Ollama (Local)"] if ollama_active else ["Gemini (Cloud)"],
+                            value="Gemini (Cloud)",
+                            label="Prompt Refinement Backend",
+                            scale=2
+                        )
+                        
+                        ollama_model_dropdown = gr.Dropdown(
+                            choices=ollama_models,
+                            value=ollama_models[0] if ollama_active else None,
+                            label="Ollama Model",
+                            visible=ollama_active and False,
+                            scale=1
+                        )
+                    
+                    with gr.Row():
+                        backend_selector = gr.Radio(
+                            choices=["Gemini (Cloud)", "ComfyUI (Local)"], 
+                            value="Gemini (Cloud)", 
+                            label="Image Generation Backend",
+                            scale=2
+                        )
+                        with gr.Column(scale=1):
+                            refine_btn = gr.Button("🧠 Refine Prompt", variant="primary")
+                            gen_img_btn = gr.Button("🖼️ Generate Image", variant="primary")
 
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("### 🪄 Style & Effects")
-                create_feature_ui('vfx_style', 'vfx', "Special Effects", "None")
-                create_feature_ui('vfx_style', 'style', "Art Style", "Digital Illustration")
-                create_feature_ui('vfx_style', 'mood', "Mood", "Heroic")
-                create_feature_ui('vfx_style', 'camera', "Camera Angle", "Bust")
-                extra_sty = gr.Textbox(placeholder="Extra Style details (e.g. specific artists, colors)", label="Additional Style Info")
-                extra_texts.append(extra_sty)
-
-            with gr.Column():
-                gr.Markdown("### ⚙️ Technical")
-                create_feature_ui('technical', 'aspect_ratio', "Aspect Ratio", "1:1")
-
-        gr.Markdown("---")
-        
-        with gr.Row():
-            regenerate_btn = gr.Button("✨ Randomize Features", variant="secondary")
-            save_btn = gr.Button("💾 Save Character", variant="secondary")
-            load_btn = gr.UploadButton("📂 Load Character", file_types=[".json"], variant="secondary")
-            refine_btn = gr.Button("🧠 Refine with Gemini", variant="primary")
-            gen_img_btn = gr.Button("🖼️ Generate Image", variant="primary")
-        
-        with gr.Row():
-            ollama_models = get_ollama_models()
-            ollama_active = len(ollama_models) > 0
-            
-            refinement_backend = gr.Radio(
-                choices=["Gemini (Cloud)", "Ollama (Local)"] if ollama_active else ["Gemini (Cloud)"],
-                value="Gemini (Cloud)",
-                label="Prompt Refinement Backend",
-                info="Ollama is " + ("available" if ollama_active else "offline or no models found") + "."
-            )
-            
-            ollama_model_dropdown = gr.Dropdown(
-                choices=ollama_models,
-                value=ollama_models[0] if ollama_active else None,
-                label="Ollama Model",
-                visible=ollama_active,
-                scale=1
-            )
-            backend_selector = gr.Radio(
-                choices=["Gemini (Cloud)", "ComfyUI (Local)"], 
-                value="Gemini (Cloud)", 
-                label="Image Generation Backend",
-                info="ComfyUI requires the local server to be running on port 8188."
-            )
-        
-        # Simple toggle for Ollama model visibility
-        def toggle_ollama_visibility(backend):
-            return gr.update(visible=(backend == "Ollama (Local)"))
-        
-        refinement_backend.change(
-            fn=toggle_ollama_visibility,
-            inputs=refinement_backend,
-            outputs=ollama_model_dropdown
-        )
-        
-        with gr.Row():
-            example_dropdown = gr.Dropdown(choices=get_example_list(), label="Example Characters", scale=3)
-            load_example_btn = gr.Button("📂 Load Example", variant="secondary", scale=1)
-        
-        with gr.Row():
-            with gr.Column(scale=2):
-                prompt_output = gr.Textbox(label="Generated Technical Prompt", lines=5, interactive=False)
-                refined_output = gr.Textbox(label="Gemini Refined Prompt", lines=5, interactive=True)
             with gr.Column(scale=1):
-                image_output = gr.Image(label="Gemini Generated Portrait")
+                gr.Markdown("### 📝 Prompts & Output")
+                prompt_output = gr.Textbox(label="Generated Technical Prompt", lines=4, interactive=False)
+                regenerate_btn = gr.Button("✨ Randomize Features", variant="secondary")
+                refined_output = gr.Textbox(label="Refined Artistic Prompt", lines=6, interactive=True)
+                
+                gr.Markdown("---")
+                image_output = gr.Image(label="Portrait", show_label=False)
                 download_img_btn = gr.DownloadButton("📥 Download Portrait (PNG)", variant="secondary", visible=False)
-                download_file = gr.File(label="Saved Character JSON", visible=False)
                 status_msg = gr.Markdown("")
+                download_file = gr.File(label="Saved Character JSON", visible=False)
 
         all_input_components = dropdowns + extra_texts
         
@@ -598,6 +592,17 @@ def build_ui():
         )
 
         # Save/Load Logic
+        
+        # Simple toggle for Ollama model visibility
+        def toggle_ollama_visibility(backend):
+            return gr.update(visible=(backend == "Ollama (Local)"))
+        
+        refinement_backend.change(
+            fn=toggle_ollama_visibility,
+            inputs=refinement_backend,
+            outputs=ollama_model_dropdown
+        )
+
         save_btn.click(
             fn=save_character,
             inputs=dropdowns + checkboxes + extra_texts,

design.md

@@ -49,4 +49,17 @@ The app uses a 3-stage prompt pipeline:
 - **Image Local**: ComfyUI (Local Server)
 - **Configuration**: 
     - `.env` for API keys and connection hosts/ports (ComfyUI, Ollama).
-    - `prompts.yaml` for LLM system instructions.
+## Maintenance & Development Lessons
+
+### 1. Server Lifecycle
+- **Mandatory Restarts**: Any modification to `app.py` or configuration files (`features.yaml`, `prompts.yaml`) requires a manual restart of the Gradio server to take effect. The UI does not hot-reload backend logic or YAML data.
+- **Process Management (CRITICAL)**: Always ensure the previously running process is fully terminated before starting a new one. Gradio will automatically increment the port (7860 -> 7861 -> 7862) if the old process is still bound to the port. 
+- **Command**: Use `Get-Process -Name python | Stop-Process -Force` in PowerShell to clear all existing instances before a fresh run.
+
+### 2. UI Verification
+- **Data Dependency**: When testing UI components or dropdowns via browser automation, verify that the target values exist in `features.yaml` first. Testing with invalid data (e.g., "Silver" hair color before it was added) leads to verification failures.
+- **UI State Reset**: Always refresh the browser page after a server restart to ensure the frontend state is synchronized with the new backend.
+
+### 3. Documentation & Artifacts
+- **Path Formatting**: For markdown artifacts (like `walkthrough.md`), use absolute paths for media embeds. On Windows, prefix with a leading slash (e.g., `/C:/Users/...`) to comply with internal linting and ensuring reliable rendering.
+- **Visual Proof**: Capture final screenshots of UI layouts to provide immediate visual confirmation of successes, especially after complex layout reorganizations.

features.yaml

@@ -37,6 +37,7 @@ appearance:
     Blonde: "golden blonde"
     Red: "fiery red"
     White: "snow white"
+    Silver: "shimmering silver"
     Grey: "silver grey"
     Blue: "deep sapphire blue"
     Green: "forest green"