⚡ Gradio 3 Classic UI · Modern Architecture · Faster Audio

A modified Gradio fork with the classic Gradio 3 look & feel, built on the latest v6 architecture.

Website | Documentation | Getting Started

---

✨ What's Different?

This fork keeps the full Gradio v6 architecture (Svelte 5, FastAPI, pnpm monorepo) but reverts the visual design back to the classic Gradio 3.x look that many users prefer. Additionally, audio loading performance has been significantly improved.

🎨 Gradio 3 Classic UI

• Larger border radii (8px radius_lg) on blocks, buttons, and containers — the rounder, friendlier Gradio 3 feel
• Gradient buttons with 1px borders and subtle drop shadows (not flat)
• Block & label shadows — visible shadow_drop on component containers and block labels for depth
• No animations — instant state changes, zero transition delays
• 1px form gaps — tighter spacing between form elements, like Gradio 3
• Native HTML5 audio player by default (waveform optional)
• Compact footer with border separator

📑 Scrollable Tab Bar

• No more "..." overflow menu — all tabs are always visible in a horizontally scrollable bar, just like Gradio 3
• Auto-scroll to selected tab — switching tabs automatically scrolls the active tab into view
• Thin scrollbar — unobtrusive 3px scrollbar appears only when tabs overflow

⚡ Faster Audio Loading

• WaveSurfer.js lazy-loaded via dynamic import — the ~200KB waveform library only loads when you explicitly enable it, not on every page load
• HLS.js lazy-loaded — HTTP Live Streaming support loads on-demand only when streaming is needed
• Aggressive preloading — native <audio> elements use preload="auto" for immediate buffering
• HTTP caching — audio file responses include Cache-Control: public, max-age=86400 for 24-hour browser caching
• No duplicate audio elements — removed redundant <audio> tag that rendered alongside the player in waveform-off mode
• Non-WAV formats (MP3, OGG, FLAC, etc.) still work via pydub/ffmpeg with zero regressions

🔧 How to Use

Basic (Classic UI, fast audio out of the box)

import gradio as gr

demo = gr.Interface(
    fn=lambda x: x,
    inputs="audio",
    outputs="audio"
)
demo.launch()

Enable Waveform (if you want it)

import gradio as gr

demo = gr.Interface(
    fn=lambda x: x,
    inputs=gr.Audio(waveform_options=gr.WaveformOptions(show_recording_waveform=True)),
    outputs=gr.Audio(waveform_options=gr.WaveformOptions(show_recording_waveform=True))
)
demo.launch()

Use Classic Theme Explicitly

import gradio as gr

demo = gr.Interface(
    fn=lambda name: f"Hello {name}!",
    inputs="text",
    outputs="text"
).launch(theme=gr.themes.Classic())

Available Themes

gr.themes.Classic()   # Gradio 3 style (default in this fork)
gr.themes.Default()   # Also Gradio 3 style in this fork
gr.themes.Origin()    # Closest to original Gradio 4
gr.themes.Soft()      # Softer variant
gr.themes.Glass()     # Glass effect
# ... all other built-in themes still work

📦 Installation

pip install git+https://github.com/BF667-IDLE/gradio.git

---

Building Your First Demo

import gradio as gr

def greet(name, intensity):
    return "Hello, " + name + "!" * int(intensity)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "slider"],
    outputs=["text"],
    api_name="predict"
)

demo.launch()

Sharing Your Demo

demo.launch(share=True)  # Gets a public URL in seconds

An Overview of Gradio

• gr.Interface — high-level class to quickly build demos for ML models
• gr.Blocks — low-level class for custom layouts, data flows, and complex interactions
• gr.ChatInterface — specialized class for Chatbot UIs

The Gradio Ecosystem

• Gradio Python Client (gradio_client) — query any Gradio app from Python
• Gradio JavaScript Client (@gradio/client) — query any Gradio app from JavaScript
• Hugging Face Spaces — the most popular place to host Gradio apps for free
• Server mode (gradio.Server) — custom frontend with Gradio's backend

---

ℹ️ About

This is a standalone fork of Gradio by BF667-IDLE, focused on preserving the classic Gradio 3 aesthetic while maintaining full compatibility with the modern Gradio v6 codebase.

All original Gradio features, components, and APIs remain fully functional. The changes are purely visual (theme/CSS defaults, tab bar behavior) and performance-related (audio loading optimizations).

Files Modified

File	Change
gradio/themes/base.py	Larger radii, block shadows, no transitions
gradio/themes/default.py	Gradio 3 visual defaults
gradio/themes/classic.py	Gradio 3 visual defaults
gradio/routes.py	HTTP caching for audio files
js/audio/player/AudioPlayer.svelte	Conditional WaveSurfer, lazy HLS, preload=auto
js/audio/interactive/InteractiveAudio.svelte	Removed duplicate audio element
js/audio/shared/MinimalAudioPlayer.svelte	Lazy WaveSurfer import
js/tabs/shared/Tabs.svelte	Scrollable tab bar (removed "..." overflow menu)

Open Source Stack

License

Gradio is licensed under the Apache License 2.0 found in the LICENSE file in the root directory of this repository.