使用 Flask 和 Azure 认知服务构建文本翻译器 Web 应用程序(1)

📌 相关文章

📜 使用 Flask 和 Azure 认知服务构建文本翻译器 Web 应用程序(1)

📅 最后修改于: 2023-12-03 15:22:11.354000 🧑 作者: Mango

使用 Flask 和 Azure 认知服务构建文本翻译器 Web 应用程序

介绍

在本教程中，我们将演示如何使用 Flask 和 Azure 认知服务构建一个简单的文本翻译器 Web 应用程序。我们将使用 Azure 认知服务中的 Translator Text API 来执行翻译。最终的应用程序将允许用户输入文本并选择源和目标语言，然后返回翻译后的文本。我们将使用 Python 作为开发语言。

准备工作

在开始之前，你需要完成以下准备工作：

一个 Azure 帐户。如果你还没有 Azure 帐户，请访问 https://azure.com/free 创建一个免费帐户。
一个 Translator Text API。如果你还没有一个 Translator Text API，请按照如下步骤创建一个：
1. 登录到 Azure 门户（https://portal.azure.com/）。
2. 选择“创建资源” > “AI + Machine Learning” > “Translator Text API”。
3. 按照指引为新的 Translator Text API 部署资源，并记录订阅密钥。

步骤

步骤 1：设置 Flask 应用程序

首先，我们需要设置 Flask 应用程序。在应用程序的根目录下创建一个名为 app.py 的文件，并添加以下代码：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Hello, World!'

此代码将创建一个简单的 Flask 应用程序，其中包括一个名为 home 的路由，该路由在访问应用程序的根路径时返回 "Hello, World!"。

运行 Flask 应用程序

要运行 Flask 应用程序，请在终端中导航到应用程序的根目录，然后运行以下命令：

export FLASK_APP=app.py
export FLASK_ENV=development
flask run

在浏览器中打开 http://localhost:5000/，应该可以看到 "Hello, World!"。

步骤 2：添加翻译路由

现在我们已经设置了 Flask 应用程序，接下来我们要添加一个路由来处理翻译。为此，我们将添加一个新的函数，名为 translate，并将其添加到 app.py 文件中：

from flask import Flask, request, jsonify
import requests, uuid, json

app = Flask(__name__)

@app.route('/')
def home():
    return 'Hello, World!'

@app.route('/translate', methods=['POST'])
def translate():
    subscription_key = 'YOUR_SUBSCRIPTION_KEY'
    endpoint = 'https://api.cognitive.microsofttranslator.com'
    location = 'YOUR_LOCATION'
    
    text = request.json['text']
    source_language = request.json['source_language']
    target_language = request.json['target_language']
    
    path = '/translate?api-version=3.0'
    params = '&from=' + source_language + '&to=' + target_language
    constructed_url = endpoint + path + params

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

    body = [{
        'text': text
    }]
    response = requests.post(constructed_url, headers=headers, json=body)
    response_body = response.json()

    return jsonify(response_body[0]['translations'][0]['text'])

此代码读取来自 POST 请求的源文本、源语言和目标语言。然后，它使用 requests 库将翻译请求发送到 Microsoft Translator API。返回的响应包含在一个 JSON 对象中，其中包括翻译后的文本。最后，我们返回翻译后的文本。

请注意，此代码中的字符串“YOUR_SUBSCRIPTION_KEY”和“YOUR_LOCATION”需要替换为你自己的 Azure 认知服务订阅密钥和位置。

步骤 3：构建前端

接下来，我们将创建一个简单的前端，该前端允许用户输入文本并选择源和目标语言。我们将使用 Bootstrap 来构建我们的前端。

在应用程序的根目录下创建一个名为 templates 的文件夹，然后创建一个名为 translate.html 的文件，其中包含以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Translator</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container my-5">
      <form id="translate-form">
        <div class="form-group">
          <label for="text">Text to translate</label>
          <textarea class="form-control" id="text" name="text" rows="3"></textarea>
        </div>
        <div class="form-group">
          <label for="source-language">Source language</label>
          <select class="form-control" id="source-language" name="source_language">
            <option value="en">English</option>
            <option value="fr">French</option>
            <option value="es">Spanish</option>
            <option value="de">German</option>
          </select>
        </div>
        <div class="form-group">
          <label for="target-language">Target language</label>
          <select class="form-control" id="target-language" name="target_language">
            <option value="en">English</option>
            <option value="fr">French</option>
            <option value="es">Spanish</option>
            <option value="de">German</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary">Translate</button>
      </form>
      <div class="my-5">
        <label for="translation">Translation:</label>
        <p id="translation"></p>
      </div>
    </div>
    <script>
      $(function() {
        $('#translate-form').submit(function(event) {
          event.preventDefault();
          var formData = $(this).serialize();
          $.ajax({
            type: 'POST',
            url: '/translate',
            data: JSON.stringify(formData),
            contentType: 'application/json',
            success: function(data) {
              $('#translation').text(data);
            }
          });
        });
      });
    </script>
  </body>
</html>

此代码创建了一个表单，该表单包括一个文本域，用于输入要翻译的文本，以及两个下拉框，用于选择源和目标语言。当用户提交表单时，我们使用 jQuery 和 AJAX 将数据发送到我们的 Flask 应用程序，并在页面上显示翻译后的文本。

步骤 4：运行应用程序

现在，我们已经设置了 Flask 应用程序并创建了一个简单的前端页面，可以运行我们的应用程序。在终端中导航到应用程序的根目录，并运行以下命令：

export FLASK_APP=app.py
export FLASK_ENV=development
flask run

在浏览器中打开 http://localhost:5000/translate，即可看到我们创建的前端页面。输入任意文本并选择源和目标语言，然后单击“Translate”按钮，即可查看翻译后的文本。

结论

在这个简短的教程中，我们演示了如何使用 Flask 和 Azure 认知服务构建一个简单的文本翻译器 Web 应用程序。我们使用 Azure 认知服务中的 Translator Text API 来执行翻译，并使用 Bootstrap 和 jQuery 构建了一个简单的前端页面来允许用户输入文本并选择源和目标语言。