Gradio.Net 0.6.30.1

Gradio.NET: Build Machine Learning Web Apps — in .NET

English | 简体中文

Gradio for .NET — a port of Gradio 6.30.0, the Python package that turns a function into a web app. Same frontend, same protocol, same config: the page a browser gets is drawn by the Python version's own compiled frontend, unchanged.

With Gradio.Net you build a UI for a model, an API or any C# method in a few lines: users drag in their own images, paste text, record their voice, and talk to your code through the browser. No JavaScript, no CSS.

A few lines of .NET are all it takes. Let's start.

Quick start

1. Create an ASP.NET Core Web API project.
2. Install the NuGet package Gradio.Net.
3. Put one of the examples below in Program.cs and run it.

With gr.Interface (the fastest way)

using Gradio.Net;

string Greet(string name, double intensity) =>
    "Hello, " + name + new string('!', (int)intensity);

var demo = gr.Interface(
    Greet,
    inputs: ["text", "slider"],
    outputs: ["text"]);

demo.Launch();   // http://127.0.0.1:7860

gr.Interface wraps any C# method into a page — no layout code. It is the Python version's quickstart, ported: the Python source is the same five lines with fn=greet instead of Greet, and the port is checked by a test that runs it (GrPortingTests).

With gr.Blocks (full control of the layout)

using Gradio.Net;

static string Greet(string name) => $"Welcome to Gradio.Net, {name}!";

var demo = gr.Blocks(title: "Hello");

using (demo)
{
    gr.Markdown("Start typing below and then click **Run** to see the output.");

    Textbox name, greeting;

    using (gr.Row())
    {
        name = gr.Textbox(label: "Name", placeholder: "What is your name?");
        greeting = gr.Textbox(label: "Greeting", interactive: false);
    }

    gr.Button("Run").Click(Greet, [name], [greeting]);
}

demo.Launch();

Every gr.…(...) line inside the using is a line of the page — that is the Python version's with gr.Blocks() as demo:, and gr.Row() is the layout and its scope at once.

Inside an existing ASP.NET Core project

AddGradio() registers the kernel; write the page, hand it to UseGradio(page), and the host serves it — routes, assets, queue and all:

using Gradio.Net;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddGradio();

var app = builder.Build();

app.UseGradio(CreatePage());

app.Run();

static Blocks CreatePage()
{
    var demo = gr.Blocks(title: "My Gradio app");

    using (demo)
    {
        var name = gr.Textbox(label: "Name");
        var greeting = gr.Textbox(label: "Greeting", interactive: false);

        gr.Button("Run").Click(Greet, [name], [greeting]);
    }

    return demo;
}

static string Greet(string name) => $"Welcome to Gradio.Net, {name}!";

gr.Interface works the same way, because it returns an application too:

using Gradio.Net;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddGradio();

var app = builder.Build();

string Greet(string name, double intensity) =>
    "Hello, " + name + new string('!', (int)intensity);

app.UseGradio(gr.Interface(Greet, inputs: ["text", "slider"], outputs: ["text"]));

app.Run();

One API, two spellings

There is one package and one application. gr is a set of factories, not a wrapper: what it hands back is the core type.

gr — the spelling a Python file already has. The names are the Python version's, down to the parameter names and their defaults, so a ported file differs from the Python by three kinds of edit and no more: = becomes :, with becomes using, and a decorator becomes a call. That is the layer the examples above use, and the one a port starts with.

The types underneath — the spelling C# would give them. gr.Textbox(...) returns a Textbox, gr.Blocks() returns a Blocks, and those are ordinary types: events are methods on the block (button.Click(fn, inputs, outputs), and tabs.Select(fn, inputs, outputs) for a layout), the component lists are Block[], and a handler is a delegate. Hold them, pass them, subclass a component — nothing is wrapped.

What is deliberately not public is writing into a page by hand. Blocks.BeginRender, Add, Reserve, Attach and Enter are internal: a page is written by calling a factory, because gr.Textbox(...) is a line on the page rather than a value and using (gr.Blocks()) is the render its closing brace ends. That rule is what keeps demo.Add(gr.Textbox(...)) out of a port, and it applies to new code as well — there is one way to put a block on a page.

Demos

Ten programs in all — quickstart, a page written by hand, chat, streaming, files, form, media, multipage, themes, and charts. cd into one and dotnet run; each is offline, and each references this tree rather than a published package. Demo/README.md says what each one is and which line to change in it.

Coming from Python

The table below is the whole of the translation: three naming rules, then the places C# forces a different shape. A ported file needs nothing else.

Member names keep their word and change only their case (btn.click → btn.Click, demo.launch() → demo.Launch()), and a trigger point moves under Events only because the binding method already took the name: bind with btn.Click(...), merge with gr.On([btn.Events.Click, …]).