Spaces:

EmmyHenz001
/

veo3

Runtime error

File size: 27,075 Bytes

d592711

from flask import Flask, request, jsonify, send_file, render_template_string
from flask_cors import CORS
from huggingface_hub import InferenceClient
import tempfile
import os
import base64
from io import BytesIO
from PIL import Image
import uuid
from pathlib import Path

app = Flask(__name__)
CORS(app)

# Configuration
HF_TOKEN = os.environ.get("HF_TOKEN", "your_huggingface_token_here")
TEMP_DIR = Path(tempfile.gettempdir()) / "veo_videos"
TEMP_DIR.mkdir(exist_ok=True)

# Initialize the client
client = InferenceClient(
    provider="fal-ai",
    api_key=HF_TOKEN,
    bill_to="huggingface",
)

def cleanup_old_files():
    """Clean up files older than 1 hour"""
    import time
    current_time = time.time()
    for file_path in TEMP_DIR.glob("*.mp4"):
        if current_time - file_path.stat().st_mtime > 3600:
            try:
                file_path.unlink()
            except:
                pass

# HTML Template for the website
HTML_TEMPLATE = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Veo 3.1 Video Generator</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .tabs {
            display: flex;
            background: #f5f5f5;
            border-bottom: 2px solid #ddd;
        }
        
        .tab {
            flex: 1;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: 600;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
        }
        
        .tab:hover {
            background: #e0e0e0;
        }
        
        .tab.active {
            background: white;
            color: #667eea;
            border-bottom: 3px solid #667eea;
        }
        
        .tab-content {
            display: none;
            padding: 40px;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
            font-size: 1em;
        }
        
        input[type="text"],
        textarea {
            width: 100%;
            padding: 15px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 1em;
            transition: border 0.3s;
            font-family: inherit;
        }
        
        input[type="text"]:focus,
        textarea:focus {
            outline: none;
            border-color: #667eea;
        }
        
        textarea {
            resize: vertical;
            min-height: 120px;
        }
        
        .file-upload {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        
        .file-upload input[type="file"] {
            display: none;
        }
        
        .file-upload-btn {
            display: block;
            padding: 15px;
            background: #f5f5f5;
            border: 2px dashed #ddd;
            border-radius: 10px;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s;
        }
        
        .file-upload-btn:hover {
            background: #e0e0e0;
            border-color: #667eea;
        }
        
        .image-preview {
            margin-top: 15px;
            max-width: 100%;
            border-radius: 10px;
            display: none;
        }
        
        .image-preview img {
            max-width: 100%;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 40px;
            border: none;
            border-radius: 10px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            width: 100%;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 30px;
        }
        
        .loading.active {
            display: block;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .result {
            display: none;
            margin-top: 30px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 10px;
        }
        
        .result.active {
            display: block;
        }
        
        .result video {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .download-btn {
            margin-top: 15px;
            background: #4CAF50;
        }
        
        .error {
            background: #f44336;
            color: white;
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            display: none;
        }
        
        .error.active {
            display: block;
        }
        
        .api-docs {
            padding: 40px;
            background: #f9f9f9;
        }
        
        .api-docs h3 {
            color: #667eea;
            margin-bottom: 15px;
        }
        
        .code-block {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 20px;
            border-radius: 10px;
            overflow-x: auto;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
        }
        
        .examples {
            margin-top: 30px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }
        
        .example-card {
            background: white;
            padding: 15px;
            border-radius: 10px;
            cursor: pointer;
            transition: transform 0.2s;
            border: 2px solid #ddd;
        }
        
        .example-card:hover {
            transform: translateY(-3px);
            border-color: #667eea;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎬 AI Video Generator</h1>
            <p>Powered by Veo 3.1 Fast Model</p>
        </div>
        
        <div class="tabs">
            <div class="tab active" onclick="switchTab('text-to-video')">
                📝 Text to Video
            </div>
            <div class="tab" onclick="switchTab('image-to-video')">
                🖼️ Image to Video
            </div>
            <div class="tab" onclick="switchTab('api-docs')">
                📚 API Docs
            </div>
        </div>
        
        <!-- Text to Video Tab -->
        <div id="text-to-video" class="tab-content active">
            <h2>Generate Video from Text</h2>
            <form id="text-form" onsubmit="generateTextVideo(event)">
                <div class="form-group">
                    <label for="text-prompt">Enter Your Prompt</label>
                    <textarea id="text-prompt" placeholder="Describe the video you want to create... (e.g., 'A young man walking on the street during sunset')" required></textarea>
                </div>
                
                <button type="submit" id="text-btn">🎬 Generate Video</button>
            </form>
            
            <div class="examples">
                <div class="example-card" onclick="setTextPrompt('A serene beach at sunset with gentle waves')">
                    🏖️ Beach Sunset
                </div>
                <div class="example-card" onclick="setTextPrompt('A bustling city street with neon lights at night')">
                    🌃 City Night
                </div>
                <div class="example-card" onclick="setTextPrompt('A majestic eagle soaring through mountain peaks')">
                    🦅 Eagle Flight
                </div>
                <div class="example-card" onclick="setTextPrompt('Cherry blossoms falling in slow motion in a Japanese garden')">
                    🌸 Cherry Blossoms
                </div>
            </div>
            
            <div id="text-loading" class="loading">
                <div class="spinner"></div>
                <p>Generating your video... This may take a minute.</p>
            </div>
            
            <div id="text-error" class="error"></div>
            
            <div id="text-result" class="result">
                <h3>Your Generated Video</h3>
                <video id="text-video" controls autoplay></video>
                <button class="download-btn" onclick="downloadVideo('text')">⬇️ Download Video</button>
            </div>
        </div>
        
        <!-- Image to Video Tab -->
        <div id="image-to-video" class="tab-content">
            <h2>Animate Your Image</h2>
            <form id="image-form" onsubmit="generateImageVideo(event)">
                <div class="form-group">
                    <label>Upload Image</label>
                    <div class="file-upload">
                        <input type="file" id="image-input" accept="image/*" onchange="previewImage()" required>
                        <label for="image-input" class="file-upload-btn">
                            📁 Click to upload image
                        </label>
                    </div>
                    <div id="image-preview" class="image-preview">
                        <img id="preview-img" src="" alt="Preview">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="image-prompt">Motion Prompt</label>
                    <textarea id="image-prompt" placeholder="Describe how the image should move... (e.g., 'The cat starts to dance')" required></textarea>
                </div>
                
                <button type="submit" id="image-btn">🎬 Animate Image</button>
            </form>
            
            <div id="image-loading" class="loading">
                <div class="spinner"></div>
                <p>Animating your image... This may take a minute.</p>
            </div>
            
            <div id="image-error" class="error"></div>
            
            <div id="image-result" class="result">
                <h3>Your Animated Video</h3>
                <video id="image-video" controls autoplay></video>
                <button class="download-btn" onclick="downloadVideo('image')">⬇️ Download Video</button>
            </div>
        </div>
        
        <!-- API Documentation Tab -->
        <div id="api-docs" class="tab-content">
            <div class="api-docs">
                <h2>API Documentation</h2>
                <p>Use these endpoints to integrate video generation into your applications.</p>
                
                <h3>1. Text to Video</h3>
                <p><strong>Endpoint:</strong> POST /api/text-to-video</p>
                <div class="code-block">
curl -X POST http://localhost:5000/api/text-to-video \\
  -H "Content-Type: application/json" \\
  -d '{"prompt": "A young man walking on the street during sunset"}'
                </div>
                
                <h3>2. Image to Video</h3>
                <p><strong>Endpoint:</strong> POST /api/image-to-video</p>
                <div class="code-block">
curl -X POST http://localhost:5000/api/image-to-video \\
  -F "image=@photo.jpg" \\
  -F "prompt=The person starts walking forward"
                </div>
                
                <h3>Python Example</h3>
                <div class="code-block">
import requests

# Text to Video
response = requests.post('http://localhost:5000/api/text-to-video', 
    json={'prompt': 'A sunset over the ocean'})
data = response.json()
print(data['message'])

# Image to Video
with open('image.jpg', 'rb') as f:
    response = requests.post('http://localhost:5000/api/image-to-video',
        files={'image': f},
        data={'prompt': 'Camera zooms in slowly'})
print(response.json())
                </div>
                
                <h3>Response Format</h3>
                <div class="code-block">
{
  "success": true,
  "video_id": "uuid-here",
  "video_base64": "base64_encoded_video",
  "prompt": "your prompt",
  "message": "Video generated successfully"
}
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let currentVideoBlob = null;
        let currentVideoType = null;
        
        function switchTab(tabName) {
            // Hide all tabs
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // Show selected tab
            document.getElementById(tabName).classList.add('active');
            event.target.classList.add('active');
        }
        
        function setTextPrompt(prompt) {
            document.getElementById('text-prompt').value = prompt;
        }
        
        function previewImage() {
            const input = document.getElementById('image-input');
            const preview = document.getElementById('image-preview');
            const img = document.getElementById('preview-img');
            
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    img.src = e.target.result;
                    preview.style.display = 'block';
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
        
        async function generateTextVideo(event) {
            event.preventDefault();
            
            const prompt = document.getElementById('text-prompt').value;
            const btn = document.getElementById('text-btn');
            const loading = document.getElementById('text-loading');
            const error = document.getElementById('text-error');
            const result = document.getElementById('text-result');
            
            // Reset states
            loading.classList.add('active');
            error.classList.remove('active');
            result.classList.remove('active');
            btn.disabled = true;
            
            try {
                const response = await fetch('/api/text-to-video', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ prompt })
                });
                
                const data = await response.json();
                
                if (!response.ok) {
                    throw new Error(data.error || 'Failed to generate video');
                }
                
                // Convert base64 to blob
                const videoData = atob(data.video_base64);
                const videoArray = new Uint8Array(videoData.length);
                for (let i = 0; i < videoData.length; i++) {
                    videoArray[i] = videoData.charCodeAt(i);
                }
                const blob = new Blob([videoArray], { type: 'video/mp4' });
                currentVideoBlob = blob;
                currentVideoType = 'text';
                
                // Display video
                const videoElement = document.getElementById('text-video');
                videoElement.src = URL.createObjectURL(blob);
                
                result.classList.add('active');
                
            } catch (err) {
                error.textContent = err.message;
                error.classList.add('active');
            } finally {
                loading.classList.remove('active');
                btn.disabled = false;
            }
        }
        
        async function generateImageVideo(event) {
            event.preventDefault();
            
            const imageInput = document.getElementById('image-input');
            const prompt = document.getElementById('image-prompt').value;
            const btn = document.getElementById('image-btn');
            const loading = document.getElementById('image-loading');
            const error = document.getElementById('image-error');
            const result = document.getElementById('image-result');
            
            // Reset states
            loading.classList.add('active');
            error.classList.remove('active');
            result.classList.remove('active');
            btn.disabled = true;
            
            try {
                const formData = new FormData();
                formData.append('image', imageInput.files[0]);
                formData.append('prompt', prompt);
                
                const response = await fetch('/api/image-to-video', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                if (!response.ok) {
                    throw new Error(data.error || 'Failed to generate video');
                }
                
                // Convert base64 to blob
                const videoData = atob(data.video_base64);
                const videoArray = new Uint8Array(videoData.length);
                for (let i = 0; i < videoData.length; i++) {
                    videoArray[i] = videoData.charCodeAt(i);
                }
                const blob = new Blob([videoArray], { type: 'video/mp4' });
                currentVideoBlob = blob;
                currentVideoType = 'image';
                
                // Display video
                const videoElement = document.getElementById('image-video');
                videoElement.src = URL.createObjectURL(blob);
                
                result.classList.add('active');
                
            } catch (err) {
                error.textContent = err.message;
                error.classList.add('active');
            } finally {
                loading.classList.remove('active');
                btn.disabled = false;
            }
        }
        
        function downloadVideo(type) {
            if (!currentVideoBlob) return;
            
            const url = URL.createObjectURL(currentVideoBlob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `generated_video_${Date.now()}.mp4`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>
"""

@app.route('/')
def index():
    """Render the main website"""
    return render_template_string(HTML_TEMPLATE)

@app.route('/health', methods=['GET'])
def health_check():
    """Health check endpoint"""
    return jsonify({
        "status": "healthy",
        "service": "Veo 3.1 Video Generation API",
        "version": "1.0"
    })

@app.route('/api/text-to-video', methods=['POST'])
def text_to_video():
    """Generate video from text prompt"""
    try:
        data = request.get_json()
        
        if not data or 'prompt' not in data:
            return jsonify({
                "error": "Missing 'prompt' in request body"
            }), 400
        
        prompt = data.get('prompt', '').strip()
        
        if not prompt:
            return jsonify({
                "error": "Prompt cannot be empty"
            }), 400
        
        print(f"Generating video from prompt: {prompt[:50]}...")
        video_bytes = client.text_to_video(
            prompt,
            model="akhaliq/veo3.1-fast",
        )
        
        video_id = str(uuid.uuid4())
        video_path = TEMP_DIR / f"{video_id}.mp4"
        
        with open(video_path, "wb") as f:
            f.write(video_bytes)
        
        cleanup_old_files()
        
        return_type = data.get('return_type', 'base64')
        
        if return_type == 'file':
            return send_file(
                video_path,
                mimetype='video/mp4',
                as_attachment=True,
                download_name=f"generated_{video_id}.mp4"
            )
        else:
            video_base64 = base64.b64encode(video_bytes).decode('utf-8')
            return jsonify({
                "success": True,
                "video_id": video_id,
                "video_base64": video_base64,
                "prompt": prompt,
                "message": "Video generated successfully"
            })
    
    except Exception as e:
        print(f"Error in text_to_video: {str(e)}")
        return jsonify({
            "error": f"Failed to generate video: {str(e)}"
        }), 500

@app.route('/api/image-to-video', methods=['POST'])
def image_to_video():
    """Generate video from image and motion prompt"""
    try:
        if request.is_json:
            data = request.get_json()
            
            if not data or 'image_base64' not in data or 'prompt' not in data:
                return jsonify({
                    "error": "Missing 'image_base64' or 'prompt' in request body"
                }), 400
            
            image_data = base64.b64decode(data['image_base64'])
            prompt = data.get('prompt', '').strip()
            
        else:
            if 'image' not in request.files:
                return jsonify({
                    "error": "Missing 'image' file in request"
                }), 400
            
            image_file = request.files['image']
            image_data = image_file.read()
            prompt = request.form.get('prompt', '').strip()
        
        if not prompt:
            return jsonify({
                "error": "Prompt cannot be empty"
            }), 400
        
        try:
            img = Image.open(BytesIO(image_data))
            if img.mode != 'RGB':
                img = img.convert('RGB')
            
            img_buffer = BytesIO()
            img.save(img_buffer, format='PNG')
            image_data = img_buffer.getvalue()
        except Exception as e:
            return jsonify({
                "error": f"Invalid image format: {str(e)}"
            }), 400
        
        print(f"Generating video from image with prompt: {prompt[:50]}...")
        video_bytes = client.image_to_video(
            image_data,
            prompt=prompt,
            model="akhaliq/veo3.1-fast-image-to-video",
        )
        
        video_id = str(uuid.uuid4())
        video_path = TEMP_DIR / f"{video_id}.mp4"
        
        with open(video_path, "wb") as f:
            f.write(video_bytes)
        
        cleanup_old_files()
        
        return_type = request.form.get('return_type') if not request.is_json else request.get_json().get('return_type', 'base64')
        
        if return_type == 'file':
            return send_file(
                video_path,
                mimetype='video/mp4',
                as_attachment=True,
                download_name=f"animated_{video_id}.mp4"
            )
        else:
            video_base64 = base64.b64encode(video_bytes).decode('utf-8')
            return jsonify({
                "success": True,
                "video_id": video_id,
                "video_base64": video_base64,
                "prompt": prompt,
                "message": "Video generated successfully"
            })
    
    except Exception as e:
        print(f"Error in image_to_video: {str(e)}")
        return jsonify({
            "error": f"Failed to generate video: {str(e)}"
        }), 500

@app.route('/api/download/<video_id>', methods=['GET'])
def download_video(video_id):
    """Download a previously generated video by ID"""
    try:
        video_path = TEMP_DIR / f"{video_id}.mp4"
        
        if not video_path.exists():
            return jsonify({
                "error": "Video not found or expired"
            }), 404
        
        return send_file(
            video_path,
            mimetype='video/mp4',
            as_attachment=True,
            download_name=f"video_{video_id}.mp4"
        )
    
    except Exception as e:
        return jsonify({
            "error": f"Failed to download video: {str(e)}"
        }), 500

if __name__ == '__main__':
    print("""
    ╔═══════════════════════════════════════════════════╗
    ║   Veo 3.1 Video Generation - Website + API       ║
    ╚═══════════════════════════════════════════════════╝
    
    📝 Set your HF_TOKEN environment variable:
       export HF_TOKEN=your_huggingface_token_here
    
    🌐 Website: http://localhost:5000
    🔌 API Endpoints:
       - POST /api/text-to-video
       - POST /api/image-to-video
       - GET  /api/download/<video_id>
    
    🚀 Server starting...
    """)
    
    app.run(
        host='0.0.0.0',
        port=7860,
        debug=True
    )