Gradio Viral [tracking and feedback]

[abidlabs]

We'd like to make it easier to build viral machine learning and data science demos using Gradio, and are taking a number of steps to do that. This issue tracks these steps, and is also a call for the Gradio community for feedback: please let us know by replying what we can do to help you build the next viral demo!

Image demos

• [ ] #1977
• [ ] #1382
• [x] #776
• [ ] #936 (seeds for generative models)
• [ ] #1976
• [ ] #2103

Video demos

• [ ] #1072

Audio demos

• [ ] #2072

HTML demos

• [ ] #1985

General demos

• [x] #938
• [ ] #959
• [ ] #2032
• [ ] #340
• [x] #1162
• [ ] #1078
• [x] #2014

Link users back to Gradio/Spaces

• [ ] #257
• [ ] #1502

[apolinario]

Very cool collection of issues! I would still advocate for one more in case it could be possible to make a nice UI/UX for it: typeable fields on the slider: https://github.com/gradio-app/gradio/issues/936 - also I think this becoming commonplace UI nowadays that sliders have a typeable field too E.g.: GPT-3

Replicate

Without it, the current seed argument in the Stable Diffusion Spaces is essentially not useful right now as if you change the slider getting back to a specific value you want is almost impossible (as it goes from 1 to 2147483647)

Maybe this means that the slider component isn't the most adequate there, but then we would need this other issue to support minimum and maximum values to the gr.Number component (here: https://github.com/gradio-app/gradio/issues/934) - and randomize=True support as well imo

[abidlabs]

Thanks for the suggestion for #936, agreee that it would be helpful for generative models. I think supporting min, max, and randomize for ‘Number’ is the way to go here (keeps the UI simple) @aliabid94

[altryne]

I've worked on the updated stable diffusion UI and I have so many comments. (Gradio is amazing btw, can't believe how fast interfaces can be built together)

• Width properties! I had to hack together making the columns difference widths and would love a native solution for grid like widths. Flexbox supports this

• Add class_name property to all blocks, some of us know tailwind/css and would LOVE to be able to add this for UI composability

• Make ALL elements receive the click property, things like Gallery for example, I would love to receive an event that a user chose an image(usecase is, using this image in another tab for upscaling)

• Copy to clipboard support. Right now it's Hacky via the _js function

• Maybe add Input as a separate variation of TextArea? By default the textArea is multiline, which forces a user to create interfaces with a button. Where as the standard on the web is, if you hit enter in any input in a form, the form submits.

• Options to remove the border around a textArea. I really wanted to have a simple input + button aligned design and it wasn't possible as the border is being forced on the input

• Add the option to have a collapsable group. Can be hidden or shown by default and click will change if the contents are shown or hidden.

[abidlabs]

This is awesome @altryne thanks for all of the feedback! Several of these (width properties, collapsible groups) are already in the works, and the rest are great things to add to our roadmap :)

[abidlabs]

Copy to clipboard support. Right now it's Hacky via the _js function

Quick clarification here: is this for copying images or text or something else?

[altryne]

@abidlabs I used it to copy images and text (for SD it was seeds, prompts etc')

[abidlabs]

Ok that makes sense. Also to clarify:

Add class_name property to all blocks, some of us know tailwind/css and would LOVE to be able to add this for UI composability

Have you tried using element IDs? You can pass in an elem_id parameter to any Component or Block and it will allow you to target it via css. Docs: https://gradio.app/custom_CSS_and_JS/#the-elem_id-argument

[altryne]

Absolutey, I used IDs everywhere I could. Some elements don't receive them, which led to some hacks, but Classes could be useful as well if I want to apply the same class and style all my buttons for example in one way.

[osanseviero]

Very cool list of issues! I'm particularly excited about the following 3 in terms of virality

• https://github.com/gradio-app/gradio/issues/776 This enables interesting use cases for diffusion models and Reinforcement Learning
• https://github.com/gradio-app/gradio/issues/2032
• https://github.com/gradio-app/gradio/issues/1502