h1と同様の処理を行うことをしたいです

参考にしたサイトを少しいじりました．
h1で作成されているものと同じものをh2で作成したのですがh2の方のみ画像選択が行えません．
また下のチェックボックスも無効のようです
jsは全くいじっていないです
h1と同様の処理をh2で行う方法がお分かりの方いらっしゃいましたらどうぞよろしくお願いいたします．

html
1 <header>
2        <h1>【DEMO】人工知能を使って認識した人の顔に目線を入れてみる</h1>
3    </header>
4    <div class="container">
5        <p>ディープラーニングライブラリ <a href="https://js.tensorflow.org/" target="_blank">TensorFlow.js</a> と、人体の姿勢推定ができる機械学習モデル <a href="https://github.com/tensorflow/tfjs-models/tree/master/posenet" target="_blank">PoseNet Model</a>をつかって、顔写真に自動的に目線がはいるようにしてみました。<br>最大8人まで認識できます。</p>
6    </div>
7    <section class="controller">
8        <h4>画像データを選ぶ</h4>
9        <p>端末から画像を選ぶと、目線が描画されます。</p>
10        <input accept="image/*" id="input_img" type="file">
11    </section>
12    <div id="wrap">
13        <input type="checkbox" id="show_dots"><label for="show_dots">姿勢推定ドット表示</label>
14        <div class="container">
15            <div id="result"></div>
16        </div>
17    </div>
18
19
20
21    
22
23
24    <header>
25        <h2>【DEMO】人工知能を使って認識した人の顔に目線を入れてみる</h2>
26    </header>
27    <div class="container">
28        <p>ディープラーニングライブラリ <a href="https://js.tensorflow.org/" target="_blank">TensorFlow.js</a> と、人体の姿勢推定ができる機械学習モデル <a href="https://github.com/tensorflow/tfjs-models/tree/master/posenet" target="_blank">PoseNet Model</a>をつかって、顔写真に自動的に目線がはいるようにしてみました。<br>最大8人まで認識できます。</p>
29    </div>
30    <section class="controller">
31        <h4>画像データを選ぶ</h4>
32        <p>端末から画像を選ぶと、目線が描画されます。</p>
33        <input accept="image/*" id="input_img" type="file">
34    </section>
35    <div id="wrap">
36        <input type="checkbox" id="show_dots"><label for="show_dots">姿勢推定ドット表示</label>
37        <div class="container">
38            <div id="result"></div>
39        </div>
40    </div>
41

js
1 (function(){
2        function mesen(img, points, ctx) {
3

css
1@keyframes load_ani {
2  0% {
3    transform: scale3d(1, 1, 1);
4  }
5  50% {
6    transform: scale3d(-1, 1, 1);
7  }
8  100% {
9    transform: scale3d(1, 1, 1);
10  }
11}
12h1 {
13  height: 100%;
14  font-size: 100%;
15}
16body {
17  margin: 0;
18  padding: 0;
19  height: 100%;
20  line-height: 1.6;
21  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
22  font-size: 1rem;
23}
24
25header {
26  margin: 0;
27  padding: 0;
28  background: #000;
29  h1 {
30    margin: 0;
31    padding: 1em;
32    font-size: 1em;
33    color: #ffffff;
34  }
35}
36#wrap {
37  padding: 1em;
38  border-top: 1px solid #737373;
39  border-bottom: 1px solid #000;
40  .container {
41    padding: 0;
42  }
43}
44.container {
45  margin: 0;
46  p {
47    padding: 0 1em;
48    font-size: 1em;
49  }
50}
51.sample {
52  margin: .5em;
53  padding: .5em;
54  background: #EAEAEA;
55  h4 {
56    font-size: 1rem;
57    margin: 0;
58    padding: 0;
59  }
60  &-item {
61    cursor: pointer;
62  }
63}
64body.loading .gallery {
65  opacity: .5;
66  pointer-events: none;
67}
68.gallery {
69  display: flex;
70  flex-wrap: wrap;
71  .current img {
72    box-shadow: 0 0 5px #0099ca;
73  }
74  > * {
75    display: inline-block;
76    margin: 0 1%;
77    width: calc(100% / 5 - 2%);
78    opacity: .5;
79  }
80  .current {
81    opacity: 1;
82  }
83  img {
84    vertical-align: bottom;
85    height: auto;
86    max-width: 100%;
87  }
88}
89
90.controller {
91  padding: 1em;
92  h4 {
93    margin: 0;
94    padding: 0;
95  }
96  p {
97    font-size: .8em;
98    margin: 0;
99    padding: 0;
100  }
101}
102.notes {
103  padding: 1em;
104  font-size: .8em;
105  border-top: 1px solid #737373;
106}
107
108label {
109  font-size: .8em;
110  line-height: 1;
111}
112#show_dots:checked ~ * .point {
113  display: block;
114}
115
116#result {
117  position: relative;
118  display: inline-block;
119  overflow: hidden;
120  vertical-align: bottom;
121  p {
122    font-size: 0.8em;
123    color: #454545;
124  }
125  &::before {
126    content: "????";
127    position: absolute;
128    top: 50%;
129    left: 50%;
130    margin-top: -1.5rem;
131    margin-left: -1.5rem;
132    line-height: 1;
133    opacity: 0;
134    display: none;
135    z-index: 1;
136    font-size: 3rem;
137  }
138  &::after {
139    content: "";
140    position: absolute;
141    top: 0;
142    left: 0;
143    display: block;
144    width: 100%;
145    height: 100%;
146    background: #cacaca;
147    opacity: 0;
148    display: none;
149  }
150  img {
151    max-width: 100%;
152    height: auto;
153    vertical-align: bottom;
154  }
155  canvas {
156    max-width: 100%;
157    height: auto;
158    position: absolute;
159    top: 0;
160    left: 0;
161    vertical-align: bottom;
162  }
163  .mesen {
164    position: absolute;
165    background: #000000;
166    height: 1em;
167    transform: translate(-50%, -50%);
168    z-index: 1;
169  }
170  .point {
171    position: absolute;
172    z-index: 1;
173    display: none;
174    width: .5em;
175    height: .5em;
176  }
177  .point::before {
178    content: "";
179    display: block;
180    width: .5em;
181    height: .5em;
182    background: rgba(255, 255, 255, .5);
183    border-radius: 50%;
184    transform: translate(-50%, -50%);
185    opacity: 1;
186    box-shadow: 0 0 2px #0099ca;
187  }
188  .point {
189    &:hover::before {
190      background: #0099ca;
191    }
192    &::after {
193      display: none;
194      width: 4em;
195      color: #ffffff;
196      background: #000000;
197      padding: .3em .5em;
198      line-height: 1.2;
199      position: absolute;
200      left: 10px;
201      top: -.5em;
202      opacity: 0;
203      font-size: .8em;
204    }
205    &:hover::after {
206      display: inline-block;
207      opacity: .8;
208    }
209  }
210  $colors:(
211    0: #0000ff,
212    1: #ff0000,
213    2: #ffff00,
214    3: #00ffff,
215    4: #ff00ff,
216    5: #ff9933,
217    6: #99ff33,
218    7: #9933ff,
219    8: #33ff99,
220    9: #3399ff,
221  );
222  $parts: "nose", "leftEye", "rightEye", "leftEar", "rightEar", "leftShoulder", "rightShoulder", "leftElbow", "rightElbow", "leftWrist", "rightWrist", "leftHip", "rightHip", "leftKnee", "rightKnee", "leftAnkle", "rightAnkle";
223  @each $num, $color in $colors {
224    .pose#{$num} {
225      &::before {
226        box-shadow: 0 0 2px $color;
227      }
228      &:hover::before {
229        background: $color;
230      }
231      @each $part in $parts {
232        &.part-#{$part} {
233          &::after {
234            content: "pose #{$num}: #{$part}";
235          }
236        }
237      }
238    }
239  }
240}
241body.loading {
242  .controller {
243    opacity: .5;
244    pointer-events: none;
245  }
246  #result {
247    &::before {
248     display: block;
249     opacity: 1;
250     animation: load_ani 2s infinite;
251   }
252   &::after {
253     display: block;
254     opacity: 1;
255   }
256  }
257}
258
259
260h2{
261  height: 100%;
262  font-size: 100%;
263}
264body {
265  margin: 0;
266  padding: 0;
267  height: 100%;
268  line-height: 1.6;
269  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
270  font-size: 1rem;
271}
272
273header {
274  margin: 0;
275  padding: 0;
276  background: #000;
277  h2 {
278    margin: 0;
279    padding: 1em;
280    font-size: 1em;
281    color: #ffffff;
282  }
283}
284#wrap {
285  padding: 1em;
286  border-top: 1px solid #737373;
287  border-bottom: 1px solid #000;
288  .container {
289    padding: 0;
290  }
291}
292.container{
293  margin: 0;
294  p {
295    padding: 0 1em;
296    font-size: 1em;
297  }
298}
299.sample {
300  margin: .5em;
301  padding: .5em;
302  background: #EAEAEA;
303  h4 {
304    font-size: 1rem;
305    margin: 0;
306    padding: 0;
307  }
308  &-item {
309    cursor: pointer;
310  }
311}
312body.loading .gallery {
313  opacity: .5;
314  pointer-events: none;
315}
316.gallery {
317  display: flex;
318  flex-wrap: wrap;
319  .current img {
320    box-shadow: 0 0 5px #0099ca;
321  }
322  > * {
323    display: inline-block;
324    margin: 0 1%;
325    width: calc(100% / 5 - 2%);
326    opacity: .5;
327  }
328  .current {
329    opacity: 1;
330  }
331  img {
332    vertical-align: bottom;
333    height: auto;
334    max-width: 100%;
335  }
336}
337
338.controller {
339  padding: 1em;
340  h4 {
341    margin: 0;
342    padding: 0;
343  }
344  p {
345    font-size: .8em;
346    margin: 0;
347    padding: 0;
348  }
349}
350.notes {
351  padding: 1em;
352  font-size: .8em;
353  border-top: 1px solid #737373;
354}
355
356label {
357  font-size: .8em;
358  line-height: 1;
359}
360#show_dots:checked ~ * .point {
361  display: block;
362}
363
364#result {
365  position: relative;
366  display: inline-block;
367  overflow: hidden;
368  vertical-align: bottom;
369  p {
370    font-size: 0.8em;
371    color: #454545;
372  }
373  &::before {
374    content: "????";
375    position: absolute;
376    top: 50%;
377    left: 50%;
378    margin-top: -1.5rem;
379    margin-left: -1.5rem;
380    line-height: 1;
381    opacity: 0;
382    display: none;
383    z-index: 1;
384    font-size: 3rem;
385  }
386  &::after {
387    content: "";
388    position: absolute;
389    top: 0;
390    left: 0;
391    display: block;
392    width: 100%;
393    height: 100%;
394    background: #cacaca;
395    opacity: 0;
396    display: none;
397  }
398  img {
399    max-width: 100%;
400    height: auto;
401    vertical-align: bottom;
402  }
403  canvas {
404    max-width: 100%;
405    height: auto;
406    position: absolute;
407    top: 0;
408    left: 0;
409    vertical-align: bottom;
410  }
411  .mesen {
412    position: absolute;
413    background: #000000;
414    height: 1em;
415    transform: translate(-50%, -50%);
416    z-index: 1;
417  }
418  .point {
419    position: absolute;
420    z-index: 1;
421    display: none;
422    width: .5em;
423    height: .5em;
424  }
425  .point::before {
426    content: "";
427    display: block;
428    width: .5em;
429    height: .5em;
430    background: rgba(255, 255, 255, .5);
431    border-radius: 50%;
432    transform: translate(-50%, -50%);
433    opacity: 1;
434    box-shadow: 0 0 2px #0099ca;
435  }
436  .point {
437    &:hover::before {
438      background: #0099ca;
439    }
440    &::after {
441      display: none;
442      width: 4em;
443      color: #ffffff;
444      background: #000000;
445      padding: .3em .5em;
446      line-height: 1.2;
447      position: absolute;
448      left: 10px;
449      top: -.5em;
450      opacity: 0;
451      font-size: .8em;
452    }
453    &:hover::after {
454      display: inline-block;
455      opacity: .8;
456    }
457  }
458  $colors:(
459    0: #0000ff,
460    1: #ff0000,
461    2: #ffff00,
462    3: #00ffff,
463    4: #ff00ff,
464    5: #ff9933,
465  
466