add gradio quickstart (#100)

Author: DeepThinkingZhouLiu

docs/en/notes/guide/agent/DataFlow-AgentPipelineOrchestration.md

@@ -166,4 +166,24 @@ class TextMinHashDeduplicator(OperatorABC):
         return [output_key]
 ```
 
-Users can personalize configuration by modifying the parameters in `ChatAgentRequest`.
+Users can personalize configuration by modifying the parameters in `ChatAgentRequest`.
+
+
+### 6. Experience DataFlow-Agent via Gradio
+
+#### Startup Methods
+
+##### Method 1: Direct Startup
+After installing the `dataflow` package, directly start the Gradio frontend and backend using `dataflow webui agent`. The default port is 7862.
+
+##### Method 2: Separate Frontend and Backend Startup
+
+- Start the frontend:
+```bash
+python test/test_agent_fronted_gradio.py
+```
+
+- Start the backend:
+```bash
+python test/test_dataflow_agent_with_ui.py
+```

docs/zh/notes/guide/agent/DataFlow-AgentPipelineOrchestration.md

@@ -172,4 +172,27 @@ class TextMinHashDeduplicator(OperatorABC):
         return [output_key]
 ```
 
-用户可通过修改`ChatAgentRequest`中参数实现个性化配置。
+用户可通过修改`ChatAgentRequest`中参数实现个性化配置。
+
+
+### 6. 通过Gradio体验DataFlow-Agent
+#### 启动方式
+##### 方式一：直接启动
+安装好`dataflow`包之后，通过 `dataflow webui agent` 直接启动 Gradio 前后端，默认端口为 7862。
+##### 方式二：前后端分离启动
+- 启动前端：
+``` bash
+python test/test_agent_fronted_gradio.py
+```
+
+- 启动后端：
+
+``` bash
+python test/test_dataflow_agent_with_ui.py
+```
+
+
+
+
+
+