Självstudier: Bygg en kolv-app med Azure Cognitive ServicesTutorial: Build a Flask app with Azure Cognitive Services

I den här självstudien skapar du en mätkolv som använder Azure-Cognitive Services för att översätta text, analysera sentiment och syntetisera översatt text till tal.In this tutorial, you'll build a Flask web app that uses Azure Cognitive Services to translate text, analyze sentiment, and synthesize translated text into speech. Vi fokuserar på de python-vägar och Flask vägar som möjliggör vårt program, men vi kommer att hjälpa dig med HTML och Java Script som hämtar appen tillsammans.Our focus is on the Python code and Flask routes that enable our application, however, we will help you out with the HTML and Javascript that pulls the app together. Om du stöter på problem kan du använda knappen feedback nedan.If you run into any issues let us know using the feedback button below.

Den här själv studie kursen beskriver följande:Here's what this tutorial covers:

  • Hämta prenumerations nycklar för AzureGet Azure subscription keys
  • Konfigurera utvecklings miljön och installera beroendenSet up your development environment and install dependencies
  • Skapa en kolv-appCreate a Flask app
  • Använd Translator Text API för att översätta textUse the Translator Text API to translate text
  • Använd Textanalys för att analysera positiva/negativa sentiment för indatamängds text och översättningarUse Text Analytics to analyze positive/negative sentiment of input text and translations
  • Använda tal tjänster för att konvertera översatt text till syntetiskt talUse Speech Services to convert translated text into synthesized speech
  • Kör din flaska app lokaltRun your Flask app locally

Tips

Om du vill hoppa framåt och se all kod samtidigt, är hela exemplet tillsammans med build-instruktioner tillgängliga på GitHub.If you'd like to skip ahead and see all the code at once, the entire sample, along with build instructions are available on GitHub.

Vad är en kolv?What is Flask?

Kolv är ett mikroramverk för att skapa webb program.Flask is a microframework for creating web applications. Det innebär att kolven ger dig verktyg, bibliotek och tekniker som gör det möjligt att bygga ett webb program.This means Flask provides you with tools, libraries, and technologies that allow you to build a web application. Det här webb programmet kan vara en del webb sidor, en blogg, en wiki eller en webbplats som är ett webbaserat kalender program eller en kommersiell webbplats.This web application can be some web pages, a blog, a wiki or go as substantive as a web-based calendar application or a commercial website.

För dem som vill ha djupet efter den här kursen är några användbara länkar:For those of you who want to deep dive after this tutorial here are a few helpful links:

FörutsättningarPrerequisites

Vi går igenom de program-och prenumerations nycklar som du behöver i den här kursen.Let's review the software and subscription keys that you'll need for this tutorial.

Skapa ett konto och prenumerera på resurserCreate an account and subscribe to resources

Som tidigare nämnts kommer du att behöva tre prenumerations nycklar för den här självstudien.As previously mentioned, you're going to need three subscription keys for this tutorial. Det innebär att du måste skapa en resurs i ditt Azure-konto för:This means that you need to create a resource within your Azure account for:

  • TextöversättningTranslator Text
  • TextanalysText Analytics
  • Speech ServicesSpeech Services

Använd skapa ett Cognitive Services konto i Azure Portal för stegvisa instruktioner för att skapa resurser.Use Create a Cognitive Services Account in the Azure portal for step-by-step instructions to create resources.

Viktigt

I den här självstudien skapar du dina resurser i regionen USA, västra.For this tutorial, please create your resources in the West US region. Om du använder en annan region måste du justera bas-URL: en i var och en av dina python-filer.If using a different region, you'll need to adjust the base URL in each of your Python files.

Konfigurera din utvecklingsmiljöSet up your dev environment

Innan du skapar en-webbapp måste du skapa en arbets katalog för projektet och installera några python-paket.Before you build your Flask web app, you'll need to create a working directory for your project and install a few Python packages.

Skapa en arbets katalogCreate a working directory

  1. Öppna kommando raden (Windows) eller Terminal (macOS/Linux).Open command line (Windows) or terminal (macOS/Linux). Skapa sedan en arbets katalog och under kataloger för ditt projekt:Then, create a working directory and sub directories for your project:

    mkdir -p flask-cog-services/static/scripts && mkdir flask-cog-services/templates
    
  2. Ändra till projektets arbets katalog:Change to your project's working directory:

    cd flask-cog-services
    

Skapa och aktivera den virtuella miljön med virtualenvCreate and activate your virtual environment with virtualenv

Nu ska vi skapa en virtuell miljö för vår mätkolv-app med virtualenv.Let's create a virtual environment for our Flask app using virtualenv. Med hjälp av en virtuell miljö kan du se till att du har en ren miljö att arbeta med.Using a virtual environment ensures that you have a clean environment to work from.

  1. I din arbets katalog kör du det här kommandot för att skapa en virtuell miljö: MacOS/Linux:In your working directory, run this command to create a virtual environment: macOS/Linux:

    virtualenv venv --python=python3
    

    Vi har uttryckligen deklarerat att den virtuella miljön bör använda python 3.We've explicitly declared that the virtual environment should use Python 3. Detta säkerställer att användare med flera python-installationer använder rätt version.This ensures that users with multiple Python installations are using the correct version.

    Windows CMD/Windows-bash:Windows CMD / Windows Bash:

    virtualenv venv
    

    Vi håller på att vara enkla att namnge din virtuella miljö venv.To keep things simple, we're naming your virtual environment venv.

  2. De kommandon som används för att aktivera den virtuella miljön varierar beroende på din plattform/gränssnitt:The commands to activate your virtual environment will vary depending on your platform/shell:

    PlattformPlatform ShellShell KommandoCommand
    macOS/LinuxmacOS/Linux bash/zshbash/zsh source venv/bin/activate
    WindowsWindows Bashbash source venv/Scripts/activate
    KommandoradCommand Line venv\Scripts\activate.bat
    PowerShellPowerShell venv\Scripts\Activate.ps1

    När du har kört det här kommandot bör kommando raden eller terminalen av sessionen föregås av venv.After running this command, your command line or terminal session should be prefaced with venv.

  3. Du kan inaktivera sessionen när du vill genom att skriva in den i kommando raden eller terminalen: deactivate.You can deactivate the session at any time by typing this into the command line or terminal: deactivate.

Anteckning

Python innehåller omfattande dokumentation för att skapa och hantera virtuella miljöer, se virtuell miljö.Python has extensive documentation for creating and managing virtual environments, see virtualenv.

Installera förfrågningarInstall requests

Begär Anden är en populär modul som används för att skicka HTTP 1,1-begäranden.Requests is a popular module that is used to send HTTP 1.1 requests. Det finns inget behov av att manuellt lägga till frågesträngar i dina URL: er, eller för att forma-koda dina POST-data.There’s no need to manually add query strings to your URLs, or to form-encode your POST data.

  1. Kör följande om du vill installera begär Anden:To install requests, run:

    pip install requests
    

Anteckning

Om du vill veta mer om begär Anden, se [Requests: HTTP för människa @ no__t-0.If you'd like to learn more about requests, see Requests: HTTP for Humans.

Installera och konfigurera en kolvInstall and configure Flask

Nu måste vi installera kolv.Next we need to install Flask. Kolv hanterar routningen för vår webbapp och gör det möjligt för oss att ringa server-till-Server-anrop som döljer våra prenumerations nycklar från slutanvändaren.Flask handles the routing for our web app, and allows us to make server-to-server calls that hide our subscription keys from the end user.

  1. Om du vill installera en mätkolv kör du:To install Flask, run:

    pip install Flask
    

    Nu ska vi se till att kolven har installerats.Let's make sure Flask was installed. Kör:Run:

    flask --version
    

    Versionen ska skrivas ut till terminalen.The version should be printed to terminal. Något annat innebär att något har gått fel.Anything else means something went wrong.

  2. Om du vill köra kolv-appen kan du antingen använda flaska-kommandot eller python: s-m-switch med kolv.To run the Flask app, you can either use the flask command or Python’s -m switch with Flask. Innan du kan göra det måste du tala om för terminalen vilken app du ska arbeta med genom att exportera variabeln FLASK_APP:Before you can do that you need to tell your terminal which app to work with by exporting the FLASK_APP environment variable:

    macOS/Linux:macOS/Linux:

    export FLASK_APP=app.py
    

    Windows:Windows:

    set FLASK_APP=app.py
    

Skapa din kolv-appCreate your Flask app

I det här avsnittet ska du skapa en barebones kolv-app som returnerar en HTML-fil när användare träffar roten för din app.In this section, you're going to create a barebones Flask app that returns an HTML file when users hit the root of your app. Spendera inte för mycket tid på att försöka hämta koden. vi kommer att gå tillbaka till att uppdatera filen senare.Don't spend too much time trying to pick apart the code, we'll come back to update this file later.

Vad är ett kolv flöde?What is a Flask route?

Låt oss ta en stund och prata om "vägar".Let's take a minute to talk about "routes". Routning används för att binda en URL till en viss funktion.Routing is used to bind a URL to a specific function. Kolv använder Route-dekoratörer för att registrera funktioner till vissa URL: er.Flask uses route decorators to register functions to specific URLs. Till exempel när en användare navigerar till roten (/) i vår webbapp återges index.html.For example, when a user navigates to the root (/) of our web app, index.html is rendered.

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

Låt oss ta en titt på ett annat exempel för att hamma den här bostaden.Let's take a look at one more example to hammer this home.

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

Den här koden säkerställer att när en användare navigerar till http://your-web-app.com/about att filen about.html återges.This code ensures that when a user navigates to http://your-web-app.com/about that the about.html file is rendered.

De här exemplen illustrerar hur du återger HTML-sidor för en användare. vägar kan också användas för att anropa API: er när en knapp trycks ned, eller så kan du vidta ett antal åtgärder utan att behöva gå från start sidan.While these samples illustrate how to render html pages for a user, routes can also be used to call APIs when a button is pressed, or take any number of actions without having to navigate away from the homepage. Du ser detta i åtgärd när du skapar vägar för översättning, sentiment och tal syntes.You'll see this in action when you create routes for translation, sentiment, and speech synthesis.

Kom igångGet started

  1. Öppna projektet i IDE och skapa sedan en fil med namnet app.py i roten i din arbets katalog.Open the project in your IDE, then create a file named app.py in the root of your working directory. Kopiera sedan koden till app.py och spara:Next, copy this code into app.py and save:

    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 kod blocket visar att appen visar index.html när en användare navigerar till roten för din webbapp (/).This code block tells the app to display index.html whenever a user navigates to the root of your web app (/).

  2. Nu ska vi skapa klient delen för vår webbapp.Next, let's create the front-end for our web app. Skapa en fil med namnet index.html i katalogen templates.Create a file named index.html in the templates directory. Kopiera sedan koden till templates/index.html.Then copy this code into 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>
    
  3. Nu ska vi testa kolv-appen.Let's test the Flask app. Från terminalen kör du:From the terminal, run:

    flask run
    
  4. Öppna en webbläsare och gå till den angivna URL: en.Open a browser and navigate to the URL provided. Du bör se appen med en sida.You should see your single page app. Tryck på CTRL + c för att avsluta appen.Press Ctrl + c to kill the app.

Översätt textTranslate text

Nu när du har en uppfattning om hur en enkel kolv-app fungerar, kan du:Now that you have an idea of how a simple Flask app works, let's:

  • Skriv lite python för att anropa Translator Text API och returnera ett svarWrite some Python to call the Translator Text API and return a response
  • Skapa en kolv för att anropa din python-kodCreate a Flask route to call your Python code
  • Uppdatera HTML-koden med ett ytdiagram för text ingångs-och översättning, en språk väljare och knappen ÖversättUpdate the HTML with an area for text input and translation, a language selector, and translate button
  • Skriv java script som gör det möjligt för användare att interagera med din kolv-app från HTMLWrite Javascript that allows users to interact with your Flask app from the HTML

Anropa Translator Text APICall the Translator Text API

Det första du behöver göra är att skriva en funktion som anropar Translator Text API.The first thing you need to do is write a function to call the Translator Text API. Den här funktionen tar två argument: text_input och language_output.This function will take two arguments: text_input and language_output. Den här funktionen anropas när en användare trycker på knappen Översätt i din app.This function is called whenever a user presses the translate button in your app. Text området i HTML-koden skickas som text_input och språk markering svärdet i HTML-koden skickas som language_output.The text area in the HTML is sent as the text_input, and the language selection value in the HTML is sent as language_output.

  1. Vi börjar med att skapa en fil med namnet translate.py i roten av din arbets katalog.Let's start by creating a file called translate.py in the root of your working directory.
  2. Lägg sedan till den här koden i translate.py.Next, add this code to translate.py. Den här funktionen tar två argument: text_input och language_output.This function takes two arguments: text_input and 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'
    
    # 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()
    
  3. Lägg till din Translator Text prenumerations nyckel och spara.Add your Translator Text subscription key and save.

Lägg till en väg i app.pyAdd a route to app.py

Därefter måste du skapa en väg i din mätkolv-app som anropar translate.py.Next, you'll need to create a route in your Flask app that calls translate.py. Den här vägen kommer att anropas varje gången en användare trycker på knappen Översätt i appen.This route will be called each time a user presses the translate button in your app.

För den här appen kommer din väg att acceptera POST-begär Anden.For this app, your route is going to accept POST requests. Detta beror på att funktionen förväntar sig att texten ska översättas och utmatnings språket för översättningen.This is because the function expects the text to translate and an output language for the translation.

Kolv ger hjälp funktioner som hjälper dig att parsa och hantera varje begäran.Flask provides helper functions to help you parse and manage each request. I den angivna koden returnerar get_json() data från POST-begäran som JSON.In the code provided, get_json() returns the data from the POST request as JSON. När du sedan använder data['text'] och data['to'] skickas värdena text-och utdata-språk till @no__t 2-funktionen som är tillgänglig från translate.py.Then using data['text'] and data['to'], the text and output language values are passed to get_translation() function available from translate.py. Det sista steget är att returnera svaret som JSON, eftersom du måste visa dessa data i din webbapp.The last step is to return the response as JSON, since you'll need to display this data in your web app.

I följande avsnitt upprepas processen när du skapar vägar för sentiment-analys och tal syntes.In the following sections, you'll repeat this process as you create routes for sentiment analysis and speech synthesis.

  1. Öppna app.py och leta upp import-instruktionen längst upp i app.py och Lägg till följande rad:Open app.py and locate the import statement at the top of app.py and add the following line:

    import translate
    

    Nu kan vår mätkolv-app använda metoden som är tillgänglig via translate.py.Now our Flask app can use the method available via translate.py.

  2. Kopiera den här koden till slutet av app.py och spara:Copy this code to the end of app.py and save:

    @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.htmlUpdate index.html

Nu när du har en funktion för att översätta text, och en väg i din kolv-app för att anropa den, är nästa steg att börja skapa HTML för din app.Now that you have a function to translate text, and a route in your Flask app to call it, the next step is to start building the HTML for your app. I HTML-koden nedan finns några saker:The HTML below does a few things:

  • Innehåller ett text utrymme där användare kan skriva text för översättning.Provides a text area where users can input text to translate.
  • Innehåller en språk väljare.Includes a language selector.
  • Innehåller HTML-element för att återge identifierat språk och förtroende poäng som returneras under översättning.Includes HTML elements to render the detected language and confidence scores returned during translation.
  • Innehåller ett skrivskyddat text utrymme där översättnings resultatet visas.Provides a read-only text area where the translation output is displayed.
  • Innehåller plats hållare för sentiment analys och tal syntes kod som du kommer att lägga till i den här filen senare i självstudien.Includes placeholders for sentiment analysis and speech synthesis code that you'll add to this file later in the tutorial.

Vi uppdaterar index.html.Let's update index.html.

  1. Öppna index.html och hitta följande kod kommentarer:Open index.html and locate these code comments:

    <!-- HTML provided in the following sections goes here. -->
    
    <!-- End -->
    
  2. Ersätt kod kommentarerna med följande HTML-block:Replace the code comments with this HTML block:

    <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 vissa JavaScript-skript.The next step is to write some Javascript. Detta är bryggan mellan din HTML-och kolv-väg.This is the bridge between your HTML and Flask route.

Skapa main.jsCreate main.js

@No__t-0-filen är bryggan mellan din HTML-och kolv-väg.The main.js file is the bridge between your HTML and Flask route. Din app kommer att använda en kombination av jQuery, Ajax och XMLHttpRequest för att rendera innehåll och göra POST-förfrågningar till dina kolv vägar.Your app will use a combination of jQuery, Ajax, and XMLHttpRequest to render content, and make POST requests to your Flask routes.

I koden nedan används innehåll från HTML för att skapa en begäran till din kolv.In the code below, content from the HTML is used to construct a request to your Flask route. Mer specifikt är innehållet i text-och språk väljarna kopplade till variabler och skickas sedan vidare i begäran till translate-text.Specifically, the contents of the text area and the language selector are assigned to variables, and then passed along in the request to translate-text.

Koden itererar sedan igenom svaret och uppdaterar HTML med översättning, identifierat språk och förtroende poäng.The code then iterates through the response, and updates the HTML with the translation, detected language, and confidence score.

  1. Skapa en fil med namnet main.js i katalogen static/scripts från din IDE.From your IDE, create a file named main.js in the static/scripts directory.
  2. Kopiera den här koden till static/scripts/main.js:Copy this code into 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 ÖversättningTest translation

Låt oss testa översättningen i appen.Let's test translation in the app.

flask run

Navigera till den angivna Server adressen.Navigate to the provided server address. Skriv text i Indatatyp, Välj ett språk och tryck på Översätt.Type text into the input area, select a language, and press translate. Du bör få en översättning.You should get a translation. Om det inte fungerar kontrollerar du att du har lagt till din prenumerations nyckel.If it doesn't work, make sure that you've added your subscription key.

Tips

Om ändringarna som du har gjort inte visas, eller om appen inte fungerar som förväntat, kan du försöka med att rensa cacheminnet eller öppna ett privat/Incognito-fönster.If the changes you've made aren't showing up, or the app doesn't work the way you expect it to, try clearing your cache or opening a private/incognito window.

Tryck på CTRL + c för att avsluta appen och gå sedan till nästa avsnitt.Press CTRL + c to kill the app, then head to the next section.

Analysera sentimentAnalyze sentiment

API för textanalys kan användas för att utföra analys av sentiment, extrahera nyckel fraser från text eller identifiera käll språket.The Text Analytics API can be used to perform sentiment analysis, extract key phrases from text, or detect the source language. I den här appen ska vi använda sentiment analys för att avgöra om den tillhandahållna texten är positiv, neutral eller negativ.In this app, we're going to use sentiment analysis to determine if the provided text is positive, neutral, or negative. API:t returnerar en poäng mellan 0 och 1.The API returns a numeric score between 0 and 1. Poäng nära 1 anger positiv känsla och poäng nära 0 anger negativ känsla.Scores close to 1 indicate positive sentiment, and scores close to 0 indicate negative sentiment.

I det här avsnittet ska du göra några saker:In this section, you're going to do a few things:

  • Skriv några python för att anropa API för textanalys för att utföra sentiment-analys och returnera ett svarWrite some Python to call the Text Analytics API to perform sentiment analysis and return a response
  • Skapa en kolv för att anropa din python-kodCreate a Flask route to call your Python code
  • Uppdatera HTML-koden med ett utrymme för sentiment resultat och en knapp för att utföra analyserUpdate the HTML with an area for sentiment scores, and a button to perform analysis
  • Skriv java script som gör det möjligt för användare att interagera med din kolv-app från HTMLWrite Javascript that allows users to interact with your Flask app from the HTML

Anropa API:t för textanalysCall the Text Analytics API

Nu ska vi skriva en funktion för att anropa API för textanalys.Let's write a function to call the Text Analytics API. Funktionen tar fyra argument: input_text, input_language, output_text och output_language.This function will take four arguments: input_text, input_language, output_text, and output_language. Den här funktionen anropas när en användare trycker på analys knappen Kör sentiment i din app.This function is called whenever a user presses the run sentiment analysis button in your app. Data som tillhandahålls av användaren från text området och språk väljaren, samt det identifierade språket och översättnings utdata finns i varje begäran.Data provided by the user from the text area and language selector, as well as the detected language and translation output are provided with each request. Objektet Response innehåller sentiment resultat för källan och översättningen.The response object includes sentiment scores for the source and translation. I följande avsnitt kommer du att skriva vissa JavaScript-skript för att parsa svaret och använda det i din app.In the following sections, you're going to write some Javascript to parse the response and use it in your app. Nu ska vi fokusera på att anropa API för textanalys.For now, let's focus on call the Text Analytics API.

  1. Nu ska vi skapa en fil med namnet sentiment.py i roten av din arbets katalog.Let's create a file called sentiment.py in the root of your working directory.
  2. Lägg sedan till den här koden i sentiment.py.Next, add this code to 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'
    
    # 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, output_text, output_language):
        base_url = 'https://westus.api.cognitive.microsoft.com/text/analytics'
        path = '/v2.0/sentiment'
        constructed_url = base_url + 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
                },
                {
                    'language': output_language,
                    'id': '2',
                    'text': output_text
                }
            ]
        }
        response = requests.post(constructed_url, headers=headers, json=body)
        return response.json()
    
  3. Lägg till din Textanalys prenumerations nyckel och spara.Add your Text Analytics subscription key and save.

Lägg till en väg i app.pyAdd a route to app.py

Nu ska vi skapa en väg i din mätkolv-app som anropar sentiment.py.Let's create a route in your Flask app that calls sentiment.py. Den här vägen kommer att anropas varje gången en användare trycker på analys knappen Kör sentiment i din app.This route will be called each time a user presses the run sentiment analysis button in your app. Precis som vägen för översättning kommer den här vägen att acceptera POST-begär Anden eftersom funktionen förväntar sig argument.Like the route for translation, this route is going to accept POST requests since the function expects arguments.

  1. Öppna app.py och leta upp import-instruktionen längst upp i app.py och uppdatera den:Open app.py and locate the import statement at the top of app.py and update it:

    import translate, sentiment
    

    Nu kan vår mätkolv-app använda metoden som är tillgänglig via sentiment.py.Now our Flask app can use the method available via sentiment.py.

  2. Kopiera den här koden till slutet av app.py och spara:Copy this code to the end of app.py and save:

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

Uppdatera index.htmlUpdate index.html

Nu när du har en funktion för att köra sentiment-analys och en väg i din kolv-app för att anropa den, är nästa steg att börja skriva HTML-koden för din app.Now that you have a function to run sentiment analysis, and a route in your Flask app to call it, the next step is to start writing the HTML for your app. I HTML-koden nedan finns några saker:The HTML below does a few things:

  • Lägger till en knapp i appen för att köra sentiment-analysAdds a button to your app to run sentiment analysis
  • Lägger till ett element som förklarar sentiment-PoängAdds an element that explains sentiment scoring
  • Lägger till ett-element för att Visa sentiment-poängenAdds an element to display the sentiment scores
  1. Öppna index.html och hitta följande kod kommentarer:Open index.html and locate these code comments:

    <!-- Start sentiment code-->
    
    <!-- End sentiment code -->
    
  2. Ersätt kod kommentarerna med följande HTML-block:Replace the code comments with this HTML block:

    <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 scores are provided on a 1 point scale. The closer the sentiment score is to 1, indicates positive sentiment. The closer it is to 0, indicates negative sentiment.</p>
       <strong>Sentiment score for input:</strong> <span id="input-sentiment"></span><br />
       <strong>Sentiment score for translation:</strong> <span id="translation-sentiment"></span>
    </div>
    

Uppdatera main.jsUpdate main.js

I koden nedan används innehåll från HTML för att skapa en begäran till din kolv.In the code below, content from the HTML is used to construct a request to your Flask route. Mer specifikt är innehållet i text-och språk väljarna kopplade till variabler och skickas sedan vidare i begäran till sentiment-analysis-vägen.Specifically, the contents of the text area and the language selector are assigned to variables, and then passed along in the request to the sentiment-analysis route.

Koden itererar sedan igenom svaret och uppdaterar HTML med sentiment-poängen.The code then iterates through the response, and updates the HTML with the sentiment scores.

  1. Skapa en fil med namnet main.js i katalogen static från din IDE.From your IDE, create a file named main.js in the static directory.

  2. Kopiera den här koden till static/scripts/main.js:Copy this code into static/scripts/main.js:

    //Run sentinment 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, "outputText": outputText,  "outputLanguage": outputLanguage };
    
      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].score;
                }
                if (data.documents[i].id === "2") {
                  document.getElementById("translation-sentiment").textContent = data.documents[i].score;
                }
              }
            }
            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 (data.errors[i].id === "2") {
                  document.getElementById("translation-sentiment").textContent = data.errors[i].message;
                }
              }
            }
            if (document.getElementById("input-sentiment").textContent !== '' && document.getElementById("translation-sentiment").textContent !== ""){
              document.getElementById("sentiment").style.display = "block";
            }
          }
        });
      }
    });
    // In the next section, you'll add code for speech synthesis here.
    

Testa sentiment-analysTest sentiment analysis

Nu ska vi testa sentiment analys i appen.Let's test sentiment analysis in the app.

flask run

Navigera till den angivna Server adressen.Navigate to the provided server address. Skriv text i Indatatyp, Välj ett språk och tryck på Översätt.Type text into the input area, select a language, and press translate. Du bör få en översättning.You should get a translation. Tryck sedan på knappen Kör sentiment analys.Next, press the run sentiment analysis button. Du bör se två resultat.You should see two scores. Om det inte fungerar kontrollerar du att du har lagt till din prenumerations nyckel.If it doesn't work, make sure that you've added your subscription key.

Tips

Om ändringarna som du har gjort inte visas, eller om appen inte fungerar som förväntat, kan du försöka med att rensa cacheminnet eller öppna ett privat/Incognito-fönster.If the changes you've made aren't showing up, or the app doesn't work the way you expect it to, try clearing your cache or opening a private/incognito window.

Tryck på CTRL + c för att avsluta appen och gå sedan till nästa avsnitt.Press CTRL + c to kill the app, then head to the next section.

Konvertera text-till-talConvert text-to-speech

Text till tal-API: et gör det möjligt för din app att konvertera text till naturligt mänskligt syntetiskt tal.The Text-to-speech API enables your app to convert text into natural human-like synthesized speech. Tjänsten stöder standard-, neurala-och anpassade röster.The service supports standard, neural, and custom voices. Vår exempel app använder en fåtal av tillgängliga röster, för en fullständig lista, se språk som stöds.Our sample app uses a handful of the available voices, for a full list, see supported languages.

I det här avsnittet ska du göra några saker:In this section, you're going to do a few things:

  • Skriv en del python för att konvertera text till tal med text till tal-API: etWrite some Python to convert text-to-speech with the Text-to-speech API
  • Skapa en kolv för att anropa din python-kodCreate a Flask route to call your Python code
  • Uppdatera HTML med en knapp för att konvertera text till tal och ett element för ljud uppspelningUpdate the HTML with a button to convert text-to-speech, and an element for audio playback
  • Skriv java script som gör det möjligt för användare att interagera med din kolv-appWrite Javascript that allows users to interact with your Flask app

Anropa text-till-Speech APICall the Text-to-Speech API

Nu ska vi skriva en funktion för att konvertera text till tal.Let's write a function to convert text-to-speech. Den här funktionen tar två argument: input_text och voice_font.This function will take two arguments: input_text and voice_font. Den här funktionen anropas när en användare trycker på knappen omvandla text till tal i din app.This function is called whenever a user presses the convert text-to-speech button in your app. input_text är översättnings resultatet som returneras av anropet till Översätt text, voice_font är värdet från röst teckensnitts väljaren i HTML-koden.input_text is the translation output returned by the call to translate text, voice_font is the value from the voice font selector in the HTML.

  1. Nu ska vi skapa en fil med namnet synthesize.py i roten av din arbets katalog.Let's create a file called synthesize.py in the root of your working directory.

  2. Lägg sedan till den här koden i synthesize.py.Next, add this code to 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
    
  3. Lägg till din prenumerations nyckel för tal tjänster och spara.Add your Speech Services subscription key and save.

Lägg till en väg i app.pyAdd a route to app.py

Nu ska vi skapa en väg i din mätkolv-app som anropar synthesize.py.Let's create a route in your Flask app that calls synthesize.py. Den här vägen kommer att anropas varje gången en användare trycker på knappen omvandla text till tal i din app.This route will be called each time a user presses the convert text-to-speech button in your app. Precis som vägarna för översättning och sentiment analys kommer den här vägen att acceptera POST-begär Anden eftersom funktionen förväntar sig två argument: texten att syntetisera och röst teckensnittet för uppspelning.Like the routes for translation and sentiment analysis, this route is going to accept POST requests since the function expects two arguments: the text to synthesize, and the voice font for playback.

  1. Öppna app.py och leta upp import-instruktionen längst upp i app.py och uppdatera den:Open app.py and locate the import statement at the top of app.py and update it:

    import translate, sentiment, synthesize
    

    Nu kan vår mätkolv-app använda metoden som är tillgänglig via synthesize.py.Now our Flask app can use the method available via synthesize.py.

  2. Kopiera den här koden till slutet av app.py och spara:Copy this code to the end of app.py and save:

    @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.htmlUpdate index.html

Nu när du har en funktion för att konvertera text till tal och en väg i din kolv-app för att anropa den, är nästa steg att börja skriva HTML-koden för din app.Now that you have a function to convert text-to-speech, and a route in your Flask app to call it, the next step is to start writing the HTML for your app. I HTML-koden nedan finns några saker:The HTML below does a few things:

  • Visar en listruta för röst valProvides a voice selection drop-down
  • Lägger till en knapp för att konvertera text till talAdds a button to convert text-to-speech
  • Lägger till ett ljud element som används för att spela upp det syntetiska taletAdds an audio element, which is used to play back the synthesized speech
  1. Öppna index.html och hitta följande kod kommentarer:Open index.html and locate these code comments:

    <!-- Start voice font selection code -->
    
    <!-- End voice font selection code -->
    
  2. Ersätt kod kommentarerna med följande HTML-block:Replace the code comments with this HTML block:

    <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 | Yaiting, 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, Jessa24kRUS)">English (US) | Female | Jessa24kRUS</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 | Haemi</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>
    
  3. Leta sedan upp följande kod kommentarer:Next, locate these code comments:

    <!-- Add Speech Synthesis button and audio element -->
    
    <!-- End Speech Synthesis button -->
    
  4. Ersätt kod kommentarerna med följande HTML-block:Replace the code comments with this HTML block:

<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>
  1. Se till att spara ditt arbete.Make sure to save your work.

Uppdatera main.jsUpdate main.js

I koden nedan används innehåll från HTML för att skapa en begäran till din kolv.In the code below, content from the HTML is used to construct a request to your Flask route. Mer specifikt är översättningen och röst teckensnittet tilldelade till variabler och skickas sedan vidare i begäran till text-to-speech-vägen.Specifically, the translation and the voice font are assigned to variables, and then passed along in the request to the text-to-speech route.

Koden itererar sedan igenom svaret och uppdaterar HTML med sentiment-poängen.The code then iterates through the response, and updates the HTML with the sentiment scores.

  1. Skapa en fil med namnet main.js i katalogen static från din IDE.From your IDE, create a file named main.js in the static directory.
  2. Kopiera den här koden till static/scripts/main.js:Copy this code into 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.
    
  3. Nästan klart.You're almost done. Det sista du ska göra är att lägga till en kod i main.js för att automatiskt välja ett röst teckensnitt baserat på det språk som valts för översättning.The last thing you're going to do is add some code to main.js to automatically select a voice font based on the language selected for translation. Lägg till det här kod blocket i main.js:Add this code block to 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 din appTest your app

Vi testar tal syntesen i appen.Let's test speech synthesis in the app.

flask run

Navigera till den angivna Server adressen.Navigate to the provided server address. Skriv text i Indatatyp, Välj ett språk och tryck på Översätt.Type text into the input area, select a language, and press translate. Du bör få en översättning.You should get a translation. Välj sedan en röst och tryck sedan på knappen konvertera text till tal.Next, select a voice, then press the convert text-to-speech button. översättningen ska spelas upp som syntetiskt tal.the translation should be played back as synthesized speech. Om det inte fungerar kontrollerar du att du har lagt till din prenumerations nyckel.If it doesn't work, make sure that you've added your subscription key.

Tips

Om ändringarna som du har gjort inte visas, eller om appen inte fungerar som förväntat, kan du försöka med att rensa cacheminnet eller öppna ett privat/Incognito-fönster.If the changes you've made aren't showing up, or the app doesn't work the way you expect it to, try clearing your cache or opening a private/incognito window.

Det innebär att du har en fungerande app som utför översättningar, analyserar sentiment och syntetiskt tal.That's it, you have a working app that performs translations, analyzes sentiment, and synthesized speech. Tryck på CTRL + c för att avsluta appen.Press CTRL + c to kill the app. Se till att ta en titt på de andra Azure-Cognitive Services.Be sure to check out the other Azure Cognitive Services.

Hämta källkodenGet the source code

Käll koden för det här projektet är tillgänglig på GitHub.The source code for this project is available on GitHub.

Nästa stegNext steps