Merge branch 'mobile-story-tests' of https://github.com/gradio-app/gr…

…adio into mobile-story-tests

.changeset/cruel-bats-behave.md

@@ -0,0 +1,5 @@
+---
+"@gradio/storybook": minor
+---
+
+feat:Add mobile Chromatic tests

.changeset/eager-rivers-rescue.md

@@ -0,0 +1,6 @@
+---
+"@gradio/upload": patch
+"gradio": patch
+---
+
+feat:Upload tweak

.changeset/fuzzy-windows-matter.md

@@ -0,0 +1,6 @@
+---
+"@gradio/accordion": minor
+"gradio": minor
+---
+
+feat:Ensure `open` reactivity in Accordion

.changeset/happy-hairs-wash.md

@@ -0,0 +1,6 @@
+---
+"@gradio/simpleimage": patch
+"gradio": patch
+---
+
+feat:Fix SimpleImage package json

.changeset/lucky-tips-occur.md

@@ -0,0 +1,6 @@
+---
+"@gradio/app": patch
+"gradio": patch
+---
+
+fix:add background color based on the OS mode

.changeset/ripe-emus-try.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": minor
+"gradio": minor
+---
+
+feat:Allow selecting texts in dataframe cells

.changeset/seven-trains-return.md

@@ -0,0 +1,6 @@
+---
+"@gradio/audio": patch
+"gradio": patch
+---
+
+fix:Amend audio waveform colour

.changeset/thick-grapes-shine.md

@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": patch
+"gradio": patch
+---
+
+fix:Show label in interactive image editor

.changeset/true-pears-decide.md

@@ -0,0 +1,6 @@
+---
+"@gradio/tabitem": patch
+"gradio": patch
+---
+
+fix:Add `visible` check to Tab 

.changeset/warm-jokes-fetch.md

@@ -0,0 +1,23 @@
+---
+"@gradio/audio": patch
+"@gradio/checkbox": patch
+"@gradio/code": patch
+"@gradio/colorpicker": patch
+"@gradio/dataset": patch
+"@gradio/dropdown": patch
+"@gradio/file": patch
+"@gradio/fileexplorer": patch
+"@gradio/image": patch
+"@gradio/markdown": patch
+"@gradio/model3d": patch
+"@gradio/number": patch
+"@gradio/radio": patch
+"@gradio/simpledropdown": patch
+"@gradio/simpleimage": patch
+"@gradio/simpletextbox": patch
+"@gradio/textbox": patch
+"@gradio/video": patch
+"gradio": patch
+---
+
+fix:Handle the case where examples is `null` for all components

.github/actions/install-frontend-deps/action.yml

@@ -28,7 +28,7 @@ runs:
       if: steps.frontend-cache.outputs.cache-hit != 'true' || inputs.always-install-pnpm == 'true'
       uses: pnpm/action-setup@v2
       with:
-        version: 8.9
+        version: 8.15
     - uses: actions/setup-node@v4
       with:
         node-version: 18

.github/workflows/backend.yml

@@ -89,7 +89,7 @@ jobs:
       if: steps.frontend-cache.outputs.cache-hit != 'true'
       uses: pnpm/action-setup@v2
       with:
-        version: 8
+        version: 8.15
     - uses: actions/setup-node@v4
       if: steps.frontend-cache.outputs.cache-hit != 'true'
       with:
@@ -185,7 +185,7 @@ jobs:
       if: steps.frontend-cache.outputs.cache-hit != 'true'
       uses: pnpm/action-setup@v2
       with:
-        version: 8
+        version: 8.15
     - uses: actions/setup-node@v4
       if: steps.frontend-cache.outputs.cache-hit != 'true'
       with:

.github/workflows/build-pr.yml

@@ -25,7 +25,7 @@ jobs:
     - name: Install pnpm
       uses: pnpm/action-setup@v2
       with:
-        version: 8
+        version: 8.15
     - uses: actions/setup-node@v4
       with:
         node-version: 18

gradio/blocks.py

@@ -1612,6 +1612,18 @@ def get_config_file(self):
             "stylesheets": self.stylesheets,
             "theme": self.theme.name,
             "protocol": "sse_v1",
+            "body_css": {
+                "body_background_fill": self.theme._get_computed_value(
+                    "body_background_fill"
+                ),
+                "body_text_color": self.theme._get_computed_value("body_text_color"),
+                "body_background_fill_dark": self.theme._get_computed_value(
+                    "body_background_fill_dark"
+                ),
+                "body_text_color_dark": self.theme._get_computed_value(
+                    "body_text_color_dark"
+                ),
+            },
         }
 
         def get_layout(block):

gradio/components/audio.py

@@ -33,8 +33,8 @@ class WaveformOptions:
         sample_rate: The output sample rate (in Hz) of the audio after editing. Defaults to 44100.
     """
 
-    waveform_color: str = "#9ca3af"
-    waveform_progress_color: str = "#f97316"
+    waveform_color: str | None = None
+    waveform_progress_color: str | None = None
     show_recording_waveform: bool = True
     show_controls: bool = False
     skip_length: int | float = 5

gradio/themes/base.py

@@ -6,6 +6,7 @@
 import textwrap
 from pathlib import Path
 from typing import Iterable
+import warnings
 
 import huggingface_hub
 import semantic_version as semver
@@ -93,6 +94,30 @@ def repl_func(match):
 
         return f"{css_code}\n{dark_css_code}"
 
+    def _get_computed_value(self, property: str, depth=0) -> str:
+        MAX_DEPTH = 100
+        if depth > MAX_DEPTH:
+            warnings.warn(f"Cannot resolve '{property}' - circular reference detected.")
+            return ""
+        is_dark = property.endswith("_dark")
+        if is_dark:
+            set_value = getattr(
+                self, property, getattr(self, property[:-5], "")
+            )  # if dark mode value is unavailable, use light mode value
+        else:
+            set_value = getattr(self, property, "")
+        pattern = r"(\*)([\w_]+)(\b)"
+
+        def repl_func(match, depth):
+            word = match.group(2)
+            dark_suffix = "_dark" if property.endswith("_dark") else ""
+            return self._get_computed_value(word + dark_suffix, depth + 1)
+
+        computed_value = re.sub(
+            pattern, lambda match: repl_func(match, depth), set_value
+        )
+        return computed_value
+
     def to_dict(self):
         """Convert the theme into a python dictionary."""
         schema = {"theme": {}}

js/accordion/Index.svelte

@@ -23,7 +23,7 @@
 		{...loading_status}
 	/>
 
-	<Accordion {label} {open}>
+	<Accordion {label} bind:open>
 		<Column>
 			<slot />
 		</Column>

js/app/index.html

@@ -16,6 +16,29 @@
 			content="width=device-width, initial-scale=1, shrink-to-fit=no"
 		/>
 
+		<style>
+			:root {
+				--bg: {{ config.get('body_css', {}).get('body_background_fill', 'white') }};
+				--col:   {{ config.get('body_css', {}).get('body_text_color', '#1f2937') }};
+				--bg-dark: {{ config.get('body_css', {}).get('body_background_fill_dark', '#0b0f19') }};
+				--col-dark: {{ config.get('body_css', {}).get('body_text_color_dark', '#f3f4f6') }};
+			}
+
+
+			body {
+				background: var(--bg);
+				color: var(--col);
+				font-family: Arial, Helvetica, sans-serif;
+			}
+
+			@media (prefers-color-scheme: dark) {
+				body {
+					background: var(--bg-dark);
+					color: var(--col-dark);
+				}
+			}
+		</style>
+
 		<script type="module" src="./src/main.ts"></script>
 		<meta property="og:url" content="https://gradio.app/" />
 		<meta property="og:type" content="website" />
@@ -74,6 +97,7 @@
 		</gradio-app>
 		<script>
 			const ce = document.getElementsByTagName("gradio-app");
+
 			if (ce[0]) {
 				ce[0].addEventListener("domchange", () => {
 					document.body.style.padding = "0";

js/app/vite.config.ts

@@ -115,6 +115,7 @@ export default defineConfig(({ mode }) => {
 							} else if (
 								selector.indexOf(":root") > -1 ||
 								selector.indexOf("dark") > -1 ||
+								selector.indexOf("body") > -1 ||
 								fileName.indexOf(".svelte") > -1
 							) {
 								return selector;

js/audio/AudioExample.stories.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Audio from "./Example.svelte";
+</script>
+
+<Meta title="Components/Audio/Example" component={Audio} />
+
+<Template let:args>
+	<Audio {...args} />
+</Template>
+
+<Story
+	name="Audio file"
+	args={{
+		value: "cantina.mp3"
+	}}
+/>
+
+<Story
+	name="Null"
+	args={{
+		value: null
+	}}
+/>

js/audio/Example.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -9,7 +9,7 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	{value}
+	{value ? value : ""}
 </div>
 
 <style>

js/audio/Index.svelte

@@ -91,10 +91,14 @@
 
 	let waveform_settings: Record<string, any>;
 
+	let color_accent = getComputedStyle(
+		document.documentElement
+	).getPropertyValue("--color-accent");
+
 	$: waveform_settings = {
 		height: 50,
 		waveColor: waveform_options.waveform_color || "#9ca3af",
-		progressColor: waveform_options.waveform_progress_color || "#f97316",
+		progressColor: waveform_options.waveform_progress_color || color_accent,
 		barWidth: 2,
 		barGap: 3,
 		cursorWidth: 2,
@@ -109,7 +113,7 @@
 	};
 
 	const trim_region_settings = {
-		color: waveform_options.trim_region_color || "hsla(15, 85%, 40%, 0.4)",
+		color: waveform_options.trim_region_color,
 		drag: true,
 		resize: true
 	};

js/checkbox/Example.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let value: boolean;
+	export let value: boolean | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -9,7 +9,7 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	{value.toLocaleString()}
+	{value !== null ? value.toLocaleString() : ""}
 </div>
 
 <style>

js/code/Example.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
 
 <pre
 	class:table={type === "table"}
 	class:gallery={type === "gallery"}
-	class:selected>{value}</pre>
+	class:selected>{value ? value : ""}</pre>
 
 <style>
 	pre {

js/colorpicker/ColorPickerExample.stories.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import ColorPicker from "./Example.svelte";
+</script>
+
+<Meta title="Components/Color Picker/Example" component={ColorPicker} />
+
+<Template let:args>
+	<ColorPicker {...args} />
+</Template>
+
+<Story
+	name="Color value"
+	args={{
+		value: "#ff0000"
+	}}
+/>
+
+<Story
+	name="Null"
+	args={{
+		value: null
+	}}
+/>

js/colorpicker/Example.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
 
 <div
-	style="background-color: {value}"
+	style="background-color: {value ? value : 'black'}"
 	class:table={type === "table"}
 	class:gallery={type === "gallery"}
 	class:selected

js/dataframe/shared/EditableCell.svelte

@@ -105,6 +105,10 @@
 		flex: 1 1 0%;
 		outline: none;
 		padding: var(--size-2);
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		user-select: text;
 	}
 
 	.header {