Chapter 8: Building a web UI with Streamlit

Introduction

This introduction explains why the local AI chat application needs a web interface and why Streamlit makes one approachable using Python alone.

• Streamlit's role in local chat: Explain that Ollama and the Python API provide the AI backend, while Streamlit provides the web interface users need to interact with the application.
  Why it matters: It clarifies what Streamlit adds to the AI application you have been building.
• Python-only web app approach: Explain how Streamlit lowers the beginner barrier to building an interactive web application compared with traditional web development.
  Why it matters: It explains why a Python learner can build a usable interface without first studying three web languages.

Key terms: Streamlit, web interface, LLM backend, Python API layer, Python, HTML, CSS, JavaScript, interactive web application

8.1 What Is Streamlit?

This section explains how Streamlit turns Python function calls into a web interface and why it suits a beginner-built AI chatbot.

• Python Calls to Web Elements: Explain how Streamlit turns Python function calls into visible, interactive web page elements using the title and text-input examples.
  Why it matters: You can build an interactive interface without writing its HTML or JavaScript yourself.
• Streamlit Application Fit: Distinguish the kinds of applications Streamlit is designed for from products that need more specialized backend infrastructure.
  Why it matters: The framework fits this chatbot project without being a general solution for every kind of website.
• Beginner Friendly Design: Explain why the section describes Streamlit as beginner friendly.
  Why it matters: These defaults let you focus on the app’s Python behavior rather than page design.

Key terms: Streamlit, st.title(), st.text_input(), data apps, dashboards, AI chatbot interface, backend infrastructure, Python-only, Sensible defaults

8.2 Your first Streamlit app

This section introduces the upcoming steps for creating and running a Streamlit app in the existing project folder.

8.2.1 Step 1: Install Streamlit

This subsection prepares the existing chatbot project to use Streamlit by activating its virtual environment and installing Streamlit if needed.

• Streamlit installation in project environment: Describe the setup sequence: work in the existing my-ai-chatbot folder, activate its virtual environment, and install Streamlit if it is not already installed.
  Why it matters: This prepares the project environment for the Streamlit app.

Key terms: my-ai-chatbot, virtual environment, Streamlit, source .venv/bin/activate

8.2.2 Step 2: Create the app file

This section has the reader create a small Streamlit app file and record Streamlit as a project dependency.

• App file and Streamlit alias: Describe creating app.py and explain that importing Streamlit as st lets the code use short calls such as st.title() instead of streamlit.title().
  Why it matters: This connects the app file you create to the Streamlit calls you write in it.
• Recorded Streamlit dependency: State that after installing Streamlit, the project's requirements.txt should be updated to record the dependency.
  Why it matters: Recording the dependency keeps the project's package requirements documented.

Key terms: app.py, import streamlit as st, st, Streamlit, requirements.txt, dependency

8.2.3 Step 3: Run the app

This section explains how to launch the first Streamlit app, what to expect when it opens, and how to handle two browser display problems.

• Streamlit app launch: Explain that a Streamlit app is launched with Streamlit’s own command rather than `python app.py`, and describe the expected browser page.
  Why it matters: Launching the app through Streamlit lets you see the Python app as a web page.
• First-launch display checks: Describe what to check if the browser page is blank and how to respond to a Safari HTTP-only warning for the local app.
  Why it matters: These checks help distinguish a browser display issue from a stopped local app.

Key terms: Streamlit, python app.py, Hello, Streamlit!, Streamlit server, Safari, HTTP-only warning, http://localhost

8.2.4 Step 4: Add interactivity

This section makes a Streamlit app interactive by showing a greeting when the user enters a name and explaining how to see the saved change in the browser.

• Conditional greeting from text input: Explain why the greeting appears only after the user enters a name.
  Why it matters: This connects what the user types to what the app displays.
• Viewing saved app changes: Describe how to see the interactive version after saving app.py and how to try its input.
  Why it matters: It helps you tell whether the browser is showing your latest edit before testing the input.

Key terms: text input, if name:, empty string, greeting, Rerun, Always Rerun, refresh

8.2.5 How Streamlit’s execution model works

This section explains how Streamlit reruns a Python script after user interactions and why that makes interactive code simpler.

• Streamlit rerun and greeting flow: Trace what happens when a user enters a name: Streamlit reruns the script from top to bottom, the text input returns the entered name, and the conditional displays the greeting.
  Why it matters: This explains why a greeting appears when the user submits a name without a separate response function.
• Interactivity without event handlers: Explain why Streamlit’s rerun model lets you write straightforward top-to-bottom Python instead of separate callbacks or event handlers for user actions.
  Why it matters: You can build interactive behavior with ordinary sequential Python rather than wiring up a handler for each action.

Key terms: rerun, st.text_input(), if name:, st.write(), callbacks, event handlers, top-to-bottom Python

8.3 Core Streamlit components

8.3.1 Text display

This section introduces Streamlit text-display functions and highlights st.write() as a flexible default.

• Flexible st.write output: Explain that st.write() can display strings, numbers, dataframes, and charts, making it a useful default when unsure which display function to use.
  Why it matters: You can use one function for several common kinds of output.
• Visual comparison of text displays: Describe how to compare the emphasis of Streamlit text-display functions by putting an example of each in a small app and running it.
  Why it matters: Seeing the functions side by side helps you choose the emphasis you want.

Key terms: st.write(), strings, numbers, dataframes, charts, text display, import streamlit as st, streamlit run

8.3.2 User input

This section explains how Streamlit input widgets make a user’s current input available to application code.

• Input widget return values: Explain that a Streamlit input function displays a widget and returns its current value, which the app can assign to a variable and use to decide what to display or do.
  Why it matters: The returned value connects what a user enters on the page to what your app does next.

Key terms: widgets, user input, current value, return value, variable

8.3.3 Buttons and actions

This section explains how a Streamlit button triggers an action and why its output disappears after another interaction.

• Button actions and reruns: Explain how a button controls an action and why text displayed after a click disappears on the next interaction.
  Why it matters: This explains why clicking Generate produces text that vanishes after another interaction.

Key terms: st.button, Generate, rerun, if block

8.3.4 The sidebar

This section explains how Streamlit places content in a collapsible sidebar and how a chatbot can separate settings from conversation.

• Streamlit sidebar content placement: Explain how `with st.sidebar:` places indented content in the sidebar rather than the main area, and describe the suggested chatbot layout.
  Why it matters: This lets you keep chatbot controls separate from the conversation.

Key terms: sidebar, expanded=True, with st.sidebar:, main content area

8.3.5 Column layout

This section shows how Streamlit columns place content side by side and how that layout may change in a narrow browser window.

• Streamlit column layout: Explain how st.columns() arranges content side by side, using the three weather metrics as an example, and describe what may happen in a narrow browser window.
  Why it matters: Columns let you group related information without assuming it will always appear side by side.

Key terms: st.columns(), columns

8.4 Running Streamlit apps

8.4.1 Starting and stopping

Explains what happens when a Streamlit app starts and how to stop its development server.

• Streamlit server lifecycle: Describe what starting a Streamlit app does and how to stop it: the command launches a local development server, opens the browser, and keeps running until Ctrl-C is pressed in the terminal.
  Why it matters: You need to know that the app keeps running in the terminal so you can stop it when you are done.

Key terms: development server, browser, Ctrl-C

8.4.2 Auto-reload

This section explains how to see changes to a running Streamlit app after saving its Python file.

• Streamlit save and rerun behavior: Describe what happens when you save a Streamlit app’s Python file and how to update the browser view, with or without the Always Rerun option.
  Why it matters: You can see your code changes in the browser without restarting the app each time.

Key terms: Always Rerun, Rerun, auto-reload

8.4.3 Ports and multiple apps

This section explains how ports let Streamlit run multiple apps on the same computer.

• Streamlit Ports and Multiple Apps: Explain what a port is, which port Streamlit uses by default, and what happens when another app is already running on that port.
  Why it matters: This helps you find a second running app when the usual Streamlit port is occupied.

Key terms: port, default port, 8501, next available port

8.4.4 The development workflow

This subsection recommends a side-by-side editor and browser setup for a fast, iterative Streamlit development cycle.

• Side-by-side development workflow: Describe how to arrange VS Code and the browser to make Streamlit development fast and iterative.
  Why it matters: Seeing the app beside your code makes it easier to iterate.

Key terms: Streamlit development cycle, VS Code, browser

8.4.5 Helpful command-line options

This subsection introduces Streamlit run flags for choosing a port and controlling whether the browser opens automatically.

• Streamlit run options: Explain that flags added to `streamlit run` change how it behaves: one can select a specific port, and another can prevent the browser from opening automatically. Describe trying another available port if the chosen port is in use.
  Why it matters: These options help you run the app when a port is occupied or when you do not want a browser window to open.

Key terms: streamlit run, flags, port

8.5 Putting it all together

The section uses a personalized greeting app to show how Streamlit combines sidebar settings with input and content in the main area.

• Sidebar settings and main content: Describe how the greeting app combines a sidebar language and formality choice with a name entered in the main area to display a personalized greeting. Explain how this settings-versus-content layout carries over to the chatbot.
  Why it matters: This layout provides a simple pattern you can reuse when building the chatbot interface.

Key terms: sidebar, text input, conditional logic, column layout

8.6 Exercises

8.7 Summary