Mon May 15 08:55:00 UTC 2023 inscode

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "axios": "^1.4.0",
+    "event-source-polyfill": "^1.0.31",
     "guess": "^1.0.2",
     "view-ui-plus": "^1.3.9",
     "vue": "^3.2.37"

src/App.vue

@@ -8,12 +8,7 @@
       </template>
     </div>
     <div class="question ivu-mt">
-      <Input
-       v-model="question" 
-       type="textarea" 
-       :autosize="{ minRows: 4, maxRows: 6 }" 
-       placeholder="输入你的问题" 
-      />
+      <Input v-model="question" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="输入你的问题" />
       <Row class="ivu-mt">
         <Col>
           <Button type="primary" size="large" icon="md-send" :loading="loading" @click="handleSend">发送</Button>
@@ -26,85 +21,118 @@
   </div>
 </template>
 <script>
-  import axios from 'axios';
+import { EventSourcePolyfill } from 'event-source-polyfill';
 
-  const token = 'Bearer ZXlKMGVYQWlPaUpLVjFRaUxDSmhiR2NpT2lKSVV6STFOaUo5LmV5SjBkQ0k2TkN3aVlYVmtJam9pWXpkbU16WTVOMlpqTldaak5EVmpNR0l5WldFNE5UVTNaRFkxTnpnM1lXVWlMQ0pzZFNJNklrbHVjME52WkdVaUxDSmxlSEFpT2pFMk9EVTFORGczT1Rrc0luVnlJam95TENKcWRHa2lPaUpCVUVsZlZFOUxSVTVmWXpkbU16WTVOMlpqTldaak5EVmpNR0l5WldFNE5UVTNaRFkxTnpnM1lXVXROQ0o5LmlyLTJYa1A4dFhNaFVldnlzTFhkUlJsY1VBV0ZiaWE5em9ZdGN6VlpleFk=';
-  const api = 'https://api.ai100.ai/ai/api/ai/chat';
+const token = 'Bearer ZXlKMGVYQWlPaUpLVjFRaUxDSmhiR2NpT2lKSVV6STFOaUo5LmV5SjBkQ0k2TkN3aVlYVmtJam9pWXpkbU16WTVOMlpqTldaak5EVmpNR0l5WldFNE5UVTNaRFkxTnpnM1lXVWlMQ0pzZFNJNklrbHVjME52WkdVaUxDSmxlSEFpT2pFMk9EVTFORGczT1Rrc0luVnlJam95TENKcWRHa2lPaUpCVUVsZlZFOUxSVTVmWXpkbU16WTVOMlpqTldaak5EVmpNR0l5WldFNE5UVTNaRFkxTnpnM1lXVXROQ0o5LmlyLTJYa1A4dFhNaFVldnlzTFhkUlJsY1VBV0ZiaWE5em9ZdGN6VlpleFk=';
+const api = 'https://api.ai100.ai/ai/api/ai/chat';
 
-  export default {
-    data () {
-      return {
-        question: '',
-        loading: false,
-        dialogs: []
-      }
-    },
-    methods: {
-      handleSend () {
-        if (this.loading || this.question === '') return;
-        this.loading = true;
+export default {
+  data() {
+    return {
+      question: '',
+      loading: false,
+      dialogs: []
+    }
+  },
+  methods: {
+    handleSend() {
+      if (this.loading || this.question === '') return;
+      this.loading = true;
+
+      const question = this.question;
+      this.question = '';
+
+      this.dialogs.push({
+        id: this.dialogs.length + 1,
+        role: 'me',
+        text: question
+      });
+
+      const aiDialogID = this.dialogs.length + 1;
 
-        const question = this.question;
-        this.question = '';
+      this.dialogs.push({
+        id: aiDialogID,
+        role: 'ai',
+        text: 'AI 思考中...'
+      });
 
-        this.dialogs.push({
-          role: 'me',
-          text: question
-        });
+      const query = {
+        prompt: '',
+        question,
+        stream: true
+      }
 
-        axios.post(api, 
-          {
-            prompt: '',
-            question,
-            stream: false
-          },
-          {
-            headers: {
-              Accept: '*/*',
-              Authorization: token
-            }
+      const source = new EventSourcePolyfill(
+        `${api}?question=${query.question}&prompt=${query.prompt}&stream=${query.stream}`,
+        {
+          headers: {
+            Accept: '*/*',
+            Authorization: token
           }
-        )
-        .then(({ data: res }) => {
-          console.log(res);
-        })
-        .finally(() => {
+        }
+      )
+
+      source.onopen = event => {
+        console.log("onopen", event);
+        const dialog = this.dialogs.find(item => item.id === aiDialogID);
+        dialog.text = '';
+      };
+      source.onmessage = event => {
+        if (event.data === "[DONE]") {
+          source.close();
           this.loading = false;
-        });
-      },
-      handleNewChat () {
-        this.dialogs = [];
-      }
+        }
+        if (event.data) {
+          const data = JSON.parse(event.data);
+          const text = data.message.content.parts.join("");
+          console.log(text);
+          const dialog = this.dialogs.find(item => item.id === aiDialogID);
+          dialog.text += text;
+        }
+      };
+      source.onerror = event => {
+        console.log("error", event);
+      };
+    },
+    handleNewChat() {
+      this.dialogs = [];
     }
   }
+}
 </script>
 <style>
-  .container{
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-  .dialog{
-    flex: 1;
-    overflow: auto;
-  }
-  .dialog-item{
-    display: flex;
-  }
-  .dialog-item-main{
-    max-width: 80%;
-    padding: 8px;
-    word-wrap: break-word;
-    margin-top: 16px;
-    border-radius: 4px;
-  }
-  .dialog-item-me{
-    justify-content: flex-end;
-  }
-  .dialog-item-me .dialog-item-main{
-    background-color: antiquewhite;
-  }
-  .dialog-item-ai .dialog-item-main{
-    background-color: #eee;
-  }
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog {
+  flex: 1;
+  overflow: auto;
+}
+
+.dialog-item {
+  display: flex;
+}
+
+.dialog-item-main {
+  max-width: 80%;
+  padding: 8px;
+  word-wrap: break-word;
+  margin-top: 16px;
+  border-radius: 4px;
+}
+
+.dialog-item-me {
+  justify-content: flex-end;
+}
+
+.dialog-item-me .dialog-item-main {
+  background-color: antiquewhite;
+}
+
+.dialog-item-ai .dialog-item-main {
+  background-color: #eee;
+}
 </style>
\ No newline at end of file