diff --git a/app/static/background/space-station.jpg b/app/static/background/space-station.jpg new file mode 100644 index 0000000000000000000000000000000000000000..56751e2255ac32da0de2129916cdbafec8d0a6b4 Binary files /dev/null and b/app/static/background/space-station.jpg differ diff --git a/app/static/css/index.css b/app/static/css/index.css new file mode 100644 index 0000000000000000000000000000000000000000..22a11767b6c8e07424e3b40b663ae9f4010a116e --- /dev/null +++ b/app/static/css/index.css @@ -0,0 +1,115 @@ +body { + background-image: url('../background/space-station.jpg'); + background-repeat: no-repeat; + background-size: 100%; + color: white; +} + +img { + width: 30%; + margin-top: 75px; + margin-left: 2.5%; +} + +input { + margin-top: 2px; + width: 72.5%; + float: left; + height: 40px; + border-style: solid; + border-color: white; +} + +button { + width: 25%; + float: right; + height: 50px; + border-style: solid; + border-color: white; +} + +.chat-container { + margin-top: 75px; + margin-right: 22.5%; + width: 40%; + float:right; + text-align: center; + height: 750px; + /* border-style: solid; + border-color: white; */ +} + +#chat { + height: 680px; + position: relative; + margin-bottom: 20px; + display: flex; + flex-direction: column-reverse; + align-items: flex-start; + overflow-y:scroll; + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ +} + +#chat::-webkit-scrollbar { + display: none; /* Webkit-based browsers */ +} + +.input { + background-color: white; + height: 50px; + border-style: solid; + border-color:cornflowerblue; +} + +.message-user { + background-color: white; + color: black; + /* width: 200px; */ + align-self: flex-end; + float: right; + clear: both; + margin-top: 10px; + min-width: 10%; + max-width: 80%; + border-radius: 25px; + padding-right: 10px; + padding-left: 10px; +} + +.message-bot { + background-color: gray; + color: black; + /* width: 200px; */ + align-self: flex-start; + float: left; + clear: both; + margin-top: 10px; + min-width: 10%; + max-width: 80%; + border-radius: 10px; + padding-right: 10px; + padding-left: 10px; +} + +.feedback { + top: 0; + right: 0; + position: fixed; + padding-right: 150px; + width: 500px; + padding-top: 50px; +} + +.tipps { + position: fixed; + bottom: 0; + left: 0; + margin-bottom: 150px; + margin-left: 150px; + text-align: center; + width: 20%; + font-size: large; + /* background-color: white; + color: black; */ +} diff --git a/app/static/javascript/frontend.js b/app/static/javascript/frontend.js index 3a11f097f29e0bc15ecb1444fc17eff0765704d9..7f95fb756243f5ca0265dd2346f567ff907a8d50 100644 --- a/app/static/javascript/frontend.js +++ b/app/static/javascript/frontend.js @@ -1,15 +1,44 @@ function sendMessage() { message = document.getElementById("inputField").value; - message = "message=" + message; - fetch("http://localhost:5000/sendmessage", { - method: "POST", - headers: { - "Content-Type": "application/x-www-form-urlencoded" - }, - body: message - }) - .then((response) => response.json()) - .then((json) => { - console.log(json[0].content); - }); -}; \ No newline at end of file + if(message !== "") { + + let newDiv = document.createElement("div"); + newDiv.className = "message-user"; + + let newP = document.createElement("p"); + newP.textContent = message; + newDiv.appendChild(newP); + let chat = document.getElementById("chat"); + chat.insertBefore(newDiv, chat.firstChild); + // document.getElementById("chat").appendChild(newDiv); + + message = "message=" + message; + document.getElementById('inputField').value = ""; + fetch("http://localhost:5000/sendmessage", { + method: "POST", + headers: { + "Content-Type": "application/x-www-form-urlencoded" + }, + body: message + }) + .then((response) => response.json()) + .then((json) => { + let botMessage = json[0].content; + let newDiv = document.createElement("div"); + newDiv.className = "message-bot"; + + let newP = document.createElement("p"); + newP.textContent = botMessage; + newDiv.appendChild(newP); + let chat = document.getElementById("chat"); + chat.insertBefore(newDiv, chat.firstChild); + + // document.getElementById("chat").appendChild(newDiv); + }); + } +}; + +function checkKeyInput(event) { + if(event.key === 'Enter') + sendMessage(); +} \ No newline at end of file diff --git "a/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.54 - A cartoony space-robot standing on the surface of a colorful alien planet. The robot has a playful design with exaggerated features, bright colors, an.webp" "b/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.54 - A cartoony space-robot standing on the surface of a colorful alien planet. The robot has a playful design with exaggerated features, bright colors, an.webp" deleted file mode 100644 index 55cace721990a0c35d359c116d859824abb2eda6..0000000000000000000000000000000000000000 --- "a/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.54 - A cartoony space-robot standing on the surface of a colorful alien planet. The robot has a playful design with exaggerated features, bright colors, an.webp" +++ /dev/null @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?><Error><Code>AuthenticationFailed</Code><Message>Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature. -RequestId:39e44793-801e-005d-7d06-c06cb1000000 -Time:2024-06-16T15:58:54.2644863Z</Message><AuthenticationErrorDetail>Signed expiry time [Sun, 16 Jun 2024 15:48:46 GMT] must be after signed start time [Sun, 16 Jun 2024 15:58:54 GMT]</AuthenticationErrorDetail></Error> \ No newline at end of file diff --git "a/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.55 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp" "b/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.55 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp" deleted file mode 100644 index 14324126085a3a32ea64d4d9ffcdbffe758d2568..0000000000000000000000000000000000000000 --- "a/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.55 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp" +++ /dev/null @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?><Error><Code>AuthenticationFailed</Code><Message>Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature. -RequestId:b15016f6-f01e-003a-0606-c0ff9d000000 -Time:2024-06-16T15:58:55.6576196Z</Message><AuthenticationErrorDetail>Signed expiry time [Sun, 16 Jun 2024 15:49:07 GMT] must be after signed start time [Sun, 16 Jun 2024 15:58:55 GMT]</AuthenticationErrorDetail></Error> \ No newline at end of file diff --git "a/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.56 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp" "b/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.56 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp" deleted file mode 100644 index da818603e9e2ad9f9648f0bc2ac8136020af0f22..0000000000000000000000000000000000000000 --- "a/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.56 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp" +++ /dev/null @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?><Error><Code>AuthenticationFailed</Code><Message>Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature. -RequestId:3eb0871f-e01e-004b-7506-c0269f000000 -Time:2024-06-16T15:58:56.7098453Z</Message><AuthenticationErrorDetail>Signed expiry time [Sun, 16 Jun 2024 15:49:48 GMT] must be after signed start time [Sun, 16 Jun 2024 15:58:56 GMT]</AuthenticationErrorDetail></Error> \ No newline at end of file diff --git a/app/static/robo_images/dall-e-image-confused-cropped.png b/app/static/robo_images/dall-e-image-confused-cropped.png new file mode 100644 index 0000000000000000000000000000000000000000..970932ad3ef8c3328af2a622a2c04a5970fc0cd6 Binary files /dev/null and b/app/static/robo_images/dall-e-image-confused-cropped.png differ diff --git a/app/static/robo_images/dall-e-image-confused-cropped2.png b/app/static/robo_images/dall-e-image-confused-cropped2.png new file mode 100644 index 0000000000000000000000000000000000000000..e9d999302043c203588733f8740902c7e746fa63 Binary files /dev/null and b/app/static/robo_images/dall-e-image-confused-cropped2.png differ diff --git a/app/static/robo_images/dall-e-image-confused.png b/app/static/robo_images/dall-e-image-confused.png new file mode 100644 index 0000000000000000000000000000000000000000..8747c81e1615c8d2e9de62cc1ea77b275a2b447e Binary files /dev/null and b/app/static/robo_images/dall-e-image-confused.png differ diff --git a/app/static/robo_images/dall-e-image-happy-cropped.png b/app/static/robo_images/dall-e-image-happy-cropped.png new file mode 100644 index 0000000000000000000000000000000000000000..5183d60a62bc57c9b52f2f86f231cba529dbf103 Binary files /dev/null and b/app/static/robo_images/dall-e-image-happy-cropped.png differ diff --git a/app/static/robo_images/dall-e-image-happy-cropped2.png b/app/static/robo_images/dall-e-image-happy-cropped2.png new file mode 100644 index 0000000000000000000000000000000000000000..2848a812520799deb34d46bc495c0eb7f0e8955b Binary files /dev/null and b/app/static/robo_images/dall-e-image-happy-cropped2.png differ diff --git a/app/static/robo_images/dall-e-image-happy.png b/app/static/robo_images/dall-e-image-happy.png new file mode 100644 index 0000000000000000000000000000000000000000..f877ed9936b3f963584933d1ea0d5cd1434a588e Binary files /dev/null and b/app/static/robo_images/dall-e-image-happy.png differ diff --git a/app/static/robo_images/dall-e-image-sad-cropped.png b/app/static/robo_images/dall-e-image-sad-cropped.png new file mode 100644 index 0000000000000000000000000000000000000000..e1f57c182f5eb5d6d4dace89abb3fd23c32a675f Binary files /dev/null and b/app/static/robo_images/dall-e-image-sad-cropped.png differ diff --git a/app/static/robo_images/dall-e-image-sad-cropped2.png b/app/static/robo_images/dall-e-image-sad-cropped2.png new file mode 100644 index 0000000000000000000000000000000000000000..e36ed6194814a44b1c2d49b36fb0dabb672592cf Binary files /dev/null and b/app/static/robo_images/dall-e-image-sad-cropped2.png differ diff --git a/app/static/robo_images/dall-e-image-sad.png b/app/static/robo_images/dall-e-image-sad.png new file mode 100644 index 0000000000000000000000000000000000000000..d75e88aee5b200c990f55563672a7c98b53142b4 Binary files /dev/null and b/app/static/robo_images/dall-e-image-sad.png differ diff --git a/app/templates/index.html b/app/templates/index.html index 19301a4a250b1bb74af553f5bb4ab50dbeaf0101..8b44fe1c27dd32cb993169cab59439f2093d63d6 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -4,14 +4,33 @@ <title>Space Station Chatbot</title> <meta charset="UTF-8"> <link rel="icon" type="image/x-icon" href="static/icons/favicon.ico"> + <link rel="stylesheet" href="static/css/index.css"> </head> <body> - <h1>Welcome to the Space Station Chatbot!</h1> - <div> - <input type="text" id="inputField" placeholder="Gib etwas ein"> - <button onclick="sendMessage()">CLICK ME</button> + <!-- <h1 style="text-align: center;">Welcome to the Space Station Chatbot!</h1> --> + <img src="static/robo_images/dall-e-image-happy-cropped2.png" alt="Robo Image"> + <div class="tipps"> + <h2>Some smaller tipps to start:</h2> + <ul> + <li>say hi to the bot</li> + <li>ask the bot what it is</li> + <li>ask the bot for help or recommendations</li> + </ul> </div> + <div class="chat-container"> + <div id="chat"> + </div> + <div class="input"> + <input type="text" id="inputField" placeholder="Talk to the chatbot..." onkeypress="checkKeyInput(event)"> + <button onclick="sendMessage()">Send</button> + </div> + </div> + + <div class="feedback"> + <button>Feedback</button> + </div> + <script src="static/javascript/frontend.js" type="application/javascript"></script> </body> </html> \ No newline at end of file