어떤 아이돌 그룹의 얼굴에 가깝습니까? AI로 당신의 얼굴 분석~아이돌 조합 모자~

이 기사를 읽고 있다는 것은 당연히 당신이 아이돌을 사랑 해요!
아이돌의 사진을 보여주었을 때에 이 아이는 그 그룹이군요! 얼마나 구분하기 쉽습니다! ! ··· 아마 w
그래서, 자신의 얼굴은 그 그룹 얼굴! 라고 판단해 주는 AI를 만들었습니다!
과연 자신 얼굴이 어느 그룹에 가까울까는 생각한 적이 없었기 때문에 재미있고, 추고 있는 그룹이라면 한층 더 친근감이 울리는 것이 아닐까 생각해 작성하기도 했습니다.

아이돌 조합 나누기 모자(하리〇타??)

이번은 카메라를 기동해 영상을 AI에 걸쳐 판단해 주는 Web 사이트를 작성했습니다!
여기에서 공개하고 있으므로 꼭 사용해보세요!

사용법은 간단!
자신의 얼굴을 비추고 로드 완료까지 기다릴 뿐!
그리고는 판정 버튼을 누르면 결과가 표시됩니다!
그건 그렇고, 내 얼굴은 노기자카였습니다.

노도의 이미지 수집과 행복한 이미지 선택

우선 AI에게 학습시키기 위해 각 아이돌 그룹의 이미지를 모아야 했습니다.
그래서 이번에 활용한 것이 GoogleCrome의 확장 기능인 Image Downloader!
어쨌든 많은 아이돌 그룹과 엄밀한 선정(욕망)을 하고 싶었기 때문에 제일 손쉽게 이쪽으로 했습니다.
사용법에 대해서는 간단합니다만 기사로 했으므로 여기 를 참조해 주세요.

그리고 행복의 화상 선정입니다만 이하의 조건으로 선정했습니다.


조건
이유


단독으로 비치는 것
여러 사람이 있다고 판단 할 수 없다고 생각했기 때문에

가능한 한 얼굴이 올라간 것
이미지의 얼굴로 판단을 받기 위해

선재 사진을 반드시 넣는다
아이돌 본인이 자주 사용하는 이미지 때문에


위의 선정을 바탕으로 그룹당 120장의 이미지를 획득했습니다.

Teachable Machine에 아이돌 공부

다음에 모은 화상으로 학습 데이터의 작성입니다.
이번에는 Teachable Machine을 사용하여 학습 데이터를 만들었습니다.

이미지를 각 그룹에 업로드하고 "모델 훈련"버튼을 누르면 간단하게 학습 데이터를 만들 수있었습니다!

공부시킨 아이돌 그룹의 일람과 멤버 선정은 이쪽!

보기 좋고 쉽게 웹 앱 만들기

우선은 메인이 되는 JS입니다.

const imageModelURL = 'モデルのURL';
      let classifier;

const app = new Vue({
        el: '#app',
        data: {
          modelState: 'モデルロード中...',
          result: '---------',
        },

        async mounted() {
          // カメラからの映像取得
          const stream = await navigator.mediaDevices.getUserMedia({
            audio: false,
            video: true,
          });

          // IDが"myvideo"であるDOMを取得
          const video = document.getElementById('myvideo');

          // videoにカメラ映像をセット
          video.srcObject = stream;

          // 自作モデルのロード
          classifier = ml5.imageClassifier(imageModelURL + 'model.json', video, () => {
            // ロード完了
            app.modelState = 'ロード完了！';
            console.log('Model Loaded!');
          });
        },

        methods: {
         　//ボタンクリックされたら判定開始
          onButtonClicked: async function () {
            const yourFaceResults = await classifier.classify();
            app.result = yourFaceResults[0].label;
            console.log('あなたの顔は' + app.result);
          },
        },
});

HTML과 CSS이지만 1에서 만들면 매우 어렵다고 생각 HTML 템플릿을 사용했습니다.
샘플에는 없었던 Twitter의 버튼 부분만 올려 둡니다.

<a id="twitter_button" class="twitter-share-button" data-text="アイドル顔分け帽子の結果！！あなた顔は・・・" data-show-count="false"></a>

 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

좀 더 이뻐요! !

이번에 할 수 없었던 곳을 적어 둡니다.
・화상・영상의 얼굴만으로 판단하고 싶었다.
・트위터 버튼의 기능에 결과를 자동으로 포함하고 싶었다.
영상의 얼굴 잘라내는으로 BodyPix 시험하려고 했지만 잘 되지 않고, 시간을 들여 너무 Face-Api는 시도하지 않고 이번의 구조가 되었습니다.
Twitter 버튼의 버튼은 js로 메소드를 짜 냈습니다만 잘 작동하지 않고 사이트의 탭명이 트윗에 짜넣어진다고 하는 곳에서 단념.

끝에

기계 학습은 자신에게 손이 닿지 않는 것으로 생각했지만 매우 쉽게 모델을 만들 수있었습니다.
또 이번 Twitter에서 판단해 주었으면 하는 그룹을 모집했습니다.
대답 해 주신 분 정말 감사합니다.
만약, 이 그룹도 넣으면 좋겠다고 하는 것이 있으면 코멘트로 가르쳐 주세요.