Adding a Playground Tab to the Website

[aliabd]

Adding a playground tab to the website, initially will just show curated demos side by side with their code.

Currently has 12 demos (all the demos in getting started and blocks guides) but it's very easy to add more. Still need to make some styling changes.

Screen.Recording.2022-07-22.at.3.59.55.PM.mov

Fixes #1638

[abidlabs]

Very cool @aliabd! Some quick feedback:

• As it stands, I think "Playground" is not an accurate name for this section, what about "Demos"? Once we add the interactive re-rendering, then we can rename it "Playground"! Icon is still fine :)
• It would be nice to have some basic text at the top of the page explaining what the purpose of the page is. Maybe like:

Demos: here are some examples of what you can build with gradio in just a few lines of Python. Once you're ready to learn, head over to the Quickstart

[abidlabs]

Here are some more demos that would be nice to showcase:

• image_classifier (rename to image_classifier_keras)
• image_classifier_2 (rename to image_classifier_pytorch)
• titanic_survival
• outbreak_forecast
• gpt_j
• sst_or_tts

Also I'd only keep 1 of the hello worlds so that people get to the more exciting demos quickly

[freddyaboulton]

@abidlabs @aliabd What about calling this section the "Cookbook" or "Recipes".

I've seen the concept of a cookbook used in other libraries (pyarrow, pytorch) and the goal is to provide a concise code snippet for solving a common task.

That sounds exactly what we're going with here and I think having this on the website will make it really easy to add examples for stuff that's useful but too small for a guide.

Curious on your thoughts. We may have to add some prose to add context to the code if we go down this route but it should be no more than a sentence per recipe.

[abidlabs]

I really like "Recipes", definitely catchier than "Demos". Some more thoughts:

• It might be helpful to rename the demos with more human friendly names as each recipe. For example, one of the demos could be "Image classification with Keras" instead of "image_classifier")
• You may consider organizing the demos into different sections: "Images", "Text", etc. I'm not sure if this would make them easier or harder to navigate, so just an idea

[omerXfaruq]

Would it be better if the demos would be in vertical column and scrollable, WDYT? Users would be able to see all of the demos at once.
But when it is called recipe, tabbed version suits well in my mind, not sure why :D

[aliabid94]

Agree that vertical scrolling would be nice with all demos loaded at and scrollable.

[abidlabs]

I was thinking about the Recipes section some more, and I think we can think of it as a way to provide "templates" to users for common use cases. Common use cases could include things like:

• Live streaming audio
• Image classification
• Image segmentation
• Certain kinds of dashboards
• Leaderboards (the idea was actually inspired by this comment where Thomas mentions "template")
• ...and so on

I'm imagining a well-designed page with thumbnails of the demo, along with a description, and when you click on the thumbnail, you are presented with the code and live app. Something like one of these:

[github-actions]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-1860-all-demos

[aliabd]

What about something like this?

Screen.Recording.2022-08-24.at.4.35.14.PM.mov

[abidlabs]

This looks very nice @aliabd and very clean!

Some suggestions:

• Adding emojis to each section ("Text", "Images", "Tabular") (side note: love the emoji for "Recipes" itself)
• Consider naming "Text" to "Text & Natural Language Processing", "Images" to "Images & Computer Vision", and "Tabular" to "Tabular Data and Plots"
• Can we add an "Audio & Speech" section and a "Fun" section underneath as well? Inspired by the categories here: https://github.com/gradio-app/awesome-demos
• "Sentiment Analysis" is really "Sentiment Analysis from Speech". It would be good to put a pure text sentiment analysis demo here instead, and then move the sentiment analysis from speech to the Audio section
• Remove "Calculator (live)" as it's too similar to Calculator (maybe?)

I think we should think through whether these specific demos are the "best ones" to use for people wanting "recipes" or "templates", and maybe rearranging the order of the some of the demos. So for example, "GPT-J" should appear before "GPT" because it's a simpler demo and should probably be called "GPT-J from Hugging Face Hug", and "GPT" should be renamed "GPT (Single Textbox)" to make it clear what the value of that demo is.

Overall, looks great!

[aliabd]

Thanks for the feedback!

@aliabid94:

• I moved all the demos to the demos folder
• I simplified the dictionary and now read the text description, version, etc from the demo folder
• On every push to main, spaces will restart and use gradio version in version.txt

@abidlabs:

• I removed the many images, audio files and most importantly model files (instead will load from external url) from the demos. This reduced the demos from 27.3MB to 1.4MB. That being said, the size of the repo with git history is still huge (180MB vs 42MB with depth-1). We should do a history clean up because there's some seriously big files that were probably accidentally added then removed a long time ago (for example a 50MB model file in streaming_stt, which is a demo that hasn't changed in 4 months)
• I fixed all the broken spaces
• Added outbreak forecast
• Added fake diffusion as an iterative output example

Tested everything (including restarting spaces) on devserver.

[aliabd]

I still can't figure out why tests are failing, is this related to a separate issue?

[freddyaboulton]

It's probably the change in networking.py ?

[aliabd]

Oh wow.. was debugging something with @aliabid94 and had no idea I made that change in this branch. Thanks @freddyaboulton!

[abidlabs]

Amazing, this is super nice! LGTM to merge

[aliabid94]

• I think recipes is an unclear name. Recipes reminds me of infra setup commands, such as Ansible or Chef Recipes. I think Demos is a much clearer name.
• The nav bar is getting a little cluttered, can we combine things a little?
• I think the code comments excessive, esp. "# imports", or "# launch". Can we get rid of most of the unhelpful ones?
• I think URL and Description can be put in a readme file of each demo folder rather than at the top of the run file
• When there are a lot of demos, there is horizontal scrolling to see them all. I think there may be an easier way to visually map between the active button and the demo, maybe using tabs.
• Remove margin on embedded gradio container
• Consistency of font-color grays, thickness, and font-size

[abidlabs]

I think recipes is an unclear name. Recipes reminds me of infra setup commands, such as Ansible or Chef Recipes. I think Demos is a much clearer name.

I think "Recipes" is pretty synonymous to code templates, and I find it catchier than "Demos" (i.e. more people would be interested in checking it out if we announce it). But I'm fine with "Demos" too if you guys feel strongly against "Recipes."

The nav bar is getting a little cluttered, can we combine things a little?

I think 6 items is fine (we shouldn't add more than this). If needed, we could get rid of Guides as a separate section since all of the Guides show up in the sidebar when you click on Quickstart. (However, then there's no way to search within the Guides)

Agree with @aliabid94 on all of the other points

[aliabd]

@aliabid94 I implemented all your changes:

• Changed Recipes to Demos
• Removed 'Github' from the navbar and just kept the logo to make more space. Also reordered a bit so that Quickstart and Docs are first
• I removed the code comments, and kept only the most important ones
• I removed URL, and moved the Description to a DESCRIPTION.md file. (The reason I didn't put it in README.md is because we auto generate that in the upload to spaces script - it's necessary for things like the gradio version and honestly didn't want to mess with it)
• I added tabs to the demos so it's visually easier
• I made the fonts more consistent

Play around here.

[abidlabs]

Love it! LGTM