File size: 3,753 Bytes
4879fd8 4090009 4879fd8 885ad80 4879fd8 885ad80 b8cb406 871174e b8cb406 bd2dc98 b8cb406 bd2dc98 b8cb406 4879fd8 b8cb406 5189f41 b8cb406 5254a31 871174e 5254a31 f18fa7e 871174e f18fa7e 5254a31 cc1f2fe b8cb406 5189f41 cc1f2fe 5189f41 b8cb406 4879fd8 b8cb406 66f35c4 b8cb406 5189f41 b8cb406 885ad80 b8cb406 4879fd8 ab229ee 4879fd8 4090009 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>WebLLM Structured Generation Playground</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
/>
<link rel="stylesheet" href="./style/style.css" />
<link rel="stylesheet" href="./style/ace.css" />
<link rel="stylesheet" href="./style/hljs.css" />
</head>
<body>
<h1>WebLLM Structured Generation Playground</h1>
<h4>
Generate structured output from LLMs using
<a
referrerpolicy="no-referrer"
href="https://webllm.mlc.ai/"
target="_blank"
>WebLLM</a
> and <a
referrerpolicy="no-referrer"
href="https://xgrammar.mlc.ai/"
target="_blank"
>XGrammar</a>.
</h4>
<main>
<div id="left-col" class="container">
<div class="card">
<form>
<label for="model-selection" class="container"
><span><b>Model</b></span>
<select id="model-selection"></select
></label>
</form>
</div>
<div class="card">
<form>
<label for="grammar-selection" class="container"
><span><b>Grammar</b></span>
<select id="grammar-selection" value="json">
<option value="json">JSON Schema (Default)</option>
<option value="custom">Custom Grammar</option>
</select></label
>
</form>
</div>
<div id="ebnf-grammar-container" class="card hidden">
<form>
<label for="ebnf-grammar" class="container"
><span><b>Custom Grammar</b></span>
<span>
The custom grammar is described in the
<a
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"></div>
</label>
</form>
</div>
<div id="schema-container" class="card">
<form>
<label class="container"
><span><b>Schema</b></span>
<span
>Check
<a
href="https://github.com/sinclairzx81/typebox"
referrerpolicy="no-referrer"
target="_blank"
>TypeBox</a
>
for JSON schema type syntax and documentation.</span
>
<div id="schema"></div>
</label>
</form>
</div>
</div>
<div id="right-col" class="container">
<div class="card">
<form>
<label for="prompt" class="container"
><span><b>Prompt</b></span>
<textarea
id="prompt"
dir="ltr"
placeholder=""
rows="1"
></textarea>
</label>
</form>
</div>
<button id="generate">Generate</button>
<div class="card">
<form>
<label class="output"
><span><b>Output</b></span>
<div id="output"></div>
</label>
<p class="info hidden" id="stats"></p>
</form>
</div>
</div>
</main>
<script src="./dist/index.js" type="module"></script>
</body>
</html>
|