Skip to content

Instantly share code, notes, and snippets.

@yohm

yohm/index.html

Created July 26, 2018 12:54
Show Gist options
  • Save yohm/2af3adf678ba35c616793f3d94be4bbb to your computer and use it in GitHub Desktop.
Save yohm/2af3adf678ba35c616793f3d94be4bbb to your computer and use it in GitHub Desktop.
Download ZIP
Kerasの学習結果をchart.jsでインタラクティブに表示する
Raw
index.html
<html>
<head>
</head>
<body>
<div class="slidecontainer" id="sliders">
X軸 :
<select name="myRange" id="myRange">
<option value="0"> X0</option>
<option value="1"> X1</option>
<option value="2"> X2</option>
<option value="3"> X3</option>
<option value="4"> X4</option>
<option value="5"> X5</option>
<option value="6"> X6</option>
<option value="7"> X7</option>
<option value="8"> X8</option>
<option value="9"> X9</option>
<option value="10">X10</option>
<option value="11">X11</option>
<option value="12">X12</option>
</select><br/>
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x0">X0 :<span id="val_x0"></span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x1">X1 :<span id="val_x1"></span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x2">X2 :<span id="val_x2"></span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x3">X3 :<span id="val_x3"></span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x4">X4 :<span id="val_x4"></span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x5">X5 :<span id="val_x5"></span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x6">X6 :<span id="val_x6"></span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x7">X7 :<span id="val_x7"></span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x8">X8 :<span id="val_x8"></span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x9">X9 :<span id="val_x9"></span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x10">X10 :<span id="val_x10"></span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x11">X11 :<span id="val_x11"></span><br />
<input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="x12">X12 :<span id="val_x12"></span><br />
</div>
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="myChart"></canvas>
</div>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
var ctx = document.getElementById("myChart").getContext('2d');
window.chart = null;
async function start(index) {
const model = await tf.loadModel('converted/model.json');
let x_base = [0,0,0,0,0,0,0,0,0,0,0,0,0];
for(let i=0; i<13; i++) {
let slider = document.getElementById("x"+i);
x_base[i] = Number(slider.value);
document.getElementById("val_x"+i).textContent = x_base[i];
if(i==index) { slider.setAttribute("disabled", true); }
else { slider.removeAttribute("disabled"); }
}
let xs = [];
for(let i=-10; i<11; i++) {
x_base[index] = i*0.1;
xs.push(x_base.concat()); // copy
}
const xt = tf.tensor(xs);
xt.print();
const predicted = model.predict(xt)
predicted.print();
let cfg = {
type: "line",
data: {
labels: [],
datasets: [{
label: "predicted",
data: [],
}]
},
options: {
animation: false,
scales: {
xAxes: [{
display: true,
scaleLabel: {display: true, labelString: "X"}
}],
yAxes: [{
ticks: {min: 15, max: 50}
}]
}
}
}
for(let i=0; i<xt.shape[0]; i++) {
let x = xs[i][index].toFixed(1);
let y = predicted.get(i,0);
cfg.data.labels.push(x);
cfg.data.datasets[0].data.push(y);
cfg.options.scales.xAxes[0].scaleLabel.labelString = "X" + index;
}
if( !window.chart ) {
window.chart = new Chart(ctx, cfg);
} else {
window.chart.data = cfg.data;
window.chart.options = cfg.options;
window.chart.update();
}
}
start(0);
var sliders = document.getElementById("sliders");
sliders.addEventListener("input", function() {
start(Number(document.getElementById("myRange").value));
}, false);
</script>
</body>
</html>
Raw
reg.py
import numpy as np
from keras.datasets import boston_housing
from keras.models import Sequential
from keras.layers import Dense
from keras.layers import BatchNormalization
from keras.optimizers import Adam
(x_train, y_train), (x_test, y_test) = boston_housing.load_data(test_split=0.0)
def scale_input(data):
from sklearn.preprocessing import StandardScaler
scaler = StandardScaler()
return scaler.fit_transform(data)
x_train = scale_input(x_train)
def create_model():
model = Sequential()
model.add
model.add(Dense(13, input_dim=13, kernel_initializer='normal', activation='tanh'))
#model.add(Dense(13, kernel_initializer='normal', activation='tanh'))
model.add(Dense(1, kernel_initializer='normal'))
model.compile(loss='mean_squared_error', optimizer='adam')
return model
m = create_model()
h = m.fit(x_train, y_train, batch_size=50, epochs=1000, verbose=1, validation_split=0.2)
print( x_train[:10] )
print( m.predict(x_train)[:10], y_train[:10] )
def test():
x_test = np.array( [[1.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]])
print( m.predict(x_test))
test()
m.save('my_model.h5')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment