Cvičení – volání služby Translator

10 min

Když máte v Azure vytvořenou back-endovou službu Translator a připravené uložené proměnné, můžete se zaměřit na přidání potřebné logiky a šablony pro překlad textu do aplikace. Projdeme si následující kroky:

Přidání kódu, který volá službu
Vytvoření šablony pro zobrazení výsledků
Testování aplikace

Přidání kódu, který volá službu

Logika aplikace je v souboru app.py. Přidáte několik požadovaných importů knihoven, které budete používat, a poté doplníte novou trasu, která slouží jako odpověď uživateli.

Úplně na začátek souboru app.py přidejte následující řádky kódu:

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

Horní řádek importuje knihovny, které použijete později při volání služby Translator. Naimportujete také load_dotenv z dotenv a spustíte funkci, která načte hodnoty ze souboru .env.

Na konec souboru app.py přidejte následující řádky kódu, které vytvoří trasu a logiku překladu textu:

@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
    )

Prováděné kroky jsou popsané v komentáři kódu. Činnost kódu při pohledu z vyšší úrovně:

Přečte text, který zadal uživatel, a jazyk vybraný ve formuláři.
Přečte proměnné prostředí vytvořené v předchozích krocích ze souboru .env.
Vytvoří cestu potřebnou k volání služby Translator, která obsahuje cílový jazyk (rozpoznání zdrojového jazyka je automatické).
Vytvoří informace v hlavičce, která obsahuje klíč služby Translator, umístění služby a libovolné ID překladu.
Vytvoří tělo požadavku s textem, který chcete přeložit.
Volá metodu post na requests, což je volání služby Translator.
Načte ze serveru odpověď JSON, která obsahuje přeložený text.
Načte přeložený text (viz následující poznámka).
Volá šablonu render_template kvůli zobrazení stránky odpovědi.

Poznámka:

Při volání služby Translator můžete jedním voláním přeložit více výrazů do několika jazyků. Výsledkem je, že kód JSON vrácený službou obsahuje řadu informací, ze kterých potřebujete jenom malou část. Proto se potřebujete posunout o několik úrovní níže, abyste se dostali k přeloženém textu.

Konkrétně potřebujete přečíst první výsledek, pak přejít v kolekci translations k prvnímu překladu a pak na text. Provedete to voláním metody translator_response[0]['translations'][0]['text'].

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

Vytvoření šablony pro zobrazení výsledků

Vytvořte šablonu HTML stránky s výsledky.

Vytvořte nový soubor ve složce templates tím, že v nástroji Průzkumník editoru Visual Studio Code vyberete templates. Pak vyberte Nový soubor.
Pojmenujte soubor results.html.

Do souboru results.html přidejte následující kód 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>

Všimněte si, že používáte položky original_text, translated_text a target_language, které jste předali jako pojmenované parametry šablony render_template operací {{ }}. Tato operace říká Flasku, aby vykreslil obsah jako prostý text. Používáte také url_for('index') k vytvoření odkazu zpět na výchozí stránku. Technicky sice je možné zadat cestu na původní stránku, ale když použijete funkci url_for, řeknete Flasku, aby jako cestu funkce přečetl zadaný název (v tomto případě je to index). Pokud změníte uspořádání webu, bude vygenerovaná adresa URL použitá pro odkaz vždy platná.

Testování stránky

Vraťte se do integrovaného terminálu v editoru Visual Studio Code (nebo ho znovu otevřete pomocí kláves Ctrl nebo Cmd- na Macu). Pokud web právě běží, je potřeba ho zastavit a restartovat, aby aplikace přečetla proměnné prostředí.

K zastavení aplikace Flask použijte kombinaci kláves Ctrl+C.
Spusťte příkaz flask run, který restartuje službu.
Přejděte na adresu http://localhost:5000 a otestujte aplikaci.
Do textového pole zadejte text, zvolte jazyk a vyberte Translate (Přeložit).
Zobrazí se výsledky.

Blahopřejeme

Úspěšně jste vytvořili web, který k implementaci překladů používá službu Translator. Jazyk a komunikace závisejí na kontextu, který není počítači vždy jasný. Možná jste si všimli, že výsledky nejsou úplně dokonalé. Většinou obsahují to podstatné nebo jsou dostatečně blízko, aby umožňovaly efektivní komunikaci – což je cíl.

Poskytnutý kód můžete zakomponovat do libovolné aplikace. Můžete dále pracovat na vytvořeném webu, nebo ho můžete dokonce nasadit do Azure App Services.

Prověřte si své znalosti

Pokračovat