Update app.py

app.py

@@ -57,20 +57,29 @@ def query(prompt, is_negative=False, steps=30, cfg_scale=7, strength=0.7):
         print(f"Error when trying to open the image: {e}")
         return None
 
+def reset_prompt():
+    default_text_prompt = ""  # Valor por defecto para el campo de texto
+    default_negative_prompt = "(deformed, distorted, disfigured), poorly drawn, bad anatomy, wrong anatomy, extra limb, missing limb, floating limbs, (mutated hands and fingers), disconnected limbs, mutation, mutated, ugly, disgusting, blurry, amputation, misspellings, typos"  # Valor por defecto para el campo de texto negativo
+    default_steps = 35  # Valor por defecto para el slider de pasos de muestreo
+    default_cfg = 7  # Valor por defecto para el slider de nivel de detalle
+    default_strength = 0.7  # Valor por defecto para el slider de fuerza de transformación
+    
+    return default_text_prompt, default_negative_prompt, default_steps, default_cfg, default_strength
+
 css = """
 #app-container {
-    max-width: 100%; /* Ancho máximo del contenedor en 100% del espacio disponible */
-    margin: 0 auto; /* Centrar el contenedor */
-    padding: 20px; /* Espacio interno */
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 20px;
 }
 
 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 */
-    width: calc(100% - 40px); /* Ancho completo menos espacio para el botón */
-    box-sizing: border-box; /* Incluir el borde en el ancho total */
-    padding-right: 40px; /* Espacio para el botón de borrar */
+    background-color: #f5f5f5;
+    color: #333333;
+    border: 1px solid #cccccc;
+    width: calc(100% - 40px);
+    box-sizing: border-box;
+    padding-right: 40px;
 }
 
 input[type="text"] {
@@ -78,7 +87,7 @@ input[type="text"] {
 }
 
 input[type="text"]::after {
-    content: "✕"; /* Símbolo de borrar */
+    content: "✕";
     position: absolute;
     right: 10px;
     top: 50%;
@@ -88,53 +97,53 @@ input[type="text"]::after {
 }
 
 button {
-    background-color: #f5f5f5; /* Fondo gris claro */
-    color: #333333; /* Texto gris oscuro */
-    border: 1px solid black; /* Borde negro en botones */
-    width: 100%; /* Ancho completo del botón */
-    box-sizing: border-box; /* Incluir el borde en el ancho total */
-    padding: 10px; /* Espacio interno en el botón */
+    background-color: #f5f5f5;
+    color: #333333;
+    border: 1px solid black;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
 }
 
 button.primary {
-    background-color: green; /* Fondo verde para el botón 'Generate' */
-    color: black; /* Texto negro en el botón 'Generate' */
+    background-color: green;
+    color: black;
 }
 
 button.secondary {
-    background-color: #f5f5f5; /* Fondo gris claro para el botón 'Clear' */
-    color: #333333; /* Texto gris oscuro en el botón 'Clear' */
+    background-color: #f5f5f5;
+    color: #333333;
 }
 
 button:hover {
-    background-color: #e0e0e0; /* Fondo gris más oscuro en hover */
+    background-color: #e0e0e0;
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color: #333333; /* Texto gris oscuro en encabezados */
+    color: #333333;
 }
 
 @media (max-width: 768px) {
     .button-container {
         display: flex;
         flex-direction: column;
-        align-items: center; /* Centra el botón en vista móvil */
+        align-items: center;
     }
 
     .button-container button {
-        width: auto; /* Ajusta el ancho del botón para móviles */
-        margin-top: 10px; /* Espacio superior para el botón en móviles */
+        width: auto;
+        margin-top: 10px;
     }
 }
 
 @media (min-width: 769px) {
     .button-container {
         display: flex;
-        justify-content: flex-end; /* Alinea el botón a la derecha en vista de escritorio */
+        justify-content: flex-end;
     }
 
     .button-container button {
-        width: auto; /* Ajusta el ancho del botón para escritorio */
+        width: auto;
     }
 }
 """
@@ -192,16 +201,16 @@ with gr.Blocks(css=css) as app:
                     step=0.001
                 )
 
-            # Mover el componente de ejemplos aquí, justo debajo de Opciones Avanzadas
             gr.Examples(examples=examples, inputs=text_prompt, label="Ejemplos de otros sueños")
             
             with gr.Row(elem_id="button-container"):
                 generate_button = gr.Button("QUIERO VER MI SUEÑO", elem_id="generate-button", variant="primary")
-                reset_button = gr.HTML('<button id="reset-button" style="width: 100%; padding: 10px; background-color: #f5f5f5; color: #333; border: 1px solid black; cursor: pointer;">REINICIAR MI SUEÑO</button>')
-
+                reset_button = gr.Button("REINICIAR MI SUEÑO", elem_id="reset-button", variant="secondary")
+                
         with gr.Column(scale=1):
             image_output = gr.Image(type="pil", label="Image Output", elem_id="gallery")
 
     generate_button.click(query, inputs=[text_prompt, negative_prompt, steps, cfg, strength], outputs=image_output)
+    reset_button.click(reset_prompt, outputs=[text_prompt, negative_prompt, steps, cfg, strength])
 
 app.launch(show_api=False, share=False)