TradingAgents-CN Web 界面截图制作全指南：从启动应用到产出专业文档配图-二趣网

TradingAgents-CN Web 界面截图制作全指南：从启动应用到产出专业文档配图

【免费下载链接】TradingAgents-CN基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN

TradingAgents-CN 是一款基于多智能体 LLM 的中文金融交易框架，其 Web 界面（Streamlit 管理端 + Vue3 前端）提供了从股票分析配置、实时进度跟踪到分析结果展示的完整交互链路。本文以仓库 docs/images/README.md 为骨架，结合 web/README.md、scripts/startup/start_web.py 与 scripts/capture_web_screenshots.py 等源码，系统讲解该目录中四类核心截图的标准、采集方法与底层实现，帮助读者为项目文档产出高清、真实、可复用的专业界面截图。

一、docs/images 目录的定位与作用

在 TradingAgents-CN 仓库中，docs/images/是专门用于存放 Web 界面截图文件的目录。其核心使命是为项目根目录 README.md 提供 Web 界面展示素材：README 中引用的界面截图均以该目录为默认来源，文件名约定为web-interface-*.png系列。

从仓库结构可以看出，这一目录与前端界面工程强相关：

Web 管理端：web/app.py（Streamlit 主应用入口）与 web/README.md 中描述的components/sidebar.py、components/analysis_form.py、components/results_display.py等组件，构成了截图要覆盖的界面本体；
自动化采集脚本：scripts/capture_web_screenshots.py 在运行时直接向docs/images/写入web-interface-main.png等文件，与该目录的命名规范一一对应。

因此，该目录不仅是图片仓库，更是"界面状态 → 文档素材"这一链路中的落点，截图质量直接代表项目在公开文档中的专业形象。

二、四类核心截图场景与内容标准

根据 docs/images/README.md，需要采集四张核心截图，每张对应一个关键界面状态：

1. 主界面截图（`web-interface-main.png`）

主分析配置界面，必须完整呈现用户发起一次分析所需的全部输入要素：

股票代码输入框（如AAPL、000001、0700.HK）；
市场选择（美股 / A股 / 港股）；
研究深度选择（1–5 级）；
智能体（分析师）选择选项；
"开始分析"按钮。

对照 web/README.md 中的使用指南，"主界面配置"一节正是这些元素：股票代码、分析日期、分析师选择（市场技术分析师、基本面分析师、新闻分析师、社交媒体分析师）、研究深度。截图时应让这些配置项全部可见，展示完整的分析配置表单。

2. 实时分析进度截图（`web-interface-progress.png`）

分析进行中的进度显示，需包含：

进度条和百分比；
当前分析步骤；
预计剩余时间；
已完成的分析阶段。

web/README.md 列出了分析执行的阶段序列：配置分析参数 → 检查环境变量 → 初始化分析引擎 → 执行股票分析 → 分析完成。截图建议在进度推进到 50% 左右时采集，使进度条、步骤提示与时间预估同时可见，最能体现实时反馈能力。

3. 分析结果展示截图（`web-interface-results.png`）

完整的分析结果页面，需包含：

投资建议（买入 / 持有 / 卖出）；
置信度和风险评分；
详细分析报告；
导出按钮。

对应 web/README.md 的"查看分析结果"章节：投资决策摘要（BUY/SELL/HOLD、置信度、风险评分、目标价格）、分析配置信息、以及市场技术 / 基本面 / 新闻 / 社交媒体多维度的详细分析报告。

4. 模型配置管理截图（`web-interface-models.png`）

侧边栏的模型配置界面，需包含：

LLM 提供商选择；
模型选择下拉框；
快速选择按钮；
API 密钥配置状态。

web/README.md 对侧边栏的描述与此一致：API 密钥状态（绿色 ✅ 已配置、红色 ❌ 未配置）、AI 模型配置（LLM 提供商与具体模型，如阿里百炼qwen-turbo/qwen-plus-latest/qwen-max，Google AIgemini-2.0-flash/gemini-1.5-pro/gemini-1.5-flash）、高级设置（记忆功能、调试模式、最大输出长度）。

三、截图规范：技术与内容双重要求

技术要求

维度	要求
格式	PNG（推荐）
分辨率	至少 1920×1080
质量	高清，文字清晰可读
大小	单个文件不超过 2MB

这一分辨率标准与自动化脚本 scripts/capture_web_screenshots.py 中的 Chrome 无头窗口配置（--window-size=1920,1080）完全对应，说明规范已内化为采集工具的实际参数。

内容要求

界面完整：显示完整的功能区域，而非局部裁剪；
数据真实：使用真实的股票代码和分析结果（示例：输入AAPL或000001进行标准分析）；
状态清晰：确保界面状态（配置中 / 分析中 / 已出结果）清晰可见；
无敏感信息：不包含真实的 API 密钥。

建议的截图场景

主界面：输入AAPL或000001，选择标准分析；
进度界面：分析进行到 50% 左右的状态；
结果界面：完整的分析报告，包含图表；
配置界面：显示多个 LLM 提供商和模型选项。

四、获取截图的三种方式

方式一：启动 Web 应用后手动截图

按照 docs/QUICK_START.md 完成环境准备（Python 3.10+、pip install -r requirements.txt、配置 API 密钥），然后启动界面：

# 使用简化启动脚本（推荐） python start_web.py # 或直接以 Streamlit 方式运行 python -m streamlit run web/app.py

访问http://localhost:8501，进行股票分析并手动截图。

需要说明的是，start_web.py在仓库中的实际位置为 scripts/startup/start_web.py。该脚本是"解决模块导入问题的最简方案"，其启动逻辑值得拆解：

定位项目根目录下的web/app.py作为应用文件；
检测当前是否处于虚拟环境（未激活时给出提示）；
检查 Streamlit 是否安装，缺失时自动执行pip install streamlit plotly；
将项目根目录注入PYTHONPATH，规避导入路径问题；
以固定参数启动：--server.port 8501、--server.address localhost、--browser.gatherUsageStats false、--server.fileWatcherType none、--server.runOnSave false。

因此文档中的python start_web.py实际等价于运行scripts/startup/start_web.py，也可直接使用python scripts/startup/start_web.py。

方式二：Docker 环境

仓库根目录提供了 docker-compose.yml，使用 Docker 方式可做到环境隔离、一键启动：

docker-compose up -d

启动后访问http://localhost:8501，进行分析并截图。该方式适合需要统一运行环境、避免本地依赖冲突的场景。

方式三：自动化截图脚本（Selenium 无头模式）

仓库内置了完整的自动化采集方案 scripts/capture_web_screenshots.py，可一次性产出多张截图，其工作流程如下：

依赖检查：校验 Selenium 是否安装（缺失时提示pip install selenium）；
服务探测：请求http://localhost:8501，若未运行则自动拉起——优先尝试docker-compose up -d，失败则回退到本地start_web.py后台启动并轮询等待（最多 60 秒）；
无头采集：以 headless Chrome 打开界面（--window-size=1920,1080），等待页面与 Streamlit 加载完成后依次截图：
- 主界面（web-interface-main.png）；
- 模拟输入AAPL后的配置界面（web-interface-config.png）；
- 点击"开始分析"按钮后的进度界面（web-interface-progress.png）；
- 侧边栏界面（web-interface-sidebar.png）；
输出落盘：截图统一保存到docs/images/目录。

运行方式：

python scripts/capture_web_screenshots.py

脚本会先生成一份截图指南（docs/images/screenshot-guide.md），再询问是否自动捕获截图（输入y/yes确认）。若自动捕获失败，可参考生成的指南手动采集。Linux 环境需提前安装 Chromium/ChromeDriver（如apt-get install chromium-chromedriver）。

五、截图管理与文档维护规范

添加截图后的操作流程

将截图文件放入docs/images/目录；
确保文件名与 README.md 中引用的名称一致（web-interface-main.png、web-interface-progress.png、web-interface-results.png、web-interface-models.png）；
检查图片在文档中是否正常显示；
提交到 Git 仓库。

更新说明

当 Web 界面有重大更新时，应及时更新对应截图，确保文档与实际界面保持一致。结合 web/README.md 的版本迭代（界面功能持续演进），这一"界面变更 → 截图同步"的机制保证了公开文档始终反映当前版本的真实状态。

六、从截图到界面实现：源码级印证

截图的每个元素都能在 Web 端源码与文档中找到对应实现，这既是截图内容真实性的来源，也方便读者按图索骥：

分析表单与进度展示：对应 web/components/analysis_form.py（股票代码、分析师选择、研究深度等输入）与 web/components/sidebar.py（模型与高级设置）；进度跟踪由 web/utils/progress_tracker.py 提供实时反馈；
结果与风险展示：对应 web/components/results_display.py 中的投资决策摘要、置信度、风险评分与详细报告渲染；
前端体验层：若需展示更现代的交互界面，可参考 frontend/README.md 描述的 Vue3 + TypeScript + Element Plus 前端（npm run dev后访问http://localhost:3000），其股票分析页同样覆盖配置表单、进度跟踪与报告查看，可作为补充截图来源。

七、常见问题与注意事项

分辨率不足：请确认浏览器窗口或 headless 参数达到 1920×1080，低于该标准会因文字模糊而被判定为不合格素材；
文件超限：单张截图超过 2MB 时，应压缩或裁剪后再放入目录，保持文档仓库轻量；
泄露密钥：采集前务必确认界面中的 API 密钥状态仅为"已配置 / 未配置"的展示态，绝不出现明文密钥；
状态不一致：分析完成后界面状态会变化，进度截图应控制在分析中途采集（约 50%），结果截图则等分析完全结束、报告渲染完整后再采集；
启动失败：优先检查 Python 版本（需 3.10+）、Streamlit 是否安装、端口 8501 是否被占用，以及.env中的 API 密钥是否配置（详见 docs/QUICK_START.md 的常见问题章节）。

遵循上述目录规范、截图标准与采集流程，即可持续为 TradingAgents-CN 的 README 与文档体系提供高质量、真实、专业的 Web 界面展示素材，让项目能力在公开文档中一目了然。

【免费下载链接】TradingAgents-CN基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析