Create app.py

app.py

@@ -0,0 +1,315 @@
+import React, { useState, useRef, useCallback } from 'react';
+import type { FormState, AppStatus } from './types';
+import { createCompositeImage } from './utils/fileUtils';
+import { generateVideo } from './services/geminiService';
+
+const FilmIcon: React.FC<{ className?: string }> = ({ className }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={className}>
+        <path d="M4.5 4.5a3 3 0 0 0-3 3v9a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-9a3 3 0 0 0-3-3h-15Zm-1.5 3a1.5 1.5 0 0 1 1.5-1.5h15a1.5 1.5 0 0 1 1.5 1.5v2.25h-18v-2.25Zm18 4.5v-1.5h-18v1.5h18Zm-18 1.5h18v2.25a1.5 1.5 0 0 1-1.5 1.5h-15a1.5 1.5 0 0 1-1.5-1.5v-2.25Z" />
+    </svg>
+);
+
+const UploadIcon: React.FC<{ className?: string }> = ({ className }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={className}>
+        <path fillRule="evenodd" d="M11.47 2.47a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06l-3.22-3.22V16.5a.75.75 0 0 1-1.5 0V4.81L8.03 8.03a.75.75 0 0 1-1.06-1.06l4.5-4.5ZM3 15.75a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z" clipRule="evenodd" />
+    </svg>
+);
+
+const Header: React.FC = () => (
+    <header className="w-full bg-slate-900/50 backdrop-blur-sm p-4 border-b border-slate-700 fixed top-0 left-0 z-10">
+        <div className="container mx-auto flex items-center gap-3">
+            <FilmIcon className="w-8 h-8 text-sky-400" />
+            <h1 className="text-2xl font-bold tracking-tight text-white">Dialogue Video Weaver</h1>
+        </div>
+    </header>
+);
+
+interface ImageUploaderProps {
+    onFileChange: (file: File | null) => void;
+    label: string;
+    id: string;
+    uploadText: string;
+}
+
+const ImageUploader: React.FC<ImageUploaderProps> = ({ onFileChange, label, id, uploadText }) => {
+    const [preview, setPreview] = useState<string | null>(null);
+    const [fileName, setFileName] = useState<string>('');
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0] || null;
+        onFileChange(file);
+        if (file) {
+            setFileName(file.name);
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                setPreview(reader.result as string);
+            };
+            reader.readAsDataURL(file);
+        } else {
+            setPreview(null);
+            setFileName('');
+        }
+    };
+
+    const handleButtonClick = () => {
+        fileInputRef.current?.click();
+    };
+    
+    return (
+        <div>
+            <label htmlFor={id} className="block text-sm font-medium text-slate-300 mb-2">{label}</label>
+            <div 
+                className="mt-1 flex justify-center items-center px-6 pt-5 pb-6 border-2 border-slate-600 border-dashed rounded-lg h-48 bg-slate-800/50 cursor-pointer hover:border-sky-500 transition-colors"
+                onClick={handleButtonClick}
+            >
+                <input ref={fileInputRef} id={id} name={id} type="file" className="sr-only" onChange={handleFileChange} accept="image/*" />
+                {preview ? (
+                     <img src={preview} alt="Preview" className="max-h-full max-w-full object-contain rounded-md" />
+                ) : (
+                    <div className="text-center">
+                       <UploadIcon className="mx-auto h-12 w-12 text-slate-500" />
+                        <p className="mt-2 text-sm text-slate-400">
+                            <span className="font-semibold text-sky-400">Click to upload</span> {uploadText}
+                        </p>
+                         <p className="text-xs text-slate-500">{fileName || 'PNG, JPG, GIF up to 10MB'}</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+interface LabeledInputProps {
+    id: string;
+    label: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    placeholder: string;
+    isTextarea?: boolean;
+    type?: string;
+    helpText?: string;
+}
+
+const LabeledInput: React.FC<LabeledInputProps> = ({ id, label, value, onChange, placeholder, isTextarea = false, type = 'text', helpText }) => {
+    const commonProps = {
+        id,
+        name: id,
+        value,
+        onChange,
+        placeholder,
+        className: "block w-full bg-slate-800 border-slate-600 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white px-3 py-2 transition",
+    };
+    return (
+        <div>
+            <label htmlFor={id} className="block text-sm font-medium text-slate-300 mb-2">{label}</label>
+            {isTextarea ? (
+                <textarea {...commonProps} rows={6} />
+            ) : (
+                <input type={type} {...commonProps} />
+            )}
+            {helpText && <p className="mt-2 text-xs text-slate-400">{helpText}</p>}
+        </div>
+    );
+};
+
+const Loader: React.FC<{ message: string }> = ({ message }) => (
+    <div className="flex flex-col items-center justify-center h-full bg-slate-800/50 rounded-lg p-8">
+        <svg className="animate-spin h-12 w-12 text-sky-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <p className="mt-4 text-lg font-semibold text-white animate-pulse">{message}</p>
+        <p className="mt-2 text-sm text-slate-400">AI video generation can take several minutes.</p>
+    </div>
+);
+
+const VideoResult: React.FC<{ videoUrl: string }> = ({ videoUrl }) => (
+    <div className="flex flex-col items-center justify-center h-full bg-slate-800/50 rounded-lg p-4">
+        <h2 className="text-xl font-bold mb-4">Your Video is Ready!</h2>
+        <video controls src={videoUrl} className="w-full max-w-full rounded-lg shadow-lg">
+            Your browser does not support the video tag.
+        </video>
+        <a 
+            href={videoUrl} 
+            download="dialogue-video.mp4"
+            className="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-sky-600 hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 focus:ring-offset-slate-900"
+        >
+            Download Video
+        </a>
+    </div>
+);
+
+
+const App: React.FC = () => {
+    const [formState, setFormState] = useState<FormState>({
+        backgroundFile: null,
+        hostDescription: '',
+        expertDescription: '',
+        script: '',
+        elevenLabsApiKey: '',
+        hostPhoto: null,
+        hostElevenLabsVoiceId: '',
+        expertPhoto: null,
+        expertElevenLabsVoiceId: '',
+    });
+
+    const [appStatus, setAppStatus] = useState<AppStatus>({
+        isLoading: false,
+        message: '',
+        error: null,
+        videoUrl: null,
+    });
+
+    const isFormValid = 
+        formState.backgroundFile && 
+        formState.hostDescription && 
+        formState.expertDescription && 
+        formState.script &&
+        formState.elevenLabsApiKey &&
+        formState.hostPhoto &&
+        formState.hostElevenLabsVoiceId &&
+        formState.expertPhoto &&
+        formState.expertElevenLabsVoiceId;
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormState(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleFileChange = (file: File | null) => {
+        setFormState(prev => ({ ...prev, backgroundFile: file }));
+    };
+
+    const handleHostPhotoChange = (file: File | null) => {
+        setFormState(prev => ({ ...prev, hostPhoto: file }));
+    };
+
+    const handleExpertPhotoChange = (file: File | null) => {
+        setFormState(prev => ({ ...prev, expertPhoto: file }));
+    };
+
+    const onProgress = useCallback((message: string) => {
+        setAppStatus(prev => ({...prev, message}));
+    }, []);
+
+    const handleGenerateVideo = async () => {
+        if (!isFormValid) return;
+
+        setAppStatus({ isLoading: true, message: 'Creating composite image...', error: null, videoUrl: null });
+
+        try {
+            const compositeImage = await createCompositeImage(
+                formState.backgroundFile!,
+                formState.hostPhoto!,
+                formState.expertPhoto!
+            );
+
+            const prompt = `
+                Create a short video based on the following scene depicted in the provided image.
+
+                **Scene:**
+                The provided image shows a background with two characters: a 'host' on the left and an 'expert' on the right.
+
+                **Characters:**
+                1. The 'host' (left) is described as: "${formState.hostDescription}". They should speak with a voice inspired by ElevenLabs voice ID "${formState.hostElevenLabsVoiceId}".
+                2. The 'expert' (right) is described as: "${formState.expertDescription}". They should speak with a voice inspired by ElevenLabs voice ID "${formState.expertElevenLabsVoiceId}".
+
+                **Action & Dialogue:**
+                Animate the two characters in the image talking based on the script below. Their expressions and gestures should match the tone of the dialogue. The camera should focus on the character who is speaking.
+
+                **Script:**
+                ---
+                ${formState.script}
+                ---
+
+                **Style:** The video should be well-lit, with a professional, interview-like quality. The animation should be smooth and natural.
+            `;
+            
+            const videoUrl = await generateVideo(
+                prompt,
+                { imageBytes: compositeImage.imageBytes, mimeType: compositeImage.mimeType },
+                onProgress
+            );
+
+            setAppStatus({ isLoading: false, message: 'Done!', error: null, videoUrl });
+        } catch (error) {
+            console.error(error);
+            const errorMessage = error instanceof Error ? error.message : "An unknown error occurred.";
+            setAppStatus({ isLoading: false, message: '', error: errorMessage, videoUrl: null });
+        }
+    };
+    
+    return (
+        <>
+            <Header />
+            <main className="container mx-auto p-4 pt-24 min-h-screen">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    {/* Left Column: Form */}
+                    <div className="bg-slate-800/50 p-6 rounded-lg border border-slate-700 space-y-6">
+                        <div>
+                            <h2 className="text-xl font-bold text-white">API Configuration</h2>
+                            <p className="text-sm text-slate-400 mb-4">Your keys are used to inform AI voice style.</p>
+                            <LabeledInput id="elevenLabsApiKey" label="ElevenLabs API Key" value={formState.elevenLabsApiKey} onChange={handleInputChange} placeholder="Enter your ElevenLabs API Key" type="password" />
+                        </div>
+                        
+                        <div className="border-t border-slate-700 pt-6">
+                            <h2 className="text-xl font-bold text-white">1. Set the Scene</h2>
+                            <ImageUploader id="backgroundFile" label="Background Image" onFileChange={handleFileChange} uploadText="a background image" />
+                        </div>
+
+                        <div className="border-t border-slate-700 pt-6">
+                            <h2 className="text-xl font-bold text-white">2. Define Characters</h2>
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+                                {/* Host Column */}
+                                <div className="space-y-4">
+                                    <h3 className="text-lg font-semibold text-sky-400">Host</h3>
+                                    <ImageUploader id="hostPhoto" label="Host Photo" onFileChange={handleHostPhotoChange} uploadText="the host's photo" />
+                                    <LabeledInput id="hostDescription" label="Host Description" value={formState.hostDescription} onChange={handleInputChange} placeholder="e.g., A charismatic host in a sharp suit." />
+                                    <LabeledInput id="hostElevenLabsVoiceId" label="ElevenLabs Voice ID" value={formState.hostElevenLabsVoiceId} onChange={handleInputChange} placeholder="e.g., '21m00Tcm4TlvDq8ikWAM'" helpText="Voice ID for the host's dialogue." />
+                                </div>
+                                {/* Expert Column */}
+                                <div className="space-y-4">
+                                    <h3 className="text-lg font-semibold text-teal-400">Expert</h3>
+                                    <ImageUploader id="expertPhoto" label="Expert Photo" onFileChange={handleExpertPhotoChange} uploadText="the expert's photo" />
+                                    <LabeledInput id="expertDescription" label="Expert Description" value={formState.expertDescription} onChange={handleInputChange} placeholder="e.g., A scientist with glasses." />
+                                    <LabeledInput id="expertElevenLabsVoiceId" label="ElevenLabs Voice ID" value={formState.expertElevenLabsVoiceId} onChange={handleInputChange} placeholder="e.g., '29vD33N1CtxCmqQRPOHJ'" helpText="Voice ID for the expert's dialogue." />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="border-t border-slate-700 pt-6">
+                            <h2 className="text-xl font-bold text-white">3. Write the Script</h2>
+                            <LabeledInput id="script" label="Dialogue Script" value={formState.script} onChange={handleInputChange} placeholder="Host: Welcome to the show!&#10;Expert: Glad to be here." isTextarea />
+                        </div>
+                        
+                        <button
+                            onClick={handleGenerateVideo}
+                            disabled={!isFormValid || appStatus.isLoading}
+                            className="w-full flex justify-center items-center gap-2 py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-sky-600 hover:bg-sky-700 disabled:bg-slate-600 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 focus:ring-offset-slate-900 transition-colors"
+                        >
+                            <FilmIcon className="w-5 h-5" />
+                            {appStatus.isLoading ? 'Generating...' : 'Generate Video'}
+                        </button>
+                    </div>
+
+                    {/* Right Column: Output */}
+                    <div className="bg-slate-800/20 p-6 rounded-lg border border-slate-700 min-h-[500px] lg:min-h-0 flex flex-col justify-center">
+                       {appStatus.isLoading && <Loader message={appStatus.message} />}
+                       {appStatus.error && <div className="text-center text-red-400"><p className="font-bold">Generation Failed</p><p>{appStatus.error}</p></div>}
+                       {appStatus.videoUrl && <VideoResult videoUrl={appStatus.videoUrl} />}
+                       {!appStatus.isLoading && !appStatus.error && !appStatus.videoUrl && (
+                           <div className="text-center text-slate-500">
+                               <FilmIcon className="mx-auto h-24 w-24" />
+                               <p className="mt-4 text-lg">Your generated video will appear here.</p>
+                               <p>Fill out the form to get started.</p>
+                           </div>
+                       )}
+                    </div>
+                </div>
+            </main>
+        </>
+    );
+};
+
+export default App;