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