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>