fixed guides (#1310)

guides/using_the_api_docs.md

@@ -1,49 +0,0 @@
-# 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/embed/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/embed/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

@@ -83,9 +83,9 @@ def render_index():
         generated_template.write(output_html)
 
 
-guide_files = ["getting_started.md"]
+guide_files = ["getting_started.md", "advanced_interface_features.md", "introduction_to_blocks.md"]
 all_guides = sorted(os.listdir(GRADIO_GUIDES_DIR))
-guide_files.extend([file for file in all_guides if file != "getting_started.md"])
+guide_files.extend([file for file in all_guides if not(file in guide_files)])
 guides = []
 for guide in guide_files:
     if guide.lower() == "readme.md":
@@ -235,10 +235,24 @@ def render_guides():
             guide_output, extras=["target-blank-links", "header-ids", "tables"]
         )
         
-        soup = BeautifulSoup(output_html)
+        def remove_emojis(text: str) -> str:
+            regrex_pattern = re.compile(pattern = "["
+                u"\U0001F600-\U0001F64F"  # emoticons
+                u"\U0001F300-\U0001F5FF"  # symbols & pictographs
+                u"\U0001F680-\U0001F6FF"  # transport & map symbols
+                u"\U0001F1E0-\U0001F1FF"  # flags (iOS)
+                u"\U00002702-\U000027B0"
+                u"\U00002702-\U000027B0"
+                u"\U000024C2-\U0001F251"
+                u"\U0001f926-\U0001f937"
+                u"\U00010000-\U0010ffff"                
+                                "]+", flags = re.UNICODE)
+            return regrex_pattern.sub(r'',text)        
+        
+        soup = BeautifulSoup(output_html, "html.parser")
         headings = []
         for heading in soup.find_all(["h1", "h2", "h3", "h4"]):
-            headings.append({'text': heading.text.strip(),
+            headings.append({'text': remove_emojis(heading.text.strip()),
                             'id': heading.get('id')})
         
         os.makedirs("generated", exist_ok=True)

website/homepage/src/guides_template.html

@@ -119,7 +119,6 @@
 
     .hanging {
       padding-left: 22px;
-      padding-top: 5px;
       text-indent: -6px;      
     }