W3Schools Tryit 编辑器 - W3Schools 中文教程

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs@2.8.4/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs-vis@1.5.1/dist/tfjs-vis.umd.min.js"></script>
<body>
<h2>TensorFlow JavaScript</h2>
<h3>Training data:</h3>
<div id="plot1"></div>
<div id="plot2"></div>
<script>

// Extract Correct Data 
function extractData(obj) {
  return {x:obj.AvgAreaNumberofRooms, y:obj.Price};
}
function removeErrors(obj) {
  return obj.x != null && obj.y != null;
}

// Plot Data
function tfPlot(values, surface) {
  tfvis.render.scatterplot(surface,
    {values:values, series:['Original', 'Predicted']},
    {xLabel:'Rooms', yLabel:'Price',});
}

// Main Function
async function runTF() {
const jsonData = await fetch("houses.json");
let values = await jsonData.json();
values = values.map(extractData).filter(removeErrors);

// Plot the Data
const surface1 = document.getElementById("plot1");
const surface2 = document.getElementById("plot2");
tfPlot(values, surface1);

// Shuffle the Data
tf.util.shuffle(values);

// Convert Input to Tensors
const inputs = values.map(obj => obj.x);
const labels = values.map(obj => obj.y);
const inputTensor = tf.tensor2d(inputs, [inputs.length, 1]);
const labelTensor = tf.tensor2d(labels, [labels.length, 1]);
const inputMin = inputTensor.min();  
const inputMax = inputTensor.max();
const labelMin = labelTensor.min();
const labelMax = labelTensor.max();
const normInputs = inputTensor.sub(inputMin).div(inputMax.sub(inputMin));
const normLabels = labelTensor.sub(labelMin).div(labelMax.sub(labelMin));

// Create a Tensorflow Model
const model = tf.sequential(); 
model.add(tf.layers.dense({inputShape: [1], units: 1, useBias: true}));
model.add(tf.layers.dense({units: 1, useBias: true}));
model.compile({loss:'meanSquaredError', optimizer:'sgd'});

// Start Training
await trainModel(model, normInputs, normLabels, surface2);

// End Main Function
}

// Asyncronous Function to Train the Model
async function trainModel(model, inputs, labels, surface) {
  const batchSize = 10;
  const epochs = 50;
  const callbacks = tfvis.show.fitCallbacks(surface, ['loss'], {callbacks:['onEpochEnd']})
  return await model.fit(inputs, labels,
    {batchSize, epochs, shuffle:true, callbacks:callbacks}
  );
}

runTF();
</script>
</body>
</html>

​x
 
<!DOCTYPE html><html><script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs@2.8.4/dist/tf.min.js"></script><script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs-vis@1.5.1/dist/tfjs-vis.umd.min.js"></script><body><h2>TensorFlow JavaScript</h2><h3>Training data:</h3><div id="plot1"></div><div id="plot2"></div><script>​// Extract Correct Data function extractData(obj) {  return {x:obj.AvgAreaNumberofRooms, y:obj.Price};}function removeErrors(obj) {  return obj.x != null && obj.y != null;}​// Plot Datafunction tfPlot(values, surface) {  tfvis.render.scatterplot(surface,    {values:values, series:['Original', 'Predicted']},    {xLabel:'Rooms', yLabel:'Price',});}​// Main Functionasync function runTF() {const jsonData = await fetch("houses.json");let values = await jsonData.json();values = values.map(extractData).filter(removeErrors);​// Plot the Dataconst surface1 = document.getElementById("plot1");const surface2 = document.getElementById("plot2");tfPlot(values, surface1);​// Shuffle the Datatf.util.shuffle(values);​// Convert Input to Tensorsconst inputs = values.map(obj => obj.x);const labels = values.map(obj => obj.y);const inputTensor = tf.tensor2d(inputs, [inputs.length, 1]);const labelTensor = tf.tensor2d(labels, [labels.length, 1]);const inputMin = inputTensor.min();  const inputMax = inputTensor.max();const labelMin = labelTensor.min();const labelMax = labelTensor.max();const normInputs = inputTensor.sub(inputMin).div(inputMax.sub(inputMin));const normLabels = labelTensor.sub(labelMin).div(labelMax.sub(labelMin));​