updates to charRNN examples

examples/p5js/CharRNN/CharRNN_Interactive/index.html

@@ -20,7 +20,7 @@ <h2>This example uses a pre-trained model on a corpus of <a href="https://en.wik
  <br /> length:
  <input id="lenSlider" type="range" min="1" max="100" value="20" /> <span id="length">20</span>
  <br /> temperature:
- <input id="tempSlider" type="range" min="0" max="1" step="0.01" /><span id="temperature">0.5</span>
+ <input id="tempSlider" type="range" min="0.01" max="1" step="0.01" /><span id="temperature">0.5</span>
  <p id="status">Loading Model</p>
  <p id="result">
  <span id="original"></span><span id="prediction"></span>

examples/p5js/CharRNN/CharRNN_Interactive/sketch.js

@@ -14,70 +14,91 @@ let charRNN;
 let textInput;
 let tempSlider;
 let lengthSlider;
-let runningInference = false;
+let runningInference = true;
+
+let generated = false;
+let last;
 
 function setup() {
  noCanvas();
 
  // Create the LSTM Generator passing it the model directory
- charRNN = ml5.charRNN('models/woolf/', modelReady);
+ charRNN = ml5.charRNN("models/woolf/", modelReady);
 
  // Grab the DOM elements
- textInput = select('#textInput');
- lengthSlider = select('#lenSlider');
- tempSlider = select('#tempSlider');
+ textInput = select("#textInput");
+ lengthSlider = select("#lenSlider");
+ tempSlider = select("#tempSlider");
 
  // Run generate anytime something changes
- textInput.input(generate);
- lengthSlider.input(generate);
- tempSlider.input(generate);
+ textInput.input(changing);
+ lengthSlider.input(changing);
+ tempSlider.input(changing);
+
+ // Check every so often if we should generate something new
+ setInterval(checkGenerate, 500);
 }
 
 function modelReady() {
- select('#status').html('Model Loaded');
+ select("#status").html("Model Loaded");
+ runningInference = false;
+}
+
+// Has 500 milliseconds passed since the last time a change was made?
+function checkGenerate() {
+ let passed = millis() - last;
+ if (passed > 500 && !generated) {
+ generate();
+ generated = true;
+ }
 }
 
+// Update the time
+function changing() {
+ generated = false;
+ last = millis();
+}
+
+// Generate new text!
 function generate() {
+ // Grab the original text
+ const original = textInput.value();
+ // Make it to lower case
+ const txt = original.toLowerCase();
+
  // prevent starting inference if we've already started another instance
+ // or if there is no prompt
  // TODO: is there better JS way of doing this?
- if(!runningInference) {
+ if (!runningInference && txt.length > 0) {
  runningInference = true;
 
  // Update the status log
- select('#status').html('Generating...');
+ select("#status").html("Generating...");
 
  // Update the length and temperature span elements
- select('#length').html(lengthSlider.value());
- select('#temperature').html(tempSlider.value());
-
- // Grab the original text
- const original = textInput.value();
- // Make it to lower case
- const txt = original.toLowerCase();
-
- // Check if there's something
- if (txt.length > 0) {
- // Here is the data for the LSTM generator
- const data = {
- seed: txt,
- temperature: tempSlider.value(),
- length: lengthSlider.value()
- };
-
- // Generate text with the charRNN
- charRNN.generate(data, gotData);
-
- // Update the DOM elements with typed and generated text
- function gotData(err, result) {
- select('#status').html('Ready!');
- select('#original').html(original);
- select('#prediction').html(result.sample);
- runningInference = false;
+ select("#length").html(lengthSlider.value());
+ select("#temperature").html(tempSlider.value());
+
+ // Here is the data for the LSTM generator
+ const data = {
+ seed: txt,
+ temperature: tempSlider.value(),
+ length: lengthSlider.value(),
+ };
+
+ // Generate text with the charRNN
+ charRNN.generate(data, gotData);
+
+ // Update the DOM elements with typed and generated text
+ function gotData(err, result) {
+ runningInference = false;
+ if (err) {
+ console.error(err);
+ return;
  }
- } else {
- // Clear everything
- select('#original').html('');
- select('#prediction').html('');
+ select("#status").html("Ready!");
+ select("#original").html(original);
+ select("#prediction").html(result.sample);
  }
  }
 }

examples/p5js/CharRNN/CharRNN_Text/index.html

@@ -19,7 +19,7 @@ <h2>This example uses a pre-trained model on a corpus of <a href="https://en.wik
  <p>length:
  <input id="lenSlider" type="range" min="10" max="500" value="100" /> <span id="length">100</span></p>
  <p>temperature:
- <input id="tempSlider" type="range" min="0" max="1" step="0.01" /><span id="temperature">0.5</span></p>
+ <input id="tempSlider" type="range" min="0.01" max="1" step="0.01" /><span id="temperature">0.5</span></p>
  <p id="status">Loading Model</p>
  <button id="generate">generate</button>
  <p id="result"></p>

examples/p5js/CharRNN/CharRNN_Text_Stateful/index.html

@@ -21,7 +21,7 @@ <h1>Stateful CharRNN Text Generation Example using p5.js</h1>
  <input id="textInput" value="The sky was blue and " />
  </p>
  <p>temperature:
- <input id="tempSlider" type="range" min="0" max="1" step="0.01" /><span id="temperature">0.5</span>
+ <input id="tempSlider" type="range" min="0.01" max="1" step="0.01" /><span id="temperature">0.5</span>
  </p>
  <p><button id="reset">Reset</button><button id="start">Start</button><button id="single">Single</button></p>
  <p id="status">Loading Model</p>