Update app.py

app.py

@@ -64,28 +64,25 @@ css = """
     padding: 20px; /* Espacio interno */
 }
 
-.input-container {
-    position: relative;
-    width: 100%;
-}
-
 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: 100%; /* Ancho completo del input */
+    width: calc(100% - 30px); /* Ancho completo menos el espacio para el botón de borrar */
     box-sizing: border-box; /* Incluir el borde en el ancho total */
-    padding-right: 30px; /* Espacio para el botón "x" */
+    padding-right: 30px; /* Espacio para el botón de borrar */
 }
 
 .clear-button {
     position: absolute;
-    right: 5px;
+    right: 10px;
     top: 50%;
     transform: translateY(-50%);
+    border: none;
+    background: transparent;
     cursor: pointer;
-    color: #666;
-    font-size: 14px;
+    font-size: 16px;
+    color: #333333;
 }
 
 button {
@@ -146,6 +143,9 @@ examples = [
     "((Helmet of Kylo Ren)) in dominant shape of cat, heavily adapted to the physical characteristics of (((cat))), incorporating rugged texture and robust elements. Ultra-detailed 3D render with exquisite rim lighting, vibrant and hyper-realistic textures. Majestic design, imposing presence, polished tones according to (colors of Kylo Ren). Contrasted and meticulously crafted background, high-quality octane rendering, 8K."
 ]
 
+def clear_text_prompt():
+    return ""
+
 with gr.Blocks(css=css) as app:
     gr.HTML("""
     <center>
@@ -156,13 +156,16 @@ with gr.Blocks(css=css) as app:
     
     with gr.Row():
         with gr.Column(scale=1):
-            gr.HTML("""
-            <div class="input-container">
-                <input type="text" id="prompt-text-input" placeholder="Describe lo que soñaste, no omitas ningún detalle." />
-                <span class="clear-button" onclick="document.getElementById('prompt-text-input').value=''">×</span>
-            </div>
-            """)
-            
+            with gr.Row():
+                text_prompt = gr.Textbox(
+                    label="¿Cuál fue tu sueño?", 
+                    placeholder="Describe lo que soñaste, no omitas ningún detalle.", 
+                    lines=2, 
+                    elem_id="prompt-text-input",
+                    container=True
+                )
+                clear_button = gr.Button("X", elem_id="clear-button", variant="secondary", size="sm")
+
             with gr.Accordion("Opciones Avanzadas", open=False):
                 negative_prompt = gr.Textbox(
                     label="¿Qué elementos no deseas que se plasmen de tu sueño?", 
@@ -198,7 +201,6 @@ 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)
             
             with gr.Row(elem_id="button-container"):
@@ -207,6 +209,7 @@ with gr.Blocks(css=css) as app:
         with gr.Column(scale=1):
             image_output = gr.Image(type="pil", label="Image Output", elem_id="gallery")
 
+    clear_button.click(clear_text_prompt, outputs=text_prompt)
     generate_button.click(query, inputs=[text_prompt, negative_prompt, steps, cfg, method, strength], outputs=image_output)
 
 app.launch(show_api=False, share=False)