Öğretici: Azure bilişsel hizmetler ile bir Flask uygulaması derleme

Makale
11/04/2021
Okumak için 21 dakika

Bu öğreticide, Azure bilişsel hizmetler 'i kullanarak metin çevirmek, yaklaşımı çözümlemek ve çevrilmiş metni konuşmaya dönüştürmek için bir Flask Web uygulaması oluşturacaksınız. Sistemimiz, uygulamamızı etkinleştiren Python kodu ve Flask rotaları üzerinde yer alır; ancak, uygulamayı birlikte çeken HTML ve JavaScript ile size yardımcı olacaktır. Herhangi bir sorunla karşılaşırsanız aşağıdaki geri bildirim düğmesini kullanarak bize bilgi verin.

Bu öğreticinin şu şekilde ele alınmaktadır:

Azure abonelik anahtarları 'nı al
Geliştirme ortamınızı ayarlama ve bağımlılıkları kurma
Flask uygulaması oluşturma
metni çevirmek için Çeviri kullanma
Giriş metninin ve çevirilerin olumlu/olumsuz yaklaşımını çözümlemek için dil hizmetini kullanın
Çevrilen metni sentezleştirilmiş konuşmaya dönüştürmek için konuşma hizmetini kullanma
Flask uygulamanızı yerel olarak çalıştırma

İpucu

Daha sonra atlamak ve tüm kodu tek seferde görmek isterseniz, tüm örnek, derleme yönergeleriyle birlikte GitHubkullanılabilir.

Flask nedir?

Flask, Web uygulamaları oluşturmak için bir mikro çerçevedir. Bu, Flask 'nın Size bir Web uygulaması oluşturmanıza izin veren araçları, kitaplıkları ve teknolojileri sağladığı anlamına gelir. Bu Web uygulaması bazı Web sayfaları, blog, wiki veya Web tabanlı bir takvim uygulaması ya da ticari web sitesi olarak da kullanılabilir.

Bu öğreticinin ne kadar ayrıntılı olmasını istediğiniz, birkaç faydalı bağlantı verilmiştir:

Önkoşullar

Bu öğretici için ihtiyacınız olan yazılım ve abonelik anahtarlarını gözden geçirelim.

Python 3,6 veya üzeri
Git araçları
Visual Studio Code veya Atom gibi bir ıde veya metin düzenleyici
Chrome veya Firefox
bir Çeviri abonelik anahtarı (büyük olasılıkla genel konumu kullanabilirsiniz.)
Batı ABD bölgesindeki bir dil hizmeti abonelik anahtarı.
Batı ABD bölgesindeki bir konuşma Hizmetleri abonelik anahtarı.

Daha önce belirtildiği gibi, bu öğretici için üç abonelik anahtarına ihtiyacınız olacak. Bu, için Azure hesabınızda bir kaynak oluşturmanız gerektiği anlamına gelir:

Translator
Dil hizmeti
Konuşma Hizmetleri

Kaynak oluşturmak için adım adım yönergeler için Azure portal bilişsel Hizmetler hesabı oluşturma ' yı kullanın.

Önemli

Bu öğreticide, lütfen kaynaklarınızı Batı ABD bölgesinde oluşturun. Farklı bir bölge kullanıyorsanız, Python dosyalarınızın her birinde temel URL 'YI ayarlamanız gerekir.

Geliştirme ortamınızı kurma

Flask Web uygulamanızı oluşturmadan önce, projeniz için bir çalışma dizini oluşturmanız ve birkaç Python paketi yüklemeniz gerekir.

Çalışma dizini oluşturma

komut satırı (Windows) veya terminal (macos/Linux) öğesini açın. Ardından, projeniz için bir çalışma dizini ve alt dizinler oluşturun:
```
mkdir -p flask-cog-services/static/scripts && mkdir flask-cog-services/templates
```
Projenizin çalışma dizinine geçin:
```
cd flask-cog-services
```

İle sanal ortamınızı oluşturma ve etkinleştirme `virtualenv`

Kullanarak Flask uygulamamız için bir sanal ortam oluşturalım virtualenv . Sanal ortamın kullanılması, üzerinde çalışmak için temiz bir ortam olmasını sağlar.

Çalışma dizininizde, sanal ortam oluşturmak için şu komutu çalıştırın: MacOS/Linux:
```
virtualenv venv --python=python3
```
Sanal ortamın Python 3 ' ü kullanması gerektiğini açıkça bildirdik. Bu, birden çok Python yüklemesi olan kullanıcıların doğru sürümü kullanmasını sağlar.

Windows CMD/Windows bash:
```
virtualenv venv
```
Şeyleri basit tutmak için sanal ortamınızı venv olarak adlandırıyoruz.

Sanal ortamınızı etkinleştirme komutları, platforma/kabuğa bağlı olarak değişir:

Platform	Kabuk	Komut
macOS/Linux	Bash/ZSH	`source venv/bin/activate`
Windows	bash	`source venv/Scripts/activate`
	Komut Satırı	`venv\Scripts\activate.bat`
	PowerShell	`venv\Scripts\Activate.ps1`

Bu komutu çalıştırdıktan sonra komut satırı veya Terminal oturumunuz önceden kullanıma hazır olmalıdır venv .

Oturumu dilediğiniz zaman komut satırına veya terminale yazarak devre dışı bırakabilirsiniz: deactivate .

Not

Python 'da sanal ortamlar oluşturmaya ve yönetmeye yönelik kapsamlı belgeler bulunur, bkz. virtualalenv.

İstekleri yükler

İstekler HTTP 1,1 istekleri göndermek için kullanılan popüler bir modüldür. URL 'nize Sorgu dizelerini el ile eklemeniz veya GÖNDERI verilerinizi biçimlendirmek gerekmez.

İstekleri yüklemek için şunu çalıştırın:
```
pip install requests
```

Not

İstekler hakkında daha fazla bilgi edinmek istiyorsanız bkz. istekler: insanlar IÇIN http.

Flask 'yi yükleyip yapılandırma

Ardından Flask 'yi yüklememiz gerekir. Flask web uygulamamız için yönlendirmeyi işler ve son kullanıcıdan abonelik anahtarlarımızı gizleyen sunucudan sunucuya çağrılar yapmamızı sağlar.

Flask 'yi yüklemek için şunu çalıştırın:
```
pip install Flask
```
Flask 'nin yüklendiğinden emin olalım. Çalıştır:
```
flask --version
```
Sürüm terminal 'ye yazdırılmalıdır. Diğer her şey bir sorun olduğunu gösterir.
Flask uygulamasını çalıştırmak için Flask komutunu ya da Python 'un-a anahtarını Flask ile birlikte kullanabilirsiniz. Bunu yapmadan önce, ortam değişkenini dışarı aktararak hangi uygulamanın hangi uygulamayla birlikte çalışacağınızı bildirmeniz gerekir FLASK_APP :

MacOS/Linux:
```
export FLASK_APP=app.py
```
Windows:
```
set FLASK_APP=app.py
```

Flask uygulamanızı oluşturma

Bu bölümde, kullanıcılar uygulamanızın köküne geldiğinde bir HTML dosyası döndüren bir barekemikler Flask uygulaması oluşturacaksınız. Kodu çekmeye çalışırken çok fazla zaman harcamayın, bu dosyayı daha sonra güncelleştirmek için geri döneceğiz.

Flask rotası nedir?

"Rotalar" hakkında konuşmak için bir dakikanızı atalım. Yönlendirme, bir URL 'YI belirli bir işleve bağlamak için kullanılır. Flask, işlevleri belirli URL 'lere kaydetmek için yol dekoratlarını kullanır. Örneğin, bir Kullanıcı / Web uygulamamızın köküne () gittiğinde index.html işlenir.

@app.route('/')
def index():
    return render_template('index.html')

Bu girişe göz atmak için bir örneğe bakalım.

@app.route('/about')
def about():
    return render_template('about.html')

Bu kod, bir Kullanıcı http://your-web-app.com/about about.html dosyanın işlendiğine göre gezinse de sağlar.

Bu örnekler, bir kullanıcı için HTML sayfalarının nasıl işleneceğini gösterir, ancak bir düğmeye basıldığında API 'Leri çağırmak için yollar kullanılabilir veya giriş sayfasından uzaklaşmak zorunda kalmadan istediğiniz sayıda eylem yapabilirsiniz. Çeviri, yaklaşım ve konuşma senkiyle ilgili yollar oluştururken bunu eylemde görürsünüz.

başlarken

Projeyi IDE 'de açın, sonra çalışma dizininizin kökünde adlı bir dosya oluşturun app.py . Sonra, bu kodu içine kopyalayın app.py ve kaydedin:
```
from flask import Flask, render_template, url_for, jsonify, request

app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False

@app.route('/')
def index():
    return render_template('index.html')
```
Bu kod bloğu, index.html bir Kullanıcı Web uygulamanızın köküne her gittiğinde () uygulamanın görüntülemesini söyler / .

Daha sonra, Web uygulamam için ön ucu oluşturalım. Dizininde adlı bir dosya oluşturun index.html templates . Sonra bu kodu içine kopyalayın templates/index.html .

<!doctype html>
<html lang="en">
  <head>
    <!-- Required metadata tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Translate and analyze text with Azure Cognitive Services.">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Translate and analyze text with Azure Cognitive Services</title>
  </head>
  <body>
    <div class="container">
      <h1>Translate, synthesize, and analyze text with Azure</h1>
      <p>This simple web app uses Azure for text translation, text-to-speech conversion, and sentiment analysis of input text and translations. Learn more about <a href="https://docs.microsoft.com/azure/cognitive-services/">Azure Cognitive Services</a>.
     </p>
     <!-- HTML provided in the following sections goes here. -->

     <!-- End -->
    </div>

    <!-- Required Javascript for this tutorial -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type = "text/javascript" src ="static/scripts/main.js"></script>
  </body>
</html>

Flask uygulamasını test edelim. Terminalden şunu çalıştırın:
```
flask run
```
Bir tarayıcı açın ve belirtilen URL 'ye gidin. Tek sayfalı uygulamanızı görmeniz gerekir. Uygulamayı sonlandırmak için CTRL + C tuşlarına basın.

Metin çevirme

Basit bir Flask uygulamasının nasıl çalıştığına ilişkin bir fikir sahibi olduğunuza göre şunları yapabilirsiniz:

Çeviri çağırmak için bir Python yazın ve bir yanıt döndürün
Python kodunuzu çağırmak için bir Flask yolu oluşturma
HTML 'yi metin girişi ve çevirisi, bir dil Seçicisi ve çevir düğmesi için bir alanla güncelleştirme
Kullanıcıların HTML 'den Flask uygulamanız ile etkileşime geçmesini sağlayan JavaScript yazma

Çeviri çağırın

yapmanız gereken ilk şey, Çeviri çağırmak için bir işlev yazmaktır. Bu işlev iki bağımsız değişkeni alır: text_input ve language_output . Bu işlev, bir Kullanıcı uygulamanızdaki çevir düğmesine her bastığında çağrılır. HTML 'deki metin alanı olarak gönderilir text_input ve HTML 'deki dil seçimi değeri olarak gönderilir language_output .

Çalışma dizininizin kökünde adlı bir dosya oluşturarak başlayalım translate.py .

Ardından, bu kodu öğesine ekleyin translate.py . Bu işlev iki bağımsız değişkeni alır: text_input ve language_output .

import os, requests, uuid, json

# Don't forget to replace with your Cog Services subscription key!
# If you prefer to use environment variables, see Extra Credit for more info.
subscription_key = 'YOUR_TRANSLATOR_TEXT_SUBSCRIPTION_KEY'
location = 'YOUR_TRANSLATOR_RESOURCE_LOCATION'
# Don't forget to replace with your Cog Services location!
# Our Flask route will supply two arguments: text_input and language_output.
# When the translate text button is pressed in our Flask app, the Ajax request
# will grab these values from our web app, and use them in the request.
# See main.js for Ajax calls.
def get_translation(text_input, language_output):
    base_url = 'https://api.cognitive.microsofttranslator.com'
    path = '/translate?api-version=3.0'
    params = '&to=' + language_output
    constructed_url = base_url + path + params

    headers = {
        'Ocp-Apim-Subscription-Key': subscription_key,
        'Ocp-Apim-Subscription-Region': location,
        'Content-type': 'application/json',
        'X-ClientTraceId': str(uuid.uuid4())
    }

    # You can pass more than one object in body.
    body = [{
        'text' : text_input
    }]
    response = requests.post(constructed_url, headers=headers, json=body)
    return response.json()

Çeviri abonelik anahtarınızı ekleyin ve kaydedin.

Bir yol ekleyin `app.py`

Daha sonra, bunu çağıran Flask uygulamanızda bir yol oluşturmanız gerekir translate.py . Bu yol, Kullanıcı uygulamanızdaki çevir düğmesine her bastığında çağrılır.

Bu uygulama için, rotası istekleri kabul edecek POST . Bunun nedeni, işlevin metnin çevirisini ve çeviri için bir çıkış dilini beklemesidir.

Flask her isteği ayrıştırmanıza ve yönetmenize yardımcı olacak yardımcı işlevler sağlar. Belirtilen kodda, get_json() istekten gelen VERILERI POST JSON olarak döndürür. Ardından data['text'] , ve kullanarak data['to'] metin ve çıkış dili değerleri, ' get_translation() den kullanılabilir işleve geçirilir translate.py . Bu verileri Web uygulamanızda görüntülemesi gerekeceğinden, son adım yanıtı JSON olarak döndürmemelidir.

Aşağıdaki bölümlerde, yaklaşım Analizi ve konuşma birleştirme için yollar oluştururken bu işlemi tekrarlamalısınız.

Öğesini açın app.py ve üst kısmındaki içeri aktarma ifadesini bulun app.py ve aşağıdaki satırı ekleyin:
```
import translate
```
Şimdi Flask uygulamamız ile kullanılabilir yöntemi kullanabilir translate.py .

Bu kodu sonuna kopyalayın app.py ve kaydedin:

@app.route('/translate-text', methods=['POST'])
def translate_text():
    data = request.get_json()
    text_input = data['text']
    translation_output = data['to']
    response = translate.get_translation(text_input, translation_output)
    return jsonify(response)

`index.html` dosyasını güncelleştirme

Artık metni çevirecek bir işleve sahip olduğunuza ve bunu çağırmak için Flask uygulamanızda bir yola sahip olduğunuza göre, bir sonraki adım uygulamanız için HTML oluşturmaya başlamadır. Aşağıdaki HTML birkaç şeyi yapar:

Kullanıcıların çevrilecek metni girbilecekleri bir metin alanı sağlar.
Bir dil Seçicisi içerir.
Çeviri sırasında döndürülen algılanan dili ve güvenirlik puanlarını işlemek için HTML öğeleri içerir.
Çeviri çıkışının görüntülendiği salt okunurdur bir metin alanı sağlar.
Bu dosyaya daha sonra öğreticide ekleyeceğiniz yaklaşım analizine ve konuşma senssıs koduna yönelik yer tutucuları içerir.

Güncelleştirmesine izin verin index.html .

Açın index.html ve şu kod açıklamalarını bulun:

<!-- HTML provided in the following sections goes here. -->

<!-- End -->

Kod açıklamalarını bu HTML bloğu ile değiştirin:

<div class="row">
  <div class="col">
    <form>
      <!-- Enter text to translate. -->
      <div class="form-group">
        <label for="text-to-translate"><strong>Enter the text you'd like to translate:</strong></label>
        <textarea class="form-control" id="text-to-translate" rows="5"></textarea>
      </div>
      <!-- Select output language. -->
      <div class="form-group">
        <label for="select-language"><strong>Translate to:</strong></label>
        <select class="form-control" id="select-language">
          <option value="ar">Arabic</option>
          <option value="ca">Catalan</option>
          <option value="zh-Hans">Chinese (Simplified)</option>
          <option value="zh-Hant">Chinese (Traditional)</option>
          <option value="hr">Croatian</option>
          <option value="en">English</option>
          <option value="fr">French</option>
          <option value="de">German</option>
          <option value="el">Greek</option>
          <option value="he">Hebrew</option>
          <option value="hi">Hindi</option>
          <option value="it">Italian</option>
          <option value="ja">Japanese</option>
          <option value="ko">Korean</option>
          <option value="pt">Portuguese</option>
          <option value="ru">Russian</option>
          <option value="es">Spanish</option>
          <option value="th">Thai</option>
          <option value="tr">Turkish</option>
          <option value="vi">Vietnamese</option>
        </select>
      </div>
      <button type="submit" class="btn btn-primary mb-2" id="translate">Translate text</button></br>
      <div id="detected-language" style="display: none">
        <strong>Detected language:</strong> <span id="detected-language-result"></span><br />
        <strong>Detection confidence:</strong> <span id="confidence"></span><br /><br />
      </div>

      <!-- Start sentiment code-->

      <!-- End sentiment code -->

    </form>
  </div>
  <div class="col">
    <!-- Translated text returned by the Translate API is rendered here. -->
    <form>
      <div class="form-group" id="translator-text-response">
        <label for="translation-result"><strong>Translated text:</strong></label>
        <textarea readonly class="form-control" id="translation-result" rows="5"></textarea>
      </div>

      <!-- Start voice font selection code -->

      <!-- End voice font selection code -->

    </form>

    <!-- Add Speech Synthesis button and audio element -->

    <!-- End Speech Synthesis button -->

  </div>
</div>

Sonraki adım, bazı JavaScript yazmak için kullanılır. Bu, HTML ve Flask rotası arasındaki köprüdir.

Oluşturma `main.js`

Bu main.js Dosya, HTML ve Flask rotası arasındaki köprüdir. Uygulamanız, içerik işlemek için jQuery, Ajax ve XMLHttpRequest özelliklerinin bir birleşimini kullanır ve POST Flask yollarınızın taleplerini ister.

Aşağıdaki kodda, Flask yönlendirmenize bir istek oluşturmak için HTML 'deki içerik kullanılır. Özellikle, metin alanı ve dil seçicisinin içeriği değişkenlere atanır ve sonra istek içinde öğesine geçirilir translate-text .

Kod daha sonra yanıt boyunca yinelenir ve HTML 'yi çeviri, algılanan dil ve Güvenirlik puanı ile güncelleştirir.

IDE 'nizden dizininde adlı bir dosya oluşturun main.js static/scripts .

Bu kodu kopyalayın static/scripts/main.js :

//Initiate jQuery on load.
$(function() {
  //Translate text with flask route
  $("#translate").on("click", function(e) {
    e.preventDefault();
    var translateVal = document.getElementById("text-to-translate").value;
    var languageVal = document.getElementById("select-language").value;
    var translateRequest = { 'text': translateVal, 'to': languageVal }

    if (translateVal !== "") {
      $.ajax({
        url: '/translate-text',
        method: 'POST',
        headers: {
            'Content-Type':'application/json'
        },
        dataType: 'json',
        data: JSON.stringify(translateRequest),
        success: function(data) {
          for (var i = 0; i < data.length; i++) {
            document.getElementById("translation-result").textContent = data[i].translations[0].text;
            document.getElementById("detected-language-result").textContent = data[i].detectedLanguage.language;
            if (document.getElementById("detected-language-result").textContent !== ""){
              document.getElementById("detected-language").style.display = "block";
            }
            document.getElementById("confidence").textContent = data[i].detectedLanguage.score;
          }
        }
      });
    };
  });
  // In the following sections, you'll add code for sentiment analysis and
  // speech synthesis here.
})

Test çevirisi

Uygulamada çeviri testi yapın.

flask run

Belirtilen sunucu adresine gidin. Giriş alanına metin yazın, bir dil seçin ve çevir ' e basın. Çeviri almalısınız. İşe yaramazsa, abonelik anahtarınızı eklediğinizden emin olun.

İpucu

Yaptığınız değişiklikler görüntülenmiyorsa veya uygulama, istediğiniz şekilde çalışmazsa, Önbelleğinizi temizlemeyi veya bir özel/geçersiz bir pencere açmayı deneyin.

Uygulamayı sonlandırmak için Ctrl + c tuşlarına basın ve ardından sonraki bölüme gidin.

Yaklaşımı analiz etme

Dil hizmeti API 'si , yaklaşım analizi gerçekleştirmek, metinden anahtar ifadeleri ayıklamak veya kaynak dilini algılamak için kullanılabilir. Bu uygulamada, girilen metnin pozitif, nötr veya negatif olduğunu anlamak için yaklaşım analizini kullanacağız. API, 0 ile 1 arasında sayısal bir puan döndürür. 1 ' e yakın puan pozitif yaklaşımı gösterir ve 0 ' a yakın puan negatif yaklaşımı gösterir.

Bu bölümde birkaç şey yapacağız:

Yaklaşım analizi gerçekleştirmek ve yanıt döndürmek için langauge hizmeti API 'sini çağırmak üzere bir Python yazın
Python kodunuzu çağırmak için bir Flask yolu oluşturma
HTML 'yi, yaklaşım puanları için bir alanla ve analiz yapmak için bir düğmeye güncelleştirin
Kullanıcıların HTML 'den Flask uygulamanız ile etkileşime geçmesini sağlayan JavaScript yazma

Dil hizmeti API 'sini çağırma

Dil hizmeti API 'sini çağırmak için bir işlev yazalım. Bu işlev dört bağımsız değişken alır: input_text , input_language , output_text ve output_language . Bu işlev, bir Kullanıcı uygulamanızdaki yaklaşım analizini Çalıştır düğmesine her bastığında çağrılır. Kullanıcı tarafından metin alanından ve dil seçicinden, algılanan dilin ve çeviri çıktısının her istekle birlikte sağlandığı veriler. Yanıt nesnesi, kaynak ve çeviri için yaklaşım puanlarını içerir. Aşağıdaki bölümlerde, yanıtı ayrıştırmak ve uygulamanızda kullanmak için bazı JavaScript yazılacak. Şimdilik dil hizmeti API 'sini çağırmaya odaklanalım.

Çalışma dizininizin kökünde adlı bir dosya oluşturalım sentiment.py .

Ardından, bu kodu öğesine ekleyin sentiment.py .

import os, requests, uuid, json

# Don't forget to replace with your Cog Services subscription key!
subscription_key = 'YOUR_TEXT_ANALYTICS_SUBSCRIPTION_KEY'
endpoint = "YOUR_TEXT_ANALYTICS_ENDPOINT" 
# Our Flask route will supply four arguments: input_text, input_language,
# output_text, output_language.
# When the run sentiment analysis button is pressed in our Flask app,
# the Ajax request will grab these values from our web app, and use them
# in the request. See main.js for Ajax calls.

def get_sentiment(input_text, input_language):
    path = '/text/analytics/v3.0/sentiment'
    constructed_url = endpoint + path

    headers = {
        'Ocp-Apim-Subscription-Key': subscription_key,
        'Content-type': 'application/json',
        'X-ClientTraceId': str(uuid.uuid4())
    }

    # You can pass more than one object in body.
    body = {
        'documents': [
            {
                'language': input_language,
                'id': '1',
                'text': input_text
            },
        ]
    }
    response = requests.post(constructed_url, headers=headers, json=body)
    return response.json()

Dil hizmeti abonelik anahtarınızı ekleyin ve kaydedin.

Bir yol ekleyin `app.py`

Böylece, ' i çağıran Flask uygulamanızda bir yol oluşturalım sentiment.py . Bu yol, bir Kullanıcı uygulamanızdaki yaklaşım analizini Çalıştır düğmesine her bastığında çağrılır. Çeviri rotası gibi, bu yol, POST işlevin bağımsız değişkenleri beklediği için istekleri kabul eder.

Öğesini açın app.py ve en üstündeki içeri aktarma ifadesini bulun app.py ve güncelleştirin:
```
import translate, sentiment
```
Şimdi Flask uygulamamız ile kullanılabilir yöntemi kullanabilir sentiment.py .

Bu kodu sonuna kopyalayın app.py ve kaydedin:

@app.route('/sentiment-analysis', methods=['POST'])
def sentiment_analysis():
    data = request.get_json()
    input_text = data['inputText']
    input_lang = data['inputLanguage']
    response = sentiment.get_sentiment(input_text, input_lang)
    return jsonify(response)

`index.html` dosyasını güncelleştirme

Yaklaşım analizini çalıştırmaya yönelik bir işleviniz ve bunu çağırmak için Flask uygulamanızda bir yol olduğuna göre, sonraki adım uygulamanız için HTML yazmaya başlamadır. Aşağıdaki HTML birkaç şeyi yapar:

Yaklaşım analizini çalıştırmak için uygulamanıza düğme ekler
Yaklaşım puanlamasını açıklayan bir öğe ekler
Yaklaşım puanlarını göstermek için bir öğe ekler

Açın index.html ve şu kod açıklamalarını bulun:

<!-- Start sentiment code-->

<!-- End sentiment code -->

Kod açıklamalarını bu HTML bloğu ile değiştirin:

<button type="submit" class="btn btn-primary mb-2" id="sentiment-analysis">Run sentiment analysis</button></br>
<div id="sentiment" style="display: none">
   <p>Sentiment can be labeled as "positive", "negative", "neutral", or "mixed". </p>
   <strong>Sentiment label for input:</strong> <span id="input-sentiment"></span><br />
</div>

`main.js` dosyasını güncelleştirme

Aşağıdaki kodda, Flask yönlendirmenize bir istek oluşturmak için HTML 'deki içerik kullanılır. Özellikle, metin alanı ve dil seçicisinin içeriği değişkenlere atanır ve sonra da bu yola istek gönderilir sentiment-analysis .

Kod daha sonra yanıt boyunca yinelenir ve HTML 'yi yaklaşım puanlarına göre güncelleştirir.

IDE 'nizden dizininde adlı bir dosya oluşturun main.js static .

Bu kodu kopyalayın static/scripts/main.js :

//Run sentiment analysis on input and translation.
$("#sentiment-analysis").on("click", function(e) {
  e.preventDefault();
  var inputText = document.getElementById("text-to-translate").value;
  var inputLanguage = document.getElementById("detected-language-result").innerHTML;
  var outputText = document.getElementById("translation-result").value;
  var outputLanguage = document.getElementById("select-language").value;

  var sentimentRequest = { "inputText": inputText, "inputLanguage": inputLanguage};

  if (inputText !== "") {
    $.ajax({
      url: "/sentiment-analysis",
      method: "POST",
      headers: {
          "Content-Type":"application/json"
      },
      dataType: "json",
      data: JSON.stringify(sentimentRequest),
      success: function(data) {
        for (var i = 0; i < data.documents.length; i++) {
          if (typeof data.documents[i] !== "undefined"){
            if (data.documents[i].id === "1") {
              document.getElementById("input-sentiment").textContent = data.documents[i].sentiment;
            }
          }
        }
        for (var i = 0; i < data.errors.length; i++) {
          if (typeof data.errors[i] !== "undefined"){
            if (data.errors[i].id === "1") {
              document.getElementById("input-sentiment").textContent = data.errors[i].message;
            }
          }
        }
        if (document.getElementById("input-sentiment").textContent !== ''){
          document.getElementById("sentiment").style.display = "block";
        }
      }
    });
  }
});
// In the next section, you'll add code for speech synthesis here.

Test yaklaşımı Analizi

Uygulamanın deneme analizini inceleyelim.

flask run

Belirtilen sunucu adresine gidin. Giriş alanına metin yazın, bir dil seçin ve çevir ' e basın. Çeviri almalısınız. Sonra, yaklaşım analizini Çalıştır düğmesine basın. İki puan görmeniz gerekir. İşe yaramazsa, abonelik anahtarınızı eklediğinizden emin olun.

İpucu

Yaptığınız değişiklikler görüntülenmiyorsa veya uygulama, istediğiniz şekilde çalışmazsa, Önbelleğinizi temizlemeyi veya bir özel/geçersiz bir pencere açmayı deneyin.

Uygulamayı sonlandırmak için Ctrl + c tuşlarına basın ve ardından sonraki bölüme gidin.

Metin okumayı dönüştürme

Metin okuma API 'si , uygulamanızın metni doğal insan benzeri sentezleştirilmiş konuşmaya dönüştürmesini sağlar. Hizmet standart, sinir ve özel sesleri destekler. Örnek uygulamamız, tam bir liste için kullanılabilir seslerin her birini kullanır, bkz. desteklenen diller.

Bu bölümde birkaç şey yapacağız:

Metin okuma API 'siyle metinden konuşmaya dönüştürmek için bazı Python yazma
Python kodunuzu çağırmak için bir Flask yolu oluşturma
Metin okumayı ve ses kayıttan yürütme için bir öğeyi dönüştürmek üzere HTML 'yi bir düğmeyle güncelleştirme
Kullanıcıların Flask uygulamasıyla etkileşime geçmesini sağlayan JavaScript yazma

Metinden konuşmaya API 'sini çağırma

Metinden konuşmaya dönüştürmek için bir işlev yazalım. Bu işlev iki bağımsız değişkeni alır: input_text ve voice_font . Bu işlev, bir Kullanıcı uygulamanızdaki konuşmayı konuşmaya Dönüştür düğmesine her bastığında çağrılır. input_text , metin çevirme çağrısı tarafından döndürülen çeviri çıktısıdır, voice_font HTML 'deki ses yazı tipi seçicisinin değeridir.

Çalışma dizininizin kökünde adlı bir dosya oluşturalım synthesize.py .

Ardından, bu kodu öğesine ekleyin synthesize.py .

import os, requests, time
from xml.etree import ElementTree

class TextToSpeech(object):
    def __init__(self, input_text, voice_font):
        subscription_key = 'YOUR_SPEECH_SERVICES_SUBSCRIPTION_KEY'
        self.subscription_key = subscription_key
        self.input_text = input_text
        self.voice_font = voice_font
        self.timestr = time.strftime('%Y%m%d-%H%M')
        self.access_token = None

    # This function performs the token exchange.
    def get_token(self):
        fetch_token_url = 'https://westus.api.cognitive.microsoft.com/sts/v1.0/issueToken'
        headers = {
            'Ocp-Apim-Subscription-Key': self.subscription_key
        }
        response = requests.post(fetch_token_url, headers=headers)
        self.access_token = str(response.text)

    # This function calls the TTS endpoint with the access token.
    def save_audio(self):
        base_url = 'https://westus.tts.speech.microsoft.com/'
        path = 'cognitiveservices/v1'
        constructed_url = base_url + path
        headers = {
            'Authorization': 'Bearer ' + self.access_token,
            'Content-Type': 'application/ssml+xml',
            'X-Microsoft-OutputFormat': 'riff-24khz-16bit-mono-pcm',
            'User-Agent': 'YOUR_RESOURCE_NAME',
        }
        # Build the SSML request with ElementTree
        xml_body = ElementTree.Element('speak', version='1.0')
        xml_body.set('{http://www.w3.org/XML/1998/namespace}lang', 'en-us')
        voice = ElementTree.SubElement(xml_body, 'voice')
        voice.set('{http://www.w3.org/XML/1998/namespace}lang', 'en-US')
        voice.set('name', 'Microsoft Server Speech Text to Speech Voice {}'.format(self.voice_font))
        voice.text = self.input_text
        # The body must be encoded as UTF-8 to handle non-ascii characters.
        body = ElementTree.tostring(xml_body, encoding="utf-8")

        #Send the request
        response = requests.post(constructed_url, headers=headers, data=body)

        # Write the response as a wav file for playback. The file is located
        # in the same directory where this sample is run.
        return response.content

Konuşma Hizmetleri abonelik anahtarınızı ekleyin ve kaydedin.

Bir yol ekleyin `app.py`

Böylece, ' i çağıran Flask uygulamanızda bir yol oluşturalım synthesize.py . Bu yol, bir Kullanıcı uygulamanızdaki konuşmayı konuşmaya Dönüştür düğmesine bastığında her seferinde çağrılır. Çeviri ve yaklaşım analizine yönelik yollar gibi, bu yol, POST işlevin iki bağımsız değişken beklediği bu yana istekleri kabul eder: birleştirme için metin ve kayıttan yürütme için ses yazı tipi.

Öğesini açın app.py ve en üstündeki içeri aktarma ifadesini bulun app.py ve güncelleştirin:
```
import translate, sentiment, synthesize
```
Şimdi Flask uygulamamız ile kullanılabilir yöntemi kullanabilir synthesize.py .

Bu kodu sonuna kopyalayın app.py ve kaydedin:

@app.route('/text-to-speech', methods=['POST'])
def text_to_speech():
    data = request.get_json()
    text_input = data['text']
    voice_font = data['voice']
    tts = synthesize.TextToSpeech(text_input, voice_font)
    tts.get_token()
    audio_response = tts.save_audio()
    return audio_response

`index.html` dosyasını güncelleştirme

Metinden konuşmaya dönüştürmek için bir işleviniz olduğuna ve bunu çağırmak için Flask uygulamanızda bir yola sahip olduğunuza göre, sonraki adım uygulamanız için HTML yazmaya başlamadır. Aşağıdaki HTML birkaç şeyi yapar:

Bir ses seçimi açılır listesini sağlar
Metni konuşmaya dönüştürmek için düğme ekler
Sentezlenmiş konuşmayı çalmak için kullanılan bir ses öğesi ekler

Açın index.html ve şu kod açıklamalarını bulun:

<!-- Start voice font selection code -->

<!-- End voice font selection code -->

Kod açıklamalarını bu HTML bloğu ile değiştirin:

<div class="form-group">
  <label for="select-voice"><strong>Select voice font:</strong></label>
  <select class="form-control" id="select-voice">
    <option value="(ar-SA, Naayf)">Arabic | Male | Naayf</option>
    <option value="(ca-ES, HerenaRUS)">Catalan | Female | HerenaRUS</option>
    <option value="(zh-CN, HuihuiRUS)">Chinese (Mainland) | Female | HuihuiRUS</option>
    <option value="(zh-CN, Kangkang, Apollo)">Chinese (Mainland) | Male | Kangkang, Apollo</option>
    <option value="(zh-HK, Tracy, Apollo)">Chinese (Hong Kong)| Female | Tracy, Apollo</option>
    <option value="(zh-HK, Danny, Apollo)">Chinese (Hong Kong) | Male | Danny, Apollo</option>
    <option value="(zh-TW, Yating, Apollo)">Chinese (Taiwan)| Female | Yating, Apollo</option>
    <option value="(zh-TW, Zhiwei, Apollo)">Chinese (Taiwan) | Male | Zhiwei, Apollo</option>
    <option value="(hr-HR, Matej)">Croatian | Male | Matej</option>
    <option value="(en-US, AriaRUS)">English (US) | Female | AriaRUS</option>
    <option value="(en-US, Guy24kRUS)">English (US) | Male | Guy24kRUS</option>
    <option value="(en-IE, Sean)">English (IE) | Male | Sean</option>
    <option value="(fr-FR, Julie, Apollo)">French | Female | Julie, Apollo</option>
    <option value="(fr-FR, HortenseRUS)">French | Female | Julie, HortenseRUS</option>
    <option value="(fr-FR, Paul, Apollo)">French | Male | Paul, Apollo</option>
    <option value="(de-DE, Hedda)">German | Female | Hedda</option>
    <option value="(de-DE, HeddaRUS)">German | Female | HeddaRUS</option>
    <option value="(de-DE, Stefan, Apollo)">German | Male | Apollo</option>
    <option value="(el-GR, Stefanos)">Greek | Male | Stefanos</option>
    <option value="(he-IL, Asaf)">Hebrew (Isreal) | Male | Asaf</option>
    <option value="(hi-IN, Kalpana, Apollo)">Hindi | Female | Kalpana, Apollo</option>
    <option value="(hi-IN, Hemant)">Hindi | Male | Hemant</option>
    <option value="(it-IT, LuciaRUS)">Italian | Female | LuciaRUS</option>
    <option value="(it-IT, Cosimo, Apollo)">Italian | Male | Cosimo, Apollo</option>
    <option value="(ja-JP, Ichiro, Apollo)">Japanese | Male | Ichiro</option>
    <option value="(ja-JP, HarukaRUS)">Japanese | Female | HarukaRUS</option>
    <option value="(ko-KR, HeamiRUS)">Korean | Female | Heami</option>
    <option value="(pt-BR, HeloisaRUS)">Portuguese (Brazil) | Female | HeloisaRUS</option>
    <option value="(pt-BR, Daniel, Apollo)">Portuguese (Brazil) | Male | Daniel, Apollo</option>
    <option value="(pt-PT, HeliaRUS)">Portuguese (Portugal) | Female | HeliaRUS</option>
    <option value="(ru-RU, Irina, Apollo)">Russian | Female | Irina, Apollo</option>
    <option value="(ru-RU, Pavel, Apollo)">Russian | Male | Pavel, Apollo</option>
    <option value="(ru-RU, EkaterinaRUS)">Russian | Female | EkaterinaRUS</option>
    <option value="(es-ES, Laura, Apollo)">Spanish | Female | Laura, Apollo</option>
    <option value="(es-ES, HelenaRUS)">Spanish | Female | HelenaRUS</option>
    <option value="(es-ES, Pablo, Apollo)">Spanish | Male | Pablo, Apollo</option>
    <option value="(th-TH, Pattara)">Thai | Male | Pattara</option>
    <option value="(tr-TR, SedaRUS)">Turkish | Female | SedaRUS</option>
    <option value="(vi-VN, An)">Vietnamese | Male | An</option>
  </select>
</div>

Sonra, şu kod açıklamalarını bulun:

<!-- Add Speech Synthesis button and audio element -->

<!-- End Speech Synthesis button -->

Kod açıklamalarını bu HTML bloğu ile değiştirin:

<button type="submit" class="btn btn-primary mb-2" id="text-to-speech">Convert text-to-speech</button>
<div id="audio-playback">
  <audio id="audio" controls>
    <source id="audio-source" type="audio/mpeg" />
  </audio>
</div>

Çalışmanızı kaydettiğinizden emin olun.

`main.js` dosyasını güncelleştirme

Aşağıdaki kodda, Flask yönlendirmenize bir istek oluşturmak için HTML 'deki içerik kullanılır. Özellikle, çeviri ve ses yazı tipi değişkenlere atanır ve sonra istek için istekte iletilir text-to-speech .

Kod daha sonra yanıt boyunca yinelenir ve HTML 'yi yaklaşım puanlarına göre güncelleştirir.

IDE 'nizden dizininde adlı bir dosya oluşturun main.js static .

Bu kodu kopyalayın static/scripts/main.js :

// Convert text-to-speech
$("#text-to-speech").on("click", function(e) {
  e.preventDefault();
  var ttsInput = document.getElementById("translation-result").value;
  var ttsVoice = document.getElementById("select-voice").value;
  var ttsRequest = { 'text': ttsInput, 'voice': ttsVoice }

  var xhr = new XMLHttpRequest();
  xhr.open("post", "/text-to-speech", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.responseType = "blob";
  xhr.onload = function(evt){
    if (xhr.status === 200) {
      audioBlob = new Blob([xhr.response], {type: "audio/mpeg"});
      audioURL = URL.createObjectURL(audioBlob);
      if (audioURL.length > 5){
        var audio = document.getElementById("audio");
        var source = document.getElementById("audio-source");
        source.src = audioURL;
        audio.load();
        audio.play();
      }else{
        console.log("An error occurred getting and playing the audio.")
      }
    }
  }
  xhr.send(JSON.stringify(ttsRequest));
});
// Code for automatic language selection goes here.

Neredeyse bitti. Yapacağınız son şey, main.js çeviri için seçilen dile göre otomatik olarak bir ses yazı tipi seçmek üzere bazı kodlar eklemektir. Bu kod bloğunu şu şekilde ekleyin main.js :

// Automatic voice font selection based on translation output.
$('select[id="select-language"]').change(function(e) {
  if ($(this).val() == "ar"){
    document.getElementById("select-voice").value = "(ar-SA, Naayf)";
  }
  if ($(this).val() == "ca"){
    document.getElementById("select-voice").value = "(ca-ES, HerenaRUS)";
  }
  if ($(this).val() == "zh-Hans"){
    document.getElementById("select-voice").value = "(zh-HK, Tracy, Apollo)";
  }
  if ($(this).val() == "zh-Hant"){
    document.getElementById("select-voice").value = "(zh-HK, Tracy, Apollo)";
  }
  if ($(this).val() == "hr"){
    document.getElementById("select-voice").value = "(hr-HR, Matej)";
  }
  if ($(this).val() == "en"){
    document.getElementById("select-voice").value = "(en-US, Jessa24kRUS)";
  }
  if ($(this).val() == "fr"){
    document.getElementById("select-voice").value = "(fr-FR, HortenseRUS)";
  }
  if ($(this).val() == "de"){
    document.getElementById("select-voice").value = "(de-DE, HeddaRUS)";
  }
  if ($(this).val() == "el"){
    document.getElementById("select-voice").value = "(el-GR, Stefanos)";
  }
  if ($(this).val() == "he"){
    document.getElementById("select-voice").value = "(he-IL, Asaf)";
  }
  if ($(this).val() == "hi"){
    document.getElementById("select-voice").value = "(hi-IN, Kalpana, Apollo)";
  }
  if ($(this).val() == "it"){
    document.getElementById("select-voice").value = "(it-IT, LuciaRUS)";
  }
  if ($(this).val() == "ja"){
    document.getElementById("select-voice").value = "(ja-JP, HarukaRUS)";
  }
  if ($(this).val() == "ko"){
    document.getElementById("select-voice").value = "(ko-KR, HeamiRUS)";
  }
  if ($(this).val() == "pt"){
    document.getElementById("select-voice").value = "(pt-BR, HeloisaRUS)";
  }
  if ($(this).val() == "ru"){
    document.getElementById("select-voice").value = "(ru-RU, EkaterinaRUS)";
  }
  if ($(this).val() == "es"){
    document.getElementById("select-voice").value = "(es-ES, HelenaRUS)";
  }
  if ($(this).val() == "th"){
    document.getElementById("select-voice").value = "(th-TH, Pattara)";
  }
  if ($(this).val() == "tr"){
    document.getElementById("select-voice").value = "(tr-TR, SedaRUS)";
  }
  if ($(this).val() == "vi"){
    document.getElementById("select-voice").value = "(vi-VN, An)";
  }
});

Uygulamanızı test etme

Diyelim çünkü konuşmayı test edin.

flask run

Belirtilen sunucu adresine gidin. Giriş alanına metin yazın, bir dil seçin ve çevir ' e basın. Çeviri almalısınız. Sonra bir ses seçin ve sonra metni konuşmaya Dönüştür düğmesine basın. çeviri, sentezlenmiş konuşma olarak oynatılabilir. İşe yaramazsa, abonelik anahtarınızı eklediğinizden emin olun.

İpucu

Yaptığınız değişiklikler görüntülenmiyorsa veya uygulama, istediğiniz şekilde çalışmazsa, Önbelleğinizi temizlemeyi veya bir özel/geçersiz bir pencere açmayı deneyin.

Bu, çevirileri gerçekleştiren, yaklaşımı çözümleyen ve sentezlenmiş konuşmayı karşılayan bir çalışan uygulamanız vardır. Uygulamayı sonlandırmak için Ctrl + c tuşlarına basın. Diğer Azure bilişsel Hizmetler'i kullanıma aldığınızdan emin olun.

Kaynak kodunu alma

Bu proje için kaynak kodu GitHubkullanılabilir.

Öğretici: Azure bilişsel hizmetler ile bir Flask uygulaması derleme

Lütfen deneyiminizi değerlendirin

Flask nedir?

Önkoşullar

Hesap oluşturma ve kaynaklara abone olma

Geliştirme ortamınızı kurma

Çalışma dizini oluşturma

İle sanal ortamınızı oluşturma ve etkinleştirme virtualenv

İstekleri yükler

Flask 'yi yükleyip yapılandırma

Flask uygulamanızı oluşturma

Flask rotası nedir?

başlarken

Metin çevirme

Çeviri çağırın

Bir yol ekleyin app.py

index.html dosyasını güncelleştirme

Oluşturma main.js

Test çevirisi

Yaklaşımı analiz etme

Dil hizmeti API 'sini çağırma

Bir yol ekleyin app.py

index.html dosyasını güncelleştirme

main.js dosyasını güncelleştirme

Test yaklaşımı Analizi

Metin okumayı dönüştürme

Metinden konuşmaya API 'sini çağırma

Bir yol ekleyin app.py

index.html dosyasını güncelleştirme

main.js dosyasını güncelleştirme

Uygulamanızı test etme

Kaynak kodunu alma

Sonraki adımlar

İle sanal ortamınızı oluşturma ve etkinleştirme `virtualenv`

Bir yol ekleyin `app.py`

`index.html` dosyasını güncelleştirme

Oluşturma `main.js`

Bir yol ekleyin `app.py`

`index.html` dosyasını güncelleştirme

`main.js` dosyasını güncelleştirme

Bir yol ekleyin `app.py`

`index.html` dosyasını güncelleştirme

`main.js` dosyasını güncelleştirme