Självstudie: Skapa en Flask-app med Azure Cognitive Services

Artikel
11/04/2021
23 minuter för att läsa

I den här självstudien skapar du en Flask-webbapp som använder Azure Cognitive Services för att översätta text, analysera sentiment och syntetisera översatt text till tal. Vårt fokus ligger på Python-koden och Flask-vägarna som gör det möjligt för vårt program, men vi hjälper dig med HTML och JavaScript som hämtar appen tillsammans. Om du får problem kan du meddela oss via feedbackknappen nedan.

Den här självstudien beskriver följande:

Hämta Azure-prenumerationsnycklar
Konfigurera utvecklingsmiljön och installera beroenden
Skapa en Flask-app
Använda Translator för att översätta text
Använda language-tjänsten för att analysera positiva/negativa attityder för indatatext och översättningar
Använda Speech Service för att konvertera översatt text till syntetiserat tal
Köra Flask-appen lokalt

Tips

Om du vill gå vidare och se all kod samtidigt är hela exemplet, tillsammans med bygginstruktioner, tillgängliga på GitHub.

Vad är Flask?

Flask är ett mikroramverk för att skapa webbprogram. Det innebär att Flask tillhandahåller verktyg, bibliotek och tekniker som gör att du kan skapa en webbapp. Den här webbappen kan vara vissa webbsidor, en blogg, en wiki eller vara så omfattande som ett webbaserat kalenderprogram eller en kommersiell webbplats.

För dig som vill fördjupa dig efter den här självstudien finns här några användbara länkar:

Förutsättningar

Nu ska vi gå igenom de program- och prenumerationsnycklar som du behöver för den här självstudien.

Python 3.6 eller senare
Git-verktyg
En IDE eller textredigerare, till exempel Visual Studio Kod eller Atom
Chrome eller Firefox
En Translator prenumerationsnyckel (du kan förmodligen använda den globala platsen.)
En prenumerationsnyckel för språktjänsten i regionen USA, västra.
En Speech Services-prenumerationsnyckel i regionen USA, västra.

Som tidigare nämnts behöver du tre prenumerationsnycklar för den här självstudien. Det innebär att du måste skapa en resurs i ditt Azure-konto för:

Översättare
Språktjänst
Speech Services

Använd Skapa ett Cognitive Services-konto i Azure Portal för stegvisa instruktioner för att skapa resurser.

Viktigt

För den här självstudien skapar du dina resurser i regionen USA, västra. Om du använder en annan region måste du justera bas-URL:en i var och en av dina Python-filer.

Konfigurera din utvecklingsmiljö

Innan du skapar din Flask-webbapp måste du skapa en arbetskatalog för projektet och installera några Python-paket.

Skapa en arbetskatalog

Öppna kommandoraden (Windows) eller terminalen (macOS/Linux). Skapa sedan en arbetskatalog och underkataloger för projektet:
```
mkdir -p flask-cog-services/static/scripts && mkdir flask-cog-services/templates
```
Ändra till projektets arbetskatalog:
```
cd flask-cog-services
```

Skapa och aktivera din virtuella miljö med `virtualenv`

Nu ska vi skapa en virtuell miljö för vår Flask-app med hjälp av virtualenv . Genom att använda en virtuell miljö ser du till att du har en ren miljö att arbeta från.

Kör det här kommandot i arbetskatalogen för att skapa en virtuell miljö: macOS/Linux:
```
virtualenv venv --python=python3
```
Vi har uttryckligen deklarerat att den virtuella miljön ska använda Python 3. Detta säkerställer att användare med flera Python-installationer använder rätt version.

Windows CMD/Windows Bash:
```
virtualenv venv
```
För att hålla det enkelt namnger vi den virtuella miljöns venv.

Kommandona för att aktivera den virtuella miljön varierar beroende på din plattform/ditt gränssnitt:

Plattform	Gränssnitt	Kommando
macOS/Linux	bash/zsh	`source venv/bin/activate`
Windows	bash	`source venv/Scripts/activate`
	Kommandorad	`venv\Scripts\activate.bat`
	PowerShell	`venv\Scripts\Activate.ps1`

När du har kört det här kommandot ska kommandoraden eller terminalsessionen föregås av venv .

Du kan inaktivera sessionen när som helst genom att skriva detta i kommandoraden eller terminalen: deactivate .

Anteckning

Python har omfattande dokumentation för att skapa och hantera virtuella miljöer, se virtualenv.

Installera begäranden

Begäranden är en populär modul som används för att skicka HTTP 1.1-begäranden. Du behöver inte lägga till frågesträngar manuellt till dina URL:er eller att formulärkoda POST-data.

Om du vill installera begäranden kör du:
```
pip install requests
```

Anteckning

Om du vill veta mer om begäranden kan du läsa Begäranden: HTTP för människor.

Installera och konfigurera Flask

Därefter måste vi installera Flask. Flask hanterar routningen för webbappen och gör att vi kan göra server-till-server-anrop som döljer våra prenumerationsnycklar från slutanvändaren.

Installera Flask genom att köra:
```
pip install Flask
```
Nu ska vi kontrollera att Flask har installerats. Kör följande:
```
flask --version
```
Versionen ska skrivas ut till terminalen. Allt annat innebär att något gick fel.
Om du vill köra Flask-appen kan du antingen använda flask-kommandot eller Pythons -m-växel med Flask. Innan du kan göra det måste du berätta för terminalen vilken app du ska arbeta med genom att exportera FLASK_APP miljövariabeln:

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

Skapa din Flask-app

I det här avsnittet ska du skapa en Flask-app med barebones som returnerar en HTML-fil när användarna kommer till roten i din app. Ägna inte för mycket tid åt att försöka ta bort koden. Vi kommer tillbaka för att uppdatera den här filen senare.

Vad är en Flask-väg?

Låt oss ta en minut att prata om "vägar". Routning används för att binda en URL till en specifik funktion. Flask använder vägdekoratorer för att registrera funktioner till specifika URL:er. Till exempel renderas när en användare navigerar till roten ( ) i / index.html webbappen.

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

Låt oss ta en titt på ytterligare ett exempel för att få det här hemma.

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

Den här koden säkerställer att när en användare http://your-web-app.com/about navigerar till about.html att filen återges.

De här exemplen illustrerar hur du renderar HTML-sidor för en användare, men vägar kan också användas för att anropa API:er när en knapp trycks ned eller vidta val av åtgärder utan att behöva navigera bort från startsidan. Du ser detta i praktiken när du skapar vägar för översättning, sentiment och talsyntes.

Kom igång

Öppna projektet i din IDE och skapa sedan en fil med app.py namnet i roten för din arbetskatalog. Kopiera sedan koden till app.py och spara:
```
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')
```
Det här kodblocket talar om för appen index.html att den ska visas när en användare navigerar till webbappens rot ( / ).

Nu ska vi skapa frontend för webbappen. Skapa en fil med index.html namnet i templates katalogen . Kopiera sedan den här koden till 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>

Nu ska vi testa Flask-appen. Från terminalen kör du:
```
flask run
```
Öppna en webbläsare och navigera till den angivna URL:en. Du bör se din ensidesapp. Tryck på Ctrl + C för att avbryta appen.

Översätt text

Nu när du har en uppfattning om hur en enkel Flask-app fungerar kan vi:

Skriv python för att anropa Translator och returnera ett svar
Skapa en Flask-väg för att anropa din Python-kod
Uppdatera HTML med ett område för textinmatning och översättning, en språkväljare och knappen Översätt
Skriva JavaScript som gör att användare kan interagera med din Flask-app från HTML

Anropa Translator

Det första du behöver göra är att skriva en funktion för att anropa Translator. Den här funktionen tar två argument: text_input och language_output . Den här funktionen anropas när en användare trycker på översättningsknappen i din app. Textområdet i HTML-koden skickas som text_input , och språkvalsvärdet i HTML-koden skickas som language_output .

Vi börjar med att skapa en fil med translate.py namnet i roten för din arbetskatalog.

Lägg sedan till den här koden i translate.py . Den här funktionen tar två argument: text_input och 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()

Lägg till Translator prenumerationsnyckel och spara.

Lägga till en väg till `app.py`

Därefter måste du skapa en väg i Din Flask-app som anropar translate.py . Den här vägen anropas varje gång en användare trycker på översättningsknappen i din app.

För den här appen kommer din väg att acceptera POST begäranden. Det beror på att funktionen förväntar sig att texten ska översättas och ett utdataspråk för översättningen.

Flask tillhandahåller hjälpfunktioner som hjälper dig att parsa och hantera varje begäran. I den angivna koden get_json() returnerar data från begäran POST som JSON. Sedan med data['text'] hjälp av och skickas data['to'] text- och utdataspråkvärdena till get_translation() funktionen som är tillgänglig från translate.py . Det sista steget är att returnera svaret som JSON, eftersom du måste visa dessa data i webbappen.

I följande avsnitt upprepar du den här processen när du skapar vägar för attitydanalys och talsyntes.

Öppna app.py och leta upp importsatsen överst i och lägg till följande app.py rad:
```
import translate
```
Nu kan vår Flask-app använda metoden som är tillgänglig via translate.py .

Kopiera den här koden till slutet av app.py och spara:

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

Uppdatera `index.html`

Nu när du har en funktion för att översätta text och en väg i din Flask-app för att anropa den är nästa steg att börja skapa HTML för din app. HTML-koden nedan gör några saker:

Innehåller ett textområde där användare kan mata in text för översättning.
Innehåller en språkväljare.
Innehåller HTML-element för att återge det identifierade språket och förtroendepoäng som returneras under översättningen.
Tillhandahåller ett skrivskyddade textområde där översättningsutdata visas.
Innehåller platshållare för attitydanalys och talsynteskod som du ska lägga till i den här filen senare i självstudien.

Nu ska vi uppdatera index.html .

Öppna index.html och leta upp dessa kodkommentarer:

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

<!-- End -->

Ersätt kodkommentarerna med det här HTML-blocket:

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

Nästa steg är att skriva JavaScript. Det här är bryggan mellan HTML- och Flask-vägen.

Skapa `main.js`

Filen main.js är bryggan mellan HTML- och Flask-vägen. Din app använder en kombination av jQuery, Ajax och XMLHttpRequest för att rendera innehåll och göra POST begäranden till dina Flask-vägar.

I koden nedan används innehåll från HTML för att skapa en begäran till Flask-vägen. Mer specifikt tilldelas innehållet i textområdet och språkväljaren till variabler och skickas sedan vidare i begäran till translate-text .

Koden itererar sedan genom svaret och uppdaterar HTML med översättningen, det identifierade språket och förtroendepoängen.

Skapa en fil med namnet i katalogen från main.js din IDE. static/scripts

Kopiera den här koden till 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.
})

Testa översättning

Nu ska vi testa översättningen i appen.

flask run

Gå till den angivna serveradressen. Skriv text i indataområdet, välj ett språk och tryck på Översätt. Du bör få en översättning. Om det inte fungerar kontrollerar du att du har lagt till din prenumerationsnyckel.

Tips

Om de ändringar som du har gjort inte visas, eller om appen inte fungerar som du förväntar dig, kan du prova att rensa cachen eller öppna ett privat/inkognitofönster.

Tryck på CTRL + c för att avbryta appen och gå sedan till nästa avsnitt.

Analysera sentiment

Språktjänstens API kan användas för att utföra attitydanalys, extrahera nyckelfraser från text eller identifiera källspråket. I den här appen ska vi använda attitydanalys för att avgöra om den angivna texten är positiv, neutral eller negativ. API:n returnerar en numerisk poäng mellan 0 och 1. Poäng nära 1 indikerar positiv attityd och resultat nära 0 indikerar negativ attityd.

I det här avsnittet ska du göra några saker:

Skriv python för att anropa Langauge-tjänst-API:et för att utföra attitydanalys och returnera ett svar
Skapa en Flask-väg för att anropa din Python-kod
Uppdatera HTML med ett område för attitydpoäng och en knapp för att utföra analys
Skriva JavaScript som gör att användare kan interagera med din Flask-app från HTML

Anropa Language Service-API:et

Nu ska vi skriva en funktion som anropar Language Service-API:et. Den här funktionen tar fyra argument: input_text input_language , , och output_text output_language . Den här funktionen anropas när en användare trycker på knappen för att köra attitydanalys i din app. Data som tillhandahålls av användaren från textområdet och språkväljaren, samt det identifierade språket och översättningsutdata tillhandahålls med varje begäran. Svarsobjektet innehåller sentimentpoäng för källan och översättningen. I följande avsnitt ska du skriva JavaScript för att parsa svaret och använda det i din app. För tillfället ska vi fokusera på att anropa Language Service-API:et.

Nu ska vi skapa en fil med sentiment.py namnet i roten för din arbetskatalog.

Lägg sedan till den här koden i 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()

Lägg till din prenumerationsnyckel för Language Service och spara.

Lägga till en väg till `app.py`

Nu ska vi skapa en väg i din Flask-app som anropar sentiment.py . Den här vägen anropas varje gång en användare trycker på knappen för att köra sentimentanalys i din app. Precis som vägen för översättning accepterar den här vägen begäranden POST eftersom funktionen förväntar sig argument.

Öppna app.py och leta upp importsatsen överst i och uppdatera app.py den:
```
import translate, sentiment
```
Nu kan vår Flask-app använda metoden som är tillgänglig via sentiment.py .

Kopiera den här koden till slutet av app.py och spara:

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

Uppdatera `index.html`

Nu när du har en funktion för att köra attitydanalys och en väg i din Flask-app för att anropa den är nästa steg att börja skriva HTML för din app. HTML-koden nedan gör några saker:

Lägger till en knapp i appen för att köra attitydanalys
Lägger till ett element som förklarar sentimentbedömning
Lägger till ett -element för att visa sentimentpoängen

Öppna index.html och leta upp dessa kodkommentarer:

<!-- Start sentiment code-->

<!-- End sentiment code -->

Ersätt kodkommentarerna med det här HTML-blocket:

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

Uppdatera `main.js`

I koden nedan används innehåll från HTML för att skapa en begäran till Din Flask-väg. Mer specifikt tilldelas innehållet i textområdet och språkväljaren till variabler och skickas sedan vidare i begäran till sentiment-analysis vägen.

Koden itererar sedan genom svaret och uppdaterar HTML med sentimentpoängen.

Från din IDE skapar du en fil med main.js namnet i static katalogen .

Kopiera den här koden till 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.

Testa attitydanalys

Nu ska vi testa attitydanalysen i appen.

flask run

Gå till den angivna serveradressen. Skriv text i indataområdet, välj ett språk och tryck på Översätt. Du bör få en översättning. Tryck sedan på knappen Kör attitydanalys. Du bör se två poäng. Om det inte fungerar kontrollerar du att du har lagt till din prenumerationsnyckel.

Tips

Om de ändringar du har gjort inte visas, eller om appen inte fungerar som du förväntar dig, kan du prova att rensa cacheminnet eller öppna ett privat/inkognitofönster.

Tryck på CTRL + c för att avbryta appen och gå sedan till nästa avsnitt.

Konvertera text-till-tal

Med text till tal-API:et kan din app konvertera text till naturligt syntetiserat tal som människor. Tjänsten stöder standardröster, neurala röster och anpassade röster. Vår exempelapp använder en handfull tillgängliga röster. En fullständig lista finns i språk som stöds.

I det här avsnittet ska du göra några saker:

Skriva python för att konvertera text till tal med text till tal-API:et
Skapa en Flask-väg för att anropa din Python-kod
Uppdatera HTML med en knapp för att konvertera text till tal och ett -element för ljuduppspelning
Skriva JavaScript som gör att användare kan interagera med din Flask-app

Anropa text till Speech API

Nu ska vi skriva en funktion för att konvertera text till tal. Den här funktionen tar två argument: input_text och voice_font . Den här funktionen anropas när en användare trycker på knappen för att konvertera text till tal i din app. input_text är översättningsutdata som returneras av anropet för att översätta text, är värdet voice_font från röstteckensnittsväljaren i HTML.

Nu ska vi skapa en fil med synthesize.py namnet i roten för din arbetskatalog.

Lägg sedan till den här koden i 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

Lägg till prenumerationsnyckeln för Speech Services och spara.

Lägga till en väg till `app.py`

Nu ska vi skapa en väg i din Flask-app som anropar synthesize.py . Den här vägen anropas varje gång en användare trycker på knappen konvertera text till tal i din app. Precis som vägarna för översättning och attitydanalys kommer den här vägen att acceptera begäranden eftersom funktionen förväntar sig två argument: texten ska syntetiseras och röstteckensnittet POST för uppspelning.

Öppna app.py och leta upp importsatsen överst i och uppdatera app.py den:
```
import translate, sentiment, synthesize
```
Nu kan vår Flask-app använda metoden som är tillgänglig via synthesize.py .

Kopiera den här koden till slutet av app.py och spara:

@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

Uppdatera `index.html`

Nu när du har en funktion för att konvertera text till tal och en väg i Flask-appen som ska anropas är nästa steg att börja skriva HTML för din app. HTML-koden nedan gör några saker:

Visar en listrutan för röstval
Lägger till en knapp för att konvertera text till tal
Lägger till ett ljudelement som används för att spela upp det syntetiserade talet

Öppna index.html och leta upp följande kodkommentarer:

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

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

Ersätt kodkommentarerna med det här HTML-blocket:

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

Leta sedan reda på följande kodkommentarer:

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

<!-- End Speech Synthesis button -->

Ersätt kodkommentarerna med det här HTML-blocket:

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

Se till att spara ditt arbete.

Uppdatera `main.js`

I koden nedan används innehåll från HTML för att skapa en begäran till Din Flask-väg. Mer specifikt tilldelas översättningen och röstteckensnittet till variabler och skickas sedan vidare i begäran till text-to-speech vägen.

Koden itererar sedan genom svaret och uppdaterar HTML med sentimentpoängen.

Från din IDE skapar du en fil med main.js namnet i static katalogen .

Kopiera den här koden till 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.

Nästan klart. Det sista du ska göra är att lägga till kod i för att automatiskt välja ett röstteckensnitt baserat på det main.js språk som valts för översättning. Lägg till det här kodblocket i 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)";
  }
});

Testa appen

Nu ska vi testa talsyntes i appen.

flask run

Gå till den angivna serveradressen. Skriv text i indataområdet, välj ett språk och tryck på Översätt. Du bör få en översättning. Välj sedan en röst och tryck sedan på knappen konvertera text till tal. översättningen ska spelas upp som syntetiserat tal. Om det inte fungerar kontrollerar du att du har lagt till din prenumerationsnyckel.

Tips

Om de ändringar du har gjort inte visas, eller om appen inte fungerar som du förväntar dig, kan du prova att rensa cacheminnet eller öppna ett privat/inkognitofönster.

Det var allt– du har en fungerande app som utför översättningar, analyserar sentiment och syntetiserat tal. Tryck på CTRL + c för att avbryta appen. Se till att kolla in de andra Azure Cognitive Services.

Hämta källkoden

Källkoden för det här projektet finns på GitHub.

Självstudie: Skapa en Flask-app med Azure Cognitive Services

Betygsätta din upplevelse

Vad är Flask?

Förutsättningar

Skapa ett konto och prenumerera på resurser

Konfigurera din utvecklingsmiljö

Skapa en arbetskatalog

Skapa och aktivera din virtuella miljö med virtualenv

Installera begäranden

Installera och konfigurera Flask

Skapa din Flask-app

Vad är en Flask-väg?

Kom igång

Översätt text

Anropa Translator

Lägga till en väg till app.py

Uppdatera index.html

Skapa main.js

Testa översättning

Analysera sentiment

Anropa Language Service-API:et

Lägga till en väg till app.py

Uppdatera index.html

Uppdatera main.js

Testa attitydanalys

Konvertera text-till-tal

Anropa text till Speech API

Lägga till en väg till app.py

Uppdatera index.html

Uppdatera main.js

Testa appen

Hämta källkoden

Nästa steg

Skapa och aktivera din virtuella miljö med `virtualenv`

Lägga till en väg till `app.py`

Uppdatera `index.html`

Skapa `main.js`

Lägga till en väg till `app.py`

Uppdatera `index.html`

Uppdatera `main.js`

Lägga till en väg till `app.py`

Uppdatera `index.html`

Uppdatera `main.js`