xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2026-05-06 01:34:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

调整即梦AI移动端参数

Browse Source
This commit is contained in:
GeekMaster
2025-08-08 13:29:36 +08:00
parent 0ce5df6811
commit af31f91973
2 changed files with 260 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
web/src/assets/css/mobile/jimeng.scss
View File

@@ -94,6 +94,47 @@
min-height: 100vh; min-height: 100vh;
background-color: #f9fafb; background-color: #f9fafb;
/* 参数容器样式 - 参考 Jimeng.vue */
&__params-container {
padding: 16px;
background: #fff;
border-radius: 12px;
margin-top: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* 功能面板样式 - 参考 Jimeng.vue */
&__function-panel {
.jimeng-create__param-line {
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
}
}
/* 参数行样式 - 参考 Jimeng.vue */
&__param-line {
display: flex;
flex-direction: column;
gap: 8px;
&.pt {
padding-top: 16px;
}
}
/* 参数标签样式 - 参考 Jimeng.vue */
&__param-label {
font-size: 14px;
font-weight: 500;
color: #374151;
display: flex;
align-items: center;
gap: 4px;
}
/* 页面头部样式 */ /* 页面头部样式 */
&__header { &__header {
position: sticky; position: sticky;
@@ -143,7 +184,7 @@
/* 主要内容区域 */ /* 主要内容区域 */
&__content { &__content {
padding: 1rem; padding: 1rem;
.space-y-6 > * + * { .space-y-6 > * + * {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@@ -766,7 +807,8 @@
&-body { &-body {
padding: 1.5rem; padding: 1.5rem;
img, video { img,
video {
width: 100%; width: 100%;
max-height: 60vh; max-height: 60vh;
object-fit: contain; object-fit: contain;
@@ -784,4 +826,4 @@
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }

446
web/src/views/mobile/JimengCreate.vue
View File

@@ -21,7 +21,6 @@
v-model="jimengStore.activeCategory" v-model="jimengStore.activeCategory"
@update:modelValue="jimengStore.switchCategory" @update:modelValue="jimengStore.switchCategory"
> >
<!-- 文生图 -->
<CustomTabPane <CustomTabPane
v-for="category in jimengStore.categories" v-for="category in jimengStore.categories"
:key="category.key" :key="category.key"
@@ -32,12 +31,17 @@
<span>{{ category.name }}</span> <span>{{ category.name }}</span>
</template> </template>
<!-- 生成模式切换 --> <!-- 功能开关 -->
<div class="jimeng-create__mode-section"> <div
class="jimeng-create__mode-section"
v-if="category.key === 'image_generation' || category.key === 'video_generation'"
>
<div class="jimeng-create__mode-section-content"> <div class="jimeng-create__mode-section-content">
<div> <div>
<span class="jimeng-create__mode-section-title">生成模式</span> <span class="jimeng-create__mode-section-title">生成模式</span>
<p class="jimeng-create__mode-section-description">图生图人像写真</p> <p class="jimeng-create__mode-section-description">
{{ category.key === 'image_generation' ? '图生图人像写真' : '图生视频' }}
</p>
</div> </div>
<el-switch <el-switch
v-model="jimengStore.useImageInput" v-model="jimengStore.useImageInput"
@@ -47,44 +51,55 @@
</div> </div>
</div> </div>
<div class="space-y-6"> <!-- 参数容器 -->
<!-- 提示词输入 --> <div class="jimeng-create__params-container">
<div class="jimeng-create__form-section"> <!-- 文生图 -->
<label class="jimeng-create__form-section-label">提示词</label> <div
<textarea v-if="jimengStore.activeFunction === 'text_to_image'"
v-model="jimengStore.currentPrompt" class="jimeng-create__function-panel"
placeholder="请输入图片描述，越详细越好" >
class="jimeng-create__form-section-textarea" <div class="jimeng-create__param-line">
rows="4" <span class="jimeng-create__param-label">提示词：</span>
maxlength="2000"
/>
<div class="jimeng-create__form-section-counter">
<span>{{ jimengStore.currentPrompt.length }}/2000</span>
</div> </div>
</div> <div class="jimeng-create__param-line">
<textarea
<!-- 图片尺寸 --> v-model="jimengStore.currentPrompt"
<CustomSelect placeholder="请输入图片描述，越详细越好"
v-model="jimengStore.textToImageParams.size" class="jimeng-create__form-section-textarea"
:options=" rows="4"
jimengStore.imageSizeOptions.map((opt) => ({ maxlength="2000"
label: opt.label, />
value: opt.value, <div class="jimeng-create__form-section-counter">
})) <span>{{ jimengStore.currentPrompt.length }}/2000</span>
"
label="图片尺寸"
title="选择尺寸"
/>
<!-- 创意度 -->
<div class="jimeng-create__form-section">
<div class="jimeng-create__slider-section">
<div class="jimeng-create__slider-section-header">
<label>创意度</label>
<el-tooltip content="创意度越高，影响文本描述的程度越高" placement="top">
<i class="iconfont icon-info"></i>
</el-tooltip>
</div> </div>
</div>
<div class="jimeng-create__param-line">
<span class="jimeng-create__param-label">图片尺寸：</span>
</div>
<div class="jimeng-create__param-line">
<CustomSelect
v-model="jimengStore.textToImageParams.size"
:options="
jimengStore.imageSizeOptions.map((opt) => ({
label: opt.label,
value: opt.value,
}))
"
label="图片尺寸"
title="选择尺寸"
/>
</div>
<div class="jimeng-create__param-line">
<span class="jimeng-create__param-label">
创意度
<el-tooltip content="创意度越高，影响文本描述的程度越高" placement="top">
<i class="iconfont icon-info cursor-pointer ml-1"></i>
</el-tooltip>
</span>
</div>
<div class="jimeng-create__param-line">
<el-slider <el-slider
v-model="jimengStore.textToImageParams.scale" v-model="jimengStore.textToImageParams.scale"
:min="1" :min="1"
@@ -92,38 +107,24 @@
:step="0.5" :step="0.5"
/> />
</div> </div>
</div>
<!-- 智能优化提示词 --> <div class="jimeng-create__param-line">
<div class="jimeng-create__form-section"> <div class="jimeng-create__switch-section">
<div class="jimeng-create__switch-section"> <span class="jimeng-create__param-label">智能优化提示词</span>
<span>智能优化提示词</span> <el-switch v-model="jimengStore.textToImageParams.use_pre_llm" size="default" />
<el-switch v-model="jimengStore.textToImageParams.use_pre_llm" size="default" />
</div>
</div>
</div>
<!-- 图生图参数 -->
<template v-if="jimengStore.activeFunction === 'image_to_image'">
<!-- 生成模式切换 -->
<div class="jimeng-create__mode-section">
<div class="jimeng-create__mode-section-content">
<div>
<span class="jimeng-create__mode-section-title">生成模式</span>
<p class="jimeng-create__mode-section-description">图生图人像写真</p>
</div> </div>
<el-switch
v-model="jimengStore.useImageInput"
@change="jimengStore.switchInputMode"
size="default"
/>
</div> </div>
</div> </div>
<div class="space-y-6"> <!-- 图生图 -->
<!-- 上传图片 --> <div
<div class="jimeng-create__form-section"> v-if="jimengStore.activeFunction === 'image_to_image'"
<label class="jimeng-create__form-section-label">上传图片</label> class="jimeng-create__function-panel"
>
<div class="jimeng-create__param-line">
<span class="jimeng-create__param-label">上传图片：</span>
</div>
<div class="jimeng-create__param-line">
<div class="jimeng-create__upload"> <div class="jimeng-create__upload">
<input <input
ref="imageToImageInput" ref="imageToImageInput"
@@ -171,9 +172,10 @@
</div> </div>
</div> </div>
<!-- 提示词输入 --> <div class="jimeng-create__param-line">
<div class="jimeng-create__form-section"> <span class="jimeng-create__param-label">提示词：</span>
<label class="jimeng-create__form-section-label">提示词</label> </div>
<div class="jimeng-create__param-line">
<textarea <textarea
v-model="jimengStore.currentPrompt" v-model="jimengStore.currentPrompt"
placeholder="描述你想要的图片效果" placeholder="描述你想要的图片效果"
@@ -186,31 +188,33 @@
</div> </div>
</div> </div>
<!-- 图片尺寸 --> <div class="jimeng-create__param-line">
<CustomSelect <span class="jimeng-create__param-label">图片尺寸：</span>
v-model="jimengStore.imageToImageParams.size" </div>
:options=" <div class="jimeng-create__param-line">
jimengStore.imageSizeOptions.map((opt) => ({ <CustomSelect
label: opt.label, v-model="jimengStore.imageToImageParams.size"
value: opt.value, :options="
})) jimengStore.imageSizeOptions.map((opt) => ({
" label: opt.label,
label="图片尺寸" value: opt.value,
title="选择尺寸" }))
/> "
label="图片尺寸"
title="选择尺寸"
/>
</div>
</div> </div>
</template>
<!-- 图像编辑参数 --> <!-- 图像编辑 -->
<template <div
v-if=" v-if="jimengStore.activeFunction === 'image_edit'"
category.key === 'image_generation' && jimengStore.activeFunction === 'image_edit' class="jimeng-create__function-panel"
" >
> <div class="jimeng-create__param-line">
<div class="space-y-6"> <span class="jimeng-create__param-label">上传图片：</span>
<!-- 上传图片 --> </div>
<div class="jimeng-create__form-section"> <div class="jimeng-create__param-line">
<label class="jimeng-create__form-section-label">上传图片</label>
<div class="jimeng-create__upload"> <div class="jimeng-create__upload">
<input <input
ref="imageEditInput" ref="imageEditInput"
@@ -258,9 +262,10 @@
</div> </div>
</div> </div>
<!-- 编辑提示词 --> <div class="jimeng-create__param-line">
<div class="jimeng-create__form-section"> <span class="jimeng-create__param-label">编辑提示词：</span>
<label class="jimeng-create__form-section-label">编辑提示词</label> </div>
<div class="jimeng-create__param-line">
<textarea <textarea
v-model="jimengStore.currentPrompt" v-model="jimengStore.currentPrompt"
placeholder="描述你想要的编辑效果" placeholder="描述你想要的编辑效果"
@@ -273,32 +278,28 @@
</div> </div>
</div> </div>
<!-- 编辑强度 --> <div class="jimeng-create__param-line">
<div class="jimeng-create__form-section"> <span class="jimeng-create__param-label">编辑强度：</span>
<div class="jimeng-create__slider-section"> </div>
<label>编辑强度</label> <div class="jimeng-create__param-line">
<el-slider <el-slider
v-model="jimengStore.imageEditParams.scale" v-model="jimengStore.imageEditParams.scale"
:min="0" :min="0"
:max="1" :max="1"
:step="0.1" :step="0.1"
/> />
</div>
</div> </div>
</div> </div>
</template>
<!-- 图像特效参数 --> <!-- 图像特效 -->
<template <div
v-if=" v-if="jimengStore.activeFunction === 'image_effects'"
category.key === 'image_generation' && class="jimeng-create__function-panel"
jimengStore.activeFunction === 'image_effects' >
" <div class="jimeng-create__param-line">
> <span class="jimeng-create__param-label">上传图片：</span>
<div class="space-y-6"> </div>
<!-- 上传图片 --> <div class="jimeng-create__param-line">
<div class="jimeng-create__form-section">
<label class="jimeng-create__form-section-label">上传图片</label>
<div class="jimeng-create__upload"> <div class="jimeng-create__upload">
<input <input
ref="imageEffectsInput" ref="imageEffectsInput"
@@ -346,60 +347,50 @@
</div> </div>
</div> </div>
<!-- 特效模板 --> <div class="jimeng-create__param-line">
<CustomSelect <span class="jimeng-create__param-label">特效模板：</span>
v-model="jimengStore.imageEffectsParams.template_id" </div>
:options=" <div class="jimeng-create__param-line">
jimengStore.imageEffectsTemplateOptions.map((opt) => ({ <CustomSelect
label: opt.label, v-model="jimengStore.imageEffectsParams.template_id"
value: opt.value, :options="
})) jimengStore.imageEffectsTemplateOptions.map((opt) => ({
" label: opt.label,
label="特效模板" value: opt.value,
title="选择特效模板" }))
/> "
label="特效模板"
title="选择特效模板"
/>
</div>
<!-- 输出尺寸 --> <div class="jimeng-create__param-line">
<CustomSelect <span class="jimeng-create__param-label">输出尺寸：</span>
v-model="jimengStore.imageEffectsParams.size" </div>
:options=" <div class="jimeng-create__param-line">
jimengStore.imageSizeOptions.map((opt) => ({ <CustomSelect
label: opt.label, v-model="jimengStore.imageEffectsParams.size"
value: opt.value, :options="
})) jimengStore.imageSizeOptions.map((opt) => ({
" label: opt.label,
label="输出尺寸" value: opt.value,
title="选择尺寸" }))
/> "
</div> label="输出尺寸"
</template> title="选择尺寸"
<!-- 文生视频参数 -->
<template
v-if="
category.key === 'video_generation' &&
jimengStore.activeFunction === 'text_to_video'
"
>
<!-- 生成模式切换 -->
<div class="jimeng-create__mode-section">
<div class="jimeng-create__mode-section-content">
<div>
<span class="jimeng-create__mode-section-title">生成模式</span>
<p class="jimeng-create__mode-section-description">图生视频</p>
</div>
<el-switch
v-model="jimengStore.useImageInput"
@change="jimengStore.switchInputMode"
size="default"
/> />
</div> </div>
</div> </div>
<div class="space-y-6"> <!-- 文生视频 -->
<!-- 提示词输入 --> <div
<div class="jimeng-create__form-section"> v-if="jimengStore.activeFunction === 'text_to_video'"
<label class="jimeng-create__form-section-label">提示词</label> class="jimeng-create__function-panel"
>
<div class="jimeng-create__param-line">
<span class="jimeng-create__param-label">提示词：</span>
</div>
<div class="jimeng-create__param-line">
<textarea <textarea
v-model="jimengStore.currentPrompt" v-model="jimengStore.currentPrompt"
placeholder="描述你想要的视频内容" placeholder="描述你想要的视频内容"
@@ -412,47 +403,33 @@
</div> </div>
</div> </div>
<!-- 视频比例 --> <div class="jimeng-create__param-line">
<CustomSelect <span class="jimeng-create__param-label">视频比例：</span>
v-model="jimengStore.textToVideoParams.aspect_ratio" </div>
:options=" <div class="jimeng-create__param-line">
jimengStore.videoAspectRatioOptions.map((opt) => ({ <CustomSelect
label: opt.label, v-model="jimengStore.textToVideoParams.aspect_ratio"
value: opt.value, :options="
})) jimengStore.videoAspectRatioOptions.map((opt) => ({
" label: opt.label,
label="视频比例" value: opt.value,
title="选择比例" }))
/> "
</div> label="视频比例"
</template> title="选择比例"
<!-- 图生视频参数 -->
<template
v-if="
category.key === 'video_generation' &&
jimengStore.activeFunction === 'image_to_video'
"
>
<!-- 生成模式切换 -->
<div class="jimeng-create__mode-section">
<div class="jimeng-create__mode-section-content">
<div>
<span class="jimeng-create__mode-section-title">生成模式</span>
<p class="jimeng-create__mode-section-description">图生视频</p>
</div>
<el-switch
v-model="jimengStore.useImageInput"
@change="jimengStore.switchInputMode"
size="default"
/> />
</div> </div>
</div> </div>
<div class="space-y-6"> <!-- 图生视频 -->
<!-- 上传图片 --> <div
<div class="jimeng-create__form-section"> v-if="jimengStore.activeFunction === 'image_to_video'"
<label class="jimeng-create__form-section-label">上传图片（最多2张）</label> class="jimeng-create__function-panel"
>
<div class="jimeng-create__param-line">
<span class="jimeng-create__param-label">上传图片：</span>
</div>
<div class="jimeng-create__param-line">
<div class="jimeng-create__upload"> <div class="jimeng-create__upload">
<input <input
ref="imageToVideoInput" ref="imageToVideoInput"
@@ -505,9 +482,10 @@
</div> </div>
</div> </div>
<!-- 提示词输入 --> <div class="jimeng-create__param-line">
<div class="jimeng-create__form-section"> <span class="jimeng-create__param-label">提示词：</span>
<label class="jimeng-create__form-section-label">提示词</label> </div>
<div class="jimeng-create__param-line">
<textarea <textarea
v-model="jimengStore.currentPrompt" v-model="jimengStore.currentPrompt"
placeholder="描述你想要的视频效果" placeholder="描述你想要的视频效果"
@@ -520,33 +498,39 @@
</div> </div>
</div> </div>
<!-- 视频比例 --> <div class="jimeng-create__param-line">
<CustomSelect <span class="jimeng-create__param-label">视频比例：</span>
v-model="jimengStore.imageToVideoParams.aspect_ratio" </div>
:options=" <div class="jimeng-create__param-line">
jimengStore.videoAspectRatioOptions.map((opt) => ({ <CustomSelect
label: opt.label, v-model="jimengStore.imageToVideoParams.aspect_ratio"
value: opt.value, :options="
})) jimengStore.videoAspectRatioOptions.map((opt) => ({
" label: opt.label,
label="视频比例" value: opt.value,
title="选择比例" }))
/> "
label="视频比例"
title="选择比例"
/>
</div>
</div> </div>
</template>
<!-- 提交按钮 -->
<div class="jimeng-create__submit-btn">
<button @click="jimengStore.submitTask" :disabled="jimengStore.submitting">
<i v-if="jimengStore.submitting" class="iconfont icon-loading animate-spin"></i>
<span>{{
jimengStore.submitting
? '创作中...'
: `立即生成 (${jimengStore.currentPowerCost}算力)`
}}</span>
</button>
</div>
</div>
</CustomTabPane> </CustomTabPane>
</CustomTabs> </CustomTabs>
</div> </div>
<!-- 生成按钮 -->
<div class="jimeng-create__submit-btn">
<button @click="jimengStore.submitTask" :disabled="jimengStore.submitting">
<i v-if="jimengStore.submitting" class="iconfont icon-loading animate-spin"></i>
<span>{{
jimengStore.submitting ? '创作中...' : `立即生成 (${jimengStore.currentPowerCost}算力)`
}}</span>
</button>
</div>
</div> </div>
<!-- 作品列表 --> <!-- 作品列表 -->