Update app.py

app.py

@@ -59,7 +59,53 @@ def query(prompt, is_negative=False, steps=30, cfg_scale=7, sampler="DPM++ 2M Ka
         print(f"Error when trying to open the image: {e}")
         return None
 
-with gr.Blocks() as app:
+css = """
+#app-container {
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+input, textarea, select {
+    background-color: #f5f5f5; /* Fondo gris claro para inputs */
+    color: #333333; /* Texto gris oscuro en inputs */
+    border: 1px solid #cccccc; /* Borde gris claro en inputs */
+}
+
+button {
+    background-color: #f5f5f5; /* Fondo gris claro */
+    color: #333333; /* Texto gris oscuro */
+    border: 2px solid black; /* Borde negro en botones */
+}
+
+button.primary {
+    background-color: green; /* Fondo verde para el botón 'Generate' */
+    color: white; /* Texto blanco en el botón 'Generate' */
+}
+
+button.secondary {
+    background-color: #f5f5f5; /* Fondo gris claro para el botón 'Clear' */
+    color: #333333; /* Texto gris oscuro en el botón 'Clear' */
+}
+
+button:hover {
+    background-color: #e0e0e0; /* Fondo gris más oscuro en hover */
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: #333333; /* Texto gris oscuro en encabezados */
+}
+
+@media (max-width: 768px) {
+    .button-row {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+}
+"""
+
+with gr.Blocks(css=css) as app:
     gr.HTML("""
     <center>
         <h1>Dream Generator with Flux</h1>
@@ -77,9 +123,9 @@ with gr.Blocks() as app:
             strength = gr.Slider(label="Strength", value=0.7, minimum=0, maximum=1, step=0.001)
             seed = gr.Slider(label="Seed", value=-1, minimum=-1, maximum=1000000000, step=1)
 
-            with gr.Row():
-                clear_button = gr.Button("Clear", elem_id="clear-button", variant="secondary", style={"border-color": "black", "border-width": "2px"})
-                generate_button = gr.Button("Generate", elem_id="generate-button", variant="primary", style={"border-color": "black", "border-width": "2px", "background-color": "green", "color": "white"})
+            with gr.Row(elem_id="button-row"):
+                clear_button = gr.Button("Clear", elem_id="clear-button", variant="secondary")
+                generate_button = gr.Button("Generate", elem_id="generate-button", variant="primary")
 
         with gr.Column(scale=1):
             image_output = gr.Image(type="pil", label="Image Output", elem_id="gallery")