Fri Jul 7 03:49:00 UTC 2023 inscode

src/App.vue

@@ -19,7 +19,29 @@
     <!-- main content -->
     <div class="flex w-full h-full pt-14">
       <!-- left  -->
-      <div class="flex-none w-0 md:w-[260px] bg-slate-200 border-r-2 hidden md:block p-8">
+      <div class="flex-none w-0 md:w-[260px] bg-slate-200 border-r-2 hidden md:block p-8 text-sm">
+
+        <t-form labelAlign="top">
+          <t-form-item label="StableDiffusion服务器类型" name="sdServerType">
+            <t-select v-model="sdServerType" @change="handleSDServerTypeChange">
+              <t-option v-for="(item, index) in sdServerTypeOptions" :key="index" :value="item.value" :label="item.label">
+                {{ item.label }}
+              </t-option>
+            </t-select>
+          </t-form-item>
+          <t-form-item label="服务器地址" name="sdServerUrl">
+            <t-textarea placeholder="请输入内容" v-model="sdServerUrl" :autosize="true"/>
+          </t-form-item>
+        </t-form>
+        <t-card class="bg-orange-100 mt-8 text-gray-600 text-sm" v-if="sdServerType === 'common'">
+          公共服务器为临时提供的测试服务器，可能存在需要排队或随时下线的可能。<br/>
+          建议使用
+          <t-tooltip content="购买后上面服务器地址填写 工作台-Stable Diffusion WebUI域名即可" theme="primary">
+            <t-link href="https://inscode.csdn.net/gpu?utm_source=sd_app" target="_blank" :suffix-icon="renderSuffixIcon" underline>私有服务器</t-link>
+          </t-tooltip>
+        </t-card>
+
+
         <t-form labelAlign="top" label-width="100" :style="{display: showProfileSetting ? 'block':'none'}">
             <t-form-item label="机器人头像">
               <!-- <t-input placeholder="请输入内容" v-model="config.robot_img"/> -->
@@ -41,12 +63,12 @@
             <t-form-item label="机器人对你的称呼" help="多个称呼用逗号隔开">
               <t-input v-model="config.user_call_name" />
             </t-form-item>
-          </t-form>
+        </t-form>
       </div>
       <!-- right -->
       <div class="flex-auto bg-slate-300 md:bg-slate-300 p-2 sm:p-8">
         <div class="w-full bg-slate-200 h-full m-auto relative container max-w-6xl rounded-xl">
-          <div class="w-full h-full pb-12 p-4 overflow-y-auto overflow-x-hidden" ref="messageList">
+          <div class="w-full h-full pb-24 p-4 overflow-y-auto overflow-x-hidden" ref="messageList">
             <div v-for="item in message" class="mb-8">
               <div v-if="item.user === 'User'">
                 <div class="flex flex-row-reverse">
@@ -62,7 +84,6 @@
                 <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.img }}
                   <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]"/>
@@ -96,12 +117,12 @@
                   </t-button>
                 </t-dropdown>
               
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" 
+                <!-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" 
                 @click="showMoreSetting=!showMoreSetting"
                 class="w-6 mx-2 ml-4 mt-2 h-6 flex-none text-cyan-800 font-bold hover:text-cyan-600 cursor-pointer">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
                   <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
+                </svg> -->
 
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                   stroke="currentColor"
@@ -111,7 +132,7 @@
                     d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
                 </svg>
             </div>
-            <div class="w-full h-10 mt-2 flex gap-2" v-if="showMoreSetting">
+            <div class="w-full h-10 mt-2 flex gap-2" v-if="mode === 'draw'">
                 <input v-model="negative_prompt" class="flex-auto ring-0	outline-0	pl-2 bg-slate-200 h-10" v-on:keyup.enter="query" placeholder="逆向提示词" />
                 <div class="flex-none w-40 ring-0	outline-0	pl-2  h-10 flex justify-between">
                   <input v-model="width" class="ring-0	outline-0	pl-2 bg-slate-200 h-10 w-16" placeholder="width"/> 
@@ -120,10 +141,7 @@
                 </div>
                 <input v-model="steps" class="flex-none w-30 ring-0	outline-0	pl-2 bg-slate-200 h-10 w-16" placeholder="steps"/>
                 <input v-model="sampler" class="flex-none w-40 ring-0	outline-0	pl-2 bg-slate-200 h-10 w-16 text-small" placeholder="sampler"/>
-
             </div>
-           
-            
           </div>
         </div>
       </div>
@@ -169,6 +187,12 @@ export default {
       prompt: '',
       config: {
       },
+      sdServerType: 'common',
+      sdServerTypeOptions: [
+        { label: '公共服务器', value: 'common' },
+        { label: '私有服务器', value: 'private' },
+      ],
+      sdServerUrl: 'https://gpu-pod64a4ff02b54fe048c07abc40-6006.node.inscode.run/sdapi/v1/txt2img',
       loading: false,
       maxHistory: 200,
       speaking: false, // 是否正在输出语音
@@ -301,17 +325,19 @@ export default {
       config.height = this.height
       config.steps = this.steps
       config.sampler = this.sampler
+      config.sd_api = this.sdServerUrl
 
       SDApi.draw(config, query, negative_prompt).then(res => {
 
         _this.loading = false
-        _this.saveHistory()
+        
         console.info('close')
         currentMsg.img = res
 
         messages.splice(messages.length - 1, 1)
         messages.push(currentMsg)
         _this.scrollBottom()
+        _this.saveHistory()
         
 
       }).catch(err => {
@@ -396,17 +422,14 @@ export default {
       }
     },
     recoveryHistory() {
-      const cacheKey = this.history.key
 
-      StorageApi.get(this.history.name, cacheKey).then(data => {
-        debugger
+      StorageApi.get(this.history.name).then(data => {
         if (data && data.data) {
           this.message = JSON.parse(data.data)
         }
       })      
     },
     saveHistory() {
-      const cacheKey = this.history.key
       if (this.message.length > this.maxHistory) {
         const tmpHistory = []
         const start = this.message.length - this.maxHistory
@@ -414,9 +437,9 @@ export default {
         for (let id = start; id < end; id++) {
           tmpHistory.push(this.message[id])
         }
-        StorageApi.put(this.history.name, cacheKey, JSON.stringify(tmpHistory))
+        StorageApi.put(this.history.name, JSON.stringify(tmpHistory))
       } else {
-        StorageApi.put(this.history.name, cacheKey, JSON.stringify(this.message))
+        StorageApi.put(this.history.name, JSON.stringify(this.message))
       }
 
     },
@@ -449,6 +472,35 @@ export default {
     },
     copyAsPrompt (message) {
       this.prompt = message
+    },
+    handleServerTypeChange (type) {
+      
+      if (type === 'common') {
+        this.sdServerUrl = this.config.common_sd_api
+      }
+      
+      console.info(123)
+    },
+    recoverConfig () {
+      const config = localStorage.getItem('ai-config')
+      if (config) {
+        const configJSON = JSON.parse(config)
+        this.config = configJSON
+        this.sdServerType = configJSON.sdServerType
+        this.sdServerUrl = configJSON.sdServerUrl
+      } else {
+
+        this.getAppInfo()
+        this.sdServerUrl = this.config.common_sd_api
+        
+      }
+    },
+    saveConfig () {
+
+      const config = JSON.parse(JSON.stringify(this.config))
+      config.sdServerType = this.sdServerType
+      config.sdServerUrl = this.sdServerUrl
+      localStorage.setItem('ai-config', JSON.stringify(config))
     }
   },
   mounted() {
@@ -456,7 +508,7 @@ export default {
     StorageApi.init(this.history.name).then(res => {
       this.recoveryHistory()
     })
-    this.getAppInfo()
+    this.recoverConfig()
     // this.getAvatar()
     if (this.mode === 'draw') {
       this.prompt = this.default_prompt

src/js/config.js

@@ -11,7 +11,7 @@ export default {
                 "ext": {
                     "mode":"chat",
                     "model":"vicuna-7b-all-v1.1",
-                    "api_url":"https://gpu-pod647d498393e106496a046e94-8000.node.inscode.run/v1",
+                    "api_url":"",
                     "api_type":"openai",
                     "robot_img":null,
                     "api_max_token":"1024",
@@ -20,7 +20,7 @@ export default {
                     "prompt_template":"",
                     "api_prompt_prefix":"",
                     "show_profile_setting":false,
-                    "sd_api": 'https://api.quickapi.cloud/sd/',
+                    "common_sd_api": "https://api.quickapi.cloud/test/common/sd/",
                 },
                 
 

src/js/sd.js

@@ -18,7 +18,11 @@ export default {
                 'content-type': 'application/json'
             };
     
-            axios.post(config?.sd_api, data, { headers }).then(response => {
+            let api = config?.sd_api
+            if (api.indexOf('/sd') === -1) {
+                api += '/sdapi/v1/txt2img'
+            }
+            axios.post(api, data, { headers }).then(response => {
     
                 if (response.status === 200 && response?.data?.images){
                     const image = response?.data?.images[0]                    

src/js/storage.js

@@ -2,7 +2,7 @@ let db = null
 const defaultTableName = 'history'
 export default {
 	init(tableName = defaultTableName) {
-		let request = window.indexedDB.open('ai-draw', '1')
+		let request = window.indexedDB.open('ai-draw', 1)
 		return new Promise((resolve, reject) => {
 
 			// 数据库操作过程中出错，则错误回调被触发
@@ -21,7 +21,7 @@ export default {
                 
 			   db = event.target.result
 			   let objectStore = db.createObjectStore(tableName, { keyPath: 'id' })
-			   objectStore.createIndex('key', 'key', { unique: true })
+			//    objectStore.createIndex('key', 'key', { unique: true })
 			   console.log("db onupgradeneeded 成功")
 			   resolve()
 			}
@@ -30,12 +30,11 @@ export default {
 	isConnected(tableName = defaultTableName){
 		return db != null
 	},
-	set(tableName = defaultTableName, key, val, id = 100){
+	set(tableName = defaultTableName, val, id = 100){
 		let request = db.transaction(tableName, 'readwrite')
 		          .objectStore(tableName)
 		          .add({
 					  id: id,
-					  key: key,
 					  data: val
 				  })
 		return new Promise((resolve, reject) => {
@@ -49,12 +48,11 @@ export default {
 			}
 		})
 	},
-	put(tableName = defaultTableName, key, val, id = 100){
+	put(tableName = defaultTableName, val, id = 100){
 		let request = db.transaction(tableName, 'readwrite')
 		          .objectStore(tableName)
 		          .put({
 					  id: id,
-					  key: key,
 					  data: val
 				  })
 		return new Promise((resolve, reject) => {
@@ -87,11 +85,9 @@ export default {
 			}
 		})
 	},
-	get(tableName = defaultTableName, key){
+	get(tableName = defaultTableName, id = 100){
 		let request = db.transaction(tableName, 'readwrite')
-		          .objectStore(tableName)
-		          .index('key')
-				  .get(key)
+		          .objectStore(tableName).get(id)
 				  
 		console.info("获取")