Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Chat-vs-chat</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script | |
| src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.js" | |
| integrity="sha512-qwi9BHx0+QtW8krMaXObe76bUkPf8nRJOufgT5GS7C74s2sV+neksCVUhAWuMSXxZzKHiM3RuADPmWbhguWEIw==" | |
| crossorigin="anonymous" | |
| referrerpolicy="no-referrer" | |
| ></script> | |
| <script type="text/javascript"> | |
| const prompt = (message) => { | |
| return `<s>[INST]You are a summarization AI. Your task is to summarize user requests, in a single sentence of less than 5 words. Do not try to answer questions, just summarize the user's request. Start your answer with an emoji relevant to the summary.\nWho is the president of Gabon? [/INST]🇬🇦 President of Gabon</s>[INST]Who is Julien Chaumond?[/INST]🧑 Julien Chaumond</s>[INST]What are the latest news?[/INST]📰 Latest news</s>[INST]How to make a great cheesecake?[/INST]🍰 Cheesecake recipe</s>[INST]What is 1 + 1?[/INST]🔢 Simple math operation</s>[INST]${message}[/INST]`; | |
| }; | |
| async function sendMessage(message, temperature, maxNewTokens) { | |
| const response1 = await fetch("/api/model/mistralai", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| }, | |
| body: JSON.stringify({ | |
| inputs: prompt(message), | |
| temperature: temperature, | |
| max_new_tokens: maxNewTokens, | |
| }), | |
| }); | |
| const response2 = await fetch("/api/model/zephyr", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| }, | |
| body: JSON.stringify({ | |
| inputs: prompt(message), | |
| temperature: temperature, | |
| max_new_tokens: maxNewTokens, | |
| }), | |
| }); | |
| const data1 = await response1.json(); | |
| const data2 = await response2.json(); | |
| // Assuming you want to display the 'generated_text' field in the UI | |
| document.querySelector("#mistral-response").textContent = | |
| data1.generated_text || "Error"; | |
| document.querySelector("#zephyr-response").textContent = | |
| data2.generated_text || "Error"; | |
| } | |
| document.addEventListener("DOMContentLoaded", () => { | |
| document | |
| .querySelector("form") | |
| .addEventListener("submit", async (event) => { | |
| event.preventDefault(); | |
| const message = | |
| event.target.querySelector("input[type='text']").value; | |
| const temperature = parseFloat( | |
| document.querySelector("#temperature-input").value | |
| ); | |
| const maxNewTokens = parseInt( | |
| document.querySelector("#max-tokens-input").value, | |
| 10 | |
| ); | |
| await sendMessage(message, temperature, maxNewTokens); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div | |
| class="max-w-screen flex h-screen flex-col overflow-hidden max-h-screen" | |
| > | |
| <form action=""> | |
| <input | |
| placeholder="Type your message" | |
| type="text" | |
| class="h-12 w-full border-b px-4 focus:bg-gray-50 focus:outline-none" | |
| /> | |
| </form> | |
| <div class="grid flex-1 grid-cols-2 divide-x overflow-y-auto"> | |
| <div class="relative flex flex-col space-y-2"> | |
| <div | |
| class="text-xs flex sticky top-0 inset-x-0 h-9 overflow-hidden items-center whitespace-nowrap border-b bg-gray-50 px-4 font-mono sm:text-sm leading-none text-gray-500" | |
| > | |
| Mistral-7B-Instruct-v0.1 | |
| </div> | |
| <div | |
| id="mistral-response" | |
| class="mx-2 max-sm:text-sm self-start rounded-lg bg-gray-50 p-3 text-gray-700 break-words overflow-y-auto" | |
| ></div> | |
| </div> | |
| <div class="relative flex flex-col space-y-2"> | |
| <div | |
| class="text-xs flex sticky top-0 inset-x-0 h-9 overflow-hidden items-center whitespace-nowrap border-b bg-gray-50 px-4 font-mono sm:text-sm leading-none text-gray-500" | |
| > | |
| HuggingFaceH4/zephyr-7b-alpha | |
| </div> | |
| <div | |
| id="zephyr-response" | |
| class="mx-2 max-sm:text-sm self-start rounded-lg bg-gray-50 p-3 text-gray-700 break-words overflow-y-auto" | |
| ></div> | |
| </div> | |
| </div> | |
| <div | |
| class="flex h-9 sm:h-12 items-stretch justify-end divide-x border-t font-mono text-xs sm:text-sm text-gray-500" | |
| > | |
| <label for="temperature-input" class="flex items-center gap-4 px-4"> | |
| temperature | |
| <input | |
| value="1" | |
| type="number" | |
| id="temperature-input" | |
| class="w-16 rounded border bg-gray-100 px-1" | |
| /> | |
| </label> | |
| <label for="max-tokens-input" class="flex items-center gap-4 px-4"> | |
| max_new_tokens | |
| <input | |
| value="512" | |
| type="number" | |
| id="max-tokens-input" | |
| class="w-16 rounded border bg-gray-100 px-1" | |
| /> | |
| </label> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |