Add helper classes to docs (#8516)

* add brush and eraser to imade editor

* add waveformoptions

* formatting

* add changeset

* formatting backend

* fix event matrix

* fixes

* fixes

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/three-pears-shout.md

@@ -0,0 +1,7 @@
+---
+"gradio": patch
+"gradio_client": patch
+"website": patch
+---
+
+feat:Add helper classes to docs 

client/python/gradio_client/documentation.py

@@ -2,6 +2,7 @@
 
 from __future__ import annotations
 
+import dataclasses
 import inspect
 import warnings
 from collections import defaultdict
@@ -247,7 +248,11 @@ def generate_documentation():
     for mode, class_list in classes_to_document.items():
         documentation[mode] = []
         for cls, fns in class_list:
-            fn_to_document = cls if inspect.isfunction(cls) else cls.__init__
+            fn_to_document = (
+                cls
+                if inspect.isfunction(cls) or dataclasses.is_dataclass(cls)
+                else cls.__init__
+            )
             _, parameter_doc, return_doc, _ = document_fn(fn_to_document, cls)
             if (
                 hasattr(cls, "preprocess")

gradio/components/audio.py

@@ -19,6 +19,7 @@
 from gradio.exceptions import Error
 
 
+@document()
 @dataclasses.dataclass
 class WaveformOptions:
     """
@@ -123,7 +124,7 @@ def __init__(
             editable: If True, allows users to manipulate the audio file if the component is interactive. Defaults to True.
             min_length: The minimum length of audio (in seconds) that the user can pass into the prediction function. If None, there is no minimum length.
             max_length: The maximum length of audio (in seconds) that the user can pass into the prediction function. If None, there is no maximum length.
-            waveform_options: A dictionary of options for the waveform display. Options include: waveform_color (str), waveform_progress_color (str), show_controls (bool), skip_length (int), trim_region_color (str). Default is None, which uses the default values for these options.
+            waveform_options: A dictionary of options for the waveform display. Options include: waveform_color (str), waveform_progress_color (str), show_controls (bool), skip_length (int), trim_region_color (str). Default is None, which uses the default values for these options. [See `gr.WaveformOptions` docs](#waveform-options).
         """
         valid_sources: list[Literal["upload", "microphone"]] = ["upload", "microphone"]
         if sources is None:

gradio/components/image_editor.py

@@ -59,6 +59,7 @@ class AcceptBlobs(GradioModel):
     files: List[Tuple[str, bytes]]
 
 
+@document()
 @dataclasses.dataclass
 class Eraser:
     """
@@ -70,6 +71,7 @@ class Eraser:
     default_size: int | Literal["auto"] = "auto"
 
 
+@document()
 @dataclasses.dataclass
 class Brush(Eraser):
     """
@@ -188,8 +190,8 @@ def __init__(
             show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
             crop_size: The size of the crop box in pixels. If a tuple, the first value is the width and the second value is the height. If a string, the value must be a ratio in the form `width:height` (e.g. "16:9").
             transforms: The transforms tools to make available to users. "crop" allows the user to crop the image.
-            eraser: The options for the eraser tool in the image editor. Should be an instance of the `gr.Eraser` class, or None to use the default settings. Can also be False to hide the eraser tool.
-            brush: The options for the brush tool in the image editor. Should be an instance of the `gr.Brush` class, or None to use the default settings. Can also be False to hide the brush tool, which will also hide the eraser tool.
+            eraser: The options for the eraser tool in the image editor. Should be an instance of the `gr.Eraser` class, or None to use the default settings. Can also be False to hide the eraser tool. [See `gr.Eraser` docs](#eraser).
+            brush: The options for the brush tool in the image editor. Should be an instance of the `gr.Brush` class, or None to use the default settings. Can also be False to hide the brush tool, which will also hide the eraser tool. [See `gr.Brush` docs](#brush).
             format: Format to save image if it does not already have a valid format (e.g. if the image is being returned to the frontend as a numpy array or PIL Image).  The format should be supported by the PIL library. This parameter has no effect on SVG files.
             layers: If True, will allow users to add layers to the image. If False, the layers option will be hidden.
             canvas_size: The size of the default canvas in pixels. If a tuple, the first value is the width and the second value is the height. If None, the canvas size will be the same as the background image or 800 x 600 if no background image is provided.

js/_website/generate_jsons/src/docs/__init__.py

@@ -64,12 +64,13 @@ def create_events_matrix():
     component_events = {}
     for component in docs["component"]:
         component_event_list = []
-        for event in component["class"].EVENTS:
-            events.add(event)
-            for fn in component["fns"]:
-                if event == fn["name"]:
-                    component_event_list.append(event)
-        component_events[component["name"]] = component_event_list
+        if hasattr(component["class"], 'EVENTS'):
+            for event in component["class"].EVENTS:
+                events.add(event)
+                for fn in component["fns"]:
+                    if event == fn["name"]:
+                        component_event_list.append(event)
+            component_events[component["name"]] = component_event_list
 
 
     return list(events), component_events

js/_website/src/lib/assets/style.css

@@ -132,6 +132,9 @@
 .obj h3 {
 	@apply mt-8 text-xl text-orange-500 font-light;
 }
+.obj h4 {
+	@apply mt-8 text-xl text-orange-500 font-light;
+}
 /* playground */
 
 .current-playground-demo {

js/_website/src/lib/templates/gradio/03_components/01_introduction.svx

@@ -2,6 +2,11 @@
     import dataflow from "$lib/assets/img/dataflow.svg"
     import {get_object} from "../../process_json.ts";
     let components = get_object("components");
+    let components_no_dataclasses = {...components};
+    delete components_no_dataclasses["brush"];
+    delete components_no_dataclasses["eraser"];
+    delete components_no_dataclasses["waveformoptions"];
+
     let events = get_object("events");
     let events_matrix = get_object("events_matrix");
 </script>
@@ -36,7 +41,7 @@
         <tbody
             class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
         >
-            {#each Object.entries(components) as [name, obj] (name)}
+            {#each Object.entries(components_no_dataclasses) as [name, obj] (name)}
                 <tr class="group hover:bg-gray-200/60">
                     <th
                         class="p-3 w-1/5 bg-white sticky z-2 left-0 font-normal"

js/_website/src/lib/templates/gradio/03_components/audio.svx

@@ -10,6 +10,7 @@
     import { style_formatted_text } from "$lib/text";
 
     let obj = get_object("audio");
+    let waveform_obj = get_object("waveformoptions");
 </script>
 
 <!--- Title -->
@@ -71,6 +72,30 @@ def predict(···) -> str | Path | bytes | tuple[int, np.ndarray] | None
 <FunctionsSection fns={obj.fns} event_listeners={true} />
 {/if}
 
+<!-- Helper Classes -->
+### Helper Classes 
+<div style="margin-left: 3rem">
+
+<!--- Title -->
+### WaveformOptions
+
+
+<!--- Usage -->
+```python
+gradio.WaveformOptions(···)
+```
+
+<!--- Description -->
+#### Description
+## {@html style_formatted_text(waveform_obj.description)}
+
+<!--- Initialization -->
+#### Initialization
+<ParamTable parameters={waveform_obj.parameters} />
+
+</div>
+
+
 {#if obj.guides && obj.guides.length > 0}
 <!--- Guides -->
 ### Guides

js/_website/src/lib/templates/gradio/03_components/imageeditor.svx

@@ -10,6 +10,8 @@
     import { style_formatted_text } from "$lib/text";
 
     let obj = get_object("imageeditor");
+    let brush_obj = get_object("brush");
+    let eraser_obj = get_object("eraser");
 </script>
 
 <!--- Title -->
@@ -71,6 +73,47 @@ def predict(···) -> EditorValue | ImageType | None
 <FunctionsSection fns={obj.fns} event_listeners={true} />
 {/if}
 
+<!-- Helper Classes -->
+### Helper Classes 
+<div style="margin-left: 3rem">
+
+<!-- BRUSH -->
+<!--- Title -->
+### Brush
+
+<!--- Usage -->
+```python
+gradio.Brush(···)
+```
+
+<!--- Description -->
+#### Description
+## {@html style_formatted_text(brush_obj.description)}
+
+<!--- Initialization -->
+#### Initialization
+<ParamTable parameters={brush_obj.parameters} />
+
+<!-- ERASER -->
+<!--- Title -->
+### Eraser
+
+<!--- Usage -->
+```python
+gradio.Eraser(···)
+```
+
+<!--- Description -->
+#### Description
+## {@html style_formatted_text(eraser_obj.description)}
+
+<!--- Initialization -->
+#### Initialization
+<ParamTable parameters={eraser_obj.parameters} />
+
+
+</div>
+
 {#if obj.guides && obj.guides.length > 0}
 <!--- Guides -->
 ### Guides

js/_website/src/lib/text.ts

@@ -13,5 +13,9 @@ export function style_formatted_text(formatted_text: string | null): string {
 		.replace(
 			regex_curly_brackets,
 			"<code class='text-orange-500' style='font-family: monospace; font-size: large;'>$1</code>"
+		)
+		.replace(
+			/\[(.*?)\]\((.*?)\)/g,
+			"<a href='$2' class= 'text-orange-500'>$1</a>"
 		);
 }