Hugging Face's logo

Spaces:
doctorlinux
/
informe1
Running

App Files Community
informe1 / index.html
doctorlinux's picture
doctorlinux
Upload 2 files
6676164 verified
raw
history blame contribute delete
14.8 kB
 <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Informe académico sobre Inteligencia Artificial Intermedia">
<meta name="keywords" content="IA, PLN, AWS, Hugging Face, Análisis de Sentimientos">
<meta name="author" content="Martha Lasso Collantes, Jorge Enrique Barón">
<title>Informe de Clase – IA (G120L2 v3.2)</title>
<style>
:root { --bg: #f7fafc; --card:#ffffff; --text:#1a202c; --muted:#4a5568; --accent:#2563eb; --accent-2:#059669; --border:#e2e8f0; --link:#2563eb; }
[data-theme="dark"] { --bg: #0b0d10; --card:#12161b; --text:#e8edf2; --muted:#9fb3c8; --accent:#4fb3ff; --accent-2:#7cf29c; --border:#1e252d; --link:#62d0ff; }
html,body { margin:0; background:var(--bg); color:var(--text); font-family: system-ui, sans-serif; scroll-behavior: smooth; }
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; }
main { margin-left:260px; padding:20px; max-width:1100px; }
h1,h2,h3 { margin-top:0; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin:16px 0; transition: all 0.3s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.banner { margin:16px 0; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.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; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,.25); }
.toc a { display:block; margin:6px 0; text-decoration:none; color:var(--link); padding:4px 8px; border-radius:6px; transition: all 0.2s ease; }
.toc a:hover { background: rgba(37, 99, 235, 0.1); }
.toc a.active { font-weight:bold; background:var(--accent); color:white; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:900px) { .grid2 { grid-template-columns:1fr; } main{ margin-left:0; } nav{ position:static; width:auto; height:auto; } }
.footer { font-size:14px; color:var(--muted); margin-top:20px; text-align:center; padding-top:20px; border-top:1px solid var(--border); }
body.focus nav { display:none; } body.focus main { margin-left:0; }
p, li { line-height:1.6; } section { margin-bottom:2rem; }
.demo-card { background:var(--bg); padding:1rem; margin:1rem 0; border-radius:8px; border-left:4px solid var(--accent); }
.demo-card h3 { margin-top:0; color:var(--accent); }
.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; }
.back-to-top:hover { transform:translateY(-2px); }
.narrador-controls { margin-top:10px; padding:10px; background:var(--bg); border-radius:8px; }
.narrador-controls label { display:block; margin-bottom:5px; font-size:0.9rem; }
.narrador-controls input[type="range"] { width:100%; }
@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) ")"; } }
</style>
</head>
<body>
<nav role="navigation" aria-label="Navegación principal">
<h2>Secciones</h2>
<div class="toc">
<a href="#intro" class="active">Introducción</a>
<a href="#obj">Objetivos</a>
<a href="#temas">Temas vistos</a>
<a href="#ejercicios">Ejercicios</a>
<a href="#herramientas">Herramientas</a>
<a href="#como">Cómo se logró</a>
<a href="#creditos">Créditos</a>
</div>
<div style="margin-top:20px;">
<button onclick="toggleTheme()">🌗 Tema</button>
<button onclick="toggleFocus()">🎤 Presentación</button>
</div>
<div class="narrador-controls">
<div style="margin-top:10px;">
<button onclick="leerSeccion()">🔊 Leer sección</button>
<button onclick="detener()">⏹️ Detener</button>
</div>
<label for="velocidad">Velocidad: <span id="valor-velocidad">1x</span></label>
<input type="range" min="0.5" max="2" step="0.1" value="1" id="velocidad">
</div>
</nav>
<main role="main">
<header role="banner">
<h1 id="main-title">Informe de Clase IA – Versión 3.2</h1>
<!-- BANNER CORREGIDO - TÍTULO COMPLETO -->
<div class="banner" style="background:transparent;">
<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">
<title id="banner-title">Informe de Inteligencia Artificial</title>
<desc id="banner-desc">Curso G120L2 sobre PLN, Análisis de Sentimientos y AWS AI/ML</desc>
<defs>
<linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#4fb3ff"/>
<stop offset="100%" stop-color="#7cf29c"/>
</linearGradient>
</defs>
<rect width="1200" height="220" fill="#0f172a"/>
<!-- TÍTULO CORREGIDO: "Informe" completo -->
<text x="28" y="80" fill="url(#g1)" font-size="26" font-weight="700">
Informe de Clase IA – G120L2 • Inteligencia Artificial Intermedio
</text>
<text x="28" y="120" fill="#94a3b8" font-size="16">
PLN • Análisis de Sentimientos • AWS AI/ML • Python • Gradio
</text>
<text x="28" y="160" fill="#cbd5e1" font-size="14">
Autores: Martha Lasso Collantes, Jorge Enrique Barón — Septiembre 25 de 2025
</text>
</svg>
</div>
</header>
<section id="intro" class="card">
<h2>Introducción</h2>
<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>
</section>
<section id="obj" class="card">
<h2>Objetivos</h2>
<ul>
<li>Comprender fundamentos de PLN.</li>
<li>Aplicar Análisis de Sentimientos a textos en español.</li>
<li>Explorar servicios de IA de AWS para producción.</li>
<li>Prototipar interfaces con Gradio y publicar en Spaces.</li>
</ul>
</section>
<section id="temas" class="card">
<h2>Temas vistos en clase</h2>
<div class="grid2">
<div>
<h3>1) Procesamiento del Lenguaje Natural (PLN)</h3>
<ul>
<li><b>Definición:</b> IA aplicada al lenguaje humano.</li>
<li><b>Niveles:</b> morfológico, sintáctico, semántico y pragmático.</li>
<li><b>Aplicaciones:</b> búsqueda, traducción automática, voz a texto, extracción de información.</li>
</ul>
</div>
<div>
<h3>2) Análisis de Sentimientos</h3>
<ul>
<li>Clasificación de polaridad (positiva, negativa, neutra).</li>
<li>Enfoques: supervisado (Naive Bayes, SVM, KNN, Árboles) y lexicones.</li>
<li>Casos de uso: reputación, campañas, finanzas y recomendaciones.</li>
</ul>
</div>
</div>
<div class="card">
<h3>3) Servicios de IA en AWS</h3>
<div class="grid2">
<ul>
<li><b>Rekognition</b>: visión por computadora (rostros, etiquetas, texto).</li>
<li><b>Transcribe</b>: de voz a texto (ASR).</li>
<li><b>Polly</b>: texto a voz natural.</li>
<li><b>Translate</b>: traducción automática.</li>
<li><b>Lex & Connect</b>: chatbots y contact center.</li>
</ul>
<ul>
<li><b>Comprehend</b>: PNL, entidades, sentimiento.</li>
<li><b>SageMaker</b>: ciclo de vida de ML.</li>
<li><b>Forecast</b>: series temporales.</li>
<li><b>Kendra</b>: búsqueda inteligente.</li>
<li><b>Personalize</b>: recomendaciones.</li>
<li><b>Textract</b>: extracción en documentos.</li>
</ul>
</div>
<p>Documentación: <a href="https://aws.amazon.com/machine-learning/" target="_blank" rel="noopener">AWS AI/ML</a></p>
</div>
</section>
<section id="ejercicios" class="card">
<h2>Ejercicios y Demos en Hugging Face</h2>
<div class="demo-card">
<h3>🔍 Analizador de Texto con spaCy</h3>
<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>
<a class="btn" target="_blank" href="https://huggingface.co/spaces/doctorlinux/spacy">Ver Demo spaCy</a>
</div>
<div class="demo-card">
<h3>📊 Análisis de Sentimientos Multimodelo</h3>
<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>
<a class="btn" target="_blank" href="https://huggingface.co/spaces/doctorlinux/ejercicios">Probar Análisis</a>
</div>
<div class="demo-card">
<h3>🚀 Demostración Space2</h3>
<p>Interfaz adicional que muestra capacidades avanzadas de procesamiento de lenguaje natural y ejemplos prácticos de implementación.</p>
<a class="btn" target="_blank" href="https://huggingface.co/spaces/doctorlinux/space2">Ver Demo Space2</a>
</div>
</section>
<section id="herramientas" class="card">
<h2>Herramientas y Sitios Utilizados</h2>
<ul>
<li><b>GitHub</b>: plataforma para control de versiones y colaboración.</li>
<li><b>Hugging Face</b>: comunidad y despliegue de modelos/demos (Spaces).</li>
<li><b>X Developer</b>: portal de APIs de X (Twitter) para datos y tendencias.</li>
<li><b>Google Colab</b>: entorno de ejecución para experimentación con modelos.</li>
<li><b>Visual Studio Code</b>: editor de código para desarrollo de aplicaciones.</li>
</ul>
</section>
<section id="como" class="card">
<h2>Cómo se logró este informe</h2>
<ol>
<li><b>Recolección:</b> Descarga y organización del material desde Google Classroom.</li>
<li><b>Práctica:</b> Desarrollo de ejercicios en Python (spaCy, TextBlob/NLTK, Transformers) y prototipos en Gradio.</li>
<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>
<li><b>Integración:</b> Un único HTML5 con navegación, modo presentación y enlaces a los demos.</li>
<li><b>Apoyo IA:</b> Uso de IA asistiva para estructurar, redactar y mejorar la presentación.</li>
<li><b>Optimización:</b> Mejoras de accesibilidad, SEO y experiencia de usuario en esta versión 3.2.</li>
</ol>
</section>
<section id="creditos" class="card">
<h2>Créditos, Agradecimientos y Referencias</h2>
<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>
<h3>Referencias</h3>
<ul>
<li>Material de clase (Google Classroom).</li>
<li>Russell, S. & Norvig, P. (2020). <i>Artificial Intelligence: A Modern Approach</i>.</li>
<li>Goodfellow, I., Bengio, Y. & Courville, A. (2016). <i>Deep Learning</i>.</li>
<li><a href="https://aws.amazon.com/machine-learning/" target="_blank" rel="noopener">AWS – Servicios de IA/ML</a>.</li>
<li><a href="https://huggingface.co/" target="_blank" rel="noopener">Hugging Face – Plataforma de modelos de IA</a>.</li>
</ul>
</section>
<div class="footer">Versión 3.2 • © 2025 • Mejoras en accesibilidad, SEO y experiencia de usuario</div>
</main>
<button class="back-to-top" onclick="scrollToTop()" aria-label="Volver al inicio">↑</button>
<script>
// NARRADOR DE TEXTO MEJORADO
function leerSeccion() {
const target = location.hash ? document.querySelector(location.hash) : document.querySelector('#intro');
const texto = (target && target.innerText) ? target.innerText : document.body.innerText;
const msg = new SpeechSynthesisUtterance(texto);
const voces = speechSynthesis.getVoices();
const vozES = voces.find(v => v.lang && v.lang.toLowerCase().startsWith('es'));
if (vozES) msg.voice = vozES;
const velocidad = document.getElementById('velocidad').value;
msg.rate = parseFloat(velocidad);
speechSynthesis.cancel();
speechSynthesis.speak(msg);
}
function detener() {
speechSynthesis.cancel();
}
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme') || 'light';
document.documentElement.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
}
function toggleFocus() {
document.body.classList.toggle('focus');
}
function highlightActiveLink() {
document.querySelectorAll('.toc a').forEach(link => link.classList.remove('active'));
const activeLink = document.querySelector(`.toc a[href="${location.hash}"]`);
if (activeLink) activeLink.classList.add('active');
}
window.addEventListener('hashchange', highlightActiveLink);
window.addEventListener('load', highlightActiveLink);
function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
window.addEventListener('scroll', function() {
const backToTopButton = document.querySelector('.back-to-top');
if (window.scrollY > 300) {
backToTopButton.style.display = 'block';
} else {
backToTopButton.style.display = 'none';
}
});
document.getElementById('velocidad').addEventListener('input', function(e) {
document.getElementById('valor-velocidad').textContent = e.target.value + 'x';
});
if (speechSynthesis && typeof speechSynthesis.onvoiceschanged !== 'undefined') {
speechSynthesis.onvoiceschanged = function(){};
}
document.addEventListener('DOMContentLoaded', function() {
highlightActiveLink();
});
</script>
</body>
</html>