make all component SSR compatible (gradio-app#9187)

* asd

* fixes

* make all components ssr compatible

* remove files

* add changeset

* add changeset

* review

* format

* clean

* address comments

* tweaks utils

* add changeset

* fix plot and audio

* format

* fix nativeplot

---------

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

Author: pngwn

.changeset/itchy-goats-kiss.md

@@ -0,0 +1,21 @@
+---
+"@gradio/annotatedimage": patch
+"@gradio/audio": patch
+"@gradio/chatbot": patch
+"@gradio/code": patch
+"@gradio/dataframe": patch
+"@gradio/dataset": patch
+"@gradio/dropdown": patch
+"@gradio/file": patch
+"@gradio/imageeditor": patch
+"@gradio/markdown": patch
+"@gradio/model3d": patch
+"@gradio/nativeplot": patch
+"@gradio/paramviewer": patch
+"@gradio/utils": patch
+"@gradio/wasm": patch
+"@self/component-test": patch
+"gradio": patch
+---
+
+feat:make all component SSR compatible

js/annotatedimage/Index.svelte

@@ -229,7 +229,6 @@
 		display: block;
 		width: 100%;
 		height: auto;
-		position: absolute;
 	}
 	.container {
 		display: flex;

js/audio/Index.svelte

@@ -5,7 +5,7 @@
 
 	import type { FileData } from "@gradio/client";
 	import type { LoadingStatus } from "@gradio/statustracker";
-	import { afterUpdate } from "svelte";
+	import { afterUpdate, onMount } from "svelte";
 
 	import StaticAudio from "./static/StaticAudio.svelte";
 	import InteractiveAudio from "./interactive/InteractiveAudio.svelte";
@@ -95,14 +95,23 @@
 
 	let waveform_settings: Record<string, any>;
 
-	let color_accent = getComputedStyle(
-		document.documentElement
-	).getPropertyValue("--color-accent");
+	let color_accent = "darkorange";
+
+	onMount(() => {
+		color_accent = getComputedStyle(document?.documentElement).getPropertyValue(
+			"--color-accent"
+		);
+		set_trim_region_colour();
+		waveform_settings.waveColor = waveform_options.waveform_color || "#9ca3af";
+		waveform_settings.progressColor =
+			waveform_options.waveform_progress_color || color_accent;
+		waveform_settings.mediaControls = waveform_options.show_controls;
+		waveform_settings.sampleRate = waveform_options.sample_rate || 44100;
+	});
 
 	$: waveform_settings = {
 		height: 50,
-		waveColor: waveform_options.waveform_color || "#9ca3af",
-		progressColor: waveform_options.waveform_progress_color || color_accent,
+
 		barWidth: 2,
 		barGap: 3,
 		cursorWidth: 2,
@@ -111,9 +120,7 @@
 		barRadius: 10,
 		dragToSeek: true,
 		normalize: true,
-		minPxPerSec: 20,
-		mediaControls: waveform_options.show_controls,
-		sampleRate: waveform_options.sample_rate || 44100
+		minPxPerSec: 20
 	};
 
 	const trim_region_settings = {
@@ -129,8 +136,6 @@
 		);
 	}
 
-	set_trim_region_colour();
-
 	function handle_error({ detail }: CustomEvent<string>): void {
 		const [level, status] = detail.includes("Invalid file type")
 			? ["warning", "complete"]

js/audio/player/AudioPlayer.svelte

@@ -168,7 +168,11 @@
 		data-testid={label ? "waveform-" + label : "unlabelled-audio"}
 	>
 		<div class="waveform-container">
-			<div id="waveform" bind:this={container} />
+			<div
+				id="waveform"
+				bind:this={container}
+				style:height={container ? null : "58px"}
+			/>
 		</div>
 
 		<div class="timestamps">
@@ -181,25 +185,25 @@
 			</div>
 		</div>
 
-		{#if waveform}
-			<WaveformControls
-				{container}
-				{waveform}
-				{playing}
-				{audio_duration}
-				{i18n}
-				{interactive}
-				{handle_trim_audio}
-				bind:mode
-				bind:trimDuration
-				bind:show_volume_slider
-				show_redo={interactive}
-				{handle_reset_value}
-				{waveform_options}
-				{trim_region_settings}
-				{editable}
-			/>
-		{/if}
+		<!-- {#if waveform} -->
+		<WaveformControls
+			{container}
+			{waveform}
+			{playing}
+			{audio_duration}
+			{i18n}
+			{interactive}
+			{handle_trim_audio}
+			bind:mode
+			bind:trimDuration
+			bind:show_volume_slider
+			show_redo={interactive}
+			{handle_reset_value}
+			{waveform_options}
+			{trim_region_settings}
+			{editable}
+		/>
+		<!-- {/if} -->
 	</div>
 {/if}
 

js/audio/shared/VolumeControl.svelte

@@ -4,7 +4,7 @@
 
 	export let currentVolume = 1;
 	export let show_volume_slider = false;
-	export let waveform: WaveSurfer;
+	export let waveform: WaveSurfer | undefined;
 
 	let volumeElement: HTMLInputElement;
 
@@ -37,7 +37,7 @@
 	on:input={(e) => {
 		if (e.target instanceof HTMLInputElement) {
 			currentVolume = parseFloat(e.target.value);
-			waveform.setVolume(currentVolume);
+			waveform?.setVolume(currentVolume);
 		}
 	}}
 />

js/audio/shared/WaveformControls.svelte

@@ -10,7 +10,7 @@
 	import VolumeLevels from "./VolumeLevels.svelte";
 	import VolumeControl from "./VolumeControl.svelte";
 
-	export let waveform: WaveSurfer;
+	export let waveform: WaveSurfer | undefined;
 	export let audio_duration: number;
 	export let i18n: I18nFormatter;
 	export let playing: boolean;
@@ -30,7 +30,7 @@
 	let playbackSpeeds = [0.5, 1, 1.5, 2];
 	let playbackSpeed = playbackSpeeds[1];
 
-	let trimRegion: RegionsPlugin;
+	let trimRegion: RegionsPlugin | null = null;
 	let activeRegion: Region | null = null;
 
 	let leftRegionHandle: HTMLDivElement | null;
@@ -39,7 +39,10 @@
 
 	let currentVolume = 1;
 
-	$: trimRegion = waveform.registerPlugin(RegionsPlugin.create());
+	$: trimRegion =
+		container && waveform
+			? waveform.registerPlugin(RegionsPlugin.create())
+			: null;
 
 	$: trimRegion?.on("region-out", (region) => {
 		region.play();
@@ -56,7 +59,8 @@
 	});
 
 	const addTrimRegion = (): void => {
-		activeRegion = trimRegion.addRegion({
+		if (!trimRegion) return;
+		activeRegion = trimRegion?.addRegion({
 			start: audio_duration / 4,
 			end: audio_duration / 2,
 			...trim_region_settings
@@ -190,7 +194,7 @@
 						(playbackSpeeds.indexOf(playbackSpeed) + 1) % playbackSpeeds.length
 					];
 
-				waveform.setPlaybackRate(playbackSpeed);
+				waveform?.setPlaybackRate(playbackSpeed);
 			}}
 		>
 			<span>{playbackSpeed}x</span>
@@ -205,7 +209,7 @@
 				waveform_options.skip_length
 			)} seconds`}
 			on:click={() =>
-				waveform.skip(
+				waveform?.skip(
 					get_skip_rewind_amount(audio_duration, waveform_options.skip_length) *
 						-1
 				)}
@@ -214,7 +218,7 @@
 		</button>
 		<button
 			class="play-pause-button icon"
-			on:click={() => waveform.playPause()}
+			on:click={() => waveform?.playPause()}
 			aria-label={playing ? i18n("audio.pause") : i18n("audio.play")}
 		>
 			{#if playing}
@@ -230,7 +234,7 @@
 				waveform_options.skip_length
 			)} seconds"
 			on:click={() =>
-				waveform.skip(
+				waveform?.skip(
 					get_skip_rewind_amount(audio_duration, waveform_options.skip_length)
 				)}
 		>

js/chatbot/Index.svelte

@@ -122,6 +122,7 @@
 			_fetch={gradio.client.fetch}
 			load_component={gradio.load_component}
 			msg_format={type}
+			root={gradio.root}
 		/>
 	</div>
 </Block>

js/chatbot/shared/ChatBot.svelte

@@ -10,7 +10,8 @@
 		createEventDispatcher,
 		type SvelteComponent,
 		type ComponentType,
-		tick
+		tick,
+		onMount
 	} from "svelte";
 	import { ShareButton } from "@gradio/atoms";
 	import { Image } from "@gradio/image/shared";
@@ -96,13 +97,19 @@
 	export let placeholder: string | null = null;
 	export let upload: Client["upload"];
 	export let msg_format: "tuples" | "messages" = "tuples";
+	export let root: string;
 
-	let target = document.querySelector("div.gradio-container");
+	let target: HTMLElement | null = null;
+
+	onMount(() => {
+		target = document.querySelector("div.gradio-container");
+		adjust_text_size();
+	});
 
 	let div: HTMLDivElement;
 	let autoscroll: boolean;
 
-	$: adjust_text_size = () => {
+	function adjust_text_size(): void {
 		let style = getComputedStyle(document.body);
 		let body_text_size = style.getPropertyValue("--body-text-size");
 		let updated_text_size;
@@ -126,9 +133,7 @@
 			"--chatbot-body-text-size",
 			updated_text_size + "px"
 		);
-	};
-
-	$: adjust_text_size();
+	}
 
 	const dispatch = createEventDispatcher<{
 		change: undefined;
@@ -142,6 +147,7 @@
 	});
 
 	async function scroll(): Promise<void> {
+		if (!div) return;
 		await tick();
 		requestAnimationFrame(() => {
 			if (autoscroll) {
@@ -158,6 +164,7 @@
 		scroll();
 	}
 	afterUpdate(() => {
+		if (!div) return;
 		div.querySelectorAll("img").forEach((n) => {
 			n.addEventListener("click", (e) => {
 				const target = e.target as HTMLImageElement;
@@ -369,6 +376,7 @@
 													{render_markdown}
 													{line_breaks}
 													on:load={scroll}
+													{root}
 												/>
 											</MessageBox>
 										{:else}
@@ -379,6 +387,7 @@
 												{render_markdown}
 												{line_breaks}
 												on:load={scroll}
+												{root}
 											/>
 										{/if}
 									{:else if message.type === "component" && message.content.component in _components}
@@ -432,7 +441,7 @@
 			{/if}
 		{:else if placeholder !== null}
 			<center>
-				<Markdown message={placeholder} {latex_delimiters} />
+				<Markdown message={placeholder} {latex_delimiters} {root} />
 			</center>
 		{/if}
 	</div>

js/code/Index.svelte

@@ -29,7 +29,6 @@
 	export let value_is_output = false;
 	export let language = "";
 	export let lines = 5;
-	export let target: HTMLElement;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -40,7 +39,7 @@
 
 	export let interactive: boolean;
 
-	let dark_mode = target.classList.contains("dark");
+	let dark_mode = gradio.theme === "dark";
 
 	function handle_change(): void {
 		gradio.dispatch("change", value);
@@ -52,9 +51,13 @@
 		value_is_output = false;
 	});
 	$: value, handle_change();
+
+	const is_browser = typeof window !== "undefined";
+	const default_lines = interactive ? lines : 10.35;
 </script>
 
 <Block
+	height={is_browser ? undefined : default_lines * 25 + 4}
 	variant={"solid"}
 	padding={false}
 	{elem_id}

js/component-test/package.json

@@ -13,6 +13,9 @@
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0"
 	},
+	"dependencies": {
+		"@gradio/video": "workspace:^"
+	},
 	"type": "module",
 	"private": "true"
 }

js/component-test/src/defs.d.ts

@@ -0,0 +1,4 @@
+declare module "*.glb" {
+	const src: string;
+	export default src;
+}