frontend/app.js

document.getElementById("video-form").addEventListener("submit", async (event) => {
    event.preventDefault();

    const form = event.target;
    const formData = new FormData();
    
    formData.append("api_key", form["api-key"].value);
    formData.append("prompt", form["prompt"].value);
    formData.append("negative_prompt", form["negative-prompt"].value);
    formData.append("model", form["model"].value);
    formData.append("aspect_ratio", form["aspect-ratio"].value);
    formData.append("duration", form["duration"].value);
    formData.append("resolution", form["resolution"].value);
    formData.append("sample_count", form["sample-count"].value);
    if (form["seed"].value) {
        formData.append("seed", form["seed"].value);
    }
    formData.append("person_generation", form["person-generation"].value);
    formData.append("generate_audio", form["generate-audio"].checked);
    formData.append("enhance_prompt", form["enhance-prompt"].checked);

    const imageFile = form["image-prompt"].files[0];
    if (imageFile) {
        formData.append("image", imageFile);
    }

    const videoFile = form["video-prompt"].files[0];
    if (videoFile) {
        formData.append("video", videoFile);
    }

    const loader = document.getElementById("loader");
    const videoElement = document.getElementById("generated-video");
    const errorContainer = document.getElementById("error-container");

    loader.classList.remove("hidden");
    videoElement.style.display = "none";
    errorContainer.classList.add("hidden");

    try {
        const response = await fetch("/api/generate_video", {
            method: "POST",
            body: formData,
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.detail || "An unknown error occurred");
        }

        const data = await response.json();
        videoElement.src = data.video_url;
        videoElement.style.display = "block";
    } catch (error) {
        errorContainer.textContent = error.message;
        errorContainer.classList.remove("hidden");
    } finally {
        loader.classList.add("hidden");
    }
});