LINE에서 이미지의 일본어를 인식합시다.

동기 부여



일본에서 일하는 저에게는 사전이 가장 많이 사용하는 프로그램입니다.
물론 모르는 단어가 많이 있습니다. 일반적으로 모르는 단어가 있으면 단어를 복사하여 사전에 붙여 넣지만 때로는 사진에있는 단어에 대해 힘들었습니다. 그 한자 하나하나를 손으로 그려야 합니다.
그래서 이번에 사진의 텍스트를 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

    좋은 웹페이지 즐겨찾기