문자 인식 웹 앱 만들기

streamlit 패키지를 사용해서 지금까지 실습만 문자 인식 프로그램을 웹 앱으로 만들어 보겠습니다. 웹 앱에 이미지 파일을 업로드하면, 함수 read_text_and_draw_line()을 사용해서 이미지 속 문자를 인식하고 바운딩 박스를 그린 결과를 출력한 것입니다. 웹 앱의 레이아웃을 간단히 그려 보면 다음과 같습니다.

비주얼 스튜디오 코드에서 새로운 파일을 만들고, 파일명을 'step_2_4.py'로 지정한 후, 다음 코드를 입력하세요.

from pathlib import Path
import streamlit as st
from step_1 import OUT_DIR
from step_2_3 import OUT_2_3, read_text_and_draw_line

st.title("✌ 만들면서 배우는 문자 인식 웹 앱")  # 웹 앱 제목

uploaded = st.file_uploader("인식할 이미지를 선택하세요.") # 파일 업로더 위젯 # 08
if uploaded is not None: # 파일이 업로드 되면, # 09
    tmp_path = OUT_DIR / f"{Path(__file__).stem}.tmp" # 10
    tmp_path.write_bytes(uploaded.getvalue()) # 업로드한 이미지 지정 # 11

    col_left, col_right = st.columns(2) # 두 개의 열로 생성 # 13
    with col_left: # 첫 번째 열 # 14
        st.subheader("원본 이미지") # 부제목 # 15
        st.image(tmp_path.as_posix()) # 원본 이미지 출력 # 16
    with col_right: # 두 번째 열 # 17
        st.subheader("문자 인식 결과") # 부제목
        with st.spinner(text="문자를 인식하는 중입니다..."): # 진행 상황 표시 # 19
            read_text_and_draw_line(tmp_path) # 문자 인식 및 박스 그리기
        st.image(OUT_2_3.as_posix()) # 결과 이미지 출력 # 21

 

08 streamlit 패키지의 함수 file_uploader()를 사용하여 파일 업로드 위젯을 만듭니다.

09 코드가 최초로 실행되는 시점에는 업로드된 파일이 없기 때문에 변수 uploaded를 None으로 초기화합니다.

10~11 변수 uploaded에 저장된 이미지 파일을 temp_path 경로에 임지 파일로 저장합니다.

13 함수 columns()에 숫자 2를 전달하여 두 개의 열을 만들고, 변수 col_left, col_right에 각각  저장합니다.

14~16 첫 번째 열에 '원본 이미지' 문자열과 업로드한 이미지를 출력합니다.

17 '문자 인식 결과' 문자열과 이미지를 출력하기 위해 두 번째 열을 불러옵니다.

19 함수 spinner()를 사용하여 이미지를 불러오는 동안 '문자를 인식하는 중입니다...'를 출력합니다.

21 문자 인식 결과 이미지를 출력합니다.

 

stremlit 패키지를 사용해 생성한 웹 앱은 터미널에서 명령어를 입력해 실행해야 합니다. 비주얼 스튜디오 코드에서 웹 앱으로 연결됩니다.

 

01 비주얼 스튜디오 코드에서 터미널을 열고 다음과 같이 입력하면 웹 브라우저가 열리며 문자 인식 웹 앱으로 연결됩니다.

$ streamlit run ch05/step_2_4.py

 

02 웹 앱 상단의 위젯에서 [Browse files] 버튼을 클릭하고, 'input' 폴더에서 'ocr.jpg' 파일을 선택하세요. 함수 read_text_and_draw_line()이 실행되는 동안 스피너가 들어 가며 '문자를 인식하는 중입니다...'라는 문자열을 보여줍니다.

 

03 문자 인식이 완료되면 원본 이미지와 문자 인식 결과를 웹 앱에서 확인할 수 있습니다.