Skip to main content

Design Beautiful AI Demos with Gradio: Layouts, Themes & Custom Styles

Chapter-3 

By now, you’ve learned how to build basic Gradio apps and work with various input/output types. But raw functionality is only half the story. Great design makes your AI demos easier to use, more professional, and enjoyable to interact with.

In this part, we’ll explore:
Gradio’s layout systems: Interface vs Blocks

Gradio Interface — Quick and Easy UI

The gr.Interface class is perfect when you just want to:

  • Wrap a single function

  • Provide a few inputs and outputs

  • Launch a simple demo fast

import gradio as gr

def greet(name):
    return f"Hello, {name}!"

gr.Interface(fn=greet, inputs="text", outputs="text").launch()

What happens here?

  • A textbox appears for the user to type their name

  • When they click "Submit", the function greet is called

  • The output (greeting message) is displayed below

Limitation of Interface:

You cannot:

  • Add multiple pages or tabs

  • Nest layouts like side-by-side or columns

  • Add multiple functions reacting to different inputs

  • Dynamically change the UI

Gradio Blocks — Full Layout and Logic Control

The gr.Blocks API is much more powerful. Use it when:

  • You need multiple sections, pages, or workflows

  • You want inputs/outputs to appear in custom order

  • You want to chain functions or update outputs dynamically

import gradio as gr

def greet(name):
    return f"Hello, {name}!"

with gr.Blocks() as demo:
    gr.Markdown("## 👋 Welcome to the Greeting App")
    
    with gr.Row():
        name_input = gr.Textbox(label="Enter your name")
        greet_output = gr.Textbox(label="Greeting")

    name_input.change(fn=greet, inputs=name_input, outputs=greet_output)

demo.launch()

What’s Happening Here?

  • You control layout using Row() and Markdown()

  • The greeting appears in a custom location

  • You can use change events (.change) for live updates

  • Much easier to scale later by adding tabs, sliders, or charts

Feature Interface Blocks
Simplicity      ✅ Easier, quick setup ❌ Slightly more code
Flexibility      ❌ Limited layout or interactivity           ✅ Highly customizable
UI Control      ❌ Pre-built layout only ✅ Full control (rows, tabs, themes)
Use Case       Demos, tutorials, simple forms Complex apps, dashboards, workflows

Use Case Use Interface? Use Blocks?
A quick ML demo (e.g., image classifier) ✅ Yes ❌ Not needed
Build a full app with multiple steps ❌ No                      ✅ Yes
Use custom layouts (rows/columns) ❌ No ✅ Yes
Dynamic updates on events ❌ No ✅ Yes
Add tabs or multi-page layout ❌ No ✅ Yes

Use Interface when you're starting out or building a fast proof of concept.
Use Blocks when you want control, custom layout, interactivity, or multiple functions.

Comments

Post a Comment

Popular Post

Apply for Google Summer Internship-2025

Google is offering a summer internship in 2025 for students interested in technology, software engineering , and innovation. This program provides hands-on experience, mentorship, and opportunities to work on impactful projects. Ideal for students aiming to enhance their skills and gain industry insights. To apply for the Google summer internship 2025, you'll need an updated CV or resume and a current unofficial or official transcript in English. Click 'Apply' on the internship page and upload the following documents (PDFs preferred): In the 'Resume Section,' attach your updated CV or resume. In the 'Education Section,' attach your current or recent unofficial or official transcript in English. Under 'Degree Status,' select 'Now attending' to upload your transcript. You can choose your preferred working location from Bengaluru, Hyderabad, or Pune in India when applying. Minimum qualifications: Currently studying for a Bachelor's or Maste...
1 comment
Read more

IIRS-ISRO offers AI/ML for Geo Data Analysis: A Free Course

AI has captured our imagination and research focus since the Dartmouth Conferences in 1956, where the field was born. Defined as programs that can sense, reason, act, and adapt, AI has been heralded as the key to a brighter future. Machine Learning (ML) involves algorithms that improve with data over time, while Deep Learning, a subset of ML, utilizes multilayered neural networks to learn from vast data. Technological advancements have enabled the processing and analysis of unprecedented data volumes, driven by the proliferation of internet-connected devices. These advancements bring us closer to creating intelligent machines seen in everyday applications like online recommendations and auto-generated photo tags. The main applications of deep learning AI include computer vision, natural language processing (NLP), and reinforcement learning. This course, scheduled from August 19-24, 2024 , covers AI, ML, Deep Learning, and data processing techniques, with case studies in geospatial dat...
Post a Comment
Read more

Apply for Microsoft Software Engineering Internship

Join Microsoft as an intern to build community, explore your passions, and work on real-world projects. Software engineers collaborate to solve problems and create innovative solutions. Interns have fun while working globally, contributing to Microsoft's mission to empower everyone. Embrace a growth mindset, innovate , and build a culture of inclusion where all can thrive. Qualifications: Currently pursuing a bachelor's or master's degree in engineering, computer science, or a related field. Must have at least one more quarter/semester of college remaining after the internship. One year of experience programming in an object-oriented language . Responsibilities: Apply engineering principles to creatively solve complex problems. Quickly learn and integrate new engineering methods into workflows. Seek and apply feedback and best practices to improve technical solutions. Manage time effectively to complete software projects in a collaborative team environment. Click the bel...
Post a Comment
Read more