本生成图片

This commit is contained in:
ZLI263
2025-10-18 10:51:06 +08:00
parent c809e383fa
commit d9d798ac72
4 changed files with 183 additions and 12 deletions

View File

@@ -84,6 +84,16 @@ export function imageProcessing(data) {
})
}
// 文本生图(基于参考图像和提示词)
export function imageGenByText(data) {
return request({
url: '/image-model/image-gen-byText',
method: 'post',
data,
timeout: 60000
})
}
// 检查任务状态
export function checkImageModelStatus() {
return request({

View File

@@ -318,10 +318,10 @@ export const constantRoutes = [
meta: { title: '海报生成', icon: 'el-icon-picture-outline-round' }
},
{
path: 'remove-watermark',
name: 'RemoveWatermark',
component: () => import('@/views/image-model/remove-watermark'),
meta: { title: '去除水印', icon: 'el-icon-brush' }
path: 'image-generation',
name: 'ImageGeneration',
component: () => import('@/views/image-model/image-generation'),
meta: { title: '文本生图', icon: 'el-icon-picture-outline' }
},
{
path: 'background-model',

View File

@@ -0,0 +1,161 @@
<template>
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>文本生图</span>
</div>
<div class="content">
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px" class="inline-form half-width">
<el-form-item label="图片名称" prop="imageName">
<el-input v-model="form.imageName" placeholder="请输入图片名称" maxlength="50" show-word-limit />
</el-form-item>
<el-form-item label="所属人姓名" prop="ownerName">
<el-input v-model="form.ownerName" placeholder="请输入所属人姓名" maxlength="30" show-word-limit :disabled="true" />
</el-form-item>
<el-form-item label="所属人电话" prop="ownerPhone">
<el-input v-model="form.ownerPhone" placeholder="请输入所属人电话" maxlength="20" :disabled="true" />
</el-form-item>
<el-form-item label="模型" prop="model">
<el-select v-model="form.model" placeholder="请选择模型" filterable style="width: 100%">
<el-option v-for="m in modelOptions" :key="m.value" :label="m.label" :value="m.value" />
</el-select>
</el-form-item>
<el-form-item label="指令" prop="prompt">
<el-input
v-model="form.prompt"
type="textarea"
:rows="5"
placeholder="请输入生成指令,如:一只在夕阳下奔跑的金毛"
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-form-item class="button-container">
<el-button
type="primary"
:loading="submitting"
class="generate-button"
@click="submit"
>
<i class="el-icon-magic-stick" />
生成图片
</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
</template>
<script>
import { imageGenByText } from '@/api/image-management'
export default {
name: 'ImageGeneration',
data() {
return {
submitting: false,
form: {
imageName: '',
ownerName: '',
ownerPhone: '',
model: '',
prompt: ''
},
modelOptions: [
{ label: 'qwen3-vl-plus', value: 'qwen3-vl-plus' },
{ label: 'qwen-vl-max', value: 'qwen-vl-max' },
{ label: 'qwen-vl-plus', value: 'qwen-vl-plus' }
],
rules: {
imageName: [
{ required: true, message: '请填写图片名称', trigger: 'blur' }
],
ownerName: [
{ required: true, message: '请填写所属人姓名', trigger: 'blur' }
],
ownerPhone: [
{ required: true, message: '请填写所属人电话', trigger: 'blur' },
{ pattern: /^\+?\d[\d\-\s]{5,19}$/,
message: '电话格式不正确', trigger: 'blur' }
],
model: [
{ required: true, message: '请选择模型', trigger: 'change' }
],
prompt: [
{ required: true, message: '请填写生成指令', trigger: 'blur' },
{ min: 4, message: '指令至少 4 个字符', trigger: 'blur' }
]
}
}
},
created() {
// 预填充当前登录人的姓名和电话
try {
const name = this.$store.getters && this.$store.getters.name
const phone = this.$store.getters && this.$store.getters.phone
if (name) this.form.ownerName = name
if (phone) this.form.ownerPhone = phone
} catch (e) {
// ignore
}
},
methods: {
submit() {
this.$refs.formRef && this.$refs.formRef.validate(async valid => {
if (!valid) return
this.submitting = true
try {
const resp = await imageGenByText(this.form)
const msg = (resp && resp.message) || '已提交生成任务'
this.$message.success(msg)
} catch (e) {
this.$message.error('生成失败,请稍后重试')
} finally {
this.submitting = false
}
})
}
}
}
</script>
<style scoped>
.content {
padding: 20px 0;
display: flex;
justify-content: center;
}
.half-width {
max-width: 600px;
width: 100%;
margin: 0 auto;
}
.button-container {
display: flex;
justify-content: center;
}
.generate-button {
padding: 10px 32px;
font-size: 14px;
font-weight: 500;
border-radius: 6px;
background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
border: none;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
transition: all 0.3s ease;
}
.generate-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}
.generate-button:active {
transform: translateY(0);
}
</style>

View File

@@ -38,11 +38,10 @@
class="filter-item"
>
<el-option label="全部" value="" />
<el-option label="背景图" value="background" />
<el-option label="人物图" value="person" />
<el-option label="产品图" value="product" />
<el-option label="素材图" value="material" />
<el-option label="成品" value="result" />
<el-option label="多图生图" value="result" />
<el-option label="文本生图" value="text_to_image" />
<el-option label="去除水印" value="remove_water" />
<el-option label="其他" value="other" />
</el-select>
<el-button
@@ -891,17 +890,18 @@ export default {
product: 'warning',
material: 'danger',
result: 'success',
text_to_image: 'primary',
remove_water: 'warning',
other: 'info'
}
return typeMap[type] || 'info'
},
getImageTypeText(type) {
const typeMap = {
background: '背景图',
person: '人物图',
product: '产品图',
material: '素材图',
result: '成品',
result: '图生图',
text_to_image: '文本生图',
remove_water: '去除水印',
other: '其他'
}
return typeMap[type] || '未知'