프로그래밍 아마추어가 이미지 인식 AI로 견종 응답 서비스를 만들어 보았습니다.

프로그래밍 초보자도 AI 서비스를 만져 볼 수 있었기 때문에 기록합니다.

자신의 기술 수준

・Progate로 HTML/CSS, JavaScript, Node.JS를 받았다
· Express 프레임 워크에서 get 통신과 post 통신을 처리 할 수있게되었습니다.
・JS의 async/await의 개념이 조금만 이해되어 왔다
· Promise는 이해할 수 없다.

이번에 입력 한 것

Microsoft가 제공하는 CustomVison이라는 서비스의 존재를 알았습니다.

태그가 지정된 이미지를 포함하여 학습
↓
학습한 내용에 근거해, 새롭게 화상을 보이면 어느 태그에 가까운 화상인지 판단한다, 라고 하는 서비스입니다.
대단해! !

더욱 API화되어 있기 때문에 외부와 연계시킬 수 있는 것 같습니다.

이번에 도전한 출력

CustomVison에게 개의 이미지를 학습시켜 LINEbot과 연결하는 것으로, 「화상을 던지면 견종을 분석해 응답해 주는 LINEbot」을 만들어 보았습니다.

먼저 개 이미지를 넣고 태그를 붙여 기계 학습시킵니다.


그리고 이전에 만든 LINEbot의 프로그램과 연결한다.

'use strict';

const express = require('express');
const line = require('@line/bot-sdk');
const axios = require('axios');
const PORT = process.env.PORT || 3000;

const config = {
  channelSecret: '', //チャンネルシークレット
  channelAccessToken: '' //チャンネルアクセストークン
};

const app = express();

app.post('/webhook', line.middleware(config), (req, res) => {
    console.log(req.body.events);
    Promise
      .all(req.body.events.map(handleEvent))
      .then((result) => res.json(result));
});

const client = new line.Client(config);

function handleEvent(event) {
  console.log(event);

  // 今回は画像投稿を通す
  if (event.type !== 'message' || event.message.type !== 'image' ) {
    return Promise.resolve(null);
  }

  let mes = ''
  if(event.message.type === 'image'){
    mes = '画像を判定しています！';
    getFaceDetect2(event.message.id, event.source.userId, config.channelAccessToken );
  } else{
    mes = event.message.text;
  }



  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: mes
  });
}

const getFaceDetect2 = async (messageId , userId, accessToken) => {
  console.log("getFaceDetect2");
  console.log(messageId);
  console.log(accessToken);

  //LINEbotから画像取得
  const configImageAPI = {
    url: `https://api.line.me/v2/bot/message/${messageId}/content`,
    method: 'get',
    headers: {
        'Authorization': 'Bearer ' + accessToken,
    },
    responseType: 'arraybuffer'
  };

  let responseImageAPI;
  try {
    // axios はRequest Configで受信データのタイプを設定できる。今回は arraybuffer が適切。
    responseImageAPI = await axios.request(configImageAPI);
    console.log('image data get');
  } catch (error) {
    console.log('post Error');
    console.error(error);
  }

  //Custom Vision APIへのリクエスト

  const CUSTOM_VISION_API_ENDPOINT_URL = 'CustomVisionAPIのURL';

  // JSONで送るので Content-type ヘッダーに application/json 指定
  const configCustomVisionAPI = {
    url: CUSTOM_VISION_API_ENDPOINT_URL,
    method: 'post',
    headers: {
      'Content-type': 'application/octet-stream',
      'Prediction-Key':''　//CustomVisionAPIのプレディクションキー
    },
    data: responseImageAPI.data
  };

  // axiosの送信設定
  let responseCustomVision;
  try {
    // POSTリクエストで送る
    responseCustomVision = await axios.request(configCustomVisionAPI);
    console.log("post OK");
    // データ送信が成功するとレスポンスが来る
    console.log(responseCustomVision.data.predictions[0].tagName);
  } catch (error) {
    console.log("post Error");
    // ダメなときはエラー
    console.error(error);
  }

  //LINEbotから返信
  await client.pushMessage(userId, {
    type: 'text',
    text: JSON.stringify(responseCustomVision.data.predictions[0].tagName),
  });
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);

제대로 화상 해석해 회답해 주었습니다!



일본어로 건네려고 하면 에러가 되어 버려 해결할 수 없었으므로 영어인 채입니다.

되돌아가다

· 역시 일본어로 대답하고 싶다
・지금은 시바견・퍼그・치와와의 3종류 밖에 학습시키고 있지 않기 때문에 실용화시킨다면 더 학습시킬 필요가 있다.
・학습에도 화상을 1개 1개 손으로 올려 태그 붙이는 맨파워가 걸린다.
· 마음대로 학습해 주면 더 편해지지만 그런 기술이 있는지 궁금하다.