Spaces:

prodevroger
/

vid3

Sleeping

File size: 7,744 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Talking Avatar Generator</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet">
    
    <!-- Custom CSS -->
     <style>
        /* Custom Bootstrap overrides */
:root {
  --primary-color: #4e73df;
  --secondary-color: #858796;
  --success-color: #1cc88a;
}

body {
  background-color: #f8f9fc;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.card {
  border: none;
  border-radius: 0.35rem;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.card-header {
  background-color: var(--primary-color);
  border-bottom: none;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover {
  background-color: #2e59d9;
  border-color: #2653d4;
}

/* Upload area styling */
.upload-area {
  border: 2px dashed #d1d3e2;
  border-radius: 0.35rem;
  padding: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-area:hover {
  border-color: var(--primary-color);
  background-color: rgba(78, 115, 223, 0.05);
}

.upload-area i {
  font-size: 3rem;
  color: var(--secondary-color);
  margin-bottom: 1rem;
}

/* Video result styling */
#result {
  transition: all 0.3s;
}

#outputVideo {
  border-radius: 0.35rem;
  background-color: #000;
}

/* Loading spinner */
.spinner-border {
  width: 1.2rem;
  height: 1.2rem;
  border-width: 0.15em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .card-body {
    padding: 1.25rem;
  }
  
  .upload-area {
    padding: 1.5rem;
  }
}

/* Animation for processing state */
@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.processing {
  animation: pulse 1.5s infinite;
}
     </style>
</head>
<body>
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header text-white">
                        <h4 class="mb-0"><i class="fas fa-video me-2"></i>AI Talking Avatar Generator</h4>
                    </div>
                    <div class="card-body">
                        <form id="avatarForm" enctype="multipart/form-data">
                            <!-- Image Upload -->
                            <div class="mb-4">
                                <label class="form-label">Upload Photo</label>
                                <div class="upload-area" onclick="document.getElementById('imageInput').click()">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                    <p class="mb-0">Click to upload an image</p>
                                    <small class="text-muted">Supports JPG, PNG formats</small>
                                </div>
                                <input type="file" id="imageInput" class="d-none" accept="image/*" required>
                            </div>

                            <!-- Text Input -->
                            <div class="mb-4">
                                <label for="textInput" class="form-label">Enter Text</label>
                                <textarea id="textInput" class="form-control" rows="4" 
                                          placeholder="Enter the text you want the avatar to speak..." required></textarea>
                            </div>

                            <!-- Submit Button -->
                            <button type="submit" class="btn btn-primary btn-lg w-100">
                                <i class="fas fa-magic me-2"></i>Generate Video
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Result Section -->
                <div id="result" class="card mt-4 d-none">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-play-circle me-2"></i>Generated Video</h5>
                    </div>
                    <div class="card-body text-center">
                        <video id="outputVideo" controls class="w-100 mb-3" style="max-height: 400px;"></video>
                        <button id="downloadBtn" class="btn btn-success">
                            <i class="fas fa-download me-2"></i>Download Video
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // Debug: Check if script is loaded
console.log('Scripts.js loaded successfully');

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing form handler');
    
    const form = document.getElementById('avatarForm');
    if (!form) {
        console.error('Avatar form not found!');
        return;
    }

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        console.log('Form submitted');
        
        const imageInput = document.getElementById('imageInput');
        const textInput = document.getElementById('textInput');
        
        if (!imageInput.files[0]) {
            alert('Please select an image');
            return;
        }
        
        if (!textInput.value.trim()) {
            alert('Please enter some text');
            return;
        }
        
        const formData = new FormData();
        formData.append('image', imageInput.files[0]);
        formData.append('text', textInput.value);

        // Show loading state
        const btn = document.querySelector('button[type="submit"]');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span> Processing...';

        try {
            console.log('Sending request to /generate');
            const response = await fetch('/generate', {
                method: 'POST',
                body: formData
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            console.log('Response received:', data);
            
            if (data.error) {
                throw new Error(data.error);
            }
            
            // Display result
            const video = document.getElementById('outputVideo');
            video.src = data.video;
            document.getElementById('result').classList.remove('d-none');
            
            // Set up download
            document.getElementById('downloadBtn').onclick = () => {
                const a = document.createElement('a');
                a.href = data.video;
                a.download = 'talking_avatar.mp4';
                a.click();
            };
        } catch (error) {
            console.error('Error:', error);
            alert('Error: ' + error.message);
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-magic me-2"></i>Generate Video';
        }
    });
});
    </script>
</body>
</html>