Update run.py

run.py

@@ -31,7 +31,7 @@ def compute(primary_color, secondary_color, neutral_color):
     neutral_shades = [adjust_brightness(neutral_color, p) for p in [-90, -75, -50, -25, -10, 0, 10, 25, 50, 75, 90]]
 
     css = f"""
-    :root \{
+    :root {{
         --primary-50: {primary_shades[0]} !important;
         --primary-100: {primary_shades[1]} !important;
         --primary-200: {primary_shades[2]} !important;
@@ -65,19 +65,21 @@ def compute(primary_color, secondary_color, neutral_color):
         --neutral-800: {neutral_shades[8]} !important;
         --neutral-900: {neutral_shades[9]} !important;
         --neutral-950: {neutral_shades[10]} !important;
-    \}"""
+    }}"""
     
     return css
 
 with gr.Blocks(css="") 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)
+    
     gr.Interface(
         fn=compute,
-        inputs=[
-            gr.ColorPicker(label="Primary color", value="#f97316"),
-            gr.ColorPicker(label="Secondary color", value="#3b82f6"),
-            gr.ColorPicker(label="Neutral color", value="#6b7280")
-        ],
-        outputs=[gr.Textbox(label="Custom css", lines=3)],
+        inputs=[primary_color_input, secondary_color_input, neutral_color_input],
+        outputs=[css_output],
     )
 
 if __name__ == "__main__":