Spaces:
Sleeping
Sleeping
| <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 --> | |
| <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet"> | |
| </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> | |
| <!-- Custom JS --> | |
| <script src="{{ url_for('static', filename='js/scripts.js') }}"></script> | |
| </body> | |
| </html> |