From 523fa757889527100fda9aac644f8819c33e0749 Mon Sep 17 00:00:00 2001
From: 622aa39c1f9b166ab1a38c05 <622aa39c1f9b166ab1a38c05@devide>
Date: Thu, 6 Jul 2023 08:14:00 +0000
Subject: [PATCH] Thu Jul 6 08:14:00 UTC 2023 inscode
---
src/App.vue | 34 +++++++++-----
src/js/storage.js | 111 ++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 133 insertions(+), 12 deletions(-)
create mode 100644 src/js/storage.js
diff --git a/src/App.vue b/src/App.vue
index f5052d2..dd15e5d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -62,7 +62,7 @@
-
+ {{ item.img }}
![]()
@@ -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 ,',
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') {
diff --git a/src/js/storage.js b/src/js/storage.js
new file mode 100644
index 0000000..0973562
--- /dev/null
+++ b/src/js/storage.js
@@ -0,0 +1,111 @@
+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
--
GitLab