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

Compare commits

base: poni:3ed6ba92dd9484c6ddf4ceefb6de405d535973bf
Branches Tags
poni:master
...
compare: poni:fd296e49a2f6ab7a8fd31fd092d2df345ab1d94e
Branches Tags
poni:master

2 Commits
3ed6ba92dd ... fd296e49a2

Author SHA1 Message Date
km0 fd296e49a2 fixxees 3 years ago
km0 d55efff7d4 trimmed stringg 3 years ago
10 changed files with 338 additions and 665 deletions
Show Stats

5
0_speech/index.js
Unescape Escape View File

@ -103,10 +103,9 @@ function startConverting() {
for (let i = event.resultIndex; i < event.results.length; i++) {
let transcript = event.results[i][0].transcript;
transcript.replace("\n", "<br>");
if (event.results[i].isFinal) {
finalTranscripts += transcript + "\n";
finalTranscripts += transcript.trim() + "\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;
@ -121,7 +120,7 @@ function startConverting() {
let final =
finalTranscripts + '<span class="interim">' + interimTranscripts + "</span>";
speech.innerHTML = final;
speech.innerHTML = final.replaceAll("\n", "<br />");
window.scrollTo(0, document.body.scrollHeight);
textStorage = final;

82
1_pythoning/1-2_NLTKing.py
Unescape Escape View File

@ -2,109 +2,109 @@
# NLTK (Natural Language ToolKit) is a library for Natural Language Process.
# We will use it to get the Part Of Speech (POS) of the speech-to-text results.
#
# We will use it to get the Part Of Speech (POS) of the speech-to-text results.
#
# What does it mean?
#
# It works as grammar tagging: for instance, the sentence "Around the clouds"
# would have this output:
#
# would have this output:
#
# [('Around', 'IN'), ('the', 'DT'), ('clouds', 'NN')]
#
#
# 'IN' means 'preposition' - 'DT' means 'determiner' - 'NN' means 'noun, common, singular or mass'
import time # to create delays :: for having a few seconds to check the console
import nltk # to use NLTK
# to create delays :: for having a few seconds to check the console
import time
# Open the speech-to-text result :: downloaded from the web interface >>
# Open the speech-to-text result :: downloaded from the web interface >>
with open('../speech.txt','r') as speech: # let's import the text
with open('../speech.txt', 'r') as speech: # let's import the text
text = speech.read() # and make python read it :)
print(text) # print it!
time.sleep(2) # check it in the console!
text = text.replace('<span class="interim"></span>','').replace('\n','. ') # delete this from the results
tokens = nltk.word_tokenize(text) # Tokenize the words :: split each word
pos = nltk.pos_tag(tokens) # Elaborate the Part of Speech! It will create an array, a list
print(pos) # print the array!
time.sleep(2) # check it in the console!
# Elaborate the Part of Speech! It will create an array, a list
pos = nltk.pos_tag(tokens)
# print(pos) # print the array!
# time.sleep(2) # check it in the console!
# To see all the POS tags, open the terminal and copy:
#
# python3
# import nltk
# nltk.help.upenn_tagset()
# To see all the POS tags, open the terminal and copy:
#
# python3
# import nltk
# nltk.help.upenn_tagset()
# see also:
# https://cheatography.com/deacondesperado/cheat-sheets/nltk-part-of-speech-tags/
# start the layouting :: html + css + paged.js >>
#
# declare html :: we will fill it in the process with loops
# declare the first part of the text for two html files with different CSS
# start the layouting :: html + css + paged.js >>
#
# declare html :: we will fill it in the process with loops
# declare the first part of the text for two html files with different CSS
html = ''
html1 = '''
<html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./pagedjs_files/interface.css">
<script src="./pagedjs_files/paged.polyfill.js"></script>
<link rel="stylesheet" href="./styles/1.css">
<meta charset="utf-8"/>
<title>📡 💻📘</title>
</head>
<body>
'''
html2 = '''
<html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./pagedjs_files/interface.css">
<script src="./pagedjs_files/paged.polyfill.js"></script>
<link rel="stylesheet" href="./styles/2.css">
<meta charset="utf-8"/>
<title>📡 💻📘</title>
</head>
<body>
'''
# Process each element of the list
# Process each element of the list
for e in pos: # e is the current element, pos is the array to process
print(e)
if e[0] == '.': # if e is a dot, its class will be 'dot'
html += " <span class='dot'>.</span><br> \n"
else: # fill the html with each word and assign it as class its POS
html += " <span class='"+e[1]+"'> "+e[0]+" </span>\n"
# Close the html text
# Close the html text
html += '''</body>
</html>'''
html = html.replace(' .','.').replace(" '", "'") # to tidy wrong " . " and " ' " position
# to tidy wrong " . " and " ' " position
html = html.replace(' .', '.').replace(" '", "'")
# Save the <html> files!
# Save the <html> files!
with open('../2_layout/1.html','w') as index:
with open('../2_layout/1.html', 'w', encoding='utf-8') as index:
index.write(html1)
index.write(html)
index.close()
with open('../2_layout/2.html','w') as index:
with open('../2_layout/2.html', 'w', encoding='utf-8') as index:
index.write(html2)
index.write(html)
index.close()

41
1_pythoning/3_imageScraping.py
Unescape Escape View File

@ -5,19 +5,20 @@
# With duckduckgo_images_api!
from duckduckgo_images_api import search # import the library for scrape
import time # to create delays :: for having a few seconds to check the console
from duckduckgo_images_api import search # import the library for scrape
# to create delays :: for having a few seconds to check the console
import time
with open('../speech.txt','r') as speech: # let's import the text
qq = speech.readlines() # and split it in lines, it will create an array, a list
with open('../speech.txt', 'r') as speech: # let's import the text
# and split it in lines, it will create an array, a list
qq = speech.readlines()
print(qq) # print the array!
time.sleep(2) # check qq in the console!
# declare the first part of the text of the html, we will fill it
# in the process with loops
# declare the first part of the text of the html, we will fill it
# in the process with loops
html = '''
<html>
@ -32,11 +33,10 @@ html = '''
<body>
'''
# Elaborate each line :: process every element of the array qq
# Elaborate each line :: process every element of the array qq
# q is for "query", qq for "queries", because we will send requests to
# DuckDuckGo searching the text of each line of speech.txt
# q is for "query", qq for "queries", because we will send requests to
# DuckDuckGo searching the text of each line of speech.txt
for q in qq:
@ -44,29 +44,24 @@ for q in qq:
time.sleep(2) # check current q in the console!
q = q.strip()
q = q.strip()
if q == '''<span class="interim"></span>''': # This nope.
continue
q = q.replace("\n","") # remove "\n", which means "return to the next line"
# remove "\n", which means "return to the next line"
q = q.replace("\n", "")
# Scrape images with search()!
# q is, indeed, the query for DuckDuckGo
# Scrape images with search()!
# q is, indeed, the query for DuckDuckGo
results = search(q)
r = results["results"][0]["image"] # get the http link to the image
html += f""" <span> {q} </span>\n""" # Now let's fill the html with text and the pic
html += f""" <img src='{r}'>\n"""
# Close the html text
# Close the html text
html += '''</body>
</html>'''
html = html.replace(" '", "'")
with open(',,/2_layout/3.html','w') as index: # Save the <html> file!
with open('../2_layout/3.html', 'w') as index: # Save the <html> file!
index.write(html)

196
2_layout/1.html
Unescape Escape View File

@ -1,149 +1,83 @@
<html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./pagedjs_files/interface.css">
<script src="./pagedjs_files/paged.polyfill.js"></script>
<link rel="stylesheet" href="./styles/1.css">
<meta charset="utf-8"/>
<title>📡 💻📘</title>
</head>
<body>
<span class='JJ'> ok </span>
<span class='NN'> let </span>
<span class='POS'>'s </span>
<span class='NN'> talk </span>
<span class='IN'> in </span>
<span class='NNP'> English </span>
<span class='IN'> for </span>
<span class='NN'> awhile </span>
<span class='WP'> what </span>
<span class='VBP'> are </span>
<span class='PRP'> we </span>
<span class='VBG'> eating </span>
<span class='dot'>.</span><br>
<span class='CC'> or </span>
<span class='RB'> not </span>
<span class='IN'> so </span>
<span class='CD'> 12345 </span>
<span class='NN'> multiply </span>
<span class='NN'> function </span>
<span class='VBD'> hello </span>
<span class='PRP'> it </span>
<span class='VBZ'> is </span>
<span class='VBG'> starting </span>
<span class='RB'> again </span>
<span class='dot'>.</span><br>
<span class='JJ'> ok </span>
<span class='NN'> navigate </span>
<span class='dot'>.</span><br>
<span class='PRP'> you </span>
<span class='VBP'> need </span>
<span class='TO'> to </span>
<span class='VB'> rest </span>
<span class='RB'> sometimes </span>
<span class='dot'>.</span><br>
<span class='RB'> also </span>
<span class='VBD'> implemented </span>
<span class='IN'> that </span>
<span class='VBG'> implementing </span>
<span class='dot'>.</span><br>
<span class='PRP'> he </span>
<span class='VBZ'>'s </span>
<span class='DT'> a </span>
<span class='NN'> sentence </span>
<span class='CC'> and </span>
<span class='PRP'> we </span>
<span class='VBP'> are </span>
<span class='RB'> not </span>
<span class='JJ'> interested </span>
<span class='dot'>.</span><br>
<span class='VB'> remember </span>
<span class='dot'>.</span><br>
<span class='VBG'> working </span>
<span class='RB'> so </span>
<span class='RB'> basically </span>
<span class='NN'> sentence </span>
<span class='dot'>.</span><br>
<span class='WRB'> where </span>
<span class='VBZ'> is </span>
<span class='TO'> to </span>
<span class='VB'> go </span>
<span class='DT'> a </span>
<span class='NN'> couple </span>
<span class='CC'> and </span>
<span class='RB'> then </span>
<span class='PRP'> you </span>
<span class='VBP'> put </span>
<span class='DT'> the </span>
<span class='NN'> adult </span>
<span class='dot'>.</span><br>
<span class='DT'> a </span>
<span class='RB'> bit </span>
<span class='JJR'> easier </span>
<span class='TO'> to </span>
<span class='VB'> understand </span>
<span class='dot'>.</span><br>
<span class='RB'> actually </span>
<span class='RB'> maybe </span>
<span class='NNS'> people </span>
<span class='RB'> just </span>
<span class='VBP'> do </span>
<span class='RB'> n't </span>
<span class='RB'> just </span>
<span class='dot'>.</span><br>
<span class='PRP'> I </span>
<span class='VBP'>'m </span>
<span class='RB'> just </span>
<span class='VBG'> thinking </span>
<span class='PRP'> it </span>
<span class='VBZ'>'s </span>
<span class='RB'> not </span>
<span class='DT'> the </span>
<span class='NNS'> centres </span>
<span class='VBP'> do </span>
<span class='RB'> n't </span>
<span class='VB'> put </span>
<span class='DT'> the </span>
<span class='NN'> dot </span>
<span class='CC'> and </span>
<span class='RB'> just </span>
<span class='VB'> put </span>
<span class='DT'> a </span>
<span class='NN'> couple </span>
<span class='dot'>.</span><br>
<span class='IN'> because </span>
<span class='RB'> then </span>
<span class='dot'>.</span><br>
<span class='PRP'> they </span>
<span class='VBP'> are </span>
<span class='VBG'> talking </span>
<span class='PRP'> they </span>
<span class='VBP'> are </span>
<span class='DT'> a </span>
<span class='NN'> booklet </span>
<span class='CC'> but </span>
<span class='PRP'> they </span>
<span class='VBP'> are </span>
<span class='RB'> not </span>
<span class='VBG'> writing </span>
<span class='dot'>.</span><br>
<span class='JJ'> much </span>
<span class='JJR'> better </span>
<span class='RB'> now </span>
<span class='JJ'> good </span>
<span class='NNS'> purple </span>
<span class='IN'> so </span>
<span class='PRP'> it </span>
<span class='VBZ'> is </span>
<span class='RB'> just </span>
<span class='JJ'> fine </span>
<span class='dot'>.</span><br>
<span class='RB'> so </span>
<span class='VBZ'> means </span>
<span class='IN'> that </span>
<span class='PRP'> it </span>
<span class='VBZ'> works </span>
<span class='IN'> pumpkinMichaelnewspaper </span>
<span class='NN'> canGoogle </span>
<span class='NN'> speaker </span>
<span class='JJ'> small </span>
<span class='NNP'> America </span>
<span class='TO'> to </span>
<span class='VB'> see </span>
<span class='WRB'> how </span>
<span class='PRP'> it </span>
<span class='VBZ'> goes </span>
<span class='JJ'> email </span>
<span class='NNP'> Sterling </span>
<span class='NNP'> Knight </span>
<span class='NN'> part </span>
<span class='IN'> of </span>
<span class='NN'> speech </span>
<span class='CD'> 20 </span>
<span class='JJ'> ok </span>
<span class='JJ'> independent </span>
<span class='NN'> boilerplate </span>
<span class='NNP'> IKEA </span>
<span class='WRB'> where </span>
<span class='VBP'> are </span>
<span class='PRP$'> my </span>
<span class='JJ'> next </span>
<span class='NNP'> Tuesday </span>
<span class='NN'> mum </span>
<span class='NN'> barrister </span>
<span class='VBN'> assisted </span>
<span class='IN'> into </span>
<span class='NNS'> months </span>
<span class='VBP'> turn </span>
<span class='RP'> off </span>
<span class='VBG'> living </span>
<span class='NN'> room </span>
<span class='NNP'> TVmaterial </span>
<span class='NN'> lightstream </span>
<span class='NN'> todayhello </span>
<span class='TO'> to </span>
<span class='PRP'> you </span>
<span class='VBN'> done </span>
<span class='dot'>.</span><br>
<span class='CC'> and </span>
<span class='RB'> now </span>
<span class='VBZ'> is </span>
<span class='JJ'> f </span>
<span class='NNP'> * </span>
<span class='NNP'> * </span>
<span class='NNP'> * </span>
<span class='NNP'> * </span>
<span class='NNP'> * </span>
<span class='RB'> up </span>
<span class='dot'>.</span><br>
<span class='NNP'> CBR </span>
<span class='CD'> 929 </span>
<span class='MD'> ca </span>
<span class='RB'> n't </span>
<span class='VB'> encode </span>
<span class='DT'> this </span>
<span class='CD'> one </span>
<span class='NN'> kodi </span>
<span class='NN'> turn </span>
<span class='NN'> bedroom </span>
<span class='NNS'> twoalways </span>
</body>
</html>

196
2_layout/2.html
Unescape Escape View File

@ -1,149 +1,83 @@
<html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./pagedjs_files/interface.css">
<script src="./pagedjs_files/paged.polyfill.js"></script>
<link rel="stylesheet" href="./styles/2.css">
<meta charset="utf-8"/>
<title>📡 💻📘</title>
</head>
<body>
<span class='JJ'> ok </span>
<span class='NN'> let </span>
<span class='POS'>'s </span>
<span class='NN'> talk </span>
<span class='IN'> in </span>
<span class='NNP'> English </span>
<span class='IN'> for </span>
<span class='NN'> awhile </span>
<span class='WP'> what </span>
<span class='VBP'> are </span>
<span class='PRP'> we </span>
<span class='VBG'> eating </span>
<span class='dot'>.</span><br>
<span class='CC'> or </span>
<span class='RB'> not </span>
<span class='IN'> so </span>
<span class='CD'> 12345 </span>
<span class='NN'> multiply </span>
<span class='NN'> function </span>
<span class='VBD'> hello </span>
<span class='PRP'> it </span>
<span class='VBZ'> is </span>
<span class='VBG'> starting </span>
<span class='RB'> again </span>
<span class='dot'>.</span><br>
<span class='JJ'> ok </span>
<span class='NN'> navigate </span>
<span class='dot'>.</span><br>
<span class='PRP'> you </span>
<span class='VBP'> need </span>
<span class='TO'> to </span>
<span class='VB'> rest </span>
<span class='RB'> sometimes </span>
<span class='dot'>.</span><br>
<span class='RB'> also </span>
<span class='VBD'> implemented </span>
<span class='IN'> that </span>
<span class='VBG'> implementing </span>
<span class='dot'>.</span><br>
<span class='PRP'> he </span>
<span class='VBZ'>'s </span>
<span class='DT'> a </span>
<span class='NN'> sentence </span>
<span class='CC'> and </span>
<span class='PRP'> we </span>
<span class='VBP'> are </span>
<span class='RB'> not </span>
<span class='JJ'> interested </span>
<span class='dot'>.</span><br>
<span class='VB'> remember </span>
<span class='dot'>.</span><br>
<span class='VBG'> working </span>
<span class='RB'> so </span>
<span class='RB'> basically </span>
<span class='NN'> sentence </span>
<span class='dot'>.</span><br>
<span class='WRB'> where </span>
<span class='VBZ'> is </span>
<span class='TO'> to </span>
<span class='VB'> go </span>
<span class='DT'> a </span>
<span class='NN'> couple </span>
<span class='CC'> and </span>
<span class='RB'> then </span>
<span class='PRP'> you </span>
<span class='VBP'> put </span>
<span class='DT'> the </span>
<span class='NN'> adult </span>
<span class='dot'>.</span><br>
<span class='DT'> a </span>
<span class='RB'> bit </span>
<span class='JJR'> easier </span>
<span class='TO'> to </span>
<span class='VB'> understand </span>
<span class='dot'>.</span><br>
<span class='RB'> actually </span>
<span class='RB'> maybe </span>
<span class='NNS'> people </span>
<span class='RB'> just </span>
<span class='VBP'> do </span>
<span class='RB'> n't </span>
<span class='RB'> just </span>
<span class='dot'>.</span><br>
<span class='PRP'> I </span>
<span class='VBP'>'m </span>
<span class='RB'> just </span>
<span class='VBG'> thinking </span>
<span class='PRP'> it </span>
<span class='VBZ'>'s </span>
<span class='RB'> not </span>
<span class='DT'> the </span>
<span class='NNS'> centres </span>
<span class='VBP'> do </span>
<span class='RB'> n't </span>
<span class='VB'> put </span>
<span class='DT'> the </span>
<span class='NN'> dot </span>
<span class='CC'> and </span>
<span class='RB'> just </span>
<span class='VB'> put </span>
<span class='DT'> a </span>
<span class='NN'> couple </span>
<span class='dot'>.</span><br>
<span class='IN'> because </span>
<span class='RB'> then </span>
<span class='dot'>.</span><br>
<span class='PRP'> they </span>
<span class='VBP'> are </span>
<span class='VBG'> talking </span>
<span class='PRP'> they </span>
<span class='VBP'> are </span>
<span class='DT'> a </span>
<span class='NN'> booklet </span>
<span class='CC'> but </span>
<span class='PRP'> they </span>
<span class='VBP'> are </span>
<span class='RB'> not </span>
<span class='VBG'> writing </span>
<span class='dot'>.</span><br>
<span class='JJ'> much </span>
<span class='JJR'> better </span>
<span class='RB'> now </span>
<span class='JJ'> good </span>
<span class='NNS'> purple </span>
<span class='IN'> so </span>
<span class='PRP'> it </span>
<span class='VBZ'> is </span>
<span class='RB'> just </span>
<span class='JJ'> fine </span>
<span class='dot'>.</span><br>
<span class='RB'> so </span>
<span class='VBZ'> means </span>
<span class='IN'> that </span>
<span class='PRP'> it </span>
<span class='VBZ'> works </span>
<span class='IN'> pumpkinMichaelnewspaper </span>
<span class='NN'> canGoogle </span>
<span class='NN'> speaker </span>
<span class='JJ'> small </span>
<span class='NNP'> America </span>
<span class='TO'> to </span>
<span class='VB'> see </span>
<span class='WRB'> how </span>
<span class='PRP'> it </span>
<span class='VBZ'> goes </span>
<span class='JJ'> email </span>
<span class='NNP'> Sterling </span>
<span class='NNP'> Knight </span>
<span class='NN'> part </span>
<span class='IN'> of </span>
<span class='NN'> speech </span>
<span class='CD'> 20 </span>
<span class='JJ'> ok </span>
<span class='JJ'> independent </span>
<span class='NN'> boilerplate </span>
<span class='NNP'> IKEA </span>
<span class='WRB'> where </span>
<span class='VBP'> are </span>
<span class='PRP$'> my </span>
<span class='JJ'> next </span>
<span class='NNP'> Tuesday </span>
<span class='NN'> mum </span>
<span class='NN'> barrister </span>
<span class='VBN'> assisted </span>
<span class='IN'> into </span>
<span class='NNS'> months </span>
<span class='VBP'> turn </span>
<span class='RP'> off </span>
<span class='VBG'> living </span>
<span class='NN'> room </span>
<span class='NNP'> TVmaterial </span>
<span class='NN'> lightstream </span>
<span class='NN'> todayhello </span>
<span class='TO'> to </span>
<span class='PRP'> you </span>
<span class='VBN'> done </span>
<span class='dot'>.</span><br>
<span class='CC'> and </span>
<span class='RB'> now </span>
<span class='VBZ'> is </span>
<span class='JJ'> f </span>
<span class='NNP'> * </span>
<span class='NNP'> * </span>
<span class='NNP'> * </span>
<span class='NNP'> * </span>
<span class='NNP'> * </span>
<span class='RB'> up </span>
<span class='dot'>.</span><br>
<span class='NNP'> CBR </span>
<span class='CD'> 929 </span>
<span class='MD'> ca </span>
<span class='RB'> n't </span>
<span class='VB'> encode </span>
<span class='DT'> this </span>
<span class='CD'> one </span>
<span class='NN'> kodi </span>
<span class='NN'> turn </span>
<span class='NN'> bedroom </span>
<span class='NNS'> twoalways </span>
</body>
</html>

163
2_layout/styles/2.css
Unescape Escape View File

@ -1,83 +1,80 @@
@media print{
/* Define the size of the pages and layout settings */
@page {
size: 148mm 210mm;
marks: crop cross;
margin: 15mm;
}
/* Custom font */
@font-face {
font-family: "neuzeit";
src: url("../fonts/NeuzeitOffice-Regular.ttf")
}
@font-face {
font-family: "fivo";
src: url("../fonts/fivo-sans.medium.otf")
}
/* Custom variables */
:root{
--first: #19B7B9;
--second: #0B1136;
--third: #2E4473;
}
/* Rules for everything */
body{
font-family: "neuzeit";
font-size: 20px;
line-height: 35px;
}
/* Rules for the rest */
div{
box-sizing: border-box;
}
span{
color: white;
}
/* Rules for dots */
.dot{
color: var(--third);
}
/* Rules for Part Of Speech (POS), defined in classes in <span> */
/* This case, conjunctions + verbs ) */
span.CC{
font-size: 3vw;
color: var(--first)
}
span.VB{
color: var(--second);
}
span.VBD{
color: var(--second);
}
span.VBG{
color: var(--second);
}
span.VBN{
color: var(--second);
}
span.VBP{
color: var(--second);
}
span.VBZ{
color: var(--second);
}
}
@media print {
/* Define the size of the pages and layout settings */
@page {
size: 148mm 210mm;
marks: crop cross;
margin: 15mm;
}
/* Custom font */
@font-face {
font-family: "neuzeit";
src: url("./fonts/NeuzeitOffice-Regular.ttf");
}
@font-face {
font-family: "fivo";
src: url("./fonts/fivo-sans.medium.otf");
}
/* Custom variables */
:root {
--first: #19b7b9;
--second: #0b1136;
--third: #2e4473;
}
/* Rules for everything */
body {
font-family: "neuzeit";
font-size: 20px;
line-height: 35px;
}
/* Rules for the rest */
div {
box-sizing: border-box;
}
span {
color: white;
}
/* Rules for dots */
.dot {
color: var(--third);
}
/* Rules for Part Of Speech (POS), defined in classes in <span> */
/* This case, conjunctions + verbs ) */
span.NN {
font-size: 3vw;
color: var(--first);
}
span.VB {
color: var(--second);
}
span.VBD {
color: var(--second);
}
span.VBG {
color: var(--second);
}
span.VBN {
color: var(--second);
}
span.VBP {
color: var(--second);
}
span.VBZ {
color: var(--second);
}
}

103
2_layout/styles/3.css
Unescape Escape View File

@ -1,54 +1,49 @@
@media print{
/* Define the size of the pages and layout settings */
@page {
size: 148mm 210mm;
marks: crop cross;
margin: 15mm;
}
/* Custom fonts */
@font-face {
font-family: "neuzeit";
src: url("../fonts/NeuzeitOffice-Regular.ttf")
}
@font-face {
font-family: "fivo";
src: url("../fonts/fivo-sans.medium.otf")
}
/* Custom variables */
:root{
}
/* Rules for everything */
body{
font-family: "neuzeit";
}
/* Rules for the rest */
div{
box-sizing: border-box;
}
span{
font-size: 20px;
line-height: 60px;
}
img {
margin: 0 5px;
height: 50px;
vertical-align: middle;
}
}
@media print {
/* Define the size of the pages and layout settings */
@page {
size: 148mm 210mm;
marks: crop cross;
margin: 15mm;
}
/* Custom fonts */
@font-face {
font-family: "neuzeit";
src: url("./fonts/NeuzeitOffice-Regular.ttf");
}
@font-face {
font-family: "fivo";
src: url("./fonts/fivo-sans.medium.otf");
}
/* Custom variables */
:root {
}
/* Rules for everything */
body {
font-family: "neuzeit";
}
/* Rules for the rest */
div {
box-sizing: border-box;
}
span {
font-size: 20px;
line-height: 60px;
}
img {
margin: 0 5px;
height: 50px;
vertical-align: middle;
}
}

54
2_layout/styles/style.css
Unescape Escape View File

@ -1,54 +0,0 @@
@media print{
/* Define the size of the pages and layout settings */
@page {
size: 148mm 210mm;
marks: crop cross;
bleed: 5mm;
}
/* Custom font */
@font-face {
font-family: "neuzeit";
src: url("fonts/NeuzeitOffice-Regular.ttf") format("ttf")
}
@font-face {
font-family: "fivo";
src: url("fonts/fivo-sans.medium.otf") format("otf")
}
/* Custom variables */
:root{
}
/* Rules for everything */
body{
font-family: "neuzeit";
}
/* Rules for the rest */
div{
box-sizing: border-box;
}
p{
text-align: left;
font-size: 12px;
line-height: 15.5px;
}
h1{
text-align: center;
}
}

36
speech.txt
Unescape Escape View File

@ -1,18 +1,18 @@
ok let's talk in English for awhile what are we eating
or not so it is starting again
ok navigate
you need to rest sometimes
also implemented that implementing
he's a sentence and we are not interested
remember
so basically sentence
where is to go a couple and then you put the adult
a bit easier to understand
actually maybe people just don't just
I'm just thinking it's not the centres don't put the dot and just put a couple
because then
they are talking they are a booklet but they are not writing
so it is just fine
so are you done
and now is f***** up
<span class="interim"></span>
why is pink the colour for girls and blue the colours for boys in the 19th century girls and boys were bored dress in white because it was easier to clean after WWI World War One department store in the US realise that could make more money if baby products will be gender specific
pastel swearing fashion and it was decided that thing would be the colour for boys and blue for girls in the 94 days market research in the US just that the current should be the other way around and the baby boom generation was the first where the girl dress in pink and boys in blue
blue
lupilu
Balle Balle
hello
hello hello you when I can theoretically
distinguish between 75 and 10 meal on heels
play some
0
ok
green is the colour of metal
green is the colour of netta in many cultures
early retail centre of only hope for good harvest with green vegetables green is in the traditional colour of Islam yeah the colour of Prophet Muhammad which is why many flags in this number call you with the colour green
since 1980s Green has been kind colourful environmental parties and organisation
the word green washing is used to describe advising of companies that use positive environmental practice
cease to cover-up environmentally unfriendly activities
rear room is used in television and Theatre to quite nervous performer

127
speech/index.js
Unescape Escape View File

@ -1,127 +0,0 @@
// The Myth of the Natural Language %%
// Speech2Design!!
// Welcome to the core-code of the Speech-to-text
// The tool we are gonna use is the "Web Speech API".
// What is an API?
// 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.
// GLOBAL VARIABLES
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 finalTranscripts = ""; // Variable for the... final transcripts
// To define bridges to the html file:
let speech = document.getElementById("result"); // where to print the final result of the recognition
let process = document.getElementById("process"); // and here the process, print the current sentence with interim results
// TEXT STORAGE
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.
// RESET STORAGE
let resetStorage = document.getElementById("reset"); // This will just reset, through a button, all the results got by that moment.
resetStorage.addEventListener("click", () => { // Reset everything!!!
allTheInterim = "";
finalTranscripts = "";
interimTranscripts = "";
speech.innerHTML = "";
textStorage = "";
localStorage.setItem("speech", "");
});
// SAVE FILE
let saveButton = document.getElementById("save"); // This will let you save the results in your desktop through a button
saveButton.addEventListener("click", () => {
download("speech.html", localStorage.getItem("speech"));
});
function download(filename, text) {
var element = document.createElement("a");
element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
element.setAttribute("download", filename);
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// START LISTENING
startConverting(); // Finally, here is where the magic happen.
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 = "";
// EVENTS
// ON END
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
};
// ON SOUND START
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) {};
// ON RESULT
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", "<br><br>");
if (event.results[i].isFinal) {
finalTranscripts += transcript;
} 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 += `<span style="opacity: ${
event.results[i][0].confidence + 0.3
}">${interimTranscripts}</span> `;
}
}
process.innerHTML = allTheInterim;
let final =
finalTranscripts + '<span class="interim">' + interimTranscripts + "</span>";
speech.innerHTML = final;
textStorage = final;
console.log(textStorage);
localStorage.setItem("speech", final); // Here is where is stored the recognized text in the Local Storage
};
} else { // Unfortunately this API works only on Chrome...
speech.innerHTML = "At the moment this works only in Chrome, sorry";
}
}
// 2021, copyleft Kamome and Funix
Write Preview
Loading…
Cancel
Save