update images of readme

README-en.md

@@ -23,13 +23,19 @@
 
 AskChat is a command-line tool for ChatGPT interaction, allowing you to call ChatGPT anytime, anywhere.
 
-Run in the terminal:
-
-![hello](docs/assets/svgs/hello.svg)
-
-Run in Jupyter Notebook:
+<div align="center">
+    <figure>
+        <img src="docs/assets/svgs/hello.svg" alt="hello" width="480">
+        <figcaption>Run in Terminal</figcaption>
+    </figure>
+</div>
 
-![jupyter](docs/assets/jupyter.gif)
+<div align="center">
+    <figure>
+    <img src="docs/assets/jupyter.gif" alt="jupyter" width="480">
+    <figcaption>Jupyter Lab</figcaption>
+    </figure>
+</div>
 
 ## Installation and Configuration
 
@@ -64,21 +70,33 @@ In addition, you can use `askchat` for more flexible dialogue and `askenv` to ma
 
 ### Usage Examples
 
-1. API debugging, testing default parameters and return results.
-
-    ![debug](docs/assets/svgs/debug.svg)
-
-2. Get a list of available models.
-
-    ![validmodels](docs/assets/svgs/validmodels.svg)
-
-3. Multi-turn dialogue, saving dialogues, loading dialogues, etc.
+<div align="center">
+<figure>
+    <figcaption>1. API debugging</figcaption>
+    <img src="docs/assets/svgs/debug.svg" alt="debug" width="480">
+    </figure>
+</div>
 
-    ![chatlog](docs/assets/svgs/chatlog.svg)
+<div align="center">
+<figure>
+    <figcaption>2. Get a list of available models</figcaption>
+    <img src="docs/assets/svgs/validmodels.svg" alt="validmodels" width="480">
+    </figure>
+</div>
 
-4. Specify parameters, using different models and APIs.
+<div align="center">
+<figure>
+    <figcaption>3. Multi-turn dialogue, saving dialogues, loading dialogues, etc.</figcaption>
+    <img src="docs/assets/svgs/chatlog.svg" alt="chatlog" width="480">
+    </figure>
+</div>
 
-    ![para-models](docs/assets/svgs/para-models.svg)
+<div align="center">
+<figure>
+    <figcaption>4. Specify parameters, using different models and APIs</figcaption>
+    <img src="docs/assets/svgs/para-models.svg" alt="para-models" width="480">
+    </figure>
+</div>
 
 ### Dialogue Management
 
@@ -134,14 +152,19 @@ Note: `--all-valid-models` will print all available models, including Embedding,
 
 ### Examples
 
-1. Create, view, activate, and delete channels.
-
-    ![askenv](docs/assets/svgs/askenv.svg)
-
-2. Edit channel.
-
-   ![askenv-config](docs/assets/svgs/editenv.svg)
+<div align="center">
+    <figure>
+    <figcaption>1. Create channel</figcaption>
+    <img src="docs/assets/svgs/askenv.svg" alt="askenv" width="480">
+    </figure>
+</div>
 
+<div align="center">
+    <figure>
+    <figcaption>2. Edit channel</figcaption>
+    <img src="docs/assets/svgs/editenv.svg" alt="editenv" width="480">
+    </figure>
+</div>
 
 ### Basic Usage
 

README.md

@@ -21,15 +21,21 @@
 [English](README-en.md) | [简体中文](README.md)
 </div>
 
-AskChat 是一个通过命令行运行的，无界面的 ChatGPT 交互工具，随时随地调用 ChatGPT。
+通过命令行运行的 ChatGPT 交互工具，随时随地调用 ChatGPT。
 
-在终端调用：
-
-![hello](docs/assets/svgs/hello.svg)
-
-在 Jupyter Notebook 中调用：
+<div align="center">
+    <figure>
+        <img src="docs/assets/svgs/hello.svg" alt="hello" width="480">
+        <figcaption>终端调用</figcaption>
+    </figure>
+</div>
 
-![jupyter](docs/assets/jupyter.gif)
+<div align="center">
+    <figure>
+    <img src="docs/assets/jupyter.gif" alt="jupyter" width="480">
+    <figcaption>Jupyter Lab</figcaption>
+    </figure>
+</div>
 
 ## 安装及配置
 
@@ -64,21 +70,35 @@ ask hello world
 
 ### 使用示例
 
-1. API 调试，测试默认参数和返回结果。
 
-    ![debug](docs/assets/svgs/debug.svg)
-
-2. 获取可用模型列表。
-
-    ![validmodels](docs/assets/svgs/validmodels.svg)
+<div align="center">
+<figure>
+    <figcaption>1. API 调试</figcaption>
+    <img src="docs/assets/svgs/debug.svg" alt="debug" width="480">
+    </figure>
+</div>
 
-3. 多轮对话，保存对话，加载对话等。
+<div align="center">
+<figure>
+    <figcaption>2. 获取可用模型列表</figcaption>
+    <img src="docs/assets/svgs/validmodels.svg" alt="validmodels" width="480">
+    </figure>
+</div>
 
-    ![chatlog](docs/assets/svgs/chatlog.svg)
+<div align="center">
+<figure>
+    <figcaption>3. 多轮对话，保存对话，加载对话等</figcaption>
+    <img src="docs/assets/svgs/chatlog.svg" alt="chatlog" width="480">
+    </figure>
+</div>
 
-4. 指定参数，使用不同的模型和 API。
+<div align="center">
+<figure>
+    <figcaption>4. 指定参数，使用不同的模型和 API</figcaption>
+    <img src="docs/assets/svgs/para-models.svg" alt="para-models" width="480">
+    </figure>
+</div>
 
-    ![para-models](docs/assets/svgs/para-models.svg)
 
 ### 对话管理
 
@@ -134,11 +154,19 @@ ask hello world
 
 1. 创建，查看，激活和删除渠道
 
-    ![askenv](docs/assets/svgs/askenv.svg)
-
-2. 编辑渠道
+<div align="center">
+    <figure>
+    <figcaption>1. 创建渠道</figcaption>
+    <img src="docs/assets/svgs/askenv.svg" alt="askenv" width="480">
+    </figure>
+</div>
 
-    ![askenv-config](docs/assets/svgs/editenv.svg)
+<div align="center">
+    <figure>
+    <figcaption>2. 编辑渠道</figcaption>
+    <img src="docs/assets/svgs/editenv.svg" alt="editenv" width="480">
+    </figure>
+</div>
 
 
 ### 基本用法