Exécuter une fonction event

**new2010** · 10/06/2022, 09h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

handleClick(quelque chose);

Merci d'avance

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 10/06/2022, 09h52

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

imageContainers[i].children[0].addEventListener('click', function(){handleClick(quequechose) });

**new2010** · 10/06/2022, 10h07

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]);

**SpaceFrog** · 10/06/2022, 11h08

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

data-quelquechose="..."

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

imageContainers[i].children[0].addEventListener('click', function(){handleClick(this.dataset.quelquechose) });

**new2010** · 10/06/2022, 11h11

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

**SpaceFrog** · 10/06/2022, 11h17

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

Exécuter une fonction event

JavaScript

Vue hybride

Discussions similaires

Partager

Partager