Skip to content

A
AI绘图

born_with_pride / AI绘图
与 Fork 源项目一致

Fork自 冯丙见 / AI绘图

通知 1
Star 0
Fork 0
A
AI绘图
提交 c64e1cdd 编写于 作者: 6 622aa39c1f9b166ab1a38c05
浏览文件
操作

Fri Jul 7 03:49:00 UTC 2023 inscode

上级 648a2683
隐藏空白更改
内联 并排
Showing with 83 addition and 31 deletion
src/App.vue
浏览文件 @ c64e1cdd
......@@ -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
浏览文件 @ c64e1cdd
......@@ -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
浏览文件 @ c64e1cdd
......@@ -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
浏览文件 @ c64e1cdd
......@@ -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("获取")
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或