Spaces:
Sleeping
Sleeping
| <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> | |
| <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> | |
| <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> | |
| <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta name="description" content="TechWave"> | |
| <meta name="author" content="SRBThemes"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <title>AI Chat Bot</title> | |
| <script> | |
| if (!localStorage.frenify_skin) { | |
| localStorage.frenify_skin = 'dark'; | |
| } | |
| if (!localStorage.frenify_panel) { | |
| localStorage.frenify_panel = ''; | |
| } | |
| document.documentElement.setAttribute("data-techwave-skin", localStorage.frenify_skin); | |
| if(localStorage.frenify_panel !== ''){ | |
| document.documentElement.classList.add(localStorage.frenify_panel); | |
| } | |
| </script> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> | |
| <!-- !Google Fonts --> | |
| <!-- Styles --> | |
| <link type="text/css" rel="stylesheet" href="desine/css/plugins.css?ver=1.0.0" /> | |
| <link type="text/css" rel="stylesheet" href="desine/css/style.css?ver=1.0.0" /> | |
| <!--[if lt IE 9]> <script type="text/javascript" src="desine/js/modernizr.custom.js"></script> <![endif]--> | |
| <!-- !Styles --> | |
| </head> | |
| <body> | |
| <!-- Moving Submenu --> | |
| <div class="techwave_fn_fixedsub"> | |
| <ul></ul> | |
| </div> | |
| <!-- !Moving Submenu --> | |
| <!-- Preloader --> | |
| <div class="techwave_fn_preloader"> | |
| <svg> | |
| <circle class="first_circle" cx="50%" cy="50%" r="110"></circle> | |
| <circle class="second_circle" cx="50%" cy="50%" r="110"></circle> | |
| </svg> | |
| </div> | |
| <!-- !Preloader --> | |
| <div class="techwave_fn_font"> | |
| <a class="font__closer_link fn__icon_button" href="#"><img src="desine/svg/close.svg" alt="" class="fn__svg"></a> | |
| <div class="font__closer"></div> | |
| <div class="font__dialog"> | |
| <h3 class="title">Font Options</h3> | |
| <label for="font_size">Font Size</label> | |
| <select id="font_size"> | |
| <option value="10">10 px</option> | |
| <option value="12">12 px</option> | |
| <option value="14">14 px</option> | |
| <option value="16" selected> 16 px</option> | |
| <option value="18">18 px</option> | |
| <option value="20">20 px</option> | |
| <option value="22" >22 px</option> | |
| <option value="24">24 px</option> | |
| <option value="26">26 px</option> | |
| <option value="28">28 px</option> | |
| </select> | |
| <a href="#" class="apply techwave_fn_button"><span>Apply</span></a> | |
| </div> | |
| </div> | |
| <!-- MAIN WRAPPER --> | |
| <div class="techwave_fn_wrapper fn__has_sidebar"> | |
| <div class="techwave_fn_wrap"> | |
| <!-- Searchbar --> | |
| <div class="techwave_fn_searchbar"> | |
| <div class="search__bar"> | |
| <input class="search__input" type="text" placeholder="Search here..."> | |
| <img src="desine/svg/search.svg" alt="" class="fn__svg search__icon"> | |
| <a class="search__closer" href="#"><img src="desine/svg/close.svg" alt="" class="fn__svg"></a> | |
| </div> | |
| <div class="search__results"> | |
| <!-- Results will come here (via ajax after the integration you made after purchase as it doesn't work in HTML) --> | |
| <div class="results__list"> | |
| <ul> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- !Searchbar --> | |
| <!-- HEADER --> | |
| <header class="techwave_fn_header"> | |
| <!-- Header right: navigation bar --> | |
| <div class="header__right"> | |
| <div class="fn__nav_bar"> | |
| <!-- Site Skin (bar item) --> | |
| <div class="bar__item bar__item_skin"> | |
| <a href="#" class="item_opener"> | |
| <img src="desine/svg/sun.svg" alt="" class="fn__svg light_mode"> | |
| <img src="desine/svg/moon.svg" alt="" class="fn__svg dark_mode"> | |
| </a> | |
| </div> | |
| <!-- !Site Skin (bar item) --> | |
| <!-- User (bar item) --> | |
| <div class="bar__item bar__item_user"> | |
| <a href="#" class="user_opener"> | |
| <img src="https://raw.githubusercontent.com/omarnuwrar/urmkklsoqpgh-45kjfnskhbnqwhn3jgfj2mgjm3/main/{{account_name}}.png" alt=""> | |
| </a> | |
| <div class="item_popup"> | |
| <div class="user_profile"> | |
| <div class="user_img"> | |
| <img src="https://raw.githubusercontent.com/omarnuwrar/urmkklsoqpgh-45kjfnskhbnqwhn3jgfj2mgjm3/main/{{account_name}}.png" alt=""> | |
| </div> | |
| <div class="user_info"> | |
| <h2 class="user_name">{{ account_name }}<span>Free</span></h2> | |
| </div> | |
| </div> | |
| <div class="user_nav"> | |
| <ul> | |
| <li> | |
| <a href="/login"> | |
| <span class="icon"><img src="desine/svg/logout.svg" alt="" class="fn__svg"></span> | |
| <span class="text">Log out</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- !User (bar item) --> | |
| </div> | |
| </div> | |
| <!-- !Header right: navigation bar --> | |
| </header> | |
| <!-- !HEADER --> | |
| <!-- LEFT PANEL --> | |
| <div class="techwave_fn_leftpanel"> | |
| <div class="mobile_extra_closer"></div> | |
| </div> | |
| <!-- !LEFT PANEL --> | |
| <!-- CONTENT --> | |
| <div class="techwave_fn_content"> | |
| <!-- PAGE (all pages go inside this div) --> | |
| <div class="techwave_fn_page"> | |
| <!-- AI Chat Bot Page --> | |
| <div class="techwave_fn_aichatbot_page fn__chatbot"> | |
| <div class="chat__page"> | |
| <div class="font__trigger"> | |
| <span></span> | |
| </div> | |
| <div class="fn__title_holder"> | |
| <div class="container"> | |
| <!-- Active chat title --> | |
| <h1 class="title">ِAI ALEX-9</h1> | |
| <!-- !Active chat title --> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="chat__list"> | |
| <div id="chat0" class="chat__item"></div> | |
| <div class="chat__item active" id="chat1"> | |
| <div class="chat__box bot__chat"> | |
| <div class="author"><span>ALEX-9</span></div> | |
| <div class="chat"> | |
| <div class="fn__animated_text"><p>{{greet}}</p></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat__comment"> | |
| <div class="container"> | |
| <div class="fn__chat_comment"> | |
| <textarea rows="1" class="fn__hidden_textarea" tabindex="-1"></textarea> | |
| <textarea rows="1" placeholder="Send a message..." id="user_input"></textarea> | |
| <button onclick="sendMessage()"><img src="desine/svg/enter.svg" alt="" class="fn__svg"></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="chat1"></div> <!-- Container for chat history --> | |
| <style> | |
| .copy__button, .download__button { | |
| color: #7c5fe3; | |
| background-color: rgb(0, 0, 0); | |
| border: none; | |
| border-radius: 5px; | |
| padding: 5px 10px; | |
| margin: 5px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| } | |
| .copy__button:hover, .download__button:hover { | |
| background-color: #5a4a9d; | |
| } | |
| </style> | |
| <script> | |
| var conversationHistory = []; | |
| var userFirstName = "{{ first }}"; | |
| function sendMessage() { | |
| var user_input = document.getElementById("user_input").value; | |
| if (user_input.trim() !== "") { | |
| // Display user's message immediately | |
| addChatMessage(user_input, userFirstName); | |
| document.getElementById("user_input").value = ""; | |
| // Store user input in conversation history | |
| conversationHistory.push({author: userFirstName, message: user_input}); | |
| var xhr = new XMLHttpRequest(); | |
| xhr.open("POST", "/get_response", true); | |
| xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); | |
| xhr.onreadystatechange = function() { | |
| if (xhr.readyState === 4 && xhr.status === 200) { | |
| var response_text = xhr.responseText; | |
| // Display bot's response | |
| addChatMessage2(response_text, "Bot"); | |
| // Store bot response in conversation history | |
| conversationHistory.push({author: "Bot", message: response_text}); | |
| } | |
| }; | |
| xhr.send("user_input=" + encodeURIComponent(user_input) + "&conversation_history=" + encodeURIComponent(JSON.stringify(conversationHistory))); | |
| } | |
| } | |
| function addChatMessage(message, author) { | |
| var chatItem = document.createElement("div"); | |
| chatItem.className = "chat__box your__chat"; | |
| var authorElement = document.createElement("div"); | |
| authorElement.className = "author"; | |
| authorElement.innerHTML = "<span>{{first}}</span>"; | |
| var chatElement = document.createElement("div"); | |
| chatElement.className = "chat"; | |
| chatElement.innerHTML = "<p>" + message + "</p>"; | |
| chatItem.appendChild(authorElement); | |
| chatItem.appendChild(chatElement); | |
| document.getElementById("chat1").appendChild(chatItem); | |
| } | |
| function addChatMessage2(message, author) { | |
| var chatItem = document.createElement("div"); | |
| chatItem.className = "chat__box bot__chat"; | |
| var authorElement = document.createElement("div"); | |
| authorElement.className = "author"; | |
| authorElement.innerHTML = "<span>ALEX-9</span>"; | |
| var chatElement = document.createElement("div"); | |
| chatElement.className = "chat"; | |
| chatItem.appendChild(authorElement); | |
| chatItem.appendChild(chatElement); | |
| document.getElementById("chat1").appendChild(chatItem); | |
| var messageElement = document.createElement("p"); | |
| chatElement.appendChild(messageElement); | |
| var copyButton = document.createElement("button"); | |
| copyButton.innerHTML = "Copy"; | |
| copyButton.className = "copy__button"; | |
| copyButton.onclick = function() { | |
| var tempElement = document.createElement('textarea'); | |
| tempElement.value = message.replace(/<br\s*\/?>/gi, '\n'); | |
| document.body.appendChild(tempElement); | |
| tempElement.select(); | |
| document.execCommand('copy'); | |
| document.body.removeChild(tempElement); | |
| alert("Copied to clipboard!"); | |
| }; | |
| chatElement.appendChild(copyButton); | |
| var index = 0; | |
| var typingInterval = setInterval(function() { | |
| if (index < message.length) { | |
| if (message.charAt(index) === "<" && message.charAt(index + 1) === "b" && message.charAt(index + 2) === "r" && message.charAt(index + 3) === ">") { | |
| messageElement.innerHTML += "<br>"; | |
| index += 3; | |
| } else if (message.charAt(index) === "<" && message.charAt(index + 1) === "i" && message.charAt(index + 2) === "m" && message.charAt(index + 3) === "g" && message.charAt(index + 4) === " ") { | |
| var srcStart = message.indexOf("src='", index) + 5; | |
| var srcEnd = message.indexOf("'", srcStart); | |
| var imageUrl = message.substring(srcStart, srcEnd); | |
| var imageElement = document.createElement("img"); | |
| imageElement.src = imageUrl; | |
| imageElement.className = "chat__image"; // Add CSS class for styling | |
| messageElement.appendChild(imageElement); | |
| var downloadButton = document.createElement("button"); | |
| downloadButton.innerHTML = "Download"; | |
| downloadButton.className = "download__button"; | |
| downloadButton.onclick = function() { | |
| fetch(imageUrl) | |
| .then(response => response.blob()) | |
| .then(blob => { | |
| var url = window.URL.createObjectURL(blob); | |
| var a = document.createElement("a"); | |
| a.style.display = "none"; | |
| a.href = url; | |
| a.download = imageUrl.substring(imageUrl.lastIndexOf('/') + 1); | |
| document.body.appendChild(a); | |
| a.click(); | |
| window.URL.revokeObjectURL(url); | |
| }) | |
| .catch(() => alert('Could not download the image.')); | |
| }; | |
| chatElement.appendChild(downloadButton); | |
| index = srcEnd + 1; | |
| } else { | |
| messageElement.innerHTML += message.charAt(index); | |
| } | |
| index++; | |
| } else { | |
| clearInterval(typingInterval); | |
| } | |
| }, 30); // Adjust the delay (in milliseconds) between each character being added | |
| } | |
| </script> | |
| <style> | |
| pre { | |
| background-color: #f5f5f5; | |
| padding: 10px; | |
| border-radius: 5px; | |
| overflow-x: auto; | |
| white-space: pre-wrap; /* Adjust this based on your preference */ | |
| margin: 10px 0; | |
| } | |
| code { | |
| color: #d63384; | |
| font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; | |
| font-size: 14px; | |
| } | |
| .chat__image { | |
| max-width: 200px; /* Adjust the maximum width as desired */ | |
| max-height: 200px; /* Adjust the maximum height as desired */ | |
| border-radius: 10px; /* Add rounded corners */ | |
| } | |
| .chat__download-button { | |
| display: block; | |
| margin-top: 10px; | |
| text-align: center; | |
| color: #fff; | |
| background-color: #007bff; | |
| border: none; | |
| border-radius: 5px; | |
| padding: 5px 10px; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| .chat__download-button:hover { | |
| background-color: #0056b3; | |
| } | |
| </style> </div> | |
| <div class="chat__sidebar"> | |
| <div class="sidebar_header"> | |
| <a href="{{ url_for('chat', account_name=account_name, greet=greet, first=first, last=last, token2=token2) }}" class="fn__new_chat_link"> | |
| <span class="icon"></span> | |
| <span class="text">New Chat</span> | |
| </a> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- !AI Chat Bot Page --> | |
| </div> | |
| <!-- !PAGE (all pages go inside this div) --> | |
| </div> | |
| <!-- !CONTENT --> | |
| </div> | |
| </div> | |
| <!-- !MAIN WRAPPER --> | |
| <!-- Scripts --> | |
| <script type="text/javascript" src="desine/js/jquery.js?ver=1.0.0"></script> | |
| <script type="text/javascript" src="desine/js/plugins.js?ver=1.0.0"></script> | |
| <!--[if lt IE 10]> <script type="text/javascript" src="desine/js/ie8.js"></script> <![endif]--> | |
| <script type="text/javascript" src="desine/js/init.js?ver=1.0.0"></script> | |
| <!-- !Scripts --> | |
| </body> | |
| </html> |