연습 - Translator 서비스 호출

10분

Azure에서 백 엔드 Translator 서비스를 만들고 변수를 저장하여 준비를 마쳤으므로 텍스트를 번역하는 데 필요한 논리 및 템플릿을 애플리케이션에 추가해 보겠습니다. 이제 다음 단계를 수행합니다.

서비스를 호출하는 코드 추가
결과를 표시하는 템플릿 만들기
애플리케이션 테스트

서비스를 호출하는 코드 추가

app.py에는 애플리케이션에 대한 논리가 포함되어 있습니다. 사용할 라이브러리에 필요한 몇 가지 가져오기를 추가한 다음, 사용자에게 응답하는 새 경로를 추가합니다.

app.py의 ‘맨 위’에 다음 코드 줄을 추가합니다.

import requests, os, uuid, json
from dotenv import load_dotenv
load_dotenv()

맨 윗줄은 나중에 Translator 서비스를 호출할 때 사용할 라이브러리를 가져옵니다. 또한 dotenv에서 load_dotenv를 가져오고 함수를 실행하여 .env에서 값을 로드합니다.

app.py의 ‘맨 아래’에 다음 코드 줄을 추가하여 텍스트를 번역하는 경로 및 논리를 만듭니다.

@app.route('/', methods=['POST'])
def index_post():
    # Read the values from the form
    original_text = request.form['text']
    target_language = request.form['language']

    # Load the values from .env
    key = os.environ['KEY']
    endpoint = os.environ['ENDPOINT']
    location = os.environ['LOCATION']

    # Indicate that we want to translate and the API version (3.0) and the target language
    path = '/translate?api-version=3.0'
    # Add the target language parameter
    target_language_parameter = '&to=' + target_language
    # Create the full URL
    constructed_url = endpoint + path + target_language_parameter

    # Set up the header information, which includes our subscription key
    headers = {
        'Ocp-Apim-Subscription-Key': key,
        'Ocp-Apim-Subscription-Region': location,
        'Content-type': 'application/json',
        'X-ClientTraceId': str(uuid.uuid4())
    }

    # Create the body of the request with the text to be translated
    body = [{ 'text': original_text }]

    # Make the call using post
    translator_request = requests.post(constructed_url, headers=headers, json=body)
    # Retrieve the JSON response
    translator_response = translator_request.json()
    # Retrieve the translation
    translated_text = translator_response[0]['translations'][0]['text']

    # Call render template, passing the translated text,
    # original text, and target language to the template
    return render_template(
        'results.html',
        translated_text=translated_text,
        original_text=original_text,
        target_language=target_language
    )

코드를 주석 처리하여 수행 중인 단계를 설명합니다. 개략적으로 코드가 수행하는 작업은 다음과 같습니다.

사용자가 입력한 텍스트와 양식에서 선택한 언어를 읽습니다.
앞에서 만든 환경 변수를 .env 파일에서 읽습니다.
대상 언어를 포함하는 Translator 서비스를 호출하는 데 필요한 경로를 만듭니다. 소스 언어는 자동으로 감지됩니다.
Translator 서비스에 대한 키, 서비스 위치, 번역의 임의 ID 등을 포함하는 헤더 정보를 만듭니다.
번역할 텍스트를 포함하는 요청의 본문을 만듭니다.
requests에서 post를 호출하여 Translator 서비스를 호출합니다.
서버에서 번역된 텍스트를 포함하는 JSON 응답을 검색합니다.
번역된 텍스트를 검색합니다(다음 참고 사항 참조).
render_template을 호출하여 응답 페이지를 표시합니다.

참고

Translator 서비스를 한 번만 호출하여 여러 문을 여러 언어로 번역할 수 있습니다. 그 결과 서비스에서 반환하는 JSON에는 수많은 정보가 포함되며, 그중 하나의 작은 정보만 필요합니다. 따라서 번역된 텍스트를 얻으려면 몇 가지 수준을 단계별로 수행해야 합니다.

특히 첫 번째 결과, translations 컬렉션, 첫 번째 번역, text를 순서대로 읽어야 합니다. 이 작업은 translator_response[0]['translations'][0]['text']를 호출하여 수행합니다.

[
  {
    "detectedLanguage": {
      "language": "en",
      "score": 1.0
    },
    "translations": [
      {
        "text": "これはテストです",
        "to": "ja"
      }
    ]
  }
]

결과를 표시하는 템플릿 만들기

결과 페이지에 대한 HTML 템플릿을 만들어 보겠습니다.

Visual Studio Code의 탐색기 도구에서 템플릿을 선택하여 템플릿에 새 파일을 만듭니다. 그런 다음, 새 파일을 선택합니다.
파일 이름을 results.html로 지정합니다.

results.html에 다음 HTML을 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <title>Result</title>
</head>
<body>
    <div class="container">
        <h2>Results</h2>
        <div>
            <strong>Original text:</strong> {{ original_text }}
        </div>
        <div>
            <strong>Translated text:</strong> {{ translated_text }}
        </div>
        <div>
            <strong>Target language code:</strong> {{ target_language }}
        </div>
        <div>
            <a href="{{ url_for('index') }}">Try another one!</a>
        </div>
    </div>
</body>
</html>

render_template에서 {{ }}를 사용하여 명명된 매개 변수로 전달한 original_text, translated_text 및 target_language에 액세스합니다. 이 작업은 콘텐츠를 일반 텍스트로 렌더링하도록 Flask에 지시합니다. 또한 url_for('index')를 사용하여 기본 페이지로 돌아가는 링크를 만듭니다. 기술적으로 원본 페이지의 경로를 입력할 수 있지만 url_for를 사용하면 제공한 이름(이 경우 index)을 사용하여 함수의 경로를 읽도록 Flask에 지시할 수 있습니다. 사이트를 다시 정렬하는 경우에도 링크에 대해 생성된 URL은 항상 유효합니다.

페이지 테스트

Visual Studio Code의 통합 터미널로 돌아가거나 Ctrl+` 또는 Cmd-`(Mac)를 사용하여 다시 엽니다. 사이트가 현재 실행 중인 경우 애플리케이션에서 환경 변수를 읽도록 중지했다가 다시 시작해야 합니다.

Ctrl+C를 사용하여 Flask 애플리케이션을 중지합니다.
flask run 명령을 실행하여 서비스를 다시 시작합니다.
http://localhost:5000으로 이동하여 애플리케이션을 테스트합니다.
텍스트 영역에 텍스트를 입력하고 언어를 선택한 다음, 번역을 선택합니다.
결과가 표시됩니다.

축하합니다.

이제 Translator를 사용하여 번역을 구현하는 웹 사이트를 성공적으로 만들었습니다. 언어와 의사소통은 컴퓨터에게 항상 명확하지는 않은 문맥에 의존하기 때문에 결과가 완벽하지 않을 수 있습니다. 그러나 목표에 해당하는 효과적인 소통의 경우 일반적으로 정확도 높은 결과를 제공합니다.

여기에서 제공한 코드는 원하는 모든 애플리케이션에 통합할 수 있습니다. 지금까지 만든 웹 사이트에서 계속 빌드하거나 Azure App Services에 배포할 수도 있습니다.

연습 - Translator 서비스 호출

서비스를 호출하는 코드 추가

결과를 표시하는 템플릿 만들기

페이지 테스트

축하합니다.

지식 점검

피드백