Last active
February 3, 2024 15:24
-
-
Save kkroesch/85be719e3ae619ff671ea319c73105d5 to your computer and use it in GitHub Desktop.
Chatbot Scaffold, HTML with Bootstrap 5.x via CDN
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const spinner = document.getElementById('spinner') | |
document.getElementById('userinput').addEventListener('submit', function(event) { | |
event.preventDefault(); // Verhindert, dass das Formular die Seite neu lädt | |
spinner.style.visibility = 'visible' | |
var textbox = document.getElementById('usermessage') | |
var actor = document.createElement('dt') | |
actor.textContent = "You" | |
var actorMessage = document.createElement('dd') | |
actorMessage.textContent = textbox.value | |
var timeline = document.getElementById('timeline'); | |
timeline.appendChild(actor) | |
timeline.appendChild(actorMessage) | |
setTimeout(() => { | |
fetch('https://httpbin.org/post', { | |
method: 'POST', | |
headers: { | |
'Content-Type': 'application/json', | |
}, | |
body: JSON.stringify({ text: textbox.value }) | |
}) | |
.then(response => response.json()) | |
.then(data => { | |
actor = document.createElement('dt') | |
actor.textContent = "iQ Bot" | |
actorMessage = document.createElement('dd') | |
actorMessage.textContent = data.data | |
timeline.appendChild(actor) | |
timeline.appendChild(actorMessage) | |
spinner.style.visibility = 'hidden' | |
}) | |
.catch((error) => { | |
console.error('Fehler:', error); | |
spinner.style.visibility = 'hidden' | |
}) | |
.finally(() => { | |
textbox.value = '' // Setzt die Textbox zurück | |
}) | |
}, 2000) | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="de"> | |
<head> | |
<title>iQ Bot</title> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta property="og:title" content="A Basic HTML5 Template"> | |
<meta property="og:type" content="website"> | |
<meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/"> | |
<meta property="og:description" content="A simple HTML5 Template for new projects."> | |
<meta property="og:image" content="image.png"> | |
<link rel="icon" href="/favicon.ico"> | |
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> | |
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> | |
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"> | |
<link href="/static/style.css" rel="stylesheet"> | |
</head> | |
<body> | |
<nav class="navbar navbar-expand-lg navbar-light bg-info p-3"> | |
<div class="container-fluid"> | |
<a class="navbar-brand" href="/">iQ</a> | |
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" | |
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<div class=" collapse navbar-collapse" id="navbarNavDropdown"> | |
<ul class="navbar-nav ms-auto "> | |
<li class="nav-item"> | |
<a class="nav-link mx-2" aria-current="page" href="/about">About</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link mx-2" | |
href="https://opensearch.org/docs/latest/clients/python-low-level/">OpenSearch</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link mx-2" href="https://haystack.deepset.ai/">Haystack</a> | |
</li> | |
</ul> | |
<ul class="navbar-nav ms-auto d-none d-lg-inline-flex"> | |
<li class="nav-item mx-2"> | |
<a class="nav-link" href="/analyze" title="Analyze with ML"><i class="fa-solid fa-magnifying-glass-chart"></i></a> | |
</li> | |
<li class="nav-item mx-2"> | |
<a class="nav-link" href="/settings" title="Settings"><i class="fa-solid fa-gear"></i></a> | |
</li> | |
<li class="nav-item mx-2"> | |
<a class="nav-link" href="/account" title="Account"><i class="fa-solid fa-user"></i></a> | |
</li> | |
<li class="nav-item mx-2"> | |
<a class="nav-link" href="https://github.com/kkroesch/iq" target="_blank" title="Project Homepage"><i | |
class="fab fa-github"></i></a> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</nav> | |
<div class="content"> | |
<h2>Chat Test</h2> | |
<dl class="chathistory" id="timeline"> | |
<dt>iQ Bot</dt> | |
<dd>Welcome to the Bot. Ask me anything, but be specific.</dd> | |
</dl> | |
<form id="userinput"> | |
<div class="input-group" id="inputarea"> | |
<div id="spinner"><i class="fa-solid fa-spinner fa-spin-pulse fa-lg"></i></div> | |
<input type="text" class="form-control" placeholder="Your question" id="usermessage"> | |
<button class="btn btn-outline-secondary" type="button">Send</button> | |
</div> | |
</form> | |
<script src="/static/chat.js"></script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.content { | |
margin: 1em; | |
padding-bottom: 25px; | |
} | |
.chathistory dt, dd { | |
margin: 0; | |
padding: 5px; | |
} | |
.chathistory dt { | |
float: left; | |
width: 100px; /* feste Breite für DT */ | |
clear: left; | |
text-align: right; | |
} | |
.chathistory dd { | |
width: 400px; | |
margin-left: 7em; | |
} | |
#inputarea { | |
position: fixed; | |
bottom: .5em; | |
left: 0; | |
padding: 1em; | |
width: 100%; | |
/* border-top: 1px solid #ccc; /* Trennlinie, optional */ | |
} | |
#spinner { | |
padding: .5em; | |
visibility: hidden; | |
} | |
.search-box { | |
position: relative; | |
margin-top: 20px; | |
} | |
.search-box input[type="text"] { | |
border-radius: 5px; | |
padding-right: 35px; | |
} | |
.search-box .search-icon { | |
position: absolute; | |
right: 10px; | |
top: 50%; | |
transform: translateY(-50%); | |
color: #aaa; | |
} | |
.logo { | |
font-size: 48pt; | |
font-weight: bold; | |
text-align: center; | |
} | |
.favicon { | |
padding-right: 0.5em; | |
} | |
.card { border: none; } | |
.card ul { | |
display: flex; | |
padding: 0; | |
list-style: none; | |
max-height: .5em; | |
} | |
.card li { | |
margin-right: 2em; | |
padding-right: .3em; | |
} | |
em { | |
background-color: gold; | |
padding: 2px; | |
} | |
.navbar-custom { | |
border-bottom: 4px solid #f8f9fa; | |
} | |
.navbar-custom .navbar-nav .nav-link { | |
color: #6c757d; | |
} | |
.navbar-toggler { | |
border-color: #6c757d; | |
} | |
.navbar-toggler-icon { | |
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); | |
} | |
h3.results-section { | |
border-bottom: 1px solid #6c757d; | |
font-size: larger; | |
} | |
@keyframes fadeIn { | |
from { opacity: 0; } | |
to { opacity: 1; } | |
} | |
.fade-in { | |
animation: fadeIn ease 0.5s; | |
animation-fill-mode: forwards; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment