update document

docs/sphinx_doc/en/source/tutorial/development.md

@@ -4,26 +4,36 @@
 
 This extension project is divided into two parts:
 
-- **Frontend** is responsible for the user interaction interface, communication with the backend service, and executing the API calls returned by the backend service.
+- **SmartVscode Side (Frontend)**: It is responsible for the user interaction interface, communication with the backend service, and executing the API calls returned by the backend service.
 
-- **Backend** utilizes large language models (LLMs) to orchestrate the optimal API calls to fulfill user requirements based on [App-Controller](https://github.com/alibaba/app-controller) framework.
+- **App-Controller Side （Backend）**: It utilizes large language models (LLMs) to orchestrate the optimal API calls to fulfill user requirements based on [App-Controller](https://github.com/alibaba/app-controller) framework.
 
-When you need to develop the frontend of the extension, you can install the frontend from source code and start your own backend service for testing and development.
+When you need to develop the SmartVscode extension, you need to install the frontend from source code and start your own backend service for testing and development.
 
-## Step 1: Install and run the extension frontend from source code
+
+## Step 1: Start your own backend service
+- Install the backend (i.e. App-Controller) by following the [docs](https://alibaba.github.io/app-controller/en/tutorial/installation.html).
+
+- Configure the service by following the [docs](https://alibaba.github.io/app-controller/en/tutorial/deploy.html#step3-configuration-your-app-controller).
+
+- Start your own backend service by following the [docs](https://alibaba.github.io/app-controller/en/tutorial/deploy.html#step4-start-the-service).
+
+
+## Step 2: Install and run the SmartVscode extension
 - Before you start, ensure that you have `Node.js` and `npm` installed on your system.
 - Clone the [repository](https://github.com/alibaba/smart-vscode-extension.git) to your local machine
+    ```shell
+    git clone git@github.com:alibaba/smart-vscode-extension.git
+    ```
 - Install the `Yarn` package manager by running `npm install --global yarn`
 - On the root directory, run `yarn` command to install the dependencies listed in `package.json`
-- Configure the frontend to commuicate with backend by modifying `llm4apisServiceBaseUrl` in the `src/Common/Config.ts` file. Ensure that the `llm4apisServiceBaseUrl` correspond to the service to be deployed. 
+    ```shell
+    yarn install 
+    ```
+- Configure the URL and Port of http communication  between `SmartVscode extension` with `App-Controller Side （Backend）`  by modifying `llm4apisServiceBaseUrl` in the `src/Common/Config.ts` file. Ensure that the `llm4apisServiceBaseUrl` correspond to the service to be deployed. 
 - Within VS Code - run the project by simply hitting `F5`
 
-## Step 2: Start your own backend service from source code
-- Install the backend (i.e. App-Controller) by following the [docs](https://alibaba.github.io/app-controller/en/tutorial/installation.html).
-
-- Configure the service by following the [docs](https://alibaba.github.io/app-controller/en/tutorial/deploy.html#step3-configuration-your-app-controller).
 
-- Start your own backend service by following the [docs](https://alibaba.github.io/app-controller/en/tutorial/deploy.html#step4-start-the-service).
 
 ## Step3: Start to develop
 

docs/sphinx_doc/en/source/tutorial/how-to-use.md

@@ -0,0 +1,18 @@
+(installaion-en)=
+
+# How to use
+To begin utilizing this extension, follow these steps:
+## Installation
+1. Navigate to the Visual Studio Code Extension Marketplace.
+2. Search for and install the extension.
+## Add Model Config
+Once the extension is installed:
+- Locate the chat window titled "SmartVscode" in your left sidebar, which should resemble the following:
+<p align="center"><img src="../_static/mainView.png" alt="alt text" width="200"/></p>
+
+- Configure your model settings within the extension:
+   - Access the our settings by clicking "Settings" button:
+   - For using OpenAI, input your API key and select your preferred chat and embedding models
+<p align="center"><img src="../_static/modelConfig.png" alt="alt text" width="400"/></p> 
+
+

docs/sphinx_doc/en/source/tutorial/introduction.md

@@ -4,20 +4,14 @@
 
 <h3 align="center"><img src="../_static/ai-logo.png" height="64"><br>SmartVscode: Controlling anything of Vscode by natural language</h3>
 
-<p align="center">
-    <a>
-        <img src="https://img.shields.io/visual-studio-marketplace/v/gencay.vscode-chatgpt?color=orange&label=VS%20Code" />
-    </a>
-    <a>
-        <img src="https://img.shields.io/badge/license-Apache--2.0-black" />
-    </a>
-    <a>
-        <img src="https://img.shields.io/badge/Contribute-Welcome-green" />
-    <!-- </a>
-        <a alt="Github star count">
-        <img src="https://img.shields.io/github/stars/modelscope/agentscope?color=blue&label=Github%20" />
-    </a> -->
-</p>
+
+<div align="center">
+
+![](https://img.shields.io/visual-studio-marketplace/v/gencay.vscode-chatgpt?color=orange&label=VS%20Code)
+![](https://img.shields.io/badge/license-Apache--2.0-black")
+[![](https://img.shields.io/badge/Docs-English%7C%E4%B8%AD%E6%96%87-blue?logo=markdown)](https://alibaba.github.io/smart-vscode-extension/en/index.html)
+
+</div>
 
 
 

docs/sphinx_doc/en/source/tutorial/main.md

@@ -1,5 +1,5 @@
 # Welcome to Smart-Vscode Tutorial
 - [About Smart-Vscode](tutorial/introduction.md)
-- [How to Use](tutorial/installation.md)
+- [How to Use](tutorial/how-to-use.md)
 - [Supported Tasks](tutorial/tasks.md)
 - [How to Develop](tutorial/development.md)