<html style="
		margin: 0;
		padding: 0;
		min-height: 100%;
		display: flex;
		flex-direction: column;
	" lang="en-US"><head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">

		
		<meta property="og:url" content="https://gradio.app/">
		<meta property="og:type" content="website">
		<meta property="og:image" content="">
		<meta property="og:title" content="Gradio">
		<meta property="og:description" content="">
		<meta name="twitter:card" content="summary_large_image">
		<meta name="twitter:creator" content="@teamGradio">
		<meta name="twitter:title" content="Gradio">
		<meta name="twitter:description" content="">
		<meta name="twitter:image" content="">

		<script>
			window.dataLayer = window.dataLayer || [];
			function gtag() {
				dataLayer.push(arguments);
			}
			gtag("js", new Date());
			gtag("config", "UA-156449732-1");
			window.__gradio_mode__ = "app";
		</script>

		<script>window.gradio_config = {"version":"3.23.0\n","mode":"blocks","dev_mode":false,"analytics_enabled":true,"components":[{"id":1,"type":"json","props":{"value":{},"label":"URL Params","show_label":true,"name":"json","visible":true,"style":{}}},{"id":2,"type":"textbox","props":{"lines":1,"max_lines":20,"value":"","type":"text","label":"Input","show_label":true,"name":"textbox","visible":true,"style":{}}},{"id":3,"type":"textbox","props":{"lines":1,"max_lines":20,"value":"","type":"text","label":"Output","show_label":true,"name":"textbox","visible":true,"style":{}}},{"id":4,"type":"button","props":{"value":"Get Params","variant":"secondary","interactive":true,"name":"button","visible":true,"style":{}}},{"id":5,"type":"button","props":{"value":"Set Params","variant":"secondary","interactive":true,"name":"button","visible":true,"style":{}}},{"id":6,"type":"form","props":{"type":"form","visible":true,"style":{}}}],"css":null,"title":"Gradio","is_space":true,"enable_queue":true,"show_error":false,"show_api":true,"is_colab":false,"stylesheets":["https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600\u0026display=swap","https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600\u0026display=swap"],"root":"","layout":{"id":0,"children":[{"id":1},{"id":6,"children":[{"id":2},{"id":3}]},{"id":4},{"id":5}]},"dependencies":[{"targets":[4],"trigger":"click","inputs":[2,1],"outputs":[3,1],"backend_fn":true,"js":"\n    function(text_input, url_params) {\n        console.log(text_input, url_params);\n        const params = new URLSearchParams(window.location.search);\n        url_params = Object.fromEntries(params);\n        return [text_input, url_params];\n        }\n    ","queue":null,"api_name":null,"scroll_to_output":false,"show_progress":true,"every":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"continuous":false,"generator":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false},{"targets":[5],"trigger":"click","inputs":[2,1],"outputs":[3,1],"backend_fn":true,"js":"\n    function(text_input, url_params) {\n            const params = new URLSearchParams(window.location.search);\n            params.set(\"text_input\", text_input)\n            url_params = Object.fromEntries(params);\n    \t    const queryString = \u0027?\u0027 + params.toString();\n            // this next line is only needed inside Spaces, so the child frame updates parent\n            window.parent.postMessage({ queryString: queryString }, \"*\")\n            return [text_input, url_params];\n        }\n    ","queue":null,"api_name":null,"scroll_to_output":false,"show_progress":true,"every":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"continuous":false,"generator":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false},{"targets":[],"trigger":"load","inputs":[2,1],"outputs":[3,1],"backend_fn":true,"js":"\n    function(text_input, url_params) {\n        console.log(text_input, url_params);\n        const params = new URLSearchParams(window.location.search);\n        url_params = Object.fromEntries(params);\n        return [text_input, url_params];\n        }\n    ","queue":null,"api_name":null,"scroll_to_output":false,"show_progress":true,"every":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"continuous":false,"generator":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false}]};</script>

		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
		<script type="module" crossorigin="" src="./assets/index.37b24c07.js"></script>
		
	<link rel="stylesheet" href="./assets/index.f554ccc1.css"><link rel="stylesheet" href="https://radames-gradio-url-params.hf.space/theme.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&amp;display=swap"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&amp;display=swap"><link rel="modulepreload" as="script" crossorigin="" href="./assets/Blocks.5efe22d4.js"><link rel="stylesheet" href="./assets/Blocks.15437627.css"><link rel="modulepreload" as="script" crossorigin="" href="./assets/Empty.svelte_svelte_type_style_lang.94e7c7a3.js"><link rel="stylesheet" href="./assets/Empty.svelte_svelte_type_style_lang.04656a45.css"><link rel="modulepreload" as="script" crossorigin="" href="./assets/index.2de5e818.js"><link rel="stylesheet" href="./assets/index.61c7b416.css"><link rel="stylesheet" href="./assets/DropdownArrow.svelte_svelte_type_style_lang.a71c0c1e.css"><link rel="modulepreload" as="script" crossorigin="" href="./assets/index.37b24c07.js"><link rel="modulepreload" as="script" crossorigin="" href="./assets/Copy.d6bfc6ec.js"><link rel="modulepreload" as="script" crossorigin="" href="./assets/Empty.ae5c2506.js"><link rel="modulepreload" as="script" crossorigin="" href="./assets/BlockLabel.7ce695d8.js"><link rel="modulepreload" as="script" crossorigin="" href="./assets/index.0df6cff0.js"><link rel="stylesheet" href="./assets/ColorPicker.svelte_svelte_type_style_lang.adee3b52.css"><link rel="modulepreload" as="script" crossorigin="" href="./assets/Textbox.08748353.js"><link rel="modulepreload" as="script" crossorigin="" href="./assets/BlockTitle.78628404.js"><link rel="modulepreload" as="script" crossorigin="" href="./assets/Info.1218d587.js"><link rel="modulepreload" as="script" crossorigin="" href="./assets/index.ec5895b1.js"><link rel="modulepreload" as="script" crossorigin="" href="./assets/index.d9197354.js"><link rel="modulepreload" as="script" crossorigin="" href="./assets/Form.829e1388.js"><link rel="stylesheet" href="./assets/Form.0a7d9dad.css"><link rel="modulepreload" as="script" crossorigin="" href="./assets/index.c6373c8b.js"><link rel="stylesheet" href="./assets/Column.svelte_svelte_type_style_lang.c4c23b6e.css"><link rel="modulepreload" as="script" crossorigin="" href="./assets/Column.899c996b.js"><title>Gradio</title><script async="" defer="" src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script></head>

	<body style="width: 100%; margin: 0px; padding: 0px; display: flex; flex-direction: column; flex-grow: 1; background-color: rgb(11, 15, 25);">
		<gradio-app control_page_title="true" embed="false" eager="true" style="display: flex; flex-direction: column; flex-grow: 1">
		<div class="gradio-container gradio-container-3-23-0 svelte-ac4rv4 app dark" style="min-height: initial; flex-grow: 1;"><div class="main svelte-ac4rv4">  <div class="wrap svelte-1lyswbr" style="min-height: 100%;"><div class="contain" style="flex-grow: 1;"><div id="component-0" class="svelte-vt1mxs gap" style="min-width: min(0px, 100%); flex-grow: 1"><div data-testid="json" id="component-1" class="block svelte-mppz8v" style="border-style: solid; overflow: visible;"><div style="  " class="svelte-1frtwj3"><span class="svelte-1frtwj3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M5 3h2v2H5v5a2 2 0 0 1-2 2a2 2 0 0 1 2 2v5h2v2H5c-1.07-.27-2-.9-2-2v-4a2 2 0 0 0-2-2H0v-2h1a2 2 0 0 0 2-2V5a2 2 0 0 1 2-2m14 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2a2 2 0 0 1-2-2V5h-2V3h2m-7 12a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m-4 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m8 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1Z"></path></svg></span> URL Params</div> <div class="wrap default svelte-gjihhp hide" style="position: absolute; padding: 0px;"></div> <button class="svelte-1trjy9a"><span class="copy-text"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 32 32"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg></span></button> <div class="json-holder svelte-1trjy9a"><span class="spacer svelte-1kspdo mt-10"></span> <div class="json-node svelte-1kspdo">{
			<div class="children svelte-1kspdo"><div>__theme: <span class="spacer svelte-1kspdo"></span> <div class="json-node svelte-1kspdo"><div class="json-item string svelte-1kspdo">"dark"</div></div>, </div><div>text_input: <span class="spacer svelte-1kspdo"></span> <div class="json-node svelte-1kspdo"><div class="json-item string svelte-1kspdo">""</div></div> </div></div>
			}</div></div></div><div class="form svelte-awbtu4"><div id="component-2" class="block svelte-mppz8v padded" style="border-style: solid; overflow: visible;"> <label class="svelte-4xt1ch"><span class="svelte-1gfkn6j">Input</span>   <textarea data-testid="textbox" class="scroll-hide svelte-4xt1ch" placeholder="" rows="1" style="overflow-y: scroll; height: 42px;"></textarea></label></div><div id="component-3" class="block svelte-mppz8v padded" style="border-style: solid; overflow: visible;"><div class="wrap default svelte-gjihhp hide" style="position: absolute; padding: 0px;"></div> <label class="svelte-4xt1ch"><span class="svelte-1gfkn6j">Output</span>   <textarea data-testid="textbox" class="scroll-hide svelte-4xt1ch" placeholder="" rows="1" disabled="" style="overflow-y: scroll; height: 43px;"></textarea></label></div></div><button class="lg secondary svelte-1ipelgc" style="  " id="component-4">Get Params</button><button class="lg secondary svelte-1ipelgc" style="  " id="component-5">Set Params</button></div></div> <footer class="svelte-1lyswbr"><button class="show-api svelte-1lyswbr">Use via API <img src="./static/img/api-logo.svg" alt="" class="svelte-1lyswbr"></button> <div class="svelte-1lyswbr">·</div> <a href="https://gradio.app" class="built-with svelte-1lyswbr" target="_blank" rel="noreferrer">Built with Gradio
				<img src="./assets/logo.0a070fcf.svg" alt="logo" class="svelte-1lyswbr"></a></footer></div> </div> </div></gradio-app>
		<script>
			const ce = document.getElementsByTagName("gradio-app");
			if (ce[0]) {
				ce[0].addEventListener("domchange", () => {
					document.body.style.padding = "0";
				});
				document.body.style.padding = "0";
			}
		</script>
	
</body></html>