Övning – skapa Translator-tjänst

10 minuter

Nu när vår Translator-tjänst i serverdelen skapats på Azure och variablerna är lagrade och är redo så ska vi fokusera på att lägga till nödvändig logik och mall till vårt program för att översätta texten. Vi ska gå igenom följande steg:

Lägga till kod för att anropa tjänsten
Skapa mallen för att visa resultat
Testa vårt program

Lägga till kod för att anropa tjänsten

app.py innehåller logiken för vårt program. Vi ska lägga till ett par obligatoriska importer för de bibliotek som vi ska använda, följt av den nya vägen för att svara användaren.

Lägg till följande kodrader överst i app.py:

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

Den översta raden importerar bibliotek som vi kommer använda senare när vi gör anropet till Translator-tjänsten. Vi kommer även importera load_dotenv från dotenv och köra funktionen, som läser in värdena från .env.

Lägg till följande rader med kod för att skapa vägen och logiken för översättning av text längst ned i 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
    )

Koden kommenteras för att beskriva de steg som vidtas. På hög nivå gör vår kod följande:

Läser den text användaren har angett och det språk de har valt i formuläret
Läser de miljövariabler som vi skapade tidigare i vår .env-fil
Skapar den sökväg som behövs för att anropa Translator-tjänsten, som innehåller målspråket (källspråket identifieras automatiskt)
Skapar rubrikinformationen, som innehåller nyckeln för Translator-tjänsten, platsen för tjänsten och ett godtyckligt ID för översättningen
Skapar brödtexten i begäran, som innehåller den text som vi vill översätta
Anropar post på requests för att anropa Translator-tjänsten
Hämtar JSON-svaret från servern, som innehåller den översatta texten
Hämtar den översatta texten (se följande anmärkning)
Anropar render_template för att visa svarssidan

Kommentar

När du anropar Translator-tjänsten är det möjligt att flera instruktioner översätts till flera språk i ett enda anrop. Det innebär att den JSON som returneras av tjänsten innehåller mycket information, varav vi bara behöver en liten del. Därför måste vi stega ned några nivåer för att hämta den översatta texten.

Mer specifikt behöver vi läsa det första resultatet, därefter till samlingen av translations, den första översättningen och sedan till text. Detta görs av anropet: translator_response[0]['translations'][0]['text']

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

Skapa mallen för att visa resultat

Nu ska vi skapa HTML-mallen för resultatsidan.

Skapa en ny fil i templates genom att välja templates i Explorer-verktyget i Visual Studio Code. Välj därefter Ny fil
Namnge filen results.html

Lägg till följande HTML-kod till results.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>

Du kommer märka att vi kommer åt original_text, translated_textoch target_language, som vi angav som namngivna parametrar i render_template med {{ }}. Den här åtgärden instruerar Flask att återge innehållet som oformaterad text. Vi använder också url_for('index') för att skapa en länk tillbaka till standardsidan. Även om vi tekniskt sett kunde skriva in sökvägen till den ursprungliga sidan, så använder vi url_for för att instruera Flask att läsa in sökvägen för funktionen med det namn som vi anger (index i det här fallet). Om vi skulle ordna om vår webbplats så kommer den URL som genereras för länken alltid att vara giltig.

Testa sidan

Gå tillbaka till den integrerade terminalen i Visual Studio Code (eller öppna den igen med Ctrl-' eller Cmd-' på en Mac). Om webbplatsen är igång så måste vi stoppa och starta om den så att programmet läser våra miljövariabler.

Tryck på Ctrl+C för att stoppa Flask-programmet
Kör kommandot flask run för att starta om tjänsten
Gå till http://localhost:5000 för att testa programmet
Ange text i textrutan, välj ett språk och välj Översätt
Du kommer att se resultaten!

Grattis!

Nu har du skapat en webbplats som använder Translator för att implementera översättningar! Eftersom språk och kommunikation förlitar sig på sammanhang, vilket inte alltid är uppenbart för en dator, kan du märka att resultatet inte är perfekt. De är dock vanligtvis korrekta eller tillräckligt nära för effektiv kommunikation, vilket är målet!

Koden som vi har angett här kan integreras i vilket program du vill. Du kan fortsätta att bygga på webbplatsen som vi har skapat, eller till och med distribuera den till Azure App Services!

Testa dina kunskaper

Fortsätt