Beep Boop 4: Add AI to Your Web App
Tags: beginners, codenewbie, programming, tutorial
Published: 2021-08-30 19:49:39

--- 
title: Beep Boop 4: Add AI to Your Web App
description: In part 4 of this series, we use Python, Flask, VS Code, and Azure Cognitive Services to build a web app that uses AI to translate text in real time. 
tags: beginners, codenewbie, programming, tutorial
series: "Beep Boop"
published: true
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oo3cvjq2y4f8rdu5hp9.png
---

Thanks to everyone who joined us live for the 4th episode of [Beep Boop with the Microsoft Reactor](aka.ms/BeepBooptube)- we showed off our basketball game web app that we created using a [Microsoft Learn module](aka.ms/beepbooplinks3), and started a super cool [new module](aka.ms/beepbooplinks4) where we're building a new web app with AI capabilities, thanks to [Azure Cognitive Services](aka.ms/beepboopazurecs)! 👩‍💻👩🏽‍💻

If you missed the fun live, don't worry- you can watch the replay [here on YouTube](aka.ms/beepboop4), and in the embedded video below!



{% youtube HXuRaikZPLk %}



**On this episode we cover:**



- [6:01](https://youtu.be/HXuRaikZPLk?t=361) We refresh everyone on what [Beep Boop](aka.ms/beepbooptube) is all about 💕


- [8:40](https://youtu.be/HXuRaikZPLk?t=520) We talk about where/how ML and AI showed up in our lives over the past week 🤖

- [13:08](https://youtu.be/HXuRaikZPLk?t=788) Previously on Beep Boop... we catch folks up on what they missed last episode - we show off the web app we built with [Azure](aka.ms/beepboopazure) and [VS Code](aka.ms/beepboopvscode)! You can play with a version of the app [online](aka.ms/beepboop3webapp) 🔁🏀 

- [24:45](https://youtu.be/HXuRaikZPLk?t=1485) Chloe introduces the [Microsoft Learn module](aka.ms/beepbooplinks4) we'll be working on in this session, building an AI web app using Python and Flask in [VS Code](aka.ms/beepboopvscode)! 🐍💻

- [28:13](https://youtu.be/HXuRaikZPLk?t=1693) We double check that we have [VS Code](aka.ms/beepboopvscode) and the correct version of [Python](python.org) installed, and [create the project directory for our web app](aka.ms/beepboop4links2) 📁

- [30:55](https://youtu.be/HXuRaikZPLk?t=1855) Chloe gives us an overview of Flask, we [create and activate a Python virtual environment](aka.ms/beepboop4links3), and install Flask and other libraries inside of the environment. 👩🏽‍💻📚

- [37:23](https://youtu.be/HXuRaikZPLk?t=2243) Ornella shares a hot tip for [productivity in VS Code](aka.ms/vscodeproductivity) 🤓😎

- [39:55](https://youtu.be/HXuRaikZPLk?t=2395) Chloe goes over the [Flask fundamentals](aka.ms/beepboop4links4) - routes (no relation to GPS), methods/verbs, and templates 📍🔣

- [46:11](https://youtu.be/HXuRaikZPLk?t=2771) We [create our core Flask application and add the HTML template](aka.ms/beepboop4links5) ⌨️🖱

- [52:35](https://youtu.be/HXuRaikZPLk?t=3155) We get a first glimpse of the web app we made using flask! 🥳🥰

- [59:05](https://youtu.be/HXuRaikZPLk?t=3545) Franklin answers the question of the day 🐶🦴


*Did you have fun? Check out [Beep Boop 5: Recap and Preview of Season 2](aka.ms/beepboop5) where we finish up our web app and wrap up Season 1 of Beep Boop!*

*To get ready for next week’s session, make sure you [set up your student Azure account](aka.ms/beepboopazure) so you can use [Azure Cognitive Services](aka.ms/beepboopazurecs) alongside us!*