Latihan - Memanggil layanan Penerjemah

10 menit

Setelah layanan Penerjemah backend yang dibuat di Azure serta variabel yang disimpan sudah siap, sekarang saatnya untuk menambahkan logika dan templat yang diperlukan ke aplikasi agar dapat menerjemahkan teks. Kita akan melakukan langkah-langkah berikut:

Menambahkan kode untuk memanggil layanan
Membuat templat untuk menampilkan hasil
Menguji aplikasi

Menambahkan kode untuk memanggil layanan

app.py berisi logika aplikasi kita. Kita akan menambahkan beberapa impor yang diperlukan untuk pustaka yang akan digunakan, yang diikuti dengan rute baru untuk merespons pengguna.

Di bagian teratasapp.py, tambahkan baris kode berikut:

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

Baris yang paling atas akan mengimpor pustaka yang akan kita gunakan nanti, tepatnya saat melakukan panggilan ke layanan Penerjemah. Kita juga mengimpor load_dotenv dari dotenv dan menjalankan fungsi yang akan memuat nilai dari .env.

Di bagian bawahapp.py, tambahkan baris kode berikut untuk membuat rute dan logika untuk menerjemahkan teks:

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

Kode dikomentari untuk menjelaskan langkah-langkah yang sedang dilakukan. Pada tingkat tinggi, berikut adalah tindakan yang dilakukan kode kita:

Membaca teks yang dimasukkan pengguna, serta bahasa yang dipilih pada formulir
Membaca variabel lingkungan yang telah kita buat sebelumnya dari file .env
Membuat jalur yang diperlukan untuk memanggil layanan Penerjemah, yang salah satunya adalah bahasa target (bahasa sumber terdeteksi secara otomatis)
Membuat informasi header yang mencakup kunci layanan Penerjemah, lokasi layanan, serta ID arbitrer untuk hasil terjemahan
Membuat isi permintaan yang juga berisikan teks yang ingin kita terjemahkan
Memanggil post ke requests untuk memanggil layanan Penerjemah
Mengambil respons JSON dari server, yang juga mencakup teks yang sudah diterjemahkan
Mengambil teks yang telah diterjemahkan (lihat catatan berikut)
Memanggil render_template untuk menampilkan halaman respons

Catatan

Saat memanggil layanan Penerjemah, penerjemahan beberapa pernyataan ke beberapa bahasa dapat dilakukan dalam satu panggilan. Sebagai hasilnya, JSON yang ditampilkan oleh layanan berisi banyak informasi, meskipun yang kita butuhkan hanya sebagian kecil darinya. Karena itu, kita harus menuruni beberapa tingkat untuk mendapatkan teks yang telah diterjemahkan.

Secara khusus, kita harus membaca hasil pertama, kemudian ke koleksi translations, terjemahan yang pertama, lalu ke text. Tindakan ini dapat dilakukan dengan panggilan: translator_response[0]['translations'][0]['text']

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

Membuat templat untuk menampilkan hasil

Mari kita buat templat HTML untuk halaman hasil.

Buat file baru dalam templat dengan memilih templat di alat Penjelajah di Visual Studio Code. Lalu pilih File baru
Beri nama results.html pada file

Tambahkan HTML berikut ke 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>

Anda akan melihat bahwa kita mengakses original_text, translated_text, dan target_language, yang kita teruskan sebagai parameter bernama di render_template menggunakan {{ }}. Operasi ini memberitahukan kepada Flask agar merender konten sebagai teks biasa. Kita juga menggunakan url_for('index') untuk membuat tautan kembali ke halaman default. Meskipun, secara teknis, kita bisa mengetik jalur ke halaman asli, penggunaan url_for akan memberi tahu Flask agar membaca jalur untuk fungsi dengan nama yang kita berikan (dalam hal ini, index). Jika kita mengatur ulang situs kita, URL yang dihasilkan untuk tautan akan selalu valid.

Menguji halaman

Kembali ke terminal terintegrasi di Visual Studio Code (atau buka kembali dengan Ctrl-', atau Cmd-' di Mac). Jika saat ini situs berjalan, kita harus menghentikan dan menghidupkan ulang situs tersebut sehingga aplikasi membaca variabel lingkungan kita.

Gunakan Ctrl-C untuk menghentikan aplikasi Flask
Jalankan perintah flask run untuk menghidupkan ulang layanan
Telusuri ke http://localhost:5000 untuk menguji aplikasi Anda
Masukkan teks ke area teks, pilih bahasa, kemudian pilih Terjemahkan
Anda akan melihat hasilnya!

Selamat

Sekarang, Anda telah berhasil membuat situs web yang menggunakan Penerjemah untuk menerapkan terjemahan! Karena bahasa dan komunikasi mengandalkan konteks, komputer tidak selalu mengartikannya dengan tepat sehingga hasil terjemahannya tidak sempurna. Namun, komputer biasanya mampu memproses atau mengartikannya dengan cukup akurat jika tujuannya adalah komunikasi yang efektif!

Kode yang kami berikan di sini dapat diterapkan ke dalam aplikasi apa pun yang Anda suka. Anda dapat terus membangun pada situs web yang telah dibuat, atau bahkan menyebarkannya ke Azure App Services!

Uji pengetahuan Anda

Lanjutkan