Skip to content

Commit 66e2a89

Browse files
ahmedsabiepyu10055
ahmedsabie
and
pyu10055
authored
Add tfdf-adult-gbt demo (#911)
* Add tfdf-adult-gbt demo * Rename file * Add live demo link Co-authored-by: Ping Yu <[email protected]>
1 parent 6c98a20 commit 66e2a89

File tree

2 files changed

+235
-0
lines changed

2 files changed

+235
-0
lines changed

‎tfdf-adult-gbt/README.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Tensorflow Decision Forests Adult GBT Demo
2+
3+
[See this example live!](https://storage.googleapis.com/tfjs-examples/tfdf-adult-gbt/index.html)
4+
5+
## Contents
6+
7+
The demo shows how to use the Tensorflow.JS decision forests package
8+
to run a convereted model.
9+
10+
## Converting Model
11+
1. Create a [Python TensorFlow Decision Forests model](https://www.tensorflow.org/decision_forests).
12+
13+
2. Save the model (will be exported as a SavedModel).
14+
15+
3. Run the model through the [tensorflowjs_converter](https://www.tensorflow.org/js/guide/conversion).
16+
```sh
17+
$ tensorflowjs_converter /path/to/saved_model /path/to/tfjs_model
18+
```
19+
20+
4. Use the [tfjs-tfdf library](https://github.com/tensorflow/tfjs/tree/master/tfjs-tfdf) to run the converted model in the web.
21+
22+
## Demo
23+
24+
The demo in the index.html file is based on the [Javascript library](https://achoum.github.io/yggdrasil_decision_forests_js_example/example.html) and shows the same model predicting the probability a person has income >= $50,000, but using the converted TensorFlow.JS model.

‎tfdf-adult-gbt/index.html

+211
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<!-- Copyright 2022 Google LLC. All Rights Reserved.
2+
Licensed under the Apache License, Version 2.0 (the "License");
3+
you may not use this file except in compliance with the License.
4+
You may obtain a copy of the License at
5+
http://www.apache.org/licenses/LICENSE-2.0
6+
Unless required by applicable law or agreed to in writing, software
7+
distributed under the License is distributed on an "AS IS" BASIS,
8+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9+
See the License for the specific language governing permissions and
10+
limitations under the License.
11+
============================================================================== -->
12+
<!DOCTYPE html>
13+
<html>
14+
15+
<head>
16+
<meta charset="UTF-8" />
17+
<title>Yggdrasil Decision Forests in TensorFlow.JS</title>
18+
19+
<!-- Import @tensorflow/tfjs-core -->
20+
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
21+
<!-- Adds the CPU backend -->
22+
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-cpu"></script>
23+
<!-- Import @tensorflow/tfjs-converter -->
24+
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
25+
<!-- Import @tensorflow/tfjs-tfdf
26+
27+
Note that we need to explicitly load dist/tf-tfdf.min.js so that it can
28+
locate WASM module files from their default location (dist/). -->
29+
<!-- TODO: Switch to CDN when package is released. -->
30+
<script src="https://storage.googleapis.com/tfjs-testing/tfjs-tfdf/tf-tfdf.min.js"></script>
31+
32+
<style>
33+
.button_box {
34+
display: flex;
35+
justify-content: space-around;
36+
}
37+
38+
.button_box button {
39+
width: 100%;
40+
margin: 5px;
41+
}
42+
</style>
43+
</head>
44+
45+
<body>
46+
<h1>Yggdrasil Decision Forests in tensorFlow.JS</h1>
47+
48+
<p>
49+
This example demonstrates how to use run TensorFlow Decision Forest models convereted to TensorFlow.JS model.
50+
</p>
51+
52+
<p>
53+
<label for="examples">Input examples:</label><br />
54+
<textarea id="examples" name="examples" style="border: 1px solid black; width: 100%" rows="15">
55+
{
56+
'age': tf.tensor1d([
57+
58+
39, 40, 40, 35
59+
60+
], 'int32'),
61+
62+
'workclass': tf.tensor1d([
63+
64+
'State-gov', 'Private', 'Private', 'Federal-gov'
65+
66+
], 'string'),
67+
68+
'fnlwgt': tf.tensor1d([
69+
70+
77516, 121772, 193524, 76845
71+
72+
],'int32'),
73+
74+
'education': tf.tensor1d([
75+
76+
'Bachelors', 'Assoc-voc', 'Doctorate', '9th'
77+
78+
], 'string'),
79+
80+
'education_num': tf.tensor1d([
81+
82+
13, 11, 16, 5
83+
84+
], 'int32'),
85+
86+
'marital_status': tf.tensor1d([
87+
88+
'Never-married', 'Married-civ-spouse', 'Married-civ-spouse',
89+
'Married-civ-spouse'
90+
91+
], 'string'),
92+
93+
'occupation': tf.tensor1d([
94+
95+
'Adm-clerical', 'Craft-repair', 'Prof-specialty', 'Farming-fishing'
96+
97+
], 'string'),
98+
99+
'relationship': tf.tensor1d([
100+
101+
'Not-in-family', 'Husband', 'Husband', 'Husband'
102+
103+
], 'string'),
104+
105+
'race': tf.tensor1d([
106+
107+
'White', 'Asian-Pac-Islander', 'White', 'Black'
108+
109+
], 'string'),
110+
111+
'sex': tf.tensor1d([
112+
113+
'Male', 'Male', 'Male', 'Male'
114+
115+
], 'string'),
116+
117+
'capital_gain': tf.tensor1d([
118+
119+
2174, 0, 0, 0
120+
121+
], 'int32'),
122+
123+
'capital_loss': tf.tensor1d([
124+
125+
0, 0, 0, 0
126+
127+
], 'int32'),
128+
129+
'hours_per_week': tf.tensor1d([
130+
131+
40, 40, 60, 40
132+
133+
], 'int32'),
134+
135+
'native_country': tf.tensor1d([
136+
137+
'United-States', '', 'United-States', 'United-States'
138+
139+
], 'string')
140+
}
141+
</textarea>
142+
</p>
143+
144+
<div class="button_box">
145+
<button id="btn_load_model" type="button">Load model</button>
146+
<button id="btn_apply_model" type="button" disabled>Apply model</button>
147+
<button id="btn_unload_model" type="button" disabled>Unload model</button>
148+
</div>
149+
150+
<p>
151+
<label for="terminal">Logs:</label><br />
152+
<textarea id="terminal" name="terminal" style="border: 1px solid black; font-family: monospace; width: 100%"
153+
rows="30"></textarea>
154+
</p>
155+
156+
157+
<script>
158+
// The model (once loaded).
159+
let model = null;
160+
161+
function loadModel() {
162+
tfdf.loadTFDFModel('https://storage.googleapis.com/tfjs-testing/adult_gbt_no_regex/model.json').then(loadedModel => {
163+
model = loadedModel;
164+
document.getElementById("btn_load_model").disabled = true;
165+
document.getElementById("btn_apply_model").disabled = false;
166+
document.getElementById("btn_unload_model").disabled = false;
167+
});
168+
}
169+
170+
function applyModel() {
171+
let examples = eval(`(${document.getElementById("examples").value})`);
172+
console.log("Examples:", examples);
173+
174+
model.executeAsync(examples).then(output => {
175+
const predictions = output.dataSync();
176+
177+
console.log("Predictions:", predictions);
178+
writeToTerminal("Predictions:");
179+
writeToTerminal(Array.from(predictions));
180+
});
181+
}
182+
183+
function unloadModel() {
184+
model.dispose();
185+
model = null;
186+
187+
writeToTerminal("Model unloaded");
188+
189+
document.getElementById("btn_load_model").disabled = false;
190+
document.getElementById("btn_apply_model").disabled = true;
191+
document.getElementById("btn_unload_model").disabled = true;
192+
}
193+
194+
function writeToTerminal(text) {
195+
console.log(typeof text);
196+
if (typeof text == "object") {
197+
text = JSON.stringify(text);
198+
}
199+
let terminal = document.getElementById("terminal");
200+
terminal.value += text + "\n";
201+
terminal.scrollTop = terminal.scrollHeight; // focus on bottom
202+
}
203+
204+
document.getElementById("btn_load_model").onclick = loadModel;
205+
document.getElementById("btn_apply_model").onclick = applyModel;
206+
document.getElementById("btn_unload_model").onclick = unloadModel;
207+
208+
</script>
209+
</body>
210+
211+
</html>

0 commit comments

Comments
 (0)