Add a LanguageModel class that implements the Llama2 architecture via…

… llama2.c and Emscripten See https://github.com/gohai/llama2.c-emscripten for details.
ml5js · Aug 2, 2023 · 53bd1f6 · 53bd1f6
1 parent f875305
commit 53bd1f6
Show file tree

Hide file tree

Showing 16 changed files with 671 additions and 0 deletions.
diff --git a/examples/LanguageModel/index.html b/examples/LanguageModel/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Language Model Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+  <script src="../../dist/ml5.js"></script>
+</head>
+<body>
+  <input placeholder="Prompt" id="prompt"></input> <input type="button" value="Generate" id="generate" disabled></input>
+  <script src="sketch.js"></script>
+</body>
+</html>
diff --git a/examples/LanguageModel/sketch.js b/examples/LanguageModel/sketch.js
@@ -0,0 +1,61 @@
+let lm;
+let curWord = 0;
+let angle = 0;
+let radius = 60;
+
+function setup() {
+  createCanvas(400, 400);
+  background(0);
+
+  lm = ml5.languageModel(onModelLoaded);
+}
+
+function draw() {
+  fill(0, 5);
+  rect(0, 0, width, height);
+}
+
+function onModelLoaded() {
+  console.log('Model loaded');
+  select('#generate').removeAttribute('disabled');
+  select('#generate').mouseClicked(generateText);
+}
+
+function generateText() {
+  let prompt = select('#prompt').value();
+  console.log('Prompt: ' + prompt);
+
+  let options = {
+    temperature: 0.9
+  };
+  lm.generate(prompt, options, onToken);
+
+  curWord = 0;
+}
+
+function onToken(lm) {
+  console.log(lm.tokens[lm.tokens.length-1]);
+
+  while (curWord < lm.words.length) {
+    push();
+    translate(width/2, height/2);
+    rotate(radians(angle));
+    translate(radius, 0);
+    rotate(radians(-angle));
+    angle = angle + 5;
+    radius += 0.5;
+    if (radius > width/2 || radius > height/2) {
+      radius = 60;
+    }
+    fill(255);
+    textAlign(CENTER);
+    textSize(10);
+    text(lm.words[curWord], 0, 0);
+    pop();
+    curWord++;
+  }
+
+  if (lm.finished) {
+    console.log('Generation finished');
+  }
+}
diff --git a/examples/LanguageModelAsync/index.html b/examples/LanguageModelAsync/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Language Model Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+  <script src="../../dist/ml5.js"></script>
+</head>
+<body>
+  <input placeholder="Prompt" id="prompt"></input> <input type="button" value="Generate" id="generate"></input>
+  <div id="output"></div>
+  <script src="sketch.js"></script>
+</body>
+</html>
diff --git a/examples/LanguageModelAsync/sketch.js b/examples/LanguageModelAsync/sketch.js
@@ -0,0 +1,22 @@
+let lm;
+
+async function setup() {
+  noCanvas();
+
+  lm = await ml5.languageModel();
+  console.log('Model loaded');
+
+  select('#generate').mouseClicked(generateText);
+}
+
+function draw() {
+}
+
+async function generateText() {
+  let prompt = select('#prompt').value();
+  console.log('Prompt: ' + prompt);
+
+  let out = await lm.generate(prompt);
+  console.log('Generated: ' + out);
+  select('#output').html(out);
+}
diff --git a/examples/LanguageModelEvent/index.html b/examples/LanguageModelEvent/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Language Model Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+  <script src="../../dist/ml5.js"></script>
+</head>
+<body>
+  <input placeholder="Prompt" id="prompt"></input> <input type="button" value="Generate" id="generate"></input>
+  <script src="sketch.js"></script>
+</body>
+</html>
diff --git a/examples/LanguageModelEvent/sketch.js b/examples/LanguageModelEvent/sketch.js
@@ -0,0 +1,62 @@
+let lm;
+let curWord = 0;
+let angle = 0;
+let radius = 60;
+
+function setup() {
+  createCanvas(400, 400);
+  background(0);
+
+  lm = ml5.languageModel(onModelLoaded);
+}
+
+function draw() {
+  fill(0, 5);
+  rect(0, 0, width, height);
+}
+
+function onModelLoaded() {
+  console.log('Model loaded');
+  select('#generate').removeAttribute('disabled');
+  select('#generate').mouseClicked(generateText);
+}
+
+function generateText() {
+  let prompt = select('#prompt').value();
+  console.log('Prompt: ' + prompt);
+
+  let options = {
+    temperature: 0.9
+  };
+  lm.generate(prompt, options);
+  lm.on('token', onToken);
+  lm.on('word', onWord);
+  lm.on('finished', onFinshed);
+}
+
+
+function onToken(lm) {
+  console.log(lm.tokens[lm.tokens.length-1]);
+}
+
+function onWord(word, lm) {
+  push();
+  translate(width/2, height/2);
+  rotate(radians(angle));
+  translate(radius, 0);
+  rotate(radians(-angle));
+  angle = angle + 5;
+  radius += 0.5;
+  if (radius > width/2 || radius > height/2) {
+    radius = 60;
+  }
+  fill(255);
+  textAlign(CENTER);
+  textSize(10);
+  text(word, 0, 0);
+  pop();
+}
+
+function onFinshed(lm) {
+  console.log('Generation finished');
+}
diff --git a/examples/LanguageModelManual/index.html b/examples/LanguageModelManual/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Language Model Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+  <script src="../../dist/ml5.js"></script>
+</head>
+<body>
+  <input placeholder="Prompt" id="prompt"></input> <input type="button" value="Generate" id="generate" disabled></input>
+  <script src="sketch.js"></script>
+</body>
+</html>
diff --git a/examples/LanguageModelManual/sketch.js b/examples/LanguageModelManual/sketch.js
@@ -0,0 +1,59 @@
+let lm;
+let numOptions = 40;
+
+async function setup() {
+  noCanvas();
+
+  lm = await ml5.languageModel(onModelLoaded);
+}
+
+function draw() {
+}
+
+function onModelLoaded() {
+  console.log('Model loaded');
+  select('#generate').removeAttribute('disabled');
+  select('#generate').mouseClicked(generateText);
+}
+
+function generateText() {
+  let prompt = select('#prompt').value();
+  console.log('Prompt: ' + prompt);
+
+  select('#prompt').remove();
+  select('#generate').remove();
+  let btn = createElement('button', prompt);
+  btn.attribute('disabled', 'disabled');
+  select('body').child(btn);
+
+  let options = {
+    temperature: 0.9
+  };
+
+  lm.manualStart(prompt, options, onTokens);
+}
+
+function onTokens(tokens, lm) {
+  for (let i=0; i < numOptions; i++) {
+    let btn = createElement('button', tokens[i].str);
+    btn.class('continuation');
+    btn.id(tokens[i].index);
+    btn.mousePressed(selectToken);
+    select('body').child(btn);
+  }
+}
+
+function selectToken() {
+  let nextToken = parseInt(this.id());
+
+  this.removeClass('continuation');
+  this.attribute('disabled', 'disabled');
+  this.mousePressed(null);
+
+  let others = selectAll('.continuation');
+  for (let i=0; i < others.length; i++) {
+    others[i].remove();
+  }
+
+  lm.manualNext(nextToken, onTokens);
+}
diff --git a/examples/LanguageModelManualAsync/index.html b/examples/LanguageModelManualAsync/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Language Model Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+  <script src="../../dist/ml5.js"></script>
+</head>
+<body>
+  <input placeholder="Prompt" id="prompt"></input> <input type="button" value="Generate" id="generate"></input>
+  <script src="sketch.js"></script>
+</body>
+</html>
diff --git a/examples/LanguageModelManualAsync/sketch.js b/examples/LanguageModelManualAsync/sketch.js
@@ -0,0 +1,62 @@
+let lm;
+let numOptions = 40;
+
+async function setup() {
+  noCanvas();
+
+  lm = await ml5.languageModel();
+  console.log('Model loaded');
+
+  select('#generate').mouseClicked(generateText);
+}
+
+function draw() {
+}
+
+async function generateText() {
+  let prompt = select('#prompt').value();
+  console.log('Prompt: ' + prompt);
+
+  select('#prompt').remove();
+  select('#generate').remove();
+  let btn = createElement('button', prompt);
+  btn.attribute('disabled', 'disabled');
+  select('body').child(btn);
+
+  let options = {
+    temperature: 0.9
+  };
+
+  let tokens = await lm.manualStart(prompt, options);
+
+  for (let i=0; i < numOptions; i++) {
+    let btn = createElement('button', tokens[i].str);
+    btn.class('continuation');
+    btn.id(tokens[i].index);
+    btn.mousePressed(selectToken);
+    select('body').child(btn);
+  }
+}
+
+async function selectToken() {
+  let nextToken = parseInt(this.id());
+
+  this.removeClass('continuation');
+  this.attribute('disabled', 'disabled');
+  this.mousePressed(null);
+
+  let others = selectAll('.continuation');
+  for (let i=0; i < others.length; i++) {
+    others[i].remove();
+  }
+
+  let tokens = await lm.manualNext(nextToken);
+
+  for (let i=0; i < numOptions; i++) {
+    let btn = createElement('button', tokens[i].str);
+    btn.class('continuation');
+    btn.id(tokens[i].index);
+    btn.mousePressed(selectToken);
+    select('body').child(btn);
+  }
+}