streamlit-tutorial/streamlit-tutorial/streamlit-tutorial.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# MNIST-Streamlit tutorial"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Note: This notebook runs on Python 3.8 and uses UbiOps Client Library 3.15.0.\n",
    "\n",
    "In this notebook we will show you the following:\n",
    "\n",
    "How to connect a deployment with streamlit to build a web app.\n",
    "\n",
    "The deployment in this notebook is based on the [image recognition](https://ubiops.com/docs/ubiops_tutorials/ready-deployments/image-recognition/image-recognition/) ready deployment\n",
    "\n",
    "If you run this entire notebook after filling in your acces token, the MNIST deployment will be deployed to your UbiOps environment. If you want, you can go to your environment and check out your deployment there first. After that you can initialize the mnist_streamlit.py and check out a web app version of the deployment.\n",
    "\n",
    "We recommend to run the cells step by step, as some cells can take a few minutes to finish. You can run everything in one go as well and it will work, just allow a few minutes for building the deployment."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Establishing a connection with your UbiOps environment"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Add your API token and project name to the first and third cell block. We provide a deployment and deployment version name. Afterwards we initialize the client library. This way we can deploy the MNIST model to your environment."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "API_TOKEN = '<INSERT API_TOKEN WITH PROJECT EDITOR RIGHTS>' # Make sure this is in the format \"Token token-code\"\n",
    "PROJECT_NAME = '<INSERT PROJECT NAME IN YOUR ACCOUNT>'\n",
    "\n",
    "DEPLOYMENT_NAME = 'mnist-streamlit'\n",
    "DEPLOYMENT_VERSION = 'v1'\n",
    "\n",
    "#import all necessary libraries:\n",
    "import os\n",
    "import ubiops\n",
    "\n",
    "client = ubiops.ApiClient(ubiops.Configuration(\n",
    "    api_key={'Authorization': API_TOKEN}, \n",
    "    host=\"https://api.ubiops.com/v2.1\"\n",
    "))\n",
    "\n",
    "api = ubiops.CoreApi(client)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Download the MNIST image recognition model "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can download the model [here](https://download-github.ubiops.com/?_gl=1*ql909b*_ga*MTEzMDc3Nzg3Mi4xNjMyNDkyODk3*_ga_S22LQ1P875*MTYzNjQ0ODMzMy4yNjUuMS4xNjM2NDUwMzEyLjA.#!/home?url=https:%2F%2Fgithub.com%2FUbiOps%2Ftutorials%2Ftree%2Fmaster%2Fready-deployments%2Fimage-recognition%2Fmnist_deployment_package)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Create the deployment"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create the deployment\n",
    "deployment_template = ubiops.DeploymentCreate(\n",
    "    name = DEPLOYMENT_NAME,\n",
    "    description = 'image-recognition',\n",
    "    input_type = 'structured',\n",
    "    output_type = 'structured',\n",
    "    input_fields = [\n",
    "        {'name' : 'image', 'data_type' : 'file'},\n",
    "    ],\n",
    "    output_fields = [\n",
    "        {'name': 'prediction', 'data_type': 'int'},\n",
    "        {'name': 'probability', 'data_type': 'double'}\n",
    "    ],\n",
    "    labels= {'demo': 'MNIST-Streamlit'}\n",
    ")\n",
    "\n",
    "api.deployments_create(\n",
    "    project_name=PROJECT_NAME,\n",
    "    data=deployment_template\n",
    ")\n",
    "\n",
    "# Create the version\n",
    "version_template = ubiops.DeploymentVersionCreate(\n",
    "    version=DEPLOYMENT_VERSION,\n",
    "    environment='python3-8',\n",
    "    instance_type='512mb',\n",
    "    minimum_instances=0,\n",
    "    maximum_instances=1,\n",
    "    maximum_idle_time=1800, # = 30 minutes\n",
    "    request_retention_mode='none' # we don't need request storage in this example\n",
    ")\n",
    "\n",
    "api.deployment_versions_create(\n",
    "    project_name=PROJECT_NAME,\n",
    "    deployment_name=DEPLOYMENT_NAME,\n",
    "    data=version_template\n",
    ")\n",
    "\n",
    "# Upload the zipped deployment package\n",
    "file_upload_result =api.revisions_file_upload(\n",
    "    project_name=PROJECT_NAME,\n",
    "    deployment_name=DEPLOYMENT_NAME,\n",
    "    version=DEPLOYMENT_VERSION,\n",
    "    file='mnist_deployment_package.zip'\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "ubiops.utils.wait_for_deployment_version(\n",
    "    client=api.api_client,\n",
    "    project_name=PROJECT_NAME,\n",
    "    deployment_name=DEPLOYMENT_NAME,\n",
    "    version=DEPLOYMENT_VERSION,\n",
    "    revision_id=file_upload_result.revision\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Enter your API token and Project in the Streamlit file"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%writefile mnist-streamlit.py\n",
    "import streamlit as st\n",
    "import ubiops \n",
    "import tempfile\n",
    "from time import sleep\n",
    "\n",
    "st.title(\"Streamlit and UbiOps example\")\n",
    "\n",
    "# Connect with your UbiOps environment\n",
    "API_TOKEN = '<INSERT API_TOKEN WITH PROJECT EDITOR RIGHTS>' # Make sure this is in the format \"Token token-code\"\n",
    "PROJECT_NAME = '<INSERT PROJECT NAME IN YOUR ACCOUNT>'\n",
    "\n",
    "DEPLOYMENT_NAME = 'mnist-streamlit'\n",
    "\n",
    "# API setup \n",
    "if PROJECT_NAME and API_TOKEN and DEPLOYMENT_NAME:\n",
    "    # Only reconnect if API object is not in session state\n",
    "    if 'ubiops_api' not in st.session_state:\n",
    "        with st.spinner(\"Connecting to UbiOps API\"):\n",
    "            configuration = ubiops.Configuration(host=\"https://api.ubiops.com/v2.1\")\n",
    "            configuration.api_key['Authorization'] = API_TOKEN\n",
    "\n",
    "            st.session_state.client = ubiops.ApiClient(configuration)\n",
    "            st.session_state.ubiops_api = ubiops.CoreApi(st.session_state.client)\n",
    "            deployment_info = st.session_state.ubiops_api.deployments_get(PROJECT_NAME,DEPLOYMENT_NAME)\n",
    "           \n",
    "            print(deployment_info)\n",
    "            \n",
    "            sleep(2) # sleep for 2s to showcase progress spinners\n",
    "            \n",
    "            # Use the streamlit session to store API object\n",
    "            if(st.session_state.ubiops_api.service_status().status == 'ok' ):\n",
    "                st.success(\"Connected to UbiOps API!\")\n",
    "            else:\n",
    "                st.error(\"Not connected!\")\n",
    "                \n",
    "\n",
    "\n",
    "# File upload\n",
    "upload_file = st.file_uploader(\"Choose a file\")\n",
    "if upload_file is not None:\n",
    "    if 'results' not in st.session_state:\n",
    "        st.session_state.results = []\n",
    "    with open(\"out.txt\", \"wb\") as outfile:\n",
    "        # Copy the BytesIO stream to the output file\n",
    "        outfile.write(upload_file.getvalue())\n",
    "    file_uri = ubiops.utils.upload_file(st.session_state.client, PROJECT_NAME, 'out.txt')\n",
    "    # Make a request using the file URI as input.\n",
    "    data = {'image': file_uri}\n",
    "    \n",
    "    result = st.session_state.ubiops_api.deployment_requests_create(\n",
    "        project_name=PROJECT_NAME,\n",
    "        deployment_name=DEPLOYMENT_NAME,\n",
    "        data=data\n",
    "    )\n",
    "    # Store results in session\n",
    "    st.session_state.results.append([result,upload_file])\n",
    "\n",
    "# Show all results in from session\n",
    "if 'results' in st.session_state: \n",
    "    for r in st.session_state.results[::-1]:\n",
    "        c1, c2 = st.columns(2)\n",
    "        c2.write(r[0].result)\n",
    "        c1.image(r[1])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Install the streamlit package"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!pip install streamlit"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Now it is time to connect to streamlit and turn the deployment we have just created into an app"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!streamlit run mnist-streamlit.py"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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.10.1"
  },
  "orig_nbformat": 4,
  "vscode": {
   "interpreter": {
    "hash": "98590ff4fe04c8543246b2a01debd3de3c5ca9b666f43f1fa87d5110c692004c"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}