From 5969005015f76357ccf431c27d5dfd2b39c1428d Mon Sep 17 00:00:00 2001 From: lzzfnc Date: Tue, 5 Oct 2021 19:49:58 +0200 Subject: [PATCH 1/2] stt save, reset, ui and cleanup --- speech/index.html | 13 ++++-- speech/index.js | 100 ++++++++++++++++++++++++---------------------- speech/style.css | 48 +++++++++++++++++++--- todo.txt | 83 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 188 insertions(+), 56 deletions(-) diff --git a/speech/index.html b/speech/index.html index 2e55d48..e28df1e 100644 --- a/speech/index.html +++ b/speech/index.html @@ -9,9 +9,14 @@ - - -
-
+
+ + +
+ +
+
+
+
\ No newline at end of file diff --git a/speech/index.js b/speech/index.js index 5e7f8e4..139a070 100644 --- a/speech/index.js +++ b/speech/index.js @@ -1,39 +1,37 @@ // ARRAY DI PAROLE NORMALE, POI PYTHON -> split, for loop, POS e { // Reset everything!!! +// Reset everything!!! +resetStorage.addEventListener("click", () => { allTheInterim = ""; finalTranscripts = ""; interimTranscripts = ""; @@ -44,12 +42,12 @@ resetStorage.addEventListener("click", () => { // Reset everything!!! // SAVE FILE -let saveButton = document.getElementById("save"); // This will let you save the results in your desktop through a button +let saveButton = document.getElementById("save"); // This will let you save the results in your desktop through a button saveButton.addEventListener("click", () => { download("speech.txt", localStorage.getItem("speech")); }); -function download(filename, text) { +function download(filename, text) { var element = document.createElement("a"); element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text)); element.setAttribute("download", filename); @@ -64,52 +62,58 @@ function download(filename, text) { // START LISTENING -startConverting(); // Finally, here is where the magic happen. +startConverting(); // Finally, here is where the magic happen. -function startConverting() { - if ("webkitSpeechRecognition" in window) { // Declaring here the API +function startConverting() { + if ("webkitSpeechRecognition" in window) { + // Declaring here the API let speechRecognizer = new webkitSpeechRecognition() || new SpeechRecognition(); - // And here the settings, like - speechRecognizer.continuous = true; // if the recognition should continue or stop when you finish to talk - speechRecognizer.interimResults = true; // if you want also get the interim results - speechRecognizer.lang = "en-US"; // which language you want to recognize (!!) - speechRecognizer.start(); // and then start :)) - - finalTranscripts = ""; + // And here the settings, like + speechRecognizer.continuous = true; // if the recognition should continue or stop when you finish to talk + speechRecognizer.interimResults = true; // if you want also get the interim results + speechRecognizer.lang = "en-US"; // which language you want to recognize (!!) + speechRecognizer.start(); // and then start :)) // EVENTS // ON END - speechRecognizer.onend = function () { // If the Speech-to-text stops to work, it will be notified in the console... + speechRecognizer.onend = function () { + // If the Speech-to-text stops to work, it will be notified in the console... console.log("Speech recognition service disconnected"); - speechRecognizer.start(); // and then restart itself + speechRecognizer.start(); // and then restart itself }; // ON SOUND START - speechRecognizer.onsoundstart = function () { // When it starts the Speech-to-text, it will be notified in the console + speechRecognizer.onsoundstart = function () { + // When it starts the Speech-to-text, it will be notified in the console console.log("Some sound is being received"); }; // ON ERROR - speechRecognizer.onerror = function (event) {}; + speechRecognizer.onerror = function (event) { + // Log the error + console.log(event); + }; // ON RESULT - speechRecognizer.onresult = function (event) { // Here is where the Speech-to-text show itself on the web page. - interimTranscripts = ""; + speechRecognizer.onresult = function (event) { + // Here is where the Speech-to-text show itself on the web page. + interimTranscripts = ""; for (let i = event.resultIndex; i < event.results.length; i++) { let transcript = event.results[i][0].transcript; - // console.log(event.results[i][0]); transcript.replace("\n", "
"); + if (event.results[i].isFinal) { - // finalTranscripts += ' '+transcript+' \n'; - finalTranscripts += transcript+'\n'; - } else { // There are also shown the interim results and according to their "confidence" (the percentage of how much the word is correct) the color of each word could change + finalTranscripts += transcript + "\n"; + } else { + // There are also shown the interim results and according to their "confidence" (the percentage of how much the word is correct) the color of each word could change interimTranscripts += transcript; - allTheInterim += `${interimTranscripts} `; + + allTheInterim += ` ${interimTranscripts} `; } } process.innerHTML = allTheInterim; @@ -118,14 +122,16 @@ function startConverting() { speech.innerHTML = final; - textStorage = final; - console.log(textStorage); - localStorage.setItem("speech", final); // Here is where is stored the recognized text in the Local Storage + textStorage = final; + cleanup = localStorage.setItem( + "speech", + final.replace(/()/g, "").replace(/(<\/span>)/g, "") + ); // Here is where is stored the recognized text in the Local Storage }; - } else { // Unfortunately this API works only on Chrome... + } else { + // Unfortunately this API works only on Chrome... speech.innerHTML = "At the moment this works only in Chrome, sorry"; } } - -// 2021, copyleft Kamo and Funix \ No newline at end of file +// 2021, copyleft Kamo and Funix diff --git a/speech/style.css b/speech/style.css index 2759610..7dc1782 100644 --- a/speech/style.css +++ b/speech/style.css @@ -1,15 +1,53 @@ +html, +body { + margin: 0; +} + .interim { color: #999; } #result { - max-width: 800px; - margin: 0 auto; font-size: 2rem; } -#process { - max-width: 800px; +.speech { + display: flex; margin: 0 auto; - margin-top: 50px; + padding: 16px; +} + +.speech > * { + flex: 1 0 50%; +} + +.ui { + padding: 16px; + text-align: right; +} + +#save { + border: 1px solid currentColor; + border-radius: 1rem; + font-size: 1rem; + padding: 0.25em 0.5em; + font-family: Arial, Helvetica, sans-serif; + background-color: transparent; + cursor: pointer; +} + +#save:hover { + color: green; +} + +#reset { + border: none; + background-color: transparent; + font-family: Arial, Helvetica, sans-serif; + font-size: 1rem; + cursor: pointer; +} + +#reset:hover { + color: red; } diff --git a/todo.txt b/todo.txt index f6b26f6..2435c14 100644 --- a/todo.txt +++ b/todo.txt @@ -12,3 +12,86 @@ vscode py + nltk console chrome :( + + + +4 hrs +---- + +18:00 45'' + introduction: + presentations + some theoric references + outlines and releated works + some questions + +18:45 30'' + workflow tour: + speech js + parse python + scrape python + design html + css + print js + +19:15 45'' + hands on aka speech and chat: + fast UI tutorial + 3 groups + chat using the questions as a starting point + +20:00 30'' + break + eat something + +20:30 45'' + hands on design: + start from the speech dataset + start from our templates + start from a sketch + +21:15 30'' + print and bind + +21:45 + presenting the results 30'' + + +---- + +4 hrs +---- + +18:00 45'' + introduction: + presentations + some theoric references + outlines and releated works + some questions + +18:45 30'' + workflow: + speech + parse + scrape + design + print + +19:15 45'' + hands on aka speech and chat: + fast UI tutorial + 3 groups + chat using the questions as a starting point + +20:00 30'' + break + eat something + +20:30 45'' + hands on design: + start from the speech dataset + start from our templates + start from a sketch + +21:15 30'' + print and bind + +21:45 + presenting the results 30'' From e65e4875e7504aaa801b03805b186ed181ee2326 Mon Sep 17 00:00:00 2001 From: lzzfnc Date: Tue, 5 Oct 2021 20:23:57 +0200 Subject: [PATCH 2/2] UI wip --- speech/index.html | 1 + speech/index.js | 2 ++ speech/style.css | 34 +++++++++++++++++++++++++++------- 3 files changed, 30 insertions(+), 7 deletions(-) diff --git a/speech/index.html b/speech/index.html index e28df1e..bc83635 100644 --- a/speech/index.html +++ b/speech/index.html @@ -10,6 +10,7 @@
+

Speech2Design

diff --git a/speech/index.js b/speech/index.js index 139a070..344b28c 100644 --- a/speech/index.js +++ b/speech/index.js @@ -116,11 +116,13 @@ function startConverting() { "> ${interimTranscripts} `; } } + process.innerHTML = allTheInterim; let final = finalTranscripts + '' + interimTranscripts + ""; speech.innerHTML = final; + window.scrollTo(0, document.body.scrollHeight); textStorage = final; cleanup = localStorage.setItem( diff --git a/speech/style.css b/speech/style.css index 7dc1782..8a602b2 100644 --- a/speech/style.css +++ b/speech/style.css @@ -1,6 +1,7 @@ html, body { margin: 0; + scroll-behavior: smooth; } .interim { @@ -9,31 +10,50 @@ body { #result { font-size: 2rem; + padding-right: 1em; + align-self: flex-end; } .speech { - display: flex; margin: 0 auto; - padding: 16px; + margin-top: 64px; + padding: 32px; + display: flex; + transition: height 0.3s ease-out; } .speech > * { - flex: 1 0 50%; + flex: 1 0 45%; } .ui { - padding: 16px; - text-align: right; + position: fixed; + background-color: white; + top: 0; + z-index: 100; + width: calc(100% - 64px); + display: flex; + + padding: 8px 0; + margin: 0 32px; +} + +.ui h1 { + margin: 0; + font-size: 2rem; + font-weight: normal; + margin-right: auto; } #save { border: 1px solid currentColor; - border-radius: 1rem; + border-radius: 2rem; font-size: 1rem; - padding: 0.25em 0.5em; + padding: 0.5em; font-family: Arial, Helvetica, sans-serif; background-color: transparent; cursor: pointer; + margin-right: 1rem; } #save:hover {