Spaces:
Running
Running
File size: 4,790 Bytes
db32e48 c3f9f1a d287ca5 c3f9f1a db32e48 ad0e7fc db32e48 ad0e7fc db32e48 aa39585 ad0e7fc aa39585 db32e48 aa39585 db32e48 e0dfb76 db32e48 176823e db32e48 176823e db32e48 aa39585 db32e48 e0dfb76 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
# Markdown
Upgraded gradio Markdown.
- Supports output of multimodal content (audio, video, image, text)
- Built-in tags (chart, select-box, accordion)
- Supports custom rendering components and interaction with Python events
## How to Use
### Basic Usage
<demo name="basic"></demo>
### Multimodal & Support for Local File Display
<demo name="multimodal"></demo>
### Support for Accordion Content Display
Include the `accordion` tag in the returned content. For more usage details, see <tab-link tab="custom_tags/accordion">accordion</tab-link>
<demo name="accordion"></demo>
### Support for User Selection Interaction
Include the `select-box` tag in the returned content. For more usage details, see <tab-link tab="custom_tags/select-box">select-box</tab-link>
<demo name="select-box"></demo>
### Support for Chart Display
Include the `chart` tag in the returned content. For more usage details, see <tab-link tab="custom_tags/chart">chart</tab-link>
<demo name="chart"></demo>
### Custom Tags (Advanced Usage, Requires Frontend Knowledge)
<demo name="custom-tag"></demo>
#### Import JS
<demo name="custom-tag2"></demo>
The template can only perform simple variable replacements. If you want to introduce more custom behaviors, such as conditional judgments, loop rendering, etc., please use js to control the element for processing. Here is a simple example:
<demo name="custom-tag3">
<demo-suffix>
custom_select.js
```js
<file src="../resources/custom_components/custom_select.js"></file>
```
</demo-suffix>
</demo>
#### Interaction with Python
In js, you can use `cc.dispatch` to trigger the `custom` event listened to on the Python side. Taking the previous custom_select.js as an example, when we call `cc.dispatch(options[i])` on the frontend, a notification will be sent to the Python side simultaneously.
<demo name="custom-tag4"></demo>
## API and Parameter List
The following APIs are additional extended parameters beyond the original gradio Markdown.
### props
| Attribute | Type | Default Value | Description |
| ----------------------------- | ------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------- |
| enable_base64 | bool | False | Whether to support rendering content as base64, since rendering base64 is unsafe, the default is False. |
| preview | bool | True | Whether to enable image preview functionality. |
| enable_latex | bool | True | Whether to enable LaTeX rendering. |
| latex_single_dollar_delimiter | bool | True | Whe ther to enable single dollar delimiter `$` for LaTeX rendering. |
| custom_components | Dict[str, CustomComponentDict] CustomComponentDict definition below | None | Supports user-defined custom tags and controls tag rendering styles and triggers Python events through js. |
| |
**CustomComponent definition is as follows:**
```python
class CustomComponentDict(TypedDict):
props: Optional[List[str]]
template: Optional[str]
js: Optional[str]
```
### Built-in Custom Tags
- <tab-link tab="custom_tags/select-box">select-box</tab-link>
- <tab-link tab="custom_tags/accordion">accordion</tab-link>
- <tab-link tab="custom_tags/chart">chart</tab-link>
### Event Listeners
| Event | Description |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `mgr.Markdown.custom(fn, 路路路)` | Triggered when a custom tag event occurs. EventData is: <br/> - tag: The current tag that triggered the event.<br/> - tag_index: The index of the current triggered tag.<br/> - value: The custom value passed in. |
|