Streamlit: Rapid Prototyping

JavaScript (script.js):

function sendData() {

const query = document.getElementById("userInput").value;

fetch('/api/chat', {

method: 'POST',

body: JSON.stringify({text: query})

})

.then(response => response.json())

.then(data => {

document.getElementById("response").innerText = data.answer;

});

}

Python (app.py):
from flask import Flask, request, jsonify
app = Flask(__name__)

@app.route('/api/chat', methods=['POST'])
def chat():
    data = request.json
    # ... logic ...
    return jsonify({"answer": "Here is the result"})


This is painful. You are a Data Scientist or AI Engineer, not a Frontend Web Developer. You spend 80% of your time fighting with CSS margins and JavaScript promises, and only 20% on the actual AI logic.

There has to be a way to write pure Python and get a beautiful web app automatically.

Let's Build It

Enter Streamlit. Streamlit is a library that turns data scripts into shareable web apps. It handles all the HTML, CSS, and JavaScript for you.

Step 0: Installation and Setup

First, we need to install the library.

pip install streamlit

Create a new file named app.py. To run a Streamlit app, you don't use the python command. You use the streamlit command:

streamlit run app.py

Step 1: Hello World (The Magic)

Streamlit works on a simple principle: The entire script runs from top to bottom every time the user interacts with the page.

Let's write our first app.

# app.py
import streamlit as st
import time

# Add a title
st.title("My First GenAI App")

# Add text
st.write("Welcome to Day 71. This is a web app built entirely in Python.")

# Simulate a process
st.write("Loading AI model...")
time.sleep(1) # Pretending to work
st.success("Model Loaded!")

Save the file. Look at your browser. You will usually see a "Source file changed" button in the top right. Click "Always rerun." Now, every time you save your file, the web page updates instantly.

Step 2: Input Widgets

Static text is boring. We need user input. Streamlit provides widgets that look like variables in your code.

import streamlit as st

st.title("Echo Bot")

# Text Input
user_name = st.text_input("What is your name?", "Stranger")

# Button
if st.button("Say Hello"):
    st.write(f"Hello, {user_name}! Welcome to the bootcamp.")
else:
    st.write("Waiting for you to click the button...")

Step 3: Layouts (Sidebar and Columns)

Professional apps don't just dump everything in a vertical list. Let's organize our UI. We will put configuration options in a sidebar and use columns for the main display.

import streamlit as st

st.title("AI Configuration Dashboard")

# The Sidebar
with st.sidebar:
    st.header("Settings")
    model_type = st.selectbox("Choose Model", ["GPT-3.5", "GPT-4", "Claude 2"])
    temperature = st.slider("Creativity (Temperature)", 0.0, 1.0, 0.7)

# Main Page Columns
col1, col2 = st.columns(2)

with col1:
    st.info(f"Selected Model: {model_type}")

with col2:
    st.warning(f"Current Temperature: {temperature}")

st.write("---")
st.write("Chat interface would go here...")

Step 4: Session State (The Brain)

This is the most important concept of the day.

Let's prove it with a counter.

import streamlit as st

st.title("The Memory Test")

# BROKEN COUNTER
count = 0
if st.button("Increment Broken Counter"):
    count += 1
st.write(f"Broken Count: {count}") 
# This will always show 0 or 1, because count resets to 0 every time.

st.write("---")

# WORKING COUNTER
# 1. Initialize the state if it doesn't exist
if 'my_count' not in st.session_state:
    st.session_state.my_count = 0

# 2. Modify the state
if st.button("Increment Working Counter"):
    st.session_state.my_count += 1

# 3. Read the state
st.write(f"Working Count: {st.session_state.my_count}")

Step 5: The Chat Interface (Main Project)

import streamlit as st
import time

st.title("Day 71: Streamlit Chat")

# --- 1. Setup Session State for History ---
if "messages" not in st.session_state:
    st.session_state.messages = []

# --- 2. Sidebar for Settings ---
with st.sidebar:
    st.header("Model Settings")
    st.write("This helps simulate different AI behaviors.")
    response_delay = st.slider("Response Speed (sec)", 0.1, 2.0, 0.5)

# --- 3. Display Chat History ---
# We loop through the history and display every message
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.write(message["content"])

# --- 4. Handle New User Input ---
# st.chat_input creates the text box at the bottom
if prompt := st.chat_input("What is on your mind?"):
    
    # A. Display User Message
    with st.chat_message("user"):
        st.write(prompt)
    
    # B. Add User Message to History
    st.session_state.messages.append({"role": "user", "content": prompt})

    # C. Generate AI Response (Simulated)
    with st.chat_message("assistant"):
        message_placeholder = st.empty() # Create a placeholder to stream text
        full_response = ""
        
        # Simulate thinking logic
        simulated_response = f"I heard you say: '{prompt}'. That is interesting!"
        
        # Simulate typing effect
        for chunk in simulated_response.split():
            full_response += chunk + " "
            time.sleep(0.05) # Typing speed
            # Add a blinking cursor to show activity
            message_placeholder.write(full_response + "▌")
            
        message_placeholder.write(full_response)
    
    # D. Add AI Message to History
    st.session_state.messages.append({"role": "assistant", "content": full_response})

You now have a functional chat interface.

Now You Try

Take the Chat Interface code above and extend it.

Add a button in the sidebar that, when clicked, wipes the conversation history.

Challenge Project: The PDF RAG UI

Your challenge is to build a frontend for a "Chat with PDF" tool. We won't connect the vector database today (unless you feel ambitious and want to pull in code from Day 65), but we will build the UI logic for it.

* User opens app -> Sees "Please upload a PDF to begin."

* App shows "Processing..." for 2 seconds.

* App shows "File Processed!"

* Chat interface appears. User asks "What is the termination clause?"

What You Learned

Today you stepped out of the console and into the browser.

* Streamlit Structure: You learned that the script runs top-to-bottom on every interaction.