spinner

static/index.html

@@ -13,23 +13,19 @@
     <main>
         <section id="text-gen">
             <h1>Chat with your favorite website!</h1>
-            <p>
-                Model:
-                <a href="https://huggingface.co/google/flan-t5-small" rel="noreferrer"
-                    target="_blank">google/flan-t5-small</a>
-            </p>
-            <p>Here you can create embeddings from the text you provide. This text should be submitted to the
-                /embeddings endpoint.</p>
-            <p>If you have embeddings, you can upload them instead.</p>
+            <p>Here you can create a vector storage from the url you provide.</p>
             <form class="text-gen-form">
-                <label for="text-gen-input">Text prompt</label>
-                <input id="text-gen-input" type="text" value="English: Translate There are many ducks. German:" />
+                <label for="text-gen-input">The url of the website</label>
+                <input id="text-gen-input" type="text" />
                 <button id="text-gen-submit">Submit</button>
                 <button id="download-embeddings" type="button">Download Embeddings</button>
-                <button id="upload-embeddings" type="button">Upload Embeddings</button>
-                <input type="file" id="file-input" style="display: none;" />
                 <p class="text-gen-output"></p>
             </form>
+            <p>If you have embeddings, you can upload them instead.</p>
+            <form class="text-gen-form">
+                <input type="file" id="file-input" style="display: none;" />
+                <button id="upload-embeddings" type="button">Upload Embeddings</button>
+            </form>
         </section>
         <section id="chat">
             <h2>Chat with the Model</h2>

static/script.js

@@ -8,8 +8,22 @@ const embedText = async (text) => {
     return inferJson.embeddings;
 };
 
+const spinnerOverlay = document.createElement('div');
+spinnerOverlay.classList.add('spinner-overlay');
+spinnerOverlay.innerHTML = '<div class="spinner"></div>';
+document.body.appendChild(spinnerOverlay);
+
+const showSpinner = () => {
+    spinnerOverlay.style.display = 'flex';
+};
+
+const hideSpinner = () => {
+    spinnerOverlay.style.display = 'none';
+};
+
 textGenForm.addEventListener('submit', async (event) => {
     event.preventDefault();
+    showSpinner();
 
     const textGenInput = document.getElementById('text-gen-input');
     const textGenParagraph = document.querySelector('.text-gen-output');
@@ -21,6 +35,8 @@ textGenForm.addEventListener('submit', async (event) => {
         updateDownloadButtonState(); // Update button state
     } catch (err) {
         console.error(err);
+    } finally {
+        hideSpinner();
     }
 });
 
@@ -49,6 +65,7 @@ const uploadEmbeddings = () => {
 };
 
 fileInput.addEventListener('change', async (event) => {
+    showSpinner();
     const file = event.target.files[0];
     if (file) {
         const reader = new FileReader();
@@ -71,9 +88,13 @@ fileInput.addEventListener('change', async (event) => {
                 });
             } catch (err) {
                 console.error('Error reading or parsing the file', err);
+            } finally {
+                hideSpinner();
             }
         };
         reader.readAsText(file);
+    } else {
+        hideSpinner();
     }
 });
 

static/style.css

@@ -64,4 +64,32 @@ button {
     overflow-y: auto;
     resize: none;
     border-radius: 3px;
+}
+
+.spinner-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    display: none; /* Initially hidden */
+}
+
+.spinner {
+    border: 8px solid rgba(255, 255, 255, 0.3);
+    border-top: 8px solid white;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }