We’re going to create a website that will translate text into multiple languages using Artificial Intelligence(AI). We’ll use Flask framework for the Front end and Azure Cognitive Services(collection of AI services) for the Back end. 

To get started writing our Flask application with Python, we need to set up our development environment, which will require a couple of items to be installed.

Step 1: Creating the project directory

We can create a project directory from a command or terminal window with one of the following commands :

For Windows :

md FlaskAiApp
cd FlaskAiApp

For mac or linux :

mkdir FlaskAiApp
cd FlaskAiApp

Note: Keep the command or terminal window open for the entire module.

Step 2: Creating the Python virtual environment

Python’s virtual environment isn’t necessarily as complex as it sounds. Instead of creating a virtual machine or container, create a virtual environment which  is a folder containing all the libraries we need to run our application, including the Python runtime itself. By using a virtual environment, we make our applications modular, allowing us to keep them separate from each other and avoid versioning issues. When working with Python, you should always use virtual environments as a best practice. Write the following commands in the command or terminal window. 

For Windows :

# Create the environment
python3 -m venv venv

# Activate the environment
source ./venv/bin/activate

pip install -r requirements.txt

Step 4: Creating app.py

Usually, a file called app.py is an entry point for Flask applications. Create a file name app.py in the project directory. 

After creating app.py file add the following code :

The import declaration contains references to Flask, which is the core of any Flask program. In a while, if we want to return our HTML, we can use the render template.

We will use one route – ‘/’. This route is often called either the default route or the index route since it is used when the user does not have something other than the domain name or the server.  Now let us add the route method by using the following code. 

By using @app.route, we indicate the route that we want to create. The path is ‘/’, which is the default route. We indicate that this is going to be used for GET. If a GET request is received for /, Flask will automatically call the function. In the index body, we indicate that we are going to return the HTML template named index.html to the user.

Step 5: Create the HTML template

Let us create the Jinja (the templating engine for Flask). First, create the folder name templates and create the index.html file inside the templates folder. Add the following code:

Step 6: Testing the application

Open the terminal in the Visual Studio Code and run the following commands:

For Windows:  

set FLASK_ENV=development

For macOS/Linux:  

export FLASK_ENV=development

Run the application: 

flask run

Open the application in a browser by navigating to http://localhost:5000. The index.html will be displayed.

Step 7: Creating Back-end using Azure Cognitive Services

Azure offers Cognitive services, which include computer vision services, speech to text, and text to speech and text translation services. You can access any of these services via software developer kits (SDKs) or by calling them the same way you would call any other HTTP endpoint. You’ll need an Azure account to use Cognitive Services. We’ll need a key to call Translator Service (or any other Cognitive Service). This key will be used whenever we have access to the service. The key is the same as the password.

Now let’s create the Translator Service key using the Azure portal and store it into the .env file in our application.

1. Browse to Azure portal.

2. Select Create a resource.

 3. In the search box enter Translator.

4. Select Create.

5.  Complete the given form:

• Subscription: Your subscription
• Resource group:
  • Select Create new
  • Name: AIFlask
• Resource group region: Select a region near you
• Resource region: Select the same region as above
• Name: A unique value, such as ai-yourname
• Pricing tier: Free F0

6. Select Review+Create.

7.  Select Create.

8. Select Go to resource.

9. Select Keys and Endpoint on the left side under RESOURCE MANAGEMENT

10. Create .env file in our application to store the key.

Replace the placeholders in the .env file.

• your_key with the key you copied above
• your_endpoint with the endpoint from Azure
• your_location with the location from Azure

Step 8: Calling the Translator service

At the top of the app.py file insert the following code :-

Now add the code to create the route and logic for translating text at the bottom of the app.py :-

Step 9 :- Creating the template to display the results 

Let us create the file name results.html in the templates folder and add the following HTML code :-

Step 10: Let’s Test our Text Translation Service Application

Execute the command flask run in the terminal to restart the service and browse to http://localhost:5000 to test your application.

Result:

Successfully we had created an AI application using Python, Flask and Azure Cognitive Services that translates the text into different languages.