# modules/ui/views/landing_view.py import gradio as gr import os from pathlib import Path from ...database.sql_db import store_application_request from datetime import datetime import uuid ########################################################## def get_asset_path(filename, asset_type='img_logo'): """ Obtiene la ruta completa de un asset Args: filename (str): Nombre del archivo asset_type (str): Tipo de asset ('img_logo', 'img_social-media', etc.) Returns: str: Ruta completa al asset """ current_dir = Path(__file__).parent.parent # sube a /modules/ui asset_path = current_dir / 'assets' / asset_type / filename return str(asset_path) def create_landing_view(): """Crea la vista de landing con header y distribución 25-75""" # Para el logo logo_path = get_asset_path('Logo_300x300.png', 'img_logo') with gr.Blocks( css=""" /* Variables de color corporativo */ :root { --color-primary: rgb(174, 0, 37); /* Rojo corporativo */ --color-secondary: rgb(7, 60, 99); /* Azul corporativo */ } /* Estilos del header */ #header-logo { text-align: center; padding: 2rem 0; margin-bottom: 2rem; } #header-logo img { max-width: 200px; height: auto; } /* Contenedor principal */ .container { max-width: 1400px; margin: 0 auto; padding: 0 1rem; } /* Estilos de formularios */ .gr-form { border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Estilos de botones */ .primary-btn { background-color: var(--color-primary) !important; color: white !important; } .secondary-btn { background-color: var(--color-secondary) !important; color: white !important; } /* Tabs personalizados */ .tabs { border-bottom-color: var(--color-secondary); } .tab-selected { color: var(--color-primary) !important; border-color: var(--color-primary) !important; } """ ) as view: # Header con logo with gr.Column(elem_id="header-logo"): gr.Image( value=logo_path, label=None, show_label=False, container=False, height=200 ) with gr.Row(elem_classes="container"): # Primera columna - Tabs de Login y Registro (25%) with gr.Column(scale=1): # scale=1 de 4 = 25% with gr.Tabs() as tabs: # Tab de Login with gr.TabItem("Iniciar Sesión", elem_classes="gr-form"): with gr.Column(): username = gr.Textbox( label="Usuario", placeholder="Ingrese su usuario" ) password = gr.Textbox( label="Contraseña", type="password", placeholder="Ingrese su contraseña" ) login_button = gr.Button( "Ingresar", variant="primary", elem_classes="primary-btn" ) login_message = gr.Markdown() # Tab de Registro ##################################################################### with gr.TabItem("Solicitud de Acceso", elem_classes="gr-form"): with gr.Column(): name = gr.Textbox( label="Nombre Completo", placeholder="Ej: Juan Pérez" ) email = gr.Textbox( label="Correo Electrónico", placeholder="ejemplo@dominio.com" ) institution = gr.Textbox( label="Institución", placeholder="Universidad, Colegio, Empresa, etc." ) role = gr.Dropdown( choices=[ "Estudiante", "Profesor", "Investigador", "Otro" ], label="Rol", value="Estudiante" ) reason = gr.TextArea( label="¿Por qué te interesa usar AIdeaText?", placeholder="Describe brevemente tu interés en la plataforma...", lines=4 ) register_button = gr.Button( "Enviar Solicitud", variant="secondary", scale=0 ) register_message = gr.Markdown() def handle_registration(name, email, institution, role, reason): try: if not all([name, email, institution, role, reason]): return gr.Markdown("❌ Todos los campos son obligatorios") if "@" not in email or "." not in email: return gr.Markdown("❌ El correo electrónico no es válido") success = store_application_request( name=name, email=email, institution=institution, current_role=role, desired_role=role, reason=reason ) if success: return gr.Markdown("✅ Solicitud enviada correctamente. Te contactaremos pronto.") else: return gr.Markdown("❌ Error al enviar la solicitud. Por favor, intenta nuevamente.") except Exception as e: return gr.Markdown(f"❌ Error: {str(e)}") register_button.click( fn=handle_registration, inputs=[name, email, institution, role, reason], outputs=register_message ) # Segunda columna - Videos (75%) with gr.Column(scale=3): # scale=3 de 4 = 75% with gr.Tabs(): with gr.TabItem("Introducción"): # Contenedor para imágenes/videos con mejor estilo with gr.Box(): gr.Markdown(""" ### ¿Qué es AIdeaText? AIdeaText es una avanzada aplicación web diseñada para mejorar las habilidades de redacción y comprensión lectora a través del análisis visual de textos potenciado por distintas tecnologías de inteligencia artificial. """) # Aquí puedes agregar imágenes o videos con mejor diseñ with gr.TabItem("Tutorial"): gr.Markdown(""" ### Cómo usar AIdeaText Aprende a utilizar todas las funcionalidades de AIdeaText para mejorar tu escritura académica. """) with gr.TabItem("Ejemplos"): gr.Markdown(""" ### Ejemplos de Uso Mira ejemplos prácticos de cómo AIdeaText puede ayudarte en tus tareas de escritura. """) # Mantener la funcionalidad de navegación existente start_button = gr.Button(visible=False) return view, login_button