JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<!--
Copyright (c) 2018 ml5
This software is released under the MIT License.
https://opensource.org/licenses/MIT
-->
<html>
<head>
<meta charset="UTF-8">
<title>Image Regression using Feature Extraction with MobileNet. Built with p5.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@0.1.1/dist/ml5.min.js" type="text/javascript"></script>
<style>
</style>
</head>
<body
style="text-align: center;"
>
<h6 style="visibility: hidden"><span id="modelStatus">Loading base model...</span> | <span id="videoStatus">Loading video...</span></h6>
<div style="display: flex; align-items: center; justify-content: center;">
<p>
<input type="range" name="slider" id="slider" min="0.01" max="1.0" step="0.01" value="0.5">
</p>
<br>
<p>
<button id="addSample">Add Sample</button>
<p><span id="amountOfSamples">0</span> Sample Images</p>
</p>
<br/>
<p><button id="train">Train</button><span id="loss"></span></p>
<br/>
<p>
<button id="buttonPredict">Start predicting!</button><br>
</p>
</div>
<div id="videoContainer"></div>
<div id="canvasContainer"></div>
<div id="font-container" >Can you read this?</div>
</body>
</html>
button {
margin: 2px;
padding: 4px;
}
video{
width: 300;
height: 300;
}
p{
display: inline;
font-size: 14px;
}
h6{
margin: 4px;
font-weight: lighter;
font-size: 14px;
margin-bottom: 10px;
}
#font-container {
transition: .25s all ease-in-out;
}
@font-face {
font-family: 'Avenir Next Variable';
src: url('https://s3.amazonaws.com/codepen-mh/assets/fonts/AvenirNext_Variable.ttf')
format('truetype');
}
@font-face {
font-family: 'Amstelvar-Roman';
src: url('https://s3.amazonaws.com/codepen-mh/assets/fonts/Amstelvar-Roman-parametric-VF.ttf')
format('truetype');
}
@font-face {
font-family: 'Decovar Alpha';
src: url('https://s3.amazonaws.com/codepen-mh/assets/fonts/DecovarAlpha-VF.ttf')
format('truetype');
}
body {
font-family: 'Avenir Next Variable';
}
// Copyright (c) 2018 ml5
//
// This software is released under the MIT License.
// https://opensource.org/licenses/MIT
/* ===
ml5 Example
Creating a regression extracting features of MobileNet. Build with p5js.
=== */
let featureExtractor;
let regressor;
let video;
let loss;
let slider;
let samples = 0;
let fontSize = 10;
let fontWidth = 100;
let lastResult = .5;
let resultThreshold = .25;
function setup() {
var canvas = createCanvas(340, 280);
canvas.parent('canvasContainer');
// Create a video element
video = createCapture(VIDEO);
// Append it to the videoContainer DOM element
video.hide();
// Extract the features from MobileNet
featureExtractor = ml5.featureExtractor('MobileNet', modelReady);
// Create a new regressor using those features and give the video we want to use
regressor = featureExtractor.regression(video, videoReady);
// Create the UI buttons
setupButtons();
}
function draw() {
image(video, 0, 0, 340, 280);
select('#font-container').style('font-size',`${fontSize}px`);
//select('#font-container').style('font-variation-settings', `'SKLA' ${fontWidth}`);
select('#font-container').style('font-variation-settings', `'wght' ${fontWidth}`);
}
// A function to be called when the model has been loaded
function modelReady() {
select('#modelStatus').html('Model loaded!');
}
// A function to be called when the video has loaded
function videoReady() {
select('#videoStatus').html('Video ready!');
}
// Classify the current frame.
function predict() {
regressor.predict(gotResults);
}
// A util function to create UI buttons
function setupButtons() {
slider = select('#slider');
select('#addSample').mousePressed(function() {
regressor.addImage(slider.value());
select('#amountOfSamples').html(samples++);
});
// Train Button
select('#train').mousePressed(function() {
regressor.train(function(lossValue) {
if (lossValue) {
loss = lossValue;
select('#loss').html('Loss: ' + loss);
} else {
select('#loss').html('Done Training! Final Loss: ' + loss);
}
});
});
// Predict Button
select('#buttonPredict').mousePressed(predict);
}
// Show the results
function gotResults(err, result) {
console.log(result);
if (Math.abs(result-lastResult) > resultThreshold){
fontWidth = map(result, 0, 1, 0, 1000);
fontSize = map(result, 0, 1, 10, 100);
slider.value(result);
lastResult = result;
}
if (err) {
console.error(err);
}
predict();
}
Also see: Tab Triggers