Update app.py

app.py

@@ -3,6 +3,7 @@ from mtranslate import translate
 from bs4 import BeautifulSoup, NavigableString
 import re
 import uuid
+import time  # Simulación de carga
 
 # Diccionario de idiomas
 lang_dict = {
@@ -48,46 +49,58 @@ def translate_html_content(text, source_lang, target_lang):
 
             node.replace_with(translated_text)
 
-    # Asegurar espacios alrededor de etiquetas de bloque
-    for element in soup.find_all(['p', 'span', 'b', 'strong']):
-        if element.previous_sibling and isinstance(element.previous_sibling, NavigableString):
-            element.insert_before(NavigableString(' '))  # Añadir espacio antes si no hay
-        if element.next_sibling and isinstance(element.next_sibling, NavigableString):
-            element.insert_after(NavigableString(' '))  # Añadir espacio después si no hay
-
     return str(soup)
 
 def main(Texto, source_lang, target_lang):
     source_code = lang_dict[source_lang]
     target_code = lang_dict[target_lang]
-    
+
+    # Simulación de tiempo de procesamiento para UX mejorada
+    time.sleep(2)
+
     translated_text = translate_html_content(Texto, source_code, target_code)
     element_id = f"text-{uuid.uuid4()}"
 
     html_output = f"""
-    <div style="position: relative; min-height: 100px;">
-        <div id="translated-content">{translated_text}</div>
+    <div style="position: relative; min-height: 100px; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
+        <div id="translated-content" style="font-family: Arial, sans-serif; font-size: 16px;">{translated_text}</div>
         <textarea id="{element_id}" style="display: none;">{translated_text}</textarea>
         <button onclick="navigator.clipboard.writeText(document.getElementById('{element_id}').value).then(() => alert('Texto copiado'))" 
-            style="position: absolute; top: 0; right: 0; padding: 5px; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 4px; cursor: pointer;">
-            📋 Copiar
+            style="margin-top: 10px; padding: 5px 10px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
+            📋 Copiar Traducción
         </button>
     </div>
     """
     return html_output
 
-# Configuración de la interfaz
-iface = gr.Interface(
-    fn=main,
-    inputs=[
-        "text",
-        gr.Dropdown(source_lang_list, value="Auto", label="Idioma origen"),
-        gr.Dropdown(lang_list, value="Español", label="Idioma destino")
-    ],
-    outputs="html",
-    title="Traducción sin límites",
-    description="Ingresa el texto que deseas traducir y selecciona los idiomas. ¡No hay límites!",
-    article="Desarrollada por © Artxe Web"
-)
-
-iface.launch()
+# --- INTERFAZ MEJORADA ---
+title = """<h1 align="center">🌍 Traductor Inteligente de HTML 🌍</h1>"""
+description = """<h3 align="center">💬 Traduce contenido HTML sin perder el formato. 🚀</h3>"""
+
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue")) as demo:
+    gr.HTML(title)
+    gr.HTML(description)
+
+    with gr.Row():
+        with gr.Column():
+            Texto = gr.Textbox(label="Introduce tu HTML aquí", placeholder="Escribe o pega un texto con HTML...", lines=10)
+        with gr.Column():
+            output = gr.HTML(label="Texto traducido")
+
+    with gr.Row():
+        source_lang = gr.Dropdown(source_lang_list, value="Auto", label="Idioma de origen")
+        target_lang = gr.Dropdown(lang_list, value="Español", label="Idioma de destino")
+
+    with gr.Row():
+        translate_btn = gr.Button("🌎 Traducir")
+        clear_btn = gr.Button("🧹 Limpiar")
+
+    # Indicador de carga
+    status = gr.Textbox(label="Estado", interactive=False, visible=False)
+
+    # Conectar eventos
+    translate_btn.click(main, [Texto, source_lang, target_lang], output, show_progress=True)
+    clear_btn.click(lambda: "", [], Texto)
+
+# Activa el modo streaming para mejor experiencia
+demo.queue().launch(debug=True)