Hugging Face's logo

Spaces:
Nymbo
/
ollama_template_test
Running

App Files Community
ollama_template_test
File size: 2,981 Bytes 
66191a5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<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>