Build an AI web app to translate text with Flask
Learn module
Build an AI web app by using Python and Flask
Goals
In this workshop, we will discuss how to use a Cognitive Service to access text translation in a web app.
| Goal | Description |
|---|---|
| What will you learn | How to create a Flask application, create a Translator service on Azure, and use requests to call the service. |
| What you’ll need | Python and Visual Studio Code |
| Duration | Roughly 1 hour |
| Slides | Powerpoint |
Video walk-through
🎥 Click this image to watch Christopher walk you through the workshop
Pre-Learning
Prerequisites
What students will learn
Have you ever wanted to incorporate artificial intelligence into a website? Do you want to be able to translate text in your web apps? With Cognitive Services and Flask you can create a website to translate text with a small amount of code.
Workshop flow
Setup your environment
Attendees will start by configuring their environments. They will install the necessary tooling, create the folder for their project, and setup the necessary Python libraries.
Create the app
After setting up the environment, attendees will create the project. They will create the template for the landing page and test their application is running correctly.
Create the Translator service
Once the project is up and running, the attendee will create the necessary services on Azure. They’ll obtain the necessary keys to call the service, and properly store them in a .env file.
Call the service from the app
To close out the workshop, attendees will add the code to call the Translator service. They’ll finish by testing their application and seeing text translated in their app!
Next steps
- Deploy a website to App Services
- Connecting IoT devices to Cognitive Services using Azure Functions
- Create machine learning models
Practice
Now that you know how to make a web app that can translate text, what other apps can you build? Think of a use case for these translations and see how you can enhance this app. Can you add a voice element to the app, so that you can speak into a microphone, have it transcribed, and then translated using the dropdown?
Feedback
Be sure to give feedback about this workshop!