Spaces:
Running
Running
File size: 3,698 Bytes
03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 bcea8cb 5584590 03d0e97 bcea8cb 03d0e97 bcea8cb 03d0e97 ea2ac7e 03d0e97 |
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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
import gradio as gr
from gradio_markdownlabel import MarkdownLabel
with gr.Blocks(title="Markdown Label Demo") as demo:
gr.Markdown("# MarkdownLabel Component Demo")
# Simple position-based example
example = {
"markdown_content": """# Comprehensive Markdown Example
## Introduction
*The* quick **brown fox** jumps over the lazy dog. This is a simple quick example with various **formatting** elements.
### Lists and Items
Here are some important points:
1. **First item** - This is the primary consideration
2. *Second item* - Another important point
3. Third item with `inline code`
4. Fourth item containing [a link](https://example.com)
#### Unordered Lists
- Bullet point one
- Bullet point two with **bold text**
- Final bullet point
### Code Block Example
```python
def hello_world():
print("Hello, World!")
return "success"
```
### Tables
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 | Cell 3 |
| Data A | Data B | Data C |
### Blockquotes
> This is a blockquote with some **important** information.
>
> It can span multiple lines and contain *emphasis*.
### Mixed Content
The document contains various **formatting** options including:
- *Italicized text* for emphasis
- **Bold text** for importance
- `Inline code` for technical terms
- Links like [this one](https://example.com)
#### Final Section
This concludes our comprehensive example with multiple markdown elements for testing position-based highlighting accuracy.""",
"highlights": [
{
"position": [56, 61], # "quick" in "The quick brown fox", note the 2nd quick is not highlighted
"title": "Quick",
"content": "Highlighted using exact character positions.",
"category": "Position Demo",
"color": "#ffeb3b"
},
{
"term": "brown fox",
"title": "Brown Fox (Term Match)",
"content": "Highlighted using term matching - will match anywhere this term appears.",
"category": "Term Demo",
"color": "#e3f2fd"
},
{
"position": [91, 95], # "lazy" in "the lazy dog"
"title": "Lazy",
"content": "Position-based highlight",
"category": "Position Demo",
"color": "#ffeb3b"
},
{
"position": [989, 999],
"title": "Italicized",
"content": "Highlighting 'Italicized'",
"category": "Position Demo",
"color": "#ff9800"
},
{
"term": "formatting",
"title": "formatting (Term Match)",
"content": "Highlighted using term matching - will match anywhere this term appears.",
"category": "Term Demo",
"color": "#d0167f91"
},
{
"position": [30, 37],
"title": "regression test",
"content": "Highlight across lines should not render",
"category": "Position Demo",
"color": "#ffeb3b"
},
]
}
gr.Markdown("## Position vs Term Highlighting Comparison")
gr.Markdown("This example shows the difference between position-based (yellow) and term-based (blue) highlighting.")
MarkdownLabel(
value=example,
label="Simple Position vs Term Example",
show_side_panel=True,
panel_width="300px",
interactive=True
)
if __name__ == "__main__":
demo.launch()
|