(self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([[7],{
/***/ 7586:
/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
(window.__NEXT_P = window.__NEXT_P || []).push([
"/wan-t2v",
function () {
return __webpack_require__(6400);
}
]);
if(false) {}
/***/ }),
/***/ 6400:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5893);
/* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1664);
/* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(next_link__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9008);
/* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(next_head__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7294);
/* harmony import */ var _components_Footer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4260);
/* harmony import */ var _components_Header__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6417);
/* harmony import */ var next_auth_react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3299);
/* harmony import */ var next_auth_react__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(next_auth_react__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var swr__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9734);
/* harmony import */ var next_image__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(5675);
/* harmony import */ var next_image__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(next_image__WEBPACK_IMPORTED_MODULE_8__);
const WanT2v = ()=>{
var _session_user, _session_user1;
const [isDarkMode, setIsDarkMode] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false);
const { data: session , status } = (0,next_auth_react__WEBPACK_IMPORTED_MODULE_6__.useSession)();
const fetcher = (url)=>fetch(url).then((res)=>res.json());
const { data: apidata , mutate } = (0,swr__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .ZP)("/api/remaining", fetcher);
const [mounted, setMounted] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false);
(0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(()=>{
setMounted(true);
}, []);
const [prompt, setPrompt] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)("");
const [negativePrompt, setNegativePrompt] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)("色调艳丽，过曝，静态，细节模糊不清，字幕，风格，作品，画作，画面，静止，整体发灰，最差质量，低质量，JPEG压缩残留，丑陋的，残缺的，多余的手指，画得不好的手部，画得不好的脸部，畸形的，毁容的，形态畸形的肢体，手指融合，静止不动的画面，杂乱的背景，三条腿，背景人很多，倒着走");
const [isLoading, setIsLoading] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false);
const [error, setError] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)("");
const [videoUrl, setVideoUrl] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)("");
const [workflowPath, setWorkflowPath] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)("./workflows/wan_t2v_1.3B_Teachche.json");
const [jobId, setJobId] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(null);
const [progress, setProgress] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)("");
const [videoError, setVideoError] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)("");
function handleClick() {
setIsDarkMode(!isDarkMode);
document.body.classList.toggle("dark");
}
const verifyVideoExists = async (url)=>{
try {
const response = await fetch(url, {
method: "HEAD"
});
if (!response.ok) {
console.error("Video not accessible:", {
status: response.status,
statusText: response.statusText,
url
});
return false;
}
const contentType = response.headers.get("content-type");
if (!contentType) {
console.error("No content type header found");
return false;
}
return contentType.includes("video/");
} catch (err) {
console.error("Error verifying video:", err);
return false;
}
};
const checkVideoStatus = async (jobId)=>{
try {
const response = await fetch("/api/generate-video?jobId=".concat(jobId));
if (!response.ok) {
throw new Error("Failed to check video status");
}
const data = await response.json();
if (data.status === "completed") {
const videoExists = await verifyVideoExists(data.videoUrl);
if (!videoExists) {
throw new Error("Generated video is not accessible");
}
setVideoUrl(data.videoUrl);
setJobId(null);
setProgress("");
mutate(); // Update credits
return true;
} else if (data.status === "failed") {
throw new Error(data.error || "Video generation failed");
} else {
// Still pending
return false;
}
} catch (err) {
console.error("Error checking video status:", err);
throw err instanceof Error ? err : new Error("Failed to check video status");
}
};
const pollVideoStatus = async (jobId)=>{
let attempts = 0;
const maxAttempts = 120; // 10 minutes (5 second intervals)
while(attempts < maxAttempts){
try {
setProgress("Generating video... ".concat(Math.round(attempts / maxAttempts * 100), "%"));
const isComplete = await checkVideoStatus(jobId);
if (isComplete) {
return;
}
await new Promise((resolve)=>setTimeout(resolve, 5000)); // Wait 5 seconds
attempts++;
} catch (err) {
const errorMessage = err instanceof Error ? err.message : "Failed to check video status";
setError(errorMessage);
setJobId(null);
setProgress("");
return;
}
}
throw new Error("Video generation timed out");
};
const handleSubmit = async (e)=>{
e.preventDefault();
if (!session) {
setError("Please sign in to generate videos");
return;
}
if (!prompt.trim()) {
setError("Please enter a prompt");
return;
}
if (apidata.remainingGenerations < 2) {
setError("Not enough credits remaining. Please buy more credits!");
return;
}
setIsLoading(true);
setError("");
setVideoUrl("");
setProgress("Starting video generation...");
try {
const response = await fetch("/api/generate-video", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
prompt,
negative_prompt: negativePrompt,
workflow_path: workflowPath,
save_previews: false,
endpoint: "wan-t2v-video" // Explicitly specify the WAN-T2V endpoint
})
});
if (!response.ok) {
const errorText = await response.text();
let errorMessage = "Failed to start video generation";
try {
const errorData = JSON.parse(errorText);
errorMessage = errorData.message || errorData.error || errorMessage;
} catch (e1) {
errorMessage = errorText || errorMessage;
}
throw new Error(errorMessage);
}
const data = await response.json();
if (!data.jobId) {
throw new Error("No job ID received");
}
setJobId(data.jobId);
await pollVideoStatus(data.jobId);
} catch (err) {
console.error("Video generation error:", err);
const errorMessage1 = err instanceof Error ? err.message : "An error occurred while generating the video";
setError(errorMessage1);
mutate();
} finally{
setIsLoading(false);
setProgress("");
}
};
const handleDownload = async ()=>{
if (!videoUrl) {
setError("No video available to download");
return;
}
try {
const response = await fetch(videoUrl);
if (!response.ok) {
throw new Error("Failed to download video: ".concat(response.statusText));
}
const contentType = response.headers.get("content-type");
if (!(contentType === null || contentType === void 0 ? void 0 : contentType.includes("video/"))) {
throw new Error("Invalid content type received");
}
const blob = await response.blob();
if (blob.size === 0) {
throw new Error("Received empty video file");
}
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "generated-video-".concat(Date.now(), ".mp4");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
} catch (err) {
console.error("Error downloading video:", err);
const errorMessage = err instanceof Error ? err.message : "Failed to download video";
setError(errorMessage);
}
};
const videoContainerRef = (0,react__WEBPACK_IMPORTED_MODULE_3__.useRef)(null);
(0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(()=>{
if (!isLoading && videoUrl && videoContainerRef.current) {
videoContainerRef.current.scrollIntoView({
behavior: "smooth"
});
}
}, [
isLoading,
videoUrl
]);
// Don't render content until mounted to prevent hydration mismatch
if (!mounted) {
return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)((next_head__WEBPACK_IMPORTED_MODULE_2___default()), {
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("title", {
children: "WAN 2.1 Video text to video generation"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("link", {
rel: "icon",
href: "/favicon.ico"
})
]
})
});
}
return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "flex max-w-6xl mx-auto flex-col items-center justify-center py-2 min-h-screen",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)((next_head__WEBPACK_IMPORTED_MODULE_2___default()), {
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("title", {
children: "WAN 2.1 T2V Video Generation"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("link", {
rel: "icon",
href: "/favicon.ico"
})
]
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_Header__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z, {
photo: (session === null || session === void 0 ? void 0 : (_session_user = session.user) === null || _session_user === void 0 ? void 0 : _session_user.image) || undefined,
email: (session === null || session === void 0 ? void 0 : (_session_user1 = session.user) === null || _session_user1 === void 0 ? void 0 : _session_user1.email) || undefined
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("main", {
className: "flex flex-1 w-full flex-col items-center justify-center text-center px-4 mt-4 sm:mb-0 mb-8",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h2", {
className: "mx-auto max-w-3xl font-display text-3xl font-bold tracking-normal text-slate-900 sm:text-3xl mb-5",
children: "WAN-T2V Video Generation"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "flex items-center p-4 bg-blue-50 border border-blue-200 rounded-lg text-blue-800 my-4",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("svg", {
"aria-hidden": "true",
className: "w-6 h-6 fill-blue-400 mr-3 shrink-0",
viewBox: "0 0 20 20",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("path", {
d: "M10 1.25a8.75 8.75 0 1 0 0 17.5 8.75 8.75 0 0 0 0-17.5zM9.375 6.875h1.25V12.5h-1.25V6.875zm1.25 7.5h-1.25v-1.25h1.25v1.25z"
})
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "text-sm leading-normal",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("strong", {
children: "New!"
}),
" This page uses the WAN-T2V model for video generation."
]
})
]
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h3", {
className: "text-xl font-semibold text-slate-900 dark:text-white mb-4",
children: "Fill out the form to Generate Video:"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "max-w-xl w-full",
children: [
status === "authenticated" && apidata && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("p", {
className: "text-black-400 mb-6",
children: [
"You have",
" ",
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("span", {
className: "font-semibold text-blue-300",
children: [
apidata.remainingGenerations,
" ",
(apidata === null || apidata === void 0 ? void 0 : apidata.remainingGenerations) > 2 ? "credits" : "credit"
]
}),
" ",
"left. 1 video generating costs 2 credits (Due to the high GPU computing needed) (GPU may return error sometime, failed generating costs 0 credit). ",
" ",
apidata.remainingGenerations < 2 && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("span", {
children: [
"Buy more credits",
" ",
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)((next_link__WEBPACK_IMPORTED_MODULE_1___default()), {
href: "/buy-credits",
className: "font-semibold text-blue-300 underline underline-offset-2 hover:text-blue-200 transition",
children: "here"
}),
"."
]
})
]
}),
status === "authenticated" && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
className: "mt-2 mb-6 px-4 sm:px-6 md:px-0",
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)((next_link__WEBPACK_IMPORTED_MODULE_1___default()), {
target: "_blank",
href: "/buy-credits",
className: "inline-flex items-center border border-gray-700 rounded-2xl py-2 px-4 text-gray-400 text-sm sm:text-base whitespace-nowrap duration-300 ease-in-out hover:text-gray-300 hover:scale-105 transition",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
className: "whitespace-normal",
children: "Pricing is now available."
}),
" ",
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
className: "font-semibold text-gray-200 ml-1",
children: "Click here"
}),
" ",
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
className: "whitespace-normal",
children: "to buy credits!"
})
]
})
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
className: "bg-white rounded-xl shadow-md p-4 hover:shadow-xl transition dark:bg-slate-800 dark:hover:shadow-xl dark:hover:shadow-slate-700",
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("form", {
onSubmit: handleSubmit,
className: "space-y-4",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label", {
className: "block text-base font-semibold text-gray-700 dark:text-gray-200 mb-2",
children: "Enter your Prompt"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("textarea", {
id: "prompt-input",
value: prompt,
onChange: (e)=>setPrompt(e.target.value),
placeholder: "Enter your video generation prompt...",
required: true,
className: "w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white min-h-[100px]"
})
]
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label", {
className: "block text-base font-semibold text-gray-700 dark:text-gray-200 mb-2",
children: "Negative Prompt"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("textarea", {
value: negativePrompt,
onChange: (e)=>setNegativePrompt(e.target.value),
placeholder: "Enter negative prompt...",
className: "w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white min-h-[100px]"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
className: "text-xs text-gray-500 mt-1",
children: "Default negative prompt is already provided. You can modify it if needed."
})
]
}),
status === "authenticated" ? /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
type: "submit",
disabled: isLoading,
className: "w-full py-3 font-medium text-white bg-black rounded-lg hover:bg-black/80 disabled:bg-black/40 disabled:cursor-not-allowed dark:bg-white dark:text-black dark:hover:bg-gray-200",
children: isLoading ? "Generating Video..." : "Generate Video (WAN-T2V)"
}) : /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "h-[50vh] flex flex-col items-center justify-center",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
className: "text-slate-500 mt-2 px-4 sm:px-6 md:px-0",
children: "Please sign in to generate videos."
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "py-10 h-[250px] flex flex-col items-center space-y-6 max-w-[670px] -mt-8 px-4 sm:px-6 md:px-0",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
className: "max-w-xl text-black-300 text-center text-sm sm:text-base",
children: "Sign in below with Google to create a free account. You will get 3 credits for free."
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("button", {
onClick: ()=>(0,next_auth_react__WEBPACK_IMPORTED_MODULE_6__.signIn)("Google"),
className: "bg-gray-200 text-black font-semibold py-2 sm:py-3 px-4 sm:px-6 rounded-xl sm:rounded-2xl flex items-center space-x-2 hover:bg-gray-300 transition-colors",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)((next_image__WEBPACK_IMPORTED_MODULE_8___default()), {
src: "/google.png",
width: 20,
height: 20,
alt: "google's logo",
sizes: "20px"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
className: "text-sm sm:text-base",
children: "Sign in with Google"
})
]
})
]
})
]
})
}),
isLoading && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70",
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "bg-white dark:bg-slate-800 p-8 rounded-xl shadow-xl text-center max-w-md mx-4",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
className: "flex justify-center mb-6",
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "relative",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
className: "w-12 h-12 rounded-full border-4 border-blue-200 dark:border-blue-900"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
className: "w-12 h-12 rounded-full border-4 border-blue-600 dark:border-blue-400 border-t-transparent animate-spin absolute top-0"
})
]
})
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h3", {
className: "text-xl font-semibold mb-2 text-slate-900 dark:text-white",
children: "Generating Your Video"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
className: "text-slate-600 dark:text-slate-300 mb-4",
children: "This process requires significant GPU computing power and may take up to 4 minutes. Please keep this tab open."
}),
"While you wait, you can try the watch following (open in a new tab):",
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("a", {
href: "https://youtu.be/tBKd2vB4n2o",
target: "_blank",
className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline underline-offset-2 transition-colors",
children: "New video: Wan 2.1 - the new Video AI model"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "space-y-2 text-sm text-slate-500 dark:text-slate-400 mt-4",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
children: "• Running WAN T2V model"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
children: "• Processing your prompt"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
children: "• Generating video frames"
})
]
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
className: "text-slate-600 dark:text-slate-300 mt-4",
children: progress
})
]
})
}),
progress && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
className: "mt-4 p-4 bg-blue-50 text-blue-500 rounded-md dark:bg-blue-900/50 dark:text-blue-200",
children: progress
}),
error && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
className: "mt-4 p-4 bg-red-50 text-red-500 rounded-md dark:bg-red-900/50 dark:text-red-200",
children: error
}),
videoUrl && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "mt-8",
ref: videoContainerRef,
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h2", {
className: "text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200",
children: "Generated Video"
}),
videoError ? /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "p-4 bg-red-50 text-red-500 rounded-md mb-4",
children: [
videoError,
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
onClick: ()=>window.location.reload(),
className: "ml-2 underline",
children: "Reload page"
})
]
}) : /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
className: "relative w-full max-w-md mx-auto aspect-[9/16] max-h-[480px]",
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("video", {
className: "absolute inset-0 w-full h-full object-contain rounded-lg shadow-lg",
controls: true,
playsInline: true,
onError: (e)=>{
const target = e.target;
console.error("Video error:", target.error);
setVideoError("Error loading video. Please try reloading the page.");
},
onLoadedData: ()=>setVideoError(""),
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("source", {
src: videoUrl,
type: "video/mp4"
}),
"Your browser does not support the video tag."
]
}, videoUrl)
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
type: "button",
onClick: handleDownload,
className: "mt-4 py-2 px-4 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors dark:bg-green-600 dark:hover:bg-green-700",
children: "Download Video"
})
]
})
]
})
})
]
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
className: "text-black-500 mt-2 mb-4 px-4 sm:px-6 md:px-0 text-sm sm:text-base",
children: "Transform your text descriptions into stunning videos using the new WAN-T2V model. This model offers a different style compared to the Hunyuan model."
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "my-4 p-4 bg-blue-50 dark:bg-blue-900/50 rounded-lg border border-blue-200 dark:border-blue-800 mx-4 sm:mx-6 md:mx-0",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
className: "inline-block px-2 py-1 text-xs font-semibold bg-blue-100 dark:bg-blue-800 text-blue-700 dark:text-blue-200 rounded mb-2",
children: "NEW"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
className: "text-blue-800 dark:text-blue-200 font-medium text-base sm:text-lg",
children: "WAN T2V Model Now Available!"
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
className: "text-blue-600 dark:text-blue-300 text-sm mt-1",
children: "Try our new WAN T2V model for different style video generation."
})
]
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
className: "text-slate-500 mt-2 mb-8 px-4 sm:px-6 md:px-0 text-sm sm:text-base",
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)((next_link__WEBPACK_IMPORTED_MODULE_1___default()), {
href: "/t2v",
className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline underline-offset-2 transition-colors",
children: "Want to use the Hunyuan model instead? Click here to go to the Hunyuan video generator."
})
})
]
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_Footer__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {})
]
});
};
/* harmony default export */ __webpack_exports__["default"] = (WanT2v);
/***/ })
},
/******/ function(__webpack_require__) { // webpackRuntimeModules
/******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }
/******/ __webpack_require__.O(0, [640,365,247,774,888,179], function() { return __webpack_exec__(7586); });
/******/ var __webpack_exports__ = __webpack_require__.O();
/******/ _N_E = __webpack_exports__;
/******/ }
]);