Update app.py

app.py

@@ -62,54 +62,21 @@ def generate_response(message, history):
     
     return response
 
-# CSS personalizado para arreglar estilos: layout centrado, chat responsive, botones alineados, evita descuadre en móviles/escritorio
-custom_css = """
-#chatbot {
-    height: 600px !important; /* Altura fija para evitar descuadre */
-    max-width: 800px; /* Ancho máximo para centrar */
-    margin: 0 auto; /* Centrar el chat */
-    border: 1px solid #ccc; /* Borde para visual */
-    border-radius: 8px; /* Bordes redondeados */
-    overflow: hidden; /* Evita overflow */
-}
-.gradio-container {
-    max-width: 900px; /* Contenedor principal centrado */
-    margin: 0 auto;
-    padding: 20px;
-}
-.textbox, .button {
-    width: 100% !important; /* Asegura que input y botones ocupen todo el ancho */
-}
-@media (max-width: 600px) {
-    #chatbot {
-        height: 400px !important; /* Ajuste para móviles */
-    }
-}
-"""
-
-with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("# Gemma-3-4B-IT Chat en ZeroGPU\nChatbot con google/gemma-3-4b-it. Estilos arreglados para evitar descuadre.")
-    
-    chatbot = gr.Chatbot(elem_id="chatbot")
-    msg = gr.Textbox(placeholder="Escribe tu mensaje...", label="Mensaje")
-    clear = gr.Button("Limpiar")
-    
-    def respond(message, chat_history):
-        bot_message = generate_response(message, chat_history)
-        chat_history.append((message, bot_message))
-        return "", chat_history
-    
-    msg.submit(respond, [msg, chatbot], [msg, chatbot])
-    clear.click(lambda: ([], ""), None, chatbot)
-    
-    gr.Examples(
-        examples=[
-            ["Hola, ¿cómo estás?"],
-            ["Explica qué es la IA."],
-            ["Cuéntame un chiste."]
-        ],
-        inputs=[msg]
-    )
+# DISEÑO STANDARD GENERICO: Usando gr.ChatInterface sin CSS custom para evitar errores de estilos/404
+demo = gr.ChatInterface(
+    fn=generate_response,
+    title="Gemma-3-4B-IT Chat",
+    description="Chatbot con google/gemma-3-4b-it en ZeroGPU. Diseño por defecto de Gradio.",
+    examples=[
+        ["Hola, ¿cómo estás?"],
+        ["Explica qué es la IA."],
+        ["Cuéntame un chiste."]
+    ],
+    cache_examples=True,
+    retry_btn="Reintentar",
+    undo_btn="Deshacer",
+    clear_btn="Limpiar chat"
+)
 
 if __name__ == "__main__":
     demo.launch()