Cache break themes on change (#8499)

* changes

* add changeset

* changes

* add changeset

---------

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

Author: 3 people

.changeset/tall-keys-report.md

@@ -0,0 +1,7 @@
+---
+"@gradio/app": patch
+"@gradio/client": patch
+"gradio": patch
+---
+
+feat:Cache break themes on change

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

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;
 }

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(

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(