Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Infographic Generator</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- Bootstrap CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Font Awesome CSS --> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> | |
| <!-- Custom CSS --> | |
| <style> | |
| body { | |
| background-color: #f0f2f5; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| color: #333; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #4a90e2, #9013fe); | |
| color: white; | |
| padding: 60px 0; | |
| text-align: center; | |
| } | |
| .header h1 { | |
| font-size: 3rem; | |
| font-weight: bold; | |
| } | |
| .header p { | |
| font-size: 1.2rem; | |
| margin-top: 10px; | |
| } | |
| .main-content { | |
| margin-top: -50px; | |
| } | |
| .card { | |
| border-radius: 15px; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| } | |
| #generate-btn { | |
| background: linear-gradient(135deg, #4a90e2, #9013fe); | |
| border: none; | |
| } | |
| #generate-btn:hover { | |
| background: linear-gradient(135deg, #3b78c4, #7d0fcf); | |
| } | |
| #download-btn { | |
| background: #28a745; | |
| border: none; | |
| } | |
| #download-btn:hover { | |
| background: #218838; | |
| } | |
| #output-frame { | |
| width: 100%; | |
| height: 600px; | |
| border: none; | |
| border-radius: 15px; | |
| } | |
| #loading-icon { | |
| display: none; | |
| text-align: center; | |
| margin-top: 20px; | |
| } | |
| #loading-icon i { | |
| font-size: 2rem; | |
| color: #4a90e2; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="container"> | |
| <h1><i class="fas fa-chart-bar me-2"></i>Infographic Generator</h1> | |
| <p><i class="fas fa-lightbulb me-2"></i>Provide a single sentence describing the infographic you want to generate.</p> | |
| </div> | |
| </header> | |
| <div class="container main-content"> | |
| <div class="row"> | |
| <!-- Input Section --> | |
| <div class="col-md-4 mb-4"> | |
| <div class="card p-4"> | |
| <h3 class="mb-3"> | |
| <i class="fas fa-pencil-alt me-2"></i>Describe Your Infographic | |
| </h3> | |
| <textarea id="description" class="form-control mb-3" rows="10" placeholder="E.g., 'An infographic showing the benefits of renewable energy'"></textarea> | |
| <button id="generate-btn" class="btn btn-primary btn-lg w-100"> | |
| <i class="fas fa-magic me-2"></i>Generate Infographic | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Output Section --> | |
| <div class="col-md-8 mb-4"> | |
| <div class="card p-4"> | |
| <h3 class="mb-3"> | |
| <i class="fas fa-image me-2"></i>Generated Infographic | |
| </h3> | |
| <div id="loading-icon"> | |
| <i class="fas fa-spinner"></i> | |
| <p>Generating infographic, please wait...</p> | |
| </div> | |
| <iframe id="output-frame"></iframe> | |
| <button id="download-btn" class="btn btn-success btn-lg w-100 mt-3"> | |
| <i class="fas fa-download me-2"></i>Download as Image | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Include Bootstrap JS and dependencies --> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- Font Awesome --> | |
| <script src="https://kit.fontawesome.com/yourkit.js" crossorigin="anonymous"></script> | |
| <!-- html2canvas for screenshot functionality --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| // Generate infographic | |
| $('#generate-btn').click(function() { | |
| var description = $('#description').val(); | |
| $('#loading-icon').show(); // Show loading icon | |
| $('#output-frame').hide(); // Hide the iframe while loading | |
| $.ajax({ | |
| url: '/generate', | |
| type: 'POST', | |
| contentType: 'application/json', | |
| data: JSON.stringify({ description: description }), | |
| success: function(response) { | |
| $('#output-frame').contents().find('body').html(response.html); | |
| $('#loading-icon').hide(); // Hide loading icon | |
| $('#output-frame').show(); // Show the iframe | |
| }, | |
| error: function(xhr, status, error) { | |
| $('#output-frame').contents().find('body').html('<div class="alert alert-danger">An error occurred: ' + error + '</div>'); | |
| $('#loading-icon').hide(); // Hide loading icon | |
| $('#output-frame').show(); // Show the iframe | |
| } | |
| }); | |
| }); | |
| // Download infographic as an image | |
| $('#download-btn').click(function() { | |
| const iframe = document.getElementById('output-frame'); | |
| const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; | |
| // Clone the iframe content into a div for rendering | |
| const clonedContent = iframeDocument.body.cloneNode(true); | |
| // Add external styles to the cloned content | |
| const link = document.createElement('link'); | |
| link.rel = 'stylesheet'; | |
| link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'; | |
| clonedContent.appendChild(link); | |
| // Wrap in a temporary container for rendering | |
| const tempDiv = document.createElement('div'); | |
| tempDiv.appendChild(clonedContent); | |
| document.body.appendChild(tempDiv); | |
| // Use html2canvas to render the temporary container | |
| html2canvas(tempDiv, { | |
| useCORS: true, // Allow cross-origin styles | |
| scale: 2, // Improve image quality | |
| }).then(function(canvas) { | |
| document.body.removeChild(tempDiv); // Clean up | |
| const link = document.createElement('a'); | |
| link.download = 'infographic.png'; | |
| link.href = canvas.toDataURL('image/png'); | |
| link.click(); | |
| }).catch(function(error) { | |
| document.body.removeChild(tempDiv); // Clean up | |
| alert('An error occurred while capturing the infographic: ' + error); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |