Update modules/ui/views/landing_view.py
Browse files- modules/ui/views/landing_view.py +37 -91
modules/ui/views/landing_view.py
CHANGED
@@ -22,70 +22,21 @@ def get_asset_path(filename, asset_type='img_logo'):
|
|
22 |
asset_path = current_dir / 'assets' / asset_type / filename
|
23 |
return str(asset_path)
|
24 |
|
25 |
-
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
--color-border: #e0e0e0;
|
32 |
-
}
|
33 |
-
|
34 |
-
/* Sobreescribir los estilos por defecto de Gradio */
|
35 |
-
.dark button.primary-btn,
|
36 |
-
button.primary-btn {
|
37 |
-
background-color: var(--color-primary) !important;
|
38 |
-
border-color: var(--color-primary) !important;
|
39 |
-
color: white !important;
|
40 |
-
}
|
41 |
-
|
42 |
-
.dark button.secondary-btn,
|
43 |
-
button.secondary-btn {
|
44 |
-
background-color: var(--color-secondary) !important;
|
45 |
-
border-color: var(--color-secondary) !important;
|
46 |
-
color: white !important;
|
47 |
-
}
|
48 |
-
|
49 |
-
/* Sobreescribir los estilos de los tabs */
|
50 |
-
.tabs.svelte-1g805jl .tabitem.svelte-1g805jl.selected {
|
51 |
-
color: var(--color-primary) !important;
|
52 |
-
border-color: var(--color-primary) !important;
|
53 |
-
}
|
54 |
-
|
55 |
-
.tabs.svelte-1g805jl {
|
56 |
-
border-bottom-color: var(--color-secondary) !important;
|
57 |
-
}
|
58 |
-
|
59 |
-
/* Asegurar que los botones mantengan los colores al hacer hover */
|
60 |
-
.dark button.primary-btn:hover,
|
61 |
-
button.primary-btn:hover {
|
62 |
-
background-color: rgb(144, 0, 27) !important; /* Versi贸n m谩s oscura del rojo */
|
63 |
-
border-color: rgb(144, 0, 27) !important;
|
64 |
-
}
|
65 |
-
|
66 |
-
.dark button.secondary-btn:hover,
|
67 |
-
button.secondary-btn:hover {
|
68 |
-
background-color: rgb(5, 40, 79) !important; /* Versi贸n m谩s oscura del azul */
|
69 |
-
border-color: rgb(5, 40, 79) !important;
|
70 |
-
}
|
71 |
-
"""
|
72 |
-
|
73 |
-
# En los botones, aseg煤rate de que las clases se apliquen correctamente
|
74 |
-
login_button = gr.Button(
|
75 |
-
"Ingresar",
|
76 |
-
elem_classes="primary-btn",
|
77 |
-
variant="primary"
|
78 |
-
)
|
79 |
-
|
80 |
-
register_button = gr.Button(
|
81 |
-
"Enviar Solicitud",
|
82 |
-
elem_classes="secondary-btn",
|
83 |
-
variant="secondary"
|
84 |
-
)
|
85 |
|
86 |
-
with gr.Blocks(
|
87 |
-
|
88 |
-
|
|
|
|
|
|
|
|
|
|
|
89 |
# Header con logo
|
90 |
with gr.Column(elem_id="header-logo"):
|
91 |
gr.Image(
|
@@ -95,9 +46,10 @@ def get_asset_path(filename, asset_type='img_logo'):
|
|
95 |
container=False,
|
96 |
height=200
|
97 |
)
|
|
|
98 |
|
99 |
with gr.Row(elem_classes="container"):
|
100 |
-
# Primera columna (
|
101 |
with gr.Column(scale=1):
|
102 |
with gr.Tabs() as tabs:
|
103 |
# Tab de Login
|
@@ -115,11 +67,11 @@ def get_asset_path(filename, asset_type='img_logo'):
|
|
115 |
login_button = gr.Button(
|
116 |
"Ingresar",
|
117 |
variant="primary",
|
118 |
-
|
119 |
)
|
120 |
login_message = gr.Markdown()
|
121 |
|
122 |
-
# Tab de Registro
|
123 |
with gr.TabItem("Solicitud de Acceso", elem_classes="gr-form"):
|
124 |
with gr.Column():
|
125 |
name = gr.Textbox(
|
@@ -187,36 +139,30 @@ def get_asset_path(filename, asset_type='img_logo'):
|
|
187 |
outputs=register_message
|
188 |
)
|
189 |
|
190 |
-
# Segunda columna (
|
191 |
-
with gr.Column(scale=
|
192 |
-
with gr.Tabs(
|
193 |
with gr.TabItem("Introducci贸n"):
|
194 |
-
|
195 |
-
|
196 |
-
|
197 |
-
|
198 |
-
|
199 |
-
|
200 |
-
del an谩lisis visual de textos potenciado por distintas tecnolog铆as
|
201 |
-
de inteligencia artificial.
|
202 |
-
""")
|
203 |
-
# Aqu铆 puedes agregar im谩genes o videos con mejor dise帽o
|
204 |
|
205 |
with gr.TabItem("Tutorial"):
|
206 |
-
|
207 |
-
|
208 |
-
|
209 |
-
|
210 |
-
|
211 |
-
""")
|
212 |
|
213 |
with gr.TabItem("Ejemplos"):
|
214 |
-
|
215 |
-
|
216 |
-
|
217 |
-
|
218 |
-
|
219 |
-
""")
|
220 |
|
221 |
# Mantener la funcionalidad de navegaci贸n existente
|
222 |
start_button = gr.Button(visible=False)
|
|
|
22 |
asset_path = current_dir / 'assets' / asset_type / filename
|
23 |
return str(asset_path)
|
24 |
|
25 |
+
def create_landing_view():
|
26 |
+
"""Crea la vista de landing con tres columnas y header"""
|
27 |
+
# Para el logo
|
28 |
+
logo_path = get_asset_path('Logo_300x300.png', 'img_logo')
|
29 |
+
# Para iconos de social media.
|
30 |
+
social_icon_path = get_asset_path('twitter.png', 'img_social-media')
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
31 |
|
32 |
+
with gr.Blocks(
|
33 |
+
css="""
|
34 |
+
#header-logo {text-align: center; padding: 2rem 0;}
|
35 |
+
#header-logo img {max-width: 200px; height: auto;}
|
36 |
+
.container {max-width: 1200px; margin: 0 auto;}
|
37 |
+
.gr-form {border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px;}
|
38 |
+
"""
|
39 |
+
) as view:
|
40 |
# Header con logo
|
41 |
with gr.Column(elem_id="header-logo"):
|
42 |
gr.Image(
|
|
|
46 |
container=False,
|
47 |
height=200
|
48 |
)
|
49 |
+
#gr.Markdown("# Bienvenido a AIdeaText")
|
50 |
|
51 |
with gr.Row(elem_classes="container"):
|
52 |
+
# Primera columna - Tabs de Login y Registro (50%)
|
53 |
with gr.Column(scale=1):
|
54 |
with gr.Tabs() as tabs:
|
55 |
# Tab de Login
|
|
|
67 |
login_button = gr.Button(
|
68 |
"Ingresar",
|
69 |
variant="primary",
|
70 |
+
scale=0
|
71 |
)
|
72 |
login_message = gr.Markdown()
|
73 |
|
74 |
+
# Tab de Registro
|
75 |
with gr.TabItem("Solicitud de Acceso", elem_classes="gr-form"):
|
76 |
with gr.Column():
|
77 |
name = gr.Textbox(
|
|
|
139 |
outputs=register_message
|
140 |
)
|
141 |
|
142 |
+
# Segunda columna - Videos (50%)
|
143 |
+
with gr.Column(scale=1):
|
144 |
+
with gr.Tabs():
|
145 |
with gr.TabItem("Introducci贸n"):
|
146 |
+
gr.Markdown("""
|
147 |
+
### 驴Qu茅 es AIdeaText?
|
148 |
+
AIdeaText es una avanzada aplicaci贸n web dise帽ada para mejorar las habilidades de redacci贸n
|
149 |
+
y comprensi贸n lectora a trav茅s del an谩lisis visual de textos potenciado por distintas tecnolog铆as
|
150 |
+
de inteligencia artificial.
|
151 |
+
""")
|
|
|
|
|
|
|
|
|
152 |
|
153 |
with gr.TabItem("Tutorial"):
|
154 |
+
gr.Markdown("""
|
155 |
+
### C贸mo usar AIdeaText
|
156 |
+
Aprende a utilizar todas las funcionalidades de AIdeaText
|
157 |
+
para mejorar tu escritura acad茅mica.
|
158 |
+
""")
|
|
|
159 |
|
160 |
with gr.TabItem("Ejemplos"):
|
161 |
+
gr.Markdown("""
|
162 |
+
### Ejemplos de Uso
|
163 |
+
Mira ejemplos pr谩cticos de c贸mo AIdeaText puede ayudarte
|
164 |
+
en tus tareas de escritura.
|
165 |
+
""")
|
|
|
166 |
|
167 |
# Mantener la funcionalidad de navegaci贸n existente
|
168 |
start_button = gr.Button(visible=False)
|