diff --git a/README.md b/README.md
index e883f68..619348d 100644
--- a/README.md
+++ b/README.md
@@ -18,52 +18,6 @@
 
 ![实现原理图2](img/langchain+chatglm2.png)
 
-项目目录结构
-```text
-.
-├── agent
-│   └── agent实现
-├── chains
-│   ├── modules
-│   └── chains实现
-├── configs
-│   └── 系统初始化配置
-├── content
-│   └── 临时附件上传位置
-├── docs
-│   └── 项目文档
-├── fastchat
-│   ├── api
-│   └── 一个fastchat langchain的LLM远程调用拓展
-├── img
-│   └── 项目资源目录
-├── loras
-│   └── 默认的本地lora文件存放路径
-├── model
-│   └── 默认的本地checkpoint存放路径
-├── models
-│   ├── extensions
-│   │   └── LLM内部拓展包
-│   ├── loader
-│   │   └── 项目checkpoint加载器，支持chatglm（AutoModel）、量化模型（llama.cpp）、其它模型（AutoModelForCausalLM）,兼容lora、ptuning_v2微调文件加载
-│   └── 实现chatglm、LLama等一些模型的langchain LLM wrapper integrations
-├── nltk_data
-│   ├── corpora
-│   │   └── cmudict
-│   ├── taggers
-│   │   └── averaged_perceptron_tagger
-│   └── tokenizers
-│       └── punkt
-├── ptuning-v2 
-├── textsplitter
-│   └── 中文语义分割
-├── utils
-│   └── 系统工具
-└── vector_store
-    └── faiss本地矢量库索引文件
-
-
-```
 
 🚩 本项目未涉及微调、训练过程，但可利用微调或训练对本项目效果进行优化。
 
@@ -170,9 +124,17 @@ $ pnpm i
 $ npm run dev
 ```
 
-执行后效果如下图所示：
+VUE 前端界面如下图所示：
+1. `对话` 界面
+![](img/vue_0521_0.png)
+2. `知识库问答` 界面
+![](img/vue_0521_1.png)
+3. `搜索`界面
+![](img/vue_0521_2.png)
+
+WebUI 界面如下图所示：
 1. `对话` Tab 界面
-![](img/webui_0510_0.png)
+![](img/webui_0521_0.png)
 2. `知识库测试 Beta` Tab 界面
 ![](img/webui_0510_1.png)
 3. `模型配置` Tab 界面
@@ -226,7 +188,8 @@ Web UI 可以实现如下功能：
 - [ ] Langchain 应用
   - [x] 接入非结构化文档（已支持 md、pdf、docx、txt 文件格式）
   - [x] jpg 与 png 格式图片的 OCR 文字识别
-  - [ ] 搜索引擎与本地网页接入
+  - [x] 搜索引擎接入
+  - [ ] 本地网页接入
   - [ ] 结构化数据接入（如 csv、Excel、SQL 等）
   - [ ] 知识图谱/图数据库接入
   - [ ] Agent 实现
@@ -251,10 +214,11 @@ Web UI 可以实现如下功能：
     - [x] 上传文件/文件夹至知识库
     - [x] 知识库测试
     - [ ] 删除知识库中文件
-  - [ ] 利用 streamlit 实现 Web UI Demo
+  - [x] 支持搜索引擎问答
 - [ ] 增加 API 支持
   - [x] 利用 fastapi 实现 API 部署方式
   - [ ] 实现调用 API 的 Web UI Demo
+- [x] VUE 前端
 
 ## 项目交流群
 ![二维码](img/qr_code_18.jpg)
diff --git a/README_en.md b/README_en.md
index 300973a..79edb91 100644
--- a/README_en.md
+++ b/README_en.md
@@ -120,9 +120,26 @@ $ python api.py
 ```
 Note: Before executing, check the remaining space in the `$HOME/.cache/huggingface/` folder, at least 15G.
 
-The resulting interface is shown below:
+Or execute following command to run VUE after api.py executed
+```shell
+$ cd views 
 
-![](img/webui_0510_0.png)
+$ pnpm i
+
+$ npm run dev
+```
+
+VUE interface screenshots:
+
+![](img/vue_0521_0.png)
+
+![](img/vue_0521_1.png)
+
+![](img/vue_0521_2.png)
+
+Web UI interface screenshots:
+
+![img.png](img/webui_0521_0.png)
 
 ![](img/webui_0510_1.png)
 
diff --git a/img/vue_0521_0.png b/img/vue_0521_0.png
new file mode 100644
index 0000000..391223d
Binary files /dev/null and b/img/vue_0521_0.png differ
diff --git a/img/vue_0521_1.png b/img/vue_0521_1.png
new file mode 100644
index 0000000..ff0646e
Binary files /dev/null and b/img/vue_0521_1.png differ
diff --git a/img/webui_0521_0.png b/img/webui_0521_0.png
new file mode 100644
index 0000000..3fed2f8
Binary files /dev/null and b/img/webui_0521_0.png differ