add simple web ui for workflow (#6)

* add simple web ui for workflow

* update readme

Author: ashione

README.md

@@ -70,6 +70,138 @@ python -m vertex_flow.src.app
 
 启动后，浏览器访问 [http://localhost:7860](http://localhost:7860) 进入 Web 聊天界面（支持工作流与多模型）。
 
+## Web UI 使用指南
+
+### 界面概览
+
+Vertex 提供了直观易用的 Web 界面，包含以下主要功能模块：
+
+1. **聊天界面** - 支持多轮对话和流式输出
+2. **工作流编辑器** - 可视化工作流设计与执行
+3. **配置管理** - 模型参数和系统设置
+
+### 聊天功能使用
+
+#### 基本聊天
+- 在主页面的聊天输入框中输入问题
+- 支持多轮对话，系统会自动维护上下文
+- 支持实时流式输出，可以看到模型逐字生成回复
+
+#### 模型切换
+- 在聊天界面可以选择不同的模型：
+  - `local-qwen`：本地 Ollama 部署的 Qwen-7B 模型
+  - `deepseek-chat`：DeepSeek API 模型
+  - `openrouter/*`：OpenRouter 平台的各种模型
+
+#### 自定义 System Prompt
+- 在聊天界面的设置中可以自定义 System Prompt
+- 用于指导模型的行为和回复风格
+- 支持实时修改和应用
+
+### 工作流编辑器使用
+
+#### 访问工作流编辑器
+- 点击导航栏中的「工作流」按钮
+- 或直接访问 [http://localhost:7860/workflow](http://localhost:7860/workflow)
+
+#### 节点类型说明
+- **开始节点**：工作流的入口点
+- **LLM节点**：调用大语言模型进行文本生成
+- **检索节点**：从知识库中检索相关信息
+- **条件节点**：根据条件进行分支判断
+- **函数节点**：执行自定义函数逻辑
+- **结束节点**：工作流的出口点
+
+#### 创建工作流
+1. **添加节点**：从左侧节点面板拖拽节点到画布
+2. **连接节点**：点击连接模式，然后点击两个节点建立连接
+3. **配置节点**：选择节点后在右侧属性面板配置参数
+4. **执行工作流**：点击执行按钮运行工作流
+5. **查看输出**：在底部输出面板查看节点执行结果
+
+#### 节点配置详解
+
+**LLM节点配置**：
+- 模型选择：支持本地和云端模型
+- 系统提示词：定义模型行为
+- 用户消息：支持变量占位符
+- 温度：控制输出随机性（0-1）
+- 最大令牌数：限制输出长度
+
+**检索节点配置**：
+- 索引名称：指定要检索的知识库
+- 查询内容：支持变量占位符
+- 检索数量：返回的相关文档数量
+
+**条件节点配置**：
+- 条件表达式：使用 Python 表达式
+- 支持多分支条件判断
+
+#### 变量系统
+- **环境变量**：`{{#env.变量名#}}`
+- **用户变量**：`{{user.var.变量名}}`
+- **节点输出**：`{{节点ID.输出字段}}`
+
+#### 工作流操作
+- **保存工作流**：自动保存到本地
+- **加载工作流**：从配置文件加载
+- **导出工作流**：导出为 YAML 格式
+- **自动布局**：自动整理节点位置
+
+### 输出面板功能
+
+#### 查看节点输出
+- 选择已执行的节点，在底部输出面板查看结果
+- 支持 Markdown 格式渲染
+- 支持原始内容查看
+- 支持一键复制输出内容
+
+#### 面板控制
+- **展开**：将输出面板展开到全屏
+- **最小化**：收起输出面板
+- **拖拽调整**：拖拽分隔条调整面板高度
+
+### 配置管理
+
+#### API 配置
+- 在配置页面设置外部 API 的密钥和基础 URL
+- 支持 DeepSeek、OpenRouter 等多种 API 服务
+- 配置后即可在聊天和工作流中使用对应模型
+
+#### 模型参数
+- 温度：控制输出的随机性和创造性
+- 最大令牌数：限制单次输出的最大长度
+- 系统提示词：全局的模型行为指导
+
+### 快捷键
+
+- `Ctrl/Cmd + Enter`：发送聊天消息
+- `Escape`：取消工作流节点连接模式
+- `Ctrl/Cmd + S`：保存工作流（开发中）
+
+### 故障排除
+
+#### 常见问题
+1. **工作流图形不显示**：
+   - 检查浏览器控制台是否有 JavaScript 错误
+   - 刷新页面重新加载
+   - 确保网络连接正常
+
+2. **节点输出不显示**：
+   - 确保节点已成功执行
+   - 检查底部输出面板是否被最小化
+   - 尝试重新选择节点
+
+3. **模型调用失败**：
+   - 检查 API 密钥配置是否正确
+   - 确认网络连接和 API 服务状态
+   - 查看控制台错误信息
+
+#### 性能优化建议
+- 大型工作流建议分步执行
+- 定期清理浏览器缓存
+- 使用现代浏览器以获得最佳体验
+
 ## 可选参数
 
 - `--host`：Ollama 服务地址（默认：http://localhost:11434）

requirements.txt

@@ -12,7 +12,9 @@ tqdm>=4.65.0
 openai>=1.0.0
 
 # LangChain相关依赖
+dashvector
+dashscope
 langchain-core>=0.1.0
 langchain-community>=0.0.1
 ruamel.yaml>=0.18.10
-dashvector
+flask>=2.0.0

vertex_flow/workflow/chat.py

@@ -51,9 +51,16 @@ def _create_completion(
         }
         if option:
             default_option.update(option)
-        completion = self.client.chat.completions.create(
-            model=self.name, messages=messages, tools=tools, **default_option
-        )
+        # 构建API调用参数
+        api_params = {
+            "model": self.name,
+            "messages": messages,
+            **default_option
+        }
+        if tools is not None and len(tools) > 0:
+            api_params["tools"] = tools
+            
+        completion = self.client.chat.completions.create(**api_params)
         return completion
 
     def chat(self, messages, option: Dict[str, Any] = None, tools=None) -> Choice:

vertex_flow/workflow/constants.py

@@ -16,8 +16,8 @@
 STATUS = "status"
 SUCCESS = "success"
 MODEL = "model"
-SYSTEM = "system"
-USER = "user"
+SYSTEM = "system_message"
+USER = "user_messages"
 PREPROCESS = "preprocess"
 POSTPROCESS = "postprocess"
 ENABLE_STREAM = "enable_stream"