| <!DOCTYPE html> |
| <html class="bg-gradient-to-br from-gray-50 to-gray-100"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width" /> |
| <title>SmolLM2 WebGPU Structured Generation 🔥</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="./style/style.css" /> |
|
|
| <link |
| rel="stylesheet" |
| href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" |
| /> |
| <link rel="stylesheet" href="./style/ace.css" /> |
| <link rel="stylesheet" href="./style/hljs.css" /> |
| </head> |
| <body class="min-h-screen p-8 bg-gradient-to-br from-transparent to-blue-50/30"> |
| <div class="max-w-7xl mx-auto"> |
| <h1 class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 mb-4">SmolLM2 WebGPU Structured Generation 🔥</h1> |
| <h4 class="text-lg text-gray-600 mb-8 backdrop-blur-sm"> |
| Generate structured output from LLMs using |
| <a |
| class="text-blue-600 hover:text-blue-800 underline decoration-2 transition-colors" |
| referrerpolicy="no-referrer" |
| href="https://webllm.mlc.ai/" |
| target="_blank" |
| >WebLLM</a |
| > and <a |
| class="text-blue-600 hover:text-blue-800 underline decoration-2 transition-colors" |
| referrerpolicy="no-referrer" |
| href="https://xgrammar.mlc.ai/" |
| target="_blank" |
| >XGrammar</a>. |
| </h4> |
| <main class="flex gap-8 flex-col md:flex-row"> |
| <div id="left-col" class="flex-1 space-y-6"> |
| <div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-gray-100/50 p-6 transition-all hover:shadow-xl"> |
| <form> |
| <label for="model-selection" class="block"> |
| <span class="block font-semibold mb-2 text-gray-800">Model</span> |
| <select id="model-selection" class="w-full rounded-lg border-gray-200 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-all"></select> |
| </label> |
| </form> |
| </div> |
| <div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-gray-100/50 p-6 transition-all hover:shadow-xl"> |
| <form> |
| <label for="grammar-selection" class="block"> |
| <span class="block font-semibold mb-2 text-gray-800">Grammar</span> |
| <select id="grammar-selection" value="json" class="w-full rounded-lg border-gray-200 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-all"> |
| <option value="json">JSON Schema (Default)</option> |
| <option value="custom">Custom Grammar</option> |
| </select> |
| </label> |
| </form> |
| </div> |
| <div id="ebnf-grammar-container" class="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-gray-100/50 p-6 transition-all hover:shadow-xl hidden"> |
| <form> |
| <label for="ebnf-grammar" class="block"> |
| <span class="block font-semibold mb-2 text-gray-800">Custom Grammar</span> |
| <span class="block text-gray-600 text-sm mb-4"> |
| The custom grammar is described in the |
| <a |
| class="text-blue-600 hover:text-blue-800 underline decoration-2 transition-colors" |
| href="https://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_form" |
| referrerpolicy="no-referrer" |
| target="_blank" |
| >extended Backus-Naur form (EBNF)</a |
| >. Below is an example of JSON grammar in EBNF. Please follow |
| this example when writing new grammars. |
| </span> |
| <div id="ebnf-grammar" class="border rounded-lg bg-white/50"></div> |
| </label> |
| </form> |
| </div> |
| <div id="schema-container" class="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-gray-100/50 p-6 transition-all hover:shadow-xl"> |
| <form> |
| <label class="block"> |
| <span class="block font-semibold mb-2 text-gray-800">Schema</span> |
| <span class="block text-gray-600 text-sm mb-4"> |
| Provide a JSON schema to generate output in the specified format. |
| </span> |
| <div id="schema" class="border rounded-lg bg-white/50"></div> |
| </label> |
| </form> |
| </div> |
| </div> |
| <div id="right-col" class="flex-1 space-y-6"> |
| <div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-gray-100/50 p-6 transition-all hover:shadow-xl"> |
| <form> |
| <label for="prompt" class="block"> |
| <span class="block font-semibold mb-2 text-gray-800">Prompt</span> |
| <textarea |
| id="prompt" |
| dir="ltr" |
| placeholder="Enter your prompt here..." |
| rows="1" |
| class="w-full rounded-lg border-gray-200 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-all" |
| ></textarea> |
| </label> |
| </form> |
| </div> |
| <button id="generate" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold py-3 px-6 rounded-xl shadow-lg transition-all hover:shadow-xl hover:scale-[1.02] active:scale-[0.98]">Generate</button> |
| <div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-gray-100/50 p-6 transition-all hover:shadow-xl"> |
| <form> |
| <label class="block"> |
| <span class="block font-semibold mb-2 text-gray-800">Output</span> |
| <div id="output" class="border rounded-lg p-4 bg-white/50"></div> |
| </label> |
| <p class="info hidden text-sm text-gray-600 mt-4" id="stats"></p> |
| </form> |
| </div> |
| </div> |
| </main> |
| </div> |
| <script src="./dist/index.js" type="module"></script> |
| </body> |
| </html> |
|
|
