{ "cells": [ { "cell_type": "code", "execution_count": null, "metadata": { "slideshow": { "slide_type": "skip" }, "tags": [ "hide-input" ] }, "outputs": [], "source": [ "%%html\n", "\n", "\n", "\n", "" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "hide-input" ] }, "outputs": [], "source": [ "# Install the necessary dependencies\n", "\n", "import os\n", "import sys\n", "!{sys.executable} -m pip install --quiet pandas scikit-learn numpy matplotlib jupyterlab_myst ipython seaborn scipy streamlit " ] }, { "cell_type": "markdown", "metadata": { "tags": [ "remove-cell" ] }, "source": [ "---\n", "license:\n", " code: MIT\n", " content: CC-BY-4.0\n", "github: https://github.com/ocademy-ai/machine-learning\n", "venue: By Ocademy\n", "open_access: true\n", "bibliography:\n", " - https://raw.githubusercontent.com/ocademy-ai/machine-learning/main/open-machine-learning-jupyter-book/references.bib\n", "---" ] }, { "cell_type": "markdown", "metadata": { "colab_type": "text", "id": "0MRC0e0KhQ0S", "slideshow": { "slide_type": "slide" } }, "source": [ "# Build an machine learning web application" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Introduction\n", "\n", "\n", "* Imagine that you’re working on a machine learning project and you’ve found your champion model. What happens next? \n", "* Let clients run your Jupyter notebook? Not a good idea!\n", "* You can convert their notebooks to scripts for somewhat production-grade code\n", "* And that's where Streamlit comes into play\n", "\n", "\n" ] }, { "cell_type": "markdown", "metadata": { "colab_type": "text", "id": "LWd1UlMnhT2s", "slideshow": { "slide_type": "subslide" } }, "source": [ "## Streamlit\n", "\n", "- A Python-based library that allows the creation and deployment of machine learning web applications\n", "- Fast and flexible, turning application development time from days into hours\n", "\n" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Display and style data\n", "\n", "### Use magic" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "%pip install streamlit pandas numpy" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "colab": {}, "colab_type": "code", "id": "YvGPUQaHhXfL", "slideshow": { "slide_type": "fragment" } }, "outputs": [], "source": [ "\"\"\"\n", "# My first app\n", "Here's our first attempt at using data to create a table:\n", "\"\"\"\n", "\n", "import streamlit as st\n", "import pandas as pd\n", "import numpy as np\n", "\n", "df = pd.DataFrame({\n", " 'first column': [1, 2, 3, 4],\n", " 'second column': [10, 20, 30, 40],\n", "})\n", "\n", "df" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Display and style data\n", "\n", "### `st.write()`\n", "- `st.write()` is Streamlit's \"Swiss Army knife\"\n", "- You can pass almost anything to `st.write()`:\n", "text, data, Matplotlib figures, Altair charts, and more\n", "- Streamlit will figure it out and render things the right way\n" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [], "source": [ "st.write(\"Here's our first attempt at using data to create a table:\")\n", "st.write(pd.DataFrame({\n", " 'first column': [1, 2, 3, 4],\n", " 'second column': [10, 20, 30, 40],\n", "}))" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Display and style data\n", "\n", "### Styling" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [], "source": [ "dataframe = pd.DataFrame(\n", " np.random.randn(10, 20),\n", " columns=('col %d' % i for i in range(20)))\n", "\n", "st.dataframe(dataframe.style.highlight_max(axis=0))" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": { "colab_type": "text", "id": "K1VMqkGvhc3-", "slideshow": { "slide_type": "subslide" } }, "source": [ "## Draw a line chart\n", "\n", "- You can easily add a line chart to your app with\n", "`st.line_chart()`" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [], "source": [ "chart_data = pd.DataFrame(\n", " np.random.randn(20, 3),\n", " columns=['a', 'b', 'c'])\n", "\n", "st.line_chart(chart_data)" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Plot a map\n", "\n", "- With `st.map()` you can display data points on a map" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [], "source": [ "map_data = pd.DataFrame(\n", " np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],\n", " columns=['lat', 'lon'])\n", "\n", "st.map(map_data)" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "## Widgets\n", "\n", "- When you've got the data or model into the state that you want to explore, you can add in widgets like `st.slider()`, `st.button()` or `st.selectbox()`" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## `st.slider()`" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [], "source": [ "x = st.slider('x') # 👈 this is a widget\n", "st.write(x, 'squared is', x * x)" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "fragment" } }, "source": [ "- On first run, the app above should output the text \"0 squared is 0\"\n", "- Then\n", "every time a user interacts with a widget, Streamlit simply reruns your script\n", "from top to bottom, assigning the current state of the widget to your variable\n", "in the process" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## `st.text_input()`" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [], "source": [ "st.text_input(\"Your name\", key=\"name\")\n", "\n", "# You can access the value at any point with:\n", "st.session_state.name" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Use checkboxes to show/hide data" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [], "source": [ "if st.checkbox('Show dataframe'):\n", " chart_data = pd.DataFrame(\n", " np.random.randn(20, 3),\n", " columns=['a', 'b', 'c'])\n", "\n", " chart_data" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Use a selectbox for options" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [], "source": [ "df = pd.DataFrame({\n", " 'first column': [1, 2, 3, 4],\n", " 'second column': [10, 20, 30, 40]\n", " })\n", "\n", "option = st.selectbox(\n", " 'Which number do you like best?',\n", " df['first column'])\n", "\n", "'You selected: ', option" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "## Layout\n", "\n", "- Streamlit makes it easy to organize your widgets in a left panel sidebar with `st.sidebar`. Each element that's passed to `st.sidebar` is pinned to the left, allowing users to focus on the content in your app while still having access to UI controls." ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## `st.sidebar`" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [], "source": [ "# Add a selectbox to the sidebar:\n", "add_selectbox = st.sidebar.selectbox(\n", " 'How would you like to be contacted?',\n", " ('Email', 'Home phone', 'Mobile phone')\n", ")\n", "\n", "# Add a slider to the sidebar:\n", "add_slider = st.sidebar.slider(\n", " 'Select a range of values',\n", " 0.0, 100.0, (25.0, 75.0)\n", ")" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## `st.columns`" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [], "source": [ "left_column, right_column = st.columns(2)\n", "# You can use a column just like st.sidebar:\n", "left_column.button('Press me!')\n", "\n", "# Or even better, call Streamlit functions inside a \"with\" block:\n", "with right_column:\n", " chosen = st.radio(\n", " 'Sorting hat',\n", " (\"Gryffindor\", \"Ravenclaw\", \"Hufflepuff\", \"Slytherin\"))\n", " st.write(f\"You are in {chosen} house!\")" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Show progress" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [], "source": [ "import time\n", "\n", "'Starting a long computation...'\n", "\n", "# Add a placeholder\n", "latest_iteration = st.empty()\n", "bar = st.progress(0)\n", "\n", "for i in range(100):\n", " # Update the progress bar with each iteration.\n", " latest_iteration.text(f'Iteration {i+1}')\n", " bar.progress(i + 1)\n", " time.sleep(0.1)\n", "\n", "'...and now we\\'re done!'" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Themes\n", "\n", "- Streamlit supports Light and Dark themes out of the box\n", "- The \"Settings\" menu has a theme editor\n", "accessible by clicking on \"Edit active theme\"\n", "- When you're happy with your work, themes can be saved by\n", "setting config options\n", "in the `[theme]` config section. After you've defined a theme for your app, it\n", "will appear as \"Custom Theme\" in the theme selector and will be applied by\n", "default instead of the included Light and Dark themes." ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "## Caching\n", "- The Streamlit cache allows your app to stay performant even when loading data from the web, manipulating large datasets, or performing expensive computations\n", "- The basic idea behind caching is to store the results of expensive function calls and return the cached result when the same inputs occur again rather than calling the function on subsequent runs\n", "- To cache a function in Streamlit, you need to decorate it with one of two decorators (`st.cache_data` and `st.cache_resource`)\n" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "## Acknowledgments\n", "\n", "Thanks to PRASHANT BANERJEE for creating the open-source [Kaggle jupyter notebook](https://www.kaggle.com/code/prashant111/mnist-deep-neural-network-with-keras), licensed under Apache 2.0. It inspires the majority of the content of this slides." ] } ], "metadata": { "celltoolbar": "Slideshow", "colab": { "authorship_tag": "ABX9TyOsvB/iqEjYj3VN6C/JbvkE", "collapsed_sections": [], "machine_shape": "hm", "name": "logistic_regression.ipynb", "provenance": [], "toc_visible": true }, "kernelspec": { "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.9.18" } }, "nbformat": 4, "nbformat_minor": 1 }