Build an AI Image-to-Video Creator App with Next.js and Eachlabs

npx create-next-app ai-video-creator

npm install firebase

import { initializeApp, getApps } from "firebase/app";
import { getStorage } from "firebase/storage";

// Your web app's Firebase configuration
const firebaseConfig = {
    /**-- paste your Firebase app config -- */
};

// Initialize Firebase
const app =
    getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
const storage = getStorage(app);

export default storage;

import Link from "next/link";

export default function Home() {
    return (
        <main className='flex min-h-screen flex-col items-center justify-center p-8'>
            <h1 className='text-6xl font-bold mb-3'>Bring Photos to Life with AI</h1>
            <p className='mb-5 text-xl text-gray-600'>
                Generate cinematic videos from still images in just seconds.
            </p>

            <Link
                href='/create'
                className='bg-gray-600 hover:bg-gray-900 text-white px-6 py-3 rounded-md mb-4'
            >
                TRY NOW
            </Link>
        </main>
    );
}

mkdir create && cd create && \
touch page.tsx

"use client";
import { useState } from "react";
import Loader from "../(components)/Loader";
import Result from "../(components)/Result";
//👇🏻 Firebase Storage functions
import storage from "../firebase";
import {
    deleteObject,
    getDownloadURL,
    ref,
    StorageReference,
    uploadBytes,
} from "firebase/storage";

export default function CreatePage() {
    //👇🏻 React states
    const [generatingVideo, setGeneratingVideo] = useState<boolean>(false);
    const [triggerId, setTriggerId] = useState<string | null>(null);
    const [videoLink, setVideoLink] = useState<string | null>(null);

    if (videoLink && triggerId) {
        <Result link={videoLink} />;
    }

    return (
        <>
            {!videoLink && !generatingVideo && (
                <Form
                    generatingVideo={generatingVideo}
                    setGeneratingVideo={setGeneratingVideo}
                    setTriggerId={setTriggerId}
                    setVideoLink={setVideoLink}
                    triggerId={triggerId}
                />
            )}
            {videoLink && <Result link={videoLink} />}
            {generatingVideo && <Loader />}
        </>
    );
}

const Form = ({
    generatingVideo,
    setGeneratingVideo,
    setTriggerId,
    setVideoLink,
    triggerId,
}: {
    generatingVideo: boolean;
    setGeneratingVideo: React.Dispatch<React.SetStateAction<boolean>>;
    setTriggerId: React.Dispatch<React.SetStateAction<string | null>>;
    setVideoLink: React.Dispatch<React.SetStateAction<string | null>>;
    triggerId: string | null;
}) => {
    const [generatingImage, setGeneratingImage] = useState<boolean>(false);

    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        setGeneratingImage(true);
        const formData = new FormData(event.currentTarget);
        const imageFile = formData.get("image") as File;
        const prompt = formData.get("prompt") as string;
        //👇🏻 log form data
        console.log({ imageFile, prompt });
    };

    return (
        <div className='flex min-h-screen flex-col items-center justify-center p-4'>
            <h2 className='text-3xl font-bold mb-4'>Create Your Video</h2>

            <form className='w-2/3 mx-auto p-4' onSubmit={handleSubmit}>
                <label htmlFor='image' className='mb-2'>
                    Upload an image:
                </label>
                <input
                    type='file'
                    id='image'
                    name='image'
                    accept='.png, .jpg, .jpeg'
                    required
                    className='w-full p-2 border border-gray-300 rounded mb-4'
                />

                <label htmlFor='prompt' className='mb-2'>
                    Enter a prompt:
                </label>
                <textarea
                    id='prompt'
                    name='prompt'
                    required
                    rows={5}
                    className='w-full p-2 border border-gray-300 rounded mb-4'
                    placeholder='Describe the video you want to create...'
                />

                <button
                    disabled={generatingImage || generatingVideo}
                    type='submit'
                    className='w-full bg-blue-500 hover:bg-blue-700 text-white px-6 py-3 rounded-md'
                >
                    {generatingImage ? "Processing..." : "Create Video"}
                </button>
            </form>
        </div>
    );
};

(components)/
├── Loader.tsx
└── Result.tsx

"use client";
import { Loader2 } from "lucide-react";
import { useEffect, useState, useRef } from "react";

export default function Loader() {
    const [timeLeft, setTimeLeft] = useState<number>(90);
    const timerRef = useRef<NodeJS.Timeout | null>(null);

    useEffect(() => {
        if (timeLeft > 0) {
            timerRef.current = setInterval(() => {
                setTimeLeft((prev) => {
                    if (prev <= 1) {
                        clearInterval(timerRef.current!);
                        return 0;
                    }
                    return prev - 1;
                });
            }, 1000);
        }

        // Cleanup on unmount or if timeLeft becomes 0
        return () => {
            if (timerRef.current) clearInterval(timerRef.current);
        };
    }, [timeLeft]);

    const formatTime = (seconds: number) => {
        const min = Math.floor(seconds / 60)
            .toString()
            .padStart(2, "0");
        const sec = (seconds % 60).toString().padStart(2, "0");
        return `${min}:${sec}`;
    };

    return (
        <>
            {timeLeft > 0 && (
                <div className='flex flex-col w-full h-screen items-center justify-center'>
                    <Loader2 className='animate-spin text-gray-400' size={40} />
                    <h2 className='text-xl font-bold text-gray-500 mt-4 text-center'>
                        Your video will be ready in:
                    </h2>

                    <p className='text-3xl mt-2 text-center font-bold'>
                        {formatTime(timeLeft)}
                    </p>
                </div>
            )}
        </>
    );
}

export default function Result({ link }: { link: string }) {
    return (
        <div className='flex flex-col w-full min-h-screen items-center justify-center'>
            <h2 className='text-2xl font-bold text-gray-500 mt-4 text-center'>
                Your video is ready!
            </h2>

            <section className='flex flex-col items-center space-y-5 mt-4'>
                <video
                    className='rounded-lg shadow-lg'
                    src={link}
                    controls
                    autoPlay
                    loop
                    muted
                    style={{ width: "100%", maxWidth: "600px" }}
                />
                <button
                    className=' border-[1px] cursor-pointer p-4 rounded bg-blue-400 transition duration-200 mt-4'
                    onClick={() => window.location.reload()}
                >
                    Generate another video
                </button>
            </section>
        </div>
    );
}

EACHLABS_API_KEY=
EACH_WORKFLOW_ID=

cd app && \
mkdir api && cd app && \
touch route.ts

import { NextRequest, NextResponse } from "next/server";

//👇🏻 -- Create Each AI workflow --
export async function POST(req: NextRequest) {
    const { image, effect } = await req.json();

    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-API-KEY": process.env.EACH_API_KEY!,
        },
        body: JSON.stringify({
            parameters: {
                image,
                effect,
            },
            webhook_url: "",
        }),
    };

    try {
        const response = await fetch(
            `https://flows.eachlabs.ai/api/v1/${process.env
                .EACH_WORKFLOW_ID!}/trigger`,
            options
        );
        const data = await response.json();
        return NextResponse.json(data, { status: 200 });
    } catch (err) {
        console.error(err);
        return NextResponse.json(
            { err, status: "500", err_message: "Unable to trigger workflow" },
            { status: 500 }
        );
    } finally {
        console.log("Trigger ID retrieval completed");
    }
}

//👇🏻 -- Extracts the video URL --
const cleanUrl = (url: string): string => {
    if (typeof url === "string") {
        return url.replace(/^"|"$/g, "");
    }
    return url;
};

//👇🏻 -- Retrieve the workflow result --
export async function GET(req: NextRequest) {
    const triggerId = req.nextUrl.searchParams.get("triggerId");

    const getOptions = {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            "X-API-KEY": process.env.EACH_API_KEY!,
        },
    };

    try {
        const response = await fetch(
            `https://flows.eachlabs.ai/api/v1/${process.env
                .EACH_WORKFLOW_ID!}/executions/${triggerId}`,
            getOptions
        );
        const data = await response.json();
        const url = cleanUrl(data.step_results[0].output);
        return NextResponse.json({ url }, { status: 200 });
    } catch (err) {
        console.error(err);
        return NextResponse.json(
            { err, status: "500", err_message: "Unable to get workflow" },
            { status: 500 }
        );
    } finally {
        console.log("Request completed");
    }
}

//👇🏻 Firebase Storage Reference
const imageRef = ref(storage, `images/${imageID}/image`);

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setGeneratingImage(true);
    const formData = new FormData(event.currentTarget);
    const imageFile = formData.get("image") as File;
    const prompt = formData.get("prompt") as string;
    // 👇🏻 upload image to Firestore Storage
    await uploadBytes(imageRef, imageFile).then(async () => {
        //👇🏻 Retrieve the uploaded image URL
        const imageURL = await getDownloadURL(imageRef);
        //👇🏻 pass the imageURL and prompt into a custom function
        await executeWorkflow(imageURL, prompt);
    });
};

const executeWorkflow = async (image: string, effect: string) => {
    const response = await fetch("/api", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            image,
            effect,
        }),
    });
    const data = await response.json();

    if (!data.trigger_id) return alert("Error: No trigger id found");
    setTriggerId(data.trigger_id);
    setGeneratingImage(false);
    setGeneratingVideo(true);
    //👇🏻 waits for video generation process
    await new Promise((resolve) => setTimeout(resolve, 90_000));
    //👇🏻 fetch video result
    await fetchVideo(data.trigger_id);
};

const fetchVideo = async (trigger_id: string) => {
    if (!triggerId && !trigger_id) return;
    const response = await fetch(`/api?triggerId=${trigger_id}`, {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
        },
    });
    //👇🏻 deletes image after completing the process
    deleteImage(imageRef);

    const data = await response.json();
    setVideoLink(data.url);
    setGeneratingVideo(false);
};

//👇🏻 deletes image from Firebase storage
const deleteImage = (imageRef: StorageReference) => {
    if (!imageRef) return;
    deleteObject(imageRef)
        .then(() => {
            console.log("Image deleted successfully");
        })
        .catch((error) => {
            console.error("Error deleting image:", error);
        });
};