Hugging Face's logo

Spaces:
doctorlinux
/
informe1
Running

App Files Community
doctorlinux commited on
Commit
6676164
·
verified ·
1 Parent(s): b94acfe

Upload 2 files

Browse files
Files changed (2) hide show
  1. Informe_Clase_IA_G120L2_v3_2.html +283 -0
  2. index.html +283 -19
Informe_Clase_IA_G120L2_v3_2.html ADDED
@@ -0,0 +1,283 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <meta name="description" content="Informe académico sobre Inteligencia Artificial Intermedia">
7
+ <meta name="keywords" content="IA, PLN, AWS, Hugging Face, Análisis de Sentimientos">
8
+ <meta name="author" content="Martha Lasso Collantes, Jorge Enrique Barón">
9
+ <title>Informe de Clase – IA (G120L2 v3.2)</title>
10
+ <style>
11
+ :root { --bg: #f7fafc; --card:#ffffff; --text:#1a202c; --muted:#4a5568; --accent:#2563eb; --accent-2:#059669; --border:#e2e8f0; --link:#2563eb; }
12
+ [data-theme="dark"] { --bg: #0b0d10; --card:#12161b; --text:#e8edf2; --muted:#9fb3c8; --accent:#4fb3ff; --accent-2:#7cf29c; --border:#1e252d; --link:#62d0ff; }
13
+ html,body { margin:0; background:var(--bg); color:var(--text); font-family: system-ui, sans-serif; scroll-behavior: smooth; }
14
+ nav { position:fixed; top:0; left:0; bottom:0; width:250px; background:var(--card); border-right:1px solid var(--border); padding:20px; z-index:100; }
15
+ main { margin-left:260px; padding:20px; max-width:1100px; }
16
+ h1,h2,h3 { margin-top:0; }
17
+ .card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin:16px 0; transition: all 0.3s ease; }
18
+ .card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
19
+ .banner { margin:16px 0; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
20
+ .btn { display:inline-block; padding:8px 14px; margin:6px 0; border-radius:10px; border:1px solid var(--border); background: var(--accent); color:#fff; text-decoration:none; transition: all 0.3s ease; }
21
+ .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,.25); }
22
+ .toc a { display:block; margin:6px 0; text-decoration:none; color:var(--link); padding:4px 8px; border-radius:6px; transition: all 0.2s ease; }
23
+ .toc a:hover { background: rgba(37, 99, 235, 0.1); }
24
+ .toc a.active { font-weight:bold; background:var(--accent); color:white; }
25
+ .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
26
+ @media (max-width:900px) { .grid2 { grid-template-columns:1fr; } main{ margin-left:0; } nav{ position:static; width:auto; height:auto; } }
27
+ .footer { font-size:14px; color:var(--muted); margin-top:20px; text-align:center; padding-top:20px; border-top:1px solid var(--border); }
28
+ body.focus nav { display:none; } body.focus main { margin-left:0; }
29
+ p, li { line-height:1.6; } section { margin-bottom:2rem; }
30
+ .demo-card { background:var(--bg); padding:1rem; margin:1rem 0; border-radius:8px; border-left:4px solid var(--accent); }
31
+ .demo-card h3 { margin-top:0; color:var(--accent); }
32
+ .back-to-top { position:fixed; bottom:20px; right:20px; padding:10px 15px; border-radius:50%; background:var(--accent); color:white; border:none; cursor:pointer; display:none; z-index:1000; }
33
+ .back-to-top:hover { transform:translateY(-2px); }
34
+ .narrador-controls { margin-top:10px; padding:10px; background:var(--bg); border-radius:8px; }
35
+ .narrador-controls label { display:block; margin-bottom:5px; font-size:0.9rem; }
36
+ .narrador-controls input[type="range"] { width:100%; }
37
+ @media print { nav, .btn, .back-to-top { display:none !important; } main { margin-left:0 !important; } .card { border:1px solid #000 !important; } a::after { content:" (" attr(href) ")"; } }
38
+ </style>
39
+ </head>
40
+ <body>
41
+ <nav role="navigation" aria-label="Navegación principal">
42
+ <h2>Secciones</h2>
43
+ <div class="toc">
44
+ <a href="#intro" class="active">Introducción</a>
45
+ <a href="#obj">Objetivos</a>
46
+ <a href="#temas">Temas vistos</a>
47
+ <a href="#ejercicios">Ejercicios</a>
48
+ <a href="#herramientas">Herramientas</a>
49
+ <a href="#como">Cómo se logró</a>
50
+ <a href="#creditos">Créditos</a>
51
+ </div>
52
+ <div style="margin-top:20px;">
53
+ <button onclick="toggleTheme()">🌗 Tema</button>
54
+ <button onclick="toggleFocus()">🎤 Presentación</button>
55
+ </div>
56
+ <div class="narrador-controls">
57
+ <div style="margin-top:10px;">
58
+ <button onclick="leerSeccion()">🔊 Leer sección</button>
59
+ <button onclick="detener()">⏹️ Detener</button>
60
+ </div>
61
+ <label for="velocidad">Velocidad: <span id="valor-velocidad">1x</span></label>
62
+ <input type="range" min="0.5" max="2" step="0.1" value="1" id="velocidad">
63
+ </div>
64
+ </nav>
65
+
66
+ <main role="main">
67
+ <header role="banner">
68
+ <h1 id="main-title">Informe de Clase IA – Versión 3.2</h1>
69
+
70
+ <!-- BANNER CORREGIDO - TÍTULO COMPLETO -->
71
+ <div class="banner" style="background:transparent;">
72
+ <svg role="img" aria-labelledby="banner-title banner-desc" viewBox="0 0 1200 220" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
73
+ <title id="banner-title">Informe de Inteligencia Artificial</title>
74
+ <desc id="banner-desc">Curso G120L2 sobre PLN, Análisis de Sentimientos y AWS AI/ML</desc>
75
+ <defs>
76
+ <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
77
+ <stop offset="0%" stop-color="#4fb3ff"/>
78
+ <stop offset="100%" stop-color="#7cf29c"/>
79
+ </linearGradient>
80
+ </defs>
81
+ <rect width="1200" height="220" fill="#0f172a"/>
82
+ <!-- TÍTULO CORREGIDO: "Informe" completo -->
83
+ <text x="28" y="80" fill="url(#g1)" font-size="26" font-weight="700">
84
+ Informe de Clase IA – G120L2 • Inteligencia Artificial Intermedio
85
+ </text>
86
+ <text x="28" y="120" fill="#94a3b8" font-size="16">
87
+ PLN • Análisis de Sentimientos • AWS AI/ML • Python • Gradio
88
+ </text>
89
+ <text x="28" y="160" fill="#cbd5e1" font-size="14">
90
+ Autores: Martha Lasso Collantes, Jorge Enrique Barón — Septiembre 25 de 2025
91
+ </text>
92
+ </svg>
93
+ </div>
94
+ </header>
95
+
96
+ <section id="intro" class="card">
97
+ <h2>Introducción</h2>
98
+ <p>En este curso se integró teoría y práctica para comprender el <b>Procesamiento del Lenguaje Natural (PLN)</b>, el <b>Análisis de Sentimientos</b> y reconocer <b>servicios de IA en AWS</b>, conectando conceptos con ejercicios ejecutables en la web.</p>
99
+ </section>
100
+
101
+ <section id="obj" class="card">
102
+ <h2>Objetivos</h2>
103
+ <ul>
104
+ <li>Comprender fundamentos de PLN.</li>
105
+ <li>Aplicar Análisis de Sentimientos a textos en español.</li>
106
+ <li>Explorar servicios de IA de AWS para producción.</li>
107
+ <li>Prototipar interfaces con Gradio y publicar en Spaces.</li>
108
+ </ul>
109
+ </section>
110
+
111
+ <section id="temas" class="card">
112
+ <h2>Temas vistos en clase</h2>
113
+ <div class="grid2">
114
+ <div>
115
+ <h3>1) Procesamiento del Lenguaje Natural (PLN)</h3>
116
+ <ul>
117
+ <li><b>Definición:</b> IA aplicada al lenguaje humano.</li>
118
+ <li><b>Niveles:</b> morfológico, sintáctico, semántico y pragmático.</li>
119
+ <li><b>Aplicaciones:</b> búsqueda, traducción automática, voz a texto, extracción de información.</li>
120
+ </ul>
121
+ </div>
122
+ <div>
123
+ <h3>2) Análisis de Sentimientos</h3>
124
+ <ul>
125
+ <li>Clasificación de polaridad (positiva, negativa, neutra).</li>
126
+ <li>Enfoques: supervisado (Naive Bayes, SVM, KNN, Árboles) y lexicones.</li>
127
+ <li>Casos de uso: reputación, campañas, finanzas y recomendaciones.</li>
128
+ </ul>
129
+ </div>
130
+ </div>
131
+ <div class="card">
132
+ <h3>3) Servicios de IA en AWS</h3>
133
+ <div class="grid2">
134
+ <ul>
135
+ <li><b>Rekognition</b>: visión por computadora (rostros, etiquetas, texto).</li>
136
+ <li><b>Transcribe</b>: de voz a texto (ASR).</li>
137
+ <li><b>Polly</b>: texto a voz natural.</li>
138
+ <li><b>Translate</b>: traducción automática.</li>
139
+ <li><b>Lex & Connect</b>: chatbots y contact center.</li>
140
+ </ul>
141
+ <ul>
142
+ <li><b>Comprehend</b>: PNL, entidades, sentimiento.</li>
143
+ <li><b>SageMaker</b>: ciclo de vida de ML.</li>
144
+ <li><b>Forecast</b>: series temporales.</li>
145
+ <li><b>Kendra</b>: búsqueda inteligente.</li>
146
+ <li><b>Personalize</b>: recomendaciones.</li>
147
+ <li><b>Textract</b>: extracción en documentos.</li>
148
+ </ul>
149
+ </div>
150
+ <p>Documentación: <a href="https://aws.amazon.com/machine-learning/" target="_blank" rel="noopener">AWS AI/ML</a></p>
151
+ </div>
152
+ </section>
153
+
154
+ <section id="ejercicios" class="card">
155
+ <h2>Ejercicios y Demos en Hugging Face</h2>
156
+
157
+ <div class="demo-card">
158
+ <h3>🔍 Analizador de Texto con spaCy</h3>
159
+ <p>Demo interactivo que muestra análisis morfológico y sintáctico usando la librería spaCy. Permite visualizar entidades nombradas, dependencias sintácticas y categorías gramaticales.</p>
160
+ <a class="btn" target="_blank" href="https://huggingface.co/spaces/doctorlinux/spacy">Ver Demo spaCy</a>
161
+ </div>
162
+
163
+ <div class="demo-card">
164
+ <h3>📊 Análisis de Sentimientos Multimodelo</h3>
165
+ <p>Comparativa de diferentes modelos para análisis de sentimientos en español. Incluye visualización de resultados y métricas de comparación entre modelos.</p>
166
+ <a class="btn" target="_blank" href="https://huggingface.co/spaces/doctorlinux/ejercicios">Probar Análisis</a>
167
+ </div>
168
+
169
+ <div class="demo-card">
170
+ <h3>🚀 Demostración Space2</h3>
171
+ <p>Interfaz adicional que muestra capacidades avanzadas de procesamiento de lenguaje natural y ejemplos prácticos de implementación.</p>
172
+ <a class="btn" target="_blank" href="https://huggingface.co/spaces/doctorlinux/space2">Ver Demo Space2</a>
173
+ </div>
174
+ </section>
175
+
176
+ <section id="herramientas" class="card">
177
+ <h2>Herramientas y Sitios Utilizados</h2>
178
+ <ul>
179
+ <li><b>GitHub</b>: plataforma para control de versiones y colaboraci��n.</li>
180
+ <li><b>Hugging Face</b>: comunidad y despliegue de modelos/demos (Spaces).</li>
181
+ <li><b>X Developer</b>: portal de APIs de X (Twitter) para datos y tendencias.</li>
182
+ <li><b>Google Colab</b>: entorno de ejecución para experimentación con modelos.</li>
183
+ <li><b>Visual Studio Code</b>: editor de código para desarrollo de aplicaciones.</li>
184
+ </ul>
185
+ </section>
186
+
187
+ <section id="como" class="card">
188
+ <h2>Cómo se logró este informe</h2>
189
+ <ol>
190
+ <li><b>Recolección:</b> Descarga y organización del material desde Google Classroom.</li>
191
+ <li><b>Práctica:</b> Desarrollo de ejercicios en Python (spaCy, TextBlob/NLTK, Transformers) y prototipos en Gradio.</li>
192
+ <li><b>Despliegue:</b> Publicación de demos en <b>Hugging Face Spaces</b> (SDK Gradio) y del informe en un Space <b>Static</b>.</li>
193
+ <li><b>Integración:</b> Un único HTML5 con navegación, modo presentación y enlaces a los demos.</li>
194
+ <li><b>Apoyo IA:</b> Uso de IA asistiva para estructurar, redactar y mejorar la presentación.</li>
195
+ <li><b>Optimización:</b> Mejoras de accesibilidad, SEO y experiencia de usuario en esta versión 3.2.</li>
196
+ </ol>
197
+ </section>
198
+
199
+ <section id="creditos" class="card">
200
+ <h2>Créditos, Agradecimientos y Referencias</h2>
201
+ <p><b>Créditos y Agradecimientos:</b> Trabajo presentado por <b>Martha Lasso Collantes</b> y <b>Jorge Enrique Barón</b>, con apoyo de herramientas de Inteligencia Artificial. Agradecimiento al docente <b>Ing Osmer Ruiz</b> por la guía en el curso <i>Inteligencia Artificial Intermedio (G120L2)</i>.</p>
202
+ <h3>Referencias</h3>
203
+ <ul>
204
+ <li>Material de clase (Google Classroom).</li>
205
+ <li>Russell, S. & Norvig, P. (2020). <i>Artificial Intelligence: A Modern Approach</i>.</li>
206
+ <li>Goodfellow, I., Bengio, Y. & Courville, A. (2016). <i>Deep Learning</i>.</li>
207
+ <li><a href="https://aws.amazon.com/machine-learning/" target="_blank" rel="noopener">AWS – Servicios de IA/ML</a>.</li>
208
+ <li><a href="https://huggingface.co/" target="_blank" rel="noopener">Hugging Face – Plataforma de modelos de IA</a>.</li>
209
+ </ul>
210
+ </section>
211
+
212
+ <div class="footer">Versión 3.2 • © 2025 • Mejoras en accesibilidad, SEO y experiencia de usuario</div>
213
+ </main>
214
+
215
+ <button class="back-to-top" onclick="scrollToTop()" aria-label="Volver al inicio">↑</button>
216
+
217
+ <script>
218
+ // NARRADOR DE TEXTO MEJORADO
219
+ function leerSeccion() {
220
+ const target = location.hash ? document.querySelector(location.hash) : document.querySelector('#intro');
221
+ const texto = (target && target.innerText) ? target.innerText : document.body.innerText;
222
+ const msg = new SpeechSynthesisUtterance(texto);
223
+ const voces = speechSynthesis.getVoices();
224
+ const vozES = voces.find(v => v.lang && v.lang.toLowerCase().startsWith('es'));
225
+
226
+ if (vozES) msg.voice = vozES;
227
+
228
+ const velocidad = document.getElementById('velocidad').value;
229
+ msg.rate = parseFloat(velocidad);
230
+
231
+ speechSynthesis.cancel();
232
+ speechSynthesis.speak(msg);
233
+ }
234
+
235
+ function detener() {
236
+ speechSynthesis.cancel();
237
+ }
238
+
239
+ function toggleTheme() {
240
+ const current = document.documentElement.getAttribute('data-theme') || 'light';
241
+ document.documentElement.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
242
+ }
243
+
244
+ function toggleFocus() {
245
+ document.body.classList.toggle('focus');
246
+ }
247
+
248
+ function highlightActiveLink() {
249
+ document.querySelectorAll('.toc a').forEach(link => link.classList.remove('active'));
250
+ const activeLink = document.querySelector(`.toc a[href="${location.hash}"]`);
251
+ if (activeLink) activeLink.classList.add('active');
252
+ }
253
+
254
+ window.addEventListener('hashchange', highlightActiveLink);
255
+ window.addEventListener('load', highlightActiveLink);
256
+
257
+ function scrollToTop() {
258
+ window.scrollTo({top: 0, behavior: 'smooth'});
259
+ }
260
+
261
+ window.addEventListener('scroll', function() {
262
+ const backToTopButton = document.querySelector('.back-to-top');
263
+ if (window.scrollY > 300) {
264
+ backToTopButton.style.display = 'block';
265
+ } else {
266
+ backToTopButton.style.display = 'none';
267
+ }
268
+ });
269
+
270
+ document.getElementById('velocidad').addEventListener('input', function(e) {
271
+ document.getElementById('valor-velocidad').textContent = e.target.value + 'x';
272
+ });
273
+
274
+ if (speechSynthesis && typeof speechSynthesis.onvoiceschanged !== 'undefined') {
275
+ speechSynthesis.onvoiceschanged = function(){};
276
+ }
277
+
278
+ document.addEventListener('DOMContentLoaded', function() {
279
+ highlightActiveLink();
280
+ });
281
+ </script>
282
+ </body>
283
+ </html>
index.html CHANGED
@@ -1,19 +1,283 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <meta name="description" content="Informe académico sobre Inteligencia Artificial Intermedia">
7
+ <meta name="keywords" content="IA, PLN, AWS, Hugging Face, Análisis de Sentimientos">
8
+ <meta name="author" content="Martha Lasso Collantes, Jorge Enrique Barón">
9
+ <title>Informe de Clase – IA (G120L2 v3.2)</title>
10
+ <style>
11
+ :root { --bg: #f7fafc; --card:#ffffff; --text:#1a202c; --muted:#4a5568; --accent:#2563eb; --accent-2:#059669; --border:#e2e8f0; --link:#2563eb; }
12
+ [data-theme="dark"] { --bg: #0b0d10; --card:#12161b; --text:#e8edf2; --muted:#9fb3c8; --accent:#4fb3ff; --accent-2:#7cf29c; --border:#1e252d; --link:#62d0ff; }
13
+ html,body { margin:0; background:var(--bg); color:var(--text); font-family: system-ui, sans-serif; scroll-behavior: smooth; }
14
+ nav { position:fixed; top:0; left:0; bottom:0; width:250px; background:var(--card); border-right:1px solid var(--border); padding:20px; z-index:100; }
15
+ main { margin-left:260px; padding:20px; max-width:1100px; }
16
+ h1,h2,h3 { margin-top:0; }
17
+ .card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin:16px 0; transition: all 0.3s ease; }
18
+ .card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
19
+ .banner { margin:16px 0; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
20
+ .btn { display:inline-block; padding:8px 14px; margin:6px 0; border-radius:10px; border:1px solid var(--border); background: var(--accent); color:#fff; text-decoration:none; transition: all 0.3s ease; }
21
+ .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,.25); }
22
+ .toc a { display:block; margin:6px 0; text-decoration:none; color:var(--link); padding:4px 8px; border-radius:6px; transition: all 0.2s ease; }
23
+ .toc a:hover { background: rgba(37, 99, 235, 0.1); }
24
+ .toc a.active { font-weight:bold; background:var(--accent); color:white; }
25
+ .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
26
+ @media (max-width:900px) { .grid2 { grid-template-columns:1fr; } main{ margin-left:0; } nav{ position:static; width:auto; height:auto; } }
27
+ .footer { font-size:14px; color:var(--muted); margin-top:20px; text-align:center; padding-top:20px; border-top:1px solid var(--border); }
28
+ body.focus nav { display:none; } body.focus main { margin-left:0; }
29
+ p, li { line-height:1.6; } section { margin-bottom:2rem; }
30
+ .demo-card { background:var(--bg); padding:1rem; margin:1rem 0; border-radius:8px; border-left:4px solid var(--accent); }
31
+ .demo-card h3 { margin-top:0; color:var(--accent); }
32
+ .back-to-top { position:fixed; bottom:20px; right:20px; padding:10px 15px; border-radius:50%; background:var(--accent); color:white; border:none; cursor:pointer; display:none; z-index:1000; }
33
+ .back-to-top:hover { transform:translateY(-2px); }
34
+ .narrador-controls { margin-top:10px; padding:10px; background:var(--bg); border-radius:8px; }
35
+ .narrador-controls label { display:block; margin-bottom:5px; font-size:0.9rem; }
36
+ .narrador-controls input[type="range"] { width:100%; }
37
+ @media print { nav, .btn, .back-to-top { display:none !important; } main { margin-left:0 !important; } .card { border:1px solid #000 !important; } a::after { content:" (" attr(href) ")"; } }
38
+ </style>
39
+ </head>
40
+ <body>
41
+ <nav role="navigation" aria-label="Navegación principal">
42
+ <h2>Secciones</h2>
43
+ <div class="toc">
44
+ <a href="#intro" class="active">Introducción</a>
45
+ <a href="#obj">Objetivos</a>
46
+ <a href="#temas">Temas vistos</a>
47
+ <a href="#ejercicios">Ejercicios</a>
48
+ <a href="#herramientas">Herramientas</a>
49
+ <a href="#como">Cómo se logró</a>
50
+ <a href="#creditos">Créditos</a>
51
+ </div>
52
+ <div style="margin-top:20px;">
53
+ <button onclick="toggleTheme()">🌗 Tema</button>
54
+ <button onclick="toggleFocus()">🎤 Presentación</button>
55
+ </div>
56
+ <div class="narrador-controls">
57
+ <div style="margin-top:10px;">
58
+ <button onclick="leerSeccion()">🔊 Leer sección</button>
59
+ <button onclick="detener()">⏹️ Detener</button>
60
+ </div>
61
+ <label for="velocidad">Velocidad: <span id="valor-velocidad">1x</span></label>
62
+ <input type="range" min="0.5" max="2" step="0.1" value="1" id="velocidad">
63
+ </div>
64
+ </nav>
65
+
66
+ <main role="main">
67
+ <header role="banner">
68
+ <h1 id="main-title">Informe de Clase IA – Versión 3.2</h1>
69
+
70
+ <!-- BANNER CORREGIDO - TÍTULO COMPLETO -->
71
+ <div class="banner" style="background:transparent;">
72
+ <svg role="img" aria-labelledby="banner-title banner-desc" viewBox="0 0 1200 220" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
73
+ <title id="banner-title">Informe de Inteligencia Artificial</title>
74
+ <desc id="banner-desc">Curso G120L2 sobre PLN, Análisis de Sentimientos y AWS AI/ML</desc>
75
+ <defs>
76
+ <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
77
+ <stop offset="0%" stop-color="#4fb3ff"/>
78
+ <stop offset="100%" stop-color="#7cf29c"/>
79
+ </linearGradient>
80
+ </defs>
81
+ <rect width="1200" height="220" fill="#0f172a"/>
82
+ <!-- TÍTULO CORREGIDO: "Informe" completo -->
83
+ <text x="28" y="80" fill="url(#g1)" font-size="26" font-weight="700">
84
+ Informe de Clase IA – G120L2 • Inteligencia Artificial Intermedio
85
+ </text>
86
+ <text x="28" y="120" fill="#94a3b8" font-size="16">
87
+ PLN • Análisis de Sentimientos • AWS AI/ML • Python • Gradio
88
+ </text>
89
+ <text x="28" y="160" fill="#cbd5e1" font-size="14">
90
+ Autores: Martha Lasso Collantes, Jorge Enrique Barón — Septiembre 25 de 2025
91
+ </text>
92
+ </svg>
93
+ </div>
94
+ </header>
95
+
96
+ <section id="intro" class="card">
97
+ <h2>Introducción</h2>
98
+ <p>En este curso se integró teoría y práctica para comprender el <b>Procesamiento del Lenguaje Natural (PLN)</b>, el <b>Análisis de Sentimientos</b> y reconocer <b>servicios de IA en AWS</b>, conectando conceptos con ejercicios ejecutables en la web.</p>
99
+ </section>
100
+
101
+ <section id="obj" class="card">
102
+ <h2>Objetivos</h2>
103
+ <ul>
104
+ <li>Comprender fundamentos de PLN.</li>
105
+ <li>Aplicar Análisis de Sentimientos a textos en español.</li>
106
+ <li>Explorar servicios de IA de AWS para producción.</li>
107
+ <li>Prototipar interfaces con Gradio y publicar en Spaces.</li>
108
+ </ul>
109
+ </section>
110
+
111
+ <section id="temas" class="card">
112
+ <h2>Temas vistos en clase</h2>
113
+ <div class="grid2">
114
+ <div>
115
+ <h3>1) Procesamiento del Lenguaje Natural (PLN)</h3>
116
+ <ul>
117
+ <li><b>Definición:</b> IA aplicada al lenguaje humano.</li>
118
+ <li><b>Niveles:</b> morfológico, sintáctico, semántico y pragmático.</li>
119
+ <li><b>Aplicaciones:</b> búsqueda, traducción automática, voz a texto, extracción de información.</li>
120
+ </ul>
121
+ </div>
122
+ <div>
123
+ <h3>2) Análisis de Sentimientos</h3>
124
+ <ul>
125
+ <li>Clasificación de polaridad (positiva, negativa, neutra).</li>
126
+ <li>Enfoques: supervisado (Naive Bayes, SVM, KNN, Árboles) y lexicones.</li>
127
+ <li>Casos de uso: reputación, campañas, finanzas y recomendaciones.</li>
128
+ </ul>
129
+ </div>
130
+ </div>
131
+ <div class="card">
132
+ <h3>3) Servicios de IA en AWS</h3>
133
+ <div class="grid2">
134
+ <ul>
135
+ <li><b>Rekognition</b>: visión por computadora (rostros, etiquetas, texto).</li>
136
+ <li><b>Transcribe</b>: de voz a texto (ASR).</li>
137
+ <li><b>Polly</b>: texto a voz natural.</li>
138
+ <li><b>Translate</b>: traducción automática.</li>
139
+ <li><b>Lex & Connect</b>: chatbots y contact center.</li>
140
+ </ul>
141
+ <ul>
142
+ <li><b>Comprehend</b>: PNL, entidades, sentimiento.</li>
143
+ <li><b>SageMaker</b>: ciclo de vida de ML.</li>
144
+ <li><b>Forecast</b>: series temporales.</li>
145
+ <li><b>Kendra</b>: búsqueda inteligente.</li>
146
+ <li><b>Personalize</b>: recomendaciones.</li>
147
+ <li><b>Textract</b>: extracción en documentos.</li>
148
+ </ul>
149
+ </div>
150
+ <p>Documentación: <a href="https://aws.amazon.com/machine-learning/" target="_blank" rel="noopener">AWS AI/ML</a></p>
151
+ </div>
152
+ </section>
153
+
154
+ <section id="ejercicios" class="card">
155
+ <h2>Ejercicios y Demos en Hugging Face</h2>
156
+
157
+ <div class="demo-card">
158
+ <h3>🔍 Analizador de Texto con spaCy</h3>
159
+ <p>Demo interactivo que muestra análisis morfológico y sintáctico usando la librería spaCy. Permite visualizar entidades nombradas, dependencias sintácticas y categorías gramaticales.</p>
160
+ <a class="btn" target="_blank" href="https://huggingface.co/spaces/doctorlinux/spacy">Ver Demo spaCy</a>
161
+ </div>
162
+
163
+ <div class="demo-card">
164
+ <h3>📊 Análisis de Sentimientos Multimodelo</h3>
165
+ <p>Comparativa de diferentes modelos para análisis de sentimientos en español. Incluye visualización de resultados y métricas de comparación entre modelos.</p>
166
+ <a class="btn" target="_blank" href="https://huggingface.co/spaces/doctorlinux/ejercicios">Probar Análisis</a>
167
+ </div>
168
+
169
+ <div class="demo-card">
170
+ <h3>🚀 Demostración Space2</h3>
171
+ <p>Interfaz adicional que muestra capacidades avanzadas de procesamiento de lenguaje natural y ejemplos prácticos de implementación.</p>
172
+ <a class="btn" target="_blank" href="https://huggingface.co/spaces/doctorlinux/space2">Ver Demo Space2</a>
173
+ </div>
174
+ </section>
175
+
176
+ <section id="herramientas" class="card">
177
+ <h2>Herramientas y Sitios Utilizados</h2>
178
+ <ul>
179
+ <li><b>GitHub</b>: plataforma para control de versiones y colaboración.</li>
180
+ <li><b>Hugging Face</b>: comunidad y despliegue de modelos/demos (Spaces).</li>
181
+ <li><b>X Developer</b>: portal de APIs de X (Twitter) para datos y tendencias.</li>
182
+ <li><b>Google Colab</b>: entorno de ejecución para experimentación con modelos.</li>
183
+ <li><b>Visual Studio Code</b>: editor de código para desarrollo de aplicaciones.</li>
184
+ </ul>
185
+ </section>
186
+
187
+ <section id="como" class="card">
188
+ <h2>Cómo se logró este informe</h2>
189
+ <ol>
190
+ <li><b>Recolección:</b> Descarga y organización del material desde Google Classroom.</li>
191
+ <li><b>Práctica:</b> Desarrollo de ejercicios en Python (spaCy, TextBlob/NLTK, Transformers) y prototipos en Gradio.</li>
192
+ <li><b>Despliegue:</b> Publicación de demos en <b>Hugging Face Spaces</b> (SDK Gradio) y del informe en un Space <b>Static</b>.</li>
193
+ <li><b>Integración:</b> Un único HTML5 con navegación, modo presentación y enlaces a los demos.</li>
194
+ <li><b>Apoyo IA:</b> Uso de IA asistiva para estructurar, redactar y mejorar la presentación.</li>
195
+ <li><b>Optimización:</b> Mejoras de accesibilidad, SEO y experiencia de usuario en esta versión 3.2.</li>
196
+ </ol>
197
+ </section>
198
+
199
+ <section id="creditos" class="card">
200
+ <h2>Créditos, Agradecimientos y Referencias</h2>
201
+ <p><b>Créditos y Agradecimientos:</b> Trabajo presentado por <b>Martha Lasso Collantes</b> y <b>Jorge Enrique Barón</b>, con apoyo de herramientas de Inteligencia Artificial. Agradecimiento al docente <b>Ing Osmer Ruiz</b> por la guía en el curso <i>Inteligencia Artificial Intermedio (G120L2)</i>.</p>
202
+ <h3>Referencias</h3>
203
+ <ul>
204
+ <li>Material de clase (Google Classroom).</li>
205
+ <li>Russell, S. & Norvig, P. (2020). <i>Artificial Intelligence: A Modern Approach</i>.</li>
206
+ <li>Goodfellow, I., Bengio, Y. & Courville, A. (2016). <i>Deep Learning</i>.</li>
207
+ <li><a href="https://aws.amazon.com/machine-learning/" target="_blank" rel="noopener">AWS – Servicios de IA/ML</a>.</li>
208
+ <li><a href="https://huggingface.co/" target="_blank" rel="noopener">Hugging Face – Plataforma de modelos de IA</a>.</li>
209
+ </ul>
210
+ </section>
211
+
212
+ <div class="footer">Versión 3.2 • © 2025 • Mejoras en accesibilidad, SEO y experiencia de usuario</div>
213
+ </main>
214
+
215
+ <button class="back-to-top" onclick="scrollToTop()" aria-label="Volver al inicio">↑</button>
216
+
217
+ <script>
218
+ // NARRADOR DE TEXTO MEJORADO
219
+ function leerSeccion() {
220
+ const target = location.hash ? document.querySelector(location.hash) : document.querySelector('#intro');
221
+ const texto = (target && target.innerText) ? target.innerText : document.body.innerText;
222
+ const msg = new SpeechSynthesisUtterance(texto);
223
+ const voces = speechSynthesis.getVoices();
224
+ const vozES = voces.find(v => v.lang && v.lang.toLowerCase().startsWith('es'));
225
+
226
+ if (vozES) msg.voice = vozES;
227
+
228
+ const velocidad = document.getElementById('velocidad').value;
229
+ msg.rate = parseFloat(velocidad);
230
+
231
+ speechSynthesis.cancel();
232
+ speechSynthesis.speak(msg);
233
+ }
234
+
235
+ function detener() {
236
+ speechSynthesis.cancel();
237
+ }
238
+
239
+ function toggleTheme() {
240
+ const current = document.documentElement.getAttribute('data-theme') || 'light';
241
+ document.documentElement.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
242
+ }
243
+
244
+ function toggleFocus() {
245
+ document.body.classList.toggle('focus');
246
+ }
247
+
248
+ function highlightActiveLink() {
249
+ document.querySelectorAll('.toc a').forEach(link => link.classList.remove('active'));
250
+ const activeLink = document.querySelector(`.toc a[href="${location.hash}"]`);
251
+ if (activeLink) activeLink.classList.add('active');
252
+ }
253
+
254
+ window.addEventListener('hashchange', highlightActiveLink);
255
+ window.addEventListener('load', highlightActiveLink);
256
+
257
+ function scrollToTop() {
258
+ window.scrollTo({top: 0, behavior: 'smooth'});
259
+ }
260
+
261
+ window.addEventListener('scroll', function() {
262
+ const backToTopButton = document.querySelector('.back-to-top');
263
+ if (window.scrollY > 300) {
264
+ backToTopButton.style.display = 'block';
265
+ } else {
266
+ backToTopButton.style.display = 'none';
267
+ }
268
+ });
269
+
270
+ document.getElementById('velocidad').addEventListener('input', function(e) {
271
+ document.getElementById('valor-velocidad').textContent = e.target.value + 'x';
272
+ });
273
+
274
+ if (speechSynthesis && typeof speechSynthesis.onvoiceschanged !== 'undefined') {
275
+ speechSynthesis.onvoiceschanged = function(){};
276
+ }
277
+
278
+ document.addEventListener('DOMContentLoaded', function() {
279
+ highlightActiveLink();
280
+ });
281
+ </script>
282
+ </body>
283
+ </html>