LanguageModel: Support p5's preload()

gohai · gohai · commit 350ebfe54bd8 · 2023-08-09T19:48:31.000+08:00
Unsure if calling _{inc,de}crementPreload() manually is the best way to accomplish this. I first tried the p5PreloadHelper from the old repo, but this never made window._preloadCount go above zero for me. (Maybe @ziyuan-linn has some idea?)
diff --git a/examples/LanguageModel/index.html b/examples/LanguageModel/index.html
@@ -8,7 +8,7 @@
   <script src="../../dist/ml5.js"></script>
 </head>
 <body>
-  <input placeholder="Prompt" id="prompt"></input> <input type="button" value="Generate" id="generate" disabled></input><br><br>
+  <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
@@ -4,12 +4,15 @@ 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);
-
-  lm = ml5.languageModel('TinyStories-15M', onModelLoaded);
+  select('#generate').mouseClicked(generateText);
 }
 
 function draw() {
@@ -29,12 +32,6 @@ 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 is "' + prompt + '"');
diff --git a/examples/LanguageModelEvents/index.html b/examples/LanguageModelEvents/index.html
@@ -8,7 +8,7 @@
   <script src="../../dist/ml5.js"></script>
 </head>
 <body>
-  <input placeholder="Prompt" id="prompt"></input> <input type="button" value="Generate" id="generate" disabled></input><br><br>
+  <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
@@ -3,11 +3,14 @@ let curWord = 0;
 let angle = 0;
 let radius = 60;
 
+function preload() {
+  lm = ml5.languageModel('TinyStories-15M', onModelLoaded);
+}
+
 function setup() {
   createCanvas(400, 400);
   background(0);
-
-  lm = ml5.languageModel('TinyStories-15M', onModelLoaded);
+  select('#generate').mouseClicked(generateText);
 }
 
 function draw() {
@@ -17,8 +20,6 @@ function draw() {
 
 function onModelLoaded() {
   console.log('Model loaded');
-  select('#generate').removeAttribute('disabled');
-  select('#generate').mouseClicked(generateText);
 }
 
 function generateText() {
diff --git a/examples/LanguageModelManual/index.html b/examples/LanguageModelManual/index.html
@@ -8,7 +8,7 @@
   <script src="../../dist/ml5.js"></script>
 </head>
 <body>
-  <input placeholder="Prompt" id="prompt"></input> <input type="button" value="Generate" id="generate" disabled></input>
+  <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
@@ -1,19 +1,20 @@
 let lm;
 let numOptions = 40;
 
-async function setup() {
-  noCanvas();
+function preload() {
+  lm = ml5.languageModel('TinyStories-15M', onModelLoaded);
+}
 
-  lm = await ml5.languageModel('TinyStories-15M', onModelLoaded);
+function setup() {
+  noCanvas();
+  select('#generate').mouseClicked(generateText);
 }
 
 function draw() {
 }
 
 function onModelLoaded() {
   console.log('Model loaded');
-  select('#generate').removeAttribute('disabled');
-  select('#generate').mouseClicked(generateText);
 }
 
 function generateText() {
diff --git a/src/LanguageModel/index.js b/src/LanguageModel/index.js
@@ -53,6 +53,11 @@ class LanguageModel extends EventEmitter {
     this.words = [];
     this.finished = true;
 
+    // for compatibility with p5's preload()
+    if (typeof window === 'object' && typeof window._incrementPreload === 'function') {
+      window._incrementPreload();
+    }
+
     this.ready = callCallback(this.loadModel(), callback);
   }
 
@@ -141,6 +146,11 @@ class LanguageModel extends EventEmitter {
     await this.llama2.ccall('register_callback', null, [ 'number' ], [ onTokenCallback ]);
 
     //console.log('loadModel done');
+
+    // for compatibility with p5's preload()
+    if (typeof window === 'object' && typeof window._decrementPreload === 'function') {
+      window._decrementPreload();
+    }
   }
 
   async generate(prompt, optionsOrCb, cb) {
