Oefening: Translator-service aanroepen
Nu de back-end-Translator-service is gemaakt in Azure en de variabelen opgeslagen en klaar voor gebruik zijn, richten we de aandacht op het toevoegen van de nodige logica en de sjabloon aan de toepassing voor het vertalen van tekst. We gaan de volgende stappen uitvoeren:
- Code toevoegen voor het aanroepen van de service
- De sjabloon maken voor het weergeven van resultaten
- De toepassing testen
Code toevoegen voor het aanroepen van de service
app.py bevat de logica voor de toepassing. We voegen enkele vereiste importbewerkingen toe voor de bibliotheken die we gaan gebruiken, gevolgd door de nieuwe route om te reageren op de gebruiker.
Voeg helemaal bovenaan het bestand app.py de volgende coderegels toe:
import requests, os, uuid, json from dotenv import load_dotenv load_dotenv()
Met de bovenste regel worden de bibliotheken geïmporteerd die later worden gebruikt bij het aanroepen van de Translator-service. We importeren ook load_dotenv uit dotenv en voeren de functie uit. Hierdoor worden de waarden geladen uit .env.
Voeg onderaan het bestand app.pyde volgende coderegels toe om de route en logica voor het vertalen van tekst te maken:
@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 )
De code is voorzien van commentaar waarmee de stappen worden beschreven die worden uitgevoerd. Op hoog niveau doet de code het volgende:
- Leest de tekst die de gebruiker heeft ingevoerd en de taal die de gebruiker heeft geselecteerd in het formulier
- Leest de omgevingsvariabelen die u eerder hebt gemaakt uit het bestand .env
- Maakt de benodigde paden voor het aanroepen van de Translator-service, met inbegrip van de doeltaal (de brontaal wordt automatisch gedetecteerd)
- Maakt de header-gegevens, waaronder de sleutel voor de Translator-service, de locatie van de service en een willekeurige id voor de vertaling
- Maakt de hoofdtekst van de aanvraag, met inbegrip van de tekst die moet worden vertaald
- Roept
postoprequestsaan om de Translator-service aan te roepen - Haalt het JSON-antwoord op van de server, inclusief de vertaalde tekst
- Haalt de vertaalde tekst op (zie de volgende opmerking)
- Roept
render_templateaan om de antwoordpagina weer te geven
Notitie
Bij het aanroepen van de Translator-service kunnen meerdere teksten in meerdere talen in één aanroep worden vertaald. Als gevolg hiervan bevat de JSON die wordt geretourneerd door de service veel informatie, waarvan we slechts één klein deel nodig hebben. Daarom moeten we een aantal niveaus zakken om de vertaalde tekst op te halen.
Om precies te zijn, moet het eerste resultaat worden gelezen, vervolgens de verzameling translations, de eerste vertaling en vervolgens de tekst text. Dit wordt gedaan met de aanroep: translator_response[0]['translations'][0]['text']
[
{
"detectedLanguage": {
"language": "en",
"score": 1.0
},
"translations": [
{
"text": "これはテストです",
"to": "ja"
}
]
}
]
De sjabloon maken voor het weergeven van resultaten
Laten we de HTML-sjabloon voor de resultatenpagina maken.
Maak een nieuwe map in templates door templates (sjablonen) te selecteren in het hulpprogramma Explorer in Visual Studio Code. Selecteer vervolgens New file (Nieuw bestand)
Geef het bestand de naam results.html
Voeg de volgende HTML toe aan 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>
Merk op dat we original_text, translated_text en target_language hebben doorgegeven als benoemde parameters in render_template door gebruik te maken van {{ }}. Met deze bewerking wordt Flask geïnstrueerd om de inhoud als tekst zonder opmaak weer te geven. Met url_for('index') wordt ook een koppeling gemaakt waarmee de gebruiker kan terugkeren naar de standaardpagina. Hoewel we, technisch gesproken, het pad naar de oorspronkelijke pagina zouden kunnen intypen, wordt met behulp van url_for het pad naar de functie met de opgegeven naam (index in dit geval) opgegeven dat door Flask moet worden gelezen. Op deze manier is de URL die voor de koppeling wordt gegenereerd altijd geldig, ook als we onze site anders indelen.
De pagina testen
Ga terug naar de geïntegreerde terminal in Visual Studio Code (of open deze opnieuw met Ctrl-', of Cmd-' op een Mac). Als de site momenteel wordt uitgevoerd, moeten we deze stoppen en opnieuw opstarten, zodat de omgevingsvariabelen in de toepassing worden gelezen.
Gebruik Ctrl+C om de Flask-toepassing te stoppen
Voer de opdracht
flask runuit om de service opnieuw te startenBlader naar http://localhost:5000 om de toepassing te testen
Voer tekst in het tekstgebied in, kies een taal en selecteer Translate (Vertalen)
De resultaten worden weergegeven.
Gefeliciteerd
U hebt nu een website gemaakt die gebruikmaakt van Translator voor het implementeren van vertalingen. Omdat taal en communicatie afhankelijk zijn van context, die niet altijd duidelijk is voor een computer, zult u merken dat de resultaten niet perfect zijn. Maar meestal zijn de resultaten volkomen juist of goed genoeg voor effectieve communicatie, en daarmee geschikt voor ons doel.
De code die hier is opgegeven, kan in elke gewenste toepassing worden opgenomen. U kunt de gemaakte website verder uitbreiden, of deze zelfs implementeren in Azure App Services!