Alıştırma - Translator Metin Çevirisi hizmetini çağırma

Tamamlandı

Azure'da arka uç Translator Metin Çevirisi hizmetini yapılandırdık ve değişkenleri depoladık. Şimdi uygulamamıza metin çevirisi yapmak için gerekli mantığı ve şablonu eklemeye odaklanabiliriz. Aşağıdaki adımları tamamlayacağız:

  1. Hizmeti çağırmak için gerekli kodu ekleme
  2. Sonuçları görüntülemek için gerekli şablonu oluşturma
  3. Uygulamayı test etme

Hizmeti çağırmak için gerekli kodu ekleme

app.py, uygulamamızın mantığını içeren dosyadır. Kullanacağımız kitaplıklar için gerekli birkaç içeri aktarma işlemi ve kullanıcıya yanıt vermek için kullanılacak yeni bir yol ekleyeceğiz.

  1. app.py dosyasının en üstüne aşağıdaki kod satırlarını ekleyin:

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

En üst satır, sonraki bölümlerde Translator Metin Çevirisi hizmetini çağırırken kullanacağımız kitaplıkları içeri aktaracak. Ayrıca dotenv kaynağından load_dotenv öğesini içeri aktarıp .env içindeki değerleri yükleyecek işlevi yürüteceğiz.

  1. app.py dosyasının en altına metin çevirisi için gerekli yolu ve mantığı oluşturmak için aşağıdaki kod satırlarını ekleyin:

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

Gerçekleştirilen adımlar koda açıklama olarak eklenmiştir. Kodumuzun yaptıklarını şu şekilde ifade edebiliriz:

  1. Kullanıcının girdiği metni ve formdan seçtiği dili okur
  2. Daha önce .env dosyasında oluşturduğumuz ortam değişkenlerini okur
  3. Translator Metin Çevirisi hizmetini çağırmak için gerekli yolu oluşturur ve hedef dili ekler (kaynak dil otomatik olarak algılanır)
  4. Translator Metin Çevirisi hizmetinin anahtarını, hizmetin konumunu ve çeviri için rastgele bir kimlik içeren üst bilgiyi oluşturur
  5. Çevirmek istediğimiz metnin bulunduğu istek gövdesini oluşturur
  6. Translator Metin Çevirisi hizmetini çağırmak için requests üzerinde post çağrısı yapar
  7. Sunucu tarafından gönderilen ve çevrilmiş metni içeren JSON yanıtını alır
  8. Çevrilmiş metni alır (aşağıdaki nota bakın)
  9. Yanıt sayfasını göstermek için render_template çağrısı yapar

Not

Translator Metin Çevirisi hizmetini çağırırken tek bir çağrıda birden çok ifadeyi birden çok dile çevirmek mümkündür. Sonuç olarak hizmet tarafından döndürülen JSON kodunda çok fazla bilgi vardır ve bizim için gereken yalnızca küçük bir kısmıdır. Bu nedenle çevrilmiş metni almak için birkaç düzey aşağı inmemiz gerekir.

Özellikle ilk sonucu okumamız, ardından translations koleksiyonuna, ilk çeviriye ve text noktasına inmemiz gerekir. Bu işlem şu çağrı tarafından yapılır: translator_response[0]['translations'][0]['text']

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

Sonuçları görüntülemek için gerekli şablonu oluşturma

Şimdi sonuç sayfası için kullanılacak HTML şablonunu oluşturalım.

  1. Visual Studio Code'un Gezgin aracında templates girişini seçerek templates içinde yeni bir dosya oluşturun. Ardından Yeni dosya'yı seçin

  2. Dosyaya results.html adını verin

  3. results.html dosyasına aşağıdaki HTML kodunu ekleyin

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

{{ }} kullanarak render_template içinde adlandırılmış parametre olarak geçirdiğimiz original_text, translated_text ve target_language öğelerine eriştiğimizi göreceksiniz. Bu işlem, Flask'e içerikleri düz metin olarak işleme talimatı verir. Ayrıca varsayılan sayfa için bağlantı oluşturma amacıyla url_for('index') öğesini kullanıyoruz. Teknik olarak özgün sayfanın yolunu yazmak mümkündür ancak url_for kullanmak Flask'e işlev yolunu sağlanan adla (bu örnekte index) talimatı verir. Siteyi yeniden düzenlememiz durumunda bağlantı için oluşturulan URL her zaman geçerli olacaktır.

Sayfayı test etme

Visual Studio Code'daki tümleşik terminale geri dönün (veya Ctrl-` ya da Mac için Cmd-` ile yeniden açın). Site çalışıyorsa uygulamanın ortam değişkenlerimizi okuması için durdurup yeniden başlatmamız gerekir.

  1. Ctrl-C tuşlarını kullanarak Flask uygulamasını durdurun

  2. flask run komutunu yürüterek hizmeti yeniden başlatın

  3. Uygulamanızı test etmek için http://localhost:5000 sayfasına gidin

  4. Metin alanına bir metin girin, bir dil belirleyin ve Translate'i seçin

    Çevrilecek metin olarak "I am going to Osaka" yazılmış ve dil olarak "Japanese" seçilmiş tamamlanmış çeviri formunun ekran görüntüsü.

  5. Sonuçları göreceksiniz!

    Çeviri sonuçlarını gösteren ekran görüntüsü.

Tebrikler

Çeviri yapmak için Translator Metin Çevirisi hizmetini kullanan bir web sitesini başarıyla oluşturdunuz! Dil ve iletişim bağlama dayalı olduğundan ve bilgisayarın her zaman bu bilgiye erişimi olmadığından her zaman mükemmel sonuçlara karşılaşmayabilirsiniz. Ancak sonuçlar genellikle etkili iletişim için ideal veya mükemmele yakındır ve bu da amacımıza uygundur!

Burada verilen kodu istediğiniz uygulamaya ekleyebilirsiniz. Oluşturduğumuz web sitesini geliştirmeye devam edebilir veya Azure App Services ile dağıtabilirsiniz!

Bilgilerinizi kontrol edin

1.

Azure Bilişsel Hizmetler çağrılarında API anahtarlarını taşıyan HTTP üst bilgisinin adı nedir?