add prompt examples

candle-wasm-examples/phi/index.html

@@ -41,42 +41,106 @@
  const MODELS = {
  phi_1_5_quantized: {
  base_url:
- "https://huggingface.co/lmz/candle-quantized-phi/resolve/refs%2Fpr%2F4/",
+ "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/",
  model: "model-q4k.gguf",
  tokenizer: "tokenizer.json",
  config: "phi-1_5.json",
  quantized: true,
  seq_len: 2048,
+ size: "800 MB",
  },
  phi_1_5_quantized_2: {
  base_url:
- "https://huggingface.co/lmz/candle-quantized-phi/resolve/refs%2Fpr%2F4/",
+ "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/",
  model: "model-q80.gguf",
  tokenizer: "tokenizer.json",
  config: "phi-1_5.json",
  quantized: true,
  seq_len: 2048,
+ size: "1.51 GB",
  },
  puffin_phi_v2_quantized: {
  base_url:
- "https://huggingface.co/lmz/candle-quantized-phi/resolve/refs%2Fpr%2F4/",
+ "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/",
  model: "model-puffin-phi-v2-q4k.gguf",
  tokenizer: "tokenizer-puffin-phi-v2.json",
  config: "puffin-phi-v2.json",
  quantized: true,
  seq_len: 2048,
+ size: "798 MB",
  },
  puffin_phi_v2_quantized_2: {
  base_url:
- "https://huggingface.co/lmz/candle-quantized-phi/resolve/refs%2Fpr%2F4/",
+ "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/",
  model: "model-puffin-phi-v2-q80.gguf",
  tokenizer: "tokenizer-puffin-phi-v2.json",
  config: "puffin-phi-v2.json",
  quantized: true,
  seq_len: 2048,
+ size: "1.50 GB",
  },
  };
 
+ const TEMPLATES = [
+ {
+ title: "Simple prompt",
+ prompt: `Sebastien is in London today, it’s the middle of July yet it’s raining, so Sebastien is feeling gloomy. He`,
+ },
+ {
+ title: "Think step by step",
+ prompt: `Suppose Alice originally had 3 apples, then Bob gave Alice 7 apples, then Alice gave Cook 5 apples, and then Tim gave Alice 3x the amount of apples Alice had. How many apples does Alice have now? 
+Let’s think step by step.`,
+ },
+ {
+ title: "Explaing a code snippet",
+ prompt: `What does this script do? 
+\`\`\`python
+s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+s.bind(('', 0))
+s.listen(1)
+conn, addr = s.accept()
+print('Connected by', addr)
+return conn.getsockname()[1]
+\`\`\`
+Let’s think step by step.`,
+ },
+ {
+ title: "Question answering",
+ prompt: `What is the capital of France? 
+Answer:`,
+ },
+ {
+ title: "Chat mode",
+ prompt: `Alice: Can you tell me how to create a python application to go through all the files
+in one directory where the file’s name DOES NOT end with '.json'? 
+Bob:`,
+ },
+ {
+ title: "Python code completion",
+ prompt: `"""write a python function called batch(function, list) which call function(x) for x in
+list in parallel""" 
+Solution:`,
+ },
+ {
+ title: "Python Sample",
+ prompt: `"""Can you make sure those histograms appear side by side on the same plot: 
+\`\`\`python
+plt.hist(intreps_retrained[0][1].view(64,-1).norm(dim=1).detach().cpu().numpy(), bins = 20)
+plt.hist(intreps_pretrained[0][1].view(64,-1).norm(dim=1).detach().cpu().numpy(), bins = 20)
+\`\`\` 
+"""`,
+ },
+ {
+ title: "Write a Twitter post",
+ prompt: `Write a twitter post for the discovery of gravitational wave. 
+Twitter Post:`,
+ },
+ {
+ title: "Write a review",
+ prompt: `Write a polite review complaining that the video game 'Random Game' was too badly optimized and it burned my laptop. 
+Very polite review:`,
+ },
+ ];
  const phiWorker = new Worker("./phiWorker.js", {
  type: "module",
  });
@@ -171,9 +235,42 @@
  const clearBtn = document.querySelector("#clear-btn");
  const runBtn = document.querySelector("#run");
  const modelSelect = document.querySelector("#model");
+ const promptTemplates = document.querySelector("#prompt-templates");
  let runController = new AbortController();
  let isRunning = false;
 
+ document.addEventListener("DOMContentLoaded", () => {
+ for (const [id, model] of Object.entries(MODELS)) {
+ const option = document.createElement("option");
+ option.value = id;
+ option.innerText = `${id} (${model.size})`;
+ modelSelect.appendChild(option);
+ }
+
+ for (const [i, { title, prompt }] of TEMPLATES.entries()) {
+ const div = document.createElement("div");
+ const input = document.createElement("input");
+ input.type = "radio";
+ input.name = "task";
+ input.id = `templates-${i}`;
+ input.classList.add("font-light", "cursor-pointer");
+ input.value = prompt;
+ const label = document.createElement("label");
+ label.htmlFor = `templates-${i}`;
+ label.classList.add("cursor-pointer");
+ label.innerText = title;
+ div.appendChild(input);
+ div.appendChild(label);
+ promptTemplates.appendChild(div);
+ }
+ });
+
+ promptTemplates.addEventListener("change", (e) => {
+ const template = e.target.value;
+ prompt.value = template;
+ prompt.style.height = "auto";
+ prompt.style.height = prompt.scrollHeight + "px";
+ });
  modelSelect.addEventListener("change", (e) => {
  const model = MODELS[e.target.value];
  document.querySelector("#max-seq").max = model.seq_len;
@@ -275,20 +372,11 @@ <h2 class="text-2xl font-bold">Rust/WASM Demo</h2>
  <select
  id="model"
  class="border-2 border-gray-500 rounded-md font-light"
- >
- <option value="phi_1_5_quantized" selected>
- phi 1.5 quantized q4k (800 MB)
- </option>
- <option value="phi_1_5_quantized_2">
- phi 1.5 quantized q80 (1.51 GB)
- </option>
- <option value="puffin_phi_v2_quantized">
- Puffin-Phi V2 quantized q4k (798 MB)
- </option>
- <option value="puffin_phi_v2_quantized_2">
- Puffin-Phi V2 quantized q80 (1.50 GB)
- </option>
- </select>
+ ></select>
+ </div>
+ <div>
+ <h3 class="font-medium">Prompt Templates</h3>
+ <form id="prompt-templates" class="flex flex-col gap-1 my-2"></form>
  </div>
  <form
  id="form"