Build a Web App with Streamlit — Connect AI to the Frontend (100% Python!) скачать в хорошем качестве

Build a Web App with Streamlit — Connect AI to the Frontend (100% Python!)

Welcome to Day 10 of the Full-Stack AI Course! 🚀 Yesterday, we built an AI-powered backend (FastAPI + Transformers). Today, we’ll give it a beautiful, interactive “face” using Streamlit — all in Python! 🧠💻 This lesson closes the full-stack loop: you’ll connect your AI “brain” (backend) to a real web “face” (frontend), handle common errors, and build a smooth, user-friendly AI chat experience. In this video, you’ll learn: 1️⃣ How to build a real web app using Streamlit. 2️⃣ How to use the requests library to “call” your FastAPI AI API. 3️⃣ How to connect the frontend (“face”) to the backend (“brain”). 4️⃣ How to handle the #1 beginner error: ConnectionError. 5️⃣ How to complete the Full-Stack AI Loop — all in Python! 📂 Code: app.py (Streamlit frontend) 🧠 Backend: from Day 9 (FastAPI + Transformers) ✅ By the end: You’ll have a full working AI web app with an empathetic, intelligent chatbot — powered by your own backend! 📅 Next (Day 11): Teach your AI to read the web! We’ll build a Web Scraper to give your model its own “custom knowledge.” 0:00 – Welcome to Day 10! Connecting FastAPI with a Frontend 0:30 – Why Users Need a Beautiful Frontend 1:00 – Recap: FastAPI Backend from Day 9 1:45 – Setting Up Streamlit Project (cd Day10, venv, setup) 2:00 – Installing Dependencies (streamlit + requests) 2:20 – Understanding Backend–Frontend Connection (API URL, ports) 3:00 – Creating app.py & Running Streamlit for the First Time 3:40 – Streamlit Basics: st.title() and st.write() 4:05 – Adding User Input with st.text_area() 4:45 – Adding a Send Button (st.button) 5:40 – Sending Requests from Frontend to Backend (POST API call) 6:50 – JSON Payload & API URL Explained (Frontend → Backend) 7:30 – Adding AI Thinking Spinner (st.spinner) 8:40 – Handling Success & Error Responses (status_code == 200) 9:50 – Understanding try/except and Error Handling in Streamlit 11:00 – Explaining status_code, .json(), and API response parsing 12:20 – Demo: Successful API Call + Real AI Reply 13:00 – Demo: What Happens When Backend is Down (Crash test) 14:10 – Adding try/except for ConnectionError (fixing crash) 15:40 – Testing Error Message “Please make sure the server is running” 16:30 – Final Demo: AI Chat Fully Working (Frontend + Backend + Model) 17:00 – Project Recap: You Built a Full Stack AI System! 17:30 – Tomorrow’s Topic: Web Scraping for Custom Knowledge (Day 11 Preview) 17:55 – Outro & Thank You! #Python #AI #FastAPI #Streamlit #FullStack #MachineLearning #OpenAI #WebApp #Chatbot #Transformers #LearnAI #CodingBootcamp #AIProjects