Spaces:

yasserrmd
/

InfographicWizard

Running

App Files Files Community

yasserrmd commited on Nov 17, 2024

Commit

90eb196

verified ·

1 Parent(s): 0537a74

Create static/infographic_gen.html

Browse files

Files changed (1) hide show

static/infographic_gen.html +140 -0

static/infographic_gen.html ADDED Viewed

	@@ -0,0 +1,140 @@

+<!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;
+        }
+    </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>
+                    <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();
+                $.ajax({
+                    url: '/generate',
+                    type: 'POST',
+                    contentType: 'application/json',
+                    data: JSON.stringify({ description: description }),
+                    success: function(response) {
+                        $('#output-frame').contents().find('body').html(response.html);
+                    },
+                    error: function(xhr, status, error) {
+                        $('#output-frame').contents().find('body').html('<div class="alert alert-danger">An error occurred: ' + error + '</div>');
+                    }
+                });
+            });
+            // Download infographic as an image
+            $('#download-btn').click(function() {
+                const iframe = document.getElementById('output-frame');
+                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+                html2canvas(iframeDocument.body).then(function(canvas) {
+                    const link = document.createElement('a');
+                    link.download = 'infographic.png';
+                    link.href = canvas.toDataURL();
+                    link.click();
+                }).catch(function(error) {
+                    alert('An error occurred while capturing the infographic: ' + error);
+                });
+            });
+        });
+    </script>
+</body>
+</html>