Ruby on Rails : 구글 Vision API 연동

해당 글은 https://blog.naver.com/kbs4674/221250727072 로 부터 게시글이 이전되었습니다.

 

 

구글에서 제공하는 API 기능 중, 이미지를 분석해서 그 중 Text를 찾아내서 뽑아내는 'Google Vision API' 가 있습니다.

이번 시간에는 해당 API 연동법에 대해 알아보겠습니다.

 

 실습 전 참고 

해당 API는 초반에 무료로 제공되나, 무료제공 기간이 끝나면 유료로 전환됩니다.

사용에 주의 바랍니다.

 

 

• 구글 클라우드 콘솔 회원가입 하기 & API 연동 밑준비 하기.

1. https://cloud.google.com/vision/?hl=ko 사이트로 이동 후, '무료로 사용해 보기' 를 클릭합니다.

 

2. 가입과정을 진행해줍니다.

 

3. 아래 사진과같이 나오면 가입이 완료되었습니다.

콘솔 사이트 : https://console.cloud.google.com

 

4. 검색창에  Vision API  를 검색하면 나오는 Cloud Vision API를 클릭합니다.

 

5. Cloud Vision API 라이브러리에 대한 정보가 나오는데, 여기서  사용설정  을 클릭해주세요.

 

6. 여기까지 기본 콘솔 프로젝트 및 API 신청이 끝났습니다.

 

이어서  서비스 계정 키  를 받아보러 가보겠습니다.

https://console.cloud.google.com/apis/credentials/serviceaccountkey?hl=ko&_ga=2.95033177.-453761499.1523441862

위 링크를 클릭해서 이동해주세요.

 

7. 서비스 계정 키를 발급받기 전, 저희는 서비스 계정을 하나 생성해야 합니다.

 

예시로서, 저는 아래와같이 입력했습니다.

 

정보입력이 끝나면,  생성  버튼을 눌러주세요.

그럼 뭔가 하나 다운로드 된게 확인이 됩니다.

 

그리고 좌측에 보이는 열쇠 아이콘 위에 마우스를 올려놓으면 보이는 메뉴인 '사용자 인증 정보' 로 가시면

 

위와같이 아까 저희가 입력한 서비스 계정 키가 생성된게 확인됩니다.

아까 다운로드된 파일은 저의 계정정보가 담긴 파일로,  .json  형식으로 되어있습니다.

 

뭔지는 모르겠는데 재미난 정보들이 주르르륵 있네요.

 주의  해당 json 파일은 Github 등에서 외부에서 임의로 열람되지 않게 해주세요.

이 파일이 외부로 유출되고 까딱 잘못되면 외부 사용자에 의해 요금이 과금될 수 있습니다.

 참고  Github에 파일이 push될 때 일부 파일은 업로드 되지않게 하기 - .gitignore

https://kbs4674.tistory.com/37

 

이것으로 구글에서의 모든 준비는 끝났습니다.

 

 

• 구글 API : 레일즈에서의 작업 & 구글 API와의 연동

1. 레일즈 프로젝트로 넘어가서, 구글에서는 친절하게 API 연동을 위한 Gem을 제공합니다.

 /Gemfile  로 이동하신 후, 다음 내용을 입력해주세요.

# 구글 오픈 API : google-cloud-vision
gem 'google-cloud-vision'

그리고 Gem을 설치해주세요.

bundle install

 

2. 자신의 레일즈 프로젝트 안에 전에 받았던 계정정보가 담긴 json 파일을 넣어둡니다.

 

예시로, 저는 google이라는 새로운 폴더를 만들고, 그 안에 json 파일을 넣었습니다.

그리고, 이미지 분석 테스트를 위해  public 디렉토리  에도 예제이미지를 넣어둡니다.

예시로 저는 다음 이미지(./public/card.png)를 사용해보겠습니다.

 

 

 

3. 레일즈 프로젝트의 최상위 위치(Gemfile, app, config 등 파일들이 있는 위치)로 가셔서 새로운 루비파일을 만듭니다.

저는  test.rb  라는 이름의 파일을 만들었습니다.

 

4. 자신의 루비 파일에 다음 내용을 작성합니다.

require "google/cloud/vision"
 
# Your Google Cloud Platform project ID
vision = Google::Cloud::Vision.new(
  project: "[구글 API 프로젝트 ID]",
  keyfile: "[Key값 json 파일 위치]"
 )
 
image  = vision.image "(분석할 이미지 위치)"
puts image.text

그런데 여기서.. 구글 API 프로젝트 ID는 저희가 처음보는건데요,

이걸 확인하는 방법은 2가지가 있습니다.

 

1) Json 파일 열람

2) 구글 API 콘솔사이트에서 확인

 

 test.rb  의 예시코드로서 저는 다음과같이 작성했습니다.

require "google/cloud/vision"
 
# Your Google Cloud Platform project ID
vision = Google::Cloud::Vision.new(
  project: "extreme-outpost-200813",
  keyfile: "./google/key.json"
 )
 
image  = vision.image "./public/img/card.png"
puts image.text

 

5. 모든 준비가 끝났습니다.

터미널에 다음 명령어를 입력해주세요.

# ruby [루비 파일명].rb
ruby test.rb

6. 결과가 잘 나오는게 확인됩니다!

 

 

7. Text 추출 말고도 인물 표정 분석 등 다양하고, 재밌는 분석들도 많으니 참고 바랍니다!

image  = vision.image "./public/img/face2.jpg"
 
image.faces.each do |face|
  puts "Joy:      #{face.likelihood.joy}"
  puts "Anger:    #{face.likelihood.anger}"
  puts "Sorrow:   #{face.likelihood.sorrow}"
  puts "Surprise: #{face.likelihood.surprise}"
end

 

 

• Ruby on Rails에 구글 Vision API 적용하기

 실습 전 참고 

1. Post Scaffold에 적용해보는 것을 예시로 설명합니다.

2. POST DB Attribute(속성) 설명

  · title : 제목          · image_upload : 이미지

  · content : 내용     · analyst : 이미지 Text 분석결과 출력

3. google-cloud-vision Gem 설치가 이미 되어있는 상태에서 설명이 시작됩니다.

4.  Google API 키는  /google  폴더에 넣은 상태로 시작됩니다.

5. 이미지 업로드 기능이 이미 적용되어있다는 가정 하에 설명합니다.

 ※ Scaffold에 AWS S3 연동을 활용한 이미지 업로드 적용 : https://kbs4674.tistory.com/49?category=822778

 

이제 본격적으로 레일즈 프로젝트에 Vision API를 적용해 보겠습니다.

 참고  scaffold의  _form.html.erb  에 이미지 업로드 코드 추가를 원하시면 다음 내용과 같이 입력해주시면 됩니다.

<%= form.file_field :image_upload %>

<%= form_with(model: post, local: true) do |form| %>
    ...
    <%= form.file_field :image_upload %>
    ...
<% end %>

 

시작전에 앞서, 제 테이블 Attribute 부터 간단히 보고 넘어가겠습니다.

 참고  꼭 저처럼 안해도 되며, 제가 보여드리는 Table Attribute(속성) 이름은 예시입니다.

## /db/migrate/(기간)_create_posts.rb
 
class CreatePosts < ActiveRecord::Migration[5.1]
  def change
    create_table :posts do |t|
      t.string :title # 제목
      t.text :content # 내용
      t.string :image_upload # 이미지 업로드
      t.string :analyst # 구글 API 이미지 분석결과가 자동으로 입력되는 Attribute
      
      t.timestamps
    end
  end
end

 

1.  /app/controller/posts_controller.rb  에 다음 내용을 추가합니다.

1) require 코드 추가

require "google/cloud/vision" # 구글 Vision API 연동

require "google/cloud/vision" # 구글 Vision API 연동
 
class PostsController < ApplicationController

 

2) create 액션 내 첫 번째 줄에 @vision 변수에 대한 코드 추가

@vision = Google::Cloud::Vision.new(
  project: "[구글 API 프로젝트 ID]",
  keyfile: "./google/key.json"
)

def create
    # 구글 API 연동
    @vision = Google::Cloud::Vision.new(
        project: "[구글 API 프로젝트 ID]",
        keyfile: "./google/key.json"
    )
    
    @post = Post.new(post_params)
    ...
end

 

3)  if @post.save  코드 다음줄에 들어갈 내용

## 게시글 form에 기록된 parameter들은 DB 저장 이후로 넘겨받을 수 있으므로 @post.save 아랫 줄에 구글 API 연동코드 입력
@image_analyst = @vision.image "#{@post.image_upload}"
@post.analyst = @image_analyst.text
@post.save # @post.analyst에 대한 DB기록 저장

respond_to do |format|
  if @post.save
    ## 게시글 form에 기록된 parameter들은 DB 저장 이후로 넘겨받을 수 있으므로 @post.save 아랫 줄에 구글 API 연동코드 입력
    @image_analyst = @vision.image "#{@post.image_upload}"
    @post.analyst = @image_analyst.text
    @post.save # @post.analyst에 대한 DB기록 저장
        
    format.html { redirect_to @post, notice: 'Post was successfully created.' }  
    ... (내용 생략) ...
  end
end

 

4) 최종 완성본 코드

require "google/cloud/vision" # 구글 Vision API 연동
 
class PostsController < ApplicationController
 ...
 
  # POST /posts
  # POST /posts.json
  def create
    # 구글 API 연동
    @vision = Google::Cloud::Vision.new(
        project: "[구글 API 프로젝트 ID]",
        keyfile: "./google/key.json"
    )
    
    @post = Post.new(post_params)
 
    respond_to do |format|
      if @post.save
        ## 게시글 form에 기록된 parameter들은 DB 저장 이후로 넘겨받을 수 있으므로 @post.save 아랫 줄에 구글 API 연동코드 입력
        @image_analyst = @vision.image "#{@post.image_upload}"
        @post.analyst = @image_analyst.text
        @post.save # @post.analyst에 대한 DB기록 저장
        
        format.html { redirect_to @post, notice: 'Post was successfully created.' }
        format.json { render :show, status: :created, location: @post }
      else
        format.html { render :new }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end
 
  ...
end

 

2. 코드를 저장 후, sacffold에 직접 이미지 업로드 후 결과를 봅니다.

 

참 쉽죠! =_=

 

 

• 참고 자료

1. Vision API 설치법 설명 1 [클릭]

2. Vision API 설치법 설명 2 [클릭]

3. Vision API 설치법 설명 3 [클릭]