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,13 +21,13 @@
   </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 () {
+export default {
+  data() {
     return {
       question: '',
       loading: false,
@@ -40,7 +35,7 @@
     }
   },
   methods: {
-      handleSend () {
+    handleSend() {
       if (this.loading || this.question === '') return;
       this.loading = true;
 
@@ -48,16 +43,27 @@
       this.question = '';
 
       this.dialogs.push({
+        id: this.dialogs.length + 1,
         role: 'me',
         text: question
       });
 
-        axios.post(api, 
-          {
+      const aiDialogID = this.dialogs.length + 1;
+
+      this.dialogs.push({
+        id: aiDialogID,
+        role: 'ai',
+        text: 'AI 思考中...'
+      });
+
+      const query = {
         prompt: '',
         question,
-            stream: false
-          },
+        stream: true
+      }
+
+      const source = new EventSourcePolyfill(
+        `${api}?question=${query.question}&prompt=${query.prompt}&stream=${query.stream}`,
         {
           headers: {
             Accept: '*/*',
@@ -65,46 +71,68 @@
           }
         }
       )
-        .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;
-        });
+        }
+        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 () {
+    handleNewChat() {
       this.dialogs = [];
     }
   }
-  }
+}
 </script>
 <style>
-  .container{
+.container {
   height: 100%;
   display: flex;
   flex-direction: column;
-  }
-  .dialog{
+}
+
+.dialog {
   flex: 1;
   overflow: auto;
-  }
-  .dialog-item{
+}
+
+.dialog-item {
   display: flex;
-  }
-  .dialog-item-main{
+}
+
+.dialog-item-main {
   max-width: 80%;
   padding: 8px;
   word-wrap: break-word;
   margin-top: 16px;
   border-radius: 4px;
-  }
-  .dialog-item-me{
+}
+
+.dialog-item-me {
   justify-content: flex-end;
-  }
-  .dialog-item-me .dialog-item-main{
+}
+
+.dialog-item-me .dialog-item-main {
   background-color: antiquewhite;
-  }
-  .dialog-item-ai .dialog-item-main{
+}
+
+.dialog-item-ai .dialog-item-main {
   background-color: #eee;
-  }
+}
 </style>
\ No newline at end of file