| <!doctype html> |
| <html lang="en" class="h-full"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title id="page-title">WebLLM Simple Chat Space</title> |
| <link rel="stylesheet" href="styles/katex.min.css" /> |
| <link |
| rel="stylesheet" |
| href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css" |
| /> |
| <script type="module" crossorigin src="./assets/index-DVpY-Jxx.js"></script> |
| <link rel="stylesheet" crossorigin href="./assets/index-BwUBwogn.css"> |
| </head> |
|
|
| <body class="h-full text-gray-300 bg-[#121212] flex flex-col overflow-hidden"> |
| <div id="model-display" class="absolute top-2 left-2 text-gray-300 text-sm font-semibold hidden"> |
| </div> |
|
|
| <div class="flex w-full flex-col h-screen"> |
| <div id="initial-content" class="w-full max-w-xl mx-auto"> |
| <h1 id="page-heading" class="text-3xl mt-10 font-bold mb-2 text-center text-gray-100 p-4"> |
| WebLLM on WebGPU |
| </h1> |
| <p id="page-description" class="text-lg text-gray-400 mb-6 text-center"> |
| Blazing fast inference with WebGPU and WebLLM running locally in your browser. |
| </p> |
| <div |
| class="border-[var(--border-color)] border-[1.5px] rounded-lg bg-[var(--bg-color)] shadow-md p-4 mb-4 mx-auto w-full" |
| > |
| <h2 class="text-xl font-semibold mb-4 text-gray-100">Load Model</h2> |
| <div |
| class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4" |
| > |
| <select |
| id="model-selection" |
| class="flex-grow p-2 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:[var(--border-color)] bg-[var(--bg-color)] text-gray-300" |
| > |
| |
| </select> |
| <button |
| id="download" |
| class="px-4 py-2 border-[var(--border-color)] border-[1.5px] text-white rounded-md focus:outline-none focus:ring-2 focus:[var(--border-color)] focus:ring-offset-2 focus:ring-offset-gray-900 transition duration-150 ease-in-out" |
| > |
| Download |
| </button> |
| </div> |
| <div id="download-status" class="text-sm text-gray-400 m-2"></div> |
| |
| |
| <div class="mt-4"> |
| <label for="system-prompt" class="block text-sm font-medium text-gray-300 mb-2">System Prompt:</label> |
| <textarea |
| id="system-prompt" |
| rows="8" |
| class="w-full p-2 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:[var(--border-color)] bg-[var(--bg-color)] text-gray-300" |
| placeholder="Enter system prompt here..." |
| >You are a dialogue generator for the video game Fallout 5, which is set in post apocalyptic United States, 500 years after nuclear apocalypse. The prompt will include a description of the character that the user is speaking to. if the prompt is <hi> the user is approaching and the character gives a greeting. Otherwise the prompt represents the user's statement to the character, and the character responds in kind. Your response will always follow the JSON format {"dialogue":"<the character's dialogue>"} No other commentary besides the JSON object. No markdown.</textarea> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex-grow overflow-hidden flex flex-col"> |
| <div id="chat-box" class="flex-grow overflow-y-auto p-4 w-full mx-auto space-y-4 relative prose prose-invert custom-scrollbar"> |
| <div id="example-messages" class="flex flex-col mt-36 items-center justify-center w-full"> |
| <div class="grid grid-cols-2 gap-4 w-full max-w-xl mx-auto"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| <div id="chat-stats" class="fixed bottom-4 left-4 p-4 border-[var(--border-color)] border-[1.5px] rounded-lg bg-[var(--bg-color)] text-white font-mono font-bold text-sm hidden"> |
| <div class="table-row"> |
| <div class="table-cell pr-4">Prompt:</div> |
| <div id="prompt-tokens" class="table-cell">-</div> |
| </div> |
| <div class="table-row"> |
| <div class="table-cell pr-4">Completion:</div> |
| <div id="completion-tokens" class="table-cell">-</div> |
| </div> |
| <div class="table-row"> |
| <div class="table-cell pr-4">Prefill:</div> |
| <div id="prefill-speed" class="table-cell">-</div> |
| </div> |
| <div class="table-row"> |
| <div class="table-cell pr-4">Decoding:</div> |
| <div id="decoding-speed" class="table-cell">-</div> |
| </div> |
| </div> |
|
|
| <div class="border-[var(--border-color)] border-[1.5px] rounded-lg bg-[var(--bg-color)] w-full max-w-2xl mx-auto p-4 mb-4"> |
| <div class="max-w-3xl mx-auto"> |
| <div class="flex space-x-2"> |
| <input |
| type="text" |
| id="user-input" |
| placeholder="Type a message..." |
| class="flex-grow p-3 rounded-lg bg-[var(--bg-color)] focus:outline-none focus:ring-2 focus:[var(--border-color)] text-gray-300" |
| /> |
| <button |
| id="send" |
| disabled |
| class="px-4 py-2 text-white rounded-md focus:outline-none focus:ring-2 focus:[var(--border-color)] focus:ring-offset-2 focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out" |
| > |
| <svg |
| xmlns="http://www.w3.org/2000/svg" |
| class="h-5 w-5" |
| viewBox="0 0 20 20" |
| fill="currentColor" |
| > |
| <path |
| fill-rule="evenodd" |
| d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" |
| clip-rule="evenodd" |
| /> |
| </svg> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| </body> |
| </html> |
