Fix paramviewer descriptions to only render markdown links (#10096)

* fix paramviewer to only render markdown links

* switch / to use md links

* add changeset

* change docstring

* formatting

---------

Co-authored-by: gradio-pr-bot <[email protected]>

.changeset/mean-rooms-stare.md

@@ -0,0 +1,7 @@
+---
+"@gradio/paramviewer": minor
+"gradio": minor
+"website": minor
+---
+
+feat:Fix paramviewer descriptions to only render markdown links 

gradio/components/paramviewer.py

@@ -45,7 +45,7 @@ def __init__(
     ):
         """
         Parameters:
-            value: A dictionary of dictionaries. The key in the outer dictionary is the parameter name, while the inner dictionary has keys "type", "description", and "default" for each parameter.
+            value: A dictionary of dictionaries. The key in the outer dictionary is the parameter name, while the inner dictionary has keys "type", "description", and "default" for each parameter. Markdown links are supported in "description".
             language: The language to display the code in. One of "python" or "typescript".
             linkify: A list of strings to linkify. If any of these strings is found in the description, it will be rendered as a link.
             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.

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

@@ -114,7 +114,7 @@ def generate_playground_link(demo_name):
                 encoded_reqs = base64.b64encode(requirements.encode('utf-8')).decode('utf-8')
                 encoded_reqs_url = urllib.parse.quote(encoded_reqs, safe='')
                 playground_url += "&reqs=" + encoded_reqs_url
-    return f"<a href='{playground_url}' target='_blank'>demo/{demo_name}</a>"
+    return f"[demo/{demo_name}]({playground_url})"
 
 
 def escape_parameters(parameters):

js/paramviewer/ParamViewer.svelte

@@ -66,6 +66,21 @@
 			}
 		});
 	}
+
+	function render_links(description: string): string {
+		const escaped = description
+			.replace(/&/g, "&")
+			.replace(/</g, "&lt;")
+			.replace(/>/g, "&gt;")
+			.replace(/"/g, "&quot;")
+			.replace(/'/g, "&#039;");
+
+		const markdown_links = escaped.replace(
+			/\[([^\]]+)\]\(([^)]+)\)/g,
+			'<a href="$2" target="_blank">$1</a>'
+		);
+		return markdown_links;
+	}
 </script>
 
 <div class="wrap" bind:this={component_root}>
@@ -96,7 +111,9 @@
 					</div>
 				{/if}
 				{#if description}
-					<div class="description"><p>{@html description}</p></div>
+					<div class="description">
+						<p>{@html render_links(description)}</p>
+					</div>
 				{/if}
 			</details>
 		{/each}