Upload folder using huggingface_hub

.gitignore

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

README.md

@@ -1,12 +1,318 @@
 ---
-title: Gradio Json Markdown
-emoji: 📉
-colorFrom: gray
-colorTo: pink
+tags: [gradio-custom-component, JSON]
+title: gradio_json_markdown
+short_description: JSON module with markdown support
+colorFrom: blue
+colorTo: yellow
 sdk: gradio
-sdk_version: 4.42.0
-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_json_markdown`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+JSON module with markdown support
+
+## Installation
+
+```bash
+pip install gradio_json_markdown
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_json_markdown import JsonMarkdown
+
+import json
+
+data = """
+{
+  "conversations": [
+    {
+      "value": "Modify the function to accept a list of integers and a positive integer `n` as input. The function should return the largest product that can be formed by selecting `n` integers from the list, where `n` is at least 2. For example, given the list `[-10,-20,5,6,7]` and `n=3`, the function should return `600` because the largest product is formed by selecting `-10`, `-20`, and `6` and multiplying them together. However, given `n=4`, the function should return `-1400` because the largest product is formed by selecting `-10`, `-20`, `5`, and `7`. Ensure the function handles cases where `n` is greater than the length of the input list by returning an appropriate message.",
+      "from": "User",
+      "canonical_form": ""
+    },
+    {
+      "value": "```python\\ndef largest_product_n(nums, n):\\n    if n > len(nums):\\n        return \\\"n must be less than or equal to the length of the input list\\\"\\n    nums.sort()  # sort the list\\n    # return the product of the last 'n' elements (largest 'n' numbers) or\\n    # the product of the first 'n' elements (smallest 'n' numbers), whichever is greater\\n    return max(nums[-n] * nums[-1] *\\n               reduce(lambda x, y: x * y, nums[-n:-1], 1),\\n               nums[0] * nums[n-1] *\\n               reduce(lambda x, y: x * y, nums[1:n], 1))\\n\\n# I used functool's reduce function, so import reduce from functools module\\nfrom functools import reduce\\n\\n# test cases\\nprint(largest_product_n([-10,-20,5,6,7], 3))  # returns 600\\nprint(largest_product_n([-10,-20,5,6,7], 4))  # returns -1400\\nprint(largest_product_n([1,2,3,4,5], 2))  # returns 20\\nprint(largest_product_n([1,2,3,4,5], 6))  # returns \\\"n must be less than or equal to the length of the input list\\\"\\n\\n```\\nPlease note, this code assumes that you always have at least `n` integers in the input list. If this is not the case, you should add a check for this in the function.\\n\\nThe function sorts the integers in the list and checks if the product of the largest `n` integers or the product of the smallest  integers (with one exception, explained below) is larger.\\n\\nFor the smallest integers, the function multiplies the smallest integer (nums[0]) with the \\\"n-1\\\"th integer (since the smallest integer is already included), and with the product of all integers between the 1st and the \\\"n-1\\\"th index.\\n\\nFor the largest integers, the function multiplies the largest integer (nums[-1]) with the \\\"n\\\"th integer (with the sign taken into account, since if there are negative integers we want to include as many as possible), and with the product of all integers between the \\\"n\\\"th and the second last index. If all integers are positive, the product of the largest integers is always larger or equal than the product of the smallest integers. If there is one negative integer, the product of the largest integers is always larger, since -1*(-1)*any_positive_number > any_postive_number.\\n\\nThis case is different if there is more than one negative number. If there is more than one negative number, the product of the smallest integers could be larger than the product of the largest integers, since (-n1)*(-n2) > p1*p2, where n1, n2 are negative integers and p1, p2 are positive integers. Since we take the maximum product, this case is also covered.\\n\\nIn Python, indices start from 0 and go up to n-1, so nums[-n] denotes the n-th integer from the right (last 'n' integers), and nums[-1] denotes the last integer, corresponding to the largest integer. Likewise, nums[1:n] denotes the integers between index 1 and index n-1. The reduce function is used to multiply all integers in a range. For example, reduce(lambda x, y: x * y, [1,2,3,4,5]) is equivalent to 1*2*3*4*5, and returns `120`.\\n\\nThe input `n` is the number of integers we want to select to form our product. For this problem, we assume `n >= 2`. This condition should be checked before calling the function. We also assume that the input is a list of integers. The case where `n > len(nums)` is handled by returning an error message. If `n == 1`, the function would still work, but it would not make much sense, since it would always return the largest integer in the input list.",
+      "from": "Assistant",
+      "canonical_form": ""
+    }
+  ],
+  "system": "",
+  "mask": "User",
+  "type": null,
+  "task_id": 1450799
+}
+"""
+nested_block = json.loads(data)
+
+example = JsonMarkdown().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        JsonMarkdown(label="Blank"),  # blank component
+        JsonMarkdown(value=example, label="Populated"),  # populated component
+
+    JsonMarkdown(value=nested_block, label="Nested JSON")
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `JsonMarkdown`
+
+### 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
+str | dict | list | Callable | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Default value as a valid JsonMarkdown `str` -- or a `list` or `dict` that can be serialized to a JsonMarkdown string. If callable, the function will be called whenever the app loads to set the initial value of the component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | 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 | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.</td>
+</tr>
+
+<tr>
+<td align="left"><code>open</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, all JsonMarkdown nodes will be expanded when rendered. By default, node levels deeper than 3 are collapsed.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_indices</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">Whether to show numerical indices when displaying the elements of a list within the JsonMarkdown object.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Height of the JsonMarkdown component in pixels if a number is passed, or in CSS units if a string is passed. Overflow will be scrollable. If None, the height will be automatically adjusted to fit the content.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the JsonMarkdown 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. |
+
+
+
+### 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 JsonMarkdown value as a `dict` or `list` depending on the value.
+- **As input:** Should return, expects a valid JsonMarkdown `str` -- or a `list` or `dict` that can be serialized to a JsonMarkdown string. The `list` or `dict` value can contain numpy arrays.
+
+ ```python
+ def predict(
+     value: dict | list | None
+ ) -> dict | list | str | None:
+     return value
+ ```
+ 

app.py

@@ -0,0 +1,39 @@
+
+import gradio as gr
+from gradio_json_markdown import JsonMarkdown
+
+import json
+
+data = """
+{
+  "conversations": [
+    {
+      "value": "Modify the function to accept a list of integers and a positive integer `n` as input. The function should return the largest product that can be formed by selecting `n` integers from the list, where `n` is at least 2. For example, given the list `[-10,-20,5,6,7]` and `n=3`, the function should return `600` because the largest product is formed by selecting `-10`, `-20`, and `6` and multiplying them together. However, given `n=4`, the function should return `-1400` because the largest product is formed by selecting `-10`, `-20`, `5`, and `7`. Ensure the function handles cases where `n` is greater than the length of the input list by returning an appropriate message.",
+      "from": "User",
+      "canonical_form": ""
+    },
+    {
+      "value": "```python\\ndef largest_product_n(nums, n):\\n    if n > len(nums):\\n        return \\\"n must be less than or equal to the length of the input list\\\"\\n    nums.sort()  # sort the list\\n    # return the product of the last 'n' elements (largest 'n' numbers) or\\n    # the product of the first 'n' elements (smallest 'n' numbers), whichever is greater\\n    return max(nums[-n] * nums[-1] *\\n               reduce(lambda x, y: x * y, nums[-n:-1], 1),\\n               nums[0] * nums[n-1] *\\n               reduce(lambda x, y: x * y, nums[1:n], 1))\\n\\n# I used functool's reduce function, so import reduce from functools module\\nfrom functools import reduce\\n\\n# test cases\\nprint(largest_product_n([-10,-20,5,6,7], 3))  # returns 600\\nprint(largest_product_n([-10,-20,5,6,7], 4))  # returns -1400\\nprint(largest_product_n([1,2,3,4,5], 2))  # returns 20\\nprint(largest_product_n([1,2,3,4,5], 6))  # returns \\\"n must be less than or equal to the length of the input list\\\"\\n\\n```\\nPlease note, this code assumes that you always have at least `n` integers in the input list. If this is not the case, you should add a check for this in the function.\\n\\nThe function sorts the integers in the list and checks if the product of the largest `n` integers or the product of the smallest  integers (with one exception, explained below) is larger.\\n\\nFor the smallest integers, the function multiplies the smallest integer (nums[0]) with the \\\"n-1\\\"th integer (since the smallest integer is already included), and with the product of all integers between the 1st and the \\\"n-1\\\"th index.\\n\\nFor the largest integers, the function multiplies the largest integer (nums[-1]) with the \\\"n\\\"th integer (with the sign taken into account, since if there are negative integers we want to include as many as possible), and with the product of all integers between the \\\"n\\\"th and the second last index. If all integers are positive, the product of the largest integers is always larger or equal than the product of the smallest integers. If there is one negative integer, the product of the largest integers is always larger, since -1*(-1)*any_positive_number > any_postive_number.\\n\\nThis case is different if there is more than one negative number. If there is more than one negative number, the product of the smallest integers could be larger than the product of the largest integers, since (-n1)*(-n2) > p1*p2, where n1, n2 are negative integers and p1, p2 are positive integers. Since we take the maximum product, this case is also covered.\\n\\nIn Python, indices start from 0 and go up to n-1, so nums[-n] denotes the n-th integer from the right (last 'n' integers), and nums[-1] denotes the last integer, corresponding to the largest integer. Likewise, nums[1:n] denotes the integers between index 1 and index n-1. The reduce function is used to multiply all integers in a range. For example, reduce(lambda x, y: x * y, [1,2,3,4,5]) is equivalent to 1*2*3*4*5, and returns `120`.\\n\\nThe input `n` is the number of integers we want to select to form our product. For this problem, we assume `n >= 2`. This condition should be checked before calling the function. We also assume that the input is a list of integers. The case where `n > len(nums)` is handled by returning an error message. If `n == 1`, the function would still work, but it would not make much sense, since it would always return the largest integer in the input list.",
+      "from": "Assistant",
+      "canonical_form": ""
+    }
+  ],
+  "system": "",
+  "mask": "User",
+  "type": null,
+  "task_id": 1450799
+}
+"""
+nested_block = json.loads(data)
+
+example = JsonMarkdown().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        JsonMarkdown(label="Blank"),  # blank component
+        JsonMarkdown(value=example, label="Populated"),  # populated component
+
+    JsonMarkdown(value=nested_block, label="Nested JSON")
+
+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;
+}

requirements.txt

@@ -0,0 +1 @@
+gradio_json_markdown

space.py

@@ -0,0 +1,161 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'JsonMarkdown': {'description': 'Used to display arbitrary JsonMarkdown output prettily. As this component does not accept user input, it is rarely used as an input component.\n', 'members': {'__init__': {'value': {'type': 'str | dict | list | Callable | None', 'default': 'None', 'description': 'Default value as a valid JsonMarkdown `str` -- or a `list` or `dict` that can be serialized to a JsonMarkdown string. If callable, the function will be called whenever the app loads to set the initial value of the component.'}, 'label': {'type': 'str | 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 | None', 'default': 'None', 'description': 'if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.'}, 'open': {'type': 'bool', 'default': 'False', 'description': 'If True, all JsonMarkdown nodes will be expanded when rendered. By default, node levels deeper than 3 are collapsed.'}, 'show_indices': {'type': 'bool', 'default': 'False', 'description': 'Whether to show numerical indices when displaying the elements of a list within the JsonMarkdown object.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': 'Height of the JsonMarkdown component in pixels if a number is passed, or in CSS units if a string is passed. Overflow will be scrollable. If None, the height will be automatically adjusted to fit the content.'}}, 'postprocess': {'value': {'type': 'dict | list | str | None', 'description': 'Expects a valid JsonMarkdown `str` -- or a `list` or `dict` that can be serialized to a JsonMarkdown string. The `list` or `dict` value can contain numpy arrays.'}}, 'preprocess': {'return': {'type': 'dict | list | None', 'description': 'Passes the JsonMarkdown value as a `dict` or `list` depending on the value.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the JsonMarkdown 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.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'JsonMarkdown': []}}}
+
+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_json_markdown`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+JSON module with markdown support
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_json_markdown
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_json_markdown import JsonMarkdown
+
+import json
+
+data = \"\"\"
+{
+  "conversations": [
+    {
+      "value": "Modify the function to accept a list of integers and a positive integer `n` as input. The function should return the largest product that can be formed by selecting `n` integers from the list, where `n` is at least 2. For example, given the list `[-10,-20,5,6,7]` and `n=3`, the function should return `600` because the largest product is formed by selecting `-10`, `-20`, and `6` and multiplying them together. However, given `n=4`, the function should return `-1400` because the largest product is formed by selecting `-10`, `-20`, `5`, and `7`. Ensure the function handles cases where `n` is greater than the length of the input list by returning an appropriate message.",
+      "from": "User",
+      "canonical_form": ""
+    },
+    {
+      "value": "```python\\ndef largest_product_n(nums, n):\\n    if n > len(nums):\\n        return \\\"n must be less than or equal to the length of the input list\\\"\\n    nums.sort()  # sort the list\\n    # return the product of the last 'n' elements (largest 'n' numbers) or\\n    # the product of the first 'n' elements (smallest 'n' numbers), whichever is greater\\n    return max(nums[-n] * nums[-1] *\\n               reduce(lambda x, y: x * y, nums[-n:-1], 1),\\n               nums[0] * nums[n-1] *\\n               reduce(lambda x, y: x * y, nums[1:n], 1))\\n\\n# I used functool's reduce function, so import reduce from functools module\\nfrom functools import reduce\\n\\n# test cases\\nprint(largest_product_n([-10,-20,5,6,7], 3))  # returns 600\\nprint(largest_product_n([-10,-20,5,6,7], 4))  # returns -1400\\nprint(largest_product_n([1,2,3,4,5], 2))  # returns 20\\nprint(largest_product_n([1,2,3,4,5], 6))  # returns \\\"n must be less than or equal to the length of the input list\\\"\\n\\n```\\nPlease note, this code assumes that you always have at least `n` integers in the input list. If this is not the case, you should add a check for this in the function.\\n\\nThe function sorts the integers in the list and checks if the product of the largest `n` integers or the product of the smallest  integers (with one exception, explained below) is larger.\\n\\nFor the smallest integers, the function multiplies the smallest integer (nums[0]) with the \\\"n-1\\\"th integer (since the smallest integer is already included), and with the product of all integers between the 1st and the \\\"n-1\\\"th index.\\n\\nFor the largest integers, the function multiplies the largest integer (nums[-1]) with the \\\"n\\\"th integer (with the sign taken into account, since if there are negative integers we want to include as many as possible), and with the product of all integers between the \\\"n\\\"th and the second last index. If all integers are positive, the product of the largest integers is always larger or equal than the product of the smallest integers. If there is one negative integer, the product of the largest integers is always larger, since -1*(-1)*any_positive_number > any_postive_number.\\n\\nThis case is different if there is more than one negative number. If there is more than one negative number, the product of the smallest integers could be larger than the product of the largest integers, since (-n1)*(-n2) > p1*p2, where n1, n2 are negative integers and p1, p2 are positive integers. Since we take the maximum product, this case is also covered.\\n\\nIn Python, indices start from 0 and go up to n-1, so nums[-n] denotes the n-th integer from the right (last 'n' integers), and nums[-1] denotes the last integer, corresponding to the largest integer. Likewise, nums[1:n] denotes the integers between index 1 and index n-1. The reduce function is used to multiply all integers in a range. For example, reduce(lambda x, y: x * y, [1,2,3,4,5]) is equivalent to 1*2*3*4*5, and returns `120`.\\n\\nThe input `n` is the number of integers we want to select to form our product. For this problem, we assume `n >= 2`. This condition should be checked before calling the function. We also assume that the input is a list of integers. The case where `n > len(nums)` is handled by returning an error message. If `n == 1`, the function would still work, but it would not make much sense, since it would always return the largest integer in the input list.",
+      "from": "Assistant",
+      "canonical_form": ""
+    }
+  ],
+  "system": "",
+  "mask": "User",
+  "type": null,
+  "task_id": 1450799
+}
+\"\"\"
+nested_block = json.loads(data)
+
+example = JsonMarkdown().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        JsonMarkdown(label="Blank"),  # blank component
+        JsonMarkdown(value=example, label="Populated"),  # populated component
+
+    JsonMarkdown(value=nested_block, label="Nested JSON")
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `JsonMarkdown`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["JsonMarkdown"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["JsonMarkdown"]["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 JsonMarkdown value as a `dict` or `list` depending on the value.
+- **As output:** Should return, expects a valid JsonMarkdown `str` -- or a `list` or `dict` that can be serialized to a JsonMarkdown string. The `list` or `dict` value can contain numpy arrays.
+
+ ```python
+def predict(
+    value: dict | list | None
+) -> dict | list | str | None:
+    return value
+```
+""", elem_classes=["md-custom", "JsonMarkdown-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          JsonMarkdown: [], };
+    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,12 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

src/.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

src/.idea/gradio-json-markdown.iml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/backend" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/jsonmarkdown/backend" isTestSource="false" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

src/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,14 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredPackages">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="backoff" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>

src/.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

src/.idea/misc.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Black">
+    <option name="sdkName" value="NeMoVLLM" />
+  </component>
+  <component name="ProjectRootManager" version="2" project-jdk-name="NeMoVLLM" project-jdk-type="Python SDK" />
+</project>

src/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/gradio-json-markdown.iml" filepath="$PROJECT_DIR$/.idea/gradio-json-markdown.iml" />
+    </modules>
+  </component>
+</project>

src/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

src/.idea/workspace.xml

@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="b53f7e4a-53f1-42ea-8826-4ef9a94fcbb4" name="Changes" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectColorInfo"><![CDATA[{
+  "associatedIndex": 4
+}]]></component>
+  <component name="ProjectId" id="2lGF9hSwZ5etpPURpEAwT5eDtlA" />
+  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+    <option name="showMembers" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "Python.app (1).executor": "Run",
+    "Python.app.executor": "Run",
+    "RunOnceActivity.ShowReadmeOnStart": "true"
+  }
+}]]></component>
+  <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$" />
+    </key>
+  </component>
+  <component name="RunManager" selected="Python.app (1)">
+    <configuration name="app (1)" type="PythonConfigurationType" factoryName="Python" temporary="true" nameIsGenerated="true">
+      <module name="gradio-json-markdown" />
+      <option name="ENV_FILES" value="" />
+      <option name="INTERPRETER_OPTIONS" value="" />
+      <option name="PARENT_ENVS" value="true" />
+      <envs>
+        <env name="PYTHONUNBUFFERED" value="1" />
+      </envs>
+      <option name="SDK_HOME" value="" />
+      <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$/demo" />
+      <option name="IS_MODULE_SDK" value="true" />
+      <option name="ADD_CONTENT_ROOTS" value="true" />
+      <option name="ADD_SOURCE_ROOTS" value="true" />
+      <option name="SCRIPT_NAME" value="$PROJECT_DIR$/demo/app.py" />
+      <option name="PARAMETERS" value="" />
+      <option name="SHOW_COMMAND_LINE" value="false" />
+      <option name="EMULATE_TERMINAL" value="false" />
+      <option name="MODULE_MODE" value="false" />
+      <option name="REDIRECT_INPUT" value="false" />
+      <option name="INPUT_FILE" value="" />
+      <method v="2" />
+    </configuration>
+    <configuration name="app" type="PythonConfigurationType" factoryName="Python" temporary="true" nameIsGenerated="true">
+      <module name="gradio-json-markdown" />
+      <option name="ENV_FILES" value="" />
+      <option name="INTERPRETER_OPTIONS" value="" />
+      <option name="PARENT_ENVS" value="true" />
+      <envs>
+        <env name="PYTHONUNBUFFERED" value="1" />
+      </envs>
+      <option name="SDK_HOME" value="" />
+      <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$/jsonmarkdown/demo" />
+      <option name="IS_MODULE_SDK" value="true" />
+      <option name="ADD_CONTENT_ROOTS" value="true" />
+      <option name="ADD_SOURCE_ROOTS" value="true" />
+      <option name="SCRIPT_NAME" value="$PROJECT_DIR$/jsonmarkdown/demo/app.py" />
+      <option name="PARAMETERS" value="" />
+      <option name="SHOW_COMMAND_LINE" value="false" />
+      <option name="EMULATE_TERMINAL" value="false" />
+      <option name="MODULE_MODE" value="false" />
+      <option name="REDIRECT_INPUT" value="false" />
+      <option name="INPUT_FILE" value="" />
+      <method v="2" />
+    </configuration>
+    <recent_temporary>
+      <list>
+        <item itemvalue="Python.app (1)" />
+        <item itemvalue="Python.app" />
+      </list>
+    </recent_temporary>
+  </component>
+  <component name="SharedIndexes">
+    <attachedChunks>
+      <set>
+        <option value="bundled-python-sdk-975db3bf15a3-31b6be0877a2-com.jetbrains.pycharm.community.sharedIndexes.bundled-PC-241.18034.82" />
+      </set>
+    </attachedChunks>
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="b53f7e4a-53f1-42ea-8826-4ef9a94fcbb4" name="Changes" comment="" />
+      <created>1724798356982</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1724798356982</updated>
+    </task>
+    <task id="LOCAL-00001" summary="Initial commit">
+      <option name="closed" value="true" />
+      <created>1724807493649</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1724807493650</updated>
+    </task>
+    <option name="localTasksCounter" value="2" />
+    <servers />
+  </component>
+  <component name="VcsManagerConfiguration">
+    <MESSAGE value="Initial commit" />
+    <option name="LAST_COMMIT_MESSAGE" value="Initial commit" />
+  </component>
+</project>

src/README.md

@@ -0,0 +1,318 @@
+---
+tags: [gradio-custom-component, JSON]
+title: gradio_json_markdown
+short_description: JSON module with markdown support
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_json_markdown`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+JSON module with markdown support
+
+## Installation
+
+```bash
+pip install gradio_json_markdown
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_json_markdown import JsonMarkdown
+
+import json
+
+data = """
+{
+  "conversations": [
+    {
+      "value": "Modify the function to accept a list of integers and a positive integer `n` as input. The function should return the largest product that can be formed by selecting `n` integers from the list, where `n` is at least 2. For example, given the list `[-10,-20,5,6,7]` and `n=3`, the function should return `600` because the largest product is formed by selecting `-10`, `-20`, and `6` and multiplying them together. However, given `n=4`, the function should return `-1400` because the largest product is formed by selecting `-10`, `-20`, `5`, and `7`. Ensure the function handles cases where `n` is greater than the length of the input list by returning an appropriate message.",
+      "from": "User",
+      "canonical_form": ""
+    },
+    {
+      "value": "```python\\ndef largest_product_n(nums, n):\\n    if n > len(nums):\\n        return \\\"n must be less than or equal to the length of the input list\\\"\\n    nums.sort()  # sort the list\\n    # return the product of the last 'n' elements (largest 'n' numbers) or\\n    # the product of the first 'n' elements (smallest 'n' numbers), whichever is greater\\n    return max(nums[-n] * nums[-1] *\\n               reduce(lambda x, y: x * y, nums[-n:-1], 1),\\n               nums[0] * nums[n-1] *\\n               reduce(lambda x, y: x * y, nums[1:n], 1))\\n\\n# I used functool's reduce function, so import reduce from functools module\\nfrom functools import reduce\\n\\n# test cases\\nprint(largest_product_n([-10,-20,5,6,7], 3))  # returns 600\\nprint(largest_product_n([-10,-20,5,6,7], 4))  # returns -1400\\nprint(largest_product_n([1,2,3,4,5], 2))  # returns 20\\nprint(largest_product_n([1,2,3,4,5], 6))  # returns \\\"n must be less than or equal to the length of the input list\\\"\\n\\n```\\nPlease note, this code assumes that you always have at least `n` integers in the input list. If this is not the case, you should add a check for this in the function.\\n\\nThe function sorts the integers in the list and checks if the product of the largest `n` integers or the product of the smallest  integers (with one exception, explained below) is larger.\\n\\nFor the smallest integers, the function multiplies the smallest integer (nums[0]) with the \\\"n-1\\\"th integer (since the smallest integer is already included), and with the product of all integers between the 1st and the \\\"n-1\\\"th index.\\n\\nFor the largest integers, the function multiplies the largest integer (nums[-1]) with the \\\"n\\\"th integer (with the sign taken into account, since if there are negative integers we want to include as many as possible), and with the product of all integers between the \\\"n\\\"th and the second last index. If all integers are positive, the product of the largest integers is always larger or equal than the product of the smallest integers. If there is one negative integer, the product of the largest integers is always larger, since -1*(-1)*any_positive_number > any_postive_number.\\n\\nThis case is different if there is more than one negative number. If there is more than one negative number, the product of the smallest integers could be larger than the product of the largest integers, since (-n1)*(-n2) > p1*p2, where n1, n2 are negative integers and p1, p2 are positive integers. Since we take the maximum product, this case is also covered.\\n\\nIn Python, indices start from 0 and go up to n-1, so nums[-n] denotes the n-th integer from the right (last 'n' integers), and nums[-1] denotes the last integer, corresponding to the largest integer. Likewise, nums[1:n] denotes the integers between index 1 and index n-1. The reduce function is used to multiply all integers in a range. For example, reduce(lambda x, y: x * y, [1,2,3,4,5]) is equivalent to 1*2*3*4*5, and returns `120`.\\n\\nThe input `n` is the number of integers we want to select to form our product. For this problem, we assume `n >= 2`. This condition should be checked before calling the function. We also assume that the input is a list of integers. The case where `n > len(nums)` is handled by returning an error message. If `n == 1`, the function would still work, but it would not make much sense, since it would always return the largest integer in the input list.",
+      "from": "Assistant",
+      "canonical_form": ""
+    }
+  ],
+  "system": "",
+  "mask": "User",
+  "type": null,
+  "task_id": 1450799
+}
+"""
+nested_block = json.loads(data)
+
+example = JsonMarkdown().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        JsonMarkdown(label="Blank"),  # blank component
+        JsonMarkdown(value=example, label="Populated"),  # populated component
+
+    JsonMarkdown(value=nested_block, label="Nested JSON")
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `JsonMarkdown`
+
+### 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
+str | dict | list | Callable | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Default value as a valid JsonMarkdown `str` -- or a `list` or `dict` that can be serialized to a JsonMarkdown string. If callable, the function will be called whenever the app loads to set the initial value of the component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | 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 | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.</td>
+</tr>
+
+<tr>
+<td align="left"><code>open</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, all JsonMarkdown nodes will be expanded when rendered. By default, node levels deeper than 3 are collapsed.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_indices</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">Whether to show numerical indices when displaying the elements of a list within the JsonMarkdown object.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Height of the JsonMarkdown component in pixels if a number is passed, or in CSS units if a string is passed. Overflow will be scrollable. If None, the height will be automatically adjusted to fit the content.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the JsonMarkdown 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. |
+
+
+
+### 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 JsonMarkdown value as a `dict` or `list` depending on the value.
+- **As input:** Should return, expects a valid JsonMarkdown `str` -- or a `list` or `dict` that can be serialized to a JsonMarkdown string. The `list` or `dict` value can contain numpy arrays.
+
+ ```python
+ def predict(
+     value: dict | list | None
+ ) -> dict | list | str | None:
+     return value
+ ```
+ 

src/backend/gradio_json_markdown/__init__.py

@@ -0,0 +1,4 @@
+
+from .jsonmarkdown import JsonMarkdown
+
+__all__ = ['JsonMarkdown']

src/backend/gradio_json_markdown/jsonmarkdown.py

@@ -0,0 +1,145 @@
+"""gr.JSON() component."""
+
+from __future__ import annotations
+
+import json
+from typing import (
+    TYPE_CHECKING,
+    Any,
+    Callable,
+    Sequence,
+)
+
+import orjson
+from gradio_client.documentation import document
+
+from gradio.components.base import Component
+from gradio.data_classes import JsonData
+from gradio.events import Events
+
+import mistletoe
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+
+class JsonMarkdown(Component):
+    """
+    Used to display arbitrary JsonMarkdown output prettily. As this component does not accept user input, it is rarely used as an input component.
+
+    Demos: zip_to_json, blocks_xray
+    """
+
+    EVENTS = [Events.change]
+
+    def __init__(
+        self,
+        value: str | dict | list | Callable | None = None,
+        *,
+        label: str | 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 | None = None,
+        open: bool = False,
+        show_indices: bool = False,
+        height: int | str | None = None,
+    ):
+        """
+        Parameters:
+            value: Default value as a valid JsonMarkdown `str` -- or a `list` or `dict` that can be serialized to a JsonMarkdown string. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            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: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
+            open: If True, all JsonMarkdown nodes will be expanded when rendered. By default, node levels deeper than 3 are collapsed.
+            show_indices: Whether to show numerical indices when displaying the elements of a list within the JsonMarkdown object.
+            height: Height of the JsonMarkdown component in pixels if a number is passed, or in CSS units if a string is passed. Overflow will be scrollable. If None, the height will be automatically adjusted to fit the content.
+        """
+        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,
+            value=value,
+        )
+
+        self.show_indices = show_indices
+        self.open = open
+        self.height = height
+
+    def preprocess(self, payload: dict | list | None) -> dict | list | None:
+        """
+        Parameters:
+            payload: JsonMarkdown value as a `dict` or `list`
+        Returns:
+            Passes the JsonMarkdown value as a `dict` or `list` depending on the value.
+        """
+        return payload
+
+    def postprocess(self, value: dict | list | str | None) -> JsonData | None:
+        """
+        Parameters:
+            value: Expects a valid JsonMarkdown `str` -- or a `list` or `dict` that can be serialized to a JsonMarkdown string. The `list` or `dict` value can contain numpy arrays.
+        Returns:
+            Returns the JsonMarkdown as a `list` or `dict`.
+        """
+        if value is None:
+            return None
+        if isinstance(value, str):
+            return JsonData(orjson.loads(value))
+        else:
+            # Use orjson to convert NumPy arrays and datetime objects to JsonMarkdown.
+            # This ensures a backward compatibility with the previous behavior.
+            # See https://github.com/gradio-app/gradio/pull/8041
+            return JsonData(
+                orjson.loads(
+                    orjson.dumps(
+                        value,
+                        option=orjson.OPT_SERIALIZE_NUMPY
+                        | orjson.OPT_PASSTHROUGH_DATETIME,
+                        default=str,
+                    )
+                )
+            )
+
+    def example_payload(self) -> Any:
+        return {"foo": "bar"}
+
+    def example_value(self) -> Any:
+        return {"foo": """Here is the hello world code:
+
+```python
+def hello_world():
+    print("Hello, World!")
+```
+"""}
+
+    def read_from_flag(self, payload: Any):
+        return json.loads(payload)
+
+    def api_info(self) -> dict[str, Any]:
+        return {"type": {}, "description": "any valid json"}

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

@@ -0,0 +1,10 @@
+.dropdown-arrow.svelte-145leq6{fill:currentColor}.block.svelte-nl1om8{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.border_focus.svelte-nl1om8{border-color:var(--color-accent)}.block.border_contrast.svelte-nl1om8{border-color:var(--body-text-color)}.padded.svelte-nl1om8{padding:var(--block-padding)}.hidden.svelte-nl1om8{display:none}.hide-container.svelte-nl1om8{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{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)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{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(--border-color-primary);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-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{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-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-1lrphxw{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-1lrphxw{opacity:.5;box-shadow:none}button[disabled].svelte-1lrphxw:hover{cursor:not-allowed}.padded.svelte-1lrphxw{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-1lrphxw:hover,button.highlight.svelte-1lrphxw{cursor:pointer;color:var(--color-accent)}.padded.svelte-1lrphxw:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-1lrphxw{padding:0 1px;font-size:10px}div.svelte-1lrphxw{padding:2px;display:flex;align-items:flex-end}.small.svelte-1lrphxw{width:14px;height:14px}.medium.svelte-1lrphxw{width:20px;height:20px}.large.svelte-1lrphxw{width:22px;height:22px}.pending.svelte-1lrphxw{animation:svelte-1lrphxw-flash .5s infinite}@keyframes svelte-1lrphxw-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-1lrphxw{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}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)}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#005cc5}.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-comment,.hljs-code,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}.json-node.svelte-1340jar{font-family:var(--font-mono);--text-color:#d18770;--key-color:var(--text-color);--string-color:#ce9178;--number-color:#719fad;--bracket-color:#5d8585;--square-bracket-color:#be6069;--punctuation-color:#8fbcbb;--line-number-color:#6a737d;--separator-color:var(--line-number-color)}.json-node.dark-mode.svelte-1340jar{--bracket-color:#7eb4b3;--number-color:#638d9a}.json-node.root.svelte-1340jar{position:relative;padding-left:var(--size-14)}.json-node.root.svelte-1340jar:before{content:"";position:absolute;top:0;bottom:0;left:var(--size-11);width:1px;background-color:var(--separator-color)}.line.svelte-1340jar{display:flex;align-items:flex-start;padding:0;margin:0;line-height:var(--line-md)}.line-number.svelte-1340jar{position:absolute;left:0;width:calc(var(--size-7));text-align:right;color:var(--line-number-color);-webkit-user-select:none;user-select:none;text-overflow:ellipsis;direction:rtl;overflow:hidden}.content.svelte-1340jar{flex:1;display:flex;align-items:center;padding-left:calc(var(--depth) * var(--size-2));flex-wrap:wrap}.children.svelte-1340jar{padding-left:var(--size-4)}.children.hidden.svelte-1340jar{display:none}.key.svelte-1340jar{color:var(--key-color)}.number.svelte-1340jar{color:var(--number-color)}.bool.svelte-1340jar,.null.svelte-1340jar{color:var(--text-color)}.value.svelte-1340jar{margin-left:var(--spacing-md)}.punctuation.svelte-1340jar{color:var(--punctuation-color)}.bracket.svelte-1340jar{margin-left:var(--spacing-sm);color:var(--bracket-color)}.square-bracket.svelte-1340jar{margin-left:var(--spacing-sm);color:var(--square-bracket-color)}.toggle.svelte-1340jar,.preview.svelte-1340jar{background:none;border:none;color:inherit;cursor:pointer;padding:0;margin:0}.toggle.svelte-1340jar{-webkit-user-select:none;user-select:none;margin-right:var(--spacing-md)}.preview.svelte-1340jar{margin:0 var(--spacing-sm) 0 var(--spacing-lg)}.preview.svelte-1340jar:hover{text-decoration:underline}[data-pseudo-content]:before{content:attr(data-pseudo-content)}.copied svg{animation:svelte-8hojd6-fade ease .3s;animation-fill-mode:forwards}@keyframes svelte-8hojd6-fade{0%{opacity:0}to{opacity:1}}.json-holder.svelte-8hojd6{padding:var(--size-2);overflow-y:scroll}.empty-wrapper.svelte-8hojd6{min-height:calc(var(--size-32) - 20px);height:100%}button.svelte-8hojd6{display:flex;position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);align-items:center;box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);border-top:none;border-right:none;border-radius:var(--block-label-right-radius);background:var(--block-label-background-fill);padding:5px;width:22px;height:22px;overflow:hidden;color:var(--block-label-text-color);font:var(--font);font-size:var(--button-small-text-size)}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-v0wucf.svelte-v0wucf{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-v0wucf.svelte-v0wucf{top:0;right:0;left:0}.wrap.default.svelte-v0wucf.svelte-v0wucf{top:0;right:0;bottom:0;left:0}.hide.svelte-v0wucf.svelte-v0wucf{opacity:0;pointer-events:none}.generating.svelte-v0wucf.svelte-v0wucf{animation:svelte-v0wucf-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-v0wucf-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-v0wucf.svelte-v0wucf{background:none}@keyframes svelte-v0wucf-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-v0wucf-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-v0wucf.svelte-v0wucf{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-v0wucf.svelte-v0wucf{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-v0wucf.svelte-v0wucf{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-v0wucf.svelte-v0wucf{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-v0wucf.svelte-v0wucf{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-v0wucf.svelte-v0wucf{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-v0wucf.svelte-v0wucf{position:absolute;top: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-v0wucf.svelte-v0wucf{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-v0wucf.svelte-v0wucf{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-v0wucf.svelte-v0wucf{pointer-events:none}.minimal.svelte-v0wucf .progress-text.svelte-v0wucf{background:var(--block-background-fill)}.border.svelte-v0wucf.svelte-v0wucf{border:1px solid var(--border-color-primary)}.clear-status.svelte-v0wucf.svelte-v0wucf{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-1swlrmr{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-1swlrmr{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-1swlrmr{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-1swlrmr{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-1swlrmr{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-1swlrmr{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-1swlrmr{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-1swlrmr{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-1swlrmr{color:var(--color-red-700)}.dark .toast-title.error.svelte-1swlrmr{color:var(--color-red-50)}.toast-title.warning.svelte-1swlrmr{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-1swlrmr{color:var(--color-yellow-50)}.toast-title.info.svelte-1swlrmr{color:var(--color-grey-700)}.dark .toast-title.info.svelte-1swlrmr{color:var(--color-grey-50)}.toast-close.svelte-1swlrmr{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-1swlrmr{color:var(--color-red-700)}.dark .toast-close.error.svelte-1swlrmr{color:var(--color-red-500)}.toast-close.warning.svelte-1swlrmr{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-1swlrmr{color:var(--color-yellow-500)}.toast-close.info.svelte-1swlrmr{color:var(--color-grey-700)}.dark .toast-close.info.svelte-1swlrmr{color:var(--color-grey-500)}.toast-text.svelte-1swlrmr{font-size:var(--text-lg)}.toast-text.error.svelte-1swlrmr{color:var(--color-red-700)}.dark .toast-text.error.svelte-1swlrmr{color:var(--color-red-50)}.toast-text.warning.svelte-1swlrmr{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-1swlrmr{color:var(--color-yellow-50)}.toast-text.info.svelte-1swlrmr{color:var(--color-grey-700)}.dark .toast-text.info.svelte-1swlrmr{color:var(--color-grey-50)}.toast-details.svelte-1swlrmr{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-1swlrmr{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-1swlrmr{color:var(--color-red-700)}.dark .toast-icon.error.svelte-1swlrmr{color:var(--color-red-500)}.toast-icon.warning.svelte-1swlrmr{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-1swlrmr{color:var(--color-yellow-500)}.toast-icon.info.svelte-1swlrmr{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-1swlrmr{color:var(--color-grey-500)}@keyframes svelte-1swlrmr-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-1swlrmr{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-1swlrmr-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-1swlrmr{background:var(--color-red-700)}.dark .timer.error.svelte-1swlrmr{background:var(--color-red-500)}.timer.warning.svelte-1swlrmr{background:var(--color-yellow-700)}.dark .timer.warning.svelte-1swlrmr{background:var(--color-yellow-500)}.timer.info.svelte-1swlrmr{background:var(--color-grey-700)}.dark .timer.info.svelte-1swlrmr{background:var(--color-grey-500)}.hidden.svelte-1swlrmr{display:none}.toast-text.svelte-1swlrmr 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))}}.block{overflow-y:scroll!important}

src/demo/app.py

@@ -0,0 +1,39 @@
+
+import gradio as gr
+from gradio_json_markdown import JsonMarkdown
+
+import json
+
+data = """
+{
+  "conversations": [
+    {
+      "value": "Modify the function to accept a list of integers and a positive integer `n` as input. The function should return the largest product that can be formed by selecting `n` integers from the list, where `n` is at least 2. For example, given the list `[-10,-20,5,6,7]` and `n=3`, the function should return `600` because the largest product is formed by selecting `-10`, `-20`, and `6` and multiplying them together. However, given `n=4`, the function should return `-1400` because the largest product is formed by selecting `-10`, `-20`, `5`, and `7`. Ensure the function handles cases where `n` is greater than the length of the input list by returning an appropriate message.",
+      "from": "User",
+      "canonical_form": ""
+    },
+    {
+      "value": "```python\\ndef largest_product_n(nums, n):\\n    if n > len(nums):\\n        return \\\"n must be less than or equal to the length of the input list\\\"\\n    nums.sort()  # sort the list\\n    # return the product of the last 'n' elements (largest 'n' numbers) or\\n    # the product of the first 'n' elements (smallest 'n' numbers), whichever is greater\\n    return max(nums[-n] * nums[-1] *\\n               reduce(lambda x, y: x * y, nums[-n:-1], 1),\\n               nums[0] * nums[n-1] *\\n               reduce(lambda x, y: x * y, nums[1:n], 1))\\n\\n# I used functool's reduce function, so import reduce from functools module\\nfrom functools import reduce\\n\\n# test cases\\nprint(largest_product_n([-10,-20,5,6,7], 3))  # returns 600\\nprint(largest_product_n([-10,-20,5,6,7], 4))  # returns -1400\\nprint(largest_product_n([1,2,3,4,5], 2))  # returns 20\\nprint(largest_product_n([1,2,3,4,5], 6))  # returns \\\"n must be less than or equal to the length of the input list\\\"\\n\\n```\\nPlease note, this code assumes that you always have at least `n` integers in the input list. If this is not the case, you should add a check for this in the function.\\n\\nThe function sorts the integers in the list and checks if the product of the largest `n` integers or the product of the smallest  integers (with one exception, explained below) is larger.\\n\\nFor the smallest integers, the function multiplies the smallest integer (nums[0]) with the \\\"n-1\\\"th integer (since the smallest integer is already included), and with the product of all integers between the 1st and the \\\"n-1\\\"th index.\\n\\nFor the largest integers, the function multiplies the largest integer (nums[-1]) with the \\\"n\\\"th integer (with the sign taken into account, since if there are negative integers we want to include as many as possible), and with the product of all integers between the \\\"n\\\"th and the second last index. If all integers are positive, the product of the largest integers is always larger or equal than the product of the smallest integers. If there is one negative integer, the product of the largest integers is always larger, since -1*(-1)*any_positive_number > any_postive_number.\\n\\nThis case is different if there is more than one negative number. If there is more than one negative number, the product of the smallest integers could be larger than the product of the largest integers, since (-n1)*(-n2) > p1*p2, where n1, n2 are negative integers and p1, p2 are positive integers. Since we take the maximum product, this case is also covered.\\n\\nIn Python, indices start from 0 and go up to n-1, so nums[-n] denotes the n-th integer from the right (last 'n' integers), and nums[-1] denotes the last integer, corresponding to the largest integer. Likewise, nums[1:n] denotes the integers between index 1 and index n-1. The reduce function is used to multiply all integers in a range. For example, reduce(lambda x, y: x * y, [1,2,3,4,5]) is equivalent to 1*2*3*4*5, and returns `120`.\\n\\nThe input `n` is the number of integers we want to select to form our product. For this problem, we assume `n >= 2`. This condition should be checked before calling the function. We also assume that the input is a list of integers. The case where `n > len(nums)` is handled by returning an error message. If `n == 1`, the function would still work, but it would not make much sense, since it would always return the largest integer in the input list.",
+      "from": "Assistant",
+      "canonical_form": ""
+    }
+  ],
+  "system": "",
+  "mask": "User",
+  "type": null,
+  "task_id": 1450799
+}
+"""
+nested_block = json.loads(data)
+
+example = JsonMarkdown().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        JsonMarkdown(label="Blank"),  # blank component
+        JsonMarkdown(value=example, label="Populated"),  # populated component
+
+    JsonMarkdown(value=nested_block, label="Nested JSON")
+
+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/requirements.txt

@@ -0,0 +1 @@
+gradio_json_markdown

src/demo/space.py

@@ -0,0 +1,161 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'JsonMarkdown': {'description': 'Used to display arbitrary JsonMarkdown output prettily. As this component does not accept user input, it is rarely used as an input component.\n', 'members': {'__init__': {'value': {'type': 'str | dict | list | Callable | None', 'default': 'None', 'description': 'Default value as a valid JsonMarkdown `str` -- or a `list` or `dict` that can be serialized to a JsonMarkdown string. If callable, the function will be called whenever the app loads to set the initial value of the component.'}, 'label': {'type': 'str | 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 | None', 'default': 'None', 'description': 'if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.'}, 'open': {'type': 'bool', 'default': 'False', 'description': 'If True, all JsonMarkdown nodes will be expanded when rendered. By default, node levels deeper than 3 are collapsed.'}, 'show_indices': {'type': 'bool', 'default': 'False', 'description': 'Whether to show numerical indices when displaying the elements of a list within the JsonMarkdown object.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': 'Height of the JsonMarkdown component in pixels if a number is passed, or in CSS units if a string is passed. Overflow will be scrollable. If None, the height will be automatically adjusted to fit the content.'}}, 'postprocess': {'value': {'type': 'dict | list | str | None', 'description': 'Expects a valid JsonMarkdown `str` -- or a `list` or `dict` that can be serialized to a JsonMarkdown string. The `list` or `dict` value can contain numpy arrays.'}}, 'preprocess': {'return': {'type': 'dict | list | None', 'description': 'Passes the JsonMarkdown value as a `dict` or `list` depending on the value.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the JsonMarkdown 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.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'JsonMarkdown': []}}}
+
+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_json_markdown`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+JSON module with markdown support
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_json_markdown
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_json_markdown import JsonMarkdown
+
+import json
+
+data = \"\"\"
+{
+  "conversations": [
+    {
+      "value": "Modify the function to accept a list of integers and a positive integer `n` as input. The function should return the largest product that can be formed by selecting `n` integers from the list, where `n` is at least 2. For example, given the list `[-10,-20,5,6,7]` and `n=3`, the function should return `600` because the largest product is formed by selecting `-10`, `-20`, and `6` and multiplying them together. However, given `n=4`, the function should return `-1400` because the largest product is formed by selecting `-10`, `-20`, `5`, and `7`. Ensure the function handles cases where `n` is greater than the length of the input list by returning an appropriate message.",
+      "from": "User",
+      "canonical_form": ""
+    },
+    {
+      "value": "```python\\ndef largest_product_n(nums, n):\\n    if n > len(nums):\\n        return \\\"n must be less than or equal to the length of the input list\\\"\\n    nums.sort()  # sort the list\\n    # return the product of the last 'n' elements (largest 'n' numbers) or\\n    # the product of the first 'n' elements (smallest 'n' numbers), whichever is greater\\n    return max(nums[-n] * nums[-1] *\\n               reduce(lambda x, y: x * y, nums[-n:-1], 1),\\n               nums[0] * nums[n-1] *\\n               reduce(lambda x, y: x * y, nums[1:n], 1))\\n\\n# I used functool's reduce function, so import reduce from functools module\\nfrom functools import reduce\\n\\n# test cases\\nprint(largest_product_n([-10,-20,5,6,7], 3))  # returns 600\\nprint(largest_product_n([-10,-20,5,6,7], 4))  # returns -1400\\nprint(largest_product_n([1,2,3,4,5], 2))  # returns 20\\nprint(largest_product_n([1,2,3,4,5], 6))  # returns \\\"n must be less than or equal to the length of the input list\\\"\\n\\n```\\nPlease note, this code assumes that you always have at least `n` integers in the input list. If this is not the case, you should add a check for this in the function.\\n\\nThe function sorts the integers in the list and checks if the product of the largest `n` integers or the product of the smallest  integers (with one exception, explained below) is larger.\\n\\nFor the smallest integers, the function multiplies the smallest integer (nums[0]) with the \\\"n-1\\\"th integer (since the smallest integer is already included), and with the product of all integers between the 1st and the \\\"n-1\\\"th index.\\n\\nFor the largest integers, the function multiplies the largest integer (nums[-1]) with the \\\"n\\\"th integer (with the sign taken into account, since if there are negative integers we want to include as many as possible), and with the product of all integers between the \\\"n\\\"th and the second last index. If all integers are positive, the product of the largest integers is always larger or equal than the product of the smallest integers. If there is one negative integer, the product of the largest integers is always larger, since -1*(-1)*any_positive_number > any_postive_number.\\n\\nThis case is different if there is more than one negative number. If there is more than one negative number, the product of the smallest integers could be larger than the product of the largest integers, since (-n1)*(-n2) > p1*p2, where n1, n2 are negative integers and p1, p2 are positive integers. Since we take the maximum product, this case is also covered.\\n\\nIn Python, indices start from 0 and go up to n-1, so nums[-n] denotes the n-th integer from the right (last 'n' integers), and nums[-1] denotes the last integer, corresponding to the largest integer. Likewise, nums[1:n] denotes the integers between index 1 and index n-1. The reduce function is used to multiply all integers in a range. For example, reduce(lambda x, y: x * y, [1,2,3,4,5]) is equivalent to 1*2*3*4*5, and returns `120`.\\n\\nThe input `n` is the number of integers we want to select to form our product. For this problem, we assume `n >= 2`. This condition should be checked before calling the function. We also assume that the input is a list of integers. The case where `n > len(nums)` is handled by returning an error message. If `n == 1`, the function would still work, but it would not make much sense, since it would always return the largest integer in the input list.",
+      "from": "Assistant",
+      "canonical_form": ""
+    }
+  ],
+  "system": "",
+  "mask": "User",
+  "type": null,
+  "task_id": 1450799
+}
+\"\"\"
+nested_block = json.loads(data)
+
+example = JsonMarkdown().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        JsonMarkdown(label="Blank"),  # blank component
+        JsonMarkdown(value=example, label="Populated"),  # populated component
+
+    JsonMarkdown(value=nested_block, label="Nested JSON")
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `JsonMarkdown`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["JsonMarkdown"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["JsonMarkdown"]["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 JsonMarkdown value as a `dict` or `list` depending on the value.
+- **As output:** Should return, expects a valid JsonMarkdown `str` -- or a `list` or `dict` that can be serialized to a JsonMarkdown string. The `list` or `dict` value can contain numpy arrays.
+
+ ```python
+def predict(
+    value: dict | list | None
+) -> dict | list | str | None:
+    return value
+```
+""", elem_classes=["md-custom", "JsonMarkdown-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          JsonMarkdown: [], };
+    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/frontend/Index.svelte

@@ -0,0 +1,78 @@
+<script lang="ts" context="module">
+	export { default as BaseJSON } from "./shared/JSON.svelte";
+</script>
+
+<script lang="ts">
+	import type { Gradio } from "@gradio/utils";
+	import JSON from "./shared/JSON.svelte";
+	import { Block, BlockLabel } from "@gradio/atoms";
+	import { JSON as JSONIcon } from "@gradio/icons";
+
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: any;
+	let old_value: any;
+	export let loading_status: LoadingStatus;
+	export let label: string;
+	export let show_label: boolean;
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let gradio: Gradio<{
+		change: never;
+		clear_status: LoadingStatus;
+	}>;
+	export let open = false;
+	export let theme_mode: "system" | "light" | "dark";
+	export let show_indices: boolean;
+	export let height: string | number | undefined;
+
+	$: {
+		if (value !== old_value) {
+			old_value = value;
+			gradio.dispatch("change");
+		}
+	}
+</script>
+
+<Block
+	{visible}
+	test_id="json"
+	{elem_id}
+	{elem_classes}
+	{container}
+	{scale}
+	{min_width}
+	padding={false}
+	allow_overflow={false}
+	{height}
+>
+	{#if label}
+		<BlockLabel
+			Icon={JSONIcon}
+			{show_label}
+			{label}
+			float={false}
+			disable={container === false}
+		/>
+	{/if}
+
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+	/>
+
+	<JSON {value} {open} {theme_mode} {show_indices} />
+</Block>
+
+<style>
+	:global(.block) {
+		overflow-y: scroll !important;
+	}
+</style>

src/frontend/gradio.config.js

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

src/frontend/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "gradio_json_markdown",
+  "version": "0.4.0",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "0.8.0",
+    "@gradio/icons": "0.7.1",
+    "@gradio/statustracker": "0.7.5",
+    "@gradio/utils": "0.6.0"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.11.0"
+  },
+  "main": "./Index.svelte",
+  "main_changeset": true,
+  "exports": {
+    ".": "./Index.svelte",
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/json"
+  }
+}

src/frontend/shared/JSON.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import { JSON as JSONIcon } from "@gradio/icons";
+	import { Empty } from "@gradio/atoms";
+	import JSONNode from "./JSONNode.svelte";
+	import { Copy, Check } from "@gradio/icons";
+
+	export let value: any = {};
+	export let open = false;
+	export let theme_mode: "system" | "light" | "dark" = "system";
+	export let show_indices = false;
+
+	let copied = false;
+	let timer: NodeJS.Timeout;
+
+	function copy_feedback(): void {
+		copied = true;
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => {
+			copied = false;
+		}, 1000);
+	}
+
+	async function handle_copy(): Promise<void> {
+		if ("clipboard" in navigator) {
+			await navigator.clipboard.writeText(JSON.stringify(value, null, 2));
+			copy_feedback();
+		}
+	}
+
+	function is_empty(obj: object): boolean {
+		return (
+			obj &&
+			Object.keys(obj).length === 0 &&
+			Object.getPrototypeOf(obj) === Object.prototype &&
+			JSON.stringify(obj) === JSON.stringify({})
+		);
+	}
+
+	onDestroy(() => {
+		if (timer) clearTimeout(timer);
+	});
+</script>
+
+{#if value && value !== '""' && !is_empty(value)}
+	<button
+		on:click={handle_copy}
+		title="copy"
+		class={copied ? "copied" : "copy-text"}
+		aria-roledescription={copied ? "Copied value" : "Copy value"}
+		aria-label={copied ? "Copied" : "Copy"}
+	>
+		{#if copied}
+			<Check />
+		{:else}
+			<Copy />
+		{/if}
+	</button>
+	<div class="json-holder">
+		<JSONNode
+			{value}
+			depth={0}
+			is_root={true}
+			{open}
+			{theme_mode}
+			{show_indices}
+		/>
+	</div>
+{:else}
+	<div class="empty-wrapper">
+		<Empty>
+			<JSONIcon />
+		</Empty>
+	</div>
+{/if}
+
+<style>
+	:global(.copied svg) {
+		animation: fade ease 300ms;
+		animation-fill-mode: forwards;
+	}
+
+	@keyframes fade {
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	.json-holder {
+		padding: var(--size-2);
+		overflow-y: scroll;
+	}
+
+	.empty-wrapper {
+		min-height: calc(var(--size-32) - 20px);
+		height: 100%;
+	}
+	button {
+		display: flex;
+		position: absolute;
+		top: var(--block-label-margin);
+		right: var(--block-label-margin);
+		align-items: center;
+		box-shadow: var(--shadow-drop);
+		border: 1px solid var(--border-color-primary);
+		border-top: none;
+		border-right: none;
+		border-radius: var(--block-label-right-radius);
+		background: var(--block-label-background-fill);
+		padding: 5px;
+		width: 22px;
+		height: 22px;
+		overflow: hidden;
+		color: var(--block-label-text-color);
+		font: var(--font);
+		font-size: var(--button-small-text-size);
+	}
+</style>

src/frontend/shared/JSONNode.svelte

@@ -0,0 +1,299 @@
+<script lang="ts">
+    import { onMount, createEventDispatcher, tick, afterUpdate } from "svelte";
+    import { Marked } from "marked";
+    import { markedHighlight } from "marked-highlight";
+    import hljs from 'highlight.js';
+    import "highlight.js/styles/github.css"; // You can choose a different style
+
+    export let value: any;
+    export let depth = 0;
+    export let is_root = false;
+    export let is_last_item = true;
+    export let key: string | number | null = null;
+    export let open = false;
+    export let theme_mode: "system" | "light" | "dark" = "system";
+    export let show_indices = false;
+
+    const dispatch = createEventDispatcher();
+    let root_element: HTMLElement;
+    let collapsed = open ? false : depth >= 3;
+    let child_nodes: any[] = [];
+
+    function is_collapsible(val: any): boolean {
+        return val !== null && (typeof val === "object" || Array.isArray(val));
+    }
+
+    async function toggle_collapse(): Promise<void> {
+        collapsed = !collapsed;
+        await tick();
+        dispatch("toggle", { collapsed, depth });
+    }
+
+    function get_collapsed_preview(val: any): string {
+        if (Array.isArray(val)) return `Array(${val.length})`;
+        if (typeof val === "object" && val !== null)
+            return `Object(${Object.keys(val).length})`;
+        return String(val);
+    }
+
+    const marked = new Marked(
+      markedHighlight({
+        langPrefix: 'hljs language-',
+        highlight(code, lang, info) {
+          const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+          return hljs.highlight(code, { language }).value;
+        }
+      })
+    );
+
+    function toMarkdown(value: string): string {
+        console.log("Render:" + value);
+        const parsed = marked.parse(value);
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(parsed, 'text/html');
+        doc.querySelectorAll('code').forEach((codeElement) => {
+            codeElement.setAttribute('style', 'border: 1px solid #d3d3d3; background-color: rgba(150,150,150,0.05);');
+        });
+        return doc.body.innerHTML;
+    }
+
+    $: if (is_collapsible(value)) {
+        child_nodes = Object.entries(value);
+    } else {
+        child_nodes = [];
+    }
+    $: if (is_root && root_element) {
+        updateLineNumbers();
+    }
+
+    function updateLineNumbers(): void {
+        const lines = root_element.querySelectorAll(".line");
+        lines.forEach((line, index) => {
+            const line_number = line.querySelector(".line-number");
+            if (line_number) {
+                line_number.setAttribute("data-pseudo-content", (index + 1).toString());
+                line_number?.setAttribute(
+                    "aria-roledescription",
+                    `Line number ${index + 1}`
+                );
+                line_number?.setAttribute("title", `Line number ${index + 1}`);
+            }
+        });
+    }
+
+    onMount(() => {
+        if (is_root) {
+            updateLineNumbers();
+        }
+    });
+
+    afterUpdate(() => {
+        if (is_root) {
+            updateLineNumbers();
+        }
+    });
+</script>
+
+<div
+    class="json-node"
+    class:root={is_root}
+    class:dark-mode={theme_mode === "dark"}
+    bind:this={root_element}
+    on:toggle
+    style="--depth: {depth};"
+>
+    <div class="line" class:collapsed>
+        <span class="line-number"></span>
+        <span class="content">
+            {#if is_collapsible(value)}
+                <button
+                    data-pseudo-content={collapsed ? "▶" : "▼"}
+                    aria-label={collapsed ? "Expand" : "Collapse"}
+                    class="toggle"
+                    on:click={toggle_collapse}
+                />
+            {/if}
+
+            {#if key !== null}
+                <span class="key">"{key}"</span><span class="punctuation colon"
+                    >:
+                </span>
+            {/if}
+            {#if is_collapsible(value)}
+                <span
+                    class="punctuation bracket"
+                    class:square-bracket={Array.isArray(value)}
+                    >{Array.isArray(value) ? "[" : "{"}</span
+                >
+                {#if collapsed}
+                    <button on:click={toggle_collapse} class="preview">
+                        {get_collapsed_preview(value)}
+                    </button>
+                    <span
+                        class="punctuation bracket"
+                        class:square-bracket={Array.isArray(value)}
+                        >{Array.isArray(value) ? "]" : "}"}</span
+                    >
+                {/if}
+            {:else if typeof value === "string"}
+                <span class="value">{@html toMarkdown(value)}</span>
+            {:else if typeof value === "number"}
+                <span class="value number">{value}</span>
+            {:else if typeof value === "boolean"}
+                <span class="value bool">{value.toString()}</span>
+            {:else if value === null}
+                <span class="value null">null</span>
+            {:else}
+                <span>{value}</span>
+            {/if}
+            {#if !is_last_item && (!is_collapsible(value) || collapsed)}
+                <span class="punctuation">,</span>
+            {/if}
+        </span>
+    </div>
+
+    {#if is_collapsible(value)}
+        <div class="children" class:hidden={collapsed}>
+            {#each child_nodes as [subKey, subVal], i}
+                <svelte:self
+                    value={subVal}
+                    depth={depth + 1}
+                    is_last_item={i === child_nodes.length - 1}
+                    key={subKey}
+                    {open}
+                    {theme_mode}
+                    {show_indices}
+                    on:toggle
+                />
+            {/each}
+            <div class="line">
+                <span class="line-number"></span>
+                <span class="content">
+                    <span
+                        class="punctuation bracket"
+                        class:square-bracket={Array.isArray(value)}
+                        >{Array.isArray(value) ? "]" : "}"}</span
+                    >
+                    {#if !is_last_item}<span class="punctuation">,</span>{/if}
+                </span>
+            </div>
+        </div>
+    {/if}
+</div>
+
+<style>
+	.json-node {
+		font-family: var(--font-mono);
+		--text-color: #d18770;
+		--key-color: var(--text-color);
+		--string-color: #ce9178;
+		--number-color: #719fad;
+
+		--bracket-color: #5d8585;
+		--square-bracket-color: #be6069;
+		--punctuation-color: #8fbcbb;
+		--line-number-color: #6a737d;
+		--separator-color: var(--line-number-color);
+	}
+	.json-node.dark-mode {
+		--bracket-color: #7eb4b3;
+		--number-color: #638d9a;
+	}
+	.json-node.root {
+		position: relative;
+		padding-left: var(--size-14);
+	}
+	.json-node.root::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: var(--size-11);
+		width: 1px;
+		background-color: var(--separator-color);
+	}
+	.line {
+		display: flex;
+		align-items: flex-start;
+		padding: 0;
+		margin: 0;
+		line-height: var(--line-md);
+	}
+	.line-number {
+		position: absolute;
+		left: 0;
+		width: calc(var(--size-7));
+		text-align: right;
+		color: var(--line-number-color);
+		user-select: none;
+		text-overflow: ellipsis;
+		text-overflow: ellipsis;
+		direction: rtl;
+		overflow: hidden;
+	}
+	.content {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		padding-left: calc(var(--depth) * var(--size-2));
+		flex-wrap: wrap;
+	}
+	.children {
+		padding-left: var(--size-4);
+	}
+	.children.hidden {
+		display: none;
+	}
+	.key {
+		color: var(--key-color);
+	}
+	.string {
+		color: var(--string-color);
+	}
+	.number {
+		color: var(--number-color);
+	}
+	.bool {
+		color: var(--text-color);
+	}
+	.null {
+		color: var(--text-color);
+	}
+	.value {
+		margin-left: var(--spacing-md);
+	}
+	.punctuation {
+		color: var(--punctuation-color);
+	}
+	.bracket {
+		margin-left: var(--spacing-sm);
+		color: var(--bracket-color);
+	}
+	.square-bracket {
+		margin-left: var(--spacing-sm);
+		color: var(--square-bracket-color);
+	}
+	.toggle,
+	.preview {
+		background: none;
+		border: none;
+		color: inherit;
+		cursor: pointer;
+		padding: 0;
+		margin: 0;
+	}
+	.toggle {
+		user-select: none;
+		margin-right: var(--spacing-md);
+	}
+	.preview {
+		margin: 0 var(--spacing-sm) 0 var(--spacing-lg);
+	}
+	.preview:hover {
+		text-decoration: underline;
+	}
+
+	:global([data-pseudo-content])::before {
+		content: attr(data-pseudo-content);
+	}
+</style>

src/package-lock.json

@@ -0,0 +1,44 @@
+{
+  "name": "gradio-json-markdown",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "highlight.js": "^11.10.0",
+        "marked": "^14.1.0",
+        "marked-highlight": "^2.1.4"
+      }
+    },
+    "node_modules/highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/marked": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.1.0.tgz",
+      "integrity": "sha512-P93GikH/Pde0hM5TAXEd8I4JAYi8IB03n8qzW8Bh1BIEFpEyBoYxi/XWZA53LSpTeLBiMQOoSMj0u5E/tiVYTA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/marked-highlight": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/marked-highlight/-/marked-highlight-2.1.4.tgz",
+      "integrity": "sha512-D1GOkcdzP+1dzjoColL7umojefFrASDuLeyaHS0Zr/Uo9jkr1V6vpLRCzfi1djmEaWyK0SYMFtHnpkZ+cwFT1w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "marked": ">=4 <15"
+      }
+    }
+  }
+}

src/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "highlight.js": "^11.10.0",
+    "marked": "^14.1.0",
+    "marked-highlight": "^2.1.4"
+  }
+}

src/pyproject.toml

@@ -0,0 +1,54 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_json_markdown"
+version = "0.0.1"
+description = "JSON module with markdown support"
+readme = "README.md"
+license = "apache-2.0"
+requires-python = ">=3.8"
+authors = [{ name = "YOUR NAME", email = "[email protected]" }]
+keywords = ["gradio-custom-component", "gradio-template-JSON"]
+# Add dependencies here
+dependencies = [
+  "gradio>=4.0,<5.0",
+  "mistletoe>=1.4.0",
+]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  '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_json_markdown/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_json_markdown"]