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

clean

Browse Source
master
poni 3 years ago
parent 1d39e9825e 2376ea6a28
commit 3ed6ba92dd
28 changed files with 1354 additions and 50 deletions
Show Stats Download Patch File Download Diff File

2
.gitignore vendored
Unescape Escape View File

@ -0,0 +1,2 @@
*.DS_Store
*.ipynb_checkpoints/

6
speech/index.html → 0_speech/index.html
Unescape Escape View File

@ -9,9 +9,15 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="ui">
<h1>Speech2Design</h1>
<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>

139
0_speech/index.js
Unescape Escape View File

@ -0,0 +1,139 @@
// ARRAY DI PAROLE NORMALE, POI PYTHON -> split, for loop, POS e <span con classe POS in html
// 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.
finalTranscripts = textStorage;
// RESET STORAGE
let resetStorage = document.getElementById("reset"); // This will just reset, through a button, all the results got by that moment.
// Reset everything!!!
resetStorage.addEventListener("click", () => {
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.txt", 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 :))
// 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) {
// 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 = "";
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";
} 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;
window.scrollTo(0, document.body.scrollHeight);
textStorage = final;
cleanup = localStorage.setItem(
"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...
speech.innerHTML = "At the moment this works only in Chrome, sorry";
}
}
// October 2021, copyleft || Kamome and Funix || Speech-to-Derive * The Myth of Natural Language || Roodkapje, Rotterdam

73
0_speech/style.css
Unescape Escape View File

@ -0,0 +1,73 @@
html,
body {
margin: 0;
scroll-behavior: smooth;
}
.interim {
color: #999;
}
#result {
font-size: 2rem;
padding-right: 1em;
align-self: flex-end;
}
.speech {
margin: 0 auto;
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;
}

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

@ -0,0 +1,110 @@
# October 2021, copyleft || Kamome and Funix || Speech-to-Derive * The Myth of Natural Language || Roodkapje, Rotterdam
# 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.
#
# What does it mean?
#
# It works as grammar tagging: for instance, the sentence "Around the clouds"
# 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
# Open the speech-to-text result :: downloaded from the web interface >>
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!
# To see all the POS tags, open the terminal and copy:
#
# python3
# import nltk
# nltk.help.upenn_tagset()
# 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>
<head>
<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>
<head>
<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
for e in pos: # e is the current element, pos is the array to process
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
html += '''</body>
</html>'''
html = html.replace(' .','.').replace(" '", "'") # to tidy wrong " . " and " ' " position
# Save the <html> files!
with open('../2_layout/1.html','w') as index:
index.write(html1)
index.write(html)
with open('../2_layout/2.html','w') as index:
index.write(html2)
index.write(html)

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

@ -0,0 +1,72 @@
# October 2021, copyleft || Kamome and Funix || Speech-to-Derive * The Myth of Natural Language || Roodkapje, Rotterdam
# Scrape images from DuckDuckGo
#
# 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
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
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
html = '''
<html>
<head>
<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/3.css">
<meta charset="utf-8"/>
<title>📡 💻📘</title>
</head>
<body>
'''
# 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
for q in qq:
print(q) # print the q!
time.sleep(2) # check current q in the console!
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"
# 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
html += '''</body>
</html>'''
html = html.replace(" '", "'")
with open(',,/2_layout/3.html','w') as index: # Save the <html> file!
index.write(html)

135
1_pythoning/bonus_imageDownloader.py
Unescape Escape View File

@ -0,0 +1,135 @@
# October 2021, copyleft || Kamome and Funix || Speech-to-Derive * The Myth of Natural Language || Roodkapje, Rotterdam
# Bonus!
#
# Scrape and download images in local from DuckDuckGo
# with DuckDuckGoImages!
import DuckDuckGoImages as ddg # import the library for scrape
import os # to manipulate the file system
import shutil # same but powerfull >:D
import time # to create delays :: for having a few seconds to check the console
import random # to get random numbers
# Prepare the local folder :: where the images will be saved >>
if os.path.isdir('./images/'): # check if the folder "images" exists
shutil.rmtree('./images/') # if yes, delete it
os.mkdir('./images/') # and then create a fresh new one
# start the layouting :: html + css + paged.js >>
# declare the first part of the text of the html, we will fill it
# in the process with loops
html = '''
<html>
<head>
<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/3.css">
<meta charset="utf-8"/>
<title>📡 💻📘</title>
</head>
<body>
'''
# Open the speech-to-text result :: downloaded from the web interface >>
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
print(qq) # print the array!
time.sleep(2) # check qq in the console!
# 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
for q in qq:
print(q) # print the q!
time.sleep(2) # check current q in the console!
if q == '''<span class="interim"></span>''': # This nope.
continue
qBinded = q.replace(' ','') # qBinded is the current q but without spaces and "\n", which
qBinded = qBinded.replace("\n","") # means "return to the next line";
# because we will qBinded to name each file downloaded
os.mkdir(f'./images/{qBinded}') # create the folder with the name given by qBinded
print(qBinded) # print qBinded!
time.sleep(2) # check current q in the console!
# Scrape images with ddg.download()! :: we imported DuckDuckGoImages *as* ddg,
# it's just compacted the name
# q is, indeed, the query for DuckDuckGo
# folder=(../path/to/download)
# max_urls=(how many results attempt to scrape
# thumbnails=(True/False, to download thumbnails or bigger images)
ddg.download(q, folder= f"./images/{qBinded}/", max_urls=10, thumbnails=True)
picsList = os.listdir(f"./images/{qBinded}/") # get the contents of the folder, it will create another array
# each downloaded image will have a randomic UUIDv4 name so next step is
# to change its name with the name of the current q
print("List of pics:", picsList) # Check how many downloaded pictures!
time.sleep(2) # check in the console!
if len(picsList) == 0: # if the the list is empty..
html += f'<span class="{qBinded}">{q}</span><br><br>' # ..add now the <html> for just the text, since there are no images downloaded..
html += "\n"
os.rmdir(f'./images/{qBinded}/') # ..and delete the folder created, since is useless..
continue # ..from now on this q can't do anything more, let's go to the next iteration
# Layout q and its pic!
r = random.randint(0,len(picsList)) # get a random number from 0 to the lenght of the array {in compiuters 0 means the first!! :]] }
pic = picsList[r] # let's take a random picture from the array
os.rename(f'./images/{qBinded}/{pic}', f'./images/{qBinded}/{qBinded}.jpg') # This is to rename the pic with qBinded + the .jpg extension
os.replace(f'./images/{qBinded}/{qBinded}.jpg', f'./images/{qBinded}.jpg') # This is to move the pic to the main folder
shutil.rmtree(f'./images/{qBinded}/') # and it's time to delete the folder of this q
html += f""" <span class="{qBinded}">{q}</span>""" # Now let's fill the html with text and the pic
html += "\n"
html += f""" <span><img src="./images/{qBinded}.jpg"></span>"""
html += "\n"
# Close the html text
html += '''</body>
</html>'''
with open('../2_layout/localpics.html','w') as index: # Save the <html> file!
index.write(html)

25
1_pythoning/pythonInstallationParty.txt
Unescape Escape View File

@ -0,0 +1,25 @@
First, you need python. You can download Python from its website:
https://www.python.org/
If you need to install NLTK, open the terminal and copy:
pip3 install nltk
python3
import nltk
nltk.download('tagsets')
nltk.download('')
If you need to install duckduckgo-images-api, open the terminal and digit:
pip3 install duckduckgo-images-api
If you need to install DuckDuckGoImages, open the terminal and digit:
pip3 install DuckDuckGoImages

149
2_layout/1.html
Unescape Escape View File

@ -0,0 +1,149 @@
<html>
<head>
<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='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='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='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='VBP'> are </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>
</body>
</html>

149
2_layout/2.html
Unescape Escape View File

@ -0,0 +1,149 @@
<html>
<head>
<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='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='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='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='VBP'> are </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>
</body>
</html>

47
2_layout/3.html
Unescape Escape View File

@ -0,0 +1,47 @@
<html>
<head>
<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/3.css">
<meta charset="utf-8"/>
<title>Booklet</title>
</head>
<body>
<span>ok let's talk in English for awhile what are we eating</span>
<img src='https://tse3.mm.bing.net/th?id=OIP.URkqiGHddaNVnvoUtMflQQHaF0&pid=Api'>
<span>or not so it is starting again</span>
<img src='https://tse3.mm.bing.net/th?id=OIP.w2KDA__F4lQ1NyTt5FOjIgAAAA&pid=Api'>
<span>ok navigate</span>
<img src='https://tse3.mm.bing.net/th?id=OIF.y9XMU%2b2gdAWMj7VXDE%2ft%2fQ&pid=Api'>
<span>you need to rest sometimes</span>
<img src='https://tse4.mm.bing.net/th?id=OIP.GbFGas-ayDWMUd_9vgedSwHaGO&pid=Api'>
<span>also implemented that implementing</span>
<img src='https://tse3.mm.bing.net/th?id=OIF.GJKQxrJERpdrEixc86Aylg&pid=Api'>
<span>he's a sentence and we are not interested</span>
<img src='https://tse2.mm.bing.net/th?id=OIP.B8V15Vgwb4WSIBCh_DBKAAHaEK&pid=Api'>
<span>remember</span>
<img src='https://tse4.mm.bing.net/th?id=OIP.FIpqGxb0o5Qhs7F6FsmLUwHaJ4&pid=Api'>
<span>so basically sentence</span>
<img src='https://tse4.mm.bing.net/th?id=OIP.R-Aq7zQgyXkEkqHsRpd_fQHaK5&pid=Api'>
<span>where is to go a couple and then you put the adult</span>
<img src='https://tse3.mm.bing.net/th?id=OIP.-zezO3MYsykMDFXKr5BN4gHaFT&pid=Api'>
<span>a bit easier to understand</span>
<img src='https://tse2.mm.bing.net/th?id=OIP.dAOU1dmcC7DcOHjdZWnsOAHaFj&pid=Api'>
<span>actually maybe people just don't just</span>
<img src='https://tse3.mm.bing.net/th?id=OIP.lN80mz6v0-Og5Hy4rBFDBgHaFj&pid=Api'>
<span>I'm just thinking it's not the centres don't put the dot and just put a couple</span>
<img src='https://tse2.mm.bing.net/th?id=OIP.soE-jIhLUlXXcsImI9dSAgHaDE&pid=Api'>
<span>because then</span>
<img src='https://tse4.mm.bing.net/th?id=OIP._isREjX53ak2ahph2VOozgHaIM&pid=Api'>
<span>they are talking they are a booklet but they are not writing</span>
<img src='https://tse2.mm.bing.net/th?id=OIP.-utvaIFVP4SIM9E9Am3efAHaEZ&pid=Api'>
<span>so it is just fine</span>
<img src='https://tse3.mm.bing.net/th?id=OIP.6d-LRDAm986tLKsRdmxAFwHaC_&pid=Api'>
<span>so are you done</span>
<img src='https://tse1.mm.bing.net/th?id=OIF.GUCE7OkP722hk6eZcjJckQ&pid=Api'>
<span>and now is f***** up</span>
<img src='https://tse4.mm.bing.net/th?id=OIP.Z_JLWGz4XfBuc0lzMmTUggHaEQ&pid=Api'>
</body>
</html>

0
layout/paged.js_files/interface.css → 2_layout/pagedjs_files/interface.css
Unescape Escape View File

0
layout/paged.js_files/paged.js → 2_layout/pagedjs_files/paged.js
Unescape Escape View File

0
layout/paged.js_files/paged.polyfill.js → 2_layout/pagedjs_files/paged.polyfill.js
Unescape Escape View File

203
2_layout/styles/1.css
Unescape Escape View File

@ -0,0 +1,203 @@
@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{
--text: rgba(0,0,0,0.3)
}
body{
font-size: 24px;
line-height: 25px;
text-align: justify;
text-justify: inter-word;
}
span{
color: var(--text)
}
span.CC{
background-color:#333300
}
span.CD{
background-color:#999900
}
span.DT{
background-color: #ff00ff
}
span.EX{
background-color: #006080
}
span.FW{
background-color:#f6f6ee
}
span.IN{
background-color:#ffccff
}
span.JJ{
background-color: #f2f2f2;
}
span.JJR{
background-color: #b3b3b3
}
span.JJS{
background-color:#737373
}
span.LS{
background-color:#666633
}
span.MD{
background-color:#00cc00
}
span.NN{
background-color:#33ff33
}
span.NNS{
background-color:#80ff80
}
span.NNP{
background-color:#ccffcc
}
span.PDT{
background-color:#ffd1b3
}
span.POS{
background-color:#ffb380
}
span.PRP{
background-color:#ff8533
}
span.PRP${
background-color:#e65c00
}
span.RB{
background-color:#ff8080
}
span.RBR{
background-color:#ff4d4d
}
span.RBS{
background-color:#e60000
}
span.RP{
background-color:#992600
}
span.SYM{
background-color:#99ff33
}
span.TO{
background-color: black
}
span.UH{
background-color:#ffff00
}
span.VB{
background-color: #000099
}
span.VBD{
background-color: #0000e6
}
span.VBG{
background-color:#1a1aff
}
span.VBN{
background-color: #4d4dff
}
span.VBP{
background-color: #b3b3ff
}
span.VBZ{
background-color: #ccccff
}
span.WDT{
background-color:#ccffff
}
span.WP{
background-color:#66ffff
}
span.WP${
background-color:#00e6e6
}
span.WRB{
background-color: #008080
}
/* Rules for everything */
body{
font-family: "neuzeit";
}
/* Rules for the rest */
div{
box-sizing: border-box;
}
}

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

@ -0,0 +1,83 @@
@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);
}
}

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

@ -0,0 +1,54 @@
@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;
}
}

BIN
2_layout/styles/fonts/NeuzeitOffice-Regular.ttf
View File

Binary file not shown.

BIN
2_layout/styles/fonts/fivo-sans.medium.otf
View File

Binary file not shown.

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

@ -0,0 +1,54 @@
@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
README.txt
Unescape Escape View File

@ -1,8 +1,19 @@
Helloooo October 2021, copyleft || Kamome and Funix || Speech-to-Derive * The Myth of Natural Language || Roodkapje, Rotterdam
Welcome!
This is a little file to explain what's going on in these folders. This is a little file to explain what's going on in these folders.
the folder 'speech' contains > We will follow a workflow which starts with
using the speech-to-text tool to generate contents,
then create html files with the downloaded results,
finally render the layouts, customise print and bind them
'0_speech' contains >
the 'index.html' > in order to visualize which words are recognized by the 'index.html' > in order to visualize which words are recognized by
the Speech-to-text the Speech-to-text
@ -11,19 +22,32 @@ the folder 'speech' contains >
the index.js > where is written the code to use the Speech-to-text app the index.js > where is written the code to use the Speech-to-text app
the folder 'layout' contains > '1_pythoning' contains >
1-2_NLTKing.py > python file for generating html for two booklets based
on NLTK (Natural Lanugage ToolKit)
the folder 'paged.js_files' > contains the library Paged.js 3_imageScraping.py > python file for generating html for a booklet based
on image scraping from duckduckgo
pythonInstallationParty.txt > instructions for install libraries we'll use
'2_layout' contains >
the folder 'pagedjs_files' > the library Paged.js
Paged.js is a free and open source JavaScript library that paginates Paged.js is a free and open source JavaScript library that paginates
content in the browser to create PDF output from any HTML content. content in the browser to create PDF output from any HTML content.
https://www.pagedjs.org/about/ https://www.pagedjs.org/about/
the folder 'styles' > there are three different .css files that change the folder 'styles' > there are three different .css files that change
the layout. the layouts and fonts
the 'index.html' > where you can visualize the rendering of the layout. [not yet but] html files > where you can visualize the render of the layouts.
It works through a live server, that means that you have to simulate a It works through a live server, that means that you have to simulate a
server in your computer: how? server in your computer: how?
you can use python, opening the terminal/cmd and digit > you can use python, opening the terminal/cmd and digit >
python3 -m http.server python3 -m http.server
you can use Visual Studio Code with the extension "Live Server" you can use Visual Studio Code with the extension "Live Server"

15
layout/index.html
Unescape Escape View File

@ -1,15 +0,0 @@
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="paged.js_files/interface.css">
<script src="paged.js_files/paged.polyfill.js"></script>
<link rel="stylesheet" href="styles/1.css">
<meta charset="utf-8"/>
<title>Booklet</title>
</head>
<body>
</body>
</html>

0
layout/styles/1.css
Unescape Escape View File

0
layout/styles/2.css
Unescape Escape View File

0
layout/styles/3.css
Unescape Escape View File

18
speech.txt
Unescape Escape View File

@ -0,0 +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>

15
speech/style.css
Unescape Escape View File

@ -1,15 +0,0 @@
.interim {
color: #999;
}
#result {
max-width: 800px;
margin: 0 auto;
font-size: 2rem;
}
#process {
max-width: 800px;
margin: 0 auto;
margin-top: 50px;
}

9
todo.txt
Unescape Escape View File

@ -1,9 +0,0 @@
> commenti nel codice
> console.log per far capire le cose meglio
> rendering css capire cosa e non cosa
> paged.js auto
> fix localStorage
> preparare domande x parte teorica
> preparere testi da proporre prima del ws
> prep mail da mandare in anticipo con istru git
> prep 3 fogli css per auto layout
Write Preview
Loading…
Cancel
Save