-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (90 loc) · 3.68 KB
/
index.html
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CrafyNSFWjs</title>
<!-- Load resources -->
<script src="rec/tensorflow-js/tf.js" type="text/javascript"></script>
<script src="rec/gifuct-js/gifuct-js.min.js" type="text/javascript"></script>
<script src="rec/nsfw-js/nsfwjs.min.js" type="text/javascript"></script>
<script src="crafynsfwjs.js" type="text/javascript"></script>
<style>
#imagePreview {
display: block;
max-width: 100%;
max-height: 400px;
margin: 10px auto;
}
</style>
</head>
<body>
<h1>CrafyNSFWjs</h1>
<p>NSFW detection in multimedia</p>
<input type="file" id="imageInput">
<p id="results"></p>
<img src="" id="imagePreview">
<p>Load model time: <span id="loadModelTime"></span> ms</p>
<p>Download model time: <span id="downloadModelTime"></span> ms</p>
<br>
<p>Used libraries:</p>
<ul>
<li><a href="https://github.com/infinitered/nsfwjs">NSFW.js</a></li>
<li><a href="https://github.com/matt-way/gifuct-js">gifuct.js</a></li>
<li><a href="https://www.tensorflow.org/js">Tensorflow JS</a></li>
</ul>
<p>Made with ♥ by <a href="https://github.com/chijete/">Crafy Holding</a></p>
<script>
// var urlToModelFiles = window.location.href+'rec/nsfw-js/model/';
// var nsfwjsclass = new CrafyNSFWjs(urlToModelFiles);
// ⚠️ 'model_tiny' doesn't works!
// var urlToModelFiles = window.location.href + 'rec/nsfw-js/model_tiny/';
// var nsfwjsclass = new CrafyNSFWjs(urlToModelFiles);
// nsfwjsclass.setModelType('model_tiny');
var urlToModelFiles = window.location.href + 'rec/nsfw-js/model_graph/';
var nsfwjsclass = new CrafyNSFWjs(urlToModelFiles);
nsfwjsclass.setModelType('model_graph');
var imageInput = document.getElementById('imageInput');
var imagePreview = document.getElementById('imagePreview');
var results = document.getElementById('results');
var loadModelTime = document.getElementById('loadModelTime');
var downloadModelTime = document.getElementById('downloadModelTime');
imageInput.setAttribute('accept', nsfwjsclass.getAllAcceptedFiletypes().join(", "));
function makeThePrediction(domElement) {
console.log('makeThePrediction called');
nsfwjsclass.makeMagicPrediction(domElement).then(function(result) {
console.log('result', result);
if (result !== false) {
imagePreview.src = result['imageElement'].src;
results.innerHTML = `
Este `+result['inputType']+` es `+result['predictionResult']['prediction'][0]['className']+` con un `+result['predictionResult']['prediction'][0]['probability']*100+`% de seguridad.
`;
loadModelTime.innerText = nsfwjsclass.loadModelTime;
downloadModelTime.innerText = nsfwjsclass.downloadModelTime;
} else {
results.innerHTML = 'Error en el análisis. Puede que el archivo no sea compatible.';
}
}).catch(function(error) {
console.log('ERROR', error);
});
}
imageInput.addEventListener('change', function(event) {
results.innerHTML = 'Cargando...';
const file = event.target.files[0];
var domElement;
if (file.type.includes('video')) {
domElement = document.createElement('video');
} else if (file.type.includes('image')) {
domElement = document.createElement('img');
}
domElement.src = URL.createObjectURL(file);
domElement.onload = function() {
makeThePrediction(domElement);
};
domElement.onloadeddata = function() {
makeThePrediction(domElement);
};
});
</script>
</body>
</html>