Update run.py

run.py

@@ -69,17 +69,39 @@ def compute(primary_color, secondary_color, neutral_color):
     
     return css
 
-with gr.Blocks(css="") as demo:
+with gr.Blocks() as demo:
     primary_color_input = gr.ColorPicker(label="Primary color", value="#f97316")
     secondary_color_input = gr.ColorPicker(label="Secondary color", value="#3b82f6")
     neutral_color_input = gr.ColorPicker(label="Neutral color", value="#6b7280")
     
     css_output = gr.Textbox(label="Custom css", lines=10)
-    
+
+    def update_css(primary_color, secondary_color, neutral_color):
+        new_css = compute(primary_color, secondary_color, neutral_color)
+        js_code = f"""
+        <style id="dynamic-css">{new_css}</style>
+        <script>
+            var styleElement = document.getElementById('dynamic-css');
+            if (styleElement) {{
+                styleElement.innerHTML = `{new_css}`;
+            }} else {{
+                styleElement = document.createElement('style');
+                styleElement.id = 'dynamic-css';
+                styleElement.innerHTML = `{new_css}`;
+                document.head.appendChild(styleElement);
+            }}
+        </script>
+        """
+        return new_css, gr.HTML(js_code)
+
+    primary_color_input.change(fn=update_css, inputs=[primary_color_input, secondary_color_input, neutral_color_input], outputs=[css_output, gr.HTML()])
+    secondary_color_input.change(fn=update_css, inputs=[primary_color_input, secondary_color_input, neutral_color_input], outputs=[css_output, gr.HTML()])
+    neutral_color_input.change(fn=update_css, inputs=[primary_color_input, secondary_color_input, neutral_color_input], outputs=[css_output, gr.HTML()])
+
     gr.Interface(
-        fn=compute,
+        fn=update_css,
         inputs=[primary_color_input, secondary_color_input, neutral_color_input],
-        outputs=[css_output],
+        outputs=[css_output, gr.HTML()]
     )
 
 if __name__ == "__main__":