-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
122 lines (90 loc) · 3.08 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
const file = document.querySelector('input[type="file"]');
const img = document.querySelector('img');
const preds = document.querySelector('#predicciones');
const button = document.querySelector('#btn-pred');
const buttonClean = document.querySelector('#btn-clean');
const preloader = document.querySelector('.progress');
const setup = () => {
// label check
if(!localStorage.getItem('labels')) {
M.toast({html: '<span>Cargando Labels...</span><button class="btn-flat toast-action">X</button>'});
console.log('Labels está cargada localmente en localstorage')
loadLabels();
};
// model check
tf.loadGraphModel('indexeddb://mobilenet')
.then(resp => console.log('Mobilenet está cargada localmente en indexdb'))
.catch(err => {
console.log(err);
M.toast({html: '<span>Cargando Mobilenet...</span><button class="btn-flat toast-action">X</button>'});
loadMobilenet();
});
};
const loadLabels = () => {
if (!localStorage.getItem('labels')) {
// load
fetch('labels.json')
.then( res => res.json())
.then( labels => {
// save local
localStorage.setItem('labels', JSON.stringify(labels));
}).catch(err => console.log(err));
};
};
const getLabels = () => {
return JSON.parse(localStorage.getItem('labels')).labels;
}
const loadMobilenet = () => {
const URI = "https://storage.googleapis.com/tfjs-models/savedmodel/mobilenet_v2_1.0_224/model.json"
tf.loadGraphModel(URI, { fromTFHub: false }).then((model) => {
model.save('indexeddb://mobilenet');
});
};
const mobileNet = async () => {
tf.tidy( () => {
tf.loadGraphModel('indexeddb://mobilenet', { fromTFHub: false }).then((model) => {
const myTensor = tf.browser.fromPixels(img);
// Image resized to 224
const readyfied = tf.image.resizeBilinear(myTensor, [224, 224], true).div(255).reshape([1, 224, 224, 3]);
// Predictions
const top = 3;
const result = model.predict(readyfied);
const { values, indices } = tf.topk(result, top);
const topValues = values.dataSync();
const topindices = indices.dataSync();
for(let i=0; i < top; i++) {
//insert html
htmlPredictionParse(topValues[i], topindices[i]);
}
// stop load
preloader.style.display ='none';
});
});
};
const htmlPredictionParse = (value, indice) => {
const LABELS = getLabels();
const template = `<div class="chip">${LABELS[indice]}<i class="close material-icons">close</i></div>`;
preds.innerHTML += template;
};
// Main
setup();
// img input handle
file.addEventListener('change', () => {
// add img
img.src = URL.createObjectURL(file.files[0]);
// clean html for new img
preds.innerHTML = '';
});
// prediction button
button.addEventListener('click', () => {
// clean html for new predictions
preds.innerHTML = '';
// start load model
preloader.style.display = 'block';
// predictions
mobileNet();
});
buttonClean.addEventListener('click', () => {
// manual clean option
preds.innerHTML = '';
})