重构webui的布局

web/app.py

@@ -380,14 +380,16 @@ def main():
                 st.info(tr("video.frames_fixed_mode_hint"))
         
         # ====================================================================
-        # Audio Settings (BGM + TTS)
+        # BGM Section
         # ====================================================================
         with st.container(border=True):
-            st.markdown(f"**{tr('section.audio_settings')}**")
+            st.markdown(f"**{tr('section.bgm')}**")
             
-            # Background music (moved to top)
+            with st.expander(tr("help.feature_description"), expanded=False):
-            st.markdown(f"**{tr('bgm.title')}**")
+                st.markdown(f"**{tr('help.what')}**")
-            st.caption(tr("bgm.custom_help"))
+                st.markdown(tr("bgm.what"))
+                st.markdown(f"**{tr('help.how')}**")
+                st.markdown(tr("bgm.how"))
             
             # Dynamically scan bgm folder for music files (support common audio formats)
             bgm_folder = Path("bgm")
@@ -425,10 +427,21 @@ def main():
             # Use full filename for bgm_path (including extension)
             bgm_path = None if bgm_choice == tr("bgm.none") else bgm_choice
     
+    # ========================================================================
+    # Middle Column: TTS, Image Settings & Template
+    # ========================================================================
+    with middle_col:
+        # ====================================================================
+        # TTS Section (moved from left column)
+        # ====================================================================
+        with st.container(border=True):
+            st.markdown(f"**{tr('section.tts')}**")
             
-            # TTS Workflow selection
+            with st.expander(tr("help.feature_description"), expanded=False):
-            st.markdown(f"**{tr('tts.title')}**")
+                st.markdown(f"**{tr('help.what')}**")
-            st.caption(tr("tts.workflow_help"))
+                st.markdown(tr("tts.what"))
+                st.markdown(f"**{tr('help.how')}**")
+                st.markdown(tr("tts.how"))
             
             # Get available TTS workflows
             tts_workflows = reelforge.tts.list_workflows()
@@ -497,19 +510,18 @@ def main():
                             st.error(tr("tts.preview_failed", error=str(e)))
                             logger.exception(e)
         
-    # ========================================================================
+        # ====================================================================
-    # Middle Column: Visual Settings (Style & Template)
+        # Image Generation Section
-    # ========================================================================
+        # ====================================================================
-    with middle_col:
         with st.container(border=True):
-            st.markdown(f"**{tr('section.visual_settings')}**")
+            st.markdown(f"**{tr('section.image')}**")
-            
-            # Visual style (Workflow + Prompt Prefix)
-            st.markdown(f"**{tr('style.title')}**")
             
             # 1. ComfyUI Workflow selection
-            st.caption(tr("style.workflow"))
+            with st.expander(tr("help.feature_description"), expanded=False):
-            st.caption(tr("style.workflow_help"))
+                st.markdown(f"**{tr('help.what')}**")
+                st.markdown(tr("style.workflow_what"))
+                st.markdown(f"**{tr('help.how')}**")
+                st.markdown(tr("style.workflow_how"))
             
             # Get available workflows from reelforge (with source info)
             workflows = reelforge.image.list_workflows()
@@ -546,7 +558,7 @@ def main():
             
             
             # 2. Prompt prefix input
-            st.caption(tr("style.prompt_prefix"))
+            st.markdown(f"**{tr('style.prompt_prefix')}**")
             
             # Get current prompt_prefix from config
             current_prefix = comfyui_config["image"]["prompt_prefix"]
@@ -616,9 +628,17 @@ def main():
                             logger.exception(e)
             
         
-            # Frame template (moved from right column)
+        # ====================================================================
-            st.markdown(f"**{tr('template.title')}**")
+        # Storyboard Template Section
-            st.caption(tr("template.custom_help"))
+        # ====================================================================
+        with st.container(border=True):
+            st.markdown(f"**{tr('section.template')}**")
+            
+            with st.expander(tr("help.feature_description"), expanded=False):
+                st.markdown(f"**{tr('help.what')}**")
+                st.markdown(tr("template.what"))
+                st.markdown(f"**{tr('help.how')}**")
+                st.markdown(tr("template.how"))
             
             # Dynamically scan templates folder for HTML files
             templates_folder = Path("templates")

web/i18n/locales/en_US.json

@@ -5,8 +5,10 @@
     "app.subtitle": "Forge your perfect reel engine",
     
     "section.content_input": "📖 Content Input",
-    "section.audio_settings": "🔊 Audio Settings",
+    "section.bgm": "🎵 Background Music",
-    "section.visual_settings": "🎨 Visual Settings",
+    "section.tts": "🎤 Text-to-Speech",
+    "section.image": "🎨 Image Generation",
+    "section.template": "📐 Storyboard Template",
     "section.video_generation": "🎬 Generate Video",
     
     "input_mode.topic": "💡 Topic",
@@ -40,16 +42,18 @@
     "voice.previewing": "Generating voice preview...",
     "voice.preview_failed": "Preview failed: {error}",
     
-    "style.title": "🎨 Image Settings",
+    "style.workflow": "Workflow Selection",
-    "style.workflow": "ComfyUI Workflow",
+    "style.workflow_what": "Determines how each frame's illustration is generated and its effect (e.g., using FLUX, SD models)",
-    "style.workflow_help": "💡 Custom: Place image_xxx.json in workflows/selfhost/ or workflows/runninghub/ folder",
+    "style.workflow_how": "Place image_xxx.json workflow files in workflows/selfhost/ (local ComfyUI) or workflows/runninghub/ (cloud) folder",
-    "style.prompt_prefix": "Style Prompt Prefix",
+    "style.prompt_prefix": "Prompt Prefix",
+    "style.prompt_prefix_what": "Automatically added before all image prompts to control the illustration style uniformly (e.g., cartoon, realistic)",
+    "style.prompt_prefix_how": "Enter style description in the input box below. To save permanently, edit the config.yaml file",
     "style.prompt_prefix_placeholder": "Enter style prefix (leave empty for config default)",
     "style.prompt_prefix_help": "This text will be automatically added before all image generation prompts. To permanently change, edit config.yaml",
     "style.custom": "Custom",
     "style.description": "Style Description",
     "style.description_placeholder": "Describe the illustration style you want (any language)...",
-    "style.preview_title": "🔍 Preview Style",
+    "style.preview_title": "Preview Style",
     "style.test_prompt": "Test Prompt",
     "style.test_prompt_help": "Enter test prompt to preview style effect",
     "style.preview": "🖼️ Generate Preview",
@@ -61,12 +65,13 @@
     "style.final_prompt_label": "Final Prompt",
     "style.generated_prompt": "Generated prompt: {prompt}",
     
-    "template.title": "📐 Storyboard Template",
+    "template.selector": "Template Selection",
     "template.default": "Default",
     "template.modern": "Modern",
     "template.neon": "Neon",
-    "template.custom_help": "💡 Custom: Place .html files in templates/ folder",
+    "template.what": "Controls the visual layout and design style of each frame (title, text, image arrangement)",
-    "template.preview_title": "🔍 Preview Template",
+    "template.how": "Place .html template files in the templates/ folder for automatic detection. Supports custom CSS styles",
+    "template.preview_title": "Preview Template",
     "template.preview_param_title": "Title",
     "template.preview_param_text": "Text",
     "template.preview_param_image": "Image Path",
@@ -87,11 +92,12 @@
     "video.frames_label": "Scenes: {n}",
     "video.frames_fixed_mode_hint": "💡 Fixed mode: scene count is determined by actual script segments",
     
-    "bgm.title": "🎵 Background Music",
+    "bgm.selector": "Music Selection",
     "bgm.none": "🔇 No BGM",
     "bgm.preview": "▶ Preview Music",
     "bgm.preview_failed": "❌ Music file not found: {file}",
-    "bgm.custom_help": "💡 Custom: Place audio files in bgm/ folder",
+    "bgm.what": "Adds background music to your video, making it more atmospheric and professional",
+    "bgm.how": "Place audio files (MP3/WAV/FLAC, etc.) in the bgm/ folder for automatic detection",
     
     "btn.generate": "🎬 Generate Video",
     "btn.save_config": "💾 Save Configuration",
@@ -155,10 +161,10 @@
     "settings.comfyui.runninghub_api_key": "RunningHub API Key",
     "settings.comfyui.runninghub_api_key_help": "Visit https://runninghub.ai to register and get API Key",
     
-    "tts.title": "🎤 TTS Workflow",
+    "tts.selector": "Workflow Selection",
-    "tts.workflow": "TTS Workflow",
+    "tts.what": "Converts narration text to natural human-like speech",
-    "tts.workflow_help": "💡 Custom: Place tts_xxx.json in workflows/selfhost/ or workflows/runninghub/ folder",
+    "tts.how": "Place tts_xxx.json workflow files in workflows/selfhost/ (local ComfyUI) or workflows/runninghub/ (cloud) folder",
-    "tts.preview_title": "🔍 Preview TTS",
+    "tts.preview_title": "Preview TTS",
     "tts.preview_text": "Preview Text",
     "tts.preview_text_placeholder": "Enter text to preview...",
     "tts.preview_button": "🔊 Generate Preview",
@@ -177,6 +183,10 @@
     "label.required": "(Required)",
     "label.optional": "(Optional)",
     
+    "help.feature_description": "💡 Feature Description",
+    "help.what": "Purpose",
+    "help.how": "Customization",
+    
     "language.select": "🌐 Language"
   }
 }

web/i18n/locales/zh_CN.json

@@ -5,8 +5,10 @@
     "app.subtitle": "打造专属你的视频创作引擎",
     
     "section.content_input": "📖 内容输入",
-    "section.audio_settings": "🔊 声音设置",
+    "section.bgm": "🎵 背景音乐",
-    "section.visual_settings": "🎨 画面设置",
+    "section.tts": "🎤 语音合成",
+    "section.image": "🎨 插图生成",
+    "section.template": "📐 分镜模板",
     "section.video_generation": "🎬 生成视频",
     
     "input_mode.topic": "💡 主题",
@@ -40,16 +42,18 @@
     "voice.previewing": "正在生成语音预览...",
     "voice.preview_failed": "预览失败：{error}",
     
-    "style.title": "🎨 插图设置",
+    "style.workflow": "工作流选择",
-    "style.workflow": "生图工作流",
+    "style.workflow_what": "决定视频中每帧插图的生成方式和效果（如使用 FLUX、SD 等模型）",
-    "style.workflow_help": "💡 自定义：将 image_xxx.json 放入 workflows/selfhost/ 或 workflows/runninghub/ 文件夹",
+    "style.workflow_how": "将 image_xxx.json 工作流文件放入 workflows/selfhost/（本地 ComfyUI）或 workflows/runninghub/（云端）文件夹",
-    "style.prompt_prefix": "风格提示词前缀",
+    "style.prompt_prefix": "提示词前缀",
+    "style.prompt_prefix_what": "自动添加到所有图片提示词前面，统一控制插图风格（如：卡通风格、写实风格等）",
+    "style.prompt_prefix_how": "直接在下方输入框填写风格描述。若要永久保存，需编辑 config.yaml 文件",
     "style.prompt_prefix_placeholder": "输入风格前缀（留空则使用配置文件默认值）",
     "style.prompt_prefix_help": "此文本将自动添加到所有图像生成提示词之前。要永久修改，请编辑 config.yaml",
     "style.custom": "自定义",
     "style.description": "风格描述",
     "style.description_placeholder": "描述您想要的插图风格（任何语言）...",
-    "style.preview_title": "🔍 预览风格",
+    "style.preview_title": "预览风格",
     "style.test_prompt": "测试提示词",
     "style.test_prompt_help": "输入测试提示词来预览风格效果",
     "style.preview": "🖼️ 生成预览",
@@ -61,12 +65,13 @@
     "style.final_prompt_label": "最终提示词",
     "style.generated_prompt": "生成的提示词：{prompt}",
     
-    "template.title": "📐 分镜模板",
+    "template.selector": "模板选择",
     "template.default": "默认",
     "template.modern": "现代",
     "template.neon": "霓虹",
-    "template.custom_help": "💡 自定义：将 .html 文件放入 templates/ 文件夹",
+    "template.what": "控制视频每一帧的视觉布局和设计风格（标题、文本、图片的排版样式）",
-    "template.preview_title": "🔍 预览模板",
+    "template.how": "将 .html 模板文件放入 templates/ 文件夹即可自动识别。支持自定义 CSS 样式",
+    "template.preview_title": "预览模板",
     "template.preview_param_title": "标题",
     "template.preview_param_text": "文本",
     "template.preview_param_image": "图片路径",
@@ -87,11 +92,12 @@
     "video.frames_label": "分镜数：{n}",
     "video.frames_fixed_mode_hint": "💡 固定模式：分镜数由脚本实际段落数决定",
     
-    "bgm.title": "🎵 背景音乐",
+    "bgm.selector": "音乐选择",
     "bgm.none": "🔇 无背景音乐",
     "bgm.preview": "▶ 试听音乐",
     "bgm.preview_failed": "❌ 音乐文件未找到：{file}",
-    "bgm.custom_help": "💡 自定义：将音频文件放入 bgm/ 文件夹",
+    "bgm.what": "为视频添加背景音乐，让视频更有氛围感和专业性",
+    "bgm.how": "将音频文件（MP3/WAV/FLAC 等）放入 bgm/ 文件夹即可自动识别",
     
     "btn.generate": "🎬 生成视频",
     "btn.save_config": "💾 保存配置",
@@ -155,10 +161,10 @@
     "settings.comfyui.runninghub_api_key": "RunningHub API 密钥",
     "settings.comfyui.runninghub_api_key_help": "访问 https://runninghub.ai 注册并获取 API Key",
     
-    "tts.title": "🎤 TTS 工作流",
+    "tts.selector": "工作流选择",
-    "tts.workflow": "TTS 工作流",
+    "tts.what": "将旁白文本转换为真人般的自然语音",
-    "tts.workflow_help": "💡 自定义：将 tts_xxx.json 放入 workflows/selfhost/ 或 workflows/runninghub/ 文件夹",
+    "tts.how": "将 tts_xxx.json 工作流文件放入 workflows/selfhost/（本地 ComfyUI）或 workflows/runninghub/（云端）文件夹",
-    "tts.preview_title": "🔍 预览 TTS",
+    "tts.preview_title": "预览 TTS",
     "tts.preview_text": "预览文本",
     "tts.preview_text_placeholder": "输入要试听的文本...",
     "tts.preview_button": "🔊 生成预览",
@@ -177,6 +183,10 @@
     "label.required": "（必需）",
     "label.optional": "（可选）",
     
+    "help.feature_description": "💡 功能说明",
+    "help.what": "作用",
+    "help.how": "自定义方式",
+    
     "language.select": "🌐 语言"
   }
 }