enable to update AI Drawing configuarations in admin console page

This commit is contained in:
RockYang
2024-05-11 17:27:14 +08:00
parent 1a4d798f8b
commit e35c34ad9a
16 changed files with 343 additions and 108 deletions

View File

@@ -105,7 +105,7 @@ const routes = [
{
path: '/admin/login',
name: 'admin-login',
meta: {title: 'ChatPuls 控制台登录'},
meta: {title: 'Geek-AI 控制台登录'},
component: () => import('@/views/admin/Login.vue'),
},
{
@@ -113,7 +113,7 @@ const routes = [
path: '/admin',
redirect: '/admin/dashboard',
component: () => import("@/views/admin/Home.vue"),
meta: {title: 'ChatPuls 管理后台'},
meta: {title: 'Geek-AI 控制台'},
children: [
{
path: '/admin/dashboard',

View File

@@ -29,6 +29,28 @@
</el-form-item>
</div>
<div class="param-line" style="padding-top: 10px">
<el-form-item label="采样调度器">
<template #default>
<div class="form-item-inner">
<el-select v-model="params.scheduler" style="width:176px">
<el-option v-for="item in schedulers" :label="item" :value="item" :key="item"/>
</el-select>
<el-tooltip
effect="light"
content="推荐自动或者 Karras"
raw-content
placement="right"
>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
</div>
</template>
</el-form-item>
</div>
<div class="param-line">
<el-form-item label="图片尺寸">
<template #default>
@@ -509,12 +531,14 @@ window.onresize = () => {
listBoxHeight.value = window.innerHeight - 40
paramBoxHeight.value = window.innerHeight - 150
}
const samplers = ["Euler a", "DPM++ 2S a Karras", "DPM++ 2M Karras", "DPM++ SDE Karras", "DPM++ 2M SDE Karras"]
const samplers = ["Euler a", "DPM++ 2S a", "DPM++ 2M", "DPM++ SDE", "DPM++ 2M SDE", "UniPC", "Restart"]
const schedulers = ["Automatic", "Karras", "Exponential", "Uniform"]
const scaleAlg = ["Latent", "ESRGAN_4x", "R-ESRGAN 4x+", "SwinIR_4x", "LDSR"]
const params = ref({
width: 1024,
height: 1024,
sampler: samplers[0],
scheduler: schedulers[0],
seed: -1,
steps: 20,
cfg_scale: 7,
@@ -640,7 +664,7 @@ const fetchRunningJobs = () => {
if (!isLogin.value) {
return
}
// 获取运行中的任务
httpGet(`/api/sd/jobs?status=0`).then(res => {
const jobs = res.data

View File

@@ -1,15 +1,34 @@
<template>
<el-form label-width="150px" label-position="right">
<el-form label-width="150px" label-position="right" class="draw-config">
<el-tabs type="border-card">
<el-tab-pane label="MJ-PLUS">
<div v-if="mjPlusConfigs">
<el-form-item label="网站标题">
<el-input v-model="sdConfigs"/>
</el-form-item>
<div class="config-item" v-for="(v,k) in mjPlusConfigs">
<el-form-item label="是否启用">
<el-switch v-model="v['Enabled']"/>
</el-form-item>
<el-form-item label="API 地址">
<el-input v-model="v['ApiURL']" placeholder="API 地址"/>
</el-form-item>
<el-form-item label="API 令牌">
<el-input v-model="v['ApiKey']" placeholder="API KEY"/>
</el-form-item>
<el-form-item label="绘画模式">
<el-select v-model="v['Mode']" placeholder="请选择模式">
<el-option v-for="item in mjModels" :value="item.value" :label="item.name" :key="item.value">{{
item.name
}}
</el-option>
</el-select>
</el-form-item>
<el-button class="remove" type="danger" :icon="Delete" circle @click="removeItem(mjPlusConfigs,k)"/>
</div>
</div>
<el-empty v-else></el-empty>
<el-row style="justify-content: center">
<el-button round>
<el-row style="justify-content: center; padding: 10px">
<el-button round @click="addConfig(mjPlusConfigs)">
<el-icon><Plus /></el-icon>
<span>新增配置</span>
</el-button>
@@ -19,23 +38,66 @@
<el-tab-pane label="MJ-PROXY">
<div v-if="mjProxyConfigs">
<el-form-item label="注册赠送算力">
<el-input v-model.number="sdConfigs" placeholder="新用户注册赠送算力"/>
</el-form-item>
<div class="config-item" v-for="(v,k) in mjProxyConfigs">
<el-form-item label="是否启用">
<el-switch v-model="v['Enabled']"/>
</el-form-item>
<el-form-item label="API 地址">
<el-input v-model="v['ApiURL']" placeholder="API 地址"/>
</el-form-item>
<el-form-item label="API 令牌">
<el-input v-model="v['ApiKey']" placeholder="API KEY"/>
</el-form-item>
<el-button class="remove" type="danger" :icon="Delete" circle @click="removeItem(mjProxyConfigs,k)"/>
</div>
</div>
<el-empty v-else />
<el-row style="justify-content: center; padding: 10px">
<el-button round @click="addConfig(mjProxyConfigs)">
<el-icon>
<Plus/>
</el-icon>
<span>新增配置</span>
</el-button>
</el-row>
</el-tab-pane>
<el-tab-pane label="Stable-Diffusion">
<el-form-item label="注册赠送算力">
<el-input v-model.number="sdConfigs" placeholder="新用户注册赠送算力"/>
</el-form-item>
<div v-if="sdConfigs">
<div class="config-item" v-for="(v,k) in sdConfigs">
<el-form-item label="是否启用">
<el-switch v-model="v['Enabled']"/>
</el-form-item>
<el-form-item label="API 地址">
<el-input v-model="v['ApiURL']" placeholder="API 地址"/>
</el-form-item>
<el-form-item label="API 令牌">
<el-input v-model="v['ApiKey']" placeholder="API KEY"/>
</el-form-item>
<el-form-item label="模型">
<el-input v-model="v['Model']" placeholder="绘画模型"/>
</el-form-item>
<el-button class="remove" type="danger" :icon="Delete" circle @click="removeItem(sdConfigs,k)"/>
</div>
</div>
<el-empty v-else/>
<el-row style="justify-content: center; padding: 10px">
<el-button round @click="addConfig(sdConfigs)">
<el-icon>
<Plus/>
</el-icon>
<span>新增配置</span>
</el-button>
</el-row>
</el-tab-pane>
</el-tabs>
<div style="padding: 10px;">
<el-form-item>
<el-button type="primary" @click="save('system')">保存</el-button>
<el-button type="primary" @click="saveConfig()">保存</el-button>
</el-form-item>
</div>
</el-form>
@@ -43,14 +105,19 @@
<script setup>
import {ref} from "vue";
import {httpGet} from "@/utils/http";
import {httpGet, httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {Plus} from "@element-plus/icons-vue";
import {Delete, Plus} from "@element-plus/icons-vue";
// 变量定义
const sdConfigs = ref([])
const mjPlusConfigs = ref([])
const mjProxyConfigs = ref([])
const mjModels = ref([
{name: "慢速Relax", value: "relax"},
{name: "快速Fast", value: "fast"},
{name: "急速Turbo", value: "turbo"},
])
httpGet("/api/admin/config/get/draw").then(res => {
sdConfigs.value = res.data.sd
@@ -59,29 +126,48 @@ httpGet("/api/admin/config/get/draw").then(res => {
}).catch(e =>{
ElMessage.error("获取AI绘画配置失败"+e.message)
})
const addConfig = (configs) => {
configs.push({
Enabled: true,
ApiKey: '',
ApiURL: '',
Mode: 'fast'
})
}
const saveConfig = () => {
httpPost('/api/admin/config/update/draw', {
'sd': sdConfigs.value,
'mj_plus': mjPlusConfigs.value,
'mj_proxy': mjProxyConfigs.value
}).then(() => {
ElMessage.success("配置更新成功")
}).catch(e => {
ElMessage.error("操作失败:" + e.message)
})
}
const removeItem = (arr, k) => {
arr.splice(k, 1)
}
</script>
<style lang="stylus" scoped>
.menu {
.draw-config {
.opt-box {
padding-bottom: 10px;
display flex;
justify-content flex-end
.config-item {
position relative
padding 15px 10px 10px 10px
border 1px solid var(--el-border-color)
border-radius 10px
margin-bottom 10px
.el-icon {
margin-right: 5px;
.remove {
position absolute
right 15px
top 15px
}
}
.menu-icon {
width 36px
height 36px
}
.el-select {
width: 100%
}
}
</style>

View File

@@ -2,6 +2,10 @@
<div class="admin-login">
<div class="main">
<div class="contain">
<div class="logo">
<el-image :src="logo" fit="cover" @click="router.push('/')"/>
</div>
<div class="header">{{ title }}</div>
<div class="content">
<div class="block">
@@ -42,9 +46,9 @@
<script setup>
import {onMounted, ref} from "vue";
import {ref} from "vue";
import {Lock, UserFilled} from "@element-plus/icons-vue";
import {httpPost} from "@/utils/http";
import {httpGet, httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import FooterBar from "@/components/FooterBar.vue";
@@ -52,15 +56,24 @@ import {setAdminToken} from "@/store/session";
import {checkAdminSession} from "@/action/session";
const router = useRouter();
const title = ref('ChatGPT Plus Admin');
const title = ref('Geek-AI Console');
const username = ref(process.env.VUE_APP_ADMIN_USER);
const password = ref(process.env.VUE_APP_ADMIN_PASS);
const logo = ref("/images/logo.png")
checkAdminSession().then(() => {
router.push("/admin")
}).catch(() => {
})
// 加载系统配置
httpGet('/api/config/get?key=system').then(res => {
title.value = res.data.admin_title
logo.value = res.data.logo
}).catch(e => {
ElMessage.error("加载系统配置失败: " + e.message)
})
const keyupHandle = (e) => {
if (e.key === 'Enter') {
login();
@@ -107,10 +120,20 @@ const login = function () {
border-radius 10px;
background rgba(255, 255, 255, 0.3)
.logo {
text-align center
.el-image {
width 120px;
cursor pointer
}
}
.header {
width 100%
margin-bottom 20px
font-size 24px
padding 10px
font-size 26px
text-align center
}

View File

@@ -279,7 +279,9 @@
<el-tab-pane label="公告配置" name="notice">
<md-editor class="mgb20" v-model="notice" @on-upload-img="onUploadImg"/>
<el-form-item>
<el-button type="primary" @click="save('notice')">保存</el-button>
<div style="padding-top: 10px;margin-left: 150px;">
<el-button type="primary" @click="save('notice')">保存</el-button>
</div>
</el-form-item>
</el-tab-pane>