Spaces:
Running
Running
Update static/infographic_gen.html
Browse files- static/infographic_gen.html +30 -1
static/infographic_gen.html
CHANGED
|
@@ -56,6 +56,24 @@
|
|
| 56 |
border: none;
|
| 57 |
border-radius: 15px;
|
| 58 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 59 |
</style>
|
| 60 |
</head>
|
| 61 |
<body>
|
|
@@ -85,6 +103,10 @@
|
|
| 85 |
<h3 class="mb-3">
|
| 86 |
<i class="fas fa-image me-2"></i>Generated Infographic
|
| 87 |
</h3>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 88 |
<iframe id="output-frame"></iframe>
|
| 89 |
<button id="download-btn" class="btn btn-success btn-lg w-100 mt-3">
|
| 90 |
<i class="fas fa-download me-2"></i>Download as Image
|
|
@@ -106,6 +128,9 @@
|
|
| 106 |
// Generate infographic
|
| 107 |
$('#generate-btn').click(function() {
|
| 108 |
var description = $('#description').val();
|
|
|
|
|
|
|
|
|
|
| 109 |
$.ajax({
|
| 110 |
url: '/generate',
|
| 111 |
type: 'POST',
|
|
@@ -113,9 +138,13 @@
|
|
| 113 |
data: JSON.stringify({ description: description }),
|
| 114 |
success: function(response) {
|
| 115 |
$('#output-frame').contents().find('body').html(response.html);
|
|
|
|
|
|
|
| 116 |
},
|
| 117 |
error: function(xhr, status, error) {
|
| 118 |
$('#output-frame').contents().find('body').html('<div class="alert alert-danger">An error occurred: ' + error + '</div>');
|
|
|
|
|
|
|
| 119 |
}
|
| 120 |
});
|
| 121 |
});
|
|
@@ -137,4 +166,4 @@
|
|
| 137 |
});
|
| 138 |
</script>
|
| 139 |
</body>
|
| 140 |
-
</html>
|
|
|
|
| 56 |
border: none;
|
| 57 |
border-radius: 15px;
|
| 58 |
}
|
| 59 |
+
#loading-icon {
|
| 60 |
+
display: none;
|
| 61 |
+
text-align: center;
|
| 62 |
+
margin-top: 20px;
|
| 63 |
+
}
|
| 64 |
+
#loading-icon i {
|
| 65 |
+
font-size: 2rem;
|
| 66 |
+
color: #4a90e2;
|
| 67 |
+
animation: spin 1s linear infinite;
|
| 68 |
+
}
|
| 69 |
+
@keyframes spin {
|
| 70 |
+
from {
|
| 71 |
+
transform: rotate(0deg);
|
| 72 |
+
}
|
| 73 |
+
to {
|
| 74 |
+
transform: rotate(360deg);
|
| 75 |
+
}
|
| 76 |
+
}
|
| 77 |
</style>
|
| 78 |
</head>
|
| 79 |
<body>
|
|
|
|
| 103 |
<h3 class="mb-3">
|
| 104 |
<i class="fas fa-image me-2"></i>Generated Infographic
|
| 105 |
</h3>
|
| 106 |
+
<div id="loading-icon">
|
| 107 |
+
<i class="fas fa-spinner"></i>
|
| 108 |
+
<p>Generating infographic, please wait...</p>
|
| 109 |
+
</div>
|
| 110 |
<iframe id="output-frame"></iframe>
|
| 111 |
<button id="download-btn" class="btn btn-success btn-lg w-100 mt-3">
|
| 112 |
<i class="fas fa-download me-2"></i>Download as Image
|
|
|
|
| 128 |
// Generate infographic
|
| 129 |
$('#generate-btn').click(function() {
|
| 130 |
var description = $('#description').val();
|
| 131 |
+
$('#loading-icon').show(); // Show loading icon
|
| 132 |
+
$('#output-frame').hide(); // Hide the iframe while loading
|
| 133 |
+
|
| 134 |
$.ajax({
|
| 135 |
url: '/generate',
|
| 136 |
type: 'POST',
|
|
|
|
| 138 |
data: JSON.stringify({ description: description }),
|
| 139 |
success: function(response) {
|
| 140 |
$('#output-frame').contents().find('body').html(response.html);
|
| 141 |
+
$('#loading-icon').hide(); // Hide loading icon
|
| 142 |
+
$('#output-frame').show(); // Show the iframe
|
| 143 |
},
|
| 144 |
error: function(xhr, status, error) {
|
| 145 |
$('#output-frame').contents().find('body').html('<div class="alert alert-danger">An error occurred: ' + error + '</div>');
|
| 146 |
+
$('#loading-icon').hide(); // Hide loading icon
|
| 147 |
+
$('#output-frame').show(); // Show the iframe
|
| 148 |
}
|
| 149 |
});
|
| 150 |
});
|
|
|
|
| 166 |
});
|
| 167 |
</script>
|
| 168 |
</body>
|
| 169 |
+
</html>
|