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