xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-28 11:39:24 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化可灵视频算力配置

Browse Source
This commit is contained in:
RockYang
2025-03-04 16:59:20 +08:00
parent 3958e99e4d
commit 7b9a7475a9
7 changed files with 177 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,19 +21,11 @@
<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)"
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>
<el-image class="icon proportion" :src="item.img" fit="cover"></el-image>
<div class="texts">{{ item.text }}</div>
</div>
</el-col>
@@ -43,9 +35,8 @@
<!-- 模型选择 -->
<div class="param-line">
<el-form-item label="模型选择">
<el-select v-model="params.model" placeholder="请选择模型">
<el-option label="默认模型" value="default" />
<el-option label="动漫风格" value="anime" />
<el-select v-model="params.model" placeholder="请选择模型" @change="updateModelPower">
<el-option v-for="item in models" :key="item.value" :label="item.text" :value="item.value" />
</el-select>
</el-form-item>
</div>
@@ -53,7 +44,7 @@
<!-- 视频时长 -->
<div class="param-line">
<el-form-item label="视频时长">
<el-select v-model="params.duration" placeholder="请选择时长">
<el-select v-model="params.duration" placeholder="请选择时长" @change="updateModelPower">
<el-option label="5秒" value="5" />
<el-option label="10秒" value="10" />
</el-select>
@@ -63,7 +54,7 @@
<!-- 生成模式 -->
<div class="param-line">
<el-form-item label="生成模式">
<el-select v-model="params.mode" placeholder="请选择模式">
<el-select v-model="params.mode" placeholder="请选择模式" @change="updateModelPower">
<el-option label="标准模式" value="std" />
<el-option label="专业模式" value="pro" />
</el-select>
@@ -73,17 +64,12 @@
<!-- 创意程度 -->
<div class="param-line">
<el-form-item label="创意程度">
<el-slider
v-model="params.cfg_scale"
:min="0"
:max="1"
:step="0.1"
/>
<el-slider v-model="params.cfg_scale" :min="0" :max="1" :step="0.1" />
</el-form-item>
</div>
<!-- 运镜控制 -->
<div class="param-line">
<div class="param-line" v-if="showCameraControl">
<div class="param-line pt">
<span>运镜控制：</span>
<el-tooltip content="生成画面的运镜效果" placement="right">
@@ -94,11 +80,8 @@
</div>
<!-- 添加运镜类型选择 -->
<el-form-item label="运镜类型">
<el-select
v-model="params.camera_control.type"
placeholder="请选择运镜类型"
>
<div class="param-line pt">
<el-select v-model="params.camera_control.type" placeholder="请选择运镜类型">
<el-option label="请选择" value="" />
<el-option label="简单运镜" value="simple" />
<el-option label="下移拉远" value="down_back" />
@@ -106,54 +89,27 @@
<el-option label="右旋推进" value="right_turn_forward" />
<el-option label="左旋推进" value="left_turn_forward" />
</el-select>
</el-form-item>
</div>
<!-- 仅在simple模式下显示详细配置 -->
<div
class="camera-control"
v-if="params.camera_control.type === 'simple'"
>
<div class="camera-control mt-2" v-if="params.camera_control.type === 'simple'">
<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>
</div>
@@ -165,19 +121,12 @@
<div class="main-content task-list-inner">
<!-- 任务类型选择 -->
<div class="param-line">
<el-tabs
v-model="params.task_type"
@tab-change="tabChange"
class="title-tabs"
>
<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>
<div class="text">以某张图片为底稿参考来创作视频，生成类似风格或类型视频，支持 PNG /JPG/JPEG 格式图片；</div>
</el-tab-pane>
</el-tabs>
</div>
@@ -186,20 +135,14 @@
<div class="generation-area">
<div v-if="params.task_type === 'text2video'" class="text2video">
<el-input
v-model="params.prompt"
type="textarea"
maxlength="500"
:autosize="{ minRows: 4, maxRows: 6 }"
placeholder="请在此输入视频提示词，您也可以点击下面的提示词助手生成视频提示词"
v-model="params.prompt"
type="textarea"
maxlength="500"
:autosize="{ minRows: 4, maxRows: 6 }"
placeholder="请在此输入视频提示词，您也可以点击下面的提示词助手生成视频提示词"
/>
<el-row class="text-info">
<el-button
class="generate-btn"
@click="generatePrompt"
:loading="isGenerating"
size="small"
color="#5865f2"
>
<el-button class="generate-btn" @click="generatePrompt" :loading="isGenerating" size="small" color="#5865f2">
<i class="iconfont icon-chuangzuo"></i>
生成专业视频提示词
</el-button>
@@ -210,35 +153,15 @@
<div class="image-upload img-inline">
<div class="upload-box img-uploader">
<h4>起始帧</h4>
<el-upload
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"
/>
<el-upload 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" />
<el-icon v-else class="upload-icon"><Plus /></el-icon>
</el-upload>
</div>
<div class="upload-box img-uploader">
<h4>结束帧</h4>
<el-upload
class="uploader"
:auto-upload="true"
:show-file-list="false"
:http-request="uploadEndImage"
accept=".jpg,.png,.jpeg"
>
<img
v-if="params.image_tail"
:src="params.image_tail"
class="preview"
/>
<el-upload class="uploader" :auto-upload="true" :show-file-list="false" :http-request="uploadEndImage" accept=".jpg,.png,.jpeg">
<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>
@@ -247,10 +170,7 @@
<div class="flex-row justify-between items-center">
<div class="flex-row justify-start items-center">
<span>提示词：</span>
<el-tooltip
content="输入你想要的内容，用逗号分割"
placement="right"
>
<el-tooltip content="输入你想要的内容，用逗号分割" placement="right">
<el-icon>
<InfoFilled />
</el-icon>
@@ -259,12 +179,7 @@
</div>
</div>
<div class="param-line pt">
<el-input
v-model="params.prompt"
type="textarea"
:autosize="{ minRows: 4, maxRows: 6 }"
placeholder="描述视频画面细节"
/>
<el-input v-model="params.prompt" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="描述视频画面细节" />
</div>
</div>
@@ -273,10 +188,7 @@
<div class="flex-row justify-between items-center">
<div class="flex-row justify-start items-center">
<span>不希望出现的内容：（可选）</span>
<el-tooltip
content="不想出现在图片上的元素(例如：树，建筑)"
placement="right"
>
<el-tooltip content="不想出现在图片上的元素(例如：树，建筑)" placement="right">
<el-icon>
<InfoFilled />
</el-icon>
@@ -286,31 +198,26 @@
</div>
<div class="param-line pt">
<el-input
v-model="params.negative_prompt"
type="textarea"
:autosize="{ minRows: 4, maxRows: 6 }"
placeholder="请在此输入你不希望出现在视频上的内容"
v-model="params.negative_prompt"
type="textarea"
:autosize="{ minRows: 4, maxRows: 6 }"
placeholder="请在此输入你不希望出现在视频上的内容"
/>
</div>
<!-- 算力显示 -->
<el-row class="text-info">
<el-text type="primary"
>每次生成视频消耗
<el-text type="warning">{{ powerCost }}算力;</el-text> </el-text
>每次生成视频消耗 <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-text type="warning">{{ availablePower }}</el-text></el-text
>
</el-row>
<!-- 生成按钮 -->
<div class="submit-btn">
<el-button type="primary" :dark="false" @click="generate" round
>立即生成</el-button
>
<el-button type="primary" :dark="false" @click="generate" round>立即生成</el-button>
</div>
</div>
@@ -333,67 +240,52 @@
<h2 class="record-title pt">创作记录</h2>
<!-- 已完成的任务 -->
<v3-waterfall
:key="waterfallKey"
:list="finishedTasks"
@scrollReachBottom="fetchTasks"
:gap="20"
:bottomGap="20"
:colWidth="300"
:distanceToScroll="100"
:isLoading="loading"
:isOver="isOver"
class="task-waterfall"
:key="waterfallKey"
:list="finishedTasks"
@scrollReachBottom="fetchTasks"
:gap="20"
:bottomGap="20"
:colWidth="300"
:distanceToScroll="100"
:isLoading="loading"
:isOver="isOver"
class="task-waterfall"
>
<template #default="slotProp">
<div
class="job-item-box"
:class="{
class="job-item-box"
:class="{
processing: slotProp.item.progress < 100,
error: slotProp.item.progress === 101
error: slotProp.item.progress === 101,
}"
>
<video
v-if="slotProp.item.progress === 100"
class="preview"
:src="slotProp.item.video_url"
@click="previewVideo(slotProp.item)"
controls
v-if="slotProp.item.progress === 100"
class="preview"
:src="slotProp.item.video_url"
@click="previewVideo(slotProp.item)"
controls
></video>
<div v-else class="status-overlay">
<div
v-if="slotProp.item.progress === 101"
class="error-status"
>
<div v-if="slotProp.item.progress === 101" class="error-status">
<el-icon><CloseBold /></el-icon>
任务失败
</div>
<div v-else class="processing-status">
<el-progress
:percentage="slotProp.item.progress"
:stroke-width="12"
status="success"
/>
<el-progress :percentage="slotProp.item.progress" :stroke-width="12" status="success" />
</div>
</div>
<div class="tools">
<el-button
v-if="slotProp.item.progress === 100"
@click="downloadVideo(slotProp.item)"
>
<el-button v-if="slotProp.item.progress === 100" @click="downloadVideo(slotProp.item)">
<el-icon><Download /></el-icon>
</el-button>
<el-button type="danger" @click="deleteTask(slotProp.item)">
<el-icon><Delete /></el-icon>
</el-button>
<div class="show-prompt">
<el-popover
placement="left"
title="提示词"
:width="240"
trigger="hover"
>
<el-popover placement="left" title="提示词" :width="240" trigger="hover">
<template #reference>
<el-icon class="chromefilled">
<ChromeFilled />
@@ -403,10 +295,7 @@
<template #default>
<div class="mj-list-item-prompt">
<span>{{ slotProp.item.prompt }}</span>
<el-icon
class="copy-prompt-mj"
:data-clipboard-text="slotProp.item.prompt"
>
<el-icon class="copy-prompt-mj" :data-clipboard-text="slotProp.item.prompt">
<DocumentCopy />
</el-icon>
</div>
@@ -430,12 +319,7 @@
<!-- 视频预览对话框 -->
<el-dialog v-model="previewVisible" title="视频预览" width="80%">
<video
v-if="currentVideo"
:src="currentVideo"
controls
style="width: 100%"
></video>
<video v-if="currentVideo" :src="currentVideo" controls style="width: 100%"></video>
</el-dialog>
</div>
</template>
@@ -443,31 +327,18 @@
<script setup>
import TaskList from "@/components/TaskList.vue";
import { ref, reactive, onMounted, onUnmounted, watch } from "vue";
import {
Plus,
Delete,
InfoFilled,
ChromeFilled,
DocumentCopy,
Download,
CloseBold
} from "@element-plus/icons-vue";
import { Plus, Delete, InfoFilled, ChromeFilled, DocumentCopy, Download, CloseBold } from "@element-plus/icons-vue";
import { httpGet, httpPost, httpDownload } from "@/utils/http";
import { ElMessage, ElMessageBox } from "element-plus";
import { checkSession } from "@/store/cache";
import { checkSession, getSystemInfo } from "@/store/cache";
import {
closeLoading,
showLoading,
showMessageError,
showMessageOK
} from "@/utils/dialog";
import { closeLoading, showLoading, showMessageError, showMessageOK } from "@/utils/dialog";
import { replaceImg } from "@/utils/libs";
// 参数设置
const params = reactive({
task_type: "text2video",
model: "default",
model: "kling-v1-6",
prompt: "",
negative_prompt: "",
cfg_scale: 0.7,
@@ -482,28 +353,42 @@ const params = reactive({
pan: 0,
tilt: 0,
roll: 0,
zoom: 0
}
zoom: 0,
},
},
image: "",
image_tail: ""
image_tail: "",
});
const rates = [
{css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png"},
{ 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"
img: "/images/mj/rate_16_9.png",
},
{
css: "size9-16",
value: "9:16",
text: "9:16",
img: "/images/mj/rate_9_16.png"
}
img: "/images/mj/rate_9_16.png",
},
];
const models = ref([
{
text: "可灵 1.6",
value: "kling-v1-6",
},
{
text: "可灵 1.5",
value: "kling-v1-5",
},
{
text: "可灵 1.0",
value: "kling-v1",
},
]);
// 切换图片比例
const changeRate = (item) => {
@@ -525,6 +410,8 @@ const previewVisible = ref(false);
const currentVideo = ref("");
const isOver = ref(false);
const pullTask = ref(true);
const showCameraControl = ref(false); // 是否显示运镜控制
const keLingPowers = ref({});
// 方法定义
@@ -547,6 +434,12 @@ const uploadStartImage = async (file) => {
}
};
// 动态更新模型消耗的算力
const updateModelPower = () => {
showCameraControl.value = params.model === "kling-v1-5" && params.mode === "pro";
powerCost.value = keLingPowers.value[`${params.model}_${params.mode}_${params.duration}`];
};
const uploadEndImage = async (file) => {
const formData = new FormData();
formData.append("file", file.file);
@@ -565,7 +458,7 @@ const generatePrompt = async () => {
}
isGenerating.value = true;
try {
const res = await httpPost("/api/prompt/video", {prompt: params.prompt});
const res = await httpPost("/api/prompt/video", { prompt: params.prompt });
params.prompt = res.data;
} catch (e) {
showMessageError("生成失败: " + e.message);
@@ -593,8 +486,9 @@ const generate = async () => {
try {
await httpPost("/api/video/keling/create", params);
showMessageOK("任务创建成功");
// 立即获取最新数据
await fetchTasks();
runningTasks.value.push({
progress: 0,
});
// 开启任务轮询
pullTask.value = true;
} catch (e) {
@@ -617,31 +511,24 @@ const fetchTasks = async () => {
page: currentPage.value,
page_size: pageSize.value,
type: "keling",
task_type: taskFilter.value === "all" ? "" : taskFilter.value
task_type: taskFilter.value === "all" ? "" : taskFilter.value,
});
// 精确任务过滤逻辑
const data = res.data || {};
const newRunning = data.items.filter(
(task) => task.progress < 100 && task.progress !== 101
);
runningTasks.value = [...runningTasks.value, ...newRunning];
runningTasks.value = data.items.filter((task) => task.progress < 100 && task.progress !== 101);
// 如果运行中的任务为零，则停止轮询
if (newRunning.length === 0) {
if (runningTasks.value.length === 0) {
pullTask.value = false;
}
const newFinished = data.items.filter((task) => task.progress >= 100);
finishedTasks.value = [...finishedTasks.value, ...newFinished];
finishedTasks.value = data.items.filter((task) => task.progress >= 100);
// // 强制刷新瀑布流
waterfallKey.value = Date.now();
total.value = data.total;
const shouldLoadNextPage =
runningTasks.value.length > 0 ||
(runningTasks.value.length === 0 &&
finishedTasks.value.length < total.value);
const shouldLoadNextPage = runningTasks.value.length > 0 || (runningTasks.value.length === 0 && finishedTasks.value.length < total.value);
if (shouldLoadNextPage) {
currentPage.value++;
@@ -654,7 +541,7 @@ const fetchTasks = async () => {
console.log("[Pagination] isOver:", isOver.value, {
running: runningTasks.value.length,
finished: finishedTasks.value.length,
total: total.value
total: total.value,
});
waterfallKey.value = Date.now();
@@ -694,8 +581,10 @@ const downloadVideo = async (task) => {
const deleteTask = async (task) => {
try {
await ElMessageBox.confirm("确定要删除该任务吗？");
await httpGet("/api/video/remove", {id: task.id});
await httpGet("/api/video/remove", { id: task.id });
showMessageOK("删除成功");
isOver.value = false;
loading.value = false;
await fetchTasks();
} catch (e) {
if (e !== "cancel") {
@@ -707,22 +596,27 @@ const deleteTask = async (task) => {
// 生命周期钩子
onMounted(async () => {
checkSession()
.then(async () => {
isLogin.value = true;
console.log("mounted-isLogin-可以继续", isLogin.value);
.then(async (u) => {
isLogin.value = true;
availablePower.value = u.power;
console.log("mounted-isLogin-可以继续", isLogin.value);
await fetchTasks();
setInterval(() => {
if (pullTask.value) {
fetchTasks();
}
}, 5000)
})
.catch(() => {
});
});
onUnmounted(() => {
await fetchTasks();
setInterval(() => {
if (pullTask.value) {
fetchTasks();
}
}, 5000);
})
.catch(() => {});
// 获取系统配置
getSystemInfo().then((res) => {
keLingPowers.value = res.data.keling_powers;
updateModelPower();
});
});
onUnmounted(() => {});
// 监听任务状态变化
watch([runningTasks, finishedTasks], () => {
if (checkAllCompleted()) {

34
web/src/views/admin/SysConfig.vue
View File

@@ -243,8 +243,24 @@
<el-form-item label="Luma 算力" prop="luma_power">
<el-input v-model.number="system['luma_power']" placeholder="使用 Luma 生成一段视频消耗算力" />
</el-form-item>
<el-form-item label="可灵算力" prop="keling_power">
<el-input v-model.number="system['keling_power']" placeholder="使用快手可灵生成一段视频消耗算力" />
<el-form-item>
<template #label>
<div class="label-title">
可灵算力
<el-tooltip effect="dark" content="可灵每个模型价格不一样，具体请参考：https://api.geekai.pro/models" raw-content placement="right">
<el-icon>
<InfoFilled />
</el-icon>
</el-tooltip>
</div>
</template>
<el-row :gutter="20" v-if="system['keling_powers']">
<el-col :span="6" v-for="[key] in Object.entries(system['keling_powers'])" :key="key">
<el-form-item :label="key" label-position="left">
<el-input v-model.number="system['keling_powers'][key]" size="small" />
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<template #label>
@@ -412,6 +428,20 @@ onMounted(() => {
httpGet("/api/admin/config/get?key=system")
.then((res) => {
system.value = res.data;
system.value.keling_powers = system.value.keling_powers || {
"kling-v1-6_std_5": 240,
"kling-v1-6_std_10": 480,
"kling-v1-6_pro_5": 420,
"kling-v1-6_pro_10": 840,
"kling-v1-5_std_5": 240,
"kling-v1-5_std_10": 480,
"kling-v1-5_pro_5": 420,
"kling-v1-5_pro_10": 840,
"kling-v1_std_5": 120,
"kling-v1_std_10": 240,
"kling-v1_pro_5": 420,
"kling-v1_pro_10": 840,
};
configBak.value = copyObj(system.value);
})
.catch((e) => {