📝docs(README): update README

- create README_CN.md

- update README.md

README.md

@@ -1,3 +1,11 @@
+<div align="right">
+   <a href="README_CN.md">中文</a> | <strong>English</strong>
+</div>
+<div align="center">
+<h1>Chat UI</h1>
+<p>Chat UI: Construct the entire front-end UI for AI Chat using a single HTML file</p>
+</div>
+
 # Chat UI
 
 The UI of Chat is becoming increasingly complex, often encompassing an entire front-end project along with deployment solutions.
@@ -9,16 +17,19 @@ By simplifying the structure and key functions, developers can quickly set up an
 ## How to use
 
 ### Option 1: Goto demo [AIQL](https://chat.aiql.com/)
+
 > The demo will use `Llama 3.1` by default
 
 ### Option 2: Download [Index](./index.html) and open it locally (recommended)
 
 ### Option 3: Deploy your own Chatbot by [Docker](https://hub.docker.com/repository/docker/aiql/chat-ui/tags?page=1&ordering=last_updated)
+
 ```shell
 docker run -p 8080:8080 -d aiql/chat-ui
 ```
 
 ### Option 4: fork this repo and link it to [Cloudflare pages](https://developers.cloudflare.com/pages)
+
 - demo https://www2.aiql.com
 
 ## How to config
@@ -33,10 +44,12 @@ Or change the `Endpoint` in configuration to use API from other vendors
 
 If you're experiencing issues opening the page and a simple refresh isn't resolving the issue, please take the following steps:
 
-### 1. Right-click your browser page and go to the `Network` section.
-### 2. Right-click on section table and clear your browser's cache and cookies to ensure you have the latest version of the page.
-### 3. Additionally, inspect the browser's Network section to see which resources are failing to load due to your location. This will provide you with more specific information about the issue.
+1. Right-click your browser page and go to the `Network` section.
+
+2. Right-click on section table and clear your browser's cache and cookies to ensure you have the latest version of the page.
 
+3. Additionally, inspect the browser's Network section to see which resources are failing to load due to your location. This will provide you with more specific information about the issue.
 
 ## Demo
+
 ![](./demo.gif)

README_CN.md

@@ -0,0 +1,55 @@
+<div align="right">
+   <strong>中文</strong> | <a href="README.md">English</a>
+</div>
+<div align="center">
+<h1>Chat UI</h1>
+<p>Chat UI: 使用单个HTML文件为AI对话构建整个前端UI</p>
+</div>
+
+# Chat UI
+
+聊天界面变得越来越复杂，通常包含整个前端项目及其部署解决方案。 
+
+本仓库旨在使用单个HTML文件构建整个前端UI，目标是以极简主义方法创建一个聊天机器人。 
+
+通过简化结构和关键功能，开发人员可以快速设置并实验功能性聊天机器人，遵循精简项目设计的理念。 
+
+## 如何使用 
+
+### 选项 1: 访问演示 [AIQL](https://chat.aiql.com/) 
+
+> 演示默认使用 `Llama 3.1` 
+
+### 选项 2: 下载 [Index](./index.html) 并本地打开（推荐） 
+
+### 选项 3: 使用 [Docker](https://hub.docker.com/repository/docker/aiql/chat-ui/tags?page=1&ordering=last_updated) 部署自己的聊天机器人 
+
+``` shell
+docker run -p 8080:8080 -d aiql/chat-ui 
+``` 
+
+### 选项 4: 叉此仓库并将其链接到 [Cloudflare 页面](https://developers.cloudflare.com/pages) 
+
+- 演示 <https://www2.aiql.com> 
+
+## 如何配置 
+
+默认情况下，聊天机器人将使用与OpenAI Chatgpt相同的API格式。您可以插入您的OpenAI `API密钥` 并直接使用它。 
+
+或者更改配置中的 `端点` 以使用其他供应商的API 
+
+> 您可以从 [示例](./example/config) 下载配置模板，并使用它进行快速配置 
+
+## 故障排除 
+
+如果您在打开页面时遇到问题，而简单的刷新无法解决问题，请按照以下步骤操作： 
+
+1. 右键点击浏览器页面并转到 `Network` 部分。 
+
+2. 右键点击表格部分，清除浏览器的缓存和cookie，以确保您拥有页面的最新版本。 
+
+3. 此外，检查浏览器的网络部分，查看由于您的位置哪些资源未能加载。这将为您提供关于问题的更具体信息。 
+
+## 演示 
+
+![](./demo.gif)