Update app.py

app.py

@@ -31,18 +31,11 @@ def generate_headlines(number_of_headlines, target_audience, product):
             }
         ]
     )
-    
-    # Extrae el contenido de texto limpio
-    content = message.content
-    return content
+    return message.content
 
 # Configura la interfaz de usuario con Gradio
 def gradio_generate_headlines(number_of_headlines, target_audience, product):
-    # Obtiene el texto limpio de los titulares generados
-    result = generate_headlines(number_of_headlines, target_audience, product)
-    
-    # Formatea el texto para que aparezca como Markdown
-    return f"Estos son los {number_of_headlines} titulares atractivos diseñados específicamente para el público objetivo que describiste:\n\n{result}"
+    return generate_headlines(number_of_headlines, target_audience, product)
 
 # Define los colores de la interfaz según el logo de Anthropic (ejemplo)
 logo_colors = {
@@ -51,27 +44,11 @@ logo_colors = {
     "text_color": "#212529"
 }
 
-with gr.Blocks(css="""
-    .gradio-container { background-color: """ + logo_colors["background"] + """; }
-    .input-col, .result-col { display: flex; flex-direction: column; }
-    .result-col { align-items: flex-end; }
-    @media (max-width: 768px) {
-        .gradio-column {
-            width: 100% !important;
-            margin-bottom: 20px;
-        }
-    }
-    @media (min-width: 769px) {
-        .gradio-row {
-            display: flex;
-            flex-wrap: wrap;
-        }
-        .gradio-column {
-            flex: 1;
-            padding: 10px;
-        }
-    }
-    """) as demo:
+with gr.Blocks(css=f"""
+    .gradio-container {{ background-color: {logo_colors['background']}; }}
+    .headline-output {{ white-space: pre-line; text-align: left; font-size: 16px; padding: 10px; border: 1px solid {logo_colors['primary']}; border-radius: 5px; }}
+    .gradio-button {{ margin-top: 10px; }}
+""") as demo:
     gr.Markdown(
         f"""
         <h1 style="color: {logo_colors['primary']}; text-align: center;">Generador de Titulares</h1>
@@ -80,14 +57,13 @@ with gr.Blocks(css="""
     )
     
     with gr.Row():
-        with gr.Column(scale=2, elem_id="input-col"):
+        with gr.Column():
             number_of_headlines = gr.Number(label="Número de Titulares", value=5)
             target_audience = gr.Textbox(label="Público Objetivo", placeholder="Ejemplo: Estudiantes Universitarios")
             product = gr.Textbox(label="Producto", placeholder="Ejemplo: Curso de Inglés")
-        
-        with gr.Column(scale=1, elem_id="result-col"):
-            submit_btn = gr.Button("Generar Titulares", elem_id="submit-btn")
-            output = gr.Textbox(label="Titulares Generados", lines=10)
+            submit_btn = gr.Button("Generar Titulares", elem_id="submit-btn", css_class="gradio-button")
+    
+    output = gr.Textbox(label="Titulares Generados", lines=10, css_class="headline-output")
 
     submit_btn.click(
         fn=gradio_generate_headlines,