From b544b2432d5873987d6687733a0eb93d6eb313d9 Mon Sep 17 00:00:00 2001 From: gohai Date: Fri, 4 Aug 2023 11:50:25 +0800 Subject: [PATCH] LanguageModel: Change the callback to be on-completion rather than on-token As suggested by @shiffman. This makes the most basic example easier to understand. --- examples/LanguageModel/index.html | 2 +- examples/LanguageModel/sketch.js | 56 +++++++++++++------------------ src/LanguageModel/index.js | 10 +++--- 3 files changed, 30 insertions(+), 38 deletions(-) diff --git a/examples/LanguageModel/index.html b/examples/LanguageModel/index.html index bc17ebed..90402ed0 100644 --- a/examples/LanguageModel/index.html +++ b/examples/LanguageModel/index.html @@ -8,7 +8,7 @@ - +

diff --git a/examples/LanguageModel/sketch.js b/examples/LanguageModel/sketch.js index f52d6a48..f879e7ac 100644 --- a/examples/LanguageModel/sketch.js +++ b/examples/LanguageModel/sketch.js @@ -1,18 +1,32 @@ let lm; +let words = []; let curWord = 0; -let angle = 0; -let radius = 60; +let curX = 0; +let curY = 20; function setup() { createCanvas(400, 400); + frameRate(15); background(0); lm = ml5.languageModel('TinyStories-15M', onModelLoaded); } function draw() { - fill(0, 5); + 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 onModelLoaded() { @@ -23,39 +37,17 @@ function onModelLoaded() { function generateText() { let prompt = select('#prompt').value(); - console.log('Prompt: ' + prompt); + console.log('Prompt is "' + prompt + '"'); let options = { temperature: 0.9 }; - lm.generate(prompt, options, onToken); - - curWord = 0; + lm.generate(prompt, options, gotText); } -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'); - } +function gotText(out, lm) { + console.log('Model returned "' + out + '"'); + // lm.words contains the output broken up in words + words = lm.words; + curWord = 0; } diff --git a/src/LanguageModel/index.js b/src/LanguageModel/index.js index 54351110..e50b1a6b 100644 --- a/src/LanguageModel/index.js +++ b/src/LanguageModel/index.js @@ -108,10 +108,7 @@ class LanguageModel extends EventEmitter { this.out += tokenStr; } - // on-token callback/event - if (this.callback) { - this.callback(this); - } + // on-token event this.emit('token', this); // redo word tokenization @@ -128,13 +125,16 @@ class LanguageModel extends EventEmitter { this.emit('word', this.words[i], this); } - // on-finished promise/event + // on-finished promise/event/callback if (this.finished) { // fulfill the promise returned by generate() if (this.promiseResolve) { this.promiseResolve(this.out); } this.emit('finsh', this); + if (this.callback) { + this.callback(this.out, this); + } } }, 'viifi');