Spaces:

traltyaziking
/

sf-c67

Running

App Files Files Community

traltyaziking commited on Feb 5

Commit

e12a899

•

1 Parent(s): 5195625

Add 3 files

Browse files

Files changed (3) hide show

index.html +13 -19
main.js +56 -0
style.css +71 -28

index.html CHANGED Viewed

@@ -1,19 +1,13 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title> Bulk Translator </title></head>
+<body ><div id="app"></divaria-hidden="true"aria-labelled-by="title"><div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+    <h1 id="title" class="text-3xl font-bold" align="center"> Bulk Translator </h2>
+      <!--The audio/text columns-->
+    <div class="grid grid-cols-1 gap-4" aria-labelled-by="audio-and-text-columns">
+        <div id="audio-column" class="mt-3">
+            <audio controls id="audio" class="w-auto h-6 pt-1.5r pb-1"></audio>
+        </div>
+        <div id="text-column" class="mt-3">
+            <div class="text-justify text h-6 pt-1.5r pb-1"></div>
+        </div>
+    </div>
+</div></body>aref="http://creativecommons.org/licenses/by-nc-sa/2.0/"><span></span></html>

main.js ADDED Viewed

	@@ -0,0 +1,56 @@

+// Variable definitions
+const app = document.getElementById('app');
+const audioColumn = document.getElementById('audio-column');
+const textColumn = document.getElementById('text-column');
+const audioControl = document.getElementById('audio');
+const transcript = document.getElementById('text');
+const submitButton = document.getElementById('submit');
+const loader = document.getElementById('loader');
+const backButton = document.getElementById('backButton');
+const form = document.getElementById('form');
+const fileExtention = document.getElementById('fileExtention');
+const backButtonLoader = document.getElementById('backButtonLoader');
+const transcribe = async (event) => {
+    event.preventDefault();
+    if (!fileExtention.value) {
+        alert('Please specify the file extension first!');
+        return false;
+    }
+    loader.classList.remove('hidden');
+    submitButton.disabled = true;
+    try {
+        let response = await fetch('/transcribe', {
+            method: 'POST',
+            body: JSON.stringify({
+                fileExt: fileExtention.value,
+                tranFile: event.target.file.value
+            })
+        });
+        if (response.status === 200) {
+            let data = await response.json();
+            transcript.textContent = data.text;
+            audioControl.src = data.audioUrl;
+            audioControl.playsinline = true;
+            audioControl.addEventListener("loadeddata", () => {
+                audioControl.play();
+            });
+            submitButton.disabled = false;
+            loader.classList.add('hidden');
+        } else {
+            console.log(response);
+            alert('Invalid file!');
+        }
+    } catch (err) {
+        console.log(err);
+        alert('An error occurred while uploading the file! Please try again');
+    }
+};
+// Event listeners
+form.addEventListener('submit', transcribe);
+backButton.addEventListener('click', () => {
+    backButtonLoader.classList.remove('hidden');
+    setTimeout(() => {
+        window.history.back();
+    }, 1500);
+});

style.css CHANGED Viewed

@@ -1,28 +1,71 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+<style>
+    body {
+        background-color: #fff;
+        color: #353535;
+        font-family: sans-serif;
+        padding: 2rem;
+        max-width: 768px;
+        margin: 0 auto;
+    }
+    #app {
+        margin-left: 0 auto;
+        margin-right: 0 auto;
+        padding-left: 0;
+        padding-right: 0;
+    }
+    #form {
+        margin-top: 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    #fileExtention {
+        flex-basis: 100%;
+        max-width: 200px;
+        margin-right: 0;
+    }
+    #submit {
+        flex-basis: auto;
+        font-weight: bold;
+        background-color: #585858;
+        border: none;
+        padding: 1rem;
+        margin-top: 2rem;
+        transition: all 0.2s;
+    }
+    #submit:enabled {
+        background-color: #5676e5;
+        color: #fff;
+        cursor: pointer;
+    }
+    #submit:disabled {
+        background-color: #868e96;
+        color: #fff;
+        cursor: not-allowed;
+    }
+    #loader {
+        opacity: 0;
+        visibility: hidden;
+        transition: all 1s;
+    }
+    #loader.hidden {
+        opacity: 0;
+        visibility: visible;
+    }
+    #backButton {
+        margin-top: 2rem;
+    }
+    #backButtonLoader {
+        opacity: 0;
+    }
+</style>