Oktatóanyag: lombik-alkalmazás létrehozása az Azure Cognitive ServicesTutorial: Build a Flask app with Azure Cognitive Services

Ebben az oktatóanyagban egy Azure Cognitive Servicest használó lombik-webalkalmazást fog létrehozni szöveg fordításához, a hangulat elemzéséhez és a lefordított szövegeknek a beszédbe való fordításához.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. A hangsúly a Python-kód és a lombikok olyan útvonalakon érhető el, amelyek lehetővé teszik az alkalmazás, de segítünk Önnek a HTML és a JavaScript, amely az alkalmazást együtt kéri le.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. Ha bármilyen problémába ütközik, tudassa velünk az alábbi visszajelzési gomb használatával.If you run into any issues let us know using the feedback button below.

Az oktatóanyag a következőket ismerteti:Here's what this tutorial covers:

  • Azure-előfizetési kulcsok beszerzéseGet Azure subscription keys
  • A fejlesztési környezet beállítása és a függőségek telepítéseSet up your development environment and install dependencies
  • Lombik-alkalmazás létrehozásaCreate a Flask app
  • Szöveg lefordítása a Translator Text API használatávalUse the Translator Text API to translate text
  • A Text Analytics használatával elemezheti a bemeneti szöveg és a fordítások pozitív/negatív hangulatátUse Text Analytics to analyze positive/negative sentiment of input text and translations
  • Lefordított szöveg átalakítása szintetizált beszédre a Speech Services használatávalUse Speech Services to convert translated text into synthesized speech
  • A lombik alkalmazás helyi futtatásaRun your Flask app locally

Tipp

Ha továbbra is szeretné kihagyni az összes kódot, akkor a teljes minta, valamint a Build utasítások a githubonérhetők el.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.

Mi a lombik?What is Flask?

A lombik a webalkalmazások létrehozásához használható keretrendszer.Flask is a microframework for creating web applications. Ez azt jelenti, hogy a lombik olyan eszközöket, kódtárakat és technológiákat biztosít, amelyek lehetővé teszik egy webalkalmazás összeállítását.This means Flask provides you with tools, libraries, and technologies that allow you to build a web application. Ez a webalkalmazás lehet néhány weblap, egy blog, egy wiki vagy egy webalapú naptári alkalmazás vagy egy kereskedelmi webhely.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.

Azok számára, akik részletesen szeretnék eljutni az oktatóanyag után, néhány hasznos hivatkozást talál:For those of you who want to deep dive after this tutorial here are a few helpful links:

ElőfeltételekPrerequisites

Tekintsük át az oktatóanyaghoz szükséges szoftvereket és előfizetési kulcsokat.Let's review the software and subscription keys that you'll need for this tutorial.

Hozzon létre egy fiókot, és fizessen elő az erőforrásokraCreate an account and subscribe to resources

Ahogy korábban említettük, három előfizetési kulcsra lesz szüksége ehhez az oktatóanyaghoz.As previously mentioned, you're going to need three subscription keys for this tutorial. Ez azt jelenti, hogy létre kell hoznia egy erőforrást az Azure-fiókjában a következőkhöz:This means that you need to create a resource within your Azure account for:

  • Fordítói szövegTranslator Text
  • SzövegelemzésText Analytics
  • BeszédszolgáltatásokSpeech Services

Erőforrások létrehozásához használja a Cognitive Services fiók létrehozása a Azure Portalban című témakört.Use Create a Cognitive Services Account in the Azure portal for step-by-step instructions to create resources.

Fontos

Ebben az oktatóanyagban hozza létre az erőforrásokat az USA nyugati régiójában.For this tutorial, please create your resources in the West US region. Ha más régiót használ, minden Python-fájlban módosítania kell az alap URL-címet.If using a different region, you'll need to adjust the base URL in each of your Python files.

A fejlesztési környezet beállításaSet up your dev environment

A lombik-Webalkalmazás létrehozása előtt létre kell hoznia egy munkakönyvtárat a projekthez, és telepítenie kell néhány Python-csomagot.Before you build your Flask web app, you'll need to create a working directory for your project and install a few Python packages.

Munkakönyvtár létrehozásaCreate a working directory

  1. Nyissa meg a parancssort (Windows) vagy a terminált (macOS/Linux).Open command line (Windows) or terminal (macOS/Linux). Ezután hozzon létre egy munkakönyvtárat és alkönyvtárakat a projekthez:Then, create a working directory and sub directories for your project:

    mkdir -p flask-cog-services/static/scripts && mkdir flask-cog-services/templates
    
  2. Váltás a projekt munkakönyvtárára:Change to your project's working directory:

    cd flask-cog-services
    

Virtuális környezet létrehozása és aktiválása virtualenvCreate and activate your virtual environment with virtualenv

Hozzunk létre egy virtuális környezetet a lombik-alkalmazáshoz virtualenvhasználatával.Let's create a virtual environment for our Flask app using virtualenv. A virtuális környezet használatával gondoskodhat arról, hogy tiszta környezetet biztosítson a működéséhez.Using a virtual environment ensures that you have a clean environment to work from.

  1. A munkakönyvtárában futtassa ezt a parancsot egy virtuális környezet létrehozásához: MacOS/Linux:In your working directory, run this command to create a virtual environment: macOS/Linux:

    virtualenv venv --python=python3
    

    Kifejezetten kijelentette, hogy a virtuális környezetnek a Python 3 használatát kell használnia.We've explicitly declared that the virtual environment should use Python 3. Ez biztosítja, hogy a több Python-telepítéssel rendelkező felhasználók a megfelelő verziót használják.This ensures that users with multiple Python installations are using the correct version.

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

    virtualenv venv
    

    A dolgok egyszerűsége érdekében a virtuális környezet venv nevezzük.To keep things simple, we're naming your virtual environment venv.

  2. A virtuális környezet aktiválásához szükséges parancsok a platformtól/rendszerhéjtól függően eltérőek lesznek:The commands to activate your virtual environment will vary depending on your platform/shell:

    PlatformPlatform ShellShell ParancsCommand
    macOS/LinuxmacOS/Linux bash/zshbash/zsh source venv/bin/activate
    WindowsWindows bashbash source venv/Scripts/activate
    ParancssorCommand Line venv\Scripts\activate.bat
    PowerShellPowerShell venv\Scripts\Activate.ps1

    A parancs futtatása után a parancssorból vagy a terminál-munkamenetből venvnak kell megjelennie.After running this command, your command line or terminal session should be prefaced with venv.

  3. A munkamenetet bármikor inaktiválhatja úgy, hogy beírja a következőt a parancssorba vagy a terminálba: deactivate.You can deactivate the session at any time by typing this into the command line or terminal: deactivate.

Megjegyzés

A Python kiterjedt dokumentációval rendelkezik a virtuális környezetek létrehozásához és kezeléséhez: virtualenv.Python has extensive documentation for creating and managing virtual environments, see virtualenv.

Telepítési kérelmekInstall requests

A kérelmek egy népszerű modul, amely HTTP 1,1-kérelmek küldésére szolgál.Requests is a popular module that is used to send HTTP 1.1 requests. A lekérdezési karakterláncokat nem kell manuálisan hozzáadnia az URL-címekhez, vagy pedig a POST-kódolást.There’s no need to manually add query strings to your URLs, or to form-encode your POST data.

  1. A kérelmek telepítéséhez futtassa a következőt:To install requests, run:

    pip install requests
    

Megjegyzés

Ha többet szeretne megtudni a kérelmekről, tekintse meg a kérelmek: http for Humanscímű témakört.If you'd like to learn more about requests, see Requests: HTTP for Humans.

A lombik telepítése és konfigurálásaInstall and configure Flask

Ezután telepítenie kell a lombikot.Next we need to install Flask. A lombik kezeli a webalkalmazáshoz tartozó útválasztást, és lehetővé teszi, hogy a kiszolgáló és a kiszolgáló közötti hívásokat elrejtse az előfizetési kulcsokat a végfelhasználótól.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. A lombik telepítéséhez futtassa a következőt:To install Flask, run:

    pip install Flask
    

    Győződjön meg arról, hogy a lombik telepítve lett.Let's make sure Flask was installed. Futtassa a következőt:Run:

    flask --version
    

    A verziót ki kell nyomtatni a terminálba.The version should be printed to terminal. Bármi más, ami hibás volt.Anything else means something went wrong.

  2. A lombik alkalmazás futtatásához használja a lombik parancsát vagy a Python-m kapcsolót a lombik használatával.To run the Flask app, you can either use the flask command or Python’s -m switch with Flask. Mielőtt ezt megteheti, meg kell adnia, hogy az alkalmazás hogyan működjön együtt a FLASK_APP környezeti változó exportálásával: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
    

A lombik alkalmazás létrehozásaCreate your Flask app

Ebben a szakaszban egy olyan barebone lombik-alkalmazást fog létrehozni, amely egy HTML-fájlt ad vissza, amikor a felhasználók megtalálják az alkalmazás gyökerét.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. Ne töltsön túl sok időt a kód kiválasztására, ezért később ismét frissíteni fogjuk a fájlt.Don't spend too much time trying to pick apart the code, we'll come back to update this file later.

Mi az a lombik-útvonal?What is a Flask route?

Lássunk egy percet, hogy beszéljünk az "útvonalakról".Let's take a minute to talk about "routes". Az Útválasztás egy adott függvény URL-címének kötésére szolgál.Routing is used to bind a URL to a specific function. A lombik Route dekoratőr használatával regisztrálja a függvényeket adott URL-címekre.Flask uses route decorators to register functions to specific URLs. Ha például egy felhasználó a webalkalmazás gyökerére (/) navigál, index.html jelenik meg.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ássunk még egy példát, hogy megismerkedjen a kezdőlapon.Let's take a look at one more example to hammer this home.

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

Ez a kód biztosítja, hogy amikor egy felhasználó navigál, http://your-web-app.com/about, hogy a about.html fájl jelenik meg.This code ensures that when a user navigates to http://your-web-app.com/about that the about.html file is rendered.

Habár ezek a minták bemutatják, hogyan lehet HTML-lapokat megjeleníteni egy felhasználó számára, az útvonalak az API-k meghívására is használhatók gomb lenyomásakor, vagy tetszőleges számú művelet elvégzése anélkül, hogy el kellene érni a kezdőlapot.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. Ez a művelet akkor jelenik meg, ha útvonalakat hoz létre a fordításhoz, a hangulathoz és a beszédfelismeréshez.You'll see this in action when you create routes for translation, sentiment, and speech synthesis.

BevezetésGet started

  1. Nyissa meg a projektet az IDE-ben, majd hozzon létre egy app.py nevű fájlt a munkakönyvtár gyökerében.Open the project in your IDE, then create a file named app.py in the root of your working directory. Ezután másolja a kódot app.pyba, és mentse a következőt: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')
    

    Ez a kódrészlet azt jelzi, hogy az alkalmazás megjeleníti index.html, amikor egy felhasználó a webalkalmazás gyökerére (/) navigál.This code block tells the app to display index.html whenever a user navigates to the root of your web app (/).

  2. Ezután hozzuk létre a webes alkalmazás előtér-szolgáltatását.Next, let's create the front-end for our web app. Hozzon létre egy index.html nevű fájlt a templates könyvtárban.Create a file named index.html in the templates directory. Ezután másolja a kódot templates/index.htmlba.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. Vizsgáljuk meg a lombik alkalmazást.Let's test the Flask app. A terminálból futtassa a következőt:From the terminal, run:

    flask run
    
  4. Nyisson meg egy böngészőt, és navigáljon a megadott URL-címhez.Open a browser and navigate to the URL provided. Ekkor meg kell jelennie az egyoldalas alkalmazásnak.You should see your single page app. Nyomja le a CTRL + c billentyűkombinációt az alkalmazás leöléséhez.Press Ctrl + c to kill the app.

Szöveg lefordításaTranslate text

Most, hogy már van egy ötlete arról, hogyan működik egy egyszerű lombik alkalmazás, lássuk:Now that you have an idea of how a simple Flask app works, let's:

  • Néhány Python írása a Translator Text API meghívására és válasz visszaküldéséreWrite some Python to call the Translator Text API and return a response
  • Lombik-útvonal létrehozása a Python-kód meghívásáhozCreate a Flask route to call your Python code
  • A HTML-fájl frissítése egy olyan résszel, amely szövegbeviteli és fordítási, nyelvi választó és fordítási gombUpdate the HTML with an area for text input and translation, a language selector, and translate button
  • JavaScript írása, amely lehetővé teszi a felhasználók számára, hogy a HTML-ből használhassák a lombik alkalmazásátWrite Javascript that allows users to interact with your Flask app from the HTML

A Translator Text API meghívásaCall the Translator Text API

Az első szükséges, hogy egy függvényt írjon a Translator Text API meghívásához.The first thing you need to do is write a function to call the Translator Text API. Ez a függvény két argumentumot vesz igénybe: text_input és language_output.This function will take two arguments: text_input and language_output. Ezt a függvényt akkor hívja meg a rendszer, amikor egy felhasználó megnyomja az alkalmazás fordítási gombját.This function is called whenever a user presses the translate button in your app. A HTML-ben a szöveg terület a text_input, a HTML-ben pedig a nyelv kiválasztásának értéke language_outputként lesz elküldve.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. Kezdjük egy translate.py nevű fájl létrehozásával a munkakönyvtár gyökerében.Let's start by creating a file called translate.py in the root of your working directory.
  2. Ezután adja hozzá ezt a kódot a translate.pyhoz.Next, add this code to translate.py. Ez a függvény két argumentumot vesz igénybe: text_input és 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. Adja hozzá Translator Text előfizetési kulcsát, és mentse.Add your Translator Text subscription key and save.

Útvonal hozzáadása a app.pyhozAdd a route to app.py

Ezután létre kell hoznia egy útvonalat a lombik alkalmazásban, amely meghívja a translate.py.Next, you'll need to create a route in your Flask app that calls translate.py. Ez az útvonal akkor lesz meghívva, amikor egy felhasználó megnyomja az alkalmazás fordítás gombját.This route will be called each time a user presses the translate button in your app.

Ehhez az alkalmazáshoz az útvonal fogadja POST kérelmeket.For this app, your route is going to accept POST requests. Ennek az az oka, hogy a függvény lefordítja a szöveget, és a fordításhoz egy kimeneti nyelvet vár.This is because the function expects the text to translate and an output language for the translation.

A lombik segítő függvények segítséget nyújtanak az egyes kérések elemzéséhez és kezeléséhez.Flask provides helper functions to help you parse and manage each request. A megadott kódban a get_json() a POST kérelemből származó adatokkal, JSON-ként adja vissza.In the code provided, get_json() returns the data from the POST request as JSON. Ezután a data['text'] és a data['to']használatával a rendszer átadja a szöveg és a kimeneti nyelvi értékeket a translate.pyelérhető get_translation() függvénynek.Then using data['text'] and data['to'], the text and output language values are passed to get_translation() function available from translate.py. Az utolsó lépés a válasz JSON-ként való visszaküldése, mivel ezeket az adattartalmat a webalkalmazásban kell megjeleníteni.The last step is to return the response as JSON, since you'll need to display this data in your web app.

A következő részekben ezt a folyamatot fogja megismételni, ahogy az adatelemzési és-beszédfelismerési útvonalakat hoz létre.In the following sections, you'll repeat this process as you create routes for sentiment analysis and speech synthesis.

  1. Nyissa meg app.py és keresse meg az importálási utasítást a app.py tetején, és adja hozzá a következő sort:Open app.py and locate the import statement at the top of app.py and add the following line:

    import translate
    

    A lombik-alkalmazás most már a translate.pyon keresztül elérhető módszert is használhatja.Now our Flask app can use the method available via translate.py.

  2. Másolja ezt a kódot app.py végére, és mentse a következőt: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)
    

index.html frissítéseUpdate index.html

Most, hogy van egy függvény a szöveg fordításához, és egy útvonal a lombik alkalmazásban való meghívásához, a következő lépés az alkalmazás HTML-címének létrehozása.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. Az alábbi HTML-fájl néhány dolgot tartalmaz:The HTML below does a few things:

  • Egy szöveges területeket biztosít, ahol a felhasználók beírhatják a szöveget a fordításhoz.Provides a text area where users can input text to translate.
  • Nyelvi választót tartalmaz.Includes a language selector.
  • HTML-elemeket tartalmaz a fordítás során visszaadott észlelt nyelv és megbízhatósági pontszámok megjelenítéséhez.Includes HTML elements to render the detected language and confidence scores returned during translation.
  • Egy írásvédett szövegmezőt biztosít, ahol a fordítási kimenet megjelenik.Provides a read-only text area where the translation output is displayed.
  • Az oktatóanyagban később a fájlhoz felvenni kívánt, a hangulat elemzéséhez és a Speech szintézishez használt helyőrzőket tartalmazza.Includes placeholders for sentiment analysis and speech synthesis code that you'll add to this file later in the tutorial.

Frissítse index.html.Let's update index.html.

  1. Nyissa meg index.html és keresse meg a következő kódokat:Open index.html and locate these code comments:

    <!-- HTML provided in the following sections goes here. -->
    
    <!-- End -->
    
  2. A kód megjegyzéseit cserélje le a következő HTML-blokkra: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>
    

A következő lépés a JavaScript írása.The next step is to write some Javascript. Ez a híd a HTML és a lombik útvonala között.This is the bridge between your HTML and Flask route.

main.js létrehozásaCreate main.js

A main.js fájl a HTML és a lombik útvonala közötti híd.The main.js file is the bridge between your HTML and Flask route. Az alkalmazás a jQuery, Ajax és XMLHttpRequest kombinációját fogja használni a tartalmak megjelenítéséhez, és POST kérelmeket tesz elérhetővé a lombik-útvonalakhoz.Your app will use a combination of jQuery, Ajax, and XMLHttpRequest to render content, and make POST requests to your Flask routes.

Az alábbi kódban a HTML-ből származó tartalmat használjuk a lombik útvonalára vonatkozó kérelem létrehozásához.In the code below, content from the HTML is used to construct a request to your Flask route. Pontosabban a szövegmező tartalmát és a Nyelvi választót a rendszer a változókhoz rendeli, majd átadja a kérésnek a 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.

A kód ezután megismétli a választ, és frissíti a HTML-t a fordítás, az észlelt nyelv és a megbízhatósági pontszám alapján.The code then iterates through the response, and updates the HTML with the translation, detected language, and confidence score.

  1. Az IDE-ből hozzon létre egy main.js nevű fájlt a static/scripts könyvtárban.From your IDE, create a file named main.js in the static/scripts directory.
  2. A kód másolása static/scripts/main.jsba: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.
    })
    

Teszt fordításTest translation

Tesztelje a fordítást az alkalmazásban.Let's test translation in the app.

flask run

Navigáljon a megadott kiszolgálócím-címre.Navigate to the provided server address. Írja be a szövegbeviteli terület szövegét, válassza ki a nyelvet, majd nyomja le a fordítás gombot.Type text into the input area, select a language, and press translate. Be kell szereznie egy fordítást.You should get a translation. Ha nem működik, győződjön meg arról, hogy az előfizetési kulcsot adta hozzá.If it doesn't work, make sure that you've added your subscription key.

Tipp

Ha a végrehajtott módosítások nem jelennek meg, vagy az alkalmazás nem a várt módon működik, próbálja meg törölni a gyorsítótárat, vagy nyisson meg egy privát/inkognitóban ablakot.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.

Nyomja le a CTRL + c billentyűkombinációt az alkalmazás leöléséhez, majd a következő szakaszhoz.Press CTRL + c to kill the app, then head to the next section.

Vélemények elemzéseAnalyze sentiment

A text Analytics API az érzelmek elemzéséhez, a szövegből kinyert fő kifejezésekhez vagy a forrás nyelvének észleléséhez használható.The Text Analytics API can be used to perform sentiment analysis, extract key phrases from text, or detect the source language. Ebben az alkalmazásban az érzelmek elemzését fogjuk használni annak megállapításához, hogy a megadott szöveg pozitív, semleges vagy negatív.In this app, we're going to use sentiment analysis to determine if the provided text is positive, neutral, or negative. Az API 0 és 1 közötti numerikus pontszámokat jelenít meg.The API returns a numeric score between 0 and 1. Az 1-hez közeli pontszámok pozitív véleményt jeleznek, míg a 0-hoz közeliek negatívat.Scores close to 1 indicate positive sentiment, and scores close to 0 indicate negative sentiment.

Ebben a szakaszban néhány dolgot kell tennie:In this section, you're going to do a few things:

  • Írjon egy Pythont, hogy meghívja a Text Analytics API az érzelmek elemzéséhez és a válasz visszaküldéséhez.Write some Python to call the Text Analytics API to perform sentiment analysis and return a response
  • Lombik-útvonal létrehozása a Python-kód meghívásáhozCreate a Flask route to call your Python code
  • A HTML-fájl frissítése egy, a hangulati pontszámokat tartalmazó résszel és egy, az elemzést elvégző gombUpdate the HTML with an area for sentiment scores, and a button to perform analysis
  • JavaScript írása, amely lehetővé teszi a felhasználók számára, hogy a HTML-ből használhassák a lombik alkalmazásátWrite Javascript that allows users to interact with your Flask app from the HTML

Szövegelemzési API hívásaCall the Text Analytics API

Írjon egy függvényt a Text Analytics API meghívásához.Let's write a function to call the Text Analytics API. A függvény négy argumentumot fogad: input_text, input_language, output_textés output_language.This function will take four arguments: input_text, input_language, output_text, and output_language. Ezt a függvényt akkor hívja meg a rendszer, amikor egy felhasználó megnyomja az alkalmazásban az érzelmi elemzés futtatása gombot.This function is called whenever a user presses the run sentiment analysis button in your app. A felhasználó által a szövegmezőből és a nyelvi választóból biztosított adatok, valamint az észlelt nyelv és a fordítási kimenet minden kérelem esetében elérhető.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. A válasz objektum a forrás és a fordítás hangulati pontszámait tartalmazza.The response object includes sentiment scores for the source and translation. A következő részekben írni fog néhány JavaScriptet, hogy elemezze a választ, és használja azt az alkalmazásban.In the following sections, you're going to write some Javascript to parse the response and use it in your app. Egyelőre a Text Analytics API hívására koncentrálunk.For now, let's focus on call the Text Analytics API.

  1. Hozzon létre egy sentiment.py nevű fájlt a munkakönyvtár gyökerében.Let's create a file called sentiment.py in the root of your working directory.
  2. Ezután adja hozzá ezt a kódot a sentiment.pyhoz.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. Adja hozzá Text Analytics előfizetési kulcsát, és mentse.Add your Text Analytics subscription key and save.

Útvonal hozzáadása a app.pyhozAdd a route to app.py

Hozzon létre egy útvonalat a lombik alkalmazásban, amely meghívja a sentiment.py.Let's create a route in your Flask app that calls sentiment.py. Ez az útvonal akkor lesz meghívva, amikor egy felhasználó megnyomja az alkalmazásban az érzelmi elemzés futtatása gombot.This route will be called each time a user presses the run sentiment analysis button in your app. A fordítási útvonalhoz hasonlóan ez az útvonal fogadja POST kéréseket, mivel a függvény argumentumokat vár.Like the route for translation, this route is going to accept POST requests since the function expects arguments.

  1. Nyissa meg app.py és keresse meg az importálási utasítást a app.py tetején, és frissítse a következőt:Open app.py and locate the import statement at the top of app.py and update it:

    import translate, sentiment
    

    A lombik-alkalmazás most már a sentiment.pyon keresztül elérhető módszert is használhatja.Now our Flask app can use the method available via sentiment.py.

  2. Másolja ezt a kódot app.py végére, és mentse a következőt: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)
    

index.html frissítéseUpdate index.html

Most, hogy már rendelkezik egy, a hangulat-elemzés futtatására szolgáló függvénnyel, és egy útvonal a lombik alkalmazásban a hívásához, a következő lépés az alkalmazás HTML-fájljának megírása.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. Az alábbi HTML-fájl néhány dolgot tartalmaz:The HTML below does a few things:

  • Egy gomb hozzáadásával az alkalmazáshoz az érzelmek elemzésének futtatásáhozAdds a button to your app to run sentiment analysis
  • Egy olyan elemet ad meg, amely a hangulati pontozást ismertetiAdds an element that explains sentiment scoring
  • Egy elem hozzáadásával jelenítheti meg az érzelmek pontszámaitAdds an element to display the sentiment scores
  1. Nyissa meg index.html és keresse meg a következő kódokat:Open index.html and locate these code comments:

    <!-- Start sentiment code-->
    
    <!-- End sentiment code -->
    
  2. A kód megjegyzéseit cserélje le a következő HTML-blokkra: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>
    

main.js frissítéseUpdate main.js

Az alábbi kódban a HTML-ből származó tartalmat használjuk a lombik útvonalára vonatkozó kérelem létrehozásához.In the code below, content from the HTML is used to construct a request to your Flask route. Pontosabban a szövegmező tartalmát és a Nyelvi választót a rendszer a változókhoz rendeli hozzá, majd a kérésben a sentiment-analysis útvonalra küldi át.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.

A kód ezután megismétli a választ, és frissíti a HTML-t az érzelmi pontszámokkal.The code then iterates through the response, and updates the HTML with the sentiment scores.

  1. Az IDE-ből hozzon létre egy main.js nevű fájlt a static könyvtárban.From your IDE, create a file named main.js in the static directory.

  2. A kód másolása static/scripts/main.jsba: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.
    

Tesztelési hangulat elemzéseTest sentiment analysis

Tesztelje az alkalmazás hangulati elemzését.Let's test sentiment analysis in the app.

flask run

Navigáljon a megadott kiszolgálócím-címre.Navigate to the provided server address. Írja be a szövegbeviteli terület szövegét, válassza ki a nyelvet, majd nyomja le a fordítás gombot.Type text into the input area, select a language, and press translate. Be kell szereznie egy fordítást.You should get a translation. Ezután nyomja meg a Run hangulat elemzése gombot.Next, press the run sentiment analysis button. Két pontszámnak kell megjelennie.You should see two scores. Ha nem működik, győződjön meg arról, hogy az előfizetési kulcsot adta hozzá.If it doesn't work, make sure that you've added your subscription key.

Tipp

Ha a végrehajtott módosítások nem jelennek meg, vagy az alkalmazás nem a várt módon működik, próbálja meg törölni a gyorsítótárat, vagy nyisson meg egy privát/inkognitóban ablakot.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.

Nyomja le a CTRL + c billentyűkombinációt az alkalmazás leöléséhez, majd a következő szakaszhoz.Press CTRL + c to kill the app, then head to the next section.

Szöveg átalakítása beszéddéConvert text-to-speech

A text-to-SPEECH API lehetővé teszi, hogy az alkalmazás a szöveget természetes emberi – például szintetizált beszédre alakítsa át.The Text-to-speech API enables your app to convert text into natural human-like synthesized speech. A szolgáltatás támogatja a standard, a neurális és az egyéni hangokat.The service supports standard, neural, and custom voices. A minta alkalmazásunk egy maroknyi elérhető hangokat használ a teljes listához: támogatott nyelvek.Our sample app uses a handful of the available voices, for a full list, see supported languages.

Ebben a szakaszban néhány dolgot kell tennie:In this section, you're going to do a few things:

  • Írjon egy Pythont a szöveg-beszéd átalakításra a Text-to-Speech API-valWrite some Python to convert text-to-speech with the Text-to-speech API
  • Lombik-útvonal létrehozása a Python-kód meghívásáhozCreate a Flask route to call your Python code
  • Frissítse a HTML-t egy gombbal a szöveg és a beszéd átalakításához, és egy elemet a hanglejátszáshozUpdate the HTML with a button to convert text-to-speech, and an element for audio playback
  • JavaScript írása, amely lehetővé teszi a felhasználók számára a lombik alkalmazással való interakciótWrite Javascript that allows users to interact with your Flask app

A szöveg és a beszéd közötti API meghívásaCall the Text-to-Speech API

Írjunk egy függvényt szöveg-beszéd átalakításra.Let's write a function to convert text-to-speech. Ez a függvény két argumentumot vesz igénybe: input_text és voice_font.This function will take two arguments: input_text and voice_font. Ezt a függvényt akkor hívja meg a rendszer, amikor egy felhasználó megnyomja az alkalmazás szöveg-beszéd konvertálása gombját.This function is called whenever a user presses the convert text-to-speech button in your app. input_text a szöveg lefordítására irányuló hívás által visszaadott fordítási kimenet, voice_font a HTML-ben a hangbetűkészlet-választó értéke.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. Hozzon létre egy synthesize.py nevű fájlt a munkakönyvtár gyökerében.Let's create a file called synthesize.py in the root of your working directory.

  2. Ezután adja hozzá ezt a kódot a synthesize.pyhoz.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. Adja hozzá a Speech Services-előfizetési kulcsot, és mentse.Add your Speech Services subscription key and save.

Útvonal hozzáadása a app.pyhozAdd a route to app.py

Hozzon létre egy útvonalat a lombik alkalmazásban, amely meghívja a synthesize.py.Let's create a route in your Flask app that calls synthesize.py. Ez az útvonal akkor lesz meghívva, amikor egy felhasználó megnyomja az alkalmazás szöveg-beszéd konvertálása gombját.This route will be called each time a user presses the convert text-to-speech button in your app. A fordítási és a hangulati elemzési útvonalakhoz hasonlóan ez az útvonal fogadja POST kéréseket, mivel a függvény két argumentumot vár: a szintetizált szöveg és a lejátszás hangbetűkészlete.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. Nyissa meg app.py és keresse meg az importálási utasítást a app.py tetején, és frissítse a következőt:Open app.py and locate the import statement at the top of app.py and update it:

    import translate, sentiment, synthesize
    

    A lombik-alkalmazás most már a synthesize.pyon keresztül elérhető módszert is használhatja.Now our Flask app can use the method available via synthesize.py.

  2. Másolja ezt a kódot app.py végére, és mentse a következőt: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
    

index.html frissítéseUpdate index.html

Most, hogy már van egy függvénye szöveg-beszéd átalakításra, és egy útvonal a lombik alkalmazásban való meghívásához, a következő lépés az alkalmazás HTML-címének megírása.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. Az alábbi HTML-fájl néhány dolgot tartalmaz:The HTML below does a few things:

  • Hangválasztó legördülő menüProvides a voice selection drop-down
  • Gomb hozzáadásával szöveggé alakítható átAdds a button to convert text-to-speech
  • Egy hangelem hozzáadására szolgál, amely a szintetizált beszéd visszajátszására használatosAdds an audio element, which is used to play back the synthesized speech
  1. Nyissa meg index.html és keresse meg a következő kódokat:Open index.html and locate these code comments:

    <!-- Start voice font selection code -->
    
    <!-- End voice font selection code -->
    
  2. A kód megjegyzéseit cserélje le a következő HTML-blokkra: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. Ezután keresse meg a következő kódokat:Next, locate these code comments:

    <!-- Add Speech Synthesis button and audio element -->
    
    <!-- End Speech Synthesis button -->
    
  4. A kód megjegyzéseit cserélje le a következő HTML-blokkra: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. Ügyeljen arra, hogy mentse a munkáját.Make sure to save your work.

main.js frissítéseUpdate main.js

Az alábbi kódban a HTML-ből származó tartalmat használjuk a lombik útvonalára vonatkozó kérelem létrehozásához.In the code below, content from the HTML is used to construct a request to your Flask route. Pontosabban a fordítást és a hangbetűkészletet rendeli hozzá a rendszer a változóhoz, majd a kérésben a text-to-speech útvonalra küldi át.Specifically, the translation and the voice font are assigned to variables, and then passed along in the request to the text-to-speech route.

A kód ezután megismétli a választ, és frissíti a HTML-t az érzelmi pontszámokkal.The code then iterates through the response, and updates the HTML with the sentiment scores.

  1. Az IDE-ből hozzon létre egy main.js nevű fájlt a static könyvtárban.From your IDE, create a file named main.js in the static directory.
  2. A kód másolása static/scripts/main.jsba: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. Már majdnem kész.You're almost done. Az utolsó teendő, hogy hozzáad egy kódot a main.jshoz, hogy automatikusan kiválasszon egy hangbetűkészletet a fordításhoz kiválasztott nyelv alapján.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. Adja hozzá ezt a kódrészletet a main.jshoz: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)";
      }
    });
    

Az alkalmazás teszteléseTest your app

Tesztelje a beszédfelismerési szintézist az alkalmazásban.Let's test speech synthesis in the app.

flask run

Navigáljon a megadott kiszolgálócím-címre.Navigate to the provided server address. Írja be a szövegbeviteli terület szövegét, válassza ki a nyelvet, majd nyomja le a fordítás gombot.Type text into the input area, select a language, and press translate. Be kell szereznie egy fordítást.You should get a translation. Ezután válasszon ki egy hangot, majd nyomja meg a szöveg konvertálása a beszédre gombot.Next, select a voice, then press the convert text-to-speech button. a fordítást szintetizált beszédként kell lejátszani.the translation should be played back as synthesized speech. Ha nem működik, győződjön meg arról, hogy az előfizetési kulcsot adta hozzá.If it doesn't work, make sure that you've added your subscription key.

Tipp

Ha a végrehajtott módosítások nem jelennek meg, vagy az alkalmazás nem a várt módon működik, próbálja meg törölni a gyorsítótárat, vagy nyisson meg egy privát/inkognitóban ablakot.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.

Így van egy működő alkalmazása, amely elvégzi a fordításokat, elemzi a hangulatát és a szintetizált beszédet.That's it, you have a working app that performs translations, analyzes sentiment, and synthesized speech. Nyomja le a CTRL + c billentyűkombinációt az alkalmazás leöléséhez.Press CTRL + c to kill the app. Mindenképpen tekintse meg a többi Azure-Cognitive Services.Be sure to check out the other Azure Cognitive Services.

Forráskód beszerzéseGet the source code

A projekt forráskódja elérhető a githubon.The source code for this project is available on GitHub.

További lépésekNext steps