Spaces:

Manvikk
/

MathLens2

Sleeping

App Files Files Community

Manvikk commited on Feb 6, 2025

Commit

95ee92b

verified ·

1 Parent(s): c0d4e9d

Update app.py

Browse files

Files changed (1) hide show

app.py +55 -47

app.py CHANGED Viewed

@@ -278,7 +278,7 @@ landing_template = '''
 </html>
 '''
-# --- Upload & Result Page Template (Original Design with Home Button and Progress Bar Loading Overlay) ---
 upload_template = '''
 <!DOCTYPE html>
 <html lang="en">
@@ -344,38 +344,36 @@ upload_template = '''
             background-color: #000;
             color: #fff;
         }
-        /* Progress bar overlay styles */
-        #loading {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(255,255,255,0.95);
             display: none;
-            flex-direction: column;
             align-items: center;
             justify-content: center;
             z-index: 9999;
         }
         #progressContainer {
             width: 80%;
-            max-width: 600px;
-            background: #ddd;
-            border: 2px solid #000;
-            border-radius: 5px;
-            overflow: hidden;
-            margin-bottom: 20px;
         }
         #progressBar {
-            width: 0%;
-            height: 30px;
-            background: #000;
-            transition: width 0.2s;
         }
         #progressText {
             font-size: 1.2rem;
-            font-weight: bold;
         }
         .content-wrapper {
             display: flex;
@@ -427,16 +425,16 @@ upload_template = '''
 <body>
     <!-- Home button -->
     <a href="{{ url_for('landing') }}" class="home-btn">Home</a>
-    <!-- Progress bar loading overlay -->
-    <div id="loading">
-        <div id="progressContainer">
-            <div id="progressBar"></div>
-        </div>
-        <div id="progressText">Initializing... 🔄</div>
     </div>
     <div class="typing-effect" id="typing"></div>
-    <!-- onsubmit calls the showLoading() function -->
-    <form method="post" enctype="multipart/form-data" onsubmit="showLoading()">
         <input type="file" name="file" accept="image/*" required>
         <!-- Hidden field to pass the selected object type -->
         <input type="hidden" name="object_type" value="{{ object_type }}">
@@ -471,39 +469,49 @@ upload_template = '''
     {% endif %}
     <div class="footer">&copy; 2024 MathLens AI Detection App. All rights reserved.</div>
     <script>
-        // Function to show the loading overlay with a progress bar and cool phrases
-        function showLoading() {
-            document.getElementById("loading").style.display = "flex";
-            let progress = 0;
-            const progressBar = document.getElementById("progressBar");
-            const progressText = document.getElementById("progressText");
-            // Array of phrases with their upper progress limits
-            const phrases = [
-                {limit: 20, text: "Writing scripts... ✍️"},
-                {limit: 40, text: "Calculating formulas... 🔢"},
-                {limit: 60, text: "Mixing up magic... ✨"},
-                {limit: 80, text: "Almost there... 🚀"},
-                {limit: 100, text: "Finalizing details... ✅"}
             ];
-            // Update progress every 50ms (simulation)
-            const interval = setInterval(() => {
-                // Increase progress by a random value (to add some variability)
-                progress += Math.floor(Math.random() * 3) + 1;
                 if (progress > 100) progress = 100;
                 progressBar.style.width = progress + "%";
-                // Update phrase based on current progress
-                for (let i = 0; i < phrases.length; i++) {
-                    if (progress <= phrases[i].limit) {
                         progressText.textContent = phrases[i].text;
                         break;
                     }
                 }
-                // If progress reaches 100, clear the interval
-                if (progress >= 100) {
                     clearInterval(interval);
                 }
-            }, 50);
         }
         // Existing typing effect code
         const textArray = ["MathLens", "Smart Counting with Maths"];
         let textIndex = 0;

 </html>
 '''
+# --- Upload & Result Page Template (Original Design with Home Button and Progress Bar Overlay) ---
 upload_template = '''
 <!DOCTYPE html>
 <html lang="en">
             background-color: #000;
             color: #fff;
         }
+        /* Progress overlay styles */
+        #progressOverlay {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background: rgba(255,255,255,0.9);
             display: none;
             align-items: center;
             justify-content: center;
+            flex-direction: column;
             z-index: 9999;
         }
         #progressContainer {
             width: 80%;
+            max-width: 400px;
         }
         #progressBar {
+            height: 20px;
+            width: 0;
+            background-color: #000;
+            border-radius: 10px;
+            -webkit-transition: width 0.05s linear;
+            transition: width 0.05s linear;
         }
         #progressText {
+            margin-top: 10px;
             font-size: 1.2rem;
+            font-family: "Share Tech Mono", monospace;
         }
         .content-wrapper {
             display: flex;
 <body>
     <!-- Home button -->
     <a href="{{ url_for('landing') }}" class="home-btn">Home</a>
+    <!-- Progress overlay with progress bar and dynamic text -->
+    <div id="progressOverlay">
+       <div id="progressContainer">
+           <div id="progressBar"></div>
+           <div id="progressText">Starting up... 🛠️</div>
+       </div>
     </div>
     <div class="typing-effect" id="typing"></div>
+    <!-- The form now has an id and an onsubmit handler -->
+    <form id="uploadForm" method="post" enctype="multipart/form-data" onsubmit="handleFormSubmit(event)">
         <input type="file" name="file" accept="image/*" required>
         <!-- Hidden field to pass the selected object type -->
         <input type="hidden" name="object_type" value="{{ object_type }}">
     {% endif %}
     <div class="footer">&copy; 2024 MathLens AI Detection App. All rights reserved.</div>
     <script>
+        // Intercept form submission and simulate a progress bar animation
+        function handleFormSubmit(e) {
+            e.preventDefault();
+            // Determine if the visitor is on mobile (adjust delay accordingly)
+            var isMobile = /Mobi|Android/i.test(navigator.userAgent);
+            var totalDelay = isMobile ? 5000 : 2000; // 5 seconds on mobile, 2 seconds on desktop
+            startProgressAndSubmit(totalDelay);
+        }
+        // Animate the progress overlay and then submit the form after the simulated delay
+        function startProgressAndSubmit(totalTime) {
+            var progressOverlay = document.getElementById("progressOverlay");
+            progressOverlay.style.display = "flex";
+            var progressBar = document.getElementById("progressBar");
+            var progressText = document.getElementById("progressText");
+            var progress = 0;
+            var updateInterval = totalTime / 100; // time (ms) per 1% increment
+            var phrases = [
+                { threshold: 0, text: "Starting up... 🛠️" },
+                { threshold: 10, text: "Writing scripts... 🤖" },
+                { threshold: 30, text: "Calculating formulas... 🧮" },
+                { threshold: 50, text: "Crunching numbers... 🔢" },
+                { threshold: 70, text: "Almost there... 🚀" },
+                { threshold: 90, text: "Finalizing... 🏁" },
+                { threshold: 100, text: "Done! ✅" }
             ];
+            var interval = setInterval(function() {
+                progress++;
                 if (progress > 100) progress = 100;
                 progressBar.style.width = progress + "%";
+                for (var i = phrases.length - 1; i >= 0; i--) {
+                    if (progress >= phrases[i].threshold) {
                         progressText.textContent = phrases[i].text;
                         break;
                     }
                 }
+                if (progress === 100) {
                     clearInterval(interval);
+                    document.getElementById("uploadForm").submit();
                 }
+            }, updateInterval);
         }
         // Existing typing effect code
         const textArray = ["MathLens", "Smart Counting with Maths"];
         let textIndex = 0;