Spaces:
Running
Running
File size: 7,494 Bytes
90eb196 cf94c12 90eb196 cf94c12 90eb196 cf94c12 90eb196 cf94c12 90eb196 cf94c12 90eb196 1a97b19 90eb196 1a97b19 90eb196 1a97b19 90eb196 cf94c12 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 |
<!DOCTYPE html>
<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/bootstrap@5.3.0/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/bootstrap@5.3.0/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>
|