Hugging Face's logo

Spaces:
traltyaziking
/
sf-c67
Running

App Files Community
traltyaziking commited on
Commit
e12a899
·
verified ·
1 Parent(s): 5195625

Add 3 files

Browse files
Files changed (3) hide show
  1. index.html +13 -19
  2. main.js +56 -0
  3. style.css +71 -28
index.html CHANGED
@@ -1,19 +1,13 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
1
+ <html><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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>
2
+ <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">
3
+ <h1 id="title" class="text-3xl font-bold" align="center"> Bulk Translator </h2>
4
+ <!--The audio/text columns-->
5
+ <div class="grid grid-cols-1 gap-4" aria-labelled-by="audio-and-text-columns">
6
+ <div id="audio-column" class="mt-3">
7
+ <audio controls id="audio" class="w-auto h-6 pt-1.5r pb-1"></audio>
8
+ </div>
9
+ <div id="text-column" class="mt-3">
10
+ <div class="text-justify text h-6 pt-1.5r pb-1"></div>
11
+ </div>
12
+ </div>
13
+ </div></body>aref="http://creativecommons.org/licenses/by-nc-sa/2.0/"><span></span></html>
 
 
 
 
 
 
main.js ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Variable definitions
2
+ const app = document.getElementById('app');
3
+ const audioColumn = document.getElementById('audio-column');
4
+ const textColumn = document.getElementById('text-column');
5
+ const audioControl = document.getElementById('audio');
6
+ const transcript = document.getElementById('text');
7
+ const submitButton = document.getElementById('submit');
8
+ const loader = document.getElementById('loader');
9
+ const backButton = document.getElementById('backButton');
10
+ const form = document.getElementById('form');
11
+ const fileExtention = document.getElementById('fileExtention');
12
+ const backButtonLoader = document.getElementById('backButtonLoader');
13
+ const transcribe = async (event) => {
14
+ event.preventDefault();
15
+ if (!fileExtention.value) {
16
+ alert('Please specify the file extension first!');
17
+ return false;
18
+ }
19
+ loader.classList.remove('hidden');
20
+ submitButton.disabled = true;
21
+ try {
22
+ let response = await fetch('/transcribe', {
23
+ method: 'POST',
24
+ body: JSON.stringify({
25
+ fileExt: fileExtention.value,
26
+ tranFile: event.target.file.value
27
+ })
28
+ });
29
+ if (response.status === 200) {
30
+ let data = await response.json();
31
+ transcript.textContent = data.text;
32
+ audioControl.src = data.audioUrl;
33
+ audioControl.playsinline = true;
34
+ audioControl.addEventListener("loadeddata", () => {
35
+ audioControl.play();
36
+ });
37
+ submitButton.disabled = false;
38
+ loader.classList.add('hidden');
39
+ } else {
40
+ console.log(response);
41
+ alert('Invalid file!');
42
+ }
43
+ } catch (err) {
44
+ console.log(err);
45
+ alert('An error occurred while uploading the file! Please try again');
46
+ }
47
+ };
48
+
49
+ // Event listeners
50
+ form.addEventListener('submit', transcribe);
51
+ backButton.addEventListener('click', () => {
52
+ backButtonLoader.classList.remove('hidden');
53
+ setTimeout(() => {
54
+ window.history.back();
55
+ }, 1500);
56
+ });
style.css CHANGED
@@ -1,28 +1,71 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <style>
2
+ body {
3
+ background-color: #fff;
4
+ color: #353535;
5
+ font-family: sans-serif;
6
+ padding: 2rem;
7
+ max-width: 768px;
8
+ margin: 0 auto;
9
+ }
10
+
11
+ #app {
12
+ margin-left: 0 auto;
13
+ margin-right: 0 auto;
14
+ padding-left: 0;
15
+ padding-right: 0;
16
+ }
17
+
18
+ #form {
19
+ margin-top: 2rem;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ }
24
+
25
+ #fileExtention {
26
+ flex-basis: 100%;
27
+ max-width: 200px;
28
+ margin-right: 0;
29
+ }
30
+
31
+ #submit {
32
+ flex-basis: auto;
33
+ font-weight: bold;
34
+ background-color: #585858;
35
+ border: none;
36
+ padding: 1rem;
37
+ margin-top: 2rem;
38
+ transition: all 0.2s;
39
+ }
40
+
41
+ #submit:enabled {
42
+ background-color: #5676e5;
43
+ color: #fff;
44
+ cursor: pointer;
45
+ }
46
+
47
+ #submit:disabled {
48
+ background-color: #868e96;
49
+ color: #fff;
50
+ cursor: not-allowed;
51
+ }
52
+
53
+ #loader {
54
+ opacity: 0;
55
+ visibility: hidden;
56
+ transition: all 1s;
57
+ }
58
+
59
+ #loader.hidden {
60
+ opacity: 0;
61
+ visibility: visible;
62
+ }
63
+
64
+ #backButton {
65
+ margin-top: 2rem;
66
+ }
67
+
68
+ #backButtonLoader {
69
+ opacity: 0;
70
+ }
71
+ </style>