Fix Hot Reload of Custom CSS (#12549)

* changes

* changes

* changes

* add changeset

* changes

* Fix reload mode css

* revert

* revert

* revert

* revert

* revert

* add changeset

* fix code

* hot reload

---------

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

Author: 3 people

.changeset/eight-paths-own.md

@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Fix Hot Reload of Custom CSS

gradio/blocks.py

@@ -2558,10 +2558,6 @@ def reverse(text):
         """
         from gradio.routes import App
 
-        if self._is_running_in_reload_thread:
-            # We have already launched the demo
-            return None, None, None  # type: ignore
-
         theme = theme if theme is not None else self._deprecated_theme
         css = css if css is not None else self._deprecated_css
         css_paths = css_paths if css_paths is not None else self._deprecated_css_paths
@@ -2579,6 +2575,10 @@ def reverse(text):
         self.head_paths = head_paths
         self._set_html_css_theme_variables()
 
+        if self._is_running_in_reload_thread:
+            # We have already launched the demo
+            return None, None, None  # type: ignore
+
         if not self.exited:
             self.__exit__()
 

gradio/utils.py

@@ -2,7 +2,6 @@
 
 from __future__ import annotations
 
-import ast
 import asyncio
 import copy
 import functools
@@ -156,6 +155,17 @@ class BaseReloader(ABC):
     def running_app(self) -> App:
         pass
 
+    def get_attribute(self, attr: str, demo) -> Any:
+        if (
+            hasattr(demo, f"_deprecated_{attr}")
+            and getattr(demo, f"_deprecated_{attr}") is not None
+        ):
+            return getattr(demo, f"_deprecated_{attr}")
+        elif hasattr(demo, attr) and getattr(demo, attr) is not None:
+            return getattr(demo, attr)
+        else:
+            return getattr(self.running_app.blocks, attr)
+
     def swap_blocks(self, demo: Blocks):
         assert self.running_app.blocks  # noqa: S101
         # Copy over the blocks to get new components and events but
@@ -166,11 +176,13 @@ def swap_blocks(self, demo: Blocks):
         demo.is_running = True
         demo.allowed_paths = self.running_app.blocks.allowed_paths
         demo.blocked_paths = self.running_app.blocks.blocked_paths
-        demo.theme = self.running_app.blocks.theme
-        demo.head_paths = self.running_app.blocks.head_paths
-        demo.css = self.running_app.blocks.css
-        demo.head = self.running_app.blocks.head
-        demo.css_paths = self.running_app.blocks.css_paths
+
+        demo.theme = self.get_attribute("theme", demo)
+        demo.css = self.get_attribute("css", demo)
+        demo.css_paths = self.get_attribute("css_paths", demo)
+        demo.js = self.get_attribute("js", demo)
+        demo.head = self.get_attribute("head", demo)
+        demo.head_paths = self.get_attribute("head_paths", demo)
         demo._set_html_css_theme_variables()
         self.running_app.state_holder.set_blocks(demo)
         for session in self.running_app.state_holder.session_data.values():
@@ -295,51 +307,6 @@ def swap_blocks(self, demo: Blocks):
         self.alert_change("reload")
 
 
-def _remove_if_name_main_codeblock(file_path: str, encoding: str = "utf-8"):
-    """Parse the file, remove the gr.no_reload code blocks, and write the file back to disk.
-
-    Parameters:
-        file_path (str): The path to the file to remove the no_reload code blocks from.
-    """
-
-    with open(file_path, encoding=encoding) as file:
-        code = file.read()
-
-    tree = ast.parse(code)
-
-    def _is_if_name_main(expr: ast.AST) -> bool:
-        """Find the if __name__ == '__main__': block."""
-        return (
-            isinstance(expr, ast.If)
-            and isinstance(expr.test, ast.Compare)
-            and isinstance(expr.test.left, ast.Name)
-            and expr.test.left.id == "__name__"
-            and len(expr.test.ops) == 1
-            and isinstance(expr.test.ops[0], ast.Eq)
-            and isinstance(expr.test.comparators[0], ast.Constant)
-            and expr.test.comparators[0].value == "__main__"
-        )
-
-    # Find the positions of the code blocks to load
-    for node in ast.walk(tree):
-        if _is_if_name_main(node):
-            assert isinstance(node, ast.If)  # noqa: S101
-            node.body = [ast.Pass(lineno=node.lineno, col_offset=node.col_offset)]
-
-    # convert tree to string
-    code_removed = compile(tree, filename=file_path, mode="exec")
-    return code_removed
-
-
-def _find_module(source_file: Path) -> ModuleType | None:
-    for s, v in sys.modules.items():
-        if s not in {"__main__", "__mp_main__"} and getattr(v, "__file__", None) == str(
-            source_file
-        ):
-            return v
-    return None
-
-
 def watchfn_spaces(reloader: SpacesReloader):
     try:
         spaces_version = importlib.metadata.version("spaces")
@@ -423,8 +390,8 @@ def is_in_watch_dirs_and_not_sitepackages(file_path):
     # Need to import the module in this thread so that the
     # module is available in the namespace of this thread
     module = reloader.watch_module
-    no_reload_source_code = _remove_if_name_main_codeblock(
-        str(reloader.demo_file), encoding=reloader.encoding
+    no_reload_source_code = Path(str(reloader.demo_file)).read_text(
+        encoding=reloader.encoding
     )
     # Reset the context to id 0 so that the loaded module is the same as the original
     # See https://github.com/gradio-app/gradio/issues/10253
@@ -457,8 +424,8 @@ def is_in_watch_dirs_and_not_sitepackages(file_path):
 
                 NO_RELOAD.set(False)
                 # Remove the gr.no_reload code blocks and exec in the new module's dict
-                no_reload_source_code = _remove_if_name_main_codeblock(
-                    str(reloader.demo_file), encoding=reloader.encoding
+                no_reload_source_code = Path(str(reloader.demo_file)).read_text(
+                    encoding=reloader.encoding
                 )
                 exec(no_reload_source_code, module.__dict__)
 

js/spa/test/custom_css.reload.spec.ts

@@ -0,0 +1,100 @@
+import { test, expect } from "@playwright/test";
+import { spawnSync } from "node:child_process";
+import { launch_app_background, kill_process } from "./utils";
+import { join } from "path";
+
+let _process;
+
+test.beforeAll(() => {
+	const demo = `
+import gradio as gr
+
+custom_css= """
+    h1 { color: #6D94C5; text-align: center; }
+    .gradio-container { max-width: 900px !important; }
+"""
+
+# gr.HTML style works for hot reload
+with gr.Blocks(css=custom_css,
+    theme=gr.themes.Soft()) as demo:
+    gr.HTML("<h1> AI Travel Agent</h1>")
+    gr.Chatbot(height=400)
+    gr.Textbox(placeholder="Type here...")
+
+if __name__ == "__main__":
+    demo.launch()
+`;
+	// write contents of demo to a local 'run.py' file
+	spawnSync(`echo '${demo}' > ${join(process.cwd(), "run.py")}`, {
+		shell: true,
+		stdio: "pipe",
+		env: {
+			...process.env,
+			PYTHONUNBUFFERED: "true"
+		}
+	});
+});
+
+test.afterAll(() => {
+	if (_process) kill_process(_process);
+	spawnSync(`rm  ${join(process.cwd(), "run.py")}`, {
+		shell: true,
+		stdio: "pipe",
+		env: {
+			...process.env,
+			PYTHONUNBUFFERED: "true"
+		}
+	});
+});
+
+test("gradio dev mode correctly reloads custom css", async ({ page }) => {
+	test.setTimeout(20 * 1000);
+
+	try {
+		const { _process: server_process, port: port } =
+			await launch_app_background(
+				`gradio ${join(process.cwd(), "run.py")}`,
+				process.cwd()
+			);
+
+		_process = server_process;
+		console.log("Connected to port", port);
+
+		await page.goto(`http://localhost:${port}`);
+		await page.waitForTimeout(2_000);
+
+		await expect(page.locator("h1")).toHaveCSS("color", "rgb(109, 148, 197)");
+
+		const demo1 = `
+import gradio as gr
+
+custom_css= """
+    h1 { color: red; text-align: center; }
+    .gradio-container { max-width: 900px !important; }
+"""
+
+# gr.HTML style works for hot reload
+with gr.Blocks(css=custom_css,
+    theme=gr.themes.Soft()) as demo:
+    gr.HTML("<h1> AI Travel Agent</h1>")
+    gr.Chatbot(height=400)
+    gr.Textbox(placeholder="Type here...")
+
+if __name__ == "__main__":
+    demo.launch()
+    `;
+		// write contents of demo to a local 'run.py' file
+		spawnSync(`echo '${demo1}' > ${join(process.cwd(), "run.py")}`, {
+			shell: true,
+			stdio: "pipe",
+			env: {
+				...process.env,
+				PYTHONUNBUFFERED: "true"
+			}
+		});
+
+		await expect(page.locator("h1")).toHaveCSS("color", "rgb(255, 0, 0)");
+	} finally {
+		if (_process) kill_process(_process);
+	}
+});