Spaces:
Running
Running
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Question and Answer</title> | |
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> | |
<script> | |
function sendQuestion() { | |
document.getElementById("loading").classList.remove("hidden"); | |
document.getElementById("answer").classList.add("hidden"); | |
// https://baf8-34-87-104-241.ngrok-free.app/generate | |
// var myHeaders = new Headers(); | |
// myHeaders.append("Content-Type", "application/json"); | |
// var q_text = document.getElementById('question').value | |
// var raw = JSON.stringify({ | |
// "prompt": '<s>[INST] {q_text} [/INST]', | |
// "max_tokens": 256, | |
// "temperature": 0.1 | |
// }); | |
// var requestOptions = { | |
// method: 'POST', | |
// headers: myHeaders, | |
// body: raw, | |
// redirect: 'follow' | |
// }; | |
// fetch("https://baf8-34-87-104-241.ngrok-free.app/generate", requestOptions) | |
// .then(response => response.text()) | |
// .then(result => console.log(result)) | |
// .catch(error => console.log('error', error)); | |
let data = JSON.stringify({ | |
"prompt": "<s>[INST] ତୁମେ କିଏ? [/INST] ", | |
"max_tokens": 25, | |
"temperature": 0.1 | |
}); | |
let config = { | |
method: 'post', | |
maxBodyLength: Infinity, | |
url: 'http://7e2d-34-136-146-180.ngrok-free.app/generate', | |
headers: { | |
'Content-Type': 'application/json', | |
"Access-Control-Allow-Origin": "*", | |
"ngrok-skip-browser-warning": 'any' | |
}, | |
data: data | |
}; | |
const agent = new https.Agent({ | |
rejectUnauthorized: false | |
}); | |
axios.request(config, { httpsAgent: agent }) | |
.then((response) => { | |
console.log(JSON.stringify(response.data)); | |
document.getElementById("answer").textContent = response.data; | |
document.getElementById("loading").classList.add("hidden"); | |
document.getElementById("answer").classList.remove("hidden"); | |
}) | |
.catch((error) => { | |
console.log(error); | |
}); | |
// let continuation = 'The best things in life are'; | |
// let prompt = `<s>[INST] ${continuation} [/INST]`; | |
// let counter = 0; | |
// while(!continuation.includes('</s>') && counter < 5) { | |
// // Request more tokens from the server | |
// let data = { prompt: continuation, priority: 'MED' }; // 'HIGH' | 'MED' | 'LOW' | 'VLOW' | |
// try { | |
// const response = await axios.post(`http://mydomain.com/dt_llama`, data, { timeout: 10_000}); | |
// if(response.data.status === 'success') { | |
// continuation += response.data.data.text; | |
// counter += 1; | |
// // Here write the continuation to your UI, or observable state etc. | |
// } else { | |
// console.error(response.data.error); | |
// break; | |
// } | |
// } catch(err) { | |
// // non-2XX/3XX response | |
// console.error(err); | |
// break; | |
// } | |
// } | |
// fetch( | |
// 'https://baf8-34-87-104-241.ngrok-free.app/generate' + | |
// encodeURIComponent(document.getElementById('question').value) | |
// ) | |
// .then((response) => response.json()) | |
// .then((data) => { | |
// document.getElementById("answer").textContent = data.answer; | |
// document.getElementById("loading").classList.add("hidden"); | |
// document.getElementById("answer").classList.remove("hidden"); | |
// }) | |
// .catch((error) => { | |
// console.error("Error fetching data:", error); | |
// document.getElementById("loading").classList.add("hidden"); | |
// document.getElementById("answer").textContent = "Error: Unable to fetch data"; | |
// document.getElementById("answer").classList.remove("hidden"); | |
// }); | |
}; | |
</script> | |
<style> | |
@keyframes spin { | |
to { | |
transform: rotate(360deg); | |
} | |
} | |
.animate-spin { | |
animation: spin 1s linear infinite; | |
} | |
</style> | |
</head> | |
<body class="bg-gray-100 min-h-screen"> | |
<div class="container mx-auto py-8"> | |
<div class="bg-white shadow-lg rounded-lg p-8"> | |
<h1 class="text-3xl font-bold mb-4">Ask a Question</h1> | |
<textarea id="answer" class="w-full h-64 p-4 bg-gray-100 mb-4" readonly></textarea> | |
<!-- Loading message --> | |
<!-- Loading spinner --> | |
<div | |
id="loading" | |
class="hidden w-16 h-16 border-t-4 border-blue-500 border-solid rounded-full animate-spin mx-auto my-8" | |
></div> | |
<div class="flex items-center space-x-4"> | |
<input id="question" type="text" placeholder="Type your question here" class="flex-grow p-4 border rounded-lg"> | |
<button | |
class="bg-blue-500 text-white py-3 px-6 rounded-lg" | |
onclick="sendQuestion()" | |
> | |
Ask | |
</button> | |
</div> | |
<div class="htmx-indicator h-2 w-2 bg-blue-500 invisible rounded-full"></div> | |
</div> | |
</div> | |
</body> | |
</html> |