Cache break themes on change (#8499)

* changes * add changeset * changes * add changeset --------- Co-authored-by: Ali Abid <aliabid94@gmail.com> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Jun 9, 2024 · c5f6e77 · c5f6e77
1 parent 2a59bab
commit c5f6e77
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 1 deletion.
diff --git a/.changeset/tall-keys-report.md b/.changeset/tall-keys-report.md
@@ -0,0 +1,7 @@
+---
+"@gradio/app": patch
+"@gradio/client": patch
+"gradio": patch
+---
+
+feat:Cache break themes on change
diff --git a/client/js/src/types.ts b/client/js/src/types.ts
@@ -173,6 +173,7 @@ export interface Config {
 	path: string;
 	protocol: "sse_v3" | "sse_v2.1" | "sse_v2" | "sse_v1" | "sse" | "ws";
 	max_file_size?: number;
+	theme_hash?: number;
 }
 
 // todo: DRY up types

diff --git a/globals.d.ts b/globals.d.ts
@@ -38,4 +38,5 @@ export interface Config {
 	show_error: boolean;
 	is_space: boolean;
 	protocol: "ws" | "sse" | "sse_v1" | "sse_v2" | "sse_v2.1" | "sse_v3";
+	theme_hash?: number;
 }
diff --git a/gradio/blocks.py b/gradio/blocks.py
@@ -988,6 +988,10 @@ def __init__(
         self.theme: Theme = theme
         self.theme_css = theme._get_theme_css()
         self.stylesheets = theme._stylesheets
+        theme_hasher = hashlib.sha256()
+        theme_hasher.update(self.theme_css.encode("utf-8"))
+        self.theme_hash = theme_hasher.hexdigest()
+
         self.encrypt = False
         self.share = False
         self.enable_queue = True
@@ -2040,6 +2044,7 @@ def get_config_file(self):
                 ),
             },
             "fill_height": self.fill_height,
+            "theme_hash": self.theme_hash,
         }
         config.update(self.default_config.get_config())
         config["connect_heartbeat"] = utils.connect_heartbeat(

diff --git a/js/app/src/Index.svelte b/js/app/src/Index.svelte
@@ -29,6 +29,7 @@
 		path: string;
 		app_id?: string;
 		fill_height?: boolean;
+		theme_hash?: number;
 	}
 
 	let id = -1;
@@ -131,7 +132,10 @@
 				css_text_stylesheet || undefined
 			);
 		}
-		await mount_css(config.root + "/theme.css", document.head);
+		await mount_css(
+			config.root + "/theme.css?v=" + config.theme_hash,
+			document.head
+		);
 		if (!config.stylesheets) return;
 
 		await Promise.all(