some pretty fixes

ombhojane · Feb 15, 2024 · cff96a1 · cff96a1
1 parent b934a57
commit cff96a1
Showing 1 changed file with 26 additions and 4 deletions.
diff --git a/templates/predict.html b/templates/predict.html
@@ -14,7 +14,7 @@
 
 </head>
 <body>
-  <div class="container mx-auto px-4">
+  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
 
 <!-- Navigation -->
 <nav class="flex justify-between items-center py-6">
@@ -33,12 +33,13 @@
 <!-- Main Content -->
 <div class="container mx-auto px-4 py-8">
   <div class="bg-white p-8 shadow-lg rounded-lg max-w-3xl mx-auto">
-    <h1 class="text-4xl font-bold mb-6 text-green-700">Plan your next agrotourism service</h1>
+    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 sm:mb-6 md:mb-8 text-green-700">Plan your next agrotourism service</h1>
     <div class="relative h-0" style="padding-bottom: 65%;">
-      <img src="https://i.postimg.cc/MKVpG2Bf/planning.png" alt="Agrotourism Image" class="absolute inset-0 w-full object-cover rounded-lg" />
+      <img src="https://i.postimg.cc/MKVpG2Bf/planning.png" alt="Agrotourism Image" class="w-full object-cover rounded-lg max-h-48 md:max-h-96">
     </div>
     <gradio-app src="https://ombhojane-predictservice.hf.space"></gradio-app>
-
+
+
   </div>
 </div>
 
@@ -48,12 +49,33 @@ <h1 class="text-4xl font-bold mb-6 text-green-700">Plan your next agrotourism se
 </div>
   </div>
 
+
+  <div id="loader-overlay" class="fixed inset-0 bg-gray-100 bg-opacity-75 flex justify-center items-center z-50">
+    <div class="text-sm sm:text-base font-semibold text-gray-700">Model is loading...</div>
+  </div>
+
+
+
 <script>
   function toggleMenu() {
     var navigation = document.querySelector('.nav-links');
     navigation.classList.toggle('mobile-menu');
   }
 
+  window.addEventListener('load', function() {
+    const observer = new MutationObserver((mutations, obs) => {
+      const gradioLoaded = document.querySelector('gradio-app');
+      if (gradioLoaded) {
+        document.getElementById('loader-overlay').style.display = 'none';
+        obs.disconnect(); // Stop observing once we have what we need
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  });
 
 </script>
 <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.18.0/gradio.js"></script>