ChatNBA / templates /index.html
doctorbetaq's picture
Upload index.html
ac08b84
raw
history blame
12.4 kB
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ChatNBA</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
::-webkit-scrollbar {
width: 10px;
}
/* 對於滾動條的滑塊 */
::-webkit-scrollbar-thumb {
background: #e0e0e0;
border-radius: 20px; /* 橢圓的滑塊 */
}
/* 滾動條的滑塊滑過時的顏色 */
::-webkit-scrollbar-thumb:hover {
background: #afafaf;
}
@keyframes dotPulse {
0% { content: "." }
33% { content: ".." }
66% { content: "..." }
100% { content: "...." }
}
.loading:after {
animation: dotPulse 1s infinite;
content: "";
}
.animate-fade-up {
animation: fadeInUp .5s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
body {
background-color: #ffffff;
color: rgb(28, 32, 59);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 0;
}
.container {
width: 100%; /* Adjust this for your preference */
max-width: 1000px;
}
#chat {
width: 100%;
height: 400px;
overflow: auto;
margin: auto;
position: relative;
}
#input {
width: 90%; /* Adjust this for your preference */
margin: 20px auto;
box-shadow: 0px 3px 15px rgba(0,0,0,0.2); /* shadow for input */
}
.chat-entry {
text-align: left;
padding: 10px;
border-radius: 15px;
}
.chat-entry img {
height: 50px;
width: 50px;
object-fit: cover;
}
.btn-secondary {
height: 40px;
}
.chat-entry-user {
background-color: #fafeff;
}
.chat-entry-bot {
background-color: #f8f7ff;
}
.chat-entry-user, .chat-entry-bot {
display: flex;
flex-direction: row;
align-items: stretch;
margin-bottom: 10px;
}
.chat-entry-user > div, .chat-entry-bot > div {
margin-left: 10px;
word-break: break-word;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
h6 {
color: #bbbbbb
}
h4{
color:#555555
}
#intro-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.loading {
color: #aaaaaa;
}
.loading div:after {
content: ' .';
animation: dots 1s steps(5, end) infinite;
}
@keyframes dots {
0%, 20% {
color: rgba(0,0,0,0);
text-shadow:
.25em 0 0 rgba(0,0,0,0),
.5em 0 0 rgba(0,0,0,0);}
40% {
color: white;
text-shadow:
.25em 0 0 rgba(0,0,0,0),
.5em 0 0 rgba(0,0,0,0);}
60% {
text-shadow:
.25em 0 0 white,
.5em 0 0 rgba(0,0,0,0);}
100% {
text-shadow:
.25em 0 0 white,
.5em 0 0 white;}}
@media (max-width: 600px) {
#chat {
height: 350px;
}
}
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #b4f0eb;
}
input:focus + .slider {
box-shadow: 0 0 1px #b4f0eb;
}
input:checked + .slider:before {
transform: translateX(20px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- 引入完整的jQuery版本 -->
<script>
function submit() {
var input = document.getElementById('input').value;
document.getElementById('input').value = '';
document.getElementById('intro-message').style.display = 'none';
var chat = document.getElementById('chat');
var userEntry = document.createElement('div');
userEntry.className = "chat-entry chat-entry-user animate-fade-up";;
var userImg = document.createElement('img');
userImg.src = "/static/icon/U.png";
var userInput = document.createElement('div');
userInput.textContent = input;
userEntry.appendChild(userImg);
userEntry.appendChild(userInput);
chat.appendChild(userEntry);
chat.scrollTop = chat.scrollHeight;
// 創建bot回應的元素並添加到chat
var botEntry = document.createElement('div');
botEntry.className = "chat-entry chat-entry-bot loading";
var botImg = document.createElement('img');
botImg.src = "/static/icon/N.png";
var botResponse = document.createElement('div');
botResponse.textContent = "學長姐們努力查資料中";
botEntry.appendChild(botImg);
botEntry.appendChild(botResponse);
chat.appendChild(botEntry);
// 設定不同的訊息並每10秒輪換
var messages = ["學長姐們正在用力查資料,請稍等片刻", "別逼我們啊~~我們快好了~~~QQQQQ","先別說這個了,你聽過楊老師嗎","NBA不是美國的NBA唷~這是奈米生醫材料應用實驗室的英文縮寫唷!"];
var index = 0;
function updateMessage() {
botResponse.textContent = messages[index];
index = (index + 1) % messages.length; // 更新索引,如果超過陣列長度,就重置為0
}
// 每10秒更新一次訊息
var timer = setInterval(updateMessage, 10000);
//新的呼叫方法(包含翻譯)
$.ajax({
url: '/get_response',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
user_input: input,
should_translate: $('#translationCheck').prop('checked'),
target_lang: 'zh-tw'
}),
success: function(response) {
clearTimeout(timer); // 收到回應後,取消定時器
botResponse.textContent = response.response;
botEntry.classList.remove('loading');
chat.scrollTop = chat.scrollHeight;
}
});
// // 呼叫後端取得回應
// fetch('/get_response', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// },
// body: JSON.stringify({ user_input: input }),
// })
// .then(response => response.json())
// .then(data => {
// clearTimeout(timer); // 收到回應後,取消定時器
// botResponse.textContent = data.response;
// botEntry.classList.remove('loading');
// chat.scrollTop = chat.scrollHeight;
// });
}
</script>
<!-- <script>
function submit() {
var input = document.getElementById('input').value;
document.getElementById('input').value = '';
var chat = document.getElementById('chat');
var userEntry = document.createElement('div');
userEntry.className = "chat-entry chat-entry-user animate-fade-up";
var userImg = document.createElement('img');
userImg.src = "/static/icon/U.png";
var userInput = document.createElement('div');
userInput.textContent = input;
userEntry.appendChild(userImg);
userEntry.appendChild(userInput);
chat.appendChild(userEntry);
setTimeout(function() {
var botImg = document.createElement('img');
botImg.src = "/static/icon/N.png";
var botEntry = document.createElement('div');
botEntry.className = "chat-entry chat-entry-bot loading";
var botResponse = document.createElement('div');
botResponse.textContent = "學長姐們努力查資料中";
botEntry.appendChild(botImg);
botEntry.appendChild(botResponse);
chat.appendChild(botEntry);
chat.scrollTop = chat.scrollHeight;
fetch('/get_response', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ user_input: input }),
})
.then(response => response.json())
.then(data => {
botResponse.textContent = data.response;
botEntry.classList.remove('loading');
chat.scrollTop = chat.scrollHeight;
});
}, 500); // 延遲500毫秒後再顯示 loading
}
</script> -->
</head>
<body>
<div class="container">
<div class="row justify-content-center"> <!-- Added a row with centered content -->
<div class="col-lg-10 col-md-12 col-14"> <!--Adjusted column sizes for different screen sizes-->
<div class="container">
<h1>ChatNBA</h1>
<h4><p>
</p></h4>
<div id="chat">
<div id="intro-message">Wellcome to the ChatNBA! <br> Please enter your question below.👇<br> Then chat with your seniors 👨‍🎓👩‍🎓(and their thesis📖)! <br> Have fun!🚀<br>English question only, hahahahha~🖖<br><br>
❔What you can ask:<br>
🧫cell culture<br>
🧬DNAs/RNAs/Proteins<br>
🧪Experiments<br>
🔬sensors<br><br>
</div>
</div>
<div class="input-group">
<input id="input" type="text" class="form-control" placeholder="Send a question." onkeydown="if(event.key==='Enter')submit()">
</div>
<!-- <label class="switch">
<input type="checkbox" id="translationCheck">
<span class="slider round"></span>
</label> Translate to Chinese, please~ -->
</div>
<h6><p>The ChatNBA model is still in training (like you) and may generate wrong response to your question. <br> ©Copyright 2023 Lab of Nano-Biomaterials Applications. All rights reserved. <br>ChatNBA(preview) ver. 0.0.1 <br> Designed by Hao-Han Pang, PhD</p></h6>
</div>
</div>
</div>
</body>
</html>