Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css"> | |
| <style> | |
| ::-webkit-scrollbar { | |
| width: 12px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgb(43, 43, 43); | |
| border-radius: 6px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgb(119, 119, 119); | |
| } | |
| html,body{ | |
| padding: 0; | |
| margin: 0; | |
| background-color: rgb(2,2,8); | |
| width: 100vw; | |
| height: 100vh; | |
| overflow: hidden; | |
| scrollbar-width: thin; | |
| scrollbar-color: rgb(41, 41, 41) transparent; | |
| font-family: 'Inter'; | |
| } | |
| nav{ | |
| position: fixed; | |
| width: 100vw; | |
| height: 8vh; | |
| z-index: 100; | |
| display: flex; | |
| } | |
| .hamburger{ | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5vh; | |
| width: 20vh; | |
| color: white; | |
| margin: 1vw; | |
| cursor: pointer; | |
| position: absolute; | |
| z-index: 101; | |
| margin: 10px; | |
| } | |
| .line1{ | |
| background-color: rgb(122, 122, 122); | |
| width: 6vh; | |
| height: 0.5vh; | |
| } | |
| .line2{ | |
| background-color: rgb(104, 104, 104); | |
| width: 3vh; | |
| height: 0.5vh; | |
| } | |
| .hamburger:hover .line1{ | |
| transform: translateX(-30px); | |
| transition: transform 1s ease; | |
| } | |
| .hamburger:hover .line2{ | |
| transform: translateX(30px); | |
| transition: transform 1s ease; | |
| } | |
| .menu{ | |
| height: 100vh; | |
| width: 0px; | |
| background-color: rgba(20, 20, 20,0.5); | |
| border-radius: 10px; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| display: flex; | |
| flex-direction: column; | |
| overflow-y: auto; | |
| } | |
| .newChat{ | |
| margin-top: 8vh; | |
| margin-left: 1vw; | |
| color: gray; | |
| font-size: large; | |
| cursor: pointer; | |
| font-weight: 400; | |
| position: relative; | |
| font-size: large; | |
| } | |
| .newChat:hover{ | |
| transform: scale(0.95); | |
| transition: transform 0.7s ease; | |
| } | |
| .prevChatsCont{ | |
| color: rgb(172, 171, 171); | |
| margin-left: 1vw; | |
| font-weight: 300; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1vh; | |
| position: relative; | |
| font-size: medium; | |
| } | |
| .prevChat{ | |
| min-height: 5vh; | |
| cursor: pointer; | |
| width: 90%; | |
| display: flex; | |
| align-items: center; | |
| padding-left: 5%; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| padding-top: 1%; | |
| padding-bottom: 1%; | |
| position: relative; | |
| } | |
| .prevChat:hover{ | |
| background-color: rgba(70,70, 70,1); | |
| transform: translateY(5px); | |
| transition: transform 0.8s ease; | |
| } | |
| .chatsTxt{ | |
| color: #fdffdf; | |
| margin-left: 1vw; | |
| font-size: 14px; | |
| margin-top: 4vh; | |
| margin-bottom: 3vh; | |
| z-index: 100; | |
| overflow: hidden; | |
| min-height: 5vh; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .container { | |
| width: 99.5%; | |
| max-width: 99.5%; | |
| height: 90%; | |
| position: absolute; | |
| z-index: 50; | |
| top: 8vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| z-index: 1; | |
| } | |
| .inputs { | |
| width: 70%; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| align-items: center; | |
| background-color: rgba(51, 51, 51, 0.4); | |
| padding: 10px; | |
| border-top-right-radius: 50px; | |
| border-bottom-left-radius: 20px; | |
| border-top-left-radius: 20px; | |
| border-bottom-right-radius: 50px; | |
| font-size: large; | |
| position: relative; | |
| margin-top: auto; | |
| align-self: center; | |
| } | |
| .textBox{ | |
| width: 90%; | |
| background: none; | |
| outline: none; | |
| border: none; | |
| color: rgb(161, 161, 161); | |
| padding: 7px; | |
| } | |
| .sendBtn{ | |
| background-color: white; | |
| border: none; | |
| color: black; | |
| font-size: x-large; | |
| cursor: pointer; | |
| border-radius: 50%; | |
| width: 6vh; | |
| height: 6vh; | |
| } | |
| .messages { | |
| overflow-y: auto; | |
| color: white; | |
| padding: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| } | |
| .user{ | |
| margin-left: auto; | |
| max-width: 60%; | |
| background-color: rgba(51, 51, 51, 0.4); | |
| padding: 0.5vh 1.5vh 0.5vh 1.5vh; | |
| text-align: left; | |
| font-weight: 300; | |
| border-radius: 10px; | |
| line-height: 130%; | |
| } | |
| .user p{ | |
| color: #b4b4b4; | |
| padding: 0; | |
| opacity: 0.9; | |
| } | |
| .ai{ | |
| text-align: left; | |
| width: 70%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 2vh; | |
| } | |
| .ai p { | |
| opacity: 0.9; | |
| font-weight: 300; | |
| font-size: medium; | |
| line-height: 1.6; | |
| color: #c5c5c5; | |
| background-color: rgba(28, 28, 28, 0.5); | |
| padding: 20px; | |
| border-radius: 10px; | |
| border: 2px solid rgba(255,255,255,0.1); | |
| font-family: 'Inter'; | |
| } | |
| .subHeading,.heading{ | |
| padding: 1vh; | |
| border-radius: 10px; | |
| display: inline-block; | |
| margin-bottom: 2vh; | |
| margin-top: 2vh; | |
| } | |
| .subHeading{ | |
| background-color: rgba(59, 59, 59, 0.5); | |
| border: 1px solid rgba(255,255,255,0.1) | |
| } | |
| .heading{ | |
| background-color: rgba(119, 16, 238, 0.55); | |
| box-shadow: 6px 6px rgba(0, 0, 0, 0.5) ; | |
| } | |
| code{ | |
| border-radius: 15px; | |
| } | |
| .models{ | |
| position: relative; | |
| margin: auto; | |
| padding: 10px ; | |
| outline: none; | |
| background-color: rgb(43, 43, 43); | |
| color: rgb(177, 177, 177); | |
| border: none; | |
| border-radius: 10px; | |
| } | |
| .models:hover{ | |
| background-color: #383838; | |
| } | |
| .models option{ | |
| background-color: rgb(34, 34, 34); | |
| color: #afafaf; | |
| padding: 10px; | |
| } | |
| .alert{ | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%,-50%); | |
| width: 320px; | |
| height: 320px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0px; | |
| color: #d8d8d8; | |
| background-color: #222222; | |
| box-shadow: 6px 6px rgb(41, 41, 41) ; | |
| justify-content: center; | |
| z-index: 100; | |
| } | |
| .alert p{ | |
| float: left; | |
| font-family: 'Inter'; | |
| font-weight: 300; | |
| font-size: 15px; | |
| color: #cfcfcf; | |
| opacity: 0.9; | |
| padding-left: 10px; | |
| } | |
| .closeAlert{ | |
| margin-left: auto; | |
| margin-right: 10px; | |
| margin-top: 10px; | |
| background-color: rgb(247, 102, 102); | |
| padding: 10px; | |
| cursor: pointer; | |
| border-radius: 10px; | |
| color: #ffffff; | |
| } | |
| .discord { | |
| margin: 10px; | |
| text-decoration: none; | |
| color: rgb(211, 211, 211); | |
| padding: 7.5px; | |
| border-radius: 10px; | |
| background: linear-gradient(to right, #4A148C, #9c18e3); | |
| cursor: pointer; | |
| display: inline-block; | |
| font-size: 13px; | |
| max-width: 77px; | |
| } | |
| .note{ | |
| text-align: center; | |
| background-color: rgba(119, 16, 238, 0.55); | |
| box-shadow: 6px 6px rgb(32, 32, 32) ; | |
| margin: auto; | |
| width: 70px; | |
| padding: 10px; | |
| } | |
| .webSearch{ | |
| color: rgb(233, 233, 233); | |
| background: transparent; | |
| cursor: pointer; | |
| border: none; | |
| font-size: x-large; | |
| } | |
| @media screen and (max-width: 780px){ | |
| .menu{ | |
| background-color: rgba(20, 20, 20); | |
| } | |
| .inputs{ | |
| width: 85%; | |
| } | |
| .ai{ | |
| width: 90%; | |
| } | |
| .user{ | |
| max-width: 90%; | |
| } | |
| } | |
| /* New styles for thinking section */ | |
| .thinking-container { | |
| background: rgba(30, 30, 30, 0.7); | |
| border-radius: 8px; | |
| margin: 10px 0; | |
| overflow: hidden; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .thinking-header { | |
| display: flex; | |
| align-items: center; | |
| padding: 10px 15px; | |
| cursor: pointer; | |
| background: rgba(119, 16, 238, 0.2); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .thinking-header:hover { | |
| background: rgba(119, 16, 238, 0.3); | |
| } | |
| .thinking-title { | |
| color: #fdffdf; | |
| font-size: 14px; | |
| margin-right: 10px; | |
| } | |
| .thinking-arrow { | |
| margin-left: auto; | |
| transition: transform 0.3s ease; | |
| } | |
| .thinking-arrow.open { | |
| transform: rotate(180deg); | |
| } | |
| .thinking-content { | |
| padding: 15px; | |
| color: #c5c5c5; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .thinking-content.open { | |
| max-height: 500px; | |
| transition: max-height 0.5s ease-in; | |
| } | |
| </style> | |
| <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> | |
| <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> | |
| <title>Chat Completion Demo</title> | |
| </head> | |
| <body> | |
| <nav> | |
| <select name="" id="models" class="models"> | |
| </select> | |
| <div class="hamburger" id="hamburger"> | |
| <div class="line1"></div> | |
| <div class="line2"></div> | |
| </div> | |
| <div class="menu" id="menu"> | |
| <div class="newChat" id="newChat">+ New Chat</div> | |
| <p class="chatsTxt">chats</p> | |
| <div class="prevChatsCont" id="prevChatsCont"> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container" id="container"> | |
| <div class="messages" id="messages"> | |
| <!-- Messages will be inserted here --> | |
| </div> | |
| <div class="inputs"> | |
| <button id="webSearch" class="webSearch"><i class="fa-solid fa-globe"></i></button> | |
| <textarea name="" id="textBox" class="textBox" placeholder="Enter your message..."></textarea> | |
| <button id="sendBtn" class="sendBtn"><i class="fa-solid fa-arrow-up"></i></button> | |
| </div> | |
| </div> | |
| <script> | |
| // Add this to your existing JavaScript or create a new script | |
| function createThinkingElement(thinkingContent) { | |
| const container = document.createElement('div'); | |
| container.className = 'thinking-container'; | |
| const header = document.createElement('div'); | |
| header.className = 'thinking-header'; | |
| const title = document.createElement('span'); | |
| title.className = 'thinking-title'; | |
| title.textContent = 'Reasoning about it'; | |
| const arrow = document.createElement('i'); | |
| arrow.className = 'fa-solid fa-chevron-down thinking-arrow'; | |
| const content = document.createElement('div'); | |
| content.className = 'thinking-content'; | |
| content.textContent = thinkingContent; | |
| header.appendChild(title); | |
| header.appendChild(arrow); | |
| container.appendChild(header); | |
| container.appendChild(content); | |
| header.addEventListener('click', () => { | |
| arrow.classList.toggle('open'); | |
| content.classList.toggle('open'); | |
| }); | |
| return container; | |
| } | |
| // Example usage in your message processing logic: | |
| function processMessage(message) { | |
| const thinkMatch = message.match(/<think>(.*?)<\/think>/s); | |
| if (thinkMatch) { | |
| const thinkingContent = thinkMatch[1].trim(); | |
| const thinkingElement = createThinkingElement(thinkingContent); | |
| // Insert the thinking element into your message container | |
| document.getElementById('messages').appendChild(thinkingElement); | |
| } | |
| } | |
| </script> | |
| <script src="{{ url_for('static', filename='js/script.js') }}" type="module"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> | |
| </body> | |
| </html> |