engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

progress indicator for upload processing.

Browse source 
demo.html page

	new file:   demo.html
	modified:   uncloseai.js
This commit is contained in:
root 2024-12-08 22:59:06 +00:00
parent 68ddb3d054
commit a833cb5699
2 changed files with 121 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

79
demo.html Normal file
View file

@ -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>

47
uncloseai.js
View file

@ -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);