0
# Gradio
1

2
Gradio is an open-source Python framework that enables developers to quickly build and deploy web applications for machine learning models, APIs, and arbitrary Python functions. It provides a simple, declarative interface for creating interactive demos and web apps without requiring JavaScript, CSS, or web hosting expertise.
3

4
## Package Information
5

6
- **Package Name**: gradio
7
- **Language**: Python
8
- **Installation**: `pip install gradio`
9
- **Python Requirements**: >=3.10
10

11
## Core Imports
12

13
```python
14
import gradio as gr
15
```
16

17
Common pattern for building interfaces:
18

19
```python
20
import gradio as gr
21

22
# For simple function interfaces
23
interface = gr.Interface(...)
24

25
# For custom layouts and interactions  
26
with gr.Blocks() as demo:
27
    # Add components and define interactions
28
    pass
29
```
30

31
## Basic Usage
32

33
### Simple Function Interface
34

35
```python
36
import gradio as gr
37

38
def greet(name):
39
    return f"Hello {name}!"
40

41
# Create interface automatically
42
interface = gr.Interface(
43
    fn=greet,
44
    inputs="text",
45
    outputs="text",
46
    title="Greeting App"
47
)
48

49
interface.launch()
50
```
51

52
### Custom Layout with Blocks
53

54
```python
55
import gradio as gr
56

57
def process_text(text):
58
    return text.upper()
59

60
with gr.Blocks() as demo:
61
    gr.Markdown("# Text Processor")
62
    
63
    with gr.Row():
64
        input_text = gr.Textbox(label="Input")
65
        output_text = gr.Textbox(label="Output")
66
    
67
    submit_btn = gr.Button("Process")
68
    submit_btn.click(
69
        fn=process_text,
70
        inputs=input_text,
71
        outputs=output_text
72
    )
73

74
demo.launch()
75
```
76

77
### Chat Interface
78

79
```python
80
import gradio as gr
81

82
def chatbot_response(message, history):
83
    return f"You said: {message}"
84

85
chat_interface = gr.ChatInterface(
86
    fn=chatbot_response,
87
    title="Simple Chatbot"
88
)
89

90
chat_interface.launch()
91
```
92

93
## Architecture
94

95
Gradio follows a component-based architecture with several key concepts:
96

97
- **Applications**: High-level containers (`Interface`, `Blocks`, `ChatInterface`) that manage the overall app structure and serve web interfaces
98
- **Components**: UI elements for input/output (`Textbox`, `Button`, `Image`, etc.) that handle data display and user interaction
99
- **Layouts**: Container components (`Row`, `Column`, `Tabs`) that organize component positioning and visual structure
100
- **Events**: Reactive system connecting user interactions to Python functions through declarative event handlers
101
- **Themes**: Styling system with predefined themes and customization options for visual appearance
102
- **State Management**: Mechanisms for maintaining data across interactions using `State` and session handling
103

104
This architecture enables rapid prototyping of ML interfaces while supporting production deployment with authentication, real-time updates, and cloud integration.
105

106
## Capabilities
107

108
### Core Applications
109

110
Foundation classes for building different types of Gradio applications, from simple function wrappers to complex multi-component interfaces.
111

112
```python { .api }
113
class Interface:
114
    def __init__(self, fn, inputs, outputs, **kwargs): ...
115
    def launch(self, **kwargs): ...
116

117
class Blocks:
118
    def __enter__(self): ...
119
    def __exit__(self, *args): ...
120
    def launch(self, **kwargs): ...
121

122
class ChatInterface:  
123
    def __init__(self, fn, **kwargs): ...
124
    def launch(self, **kwargs): ...
125

126
class TabbedInterface:
127
    def __init__(self, interface_list, tab_names, **kwargs): ...
128
    def launch(self, **kwargs): ...
129
```
130

131
[Core Applications](./core-applications.md)
132

133
### Input/Output Components
134

135
Comprehensive set of UI components for handling different data types including text, media files, forms, and specialized interfaces.
136

137
```python { .api }
138
class Textbox:
139
    def __init__(self, value=None, label=None, **kwargs): ...
140

141
class Button:
142
    def __init__(self, value=None, **kwargs): ...
143
    def click(self, fn, inputs=None, outputs=None, **kwargs): ...
144

145
class Image:
146
    def __init__(self, value=None, **kwargs): ...
147

148
class Audio:
149
    def __init__(self, value=None, **kwargs): ...
150

151
class File:
152
    def __init__(self, value=None, **kwargs): ...
153

154
class Slider:
155
    def __init__(self, minimum=0, maximum=100, **kwargs): ...
156

157
class Dropdown:
158
    def __init__(self, choices=None, **kwargs): ...
159
```
160

161
[Input/Output Components](./components.md)
162

163
### Layout System
164

165
Container components for organizing UI elements into structured layouts with responsive design support.
166

167
```python { .api }
168
class Row:
169
    def __enter__(self): ...
170
    def __exit__(self, *args): ...
171

172
class Column:
173
    def __enter__(self): ...
174
    def __exit__(self, *args): ...
175

176
class Tabs:
177
    def __enter__(self): ...
178
    def __exit__(self, *args): ...
179

180
class Tab:
181
    def __init__(self, label, **kwargs): ...
182
    def __enter__(self): ...
183
    def __exit__(self, *args): ...
184
```
185

186
[Layout System](./layouts.md)
187

188
### Event Handling
189

190
Reactive event system for connecting user interactions to Python functions with comprehensive event data and dependency management.
191

192
```python { .api }
193
class EventData:
194
    def __init__(self, target, data): ...
195

196
def on(triggers, fn, inputs=None, outputs=None, **kwargs): ...
197

198
class SelectData(EventData): ...
199
class KeyUpData(EventData): ...
200
class LikeData(EventData): ...
201
```
202

203
[Event Handling](./events.md)
204

205
### Theme System
206

207
Comprehensive theming system with predefined themes and utilities for customizing visual appearance and branding.
208

209
```python { .api }
210
class Theme:
211
    def __init__(self, **kwargs): ...
212

213
class Base(Theme): ...
214
class Default(Theme): ...
215
class Glass(Theme): ...
216
class Monochrome(Theme): ...
217

218
class Color:
219
    def __init__(self, *args, **kwargs): ...
220

221
class Font:
222
    def __init__(self, *args, **kwargs): ...
223
```
224

225
[Theme System](./themes.md)
226

227
### Utilities and Helpers
228

229
Support functions and classes for progress tracking, notifications, examples, and integration with external systems.
230

231
```python { .api }
232
class Progress:
233
    def __init__(self, track_tqdm=False): ...
234
    def __call__(self, iterable): ...
235

236
class Examples:
237
    def __init__(self, examples, inputs, **kwargs): ...
238

239
def Info(message): ...
240
def Warning(message): ...
241
def Success(message): ...
242

243
def update(**kwargs): ...
244
def skip(): ...
245
```
246

247
[Utilities and Helpers](./utilities.md)
248

249
### External Integration
250

251
Functions for loading models from Hugging Face, integrating with existing web frameworks, and working with external APIs.
252

253
```python { .api }
254
def load(name, **kwargs): ...
255
def load_chat(name, **kwargs): ...
256
def load_openapi(url, **kwargs): ...
257

258
def mount_gradio_app(app, gradio_app, path): ...
259

260
class Request:
261
    def __init__(self, request): ...
262
```
263

264
[External Integration](./external-integration.md)