Spaces:
Running
Running
| <html lang="en" data-bs-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image Caption Generator</title> | |
| <link href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet"> | |
| <link href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container py-5"> | |
| <div class="row justify-content-center"> | |
| <div class="col-md-8"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="text-center mb-0">Image Caption Generator</h2> | |
| </div> | |
| <div class="card-body"> | |
| <form id="uploadForm"> | |
| <div class="mb-4"> | |
| <label class="form-label">Select Model:</label> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="radio" name="model" id="efficientnet" value="efficientnet" checked> | |
| <label class="form-check-label" for="efficientnet"> | |
| EfficientNet-B3 | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="form-label d-block text-center">Upload Image:</label> | |
| <div class="upload-container"> | |
| <label class="upload-app"> | |
| <input type="file" id="imageInput" accept="image/png,image/jpeg,image/jpg" required> | |
| <div class="upload-btn"> | |
| <div class="upload-arrow"></div> | |
| <div class="upload-success"> | |
| <i class="bi bi-check"></i> | |
| </div> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button type="submit" class="btn btn-primary" id="submitBtn"> | |
| <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span> | |
| Generate Caption | |
| </button> | |
| </div> | |
| </form> | |
| <div id="resultSection" class="mt-4 d-none"> | |
| <div class="text-center"> | |
| <img id="previewImage" class="img-fluid mb-3 rounded" alt="Uploaded image"> | |
| <div id="captionText" class="alert alert-info"></div> | |
| </div> | |
| </div> | |
| <div id="errorAlert" class="alert alert-danger mt-3 d-none"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="{{ url_for('static', filename='js/main.js') }}"></script> | |
| </body> | |
| </html> |