Esercizio: Chiamare il servizio Traduttore

• 10 minuti

Con il servizio Traduttore back-end creato in Azure e le variabili archiviate pronte per l'uso, è possibile procedere con l'aggiunta della logica e del modello necessari all'applicazione per tradurre il testo. Verranno eseguiti i passaggi seguenti:

1. Aggiungere il codice per chiamare il servizio
2. Creare il modello per visualizzare i risultati
3. Testare l'applicazione

Aggiungere il codice per chiamare il servizio

app.py contiene la logica per l'applicazione. Verranno aggiunte due importazioni obbligatorie per le librerie che verranno usate, seguite dalla nuova route per rispondere all'utente.

1. All'inizio del file app.py aggiungere le righe di codice seguenti:

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

La prima riga importerà le librerie che verranno usate in seguito quando si effettuerà la chiamata al servizio Traduttore. Viene anche importato load_dotenv da dotenv ed eseguita la funzione che caricherà i valori di .env.

2. Alla fine del file app.py aggiungere le righe di codice seguenti per creare la route e la logica per la traduzione del testo:

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

I commenti del codice descrivono i passaggi eseguiti. A livello generale, il codice esegue le operazioni seguenti:

1. Legge il testo immesso dall'utente e la lingua selezionata dall'utente nel modulo
2. Legge le variabili di ambiente create in precedenza dal file .env
3. Crea il percorso necessario per chiamare il servizio Traduttore, che include la lingua di destinazione (la lingua di origine viene rilevata automaticamente)
4. Crea le informazioni di intestazione, che includono la chiave per il servizio Traduttore, il percorso del servizio e un ID arbitrario per la traduzione
5. Crea il corpo della richiesta, che include il testo che si vuole tradurre
6. Chiama post in requests per effettuare la chiamata al servizio Traduttore
7. Recupera la risposta JSON dal server, che include il testo tradotto
8. Recupera il testo tradotto (vedere la nota seguente)
9. Chiama render_template per visualizzare la pagina di risposta

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

Creare il modello per visualizzare i risultati

Creare ora il modello HTML per la pagina dei risultati.

1. Creare un nuovo file in templates selezionando templates nello strumento Explorer in Visual Studio Code. Quindi selezionare Nuovo file

2. Denominare il file results.html

3. Aggiungere il codice HTML seguente a 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>
   

Si noterà che si accede a original_text, translated_text e target_language, passati come parametri denominati in render_template usando {{ }}. Questa operazione indica a Flask di eseguire il rendering del contenuto come testo normale. Viene usato anche url_for('index') per creare un collegamento per tornare alla pagina predefinita. Sebbene sia possibile, tecnicamente, digitare il percorso della pagina originale, usando url_for si indica a Flask di leggere il percorso della funzione con il nome specificato (in questo caso index). Se il sito viene riorganizzato, l'URL generato per il collegamento sarà sempre valido.

Testare la pagina

Tornare al terminale integrato in Visual Studio Code (oppure riaprirlo con CTRL-` o Cmd-` in Mac). Se il sito è attualmente in esecuzione, sarà necessario arrestarlo e riavviarlo in modo che l'applicazione legga le variabili di ambiente.

1. Usare CTRL+C per arrestare l'applicazione Flask

2. Eseguire il comando flask run per riavviare il servizio

3. Passare a http://localhost:5000 per testare l'applicazione

4. Immettere il testo nell'area di testo, scegliere una lingua e selezionare Traduci

   

5. Verranno visualizzati i risultati.

   

Lezione completata

A questo punto è stato creato un sito Web che usa il servizio Traduttore per implementare le traduzioni. Poiché la lingua e la comunicazione si basano su un contesto, non sempre noto a un computer, è possibile osservare che i risultati non sono perfetti. Tuttavia, i risultati sono abbastanza corretti o sufficientemente appropriati per una comunicazione efficace, che è il vero obiettivo.

Il codice fornito può essere incorporato in qualsiasi applicazione. È possibile continuare a compilare il sito Web creato o distribuirlo ai servizi app di Azure.

Verificare le conoscenze