Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Talking Avatar</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="../static/css/styles.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container mt-5"> | |
| <div class="row"> | |
| <div class="col-md-6 mx-auto"> | |
| <div class="card shadow"> | |
| <div class="card-header bg-primary text-white"> | |
| <h3 class="text-center">Make Your Image Talk</h3> | |
| </div> | |
| <div class="card-body"> | |
| <form id="avatarForm"> | |
| <div class="mb-3"> | |
| <label class="form-label">Upload Image</label> | |
| <input type="file" class="form-control" id="imageInput" accept="image/*"> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="form-label">Text to Speak</label> | |
| <textarea class="form-control" id="textInput" rows="3"></textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary w-100">Generate Video</button> | |
| </form> | |
| <div id="result" class="mt-4 text-center d-none"> | |
| <video id="outputVideo" controls class="w-100"></video> | |
| <a id="downloadBtn" class="btn btn-success mt-2">Download Video</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="../static/js/script.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> |