Added image loader

flokapi · Sep 17, 2024 · 56ee86e · 56ee86e
1 parent e548a15
commit 56ee86e
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 2 deletions.
diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
@@ -117,6 +117,16 @@ jobs:
       #     password: ${{ secrets.PROD_PASSWORD }}
       #     source: "./*"
       #     target: "/root/image-classification"
+      # - name: deploy to production server
+      #   uses: appleboy/ssh-action@master
+      #   with:
+      #     host: ${{secrets.PROD_HOST}}
+      #     username: ${{secrets.PROD_USERNAME}}
+      #     password: ${{secrets.PROD_PASSWORD}}
+      #     script: |
+      #       cd /root/image-classification
+      #       echo ${{secrets.PROD_PASSWORD}} | sudo -S systemctl restart image-classification
+
 
       - name: deploy to production server
         uses: appleboy/ssh-action@master

diff --git a/app/routers/prediction.py b/app/routers/prediction.py
@@ -5,7 +5,6 @@
 from app.htmx import htmx
 from app.operations import image
 
-
 import app.cnn.cnn_prediction as cnn
 import app.operations.plot_predictions as plot
 

diff --git a/app/templates/base.html b/app/templates/base.html
@@ -6,6 +6,7 @@
     <title>Image Classifcation</title>
     <script src="/static/htmx.min.js"></script>
     <link rel="stylesheet" href="/static/styles.css" />
+    <link rel="stylesheet" href="/static/custom_styles.css" />
     <!-- <script src="https://cdn.tailwindcss.com"></script> -->
   </head>
   <body>

diff --git a/app/templates/prediction.html b/app/templates/prediction.html
@@ -4,7 +4,7 @@
   <div class="m-4 space-y-12">
     <div>
       <p class="text-xl font-bold mb-4">Image Selection</p>
-      <div class="mt-6 ml-2">
+      <div class="flex flex-row items-start mt-6 ml-2">
         <input
           id="file-upload"
           type="file"
@@ -13,11 +13,14 @@
           hx-target="#prediction-result"
           hx-swap="innerHTML"
           hx-encoding="multipart/form-data"
+          hx-indicator="#indicator"
           enctype="multipart/form-data"
           class="file:border file:border-gray-300 file:bg-gray-100 file:mr-4 file:py-2 file:px-4 file:rounded-md file:text-sm file:font-medium file:text-gray-700 file:hover:bg-gray-200"
         />
+        <div id="indicator" class="htmx-indicator loader" />
       </div>
     </div>
+
     <div id="prediction-result"></div>
   </div>
 </div>

diff --git a/static/custom_styles.css b/static/custom_styles.css
@@ -0,0 +1,18 @@
+/* Custom styles for the loader */
+.loader {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  border-top: 4px solid #3498db;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}