added first version of mini site
parent
727e2b440b
commit
66725ed890
@ -0,0 +1,27 @@
|
|||||||
|
! version = 2.0
|
||||||
|
|
||||||
|
// Bot variables
|
||||||
|
! var name = SAINT
|
||||||
|
! var age = 5
|
||||||
|
|
||||||
|
// Substitutions
|
||||||
|
! sub i'm = i am
|
||||||
|
! sub i'd = i would
|
||||||
|
! sub i've = i have
|
||||||
|
! sub i'll = i will
|
||||||
|
! sub don't = do not
|
||||||
|
! sub isn't = is not
|
||||||
|
! sub you'd = you would
|
||||||
|
! sub you're = you are
|
||||||
|
! sub you've = you have
|
||||||
|
! sub you'll = you will
|
||||||
|
! sub what's = what is
|
||||||
|
! sub whats = what is
|
||||||
|
! sub what're = what are
|
||||||
|
! sub what've = what have
|
||||||
|
! sub what'll = what will
|
||||||
|
! sub who's = who is
|
||||||
|
|
||||||
|
! sub hi = hello
|
||||||
|
! sub publication = thesis
|
||||||
|
! sub book = thesis
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
! version = 2.0
|
||||||
|
|
||||||
|
// Text
|
||||||
|
+ hello
|
||||||
|
- hello, what is your name?
|
||||||
|
|
||||||
|
+ hi
|
||||||
|
- hi, what is your name?
|
||||||
|
|
||||||
|
+ hello <bot name>
|
||||||
|
- Hello my friend
|
||||||
|
|
||||||
|
+ my name is *
|
||||||
|
- nice to meet you <star>
|
||||||
|
- nice meeting you <star>
|
||||||
|
|
||||||
|
+ thank you
|
||||||
|
- you are welcome
|
||||||
|
- welcome
|
||||||
|
- no problem
|
||||||
|
- no worries
|
||||||
|
|
||||||
|
+ [*] thesis [*]
|
||||||
|
- The publication is called <i>The Ghost in the Speaker</i>. It features essays reflecting on the virtual assistant, and what role personality could play for storytelling using smart speakers.
|
||||||
|
|
||||||
|
+ [*] project [*]
|
||||||
|
- The Smart Speaker Theatre is a theatre piece about three strange smart speakers that kidnap a Google home. To decide what to do with it, they interrogate the device.
|
||||||
|
^ <br><br>The project questions the default mode of smart speakers as digital assistants.
|
||||||
|
|
||||||
|
+ [*] (find|read) the thesis [*]
|
||||||
|
- The online version will be available soon.
|
||||||
|
- Later this month there will be a pdf available.
|
||||||
|
- Did you know it is already uploaded? It's somewhere on the XPUB wiki.
|
||||||
|
- Don't tell Joca, but you can secretly download the PDF <a href="http://pzwiki.wdka.nl/mw-mediadesign/images/5/5e/Thesis_final_jp_van_der_horst.pdf">over here</a>.
|
||||||
|
|
||||||
|
+ [*] (tell|know) more [*]
|
||||||
|
- Checkout the XPUB Wiki for now: <a href=http://pzwiki.wdka.nl/mediadesign/User:Joca/The_Smart_Speaker_Theatre>User:Joca/The Smart Speaker Theatre</a>
|
||||||
|
|
||||||
|
+ *
|
||||||
|
- I was strictly instructed to only tell this about the project or the thesis for now.
|
||||||
|
- Reading is not my strongest point, sorry. I don't know what to do with this.
|
||||||
|
- (I outsourced this work to someone else, but I didn't pay enough to handle this particular situation)
|
||||||
|
- Mmm, I don't understand this.
|
||||||
|
|
||||||
|
// If the user repeats the bot's previous message
|
||||||
|
+ <reply>
|
||||||
|
- Don't repeat what I say.
|
||||||
|
|
||||||
|
// If the user keeps repeating themselves over and over.
|
||||||
|
+ <input>
|
||||||
|
* <input> == <input2> => That's the second time you've repeated yourself.
|
||||||
|
* <input> == <input3> => If you repeat yourself again I'll stop talking.
|
||||||
|
* <input> == <input4> => That's it. I'm not talking.{topic=sorry}
|
||||||
|
- Please don't repeat yourself.
|
||||||
|
|
||||||
|
// An example that uses both tags
|
||||||
|
+ why did you say that
|
||||||
|
- I said, "<reply>", because you said, "<input>".
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
|
|
||||||
<title>XPUB</title>
|
|
||||||
<meta name="description" content="XPUB">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="main.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<img src='reasonable.jpg' width='50%'/>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -0,0 +1,34 @@
|
|||||||
|
<!doctype html>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Based on the tutorial
|
||||||
|
https://medium.com/@awesammcoder/javascript-tutorial-simple-chatai-using-rivescript-js-4f0291e298f1
|
||||||
|
https://www.rivescript.com/docs/tutorial
|
||||||
|
|
||||||
|
Thank you!
|
||||||
|
-->
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>XPUB - The Smart Speaker Theatre</title>
|
||||||
|
<meta name="description" content="XPUB">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="chat">
|
||||||
|
<div class="messages"></div>
|
||||||
|
<div id="edge"></div>
|
||||||
|
<form class="actions">
|
||||||
|
<input type="text" placeholder="press 'Enter' to send...">
|
||||||
|
<button type="submit">Send</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/rivescript@latest/dist/rivescript.min.js"></script>
|
||||||
|
<script src="./script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
let bot = new RiveScript();
|
||||||
|
|
||||||
|
const message_container = document.querySelector('.messages');
|
||||||
|
const form = document.querySelector('form');
|
||||||
|
const input_box = document.querySelector('input');
|
||||||
|
|
||||||
|
const brains = [
|
||||||
|
'./begin.rive',
|
||||||
|
'./brain.rive'
|
||||||
|
];
|
||||||
|
|
||||||
|
bot.loadFile(brains).then(botReady).catch(botNotReady);
|
||||||
|
|
||||||
|
form.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
selfReply(input_box.value);
|
||||||
|
input_box.value = '';
|
||||||
|
});
|
||||||
|
|
||||||
|
function getRandomNumber(start, end, increments) {
|
||||||
|
var numbers = [];
|
||||||
|
for(var n = start; n <= end; n += increments) {
|
||||||
|
numbers.push(n);
|
||||||
|
}
|
||||||
|
|
||||||
|
var randomIndex = Math.floor(Math.random() * numbers.length);
|
||||||
|
return numbers[randomIndex];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWelcomeText() {
|
||||||
|
fetch('./welcome.txt')
|
||||||
|
.then(response => response.text())
|
||||||
|
.then((data) => {
|
||||||
|
const textArray = data.split(/\r?\n/);
|
||||||
|
textArray.forEach(function (item, index) {
|
||||||
|
botReply(item);
|
||||||
|
document.title = '(3) - Smart Speaker Theatre';
|
||||||
|
});
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function botReply(message){
|
||||||
|
message_container.innerHTML += `<div class="bot">${message}</div>`;
|
||||||
|
location.href = '#edge';
|
||||||
|
document.querySelector(".chat").scrollTop = document.querySelector(".chat").scrollHeight;
|
||||||
|
document.title = '(1) - Smart Speaker Theatre'
|
||||||
|
}
|
||||||
|
|
||||||
|
function selfReply(message){
|
||||||
|
message_container.innerHTML += `<div class="self">${message}</div>`;
|
||||||
|
location.href = '#edge';
|
||||||
|
|
||||||
|
bot.reply("local-user", message).then(function(reply) {
|
||||||
|
//botReply(reply);
|
||||||
|
setTimeout(function() {
|
||||||
|
botReply(reply);
|
||||||
|
}, getRandomNumber(425, 1000, 200)); // Random delay for answer between 225 and 1000 ms, with 200ms increments
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function botReady(){
|
||||||
|
bot.sortReplies();
|
||||||
|
// The welcome text is parsed from welcome.txt
|
||||||
|
// Each new line in that file, becomes a text bubble
|
||||||
|
getWelcomeText();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function botNotReady(err){
|
||||||
|
console.log("An error has occurred.", err);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Title(){
|
||||||
|
setTimeout(function() {
|
||||||
|
document.title = 'Smart Speaker Theatre'
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("mousemove", Title);
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
* {
|
||||||
|
font-family: Karla;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
max-height: calc(100%-2.5rem);
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
max-height: 2.5rem;
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.actions input {
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
width: 79.89%;
|
||||||
|
outline: 0;
|
||||||
|
border: 0;
|
||||||
|
background-color: #dfdfdf;
|
||||||
|
padding: 0 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions button {
|
||||||
|
height: 100%;
|
||||||
|
float: right;
|
||||||
|
width: 18%;
|
||||||
|
background-color:#44c767;
|
||||||
|
border:1px solid #18ab29;
|
||||||
|
display:inline-block;
|
||||||
|
cursor:pointer;
|
||||||
|
color:#ffffff;
|
||||||
|
padding:16px 31px;
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions button:hover {
|
||||||
|
background-color:#5cbf2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages {
|
||||||
|
padding: 1%;
|
||||||
|
height: 30px;
|
||||||
|
max-width: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages div {
|
||||||
|
max-width: 60%;
|
||||||
|
display: block;
|
||||||
|
margin: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages .bot {
|
||||||
|
text-align: left;
|
||||||
|
margin-right: auto;
|
||||||
|
background: #0066cc;
|
||||||
|
color: white;
|
||||||
|
width: max-content;
|
||||||
|
min-width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages .bot a {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages .bot b {
|
||||||
|
color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages .self {
|
||||||
|
margin-left: auto;
|
||||||
|
background: #DDD;
|
||||||
|
width: max-content;
|
||||||
|
min-width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 768px) {
|
||||||
|
* {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat {
|
||||||
|
padding-top: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages div {
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions button {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions input {
|
||||||
|
text-indent: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
Hi Human! My name is SAINT, I am a smart speaker. But not quite like Google Home, or Amazon Echo.
|
||||||
|
<img width="50%" src="./img/selfie.jpg"> <br> (I mean, I look like this) #speakerselfie
|
||||||
|
I run the website of the <b>Smart Speaker Theatre</b>. Do you want to know more about the <b>project</b>, or the <b>publication</b>?
|
||||||
Loading…
Reference in New Issue