feat: support uploading role icon

This commit is contained in:
RockYang
2024-04-05 17:41:23 +08:00
parent 574fc52332
commit 5e46f149d9
13 changed files with 116 additions and 49 deletions

View File

@@ -82,7 +82,8 @@
<el-main v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.3)">
<div class="chat-head">
<div class="chat-config">
<el-select v-model="roleId" filterable placeholder="角色" class="role-select" @change="_newChat">
<el-select v-model="roleId" filterable placeholder="角色" class="role-select" @change="_newChat"
style="width:150px">
<el-option
v-for="item in roles"
:key="item.id"
@@ -96,7 +97,8 @@
</el-option>
</el-select>
<el-select v-model="modelID" placeholder="模型" @change="_newChat" :disabled="disableModel">
<el-select v-model="modelID" placeholder="模型" @change="_newChat" :disabled="disableModel"
style="width:150px">
<el-option
v-for="item in models"
:key="item.id"

View File

@@ -33,7 +33,7 @@
<el-form-item label="图片画质">
<template #default>
<div class="form-item-inner flex-row items-center">
<el-select v-model="params.quality" placeholder="请选择">
<el-select v-model="params.quality" placeholder="请选择" style="width:150px">
<el-option v-for="item in options"
:key="item.value"
:label="item.label"

View File

@@ -11,7 +11,7 @@
<el-form-item label="采样方法">
<template #default>
<div class="form-item-inner">
<el-select v-model="params.sampler" size="small" style="width:150px">
<el-select v-model="params.sampler" style="width:176px">
<el-option v-for="item in samplers" :label="item" :value="item" :key="item"/>
</el-select>
<el-tooltip
@@ -20,7 +20,7 @@
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@@ -35,10 +35,10 @@
<div class="form-item-inner">
<el-row :gutter="20">
<el-col :span="12">
<el-input v-model.number="params.width" size="small" placeholder="图片宽度"/>
<el-input v-model.number="params.width" placeholder="图片宽度"/>
</el-col>
<el-col :span="12">
<el-input v-model.number="params.height" size="small" placeholder="图片高度"/>
<el-input v-model.number="params.height" placeholder="图片高度"/>
</el-col>
</el-row>
</div>
@@ -50,14 +50,14 @@
<el-form-item label="迭代步数">
<template #default>
<div class="form-item-inner">
<el-input v-model.number="params.steps" size="small"/>
<el-input v-model.number="params.steps"/>
<el-tooltip
effect="light"
content="值越大则代表细节越多,同时也意味着出图速度越慢"
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@@ -70,14 +70,14 @@
<el-form-item label="引导系数">
<template #default>
<div class="form-item-inner">
<el-input v-model.number="params.cfg_scale" size="small"/>
<el-input v-model.number="params.cfg_scale"/>
<el-tooltip
effect="light"
content="提示词引导系数,图像在多大程度上服从提示词<br/> 较低值会产生更有创意的结果"
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@@ -90,14 +90,14 @@
<el-form-item label="随机因子">
<template #default>
<div class="form-item-inner">
<el-input v-model.number="params.seed" size="small"/>
<el-input v-model.number="params.seed"/>
<el-tooltip
effect="light"
content="随机数种子,相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@@ -108,7 +108,7 @@
raw-content
placement="right"
>
<el-icon @click="params.seed = -1">
<el-icon @click="params.seed = -1" class="info-icon">
<Orange/>
</el-icon>
</el-tooltip>
@@ -121,14 +121,14 @@
<el-form-item label="高清修复">
<template #default>
<div class="form-item-inner">
<el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1;"/>
<el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1;" size="large"/>
<el-tooltip
effect="light"
content="先以较小的分辨率生成图像,接着方法图像<br />然后在不更改构图的情况下再修改细节"
raw-content
placement="right"
>
<el-icon style="margin-top: 6px">
<el-icon style="margin-left: 10px; top: 12px">
<InfoFilled/>
</el-icon>
</el-tooltip>
@@ -150,7 +150,7 @@
raw-content
placement="right"
>
<el-icon style="margin-top: 6px">
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@@ -163,7 +163,7 @@
<el-form-item label="放大算法">
<template #default>
<div class="form-item-inner">
<el-select v-model="params.hd_scale_alg" size="small" style="width:150px">
<el-select v-model="params.hd_scale_alg" style="width:176px">
<el-option v-for="item in scaleAlg" :label="item" :value="item" :key="item"/>
</el-select>
<el-tooltip
@@ -172,7 +172,7 @@
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@@ -185,14 +185,14 @@
<el-form-item label="放大倍数">
<template #default>
<div class="form-item-inner">
<el-input v-model.number="params.hd_scale" size="small"/>
<el-input v-model.number="params.hd_scale"/>
<el-tooltip
effect="light"
content="随机数种子,相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@@ -205,14 +205,14 @@
<el-form-item label="迭代步数">
<template #default>
<div class="form-item-inner">
<el-input v-model.number="params.hd_steps" size="small"/>
<el-input v-model.number="params.hd_steps"/>
<el-tooltip
effect="light"
content="重绘迭代步数如果设置为0则设置跟原图相同的迭代步数"
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@@ -239,7 +239,7 @@
content="不希望出现的元素,下面给了默认的起手式"
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>

View File

@@ -21,7 +21,6 @@
</template>
</el-table-column>
<el-table-column label="角色标识" prop="key"/>
<el-table-column label="绑定模型" prop="model_name"/>
<el-table-column label="启用状态">
<template #default="scope">
<el-switch v-model="scope.row['enable']" @change="roleSet('enable',scope.row)"/>
@@ -68,10 +67,17 @@
</el-form-item>
<el-form-item label="角色图标:" prop="icon">
<el-input
v-model="role.icon"
autocomplete="off"
/>
<el-input v-model="role.icon">
<template #append>
<el-upload
:auto-upload="true"
:show-file-list="false"
:http-request="uploadImg"
>
上传
</el-upload>
</template>
</el-input>
</el-form-item>
<el-form-item label="绑定模型:" prop="model_id">
@@ -79,6 +85,7 @@
v-model="role.model_id"
filterable
placeholder="请选择模型"
clearable
>
<el-option
v-for="item in models"
@@ -159,6 +166,7 @@ import {httpGet, httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {copyObj, removeArrayItem} from "@/utils/libs";
import {Sortable} from "sortablejs"
import Compressor from "compressorjs";
const showDialog = ref(false)
const parentBorder = ref(true)
@@ -288,7 +296,27 @@ const removeContext = function (index) {
role.value.context.splice(index, 1);
}
// 图片上传
const uploadImg = (file) => {
// 压缩图片并上传
new Compressor(file.file, {
quality: 0.6,
success(result) {
const formData = new FormData();
formData.append('file', result, result.name);
// 执行上传操作
httpPost('/api/admin/upload', formData).then((res) => {
role.value.icon = res.data.url
ElMessage.success('上传成功')
}).catch((e) => {
ElMessage.error('上传失败:' + e.message)
})
},
error(e) {
ElMessage.error('上传失败:' + e.message)
},
});
};
</script>
<style lang="stylus" scoped>