Skip to main contentSkip to footer
EsempionotebookbeginnerEseguibilenotebook-to-app

Tutorial: da notebook a web app in cinque minuti

Questo notebook mostra come trasformare una piccola funzione Python in un’interfaccia condivisibile con Gradio o Streamlit. Si concentra su un flusso chiaro input -> elaborazione -> output, così che il wrapper dell’app resti esplicito e facile da esaminare.

Fatti chiave

Livello
beginner
Runtime
Notebook • Streamlit / Gradio
Pattern
Notebook a interfaccia condivisibile
Interazione
Sandbox eseguibile • Notebook
Aggiornato
21 marzo 2026

Naviga questo esempio

Vista rapida del flusso

Come questo esempio si muove tra input, esecuzione e risultato rivedibile
Tutorial: da notebook a web… -> Richiesta utente -> Esecuzione del sistema -> Output verificabile -> Progettare per la delega… -> Applicare la divulgazione progressiva…

Trigger

Tutorial: da notebook a web…

Runtime

Richiesta utente

Esito

Esecuzione del sistema

Perché esiste questa pagina

Questo esempio è mostrato sia come codice sorgente reale che come pattern di interazione orientato al prodotto, così i discenti possono collegare implementazione, UX e dottrina senza lasciare la libreria.

Flusso visivoCodice realeSandbox o walkthroughAccesso MCP
Come dovrebbe essere usato questo esempio nella piattaforma?

Usa prima la sandbox per comprendere il pattern di esperienza, poi ispeziona il sorgente per vedere come il confine del prodotto, il confine del modello e il confine della dottrina sono effettivamente implementati.

UX pattern: Notebook a interfaccia condivisibile
Progettare per la delega piuttosto che per la manipolazione diretta
Applicare la divulgazione progressiva all'agenzia del sistema
Stabilire fiducia attraverso l'ispezionabilità
Riferimenti sorgente
Voce di libreria
frameworks-notebooks-1-introduction-1-notebook-to-web-app
Percorso sorgente
content/example-library/sources/frameworks/notebooks/1-introduction/1-notebook-to-web-app.ipynb
Librerie
gradio, streamlit
Requisiti di runtime
streamlit, gradio
Principi correlati
Progettare per la delega piuttosto che per la manipolazione diretta, Applicare la divulgazione progressiva all'agenzia del sistema, Stabilire fiducia attraverso l'ispezionabilità, Rappresentare il lavoro delegato come un sistema, non solo come una conversazione

1-notebook-to-web-app.ipynb

json
{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "# Tutorial: Notebook to Web App in Five Minutes\n",
        "\n",
        "This notebook shows how to turn a small Python function into a shareable interface with Gradio or Streamlit. It focuses on one clear input -> processing -> output flow so the app wrapper stays explicit and easy to review.\n",
        "\n",
        "**Audience**\n",
        "- Data scientists and AI builders who prototype in notebooks first.\n",
        "\n",
        "**Prerequisites**\n",
        "- Basic Python functions\n",
        "- Jupyter notebooks\n",
        "- Optional: `gradio` or `streamlit` installed locally\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## Outline\n",
        "\n",
        "1. Start with one clear function\n",
        "2. Make the input and output contract explicit\n",
        "3. Wrap the function with Gradio\n",
        "4. Wrap the same function with Streamlit\n",
        "5. Decide when this should stay staged instead of fully productized\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {},
      "outputs": [],
      "source": [
        "from __future__ import annotations\n",
        "\n",
        "def predict_sentiment(text: str) -> str:\n",
        "    lowered = text.lower()\n",
        "    if \"good\" in lowered:\n",
        "        return \"Positive\"\n",
        "    if \"bad\" in lowered:\n",
        "        return \"Negative\"\n",
        "    return \"Neutral\"\n",
        "\n",
        "samples = [\n",
        "    \"The launch looked good and the team felt calm.\",\n",
        "    \"The handoff went bad after the last deployment.\",\n",
        "    \"We need one more review before deciding.\",\n",
        "]\n",
        "\n",
        "[(sample, predict_sentiment(sample)) for sample in samples]\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## Step 1 - Keep the notebook logic narrow\n",
        "\n",
        "The function above is the real asset. If the notebook cannot point to one bounded function, the app wrapper usually becomes messy too.\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {},
      "outputs": [],
      "source": [
        "app_contract = {\n",
        "    \"input\": \"One sentence from the user\",\n",
        "    \"processing\": \"Run predict_sentiment(text)\",\n",
        "    \"output\": \"A single label: Positive, Negative, or Neutral\",\n",
        "}\n",
        "\n",
        "app_contract\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## Step 2 - Gradio wrapper\n",
        "\n",
        "Gradio is a fast choice when you want a lightweight demo or model surface.\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {},
      "outputs": [],
      "source": [
        "import gradio as gr\n",
        "\n",
        "gradio_snippet = \"\"\"\n",
        "demo = gr.Interface(\n",
        "    fn=predict_sentiment,\n",
        "    inputs=gr.Textbox(label=\"Enter your sentence\"),\n",
        "    outputs=gr.Label(),\n",
        ")\n",
        "demo.launch()\n",
        "\"\"\"\n",
        "\n",
        "print(gradio_snippet)\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## Step 3 - Streamlit wrapper\n",
        "\n",
        "Streamlit is useful when the notebook is becoming more dashboard-like and you need a little more layout structure.\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {},
      "outputs": [],
      "source": [
        "import streamlit as st\n",
        "\n",
        "streamlit_snippet = \"\"\"\n",
        "st.title(\"Sentiment Predictor\")\n",
        "text = st.text_input(\"Enter your sentence\")\n",
        "if text:\n",
        "    st.write(predict_sentiment(text))\n",
        "\"\"\"\n",
        "\n",
        "print(streamlit_snippet)\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## Step 4 - Review the execution path\n",
        "\n",
        "This example is staged executable rather than a full in-product runtime. The key review questions are:\n",
        "\n",
        "- Is the notebook function clean enough to expose directly?\n",
        "- Are the user input and output labels explicit?\n",
        "- Does the team need a quick demo surface or a more durable product wrapper?\n",
        "- Is it acceptable to stay at notebook-plus-wrapper stage for now?\n"
      ]
    }
  ],
  "metadata": {
    "kernelspec": {
      "display_name": "Python 3",
      "language": "python",
      "name": "python3"
    },
    "language_info": {
      "name": "python",
      "version": "3.12"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 5
}
Cosa dovrebbe ispezionare il discente nel codice?

Cerca il punto esatto in cui lo scope del sistema è delimitato: definizioni di schema, impostazione del prompt, configurazione di runtime e il punto di chiamata che trasforma l'intenzione dell'utente in un'azione concreta del modello o del workflow.

Cerca i contratti di output e la validazione
Cerca la chiamata di esecuzione esatta
Cerca cosa il prodotto potrebbe esporre all'utente
Come si relaziona la sandbox al sorgente?

La sandbox dovrebbe rendere leggibile l'UX: cosa vede l'utente, cosa sta decidendo il sistema e come il risultato diventa revisionabile. Il sorgente mostra poi come quel comportamento è effettivamente implementato.

Descrivi la funzione o il notebook che vuoi esporre.
Scegli il framework più adatto al pattern.
Rivedi il contratto di input/output e il blocco di lancio dell'app.
SandboxNotebook a interfaccia condivisibile
Dal notebook all'app

Questa sandbox trasforma un flusso notebook in un'interfaccia condivisibile, mostrando input, output e framework consigliato.

Spiegazione UX

Un notebook diventa un prodotto quando input, elaborazione e output vengono resi espliciti per altri utenti, senza obbligare il team a riscrivere tutto come applicazione tradizionale.

Spiegazione AI Design

L'esempio insegna come isolare una funzione chiara, scegliere un wrapper UI come Gradio o Streamlit e mantenere la logica Python riutilizzabile.

Guida all'interazione

  1. 1Descrivi la funzione o il notebook che vuoi esporre.
  2. 2Scegli il framework più adatto al pattern.
  3. 3Rivedi il contratto di input/output e il blocco di lancio dell'app.

Descrizione del notebook

GradioStreamlit

Contratto dell'app

Qui compare il contratto di input/output.

Snippet di lancio

Qui compare il wrapper iniziale dell'app.

Usato in corsi e percorsi

Questo esempio attualmente è indipendente nella libreria, ma si connette comunque al sistema dei principi e alla famiglia di esempi più ampia.

Principi correlati

Runtime architecture

Usa questo esempio nei tuoi agenti

Questo esempio è disponibile anche tramite il layer agent-ready del blueprint. Usa la pagina Per agenti per recuperare MCP pubblico, export deterministici e setup per Claude o Cursor.

Definisci trigger, contesto e confini prima di aumentare l'autonomia
Rendi espliciti controllo, osservabilita e recovery nel runtime
Scegli i pattern operativi giusti prima di delegare ai workflow