Spaces:

Manvikk
/

MathLens2

Sleeping

App Files Files Community

Manvikk commited on Feb 6, 2025

Commit

709f5f1

verified ·

1 Parent(s): 67f676f

Update app.py

Browse files

Files changed (1) hide show

app.py +132 -117

app.py CHANGED Viewed

@@ -242,127 +242,141 @@ def index():
         except Exception as e:
             print("DEBUG: Error removing uploaded file:", e)
     return render_template_string('''
-    <!doctype html>
-    <html>
-      <head>
-        <title>Multi-Detection & Measurement</title>
-        <!-- Bootstrap CSS -->
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-        <style>
-          body {
-            background-color: #f8f9fa;
-            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-          }
-          .container {
-            margin-top: 30px;
-          }
-          .header {
             text-align: center;
-            margin-bottom: 30px;
-          }
-          .card {
-            margin-bottom: 30px;
-          }
-          .result-img {
-            width: 100%;
-            border: 1px solid #ddd;
             padding: 5px;
-          }
-          .table-responsive {
             margin-top: 20px;
-          }
-          .footer {
-            text-align: center;
             font-size: 0.9em;
-            color: #777;
-            margin-top: 30px;
-          }
-        </style>
-      </head>
-      <body>
-        <div class="container">
-          <h1 class="header">Multi-Detection & Measurement</h1>
-          <!-- Upload Form -->
-          <div class="card">
-            <div class="card-body">
-              <form method="post" enctype="multipart/form-data">
-                <div class="form-group">
-                  <label for="file">Choose an image to upload:</label>
-                  <input type="file" class="form-control-file" name="file" accept="image/*" id="file">
-                </div>
-                <button type="submit" class="btn btn-primary">Upload</button>
-              </form>
-              {% with messages = get_flashed_messages() %}
-                {% if messages %}
-                  <div class="alert alert-danger mt-3">
-                    <ul>
-                      {% for message in messages %}
-                        <li>{{ message }}</li>
-                      {% endfor %}
-                    </ul>
-                  </div>
-                {% endif %}
-              {% endwith %}
-            </div>
-          </div>
-          {% if image_data or detection_info %}
-          <div class="row">
-            <div class="col-md-8">
-              <div class="card">
-                <div class="card-header">
-                  Processed Image
-                </div>
-                <div class="card-body">
-                  <img src="data:image/jpeg;base64,{{ image_data }}" alt="Processed Image" class="result-img">
-                </div>
-              </div>
-            </div>
-            <div class="col-md-4">
-              <div class="card">
-                <div class="card-header">
-                  Detection Results
-                </div>
-                <div class="card-body">
-                  <p>Total Results: <strong>{{ detection_info|length }}</strong></p>
-                  <div class="table-responsive">
-                    <table class="table table-striped table-bordered">
-                      <thead class="thead-dark">
-                        <tr>
-                          <th>#</th>
-                          <th>Class</th>
-                          <th>Confidence</th>
-                          <th>Width (cm)</th>
-                          <th>Height (cm)</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {% for det in detection_info %}
-                        <tr>
-                          <td>{{ loop.index }}</td>
-                          <td>{{ det.class }}</td>
-                          <td>{{ det.confidence }}</td>
-                          <td>{{ det.width_cm }}</td>
-                          <td>{{ det.height_cm }}</td>
-                        </tr>
-                        {% endfor %}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          {% endif %}
-          <div class="footer">
-            <p>&copy; 2023 Multi-Detection App. All rights reserved.</p>
-          </div>
-        </div>
-        <!-- Bootstrap JS and dependencies -->
-        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
-        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-      </body>
-    </html>
     ''', image_data=image_data, detection_info=detection_info)
 #########################################
@@ -372,3 +386,4 @@ def index():
 if __name__ == '__main__':
     # Ensure the app runs on 0.0.0.0 and port 7860 for Hugging Face Spaces.
     app.run(host="0.0.0.0", port=7860)

         except Exception as e:
             print("DEBUG: Error removing uploaded file:", e)
     return render_template_string('''
+  <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MathLens - AI Detection & Measurement</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
+        body {
+            background-color: #fff;
+            color: #000;
+            font-family: "Share Tech Mono", monospace;
             text-align: center;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .typing-effect {
+            font-size: 2rem;
+            font-weight: bold;
+            margin-bottom: 10px;
+            height: 50px;
+        }
+        input[type="file"], button {
+            display: block;
+            margin: 10px auto;
+            padding: 10px;
+            background: none;
+            border: 2px solid #000;
+            color: #000;
+            font-size: 1rem;
+            font-family: "Share Tech Mono", monospace;
+            cursor: pointer;
+        }
+        input[type="file"]::file-selector-button {
+            background: none;
+            border: none;
+            color: #000;
+            font-family: "Share Tech Mono", monospace;
+        }
+        .content-wrapper {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-evenly;
+            width: 90%;
+            max-width: 1200px;
+        }
+        .result-img {
+            max-width: 45%;
+            border: 2px solid #000;
+        }
+        table {
+            max-width: 45%;
+            border-collapse: collapse;
+        }
+        th, td {
+            border: 1px solid #000;
             padding: 5px;
+        }
+        .footer {
             margin-top: 20px;
             font-size: 0.9em;
+            color: #000;
+        }
+    </style>
+</head>
+<body>
+    <div class="typing-effect" id="typing"></div>
+    <form method="post" enctype="multipart/form-data">
+        <input type="file" name="file" accept="image/*" required>
+        <button type="submit">Analyze Image</button>
+    </form>
+    {% if image_data or detection_info %}
+    <div class="content-wrapper">
+        <img src="data:image/jpeg;base64,{{ image_data }}" alt="Processed Image" class="result-img">
+        <table>
+            <thead>
+                <tr>
+                    <th>#</th>
+                    <th>Class</th>
+                    <th>Confidence</th>
+                    <th>Width (cm)</th>
+                    <th>Height (cm)</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for det in detection_info %}
+                <tr>
+                    <td>{{ loop.index }}</td>
+                    <td>{{ det.class }}</td>
+                    <td>{{ det.confidence }}</td>
+                    <td>{{ det.width_cm }}</td>
+                    <td>{{ det.height_cm }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% endif %}
+    <div class="footer">&copy; 2024 MathLens AI Detection App. All rights reserved.</div>
+    <script>
+        const textArray = ["MathLens", "Smart Counting with Maths"];
+        let textIndex = 0;
+        let charIndex = 0;
+        let isDeleting = false;
+        const typingElement = document.getElementById("typing");
+        function typeEffect() {
+            let currentText = textArray[textIndex];
+            if (isDeleting) {
+                typingElement.textContent = currentText.substring(0, charIndex--);
+            } else {
+                typingElement.textContent = currentText.substring(0, charIndex++);
+            }
+            if (!isDeleting && charIndex === currentText.length) {
+                setTimeout(() => { isDeleting = true; typeEffect(); }, 3000);
+            } else if (isDeleting && charIndex === 0) {
+                isDeleting = false;
+                textIndex = (textIndex + 1) % textArray.length;
+                setTimeout(typeEffect, 500);
+            } else {
+                setTimeout(typeEffect, isDeleting ? 50 : 100);
+            }
+        }
+        document.addEventListener("DOMContentLoaded", () => {
+            setTimeout(typeEffect, 500);
+        });
+    </script>
+</body>
+</html>
     ''', image_data=image_data, detection_info=detection_info)
 #########################################
 if __name__ == '__main__':
     # Ensure the app runs on 0.0.0.0 and port 7860 for Hugging Face Spaces.
     app.run(host="0.0.0.0", port=7860)