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: 'https://bbb5-34-136-146-180.ngrok-free.app/generate', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| // "Access-Control-Allow-Origin": "*", | |
| // "ngrok-skip-browser-warning": 'any' | |
| }, | |
| data: data | |
| }; | |
| axios.request(config) | |
| .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> |