Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ollama Template Test</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| main { | |
| margin: 0 auto; | |
| max-width: 800px; | |
| padding: 20px; | |
| } | |
| textarea { | |
| width: 100%; | |
| } | |
| pre { | |
| background-color: #f4f4f4; | |
| padding: 10px; | |
| border-radius: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <h1>Ollama Template Test</h1> | |
| <p> | |
| Given a conversation and a template, the Go template engine will apply the chat template. | |
| </p> | |
| Conversation JSON:<br/> | |
| <textarea id="conversation" rows="10" cols="50"></textarea><br/> | |
| <br/> | |
| Ollama Go template:<br/> | |
| <textarea id="template" rows="10" cols="50"></textarea><br/> | |
| <br/> | |
| <button onclick="applyChatTemplate()" style="font-size: 1.2em">🚀 Apply chat template</button><br/> | |
| <br/> | |
| Output:<br/> | |
| <pre id="output"></pre> | |
| <br/> | |
| <br/> | |
| <br/> | |
| <center> | |
| <small>Made by <a href="https://github.com/ngxson">ngxson</a> from 🤗</small> | |
| </center> | |
| <br/> | |
| <br/> | |
| </main> | |
| <script src="wasm_exec.js"></script> | |
| <script> | |
| const DEFAULT_CONV = [ | |
| { role: "system", content: "You are a helpful assistant."}, | |
| { role: "user", content: "Hello, how are you?"}, | |
| { role: "assistant", content: "I'm doing great. How can I help you today?"}, | |
| { role: "user", content: "I'd like to show off how chat templating works!"}, | |
| ]; | |
| const DEFAULT_TMPL = "{{ if .System }}<|system|>\n{{ .System }}<|end|>\n{{ end }}{{ if .Prompt }}<|user|>\n{{ .Prompt }}<|end|>\n{{ end }}<|assistant|>\n{{ .Response }}<|end|>"; | |
| const elTemplate = document.getElementById("template"); | |
| const elConversation = document.getElementById("conversation"); | |
| elTemplate.value = DEFAULT_TMPL; | |
| elConversation.value = JSON.stringify(DEFAULT_CONV, null, 2); | |
| if (WebAssembly) { | |
| // WebAssembly.instantiateStreaming is not currently available in Safari | |
| if (WebAssembly && !WebAssembly.instantiateStreaming) { // polyfill | |
| WebAssembly.instantiateStreaming = async (resp, importObject) => { | |
| const source = await (await resp).arrayBuffer(); | |
| return await WebAssembly.instantiate(source, importObject); | |
| }; | |
| } | |
| const go = new Go(); | |
| WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => { | |
| go.run(result.instance); | |
| applyChatTemplate(); | |
| }); | |
| } else { | |
| alert("WebAssembly is not supported in your browser"); | |
| } | |
| function applyChatTemplate() { | |
| const conversation = elConversation.value; | |
| const template = elTemplate.value.trim(); | |
| const output = formatChatTemplate(conversation, template); | |
| document.getElementById("output").textContent = output; | |
| } | |
| </script> | |
| </body> | |
| </html> |