教學課程:建置採用 Azure 認知服務的 Flask 應用程式Tutorial: Build a Flask app with Azure Cognitive Services

在本教學課程中,您將建置使用 Azure 認知服務來翻譯文字、分析情緒,以及將翻譯的文字合成為語音的 Flask Web 應用程式。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. 我們主要將說明啟用應用程式的 Python 程式碼和 Flask 路由,但對於整合應用程式的 HTML 和 Javascript,我們也會提供相關協助。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. 如果您遇到任何問題,請使用下方的意見反應按鈕告訴我們。If you run into any issues let us know using the feedback button below.

本教學課程涵蓋下列內容:Here's what this tutorial covers:

  • 取得 Azure 訂用帳戶金鑰Get Azure subscription keys
  • 設定開發環境及安裝相依性Set up your development environment and install dependencies
  • 建立 Flask 應用程式Create a Flask app
  • 使用翻譯工具文字 API 來翻譯文字Use the Translator Text API to translate text
  • 使用文字分析來分析輸入文字和翻譯的正面/負面情感Use Text Analytics to analyze positive/negative sentiment of input text and translations
  • 使用語音服務將翻譯的文字轉換成合成語音Use Speech Services to convert translated text into synthesized speech
  • 在本機執行 Flask 應用程式Run your Flask app locally

提示

如果您想要略過而直接查看所有程式碼,您可以在 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.

什麼是 Flask?What is Flask?

Flask 是一個可建立 Web 應用程式的微架構。Flask is a microframework for creating web applications. 這表示 Flask 會提供工具、程式庫和技術,讓您建置 Web 應用程式。This means Flask provides you with tools, libraries, and technologies that allow you to build a web application. 此 Web 應用程式可以是某些網頁、部落格、Wiki,或是以 Web 為基礎的行事曆應用程式或商業網站之類的實質項目。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.

如果您在完成本教學課程後想要深入探索,可以參考以下幾個有用的連結:For those of you who want to deep dive after this tutorial here are a few helpful links:

必要條件Prerequisites

我們要先檢視本教學課程所將需要的軟體和訂用帳戶金鑰。Let's review the software and subscription keys that you'll need for this tutorial.

建立帳戶並訂閱資源Create an account and subscribe to resources

如前所述,您在本教學課程中將需要三個訂用帳戶金鑰。As previously mentioned, you're going to need three subscription keys for this tutorial. 這表示您必須在 Azure 帳戶中建立下列項目的資源:This means that you need to create a resource within your Azure account for:

  • 翻譯文字Translator Text
  • 文字分析Text Analytics
  • 語音服務Speech Services

請使用在 Azure 入口網站中建立認知服務帳戶,取得建立資源的逐步指示。Use Create a Cognitive Services Account in the Azure portal for step-by-step instructions to create resources.

重要

在本教學課程中,請在美國西部區域建立您的資源。For this tutorial, please create your resources in the West US region. 如果使用不同的區域,您將必須在每個 Python 檔案中調整基底 URL。If using a different region, you'll need to adjust the base URL in each of your Python files.

設定開發環境Set up your dev environment

在建置 Flask Web 應用程式之前,您必須建立專案的工作目錄,並安裝幾個 Python 套件。Before you build your Flask web app, you'll need to create a working directory for your project and install a few Python packages.

建立工作目錄Create a working directory

  1. 開啟命令列 (Windows) 或終端機 (macOS/Linux)。Open command line (Windows) or terminal (macOS/Linux). 然後,為您的專案建立工作目錄和子目錄:Then, create a working directory and sub directories for your project:

    mkdir -p flask-cog-services/static/scripts && mkdir flask-cog-services/templates
    
  2. 切換至專案的工作目錄:Change to your project's working directory:

    cd flask-cog-services
    

使用 virtualenv 建立並啟用虛擬環境Create and activate your virtual environment with virtualenv

我們將使用 virtualenv 建立 Flask 應用程式的虛擬環境。Let's create a virtual environment for our Flask app using virtualenv. 使用虛擬環境,可確保您將以全新的環境展開工作。Using a virtual environment ensures that you have a clean environment to work from.

  1. 在您的工作目錄中執行下列命令,以建立虛擬環境:macOS/Linux:In your working directory, run this command to create a virtual environment: macOS/Linux:

    virtualenv venv --python=python3
    

    我們已明確宣告虛擬環境應使用 Python 3。We've explicitly declared that the virtual environment should use Python 3. 這可確保具有多個 Python 安裝的使用者將使用正確的版本。This ensures that users with multiple Python installations are using the correct version.

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

    virtualenv venv
    

    為了簡單起見,我們將虛擬環境命名為 venv。To keep things simple, we're naming your virtual environment venv.

  2. 用來啟用虛擬環境的命令取決於您的平台/殼層:The commands to activate your virtual environment will vary depending on your platform/shell:

    平台Platform 殼層Shell 命令Command
    macOS/LinuxmacOS/Linux bash/zshbash/zsh source venv/bin/activate
    WindowsWindows Bashbash source venv/Scripts/activate
    命令列Command Line venv\Scripts\activate.bat
    PowerShellPowerShell venv\Scripts\Activate.ps1

    執行此命令之後,您的命令列或終端機工作階段應會在前面加上 venvAfter running this command, your command line or terminal session should be prefaced with venv.

  3. 您可以隨時在命令列或終端機中輸入下列內容,以停用工作階段:deactivateYou can deactivate the session at any time by typing this into the command line or terminal: deactivate.

注意

Python 有詳盡的文件會說明如何建立和管理虛擬環境,請參閱 virtualenvPython has extensive documentation for creating and managing virtual environments, see virtualenv.

安裝要求Install requests

要求是用來傳送 HTTP 1.1 要求的常用模組。Requests is a popular module that is used to send HTTP 1.1 requests. 您不需要手動將查詢字串新增至 URL,或對 POST 資料進行表單編碼。There’s no need to manually add query strings to your URLs, or to form-encode your POST data.

  1. 若要安裝要求,請執行:To install requests, run:

    pip install requests
    

注意

如果您想要深入了解要求,請參閱要求:HTTP for HumansIf you'd like to learn more about requests, see Requests: HTTP for Humans.

安裝和設定 FlaskInstall and configure Flask

接下來,我們必須安裝 Flask。Next we need to install Flask. Flask 會處理 Web 應用程式的路由,讓我們能夠進行伺服器對伺服器的呼叫,而對使用者隱藏我們的訂用帳戶金鑰。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. 若要安裝 Flask,請執行:To install Flask, run:

    pip install Flask
    

    我們必須確定 Flask 已安裝。Let's make sure Flask was installed. 請執行:Run:

    flask --version
    

    版本應列印至終端機。The version should be printed to terminal. 若非如此,表示有錯誤發生。Anything else means something went wrong.

  2. 若要執行 Flask 應用程式,您可以使用 flask 命令,或將 Python 的 -m 參數與 Flask 搭配使用。To run the Flask app, you can either use the flask command or Python’s -m switch with Flask. 您必須先匯出 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/LinuxmacOS/Linux:

    export FLASK_APP=app.py
    

    WindowsWindows:

    set FLASK_APP=app.py
    

建立您的 Flask 應用程式Create your Flask app

在本節中,您將建立在使用者叫用您應用程式的根目錄時會傳回 HTML 檔案的簡易 Flask 應用程式。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. 請不要花太多時間在程式碼的細節上,我們稍後將回過頭來更新此檔案。Don't spend too much time trying to pick apart the code, we'll come back to update this file later.

什麼是 Flask 路由?What is a Flask route?

我們將花點時間討論「路由」。Let's take a minute to talk about "routes". 路由可用來將 URL 繫結至特定函式。Routing is used to bind a URL to a specific function. Flask 會使用路由裝飾項目將函式註冊到特定 URL。Flask uses route decorators to register functions to specific URLs. 例如,當使用者瀏覽至 Web 應用程式的根目錄 (/) 時,將會轉譯 index.htmlFor 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')

我們來看看另一個範例以進一步說明。Let's take a look at one more example to hammer this home.

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

此程式碼可確保當使用者瀏覽至 http://your-web-app.com/about 時,將會轉譯 about.html 檔案。This code ensures that when a user navigates to http://your-web-app.com/about that the about.html file is rendered.

雖然這些範例說明如何為使用者呈現 HTML 網頁,但路由也可在按下按鈕時用來呼叫 API,或取用任何數量的動作而無須離開首頁。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. 您在建立翻譯、情感和語音合成的路由時,將會看到此類動作的執行。You'll see this in action when you create routes for translation, sentiment, and speech synthesis.

開始使用Get started

  1. 在 IDE 中開啟專案,然後在工作目錄的根目錄中建立名為 app.py 的檔案。Open the project in your IDE, then create a file named app.py in the root of your working directory. 接著,將此程式碼複製到 app.py 中並儲存: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')
    

    此程式碼區塊會指示應用程式應在每次使用者瀏覽至您 Web 應用程式的根目錄 (/) 時顯示 index.htmlThis code block tells the app to display index.html whenever a user navigates to the root of your web app (/).

  2. 接下來,我們將為 Web 應用程式建立前端。Next, let's create the front-end for our web app. templates 目錄中建立名為 index.html 的檔案。Create a file named index.html in the templates directory. 然後,將此程式碼複製到 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. 我們將測試 Flask 應用程式。Let's test the Flask app. 在終端機中,執行:From the terminal, run:

    flask run
    
  4. 開啟瀏覽器並瀏覽至提供的 URL。Open a browser and navigate to the URL provided. 您應該會看到單頁應用程式。You should see your single page app. 請按 Ctrl + c 以終止應用程式。Press Ctrl + c to kill the app.

翻譯文字Translate text

現在您已大致了解簡易 Flask 應用程式的運作方式,接下來我們將:Now that you have an idea of how a simple Flask app works, let's:

  • 撰寫 Python 以呼叫翻譯工具文字 API 並傳回回應Write some Python to call the Translator Text API and return a response
  • 建立 Flask 路由以呼叫 Python 程式碼Create a Flask route to call your Python code
  • 使用文字輸入和翻譯的區域、語言選取器和翻譯按鈕來更新 HTMLUpdate the HTML with an area for text input and translation, a language selector, and translate button
  • 撰寫可讓使用者從 HTML 與您的 Flask 應用程式互動的 JavascriptWrite Javascript that allows users to interact with your Flask app from the HTML

呼叫翻譯工具文字 APICall the Translator Text API

首要工作是撰寫用來呼叫翻譯工具文字 API 的函式。The first thing you need to do is write a function to call the Translator Text API. 此函式會採用兩個引數:text_inputlanguage_outputThis function will take two arguments: text_input and language_output. 每當有使用者在您的應用程式中按下翻譯按鈕時,就會呼叫此函式。This function is called whenever a user presses the translate button in your app. HTML 中的文字區域會以 text_input 的形式傳送,而 HTML 中的語言選取值則以 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. 首先,我們要在工作目錄的根目錄中建立名為 translate.py 的檔案。Let's start by creating a file called translate.py in the root of your working directory.
  2. 接著,將下列程式碼新增至 translate.pyNext, add this code to translate.py. 此函式會採用兩個引數:text_inputlanguage_outputThis 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. 新增您的翻譯工具文字訂用帳戶金鑰並儲存。Add your Translator Text subscription key and save.

將路由新增至 app.pyAdd a route to app.py

接著,您必須在呼叫 translate.py 的 Flask 應用程式中建立路由。Next, you'll need to create a route in your Flask app that calls translate.py. 每當有使用者在您的應用程式中按下翻譯按鈕時,就會呼叫此路由。This route will be called each time a user presses the translate button in your app.

就此應用程式而言,您的路由將接受 POST 要求。For this app, your route is going to accept POST requests. 這是因為函式預期應有要翻譯的文字和翻譯的輸出語言。This is because the function expects the text to translate and an output language for the translation.

Flask 提供的協助程式函式可協助您剖析和管理每個要求。Flask provides helper functions to help you parse and manage each request. 在提供的程式碼中,get_json() 會從 POST 要求傳回 JSON 形式的資料。In the code provided, get_json() returns the data from the POST request as JSON. 然後,文字和輸出語言值會透過 data['text']data['to'] 傳至可從 translate.py 使用的 get_translation() 函式。Then using data['text'] and data['to'], the text and output language values are passed to get_translation() function available from translate.py. 最後一個步驟是傳回 JSON 形式的回應,因為您必須在 Web 應用程式中顯示這項資料。The last step is to return the response as JSON, since you'll need to display this data in your web app.

在以下幾節中,您將重複此程序,以建立用於情感分析和語音合成的路由。In the following sections, you'll repeat this process as you create routes for sentiment analysis and speech synthesis.

  1. 開啟 app.py 並在 app.py 的最上方找出匯入陳述式,然後新增以下這一行:Open app.py and locate the import statement at the top of app.py and add the following line:

    import translate
    

    現在,我們的 Flask 應用程式已可使用可透過 translate.py 使用的方法。Now our Flask app can use the method available via translate.py.

  2. 將此程式碼複製到 app.py 結尾處並儲存: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.htmlUpdate index.html

現在,您已有用來翻譯文字的函式,且 Flask 應用程式中已有可呼叫此函式的路由,下一個步驟就是開始建置應用程式的 HTML。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. 下列 HTML 會執行幾個動作:The HTML below does a few things:

  • 提供一個文字區域讓使用者可輸入要翻譯的文字。Provides a text area where users can input text to translate.
  • 加入語言選取器。Includes a language selector.
  • 加入 HTML 元素,用以轉譯偵測到的語言以及在翻譯期間傳回的信賴分數。Includes HTML elements to render the detected language and confidence scores returned during translation.
  • 提供用來顯示翻譯輸出的唯讀文字區域。Provides a read-only text area where the translation output is displayed.
  • 為您稍後將在本教學課程中新增至此檔案的情感分析和語音合成程式碼加入預留位置。Includes placeholders for sentiment analysis and speech synthesis code that you'll add to this file later in the tutorial.

我們將更新 index.htmlLet's update index.html.

  1. 開啟 index.html 並找出下列程式碼註解:Open index.html and locate these code comments:

    <!-- HTML provided in the following sections goes here. -->
    
    <!-- End -->
    
  2. 將這些程式碼註解取代為下列 HTML 區塊: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>
    

下一個步驟是撰寫 JavaScript。The next step is to write some Javascript. 這是您的 HTML 與 Flask 路由之間的橋樑。This is the bridge between your HTML and Flask route.

建立 main.jsCreate main.js

main.js 檔案是您的 HTML 與 Flask 路由之間的橋樑。The main.js file is the bridge between your HTML and Flask route. 您的應用程式將使用 jQuery、Ajax 和 XMLHttpRequest 的組合來轉譯內容,以及對您的 Flask 路由發出 POST 要求。Your app will use a combination of jQuery, Ajax, and XMLHttpRequest to render content, and make POST requests to your Flask routes.

在下列程式碼中,會使用 HTML 中的內容來建構對 Flask 路由的要求。In the code below, content from the HTML is used to construct a request to your Flask route. 具體來說,文字區域和語言選取器的內容會指派給變數,並隨著要求傳至 translate-textSpecifically, the contents of the text area and the language selector are assigned to variables, and then passed along in the request to translate-text.

然後,程式碼會逐一查看回應,並以翻譯、偵測到的語言和信賴分數更新 HTML。The code then iterates through the response, and updates the HTML with the translation, detected language, and confidence score.

  1. 從您的 IDE,在 static/scripts 目錄中建立名為 main.js 的檔案。From your IDE, create a file named main.js in the static/scripts directory.
  2. 將此程式碼複製到 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 translation

我們將在應用程式中測試翻譯。Let's test translation in the app.

flask run

瀏覽至提供的伺服器位址。Navigate to the provided server address. 在輸入區域中輸入文字、選取語言,然後按翻譯按鈕。Type text into the input area, select a language, and press translate. 您應會取得翻譯。You should get a translation. 若非如此,請確定您已新增訂用帳戶金鑰。If it doesn't work, make sure that you've added your subscription key.

提示

若未顯示您所做的變更,或應用程式的運作不符合預期,請嘗試清除快取或開啟 private/incognito 視窗。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.

CTRL + c 以終止應用程式,然後前往下一節。Press CTRL + c to kill the app, then head to the next section.

分析情感Analyze sentiment

文字分析 API 可用來執行情感分析、從文字中擷取關鍵片語,或偵測原始語言。The Text Analytics API can be used to perform sentiment analysis, extract key phrases from text, or detect the source language. 在此應用程式中,我們將使用情感分析來判斷提供的文字是正面、中性還是負面的。In this app, we're going to use sentiment analysis to determine if the provided text is positive, neutral, or negative. 此 API 會傳回 0 到 1 之間的數值分數。The API returns a numeric score between 0 and 1. 接近 1 的分數表示正面情感;接近 0 的分數表示負面情感。Scores close to 1 indicate positive sentiment, and scores close to 0 indicate negative sentiment.

在本節中,您將執行幾項工作:In this section, you're going to do a few things:

  • 撰寫呼叫文字分析 API 的 Python,以執行情感分析並傳回回應Write some Python to call the Text Analytics API to perform sentiment analysis and return a response
  • 建立 Flask 路由以呼叫 Python 程式碼Create a Flask route to call your Python code
  • 使用情感分數的區域和用來執行分析的按鈕進行 HTML 更新Update the HTML with an area for sentiment scores, and a button to perform analysis
  • 撰寫可讓使用者從 HTML 與您的 Flask 應用程式互動的 JavascriptWrite Javascript that allows users to interact with your Flask app from the HTML

呼叫文字分析 APICall the Text Analytics API

我們將撰寫用來呼叫文字分析 API 的函式。Let's write a function to call the Text Analytics API. 此函式會採用四個引數:input_textinput_languageoutput_textoutput_languageThis function will take four arguments: input_text, input_language, output_text, and output_language. 每當有使用者在您的應用程式中按下執行情感分析按鈕時,就會呼叫此函式。This function is called whenever a user presses the run sentiment analysis button in your app. 使用者從文字區域和語言選取器提供的資料,以及偵測到的語言和翻譯輸出,會隨著每個要求提供。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. 回應物件包含來源和翻譯的情感分數。The response object includes sentiment scores for the source and translation. 在以下幾節中,您將撰寫用來剖析回應並其用於應用程式中的 Javascript。In the following sections, you're going to write some Javascript to parse the response and use it in your app. 目前我們先將焦點放在呼叫文字分析 API 上。For now, let's focus on call the Text Analytics API.

  1. 我們要在工作目錄的根目錄中建立名為 sentiment.py 的檔案。Let's create a file called sentiment.py in the root of your working directory.
  2. 接著,將下列程式碼新增至 sentiment.pyNext, 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. 新增您的文字分析訂用帳戶金鑰並儲存。Add your Text Analytics subscription key and save.

將路由新增至 app.pyAdd a route to app.py

我們將在呼叫 sentiment.py 的 Flask 應用程式中建立路由。Let's create a route in your Flask app that calls sentiment.py. 每當有使用者在您的應用程式中按下執行情感分析按鈕時,就會呼叫此路由。This route will be called each time a user presses the run sentiment analysis button in your app. 如同翻譯的路由,此路由也會接受 POST 要求,因為函式預期應有引數。Like the route for translation, this route is going to accept POST requests since the function expects arguments.

  1. 開啟 app.py 並在 app.py 的最上方找出匯入陳述式,然後加以更新:Open app.py and locate the import statement at the top of app.py and update it:

    import translate, sentiment
    

    現在,我們的 Flask 應用程式已可使用可透過 sentiment.py 使用的方法。Now our Flask app can use the method available via sentiment.py.

  2. 將此程式碼複製到 app.py 結尾處並儲存: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.htmlUpdate index.html

現在,您已有用來執行情感分析的函式,且 Flask 應用程式中已有可呼叫此函式的路由,下一個步驟就是開始撰寫應用程式的 HTML。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. 下列 HTML 會執行幾個動作:The HTML below does a few things:

  • 在您的應用程式中新增用來執行情感分析的按鈕Adds a button to your app to run sentiment analysis
  • 新增說明情感評分的元素Adds an element that explains sentiment scoring
  • 新增顯示情感分數的元素Adds an element to display the sentiment scores
  1. 開啟 index.html 並找出下列程式碼註解:Open index.html and locate these code comments:

    <!-- Start sentiment code-->
    
    <!-- End sentiment code -->
    
  2. 將這些程式碼註解取代為下列 HTML 區塊: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.jsUpdate main.js

在下列程式碼中,會使用 HTML 中的內容來建構對 Flask 路由的要求。In the code below, content from the HTML is used to construct a request to your Flask route. 具體來說,文字區域和語言選取器的內容會指派給變數,並隨著要求傳至 sentiment-analysis 路由。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.

然後,程式碼會逐一查看回應,並以情感分數更新 HTML。The code then iterates through the response, and updates the HTML with the sentiment scores.

  1. 從您的 IDE,在 static 目錄中建立名為 main.js 的檔案。From your IDE, create a file named main.js in the static directory.

  2. 將此程式碼複製到 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.
    

測試情感分析Test sentiment analysis

我們將在應用程式中測試情感分析。Let's test sentiment analysis in the app.

flask run

瀏覽至提供的伺服器位址。Navigate to the provided server address. 在輸入區域中輸入文字、選取語言,然後按翻譯按鈕。Type text into the input area, select a language, and press translate. 您應會取得翻譯。You should get a translation. 然後,按執行情感分析按鈕。Next, press the run sentiment analysis button. 您應該會看到兩個分數。You should see two scores. 若非如此,請確定您已新增訂用帳戶金鑰。If it doesn't work, make sure that you've added your subscription key.

提示

若未顯示您所做的變更,或應用程式的運作不符合預期,請嘗試清除快取或開啟 private/incognito 視窗。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.

CTRL + c 以終止應用程式,然後前往下一節。Press CTRL + c to kill the app, then head to the next section.

將文字轉換成語音Convert text-to-speech

文字轉語音 API 可讓您的應用程式將文字轉換為仿真人的合成語音。The Text-to-speech API enables your app to convert text into natural human-like synthesized speech. 此服務支援標準、神經和自訂語音。The service supports standard, neural, and custom voices. 我們的範例應用程式只會使用幾個可用的語音,如需完整清單,請參閱支援的語言Our sample app uses a handful of the available voices, for a full list, see supported languages.

在本節中,您將執行幾項工作:In this section, you're going to do a few things:

  • 撰寫 Python 以使用文字轉語音 API 將文字轉換為語音Write some Python to convert text-to-speech with the Text-to-speech API
  • 建立 Flask 路由以呼叫 Python 程式碼Create a Flask route to call your Python code
  • 使用將文字轉換為語音的按鈕和音訊播放的元素更新 HTMLUpdate the HTML with a button to convert text-to-speech, and an element for audio playback
  • 撰寫可讓使用者與您的 Flask 應用程式互動的 JavascriptWrite Javascript that allows users to interact with your Flask app

呼叫文字轉語音 APICall the Text-to-Speech API

我們將撰寫將文字轉換為語音的函式。Let's write a function to convert text-to-speech. 此函式會採用兩個引數:input_textvoice_fontThis function will take two arguments: input_text and voice_font. 每當有使用者在您的應用程式中按下將文字轉換為語音按鈕時,就會呼叫此函式。This function is called whenever a user presses the convert text-to-speech button in your app. input_text 是翻譯文字的呼叫所傳回的翻譯輸出,voice_font 是 HTML 中的聲音音調選取器的值。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. 我們要在工作目錄的根目錄中建立名為 synthesize.py 的檔案。Let's create a file called synthesize.py in the root of your working directory.

  2. 接著,將下列程式碼新增至 synthesize.pyNext, 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. 新增您的語音服務訂用帳戶,並加以儲存。Add your Speech Services subscription key and save.

將路由新增至 app.pyAdd a route to app.py

我們將在呼叫 synthesize.py 的 Flask 應用程式中建立路由。Let's create a route in your Flask app that calls synthesize.py. 每當有使用者在您的應用程式中按下將文字轉換為語音按鈕時,就會呼叫此路由。This route will be called each time a user presses the convert text-to-speech button in your app. 如同翻譯和情感分析的路由,此路由也會接受 POST 要求,因為函式預期應有兩個引數:要合成的文字,和播放的聲音音調。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. 開啟 app.py 並在 app.py 的最上方找出匯入陳述式,然後加以更新:Open app.py and locate the import statement at the top of app.py and update it:

    import translate, sentiment, synthesize
    

    現在,我們的 Flask 應用程式已可使用可透過 synthesize.py 使用的方法。Now our Flask app can use the method available via synthesize.py.

  2. 將此程式碼複製到 app.py 結尾處並儲存: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.htmlUpdate index.html

現在,您已有可將文字轉換為語音的函式,且 Flask 應用程式中已有可呼叫此函式的路由,下一個步驟就是開始撰寫應用程式的 HTML。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. 下列 HTML 會執行幾個動作:The HTML below does a few things:

  • 提供語音選取下拉式清單Provides a voice selection drop-down
  • 新增將文字轉換為語音的按鈕Adds a button to convert text-to-speech
  • 新增音訊元素,用以播放合成的語音Adds an audio element, which is used to play back the synthesized speech
  1. 開啟 index.html 並找出下列程式碼註解:Open index.html and locate these code comments:

    <!-- Start voice font selection code -->
    
    <!-- End voice font selection code -->
    
  2. 將這些程式碼註解取代為下列 HTML 區塊: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. 然後,找出下列程式碼註解:Next, locate these code comments:

    <!-- Add Speech Synthesis button and audio element -->
    
    <!-- End Speech Synthesis button -->
    
  4. 將這些程式碼註解取代為下列 HTML 區塊: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. 確實儲存您的工作。Make sure to save your work.

更新 main.jsUpdate main.js

在下列程式碼中,會使用 HTML 中的內容來建構對 Flask 路由的要求。In the code below, content from the HTML is used to construct a request to your Flask route. 具體來說,翻譯和聲音音調會指派給變數,並隨著要求傳至 text-to-speech 路由。Specifically, the translation and the voice font are assigned to variables, and then passed along in the request to the text-to-speech route.

然後,程式碼會逐一查看回應,並以情感分數更新 HTML。The code then iterates through the response, and updates the HTML with the sentiment scores.

  1. 從您的 IDE,在 static 目錄中建立名為 main.js 的檔案。From your IDE, create a file named main.js in the static directory.
  2. 將此程式碼複製到 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. 就快要完成了。You're almost done. 您的最後一項工作是將程式碼新增至 main.js,以根據為翻譯選取的語言自動選取聲音音調。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. 將下列程式碼區塊新增至 main.jsAdd 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)";
      }
    });
    

測試應用程式Test your app

我們在應用程式中測試語音合成。Let's test speech synthesis in the app.

flask run

瀏覽至提供的伺服器位址。Navigate to the provided server address. 在輸入區域中輸入文字、選取語言,然後按翻譯按鈕。Type text into the input area, select a language, and press translate. 您應會取得翻譯。You should get a translation. 接著,選取語音,然後按將文字轉換為語音按鈕。Next, select a voice, then press the convert text-to-speech button. 翻譯應會以合成語音播放。the translation should be played back as synthesized speech. 若非如此,請確定您已新增訂用帳戶金鑰。If it doesn't work, make sure that you've added your subscription key.

提示

若未顯示您所做的變更,或應用程式的運作不符合預期,請嘗試清除快取或開啟 private/incognito 視窗。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.

就這樣,您已有可執行翻譯、分析情緒和合成語音的應用程式。That's it, you have a working app that performs translations, analyzes sentiment, and synthesized speech. 請按 CTRL + c 以終止應用程式。Press CTRL + c to kill the app. 請務必查看其他 Azure 認知服務Be sure to check out the other Azure Cognitive Services.

取得原始程式碼Get the source code

您可以在 GitHub 上找到此專案的原始程式碼。The source code for this project is available on GitHub.

後續步驟Next steps