ml5js · gohai · Jul 31, 2023 · Aug 4, 2023 · Aug 4, 2023 · Aug 4, 2023
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"></input><br><br>
+  <script src="sketch.js"></script>
+</body>
+</html>
diff --git a/examples/LanguageModel/sketch.js b/examples/LanguageModel/sketch.js
@@ -0,0 +1,50 @@
+let lm;
+let words = [];
+let curWord = 0;
+let curX = 0;
+let curY = 20;
+
+function preload() {
+  lm = ml5.languageModel('TinyStories-15M');
+}
+
+function setup() {
+  createCanvas(400, 400);
+  frameRate(15);
+  background(0);
+  select('#generate').mouseClicked(generateText);
+}
+
+function draw() {
+  fill(0, 2);
+  rect(0, 0, width, height);
+
+  if (curWord < words.length) {
+    let wordWidth = textWidth(words[curWord]);
+    if (curX+wordWidth > width) {
+      curX = 0;
+      curY += textAscent() + textDescent();
+    }
+    fill(255);
+    text(words[curWord] + ' ', curX, curY);
+    curX += wordWidth;
+    curWord++;
+  }
+}
+
+function generateText() {
+  let prompt = select('#prompt').value();
+  console.log('Prompt is "' + prompt + '"');
+
+  let options = {
+    temperature: 0.9
+  };
+  lm.generate(prompt, options, gotText);
+}
+
+function gotText(result) {
+  console.log('Model returned "' + result.text + '"');
+  // lm.words contains the output broken up in words
+  words = result.words;
+  curWord = 0;
+}
diff --git a/examples/LanguageModelEvents/index.html b/examples/LanguageModelEvents/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><br><br>
+  <script src="sketch.js"></script>
+</body>
+</html>
diff --git a/examples/LanguageModelEvents/sketch.js b/examples/LanguageModelEvents/sketch.js
@@ -0,0 +1,64 @@
+let lm;
+let curWord = 0;
+let angle = 0;
+let radius = 60;
+
+function preload() {
+  lm = ml5.languageModel('TinyStories-15M', onModelLoaded);
+}
+
+function setup() {
+  createCanvas(400, 400);
+  background(0);
+  select('#generate').mouseClicked(generateText);
+}
+
+function draw() {
+  fill(0, 5);
+  rect(0, 0, width, height);
+}
+
+function onModelLoaded() {
+  console.log('Model loaded');
+}
+
+function generateText() {
+  let prompt = select('#prompt').value();
+  console.log('Prompt is "' + prompt + '"');
+
+  let options = {
+    temperature: 0.9
+  };
+  lm.generate(prompt, options);
+  lm.on('token', onToken);
+  lm.on('word', onWord);
+  lm.on('finish', onFinsh);
+}
+
+
+function onToken(lm) {
+  console.log('Token', lm.tokens.slice(-1));
+}
+
+function onWord(lm) {
+  console.log('Word "' + lm.words.slice(-1) + '"');
+  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.slice(-1), 0, 0);
+  pop();
+}
+
+function onFinsh(lm) {
+  console.log('Model returned "' + lm.text + '"');
+}
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"></input>
+  <script src="sketch.js"></script>
+</body>
+</html>
diff --git a/examples/LanguageModelManual/sketch.js b/examples/LanguageModelManual/sketch.js
@@ -0,0 +1,60 @@
+let lm;
+let numOptions = 40;
+
+function preload() {
+  lm = ml5.languageModel('TinyStories-15M', onModelLoaded);
+}
+
+function setup() {
+  noCanvas();
+  select('#generate').mouseClicked(generateText);
+}
+
+function draw() {
+}
+
+function onModelLoaded() {
+  console.log('Model loaded');
+}
+
+function generateText() {
+  let prompt = select('#prompt').value();
+  console.log('Prompt is "' + 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);
+}