xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-12-01 22:06:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

keling style changed

Browse Source
This commit is contained in:
lqins
2025-02-22 22:25:32 +08:00
parent 887fdb6679
commit 98d4d58393
4 changed files with 1058 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

587
web/src/assets/css/image-keling.styl Normal file
View File

@@ -0,0 +1,587 @@
.page-keling {
display: flex;
min-height: 100vh;
.grid-content {
// background-color #383838
background: var(--card-bg);
border-radius: 8px;
padding: 8px 14px;
display: flex;
cursor: pointer;
margin-bottom: 10px;
// border 1px solid #383838
border: 1px solid var(--chat-bg);
&:hover {
border: 1px solid var(--theme-border-hover);
}
.icon {
width: 20px;
height: 20px;
margin-bottom: 5px;
}
.text {
margin-left: 5px;
margin-top: 2px;
}
}
.param-line.pt {
padding-top: 5px;
padding-bottom: 5px;
}
.grid-content.active {
// color #47fff1
// background-color #585858
border: 1px solid var(--theme-border-hover);
}
.h-20 {
height: 4rem !important;
}
.scrollbar-type-nav {
display: flex;
align-items: center;
padding: 2px;
background-color: var(--tab-title-bg);
width: fit-content;
border: 1px solid rgba(79, 89, 102, 0.078);
border-radius: 20px;
margin: 0 auto;
// background: var(--chat-bg);
// width 100%
li {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 5px 8px;
height: 26px;
border-radius: 4px;
// border 1px solid rgb(80,80,80)
padding: 2px 12px;
// background rgba(60,60,60 0.9)
color: var(--theme-text-tertiary);
font-weight: bold;
font-size: 14px;
cursor: pointer;
.image {
width: 22px;
height: 22px;
overflow: hidden;
margin-right: 5px;
border-radius: 50%;
}
span {
color: var(--tab-title-color);
}
.el-icon {
fill: var(--tab-title-color);
color: var(--tab-title-color);
}
&.active {
background: #fff;
color: var(--el-color-primary);
border-radius: 20px;
span {
color: var(--el-color-primary);
}
.el-icon {
fill: var(--el-color-primary);
color: var(--el-color-primary) !important;
}
}
}
}
.main-content {
padding-right: 1.5rem;
padding-left: 1.5rem;
padding-bottom: 1rem;
flex: 1;
background: var(--chat-bg);
// width: 100%;
// padding 0 10px 10px 10px
color: var(--text-theme-color);
overflow-x: hidden;
}
.camera-control {
padding: 10px;
border-radius: 4px;
background: var(--card-bg);
:deep(.el-form-item:last-child) {
margin-bottom: 0 !important;
}
}
.title-tabs {
:deep(.el-tabs__item.is-active) {
color: var(--theme-textcolor-normal);
font-size: 18px;
}
:deep(.el-tabs__item) {
color: var(--text-theme-color);
font-size: 18px;
}
}
.el-tabs {
--el-tabs-header-height: 55px;
}
.el-tabs__item {
color: var(--text-theme-color);
font-size: 18px;
}
.el-tabs__item.is-active, .title-tabs .el-tabs__item.is-active {
}
.title-tabs .el-tabs__active-bar {
background-color: var(--theme-textcolor-normal);
}
.el-textarea {
--el-input-focus-border-color: var(--el-color-primary);
}
.el-textarea__inner {
background: transparent;
color: var(--text-theme-color);
}
.el-input__wrapper {
background: transparent;
padding: 5px;
}
.text {
margin-bottom: 10px;
color: #6b778c;
font-size: 15px;
}
.param-line.pt {
padding-top: 5px;
padding-bottom: 5px;
}
.form-item-inner {
display: flex;
align-items: center;
.el-icon {
margin-left: 10px;
}
}
.el-form-item__label {
color: var(--text-theme-color);
}
// 图片上传样式
.img-inline {
display: flex;
gap: 20px;
.img-uploader {
text-align: center;
:deep(.el-upload) {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 120px;
height: 120px;
line-height: 120px;
transition: var(--el-transition-duration-fast);
margin-bottom: 20px;
&:hover {
border-color: var(--el-color-primary);
}
.el-icon.uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 120px;
text-align: center;
}
}
}
.img-list-box {
display: flex;
.img-item {
width: 120px;
position: relative;
margin-right: 10px;
.el-image {
width: 120px;
height: 120px;
border-radius: 5px;
}
.el-button {
position: absolute;
right: 5px;
top: 5px;
width: 20px;
height: 20px;
}
}
}
}
.el-row.text-info {
width: 100%;
padding: 10px 0;
.el-tag {
margin-right: 10px;
}
}
// 提交按钮
.submit-btn {
display: flex;
margin: 20px 0;
.el-button {
width: 200px;
}
}
.job-list-box {
// 任务列表
@import 'running-job-list.styl';
.finish-job-list {
#waterfall {
display: flex;
justify-content: center;
padding-top: 20px;
flex-flow: column;
.waterfall-item {
overflow: visible;
.job-item {
width: 100%;
height: 100%;
border: 1px solid #666666;
padding: 6px;
border-radius: 6px;
// position relative
.el-image {
overflow: auto;
}
.opt {
padding-top: 5px;
.opt-line {
margin: 6px 0;
ul {
display: flex;
flex-flow: row;
li {
margin-right: 6px;
a {
padding: 3px 0;
width: 40px;
text-align: center;
border-radius: 5px;
display: block;
cursor: pointer;
background-color: #4E5058;
color: #fff;
&:hover {
background-color: #6D6F78;
}
}
}
.show-prompt {
font-size: 20px;
cursor: pointer;
}
}
}
}
.remove {
display: none;
position: absolute;
right: 10px;
top: 10px;
}
&:hover {
.remove {
display: block;
}
}
}
}
}
}
.el-image {
width: 100%;
height: 100%;
overflow: visible;
.el-image-viewer__wrapper {
img {
width: auto;
height: auto;
}
}
.image-slot {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
min-height: 220px;
color: var(--text-theme-color);
overflow: hidden;
.err-msg-container {
overflow: hidden;
word-break: break-all;
padding: 15px;
.title {
font-size: 20px;
text-align: center;
font-weight: bold;
color: #f56c6c;
margin-bottom: 30px;
}
.opt {
display: flex;
justify-content: center;
}
}
.iconfont {
font-size: 50px;
margin-bottom: 10px;
}
}
}
.el-image.upscale {
img {
// height 310px
}
.image-slot {
min-height: 310px;
}
.el-image-viewer__wrapper {
img {
width: auto;
height: auto;
}
}
}
}
.inner {
display: flex;
width: 100%;
.mj-box {
margin: 10px;
// background-color #262626
// border 1px solid #454545
// height: calc(100vh - 50px)
// overflow: scroll
min-width: 300px;
max-width: 300px;
padding: 10px;
border-radius: 10px;
color: var(--text-theme-color);
font-size: 14px;
overflow: auto;
h2 {
font-weight: bold;
font-size: 20px;
text-align: center;
color: var(--theme-textcolor-normal);
}
// 隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.mj-params {
margin-top: 10px;
overflow: auto;
.param-line {
padding: 0 10px;
.el-icon {
position: relative;
}
.model {
background: var(--card-bg);
// border 1px solid #454545
border-radius: 8px;
padding: 5px;
margin-bottom: 10px;
display: flex;
flex-flow: column;
align-items: center;
cursor: pointer;
border: 1px solid var(--chat-bg);
&:hover {
border: 1px solid var(--theme-border-hover);
}
.el-image {
height: 40px;
width: 100%;
}
.text {
margin-top: 4px;
font-size: 12px;
}
}
.model.active {
// color #47fff1
// background-color #585858
border: 1px solid var(--theme-border-hover);
}
.form-item-inner {
display: flex;
align-items: center;
.el-select {
--el-select-input-focus-border-color: var(--el-color-primary);
--el-input-focus-border-color: var(--el-color-primary);
}
.el-input__wrapper {
background: var(--chat-bg);
}
.el-input__inner {
color: var(--text-theme-color);
}
.el-icon {
margin-left: 10px;
}
}
.img-uploader {
.el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 100%;
transition: var(--el-transition-duration-fast);
&:hover {
border-color: var(--el-color-primary);
}
.el-icon.uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 120px;
text-align: center;
}
}
}
}
.param-line.pt {
display: flex;
align-items: center;
padding-top: 5px;
padding-bottom: 5px;
}
}
}
.el-form {
.el-form-item__label {
color: var(--text-theme-color);
}
.el-input, .el-slider {
width: 180px;
}
.uploader-icon {
font-size: 24px;
position: relative;
top: 3px;
}
}
.no-more-data {
text-align: center;
padding: 30px;
}
.generate-btn {
.iconfont {
margin-right: 5px;
}
}
}
}
.mj-list-item-prompt {
.el-icon {
margin-left: 10px;
cursor: pointer;
position: relative;
}
}

2
web/src/assets/css/theme-dark.styl
View File

@@ -45,6 +45,8 @@
--chat-content-bg:rgba(86, 86, 95, .2);
--chat-user-content-bg: #762AA4;
--hover-deep-color:#30323c;
--tab-title-bg:#525777;//顶部tab栏背景切换
--tab-title-color:#fff;//顶部tab栏文字切换
//layout
.more-menus li.moreTitle,
.twoTittle .title,

4
web/src/assets/css/theme-light.styl
View File

@@ -39,6 +39,10 @@
--el-bg-color:#fff;
--el-fill-color-blank: #fff;
--el-pagination-button-bg-color: rgba(86,86,95,0.2);
--tab-title-bg:#fff;//顶部tab栏背景切换
--tab-title-color:#595959;//顶部tab栏文字切换
// 操作按钮
--btn-bg: rgba(100, 100, 100, .1);

614
web/src/views/KeLing.vue
View File

@@ -2,21 +2,66 @@
<div class="page-keling">
<div class="inner custom-scroll">
<!-- 左侧参数设置面板 -->
<div class="param-panel">
<el-scrollbar max-height="100vh">
<div class="mj-box">
<h2>视频参数设置</h2>
<el-form :model="params" label-width="80px" label-position="left">
<!-- 任务类型选择 -->
<!-- <div class="flex h-20">
<ul class="scrollbar-type-nav">
<li
v-for="item in videoTypes"
:key="item.value"
:class="{ active: params.task_type === item.value }"
@click="tabChange(item.value)"
>
<span style="margin-right: 4px">{{ item.label }} </span>
<el-tooltip :content="item.tip" placement="right">
<el-icon>
<InfoFilled />
</el-icon>
</el-tooltip>
</li>
</ul>
</div> -->
<!-- 画面比例 -->
<div class="param-line">
<el-tabs v-model="params.task_type" @tab-change="tabChange">
<el-tab-pane label="文生视频" name="text2video">
<div class="text">使用文字描述生成视频内容</div>
</el-tab-pane>
<el-tab-pane label="图生视频" name="image2video">
<div class="text">使用参考图片辅助生成视频</div>
</el-tab-pane>
</el-tabs>
<div class="param-line pt">
<span>画面比例：</span>
<el-tooltip content="生成画面的尺寸比例" placement="right">
<el-icon>
<InfoFilled />
</el-icon>
</el-tooltip>
</div>
<!-- <el-select v-model="params.aspect_ratio" placeholder="请选择比例">
<el-option label="16:9 横屏" value="16:9" />
<el-option label="9:16 竖屏" value="9:16" />
<el-option label="1:1 方形" value="1:1" />
</el-select> -->
<div class="param-line pt">
<el-row :gutter="10">
<el-col :span="8" v-for="item in rates" :key="item.value">
<div
class="flex-col items-center"
:class="
item.value === params.aspect_ratio
? 'grid-content active'
: 'grid-content'
"
@click="changeRate(item)"
>
<el-image
class="icon proportion"
:src="item.img"
fit="cover"
></el-image>
<div class="text">{{ item.text }}</div>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- 模型选择 -->
<div class="param-line">
<el-form-item label="模型选择">
@@ -47,17 +92,6 @@
</el-form-item>
</div>
<!-- 画面比例 -->
<div class="param-line">
<el-form-item label="画面比例">
<el-select v-model="params.aspect_ratio" placeholder="请选择比例">
<el-option label="16:9 横屏" value="16:9" />
<el-option label="9:16 竖屏" value="9:16" />
<el-option label="1:1 方形" value="1:1" />
</el-select>
</el-form-item>
</div>
<!-- 创意程度 -->
<div class="param-line">
<el-form-item label="创意程度">
@@ -72,66 +106,127 @@
<!-- 运镜控制 -->
<div class="param-line">
<el-form-item label="运镜控制">
<div class="param-line pt">
<span>运镜控制：</span>
<el-tooltip content="生成画面的运镜效果" placement="right">
<el-icon>
<InfoFilled />
</el-icon>
</el-tooltip>
</div>
<div class="camera-control">
<el-form-item label="水平移动">
<el-slider v-model="params.camera_control.config.horizontal" :min="-10" :max="10" />
<el-slider
v-model="params.camera_control.config.horizontal"
:min="-10"
:max="10"
/>
</el-form-item>
<el-form-item label="垂直移动">
<el-slider v-model="params.camera_control.config.vertical" :min="-10" :max="10" />
<el-slider
v-model="params.camera_control.config.vertical"
:min="-10"
:max="10"
/>
</el-form-item>
<el-form-item label="左右旋转">
<el-slider v-model="params.camera_control.config.pan" :min="-10" :max="10" />
<el-slider
v-model="params.camera_control.config.pan"
:min="-10"
:max="10"
/>
</el-form-item>
<el-form-item label="上下旋转">
<el-slider v-model="params.camera_control.config.tilt" :min="-10" :max="10" />
<el-slider
v-model="params.camera_control.config.tilt"
:min="-10"
:max="10"
/>
</el-form-item>
<el-form-item label="横向翻转">
<el-slider v-model="params.camera_control.config.roll" :min="-10" :max="10" />
<el-slider
v-model="params.camera_control.config.roll"
:min="-10"
:max="10"
/>
</el-form-item>
<el-form-item label="镜头缩放">
<el-slider v-model="params.camera_control.config.zoom" :min="-10" :max="10" />
<el-slider
v-model="params.camera_control.config.zoom"
:min="-10"
:max="10"
/>
</el-form-item>
</div>
</el-form-item>
</div>
</el-form>
</div>
</el-scrollbar>
<!-- 右侧主内容区 -->
<div class="main-content">
<div class="param-line task-list-inner">
<el-tabs
v-model="params.task_type"
@tab-change="tabChange"
class="title-tabs"
>
<el-tab-pane label="文生视频" name="text2video">
<div class="text">使用文字描述想要生成视频的内容</div>
</el-tab-pane>
<el-tab-pane label="图生视频" name="image2video">
<div class="text">
以某张图片为底稿参考来创作视频，生成类似风格或类型视频，支持 PNG
/JPG/JPEG 格式图片；
</div>
</el-tab-pane>
</el-tabs>
</div>
<!-- 生成操作区 -->
<div class="generation-area">
<div v-if="params.task_type === 'text2video'" class="text2video">
<el-input
v-model="params.prompt"
type="textarea"
:rows="4"
placeholder="请输入视频描述..."
:autosize="{ minRows: 4, maxRows: 6 }"
placeholder="请在此输入视频提示词，您也可以点击下面的提示词助手生成视频提示词"
/>
<el-button class="generate-btn" @click="generatePrompt" :loading="isGenerating">
<el-row class="text-info">
<el-button
class="generate-btn"
@click="generatePrompt"
:loading="isGenerating"
size="small"
color="#5865f2"
>
<i class="iconfont icon-chuangzuo"></i>
生成专业提示词
生成专业视频提示词
</el-button>
</el-row>
</div>
<div v-else class="image2video">
<div class="image-upload">
<div class="upload-box">
<h3>起始帧</h3>
<div class="image-upload img-inline">
<div class="upload-box img-uploader">
<h4>起始帧</h4>
<el-upload
class="uploader"
class="uploader img-uploader"
:auto-upload="true"
:show-file-list="false"
:http-request="uploadStartImage"
accept=".jpg,.png,.jpeg"
>
<img v-if="params.image" :src="params.image" class="preview" />
<img
v-if="params.image"
:src="params.image"
class="preview"
/>
<el-icon v-else class="upload-icon"><Plus /></el-icon>
</el-upload>
</div>
<div class="upload-box">
<h3>结束帧</h3>
<div class="upload-box img-uploader">
<h4>结束帧</h4>
<el-upload
class="uploader"
:auto-upload="true"
@@ -139,44 +234,92 @@
:http-request="uploadEndImage"
accept=".jpg,.png,.jpeg"
>
<img v-if="params.image_tail" :src="params.image_tail" class="preview" />
<img
v-if="params.image_tail"
:src="params.image_tail"
class="preview"
/>
<el-icon v-else class="upload-icon"><Plus /></el-icon>
</el-upload>
</div>
</div>
<div class="param-line pt">
<div class="flex-row justify-between items-center">
<div class="flex-row justify-start items-center">
<span>提示词：</span>
<el-tooltip
content="输入你想要的内容，用逗号分割"
placement="right"
>
<el-icon>
<InfoFilled />
</el-icon>
</el-tooltip>
</div>
</div>
</div>
<div class="param-line pt">
<el-input
v-model="params.prompt"
type="textarea"
:rows="3"
placeholder="补充描述文本..."
:autosize="{ minRows: 4, maxRows: 6 }"
placeholder="描述视频画面细节"
/>
</div>
</div>
<!-- 排除内容 -->
<div class="param-line pt">
<div class="flex-row justify-between items-center">
<div class="flex-row justify-start items-center">
<span>不希望出现的内容：（可选）</span>
<el-tooltip
content="不想出现在图片上的元素(例如：树，建筑)"
placement="right"
>
<el-icon>
<InfoFilled />
</el-icon>
</el-tooltip>
</div>
</div>
</div>
<div class="param-line pt">
<el-input
v-model="params.negative_prompt"
type="textarea"
:rows="3"
placeholder="请输入不希望出现的内容..."
:autosize="{ minRows: 4, maxRows: 6 }"
placeholder="请在此输入你不希望出现在视频上的内容"
/>
<!-- 算力显示 -->
<div class="power-info">
<span>消耗算力: {{ powerCost }}</span>
<span>可用算力: {{ availablePower }}</span>
</div>
<!-- 算力显示 -->
<el-row class="text-info">
<el-text type="primary"
>每次生成视频消耗
<el-text type="warning">{{ powerCost }}算力;</el-text> </el-text
>&nbsp;&nbsp;
<el-text type="primary"
>当前可用算力：<el-text type="warning">{{
availablePower
}}</el-text></el-text
>
</el-row>
<!-- 生成按钮 -->
<el-button type="primary" @click="generate" :loading="generating">
立即生成
</el-button>
<div class="submit-btn">
<el-button type="primary" :dark="false" @click="generate" round
>立即生成</el-button
>
</div>
</div>
<!-- 任务列表区域 -->
<div class="task-list">
<h2>任务列表</h2>
<div class="task-list job-list-box">
<h2 class="text-xl param-line pt">任务列表</h2>
<!-- 任务类型筛选 -->
<el-radio-group v-model="taskFilter" @change="fetchTasks">
<el-radio-button label="all">全部</el-radio-button>
<el-radio-button label="text2video">文生视频</el-radio-button>
@@ -187,7 +330,11 @@
<div class="running-tasks" v-if="runningTasks.length > 0">
<h3>运行中</h3>
<div class="task-grid">
<div v-for="task in runningTasks" :key="task.id" class="task-card">
<div
v-for="task in runningTasks"
:key="task.id"
class="task-card"
>
<div class="status">处理中...</div>
<div class="prompt">{{ task.prompt }}</div>
</div>
@@ -198,7 +345,11 @@
<div class="finished-tasks">
<h3>已完成</h3>
<div class="task-grid">
<div v-for="task in finishedTasks" :key="task.id" class="task-card">
<div
v-for="task in finishedTasks"
:key="task.id"
class="task-card"
>
<video
class="preview"
:src="task.video_url"
@@ -239,26 +390,26 @@
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { httpGet, httpPost, httpDownload } from '@/utils/http'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getClientId } from '@/store/cache'
import { showMessageError, showMessageOK } from '@/utils/dialog'
import { ref, reactive, onMounted } from "vue";
import { Plus, InfoFilled } from "@element-plus/icons-vue";
import { httpGet, httpPost, httpDownload } from "@/utils/http";
import { ElMessage, ElMessageBox } from "element-plus";
import { getClientId } from "@/store/cache";
import { showMessageError, showMessageOK } from "@/utils/dialog";
// 参数设置
const params = reactive({
client_id: getClientId(),
task_type: 'text2video',
model: 'default',
prompt: '',
negative_prompt: '',
task_type: "text2video",
model: "default",
prompt: "",
negative_prompt: "",
cfg_scale: 0.7,
mode: 'std',
aspect_ratio: '16:9',
duration: '5',
mode: "std",
aspect_ratio: "16:9",
duration: "5",
camera_control: {
type: 'simple',
type: "simple",
config: {
horizontal: 0,
vertical: 0,
@@ -268,227 +419,252 @@ const params = reactive({
zoom: 0
}
},
image: '',
image_tail: ''
})
image: "",
image_tail: ""
});
const rates = [
{ css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png" },
{
css: "size16-9",
value: "16:9",
text: "16:9",
img: "/images/mj/rate_16_9.png"
},
{
css: "size9-16",
value: "9:16",
text: "9:16",
img: "/images/mj/rate_9_16.png"
}
];
// 切换图片比例
const changeRate = (item) => {
params.aspect_ratio = item.value;
};
// 状态变量
const generating = ref(false)
const isGenerating = ref(false)
const powerCost = ref(10)
const availablePower = ref(100)
const taskFilter = ref('all')
const runningTasks = ref([])
const finishedTasks = ref([])
const total = ref(0)
const pageSize = ref(12)
const currentPage = ref(1)
const previewVisible = ref(false)
const currentVideo = ref('')
const generating = ref(false);
const isGenerating = ref(false);
const powerCost = ref(10);
const availablePower = ref(100);
const taskFilter = ref("all");
const runningTasks = ref([]);
const finishedTasks = ref([]);
const total = ref(0);
const pageSize = ref(12);
const currentPage = ref(1);
const previewVisible = ref(false);
const currentVideo = ref("");
// 方法定义
const tabChange = (tab) => {
params.task_type = tab
const videoTypes = [
{
label: "文生视频",
value: "text2video",
tip: "使用文字描述生成视频内容"
},
{
label: "图生视频",
value: "image2video",
tip: "使用参考图片辅助生成视频"
}
];
const tabChange = (tab) => {
params.task_type = tab;
};
const uploadStartImage = async (file) => {
const formData = new FormData()
formData.append('file', file.file)
const formData = new FormData();
formData.append("file", file.file);
try {
const res = await httpPost('/api/upload', formData)
params.image = res.data.url
ElMessage.success('上传成功')
const res = await httpPost("/api/upload", formData);
params.image = res.data.url;
ElMessage.success("上传成功");
} catch (e) {
showMessageError('上传失败: ' + e.message)
}
showMessageError("上传失败: " + e.message);
}
};
const uploadEndImage = async (file) => {
const formData = new FormData()
formData.append('file', file.file)
const formData = new FormData();
formData.append("file", file.file);
try {
const res = await httpPost('/api/upload', formData)
params.image_tail = res.data.url
ElMessage.success('上传成功')
const res = await httpPost("/api/upload", formData);
params.image_tail = res.data.url;
ElMessage.success("上传成功");
} catch (e) {
showMessageError('上传失败: ' + e.message)
}
showMessageError("上传失败: " + e.message);
}
};
const generatePrompt = async () => {
if (!params.prompt) {
return showMessageError('请输入视频描述')
return showMessageError("请输入视频描述");
}
isGenerating.value = true
isGenerating.value = true;
try {
const res = await httpPost('/api/prompt/video', { prompt: params.prompt })
params.prompt = res.data
const res = await httpPost("/api/prompt/video", { prompt: params.prompt });
params.prompt = res.data;
} catch (e) {
showMessageError('生成失败: ' + e.message)
showMessageError("生成失败: " + e.message);
} finally {
isGenerating.value = false
}
isGenerating.value = false;
}
};
const generate = async () => {
if (!params.prompt) {
return showMessageError('请输入视频描述')
return showMessageError("请输入视频描述");
}
generating.value = true
generating.value = true;
try {
await httpPost('/api/video/keling/create', params)
showMessageOK('任务创建成功')
fetchTasks()
await httpPost("/api/video/keling/create", params);
showMessageOK("任务创建成功");
fetchTasks();
} catch (e) {
showMessageError('创建失败: ' + e.message)
showMessageError("创建失败: " + e.message);
} finally {
generating.value = false
}
generating.value = false;
}
};
const fetchTasks = async () => {
try {
const res = await httpGet('/api/video/list', {
const res = await httpGet("/api/video/list", {
page: currentPage.value,
page_size: pageSize.value,
type: 'keling',
task_type: taskFilter.value === 'all' ? '' : taskFilter.value
})
runningTasks.value = res.data.items.filter(task => task.progress < 100)
finishedTasks.value = res.data.items.filter(task => task.progress === 100)
total.value = res.data.total
type: "keling",
task_type: taskFilter.value === "all" ? "" : taskFilter.value
});
runningTasks.value = res.data.items.filter((task) => task.progress < 100);
finishedTasks.value = res.data.items.filter(
(task) => task.progress === 100
);
total.value = res.data.total;
} catch (e) {
showMessageError('获取任务列表失败: ' + e.message)
}
showMessageError("获取任务列表失败: " + e.message);
}
};
const handlePageChange = (page) => {
currentPage.value = page
fetchTasks()
}
currentPage.value = page;
fetchTasks();
};
const previewVideo = (task) => {
currentVideo.value = task.video_url
previewVisible.value = true
}
currentVideo.value = task.video_url;
previewVisible.value = true;
};
const downloadVideo = async (task) => {
try {
const res = await httpDownload(`/api/download?url=${task.video_url}`)
const blob = new Blob([res.data])
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = `video_${task.id}.mp4`
link.click()
URL.revokeObjectURL(link.href)
const res = await httpDownload(`/api/download?url=${task.video_url}`);
const blob = new Blob([res.data]);
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = `video_${task.id}.mp4`;
link.click();
URL.revokeObjectURL(link.href);
} catch (e) {
showMessageError('下载失败: ' + e.message)
}
showMessageError("下载失败: " + e.message);
}
};
const deleteTask = async (task) => {
try {
await ElMessageBox.confirm('确定要删除该任务吗？')
await httpGet('/api/video/remove', { id: task.id })
showMessageOK('删除成功')
fetchTasks()
await ElMessageBox.confirm("确定要删除该任务吗？");
await httpGet("/api/video/remove", { id: task.id });
showMessageOK("删除成功");
fetchTasks();
} catch (e) {
if (e !== 'cancel') {
showMessageError('删除失败: ' + e.message)
}
if (e !== "cancel") {
showMessageError("删除失败: " + e.message);
}
}
};
// 生命周期钩子
onMounted(() => {
fetchTasks()
})
fetchTasks();
});
</script>
<style lang="stylus" scoped>
.page-keling
display: flex
height: 100vh
@import "@/assets/css/image-keling.styl"
@import "@/assets/css/custom-scroll.styl"
.inner
display: flex
width: 100%
padding: 20px
gap: 20px
.param-panel
width: 300px
background: #fff
padding: 20px
border-radius: 8px
.main-content
flex: 1
background: #fff
padding: 20px
border-radius: 8px
.generation-area
margin-bottom: 30px
// .param-panel
// width: 300px
// padding: 20px
// border-radius: 8px
.image-upload
display: flex
gap: 20px
margin-bottom: 20px
// .main-content
// flex: 1
// background: #fff
// padding: 20px
// border-radius: 8px
.upload-box
flex: 1
// .generation-area
// margin-bottom: 30px
.uploader
border: 1px dashed #d9d9d9
border-radius: 6px
cursor: pointer
position: relative
overflow: hidden
// .image-upload
// display: flex
// gap: 20px
// margin-bottom: 20px
.preview
width: 100%
height: 200px
object-fit: cover
// .upload-box
// flex: 1
.upload-icon
font-size: 28px
color: #8c939d
width: 100%
height: 200px
text-align: center
line-height: 200px
// .uploader
// border: 1px dashed #d9d9d9
// border-radius: 6px
// cursor: pointer
// position: relative
// overflow: hidden
.power-info
margin: 20px 0
display: flex
justify-content: space-between
// .preview
// width: 100%
// height: 200px
// object-fit: cover
.task-list
.task-grid
display: grid
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
gap: 20px
margin: 20px 0
// .upload-icon
// font-size: 28px
// color: #8c939d
// width: 100%
// height: 200px
// text-align: center
// line-height: 200px
.task-card
border: 1px solid #eee
border-radius: 8px
overflow: hidden
// .power-info
// margin: 20px 0
// display: flex
// justify-content: space-between
.preview
width: 100%
height: 200px
object-fit: cover
// .task-list
// .task-grid
// display: grid
// grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
// gap: 20px
// margin: 20px 0
.tools
padding: 10px
display: flex
justify-content: space-around
// .task-card
// border: 1px solid #eee
// border-radius: 8px
// overflow: hidden
.camera-control
padding: 10px
border: 1px solid #eee
border-radius: 4px
// .preview
// width: 100%
// height: 200px
// object-fit: cover
// .tools
// padding: 10px
// display: flex
// justify-content: space-around
</style>