Gyakorlat – Translator-szolgáltatás hívása

10 perc

Miután létrehozta a Translator háttérszolgáltatást az Azure-ban, és a tárolt változók is készen állnak, rátérhet arra, hogy hozzáadja az alkalmazáshoz a szöveg fordításához szükséges logikát és sablont. A végrehajtandó lépések a következők:

A szolgáltatást hívó kód hozzáadása
Az eredményeket megjelenítő sablon létrehozása
Az alkalmazás tesztelése

A szolgáltatást hívó kód hozzáadása

Az alkalmazás logikáját az app.py fájl tartalmazza. Ehhez fogja hozzáadni a használandó kódtárak szükséges importálását, majd a felhasználónak választ adó új útvonalat.

Az app-py fájl legelejére szúrja be az alábbi kódsorokat:

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

A felső sor később, a Translator szolgáltatás hívásakor használandó kódtárakat importál. Ezt a load_dotenv importálása követi a dotenv kódtárból, majd annak a függvénynek a végrehajtása, amely a .env fájlból tölti be az értékeket.

Az app.py fájl végére szúrja be az alábbi kódsorokat a szövegfordítási útvonal és logika létrehozásához:

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

A kód a végrehajtott lépéseket leíró megjegyzésekkel van ellátva. Általánosságban a kód a következőket végzi el:

Beolvassa a felhasználó által beírt szöveget és az űrlapon kiválasztott nyelvet
Beolvassa a .env fájlból a korábban létrehozott környezeti változókat
Létrehozza a Translator szolgáltatás hívásához szükséges elérési utat, amely tartalmazza a célnyelvet (a forrásnyelv automatikusan van észlelve)
Létrehozza a fejlécadatokat, amelyek között szerepel a Translator szolgáltatás kulcsa, a szolgáltatás helye és a fordítás egy tetszőleges azonosítója
Létrehozza a kérés törzsét, amely tartalmazza a lefordítandó szöveget
A requests kódtárbeli post hívásával meghívja a Translator szolgáltatást
Lekéri a lefordított szöveget tartalmazó JSON-választ a kiszolgálótól
Kiolvassa a lefordított szöveget (lásd az alábbi megjegyzést)
A render_template hívásával megjeleníti a válaszoldalt

Megjegyzés:

A Translator szolgáltatás hívásakor több mondat is lefordítható egyszerre több nyelvre egyetlen hívással. Emiatt a szolgáltatás által visszaadott JSON rengeteg információt tartalmaz, amelynek itt csak egy kis részére van szükség. A lefordított szöveg kinyeréséhez tehát több szinttel lejjebb kell lépni.

Még pontosabban, először az első eredményt kell kiolvasni, majd a translations gyűjteményt, az első fordítást, és abban a text elemet. Ezt a következő hívás valósítja meg: translator_response[0]['translations'][0]['text']

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

Az eredményeket megjelenítő sablon létrehozása

Most hozza létre a HTML-sablont az eredmények oldalához.

Hozzon létre egy új fájlt a templates könyvtárban a Visual Studio Code Explorer eszközének Sablonok menüpontját választva. Ez után válassza az Új fájl lehetőséget
A fájl neve legyen results.html

Szúrja be az alábbi HTML-t a results.html fájlba

<!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>

Megfigyelheti, hogy az original_text, a translated_text és a target_language értékét éri el, amelyeket nevesített paraméterekként adott át a render_template számára a {{ }} szintaxissal. Ez a művelet arra utasítja a Flaskot, hogy egyszerű szövegként renderelje a tartalmat. Az url_for('index') használatával az alapértelmezett oldalra mutató hivatkozást is létrehoz. Bár az eredeti oldal URL-címét gyakorlatilag be is gépelhetné, az url_for használatával arra utasítja a Flaskot, hogy olvassa be a megadott nevű függvény elérési útját (ebben az esetben index). Így a hivatkozáshoz generált URL-cím a webhely átrendezése esetén is mindig érvényes lesz.

Az oldal tesztelése

Térjen vissza a Visual Studio Code integrált termináljára (vagy nyissa meg újra a Ctrl-' vagy a Cmd- billentyűkombinációval Macen). Ha a webhely fut, akkor le kell állítani és újra kell indítani, hogy az alkalmazás beolvassa a környezeti változókat.

Állítsa le a Flask-alkalmazást a Ctrl-C billentyűkombinációval
Adja ki a flask run parancsot a szolgáltatás újraindításához
Az alkalmazás teszteléséhez nyissa meg a http://localhost:5000 címet
Írjon be valamit a szövegmezőbe, válasszon nyelvet, majd válassza a Translate (Fordítás) lehetőséget
Megjelenik az eredmény!

Gratulálunk

Sikeresen létrehozott egy webhelyet, amely a Translator használatával végez fordítást! Megfigyelheti, hogy mivel a nyelv és a kommunikáció függ a szövegkörnyezettől, ami egy számítógép számára nem mindig egyértelmű, az eredmények nem hibátlanok. Ennek ellenére általában teljesen, vagy a hatékony kommunikációhoz elégségesen pontosak, és ez volt a cél!

Az itt bemutatott kódot bármilyen alkalmazásban tetszés szerint felhasználhatja. Folytathatja a webhely kiépítését, és akár üzembe is helyezheti azt az Azure App Services-ben!

Tesztelje tudását

Folytatás