Skip to content

Commit 6d18647

Browse files
tafsiritafsiri
authored
Update UI of more examples (#184)
- lstm-text-gen - mnist-core - mnist-cnn-transfer-learning - mobilenet
1 parent af3f761 commit 6d18647

File tree

17 files changed

+1567
-425
lines changed

17 files changed

+1567
-425
lines changed

‎lstm-text-generation/index.html

+113-89
Original file line numberDiff line numberDiff line change
@@ -16,141 +16,165 @@
1616
-->
1717

1818
<!doctype html>
19+
1920
<head>
20-
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-teal.min.css" />
21+
<meta charset="UTF-8">
22+
<meta name="viewport" content="width=device-width, initial-scale=1">
23+
<link rel="stylesheet" href="../shared/tfjs-examples.css" />
2124
</head>
2225

2326
<style>
24-
body {
25-
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
26-
margin-top: 50px;
27-
margin-left: 50px;
28-
width: 80%;
29-
}
30-
.canvases {
31-
display: inline-block;
32-
}
3327
.monospace {
3428
font-family: monospace;
3529
}
30+
3631
.input-title {
3732
display: inline-block;
38-
width: 20em;
39-
}
40-
.vertical-sections {
41-
border: 1px solid #AAA;
42-
padding: 6px;
43-
margin: 6px;
44-
}
45-
.horizontal-sections {
46-
display: inline-block;
47-
padding-right: 20px;
48-
vertical-align: top;
49-
}
50-
#app-status {
51-
color: blue;
52-
font-size: 150%;
53-
padding-bottom: 1em;
33+
width: 12em;
5434
}
35+
5536
select {
5637
font-size: 14pt;
5738
}
39+
5840
button {
59-
font-size: 14pt;
6041
margin: 3px;
6142
}
43+
6244
input:disabled {
6345
background: #eeeeee;
6446
}
47+
6548
textarea {
66-
width:98%;
49+
width: 98%;
6750
}
6851
</style>
6952

70-
<body>
71-
<h1>TensorFlow.js Example:<br/>Train LSTM to Generate Text</h1>
72-
<div>
73-
<div id="app-status" class="vertical-sections">
74-
<span>Please select a text data source or enter your custom text in the text box below and click "load text data" first</span>
53+
<body class='tfjs-example-container'>
54+
55+
<section class='title-area'>
56+
<h1>TensorFlow.js Text Generation:</h1>
57+
<p class='subtitle'>Train a LSTM (Long Short Term Memory) model to generate text</p>
58+
</section>
59+
60+
<section>
61+
<p class='section-head'>Description</p>
62+
<p>
63+
This example allows you to train a model to generate text in the style of some existing source text.
64+
The model is designed to predict the <em>next character</em> in a text given some preceding string of characters.
65+
Doing this repetedly builds up a text, charachter by character.
66+
</p>
67+
</section>
68+
69+
<section>
70+
<p class='section-head'>Status</p>
71+
<div id="app-status">
72+
Please select a text data source or enter your custom text in the text box below and click <em>"Load source data"</em>.
73+
</div>
74+
</section>
75+
76+
<section>
77+
<p class='section-head'>Source Data</p>
78+
<select id="text-data-select"></select>
79+
<button id="load-text-data">Load source data</button>
80+
<div>
81+
<textarea class="monospace" id="test-text" value="" rows="10"></textarea>
7582
</div>
83+
</section>
84+
85+
<section>
86+
<p class='section-head'>Model Loading/Creation</p>
87+
<div>
88+
<p>
89+
<em>
90+
Model saved in IndexedDB:
91+
<span id="model-available">Load text data first.</span>
92+
</em>
93+
</p>
7694

77-
<div class="vertical-sections">
78-
<select id="text-data-select"></select>
79-
<button id="load-text-data">Load text data</button>
8095
<div>
81-
<textarea class="monospace" id="test-text" value="" rows="10"></textarea>
96+
<span class="input-title">LSTM layer size(s) (e.g., 128 or 100,50):</span>
97+
<input id="lstm-layer-sizes" value="128"></input>
98+
99+
<button id="create-or-load-model" disabled="true">Create or load model</button>
100+
<button id="delete-model" disabled="true">Delete existing model</button>
82101
</div>
83102
</div>
103+
</section>
84104

85-
<div class="vertical-sections">
86-
<div class="monospace">
87-
<span class="input-title">Model saved in IndexedDB:</span>
88-
<input class="monospace" id="model-available" readonly="true" size="60" value="(Load text data first.)"></input>
89-
</div>
90-
<div class="horizontal-sections">
91-
<div class="monospace">
92-
<span class="input-title">LSTM layer size(s)<br/>(e.g., 128 or 100,50):</span>
93-
<input class="monospace" id="lstm-layer-sizes" value="128"></input>
94-
</div>
105+
<section>
106+
<p class='section-head'>Model Training</p>
107+
<p>
108+
It can take a while to generate an effective model. Try increasing the number of <em>epochs</em> to improve the
109+
results, we have found that about <strong>50-100 epochs</strong> are needed to start generating reasonable
110+
text.
111+
</p>
112+
<div class="with-cols">
113+
<div>
95114
<div>
96-
<button id="create-or-load-model" disabled="true">Create or load model</button>
97-
<button id="delete-model" disabled="true">Delete existing model</button>
115+
<span class="input-title">Number of Epochs:</span>
116+
<input id="epochs" value="5"></input>
98117
</div>
99-
</div>
100-
101-
<div class="horizontal-sections">
102-
<div class="monospace">
118+
<div>
103119
<span class="input-title">Examples per epoch:</span>
104-
<input class="monospace" id="examples-per-epoch" value="2048"></input>
120+
<input id="examples-per-epoch" value="2048"></input>
105121
</div>
106-
<div class="monospace">
122+
<div>
107123
<span class="input-title">Batch size:</span>
108-
<input class="monospace" id="batch-size" value="128"></input>
109-
</div>
110-
<div class="monospace">
111-
<span class="input-title">Epochs:</span>
112-
<input class="monospace" id="epochs" value="5"></input>
124+
<input id="batch-size" value="128"></input>
113125
</div>
114-
<div class="monospace">
126+
<div>
115127
<span class="input-title">Validation spilt:</span>
116-
<input class="monospace" id="validation-split" value="0.0625"></input>
128+
<input id="validation-split" value="0.0625"></input>
117129
</div>
118-
<div class="monospace">
130+
<div>
119131
<span class="input-title">Learning rate:</span>
120-
<input class="monospace" id="learning-rate" value="1e-2"></input>
132+
<input id="learning-rate" value="1e-2"></input>
121133
</div>
122134
<div>
123135
<button id="train-model" disabled="true">Train model</button>
124136
</div>
125-
<div class="horizontal-sections">
126-
<div class="canvases" id="loss-canvas"></div>
127-
</div>
128137
</div>
138+
<div class="canvases" id="batch-loss-canvas"></div>
139+
<div class="canvases" id="epoch-loss-canvas"></div>
129140
</div>
141+
</section>
130142

131-
<div class="vertical-sections">
132-
<div class="monospace">
133-
<span class="input-title">Generation length:</span>
134-
<input class="monospace" id="generate-length" value="200"></input>
135-
</div>
136-
<div class="monospace">
137-
<span class="input-title">Generation temperature:</span>
138-
<input class="monospace" id="temperature" value="0.75"></input>
139-
</div>
140-
<div>
141-
<button id="generate-text" disabled="true">Generate text</button>
142-
<span id="text-generation-status"></span>
143-
</div>
144-
<div>
145-
<span class="input-title">Seed text:</span>
146-
<textarea class="monospace" id="seed-text" value="" rows="4"></textarea>
147-
</div>
148-
<div>
149-
<span class="input-title">Generated text:</span>
150-
<textarea class="monospace" id="generated-text" readonly="true" value="" rows="10"></textarea>
151-
</div>
143+
<section>
144+
<p class='section-head'>Text Generation Parameters</p>
145+
<p>
146+
To generate text the model needs to have some number of preceding characters from which it continues,
147+
we call these characters the <em>seed text</em>. You can type one in, or we will extract a random substring from
148+
the input text to be the seed text. Note that the seed text must be at least 40 charachters long.
149+
</p>
150+
<div>
151+
<span class="input-title">Length of generated text:</span>
152+
<input id="generate-length" value="200"></input>
153+
</div>
154+
155+
<div>
156+
<span class="input-title">Generation temperature:</span>
157+
<input id="temperature" value="0.75"></input>
158+
</div>
159+
160+
<div>
161+
<button id="generate-text" disabled="true">Generate text</button>
162+
<span id="text-generation-status"></span>
152163
</div>
153-
</div>
164+
165+
<div>
166+
<span class="input-title">Seed text:</span>
167+
<textarea class="monospace" id="seed-text" value="" rows="4"></textarea>
168+
</div>
169+
170+
<p class='section-head'>Model Output</p>
171+
172+
<div>
173+
<span class="input-title">Generated text:</span>
174+
<textarea class="monospace" id="generated-text" readonly="true" value="" rows="10"></textarea>
175+
</div>
176+
177+
</section>
154178

155179
</body>
156180

‎lstm-text-generation/index.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -122,11 +122,10 @@ export class LSTMTextGenerator {
122122
const t1 = new Date().getTime();
123123
const examplesPerSec = batchSize / ((t1 - t) / 1e3);
124124
t = t1;
125-
onTrainBatchEnd(
126-
logs.loss, ++batchCount / totalBatches, examplesPerSec);
125+
onTrainBatchEnd(logs, ++batchCount / totalBatches, examplesPerSec);
127126
},
128127
onEpochEnd: async (epoch, logs) => {
129-
onTrainEpochEnd(logs.val_loss);
128+
onTrainEpochEnd(logs);
130129
},
131130
}
132131
});

‎lstm-text-generation/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@tensorflow/tfjs": "^0.13.3",
13-
"vega-embed": "^3.0.0"
13+
"@tensorflow/tfjs-vis": "^0.3.0"
1414
},
1515
"scripts": {
1616
"watch": "cross-env NODE_ENV=development parcel index.html --no-hmr --open",

0 commit comments

Comments
 (0)