Vamos a crear un sitio web que traducirá texto a varios idiomas utilizando Inteligencia Artificial (IA). Usaremos el marco Flask para el front-end y Azure Cognitive Services (recopilación de servicios de IA) para el back-end.
Para comenzar a escribir nuestra aplicación Flask con Python, debemos configurar nuestro entorno de desarrollo, lo que requerirá la instalación de un par de elementos.
Paso 1: Crear el directorio del proyecto
Podemos crear un directorio de proyecto desde una ventana de comando o terminal con uno de los siguientes comandos:
Para ventanas :
md FlaskAiApp cd FlaskAiApp
Para mac o linux:
mkdir FlaskAiApp cd FlaskAiApp
Nota: Mantenga abierta la ventana de comando o terminal para todo el módulo.
Paso 2: Crear el entorno virtual de Python
El entorno virtual de Python no es necesariamente tan complejo como parece. En lugar de crear una máquina virtual o un contenedor, cree un entorno virtual que sea una carpeta que contenga todas las bibliotecas que necesitamos para ejecutar nuestra aplicación, incluido el tiempo de ejecución de Python. Al utilizar un entorno virtual, hacemos que nuestras aplicaciones sean modulares, lo que nos permite mantenerlas separadas entre sí y evitar problemas de versiones. Cuando trabaje con Python, siempre debe usar entornos virtuales como práctica recomendada. Escriba los siguientes comandos en la ventana de comando o terminal.
Para ventanas :
# Create the environment python -m venv venv # Activate the environment .\\venv\\scripts\\activate
Para macOS y Linux:
# Create the environment python3 -m venv venv # Activate the environment source ./venv/bin/activate
Paso 3: Instalación de Flask y otras bibliotecas
Con nuestro entorno virtual creado y activado, ya se puede instalar la biblioteca Flask que necesitamos para nuestro sitio web. Instalaremos Flask siguiendo una convención común para crear el archivo requirements.txt . El archivo requirements.txt no es especial en sí mismo; es un archivo de texto donde enumeramos las bibliotecas requeridas para nuestra aplicación. Pero los desarrolladores suelen utilizar la convención, lo que facilita la administración de aplicaciones de las que dependen varias bibliotecas.
Abra el directorio del proyecto en Visual Studio Code y cree el archivo requirements.txt y agregue el siguiente texto:
Regrese al símbolo del sistema o a la ventana del terminal y realice la instalación usando pip para ejecutar el siguiente comando:
pip install -r requirements.txt
Paso 4: Creando app.py
Por lo general, un archivo llamado app.py es un punto de entrada para las aplicaciones de Flask. Cree un nombre de archivo app.py en el directorio del proyecto.
Después de crear el archivo app.py , agregue el siguiente código:
Python3
from flask import Flask, render_template app = Flask(__name__)
La declaración de importación contiene referencias a Flask, que es el núcleo de cualquier programa Flask. Dentro de un tiempo, si queremos devolver nuestro HTML, podemos usar la plantilla de renderizado.
Usaremos una ruta: ‘/’. Esta ruta a menudo se denomina ruta predeterminada o ruta de índice, ya que se usa cuando el usuario no tiene nada más que el nombre de dominio o el servidor. Ahora agreguemos el método de ruta usando el siguiente código.
Python3
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
Usando @app.route, indicamos la ruta que queremos crear. La ruta es ‘/’, que es la ruta predeterminada. Indicamos que esto se va a utilizar para GET . Si se recibe una solicitud GET para /, Flask llamará automáticamente a la función. En el cuerpo del índice, indicamos que vamos a devolver la plantilla HTML denominada index.html al usuario.
Paso 5: Crea la plantilla HTML
Vamos a crear el Jinja (el motor de plantillas para Flask). Primero, cree las plantillas de nombre de carpeta y cree el archivo index.html dentro de la carpeta de plantillas . Agrega el siguiente código:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <title>Text Translator</title> </head> <body> <div class="container"> <h1>Test Translation service</h1> <div>Enter the text you wish to translate, choose the language, and click Translate button</div> <div> <form method="POST"> <div class="form-group"> <textarea name="text" cols="20" rows="10" class="form-control"></textarea> </div> <div class="form-group"> <label for="language">Language:</label> <select name="language" class="form-control"> <option value="en">English</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="ru">Russian</option> <option value="de">German</option> </select> </div> <div> <button type="submit" class="btn btn-success">Translate</button> </div> </form> </div> </div> </body> </html>
Paso 6: Prueba de la aplicación
Abra la terminal en Visual Studio Code y ejecute los siguientes comandos:
Para ventanas:
set FLASK_ENV=development
Para mac OS/Linux:
export FLASK_ENV=development
Ejecute la aplicación:
flask run
Abra la aplicación en un navegador navegando a http://localhost:5000. Se mostrará el index.html.
Paso 7: Creación de back-end con Azure Cognitive Services
Azure ofrece servicios cognitivos, que incluyen servicios de visión artificial, voz a texto y servicios de traducción de texto a voz y de texto. Puede acceder a cualquiera de estos servicios a través de kits de desarrollo de software (SDK) o llamándolos de la misma manera que llamaría a cualquier otro punto final HTTP. Necesitará una cuenta de Azure para usar Cognitive Services. Necesitaremos una clave para llamar al Servicio de traducción (o cualquier otro Servicio cognitivo). Esta clave se utilizará siempre que tengamos acceso al servicio. La clave es la misma que la contraseña.
Ahora vamos a crear la clave del Servicio de traducción mediante Azure Portal y almacenarla en el archivo .env de nuestra aplicación.
1. Vaya a Azure Portal.
2. Seleccione Crear un recurso .
3. En el cuadro de búsqueda, ingrese Traductor .
4. Seleccione Crear .
5. Complete el formulario dado:
- Suscripción: Su suscripción
- Grupo de recursos:
- Seleccione Crear nuevo
- Nombre: AIFlask
- Región del grupo de recursos: seleccione una región cercana a usted
- Región de recursos: Seleccione la misma región que arriba
- Nombre: un valor único, como ai-tunombre
- Nivel de precios: Gratis F0
6. Seleccione Revisar+Crear .
7. Seleccione Crear .
8. Seleccione Ir al recurso .
9. Seleccione Keys and Endpoint en el lado izquierdo debajo de GESTIÓN DE RECURSOS
10. Cree un archivo .env en nuestra aplicación para almacenar la clave.
Reemplace los marcadores de posición en el archivo .env .
- your_key con la clave que copiaste arriba
- your_endpoint con el punto final de Azure
- your_location con la ubicación de Azure
Paso 8: llamar al servicio de traducción
En la parte superior del archivo app.py , inserte el siguiente código:-
Python3
# Importing the required libraries import requests import os import uuid import json from dotenv import load_dotenv load_dotenv()
Ahora agregue el código para crear la ruta y la lógica para traducir el texto en la parte inferior de la aplicación.py : –
Python3
# code
@app.route('/', methods=['POST'])
def index_post():
# Read the values from the form
original_text = request.form['text']
target_language = request.form['language']
# Load the values from .env
key = os.environ['KEY']
endpoint = os.environ['ENDPOINT']
location = os.environ['LOCATION']
# Indicate that we want to translate and the API
# version (3.0) and the target language
path = '/translate?api-version=3.0'
# Add the target language parameter
target_language_parameter = '&to=' + target_language
# Create the full URL
constructed_url = endpoint + path + target_language_parameter
# Set up the header information, which includes our
# subscription key
headers = {
'Ocp-Apim-Subscription-Key': key,
'Ocp-Apim-Subscription-Region': location,
'Content-type': 'application/json',
'X-ClientTraceId': str(uuid.uuid4())
}
# Create the body of the request with the text to be
# translated
body = [{'text': original_text}]
# Make the call using post
translator_request = requests.post(
constructed_url, headers=headers, json=body)
# Retrieve the JSON response
translator_response = translator_request.json()
# Retrieve the translation
translated_text = translator_response[0]['translations'][0]['text']
# Call render template, passing the translated text,
# original text, and target language to the template
return render_template(
'results.html',
translated_text=translated_text,
original_text=original_text,
target_language=target_language
)
Paso 9: – Creación de la plantilla para mostrar los resultados
Vamos a crear el nombre de archivo resultados.html en la carpeta de plantillas y agregar el siguiente código HTML:-
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Result</title>
</head>
<body>
<div class="container">
<h2>Results</h2>
<div>
<strong>Original text:</strong> {{ original_text }}
</div>
<div>
<strong>Translated text:</strong> {{ translated_text }}
</div>
<div>
<strong>Target language code:</strong> {{ target_language }}
</div>
<div>
<a href="{{ url_for('index') }}">Try another one!</a>
</div>
</div>
</body>
</html>
Paso 10: probemos nuestra aplicación de servicio de traducción de texto
Ejecute el comando Flash Run en la terminal para reiniciar el servicio y vaya a http://localhost:5000 para probar su aplicación.
Resultado:
Con éxito, habíamos creado una aplicación de IA usando Python, Flask y Azure Cognitive Services que traduce el texto a diferentes idiomas.
Publicación traducida automáticamente
Artículo escrito por tusharbhadak y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA