Spaces:

doctorbetaq
/

ChatNBA

Sleeping

App Files Files Community

doctorbetaq commited on May 26, 2023

Commit

ac08b84

•

1 Parent(s): 2c62b1a

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +351 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,351 @@

+<!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>