Gradio Agents & MCP Hackathon
WinnersGradio Agents & MCP Hackathon
Winners →Getting Started
QuickstartBuilding Interfaces
The Interface ClassMore On ExamplesFlaggingInterface StateReactive InterfacesFour Kinds Of InterfacesBuilding With Blocks
Blocks And Event ListenersControlling LayoutState In BlocksDynamic Apps With Render DecoratorMore Blocks FeaturesCustom CSS And JSUsing Blocks Like FunctionsAdditional Features
QueuingStreaming OutputsStreaming InputsAlertsProgress BarsBatch FunctionsSharing Your AppFile AccessMultipage AppsEnvironment VariablesResource CleanupThemesClient Side FunctionsView Api PageInternationalizationChatbots
Creating A Chatbot FastChatinterface ExamplesAgents And Tool UsageCreating A Custom Chatbot With BlocksChatbot Specific EventsCreating A Discord Bot From A Gradio AppCreating A Slack Bot From A Gradio AppCreating A Website Widget From A Gradio ChatbotData Science And Plots
Creating PlotsTime PlotsFilters Tables And StatsConnecting To A DatabaseStreaming
Streaming Ai Generated AudioObject Detection From Webcam With WebrtcObject Detection From VideoConversational ChatbotReal Time Speech RecognitionAutomatic Voice DetectionCustom Components
Custom Components In Five MinutesKey Component ConceptsConfigurationBackendFrontendFrequently Asked QuestionsPdf Component ExampleMultimodal Chatbot Part1Documenting Custom ComponentsGradio Clients And Lite
Getting Started With The Python ClientGetting Started With The Js ClientQuerying Gradio Apps With CurlGradio And Llm AgentsGradio LiteGradio Lite And Transformers JsFastapi App With The Gradio ClientMcp
Building Mcp Server With GradioFile Upload McpBuilding An Mcp Client With GradioUsing Docs McpOther Tutorials
Using Hugging Face IntegrationsGradio And CometGradio And ONNX On Hugging FaceGradio And Wandb IntegrationCreate Your Own Friends With A GanCreating A Dashboard From Bigquery DataCreating A Dashboard From Supabase DataCreating A Realtime Dashboard From Google SheetsDeploying Gradio With DiscoDeploying Gradio With DockerDeveloping Faster With Reload ModeFrom Openapi SpecHow To Use 3D Model ComponentImage Classification In PytorchImage Classification With Vision TransformersInstalling Gradio In A Virtual EnvironmentNamed Entity RecognitionPlot Component For MapsRunning Background TasksRunning Gradio On Your Web Server With NginxSetting Up A Demo For Maximum PerformanceStyling The Gradio DataframeTheming GuideUnderstanding Gradio Share LinksUsing FlaggingUsing Gradio For Tabular WorkflowsUsing Gradio In Other Programming LanguagesWrapping LayoutsThe data you wish to visualize may be stored in a database. Let's use SQLAlchemy to quickly extract database content into pandas Dataframe format so we can use it in gradio.
First install pip install sqlalchemy
and then let's see some examples.
from sqlalchemy import create_engine
import pandas as pd
engine = create_engine('sqlite:///your_database.db')
with gr.Blocks() as demo:
gr.LinePlot(pd.read_sql_query("SELECT time, price from flight_info;", engine), x="time", y="price")
Let's see a a more interactive plot involving filters that modify your SQL query:
from sqlalchemy import create_engine
import pandas as pd
engine = create_engine('sqlite:///your_database.db')
with gr.Blocks() as demo:
origin = gr.Dropdown(["DFW", "DAL", "HOU"], value="DFW", label="Origin")
gr.LinePlot(lambda origin: pd.read_sql_query(f"SELECT time, price from flight_info WHERE origin = {origin};", engine), inputs=origin, x="time", y="price")
If you're using a different database format, all you have to do is swap out the engine, e.g.
engine = create_engine('postgresql://username:password@host:port/database_name')
engine = create_engine('mysql://username:password@host:port/database_name')
engine = create_engine('oracle://username:password@host:port/database_name')