Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,14 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/
+.claude
+test_*

README.md

@@ -1,12 +1,514 @@
 ---
-title: Gradio Markdownlabel
-emoji: 💻
-colorFrom: pink
-colorTo: gray
+tags: [gradio-custom-component, HighlightedText]
+title: gradio_markdownlabel
+short_description: A gradio custom component
+colorFrom: blue
+colorTo: yellow
 sdk: gradio
-sdk_version: 5.36.2
-app_file: app.py
 pinned: false
+app_file: space.py
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# `gradio_markdownlabel`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+Python library for easily interacting with trained machine learning models
+
+## Installation
+
+```bash
+pip install gradio_markdownlabel
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_markdownlabel import MarkdownLabel
+
+# Create a comprehensive example with rich markdown content and multiple highlights
+example_data = {
+    "markdown_content": """# AI and Machine Learning Research Report
+
+## Introduction
+
+This document explores the rapidly evolving field of **artificial intelligence** and its various applications in modern technology. The study focuses on *machine learning* techniques and their impact on different industries.
+
+## Key Technologies
+
+### Deep Learning
+*Deep learning* represents a subset of machine learning that uses **neural networks** with multiple layers. This approach has revolutionized areas such as:
+
+- Computer vision
+- Natural language processing
+- Speech recognition
+
+### Natural Language Processing
+**Natural language processing** (NLP) enables computers to understand and interpret human language. Key applications include:
+
+1. Text analysis
+2. Sentiment analysis
+3. Language translation
+
+## Applications
+
+The integration of **computer vision** in autonomous vehicles has transformed the automotive industry. Similarly, **reinforcement learning** has shown remarkable success in gaming and robotics.
+
+## Conclusion
+
+As **artificial intelligence** continues to advance, we expect to see more sophisticated applications of these technologies across various domains.
+""",
+    "highlights": [
+        {
+            "term": "artificial intelligence",
+            "title": "Artificial Intelligence (AI)",
+            "content": "**Artificial Intelligence** refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. AI systems can perform tasks that typically require human intelligence, such as:\n\n- Visual perception\n- Speech recognition\n- Decision-making\n- Language translation\n\nAI is broadly categorized into:\n1. **Narrow AI** - designed for specific tasks\n2. **General AI** - hypothetical AI with human-level cognitive abilities",
+            "category": "Core Technology",
+            "color": "#e3f2fd"
+        },
+        {
+            "term": "machine learning",
+            "title": "Machine Learning (ML)",
+            "content": "**Machine Learning** is a subset of AI that focuses on the development of algorithms that can learn and improve from experience without being explicitly programmed.\n\n### Types of Machine Learning:\n- **Supervised Learning**: Learning with labeled examples\n- **Unsupervised Learning**: Finding patterns in unlabeled data\n- **Reinforcement Learning**: Learning through interaction with environment\n\n### Applications:\n- Recommendation systems\n- Fraud detection\n- Medical diagnosis\n- Autonomous vehicles",
+            "category": "Core Technology", 
+            "color": "#f3e5f5"
+        },
+        {
+            "term": "deep learning",
+            "title": "Deep Learning",
+            "content": "**Deep Learning** is a specialized subset of machine learning that uses artificial neural networks with multiple layers (deep neural networks) to model and understand complex patterns.\n\n### Key Characteristics:\n- Multiple hidden layers\n- Automatic feature extraction\n- Hierarchical learning\n\n### Popular Architectures:\n- Convolutional Neural Networks (CNNs)\n- Recurrent Neural Networks (RNNs)\n- Transformers\n\n### Applications:\n- Image recognition\n- Natural language processing\n- Speech synthesis",
+            "category": "Advanced Technique",
+            "color": "#e8f5e8"
+        },
+        {
+            "term": "neural networks",
+            "title": "Neural Networks",
+            "content": "**Neural Networks** are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information.\n\n### Components:\n- **Input Layer**: Receives data\n- **Hidden Layers**: Process information\n- **Output Layer**: Produces results\n\n### Types:\n- Feedforward networks\n- Recurrent networks\n- Convolutional networks\n\nNeural networks learn by adjusting the weights of connections between neurons based on training data.",
+            "category": "Architecture",
+            "color": "#fff3e0"
+        },
+        {
+            "term": "natural language processing",
+            "title": "Natural Language Processing (NLP)",
+            "content": "**Natural Language Processing** combines computational linguistics with machine learning to enable computers to understand, interpret, and generate human language.\n\n### Core Tasks:\n- **Tokenization**: Breaking text into words/sentences\n- **Part-of-speech tagging**: Identifying grammatical roles\n- **Named entity recognition**: Identifying people, places, organizations\n- **Sentiment analysis**: Determining emotional tone\n\n### Modern Approaches:\n- Transformer models (BERT, GPT)\n- Attention mechanisms\n- Pre-trained language models",
+            "category": "Application Domain",
+            "color": "#fce4ec"
+        },
+        {
+            "position": [615, 632],
+            "title": "Computer Vision (Position-based)",
+            "content": "**Computer Vision** highlighted by character position rather than term matching. This demonstrates precise control over highlighting specific text segments.\n\n### Position-based Benefits:\n- Exact character-level precision\n- No ambiguity with similar terms\n- Works with any text, including special characters\n- Useful for pre-processed documents",
+            "category": "Position Highlight",
+            "color": "#ffeb3b"
+        },
+        {
+            "term": "computer vision",
+            "title": "Computer Vision", 
+            "content": "**Computer Vision** is a field of AI that enables machines to interpret and understand visual information from the world, mimicking human vision capabilities.\n\n### Key Tasks:\n- **Object Detection**: Locating objects in images\n- **Image Classification**: Categorizing images\n- **Semantic Segmentation**: Pixel-level understanding\n- **Face Recognition**: Identifying individuals\n\n### Applications:\n- Autonomous vehicles\n- Medical imaging\n- Security systems\n- Augmented reality",
+            "category": "Application Domain",
+            "color": "#e1f5fe"
+        },
+        {
+            "term": "reinforcement learning",
+            "title": "Reinforcement Learning (RL)",
+            "content": "**Reinforcement Learning** is a type of machine learning where an agent learns to make decisions by performing actions in an environment to maximize cumulative reward.\n\n### Key Concepts:\n- **Agent**: The learner/decision maker\n- **Environment**: The world the agent interacts with\n- **Actions**: Choices available to the agent\n- **Rewards**: Feedback from the environment\n- **Policy**: Strategy for choosing actions\n\n### Famous Applications:\n- Game playing (AlphaGo, OpenAI Five)\n- Robotics control\n- Trading algorithms\n- Resource allocation",
+            "category": "Learning Paradigm",
+            "color": "#f1f8e9"
+        },
+        {
+            "position": [169, 190],
+            "title": "Machine Learning (Position)",
+            "content": "This **machine learning** instance is highlighted using position-based highlighting at characters 169-190.\n\n### Position Highlighting Use Cases:\n- Academic paper annotations\n- Legal document markup\n- Code documentation\n- Precise text analysis\n\nPosition-based highlighting ensures exact text selection without ambiguity.",
+            "category": "Position Demo",
+            "color": "#e8eaf6"
+        }
+    ]
+}
+
+with gr.Blocks(title="Markdown Label Demo") as demo:
+    gr.Markdown("# MarkdownLabel Component Demo")
+    gr.Markdown("This demo showcases the MarkdownLabel component with **both term-based and position-based** interactive highlighting and detailed side panel.")
+    
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("## Full Featured Example")
+            gr.Markdown("Includes both term-based (e.g., 'artificial intelligence') and position-based highlighting (yellow highlights).")
+            MarkdownLabel(
+                value=example_data,
+                label="AI Research Report - Mixed Highlighting",
+                show_side_panel=True,
+                panel_width="350px"
+            )
+        
+        with gr.Column():
+            gr.Markdown("## Compact View")
+            gr.Markdown("Same content without the side panel for a cleaner interface.")
+            MarkdownLabel(
+                value=example_data, 
+                label="Compact View",
+                show_side_panel=False
+            )
+    
+    # Simple position-based example
+    simple_example = {
+        "markdown_content": "The quick **brown fox** jumps over the lazy dog. This is a simple example.",
+        "highlights": [
+            {
+                "position": [4, 9],  # "quick"
+                "title": "Quick (Position 4-9)",
+                "content": "Highlighted using exact character positions 4-9.",
+                "category": "Position Demo",
+                "color": "#ffeb3b"
+            },
+            {
+                "term": "brown fox",
+                "title": "Brown Fox (Term Match)",
+                "content": "Highlighted using term matching.",
+                "category": "Term Demo", 
+                "color": "#e3f2fd"
+            },
+            {
+                "position": [35, 43],  # "the lazy"
+                "title": "The Lazy (Position 35-43)", 
+                "content": "Another position-based highlight at characters 35-43.",
+                "category": "Position Demo",
+                "color": "#f3e5f5"
+            }
+        ]
+    }
+    
+    gr.Markdown("## Position vs Term Highlighting Comparison")
+    gr.Markdown("This example shows the difference between position-based (yellow/purple) and term-based (blue) highlighting.")
+    MarkdownLabel(
+        value=simple_example,
+        label="Simple Position vs Term Example",
+        show_side_panel=True,
+        panel_width="300px"
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `MarkdownLabel`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+dict | Callable | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Dictionary containing markdown_content and highlights array. If a function is provided, the function will be called each time the app loads to set the initial value of this component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_side_panel</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Whether to show the detailed information side panel.</td>
+</tr>
+
+<tr>
+<td align="left"><code>panel_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>"300px"</code></td>
+<td align="left">Width of the side panel (CSS value like "300px", "25%", etc.).</td>
+</tr>
+
+<tr>
+<td align="left"><code>edit_mode</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>"split"</code></td>
+<td align="left">Layout for editing mode - "split" (side-by-side), "tabs", or "overlay".</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_preview</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Whether to show live preview in edit mode.</td>
+</tr>
+
+<tr>
+<td align="left"><code>markdown_editor</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>"textarea"</code></td>
+<td align="left">Type of markdown editor - "textarea" or "codemirror" (future).</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | I18nData | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Timer | float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Component | Sequence[Component] | set[Component] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, ...] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.</td>
+</tr>
+
+<tr>
+<td align="left"><code>preserved_by_key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>"value"</code></td>
+<td align="left">A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, the component will be editable allowing users to modify markdown content.</td>
+</tr>
+
+<tr>
+<td align="left"><code>rtl</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, will display the text in right-to-left direction.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the MarkdownLabel changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `select` | Event listener for when the user selects or deselects the MarkdownLabel. Uses event data gradio.SelectData to carry `value` referring to the label of the MarkdownLabel, and `selected` to refer to state of the MarkdownLabel. See EventData documentation on how to use this event data |
+| `edit` | This listener is triggered when the user edits the MarkdownLabel (e.g. image) using the built-in editor. |
+| `submit` | This listener is triggered when the user presses the Enter key while the MarkdownLabel is focused. |
+| `clear` | This listener is triggered when the user clears the MarkdownLabel using the clear button for the component. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, passes the value as a dictionary with markdown_content and highlights.
+- **As input:** Should return, expects a dictionary with 'markdown_content' and 'highlights' keys.
+
+ ```python
+ def predict(
+     value: dict | None
+ ) -> dict | None:
+     return value
+ ```
+ 

app.py

@@ -0,0 +1,166 @@
+
+import gradio as gr
+from gradio_markdownlabel import MarkdownLabel
+
+# Create a comprehensive example with rich markdown content and multiple highlights
+example_data = {
+    "markdown_content": """# AI and Machine Learning Research Report
+
+## Introduction
+
+This document explores the rapidly evolving field of **artificial intelligence** and its various applications in modern technology. The study focuses on *machine learning* techniques and their impact on different industries.
+
+## Key Technologies
+
+### Deep Learning
+*Deep learning* represents a subset of machine learning that uses **neural networks** with multiple layers. This approach has revolutionized areas such as:
+
+- Computer vision
+- Natural language processing
+- Speech recognition
+
+### Natural Language Processing
+**Natural language processing** (NLP) enables computers to understand and interpret human language. Key applications include:
+
+1. Text analysis
+2. Sentiment analysis
+3. Language translation
+
+## Applications
+
+The integration of **computer vision** in autonomous vehicles has transformed the automotive industry. Similarly, **reinforcement learning** has shown remarkable success in gaming and robotics.
+
+## Conclusion
+
+As **artificial intelligence** continues to advance, we expect to see more sophisticated applications of these technologies across various domains.
+""",
+    "highlights": [
+        {
+            "term": "artificial intelligence",
+            "title": "Artificial Intelligence (AI)",
+            "content": "**Artificial Intelligence** refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. AI systems can perform tasks that typically require human intelligence, such as:\n\n- Visual perception\n- Speech recognition\n- Decision-making\n- Language translation\n\nAI is broadly categorized into:\n1. **Narrow AI** - designed for specific tasks\n2. **General AI** - hypothetical AI with human-level cognitive abilities",
+            "category": "Core Technology",
+            "color": "#e3f2fd"
+        },
+        {
+            "term": "machine learning",
+            "title": "Machine Learning (ML)",
+            "content": "**Machine Learning** is a subset of AI that focuses on the development of algorithms that can learn and improve from experience without being explicitly programmed.\n\n### Types of Machine Learning:\n- **Supervised Learning**: Learning with labeled examples\n- **Unsupervised Learning**: Finding patterns in unlabeled data\n- **Reinforcement Learning**: Learning through interaction with environment\n\n### Applications:\n- Recommendation systems\n- Fraud detection\n- Medical diagnosis\n- Autonomous vehicles",
+            "category": "Core Technology", 
+            "color": "#f3e5f5"
+        },
+        {
+            "term": "deep learning",
+            "title": "Deep Learning",
+            "content": "**Deep Learning** is a specialized subset of machine learning that uses artificial neural networks with multiple layers (deep neural networks) to model and understand complex patterns.\n\n### Key Characteristics:\n- Multiple hidden layers\n- Automatic feature extraction\n- Hierarchical learning\n\n### Popular Architectures:\n- Convolutional Neural Networks (CNNs)\n- Recurrent Neural Networks (RNNs)\n- Transformers\n\n### Applications:\n- Image recognition\n- Natural language processing\n- Speech synthesis",
+            "category": "Advanced Technique",
+            "color": "#e8f5e8"
+        },
+        {
+            "term": "neural networks",
+            "title": "Neural Networks",
+            "content": "**Neural Networks** are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information.\n\n### Components:\n- **Input Layer**: Receives data\n- **Hidden Layers**: Process information\n- **Output Layer**: Produces results\n\n### Types:\n- Feedforward networks\n- Recurrent networks\n- Convolutional networks\n\nNeural networks learn by adjusting the weights of connections between neurons based on training data.",
+            "category": "Architecture",
+            "color": "#fff3e0"
+        },
+        {
+            "term": "natural language processing",
+            "title": "Natural Language Processing (NLP)",
+            "content": "**Natural Language Processing** combines computational linguistics with machine learning to enable computers to understand, interpret, and generate human language.\n\n### Core Tasks:\n- **Tokenization**: Breaking text into words/sentences\n- **Part-of-speech tagging**: Identifying grammatical roles\n- **Named entity recognition**: Identifying people, places, organizations\n- **Sentiment analysis**: Determining emotional tone\n\n### Modern Approaches:\n- Transformer models (BERT, GPT)\n- Attention mechanisms\n- Pre-trained language models",
+            "category": "Application Domain",
+            "color": "#fce4ec"
+        },
+        {
+            "position": [615, 632],
+            "title": "Computer Vision (Position-based)",
+            "content": "**Computer Vision** highlighted by character position rather than term matching. This demonstrates precise control over highlighting specific text segments.\n\n### Position-based Benefits:\n- Exact character-level precision\n- No ambiguity with similar terms\n- Works with any text, including special characters\n- Useful for pre-processed documents",
+            "category": "Position Highlight",
+            "color": "#ffeb3b"
+        },
+        {
+            "term": "computer vision",
+            "title": "Computer Vision", 
+            "content": "**Computer Vision** is a field of AI that enables machines to interpret and understand visual information from the world, mimicking human vision capabilities.\n\n### Key Tasks:\n- **Object Detection**: Locating objects in images\n- **Image Classification**: Categorizing images\n- **Semantic Segmentation**: Pixel-level understanding\n- **Face Recognition**: Identifying individuals\n\n### Applications:\n- Autonomous vehicles\n- Medical imaging\n- Security systems\n- Augmented reality",
+            "category": "Application Domain",
+            "color": "#e1f5fe"
+        },
+        {
+            "term": "reinforcement learning",
+            "title": "Reinforcement Learning (RL)",
+            "content": "**Reinforcement Learning** is a type of machine learning where an agent learns to make decisions by performing actions in an environment to maximize cumulative reward.\n\n### Key Concepts:\n- **Agent**: The learner/decision maker\n- **Environment**: The world the agent interacts with\n- **Actions**: Choices available to the agent\n- **Rewards**: Feedback from the environment\n- **Policy**: Strategy for choosing actions\n\n### Famous Applications:\n- Game playing (AlphaGo, OpenAI Five)\n- Robotics control\n- Trading algorithms\n- Resource allocation",
+            "category": "Learning Paradigm",
+            "color": "#f1f8e9"
+        },
+        {
+            "position": [169, 190],
+            "title": "Machine Learning (Position)",
+            "content": "This **machine learning** instance is highlighted using position-based highlighting at characters 169-190.\n\n### Position Highlighting Use Cases:\n- Academic paper annotations\n- Legal document markup\n- Code documentation\n- Precise text analysis\n\nPosition-based highlighting ensures exact text selection without ambiguity.",
+            "category": "Position Demo",
+            "color": "#e8eaf6"
+        }
+    ]
+}
+
+with gr.Blocks(title="Markdown Label Demo") as demo:
+    gr.Markdown("# MarkdownLabel Component Demo")
+    gr.Markdown("This demo showcases the MarkdownLabel component with **both term-based and position-based** interactive highlighting and detailed side panel.")
+    
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("## Full Featured Example")
+            gr.Markdown("Includes both term-based (e.g., 'artificial intelligence') and position-based highlighting (yellow highlights).")
+            MarkdownLabel(
+                value=example_data,
+                label="AI Research Report - Mixed Highlighting",
+                show_side_panel=True,
+                panel_width="350px"
+            )
+        
+        with gr.Column():
+            gr.Markdown("## Compact View")
+            gr.Markdown("Same content without the side panel for a cleaner interface.")
+            MarkdownLabel(
+                value=example_data, 
+                label="Compact View",
+                show_side_panel=False
+            )
+    
+    # Simple position-based example
+    simple_example = {
+        "markdown_content": "The quick **brown fox** jumps over the lazy dog. This is a simple example.",
+        "highlights": [
+            {
+                "position": [4, 9],  # "quick"
+                "title": "Quick (Position 4-9)",
+                "content": "Highlighted using exact character positions 4-9.",
+                "category": "Position Demo",
+                "color": "#ffeb3b"
+            },
+            {
+                "term": "brown fox",
+                "title": "Brown Fox (Term Match)",
+                "content": "Highlighted using term matching.",
+                "category": "Term Demo", 
+                "color": "#e3f2fd"
+            },
+            {
+                "position": [35, 43],  # "the lazy"
+                "title": "The Lazy (Position 35-43)", 
+                "content": "Another position-based highlight at characters 35-43.",
+                "category": "Position Demo",
+                "color": "#f3e5f5"
+            }
+        ]
+    }
+    
+    gr.Markdown("## Position vs Term Highlighting Comparison")
+    gr.Markdown("This example shows the difference between position-based (yellow/purple) and term-based (blue) highlighting.")
+    MarkdownLabel(
+        value=simple_example,
+        label="Simple Position vs Term Example",
+        show_side_panel=True,
+        panel_width="300px"
+    )
+
+if __name__ == "__main__":
+    demo.launch()

css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

editable_demo.py

@@ -0,0 +1,181 @@
+#!/usr/bin/env python3
+
+import gradio as gr
+from gradio_markdownlabel import MarkdownLabel
+
+# Sample data for the editable demo
+sample_data = {
+    "markdown_content": """# Editable Document Example
+
+## Introduction
+
+This document demonstrates the **editable functionality** of the MarkdownLabel component. You can click the "Edit" button to modify this content.
+
+## Features
+
+- **Real-time editing**: Changes appear live in preview mode
+- **Highlight preservation**: Existing highlights remain intact
+- **Multiple edit modes**: Split view, tabs, and overlay options
+- Position-based highlighting support
+
+## Try Editing
+
+1. Click the **Edit** button above
+2. Modify this text in the editor
+3. See live preview (in split mode)
+4. Save or cancel your changes
+
+Feel free to experiment with the content!
+""",
+    "highlights": [
+        {
+            "term": "editable functionality",
+            "title": "Editable Functionality",
+            "content": "This feature allows users to modify markdown content directly in the interface with real-time preview.",
+            "category": "feature",
+            "color": "#e3f2fd"
+        },
+        {
+            "position": [200, 220],  # "MarkdownLabel component"
+            "title": "MarkdownLabel Component",
+            "content": "The main component that renders markdown with interactive highlights and editing capabilities.",
+            "category": "component",
+            "color": "#f3e5f5"
+        },
+        {
+            "term": "Real-time editing",
+            "title": "Real-time Editing",
+            "content": "Changes in the editor are immediately reflected in the preview pane, providing instant feedback.",
+            "category": "feature",
+            "color": "#e8f5e8"
+        },
+        {
+            "position": [450, 470],  # "Split view, tabs, and"
+            "title": "Edit Modes",
+            "content": "Different layout options for the editing interface: split view shows editor and preview side-by-side, tabs separate them, and overlay mode provides full-screen editing.",
+            "category": "ui",
+            "color": "#fff3e0"
+        }
+    ]
+}
+
+def handle_content_change(value):
+    """Handle content changes (only on save)"""
+    print(f"Content saved: {len(value['markdown_content'])} characters")
+    return value
+
+def handle_edit_start(value):
+    """Handle when user starts editing"""
+    print("User started editing")
+
+def handle_save(value):
+    """Handle when user saves changes"""
+    print("Changes saved!")
+    gr.Info("Document saved successfully!")
+    return value
+
+def handle_cancel(value):
+    """Handle when user cancels editing"""
+    print("Edit cancelled")
+    gr.Info("Changes cancelled")
+    return gr.update()
+
+def load_sample_content():
+    """Load sample content"""
+    # Return data for both components (split and tabs editors)
+    return sample_data, sample_data
+
+
+with gr.Blocks(title="Editable MarkdownLabel Demo") as demo:
+    gr.Markdown("# Editable MarkdownLabel Component Demo")
+    gr.Markdown("This demo showcases the **interactive editing capabilities** of the MarkdownLabel component.")
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            gr.Markdown("## Split View Mode (Default)")
+            gr.Markdown("Editor and preview side-by-side when editing.")
+            
+            editor_split = MarkdownLabel(
+                value=sample_data,
+                interactive=True,
+                edit_mode="split",
+                show_preview=True,
+                label="Split View Editor",
+                show_side_panel=True,
+                panel_width="300px"
+            )
+            
+            # Event handlers for split view
+            # Note: Removed real-time change handler to prevent infinite loops
+            # Changes are now handled only on explicit save via submit event
+            editor_split.edit(handle_edit_start, inputs=[editor_split])
+            editor_split.submit(handle_save, inputs=[editor_split], outputs=[editor_split])
+            editor_split.clear(handle_cancel, inputs=[editor_split])
+            
+        with gr.Column(scale=1):
+            gr.Markdown("## Tab Mode")
+            gr.Markdown("Switch between edit and preview tabs.")
+            
+            editor_tabs = MarkdownLabel(
+                value=sample_data,
+                interactive=True,
+                edit_mode="tabs",
+                show_preview=True,
+                label="Tab View Editor",
+                show_side_panel=False
+            )
+            
+            # Event handlers for tab view
+            # Note: Only handling submit (save) events to prevent loops
+            editor_tabs.submit(handle_save, inputs=[editor_tabs], outputs=[editor_tabs])
+    
+    with gr.Row():
+        gr.Markdown("## Control Buttons")
+        
+    with gr.Row():
+        load_btn = gr.Button("📄 Load Sample", variant="secondary")
+        
+    # Button event handlers
+    load_btn.click(load_sample_content, outputs=[editor_split, editor_tabs])
+    
+    with gr.Row():
+        gr.Markdown("## Non-Interactive (Read-Only) Version")
+        
+    # Read-only version for comparison
+    readonly_viewer = MarkdownLabel(
+        value=sample_data,
+        interactive=False,  # Read-only mode
+        label="Read-Only Viewer",
+        show_side_panel=True,
+        panel_width="250px"
+    )
+    
+    gr.Markdown("""
+    ## How to Use
+    
+    1. **Start Editing**: Click the "✏️ Edit" button on any interactive component
+    2. **Edit Content**: Modify the markdown text in the editor
+    3. **Live Preview**: See changes in real-time (split mode) or switch to preview tab
+    4. **Save Changes**: Click "💾 Save" to confirm and apply your changes
+    5. **Cancel Changes**: Click "❌ Cancel" to discard changes and revert
+    6. **Interact with Highlights**: Click on highlighted terms to see details in the side panel
+    
+    ## Features Demonstrated
+    
+    - ✅ **Interactive editing** with explicit save/cancel workflow
+    - ✅ **Multiple edit modes**: Split view and tabs
+    - ✅ **Live preview** with real-time markdown rendering (visual only)
+    - ✅ **Highlight preservation** during editing
+    - ✅ **Manual save workflow** - changes are applied only when you save
+    - ✅ **Event handling** for edit, save (submit), and cancel events
+    - ✅ **Mixed highlighting** with both term-based and position-based highlights
+    
+    ## Important Notes
+    
+    - **Changes are NOT auto-saved** - you must click "💾 Save" to apply changes
+    - **Live preview** is for visual feedback only - actual content updates on save
+    - **Cancel** reverts all changes made since editing started
+    """)
+
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -0,0 +1 @@
+gradio_markdownlabel

space.py

@@ -0,0 +1,288 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'MarkdownLabel': {'description': 'Displays markdown-formatted text with interactive term highlighting and detailed side panel.\n\nThis component allows for rich markdown content with clickable term highlights that display\ndetailed information in a side panel.', 'members': {'__init__': {'value': {'type': 'dict | Callable | None', 'default': 'None', 'description': 'Dictionary containing markdown_content and highlights array. If a function is provided, the function will be called each time the app loads to set the initial value of this component.'}, 'show_side_panel': {'type': 'bool', 'default': 'True', 'description': 'Whether to show the detailed information side panel.'}, 'panel_width': {'type': 'str', 'default': '"300px"', 'description': 'Width of the side panel (CSS value like "300px", "25%", etc.).'}, 'edit_mode': {'type': 'str', 'default': '"split"', 'description': 'Layout for editing mode - "split" (side-by-side), "tabs", or "overlay".'}, 'show_preview': {'type': 'bool', 'default': 'True', 'description': 'Whether to show live preview in edit mode.'}, 'markdown_editor': {'type': 'str', 'default': '"textarea"', 'description': 'Type of markdown editor - "textarea" or "codemirror" (future).'}, 'label': {'type': 'str | I18nData | None', 'default': 'None', 'description': 'the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': 'Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.'}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': 'Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'key': {'type': 'int | str | tuple[int | str, ...] | None', 'default': 'None', 'description': "in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render."}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': "A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor."}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If True, the component will be editable allowing users to modify markdown content.'}, 'rtl': {'type': 'bool', 'default': 'False', 'description': 'If True, will display the text in right-to-left direction.'}}, 'postprocess': {'value': {'type': 'dict | None', 'description': "Expects a dictionary with 'markdown_content' and 'highlights' keys"}}, 'preprocess': {'return': {'type': 'dict | None', 'description': 'Passes the value as a dictionary with markdown_content and highlights.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the MarkdownLabel changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the MarkdownLabel. Uses event data gradio.SelectData to carry `value` referring to the label of the MarkdownLabel, and `selected` to refer to state of the MarkdownLabel. See EventData documentation on how to use this event data'}, 'edit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user edits the MarkdownLabel (e.g. image) using the built-in editor.'}, 'submit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user presses the Enter key while the MarkdownLabel is focused.'}, 'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the MarkdownLabel using the clear button for the component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'MarkdownLabel': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_markdownlabel`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Python library for easily interacting with trained machine learning models
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_markdownlabel
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_markdownlabel import MarkdownLabel
+
+# Create a comprehensive example with rich markdown content and multiple highlights
+example_data = {
+    "markdown_content": \"\"\"# AI and Machine Learning Research Report
+
+## Introduction
+
+This document explores the rapidly evolving field of **artificial intelligence** and its various applications in modern technology. The study focuses on *machine learning* techniques and their impact on different industries.
+
+## Key Technologies
+
+### Deep Learning
+*Deep learning* represents a subset of machine learning that uses **neural networks** with multiple layers. This approach has revolutionized areas such as:
+
+- Computer vision
+- Natural language processing
+- Speech recognition
+
+### Natural Language Processing
+**Natural language processing** (NLP) enables computers to understand and interpret human language. Key applications include:
+
+1. Text analysis
+2. Sentiment analysis
+3. Language translation
+
+## Applications
+
+The integration of **computer vision** in autonomous vehicles has transformed the automotive industry. Similarly, **reinforcement learning** has shown remarkable success in gaming and robotics.
+
+## Conclusion
+
+As **artificial intelligence** continues to advance, we expect to see more sophisticated applications of these technologies across various domains.
+\"\"\",
+    "highlights": [
+        {
+            "term": "artificial intelligence",
+            "title": "Artificial Intelligence (AI)",
+            "content": "**Artificial Intelligence** refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. AI systems can perform tasks that typically require human intelligence, such as:\n\n- Visual perception\n- Speech recognition\n- Decision-making\n- Language translation\n\nAI is broadly categorized into:\n1. **Narrow AI** - designed for specific tasks\n2. **General AI** - hypothetical AI with human-level cognitive abilities",
+            "category": "Core Technology",
+            "color": "#e3f2fd"
+        },
+        {
+            "term": "machine learning",
+            "title": "Machine Learning (ML)",
+            "content": "**Machine Learning** is a subset of AI that focuses on the development of algorithms that can learn and improve from experience without being explicitly programmed.\n\n### Types of Machine Learning:\n- **Supervised Learning**: Learning with labeled examples\n- **Unsupervised Learning**: Finding patterns in unlabeled data\n- **Reinforcement Learning**: Learning through interaction with environment\n\n### Applications:\n- Recommendation systems\n- Fraud detection\n- Medical diagnosis\n- Autonomous vehicles",
+            "category": "Core Technology", 
+            "color": "#f3e5f5"
+        },
+        {
+            "term": "deep learning",
+            "title": "Deep Learning",
+            "content": "**Deep Learning** is a specialized subset of machine learning that uses artificial neural networks with multiple layers (deep neural networks) to model and understand complex patterns.\n\n### Key Characteristics:\n- Multiple hidden layers\n- Automatic feature extraction\n- Hierarchical learning\n\n### Popular Architectures:\n- Convolutional Neural Networks (CNNs)\n- Recurrent Neural Networks (RNNs)\n- Transformers\n\n### Applications:\n- Image recognition\n- Natural language processing\n- Speech synthesis",
+            "category": "Advanced Technique",
+            "color": "#e8f5e8"
+        },
+        {
+            "term": "neural networks",
+            "title": "Neural Networks",
+            "content": "**Neural Networks** are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information.\n\n### Components:\n- **Input Layer**: Receives data\n- **Hidden Layers**: Process information\n- **Output Layer**: Produces results\n\n### Types:\n- Feedforward networks\n- Recurrent networks\n- Convolutional networks\n\nNeural networks learn by adjusting the weights of connections between neurons based on training data.",
+            "category": "Architecture",
+            "color": "#fff3e0"
+        },
+        {
+            "term": "natural language processing",
+            "title": "Natural Language Processing (NLP)",
+            "content": "**Natural Language Processing** combines computational linguistics with machine learning to enable computers to understand, interpret, and generate human language.\n\n### Core Tasks:\n- **Tokenization**: Breaking text into words/sentences\n- **Part-of-speech tagging**: Identifying grammatical roles\n- **Named entity recognition**: Identifying people, places, organizations\n- **Sentiment analysis**: Determining emotional tone\n\n### Modern Approaches:\n- Transformer models (BERT, GPT)\n- Attention mechanisms\n- Pre-trained language models",
+            "category": "Application Domain",
+            "color": "#fce4ec"
+        },
+        {
+            "position": [615, 632],
+            "title": "Computer Vision (Position-based)",
+            "content": "**Computer Vision** highlighted by character position rather than term matching. This demonstrates precise control over highlighting specific text segments.\n\n### Position-based Benefits:\n- Exact character-level precision\n- No ambiguity with similar terms\n- Works with any text, including special characters\n- Useful for pre-processed documents",
+            "category": "Position Highlight",
+            "color": "#ffeb3b"
+        },
+        {
+            "term": "computer vision",
+            "title": "Computer Vision", 
+            "content": "**Computer Vision** is a field of AI that enables machines to interpret and understand visual information from the world, mimicking human vision capabilities.\n\n### Key Tasks:\n- **Object Detection**: Locating objects in images\n- **Image Classification**: Categorizing images\n- **Semantic Segmentation**: Pixel-level understanding\n- **Face Recognition**: Identifying individuals\n\n### Applications:\n- Autonomous vehicles\n- Medical imaging\n- Security systems\n- Augmented reality",
+            "category": "Application Domain",
+            "color": "#e1f5fe"
+        },
+        {
+            "term": "reinforcement learning",
+            "title": "Reinforcement Learning (RL)",
+            "content": "**Reinforcement Learning** is a type of machine learning where an agent learns to make decisions by performing actions in an environment to maximize cumulative reward.\n\n### Key Concepts:\n- **Agent**: The learner/decision maker\n- **Environment**: The world the agent interacts with\n- **Actions**: Choices available to the agent\n- **Rewards**: Feedback from the environment\n- **Policy**: Strategy for choosing actions\n\n### Famous Applications:\n- Game playing (AlphaGo, OpenAI Five)\n- Robotics control\n- Trading algorithms\n- Resource allocation",
+            "category": "Learning Paradigm",
+            "color": "#f1f8e9"
+        },
+        {
+            "position": [169, 190],
+            "title": "Machine Learning (Position)",
+            "content": "This **machine learning** instance is highlighted using position-based highlighting at characters 169-190.\n\n### Position Highlighting Use Cases:\n- Academic paper annotations\n- Legal document markup\n- Code documentation\n- Precise text analysis\n\nPosition-based highlighting ensures exact text selection without ambiguity.",
+            "category": "Position Demo",
+            "color": "#e8eaf6"
+        }
+    ]
+}
+
+with gr.Blocks(title="Markdown Label Demo") as demo:
+    gr.Markdown("# MarkdownLabel Component Demo")
+    gr.Markdown("This demo showcases the MarkdownLabel component with **both term-based and position-based** interactive highlighting and detailed side panel.")
+    
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("## Full Featured Example")
+            gr.Markdown("Includes both term-based (e.g., 'artificial intelligence') and position-based highlighting (yellow highlights).")
+            MarkdownLabel(
+                value=example_data,
+                label="AI Research Report - Mixed Highlighting",
+                show_side_panel=True,
+                panel_width="350px"
+            )
+        
+        with gr.Column():
+            gr.Markdown("## Compact View")
+            gr.Markdown("Same content without the side panel for a cleaner interface.")
+            MarkdownLabel(
+                value=example_data, 
+                label="Compact View",
+                show_side_panel=False
+            )
+    
+    # Simple position-based example
+    simple_example = {
+        "markdown_content": "The quick **brown fox** jumps over the lazy dog. This is a simple example.",
+        "highlights": [
+            {
+                "position": [4, 9],  # "quick"
+                "title": "Quick (Position 4-9)",
+                "content": "Highlighted using exact character positions 4-9.",
+                "category": "Position Demo",
+                "color": "#ffeb3b"
+            },
+            {
+                "term": "brown fox",
+                "title": "Brown Fox (Term Match)",
+                "content": "Highlighted using term matching.",
+                "category": "Term Demo", 
+                "color": "#e3f2fd"
+            },
+            {
+                "position": [35, 43],  # "the lazy"
+                "title": "The Lazy (Position 35-43)", 
+                "content": "Another position-based highlight at characters 35-43.",
+                "category": "Position Demo",
+                "color": "#f3e5f5"
+            }
+        ]
+    }
+    
+    gr.Markdown("## Position vs Term Highlighting Comparison")
+    gr.Markdown("This example shows the difference between position-based (yellow/purple) and term-based (blue) highlighting.")
+    MarkdownLabel(
+        value=simple_example,
+        label="Simple Position vs Term Example",
+        show_side_panel=True,
+        panel_width="300px"
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `MarkdownLabel`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["MarkdownLabel"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["MarkdownLabel"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, passes the value as a dictionary with markdown_content and highlights.
+- **As output:** Should return, expects a dictionary with 'markdown_content' and 'highlights' keys.
+
+ ```python
+def predict(
+    value: dict | None
+) -> dict | None:
+    return value
+```
+""", elem_classes=["md-custom", "MarkdownLabel-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          MarkdownLabel: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

@@ -0,0 +1,14 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/
+.claude
+test_*

src/LICENSE

@@ -0,0 +1,200 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction,
+and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all
+other entities that control, are controlled by, or are under common
+control with that entity. For the purposes of this definition,
+"control" means (i) the power, direct or indirect, to cause the
+direction or management of such entity, whether by contract or
+otherwise, or (ii) ownership of fifty percent (50%) or more of the
+outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity
+exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications,
+including but not limited to software source code, documentation
+source, and configuration files.
+
+"Object" form shall mean any form resulting from mechanical
+transformation or translation of a Source form, including but
+not limited to compiled object code, generated documentation,
+and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or
+Object form, made available under the License, as indicated by a
+copyright notice that is included in or attached to the work
+(which shall not include communication that is conspicuously
+marked or otherwise designated in writing by the copyright owner
+as "Not a Contribution").
+
+"Derivative Works" shall mean any work, whether in Source or Object
+form, that is based upon (or derived from) the Work and for which the
+editorial revisions, annotations, elaborations, or other modifications
+represent, as a whole, an original work of authorship. For the purposes
+of this License, Derivative Works shall not include works that remain
+separable from, or merely link (or bind by name) to the interfaces of,
+the Work and derivative works thereof.
+
+"Contribution" shall mean any work of authorship, including
+the original version of the Work and any modifications or additions
+to that Work or Derivative Works thereof, that is intentionally
+submitted to Licensor for inclusion in the Work by the copyright owner
+or by an individual or Legal Entity authorized to submit on behalf of
+the copyright owner. For the purposes of this definition, "submitted"
+means any form of electronic, verbal, or written communication sent
+to the Licensor or its representatives, including but not limited to
+communication on electronic mailing lists, source code control
+systems, and issue tracking systems that are managed by, or on behalf
+of, the Licensor for the purpose of discussing and improving the Work,
+but excluding communication that is conspicuously marked or otherwise
+designated in writing by the copyright owner as "Not a Contribution".
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+this License, each Contributor hereby grants to You a perpetual,
+worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+copyright license to use, reproduce, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Work, and to
+permit persons to whom the Work is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Work.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+this License, each Contributor hereby grants to You a perpetual,
+worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+(except as stated in this section) patent license to make, have made,
+use, offer to sell, sell, import, and otherwise transfer the Work,
+where such license applies only to those patent claims licensable
+by such Contributor that are necessarily infringed by their
+Contribution(s) alone or by combination of their Contribution(s)
+with the Work to which such Contribution(s) was submitted. If You
+institute patent litigation against any entity (including a
+cross-claim or counterclaim in a lawsuit) alleging that the Work
+or a Contribution incorporated within the Work constitutes direct
+or contributory patent infringement, then any patent licenses
+granted to You under this License for that Work shall terminate
+as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+Work or Derivative Works thereof in any medium, with or without
+modifications, and in Source or Object form, provided that You
+meet the following conditions:
+
+(a) You must give any other recipients of the Work or
+    Derivative Works a copy of this License; and
+
+(b) You must cause any modified files to carry prominent notices
+    stating that You changed the files; and
+
+(c) You must retain, in the Source form of any Derivative Works
+    that You distribute, all copyright, trademark, patent,
+    attribution and other notices from the Source form of the Work,
+    excluding those notices that do not pertain to any part of
+    the Derivative Works; and
+
+(d) If the Work includes a "NOTICE" text file as part of its
+    distribution, then any Derivative Works that You distribute must
+    include a readable copy of the attribution notices contained
+    within such NOTICE file, excluding those notices that do not
+    pertain to any part of the Derivative Works, in at least one
+    of the following places: within a NOTICE text file distributed
+    as part of the Derivative Works; within the Source form or
+    documentation, if provided along with the Derivative Works; or,
+    within a display generated by the Derivative Works, if and
+    wherever such third-party notices normally appear. The contents
+    of the NOTICE file are for informational purposes only and
+    do not modify the License. You may add Your own attribution
+    notices within Derivative Works that You distribute, alongside
+    or as an addendum to the NOTICE text from the Work, provided
+    that such additional attribution notices cannot be construed
+    as modifying the License.
+
+You may add Your own copyright notice(s) and may provide
+additional or different license terms and conditions for use,
+reproduction, or distribution of Your modifications, or for any such
+Derivative Works as a whole, provided Your use, reproduction, and
+distribution of the Work otherwise complies with the conditions
+stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+any Contribution intentionally submitted for inclusion in the Work
+by You to the Licensor shall be under the terms and conditions of
+this License, without any additional terms or conditions.
+Notwithstanding the above, nothing herein shall supersede or modify
+the terms of any separate license agreement you may have executed
+with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+names, trademarks, service marks, or product names of the Licensor,
+except as required for reasonable and customary use in describing the
+origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+agreed to in writing, Licensor provides the Work (and each
+Contributor provides its Contributions) on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied, including, without limitation, any warranties or conditions
+of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+PARTICULAR PURPOSE. You are solely responsible for determining the
+appropriateness of using or redistributing the Work and assume any
+risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+whether in tort (including negligence), contract, or otherwise,
+unless required by applicable law (such as deliberate and grossly
+negligent acts) or agreed to in writing, shall any Contributor be
+liable to You for damages, including any direct, indirect, special,
+incidental, or consequential damages of any character arising as a
+result of this License or out of the use or inability to use the
+Work (including but not limited to damages for loss of goodwill,
+work stoppage, computer failure or malfunction, or any and all
+other commercial damages or losses), even if such Contributor
+has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Support. You may choose to offer, and to
+charge a fee for, warranty, support, indemnity or other liability
+obligations and/or rights consistent with this License. However, in
+accepting such obligations, You may act only on Your own behalf and on
+Your sole responsibility, not on behalf of any other Contributor, and
+only if You agree to indemnify, defend, and hold each Contributor
+harmless for any liability incurred by, or claims asserted against,
+such Contributor by reason of your accepting any such warranty or support.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+To apply the Apache License to your work, attach the following
+boilerplate notice, with the fields enclosed by brackets "[]"
+replaced with your own identifying information. (Don't include
+the brackets!)  The text should be enclosed in the appropriate
+comment syntax for the file format. We also recommend that a
+file or class name and description of purpose be included on the
+same page as the copyright notice for easier identification within
+third-party archives.
+
+Copyright [yyyy] [name of copyright owner]
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

src/README.md

@@ -0,0 +1,514 @@
+---
+tags: [gradio-custom-component, HighlightedText]
+title: gradio_markdownlabel
+short_description: A gradio custom component
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_markdownlabel`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+Python library for easily interacting with trained machine learning models
+
+## Installation
+
+```bash
+pip install gradio_markdownlabel
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_markdownlabel import MarkdownLabel
+
+# Create a comprehensive example with rich markdown content and multiple highlights
+example_data = {
+    "markdown_content": """# AI and Machine Learning Research Report
+
+## Introduction
+
+This document explores the rapidly evolving field of **artificial intelligence** and its various applications in modern technology. The study focuses on *machine learning* techniques and their impact on different industries.
+
+## Key Technologies
+
+### Deep Learning
+*Deep learning* represents a subset of machine learning that uses **neural networks** with multiple layers. This approach has revolutionized areas such as:
+
+- Computer vision
+- Natural language processing
+- Speech recognition
+
+### Natural Language Processing
+**Natural language processing** (NLP) enables computers to understand and interpret human language. Key applications include:
+
+1. Text analysis
+2. Sentiment analysis
+3. Language translation
+
+## Applications
+
+The integration of **computer vision** in autonomous vehicles has transformed the automotive industry. Similarly, **reinforcement learning** has shown remarkable success in gaming and robotics.
+
+## Conclusion
+
+As **artificial intelligence** continues to advance, we expect to see more sophisticated applications of these technologies across various domains.
+""",
+    "highlights": [
+        {
+            "term": "artificial intelligence",
+            "title": "Artificial Intelligence (AI)",
+            "content": "**Artificial Intelligence** refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. AI systems can perform tasks that typically require human intelligence, such as:\n\n- Visual perception\n- Speech recognition\n- Decision-making\n- Language translation\n\nAI is broadly categorized into:\n1. **Narrow AI** - designed for specific tasks\n2. **General AI** - hypothetical AI with human-level cognitive abilities",
+            "category": "Core Technology",
+            "color": "#e3f2fd"
+        },
+        {
+            "term": "machine learning",
+            "title": "Machine Learning (ML)",
+            "content": "**Machine Learning** is a subset of AI that focuses on the development of algorithms that can learn and improve from experience without being explicitly programmed.\n\n### Types of Machine Learning:\n- **Supervised Learning**: Learning with labeled examples\n- **Unsupervised Learning**: Finding patterns in unlabeled data\n- **Reinforcement Learning**: Learning through interaction with environment\n\n### Applications:\n- Recommendation systems\n- Fraud detection\n- Medical diagnosis\n- Autonomous vehicles",
+            "category": "Core Technology", 
+            "color": "#f3e5f5"
+        },
+        {
+            "term": "deep learning",
+            "title": "Deep Learning",
+            "content": "**Deep Learning** is a specialized subset of machine learning that uses artificial neural networks with multiple layers (deep neural networks) to model and understand complex patterns.\n\n### Key Characteristics:\n- Multiple hidden layers\n- Automatic feature extraction\n- Hierarchical learning\n\n### Popular Architectures:\n- Convolutional Neural Networks (CNNs)\n- Recurrent Neural Networks (RNNs)\n- Transformers\n\n### Applications:\n- Image recognition\n- Natural language processing\n- Speech synthesis",
+            "category": "Advanced Technique",
+            "color": "#e8f5e8"
+        },
+        {
+            "term": "neural networks",
+            "title": "Neural Networks",
+            "content": "**Neural Networks** are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information.\n\n### Components:\n- **Input Layer**: Receives data\n- **Hidden Layers**: Process information\n- **Output Layer**: Produces results\n\n### Types:\n- Feedforward networks\n- Recurrent networks\n- Convolutional networks\n\nNeural networks learn by adjusting the weights of connections between neurons based on training data.",
+            "category": "Architecture",
+            "color": "#fff3e0"
+        },
+        {
+            "term": "natural language processing",
+            "title": "Natural Language Processing (NLP)",
+            "content": "**Natural Language Processing** combines computational linguistics with machine learning to enable computers to understand, interpret, and generate human language.\n\n### Core Tasks:\n- **Tokenization**: Breaking text into words/sentences\n- **Part-of-speech tagging**: Identifying grammatical roles\n- **Named entity recognition**: Identifying people, places, organizations\n- **Sentiment analysis**: Determining emotional tone\n\n### Modern Approaches:\n- Transformer models (BERT, GPT)\n- Attention mechanisms\n- Pre-trained language models",
+            "category": "Application Domain",
+            "color": "#fce4ec"
+        },
+        {
+            "position": [615, 632],
+            "title": "Computer Vision (Position-based)",
+            "content": "**Computer Vision** highlighted by character position rather than term matching. This demonstrates precise control over highlighting specific text segments.\n\n### Position-based Benefits:\n- Exact character-level precision\n- No ambiguity with similar terms\n- Works with any text, including special characters\n- Useful for pre-processed documents",
+            "category": "Position Highlight",
+            "color": "#ffeb3b"
+        },
+        {
+            "term": "computer vision",
+            "title": "Computer Vision", 
+            "content": "**Computer Vision** is a field of AI that enables machines to interpret and understand visual information from the world, mimicking human vision capabilities.\n\n### Key Tasks:\n- **Object Detection**: Locating objects in images\n- **Image Classification**: Categorizing images\n- **Semantic Segmentation**: Pixel-level understanding\n- **Face Recognition**: Identifying individuals\n\n### Applications:\n- Autonomous vehicles\n- Medical imaging\n- Security systems\n- Augmented reality",
+            "category": "Application Domain",
+            "color": "#e1f5fe"
+        },
+        {
+            "term": "reinforcement learning",
+            "title": "Reinforcement Learning (RL)",
+            "content": "**Reinforcement Learning** is a type of machine learning where an agent learns to make decisions by performing actions in an environment to maximize cumulative reward.\n\n### Key Concepts:\n- **Agent**: The learner/decision maker\n- **Environment**: The world the agent interacts with\n- **Actions**: Choices available to the agent\n- **Rewards**: Feedback from the environment\n- **Policy**: Strategy for choosing actions\n\n### Famous Applications:\n- Game playing (AlphaGo, OpenAI Five)\n- Robotics control\n- Trading algorithms\n- Resource allocation",
+            "category": "Learning Paradigm",
+            "color": "#f1f8e9"
+        },
+        {
+            "position": [169, 190],
+            "title": "Machine Learning (Position)",
+            "content": "This **machine learning** instance is highlighted using position-based highlighting at characters 169-190.\n\n### Position Highlighting Use Cases:\n- Academic paper annotations\n- Legal document markup\n- Code documentation\n- Precise text analysis\n\nPosition-based highlighting ensures exact text selection without ambiguity.",
+            "category": "Position Demo",
+            "color": "#e8eaf6"
+        }
+    ]
+}
+
+with gr.Blocks(title="Markdown Label Demo") as demo:
+    gr.Markdown("# MarkdownLabel Component Demo")
+    gr.Markdown("This demo showcases the MarkdownLabel component with **both term-based and position-based** interactive highlighting and detailed side panel.")
+    
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("## Full Featured Example")
+            gr.Markdown("Includes both term-based (e.g., 'artificial intelligence') and position-based highlighting (yellow highlights).")
+            MarkdownLabel(
+                value=example_data,
+                label="AI Research Report - Mixed Highlighting",
+                show_side_panel=True,
+                panel_width="350px"
+            )
+        
+        with gr.Column():
+            gr.Markdown("## Compact View")
+            gr.Markdown("Same content without the side panel for a cleaner interface.")
+            MarkdownLabel(
+                value=example_data, 
+                label="Compact View",
+                show_side_panel=False
+            )
+    
+    # Simple position-based example
+    simple_example = {
+        "markdown_content": "The quick **brown fox** jumps over the lazy dog. This is a simple example.",
+        "highlights": [
+            {
+                "position": [4, 9],  # "quick"
+                "title": "Quick (Position 4-9)",
+                "content": "Highlighted using exact character positions 4-9.",
+                "category": "Position Demo",
+                "color": "#ffeb3b"
+            },
+            {
+                "term": "brown fox",
+                "title": "Brown Fox (Term Match)",
+                "content": "Highlighted using term matching.",
+                "category": "Term Demo", 
+                "color": "#e3f2fd"
+            },
+            {
+                "position": [35, 43],  # "the lazy"
+                "title": "The Lazy (Position 35-43)", 
+                "content": "Another position-based highlight at characters 35-43.",
+                "category": "Position Demo",
+                "color": "#f3e5f5"
+            }
+        ]
+    }
+    
+    gr.Markdown("## Position vs Term Highlighting Comparison")
+    gr.Markdown("This example shows the difference between position-based (yellow/purple) and term-based (blue) highlighting.")
+    MarkdownLabel(
+        value=simple_example,
+        label="Simple Position vs Term Example",
+        show_side_panel=True,
+        panel_width="300px"
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `MarkdownLabel`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+dict | Callable | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Dictionary containing markdown_content and highlights array. If a function is provided, the function will be called each time the app loads to set the initial value of this component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_side_panel</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Whether to show the detailed information side panel.</td>
+</tr>
+
+<tr>
+<td align="left"><code>panel_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>"300px"</code></td>
+<td align="left">Width of the side panel (CSS value like "300px", "25%", etc.).</td>
+</tr>
+
+<tr>
+<td align="left"><code>edit_mode</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>"split"</code></td>
+<td align="left">Layout for editing mode - "split" (side-by-side), "tabs", or "overlay".</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_preview</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Whether to show live preview in edit mode.</td>
+</tr>
+
+<tr>
+<td align="left"><code>markdown_editor</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>"textarea"</code></td>
+<td align="left">Type of markdown editor - "textarea" or "codemirror" (future).</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | I18nData | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Timer | float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Component | Sequence[Component] | set[Component] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, ...] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.</td>
+</tr>
+
+<tr>
+<td align="left"><code>preserved_by_key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>"value"</code></td>
+<td align="left">A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, the component will be editable allowing users to modify markdown content.</td>
+</tr>
+
+<tr>
+<td align="left"><code>rtl</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, will display the text in right-to-left direction.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the MarkdownLabel changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `select` | Event listener for when the user selects or deselects the MarkdownLabel. Uses event data gradio.SelectData to carry `value` referring to the label of the MarkdownLabel, and `selected` to refer to state of the MarkdownLabel. See EventData documentation on how to use this event data |
+| `edit` | This listener is triggered when the user edits the MarkdownLabel (e.g. image) using the built-in editor. |
+| `submit` | This listener is triggered when the user presses the Enter key while the MarkdownLabel is focused. |
+| `clear` | This listener is triggered when the user clears the MarkdownLabel using the clear button for the component. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, passes the value as a dictionary with markdown_content and highlights.
+- **As input:** Should return, expects a dictionary with 'markdown_content' and 'highlights' keys.
+
+ ```python
+ def predict(
+     value: dict | None
+ ) -> dict | None:
+     return value
+ ```
+ 

src/backend/gradio_markdownlabel/__init__.py

@@ -0,0 +1,4 @@
+
+from .markdownlabel import MarkdownLabel
+
+__all__ = ['MarkdownLabel']

src/backend/gradio_markdownlabel/markdownlabel.py

@@ -0,0 +1,217 @@
+"""gr.HighlightedText() component."""
+
+from __future__ import annotations
+
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any, Union
+
+from gradio_client.documentation import document
+
+from gradio.components.base import Component
+from gradio.data_classes import GradioModel, GradioRootModel
+from gradio.events import Events
+from gradio.i18n import I18nData
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+
+class HighlightDefinition(GradioModel):
+    term: str = ""
+    position: list[int] = []  # [start, end] character positions
+    title: str = ""
+    content: str = ""
+    category: str = ""
+    color: str = ""
+
+
+class MarkdownData(GradioModel):
+    markdown_content: str
+    highlights: list[HighlightDefinition] = []
+
+
+class MarkdownLabelData(GradioRootModel):
+    root: MarkdownData
+
+
+class MarkdownLabel(Component):
+    """
+    Displays markdown-formatted text with interactive term highlighting and detailed side panel.
+    
+    This component allows for rich markdown content with clickable term highlights that display
+    detailed information in a side panel.
+    """
+
+    data_model = MarkdownLabelData
+    EVENTS = [Events.change, Events.select, Events.edit, Events.submit, Events.clear]
+
+    def __init__(
+        self,
+        value: dict | Callable | None = None,
+        *,
+        show_side_panel: bool = True,
+        panel_width: str = "300px",
+        edit_mode: str = "split",
+        show_preview: bool = True,
+        markdown_editor: str = "textarea",
+        label: str | I18nData | None = None,
+        every: Timer | float | None = None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        show_label: bool | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        key: int | str | tuple[int | str, ...] | None = None,
+        preserved_by_key: list[str] | str | None = "value",
+        interactive: bool | None = None,
+        rtl: bool = False,
+    ):
+        """
+        Parameters:
+            value: Dictionary containing markdown_content and highlights array. If a function is provided, the function will be called each time the app loads to set the initial value of this component.
+            show_side_panel: Whether to show the detailed information side panel.
+            panel_width: Width of the side panel (CSS value like "300px", "25%", etc.).
+            edit_mode: Layout for editing mode - "split" (side-by-side), "tabs", or "overlay".
+            show_preview: Whether to show live preview in edit mode.
+            markdown_editor: Type of markdown editor - "textarea" or "codemirror" (future).
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
+            show_label: if True, will display label.
+            container: If True, will place the component in a container - providing some extra padding around the border.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            visible: If False, component will be hidden.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            key: in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.
+            preserved_by_key: A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.
+            interactive: If True, the component will be editable allowing users to modify markdown content.
+            rtl: If True, will display the text in right-to-left direction.
+        """
+        self.show_side_panel = show_side_panel
+        self.panel_width = panel_width
+        self.edit_mode = edit_mode
+        self.show_preview = show_preview
+        self.markdown_editor = markdown_editor
+        self.rtl = rtl
+        super().__init__(
+            label=label,
+            every=every,
+            inputs=inputs,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            preserved_by_key=preserved_by_key,
+            value=value,
+            interactive=interactive,
+        )
+        self._value_description = "a dictionary with 'markdown_content' string and 'highlights' array containing term definitions."
+
+    def example_payload(self) -> Any:
+        return {
+            "markdown_content": "# Sample Document\n\nThis contains **artificial intelligence** and *machine learning* terms.",
+            "highlights": [
+                {
+                    "term": "artificial intelligence",
+                    "title": "Artificial Intelligence",
+                    "content": "AI refers to computer systems that can perform tasks typically requiring human intelligence.",
+                    "category": "technology",
+                    "color": "#e3f2fd"
+                },
+                {
+                    "position": [74, 90],
+                    "title": "Machine Learning",
+                    "content": "ML is a subset of AI that focuses on algorithms that learn from data.",
+                    "category": "technology",
+                    "color": "#f3e5f5"
+                }
+            ]
+        }
+
+    def example_value(self) -> Any:
+        return {
+            "markdown_content": "# Sample Document\n\nThis contains **artificial intelligence** and *machine learning* terms.",
+            "highlights": [
+                {
+                    "term": "artificial intelligence",
+                    "title": "Artificial Intelligence",
+                    "content": "AI refers to computer systems that can perform tasks typically requiring human intelligence.",
+                    "category": "technology",
+                    "color": "#e3f2fd"
+                },
+                {
+                    "position": [74, 90],
+                    "title": "Machine Learning",
+                    "content": "ML is a subset of AI that focuses on algorithms that learn from data.",
+                    "category": "technology",
+                    "color": "#f3e5f5"
+                }
+            ]
+        }
+
+    def preprocess(
+        self, payload: MarkdownLabelData | None
+    ) -> dict | None:
+        """
+        Parameters:
+            payload: An instance of MarkdownLabelData
+        Returns:
+            Passes the value as a dictionary with markdown_content and highlights.
+        """
+        if payload is None:
+            return None
+        return payload.root.model_dump()
+
+    def postprocess(
+        self, value: dict | None
+    ) -> MarkdownLabelData | None:
+        """
+        Parameters:
+            value: Expects a dictionary with 'markdown_content' and 'highlights' keys
+        Returns:
+            An instance of MarkdownLabelData
+        """
+        if value is None:
+            return None
+        
+        if not isinstance(value, dict):
+            raise ValueError(
+                "Expected a dictionary with keys 'markdown_content' and 'highlights' "
+                "for the value of the MarkdownLabel component."
+            )
+        
+        # Ensure required keys exist
+        markdown_content = value.get("markdown_content", "")
+        highlights = value.get("highlights", [])
+        
+        # Validate highlights structure
+        processed_highlights = []
+        for highlight in highlights:
+            if isinstance(highlight, dict):
+                processed_highlights.append(HighlightDefinition(
+                    term=highlight.get("term", ""),
+                    position=highlight.get("position", []),
+                    title=highlight.get("title", ""),
+                    content=highlight.get("content", ""),
+                    category=highlight.get("category", ""),
+                    color=highlight.get("color", "")
+                ))
+        
+        markdown_data = MarkdownData(
+            markdown_content=markdown_content,
+            highlights=processed_highlights
+        )
+        
+        return MarkdownLabelData(root=markdown_data)

src/backend/gradio_markdownlabel/templates/component/style.css

@@ -0,0 +1 @@
+.markdown-container.svelte-lwvfz.svelte-lwvfz{display:flex;height:100%;position:relative;transition:all .3s ease}.markdown-content.svelte-lwvfz.svelte-lwvfz{flex:1;padding:var(--block-padding);overflow-y:auto;transition:margin-right .3s ease}.with-panel.svelte-lwvfz .markdown-content.svelte-lwvfz{margin-right:var(--spacing-md)}.side-panel.svelte-lwvfz.svelte-lwvfz{position:fixed;top:0;right:0;height:100vh;background:var(--background-fill-primary);border-left:1px solid var(--border-color-primary);box-shadow:-2px 0 10px #0000001a;z-index:1000;overflow-y:auto;transform:translate(0);transition:transform .3s ease}.panel-header.svelte-lwvfz.svelte-lwvfz{display:flex;justify-content:space-between;align-items:center;padding:var(--size-4);border-bottom:1px solid var(--border-color-primary);background:var(--background-fill-secondary)}.panel-header.svelte-lwvfz h3.svelte-lwvfz{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--body-text-color)}.close-btn.svelte-lwvfz.svelte-lwvfz{background:none;border:none;font-size:var(--text-xl);cursor:pointer;color:var(--body-text-color);padding:var(--size-1);border-radius:var(--radius-sm);transition:background-color .2s}.close-btn.svelte-lwvfz.svelte-lwvfz:hover{background-color:var(--background-fill-primary)}.panel-content.svelte-lwvfz.svelte-lwvfz{padding:var(--size-4)}.category-badge.svelte-lwvfz.svelte-lwvfz{display:inline-block;padding:var(--size-1) var(--size-2);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-medium);margin-bottom:var(--size-3);color:var(--body-text-color)}.content-text.svelte-lwvfz.svelte-lwvfz{line-height:1.6;color:var(--body-text-color)}.markdown-content.svelte-lwvfz h1{font-size:var(--text-2xl);font-weight:var(--weight-bold);margin:var(--size-4) 0 var(--size-2) 0;color:var(--body-text-color)}.markdown-content.svelte-lwvfz h2{font-size:var(--text-xl);font-weight:var(--weight-semibold);margin:var(--size-3) 0 var(--size-2) 0;color:var(--body-text-color)}.markdown-content.svelte-lwvfz h3{font-size:var(--text-lg);font-weight:var(--weight-medium);margin:var(--size-3) 0 var(--size-1) 0;color:var(--body-text-color)}.markdown-content.svelte-lwvfz p{margin:var(--size-2) 0;line-height:1.6;color:var(--body-text-color)}.markdown-content.svelte-lwvfz strong{font-weight:var(--weight-bold)}.markdown-content.svelte-lwvfz em{font-style:italic}.markdown-content.svelte-lwvfz ul,.markdown-content.svelte-lwvfz ol{margin:var(--size-2) 0;padding-left:var(--size-4);color:var(--body-text-color)}.markdown-content.svelte-lwvfz li{margin:var(--size-1) 0}.markdown-content.svelte-lwvfz code{background-color:var(--background-fill-secondary);padding:var(--size-1);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-sm)}.markdown-content.svelte-lwvfz pre{background-color:var(--background-fill-secondary);padding:var(--size-3);border-radius:var(--radius-md);overflow-x:auto;margin:var(--size-2) 0}.markdown-content.svelte-lwvfz pre code{background:none;padding:0}.markdown-content.svelte-lwvfz .highlight-term:hover,.markdown-content.svelte-lwvfz .highlight-position:hover,.markdown-content.svelte-lwvfz .highlight-term:focus,.markdown-content.svelte-lwvfz .highlight-position:focus{opacity:.8;transform:scale(1.02);outline:2px solid var(--color-accent);outline-offset:1px}@media (max-width: 768px){.side-panel.svelte-lwvfz.svelte-lwvfz{width:100%!important}.with-panel.svelte-lwvfz .markdown-content.svelte-lwvfz{margin-right:0}}.markdown-container.svelte-4pjpqm.svelte-4pjpqm{display:flex;flex-direction:column;height:100%;position:relative;transition:all .3s ease}.edit-controls.svelte-4pjpqm.svelte-4pjpqm{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--background-fill-secondary);border-bottom:1px solid var(--border-color-primary);align-items:center}.edit-btn.svelte-4pjpqm.svelte-4pjpqm,.save-btn.svelte-4pjpqm.svelte-4pjpqm,.cancel-btn.svelte-4pjpqm.svelte-4pjpqm{padding:var(--size-1) var(--size-2);border:1px solid var(--border-color-primary);border-radius:var(--radius-sm);background:var(--background-fill-primary);cursor:pointer;font-size:var(--text-sm);transition:all .2s}.edit-btn.svelte-4pjpqm.svelte-4pjpqm:hover{background:var(--background-fill-secondary)}.save-btn.svelte-4pjpqm.svelte-4pjpqm{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.save-btn.svelte-4pjpqm.svelte-4pjpqm:hover{opacity:.9}.cancel-btn.svelte-4pjpqm.svelte-4pjpqm{background:var(--color-red-500);color:#fff;border-color:var(--color-red-500)}.cancel-btn.svelte-4pjpqm.svelte-4pjpqm:hover{opacity:.9}.tab-controls.svelte-4pjpqm.svelte-4pjpqm{display:flex;gap:2px;margin-left:auto}.tab-btn.svelte-4pjpqm.svelte-4pjpqm{padding:var(--size-1) var(--size-3);border:1px solid var(--border-color-primary);background:var(--background-fill-primary);cursor:pointer;font-size:var(--text-sm);border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:all .2s}.tab-btn.active.svelte-4pjpqm.svelte-4pjpqm{background:var(--background-fill-secondary);border-bottom-color:var(--background-fill-secondary)}.tab-btn.svelte-4pjpqm.svelte-4pjpqm:hover:not(.active){background:var(--background-fill-secondary);opacity:.7}.content-area.svelte-4pjpqm.svelte-4pjpqm{flex:1;display:flex;overflow:hidden}.content-area.split-mode.svelte-4pjpqm.svelte-4pjpqm{flex-direction:row}.editor-section.svelte-4pjpqm.svelte-4pjpqm,.preview-section.svelte-4pjpqm.svelte-4pjpqm{flex:1;display:flex;flex-direction:column;border-right:1px solid var(--border-color-primary)}.preview-section.svelte-4pjpqm.svelte-4pjpqm{border-right:none;border-left:1px solid var(--border-color-primary)}.editor-header.svelte-4pjpqm.svelte-4pjpqm,.preview-header.svelte-4pjpqm.svelte-4pjpqm{padding:var(--size-2);background:var(--background-fill-secondary);border-bottom:1px solid var(--border-color-primary)}.editor-header.svelte-4pjpqm h4.svelte-4pjpqm,.preview-header.svelte-4pjpqm h4.svelte-4pjpqm{margin:0;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--body-text-color)}.markdown-editor.svelte-4pjpqm.svelte-4pjpqm{flex:1;width:100%;padding:var(--size-3);border:none;resize:none;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.5;background:var(--background-fill-primary);color:var(--body-text-color);outline:none}.markdown-editor.fullwidth.svelte-4pjpqm.svelte-4pjpqm{height:400px}.tab-content.svelte-4pjpqm.svelte-4pjpqm{flex:1;display:flex;flex-direction:column}.markdown-content.svelte-4pjpqm.svelte-4pjpqm{flex:1;padding:var(--block-padding);overflow-y:auto;transition:margin-right .3s ease}.markdown-content.preview.svelte-4pjpqm.svelte-4pjpqm{background:var(--background-fill-primary)}.with-panel.svelte-4pjpqm .markdown-content.svelte-4pjpqm{margin-right:var(--spacing-md)}.side-panel.svelte-4pjpqm.svelte-4pjpqm{position:fixed;top:0;right:0;height:100vh;background:var(--background-fill-primary);border-left:1px solid var(--border-color-primary);box-shadow:-2px 0 10px #0000001a;z-index:1000;overflow-y:auto;transform:translate(0);transition:transform .3s ease}.panel-header.svelte-4pjpqm.svelte-4pjpqm{display:flex;justify-content:space-between;align-items:center;padding:var(--size-4);border-bottom:1px solid var(--border-color-primary);background:var(--background-fill-secondary)}.panel-header.svelte-4pjpqm h3.svelte-4pjpqm{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--body-text-color)}.close-btn.svelte-4pjpqm.svelte-4pjpqm{background:none;border:none;font-size:var(--text-xl);cursor:pointer;color:var(--body-text-color);padding:var(--size-1);border-radius:var(--radius-sm);transition:background-color .2s}.close-btn.svelte-4pjpqm.svelte-4pjpqm:hover{background-color:var(--background-fill-primary)}.panel-content.svelte-4pjpqm.svelte-4pjpqm{padding:var(--size-4)}.category-badge.svelte-4pjpqm.svelte-4pjpqm{display:inline-block;padding:var(--size-1) var(--size-2);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-medium);margin-bottom:var(--size-3);color:var(--body-text-color)}.content-text.svelte-4pjpqm.svelte-4pjpqm{line-height:1.6;color:var(--body-text-color)}.markdown-content.svelte-4pjpqm h1{font-size:var(--text-2xl);font-weight:var(--weight-bold);margin:var(--size-4) 0 var(--size-2) 0;color:var(--body-text-color)}.markdown-content.svelte-4pjpqm h2{font-size:var(--text-xl);font-weight:var(--weight-semibold);margin:var(--size-3) 0 var(--size-2) 0;color:var(--body-text-color)}.markdown-content.svelte-4pjpqm h3{font-size:var(--text-lg);font-weight:var(--weight-medium);margin:var(--size-3) 0 var(--size-1) 0;color:var(--body-text-color)}.markdown-content.svelte-4pjpqm p{margin:var(--size-2) 0;line-height:1.6;color:var(--body-text-color)}.markdown-content.svelte-4pjpqm strong{font-weight:var(--weight-bold)}.markdown-content.svelte-4pjpqm em{font-style:italic}.markdown-content.svelte-4pjpqm ul,.markdown-content.svelte-4pjpqm ol{margin:var(--size-2) 0;padding-left:var(--size-4);color:var(--body-text-color)}.markdown-content.svelte-4pjpqm li{margin:var(--size-1) 0}.markdown-content.svelte-4pjpqm code{background-color:var(--background-fill-secondary);padding:var(--size-1);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-sm)}.markdown-content.svelte-4pjpqm pre{background-color:var(--background-fill-secondary);padding:var(--size-3);border-radius:var(--radius-md);overflow-x:auto;margin:var(--size-2) 0}.markdown-content.svelte-4pjpqm pre code{background:none;padding:0}.markdown-content.svelte-4pjpqm .highlight-term:hover,.markdown-content.svelte-4pjpqm .highlight-position:hover,.markdown-content.svelte-4pjpqm .highlight-term:focus,.markdown-content.svelte-4pjpqm .highlight-position:focus{opacity:.8;transform:scale(1.02);outline:2px solid var(--color-accent);outline-offset:1px}@media (max-width: 768px){.side-panel.svelte-4pjpqm.svelte-4pjpqm{width:100%!important}.with-panel.svelte-4pjpqm .markdown-content.svelte-4pjpqm{margin-right:0}.content-area.split-mode.svelte-4pjpqm.svelte-4pjpqm{flex-direction:column}.editor-section.svelte-4pjpqm.svelte-4pjpqm,.preview-section.svelte-4pjpqm.svelte-4pjpqm{border-right:none;border-bottom:1px solid var(--border-color-primary)}.preview-section.svelte-4pjpqm.svelte-4pjpqm{border-left:none;border-top:1px solid var(--border-color-primary)}}.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-109se4{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-3);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-109se4{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-109se4{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-109se4:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-109se4{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-109se4 button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child),.icon-button-wrapper.svelte-109se4 button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-109se4 button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-109se4>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-1pgj5gs{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-700);background:var (--color-grey-50)}.dark .toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-1pgj5gs{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-title.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-title.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-title.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-title.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-title.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-close.svelte-1pgj5gs{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-close.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-close.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-close.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-close.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-close.success.svelte-1pgj5gs{color:var(--color-green-500)}.toast-text.svelte-1pgj5gs{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-text.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-text.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-text.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-text.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-text.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-details.svelte-1pgj5gs{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-1pgj5gs{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-icon.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-icon.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-icon.success.svelte-1pgj5gs{color:var(--color-green-500)}@keyframes svelte-1pgj5gs-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-1pgj5gs{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-1pgj5gs-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-1pgj5gs{background:var(--color-red-700)}.dark .timer.error.svelte-1pgj5gs{background:var(--color-red-500)}.timer.warning.svelte-1pgj5gs{background:var(--color-yellow-700)}.dark .timer.warning.svelte-1pgj5gs{background:var(--color-yellow-500)}.timer.info.svelte-1pgj5gs{background:var(--color-grey-700)}.dark .timer.info.svelte-1pgj5gs{background:var(--color-grey-500)}.timer.success.svelte-1pgj5gs{background:var(--color-green-700)}.dark .timer.success.svelte-1pgj5gs{background:var(--color-green-500)}.hidden.svelte-1pgj5gs{display:none}.toast-text.svelte-1pgj5gs a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}

src/demo/app.py

@@ -0,0 +1,166 @@
+
+import gradio as gr
+from gradio_markdownlabel import MarkdownLabel
+
+# Create a comprehensive example with rich markdown content and multiple highlights
+example_data = {
+    "markdown_content": """# AI and Machine Learning Research Report
+
+## Introduction
+
+This document explores the rapidly evolving field of **artificial intelligence** and its various applications in modern technology. The study focuses on *machine learning* techniques and their impact on different industries.
+
+## Key Technologies
+
+### Deep Learning
+*Deep learning* represents a subset of machine learning that uses **neural networks** with multiple layers. This approach has revolutionized areas such as:
+
+- Computer vision
+- Natural language processing
+- Speech recognition
+
+### Natural Language Processing
+**Natural language processing** (NLP) enables computers to understand and interpret human language. Key applications include:
+
+1. Text analysis
+2. Sentiment analysis
+3. Language translation
+
+## Applications
+
+The integration of **computer vision** in autonomous vehicles has transformed the automotive industry. Similarly, **reinforcement learning** has shown remarkable success in gaming and robotics.
+
+## Conclusion
+
+As **artificial intelligence** continues to advance, we expect to see more sophisticated applications of these technologies across various domains.
+""",
+    "highlights": [
+        {
+            "term": "artificial intelligence",
+            "title": "Artificial Intelligence (AI)",
+            "content": "**Artificial Intelligence** refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. AI systems can perform tasks that typically require human intelligence, such as:\n\n- Visual perception\n- Speech recognition\n- Decision-making\n- Language translation\n\nAI is broadly categorized into:\n1. **Narrow AI** - designed for specific tasks\n2. **General AI** - hypothetical AI with human-level cognitive abilities",
+            "category": "Core Technology",
+            "color": "#e3f2fd"
+        },
+        {
+            "term": "machine learning",
+            "title": "Machine Learning (ML)",
+            "content": "**Machine Learning** is a subset of AI that focuses on the development of algorithms that can learn and improve from experience without being explicitly programmed.\n\n### Types of Machine Learning:\n- **Supervised Learning**: Learning with labeled examples\n- **Unsupervised Learning**: Finding patterns in unlabeled data\n- **Reinforcement Learning**: Learning through interaction with environment\n\n### Applications:\n- Recommendation systems\n- Fraud detection\n- Medical diagnosis\n- Autonomous vehicles",
+            "category": "Core Technology", 
+            "color": "#f3e5f5"
+        },
+        {
+            "term": "deep learning",
+            "title": "Deep Learning",
+            "content": "**Deep Learning** is a specialized subset of machine learning that uses artificial neural networks with multiple layers (deep neural networks) to model and understand complex patterns.\n\n### Key Characteristics:\n- Multiple hidden layers\n- Automatic feature extraction\n- Hierarchical learning\n\n### Popular Architectures:\n- Convolutional Neural Networks (CNNs)\n- Recurrent Neural Networks (RNNs)\n- Transformers\n\n### Applications:\n- Image recognition\n- Natural language processing\n- Speech synthesis",
+            "category": "Advanced Technique",
+            "color": "#e8f5e8"
+        },
+        {
+            "term": "neural networks",
+            "title": "Neural Networks",
+            "content": "**Neural Networks** are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information.\n\n### Components:\n- **Input Layer**: Receives data\n- **Hidden Layers**: Process information\n- **Output Layer**: Produces results\n\n### Types:\n- Feedforward networks\n- Recurrent networks\n- Convolutional networks\n\nNeural networks learn by adjusting the weights of connections between neurons based on training data.",
+            "category": "Architecture",
+            "color": "#fff3e0"
+        },
+        {
+            "term": "natural language processing",
+            "title": "Natural Language Processing (NLP)",
+            "content": "**Natural Language Processing** combines computational linguistics with machine learning to enable computers to understand, interpret, and generate human language.\n\n### Core Tasks:\n- **Tokenization**: Breaking text into words/sentences\n- **Part-of-speech tagging**: Identifying grammatical roles\n- **Named entity recognition**: Identifying people, places, organizations\n- **Sentiment analysis**: Determining emotional tone\n\n### Modern Approaches:\n- Transformer models (BERT, GPT)\n- Attention mechanisms\n- Pre-trained language models",
+            "category": "Application Domain",
+            "color": "#fce4ec"
+        },
+        {
+            "position": [615, 632],
+            "title": "Computer Vision (Position-based)",
+            "content": "**Computer Vision** highlighted by character position rather than term matching. This demonstrates precise control over highlighting specific text segments.\n\n### Position-based Benefits:\n- Exact character-level precision\n- No ambiguity with similar terms\n- Works with any text, including special characters\n- Useful for pre-processed documents",
+            "category": "Position Highlight",
+            "color": "#ffeb3b"
+        },
+        {
+            "term": "computer vision",
+            "title": "Computer Vision", 
+            "content": "**Computer Vision** is a field of AI that enables machines to interpret and understand visual information from the world, mimicking human vision capabilities.\n\n### Key Tasks:\n- **Object Detection**: Locating objects in images\n- **Image Classification**: Categorizing images\n- **Semantic Segmentation**: Pixel-level understanding\n- **Face Recognition**: Identifying individuals\n\n### Applications:\n- Autonomous vehicles\n- Medical imaging\n- Security systems\n- Augmented reality",
+            "category": "Application Domain",
+            "color": "#e1f5fe"
+        },
+        {
+            "term": "reinforcement learning",
+            "title": "Reinforcement Learning (RL)",
+            "content": "**Reinforcement Learning** is a type of machine learning where an agent learns to make decisions by performing actions in an environment to maximize cumulative reward.\n\n### Key Concepts:\n- **Agent**: The learner/decision maker\n- **Environment**: The world the agent interacts with\n- **Actions**: Choices available to the agent\n- **Rewards**: Feedback from the environment\n- **Policy**: Strategy for choosing actions\n\n### Famous Applications:\n- Game playing (AlphaGo, OpenAI Five)\n- Robotics control\n- Trading algorithms\n- Resource allocation",
+            "category": "Learning Paradigm",
+            "color": "#f1f8e9"
+        },
+        {
+            "position": [169, 190],
+            "title": "Machine Learning (Position)",
+            "content": "This **machine learning** instance is highlighted using position-based highlighting at characters 169-190.\n\n### Position Highlighting Use Cases:\n- Academic paper annotations\n- Legal document markup\n- Code documentation\n- Precise text analysis\n\nPosition-based highlighting ensures exact text selection without ambiguity.",
+            "category": "Position Demo",
+            "color": "#e8eaf6"
+        }
+    ]
+}
+
+with gr.Blocks(title="Markdown Label Demo") as demo:
+    gr.Markdown("# MarkdownLabel Component Demo")
+    gr.Markdown("This demo showcases the MarkdownLabel component with **both term-based and position-based** interactive highlighting and detailed side panel.")
+    
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("## Full Featured Example")
+            gr.Markdown("Includes both term-based (e.g., 'artificial intelligence') and position-based highlighting (yellow highlights).")
+            MarkdownLabel(
+                value=example_data,
+                label="AI Research Report - Mixed Highlighting",
+                show_side_panel=True,
+                panel_width="350px"
+            )
+        
+        with gr.Column():
+            gr.Markdown("## Compact View")
+            gr.Markdown("Same content without the side panel for a cleaner interface.")
+            MarkdownLabel(
+                value=example_data, 
+                label="Compact View",
+                show_side_panel=False
+            )
+    
+    # Simple position-based example
+    simple_example = {
+        "markdown_content": "The quick **brown fox** jumps over the lazy dog. This is a simple example.",
+        "highlights": [
+            {
+                "position": [4, 9],  # "quick"
+                "title": "Quick (Position 4-9)",
+                "content": "Highlighted using exact character positions 4-9.",
+                "category": "Position Demo",
+                "color": "#ffeb3b"
+            },
+            {
+                "term": "brown fox",
+                "title": "Brown Fox (Term Match)",
+                "content": "Highlighted using term matching.",
+                "category": "Term Demo", 
+                "color": "#e3f2fd"
+            },
+            {
+                "position": [35, 43],  # "the lazy"
+                "title": "The Lazy (Position 35-43)", 
+                "content": "Another position-based highlight at characters 35-43.",
+                "category": "Position Demo",
+                "color": "#f3e5f5"
+            }
+        ]
+    }
+    
+    gr.Markdown("## Position vs Term Highlighting Comparison")
+    gr.Markdown("This example shows the difference between position-based (yellow/purple) and term-based (blue) highlighting.")
+    MarkdownLabel(
+        value=simple_example,
+        label="Simple Position vs Term Example",
+        show_side_panel=True,
+        panel_width="300px"
+    )
+
+if __name__ == "__main__":
+    demo.launch()

src/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

src/demo/editable_demo.py

@@ -0,0 +1,181 @@
+#!/usr/bin/env python3
+
+import gradio as gr
+from gradio_markdownlabel import MarkdownLabel
+
+# Sample data for the editable demo
+sample_data = {
+    "markdown_content": """# Editable Document Example
+
+## Introduction
+
+This document demonstrates the **editable functionality** of the MarkdownLabel component. You can click the "Edit" button to modify this content.
+
+## Features
+
+- **Real-time editing**: Changes appear live in preview mode
+- **Highlight preservation**: Existing highlights remain intact
+- **Multiple edit modes**: Split view, tabs, and overlay options
+- Position-based highlighting support
+
+## Try Editing
+
+1. Click the **Edit** button above
+2. Modify this text in the editor
+3. See live preview (in split mode)
+4. Save or cancel your changes
+
+Feel free to experiment with the content!
+""",
+    "highlights": [
+        {
+            "term": "editable functionality",
+            "title": "Editable Functionality",
+            "content": "This feature allows users to modify markdown content directly in the interface with real-time preview.",
+            "category": "feature",
+            "color": "#e3f2fd"
+        },
+        {
+            "position": [200, 220],  # "MarkdownLabel component"
+            "title": "MarkdownLabel Component",
+            "content": "The main component that renders markdown with interactive highlights and editing capabilities.",
+            "category": "component",
+            "color": "#f3e5f5"
+        },
+        {
+            "term": "Real-time editing",
+            "title": "Real-time Editing",
+            "content": "Changes in the editor are immediately reflected in the preview pane, providing instant feedback.",
+            "category": "feature",
+            "color": "#e8f5e8"
+        },
+        {
+            "position": [450, 470],  # "Split view, tabs, and"
+            "title": "Edit Modes",
+            "content": "Different layout options for the editing interface: split view shows editor and preview side-by-side, tabs separate them, and overlay mode provides full-screen editing.",
+            "category": "ui",
+            "color": "#fff3e0"
+        }
+    ]
+}
+
+def handle_content_change(value):
+    """Handle content changes (only on save)"""
+    print(f"Content saved: {len(value['markdown_content'])} characters")
+    return value
+
+def handle_edit_start(value):
+    """Handle when user starts editing"""
+    print("User started editing")
+
+def handle_save(value):
+    """Handle when user saves changes"""
+    print("Changes saved!")
+    gr.Info("Document saved successfully!")
+    return value
+
+def handle_cancel(value):
+    """Handle when user cancels editing"""
+    print("Edit cancelled")
+    gr.Info("Changes cancelled")
+    return gr.update()
+
+def load_sample_content():
+    """Load sample content"""
+    # Return data for both components (split and tabs editors)
+    return sample_data, sample_data
+
+
+with gr.Blocks(title="Editable MarkdownLabel Demo") as demo:
+    gr.Markdown("# Editable MarkdownLabel Component Demo")
+    gr.Markdown("This demo showcases the **interactive editing capabilities** of the MarkdownLabel component.")
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            gr.Markdown("## Split View Mode (Default)")
+            gr.Markdown("Editor and preview side-by-side when editing.")
+            
+            editor_split = MarkdownLabel(
+                value=sample_data,
+                interactive=True,
+                edit_mode="split",
+                show_preview=True,
+                label="Split View Editor",
+                show_side_panel=True,
+                panel_width="300px"
+            )
+            
+            # Event handlers for split view
+            # Note: Removed real-time change handler to prevent infinite loops
+            # Changes are now handled only on explicit save via submit event
+            editor_split.edit(handle_edit_start, inputs=[editor_split])
+            editor_split.submit(handle_save, inputs=[editor_split], outputs=[editor_split])
+            editor_split.clear(handle_cancel, inputs=[editor_split])
+            
+        with gr.Column(scale=1):
+            gr.Markdown("## Tab Mode")
+            gr.Markdown("Switch between edit and preview tabs.")
+            
+            editor_tabs = MarkdownLabel(
+                value=sample_data,
+                interactive=True,
+                edit_mode="tabs",
+                show_preview=True,
+                label="Tab View Editor",
+                show_side_panel=False
+            )
+            
+            # Event handlers for tab view
+            # Note: Only handling submit (save) events to prevent loops
+            editor_tabs.submit(handle_save, inputs=[editor_tabs], outputs=[editor_tabs])
+    
+    with gr.Row():
+        gr.Markdown("## Control Buttons")
+        
+    with gr.Row():
+        load_btn = gr.Button("📄 Load Sample", variant="secondary")
+        
+    # Button event handlers
+    load_btn.click(load_sample_content, outputs=[editor_split, editor_tabs])
+    
+    with gr.Row():
+        gr.Markdown("## Non-Interactive (Read-Only) Version")
+        
+    # Read-only version for comparison
+    readonly_viewer = MarkdownLabel(
+        value=sample_data,
+        interactive=False,  # Read-only mode
+        label="Read-Only Viewer",
+        show_side_panel=True,
+        panel_width="250px"
+    )
+    
+    gr.Markdown("""
+    ## How to Use
+    
+    1. **Start Editing**: Click the "✏️ Edit" button on any interactive component
+    2. **Edit Content**: Modify the markdown text in the editor
+    3. **Live Preview**: See changes in real-time (split mode) or switch to preview tab
+    4. **Save Changes**: Click "💾 Save" to confirm and apply your changes
+    5. **Cancel Changes**: Click "❌ Cancel" to discard changes and revert
+    6. **Interact with Highlights**: Click on highlighted terms to see details in the side panel
+    
+    ## Features Demonstrated
+    
+    - ✅ **Interactive editing** with explicit save/cancel workflow
+    - ✅ **Multiple edit modes**: Split view and tabs
+    - ✅ **Live preview** with real-time markdown rendering (visual only)
+    - ✅ **Highlight preservation** during editing
+    - ✅ **Manual save workflow** - changes are applied only when you save
+    - ✅ **Event handling** for edit, save (submit), and cancel events
+    - ✅ **Mixed highlighting** with both term-based and position-based highlights
+    
+    ## Important Notes
+    
+    - **Changes are NOT auto-saved** - you must click "💾 Save" to apply changes
+    - **Live preview** is for visual feedback only - actual content updates on save
+    - **Cancel** reverts all changes made since editing started
+    """)
+
+if __name__ == "__main__":
+    demo.launch()

src/demo/requirements.txt

@@ -0,0 +1 @@
+gradio_markdownlabel

src/demo/space.py

@@ -0,0 +1,288 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'MarkdownLabel': {'description': 'Displays markdown-formatted text with interactive term highlighting and detailed side panel.\n\nThis component allows for rich markdown content with clickable term highlights that display\ndetailed information in a side panel.', 'members': {'__init__': {'value': {'type': 'dict | Callable | None', 'default': 'None', 'description': 'Dictionary containing markdown_content and highlights array. If a function is provided, the function will be called each time the app loads to set the initial value of this component.'}, 'show_side_panel': {'type': 'bool', 'default': 'True', 'description': 'Whether to show the detailed information side panel.'}, 'panel_width': {'type': 'str', 'default': '"300px"', 'description': 'Width of the side panel (CSS value like "300px", "25%", etc.).'}, 'edit_mode': {'type': 'str', 'default': '"split"', 'description': 'Layout for editing mode - "split" (side-by-side), "tabs", or "overlay".'}, 'show_preview': {'type': 'bool', 'default': 'True', 'description': 'Whether to show live preview in edit mode.'}, 'markdown_editor': {'type': 'str', 'default': '"textarea"', 'description': 'Type of markdown editor - "textarea" or "codemirror" (future).'}, 'label': {'type': 'str | I18nData | None', 'default': 'None', 'description': 'the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': 'Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.'}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': 'Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'key': {'type': 'int | str | tuple[int | str, ...] | None', 'default': 'None', 'description': "in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render."}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': "A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor."}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If True, the component will be editable allowing users to modify markdown content.'}, 'rtl': {'type': 'bool', 'default': 'False', 'description': 'If True, will display the text in right-to-left direction.'}}, 'postprocess': {'value': {'type': 'dict | None', 'description': "Expects a dictionary with 'markdown_content' and 'highlights' keys"}}, 'preprocess': {'return': {'type': 'dict | None', 'description': 'Passes the value as a dictionary with markdown_content and highlights.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the MarkdownLabel changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the MarkdownLabel. Uses event data gradio.SelectData to carry `value` referring to the label of the MarkdownLabel, and `selected` to refer to state of the MarkdownLabel. See EventData documentation on how to use this event data'}, 'edit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user edits the MarkdownLabel (e.g. image) using the built-in editor.'}, 'submit': {'type': None, 'default': None, 'description': 'This listener is triggered when the user presses the Enter key while the MarkdownLabel is focused.'}, 'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the MarkdownLabel using the clear button for the component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'MarkdownLabel': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_markdownlabel`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Python library for easily interacting with trained machine learning models
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_markdownlabel
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_markdownlabel import MarkdownLabel
+
+# Create a comprehensive example with rich markdown content and multiple highlights
+example_data = {
+    "markdown_content": \"\"\"# AI and Machine Learning Research Report
+
+## Introduction
+
+This document explores the rapidly evolving field of **artificial intelligence** and its various applications in modern technology. The study focuses on *machine learning* techniques and their impact on different industries.
+
+## Key Technologies
+
+### Deep Learning
+*Deep learning* represents a subset of machine learning that uses **neural networks** with multiple layers. This approach has revolutionized areas such as:
+
+- Computer vision
+- Natural language processing
+- Speech recognition
+
+### Natural Language Processing
+**Natural language processing** (NLP) enables computers to understand and interpret human language. Key applications include:
+
+1. Text analysis
+2. Sentiment analysis
+3. Language translation
+
+## Applications
+
+The integration of **computer vision** in autonomous vehicles has transformed the automotive industry. Similarly, **reinforcement learning** has shown remarkable success in gaming and robotics.
+
+## Conclusion
+
+As **artificial intelligence** continues to advance, we expect to see more sophisticated applications of these technologies across various domains.
+\"\"\",
+    "highlights": [
+        {
+            "term": "artificial intelligence",
+            "title": "Artificial Intelligence (AI)",
+            "content": "**Artificial Intelligence** refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. AI systems can perform tasks that typically require human intelligence, such as:\n\n- Visual perception\n- Speech recognition\n- Decision-making\n- Language translation\n\nAI is broadly categorized into:\n1. **Narrow AI** - designed for specific tasks\n2. **General AI** - hypothetical AI with human-level cognitive abilities",
+            "category": "Core Technology",
+            "color": "#e3f2fd"
+        },
+        {
+            "term": "machine learning",
+            "title": "Machine Learning (ML)",
+            "content": "**Machine Learning** is a subset of AI that focuses on the development of algorithms that can learn and improve from experience without being explicitly programmed.\n\n### Types of Machine Learning:\n- **Supervised Learning**: Learning with labeled examples\n- **Unsupervised Learning**: Finding patterns in unlabeled data\n- **Reinforcement Learning**: Learning through interaction with environment\n\n### Applications:\n- Recommendation systems\n- Fraud detection\n- Medical diagnosis\n- Autonomous vehicles",
+            "category": "Core Technology", 
+            "color": "#f3e5f5"
+        },
+        {
+            "term": "deep learning",
+            "title": "Deep Learning",
+            "content": "**Deep Learning** is a specialized subset of machine learning that uses artificial neural networks with multiple layers (deep neural networks) to model and understand complex patterns.\n\n### Key Characteristics:\n- Multiple hidden layers\n- Automatic feature extraction\n- Hierarchical learning\n\n### Popular Architectures:\n- Convolutional Neural Networks (CNNs)\n- Recurrent Neural Networks (RNNs)\n- Transformers\n\n### Applications:\n- Image recognition\n- Natural language processing\n- Speech synthesis",
+            "category": "Advanced Technique",
+            "color": "#e8f5e8"
+        },
+        {
+            "term": "neural networks",
+            "title": "Neural Networks",
+            "content": "**Neural Networks** are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information.\n\n### Components:\n- **Input Layer**: Receives data\n- **Hidden Layers**: Process information\n- **Output Layer**: Produces results\n\n### Types:\n- Feedforward networks\n- Recurrent networks\n- Convolutional networks\n\nNeural networks learn by adjusting the weights of connections between neurons based on training data.",
+            "category": "Architecture",
+            "color": "#fff3e0"
+        },
+        {
+            "term": "natural language processing",
+            "title": "Natural Language Processing (NLP)",
+            "content": "**Natural Language Processing** combines computational linguistics with machine learning to enable computers to understand, interpret, and generate human language.\n\n### Core Tasks:\n- **Tokenization**: Breaking text into words/sentences\n- **Part-of-speech tagging**: Identifying grammatical roles\n- **Named entity recognition**: Identifying people, places, organizations\n- **Sentiment analysis**: Determining emotional tone\n\n### Modern Approaches:\n- Transformer models (BERT, GPT)\n- Attention mechanisms\n- Pre-trained language models",
+            "category": "Application Domain",
+            "color": "#fce4ec"
+        },
+        {
+            "position": [615, 632],
+            "title": "Computer Vision (Position-based)",
+            "content": "**Computer Vision** highlighted by character position rather than term matching. This demonstrates precise control over highlighting specific text segments.\n\n### Position-based Benefits:\n- Exact character-level precision\n- No ambiguity with similar terms\n- Works with any text, including special characters\n- Useful for pre-processed documents",
+            "category": "Position Highlight",
+            "color": "#ffeb3b"
+        },
+        {
+            "term": "computer vision",
+            "title": "Computer Vision", 
+            "content": "**Computer Vision** is a field of AI that enables machines to interpret and understand visual information from the world, mimicking human vision capabilities.\n\n### Key Tasks:\n- **Object Detection**: Locating objects in images\n- **Image Classification**: Categorizing images\n- **Semantic Segmentation**: Pixel-level understanding\n- **Face Recognition**: Identifying individuals\n\n### Applications:\n- Autonomous vehicles\n- Medical imaging\n- Security systems\n- Augmented reality",
+            "category": "Application Domain",
+            "color": "#e1f5fe"
+        },
+        {
+            "term": "reinforcement learning",
+            "title": "Reinforcement Learning (RL)",
+            "content": "**Reinforcement Learning** is a type of machine learning where an agent learns to make decisions by performing actions in an environment to maximize cumulative reward.\n\n### Key Concepts:\n- **Agent**: The learner/decision maker\n- **Environment**: The world the agent interacts with\n- **Actions**: Choices available to the agent\n- **Rewards**: Feedback from the environment\n- **Policy**: Strategy for choosing actions\n\n### Famous Applications:\n- Game playing (AlphaGo, OpenAI Five)\n- Robotics control\n- Trading algorithms\n- Resource allocation",
+            "category": "Learning Paradigm",
+            "color": "#f1f8e9"
+        },
+        {
+            "position": [169, 190],
+            "title": "Machine Learning (Position)",
+            "content": "This **machine learning** instance is highlighted using position-based highlighting at characters 169-190.\n\n### Position Highlighting Use Cases:\n- Academic paper annotations\n- Legal document markup\n- Code documentation\n- Precise text analysis\n\nPosition-based highlighting ensures exact text selection without ambiguity.",
+            "category": "Position Demo",
+            "color": "#e8eaf6"
+        }
+    ]
+}
+
+with gr.Blocks(title="Markdown Label Demo") as demo:
+    gr.Markdown("# MarkdownLabel Component Demo")
+    gr.Markdown("This demo showcases the MarkdownLabel component with **both term-based and position-based** interactive highlighting and detailed side panel.")
+    
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("## Full Featured Example")
+            gr.Markdown("Includes both term-based (e.g., 'artificial intelligence') and position-based highlighting (yellow highlights).")
+            MarkdownLabel(
+                value=example_data,
+                label="AI Research Report - Mixed Highlighting",
+                show_side_panel=True,
+                panel_width="350px"
+            )
+        
+        with gr.Column():
+            gr.Markdown("## Compact View")
+            gr.Markdown("Same content without the side panel for a cleaner interface.")
+            MarkdownLabel(
+                value=example_data, 
+                label="Compact View",
+                show_side_panel=False
+            )
+    
+    # Simple position-based example
+    simple_example = {
+        "markdown_content": "The quick **brown fox** jumps over the lazy dog. This is a simple example.",
+        "highlights": [
+            {
+                "position": [4, 9],  # "quick"
+                "title": "Quick (Position 4-9)",
+                "content": "Highlighted using exact character positions 4-9.",
+                "category": "Position Demo",
+                "color": "#ffeb3b"
+            },
+            {
+                "term": "brown fox",
+                "title": "Brown Fox (Term Match)",
+                "content": "Highlighted using term matching.",
+                "category": "Term Demo", 
+                "color": "#e3f2fd"
+            },
+            {
+                "position": [35, 43],  # "the lazy"
+                "title": "The Lazy (Position 35-43)", 
+                "content": "Another position-based highlight at characters 35-43.",
+                "category": "Position Demo",
+                "color": "#f3e5f5"
+            }
+        ]
+    }
+    
+    gr.Markdown("## Position vs Term Highlighting Comparison")
+    gr.Markdown("This example shows the difference between position-based (yellow/purple) and term-based (blue) highlighting.")
+    MarkdownLabel(
+        value=simple_example,
+        label="Simple Position vs Term Example",
+        show_side_panel=True,
+        panel_width="300px"
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `MarkdownLabel`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["MarkdownLabel"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["MarkdownLabel"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, passes the value as a dictionary with markdown_content and highlights.
+- **As output:** Should return, expects a dictionary with 'markdown_content' and 'highlights' keys.
+
+ ```python
+def predict(
+    value: dict | None
+) -> dict | None:
+    return value
+```
+""", elem_classes=["md-custom", "MarkdownLabel-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          MarkdownLabel: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/example_api_usage.py

@@ -0,0 +1,137 @@
+#!/usr/bin/env python3
+"""
+Example API Usage for Editable MarkdownLabel Component
+Shows the recommended event handling pattern to avoid infinite loops.
+"""
+
+import gradio as gr
+from gradio_markdownlabel import MarkdownLabel
+
+def main():
+    # Sample document with highlights
+    document = {
+        "markdown_content": """# Project Documentation
+
+## Overview
+
+This is an **editable document** that demonstrates the MarkdownLabel component's capabilities.
+
+## Features
+
+- Interactive editing with save/cancel workflow
+- Position-based and term-based highlighting  
+- Live preview during editing
+- Manual save to prevent accidental changes
+
+## Instructions
+
+Click "Edit" to modify this content, then "Save" to apply changes.
+""",
+        "highlights": [
+            {
+                "term": "editable document", 
+                "title": "Editable Document",
+                "content": "Documents that can be modified by users through the interface.",
+                "category": "feature",
+                "color": "#e3f2fd"
+            },
+            {
+                "position": [200, 220],  # "MarkdownLabel component"
+                "title": "MarkdownLabel Component",
+                "content": "The custom Gradio component for displaying markdown with interactive highlights.",
+                "category": "technical",
+                "color": "#f3e5f5"  
+            }
+        ]
+    }
+
+    # Event handlers - NO change handler to prevent loops
+    def on_edit_start(data):
+        """Called when user clicks Edit button"""
+        print(f"📝 User started editing document")
+        # Could initialize editing session, backup content, etc.
+        return gr.update()  # No changes to component
+    
+    def on_save(data):
+        """Called when user clicks Save button"""
+        print(f"💾 Document saved with {len(data['markdown_content'])} characters")
+        # Here you could:
+        # - Validate the content
+        # - Save to database  
+        # - Update version history
+        # - Send notifications
+        gr.Info("Document saved successfully!")
+        return data  # Return the saved data
+    
+    def on_cancel(data):
+        """Called when user clicks Cancel button"""
+        print(f"❌ Edit cancelled")
+        gr.Info("Changes discarded")
+        return gr.update()  # No changes needed
+
+    def on_highlight_select(selection_data):
+        """Called when user clicks a highlight"""
+        print(f"🎯 Highlight selected: {selection_data}")
+        return gr.update()
+
+    # Create the interface
+    with gr.Blocks(title="MarkdownLabel API Example") as demo:
+        gr.Markdown("# MarkdownLabel API Usage Example")
+        gr.Markdown("Demonstrates proper event handling without infinite loops.")
+        
+        # The component
+        editor = MarkdownLabel(
+            value=document,
+            interactive=True,           # Enable editing
+            edit_mode="split",          # Split view: editor + preview
+            show_preview=True,          # Show live preview
+            show_side_panel=True,       # Show highlight details
+            panel_width="350px",
+            label="Interactive Document Editor"
+        )
+        
+        # Event handlers - IMPORTANT: No .change() handler during editing!
+        editor.edit(
+            fn=on_edit_start,
+            inputs=[editor]
+            # No outputs = no component update
+        )
+        
+        editor.submit(  # This is the "Save" button
+            fn=on_save,
+            inputs=[editor],
+            outputs=[editor]  # Update component with saved data
+        )
+        
+        editor.clear(  # This is the "Cancel" button  
+            fn=on_cancel,
+            inputs=[editor]
+            # No outputs = revert handled internally
+        )
+        
+        editor.select(  # Highlight selection
+            fn=on_highlight_select,
+            inputs=[editor]
+        )
+        
+        # Status display
+        gr.Markdown("""
+        ### Event Flow:
+        1. **Edit**: User clicks edit → `on_edit_start()` called
+        2. **Type**: User types → Only visual preview updates (no events)
+        3. **Save**: User clicks save → `on_save()` called → Changes applied  
+        4. **Cancel**: User clicks cancel → `on_cancel()` called → Changes reverted
+        
+        ### Key Points:
+        - ❌ **DON'T** use `.change()` handlers during editing (causes loops)
+        - ✅ **DO** use `.submit()` for save actions 
+        - ✅ **DO** use `.clear()` for cancel actions
+        - ✅ **DO** use `.edit()` for edit start actions
+        - ✅ **DO** use `.select()` for highlight interactions
+        """)
+
+    return demo
+
+if __name__ == "__main__":
+    demo = main()
+    demo.launch()

src/frontend/Index.svelte

@@ -0,0 +1,127 @@
+<script context="module" lang="ts">
+	export { default as BaseMarkdownRenderer } from "./shared/MarkdownRenderer.svelte";
+	export { default as BaseEditableMarkdownRenderer } from "./shared/EditableMarkdownRenderer.svelte";
+</script>
+
+<script lang="ts">
+	import type { Gradio, SelectData, I18nFormatter } from "@gradio/utils";
+	import MarkdownRenderer from "./shared/MarkdownRenderer.svelte";
+	import EditableMarkdownRenderer from "./shared/EditableMarkdownRenderer.svelte";
+	import { Block, BlockLabel, Empty } from "@gradio/atoms";
+	import { TextHighlight } from "@gradio/icons";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+
+	export let gradio: Gradio<{
+		select: SelectData;
+		change: never;
+		edit: never;
+		submit: never;
+		clear: never;
+		clear_status: LoadingStatus;
+	}>;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: {
+		markdown_content: string;
+		highlights: Array<{
+			term?: string;
+			position?: number[];
+			title: string;
+			content: string;
+			category: string;
+			color: string;
+		}>;
+	} | null = null;
+	let old_value: typeof value;
+	export let show_side_panel: boolean = true;
+	export let panel_width: string = "300px";
+	export let edit_mode: string = "split";
+	export let show_preview: boolean = true;
+	export let markdown_editor: string = "textarea";
+	export let interactive: boolean = false;
+	export let label = gradio.i18n("markdown_label.markdown_label");
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let show_label = true;
+	export let rtl = false;
+
+	export let loading_status: LoadingStatus;
+
+	$: {
+		if (value !== old_value) {
+			old_value = value;
+			gradio.dispatch("change");
+		}
+	}
+</script>
+
+<Block
+	variant={"solid"}
+	test_id="markdown-label"
+	{visible}
+	{elem_id}
+	{elem_classes}
+	padding={false}
+	{container}
+	{scale}
+	{min_width}
+	{rtl}
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+	/>
+	{#if label && show_label}
+		<BlockLabel
+			Icon={TextHighlight}
+			{label}
+			float={false}
+			disable={container === false}
+			{show_label}
+			{rtl}
+		/>
+	{/if}
+
+	{#if value && value.markdown_content}
+		{#if interactive}
+			<EditableMarkdownRenderer
+				markdown_content={value.markdown_content}
+				highlights={value.highlights || []}
+				{show_side_panel}
+				{panel_width}
+				{edit_mode}
+				{show_preview}
+				{markdown_editor}
+				{interactive}
+				on:select={({ detail }) => gradio.dispatch("select", detail)}
+				on:change={({ detail }) => {
+					value = detail;
+					gradio.dispatch("change");
+				}}
+				on:edit={({ detail }) => gradio.dispatch("edit", detail)}
+				on:save={({ detail }) => {
+					value = detail;
+					gradio.dispatch("submit", detail);
+				}}
+				on:cancel={({ detail }) => gradio.dispatch("clear", detail)}
+			/>
+		{:else}
+			<MarkdownRenderer
+				markdown_content={value.markdown_content}
+				highlights={value.highlights || []}
+				{show_side_panel}
+				{panel_width}
+				on:select={({ detail }) => gradio.dispatch("select", detail)}
+			/>
+		{/if}
+	{:else}
+		<Empty>
+			<TextHighlight />
+		</Empty>
+	{/if}
+</Block>

src/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

src/frontend/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "gradio_markdownlabel",
+  "version": "0.9.7",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "dependencies": {
+    "@gradio/atoms": "0.16.3",
+    "@gradio/icons": "0.12.0",
+    "@gradio/statustracker": "0.10.14",
+    "@gradio/theme": "0.4.0",
+    "@gradio/utils": "0.10.2",
+    "marked": "^12.0.0"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.14.0"
+  },
+  "main": "./Index.svelte",
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/highlightedtext"
+  }
+}

src/frontend/shared/EditableMarkdownRenderer.svelte

@@ -0,0 +1,607 @@
+<script lang="ts">
+	import { marked } from 'marked';
+	import { createEventDispatcher } from 'svelte';
+	import type { SelectData } from '@gradio/utils';
+
+	export let markdown_content: string = '';
+	export let highlights: Array<{
+		term?: string;
+		position?: number[];
+		title: string;
+		content: string;
+		category: string;
+		color: string;
+	}> = [];
+	export let show_side_panel: boolean = true;
+	export let panel_width: string = '300px';
+	export let interactive: boolean = false;
+	export let edit_mode: string = 'split'; // 'split', 'tabs', 'overlay'
+	export let show_preview: boolean = true;
+	export const markdown_editor: string = 'textarea';
+
+	const dispatch = createEventDispatcher<{
+		select: SelectData;
+		change: { markdown_content: string; highlights: any[] };
+		edit: { markdown_content: string; highlights: any[] };
+		save: { markdown_content: string; highlights: any[] };
+		cancel: { markdown_content: string; highlights: any[] };
+	}>();
+
+	let selectedHighlight: typeof highlights[0] | null = null;
+	let processedHtml: string = '';
+	let isEditing: boolean = false;
+	let editingContent: string = '';
+	let originalContent: string = '';
+	let currentTab: 'edit' | 'preview' | 'highlights' = 'edit';
+
+	// Track original state for cancel functionality
+	$: {
+		if (!isEditing) {
+			originalContent = markdown_content;
+		}
+	}
+
+	// Process markdown and apply highlighting
+	$: {
+		const contentToRender = isEditing && edit_mode === 'split' && show_preview ? editingContent : markdown_content;
+		if (contentToRender) {
+			// First, parse the markdown to HTML
+			let html = marked(contentToRender);
+			
+			// Separate position-based and term-based highlights
+			const positionHighlights = highlights.filter(h => h.position && h.position.length === 2);
+			const termHighlights = highlights.filter(h => h.term && h.term.trim());
+			
+			// Apply term-based highlights to the HTML first
+			termHighlights.forEach(highlight => {
+				if (highlight.term && highlight.term.trim()) {
+					const index = highlights.indexOf(highlight);
+					const regex = new RegExp(`\\b${escapeRegex(highlight.term)}\\b`, 'gi');
+					html = html.replace(regex, (match) => {
+						const color = highlight.color || '#e3f2fd';
+						return `<span class="highlight-term" 
+									data-index="${index}" 
+									data-term="${highlight.term}"
+									style="background-color: ${color}; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.2s;"
+									role="button" 
+									tabindex="0" 
+									aria-label="Highlighted term: ${highlight.term}">
+								${match}
+							</span>`;
+					});
+				}
+			});
+			
+			// Apply position-based highlights to the HTML
+			// Convert position-based highlights to term-based for simplicity and reliability
+			positionHighlights.forEach(highlight => {
+				const [start, end] = highlight.position!;
+				if (start >= 0 && end <= contentToRender.length && start < end) {
+					const targetText = contentToRender.substring(start, end);
+					const color = highlight.color || '#e3f2fd';
+					const index = highlights.indexOf(highlight);
+					
+					// Escape the target text for regex and handle multiline/whitespace
+					const escapedText = escapeRegex(targetText).replace(/\s+/g, '\\s+');
+					
+					// Create a regex that only matches text content (not inside HTML tags)
+					const textRegex = new RegExp(`\\b${escapedText}\\b`, 'gi');
+					
+					// Apply the highlight - this will work like term-based highlighting
+					// but using the exact text from the position
+					html = html.replace(textRegex, (match) => {
+						return `<span class="highlight-position" 
+									data-index="${index}" 
+									data-text="${encodeURIComponent(targetText)}"
+									style="background-color: ${color}; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.2s;"
+									role="button" 
+									tabindex="0" 
+									aria-label="Highlighted text: ${targetText.replace(/"/g, '&quot;')}">
+								${match}
+							</span>`;
+					});
+				}
+			});
+			
+			processedHtml = html;
+		}
+	}
+
+	function escapeRegex(string: string): string {
+		return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+	}
+
+	function handleTermClick(event: Event) {
+		const target = event.target as HTMLElement;
+		if (target.classList.contains('highlight-term') || target.classList.contains('highlight-position')) {
+			const index = parseInt(target.dataset.index || '0');
+			const highlight = highlights[index];
+			if (highlight) {
+				selectedHighlight = highlight;
+				dispatch('select', {
+					index,
+					value: highlight
+				});
+			}
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		const target = event.target as HTMLElement;
+		if ((event.key === 'Enter' || event.key === ' ') && 
+			(target.classList.contains('highlight-term') || target.classList.contains('highlight-position'))) {
+			event.preventDefault();
+			handleTermClick(event);
+		}
+	}
+
+	function closeSidePanel() {
+		selectedHighlight = null;
+	}
+
+	function startEditing() {
+		isEditing = true;
+		editingContent = markdown_content;
+		originalContent = markdown_content;
+		dispatch('edit', { markdown_content, highlights });
+	}
+
+	function saveChanges() {
+		markdown_content = editingContent;
+		isEditing = false;
+		dispatch('save', { markdown_content, highlights });
+		// Only dispatch change event on explicit save
+		dispatch('change', { markdown_content, highlights });
+	}
+
+	function cancelEditing() {
+		editingContent = originalContent;
+		isEditing = false;
+		dispatch('cancel', { markdown_content: originalContent, highlights });
+	}
+
+	function handleTextareaInput(event: Event) {
+		const target = event.target as HTMLTextAreaElement;
+		editingContent = target.value;
+		// Don't dispatch change events in real-time to avoid loops
+		// Changes will be dispatched only on save
+	}
+
+	function setTab(tab: typeof currentTab) {
+		currentTab = tab;
+	}
+</script>
+
+<div class="markdown-container" class:editing={isEditing} class:with-panel={show_side_panel && selectedHighlight}>
+	<!-- Edit Mode Controls -->
+	{#if interactive && !isEditing}
+		<div class="edit-controls">
+			<button class="edit-btn" on:click={startEditing}>
+				✏️ Edit
+			</button>
+		</div>
+	{/if}
+
+	{#if isEditing}
+		<div class="edit-controls">
+			<button class="save-btn" on:click={saveChanges}>
+				💾 Save
+			</button>
+			<button class="cancel-btn" on:click={cancelEditing}>
+				❌ Cancel
+			</button>
+			
+			{#if edit_mode === 'tabs'}
+				<div class="tab-controls">
+					<button 
+						class="tab-btn" 
+						class:active={currentTab === 'edit'}
+						on:click={() => setTab('edit')}
+					>
+						Edit
+					</button>
+					<button 
+						class="tab-btn" 
+						class:active={currentTab === 'preview'}
+						on:click={() => setTab('preview')}
+					>
+						Preview
+					</button>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Content Area -->
+	<div class="content-area" class:split-mode={edit_mode === 'split' && isEditing}>
+		{#if isEditing}
+			{#if edit_mode === 'split'}
+				<!-- Split Mode: Editor and Preview Side by Side -->
+				<div class="editor-section">
+					<div class="editor-header">
+						<h4>Markdown Editor</h4>
+					</div>
+					<textarea
+						class="markdown-editor"
+						bind:value={editingContent}
+						on:input={handleTextareaInput}
+						placeholder="Enter your markdown content..."
+						spellcheck="false"
+					></textarea>
+				</div>
+				
+				{#if show_preview}
+					<div class="preview-section">
+						<div class="preview-header">
+							<h4>Live Preview</h4>
+						</div>
+						<div class="markdown-content preview" on:click={handleTermClick} on:keydown={handleKeydown} role="document" aria-label="Markdown preview with interactive highlights">
+							{@html processedHtml}
+						</div>
+					</div>
+				{/if}
+			{:else if edit_mode === 'tabs'}
+				<!-- Tab Mode: Switch between Edit and Preview -->
+				<div class="tab-content">
+					{#if currentTab === 'edit'}
+						<textarea
+							class="markdown-editor fullwidth"
+							bind:value={editingContent}
+							on:input={handleTextareaInput}
+							placeholder="Enter your markdown content..."
+							spellcheck="false"
+						></textarea>
+					{:else if currentTab === 'preview'}
+						<div class="markdown-content preview" on:click={handleTermClick} on:keydown={handleKeydown} role="document" aria-label="Markdown preview with interactive highlights">
+							{@html processedHtml}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		{:else}
+			<!-- View Mode: Regular markdown display -->
+			<div class="markdown-content" on:click={handleTermClick} on:keydown={handleKeydown} role="document" aria-label="Markdown content with interactive highlights">
+				{@html processedHtml}
+			</div>
+		{/if}
+	</div>
+	
+	<!-- Side Panel (same as before) -->
+	{#if show_side_panel && selectedHighlight}
+		<div class="side-panel" style="width: {panel_width}">
+			<div class="panel-header">
+				<h3>{selectedHighlight.title || selectedHighlight.term || 'Highlighted Text'}</h3>
+				<button class="close-btn" on:click={closeSidePanel}>×</button>
+			</div>
+			<div class="panel-content">
+				{#if selectedHighlight.category}
+					<div class="category-badge" style="background-color: {selectedHighlight.color || '#e3f2fd'}">
+						{selectedHighlight.category}
+					</div>
+				{/if}
+				<div class="content-text">
+					{@html marked(selectedHighlight.content || 'No additional information available.')}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.markdown-container {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		position: relative;
+		transition: all 0.3s ease;
+	}
+
+	.edit-controls {
+		display: flex;
+		gap: var(--spacing-sm);
+		padding: var(--spacing-sm);
+		background: var(--background-fill-secondary);
+		border-bottom: 1px solid var(--border-color-primary);
+		align-items: center;
+	}
+
+	.edit-btn, .save-btn, .cancel-btn {
+		padding: var(--size-1) var(--size-2);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		background: var(--background-fill-primary);
+		cursor: pointer;
+		font-size: var(--text-sm);
+		transition: all 0.2s;
+	}
+
+	.edit-btn:hover {
+		background: var(--background-fill-secondary);
+	}
+
+	.save-btn {
+		background: var(--color-accent);
+		color: white;
+		border-color: var(--color-accent);
+	}
+
+	.save-btn:hover {
+		opacity: 0.9;
+	}
+
+	.cancel-btn {
+		background: var(--color-red-500);
+		color: white;
+		border-color: var(--color-red-500);
+	}
+
+	.cancel-btn:hover {
+		opacity: 0.9;
+	}
+
+	.tab-controls {
+		display: flex;
+		gap: 2px;
+		margin-left: auto;
+	}
+
+	.tab-btn {
+		padding: var(--size-1) var(--size-3);
+		border: 1px solid var(--border-color-primary);
+		background: var(--background-fill-primary);
+		cursor: pointer;
+		font-size: var(--text-sm);
+		border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+		transition: all 0.2s;
+	}
+
+	.tab-btn.active {
+		background: var(--background-fill-secondary);
+		border-bottom-color: var(--background-fill-secondary);
+	}
+
+	.tab-btn:hover:not(.active) {
+		background: var(--background-fill-secondary);
+		opacity: 0.7;
+	}
+
+	.content-area {
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+	}
+
+	.content-area.split-mode {
+		flex-direction: row;
+	}
+
+	.editor-section, .preview-section {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		border-right: 1px solid var(--border-color-primary);
+	}
+
+	.preview-section {
+		border-right: none;
+		border-left: 1px solid var(--border-color-primary);
+	}
+
+	.editor-header, .preview-header {
+		padding: var(--size-2);
+		background: var(--background-fill-secondary);
+		border-bottom: 1px solid var(--border-color-primary);
+	}
+
+	.editor-header h4, .preview-header h4 {
+		margin: 0;
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold);
+		color: var(--body-text-color);
+	}
+
+	.markdown-editor {
+		flex: 1;
+		width: 100%;
+		padding: var(--size-3);
+		border: none;
+		resize: none;
+		font-family: var(--font-mono);
+		font-size: var(--text-sm);
+		line-height: 1.5;
+		background: var(--background-fill-primary);
+		color: var(--body-text-color);
+		outline: none;
+	}
+
+	.markdown-editor.fullwidth {
+		height: 400px;
+	}
+
+	.tab-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.markdown-content {
+		flex: 1;
+		padding: var(--block-padding);
+		overflow-y: auto;
+		transition: margin-right 0.3s ease;
+	}
+
+	.markdown-content.preview {
+		background: var(--background-fill-primary);
+	}
+
+	.with-panel .markdown-content {
+		margin-right: var(--spacing-md);
+	}
+
+	.side-panel {
+		position: fixed;
+		top: 0;
+		right: 0;
+		height: 100vh;
+		background: var(--background-fill-primary);
+		border-left: 1px solid var(--border-color-primary);
+		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+		z-index: 1000;
+		overflow-y: auto;
+		transform: translateX(0);
+		transition: transform 0.3s ease;
+	}
+
+	.panel-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--size-4);
+		border-bottom: 1px solid var(--border-color-primary);
+		background: var(--background-fill-secondary);
+	}
+
+	.panel-header h3 {
+		margin: 0;
+		font-size: var(--text-lg);
+		font-weight: var(--weight-semibold);
+		color: var(--body-text-color);
+	}
+
+	.close-btn {
+		background: none;
+		border: none;
+		font-size: var(--text-xl);
+		cursor: pointer;
+		color: var(--body-text-color);
+		padding: var(--size-1);
+		border-radius: var(--radius-sm);
+		transition: background-color 0.2s;
+	}
+
+	.close-btn:hover {
+		background-color: var(--background-fill-primary);
+	}
+
+	.panel-content {
+		padding: var(--size-4);
+	}
+
+	.category-badge {
+		display: inline-block;
+		padding: var(--size-1) var(--size-2);
+		border-radius: var(--radius-full);
+		font-size: var(--text-sm);
+		font-weight: var(--weight-medium);
+		margin-bottom: var(--size-3);
+		color: var(--body-text-color);
+	}
+
+	.content-text {
+		line-height: 1.6;
+		color: var(--body-text-color);
+	}
+
+	/* Markdown styling (same as before) */
+	.markdown-content :global(h1) {
+		font-size: var(--text-2xl);
+		font-weight: var(--weight-bold);
+		margin: var(--size-4) 0 var(--size-2) 0;
+		color: var(--body-text-color);
+	}
+
+	.markdown-content :global(h2) {
+		font-size: var(--text-xl);
+		font-weight: var(--weight-semibold);
+		margin: var(--size-3) 0 var(--size-2) 0;
+		color: var(--body-text-color);
+	}
+
+	.markdown-content :global(h3) {
+		font-size: var(--text-lg);
+		font-weight: var(--weight-medium);
+		margin: var(--size-3) 0 var(--size-1) 0;
+		color: var(--body-text-color);
+	}
+
+	.markdown-content :global(p) {
+		margin: var(--size-2) 0;
+		line-height: 1.6;
+		color: var(--body-text-color);
+	}
+
+	.markdown-content :global(strong) {
+		font-weight: var(--weight-bold);
+	}
+
+	.markdown-content :global(em) {
+		font-style: italic;
+	}
+
+	.markdown-content :global(ul), .markdown-content :global(ol) {
+		margin: var(--size-2) 0;
+		padding-left: var(--size-4);
+		color: var(--body-text-color);
+	}
+
+	.markdown-content :global(li) {
+		margin: var(--size-1) 0;
+	}
+
+	.markdown-content :global(code) {
+		background-color: var(--background-fill-secondary);
+		padding: var(--size-1);
+		border-radius: var(--radius-sm);
+		font-family: var(--font-mono);
+		font-size: var(--text-sm);
+	}
+
+	.markdown-content :global(pre) {
+		background-color: var(--background-fill-secondary);
+		padding: var(--size-3);
+		border-radius: var(--radius-md);
+		overflow-x: auto;
+		margin: var(--size-2) 0;
+	}
+
+	.markdown-content :global(pre code) {
+		background: none;
+		padding: 0;
+	}
+
+	.markdown-content :global(.highlight-term:hover),
+	.markdown-content :global(.highlight-position:hover),
+	.markdown-content :global(.highlight-term:focus),
+	.markdown-content :global(.highlight-position:focus) {
+		opacity: 0.8;
+		transform: scale(1.02);
+		outline: 2px solid var(--color-accent);
+		outline-offset: 1px;
+	}
+
+	/* Responsive design */
+	@media (max-width: 768px) {
+		.side-panel {
+			width: 100% !important;
+		}
+		
+		.with-panel .markdown-content {
+			margin-right: 0;
+		}
+
+		.content-area.split-mode {
+			flex-direction: column;
+		}
+
+		.editor-section, .preview-section {
+			border-right: none;
+			border-bottom: 1px solid var(--border-color-primary);
+		}
+
+		.preview-section {
+			border-left: none;
+			border-top: 1px solid var(--border-color-primary);
+		}
+	}
+</style>

src/frontend/shared/InteractiveHighlightedtext.svelte

@@ -0,0 +1,510 @@
+<script lang="ts">
+	const browser = typeof document !== "undefined";
+	import { get_next_color } from "@gradio/utils";
+	import type { SelectData } from "@gradio/utils";
+	import { createEventDispatcher, onMount } from "svelte";
+	import { correct_color_map, merge_elements } from "./utils";
+	import LabelInput from "./LabelInput.svelte";
+
+	export let value: {
+		token: string;
+		class_or_confidence: string | number | null;
+	}[] = [];
+	export let show_legend = false;
+	export let color_map: Record<string, string> = {};
+	export let selectable = false;
+
+	let activeElementIndex = -1;
+	let ctx: CanvasRenderingContext2D;
+	let _color_map: Record<string, { primary: string; secondary: string }> = {};
+	let active = "";
+	let selection: Selection | null;
+	let labelToEdit = -1;
+
+	onMount(() => {
+		const mouseUpHandler = (): void => {
+			selection = window.getSelection();
+			handleSelectionComplete();
+			window.removeEventListener("mouseup", mouseUpHandler);
+		};
+
+		window.addEventListener("mousedown", () => {
+			window.addEventListener("mouseup", mouseUpHandler);
+		});
+	});
+
+	async function handleTextSelected(
+		startIndex: number,
+		endIndex: number
+	): Promise<void> {
+		if (
+			selection?.toString() &&
+			activeElementIndex !== -1 &&
+			value[activeElementIndex].token.toString().includes(selection.toString())
+		) {
+			const tempFlag = Symbol();
+
+			const str = value[activeElementIndex].token;
+			const [before, selected, after] = [
+				str.substring(0, startIndex),
+				str.substring(startIndex, endIndex),
+				str.substring(endIndex)
+			];
+
+			let tempValue: {
+				token: string;
+				class_or_confidence: string | number | null;
+				flag?: symbol;
+			}[] = [
+				...value.slice(0, activeElementIndex),
+				{ token: before, class_or_confidence: null },
+				{
+					token: selected,
+					class_or_confidence: mode === "scores" ? 1 : "label",
+					flag: tempFlag
+				}, // add a temp flag to the new highlighted text element
+				{ token: after, class_or_confidence: null },
+				...value.slice(activeElementIndex + 1)
+			];
+
+			// store the index of the new highlighted text element and remove the flag
+			labelToEdit = tempValue.findIndex(({ flag }) => flag === tempFlag);
+			// tempValue[labelToEdit].pop();
+
+			// remove elements with empty labels
+			tempValue = tempValue.filter((item) => item.token.trim() !== "");
+			value = tempValue.map(({ flag, ...rest }) => rest);
+
+			handleValueChange();
+			document.getElementById(`label-input-${labelToEdit}`)?.focus();
+		}
+	}
+
+	const dispatch = createEventDispatcher<{
+		select: SelectData;
+		change: typeof value;
+		input: never;
+	}>();
+
+	function splitTextByNewline(text: string): string[] {
+		return text.split("\n");
+	}
+
+	function removeHighlightedText(index: number): void {
+		if (!value || index < 0 || index >= value.length) return;
+		value[index].class_or_confidence = null;
+		value = merge_elements(value, "equal");
+		handleValueChange();
+		window.getSelection()?.empty();
+	}
+
+	function handleValueChange(): void {
+		dispatch("change", value);
+		labelToEdit = -1;
+
+		// reset legend color maps
+		if (show_legend) {
+			color_map = {};
+			_color_map = {};
+		}
+	}
+
+	let mode: "categories" | "scores";
+
+	$: {
+		if (!color_map) {
+			color_map = {};
+		}
+		if (value.length > 0) {
+			for (let entry of value) {
+				if (entry.class_or_confidence !== null) {
+					if (typeof entry.class_or_confidence === "string") {
+						mode = "categories";
+						if (!(entry.class_or_confidence in color_map)) {
+							let color = get_next_color(Object.keys(color_map).length);
+							color_map[entry.class_or_confidence] = color;
+						}
+					} else {
+						mode = "scores";
+					}
+				}
+			}
+		}
+
+		correct_color_map(color_map, _color_map, browser, ctx);
+	}
+
+	function handle_mouseover(label: string): void {
+		active = label;
+	}
+	function handle_mouseout(): void {
+		active = "";
+	}
+
+	async function handleKeydownSelection(event: KeyboardEvent): Promise<void> {
+		selection = window.getSelection();
+
+		if (event.key === "Enter") {
+			handleSelectionComplete();
+		}
+	}
+
+	function handleSelectionComplete(): void {
+		if (selection && selection?.toString().trim() !== "") {
+			const textBeginningIndex = selection.getRangeAt(0).startOffset;
+			const textEndIndex = selection.getRangeAt(0).endOffset;
+			handleTextSelected(textBeginningIndex, textEndIndex);
+		}
+	}
+
+	function handleSelect(
+		i: number,
+		text: string,
+		class_or_confidence: string | number | null
+	): void {
+		dispatch("select", {
+			index: i,
+			value: [text, class_or_confidence]
+		});
+	}
+</script>
+
+<div class="container">
+	{#if mode === "categories"}
+		{#if show_legend}
+			<div
+				class="class_or_confidence-legend"
+				data-testid="highlighted-text:class_or_confidence-legend"
+			>
+				{#if _color_map}
+					{#each Object.entries(_color_map) as [class_or_confidence, color], i}
+						<div
+							role="button"
+							aria-roledescription="Categories of highlighted text. Hover to see text with this class_or_confidence highlighted."
+							tabindex="0"
+							on:mouseover={() => handle_mouseover(class_or_confidence)}
+							on:focus={() => handle_mouseover(class_or_confidence)}
+							on:mouseout={() => handle_mouseout()}
+							on:blur={() => handle_mouseout()}
+							class="class_or_confidence-label"
+							style={"background-color:" + color.secondary}
+						>
+							{class_or_confidence}
+						</div>
+					{/each}
+				{/if}
+			</div>
+		{/if}
+
+		<div class="textfield">
+			{#each value as { token, class_or_confidence }, i}
+				{#each splitTextByNewline(token) as line, j}
+					{#if line.trim() !== ""}
+						<span class="text-class_or_confidence-container">
+							<span
+								role="button"
+								tabindex="0"
+								class="textspan"
+								style:background-color={class_or_confidence === null ||
+								(active && active !== class_or_confidence)
+									? ""
+									: class_or_confidence && _color_map[class_or_confidence]
+										? _color_map[class_or_confidence].secondary
+										: ""}
+								class:no-cat={class_or_confidence === null ||
+									(active && active !== class_or_confidence)}
+								class:hl={class_or_confidence !== null}
+								class:selectable
+								on:click={() => {
+									if (class_or_confidence !== null) {
+										handleSelect(i, token, class_or_confidence);
+									}
+								}}
+								on:keydown={(e) => {
+									if (class_or_confidence !== null) {
+										labelToEdit = i;
+										handleSelect(i, token, class_or_confidence);
+									} else {
+										handleKeydownSelection(e);
+									}
+								}}
+								on:focus={() => (activeElementIndex = i)}
+								on:mouseover={() => (activeElementIndex = i)}
+							>
+								<span
+									class:no-label={class_or_confidence === null}
+									class="text"
+									role="button"
+									on:keydown={(e) => handleKeydownSelection(e)}
+									on:focus={() => (activeElementIndex = i)}
+									on:mouseover={() => (activeElementIndex = i)}
+									on:click={() => (labelToEdit = i)}
+									tabindex="0">{line}</span
+								>
+								{#if !show_legend && class_or_confidence !== null && labelToEdit !== i}
+									<span
+										id={`label-tag-${i}`}
+										class="label"
+										role="button"
+										tabindex="0"
+										style:background-color={class_or_confidence === null ||
+										(active && active !== class_or_confidence)
+											? ""
+											: _color_map[class_or_confidence].primary}
+										on:click={() => (labelToEdit = i)}
+										on:keydown={() => (labelToEdit = i)}
+									>
+										{class_or_confidence}
+									</span>
+								{/if}
+								{#if labelToEdit === i && class_or_confidence !== null}
+									&nbsp;
+									<LabelInput
+										bind:value
+										{labelToEdit}
+										category={class_or_confidence}
+										{active}
+										{_color_map}
+										indexOfLabel={i}
+										text={token}
+										{handleValueChange}
+									/>
+								{/if}
+							</span>
+							{#if class_or_confidence !== null}
+								<span
+									class="label-clear-button"
+									role="button"
+									aria-roledescription="Remove label from text"
+									tabindex="0"
+									on:click={() => removeHighlightedText(i)}
+									on:keydown={(event) => {
+										if (event.key === "Enter") {
+											removeHighlightedText(i);
+										}
+									}}
+									>×
+								</span>
+							{/if}
+						</span>
+					{/if}
+					{#if j < splitTextByNewline(token).length - 1}
+						<br />
+					{/if}
+				{/each}
+			{/each}
+		</div>
+	{:else}
+		{#if show_legend}
+			<div class="color-legend" data-testid="highlighted-text:color-legend">
+				<span>-1</span>
+				<span>0</span>
+				<span>+1</span>
+			</div>
+		{/if}
+
+		<div class="textfield" data-testid="highlighted-text:textfield">
+			{#each value as { token, class_or_confidence }, i}
+				{@const score =
+					typeof class_or_confidence === "string"
+						? parseInt(class_or_confidence)
+						: class_or_confidence}
+				<span class="score-text-container">
+					<span
+						class="textspan score-text"
+						role="button"
+						tabindex="0"
+						class:no-cat={class_or_confidence === null ||
+							(active && active !== class_or_confidence)}
+						class:hl={class_or_confidence !== null}
+						on:mouseover={() => (activeElementIndex = i)}
+						on:focus={() => (activeElementIndex = i)}
+						on:click={() => (labelToEdit = i)}
+						on:keydown={(e) => {
+							if (e.key === "Enter") {
+								labelToEdit = i;
+							}
+						}}
+						style={"background-color: rgba(" +
+							(score && score < 0
+								? "128, 90, 213," + -score
+								: "239, 68, 60," + score) +
+							")"}
+					>
+						<span class="text">{token}</span>
+						{#if class_or_confidence && labelToEdit === i}
+							<LabelInput
+								bind:value
+								{labelToEdit}
+								{_color_map}
+								category={class_or_confidence}
+								{active}
+								indexOfLabel={i}
+								text={token}
+								{handleValueChange}
+								isScoresMode
+							/>
+						{/if}
+					</span>
+					{#if class_or_confidence && activeElementIndex === i}
+						<span
+							class="label-clear-button"
+							role="button"
+							aria-roledescription="Remove label from text"
+							tabindex="0"
+							on:click={() => removeHighlightedText(i)}
+							on:keydown={(event) => {
+								if (event.key === "Enter") {
+									removeHighlightedText(i);
+								}
+							}}
+							>×
+						</span>
+					{/if}
+				</span>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.label-clear-button {
+		display: none;
+		border-radius: var(--radius-xs);
+		padding-top: 2.5px;
+		padding-right: var(--size-1);
+		padding-bottom: 3.5px;
+		padding-left: var(--size-1);
+		color: black;
+		background-color: var(--background-fill-secondary);
+		user-select: none;
+		position: relative;
+		left: -3px;
+		border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
+		color: var(--block-label-text-color);
+	}
+
+	.text-class_or_confidence-container:hover .label-clear-button,
+	.text-class_or_confidence-container:focus-within .label-clear-button,
+	.score-text-container:hover .label-clear-button,
+	.score-text-container:focus-within .label-clear-button {
+		display: inline;
+	}
+
+	.text-class_or_confidence-container:hover .textspan.hl,
+	.text-class_or_confidence-container:focus-within .textspan.hl,
+	.score-text:hover {
+		border-radius: var(--radius-xs) 0 0 var(--radius-xs);
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm);
+		padding: var(--block-padding);
+	}
+
+	.hl {
+		margin-left: var(--size-1);
+		transition: background-color 0.3s;
+		user-select: none;
+	}
+
+	.textspan:last-child > .label {
+		margin-right: 0;
+	}
+
+	.class_or_confidence-legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--spacing-sm);
+		color: black;
+	}
+
+	.class_or_confidence-label {
+		cursor: pointer;
+		border-radius: var(--radius-xs);
+		padding-right: var(--size-2);
+		padding-left: var(--size-2);
+		font-weight: var(--weight-semibold);
+	}
+
+	.color-legend {
+		display: flex;
+		justify-content: space-between;
+		border-radius: var(--radius-xs);
+		background: linear-gradient(
+			to right,
+			var(--color-purple),
+			rgba(255, 255, 255, 0),
+			var(--color-red)
+		);
+		padding: var(--size-1) var(--size-2);
+		font-weight: var(--weight-semibold);
+	}
+
+	.textfield {
+		box-sizing: border-box;
+		border-radius: var(--radius-xs);
+		background: var(--background-fill-primary);
+		background-color: transparent;
+		max-width: var(--size-full);
+		line-height: var(--scale-4);
+		word-break: break-all;
+	}
+
+	.textspan {
+		transition: 150ms;
+		border-radius: var(--radius-xs);
+		padding-top: 2.5px;
+		padding-right: var(--size-1);
+		padding-bottom: 3.5px;
+		padding-left: var(--size-1);
+		color: black;
+		cursor: text;
+	}
+
+	.label {
+		transition: 150ms;
+		margin-top: 1px;
+		border-radius: var(--radius-xs);
+		padding: 1px 5px;
+		color: var(--body-text-color);
+		color: white;
+		font-weight: var(--weight-bold);
+		font-size: var(--text-sm);
+		text-transform: uppercase;
+		user-select: none;
+	}
+
+	.text {
+		color: black;
+		white-space: pre-wrap;
+	}
+
+	.textspan.hl {
+		user-select: none;
+	}
+
+	.score-text-container {
+		margin-right: var(--size-1);
+	}
+
+	.score-text .text {
+		color: var(--body-text-color);
+	}
+
+	.no-cat {
+		color: var(--body-text-color);
+	}
+
+	.no-label {
+		color: var(--body-text-color);
+		user-select: text;
+	}
+
+	.selectable {
+		cursor: text;
+		user-select: text;
+	}
+</style>

src/frontend/shared/LabelInput.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	type HighlightedTextType = {
+		token: string;
+		class_or_confidence: string | number | null;
+	};
+
+	export let value: HighlightedTextType[];
+	export let category: string | number | null;
+	export let active: string;
+	export let labelToEdit: number;
+	export let indexOfLabel: number;
+	export let text: string;
+	export let handleValueChange: () => void;
+	export let isScoresMode = false;
+	export let _color_map: Record<string, { primary: string; secondary: string }>;
+
+	let _input_value = category;
+
+	function handleInput(e: Event): void {
+		let target = e.target as HTMLInputElement;
+		if (target) {
+			_input_value = target.value;
+		}
+	}
+
+	function updateLabelValue(
+		e: Event,
+		elementIndex: number,
+		text: string
+	): void {
+		let target = e.target as HTMLInputElement;
+		value = [
+			...value.slice(0, elementIndex),
+			{
+				token: text,
+				class_or_confidence:
+					target.value === ""
+						? null
+						: isScoresMode
+							? Number(target.value)
+							: target.value
+			},
+			...value.slice(elementIndex + 1)
+		];
+
+		handleValueChange();
+	}
+
+	function clearPlaceHolderOnFocus(e: FocusEvent): void {
+		let target = e.target as HTMLInputElement;
+		if (target && target.placeholder) target.placeholder = "";
+	}
+</script>
+
+<!-- svelte-ignore a11y-autofocus -->
+<!-- autofocus should not be disorienting for a screen reader users
+as input is only rendered once a new label is created -->
+{#if !isScoresMode}
+	<input
+		class="label-input"
+		autofocus
+		id={`label-input-${indexOfLabel}`}
+		type="text"
+		placeholder="label"
+		value={category}
+		style:background-color={category === null || (active && active !== category)
+			? ""
+			: _color_map[category].primary}
+		style:width={_input_value
+			? _input_value.toString()?.length + 4 + "ch"
+			: "8ch"}
+		on:input={handleInput}
+		on:blur={(e) => updateLabelValue(e, indexOfLabel, text)}
+		on:keydown={(e) => {
+			if (e.key === "Enter") {
+				updateLabelValue(e, indexOfLabel, text);
+				labelToEdit = -1;
+			}
+		}}
+		on:focus={clearPlaceHolderOnFocus}
+	/>
+{:else}
+	<input
+		class="label-input"
+		autofocus
+		type="number"
+		step="0.1"
+		style={"background-color: rgba(" +
+			(typeof category === "number" && category < 0
+				? "128, 90, 213," + -category
+				: "239, 68, 60," + category) +
+			")"}
+		value={category}
+		style:width="7ch"
+		on:input={handleInput}
+		on:blur={(e) => updateLabelValue(e, indexOfLabel, text)}
+		on:keydown={(e) => {
+			if (e.key === "Enter") {
+				updateLabelValue(e, indexOfLabel, text);
+				labelToEdit = -1;
+			}
+		}}
+	/>
+{/if}
+
+<style>
+	.label-input {
+		transition: 150ms;
+		margin-top: 1px;
+		margin-right: calc(var(--size-1));
+		border-radius: var(--radius-xs);
+		padding: 1px 5px;
+		color: black;
+		font-weight: var(--weight-bold);
+		font-size: var(--text-sm);
+		text-transform: uppercase;
+		line-height: 1;
+		color: white;
+	}
+
+	.label-input::placeholder {
+		color: rgba(1, 1, 1, 0.5);
+	}
+</style>

src/frontend/shared/MarkdownRenderer.svelte

@@ -0,0 +1,318 @@
+<script lang="ts">
+	import { marked } from 'marked';
+	import { createEventDispatcher } from 'svelte';
+	import type { SelectData } from '@gradio/utils';
+
+	export let markdown_content: string = '';
+	export let highlights: Array<{
+		term?: string;
+		position?: number[];
+		title: string;
+		content: string;
+		category: string;
+		color: string;
+	}> = [];
+	export let show_side_panel: boolean = true;
+	export let panel_width: string = '300px';
+
+	const dispatch = createEventDispatcher<{
+		select: SelectData;
+	}>();
+
+	let selectedHighlight: typeof highlights[0] | null = null;
+	let processedHtml: string = '';
+
+	// Process markdown and apply highlighting
+	$: {
+		if (markdown_content) {
+			// First, parse the markdown to HTML
+			let html = marked(markdown_content);
+			
+			// Separate position-based and term-based highlights
+			const positionHighlights = highlights.filter(h => h.position && h.position.length === 2);
+			const termHighlights = highlights.filter(h => h.term && h.term.trim());
+			
+			// Apply term-based highlights to the HTML first
+			termHighlights.forEach(highlight => {
+				if (highlight.term && highlight.term.trim()) {
+					const index = highlights.indexOf(highlight);
+					const regex = new RegExp(`\\b${escapeRegex(highlight.term)}\\b`, 'gi');
+					html = html.replace(regex, (match) => {
+						const color = highlight.color || '#e3f2fd';
+						return `<span class="highlight-term" 
+									data-index="${index}" 
+									data-term="${highlight.term}"
+									style="background-color: ${color}; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.2s;"
+									role="button" 
+									tabindex="0" 
+									aria-label="Highlighted term: ${highlight.term}">
+								${match}
+							</span>`;
+					});
+				}
+			});
+			
+			// Apply position-based highlights to the HTML
+			// Convert position-based highlights to term-based for simplicity and reliability
+			positionHighlights.forEach(highlight => {
+				const [start, end] = highlight.position!;
+				if (start >= 0 && end <= markdown_content.length && start < end) {
+					const targetText = markdown_content.substring(start, end);
+					const color = highlight.color || '#e3f2fd';
+					const index = highlights.indexOf(highlight);
+					
+					// Escape the target text for regex and handle multiline/whitespace
+					const escapedText = escapeRegex(targetText).replace(/\s+/g, '\\s+');
+					
+					// Create a regex that only matches text content (not inside HTML tags)
+					const textRegex = new RegExp(`\\b${escapedText}\\b`, 'gi');
+					
+					// Apply the highlight - this will work like term-based highlighting
+					// but using the exact text from the position
+					html = html.replace(textRegex, (match) => {
+						return `<span class="highlight-position" 
+									data-index="${index}" 
+									data-text="${encodeURIComponent(targetText)}"
+									style="background-color: ${color}; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.2s;"
+									role="button" 
+									tabindex="0" 
+									aria-label="Highlighted text: ${targetText.replace(/"/g, '&quot;')}">
+								${match}
+							</span>`;
+					});
+				}
+			});
+			
+			processedHtml = html;
+		}
+	}
+
+	function escapeRegex(string: string): string {
+		return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+	}
+
+	function handleTermClick(event: Event) {
+		const target = event.target as HTMLElement;
+		if (target.classList.contains('highlight-term') || target.classList.contains('highlight-position')) {
+			const index = parseInt(target.dataset.index || '0');
+			const highlight = highlights[index];
+			if (highlight) {
+				selectedHighlight = highlight;
+				dispatch('select', {
+					index,
+					value: highlight
+				});
+			}
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		const target = event.target as HTMLElement;
+		if ((event.key === 'Enter' || event.key === ' ') && 
+			(target.classList.contains('highlight-term') || target.classList.contains('highlight-position'))) {
+			event.preventDefault();
+			handleTermClick(event);
+		}
+	}
+
+	function closeSidePanel() {
+		selectedHighlight = null;
+	}
+</script>
+
+<div class="markdown-container" class:with-panel={show_side_panel && selectedHighlight}>
+	<div class="markdown-content" on:click={handleTermClick} on:keydown={handleKeydown} role="document" aria-label="Markdown content with interactive highlights">
+		{@html processedHtml}
+	</div>
+	
+	{#if show_side_panel && selectedHighlight}
+		<div class="side-panel" style="width: {panel_width}">
+			<div class="panel-header">
+				<h3>{selectedHighlight.title || selectedHighlight.term || 'Highlighted Text'}</h3>
+				<button class="close-btn" on:click={closeSidePanel}>×</button>
+			</div>
+			<div class="panel-content">
+				{#if selectedHighlight.category}
+					<div class="category-badge" style="background-color: {selectedHighlight.color || '#e3f2fd'}">
+						{selectedHighlight.category}
+					</div>
+				{/if}
+				<div class="content-text">
+					{@html marked(selectedHighlight.content || 'No additional information available.')}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.markdown-container {
+		display: flex;
+		height: 100%;
+		position: relative;
+		transition: all 0.3s ease;
+	}
+
+	.markdown-content {
+		flex: 1;
+		padding: var(--block-padding);
+		overflow-y: auto;
+		transition: margin-right 0.3s ease;
+	}
+
+	.with-panel .markdown-content {
+		margin-right: var(--spacing-md);
+	}
+
+	.side-panel {
+		position: fixed;
+		top: 0;
+		right: 0;
+		height: 100vh;
+		background: var(--background-fill-primary);
+		border-left: 1px solid var(--border-color-primary);
+		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+		z-index: 1000;
+		overflow-y: auto;
+		transform: translateX(0);
+		transition: transform 0.3s ease;
+	}
+
+	.panel-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--size-4);
+		border-bottom: 1px solid var(--border-color-primary);
+		background: var(--background-fill-secondary);
+	}
+
+	.panel-header h3 {
+		margin: 0;
+		font-size: var(--text-lg);
+		font-weight: var(--weight-semibold);
+		color: var(--body-text-color);
+	}
+
+	.close-btn {
+		background: none;
+		border: none;
+		font-size: var(--text-xl);
+		cursor: pointer;
+		color: var(--body-text-color);
+		padding: var(--size-1);
+		border-radius: var(--radius-sm);
+		transition: background-color 0.2s;
+	}
+
+	.close-btn:hover {
+		background-color: var(--background-fill-primary);
+	}
+
+	.panel-content {
+		padding: var(--size-4);
+	}
+
+	.category-badge {
+		display: inline-block;
+		padding: var(--size-1) var(--size-2);
+		border-radius: var(--radius-full);
+		font-size: var(--text-sm);
+		font-weight: var(--weight-medium);
+		margin-bottom: var(--size-3);
+		color: var(--body-text-color);
+	}
+
+	.content-text {
+		line-height: 1.6;
+		color: var(--body-text-color);
+	}
+
+	/* Markdown styling */
+	.markdown-content :global(h1) {
+		font-size: var(--text-2xl);
+		font-weight: var(--weight-bold);
+		margin: var(--size-4) 0 var(--size-2) 0;
+		color: var(--body-text-color);
+	}
+
+	.markdown-content :global(h2) {
+		font-size: var(--text-xl);
+		font-weight: var(--weight-semibold);
+		margin: var(--size-3) 0 var(--size-2) 0;
+		color: var(--body-text-color);
+	}
+
+	.markdown-content :global(h3) {
+		font-size: var(--text-lg);
+		font-weight: var(--weight-medium);
+		margin: var(--size-3) 0 var(--size-1) 0;
+		color: var(--body-text-color);
+	}
+
+	.markdown-content :global(p) {
+		margin: var(--size-2) 0;
+		line-height: 1.6;
+		color: var(--body-text-color);
+	}
+
+	.markdown-content :global(strong) {
+		font-weight: var(--weight-bold);
+	}
+
+	.markdown-content :global(em) {
+		font-style: italic;
+	}
+
+	.markdown-content :global(ul), .markdown-content :global(ol) {
+		margin: var(--size-2) 0;
+		padding-left: var(--size-4);
+		color: var(--body-text-color);
+	}
+
+	.markdown-content :global(li) {
+		margin: var(--size-1) 0;
+	}
+
+	.markdown-content :global(code) {
+		background-color: var(--background-fill-secondary);
+		padding: var(--size-1);
+		border-radius: var(--radius-sm);
+		font-family: var(--font-mono);
+		font-size: var(--text-sm);
+	}
+
+	.markdown-content :global(pre) {
+		background-color: var(--background-fill-secondary);
+		padding: var(--size-3);
+		border-radius: var(--radius-md);
+		overflow-x: auto;
+		margin: var(--size-2) 0;
+	}
+
+	.markdown-content :global(pre code) {
+		background: none;
+		padding: 0;
+	}
+
+	.markdown-content :global(.highlight-term:hover),
+	.markdown-content :global(.highlight-position:hover),
+	.markdown-content :global(.highlight-term:focus),
+	.markdown-content :global(.highlight-position:focus) {
+		opacity: 0.8;
+		transform: scale(1.02);
+		outline: 2px solid var(--color-accent);
+		outline-offset: 1px;
+	}
+
+	/* Responsive design */
+	@media (max-width: 768px) {
+		.side-panel {
+			width: 100% !important;
+		}
+		
+		.with-panel .markdown-content {
+			margin-right: 0;
+		}
+	}
+</style>

src/frontend/shared/StaticHighlightedtext.svelte

@@ -0,0 +1,276 @@
+<script lang="ts">
+	const browser = typeof document !== "undefined";
+	import { get_next_color } from "@gradio/utils";
+	import type { SelectData } from "@gradio/utils";
+	import { createEventDispatcher } from "svelte";
+	import { correct_color_map } from "./utils";
+
+	export let value: {
+		token: string;
+		class_or_confidence: string | number | null;
+	}[] = [];
+	export let show_legend = false;
+	export let show_inline_category = true;
+	export let color_map: Record<string, string> = {};
+	export let selectable = false;
+
+	let ctx: CanvasRenderingContext2D;
+	let _color_map: Record<string, { primary: string; secondary: string }> = {};
+	let active = "";
+
+	function splitTextByNewline(text: string): string[] {
+		return text.split("\n");
+	}
+
+	const dispatch = createEventDispatcher<{
+		select: SelectData;
+	}>();
+
+	let mode: "categories" | "scores";
+
+	$: {
+		if (!color_map) {
+			color_map = {};
+		}
+		if (value.length > 0) {
+			for (let entry of value) {
+				if (entry.class_or_confidence !== null) {
+					if (typeof entry.class_or_confidence === "string") {
+						mode = "categories";
+						if (!(entry.class_or_confidence in color_map)) {
+							let color = get_next_color(Object.keys(color_map).length);
+							color_map[entry.class_or_confidence] = color;
+						}
+					} else {
+						mode = "scores";
+					}
+				}
+			}
+		}
+
+		correct_color_map(color_map, _color_map, browser, ctx);
+	}
+
+	function handle_mouseover(label: string): void {
+		active = label;
+	}
+	function handle_mouseout(): void {
+		active = "";
+	}
+</script>
+
+<!-- 
+	@todo victor: try reimplementing without flex (negative margins on container to avoid left margin on linebreak). 
+	If not possible hijack the copy execution like this:
+
+<svelte:window
+	on:copy|preventDefault={() => {
+		const selection =.getSelection()?.toString();
+		console.log(selection?.replaceAll("\n", " "));
+	}}
+/>
+-->
+
+<div class="container">
+	{#if mode === "categories"}
+		{#if show_legend}
+			<div
+				class="category-legend"
+				data-testid="highlighted-text:category-legend"
+			>
+				{#each Object.entries(_color_map) as [category, color], i}
+					<!-- TODO: fix -->
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div
+						on:mouseover={() => handle_mouseover(category)}
+						on:focus={() => handle_mouseover(category)}
+						on:mouseout={() => handle_mouseout()}
+						on:blur={() => handle_mouseout()}
+						class="category-label"
+						style={"background-color:" + color.secondary}
+					>
+						{category}
+					</div>
+				{/each}
+			</div>
+		{/if}
+		<div class="textfield">
+			{#each value as v, i}
+				{#each splitTextByNewline(v.token) as line, j}
+					{#if line.trim() !== ""}
+						<!-- TODO: fix -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<!-- svelte-ignore a11y-click-events-have-key-events-->
+						<span
+							class="textspan"
+							style:background-color={v.class_or_confidence === null ||
+							(active && active !== v.class_or_confidence)
+								? ""
+								: _color_map[v.class_or_confidence].secondary}
+							class:no-cat={v.class_or_confidence === null ||
+								(active && active !== v.class_or_confidence)}
+							class:hl={v.class_or_confidence !== null}
+							class:selectable
+							on:click={() => {
+								dispatch("select", {
+									index: i,
+									value: [v.token, v.class_or_confidence]
+								});
+							}}
+						>
+							<span
+								class:no-label={v.class_or_confidence === null ||
+									!_color_map[v.class_or_confidence]}
+								class="text">{line}</span
+							>
+							{#if !show_legend && show_inline_category && v.class_or_confidence !== null}
+								&nbsp;
+								<span
+									class="label"
+									style:background-color={v.class_or_confidence === null ||
+									(active && active !== v.class_or_confidence)
+										? ""
+										: _color_map[v.class_or_confidence].primary}
+								>
+									{v.class_or_confidence}
+								</span>
+							{/if}
+						</span>
+					{/if}
+					{#if j < splitTextByNewline(v.token).length - 1}
+						<br />
+					{/if}
+				{/each}
+			{/each}
+		</div>
+	{:else}
+		{#if show_legend}
+			<div class="color-legend" data-testid="highlighted-text:color-legend">
+				<span>-1</span>
+				<span>0</span>
+				<span>+1</span>
+			</div>
+		{/if}
+		<div class="textfield" data-testid="highlighted-text:textfield">
+			{#each value as v}
+				{@const score =
+					typeof v.class_or_confidence === "string"
+						? parseInt(v.class_or_confidence)
+						: v.class_or_confidence}
+				<span
+					class="textspan score-text"
+					style={"background-color: rgba(" +
+						(score && score < 0
+							? "128, 90, 213," + -score
+							: "239, 68, 60," + score) +
+						")"}
+				>
+					<span class="text">{v.token}</span>
+				</span>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm);
+		padding: var(--block-padding);
+	}
+	.hl + .hl {
+		margin-left: var(--size-1);
+	}
+
+	.textspan:last-child > .label {
+		margin-right: 0;
+	}
+
+	.category-legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--spacing-sm);
+		color: black;
+	}
+
+	.category-label {
+		cursor: pointer;
+		border-radius: var(--radius-xs);
+		padding-right: var(--size-2);
+		padding-left: var(--size-2);
+		font-weight: var(--weight-semibold);
+	}
+
+	.color-legend {
+		display: flex;
+		justify-content: space-between;
+		border-radius: var(--radius-xs);
+		background: linear-gradient(
+			to right,
+			var(--color-purple),
+			rgba(255, 255, 255, 0),
+			var(--color-red)
+		);
+		padding: var(--size-1) var(--size-2);
+		font-weight: var(--weight-semibold);
+	}
+
+	.textfield {
+		box-sizing: border-box;
+		border-radius: var(--radius-xs);
+		background: var(--background-fill-primary);
+		background-color: transparent;
+		max-width: var(--size-full);
+		line-height: var(--scale-4);
+		word-break: break-all;
+	}
+
+	.textspan {
+		transition: 150ms;
+		border-radius: var(--radius-xs);
+		padding-top: 2.5px;
+		padding-right: var(--size-1);
+		padding-bottom: 3.5px;
+		padding-left: var(--size-1);
+		color: black;
+	}
+
+	.label {
+		transition: 150ms;
+		margin-top: 1px;
+		border-radius: var(--radius-xs);
+		padding: 1px 5px;
+		color: var(--body-text-color);
+		color: white;
+		font-weight: var(--weight-bold);
+		font-size: var(--text-sm);
+		text-transform: uppercase;
+	}
+
+	.text {
+		color: black;
+		white-space: pre-wrap;
+	}
+
+	.score-text .text {
+		color: var(--body-text-color);
+	}
+
+	.score-text {
+		margin-right: var(--size-1);
+		padding: var(--size-1);
+	}
+
+	.no-cat {
+		color: var(--body-text-color);
+	}
+
+	.no-label {
+		color: var(--body-text-color);
+	}
+
+	.selectable {
+		cursor: pointer;
+	}
+</style>

src/frontend/shared/utils.ts

@@ -0,0 +1,77 @@
+import { colors } from "@gradio/theme";
+
+export function name_to_rgba(
+	name: string,
+	a: number,
+	ctx: CanvasRenderingContext2D | null
+): string {
+	if (!ctx) {
+		var canvas = document.createElement("canvas");
+		ctx = canvas.getContext("2d")!;
+	}
+	ctx.fillStyle = name;
+	ctx.fillRect(0, 0, 1, 1);
+	const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+	ctx.clearRect(0, 0, 1, 1);
+	return `rgba(${r}, ${g}, ${b}, ${255 / a})`;
+}
+
+export function correct_color_map(
+	color_map: Record<string, string>,
+	_color_map: Record<string, { primary: string; secondary: string }>,
+	browser: any,
+	ctx: CanvasRenderingContext2D | null
+): void {
+	for (const col in color_map) {
+		const _c = color_map[col].trim();
+
+		if (_c in colors) {
+			_color_map[col] = colors[_c as keyof typeof colors];
+		} else {
+			_color_map[col] = {
+				primary: browser
+					? name_to_rgba(color_map[col], 1, ctx)
+					: color_map[col],
+				secondary: browser
+					? name_to_rgba(color_map[col], 0.5, ctx)
+					: color_map[col]
+			};
+		}
+	}
+}
+
+export function merge_elements(
+	value: { token: string; class_or_confidence: string | number | null }[],
+	mergeMode: "empty" | "equal"
+): { token: string; class_or_confidence: string | number | null }[] {
+	let result: typeof value = [];
+	let tempStr: string | null = null;
+	let tempVal: string | number | null = null;
+
+	for (const val of value) {
+		if (
+			(mergeMode === "empty" && val.class_or_confidence === null) ||
+			(mergeMode === "equal" && tempVal === val.class_or_confidence)
+		) {
+			tempStr = tempStr ? tempStr + val.token : val.token;
+		} else {
+			if (tempStr !== null) {
+				result.push({
+					token: tempStr,
+					class_or_confidence: tempVal
+				});
+			}
+			tempStr = val.token;
+			tempVal = val.class_or_confidence;
+		}
+	}
+
+	if (tempStr !== null) {
+		result.push({
+			token: tempStr,
+			class_or_confidence: tempVal
+		});
+	}
+
+	return result;
+}

src/frontend/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"verbatimModuleSyntax": true
+	},
+	"exclude": ["node_modules", "dist", "./gradio.config.js"]
+}

src/pyproject.toml

@@ -0,0 +1,53 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_markdownlabel"
+version = "0.0.1"
+description = "Python library for easily interacting with trained machine learning models"
+readme = "README.md"
+license = "Apache-2.0"
+requires-python = ">=3.8"
+authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+keywords = [
+  "gradio-custom-component",
+  "gradio-template-HighlightedText"
+]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Programming Language :: Python :: 3.12',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "your github repository"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_markdownlabel/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_markdownlabel"]