let5see/AI-Video
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构webui的布局

Browse Source
This commit is contained in:
puke
2025-10-30 11:18:13 +08:00
parent ff7e1b42f7
commit 713b90c176
3 changed files with 96 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
web/app.py
View File

@@ -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)
st.markdown(f"**{tr('bgm.title')}**")
st.caption(tr("bgm.custom_help"))
with st.expander(tr("help.feature_description"), expanded=False):
st.markdown(f"**{tr('help.what')}**")
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")
@@ -424,11 +426,22 @@ 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
st.markdown(f"**{tr('tts.title')}**")
st.caption(tr("tts.workflow_help"))
with st.expander(tr("help.feature_description"), expanded=False):
st.markdown(f"**{tr('help.what')}**")
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()
@@ -496,20 +509,19 @@ def main():
except Exception as e:
st.error(tr("tts.preview_failed", error=str(e)))
logger.exception(e)
# ========================================================================
# Middle Column: Visual Settings (Style & Template)
# ========================================================================
with middle_col:
# ====================================================================
# Image Generation Section
# ====================================================================
with st.container(border=True):
st.markdown(f"**{tr('section.visual_settings')}**")
# Visual style (Workflow + Prompt Prefix)
st.markdown(f"**{tr('style.title')}**")
st.markdown(f"**{tr('section.image')}**")
# 1. ComfyUI Workflow selection
st.caption(tr("style.workflow"))
st.caption(tr("style.workflow_help"))
with st.expander(tr("help.feature_description"), expanded=False):
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"]
@@ -615,10 +627,18 @@ def main():
st.error(tr("style.preview_failed", error=str(e)))
logger.exception(e)
# ====================================================================
# Storyboard Template Section
# ====================================================================
with st.container(border=True):
st.markdown(f"**{tr('section.template')}**")
# Frame template (moved from right column)
st.markdown(f"**{tr('template.title')}**")
st.caption(tr("template.custom_help"))
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")

42
web/i18n/locales/en_US.json
View File

@@ -5,8 +5,10 @@
"app.subtitle": "Forge your perfect reel engine",
"section.content_input": "📖 Content Input",
"section.audio_settings": "🔊 Audio Settings",
"section.visual_settings": "🎨 Visual Settings",
"section.bgm": "🎵 Background Music",
"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": "ComfyUI Workflow",
"style.workflow_help": "💡 Custom: Place image_xxx.json in workflows/selfhost/ or workflows/runninghub/ folder",
"style.prompt_prefix": "Style Prompt Prefix",
"style.workflow": "Workflow Selection",
"style.workflow_what": "Determines how each frame's illustration is generated and its effect (e.g., using FLUX, SD models)",
"style.workflow_how": "Place image_xxx.json workflow files in workflows/selfhost/ (local ComfyUI) or workflows/runninghub/ (cloud) folder",
"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.preview_title": "🔍 Preview Template",
"template.what": "Controls the visual layout and design style of each frame (title, text, image arrangement)",
"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.workflow": "TTS Workflow",
"tts.workflow_help": "💡 Custom: Place tts_xxx.json in workflows/selfhost/ or workflows/runninghub/ folder",
"tts.preview_title": "🔍 Preview TTS",
"tts.selector": "Workflow Selection",
"tts.what": "Converts narration text to natural human-like speech",
"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_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"
}
}

42
web/i18n/locales/zh_CN.json
View File

@@ -5,8 +5,10 @@
"app.subtitle": "打造专属你的视频创作引擎",
"section.content_input": "📖 内容输入",
"section.audio_settings": "🔊 声音设置",
"section.visual_settings": "🎨 画面设置",
"section.bgm": "🎵 背景音乐",
"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_help": "💡 自定义：将 image_xxx.json 放入 workflows/selfhost/ 或 workflows/runninghub/ 文件夹",
"style.prompt_prefix": "风格提示词前缀",
"style.workflow": "工作流选择",
"style.workflow_what": "决定视频中每帧插图的生成方式和效果（如使用 FLUX、SD 等模型）",
"style.workflow_how": "将 image_xxx.json 工作流文件放入 workflows/selfhost/（本地 ComfyUI）或 workflows/runninghub/（云端）文件夹",
"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.preview_title": "🔍 预览模板",
"template.what": "控制视频每一帧的视觉布局和设计风格（标题、文本、图片的排版样式）",
"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.workflow": "TTS 工作流",
"tts.workflow_help": "💡 自定义：将 tts_xxx.json 放入 workflows/selfhost/ 或 workflows/runninghub/ 文件夹",
"tts.preview_title": "🔍 预览 TTS",
"tts.selector": "工作流选择",
"tts.what": "将旁白文本转换为真人般的自然语音",
"tts.how": "将 tts_xxx.json 工作流文件放入 workflows/selfhost/（本地 ComfyUI）或 workflows/runninghub/（云端）文件夹",
"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": "🌐 语言"
}
}