From a833cb5699168fb20797e29c8fd2f7ac476d3a81 Mon Sep 17 00:00:00 2001
From: root <root@ai.unturf.com>
Date: Sun, 8 Dec 2024 22:59:06 +0000
Subject: [PATCH] progress indicator for upload processing.

demo.html page

	new file:   demo.html
	modified:   uncloseai.js
---
 demo.html    | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 uncloseai.js | 47 +++++++++++++++++++++++++++----
 2 files changed, 121 insertions(+), 5 deletions(-)
 create mode 100644 demo.html

diff --git a/demo.html b/demo.html
new file mode 100644
index 0000000..d648ae7
--- /dev/null
+++ b/demo.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#43a047">
+    <meta name="color-scheme" content="light dark">
+    <title>Demo Free LLM & Text To Speech Artificial Intelligence Service | ai.unturf.com</title>
+
+    <!-- PicoCSS -->
+    <link rel="stylesheet" href="/css/pico.classless.min.css">
+    <!-- ChunkFive Font -->
+    <link rel="stylesheet" href="/css/chunkfive/stylesheet.css" type="text/css" charset="utf-8" />
+
+    <style>
+    body {
+        max-width: 960px;
+        margin: 0 auto;
+    }
+    </style>
+
+    <!-- Highlight.js for syntax highlighting -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/a11y-dark.min.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
+
+    <!-- Theme Switcher Script -->
+    <script>
+        function switchTheme(theme) {
+            if (theme === "auto") {
+                document.documentElement.removeAttribute('data-theme');
+            } else {
+                document.documentElement.setAttribute('data-theme', theme);
+            }
+        }
+    </script>
+
+    <script src="https://uncloseai.com/uncloseai.js" type="module"></script>
+    <script defer data-domain="ai.unturf.com" src="https://analytics.unturf.com/js/plausible.js"></script>
+</head>
+
+<body>
+
+    <header>
+        <hgroup>
+            <h1 class="unturf" style="font-family: 'ChunkFiveRegular';">unturf.</h1>
+            <p>Welcome to ai.unturf.com - Free LLM & Text To Speech Artificial Intelligence Service</title>
+        </hgroup>
+        <nav>
+            <ul>
+                <li><a href="#" onclick="switchTheme('auto')">Auto</a></li>
+                <li><a href="#" onclick="switchTheme('light')">Light</a></li>
+                <li><a href="#" onclick="switchTheme('dark')">Dark</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <h2>Demo!</h2>
+
+        <div id="chat-container">
+          <div id="chat-box"></div>
+          <div></div>
+        </div>
+        <div>
+          <input type="text" id="user-input" placeholder="Ask about this page...">
+          <button onclick="handleUserInput()">Send</button>
+        </div>
+
+    </main>
+
+    <footer>
+        <small>Stylesheets by <a href="https://picocss.com" target="_blank">PicoCSS</a></small>
+        <small>& <a href="https://highlightjs.org/" target="_blank">highlight.js</a></small>
+    </footer>
+
+</body>
+
+</html>
diff --git a/uncloseai.js b/uncloseai.js
index 7cd6bc4..985aa75 100644
--- a/uncloseai.js
+++ b/uncloseai.js
@@ -565,7 +565,7 @@ function addReadPageButton() {
 
 // New Function: Add File Picker and Upload Button
 function addFileUploadButton() {
-  const chatContainer = document.getElementById('chat-container');
+  const userInputContainer = document.getElementById('user-input').parentNode;
 
   // Create a container for the upload elements
   const uploadContainer = document.createElement('div');
@@ -586,11 +586,38 @@ function addFileUploadButton() {
   uploadContainer.appendChild(fileInput);
   uploadContainer.appendChild(uploadButton);
 
-  // Append the upload container to the chat container
-  chatContainer.parentNode.insertBefore(uploadContainer, chatContainer);
+  // Append the upload container below the user input
+  userInputContainer.parentNode.insertBefore(uploadContainer, userInputContainer.nextSibling);
 }
 
-// New Function: Handle File Upload
+// Function to show progress indicator
+function showProgressIndicator(message) {
+  let progressIndicator = document.getElementById('progress-indicator');
+  if (!progressIndicator) {
+    progressIndicator = document.createElement('div');
+    progressIndicator.id = 'progress-indicator';
+    progressIndicator.style.position = 'fixed';
+    progressIndicator.style.top = '10px';
+    progressIndicator.style.right = '10px';
+    progressIndicator.style.padding = '10px';
+    progressIndicator.style.background = 'rgba(0,0,0,0.8)';
+    progressIndicator.style.color = 'white';
+    progressIndicator.style.borderRadius = '5px';
+    progressIndicator.style.zIndex = '1000';
+    document.body.appendChild(progressIndicator);
+  }
+  progressIndicator.textContent = message;
+}
+
+// Function to hide progress indicator
+function hideProgressIndicator() {
+  const progressIndicator = document.getElementById('progress-indicator');
+  if (progressIndicator) {
+    progressIndicator.remove();
+  }
+}
+
+// Updated Function: Handle File Upload with Progress Indicator
 async function handleFileUpload() {
   const fileInput = document.getElementById('file-input');
   const files = fileInput.files;
@@ -603,21 +630,31 @@ async function handleFileUpload() {
   const file = files[0];
 
   try {
+    // Show progress indicator for upload
+    showProgressIndicator('Uploading & Processing file...');
+
     // Send file to MegaFarce endpoint
     const response = await uploadFile(file);
 
+    // Show progress indicator for processing
+    showProgressIndicator('Processing file...');
+
     // Integrate response into Chat DOM and chatHistory
     await integrateMegafarceResponse(response);
 
+    // Hide progress indicator after completion
+    hideProgressIndicator();
+
     // Clear the file input after successful upload
     fileInput.value = '';
   } catch (error) {
     console.error('File upload error:', error);
     alert('Failed to upload the file.');
+    hideProgressIndicator();
   }
 }
 
-// New Function: Upload File to MegaFarce
+// New Function: Upload File to MegaFarce with Progress Indicator
 async function uploadFile(file) {
   const formData = new FormData();
   formData.append('file', file);