Merge pull request #822 from gradio-app/aliabd/new-guides

New guides

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.  
+
+<iframe src="https://hf.space/gradioiframe/aliabd/rick-and-morty/+" frameBorder="0" height="875" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+
+## 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 = """
+<center>
+The bot was trained to answer questions based on Rick and Morty dialogues. Ask Rick anything!
+<img src="https://huggingface.co/spaces/course-demos/Rick_and_Morty_QA/resolve/main/rick.png" width=200px>
+</center>
+"""
+
+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 :)

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).
+
+<iframe src="https://hf.space/gradioiframe/aliabd/nubia/api" frameBorder="5" height="725" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+
+
+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 :)

website/homepage/render_html.py

@@ -62,7 +62,7 @@ def render_index():
     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("</pre>", f"</pre>{copy_button}</div>")
 
         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)

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;
+    }
+
   </style>
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
   <script>