diff --git a/guides/adding_rich_descriptions_to_your_demo.md b/guides/adding_rich_descriptions_to_your_demo.md new file mode 100644 index 0000000000..82a3b67aca --- /dev/null +++ b/guides/adding_rich_descriptions_to_your_demo.md @@ -0,0 +1,81 @@ +# Adding Rich Descriptions to Your Demo + +related_spaces: https://huggingface.co/spaces/ThomasSimonini/Chat-with-Gandalf-GPT-J6B, https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot, https://huggingface.co/spaces/nateraw/cryptopunks-generator +tags: MARKDOWN, DESCRIPTION, ARTICLE + +## Introduction + +When an interface is shared, it is usually accompanied with some form of explanatory text, links or images. This guide will go over how to easily add these on gradio. + +For example, take a look at this fun chatbot interface below. It has a title, description, image as well as a link in the bottom. + + + +## The parameters in `Interface` + +There are three parameters in `Interface` where text can go: + +* `title`: which accepts text and can displays it at the very top of interface +* `description`: which accepts text, markdown or HTML and places it right under the title. +* `article`: which is also accepts text, markdown or HTML but places it below the interface. + +![annotated](website/src/assets/img/guides/adding_rich_descriptions_to_your_demo/annotated.png) + +## Code example + +Here's all the text-related code required to recreate the interface shown above. + +```python +import gradio as gr + +title = "Ask Rick a Question" +description = """ +
+The bot was trained to answer questions based on Rick and Morty dialogues. Ask Rick anything! + +
+""" + +article = "Check out [the original Rick and Morty Bot](https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot) that this demo is based off of." + +from transformers import AutoModelForCausalLM, AutoTokenizer +import torch + +tokenizer = AutoTokenizer.from_pretrained("ericzhou/DialoGPT-Medium-Rick_v2") +model = AutoModelForCausalLM.from_pretrained("ericzhou/DialoGPT-Medium-Rick_v2") + +def predict(input): + # tokenize the new input sentence + new_user_input_ids = tokenizer.encode(input + tokenizer.eos_token, return_tensors='pt') + + # generate a response + history = model.generate(new_user_input_ids, max_length=1000, pad_token_id=tokenizer.eos_token_id).tolist() + + # convert the tokens to text, and then split the responses into the right format + response = tokenizer.decode(history[0]).split("<|endoftext|>") + return response[1] + +gr.Interface(fn = predict, inputs = ["textbox"], outputs = ["text"], title = title, description = description, article = article).launch() + +``` + +Of course, you don't have to use HTML and can instead rely on markdown, like we've done in the `article` parameter above. + +The table below shows the syntax for the most common markdown commands. + +| Type | Syntax | +| ----------- | ----------- | +| Header | # Heading 1 ## Heading 2 ### Heading 3 | +| Link | \[gradio's website](https://gradio.app) | +| Image | !\[gradio's logo](https://gradio.app/assets/img/logo.png) | +| Text Formatting | \_italic_ \*\*bold** | +| List | \* Item 1 \* Item 2 | +| Quote | \> this is a quote | +| Code | Inline \`code\` has \`back-ticks around\` it. | + + + +Here's a neat [cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) with more. + + +### That's all! Happy building :) \ No newline at end of file diff --git a/guides/using_the_api_docs.md b/guides/using_the_api_docs.md new file mode 100644 index 0000000000..329ae40b68 --- /dev/null +++ b/guides/using_the_api_docs.md @@ -0,0 +1,49 @@ +# Using the API Docs + +tags: API + +## Introduction + +Every gradio interface comes with an API you can use directly. To find out how to use it, just click the `view the api` button at the bottom of the page (whether its hosted on spaces, generated using `share=True`, or running locally). + +![view the api button](website/src/assets/img/guides/using_the_api_docs/view-the-api-button.gif) + +This button opens up interface-specific API docs. This will show you the predict endpoint, payload, response, as well as sample code snippets in Python, JS and cURL. + +# What will the API docs tell you? + +Below is an (iframed) example: the API Docs of [this space](https://huggingface.co/spaces/aliabd/nubia). + + + + +It shows that there are 7 sections on the page + +* The predict **endpoint**: + * Where to send the payload (`https://hf.space/gradioiframe/aliabd/nubia/+/api/predict/`). This is likely the most important piece of information as it defines where the request will be sent. +* The **inputs** and their types +* The **outputs** and their types +* The **payload**: + * What to send and how to structure it. It will always look like: +```python +{ + "data": [ input_1, input_2 ... ] +} +``` +* The **response**: + * What to expect to receive. It will always look like: +```python +{ + "data": [ output_1, output_2 ... ], + "durations": [ float ], # the time taken for the prediction to complete + "avg_durations": [ float ] # the average time taken for all predictions so far (used to estimate the runtime) +} +``` + +* A live **demo** and **code snippets** in Python, JS and cURL + * You can go directly to this section if you want to quickly try out the API and play around with it. +* Other **methods** related to the inputs/outputs + * Use gradio's helper methods to quickly convert your files to base64 and other formats required by the API. + + +### That's all! Happy building :) \ No newline at end of file diff --git a/website/homepage/render_html.py b/website/homepage/render_html.py index 72a8ea7e99..1f9c630459 100644 --- a/website/homepage/render_html.py +++ b/website/homepage/render_html.py @@ -62,7 +62,7 @@ for guide in guide_files: guide_name = guide[:-3] pretty_guide_name = " ".join( [ - word.capitalize().replace("Ml", "ML").replace("Gan", "GAN") + word.capitalize().replace("Ml", "ML").replace("Gan", "GAN").replace("Api", "API") for word in guide_name.split("_") ] ) @@ -179,7 +179,7 @@ def render_guides(): guide_output = guide_output.replace("", f"{copy_button}") output_html = markdown2.markdown( - guide_output, extras=["target-blank-links", "header-ids"] + guide_output, extras=["target-blank-links", "header-ids", "tables"] ) os.makedirs("generated", exist_ok=True) os.makedirs(os.path.join("generated", guide["name"]), exist_ok=True) diff --git a/website/homepage/src/assets/img/guides/adding_rich_descriptions_to_your_demo/annotated.png b/website/homepage/src/assets/img/guides/adding_rich_descriptions_to_your_demo/annotated.png new file mode 100644 index 0000000000..e8db15f6c1 Binary files /dev/null and b/website/homepage/src/assets/img/guides/adding_rich_descriptions_to_your_demo/annotated.png differ diff --git a/website/homepage/src/assets/img/guides/using_the_api_docs/view-the-api-button.gif b/website/homepage/src/assets/img/guides/using_the_api_docs/view-the-api-button.gif new file mode 100644 index 0000000000..7e4ee6d2e4 Binary files /dev/null and b/website/homepage/src/assets/img/guides/using_the_api_docs/view-the-api-button.gif differ diff --git a/website/homepage/src/guides_template.html b/website/homepage/src/guides_template.html index b51765ec1e..83f4fb7cc0 100644 --- a/website/homepage/src/guides_template.html +++ b/website/homepage/src/guides_template.html @@ -88,6 +88,20 @@ padding-inline-start: 40px; list-style-type: none; } + + table { + margin: auto; + } + + th { + background: #ccc; + } + + th, td { + border: 1px solid #ccc; + padding: 10px; + } +