/**
* @license
* SPDX-License-Identifier: Apache-2.0
*/
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { AppState } from './types';
import { generateTextImage, generateTextVideo, generateStyleSuggestion } from './services/geminiService';
import { getRandomStyle, fileToBase64, TYPOGRAPHY_SUGGESTIONS, createGifFromVideo } from './utils';
import { Loader2, Paintbrush, Clapperboard, Play, ExternalLink, Type, Sparkles, Image as ImageIcon, X, Upload, Download, FileType, Wand2, Volume2, VolumeX, ChevronLeft, ChevronRight, ArrowLeft, Video as VideoIcon, Key, Info, ShieldCheck, Box, Code, Copy, Check } from 'lucide-react';
import ThreeDLogo from './components/ThreeDLogo';
interface Video {
id: string;
title: string;
videoUrl: string;
description: string;
}
const staticFilesUrl = 'https://www.gstatic.com/aistudio/starter-apps/type-motion/';
export const MOCK_VIDEOS: Video[] = [
{
id: '1',
title: "Cloud Formations",
videoUrl: staticFilesUrl + 'clouds_v2.mp4',
description: "Text formed by fluffy white clouds in a deep blue summer sky.",
},
{
id: '2',
title: "Elemental Fire",
videoUrl: staticFilesUrl + 'fire_v2.mp4',
description: "Flames erupt into text in an arid dry environment.",
},
{
id: '3',
title: "Mystic Smoke",
videoUrl: staticFilesUrl + 'smoke_v2.mp4',
description: "A sudden wave of smoke swirling to reveal the text.",
},
{
id: '4',
title: "Water Blast",
videoUrl: staticFilesUrl + 'water_v2.mp4',
description: "A wall of water punching through text with power.",
},
];
const ApiKeyDialog: React.FC<{ isOpen: boolean; onClose: () => void; onSelect: () => void }> = ({ isOpen, onClose, onSelect }) => {
if (!isOpen) return null;
return (
(AppState.IDLE);
const [viewMode, setViewMode] = useState<'gallery' | 'create'>('gallery');
const [bannerMode, setBannerMode] = useState<'video' | '3d'>('video');
const [showKeyDialog, setShowKeyDialog] = useState(false);
const [showCodeModal, setShowCodeModal] = useState(false);
const [copied, setCopied] = useState(false);
const [inputText, setInputText] = useState("");
const [inputStyle, setInputStyle] = useState("");
const [typographyPrompt, setTypographyPrompt] = useState("");
const [referenceImage, setReferenceImage] = useState(null);
const [imageSrc, setImageSrc] = useState(null);
const [videoSrc, setVideoSrc] = useState(null);
const [statusMessage, setStatusMessage] = useState("");
const [isGifGenerating, setIsGifGenerating] = useState(false);
const [isSuggestingStyle, setIsSuggestingStyle] = useState(false);
const fileInputRef = useRef(null);
useEffect(() => {
if (state === AppState.GENERATING_IMAGE || state === AppState.GENERATING_VIDEO || state === AppState.PLAYING) {
setViewMode('create');
}
}, [state]);
const handleSelectKey = async () => {
setShowKeyDialog(false);
if (window.aistudio && window.aistudio.openSelectKey) {
await window.aistudio.openSelectKey();
// Assume selection success to avoid delay
if (state === AppState.IDLE && viewMode === 'gallery') {
setViewMode('create');
}
}
};
const handleMainCta = async () => {
const isKeySelected = await window.aistudio?.hasSelectedApiKey();
if (!isKeySelected) {
setShowKeyDialog(true);
} else {
setViewMode('create');
window.scrollTo({ top: 0, behavior: 'smooth' });
}
};
const startProcess = async (e: React.FormEvent) => {
e.preventDefault();
if (!inputText.trim()) return;
// Final key check before spending tokens
const keySelected = await window.aistudio?.hasSelectedApiKey();
if (!keySelected) {
setShowKeyDialog(true);
return;
}
setState(AppState.GENERATING_IMAGE);
setIsGifGenerating(false);
if (videoSrc && videoSrc.startsWith('blob:')) URL.revokeObjectURL(videoSrc);
setVideoSrc(null);
setImageSrc(null);
const styleToUse = inputStyle.trim() || getRandomStyle();
setStatusMessage(`Designing "${inputText}"...`);
try {
const { data: b64Image, mimeType } = await generateTextImage({
text: inputText,
style: styleToUse,
typographyPrompt: typographyPrompt,
referenceImage: referenceImage || undefined
});
setImageSrc(`data:${mimeType};base64,${b64Image}`);
setState(AppState.GENERATING_VIDEO);
setStatusMessage("Animating...");
const videoUrl = await generateTextVideo(inputText, b64Image, mimeType, styleToUse);
setVideoSrc(videoUrl);
setState(AppState.PLAYING);
setStatusMessage("Done.");
} catch (err: any) {
console.error(err);
const msg = err.message || "";
if (msg.includes("Requested entity was not found") || msg.includes("404")) {
setShowKeyDialog(true);
setState(AppState.IDLE);
} else {
setStatusMessage(msg || "Something went wrong creating your art.");
setState(AppState.ERROR);
}
}
};
const reset = () => {
setState(AppState.IDLE);
setVideoSrc(null);
setImageSrc(null);
setIsGifGenerating(false);
};
const handleDownload = () => {
if (videoSrc) {
const a = document.createElement('a');
a.href = videoSrc;
a.download = `typemotion-${Date.now()}.mp4`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
};
const handleDownloadGif = async () => {
if (!videoSrc) return;
setIsGifGenerating(true);
try {
const gifBlob = await createGifFromVideo(videoSrc);
const gifUrl = URL.createObjectURL(gifBlob);
const a = document.createElement('a');
a.href = gifUrl;
a.download = `typemotion-${Date.now()}.gif`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(gifUrl);
} catch (error) {
alert("Could not generate GIF from this video.");
} finally {
setIsGifGenerating(false);
}
};
const getBloggerCode = () => {
const safeText = inputText.replace(/'/g, "\\'");
return `
`;
};
const renderAppContent = () => {
if (state === AppState.ERROR) {
return (
);
}
if (state === AppState.GENERATING_IMAGE || state === AppState.GENERATING_VIDEO || state === AppState.PLAYING) {
return (
Paid API Key Required
To use cinematic video generation models (like Veo), you must select an API key from a Google Cloud project with billing enabled. Free-tier keys do not support these high-end features.
• Make sure your project is linked to a valid billing account.
• Check the pricing documentation for more details.
{video.title}
{video.description}
{MOCK_VIDEOS.map((_, idx) => (
))}
Generation Failed
{statusMessage}
{bannerMode === 'video' ? (
<>
);
}
return (
{(state === AppState.GENERATING_IMAGE) && !imageSrc && (
)}
{imageSrc && !videoSrc && 
}
{imageSrc && state === AppState.GENERATING_VIDEO && (
) : (
Designing Typography...
3D Interactive
{bannerMode === 'video' ? (
<>
) : (
)}
