동기 부여

일본에서 일하는 저에게는 사전이 가장 많이 사용하는 프로그램입니다.
물론 모르는 단어가 많이 있습니다. 일반적으로 모르는 단어가 있으면 단어를 복사하여 사전에 붙여 넣지만 때로는 사진에있는 단어에 대해 힘들었습니다. 그 한자 하나하나를 손으로 그려야 합니다.
그래서 이번에 사진의 텍스트를 AI로 인식시켜 디지털 문자 코드로 변환하는 LINE BOT을 만들어 봅시다.

　개요

요소

이번 시스템은 3가지 요소가

클라이언트: 이 사용자로 이어지는 곳입니다. 텍스트 사진을 업로드하면 결과가 표시됩니다. 이번에 사용하고 싶은 서비스는 Line Bot입니다.

서버 : 클라이언트에서 이미지를 받아 OCR 서비스로 보내고 결과를 처리하여 클라이언트로 보냅니다.

OCR 서비스: OCR(Optical Character Recognition: 광학 문자 인식)이란, 활자의 문서의 이미지(통상 이미지 스캐너로 캡쳐된다)를 문자 코드의 열로 변환하는 소프트웨어이다(소스: 위키피디아).

흐름

① 서버는 LineAPI로 사용자가 보낸 이미지를 읽고 파일을 저장하는 단계입니다.
② 1단계의 파일을 Google의 OCR 서비스로 보냅니다.
③ 구글의 응답에서 필요한 부분을 추출합니다.
④ 3단계의 결과를 LineAPI로 사용자에게 회신합니다.

코드

'use strict';

const fs = require('fs');
const keyConfig = require('./config');
const express = require('express');
const bodyParser = require('body-parser');
const request = require('request');
const app = express();
app.use(bodyParser.json());
const line = require('@line/bot-sdk');
const vision = require('@google-cloud/vision');

const PORT = process.env.PORT || 3000;
const config = {
    channelSecret: keyConfig.line.channelSecret,
    channelAccessToken: keyConfig.line.channelAccessToken
};

const lineClient = new line.Client(config);

async function googleOCR(fileName, token) {
    const googleClient = new vision.ImageAnnotatorClient();

    googleClient.documentTextDetection(fileName)
    .then(response => {
        return lineClient.replyMessage(token, {
            type: 'text',
            text: response[0].fullTextAnnotation.text
        });
    })
    .catch(err => {
        console.error(err);
    });
};

const sampleFunction = async (event) => {
    const options = {
        url: `https://api.line.me/v2/bot/message/${event.message.id}/content`,
        method: 'get',
        headers: {
            'Authorization': 'Bearer ' + keyConfig.line.channelAccessToken,
        },
        encoding: null
    };
    const fileName = './image.jpg';

    request(options, function(error, response, body) {
        if (!error && response.statusCode == 200) { 
            fs.writeFileSync(fileName, new Buffer.from(body), 'binary');
            console.log('file saved');
        }
    });

    return googleOCR(fileName, event.replyToken);
};

async function handleEvent(event) {
    if(event.message.type !== 'image') {
        return;
    }
    return sampleFunction(event);
}


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

app.listen(PORT);
console.log(`ポート${PORT}番でExpressサーバーを実行中です…`);

결과

참고:
LINE BOT에서 Node.js로 이미지 수신 및 저장
Google Nodejs API