From c5e969559612f956afcdb0c6f7b22ab8275bc49a Mon Sep 17 00:00:00 2001 From: Ali Abdalla Date: Mon, 25 Sep 2023 13:42:32 -0700 Subject: [PATCH] Fix small issues in docs and guides (#5669) * Keep website guides sidebar width consistent * add next / prev buttons to chatinterface * add changeset * sidebar fixes on docs * clean iframes from guides * add changeset --------- Co-authored-by: gradio-pr-bot --- .changeset/wise-waves-agree.md | 6 + gradio/blocks.py | 2 +- .../Gradio-and-ONNX-on-Hugging-Face.md | 4 +- .../Gradio-and-Wandb-Integration.md | 3 - .../image-classification-in-pytorch.md | 7 +- .../image-classification-in-tensorflow.md | 5 +- ...classification-with-vision-transformers.md | 6 +- .../building-a-pictionary-app.md | 6 +- .../create-your-own-friends-with-a-gan.md | 11 +- .../generate_jsons/src/docs/__init__.py | 8 +- .../[[version]]/docs/[doc]/+page.svelte | 12 +- .../docs/block-layouts/+page.svelte | 6 +- .../docs/combining-interfaces/+page.svelte | 6 +- .../[[version]]/docs/components/+page.svelte | 282 +++++++++--------- .../[[version]]/docs/flagging/+page.svelte | 6 +- .../[[version]]/docs/js-client/+page.svelte | 7 +- .../docs/python-client/+page.svelte | 8 +- .../[[version]]/docs/themes/+page.svelte | 6 +- .../[[version]]/guides/[guide]/+page.svelte | 7 +- 19 files changed, 201 insertions(+), 197 deletions(-) create mode 100644 .changeset/wise-waves-agree.md diff --git a/.changeset/wise-waves-agree.md b/.changeset/wise-waves-agree.md new file mode 100644 index 0000000000..c3e1ab7dde --- /dev/null +++ b/.changeset/wise-waves-agree.md @@ -0,0 +1,6 @@ +--- +"gradio": minor +"website": minor +--- + +feat:Fix small issues in docs and guides diff --git a/gradio/blocks.py b/gradio/blocks.py index 4b80c87b5f..cf58b8e785 100644 --- a/gradio/blocks.py +++ b/gradio/blocks.py @@ -709,7 +709,7 @@ class Blocks(BlockContext): btn.click(fn=update, inputs=inp, outputs=out) demo.launch() - Demos: blocks_hello, blocks_flipper, blocks_speech_text_sentiment, generate_english_german, sound_alert + Demos: blocks_hello, blocks_flipper, blocks_speech_text_sentiment, generate_english_german Guides: blocks-and-event-listeners, controlling-layout, state-in-blocks, custom-CSS-and-JS, custom-interpretations-with-blocks, using-blocks-like-functions """ diff --git a/guides/05_integrating-other-frameworks/Gradio-and-ONNX-on-Hugging-Face.md b/guides/05_integrating-other-frameworks/Gradio-and-ONNX-on-Hugging-Face.md index 07bd112bf2..9893285910 100644 --- a/guides/05_integrating-other-frameworks/Gradio-and-ONNX-on-Hugging-Face.md +++ b/guides/05_integrating-other-frameworks/Gradio-and-ONNX-on-Hugging-Face.md @@ -12,9 +12,7 @@ In this Guide, we'll walk you through: - How to setup a Gradio demo for EfficientNet-Lite4 - How to contribute your own Gradio demos for the ONNX organization on Hugging Face -Here's an example of an ONNX model: try out the EfficientNet-Lite4 demo below. - - +Here's an [example](https://onnx-efficientnet-lite4.hf.space/) of an ONNX model. ## What is the ONNX Model Zoo? diff --git a/guides/05_integrating-other-frameworks/Gradio-and-Wandb-Integration.md b/guides/05_integrating-other-frameworks/Gradio-and-Wandb-Integration.md index e5ffe819dc..0b75d69635 100644 --- a/guides/05_integrating-other-frameworks/Gradio-and-Wandb-Integration.md +++ b/guides/05_integrating-other-frameworks/Gradio-and-Wandb-Integration.md @@ -12,9 +12,6 @@ In this Guide, we'll walk you through: - How to setup a Gradio demo using the Wandb integration for JoJoGAN - How to contribute your own Gradio demos after tracking your experiments on wandb to the Wandb organization on Hugging Face -Here's an example of an model trained and experiments tracked on wandb, try out the JoJoGAN demo below. - - ## What is Wandb? diff --git a/guides/05_integrating-other-frameworks/image-classification-in-pytorch.md b/guides/05_integrating-other-frameworks/image-classification-in-pytorch.md index c8bd87b584..0258f6bb29 100644 --- a/guides/05_integrating-other-frameworks/image-classification-in-pytorch.md +++ b/guides/05_integrating-other-frameworks/image-classification-in-pytorch.md @@ -7,9 +7,7 @@ Tags: VISION, RESNET, PYTORCH Image classification is a central task in computer vision. Building better classifiers to classify what object is present in a picture is an active area of research, as it has applications stretching from autonomous vehicles to medical imaging. -Such models are perfect to use with Gradio's _image_ input component, so in this tutorial we will build a web demo to classify images using Gradio. We will be able to build the whole web application in Python, and it will look like this (try one of the examples!): - - +Such models are perfect to use with Gradio's _image_ input component, so in this tutorial we will build a web demo to classify images using Gradio. We will be able to build the whole web application in Python, and it will look like the demo on the bottom of the page. Let's get started! @@ -81,7 +79,8 @@ gr.Interface(fn=predict, This produces the following interface, which you can try right here in your browser (try uploading your own examples!): - + + --- diff --git a/guides/05_integrating-other-frameworks/image-classification-in-tensorflow.md b/guides/05_integrating-other-frameworks/image-classification-in-tensorflow.md index 59d34dd553..0eb2bb7d1d 100644 --- a/guides/05_integrating-other-frameworks/image-classification-in-tensorflow.md +++ b/guides/05_integrating-other-frameworks/image-classification-in-tensorflow.md @@ -7,9 +7,8 @@ Tags: VISION, MOBILENET, TENSORFLOW Image classification is a central task in computer vision. Building better classifiers to classify what object is present in a picture is an active area of research, as it has applications stretching from traffic control systems to satellite imaging. -Such models are perfect to use with Gradio's _image_ input component, so in this tutorial we will build a web demo to classify images using Gradio. We will be able to build the whole web application in Python, and it will look like this (try one of the examples!): +Such models are perfect to use with Gradio's _image_ input component, so in this tutorial we will build a web demo to classify images using Gradio. We will be able to build the whole web application in Python, and it will look like the demo on the bottom of the page. - Let's get started! @@ -79,7 +78,7 @@ gr.Interface(fn=classify_image, This produces the following interface, which you can try right here in your browser (try uploading your own examples!): - + --- diff --git a/guides/05_integrating-other-frameworks/image-classification-with-vision-transformers.md b/guides/05_integrating-other-frameworks/image-classification-with-vision-transformers.md index c59c3bd429..20d377e60f 100644 --- a/guides/05_integrating-other-frameworks/image-classification-with-vision-transformers.md +++ b/guides/05_integrating-other-frameworks/image-classification-with-vision-transformers.md @@ -7,9 +7,7 @@ Tags: VISION, TRANSFORMERS, HUB Image classification is a central task in computer vision. Building better classifiers to classify what object is present in a picture is an active area of research, as it has applications stretching from facial recognition to manufacturing quality control. -State-of-the-art image classifiers are based on the _transformers_ architectures, originally popularized for NLP tasks. Such architectures are typically called vision transformers (ViT). Such models are perfect to use with Gradio's _image_ input component, so in this tutorial we will build a web demo to classify images using Gradio. We will be able to build the whole web application in a **single line of Python**, and it will look like this (try one of the examples!): - - +State-of-the-art image classifiers are based on the _transformers_ architectures, originally popularized for NLP tasks. Such architectures are typically called vision transformers (ViT). Such models are perfect to use with Gradio's _image_ input component, so in this tutorial we will build a web demo to classify images using Gradio. We will be able to build the whole web application in a **single line of Python**, and it will look like the demo on the bottom of the page. Let's get started! @@ -46,7 +44,7 @@ Notice that we have added one more parameter, the `examples`, which allows us to This produces the following interface, which you can try right here in your browser. When you input an image, it is automatically preprocessed and sent to the Hugging Face Hub API, where it is passed through the model and returned as a human-interpretable prediction. Try uploading your own image! - + --- diff --git a/guides/08_other-tutorials/building-a-pictionary-app.md b/guides/08_other-tutorials/building-a-pictionary-app.md index 85636d9faa..7b71ae216a 100644 --- a/guides/08_other-tutorials/building-a-pictionary-app.md +++ b/guides/08_other-tutorials/building-a-pictionary-app.md @@ -7,9 +7,7 @@ Tags: SKETCHPAD, LABELS, LIVE How well can an algorithm guess what you're drawing? A few years ago, Google released the **Quick Draw** dataset, which contains drawings made by humans of a variety of every objects. Researchers have used this dataset to train models to guess Pictionary-style drawings. -Such models are perfect to use with Gradio's _sketchpad_ input, so in this tutorial we will build a Pictionary web application using Gradio. We will be able to build the whole web application in Python, and will look like this (try drawing something!): - - +Such models are perfect to use with Gradio's _sketchpad_ input, so in this tutorial we will build a Pictionary web application using Gradio. We will be able to build the whole web application in Python, and it will look like the demo on the bottom of the page. Let's get started! This guide covers how to build a pictionary app (step-by-step): @@ -101,7 +99,7 @@ gr.Interface(fn=predict, This produces the following interface, which you can try right here in your browser (try drawing something, like a "snake" or a "laptop"): - + --- diff --git a/guides/08_other-tutorials/create-your-own-friends-with-a-gan.md b/guides/08_other-tutorials/create-your-own-friends-with-a-gan.md index 4580fef69e..127ea5c4eb 100644 --- a/guides/08_other-tutorials/create-your-own-friends-with-a-gan.md +++ b/guides/08_other-tutorials/create-your-own-friends-with-a-gan.md @@ -11,9 +11,7 @@ It seems that cryptocurrencies, [NFTs](https://www.nytimes.com/interactive/2022/ Generative Adversarial Networks, often known just as _GANs_, are a specific class of deep-learning models that are designed to learn from an input dataset to create (_generate!_) new material that is convincingly similar to elements of the original training set. Famously, the website [thispersondoesnotexist.com](https://thispersondoesnotexist.com/) went viral with lifelike, yet synthetic, images of people generated with a model called StyleGAN2. GANs have gained traction in the machine learning world, and are now being used to generate all sorts of images, text, and even [music](https://salu133445.github.io/musegan/)! -Today we'll briefly look at the high-level intuition behind GANs, and then we'll build a small demo around a pre-trained GAN to see what all the fuss is about. Here's a peek at what we're going to be putting together: - - +Today we'll briefly look at the high-level intuition behind GANs, and then we'll build a small demo around a pre-trained GAN to see what all the fuss is about. Here's a [peek](https://nimaboscarino-cryptopunks.hf.space) at what we're going to be putting together. ### Prerequisites @@ -113,9 +111,6 @@ gr.Interface( ).launch() ``` -Launching the interface should present you with something like this: - - ## Step 4 — Even more punks! @@ -163,9 +158,7 @@ The `examples` parameter takes a list of lists, where each item in the sublists You can also try adding a `title`, `description`, and `article` to the `gr.Interface`. Each of those parameters accepts a string, so try it out and see what happens 👀 `article` will also accept HTML, as [explored in a previous guide](/guides/key-features/#descriptive-content)! -When you're all done, you may end up with something like this: - - +When you're all done, you may end up with something like [this](https://nimaboscarino-cryptopunks.hf.space). For reference, here is our full code: diff --git a/js/_website/generate_jsons/src/docs/__init__.py b/js/_website/generate_jsons/src/docs/__init__.py index 23497f428d..dc743c321b 100644 --- a/js/_website/generate_jsons/src/docs/__init__.py +++ b/js/_website/generate_jsons/src/docs/__init__.py @@ -152,6 +152,7 @@ def organize_docs(d): "routes": {}, "events": {}, "py-client": {}, + "chatinterface": {} } pages = [] for mode in d: @@ -174,9 +175,10 @@ def organize_docs(d): if mode == "component": organized["components"][c["name"].lower()] = c pages.append(c["name"].lower()) - elif mode in ["helpers", "routes", "py-client"]: + elif mode in ["helpers", "routes", "py-client", "chatinterface"]: organized[mode][c["name"].lower()] = c pages.append(c["name"].lower()) + else: # if mode not in organized["building"]: # organized["building"][mode] = {} @@ -259,6 +261,10 @@ def organize_docs(d): organized["py-client"][cls]["next_obj"] = organized["py-client"][ c_keys[i + 1] ]["name"] + + for cls in organized["chatinterface"]: + organized["chatinterface"][cls]["prev_obj"] = "Block-Layouts" + organized["chatinterface"][cls]["next_obj"] = "Themes" organized["events_matrix"] = component_events organized["events"] = events diff --git a/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte index 121c20b553..78edfb2d5b 100644 --- a/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte +++ b/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte @@ -81,7 +81,7 @@
-
+
-
+

+
{#if obj.override_signature} - 
{obj.override_signature}
-
{:else} - 
{obj.parent}.{obj.name}(