Spaces:

doctorbetaq
/

ChatNBA

Runtime error

File size: 12,386 Bytes

ac08b84

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