Gradio Component Development

A Docker based Gradio development environment.

I'm giving this a try to speed up experiments that are part of a larger research project trying to bring AI into design education: KITeGG / gestaltung.ai.

Status

This is WIP as in it is tailored to my own way of working.

At the moment everything just started to work for the first time. See usage below on how to try things out.

Usage

These are the steps to get started:

Download or fork-&-clone this repo to get a fresh copy
Build the Docker image
Run the docker image and open front- and backend dev servers in a browser
Edit app.py to change the basic layout of your Gradio interface
- Use backend server to check
Edit the MyComponent.svelte files inside src/ to shape / alter your custom component
- Use frontend server to check
Repeat 4–5 and start / stop container until you're done and happy
Deploy your custom files (app.py and contents of src/) with a fresh copy of the original Gradio repo
- (Note to self: probably needs more instructions here)

Build container image

Before you can get started you need to build the Docker image first. Since this is just setting up the environment you should only need to do this once after cloning or updating this repository.

If you are unfamiliar with Docker, then have a speed read over their getting started. Also, obviously you need to install Docker on your machine.

Build the image:

./dev-scripts/build-docker-image.sh

You can have a look inside the Dockerfile if you are curious what is going on here.

Once the image has been built, it is listed here as gradio-dev:

docker images

The current version of Gradio is embedded into the Docker image. If you need to update it later, then just re-create the image.

Run container

Now it is time to start a container (an instance of your Docker image). This builds a first version of the included demo component and starts the development servers (see links further below). Once you see your interface in the frontend server you can start editing the included example files with an editor of your choice (using PyCharm myself).

I've put the command into a shell script as it is quite large and easier to maintain in a file. Go have a look inside ./dev-scripts/run-docker-container.sh.

Start (aka run) the container:

 ./dev-scripts/run-docker-container.sh
 
 # Optional: see it running
 docker ps
 
 # Optional: visit the running log of both servers
 # I keep this open to see that changes to the files actually 
 # trigger a rebuild/reload with the dev servers
 docker logs -f gradio-dev
 
 # Stop the server once done:
 ./dev-scripts/stop-docker-container.sh

The frontend now runs here, and the backend here.

Backend (dev) server:

Called backend because it hot-reloads based on the Python side of things, that is the backend (server side) of a Gradio project.

Watches app.py and the gradio/ directory.

Frontend (dev) server:

Hot-reloads for frontend (browser side) parts of a Gradio project.

Based on vite dev running through pnpm ... dev.

Needs the backend dev server (above) to run. That means if the python side fails, then this will also fail to start up. Fix python server first.

Changes to the Svelte or other files in ui/ cause a rebuild and reload.
Note that these are not reflected in the interface served through the backend server until you restart (stop-start) the container. This is because the frontend needs to be compiled into the backend before it starts up and that is (currently) not relfected in the hot-reloading process.

Component development

Inside src/ are template files to start with. They are adapted from the ColorPicker component of Gradio. These are mapped into the running container (see ./dev-scripts/run-docker-container.sh) and you can edit them in place. Any change should trigger a reload with one of the two servers above (app.py and gradio/ --> backend server, ui/ --> frontend server).

src
|-- gradio
|   |-- __init__.py
|   |-- components.py
|   `-- test
|       `-- test_components.py
`-- ui
    `-- packages
        |-- app
        |   |-- package.json
        |   `-- src
        |       `-- components
        |           |-- MyComponent
        |           |   |-- MyComponent.svelte
        |           |   |-- MyComponent.test.ts
        |           |   `-- index.ts
        |           `-- directory.ts
        `-- my-package
            |-- README.md
            |-- package.json
            `-- src
                |-- MyComponent.svelte
                `-- index.ts

If you add, move or rename files you will need to update the run command (see start script) to map these files into the container. Also note that these files are interlinked ... so make sure to adapt them to your changes (search for occurrences of mycomponent in the example files).

More background information is available here: https://gradio.app/creating_a_new_component/

Also make sure to take the video tour by Abubakar Abid here: https://www.youtube.com/watch?v=kWGK95gaRZE

Footer

KITeGG is founded by BMBF and the states of RLP, NRW, BW, HE.

fjenett / Gradio-Dev-Docker