I'm using the browser version of TensorFlow, and once a user visits my page, I feed TensorFlow datasets and it starts training... for a long time. I would think the user would get impatient waiting, or may think that the website is broken and will just leave the page.
Is there any way to find the training progress of TensorFlowJS and update the user firsthand so they'll know it's working (e.g. with a progress bar), or is there any other way to improve it?
const kgToLbs = kg => kg * 2.2;
const xs = tf.tensor(Array.from({ length: 2000 }, (x, i) => i));
const ys = tf.tensor(Array.from({ length: 2000 }, (x, i) => kgToLbs(i)));
const model = tf.sequential();
model.add(tf.layers.dense({ units: 1, inputShape: 1 }));
model.compile({
loss: "meanSquaredError",
optimizer: "adam"
});
(async () => {
await model.fit(xs, ys, {
epochs: 100,
shuffle: true
});
document.getElementById("pw").remove();
const kg = document.getElementById("kg");
kg.removeAttribute("disabled");
const result = document.getElementById("pounds");
kg.onchange = () => {
result.innerText = model
.predict(tf.tensor([parseInt(kg.value)]))
.asScalar()
.dataSync();
};
})();body, html {
margin: 50px 10%;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<h1>
Tensorflow - Convert KG to Pounds
</h1>
<p id="pw">
Please wait while model is trained...
</p>
<input type="text" id="kg" class="form-control" placeholder="Enter kilograms..." disabled />
<p>
<b>Converted to pounds:</b> <span id="pounds"></span>
</p>Notice that model.fit has a callbacks option for this purpose. https://js.tensorflow.org/api/latest/#tf.Sequential.fit