This example (inspired by TensorFlow.js tutorials https://www.tensorflow.org/js/tutorials) will demonstrate a simple linear model with using a single image and. It included flowing steps:
Create html and js
files.
Load the image.
Define the model.
Train the model and
making some predictions.
This model permits just to invert the image. It works with a recent version of Chrome or another modern browser (not checked). It is recommended to run Chrome with "--allow-file-access-from-files" key to enable loading local file images.
Copy the following
code into an html file and open it with Chrome. Use "Development tool"
in option menu for debugging.
<!DOCTYPE html>
<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.0">
<title>TensorFlow.js Example1</title>
<!-- Import TensorFlow.js -->
<script
src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
<!-- Import tfjs-vis -->
<script
src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.0.2/dist/tfjs-vis.umd.min.js"></script>
<!-- Import the main script file -->
<script
src="TF.js"></script>
</head>
</html>
Copy the following code into an TF.js file. Copy "LenaSmall.jpg" image(above) in the same folder. The code is executed in following way
Start() function load image. When the image is fully loaded, Run() function executes all other.
Run() calls GetModel()
to define the model architecture.
Run() calls
TrainAndPredict() function which do training and do prediction, by using
original image.
async function
OnLoadImage(Event)
{
await Run(Event.srcElement);
}
async function
Start()
{
var Img = document.createElement("img");
Img.src="LenaSmall.jpg";
Img.addEventListener("load",
OnLoadImage); // allow to know that image
//
is ready
document.body.appendChild(Img);
}
document.addEventListener("DOMContentLoaded", Start);
async function
Run(Img)
{
var Model = GetModel();
tfvis.show.modelSummary({name: "Architecture",
tab: "Model"}, Model);
//
show model in Right panel
await TrainAndPredict(Model, Img);
}
function GetModel()
{
var Model = tf.sequential(); // simplest
model
var Flat =
tf.layers.reshape({inputShape: [,3], targetShape:[,1]});
// convert RGB image to 1-dimentional
//array, as colors are processed in same
// way
Model.add(Flat);
var Layer = tf.layers.dense({units: 1});
// linear layer y=ax+b
Model.add(Layer);
Flat = tf.layers.reshape({targetShape:[,3]}); // back to RGB
Model.add(Flat);
return Model;
}
async function
TrainAndPredict(Model, Img)
{
var Scale = 255;
var From =
tf.browser.fromPixels(Img).div(Scale),To; // take image from
// HTML and scale to 0-1
To = From.mul(-1).add(1); //
Create target To=1-From
ShowInVisor(From); //
Show in right panel
ShowInVisor(To);
var Iterations = 50, Rate = 0.03;
await Model.compile //
Prepare(compile) model
({
optimizer: tf.train.adam (Rate),
loss: tf.losses.meanSquaredError,
metrics: ["mse"],
});
await Model.fit(From, To, //
Do traing, to define a,b
{
epochs : Iterations,
callbacks: tfvis.show.fitCallbacks(
{ name: "Training
Performance" },
["mse"],
{ height: 200, callbacks: ["onEpochEnd"] }
)
});
var Res = Model.predict(From); // Do predict with From
// image
ShowInVisor(Res);
}
async function
ShowInVisor(Img) // Helper
to display images
{
Img=tf.maximum(Img,0); //
Image are float
Img=tf.minimum(Img,1);
var Surface = tfvis.visor().surface({ name: "Images", tab: "Datas"});
var Canvas = document.createElement("canvas");
tf.browser.toPixels(Img, Canvas);
Surface.drawArea.appendChild(Canvas);
tfvis.visor().setActiveTab("Datas");
}
Комментариев нет:
Отправить комментарий