質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 323

543

score 9

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

 <header>
        <h1>【DEMO】人工知能を使って認識した人の顔に目線を入れてみる</h1>
    </header>
    <div class="container">
        <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>
    </div>
    <section class="controller">
        <h4>画像データを選ぶ</h4>
        <p>端末から画像を選ぶと、目線が描画されます。</p>
        <input accept="image/*" id="input_img" type="file">
    </section>
    <div id="wrap">
        <input type="checkbox" id="show_dots"><label for="show_dots">姿勢推定ドット表示</label>
        <div class="container">
            <div id="result"></div>
        </div>
    </div>






    <header>
        <h2>【DEMO】人工知能を使って認識した人の顔に目線を入れてみる</h2>
    </header>
    <div class="container">
        <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>
    </div>
    <section class="controller">
        <h4>画像データを選ぶ</h4>
        <p>端末から画像を選ぶと、目線が描画されます。</p>
        <input accept="image/*" id="input_img" type="file">
    </section>
    <div id="wrap">
        <input type="checkbox" id="show_dots"><label for="show_dots">姿勢推定ドット表示</label>
        <div class="container">
            <div id="result"></div>
        </div>
    </div>
 (function(){
        function mesen(img, points, ctx) {
@keyframes load_ani {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(-1, 1, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
h1 {
  height: 100%;
  font-size: 100%;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  line-height: 1.6;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-size: 1rem;
}

header {
  margin: 0;
  padding: 0;
  background: #000;
  h1 {
    margin: 0;
    padding: 1em;
    font-size: 1em;
    color: #ffffff;
  }
}
#wrap {
  padding: 1em;
  border-top: 1px solid #737373;
  border-bottom: 1px solid #000;
  .container {
    padding: 0;
  }
}
.container {
  margin: 0;
  p {
    padding: 0 1em;
    font-size: 1em;
  }
}
.sample {
  margin: .5em;
  padding: .5em;
  background: #EAEAEA;
  h4 {
    font-size: 1rem;
    margin: 0;
    padding: 0;
  }
  &-item {
    cursor: pointer;
  }
}
body.loading .gallery {
  opacity: .5;
  pointer-events: none;
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  .current img {
    box-shadow: 0 0 5px #0099ca;
  }
  > * {
    display: inline-block;
    margin: 0 1%;
    width: calc(100% / 5 - 2%);
    opacity: .5;
  }
  .current {
    opacity: 1;
  }
  img {
    vertical-align: bottom;
    height: auto;
    max-width: 100%;
  }
}

.controller {
  padding: 1em;
  h4 {
    margin: 0;
    padding: 0;
  }
  p {
    font-size: .8em;
    margin: 0;
    padding: 0;
  }
}
.notes {
  padding: 1em;
  font-size: .8em;
  border-top: 1px solid #737373;
}

label {
  font-size: .8em;
  line-height: 1;
}
#show_dots:checked ~ * .point {
  display: block;
}

#result {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  p {
    font-size: 0.8em;
    color: #454545;
  }
  &::before {
    content: "😃";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1.5rem;
    margin-left: -1.5rem;
    line-height: 1;
    opacity: 0;
    display: none;
    z-index: 1;
    font-size: 3rem;
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: #cacaca;
    opacity: 0;
    display: none;
  }
  img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  canvas {
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    vertical-align: bottom;
  }
  .mesen {
    position: absolute;
    background: #000000;
    height: 1em;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .point {
    position: absolute;
    z-index: 1;
    display: none;
    width: .5em;
    height: .5em;
  }
  .point::before {
    content: "";
    display: block;
    width: .5em;
    height: .5em;
    background: rgba(255, 255, 255, .5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    box-shadow: 0 0 2px #0099ca;
  }
  .point {
    &:hover::before {
      background: #0099ca;
    }
    &::after {
      display: none;
      width: 4em;
      color: #ffffff;
      background: #000000;
      padding: .3em .5em;
      line-height: 1.2;
      position: absolute;
      left: 10px;
      top: -.5em;
      opacity: 0;
      font-size: .8em;
    }
    &:hover::after {
      display: inline-block;
      opacity: .8;
    }
  }
  $colors:(
    0: #0000ff,
    1: #ff0000,
    2: #ffff00,
    3: #00ffff,
    4: #ff00ff,
    5: #ff9933,
    6: #99ff33,
    7: #9933ff,
    8: #33ff99,
    9: #3399ff,
  );
  $parts: "nose", "leftEye", "rightEye", "leftEar", "rightEar", "leftShoulder", "rightShoulder", "leftElbow", "rightElbow", "leftWrist", "rightWrist", "leftHip", "rightHip", "leftKnee", "rightKnee", "leftAnkle", "rightAnkle";
  @each $num, $color in $colors {
    .pose#{$num} {
      &::before {
        box-shadow: 0 0 2px $color;
      }
      &:hover::before {
        background: $color;
      }
      @each $part in $parts {
        &.part-#{$part} {
          &::after {
            content: "pose #{$num}: #{$part}";
          }
        }
      }
    }
  }
}
body.loading {
  .controller {
    opacity: .5;
    pointer-events: none;
  }
  #result {
    &::before {
     display: block;
     opacity: 1;
     animation: load_ani 2s infinite;
   }
   &::after {
     display: block;
     opacity: 1;
   }
  }
}


h2{
  height: 100%;
  font-size: 100%;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  line-height: 1.6;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-size: 1rem;
}

header {
  margin: 0;
  padding: 0;
  background: #000;
  h2 {
    margin: 0;
    padding: 1em;
    font-size: 1em;
    color: #ffffff;
  }
}
#wrap {
  padding: 1em;
  border-top: 1px solid #737373;
  border-bottom: 1px solid #000;
  .container {
    padding: 0;
  }
}
.container{
  margin: 0;
  p {
    padding: 0 1em;
    font-size: 1em;
  }
}
.sample {
  margin: .5em;
  padding: .5em;
  background: #EAEAEA;
  h4 {
    font-size: 1rem;
    margin: 0;
    padding: 0;
  }
  &-item {
    cursor: pointer;
  }
}
body.loading .gallery {
  opacity: .5;
  pointer-events: none;
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  .current img {
    box-shadow: 0 0 5px #0099ca;
  }
  > * {
    display: inline-block;
    margin: 0 1%;
    width: calc(100% / 5 - 2%);
    opacity: .5;
  }
  .current {
    opacity: 1;
  }
  img {
    vertical-align: bottom;
    height: auto;
    max-width: 100%;
  }
}

.controller {
  padding: 1em;
  h4 {
    margin: 0;
    padding: 0;
  }
  p {
    font-size: .8em;
    margin: 0;
    padding: 0;
  }
}
.notes {
  padding: 1em;
  font-size: .8em;
  border-top: 1px solid #737373;
}

label {
  font-size: .8em;
  line-height: 1;
}
#show_dots:checked ~ * .point {
  display: block;
}

#result {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  p {
    font-size: 0.8em;
    color: #454545;
  }
  &::before {
    content: "😃";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1.5rem;
    margin-left: -1.5rem;
    line-height: 1;
    opacity: 0;
    display: none;
    z-index: 1;
    font-size: 3rem;
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: #cacaca;
    opacity: 0;
    display: none;
  }
  img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  canvas {
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    vertical-align: bottom;
  }
  .mesen {
    position: absolute;
    background: #000000;
    height: 1em;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .point {
    position: absolute;
    z-index: 1;
    display: none;
    width: .5em;
    height: .5em;
  }
  .point::before {
    content: "";
    display: block;
    width: .5em;
    height: .5em;
    background: rgba(255, 255, 255, .5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    box-shadow: 0 0 2px #0099ca;
  }
  .point {
    &:hover::before {
      background: #0099ca;
    }
    &::after {
      display: none;
      width: 4em;
      color: #ffffff;
      background: #000000;
      padding: .3em .5em;
      line-height: 1.2;
      position: absolute;
      left: 10px;
      top: -.5em;
      opacity: 0;
      font-size: .8em;
    }
    &:hover::after {
      display: inline-block;
      opacity: .8;
    }
  }
  $colors:(
    0: #0000ff,
    1: #ff0000,
    2: #ffff00,
    3: #00ffff,
    4: #ff00ff,
    5: #ff9933,
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kyoya0819

    2019/09/27 08:34

    JavaScriptが途中で切れています。
    あと、回答者が実現可能な最小限のコードに編集してください。

    質問は編集可能です

    キャンセル

  • m.ts10806

    2019/09/27 09:23

    SCSSよりもコンパイル後のCSSを提示された方がアドバイスを得やすくなります。

    キャンセル

回答 1

checkベストアンサー

+1

id グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。
id - HTML: HyperText Markup Language | MDN

とあるように、idは一意的ですので、コピペで複数作っても1つ目のものしかJavaScriptでは認識しないと思います。

わかりやすい解決方法は、コピペした方のidを変えて、それに合わせてスクリプトもコピペし、ハードコードしてあるID名を変更をすることです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/27 16:47

    分かりやすく、ありがとうこざいます。
    説明していただいたように、行ったのですが、画像表示できず、これは、私のやり方が間違ってますよね?。
    すみません、これ以上の解説はないと思いますが、解説していただけたら幸いです。よろしくお願いいたします。

    キャンセル

  • 2019/09/27 16:50

    コードがないとなんとも……

    キャンセル

  • 2019/09/28 00:17 編集

    2つとも表示できるようになりました。
    丁寧にしていただきありがとうございます。

    キャンセル

  • 2019/09/29 08:55

    ご解決されて何よりです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る