Рубрики
Без рубрики

Как создать веб -приложение AI с нуля, чтобы перевести языки и развернуть его в Azure App Services

Позвольте мне сказать вам секрет: «Вам не нужно быть опытным человеком, чтобы создать AW … Tagged с Azure, Python, Flask, Ai.

Позвольте мне сказать вам секрет: «Вам не нужно быть опытным человеком, чтобы создать потрясающее приложение ИИ».

Да! Вы слышали это правильно. Microsoft Azure позволила создавать интеллектуальные приложения с помощью своих потрясающих сервисов. Вам просто нужно подключение к Интернету, учетная запись Microsoft Azure, ноутбук/ПК, и все. Но как начать?

Ну, я тебя покрыл. В этом уроке мы создадим приложение для перевода языка с нуля с помощью Azure Cognitive Services. Мы будем использовать Flask Framework для разработки нашего приложения и переводчика Azure в качестве бэкэнда. Затем мы развернем его в Azure App Services.

Цели:
  • Создание передней части для нашего приложения с Колба Анкет
  • Добавление бэкэнда с когнитивным обслуживанием Azure.
  • Развертывание приложения на Azure App Services.
Приковаемые:
  • VS -код, установленный в системе, или вы можете использовать любой другой редактор кода.
  • Python 3.6 или более поздней вершины и фламка (мы установим его на протяжении всего процесса).
  • Microsoft Azure Учетная запись Анкет
И мы выполним нашу работу в двух частях:

Развертывание приложений и развертывание приложений

И сейчас…

1. Разработка приложения

На этом этапе мы разработаем наше приложение с нуля. Мы установим все зависимости и настроим среду. Тогда мы сделаем некоторое программирование, а также добавим бэкэнд в нашем приложении с помощью переводчика Azure.

Настройка среды разработки

Таким образом, чтобы начать разработку нашего приложения Flask, нам нужно иметь несколько инструментов и идеальную среду разработки, чтобы облегчить нам, но перед настройкой среды вам необходимо выполнить следующие два шага:

  1. Установить код Visual Studio [ Руководство ]

  2. Установить Python [ Руководство ]

ПРИМЕЧАНИЕ. Чтобы проверить, есть ли у вас уже Python в вашей системе или нет, вы можете выполнить команду, написанную ниже, в вашей командной строке/Bash.

python --version [Windows]

python3 --version [macOS or Linux]

Это распечатает версию Python, установленную в вашей системе.

Теперь создайте каталог проектов или папку, где мы будем хранить все наши файлы. Вы можете создать это в любом месте своей системы. После этого запустите Git Bash в этой папке. Теперь мы создадим среду Python для нашего приложения. Вы можете использовать следующую команду в Bash:

python -m venv venv [Windows]

python3 -m venv venv [macOS or Linux]

Теперь активируйте среду со следующей командой:

.\\venv\\scripts\\activate [Windows]

source ./venv/bin/activate [macOS or Linux]

Теперь пришло время установить платформу Flask в нашу систему, и для этого мы создадим файл retement.txt в нашем каталоге проекта, который будет содержать все библиотеки, необходимые для приложения.

Откройте свой код VS и перейдите в свой каталог проектов. Создайте новый файл в том же каталоге и назовите его «TERDS.TXT» и добавьте в него следующий текст:

flask
python-dotenv
requests

Сохраните файл и верните обратно в свою командную строку/bash. Запустите следующую команду:

pip install -r requirements.txt

Эта команда установит все зависимости и библиотеки в вашей системе. И мы создали нашу среду разработки, и это …

Создание передней части для нашего приложения

Перейдите в свой код VS в свой каталог проектов и создайте новый файл с именем “app.py”. Добавьте следующий код в этот файл:

from flask import Flask, render_template
from flask import request
app = Flask(__name__)

@app.route('/', methods=['GET'])
def index():
return render_template('index.html')

Нам нужно исправить корень по умолчанию, который будет использоваться для запуска приложения в случае, если пользователь не дает никакого конкретного имени сервера или домена. Таким образом, мы будем использовать маршрут -/.

Затем мы будем использовать запрос GET здесь, потому что, когда запрос GET придет для/, Flask позвонит объявленной функции index.html, где мы напишем шаблон HTML в качестве фронтального приложения.

Итак, давайте разработать шаблон HTML, для которого мы будем использовать Bootstrap Анкет

  1. Создайте новую папку в своем каталоге проекта и назовите ее как «шаблоны».

  2. В этой папке «Шаблоны» создайте два файла и соответственно назовите их «index.html» и «results.html».

  3. В index.html добавьте следующий код:





    
    
    
    Translator by Amit Tomar


    

        
Translator by Amit Tomar

        
Enter the text below you want to translate, choose your preferred language, and click on Translate Now!

Здесь мы разработали одну часть нашего интерфейса, но приложение не даст нам никаких результатов, поскольку мы еще не добавили нашу сервисную услугу. Поэтому добавить переводчика с нашим приложением перейдите к вашему порталу Azure.

Добавление Azure Translator в нашем приложении в качестве бэкэнда

Теперь мы добавим переводчика Azure в нашем приложении, чтобы он мог перевести один язык в другой. Но До этого давайте поймем, что такое переводчик Azure?

Azure Translator является частью Azure Cognitive Services, и это облачная платформа для перевода языка. Кроме того, легко интегрировать его с вашими приложениями и веб -сайтом.

Итак, чтобы добавить переводчика Azure с нашим приложением. Open Портал лазурного Если у вас уже есть учетная запись, вы можете создать ее для себя. Он также предлагает бесплатный уровень.

  • Нажмите на создание ресурса.

  • Поиск «Переводчик» и откройте его.

  • Заполните необходимую информацию.

Подписка: Ваша подписка Ресурсная группа: Выберите существующий или создайте новый. Ресурсная группа регион: Выберите регион рядом с вами Ресурсный регион: Выберите то же самое, что и регион ресурсов Имя: Уникальное имя вашего приложения Ценовой уровень: Бесплатно F0

  • Просмотрите и создайте свой сервис. Потребуется несколько секунд, чтобы успешно развернуть ваш ресурс.
  • Как только ресурс будет создан, перейдите в свой ресурс. И на левой панели нажмите на ключи и конечную точку.
  • Скопируйте ключ 1 и отметите местоположение и конечную точку. Ключ 1 и клавиша 2 одинаковы, вы можете скопировать любого.

Храните ключ и другие значения бэкэнд в нашем приложении

Теперь нам нужно подключить наш бэкэнд с нашим приложением. Для этого мы создадим новый файл с именем “.env” в нашем локальном каталоге проектов. А затем введите следующий код в этом файле:

KEY=your_key
ENDPOINT=your_endpoint
LOCATION=your_location

Не забудьте заменить your_key, your_endpoint и your_location соответственно на детали, которые вы скопировали с панели панели Translator Azure. Сохраните файл.

Вызов службы переводчика Azure в нашем приложении

Теперь давайте добавим еще немного кода в наше приложение, так как нам нужно позвонить в службу переводчика в нашем приложении.

Перейдите обратно в свой код VS и откройте app.py. Добавьте следующие коды в вашем файле соответственно в начале и конец:

import requests, os, uuid, json
from dotenv import load_dotenv
load_dotenv()

В приведенном выше коде первая строка используется для импорта всех необходимых библиотек, которые будут использоваться для вызова службы переводчика Azure. Позже мы используем load_dotenv для загрузки значений бэкэнд из нашего файла .env.

@app.route('/', methods=['POST'])
def index_post():

    original_text = request.form['text']
    target_language = request.form['language']

    key = os.environ['KEY']
    endpoint = os.environ['ENDPOINT']
    location = os.environ['LOCATION']

    path = '/translate?api-version=3.0'
    target_language_parameter = '&to=' + target_language
    constructed_url = endpoint + path + target_language_parameter

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

    body = [{ 'text': original_text }]

    translator_request = requests.post(constructed_url, headers=headers, json=body)

    translator_response = translator_request.json()

    translated_text = translator_response[0]['translations'][0]['text']

    return render_template(
        'results.html',
        translated_text=translated_text,
        original_text=original_text,
        target_language=target_language
    )

Итак, теперь давайте поймем, как работает наш указанный выше код:

  1. Сначала он читает предоставленные пользователем значения: выбран текст и язык.
  2. Затем он берет переменную среды или значения из нашего файла .env.
  3. Он обнаруживает исходный язык и создает путь, чтобы вызвать службу переводчика Azure.
  4. Создает тело для нашего текста, который мы хотим перевести, и называет сервис переводчика.
  5. Затем он получает переведенный текст с сервера в качестве ответа JSON.
  6. Дает окончательный результат!

Все выглядит хорошо, так как мы разработали переднюю часть, а также добавили переводчика в качестве бэкэнда.

Но когда вы нажмете «Перевести сейчас! ” Это даст вам ошибку.

Это потому, что мы не разработали страницу результатов для нашего приложения. Таким образом, для нашего приложения нет конечного пункта назначения, и нет четкого способа навигации. Чтобы решить эту проблему, давайте разработать страницу результата. Итак, давайте разработаем страницу результата для нашего приложения.

Вспомните в папке шаблонов. В результатах.html добавьте следующий код:





    
    
    
    Translator created by Amit Tomar


    

        
I have got you a result!

        

            Original text was: {{ original_text }}
        

        

            Translated text is: {{ translated_text }}
        

        

            Target language code: {{ target_language }}
        

        
        

        Thanks for using. Hope you loved it :)

Теперь нам всем хорошо идти. И теперь мы собираемся проверить наше последнее приложение!

Проверьте приложение локально

А теперь давайте протестируем наше приложение локально. Откройте терминал и запустите следующие команды:

set FLASK_ENV=development [Windows]

export FLASK_ENV=development [Linux/macOS]

flask run

Откройте свой браузер и перейдите к http://localhost: 5000 Анкет Вы увидите свое приложение там. Теперь дайте ему текст для перевода и выберите предпочитаемый язык. Нажмите «Перевести сейчас!» и бум:)

2. Приложение развертывание

Мы выполнили первую часть нашего приложения, успешно создав его, но оно доступно только на месте. К сожалению, другие не могут получить доступ к вашему Localhost: 5000. Таким образом, вам нужно загрузить все приложение где -нибудь, чтобы оно было доступно для всех.

И чтобы разместить наше приложение в Интернете, мы используем службу приложений Azure. Так что же такое Azure App Service?

Azure App Service-это платформа на основе HTTP и полностью управляемую «платформу как сервис» (PAAS), которая используется для хостинга веб-приложений, мобильного бэкэнда и REST API. Благодаря Azure App Service вы получаете функции безопасности, автомассалирование, балансировку нагрузки, за которыми следуют возможности DevOps.

Теперь давайте разместим наше приложение на Azure App Services. Во -первых, мы будем интегрировать службу приложений Azure с нашим кодом VS, а затем подключим Azure App Services с нашим хранилищем GitHub, где мы будем хранить все данные наших приложений.

Добавьте услуги Azure App в свой код VS:

  • Откройте свой код VS и перейдите на вкладку «Расширение».
  • Поиск Azure App Services и установите их.
  • После установки потребуется войти в свою учетную запись Azure. Просто подписание со своими учетными данными.

После того, как расширение Azure App Services установлено на вашем коде VS. Вы можете получить доступ к нему с левой панели, а затем нажать «+».

Здесь вы назовите свое приложение и предоставите другую информацию, связанную с этим. В нашем случае-Translate-dev-in (имя) и версия Python 3,8.

Через мгновение на правом дне вы увидите свой результат. Просто нажмите «Просмотр».

Теперь вы можете просматривать веб -сайт нашего приложения, но, поскольку мы еще не загрузили наш код. Так что это будет выглядеть так.

Теперь нажмите на опцию Центра развертывания на нашем примере веб -сайта. Это приведет вас к порталу Azure. Теперь на портале перейдите в Центр развертывания [последний не классический.]

Поэтому, прежде чем мы движемся сюда в нашей части развертывания. Давайте загрузим наше приложение из локальной системы в наш репозиторий GitHub.

  • Создайте новый репо и назовите его, как вам нравится.
  • Загрузите свое приложение в свое репо, как оно есть. Вы можете загрузить его через Git Bash.

Возвращение к части развертывания. Выберите GitHub в качестве источника кода. и настроить другие данные для навигации по службе приложения для кода нашего приложения.

А потом сохраните это. Подождите некоторое время и перейдите обратно в наш код VS. И снова просмотрите сайт.

Вы увидите свое приложение с URL. Вы можете поделиться этим URL с другими, и они смогут получить доступ к вашему приложению. Приложение будет выглядеть так:

И, наконец, вы сделали это. Поздравляю!

Вы можете проверить мое приложение здесь и GitHub Repo здесь

Если у вас есть какие -либо сомнения, связанные с приложением, не стесняйтесь спрашивать ниже, или вы также можете связаться со мной в моих ручках в социальных сетях: LinkedIn , Twitter и Instagram

Пока-пока!

Оригинал: “https://dev.to/amittomar/how-to-build-an-ai-web-app-from-scratch-to-translate-languages-deploy-it-to-azure-app-services-215g”

Читайте ещё по теме: