added docs to events & styles (gradio-app#1530)

* added docs to events * added docs to events * added style docs to highlightedtext * add events to docs * format Co-authored-by: aliabd <[email protected]> Co-authored-by: Ali Abid <[email protected]>
Ryan-Qiyu-Jiang · Jun 14, 2022 · 311972d · 311972d
1 parent caa6a4e
commit 311972d
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 7 deletions.
diff --git a/gradio/components.py b/gradio/components.py
@@ -2833,7 +2833,6 @@ def __init__(
         """
         Parameters:
         value (List[Tuple[str, str | Number | None]]): Default value to show.
-        color_map (Dict[str, str]): Map between category and respective colors.
         combine_adjacent (bool): If True, will merge the labels of adjacent tokens belonging to the same category.
         adjacent_separator (str): Specifies the separator to be used between tokens if combine_adjacent is True.
         show_legend (bool): whether to show span categories in a separate legend or inline.
@@ -2927,6 +2926,12 @@ def style(
         color_map: Optional[Dict[str, str]] = None,
         container: Optional[bool] = None,
     ):
+        """
+        Parameters:
+        rounded (bool | Tuple[bool, bool, bool, bool]): If True, will round the corners of the text. If a tuple, will round the corners of the text according to the values in the tuple, starting from top left and proceeding clock-wise.
+        color_map (Dict[str, str]): Map between category and respective colors.
+        container (bool): If True, will place the component in a container.
+        """
         if color_map is not None:
             self._style["color_map"] = color_map
 

diff --git a/gradio/events.py b/gradio/events.py
@@ -22,13 +22,16 @@ def change(
         _postprocess: bool = True,
     ):
         """
+        This event is triggered when the component's input value changes (e.g. when the user types in a textbox
+        or uploads an image)
+
         Parameters:
-            fn: Callable function
-            inputs: List of inputs
-            outputs: List of outputs
-            status_tracker: StatusTracker to visualize function progress
-            api_name: Defining this parameter exposes the endpoint in the api docs
-            _js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of input and outputs components, return should be a list of values for output component.
+            fn (Callable): Callable function
+            inputs (List[Component]): List of inputs
+            outputs (List[Component]): List of outputs
+            status_tracker (StatusTracker): StatusTracker to visualize function progress
+            api_name (str): Defining this parameter exposes the endpoint in the api docs
+            _js (str): Optional frontend js method to run before running 'fn'. Input arguments for js method are values of input and outputs components, return should be a list of values for output component.
         Returns: None
         """
         self.set_event_trigger(
@@ -59,6 +62,8 @@ def click(
         _postprocess: bool = True,
     ):
         """
+        This event is triggered when the component (e.g. a button) is clicked.
+
         Parameters:
             fn: Callable function
             inputs: List of inputs
@@ -98,6 +103,8 @@ def submit(
         _postprocess: bool = True,
     ):
         """
+        This event is triggered when the user presses the Enter key while the component (e.g. a textbox) is focused.
+
         Parameters:
             fn: Callable function
             inputs: List of inputs
@@ -134,6 +141,9 @@ def edit(
         _postprocess: bool = True,
     ):
         """
+        This event is triggered when the user edits the component (e.g. image) using the
+        built-in editor.
+
         Parameters:
             fn: Callable function
             inputs: List of inputs
@@ -168,6 +178,9 @@ def clear(
         _postprocess: bool = True,
     ):
         """
+        This event is triggered when the user clears the component (e.g. image or audio)
+        using the X button for the component.
+
         Parameters:
             fn: Callable function
             inputs: List of inputs
@@ -202,6 +215,8 @@ def play(
         _postprocess: bool = True,
     ):
         """
+        This event is triggered when the user plays the component (e.g. audio or video)
+
         Parameters:
             fn: Callable function
             inputs: List of inputs
@@ -234,6 +249,8 @@ def pause(
         _postprocess: bool = True,
     ):
         """
+        This event is triggered when the user pauses the component (e.g. audio or video)
+
         Parameters:
             fn: Callable function
             inputs: List of inputs
@@ -266,6 +283,8 @@ def stop(
         _postprocess: bool = True,
     ):
         """
+        This event is triggered when the user stops the component (e.g. audio or video)
+
         Parameters:
             fn: Callable function
             inputs: List of inputs
@@ -300,6 +319,9 @@ def stream(
         _postprocess: bool = True,
     ):
         """
+        This event is triggered when the user streams the component (e.g. a live webcam
+        component)
+
         Parameters:
             fn: Callable function
             inputs: List of inputs

diff --git a/website/homepage/render_html.py b/website/homepage/render_html.py
@@ -600,6 +600,51 @@ def update(name):
         "params_doc": get_function_documentation(Box.__init__)[2],
     }
 
+    # Changeable, Clearable, Submittable, Editable, Playable, Clickable
+
+    change = {
+        "doc": get_function_documentation(Changeable.change)[0],
+        "params": get_function_documentation(Changeable.change)[1],
+        "params_doc": get_function_documentation(Changeable.change)[2],
+    }
+
+    clear = {
+        "doc": get_function_documentation(Clearable.clear)[0],
+        "params": get_function_documentation(Clearable.clear)[1],
+        "params_doc": get_function_documentation(Clearable.clear)[2],
+    }
+
+    submit = {
+        "doc": get_function_documentation(Submittable.submit)[0],
+        "params": get_function_documentation(Submittable.submit)[1],
+        "params_doc": get_function_documentation(Submittable.submit)[2],
+    }
+
+    edit = {
+        "doc": get_function_documentation(Editable.edit)[0],
+        "params": get_function_documentation(Editable.edit)[1],
+        "params_doc": get_function_documentation(Editable.edit)[2],
+    }
+
+    play = {
+        "doc": get_function_documentation(Playable.play)[0],
+        "params": get_function_documentation(Playable.play)[1],
+        "params_doc": get_function_documentation(Playable.play)[2],
+    }
+    click = {
+        "doc": get_function_documentation(Clickable.click)[0],
+        "params": get_function_documentation(Clickable.click)[1],
+        "params_doc": get_function_documentation(Clickable.click)[2],
+    }
+
+    events = {
+        "change": change,
+        "clear": clear,
+        "submit": submit,
+        "edit": edit,
+        "play": play,
+        "click": click
+    }
 
 
     SCREENSHOT_FOLDER = "dist/assets/demo_screenshots"
@@ -654,6 +699,7 @@ def update(name):
         "tabitem": tabitem,
         "group": group,
         "box": box,
+        "events": events,
         "demo_code": demo_code,
         "embedding_configs": embedding_configs
     }

diff --git a/website/homepage/src/docs_template.html b/website/homepage/src/docs_template.html
@@ -455,6 +455,41 @@ <h3 id="box-header" class="text-2xl font-light my-4">Box</h3>
     &#183;&#183;&#183;</code></pre>
       <p class="mb-2 mt-4 text-lg">{{ docs.box["doc"] }}</p>
 
+    </div>
+    <h3 class="font-semibold">Events:</h3>
+    <div id="events" class="func ml-20">
+        <p class="mb-2 mt-4 text-lg">There are 6 event methods that exist in Blocks: click(), submit(), change(), edit(), play() and clear()</p>
+        <p class="mb-2 mt-4 text-lg">Each event takes in the following parameters.</p>
+
+        <table class="table-fixed w-full my-4">
+                  <thead class="text-left">
+                    <tr>
+                      <th class="font-semibold w-2/5">Parameter</th>
+                      <th class="font-semibold">Description</th>
+                    </tr>
+                  </thead>
+                </table>
+                <table class="table-fixed w-full my-4 rounded-lg bg-gray-100">
+                  <tbody class="text-left align-top">
+                  {% for param in docs.events["change"]["params_doc"] %}
+                      <tr class="group hover:bg-gray-200">
+                        <td class="p-2 w-2/5 break-words">
+                          <code class=“prettyprint”>{{ param[0] }}</code>
+                          <p class="text-gray-500 italic">{{ param[1] }}</p>
+                        </td>
+                        <td class="p-2 w-3/5 break-words">
+                          <p>{{ param[2] }}</p>
+                        </td>
+                      </tr>
+                  {% endfor %}
+                  </tbody>
+                </table>
+
+              {% for event_name, event_doc in docs.events.items() %}
+                 <h3 id="{{ event_name }}-header" class="text-2xl font-light my-4">{{ event_name }}()</h3>
+                 <p class="mb-2 mt-4 text-lg">{{ event_doc["doc"] }}</p>
+              {% endfor %}
+
     </div>
           </div>
         </section>