Exécuter une fonction event

Version imprimable

Bonjour

ce code fonctionne assez bien, il suffit de cliquer sur l'image pour faire apparaitre le cadre et le nom de la catégorie (cela après le chargement des models)

Ce que je cherche à faire c'est de ne pas cliquer mais d'afficher directement le cadre de chaque photo en remplacant

Code:

imageContainers[i].children[0].addEventListener('click', handleClick);

par

Code:

handleClick(quelque chose);

Merci d'avance

Code:

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
 
<html lang="fr">
 
<body>
 
<div class="classifyOnClick">
  <img src="https://img.20mn.fr/Av_FclQ9Q1uqz4MbPgorbSk/960x614_actrice-natalie-portman" width="100%" crossorigin="anonymous" title="Click to get classification!" />
</div>
 
<div class="classifyOnClick">
  <img src="https://cdn.glitch.com/74418d0b-3465-49a2-8c71-a721b7734473%2Fcats_flickr_publicdomain.jpg?v=1579294753947" width="100%" crossorigin="anonymous" title="Click to get classification!" />
</div>
 
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
 
<script>
const demosSection = document.getElementById('demos');
const imageContainers = document.getElementsByClassName('classifyOnClick');
 
var model = undefined;
 
cocoSsd.load().then(function (loadedModel) {
  model = loadedModel;
  for (let i = 0; i < imageContainers.length; i++) {
    // si je clique sur une image
    imageContainers[i].children[0].addEventListener('click', handleClick);
    // affiche automatiquement le cadre dans chaque div
    // handleClick(imageContainers[i]);
  }
});
 
function handleClick(event) {
  if (!model) {
    console.log('Wait for model to load before clicking!');
    return;
  }
 
  model.detect(event.target).then(function (predictions) {
    console.log(predictions);
    for (let n = 0; n < predictions.length; n++) {
      // Description text
      const p = document.createElement('p');
      p.innerText = predictions[n].class  + ' - with ' 
          + Math.round(parseFloat(predictions[n].score) * 100) 
          + '% confidence.';
      // Positioned at the top left of the bounding box.
      // Height is whatever the text takes up.
      // Width subtracts text padding in CSS so fits perfectly.
      p.style = 'left: ' + predictions[n].bbox[0] + 'px;' + 
          'top: ' + predictions[n].bbox[1] + 'px; ' + 
          'width: ' + (predictions[n].bbox[2] - 10) + 'px;';
 
      const highlighter = document.createElement('div');
      highlighter.setAttribute('class', 'highlighter');
      highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px;' +
          'top: ' + predictions[n].bbox[1] + 'px;' +
          'width: ' + predictions[n].bbox[2] + 'px;' +
          'height: ' + predictions[n].bbox[3] + 'px;';
 
      event.target.parentNode.appendChild(highlighter);
      event.target.parentNode.appendChild(p);
    }
  });
}
</script>
 
</body>
 
</html>
 
<style>
body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  color: #3D3D3D;
}
 
h1 {
  font-style: italic;
  color: #FF6F00;
}
 
h2 {
  clear: both;
}
 
em {
  font-weight: bold;
}
 
video {
  clear: both;
  display: block;
}
 
section {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}
 
header, footer {
  clear: both;
}
 
.removed {
  display: none;
}
 
.invisible {
  opacity: 0.2;
}
 
.note {
  font-style: italic;
  font-size: 130%;
}
 
.videoView, .classifyOnClick {
  position: relative;
  float: left;
  width: 48%;
  margin: 2% 1%;
  cursor: pointer;
}
 
.videoView p, .classifyOnClick p {
  position: absolute;
  padding: 5px;
  background-color: rgba(255, 111, 0, 0.85);
  color: #FFF;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  z-index: 2;
  font-size: 12px;
  margin: 0;
}
 
.highlighter {
  background: rgba(0, 255, 0, 0.25);
  border: 1px dashed #fff;
  z-index: 1;
  position: absolute;
}
 
.classifyOnClick {
  z-index: 0;
}
 
.classifyOnClick img {
  width: 100%;
}
</style>

10/06/2022, 09h52
SpaceFrog

Code:

imageContainers[i].children[0].addEventListener('click', function(){handleClick(quequechose) });
10/06/2022, 10h07
new2010

bonjour,

en fait je souhaite remplacer la ligne de commande : imageContainers[i].children[0].addEventListener('click', handleClick);.
par l'appel de la fonction handleClick(); mais je ne sais comment écrire la variable dedans.

j'ai essayé handleClick( imageContainers[i].children[0]);
10/06/2022, 11h08
SpaceFrog

en passant pas un attribut data-sur l’élément ...

Code:

data-quelquechose="..."

Code:

imageContainers[i].children[0].addEventListener('click', function(){handleClick(this.dataset.quelquechose) });
10/06/2022, 11h11
new2010

en fait je vais formuler différemment.

le script fonctionne mais il faut cliquer sur la photo pour faire apparaitre ce que le script detecte (person, cat ...)

j'aimerai que le script s’exécute automatiquement sans cliquer
10/06/2022, 11h17
SpaceFrog

Alors regarde du coté de setInterval() ...

J'ai trouvé (c'est pas forcement propre mais ça marche)

Code:

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<div class="lmask" id="lmask">Chargement des models en cours !</div>
<style>
.lmask {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 100%;
  width: 100%; 
  background-color: #FFFFFF;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;
  opacity: 1;
  &.fixed {
    position: fixed;
  }
</style>
 
<!DOCTYPE html>
 
<html lang="fr">
 
<body>
 
<div class="classifyOnClick" id="scan">
  <img src="https://img.20mn.fr/Av_FclQ9Q1uqz4MbPgorbSk/960x614_actrice-natalie-portman" width="100%" crossorigin="anonymous" title="Click to get classification!" />
</div>
 
<div class="classifyOnClick">
  <img src="https://cdn.glitch.com/74418d0b-3465-49a2-8c71-a721b7734473%2Fcats_flickr_publicdomain.jpg?v=1579294753947" width="100%" crossorigin="anonymous" title="Click to get classification!" />
</div>
 
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
 
<script>
const imageContainers = document.getElementsByClassName('classifyOnClick');
 
var model = undefined;
var affichage = 0;
 
cocoSsd.load().then(function (loadedModel) {
  model = loadedModel;
  const element = document.getElementById('lmask');
  element.remove();
  handleClick();
});
 
function handleClick() {
  model.detect(imageContainers[0].children[0]).then(function (predictions) {
    if (affichage < 1) {
      affichage = affichage + 1;
    console.log(predictions);
    for (let n = 0; n < predictions.length; n++) {
      // Description text
      const p = document.createElement('p');
      p.innerText = predictions[n].class  + ' - with ' 
          + Math.round(parseFloat(predictions[n].score) * 100) 
          + '% confidence.';
      // Positioned at the top left of the bounding box.
      // Height is whatever the text takes up.
      // Width subtracts text padding in CSS so fits perfectly.
      p.style = 'left: ' + predictions[n].bbox[0] + 'px;' + 
          'top: ' + predictions[n].bbox[1] + 'px; ' + 
          'width: ' + (predictions[n].bbox[2] - 10) + 'px;';
 
      const highlighter = document.createElement('div');
      highlighter.setAttribute('class', 'highlighter');
      highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px;' +
          'top: ' + predictions[n].bbox[1] + 'px;' +
          'width: ' + predictions[n].bbox[2] + 'px;' +
          'height: ' + predictions[n].bbox[3] + 'px;';
 
      imageContainers[0].children[0].parentNode.appendChild(highlighter);
      imageContainers[0].children[0].parentNode.appendChild(p);
    }
    }
  });
}
 
</script>
 
</body>
 
</html>
 
<style>
body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  color: #3D3D3D;
}
 
h1 {
  font-style: italic;
  color: #FF6F00;
}
 
h2 {
  clear: both;
}
 
em {
  font-weight: bold;
}
 
video {
  clear: both;
  display: block;
}
 
section {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}
 
header, footer {
  clear: both;
}
 
.removed {
  display: none;
}
 
.invisible {
  opacity: 0.2;
}
 
.note {
  font-style: italic;
  font-size: 130%;
}
 
.videoView, .classifyOnClick {
  position: relative;
  float: left;
  width: 48%;
  margin: 2% 1%;
  cursor: pointer;
}
 
.videoView p, .classifyOnClick p {
  position: absolute;
  padding: 5px;
  background-color: rgba(255, 111, 0, 0.85);
  color: #FFF;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  z-index: 2;
  font-size: 12px;
  margin: 0;
}
 
.highlighter {
  background: rgba(0, 255, 0, 0.25);
  border: 1px dashed #fff;
  z-index: 1;
  position: absolute;
}
 
.classifyOnClick {
  z-index: 0;
}
 
.classifyOnClick img {
  width: 100%;
}
</style>