Spaces:
Runtime error
Runtime error
| <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> |