diff options
Diffstat (limited to 'llama.html')
| -rw-r--r-- | llama.html | 385 |
1 files changed, 0 insertions, 385 deletions
diff --git a/llama.html b/llama.html deleted file mode 100644 index f3e5a69..0000000 --- a/llama.html +++ /dev/null @@ -1,385 +0,0 @@ -<!DOCTYPE html> -<html> - -<head> - <title>Cloudflare AI</title> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="icon" - href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E☁️%3C/text%3E%3C/svg%3E" - type="image/svg+xml" /> - <style> - body { - font-family: 'Raleway', sans-serif; - margin: 0; - padding: 20px; - background-color: #222; - color: #fff; - backdrop-filter: blur(10px); - overflow: hidden; - height: 100vh; - } - - - h1 { - text-align: center; - font-weight: 900; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); - font-size: 64px; - } - - h2 { - text-align: center; - font-weight: bold; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); - font-size: 20px; - } - - form { - margin-bottom: 20px; - display: flex; - justify-content: center; - /* Center items horizontally */ - align-items: center; - /* Center items vertically */ - position: fixed; - bottom: 12px; - width: 100vw; - border-radius: 10px; - padding: 10px; - /* Add some padding to give space around the items */ - } - - label { - font-weight: bold; - color: #ccc; - } - - input[type="text"] { - width: 50%; - padding: 10px; - background-color: rgba(0, 0, 0, 0.3); - color: #fff; - border: none; - border-radius: 5px; - } - - textarea { - width: 50%; - padding: 9px; - color: whitesmoke; - - border: none; - border-radius: 5px; - font-size: 18px; - background-color: #222222; - - } - - textarea::-webkit-scrollbar { - display: none; - } - - textarea:focus { - outline: none; - } - - - #response { - max-width: 80%; - height: calc(100% - 250px); - margin-left: 10%; - overflow-y: scroll; - } - - #response::-webkit-scrollbar { - width: 10px; - border-radius: 50%; - } - - - .user-message { - background-color: rgba(71, 71, 71, 0.3); - padding: 10px; - margin-bottom: 10px; - margin-left: 40%; - max-width: 60%; - border-radius: 10px; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); - backdrop-filter: blur(4px); - -webkit-backdrop-filter: blur(4px); - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.18); - color: whitesmoke; - } - - .ai-message { - background-color: rgba(71, 71, 71, 0.3); - padding: 10px; - margin-bottom: 10px; - margin-right: 40%; - max-width: 60%; - border-radius: 10px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - color: whitesmoke; - } - - p { - margin: 0; - padding: 0; - } - - .smaller { - font-size: 15; - } - - .fa-github { - text-decoration: none; - color: inherit; - position: fixed; - bottom: 0; - right: 0; - padding: 15px; - } - - .dropbtn { - background-color: #191b1c; - color: white; - padding: 16px; - font-size: 16px; - border: none; - cursor: pointer; - } - - .dropdown { - position: relative; - display: inline-block; - position: absolute; - top: 5px; - left: 5px; - padding: 10px; - color: #fff; - border: none; - border-radius: 5px; - cursor: pointer; - } - - .dropdown-content { - display: none; - position: absolute; - background-color: #191b1c; - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); - z-index: 1; - } - - .dropdown-content a { - color: #fff; - padding: 12px 16px; - text-decoration: none; - display: block; - } - - .dropdown-content a:hover { - background-color: black - } - - .dropdown:hover .dropdown-content { - display: block; - } - - .dropdown:hover .dropbtn { - background-color: #444; - } - - button { - font-size: 18px; - color: #e1e1e1; - font-family: inherit; - font-weight: 800; - cursor: pointer; - position: relative; - border: none; - background: none; - text-transform: uppercase; - transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); - transition-duration: 400ms; - transition-property: color; - } - - button:focus, - button:hover { - color: #fff; - } - - button:focus:after, - button:hover:after { - width: 100%; - left: 0%; - } - - button:after { - content: ""; - pointer-events: none; - bottom: -2px; - left: 50%; - position: absolute; - width: 0%; - height: 2px; - background-color: #fff; - transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); - transition-duration: 400ms; - transition-property: width, left; - } - - .github-icon { - position: fixed; - right: 50px; - bottom: 50px; - } - - /* if screen width<1000 then max -width=100% */ - @media screen and (max-width: 1000px) { - #response { - max-width: 100%; - margin-left: 0; - height: calc(100% - 280px); - } - - textarea { - width: 80%; - } - - .github-icon { - visibility: hidden; - } - - form { - bottom: 0; - } - - .ai-message { - max-width: 80%; - min-width: 80%; - } - } - </style> - <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> - <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> - <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=Raleway:wght@700&display=swap" rel="stylesheet"> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -</head> - -<body> - <h1>Cloudflare AI</h1> - <div class="dropdown"> - <button class="dropbtn">Settings</button> - <div class="dropdown-content"> - <a href="#" onclick='setApiUrl()'>Custom API URL</a> - <a href="#" onclick='setIDsession()'>Custom ID Session</a> - </div> - </div> - <div id="response"> - <div class="ai-message">Hey there, how can i assist you?</div> - </div> - <form id="chatForm"> - <textarea id="input" type="text" placeholder="Send a message"></textarea> - <button type="submit">➤</button> - </form> - <a class="fa fa-github github-icon" href="https://github.com/localuser-isback/Cloudflare-AI" style="font-size:36px"> - <script> - - // --------------- CONFIG --------------- // - // modify URL to your API - let apiUrl = "https://llama.mayx.eu.org" - - // ----------- END OF CONFIG ------------ // - let uuid = ''; - - function setApiUrl() { - const customUrl = prompt("Enter custom API URL: "); - if (customUrl) { - apiUrl = customUrl; - } - } - - function setIDsession() { - const customUUID = prompt("Enter custom session ID: "); - if (customUUID) { - uuid = customUUID; - } - } - - function generateUUID() { - let newUUID = ''; - const chars = 'abcdef0123456789'; - for (let i = 0; i < 32; i++) { - const charIndex = Math.floor(Math.random() * chars.length); - newUUID += chars[charIndex]; - if (i === 7 || i === 11 || i === 15 || i === 19) { - newUUID += '-'; - } - } - return newUUID; - } - const chatForm = document.getElementById('chatForm'); - const inputField = document.getElementById('input'); - const responseDiv = document.getElementById('response'); - - function chat() { - var input = inputField.value; - input = encodeURIComponent(input) - - const userMessageDiv = document.createElement('div'); - userMessageDiv.className = 'user-message'; - userMessageDiv.innerText = decodeURIComponent(input); - responseDiv.appendChild(userMessageDiv); - - const loadingDiv = document.createElement('div'); - loadingDiv.className = 'loading'; - loadingDiv.innerHTML = `<svg width="30" height="30" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" stroke="black" stroke-width="4" fill="none" /><circle cx="25" cy="25" r="20" stroke="#3498db" stroke-width="4" fill="none" stroke-dasharray="90" stroke-dashoffset="0"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite"/></circle></svg><center class="smaller">If you recive an error than wait 1-2 minutes refresh and try again.</center>`; - responseDiv.appendChild(loadingDiv); - - axios.get(`${apiUrl}/${uuid}?q=${encodeURIComponent(input)}`) - .then((response) => { - responseDiv.removeChild(loadingDiv); - - const aiMessages = response.data[0].response.filter(message => message.role === 'system' && message.content.response); - if (aiMessages.length > 0) { - const lastAiMessage = aiMessages[aiMessages.length - 1]; - const aiMessageDiv = document.createElement('div'); - aiMessageDiv.className = 'ai-message'; - aiMessageDiv.innerHTML = marked.parse(lastAiMessage.content.response); - responseDiv.appendChild(aiMessageDiv); - } - - inputField.value = ''; - }) - .catch((error) => { - console.log("Error receiving response:", error); - }); - } - - chatForm.addEventListener('submit', (event) => { - event.preventDefault(); - chat() - }); - - inputField.addEventListener('keydown', (event) => { - if (event.key === 'Enter') { - if (!event.shiftKey) { - event.preventDefault(); - chat() - } - } - }); - - if (!uuid) { - uuid = generateUUID(); - } - </script> -</body> - -</html>
\ No newline at end of file |