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
Libreria
Sfoglia gli esempiRiapri la libreria completa per confrontare pattern vicini e percorsi collegati.Interazione
Esegui ora nel sandboxProva l'interazione direttamente nella superficie guidata di questo esempio.Sorgente
Apri codice completoLeggi l'implementazione reale, i punti evidenziati e i requisiti runtime.MCP
Chiama via MCPUsa la stessa risorsa dentro agenti, export deterministici e setup MCP.
Principi collegati
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
}
Principi correlati
- P1delegationProgettare per la delega piuttosto che per la manipolazione direttaProgettare esperienze attorno all'assegnazione del lavoro, l'espressione dell'intento, l'impostazione dei vincoli e la revisione dei risultati, piuttosto che richiedere agli utenti di eseguire manualmente ogni passaggio.Apri il principio →
- P4trustApplicare la divulgazione progressiva all'agenzia del sistemaFornire per impostazione predefinita le informazioni minime necessarie, consentendo agli utenti di ispezionare ulteriori dettagli quando è richiesta fiducia, comprensione o intervento.Apri il principio →
- P7trustStabilire fiducia attraverso l'ispezionabilitàGli utenti dovrebbero essere in grado di esaminare come è stato prodotto un risultato quando la fiducia, la responsabilità o la qualità della decisione sono importanti.Apri il principio →
- P9orchestrationRappresentare il lavoro delegato come un sistema, non solo come una conversazioneDove il lavoro coinvolge più passaggi, agenti, dipendenze o attività concorrenti, dovrebbe essere rappresentato come un sistema strutturato piuttosto che solo come un flusso di messaggi.Apri il principio →