import React, { useState } from 'react'; import { generateVideo } from '../services/geminiService'; import { AspectRatio } from '../types'; import Loader from './Loader'; import { LandscapeIcon, PortraitIcon, SparklesIcon } from './icons'; interface VideoGeneratorProps { onApiKeyError: () => void; } const VideoGenerator: React.FC
= ({ onApiKeyError }) => { const initialPrompt = "A tiny orange-and-white fluffy kitten, about 2 months old, with big teary blue eyes, stands trembling between speeding cars on a busy asphalt highway. The kitten’s fur is slightly dirty and windblown. A torn cardboard box lies nearby. Background shows blurred cars passing fast, grey sky above. Realistic cinematic lighting, shallow depth of field, emotional atmosphere, high detail."; const [prompt, setPrompt] = useState
(initialPrompt); const [aspectRatio, setAspectRatio] = useState
('16:9'); const [isLoading, setIsLoading] = useState
(false); const [loadingMessage, setLoadingMessage] = useState
(''); const [videoUrl, setVideoUrl] = useState
(null); const [error, setError] = useState
(null); const handleGenerate = async () => { setIsLoading(true); setError(null); setVideoUrl(null); try { const url = await generateVideo(prompt, aspectRatio, setLoadingMessage); setVideoUrl(url); } catch (e: unknown) { const err = e as Error; if (err.message.includes("Requested entity was not found")) { setError("API Key error. Please re-select your API key."); onApiKeyError(); } else { try { // The API often returns errors as a JSON string in the message const errorJson = JSON.parse(err.message); if (errorJson?.error?.status === 'RESOURCE_EXHAUSTED') { setError('QUOTA_EXCEEDED'); } else { setError(errorJson?.error?.message || err.message); } } catch (parseError) { // The error message is not a JSON string. setError(err.message); } } } finally { setIsLoading(false); setLoadingMessage(''); } }; const AspectRatioButton = ({ value, label, icon }: { value: AspectRatio, label: string, icon: React.ReactElement }) => (
setAspectRatio(value)} className={`flex items-center justify-center gap-2 w-full px-4 py-3 rounded-md text-sm font-medium transition-colors ${ aspectRatio === value ? 'bg-purple-600 text-white shadow-lg' : 'bg-gray-700 text-gray-300 hover:bg-gray-600' }`} > {icon} {label}
); return (
{/* Control Panel */}
Video Prompt
Describe the video you want to create. Be as detailed as possible for the best results.
setPrompt(e.target.value)} placeholder="e.g., A majestic dragon flying through a futuristic city..." className="w-full h-48 p-3 bg-gray-900/50 text-gray-200 border border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:outline-none transition resize-none flex-grow" /> <div className="mt-6"> <h3 className="text-lg font-semibold text-white mb-3">Aspect Ratio</h3> <div className="grid grid-cols-2 gap-4"> <AspectRatioButton value="16:9" label="Landscape" icon={<LandscapeIcon className="w-5 h-5"/>} /> <AspectRatioButton value="9:16" label="Portrait" icon={<PortraitIcon className="w-5 h-5"/>} /> </div> </div> <button onClick={handleGenerate} disabled={isLoading || !prompt.trim()} className="mt-8 w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-bold py-3 px-6 rounded-lg hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed transition-transform transform hover:scale-105 flex items-center justify-center gap-2" > <SparklesIcon className="w-5 h-5" /> Generate Video </button> </div> {/* Display Panel */} <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 shadow-2xl flex items-center justify-center min-h-[300px] lg:min-h-0 relative aspect-video"> {isLoading && <Loader message={loadingMessage} />} {!isLoading && error && ( <div className="text-center text-red-400"> <h3 className="font-bold text-lg">Error</h3> {error === 'QUOTA_EXCEEDED' ? ( <p className="text-sm"> You've exceeded your API quota. Please check your{' '} <a href="https://ai.google.dev/gemini-api/docs/billing" target="_blank" rel="noopener noreferrer" className="underline hover:text-red-300" > plan and billing details </a>. </p> ) : ( <p className="text-sm">{error}</p> )} </div> )} {!isLoading && !error && videoUrl && ( <video src={videoUrl} controls autoPlay loop className="w-full h-full rounded-lg object-contain" /> )} {!isLoading && !error && !videoUrl && ( <div className="text-center text-gray-500"> <p>Your generated video will appear here.</p> </div> )} </div> </div> </div> ); }; export default VideoGenerator;</body></html>