ImageDataExtractor2

Runtime error

App Files Files Community

WebashalarForML commited on Oct 9, 2024

Commit

b4bbfdf

verified ·

1 Parent(s): 70083a7

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +96 -51

templates/index.html CHANGED Viewed

@@ -7,10 +7,12 @@
     <title>File Uploader</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
     <style>
         body {
             background-color: #1c1c1e;
             font-family: "Poppins", sans-serif;
             color: #f5f5f7;
         }
         h1 {
@@ -20,7 +22,7 @@
         }
         .container {
-            margin-top: 50px;
         }
         .file-upload-section {
@@ -67,7 +69,7 @@
         .alert {
             text-align: center;
-            position: absolute;
             top: 0;
             right: 15%;
         }
@@ -94,63 +96,99 @@
             }
         }
-        /* Tabs styles */
         .tab {
-            position: absolute;
-            top: 10px;
-            left: 10px;
         }
         .tab button {
-            background-color: #ee4410;
             border: none;
-            padding: 10px;
-            margin: 0 5px;
-            color: #f5f5f7;
             cursor: pointer;
-            border-radius: 5px;
-            transition: background-color 0.3s ease;
         }
         .tab button:hover {
-            background-color: #444;
         }
-        .tab button:active,
         .tab button.active {
             background-color: #444;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>Image Data Extractor</h1>
         <div class="tab">
-            <button class="tablinks active" onclick="openLink('https://webashalarforml-imagedataextractor2.hf.space/')">Image Data Extractor</button>
-            <button class="tablinks" onclick="openLink('https://webashalarforml-ResumeExtractor2.hf.space/')">Resume Data Extractor</button>
         </div>
-        <div class="file-upload-section">
-            <form id="fileUploadForm" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data">
-                <input type="file" name="files" multiple class="form-control" required />
-                <input type="submit" value="Upload your Images" class="btn btn-outline-primary" />
-            </form>
-            {% if session.get('uploaded_files') %}
-            <p class="mt-4">
-                Uploaded:
-                <span class="text-danger">{{ session.get('uploaded_files') }}</span>
-            </p>
-            <form action="{{ url_for('remove_file') }}" method="post">
-                <button type="submit" class="btn btn-outline-danger">
-                    <i class="bi bi-trash"></i> Remove Uploaded File
-                </button>
-            </form>
-            {% endif %}
         </div>
         <div class="container">
             <!-- Loader -->
@@ -164,12 +202,12 @@
         {% endif %} {% endwith %}
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        // Loader functionality
-        document.getElementById('fileUploadForm').onsubmit = function () {
             document.getElementById('loader').style.display = 'block';
-        };
         // Flash message auto-hide
         setTimeout(function () {
@@ -181,16 +219,23 @@
             }
         }, 3000);
-        // Function to open links in the same tab
-        function openLink(url,element) {
-            window.location.href = url; // Redirects to the specified URL in the same tab
-            // Remove "active" class from all buttons
-            const buttons = document.querySelectorAll('.tab button');
-            buttons.forEach(button => button.classList.remove('active'));
-            // Add "active" class to the clicked button
-            element.classList.add('active');
         }
     </script>
 </body>

     <title>File Uploader</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
     <style>
+        <style>
         body {
             background-color: #1c1c1e;
             font-family: "Poppins", sans-serif;
             color: #f5f5f7;
+            margin: 0;
         }
         h1 {
         }
         .container {
+            margin-top: 70px;
         }
         .file-upload-section {
         .alert {
             text-align: center;
+            position: sticky;
             top: 0;
             right: 15%;
         }
             }
         }
+        /* Top bar styles */
+        .top-bar {
+            background-color: #333;
+            position: fixed;
+            top: 0;
+            width: 100%;
+            z-index: 1000;
+            padding: 10px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .top-bar h2 {
+            color: white;
+        }
+        /* Navigation tab styles */
         .tab {
+            display: flex;
+            gap: 10px;
         }
         .tab button {
+            background-color: inherit;
             border: none;
+            outline: none;
             cursor: pointer;
+            padding: 10px 16px;
+            transition: 0.3s;
+            font-size: 17px;
+            color: white;
         }
         .tab button:hover {
+            background-color: #575757;
         }
         .tab button.active {
             background-color: #444;
         }
+        /* Tab content styles */
+        .tabcontent {
+            display: none;
+            padding: 20px;
+            margin-top: 70px;
+        }
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .tab {
+                flex-direction: column;
+            }
+        }
     </style>
 </head>
 <body>
+     <!-- Locked Top Bar with Tabs -->
+    <div class="top-bar">
+        <h2>Capture AI</h2>
+        <!-- Navigation Tabs -->
         <div class="tab">
+            <button class="tablink" onclick="openPage('ImageExtractor', this, '#ff4d00')" id="defaultOpen">Visiting Card Data Extractor</button>
+            <button class="tablink" onclick="openPage('ResumeParserExtractor', this, '#ff4d00')">Resume Data Extractor</button>
         </div>
+    </div>
+    <!-- Tab Content for Image Extractor -->
+    <div id="ImageExtractor" class="tabcontent">
+        <div class="container">
+            <h1>Visiting Card Data Extractor</h1>
+            <div class="file-upload-section">
+                <form id="fileUploadFormImageExtractor" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data">
+                    <input type="file" name="files" multiple class="form-control" required />
+                    <input type="submit" value="Upload your Images" class="btn btn-outline-primary" />
+                </form>
+                {% if session.get('uploaded_files') %}
+                <p class="mt-4">
+                    Uploaded:
+                    <span class="text-danger">{{ session.get('uploaded_files') }}</span>
+                </p>
+                <form action="{{ url_for('remove_file') }}" method="post">
+                    <button type="submit" class="btn btn-outline-danger">
+                        <i class="bi bi-trash"></i> Remove Uploaded File
+                    </button>
+                </form>
+                {% endif %}
+            </div>
         </div>
+    </div>
         <div class="container">
             <!-- Loader -->
         {% endif %} {% endwith %}
     </div>
+     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <script>
+        // Loader functionality for both forms
+        document.getElementById('fileUploadFormImageExtractor').onsubmit = function () {
             document.getElementById('loader').style.display = 'block';
+        };
         // Flash message auto-hide
         setTimeout(function () {
             }
         }, 3000);
+        // Tab functionality
+        function openPage(pageName, elmnt, color) {
+            var i, tabcontent, tablinks;
+            tabcontent = document.getElementsByClassName("tabcontent");
+            for (i = 0; i < tabcontent.length; i++) {
+                tabcontent[i].style.display = "none";
+            }
+            tablinks = document.getElementsByClassName("tablink");
+            for (i = 0; i < tablinks.length; i++) {
+                tablinks[i].style.backgroundColor = "";
+            }
+            document.getElementById(pageName).style.display = "block";
+            elmnt.style.backgroundColor = color;
         }
+        // Set default tab
+        document.getElementById("defaultOpen").click();
     </script>
 </body>