Mon Jul 3 11:38:00 UTC 2023 inscode

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
+    "axios": "^1.4.0",
     "guess": "^1.0.2",
     "npm": "^9.7.2",
     "tdesign-vue-next": "^1.3.9",

src/App.vue

@@ -62,11 +62,19 @@
                 <t-image class="rounded-lg" v-if="config.robot_img" :src="config.robot_img" fit="cover"
                   :style="{ width: '40px', height: '40px' }"></t-image>
                 <div class="bg-slate-50 text-gray-700 p-4 mx-2 w-fit max-w-2xl 2xl:max-w-4xl rounded-lg text-wrapper">
-                  {{  item.message ? item.message : '...' }}
+                  
+                  <template v-if="item?.viewMode??'chat' === 'image'">
+                    <img v-if="item.img" :src="item.img"/>
+                    <img v-else src="/loading.gif" class="max-w-[512px]"/>
+                  </template>
+                  <template>
+                    {{  item.message ? item.message : '...' }}
+
+                  </template>
                 </div>
               </div>
             </div>
-            <div class="text-center">
+            <div class="text-center" v-if="mode !== 'draw'">
               <div v-if="loading"  @click="stop" class="-mt-4 px-5 py-1 m-auto w-fit cursor-pointer hover:bg-slate-300 border-dotted border-[1px] border-slate-400 rounded-md">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="animate-spin w-4 h-4 inline-block">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -228,26 +236,31 @@ export default {
       //   this.getAnswer()
       // }
 
+    },
+    scrollBottom () {
+      const _this = this
+      this.$nextTick(() => {
+        _this.$refs.messageList.scrollTop = _this.$refs.messageList.scrollHeight + 20;
+      })
+      
     },
     draw () {
 
-      if (this.prompt) {
-
-      }
       const currentMsg = {
         "user": "AI", "message": '', img: null, viewMode: 'image'
       }
       const query = this.prompt
       const _this = this
       const messages = this.message
+      messages.push({ "user": "User", "message": this.prompt })
 
       messages.push(currentMsg)
 
       this.loading = true
       this.prompt = ''
+      this.scrollBottom()
       SDApi.draw(this.config, query).then(res => {
 
-        debugger
         _this.loading = false
         _this.saveHistory()
         console.info('close')
@@ -255,6 +268,9 @@ export default {
 
         messages.splice(messages.length - 1, 1)
         messages.push(currentMsg)
+        _this.scrollBottom()
+        
+
       }).catch(err => {
         _this.loading = false
       })
@@ -315,7 +331,7 @@ export default {
       document.title = this.name
       if (data.ext) {
         const config = data.ext
-        debugger
+        
         this.config = config
         if (config.default_prompt) {
           this.prompt = config.default_prompt

src/js/config.js

@@ -15,7 +15,7 @@ export default {
                     "api_type":"openai",
                     "robot_img":null,
                     "api_max_token":"1024",
-                    "default_prompt":"请翻译成英文：你是谁？",
+                    "default_prompt":"cat",
                     "max_request_len":"10000",
                     "prompt_template":"",
                     "api_prompt_prefix":"",

src/js/sd.js

+import axios from "axios";
+
 export default {
     draw (config, prompt) {
-debugger    
         return new Promise(function(resolve,rejcet){
-            debugger
+            
             const data = {
                 prompt: prompt,
                 steps: config?.steps??20,
-                negative_prompt: config?.negative_prompt??'',
+                negative_prompt: config?.negative_prompt??'nsfw',
                 width: config?.width??512,
                 height: config?.height??512,
                 cfg_scale: config?.cfg_scale??6,
@@ -19,9 +20,8 @@ debugger
     
             axios.post(config?.sd_api, data, { headers }).then(response => {
     
-                debugger
-                if (response.statusCode === 200 && response?.data?.images){
-                    const image = res?.data?.images[0]                    
+                if (response.status === 200 && response?.data?.images){
+                    const image = response?.data?.images[0]                    
                     resolve('data:image/png;base64,' + image)
                 }