Skip to content
This repository has been archived by the owner on Apr 6, 2020. It is now read-only.

Commit

Permalink
Adds ml5.js v0.3.0 to release (#144)
Browse files Browse the repository at this point in the history 
* set ml5 reference to localhost

* Unet example webcam (#120)

* added uNet example

* rm video from model load

* updated UNET example to current UNET implementation

* set frameRate to 5

* Tinkering with segmentation example (#121)

I am not sure this is better. I do prefer calling `segment()` from `gotResult()` itself, but maybe creating a blank image to eliminate the `draw()` if statement isn't a good idea.

* Sentiment example (#118)

* added sentiment example

* move to p5js

* fixed unet sketch at segmentationImage (#122)

* add cvae example (#117)

* added new cvae example (#123)

* handle html elements in p5 and cleaned up functions (#124)

* simplify CVAE example (#125)

* simplfiying the sentiment example (#126)

* simplify unet example (#127)

* Update localhost reference and script (#129)

* added http://localhost:8080/ml5.js

* added all examples with correct http://localhost:8080/ml5.js

* changing example to dropdown (#130)

* changing example to dropdown

* comments

* Adds DCGAN example (#138)

* initial commit

* adds example of dcgan using small face model

* use named function for callback

* rm console.log

* updated className to label (#141)

* Feature extractor update to specify number of labels (#142)

* added additional label - show how to specify label nums

* adds object as input to .classificaiton()

* changed version ml5 reference to 0.3.0

* added p5 version 0.8.0
  • Loading branch information
@joeyklee
joeyklee authored May 24, 2019
1 parent be96efc commit 5b41f70
Show file tree
Hide file tree
Showing 57 changed files with 432 additions and 121 deletions.
2 changes: 1 addition & 1 deletion javascript/FeatureExtractor_Image_Classification/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>Image Classification using Feature Extraction with MobileNet</title>


<script src="https://unpkg.com/ml5@0.2.3/dist/ml5.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/ml5@0.3.0/dist/ml5.min.js" type="text/javascript"></script>

<style></style>
</head>
Expand Down
4 changes: 2 additions & 2 deletions javascript/ImageClassification/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
<title>Image Classification Example</title>


<script src="https://unpkg.com/ml5@0.2.3/dist/ml5.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/ml5@0.3.0/dist/ml5.min.js" type="text/javascript"></script>

This comment has been minimized.

Sign in to view

Copy link
@MrJ4ckpot

MrJ4ckpot May 27, 2019

Hi guys, the example stopped working with this new library 0.3.0 in my local server. I get a lot of errors on the console about some weird D3D shaders... @joeyklee

This comment has been minimized.

Sign in to view

Copy link
@joeyklee

joeyklee May 27, 2019

Author Contributor

hi @MrJ4ckpot - Thanks for flagging this. Please do the following:

  1. Make sure to hard refresh your browser / clear your cache to make sure your new ml5 version is loaded.
  2. File an issue with the error message, the browser you're using, your OS, etc. so we can debug

Thanks!

This comment has been minimized.

Sign in to view

Copy link
@MrJ4ckpot

MrJ4ckpot May 29, 2019

Hi! Sorry for answering late! Actually i'm running the 2.3 version and it's working fine!
I'm using windows 8.1 version,
Chrome version 74.0.3729.169, running the sketch in local server made with node.js

Here the error log:

C:\fakepath(180,2-134): warning X3550: array reference cannot be used as an l-value; not natively addressable, forcing loop to unroll
C:\fakepath(180,2-134): error X3500: array reference cannot be used as an l-value; not natively addressable
C:\fakepath(159,7-117): error X3511: forced to unroll loop, but unrolling failed.
C:\fakepath(157,7-117): error X3511: forced to unroll loop, but unrolling failed.

Warning: D3D shader compilation failed with default flags. (ps_3_0)
 Retrying with avoid flow control
C:\fakepath(180,2-134): error X3500: array reference cannot be used as an l-value; not natively addressable
C:\fakepath(159,7-117): error X3511: forced to unroll loop, but unrolling failed.
C:\fakepath(157,7-117): error X3511: forced to unroll loop, but unrolling failed.

Warning: D3D shader compilation failed with avoid flow control flags. (ps_3_0)
 Retrying with prefer flow control
C:\fakepath(180,2-134): warning X3550: array reference cannot be used as an l-value; not natively addressable, forcing loop to unroll
C:\fakepath(180,2-134): error X3500: array reference cannot be used as an l-value; not natively addressable
C:\fakepath(159,7-117): error X3511: forced to unroll loop, but unrolling failed.
C:\fakepath(157,7-117): error X3511: forced to unroll loop, but unrolling failed.

Warning: D3D shader compilation failed with prefer flow control flags. (ps_3_0)

Failed to create D3D Shaders

Thank you very much!
</head>

<body>
<h1>Image classification using MobileNet</h1>
<p>The MobileNet model labeled this as <span id="result">...</span> with a confidence of <span id="probability">...</span>.</p>
<img src="images/bird.jpg" id="image" width="400" />
<img src="images/bird.jpg" id="image" width="400" />
<script src="sketch.js"></script>
</body>

Expand Down
2 changes: 1 addition & 1 deletion javascript/ImageClassification_Video/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>Webcam Image Classification using MobileNet</title>


<script src="https://unpkg.com/ml5@0.2.3/dist/ml5.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/ml5@0.3.0/dist/ml5.min.js" type="text/javascript"></script>
</head>

<body>
Expand Down
2 changes: 1 addition & 1 deletion javascript/PoseNet/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title>PoseNet Example</title>

<script src="https://unpkg.com/ml5@0.2.3/dist/ml5.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/ml5@0.3.0/dist/ml5.min.js" type="text/javascript"></script>

</head>

Expand Down
45 changes: 45 additions & 0 deletions javascript/Sentiment/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<html>

<head>
<title>ml5 - Sentiment</title>
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>

<style></style>

</head>

<body>
<h1>Sentiment Analysis Demo
</h1>
<h2>Using a pre-trained model from TensorFlow.js Layers trained on short movie review. <br />
This model is trained to predict the sentiment of a short movie review (as a score between 0 and 1)
</h2>
<h3>
The model is trained using movie reviews that have been truncated to a maximum of 200 words, only the 20000 most used
words in the reviews are used.
</h3>

<p id='status'></p>

<div>
<div class="row">
<p>
<input type="text" style="width: 100%" placeholder="input sentence to analize" id="inputText" />
</p>
<p>
<button id="submit" class="btn btn-primary">predict sentiment</button>
</p>
<p id="sentiment-res">Sentiment score:</p>
</div>
</div>



<script src="sketch.js"></script>

</body>

</html>
8 changes: 4 additions & 4 deletions javascript/StyleTransfer_Image/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Style Transfer Image Example with Promises</title>
<script src="https://unpkg.com/ml5@0.2.3/dist/ml5.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/ml5@0.3.0/dist/ml5.min.js" type="text/javascript"></script>

<style></style>
</head>
Expand All @@ -13,16 +13,16 @@
<h1>Style Transfer Image Example</h1>
<p id="statusMsg">Loading Models...</p>
<p>Input Image:</p>
<img src="img/patagonia.jpg" alt="input img" id="inputImg" />
<img src="img/patagonia.jpg" alt="input img" id="inputImg" />

<div id="styleA">
<p>Style A: <a href="https://en.wikipedia.org/wiki/The_Great_Wave_off_Kanagawa">The Great Wave off Kanagawa, 1829 - Katsushika Hokusai</a></p>
<img src="img/wave.jpg" alt="style one" />
<img src="img/wave.jpg" alt="style one" />
</div>

<div id="styleB">
<p>Style B: <a href="https://en.wikipedia.org/wiki/The_Great_Wave_off_Kanagawa">Udnie (Young American Girl, The Dance), 1913 - Francis Picabia</a></p>
<img src="img/udnie.jpg" alt="style two" />
<img src="img/udnie.jpg" alt="style two" />
</div>

<script src="sketch.js"></script>
Expand Down
17 changes: 17 additions & 0 deletions p5js/CVAE/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<html>
<head>
<meta charset="UTF-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, initial-scale=1" >

<title>CVAE with quick_draw</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
<script src="sketch.js"></script>
</head>

<body>
<h1>Conditional Variational Autoencoder (CVAE) - trained on Google Quick Draw</h1>
</body>
</html>
1 change: 1 addition & 0 deletions p5js/CVAE/model/quick_draw/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"model": "models/model.json", "labels": ["airplane", "alarm_clock", "ambulance", "angel", "ant", "anvil", "apple", "axe", "pickup_truck", "laptop", "leaf", "light_bulb", "lighter", "lightning", "lion", "lipstick", "lobster", "lollipop", "mailbox", "megaphone", "mermaid", "microphone", "microwave", "monkey", "moon", "mosquito", "motorbike", "mountain", "mouse", "mouth", "mug", "mushroom", "nail", "necklace", "ocean", "octopus", "onion", "oven", "owl", "panda", "pants", "paper_clip", "parachute", "ice_cream", "jacket", "jail", "kangaroo", "key", "keyboard", "knife"]}
Binary file added p5js/CVAE/model/quick_draw/models/group1-shard1of1
View file
Binary file not shown.
1 change: 1 addition & 0 deletions p5js/CVAE/model/quick_draw/models/model.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"modelTopology": {"keras_version": "2.2.2", "backend": "tensorflow", "model_config": {"class_name": "Model", "config": {"name": "decoder", "layers": [{"name": "latent_input", "class_name": "InputLayer", "config": {"batch_input_shape": [null, 16], "dtype": "float32", "sparse": false, "name": "latent_input"}, "inbound_nodes": []}, {"name": "label", "class_name": "InputLayer", "config": {"batch_input_shape": [null, 51], "dtype": "float32", "sparse": false, "name": "label"}, "inbound_nodes": []}, {"name": "concatenate_2", "class_name": "Concatenate", "config": {"name": "concatenate_2", "trainable": true, "axis": -1}, "inbound_nodes": [[["latent_input", 0, 0, {}], ["label", 0, 0, {}]]]}, {"name": "dense_5", "class_name": "Dense", "config": {"name": "dense_5", "trainable": true, "units": 784, "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "VarianceScaling", "config": {"scale": 1.0, "mode": "fan_avg", "distribution": "uniform", "seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}, "inbound_nodes": [[["concatenate_2", 0, 0, {}]]]}, {"name": "reshape_2", "class_name": "Reshape", "config": {"name": "reshape_2", "trainable": true, "target_shape": [7, 7, 16]}, "inbound_nodes": [[["dense_5", 0, 0, {}]]]}, {"name": "conv2d_transpose_1", "class_name": "Conv2DTranspose", "config": {"name": "conv2d_transpose_1", "trainable": true, "filters": 32, "kernel_size": [3, 3], "strides": [1, 1], "padding": "same", "data_format": "channels_last", "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "VarianceScaling", "config": {"scale": 1.0, "mode": "fan_avg", "distribution": "uniform", "seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null, "output_padding": null}, "inbound_nodes": [[["reshape_2", 0, 0, {}]]]}, {"name": "up_sampling2d_1", "class_name": "UpSampling2D", "config": {"name": "up_sampling2d_1", "trainable": true, "size": [2, 2], "data_format": "channels_last"}, "inbound_nodes": [[["conv2d_transpose_1", 0, 0, {}]]]}, {"name": "conv2d_transpose_2", "class_name": "Conv2DTranspose", "config": {"name": "conv2d_transpose_2", "trainable": true, "filters": 16, "kernel_size": [3, 3], "strides": [1, 1], "padding": "same", "data_format": "channels_last", "activation": "relu", "use_bias": true, "kernel_initializer": {"class_name": "VarianceScaling", "config": {"scale": 1.0, "mode": "fan_avg", "distribution": "uniform", "seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null, "output_padding": null}, "inbound_nodes": [[["up_sampling2d_1", 0, 0, {}]]]}, {"name": "up_sampling2d_2", "class_name": "UpSampling2D", "config": {"name": "up_sampling2d_2", "trainable": true, "size": [2, 2], "data_format": "channels_last"}, "inbound_nodes": [[["conv2d_transpose_2", 0, 0, {}]]]}, {"name": "conv2d_transpose_3", "class_name": "Conv2DTranspose", "config": {"name": "conv2d_transpose_3", "trainable": true, "filters": 1, "kernel_size": [3, 3], "strides": [1, 1], "padding": "same", "data_format": "channels_last", "activation": "sigmoid", "use_bias": true, "kernel_initializer": {"class_name": "VarianceScaling", "config": {"scale": 1.0, "mode": "fan_avg", "distribution": "uniform", "seed": null}}, "bias_initializer": {"class_name": "Zeros", "config": {}}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null, "output_padding": null}, "inbound_nodes": [[["up_sampling2d_2", 0, 0, {}]]]}], "input_layers": [["latent_input", 0, 0], ["label", 0, 0]], "output_layers": [["conv2d_transpose_3", 0, 0]]}}}, "weightsManifest": [{"paths": ["group1-shard1of1"], "weights": [{"name": "conv2d_transpose_1/kernel", "shape": [3, 3, 32, 16], "dtype": "float32"}, {"name": "conv2d_transpose_1/bias", "shape": [32], "dtype": "float32"}, {"name": "conv2d_transpose_2/kernel", "shape": [3, 3, 16, 32], "dtype": "float32"}, {"name": "conv2d_transpose_2/bias", "shape": [16], "dtype": "float32"}, {"name": "conv2d_transpose_3/kernel", "shape": [3, 3, 1, 16], "dtype": "float32"}, {"name": "conv2d_transpose_3/bias", "shape": [1], "dtype": "float32"}, {"name": "dense_5/kernel", "shape": [67, 784], "dtype": "float32"}, {"name": "dense_5/bias", "shape": [784], "dtype": "float32"}]}]}
44 changes: 44 additions & 0 deletions p5js/CVAE/sketch.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// Copyright (c) 2018 ml5
//
// This software is released under the MIT License.
// https://opensource.org/licenses/MIT

/* ===
ml5 Example
CVAE example using p5.js
=== */
let cvae;
let button;
let dropdown;

// function preload() {
// cvae = ml5.CVAE('model/quick_draw/manifest.json');
// }

function setup() {
createCanvas(200, 200);
// Create a new instance with pretrained model
cvae = ml5.CVAE('model/quick_draw/manifest.json', modelReady);

// Create a generate button
button = createButton('generate');
button.mousePressed(generateImage);
background(0);
}

function gotImage(error, result) {
image(result.image, 0, 0, width, height);
}

function modelReady() {
// Create dropdown with all possible labels
dropdown = createSelect();
for (let label of cvae.labels) {
dropdown.option(label);
}
}

function generateImage() {
let label = dropdown.value();
cvae.generate(label, gotImage);
}
10 changes: 5 additions & 5 deletions p5js/CharRNN/CharRNN_Interactive/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<meta charset="UTF-8">
<title>Interactive CharRNN Text Generation Example using p5.js</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@0.2.3/dist/ml5.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@0.3.0/dist/ml5.min.js" type="text/javascript"></script>

<style></style>
</head>
Expand All @@ -18,9 +18,9 @@ <h1>Interactive CharRNN Text Generation Example using p5.js</h1>
<h2>This example uses a pre-trained model on a corpus of <a href="https://en.wikipedia.org/wiki/Virginia_Woolf">Virginia Woolf</a></h2>
<textarea id="textInput" style="width: 300px; height: 50px;" placeholder="type here"></textarea>
<br /> length:
<input id="lenSlider" type="range" min="1" max="100" value="20" /> <span id="length">20</span>
<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" 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>
Expand Down
12 changes: 6 additions & 6 deletions p5js/CharRNN/CharRNN_Text/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@
<meta charset="UTF-8">
<title>LSTM Text Generation Example</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@0.2.3/dist/ml5.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@0.3.0/dist/ml5.min.js" type="text/javascript"></script>

</head>

<body>
<h1>LSTM Text Generation Example</h1>
<h2>This example uses a pre-trained model on a corpus of <a href="https://en.wikipedia.org/wiki/Virginia_Woolf">Virginia Woolf</a></h2>
<p>seed text:
<input id="textInput" value="The meaning of life is" />
<input id="textInput" value="The meaning of life is" />
</p>
<p>length:
<input id="lenSlider" type="range" min="10" max="500" value="100" /> <span id="length">100</span></p>
<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" 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>
Expand Down
10 changes: 5 additions & 5 deletions p5js/CharRNN/CharRNN_Text_Stateful/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<meta charset="UTF-8">
<title>Stateful CharRNN Text Generation Example using p5.js</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@0.2.3/dist/ml5.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@0.3.0/dist/ml5.min.js" type="text/javascript"></script>


<style></style>
Expand All @@ -18,10 +18,10 @@ <h1>Stateful CharRNN Text Generation Example using p5.js</h1>
<p>Instead of feeding every single character every frame to predict the next character, we feed only the last character, and instruct the CharRNN to remember its internal state.</p>
<p>This example uses a pre-trained model on a corpus of <a href="https://en.wikipedia.org/wiki/Virginia_Woolf">Virginia Woolf</a></p>
<p>seed text:
<input id="textInput" value="The sky was blue and " />
<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" 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>
Expand Down
20 changes: 20 additions & 0 deletions p5js/DCGAN/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>DCGAN Example</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>

<script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
<script src="sketch.js"></script>
</head>

<body>
<h1>DCGAN Example</h1>
</body>

</html>
Binary file added p5js/DCGAN/model/group1-shard1of4
View file
Binary file not shown.
Binary file added p5js/DCGAN/model/group1-shard2of4
View file
Binary file not shown.
Binary file added p5js/DCGAN/model/group1-shard3of4
View file
Binary file not shown.
Binary file added p5js/DCGAN/model/group1-shard4of4
View file
Binary file not shown.
Loading

0 comments on commit 5b41f70

Please sign in to comment.