diff --git a/speech/index.html b/speech/index.html index 2e55d48..bc83635 100644 --- a/speech/index.html +++ b/speech/index.html @@ -9,9 +9,15 @@ - - -
-
+
+

Speech2Design

+ + +
+ +
+
+
+
\ No newline at end of file diff --git a/speech/index.js b/speech/index.js index 5e7f8e4..344b28c 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,68 +62,78 @@ 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; let final = finalTranscripts + '' + interimTranscripts + ""; speech.innerHTML = final; + window.scrollTo(0, document.body.scrollHeight); - 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..8a602b2 100644 --- a/speech/style.css +++ b/speech/style.css @@ -1,15 +1,73 @@ +html, +body { + margin: 0; + scroll-behavior: smooth; +} + .interim { color: #999; } #result { - max-width: 800px; - margin: 0 auto; font-size: 2rem; + padding-right: 1em; + align-self: flex-end; } -#process { - max-width: 800px; +.speech { margin: 0 auto; - margin-top: 50px; + margin-top: 64px; + padding: 32px; + display: flex; + transition: height 0.3s ease-out; +} + +.speech > * { + flex: 1 0 45%; +} + +.ui { + 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: 2rem; + font-size: 1rem; + padding: 0.5em; + font-family: Arial, Helvetica, sans-serif; + background-color: transparent; + cursor: pointer; + margin-right: 1rem; +} + +#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 deleted file mode 100644 index f43f8bb..0000000 --- a/todo.txt +++ /dev/null @@ -1,15 +0,0 @@ -> preparare domande x parte teorica - -> prep mail da mandare in anticipo con istru git - -> prep 3 fogli css per auto layout -> prep cose fatte in precedenza da fa vedere - - - -info su git -vscode -py + nltk -console -chrome :( -easybooklet \ No newline at end of file