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 videoResults = document.getElementById("video-results");
    const errorContainer = document.getElementById("error-container");

    loader.classList.remove("hidden");
    videoResults.innerHTML = ""; // Clear previous videos
    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();
        
        if (data.video_urls && data.video_urls.length > 0) {
            data.video_urls.forEach(videoUrl => {
                const videoElement = document.createElement("video");
                videoElement.src = videoUrl;
                videoElement.controls = true;
                videoResults.appendChild(videoElement);
            });
        } else {
            throw new Error("No videos were generated.");
        }

    } catch (error) {
        errorContainer.textContent = error.message;
        errorContainer.classList.remove("hidden");
    } finally {
        loader.classList.add("hidden");
    }
});