Add sharing to playground (#6351)

* add new page

* sharing

* add changeset

* add some styling

* styling

* rename to blank

* clearer icon

* formatting

* wording

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/clean-lands-follow.md

@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Add sharing to playground 

js/_website/src/lib/assets/img/anchor_gray.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#abacaf" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg>

js/_website/src/lib/assets/img/anchor_orange.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#ff8c31" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg>

js/_website/src/lib/assets/img/share_gray.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none">
+<g id="Communication / Share_iOS_Export">
+<path id="Vector" d="M9 6L12 3M12 3L15 6M12 3V13M7.00023 10C6.06835 10 5.60241 10 5.23486 10.1522C4.74481 10.3552 4.35523 10.7448 4.15224 11.2349C4 11.6024 4 12.0681 4 13V17.8C4 18.9201 4 19.4798 4.21799 19.9076C4.40973 20.2839 4.71547 20.5905 5.0918 20.7822C5.5192 21 6.07899 21 7.19691 21H16.8036C17.9215 21 18.4805 21 18.9079 20.7822C19.2842 20.5905 19.5905 20.2839 19.7822 19.9076C20 19.4802 20 18.921 20 17.8031V13C20 12.0681 19.9999 11.6024 19.8477 11.2349C19.6447 10.7448 19.2554 10.3552 18.7654 10.1522C18.3978 10 17.9319 10 17 10" stroke="#abacaf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

js/_website/src/lib/assets/style.css

@@ -205,3 +205,10 @@ code.language-bash {
 .tip a {
 	@apply text-orange-700;
 }
+
+.shared-link:before {
+	content: url("img/anchor_orange.svg");
+	width: 15px;
+	display: inline-block;
+	margin-right: 5px;
+}

js/_website/src/lib/components/DemosLite.svelte

@@ -4,6 +4,10 @@
 	import Slider from "./Slider.svelte";
 	import Fullscreen from "./icons/Fullscreen.svelte";
 	import Close from "./icons/Close.svelte";
+	import { page } from "$app/stores";
+	import share from "$lib/assets/img/share_gray.svg";
+	import { svgCheck } from "$lib/assets/copy.js";
+	import { browser } from "$app/environment";
 
 	export let demos: {
 		name: string;
@@ -13,6 +17,16 @@
 	}[];
 	export let current_selection: string;
 	export let show_nav = true;
+
+	let new_demo = {
+		name: "Blank",
+		dir: "Blank",
+		code: "# Write your own Gradio code here and see what it looks like!\nimport gradio as gr\n\n",
+		requirements: []
+	};
+
+	demos.push(new_demo);
+
 	let mounted = false;
 	let controller: any;
 
@@ -54,6 +68,17 @@
 
 	let timeout: any;
 
+	let copied_link = false;
+	async function copy_link(name: string) {
+		let code_b64 = btoa(code);
+		name = name.replaceAll(" ", "_");
+		await navigator.clipboard.writeText(
+			`${$page.url.href.split("?")[0]}?demo=${name}&code=${code_b64}`
+		);
+		copied_link = true;
+		setTimeout(() => (copied_link = false), 2000);
+	}
+
 	$: code = demos.find((demo) => demo.name === current_selection)?.code || "";
 	$: requirements =
 		demos.find((demo) => demo.name === current_selection)?.requirements || [];
@@ -77,6 +102,19 @@
 	let lg_breakpoint = false;
 
 	$: lg_breakpoint = preview_width - 13 >= 688;
+
+	if (browser) {
+		let linked_demo = $page.url.searchParams.get("demo");
+		let b64_code = $page.url.searchParams.get("code");
+
+		if (linked_demo && b64_code) {
+			current_selection = linked_demo.replaceAll("_", " ");
+			let demo = demos.find((demo) => demo.name === current_selection);
+			if (demo) {
+				demo.code = atob(b64_code);
+			}
+		}
+	}
 </script>
 
 <svelte:head>
@@ -101,6 +139,22 @@
 				>
 					<div class="flex justify-between align-middle h-8 border-b pl-4 pr-2">
 						<h3 class="pt-1">Code</h3>
+						<div class="flex float-right">
+							<button
+								class="border border-gray-300 rounded-md px-2 py-.5 my-[3px] text-sm text-gray-400 hover:bg-gray-50 w-36"
+								on:click={() => copy_link(demo.name)}
+							>
+								{#if !copied_link}
+									<img class="!w-4 align-text-top inline-block" src={share} />
+									<p class="inline-block">Share With Edits</p>
+								{:else}
+									<div class="inline-block align-text-top !w-4">
+										{@html svgCheck}
+									</div>
+									<p class="inline-block">Copied Link!</p>
+								{/if}
+							</button>
+						</div>
 					</div>
 
 					<Code

js/_website/src/routes/playground/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import DemosLite from "../../lib/components/DemosLite.svelte";
 	import MetaTags from "$lib/components/MetaTags.svelte";
+	import { page } from "$app/stores";
+	import { browser } from "$app/environment";
 
 	export let data: {
 		demos_by_category: {
@@ -17,6 +19,15 @@
 	let all_demos = data.demos_by_category.flatMap((category) => category.demos);
 	let current_selection = all_demos[0].name;
 
+	let shared = "";
+	if (browser) {
+		let linked_demo = $page.url.searchParams.get("demo");
+		if (linked_demo) {
+			current_selection = linked_demo.replaceAll("_", " ");
+			shared = current_selection;
+		}
+	}
+
 	let show_nav = true;
 
 	$: show_nav;
@@ -76,12 +87,19 @@
 				>
 			</div>
 			{#if show_nav}
+				<button
+					on:click={() => (current_selection = "Blank")}
+					class:current-playground-demo={current_selection == "Blank"}
+					class:shared-link={shared == "Blank"}
+					class="thin-link font-light px-4 mt-2 block">Blank</button
+				>
 				{#each data.demos_by_category as { category, demos } (category)}
 					<p class="px-4 my-2">{category}</p>
 					{#each demos as demo, i}
 						<button
 							on:click={() => (current_selection = demo.name)}
 							class:current-playground-demo={current_selection == demo.name}
+							class:shared-link={shared == demo.name}
 							class="thin-link font-light px-4 block">{demo.name}</button
 						>
 					{/each}

js/_website/svelte.config.js

@@ -23,7 +23,6 @@ const config = {
 				`/main/docs`,
 				`/main/guides`,
 				`/main/docs/js`
-				// "/main/docs/interface"
 			]
 		},
 		files: {