Update app.py

app.py

@@ -1,8 +1,8 @@
 # -*- coding: utf-8 -*-
 import gradio as gr
 import os
-# import tempfile # No se usa directamente aquí, pero podría ser usado por WebScrapperTool
-from web_scraper_tool import WebScrapperTool # Asegúrate que este archivo también esté en UTF-8 si tiene strings
+# import tempfile # No se usa directamente aquí, pero es usado por WebScrapperTool
+from web_scraper_tool import WebScrapperTool # Asegúrate que este archivo también esté en UTF-8
 
 # CSS personalizado con estética minimalista profesional
 custom_css = """
@@ -63,7 +63,7 @@ body {
 }
 
 /* Subtítulo */
-.gradio-container p {
+.gradio-container p.subtitle { /* Añadido .subtitle para especificidad */
     color: var(--text-secondary);
     font-size: 1.125rem;
     text-align: center;
@@ -122,9 +122,12 @@ body {
     color: var(--text-primary) !important;
 }
 
-/* Mensajes de estado */
-.gr-textbox[data-testid="textbox"] {
+/* Mensajes de estado (validation_output) */
+.validation-output-container .gr-textbox textarea { /* Específico para el output de validación */
     font-family: 'Inter', monospace !important;
+    font-size: 0.9rem !important;
+    padding: 8px 12px !important; /* Más pequeño */
+    min-height: 40px !important; /* Altura ajustada */
 }
 
 /* Área de descarga */
@@ -142,7 +145,7 @@ body {
     background: rgba(139, 92, 246, 0.05) !important;
 }
 
-/* Indicadores de progreso */
+/* Indicadores de progreso (si se usan explícitamente) */
 .progress-bar {
     width: 100%;
     height: 6px;
@@ -159,7 +162,7 @@ body {
     transition: width 0.3s ease;
 }
 
-/* Estados de mensajes */
+/* Estados de mensajes (no se usan clases directas, pero se mantienen por si acaso) */
 .success-message {
     background: rgba(16, 185, 129, 0.1) !important;
     border: 1px solid var(--success-color) !important;
@@ -190,7 +193,7 @@ body {
         font-size: 2rem !important;
     }
 
-    .gradio-container p {
+    .gradio-container p.subtitle {
         font-size: 1rem !important;
     }
 }
@@ -217,7 +220,8 @@ body {
     }
 }
 
-.gradio-container > * {
+/* Aplicar animación a elementos principales dentro del contenedor */
+.gradio-container > div > .gr-form > * { /* Más específico para los bloques de Gradio */
     animation: fadeIn 0.6s ease forwards;
 }
 """
@@ -225,40 +229,40 @@ body {
 # Inicializar la herramienta de scraping
 scraper = WebScrapperTool()
 
-def validate_url(url):
-    """Valida la URL ingresada"""
+def validate_url_live(url: str):
+    """Valida la URL ingresada para actualización en vivo."""
     if not url or not url.strip():
-        return False, "❌ Por favor ingresa una URL válida"
+        # No mostrar error si está vacío, solo limpiar
+        return gr.Textbox(value="", placeholder="Estado de validación") 
 
     try:
-        normalized = scraper.normalize_url(url.strip())
-        return True, f"✅ URL válida: {normalized}"
+        normalized_url = scraper.normalize_url(url)
+        # Aquí podrías añadir una comprobación rápida de conexión si quieres,
+        # pero normalize_url no hace llamadas de red.
+        return gr.Textbox(value=f"✅ URL normalizada (lista para procesar): {normalized_url}", interactive=False)
     except Exception as e:
-        return False, f"❌ Error en URL: {str(e)}"
+        return gr.Textbox(value=f"⚠️ Posible problema con URL: {str(e)}", interactive=False)
 
-def process_url(url, format_choice, progress=gr.Progress()):
-    """Procesa la URL y genera el archivo en el formato seleccionado"""
+def process_url_and_update_ui(url: str, format_choice: str, progress=gr.Progress(track_tqdm=True)):
+    """Procesa la URL y genera el archivo en el formato seleccionado, actualizando la UI."""
     if not url or not url.strip():
-        return "❌ Por favor ingresa una URL válida", None
+        return "❌ Por favor ingresa una URL.", None, "Ingresa una URL válida primero."
 
+    validation_message = ""
     try:
-        # Validar URL
-        progress(0.1, desc="Validando URL...")
-        is_valid, message = validate_url(url)
-        if not is_valid:
-            return message, None
-
-        # Normalizar URL
-        progress(0.2, desc="Normalizando URL...")
+        progress(0.1, desc="Normalizando URL...")
         normalized_url = scraper.normalize_url(url.strip())
+        validation_message = f"✅ URL normalizada: {normalized_url}"
 
-        # Detectar tipo de contenido
-        progress(0.3, desc="Detectando tipo de contenido...")
+        progress(0.2, desc="Detectando tipo de contenido...")
         is_image = scraper.is_image_url(normalized_url)
-        content_type = "🖼️ Imagen" if is_image else "📄 Página web"
+        content_type_detected = "🖼️ Imagen" if is_image else "📄 Página web"
+        
+        # Actualizar el textbox de validación con la URL normalizada
+        # Esto no se puede hacer directamente desde aquí si validate_url_live es el único que lo actualiza.
+        # En su lugar, el mensaje de resultado lo incluirá.
 
-        # Procesar según formato seleccionado
-        progress(0.5, desc=f"Extrayendo contenido ({format_choice})...")
+        progress(0.4, desc=f"Extrayendo contenido ({format_choice})...")
 
         if format_choice == "PDF":
             result = scraper.scrape_to_pdf(normalized_url)
@@ -273,12 +277,11 @@ def process_url(url, format_choice, progress=gr.Progress()):
 
 🔗 **URL procesada:** {result['url']}
 📁 **Archivo generado:** {os.path.basename(result['file'])}
-📊 **Tipo de contenido:** {content_type}
+📊 **Tipo de contenido:** {content_type_detected}
 📄 **Formato de salida:** {format_choice}
 
-💡 **Listo para Copilot:** El archivo está optimizado para ser procesado por Microsoft Copilot"""
-
-            return success_msg, result['file']
+💡 **Listo para Copilot:** El archivo está optimizado para ser procesado por Microsoft Copilot."""
+            return success_msg, result['file'], validation_message # Devolver mensaje de validación también
         else:
             error_msg = f"""❌ **Error en el procesamiento**
 
@@ -286,28 +289,29 @@ def process_url(url, format_choice, progress=gr.Progress()):
 ⚠️ **Error:** {result['message']}
 
 💡 **Sugerencias:**
-- Verifica que la URL esté accesible
-- Intenta con una URL diferente
-- Algunos sitios pueden bloquear el scraping automático"""
-
-            return error_msg, None
+- Verifica que la URL sea accesible y correcta.
+- Intenta con una URL diferente.
+- Algunos sitios pueden bloquear el scraping.
+- Si es PDF, el contenido podría tener caracteres no soportados (intenta TXT)."""
+            return error_msg, None, validation_message
 
     except Exception as e:
-        error_msg = f"""❌ **Error inesperado**
+        import traceback
+        tb_str = traceback.format_exc()
+        error_msg = f"""❌ **Error inesperado en la aplicación**
 
 ⚠️ **Error:** {str(e)}
+📄 **Detalles:** {tb_str[:300]}...
 
-💡 **Intenta nuevamente con una URL diferente**"""
-
-        return error_msg, None
+💡 **Intenta nuevamente o revisa la URL.**"""
+        return error_msg, None, validation_message if validation_message else f"Error antes de normalizar: {str(e)}"
 
 # Crear interfaz Gradio
-# LA LÍNEA CRÍTICA ESTÁ AQUÍ: theme=gr.themes.Soft()
 with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🕸️ Web Scraper Tool") as demo:
     gr.HTML("""
     <div style="text-align: center; margin-bottom: 2rem;">
         <h1>🕸️ Web Scraper Tool</h1>
-        <p>Extrae contenido de páginas web y conviértelo a formatos compatibles con Microsoft Copilot</p>
+        <p class="subtitle">Extrae contenido de páginas web y conviértelo a formatos compatibles con Microsoft Copilot</p>
     </div>
     """)
 
@@ -315,86 +319,82 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🕸️ Web Scrape
         with gr.Column(scale=3):
             url_input = gr.Textbox(
                 label="🔗 URL de la página web",
-                placeholder="https://ejemplo.com o Https://EJEMPLO.com (mayúsculas OK)",
-                info="Soporta URLs con cualquier formato de mayúsculas/minúsculas",
-                lines=1
+                placeholder="Ej: https://www.ejemplo.com/articulo o www.clarin.com.ar",
+                info="Ingresa la URL completa incluyendo http:// o https:// si es posible.",
+                lines=1,
+                elem_id="url-input" # Para CSS si es necesario
             )
 
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, min_width=180): # Asegurar ancho mínimo para el radio
             format_choice = gr.Radio(
                 choices=["PDF", "TXT"],
                 value="TXT",
                 label="📄 Formato de salida",
-                info="Ambos formatos son compatibles con Copilot"
+                info="Ambos son compatibles con Copilot."
             )
-
-    # Botón de validación en tiempo real
-    validate_btn = gr.Button("🔍 Validar URL", variant="secondary", size="sm")
-    validation_output = gr.Textbox(
-        label="Estado de validación",
+    
+    # Textbox para mostrar el estado de validación/normalización en vivo
+    # Usamos elem_classes para aplicar CSS específico si es necesario
+    validation_output_display = gr.Textbox(
+        label="Estado de la URL",
         interactive=False,
-        show_label=False
+        show_label=True, # Mostrar la etiqueta
+        placeholder="La URL normalizada o mensajes de validación aparecerán aquí...",
+        lines=1,
+        elem_classes=["validation-output-container"] 
     )
+    
+    # No se necesita botón de validación separado si se hace en vivo con url_input.change
+    # validate_btn = gr.Button("🔍 Validar URL", variant="secondary", size="sm") 
 
-    # Botón principal de procesamiento
     process_btn = gr.Button("🚀 Extraer y Convertir", variant="primary", size="lg")
 
-    # Área de resultados
-    with gr.Row():
-        with gr.Column(scale=2):
-            result_output = gr.Textbox(
-                label="📊 Resultado del procesamiento",
-                lines=8,
-                interactive=False
-            )
+    with gr.Accordion("📊 Resultado del Procesamiento y Archivo", open=True):
+        result_output = gr.Markdown( # Usar Markdown para mejor formato de mensajes
+            label="Mensaje de Resultado",
+            value="Esperando procesamiento..."
+        )
+        file_output = gr.File(
+            label="📁 Archivo generado (haz clic para descargar)",
+            interactive=False # El usuario no sube, solo descarga
+        )
 
-        with gr.Column(scale=1):
-            file_output = gr.File(
-                label="📁 Archivo generado",
-                interactive=False
-            )
-
-    # Información adicional
     gr.HTML("""
     <div class="footer">
         <h3>ℹ️ Información de uso</h3>
-        <ul style="text-align: left; max-width: 600px; margin: 0 auto;">
-            <li><strong>URLs flexibles:</strong> Funciona con cualquier formato (HTTP, HTTPS, con/sin www)</li>
-            <li><strong>Detección automática:</strong> Identifica si el contenido es una imagen o texto</li>
-            <li><strong>Optimizado para Copilot:</strong> Los archivos generados están formateados para Microsoft Copilot</li>
-            <li><strong>Formatos soportados:</strong> PDF (con formato visual) y TXT (texto plano)</li>
+        <ul style="text-align: left; max-width: 600px; margin: 0 auto; padding-left: 20px;">
+            <li><strong>URLs flexibles:</strong> Intenta normalizar URLs incompletas (e.g., añadiendo https://).</li>
+            <li><strong>Detección de contenido:</strong> Identifica si la URL es una imagen o una página web.</li>
+            <li><strong>Optimizado para Copilot:</strong> Los archivos generados buscan compatibilidad.</li>
+            <li><strong>Formatos:</strong> PDF (preserva algo de estructura visual si es texto, o imagen directa) y TXT (texto plano).</li>
+            <li><strong>Codificación:</strong> Se usa UTF-8 para TXT y se intenta el mejor soporte Unicode para PDF con fuentes DejaVu (si están disponibles) o Arial.</li>
         </ul>
         <p style="margin-top: 1rem; color: #64748b;">
-            Desarrollado con ❤️ para maximizar la compatibilidad con herramientas de IA
+            Desarrollado con ❤️ para facilitar la integración con herramientas de IA.
         </p>
     </div>
     """)
 
     # Configurar eventos
-    validate_btn.click(
-        fn=lambda url: validate_url(url)[1],
+    url_input.change(
+        fn=validate_url_live,
         inputs=[url_input],
-        outputs=[validation_output]
+        outputs=[validation_output_display],
+        # Trigger más rápido para sensación de "en vivo"
+        # every=0.5 # Descomentar si se quiere validación periódica mientras se escribe, puede ser mucho
     )
 
     process_btn.click(
-        fn=process_url,
+        fn=process_url_and_update_ui,
         inputs=[url_input, format_choice],
-        outputs=[result_output, file_output]
-    )
-
-    # Validación automática al cambiar la URL
-    url_input.change(
-        fn=lambda url: validate_url(url)[1] if url else "",
-        inputs=[url_input],
-        outputs=[validation_output]
+        outputs=[result_output, file_output, validation_output_display] # También actualiza el display de validación
     )
 
-# Configuración para Hugging Face Spaces
 if __name__ == "__main__":
     demo.launch(
-        server_name="0.0.0.0",
+        server_name="0.0.0.0", # Escucha en todas las interfaces de red
         server_port=7860,
-        show_error=True,
-        share=False # Cambia a True si quieres un enlace público temporal para probar
+        show_error=True,      # Muestra errores detallados en la consola y navegador
+        debug=True,           # Habilita modo debug de Gradio
+        # share=True # Cambia a True si necesitas un enlace público temporal (expira en 72h)
     )