[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # LivePortrait animation *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/nwpistols-projects/v0-live-portrait-animation) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/E4PcTCCGYTz) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/nwpistols-projects/v0-live-portrait-animation](https://vercel.com/nwpistols-projects/v0-live-portrait-animation)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/E4PcTCCGYTz](https://v0.app/chat/projects/E4PcTCCGYTz)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/api/generate/route.ts" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const apiKey = process.env.HUGGINGFACE_API_KEY if (!apiKey) { return NextResponse.json( { error: "HuggingFace API key not configured. Please add HUGGINGFACE_API_KEY to your environment variables." }, { status: 500 }, ) } const formData = await request.formData() const sourceImage = formData.get("source_image") as File const drivingVideo = formData.get("driving_video") as File if (!sourceImage || !drivingVideo) { return NextResponse.json({ error: "Both source image and driving video are required" }, { status: 400 }) } console.log("[v0] Calling HuggingFace LivePortrait API...") // Call HuggingFace Inference API for LivePortrait // Using the KwaiVGI/LivePortrait space const hfFormData = new FormData() hfFormData.append("source_image", sourceImage) hfFormData.append("driving_video", drivingVideo) const response = await fetch("https://api-inference.huggingface.co/models/KwaiVGI/LivePortrait", { method: "POST", headers: { Authorization: `Bearer ${apiKey}`, }, body: hfFormData, }) if (!response.ok) { const errorText = await response.text() console.error("[v0] HuggingFace API error:", errorText) return NextResponse.json( { error: `HuggingFace API error: ${response.status} - ${errorText}` }, { status: response.status }, ) } // Get the video blob from the response const videoBlob = await response.blob() // Convert blob to base64 for client display const buffer = await videoBlob.arrayBuffer() const base64 = Buffer.from(buffer).toString("base64") const videoUrl = `data:video/mp4;base64,${base64}` console.log("[v0] Successfully generated talking avatar") return NextResponse.json({ videoUrl }) } catch (error) { console.error("[v0] Error in generate API:", error) return NextResponse.json( { error: error instanceof Error ? error.message : "An unexpected error occurred" }, { status: 500 }, ) } } [V0_FILE]css:file="app/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.app', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Upload, Sparkles, Video, ImageIcon, Play } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" export default function Home() { const [sourceImage, setSourceImage] = useState(null) const [drivingVideo, setDrivingVideo] = useState(null) const [isProcessing, setIsProcessing] = useState(false) const [result, setResult] = useState(null) const [error, setError] = useState(null) const handleImageUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => setSourceImage(e.target?.result as string) reader.readAsDataURL(file) } } const handleVideoUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => setDrivingVideo(e.target?.result as string) reader.readAsDataURL(file) } } const handleGenerate = async () => { if (!sourceImage || !drivingVideo) return setIsProcessing(true) setError(null) setResult(null) try { // Convert base64 to File objects for API const imageBlob = await fetch(sourceImage).then((r) => r.blob()) const videoBlob = await fetch(drivingVideo).then((r) => r.blob()) const formData = new FormData() formData.append("source_image", imageBlob, "portrait.jpg") formData.append("driving_video", videoBlob, "driving.mp4") const response = await fetch("/api/generate", { method: "POST", body: formData, }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.error || "Failed to generate avatar") } const data = await response.json() setResult(data.videoUrl) } catch (err) { console.error("[v0] Error generating avatar:", err) setError(err instanceof Error ? err.message : "An error occurred while generating the avatar") } finally { setIsProcessing(false) } } const examplePortraits = [ { src: "/mona-lisa-portrait.jpg", label: "Mona Lisa" }, { src: "/professional-woman-portrait.png", label: "Portrait 1" }, { src: "/man-with-beard-portrait.jpg", label: "Portrait 2" }, { src: "/young-woman-smiling-portrait.png", label: "Portrait 3" }, ] const exampleVideos = [ { src: "/person-talking-video-thumbnail.jpg", label: "Talking 1" }, { src: "/person-speaking-video-thumbnail.jpg", label: "Talking 2" }, { src: "/facial-expressions-video-thumbnail.jpg", label: "Expressions" }, ] return (

{/* Header */}

LivePortrait

AI-Powered Talking Avatar Generator

{/* Hero Section */}

Bring Your Photos to Life

Transform static portraits into realistic talking avatars. Upload a photo and a driving video to create stunning animated results with natural lip sync and facial expressions.

{/* Upload Section */}

{/* Source Portrait Upload */}

Step 1: Source Portrait

Upload any portrait image (any aspect ratio)

{sourceImage ? ( Source portrait

) : ( <>

Drop Image Here

Click to Upload

)}

{/* Example Portraits */}

Examples

{examplePortraits.map((example, idx) => ( ))}

{/* Driving Video Upload */}

Upload a video with facial movements (1:1 aspect ratio recommended)

{drivingVideo ? (

{/* Example Videos */}

Examples

{exampleVideos.map((example, idx) => ( ))}

{/* Tips Section */}

Tips for Best Results

• Focus on the head in your driving video, minimize shoulder movement
• Use a neutral expression in the first frame of your driving video
• Ensure good lighting in both the portrait and driving video
• Square (1:1) aspect ratio works best for driving videos

{/* Generate Button */}

{!sourceImage || !drivingVideo ? (

Upload both a portrait and driving video to continue

) : null}

{error && (

Error

{error}

)} {/* Result Section */} {result && (

Your Talking Avatar

)}

HuggingFace API Key Required

To enable video generation, add your HuggingFace API key as an environment variable named{" "} HUGGINGFACE_API_KEY. You can get a free API key from{" "} huggingface.co/settings/tokens . Add it in the Vars section of the sidebar.

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from 'react' import { cn } from '@/lib/utils' function Card({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "eslint .", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]jpg:file="public/animated-talking-avatar-result.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/tstP_laFWXL9CJNzLTGBbD/public/animated-talking-avatar-result.jpg" [V0_FILE]jpg:file="public/facial-expressions-video-thumbnail.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/zfrI_lHpm2WpuE45u9iQlY/public/facial-expressions-video-thumbnail.jpg" [V0_FILE]jpg:file="public/man-with-beard-portrait.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/rUFBZQ70k-oZW6p5oBVKVK/public/man-with-beard-portrait.jpg" [V0_FILE]jpg:file="public/mona-lisa-portrait.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/W-X8z3vVZg-j6YZzYW_NXP/public/mona-lisa-portrait.jpg" [V0_FILE]jpg:file="public/person-speaking-video-thumbnail.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/LnU4knhinxBBxtitZr4knm/public/person-speaking-video-thumbnail.jpg" [V0_FILE]jpg:file="public/person-talking-video-thumbnail.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/wy8hDFWN0UCHzPBGKBUUdh/public/person-talking-video-thumbnail.jpg" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" [V0_FILE]png:file="public/professional-woman-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/t_M2kY-SEsP1pmWWemoi4A/public/professional-woman-portrait.png" [V0_FILE]png:file="public/young-woman-smiling-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/OSn-7O9q118tEItJGkx4eg/public/young-woman-smiling-portrait.png"

Bring Your Photos to Life

Step 1: Source Portrait

Step 2: Driving Video

Tips for Best Results

Error

Your Talking Avatar

HuggingFace API Key Required

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This