xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2026-05-09 11:14:57 +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

44
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;
@@ -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;

258
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,10 +51,17 @@
</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
v-if="jimengStore.activeFunction === 'text_to_image'"
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="请输入图片描述，越详细越好"
@@ -63,7 +74,10 @@
</div> </div>
</div> </div>
<!-- 图片尺寸 --> <div class="jimeng-create__param-line">
<span class="jimeng-create__param-label">图片尺寸：</span>
</div>
<div class="jimeng-create__param-line">
<CustomSelect <CustomSelect
v-model="jimengStore.textToImageParams.size" v-model="jimengStore.textToImageParams.size"
:options=" :options="
@@ -75,16 +89,17 @@
label="图片尺寸" label="图片尺寸"
title="选择尺寸" 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 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>智能优化提示词</span> <span class="jimeng-create__param-label">智能优化提示词</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> </div>
</div> </div>
<!-- 图生图参数 --> <!-- 图生图 -->
<template v-if="jimengStore.activeFunction === 'image_to_image'"> <div
<!-- 生成模式切换 --> v-if="jimengStore.activeFunction === 'image_to_image'"
<div class="jimeng-create__mode-section"> class="jimeng-create__function-panel"
<div class="jimeng-create__mode-section-content"> >
<div> <div class="jimeng-create__param-line">
<span class="jimeng-create__mode-section-title">生成模式</span> <span class="jimeng-create__param-label">上传图片：</span>
<p class="jimeng-create__mode-section-description">图生图人像写真</p>
</div> </div>
<el-switch <div class="jimeng-create__param-line">
v-model="jimengStore.useImageInput"
@change="jimengStore.switchInputMode"
size="default"
/>
</div>
</div>
<div class="space-y-6">
<!-- 上传图片 -->
<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="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,7 +188,10 @@
</div> </div>
</div> </div>
<!-- 图片尺寸 --> <div class="jimeng-create__param-line">
<span class="jimeng-create__param-label">图片尺寸：</span>
</div>
<div class="jimeng-create__param-line">
<CustomSelect <CustomSelect
v-model="jimengStore.imageToImageParams.size" v-model="jimengStore.imageToImageParams.size"
:options=" :options="
@@ -199,18 +204,17 @@
title="选择尺寸" title="选择尺寸"
/> />
</div> </div>
</template> </div>
<!-- 图像编辑参数 --> <!-- 图像编辑 -->
<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="space-y-6"> <div class="jimeng-create__param-line">
<!-- 上传图片 --> <span class="jimeng-create__param-label">上传图片：</span>
<div class="jimeng-create__form-section"> </div>
<label class="jimeng-create__form-section-label">上传图片</label> <div class="jimeng-create__param-line">
<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,10 +278,10 @@
</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"
@@ -285,20 +290,16 @@
/> />
</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="space-y-6"> <div class="jimeng-create__param-line">
<!-- 上传图片 --> <span class="jimeng-create__param-label">上传图片：</span>
<div class="jimeng-create__form-section"> </div>
<label class="jimeng-create__form-section-label">上传图片</label> <div class="jimeng-create__param-line">
<div class="jimeng-create__upload"> <div class="jimeng-create__upload">
<input <input
ref="imageEffectsInput" ref="imageEffectsInput"
@@ -346,7 +347,10 @@
</div> </div>
</div> </div>
<!-- 特效模板 --> <div class="jimeng-create__param-line">
<span class="jimeng-create__param-label">特效模板：</span>
</div>
<div class="jimeng-create__param-line">
<CustomSelect <CustomSelect
v-model="jimengStore.imageEffectsParams.template_id" v-model="jimengStore.imageEffectsParams.template_id"
:options=" :options="
@@ -358,8 +362,12 @@
label="特效模板" label="特效模板"
title="选择特效模板" title="选择特效模板"
/> />
</div>
<!-- 输出尺寸 --> <div class="jimeng-create__param-line">
<span class="jimeng-create__param-label">输出尺寸：</span>
</div>
<div class="jimeng-create__param-line">
<CustomSelect <CustomSelect
v-model="jimengStore.imageEffectsParams.size" v-model="jimengStore.imageEffectsParams.size"
:options=" :options="
@@ -372,34 +380,17 @@
title="选择尺寸" title="选择尺寸"
/> />
</div> </div>
</template> </div>
<!-- 文生视频参数 --> <!-- 文生视频 -->
<template <div
v-if=" v-if="jimengStore.activeFunction === 'text_to_video'"
category.key === 'video_generation' && class="jimeng-create__function-panel"
jimengStore.activeFunction === 'text_to_video'
"
> >
<!-- 生成模式切换 --> <div class="jimeng-create__param-line">
<div class="jimeng-create__mode-section"> <span class="jimeng-create__param-label">提示词：</span>
<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 <div class="jimeng-create__param-line">
v-model="jimengStore.useImageInput"
@change="jimengStore.switchInputMode"
size="default"
/>
</div>
</div>
<div class="space-y-6">
<!-- 提示词输入 -->
<div class="jimeng-create__form-section">
<label class="jimeng-create__form-section-label">提示词</label>
<textarea <textarea
v-model="jimengStore.currentPrompt" v-model="jimengStore.currentPrompt"
placeholder="描述你想要的视频内容" placeholder="描述你想要的视频内容"
@@ -412,7 +403,10 @@
</div> </div>
</div> </div>
<!-- 视频比例 --> <div class="jimeng-create__param-line">
<span class="jimeng-create__param-label">视频比例：</span>
</div>
<div class="jimeng-create__param-line">
<CustomSelect <CustomSelect
v-model="jimengStore.textToVideoParams.aspect_ratio" v-model="jimengStore.textToVideoParams.aspect_ratio"
:options=" :options="
@@ -425,34 +419,17 @@
title="选择比例" title="选择比例"
/> />
</div> </div>
</template> </div>
<!-- 图生视频参数 --> <!-- 图生视频 -->
<template <div
v-if=" v-if="jimengStore.activeFunction === 'image_to_video'"
category.key === 'video_generation' && class="jimeng-create__function-panel"
jimengStore.activeFunction === 'image_to_video'
"
> >
<!-- 生成模式切换 --> <div class="jimeng-create__param-line">
<div class="jimeng-create__mode-section"> <span class="jimeng-create__param-label">上传图片：</span>
<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 <div class="jimeng-create__param-line">
v-model="jimengStore.useImageInput"
@change="jimengStore.switchInputMode"
size="default"
/>
</div>
</div>
<div class="space-y-6">
<!-- 上传图片 -->
<div class="jimeng-create__form-section">
<label class="jimeng-create__form-section-label">上传图片（最多2张）</label>
<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,7 +498,10 @@
</div> </div>
</div> </div>
<!-- 视频比例 --> <div class="jimeng-create__param-line">
<span class="jimeng-create__param-label">视频比例：</span>
</div>
<div class="jimeng-create__param-line">
<CustomSelect <CustomSelect
v-model="jimengStore.imageToVideoParams.aspect_ratio" v-model="jimengStore.imageToVideoParams.aspect_ratio"
:options=" :options="
@@ -533,21 +514,24 @@
title="选择比例" title="选择比例"
/> />
</div> </div>
</template>
</CustomTabPane>
</CustomTabs>
</div> </div>
<!-- 生成按钮 --> <!-- 提交按钮 -->
<div class="jimeng-create__submit-btn"> <div class="jimeng-create__submit-btn">
<button @click="jimengStore.submitTask" :disabled="jimengStore.submitting"> <button @click="jimengStore.submitTask" :disabled="jimengStore.submitting">
<i v-if="jimengStore.submitting" class="iconfont icon-loading animate-spin"></i> <i v-if="jimengStore.submitting" class="iconfont icon-loading animate-spin"></i>
<span>{{ <span>{{
jimengStore.submitting ? '创作中...' : `立即生成 (${jimengStore.currentPowerCost}算力)` jimengStore.submitting
? '创作中...'
: `立即生成 (${jimengStore.currentPowerCost}算力)`
}}</span> }}</span>
</button> </button>
</div> </div>
</div> </div>
</CustomTabPane>
</CustomTabs>
</div>
</div>
<!-- 作品列表 --> <!-- 作品列表 -->
<div class="jimeng-create__works"> <div class="jimeng-create__works">