update docs

README.md

@@ -1,5 +1,7 @@
 # ChatGPT API WEB
 
+> 灵车东西，做着玩儿的
+
 一个简单的网页，调用 OPENAI ChatGPT 进行对话。
 
 与官方 ChatGPT 相比：
@@ -15,14 +17,14 @@
 
 ![screenshot](./screenshot.webp)
 
-~~发病.webp~~
+~~让喵娘统治世界吧（（发病.webp~~
 
 ## 使用
 
 以下任意方式都可：
 
-- 访问 github pages 部署
+- 访问 github pages 部署 <https://heimoshuiyu.github.io/chatgpt-api-web/>
-- 从 release 下载网页文件然后双击打开
+- 从 [release](https://github.com/heimoshuiyu/chatgpt-api-web/releases) 下载网页文件，或在 [github pages](https://heimoshuiyu.github.io/chatgpt-api-web/) 按 `ctrl+s` 保存网页，然后双击打开
 - 自行编译构建网页
 
 ### 更改默认参数
@@ -33,11 +35,13 @@
 
 例如 `http://localhost:1234/?key=xxxx` 那么新创建的会话将会使用该默认 API
 
-以上三个参数应用于单个对话，随时可在顶部更改
+以上参数应用于单个对话，随时可在顶部更改
 
 ## 自行编译构建网页
 
 ```bash
 yarn install
 yarn build
-```
+```
+
+构建产物在 `dist` 文件夹中

src/app.tsx

@@ -54,6 +54,7 @@ export const newChatStore = (
 const STORAGE_NAME = "chatgpt-api-web";
 
 export function App() {
+  // init all chat store
   const initAllChatStore: ChatStore[] = JSON.parse(
     localStorage.getItem(STORAGE_NAME) || "[]"
   );
@@ -62,12 +63,15 @@ export function App() {
     localStorage.setItem(STORAGE_NAME, JSON.stringify(initAllChatStore));
   }
   const [allChatStore, setAllChatStore] = useState(initAllChatStore);
+
   const [selectedChatIndex, setSelectedChatIndex] = useState(0);
   const chatStore = allChatStore[selectedChatIndex];
+
   const setChatStore = (cs: ChatStore) => {
     allChatStore[selectedChatIndex] = cs;
     setAllChatStore([...allChatStore]);
   };
+
   useEffect(() => {
     console.log("saved", allChatStore);
     localStorage.setItem(STORAGE_NAME, JSON.stringify(allChatStore));
@@ -79,20 +83,29 @@ export function App() {
   const client = new ChatGPT(chatStore.apiKey);
 
   const _complete = async () => {
+    // manually copy status from chatStore to client
     client.apiEndpoint = chatStore.apiEndpoint;
     client.sysMessageContent = chatStore.systemMessageContent;
     client.messages = chatStore.history.slice(chatStore.postBeginIndex);
+
+    // call api, return reponse text
     const response = await client.complete();
     chatStore.history.push({ role: "assistant", content: response });
+
+    // manually copy status from client to chatStore
     chatStore.maxTokens = client.max_tokens;
     chatStore.tokenMargin = client.tokens_margin;
     chatStore.totalTokens = client.total_tokens;
+    // when total token > max token - margin token:
+    // ChatGPT will "forgot" some historical message
+    // so client.message.length will be less than chatStore.history.length
     chatStore.postBeginIndex =
       chatStore.history.length - client.messages.length;
     console.log("postBeginIndex", chatStore.postBeginIndex);
     setChatStore({ ...chatStore });
   };
 
+  // wrap the actuall complete api
   const complete = async () => {
     try {
       setShowGenerating(true);
@@ -104,6 +117,7 @@ export function App() {
     }
   };
 
+  // when user click the "send" button or ctrl+Enter in the textarea
   const send = async () => {
     if (!inputMsg) {
       console.log("empty message");
@@ -116,6 +130,7 @@ export function App() {
     setChatStore({ ...chatStore });
   };
 
+  // change api key
   const changAPIKEY = () => {
     const newAPIKEY = prompt(`Current API KEY: ${chatStore.apiKey}`);
     if (!newAPIKEY) return;