| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>WebLLM JSON 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 JSON Playground</h1> | |
| <h4> | |
| Generate JSON output from LLMs using | |
| <a | |
| referrerpolicy="no-referrer" | |
| href="https://github.com/mlc-ai/web-llm" | |
| target="_blank" | |
| >WebLLM</a | |
| >. | |
| </h4> | |
| <main> | |
| <div id="left-col" class="container"> | |
| <div class="card"> | |
| <form> | |
| <label for="model-selection" class="container" | |
| ><span>Model</span> | |
| <select id="model-selection"></select | |
| ></label> | |
| </form> | |
| </div> | |
| <div class="card"> | |
| <form> | |
| <label for="prompt" class="container" | |
| ><span>Prompt</span> | |
| <textarea | |
| id="prompt" | |
| dir="ltr" | |
| placeholder="" | |
| rows="1" | |
| ></textarea> | |
| </label> | |
| </form> | |
| </div> | |
| <div class="card"> | |
| <form> | |
| <label class="container" | |
| ><span>Schema</span> | |
| <div id="schema"></div> | |
| </label> | |
| </form> | |
| </div> | |
| </div> | |
| <div id="right-col" class="container"> | |
| <button id="generate">Generate</button> | |
| <div class="card"> | |
| <form> | |
| <label class="output" | |
| ><span>Output</span> | |
| <div id="output"></div> | |
| </label> | |
| </form> | |
| </div> | |
| </div> | |
| </main> | |
| <script | |
| src="./lib/ace/ace.js" | |
| type="text/javascript" | |
| charset="utf-8" | |
| ></script> | |
| <script | |
| src="./lib/ace/theme-github.js" | |
| type="text/javascript" | |
| charset="utf-8" | |
| ></script> | |
| <script src="./index.js" type="module"></script> | |
| </body> | |
| </html> | |