poni
/
speech2design
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

stt save, reset, ui and cleanup

Browse Source
master
km0 3 years ago
parent af85f78f1f
commit 5969005015
4 changed files with 188 additions and 56 deletions
Show Stats Download Patch File Download Diff File

5
speech/index.html
Unescape Escape View File

@ -9,9 +9,14 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="ui">
<button id="save">Save</button> <button id="save">Save</button>
<button id="reset">Reset</button> <button id="reset">Reset</button>
</div>
<div class="speech">
<div id="result"></div> <div id="result"></div>
<div id="process"></div> <div id="process"></div>
</div>
</body> </body>
</html> </html>

54
speech/index.js
Unescape Escape View File

@ -1,6 +1,5 @@
// ARRAY DI PAROLE NORMALE, POI PYTHON -> split, for loop, POS e <span con classe POS in html // ARRAY DI PAROLE NORMALE, POI PYTHON -> split, for loop, POS e <span con classe POS in html
// The Myth of the Natural Language %% // The Myth of the Natural Language %%
// Speech2Design!! // Speech2Design!!
@ -12,13 +11,11 @@
// An API is a set of defined rules that explain how computers or applications communicate with one another. // An API is a set of defined rules that explain how computers or applications communicate with one another.
// APIs sit between an application and the web server, acting as an intermediary layer that processes data transfer between systems. // APIs sit between an application and the web server, acting as an intermediary layer that processes data transfer between systems.
// GLOBAL VARIABLES // GLOBAL VARIABLES
let interimTranscripts = ""; // Variable for interim results, the Speech-to-text try different worlds before to give us the most correct one. let interimTranscripts = ""; // Variable for interim results, the Speech-to-text try different worlds before to give us the most correct one.
let allTheInterim = ""; // Variable to store *all* the interim results let allTheInterim = ""; // Variable to store *all* the interim results
let finalTranscripts = ""; // Variable for the... final transcripts let finalTranscripts = ""; // Variable for the final transcripts
// To define bridges to the html file: // To define bridges to the html file:
let speech = document.getElementById("result"); // where to print the final result of the recognition let speech = document.getElementById("result"); // where to print the final result of the recognition
@ -28,12 +25,13 @@ let process = document.getElementById("process"); // and here the process, pri
let textStorage = localStorage.getItem("speech"); // This define where to save the results. let textStorage = localStorage.getItem("speech"); // This define where to save the results.
speech.innerHTML = textStorage; // LocalStorage is a type of web storage that allows you to access a local Storage object and store the data in the browser with no expiration date. speech.innerHTML = textStorage; // LocalStorage is a type of web storage that allows you to access a local Storage object and store the data in the browser with no expiration date.
finalTranscripts = textStorage;
// RESET STORAGE // RESET STORAGE
let resetStorage = document.getElementById("reset"); // This will just reset, through a button, all the results got by that moment. let resetStorage = document.getElementById("reset"); // This will just reset, through a button, all the results got by that moment.
resetStorage.addEventListener("click", () => { // Reset everything!!! // Reset everything!!!
resetStorage.addEventListener("click", () => {
allTheInterim = ""; allTheInterim = "";
finalTranscripts = ""; finalTranscripts = "";
interimTranscripts = ""; interimTranscripts = "";
@ -67,7 +65,8 @@ function download(filename, text) {
startConverting(); // Finally, here is where the magic happen. startConverting(); // Finally, here is where the magic happen.
function startConverting() { function startConverting() {
if ("webkitSpeechRecognition" in window) { // Declaring here the API if ("webkitSpeechRecognition" in window) {
// Declaring here the API
let speechRecognizer = new webkitSpeechRecognition() || new SpeechRecognition(); let speechRecognizer = new webkitSpeechRecognition() || new SpeechRecognition();
// And here the settings, like // And here the settings, like
@ -76,40 +75,45 @@ function startConverting() {
speechRecognizer.lang = "en-US"; // which language you want to recognize (!!) speechRecognizer.lang = "en-US"; // which language you want to recognize (!!)
speechRecognizer.start(); // and then start :)) speechRecognizer.start(); // and then start :))
finalTranscripts = "";
// EVENTS // EVENTS
// ON END // 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"); console.log("Speech recognition service disconnected");
speechRecognizer.start(); // and then restart itself speechRecognizer.start(); // and then restart itself
}; };
// ON SOUND START // 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"); console.log("Some sound is being received");
}; };
// ON ERROR // ON ERROR
speechRecognizer.onerror = function (event) {}; speechRecognizer.onerror = function (event) {
// Log the error
console.log(event);
};
// ON RESULT // ON RESULT
speechRecognizer.onresult = function (event) { // Here is where the Speech-to-text show itself on the web page. speechRecognizer.onresult = function (event) {
// Here is where the Speech-to-text show itself on the web page.
interimTranscripts = ""; interimTranscripts = "";
for (let i = event.resultIndex; i < event.results.length; i++) { for (let i = event.resultIndex; i < event.results.length; i++) {
let transcript = event.results[i][0].transcript; let transcript = event.results[i][0].transcript;
// console.log(event.results[i][0]);
transcript.replace("\n", "<br>"); transcript.replace("\n", "<br>");
if (event.results[i].isFinal) { if (event.results[i].isFinal) {
// finalTranscripts += ' <span class="oneTranscript"> '+transcript+' </span> \n'; finalTranscripts += transcript + "\n";
finalTranscripts += transcript+'\n'; } else {
} 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 // 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; interimTranscripts += transcript;
allTheInterim += `<span style="opacity: ${
event.results[i][0].confidence + 0.3 allTheInterim += `<span style="opacity:
}">${interimTranscripts}</span> `; ${event.results[i][0].confidence + 0.3}
"> ${interimTranscripts} </span> `;
} }
} }
process.innerHTML = allTheInterim; process.innerHTML = allTheInterim;
@ -119,13 +123,15 @@ function startConverting() {
speech.innerHTML = final; speech.innerHTML = final;
textStorage = final; textStorage = final;
console.log(textStorage); cleanup = localStorage.setItem(
localStorage.setItem("speech", final); // Here is where is stored the recognized text in the Local Storage "speech",
final.replace(/(<span class="interim">)/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"; speech.innerHTML = "At the moment this works only in Chrome, sorry";
} }
} }
// 2021, copyleft Kamo and Funix // 2021, copyleft Kamo and Funix

48
speech/style.css
Unescape Escape View File

@ -1,15 +1,53 @@
html,
body {
margin: 0;
}
.interim { .interim {
color: #999; color: #999;
} }
#result { #result {
max-width: 800px;
margin: 0 auto;
font-size: 2rem; font-size: 2rem;
} }
#process { .speech {
max-width: 800px; display: flex;
margin: 0 auto; 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;
} }

83
todo.txt
Unescape Escape View File

@ -12,3 +12,86 @@ vscode
py + nltk py + nltk
console console
chrome :( 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''

Write Preview
Loading…
Cancel
Save