-
+
-
@@ -212,13 +142,7 @@
placeholder="请在此输入视频提示词，您也可以点击下面的提示词助手生成视频提示词"
/>
使用文字描述想要生成视频的内容
- 以某张图片为底稿参考来创作视频，生成类似风格或类型视频，支持 PNG
- /JPG/JPEG 格式图片；
-
+ 以某张图片为底稿参考来创作视频，生成类似风格或类型视频，支持 PNG /JPG/JPEG 格式图片；
-
- ![]()
+
+ ![]()
@@ -256,25 +165,10 @@
起始帧
-
-
- ![]()
+
+ ![]()
@@ -283,10 +177,7 @@
结束帧
-
提示词：
-
+
@@ -295,12 +186,7 @@
-
不希望出现的内容：（可选）
-
+
@@ -332,207 +215,123 @@
每次生成视频消耗
- {{ powerCost }}算力; 每次生成视频消耗 {{ powerCost }}算力;
当前可用算力：{{
- availablePower
- }} 当前可用算力：{{ availablePower }}
-
- 立即生成
+ 立即生成
-
-
+
+
-
-
- 
- 你的作品
-任务列表
- - -创作记录
- -
-
-
-
+
-
+ style="max-width: 90vw; max-height: 90vh"
+ :autoplay="true"
+ loop="loop"
+ muted="muted"
+ preload="auto"
+ >
+ 您的浏览器不支持视频播放
+
+
@@ -540,42 +339,31 @@
import failed from "@/assets/img/failed.png";
import TaskList from "@/components/TaskList.vue";
import { ref, reactive, onMounted, onUnmounted, watch } from "vue";
-import {
- Plus,
- Delete,
- InfoFilled,
- ChromeFilled,
- DocumentCopy,
- Download,
- WarnTriangleFilled,
- CircleCloseFilled
-} from "@element-plus/icons-vue";
+import { Plus, Delete, InfoFilled, ChromeFilled, DocumentCopy, Download, WarnTriangleFilled, CircleCloseFilled } from "@element-plus/icons-vue";
import { httpGet, httpPost, httpDownload } from "@/utils/http";
import { ElMessage, ElMessageBox } from "element-plus";
import { checkSession, getSystemInfo } from "@/store/cache";
import Clipboard from "clipboard";
-
-import {
- closeLoading,
- showLoading,
- showMessageError,
- showMessageOK
-} from "@/utils/dialog";
-import { replaceImg } from "@/utils/libs";
+import BlackDialog from "@/components/ui/BlackDialog.vue";
+import BlackSwitch from "@/components/ui/BlackSwitch.vue";
+import { closeLoading, showLoading, showMessageError, showMessageOK } from "@/utils/dialog";
+import { replaceImg, substr } from "@/utils/libs";
+import Generating from "@/components/ui/Generating.vue";
+import nodata from "@/assets/img/no-data.png";
const models = ref([
{
text: "可灵 1.6",
- value: "kling-v1-6"
+ value: "kling-v1-6",
},
{
text: "可灵 1.5",
- value: "kling-v1-5"
+ value: "kling-v1-5",
},
{
text: "可灵 1.0",
- value: "kling-v1"
- }
+ value: "kling-v1",
+ },
]);
// 参数设置
const params = reactive({
@@ -595,11 +383,11 @@ 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" },
@@ -608,14 +396,14 @@ const rates = [
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",
+ },
];
// 切换图片比例
@@ -623,32 +411,28 @@ const changeRate = (item) => {
params.aspect_ratio = item.value;
};
-// 状态变量
-let pollTimer = null;
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 pageSize = ref(4);
-const currentPage = ref(1);
+const loading = ref(false);
+const list = ref([]);
+const noData = ref(true);
+const page = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const taskPulling = ref(true);
+const pullHandler = ref(null);
const previewVisible = ref(false);
const currentVideo = ref("");
-const isOver = ref(false);
-const pullTask = ref(true);
-const waterfallKey = ref(Date.now());
const showCameraControl = ref(false);
const keLingPowers = ref({});
-
+const isLogin = ref(false);
// 动态更新模型消耗的算力
const updateModelPower = () => {
- showCameraControl.value =
- params.model === "kling-v1-5" && params.mode === "pro";
- powerCost.value =
- keLingPowers.value[`${params.model}_${params.mode}_${params.duration}`] ||
- {};
+ showCameraControl.value = params.model === "kling-v1-5" && params.mode === "pro";
+ powerCost.value = keLingPowers.value[`${params.model}_${params.mode}_${params.duration}`] || {};
};
// tab切换
@@ -672,7 +456,7 @@ const uploadStartImage = async (file) => {
};
//移除图片
-const remove = (type, img) => {
+const removeImage = (type) => {
if (type === "start") {
params.image = "";
} else if (type === "end") {
@@ -722,9 +506,9 @@ const generate = async () => {
if (params.prompt.length > 500) {
return ElMessage.error("视频描述不能超过 500 个字符");
}
- // if (params.task_type === "image2video" && !params.image) {
- // return ElMessage.error("请上传起始帧图片");
- // }
+ if (params.task_type === "image2video" && !params.image) {
+ return ElMessage.error("请上传起始帧图片");
+ }
generating.value = true;
// 处理图片链接
if (params.image) {
@@ -737,84 +521,60 @@ const generate = async () => {
await httpPost("/api/video/keling/create", params);
showMessageOK("任务创建成功");
// 新增重置
- currentPage.value = 1;
- runningTasks.value = [];
- finishedTasks.value = [];
- pullTask.value = true; //新增开始轮询-获取正在进行中最新数据
- isOver.value = false;
+ page.value = 1;
+ list.value.unshift({
+ progress: 0,
+ prompt: params.prompt,
+ raw_data: {
+ task_type: params.task_type,
+ model: params.model,
+ duration: params.duration,
+ mode: params.mode,
+ },
+ });
+ taskPulling.value = true;
} catch (e) {
showMessageError("创建失败: " + e.message);
} finally {
generating.value = false;
}
};
-const loading = ref(false);
-const isLogin = ref(false);
-const runningPage = ref(1);
-const taskfunction = async (running) => {
- const res = await httpGet("/api/video/list", {
- page: running ? runningPage.value : currentPage.value,
- page_size: running ? 100000 : pageSize.value,
+
+const fetchData = (_page) => {
+ if (_page) {
+ page.value = _page;
+ }
+
+ httpGet("/api/video/list", {
+ page: page.value,
+ page_size: pageSize.value,
type: "keling",
- task_type: taskFilter.value === "all" ? "" : taskFilter.value
- });
- return res;
-};
-//滚动 瀑布流
-const handleScroll = async () => {
- if (!isLogin.value || loading.value || isOver.value) return;
- try {
- loading.value = true;
- const res = await taskfunction(false);
- const data = res.data || {};
-
- // 去重合并新数据
- const newItems = data.items
- .filter(
- (task) =>
- task.progress >= 100 &&
- !finishedTasks.value.some((t) => t.id === task.id)
- )
- .map((item) => ({
- ...item,
- height: 300 * (Math.random() * 0.3 + 0.6) //生成300~420px随机高度
- }));
- finishedTasks.value = [...finishedTasks.value, ...newItems];
-
- if (
- currentPage.value >= data.total_page ||
- data.total <= finishedTasks.value.length
- ) {
- isOver.value = true;
- } else {
- currentPage.value++;
- }
- } catch (error) {
- console.error("Error:", error);
- } finally {
- loading.value = false;
- console.log("finishedTasks.value", finishedTasks.value);
- }
-};
-
-//正在生成任务中 轮询
-const fetchTasks = async () => {
- if (!isLogin.value) return;
- try {
- const res = await taskfunction(true);
-
- const data = res.data || {};
- // 拿到任务中的数据
- runningTasks.value = data.items.filter((task) => task.progress < 100);
- if (runningPage.value >= data.total_page) {
- runningPage.value = 1;
- } else {
- runningPage.value++;
- }
- } catch (e) {
- showMessageError("获取任务列表失败: " + e.message);
- } finally {
- }
+ task_type: taskFilter.value === "all" ? "" : taskFilter.value,
+ })
+ .then((res) => {
+ total.value = res.data.total;
+ let needPull = false;
+ const items = [];
+ for (let v of res.data.items) {
+ if (v.progress < 100 || (v.progress === 100 && v.video_url === "")) {
+ needPull = true;
+ }
+ items.push({
+ ...v,
+ downloading: false,
+ });
+ }
+ loading.value = false;
+ taskPulling.value = needPull;
+ if (JSON.stringify(list.value) !== JSON.stringify(items)) {
+ list.value = items;
+ }
+ noData.value = list.value.length === 0;
+ })
+ .catch(() => {
+ loading.value = false;
+ noData.value = true;
+ });
};
const previewVideo = (task) => {
@@ -836,235 +596,67 @@ const downloadVideo = async (task) => {
}
};
-const deleteTask = async (task) => {
- try {
- await ElMessageBox.confirm("确定要删除该任务吗？");
- await httpGet("/api/video/remove", { id: task.id });
- showMessageOK("删除成功");
- await fetchTasks();
- } catch (e) {
- if (e !== "cancel") {
- showMessageError("删除失败: " + e.message);
- }
- }
+// 删除任务
+const removeJob = (item) => {
+ ElMessageBox.confirm("此操作将会删除任务相关文件，继续操作码?", "删除提示", {
+ confirmButtonText: "确认",
+ cancelButtonText: "取消",
+ type: "warning",
+ })
+ .then(() => {
+ httpGet("/api/video/remove", { id: item.id })
+ .then(() => {
+ ElMessage.success("任务删除成功");
+ fetchData(page.value);
+ })
+ .catch((e) => {
+ ElMessage.error("任务删除失败：" + e.message);
+ });
+ })
+ .catch(() => {});
};
const clipboard = ref(null);
// 生命周期钩子
-onMounted(async () => {
+onMounted(() => {
checkSession()
- .then(async (u) => {
+ .then((u) => {
isLogin.value = true;
availablePower.value = u.power;
- await fetchTasks();
- await handleScroll();
+ fetchData(1);
+ // 设置轮询
+ pullHandler.value = setInterval(() => {
+ if (taskPulling.value) {
+ fetchData(page.value);
+ }
+ }, 5000);
})
- .catch(() => {});
- //复制
- clipboard.value = new Clipboard(".copy-prompt-kl");
+ .catch((e) => {
+ console.log(e);
+ });
+
+ clipboard.value = new Clipboard(".copy-prompt");
clipboard.value.on("success", () => {
ElMessage.success("复制成功！");
});
-
clipboard.value.on("error", () => {
ElMessage.error("复制失败！");
});
- // 获取系统配置
+
getSystemInfo().then((res) => {
keLingPowers.value = res.data.keling_powers;
updateModelPower();
});
});
+
onUnmounted(() => {
- clearInterval(pollTimer);
clipboard.value.destroy();
+ if (pullHandler.value) {
+ clearInterval(pullHandler.value);
+ }
});
-
-//监听 pullTask true 的时候定时器触发，否则清除定时器
-watch(
- () => pullTask.value,
- (newVal) => {
- clearInterval(pollTimer);
- if (newVal) {
- pollTimer = setInterval(() => {
- fetchTasks();
- }, 5000);
- }
- },
- { immediate: true }
-);
-
-watch(
- () => runningTasks.value,
- async (newVal, oldVal) => {
- //正在排队的新旧数据不一致，说明有新的任务加入，或减少，重新获取历史记录
- if (
- newVal.length > 0 &&
- JSON.stringify(newVal) !== JSON.stringify(oldVal)
- ) {
- pullTask.value = true;
- // 立即获取最新历史记录数据
- currentPage.value = 1;
- finishedTasks.value = [];
- await handleScroll();
- }
- //当正在排队的长度0，停止轮询，历史记录重新请求一次
- if (newVal.length === 0) {
- pullTask.value = false;
- currentPage.value = 1;
- runningTasks.value = [];
- finishedTasks.value = [];
- isOver.value = false;
- // 立即获取最新历史记录数据
- await handleScroll();
- }
- },
- { deep: true }
-);
diff --git a/web/src/views/Luma.vue b/web/src/views/Luma.vue
index 2109c625..6ea9910c 100644
--- a/web/src/views/Luma.vue
+++ b/web/src/views/Luma.vue
@@ -58,7 +58,7 @@
-
-
-
- ![]()
- 生成失败
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 错误详细信息
-
-
-
- {{ slotProp.item.err_msg }}
-
-
-
-
-
-
-
-
-
-
-
-
+
- 提示词
-
-
-
- {{ slotProp.item.prompt }}
-
-
-
+
+
+
+
+
+
+
-
-
-
+
+
+
+
- 没有更多数据了
-
+
+
+
+
-
-
-
+
+
+ {{ item.raw_data.task_type }}
+ {{ item.raw_data.model }}
+ {{ item.raw_data.duration }}秒
+ {{ item.raw_data.mode }}
+
+ 任务执行失败：{{ item.err_msg }}，任务提示词：{{ item.prompt }}
+
+ {{ substr(item.prompt, 1000) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
@@ -67,8 +56,7 @@ httpGet("/api/suno/detail", { song_id: id })
.then((res) => {
song.value = res.data;
playList.value = [song.value];
- document.title =
- song.value?.title + " | By " + song.value?.user.nickname + " | Suno音乐";
+ document.title = song.value?.title + " | By " + song.value?.user.nickname + " | Suno音乐";
})
.catch((e) => {
showMessageError("获取歌曲详情失败：" + e.message);
{{ song.title }}
-
+
-