Thu Jul 6 08:14:00 UTC 2023 inscode

src/App.vue

@@ -62,7 +62,7 @@
                 <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]"/>
@@ -137,6 +137,7 @@
 import OpenAI from './js/openai.js'
 import Config from './js/config.js'
 import SDApi from './js/sd.js'
+import StorageApi from './js/storage.js'
 
 // import MarkdownItVue from 'markdown-it-vue'
 // import 'markdown-it-vue/dist/markdown-it-vue.css'
@@ -156,7 +157,7 @@ export default {
       userAvatarList: [],
       robotAvatarList: [],
       mode: 'draw',
-      modeImage: 'chart-bubble',
+      modeImage: 'image', // image chat chart-bubble
       message: [
         // {"user": "User", "message": "创建一个用户表，要求分区"},
         // {"user": "AI", "message": "在GaussDB数据库中创建一个带有分区的用户表可以使用以下语句：在GaussDB数据库中创建一个带有分区的用户表可以使用以下语句：在GaussDB数据库中创建一个带有分区的用户表可以使用以下语句：在GaussDB数据库中创建一个带有分区的用户表可以使用以下语句："},
@@ -183,9 +184,13 @@ export default {
       height: 512,
       steps: 20,
       sampler: 'DPM++ SDE Karras',
-      showMoreSetting: false,
+      showMoreSetting: true,
       default_prompt: '1girl, (ulzzang-6500:0.7), kpop idol, yae miko, detached sleeves, bare shoulders, pink hair, long hair, cleavage,japanese clothes,breast,best quality, (painting:1.5), (hair ornament:1.35), jewelry, purple eyes, earrings, breasts, torii, cherry blossoms, lantern light, depth of field, detailed face, face focus, ribbon_trim, (looking at viewer:1.25), nontraditional miko, shiny skin, long sleeves, smile, thick lips, game cg,  east asian architecture, (blurry background:1.2), sitting, upper body <lora:YaeMiko_Test:0.45>,<lora:mix4:0.5>',
       negative_prompt: 'bright lantern, brightness, (nipples:1.2), pussy, EasyNegative, (worst quality:2), (low quality:2), (normal quality:2), lowres, normal quality, ((monochrome)), ((grayscale)), skin spots, acnes, skin blemishes, age spot, glans,extra fingers, fewer fingers, strange fingers, bad hand, bare thighs,hand,bad finger',
+      history: {
+        name: 'ai',
+        key: 'history',
+      },
     }
   },
   methods: {
@@ -391,14 +396,17 @@ export default {
       }
     },
     recoveryHistory() {
-      const cacheKey = 'history_' + this.id
-      const data = localStorage.getItem(cacheKey)
-      if (data) {
-        this.message = JSON.parse(data)
-      }
+      const cacheKey = this.history.key
+
+      StorageApi.get(this.history.name, cacheKey).then(data => {
+        debugger
+        if (data && data.data) {
+          this.message = JSON.parse(data.data)
+        }
+      })      
     },
     saveHistory() {
-      const cacheKey = 'history_' + this.id
+      const cacheKey = this.history.key
       if (this.message.length > this.maxHistory) {
         const tmpHistory = []
         const start = this.message.length - this.maxHistory
@@ -406,9 +414,9 @@ export default {
         for (let id = start; id < end; id++) {
           tmpHistory.push(this.message[id])
         }
-        localStorage.setItem(cacheKey, JSON.stringify(tmpHistory))
+        StorageApi.set(this.history.name, cacheKey, JSON.stringify(tmpHistory))
       } else {
-        localStorage.setItem(cacheKey, JSON.stringify(this.message))
+        StorageApi.set(this.history.name, cacheKey, JSON.stringify(this.message))
       }
 
     },
@@ -445,7 +453,9 @@ export default {
   },
   mounted() {
     this.id = this.$route?.params?.id
-    this.recoveryHistory()
+    StorageApi.init(this.history.name).then(res => {
+      this.recoveryHistory()
+    })
     this.getAppInfo()
     // this.getAvatar()
     if (this.mode === 'draw') {

src/js/storage.js

+let db = null
+const defaultTableName = 'history'
+export default {
+	init(tableName = defaultTableName) {
+		let request = window.indexedDB.open('ai-draw', '1')
+		return new Promise((resolve, reject) => {
+
+			// 数据库操作过程中出错，则错误回调被触发
+			request.onerror = (event) => {
+				console.log("db init报错" + event)
+				reject()
+			}
+			
+			request.onsuccess = (event) => {
+				db = event.target.result
+				console.log("db init成功")
+				resolve()
+			}
+			
+			request.onupgradeneeded = (event) => {
+                
+			   db = event.target.result
+			   let objectStore = db.createObjectStore(tableName, { keyPath: 'id' })
+			   objectStore.createIndex('key', 'key', { unique: true })
+			   console.log("db onupgradeneeded 成功")
+			   resolve()
+			}
+		})
+	},
+	isConnected(tableName = defaultTableName){
+		return db != null
+	},
+	set(tableName = defaultTableName, key, val, id = 100){
+		let request = db.transaction(tableName, 'readwrite')
+		          .objectStore(tableName)
+		          .add({
+					  id: id,
+					  key: key,
+					  data: val
+				  })
+		return new Promise((resolve, reject) => {
+			request.onsuccess = (event) => {
+				console.info('添加成功', event)
+				resolve(event)
+			}
+			request.onerror = (event) => {
+				console.info('添加失败')
+				reject(event)
+			}
+		})
+	},
+	getAll(tableName = defaultTableName){
+		let request = db.transaction(tableName, 'readwrite')
+		          .objectStore(tableName)
+		          .index('key')
+				  .getAll()
+				  
+		console.info("开水获取全部")
+		
+		return new Promise((resolve, reject) => {
+			request.onsuccess = (event) => {
+				console.info('获取成功')
+				resolve(request.result)
+			}
+			request.onerror = (event) => {
+				console.info('获取失败')
+				reject(event)
+			}
+		})
+	},
+	get(tableName = defaultTableName, key){
+		let request = db.transaction(tableName, 'readwrite')
+		          .objectStore(tableName)
+		          .index('key')
+				  .get(key)
+				  
+		console.info("获取")
+		
+		return new Promise((resolve, reject) => {
+			request.onsuccess = (event) => {
+				console.info('获取成功')
+				resolve(request.result)
+			}
+			request.onerror = (event) => {
+				console.info('获取失败')
+				reject(event)
+			}
+		})
+	},
+	del(tableName = defaultTableName, id = 100){
+		
+		let request = db.transaction(tableName, 'readwrite')
+		          .objectStore(tableName)
+				  .delete(id)
+		
+				  
+		console.info("开始删除")
+		
+		return new Promise((resolve, reject) => {
+			request.onsuccess = (event) => {
+				console.info('删除成功')
+				resolve(request.result)
+			}
+			request.onerror = (event) => {
+				console.info('删除失败')
+				reject(event)
+			}
+		})
+	}
+		
+}
\ No newline at end of file