Update app.py

app.py

@@ -1,312 +1,165 @@
 # -*- coding: utf-8 -*-
 import gradio as gr
 import os
-# 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
+from web_scraper_tool import WebScrapperTool 
 
-# CSS personalizado con estética minimalista profesional
+# CSS personalizado (sin cambios)
 custom_css = """
 /* Importar fuente Inter */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
-/* Variables globales */
 :root {
-    --primary-color: #8b5cf6;
-    --primary-hover: #7c3aed;
-    --secondary-color: #f8fafc;
-    --text-primary: #1e293b;
-    --text-secondary: #64748b;
-    --border-color: #e2e8f0;
-    --success-color: #10b981;
-    --error-color: #ef4444;
-    --warning-color: #f59e0b;
+    --primary-color: #8b5cf6; --primary-hover: #7c3aed; --secondary-color: #f8fafc;
+    --text-primary: #1e293b; --text-secondary: #64748b; --border-color: #e2e8f0;
+    --success-color: #10b981; --error-color: #ef4444; --warning-color: #f59e0b;
     --gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
-
-/* Reset y configuración base */
-* {
-    box-sizing: border-box;
-}
-
+* { box-sizing: border-box; }
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-    background: var(--gradient-bg);
-    margin: 0;
-    padding: 0;
-    min-height: 100vh;
+    background: var(--gradient-bg); margin: 0; padding: 0; min-height: 100vh;
 }
-
-/* Contenedor principal */
 .gradio-container {
-    max-width: 800px !important;
-    margin: 0 auto !important;
-    padding: 2rem 1rem !important;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
-    border-radius: 24px;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    margin-top: 2rem !important;
-    margin-bottom: 2rem !important;
+    max-width: 800px !important; margin: 0 auto !important; padding: 2rem 1rem !important;
+    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
+    border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    margin-top: 2rem !important; margin-bottom: 2rem !important;
 }
-
-/* Título principal */
 .gradio-container h1 {
-    color: var(--text-primary);
-    font-size: 2.5rem;
-    font-weight: 700;
-    text-align: center;
-    margin-bottom: 0.5rem;
+    color: var(--text-primary); font-size: 2.5rem; font-weight: 700; text-align: center; margin-bottom: 0.5rem;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
 }
-
-/* Subtítulo */
-.gradio-container p.subtitle { /* Añadido .subtitle para especificidad */
-    color: var(--text-secondary);
-    font-size: 1.125rem;
-    text-align: center;
-    margin-bottom: 2rem;
-    line-height: 1.6;
+.gradio-container p.subtitle {
+    color: var(--text-secondary); font-size: 1.125rem; text-align: center; margin-bottom: 2rem; line-height: 1.6;
 }
-
-/* Campos de entrada */
 .gr-textbox {
-    border: 2px solid var(--border-color) !important;
-    border-radius: 12px !important;
-    padding: 12px 16px !important;
-    font-size: 1rem !important;
-    transition: all 0.3s ease !important;
-    background: white !important;
+    border: 2px solid var(--border-color) !important; border-radius: 12px !important;
+    padding: 12px 16px !important; font-size: 1rem !important;
+    transition: all 0.3s ease !important; background: white !important;
 }
-
 .gr-textbox:focus {
     border-color: var(--primary-color) !important;
-    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
-    outline: none !important;
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important; outline: none !important;
 }
-
-/* Botones */
 .gr-button {
-    background: var(--primary-color) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 12px 24px !important;
-    font-size: 1rem !important;
-    font-weight: 600 !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    text-transform: none !important;
-    letter-spacing: 0.025em !important;
+    background: var(--primary-color) !important; color: white !important; border: none !important;
+    border-radius: 12px !important; padding: 12px 24px !important; font-size: 1rem !important;
+    font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important;
+    text-transform: none !important; letter-spacing: 0.025em !important;
 }
-
 .gr-button:hover {
-    background: var(--primary-hover) !important;
-    transform: translateY(-2px) !important;
+    background: var(--primary-hover) !important; transform: translateY(-2px) !important;
     box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.4) !important;
 }
-
-.gr-button:active {
-    transform: translateY(0) !important;
-}
-
-/* Radio buttons */
-.gr-radio {
-    margin: 1rem 0 !important;
-}
-
-.gr-radio label {
-    font-weight: 500 !important;
-    color: var(--text-primary) !important;
-}
-
-/* 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 */
+.gr-button:active { transform: translateY(0) !important; }
+.gr-radio { margin: 1rem 0 !important; }
+.gr-radio label { font-weight: 500 !important; color: var(--text-primary) !important; }
+.validation-output-container .gr-textbox textarea {
+    font-family: 'Inter', monospace !important; font-size: 0.9rem !important;
+    padding: 8px 12px !important; min-height: 40px !important;
 }
-
-/* Área de descarga */
 .gr-file {
-    border: 2px dashed var(--border-color) !important;
-    border-radius: 12px !important;
-    padding: 2rem !important;
-    text-align: center !important;
-    background: var(--secondary-color) !important;
-    transition: all 0.3s ease !important;
+    border: 2px dashed var(--border-color) !important; border-radius: 12px !important;
+    padding: 2rem !important; text-align: center !important;
+    background: var(--secondary-color) !important; transition: all 0.3s ease !important;
 }
-
 .gr-file:hover {
-    border-color: var(--primary-color) !important;
-    background: rgba(139, 92, 246, 0.05) !important;
+    border-color: var(--primary-color) !important; background: rgba(139, 92, 246, 0.05) !important;
 }
-
-/* Indicadores de progreso (si se usan explícitamente) */
-.progress-bar {
-    width: 100%;
-    height: 6px;
-    background: var(--border-color);
-    border-radius: 3px;
-    overflow: hidden;
-    margin: 1rem 0;
-}
-
-.progress-fill {
-    height: 100%;
-    background: var(--primary-color);
-    border-radius: 3px;
-    transition: width 0.3s ease;
-}
-
-/* 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;
-    color: var(--success-color) !important;
-    border-radius: 8px !important;
-    padding: 12px 16px !important;
-    margin: 1rem 0 !important;
-}
-
-.error-message {
-    background: rgba(239, 68, 68, 0.1) !important;
-    border: 1px solid var(--error-color) !important;
-    color: var(--error-color) !important;
-    border-radius: 8px !important;
-    padding: 12px 16px !important;
-    margin: 1rem 0 !important;
-}
-
-/* Responsive design */
+.progress-bar { width: 100%; height: 6px; background: var(--border-color); border-radius: 3px; overflow: hidden; margin: 1rem 0; }
+.progress-fill { height: 100%; background: var(--primary-color); border-radius: 3px; transition: width 0.3s ease; }
+.success-message { /* ... */ } .error-message { /* ... */ }
 @media (max-width: 768px) {
-    .gradio-container {
-        margin: 1rem !important;
-        padding: 1.5rem 1rem !important;
-        border-radius: 16px !important;
-    }
-
-    .gradio-container h1 {
-        font-size: 2rem !important;
-    }
-
-    .gradio-container p.subtitle {
-        font-size: 1rem !important;
-    }
+    .gradio-container { margin: 1rem !important; padding: 1.5rem 1rem !important; border-radius: 16px !important; }
+    .gradio-container h1 { font-size: 2rem !important; }
+    .gradio-container p.subtitle { font-size: 1rem !important; }
 }
-
-/* Footer */
 .footer {
-    text-align: center;
-    margin-top: 2rem;
-    padding-top: 2rem;
-    border-top: 1px solid var(--border-color);
-    color: var(--text-secondary);
-    font-size: 0.875rem;
-}
-
-/* Animaciones sutiles */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* 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;
+    text-align: center; margin-top: 2rem; padding-top: 2rem;
+    border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.875rem;
 }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+.gradio-container > div > .gr-form > * { animation: fadeIn 0.6s ease forwards; }
 """
 
-# Inicializar la herramienta de scraping
 scraper = WebScrapperTool()
 
 def validate_url_live(url: str):
-    """Valida la URL ingresada para actualización en vivo."""
     if not url or not url.strip():
-        # No mostrar error si está vacío, solo limpiar
-        return gr.Textbox(value="", placeholder="Estado de validación") 
-
+        return gr.Textbox(value="", placeholder="Estado de la URL", label="Estado de la URL") 
     try:
-        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)
+        normalized_url = scraper.normalize_url(url.strip())
+        return gr.Textbox(value=f"✅ URL normalizada: {normalized_url}", interactive=False, label="Estado de la URL")
     except Exception as e:
-        return gr.Textbox(value=f"⚠️ Posible problema con URL: {str(e)}", interactive=False)
+        return gr.Textbox(value=f"⚠️ Formato de URL inválido o necesita ajuste: {str(e)}", interactive=False, label="Estado de la URL")
 
 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.", None, "Ingresa una URL válida primero."
 
-    validation_message = ""
+    normalized_url_display_val = ""
     try:
         progress(0.1, desc="Normalizando URL...")
         normalized_url = scraper.normalize_url(url.strip())
-        validation_message = f"✅ URL normalizada: {normalized_url}"
+        normalized_url_display_val = f"URL procesada: {normalized_url}"
 
         progress(0.2, desc="Detectando tipo de contenido...")
         is_image = scraper.is_image_url(normalized_url)
-        content_type_detected = "🖼️ Imagen" if is_image else "📄 Página web"
+        # Una llamada _get_content preliminar podría ser muy costosa solo para tipo.
+        # Mejor basarse en la extensión y luego en headers durante el procesamiento real.
+        content_type_detected = "🖼️ Imagen (probable)" if is_image else "📄 Página web (probable)"
         
-        # 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á.
-
-        progress(0.4, desc=f"Extrayendo contenido ({format_choice})...")
+        progress(0.4, desc=f"Extrayendo contenido como {format_choice}...")
 
         if format_choice == "PDF":
             result = scraper.scrape_to_pdf(normalized_url)
-        else:  # TXT
+        else:
             result = scraper.scrape_to_text(normalized_url)
 
         progress(0.9, desc="Finalizando...")
 
         if result['status'] == 'success':
             progress(1.0, desc="¡Completado!")
-            success_msg = f"""✅ **Procesamiento exitoso**
+            # Tratar de obtener tipo de contenido del resultado si la herramienta lo provee explícitamente.
+            # Por ahora, nos basamos en la detección inicial.
+            success_msg = f"""## ✅ **Procesamiento exitoso**
 
-🔗 **URL procesada:** {result['url']}
-📁 **Archivo generado:** {os.path.basename(result['file'])}
-📊 **Tipo de contenido:** {content_type_detected}
-📄 **Formato de salida:** {format_choice}
+**🔗 URL original:** `{url}`
+**⚙️ URL procesada:** `{result['url']}`
+**📁 Archivo generado:** `{os.path.basename(result['file'])}`
+**📊 Tipo detectado (inicial):** `{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'], validation_message # Devolver mensaje de validación también
+💡 **Listo para Copilot:** El archivo está optimizado para ser procesado.
+"""
+            return success_msg, result['file'], f"✅ {normalized_url_display_val}"
         else:
-            error_msg = f"""❌ **Error en el procesamiento**
+            error_msg = f"""## ❌ **Error en el procesamiento**
 
-🔗 **URL:** {result.get('url', url)}
-⚠️ **Error:** {result['message']}
+**🔗 URL intentada:** `{result.get('url', url)}`
+**⚠️ Error:** `{result['message']}`
 
 💡 **Sugerencias:**
 - 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
+- Si es PDF y el error es por caracteres, intenta TXT.
+- Asegúrate que la URL apunte a contenido textual para TXT, o imagen/texto para PDF.
+"""
+            return error_msg, None, f"⚠️ Error con {url}. {normalized_url_display_val}"
 
     except Exception as e:
         import traceback
         tb_str = traceback.format_exc()
-        error_msg = f"""❌ **Error inesperado en la aplicación**
-
-⚠️ **Error:** {str(e)}
-📄 **Detalles:** {tb_str[:300]}...
+        error_msg = f"""## ❌ **Error inesperado en la aplicación**
 
-💡 **Intenta nuevamente o revisa la URL.**"""
-        return error_msg, None, validation_message if validation_message else f"Error antes de normalizar: {str(e)}"
+**⚠️ Error:** `{str(e)}`
+**📄 Detalles:**
+{tb_str[:400]}...
+💡 **Intenta nuevamente o revisa la URL. Si el problema persiste, revisa los logs del servidor.**
+"""
+        return error_msg, None, f"💥 Error crítico procesando {url}. {normalized_url_display_val if normalized_url_display_val else 'URL no pudo ser normalizada.'}"
 
-# Crear interfaz Gradio
 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;">
@@ -315,48 +168,42 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🕸️ Web Scrape
     </div>
     """)
 
-    with gr.Row():
+    with gr.Row(equal_height=False):
         with gr.Column(scale=3):
             url_input = gr.Textbox(
                 label="🔗 URL de la página web",
                 placeholder="Ej: https://www.ejemplo.com/articulo o www.clarin.com.ar",
-                info="Ingresa la URL completa incluyendo http:// o https:// si es posible.",
+                info="Ingresa la URL completa. Se intentará normalizar (ej. añadir https://).",
                 lines=1,
-                elem_id="url-input" # Para CSS si es necesario
+                elem_id="url-input"
             )
-
-        with gr.Column(scale=1, min_width=180): # Asegurar ancho mínimo para el radio
+        with gr.Column(scale=1, min_width=200):
             format_choice = gr.Radio(
                 choices=["PDF", "TXT"],
                 value="TXT",
                 label="📄 Formato de salida",
-                info="Ambos son compatibles con Copilot."
+                info="PDF para visual/imágenes, TXT para texto plano."
             )
     
-    # 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=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") 
-
-    process_btn = gr.Button("🚀 Extraer y Convertir", variant="primary", size="lg")
+    process_btn = gr.Button("🚀 Extraer y Convertir", variant="primary", size="lg", elem_id="process-button")
 
     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..."
+        result_output = gr.Markdown(
+            value="Esperando procesamiento...",
+            elem_id="result-markdown"
         )
         file_output = gr.File(
             label="📁 Archivo generado (haz clic para descargar)",
-            interactive=False # El usuario no sube, solo descarga
+            interactive=False,
+            elem_id="file-output"
         )
 
     gr.HTML("""
@@ -364,10 +211,11 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🕸️ Web Scrape
         <h3>ℹ️ Información de uso</h3>
         <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>Detección de contenido:</strong> Intenta identificar 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>
+            <li><strong>Formatos:</strong> PDF (preserva estructura visual si es texto, o imagen directa) y TXT (texto plano).</li>
+            <li><strong>Codificación:</strong> UTF-8 para TXT. Soporte Unicode para PDF con fuentes DejaVu (si están disponibles en el servidor) o Arial.</li>
+             <li><strong>Fuente PDF:</strong> Si `DejaVuSansCondensed.ttf` está en el directorio del servidor o en una carpeta `fonts`, se usará para mejor soporte Unicode en PDFs.</li>
         </ul>
         <p style="margin-top: 1rem; color: #64748b;">
             Desarrollado con ❤️ para facilitar la integración con herramientas de IA.
@@ -375,26 +223,23 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🕸️ Web Scrape
     </div>
     """)
 
-    # Configurar eventos
     url_input.change(
         fn=validate_url_live,
         inputs=[url_input],
         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_and_update_ui,
         inputs=[url_input, format_choice],
-        outputs=[result_output, file_output, validation_output_display] # También actualiza el display de validación
+        outputs=[result_output, file_output, validation_output_display]
     )
 
 if __name__ == "__main__":
     demo.launch(
-        server_name="0.0.0.0", # Escucha en todas las interfaces de red
-        server_port=7860,
-        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)
+        server_name="0.0.0.0",
+        server_port=int(os.environ.get('PORT', 7860)), # Para compatibilidad con plataformas que definen PORT
+        show_error=True,
+        debug=True, # Muestra más información en consola
+        # share=True # Descomentar para enlace público temporal si se ejecuta localmente y se quiere compartir
     )