Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OCI AI + NetSuite: Estrategia Corporativa</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap" | |
| rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> | |
| <style> | |
| /* RESET & BASE */ | |
| :root { | |
| --lr-red: #E30613; | |
| --lr-black: #111111; | |
| --lr-dark-gray: #333333; | |
| --lr-light-gray: #F4F4F4; | |
| --white: #FFFFFF; | |
| /* TIPOGRAFÍA (clamp para responsividad controlada) */ | |
| --fs-base: clamp(13px, 1.8vmin, 16px); | |
| /* Texto normal / p, li */ | |
| --fs-h1: clamp(28px, 4.0vmin, 48px); | |
| /* Nivel 1 */ | |
| --fs-h2: clamp(20px, 3.0vmin, 32px); | |
| /* Nivel 2 */ | |
| --fs-h3: clamp(16px, 2.2vmin, 24px); | |
| /* Nivel 3 */ | |
| --fs-h4: clamp(14px, 1.8vmin, 20px); | |
| /* Nivel 4 / subtítulos */ | |
| --fs-icon: clamp(16px, 2.8vmin, 28px); | |
| /* Iconos dentro de la presentación */ | |
| --card-padding: clamp(10px, 1.6vmin, 20px); | |
| --gap-default: clamp(12px, 2.2vmin, 40px); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: #2c2c2c; | |
| font-family: 'Inter', sans-serif; | |
| margin: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| } | |
| /* Presentación: hacer responsive manteniendo máximo fijo */ | |
| .presentation-container { | |
| width: min(95vw, 1280px); | |
| height: auto; | |
| aspect-ratio: 16 / 9; | |
| max-height: 80vh; | |
| position: relative; | |
| box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); | |
| background: transparent; | |
| } | |
| .presentation-container:hover .nav-button { | |
| opacity: 1; | |
| } | |
| /* Slides */ | |
| .slide { | |
| width: 100%; | |
| height: 100%; | |
| background-color: var(--white); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| opacity: 0; | |
| transition: opacity 0.45s ease-in-out; | |
| display: flex; | |
| flex-direction: column; | |
| padding-bottom: 28px; | |
| overflow: hidden; | |
| } | |
| .slide.active { | |
| opacity: 1; | |
| } | |
| /* NAV */ | |
| .nav-button { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background-color: rgba(0, 0, 0, 0.45); | |
| color: white; | |
| border: none; | |
| padding: 8px; | |
| cursor: pointer; | |
| font-size: 20px; | |
| z-index: 10; | |
| opacity: 0; | |
| transition: opacity 0.3s ease-in-out; | |
| } | |
| .prev { | |
| left: 8px; | |
| } | |
| .next { | |
| right: 8px; | |
| } | |
| /* Progress */ | |
| .progress-bar-container { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 5px; | |
| background-color: #555; | |
| z-index: 10; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| width: 0; | |
| background-color: var(--lr-red); | |
| transition: width 0.25s ease-in-out; | |
| } | |
| /* LAYOUTS */ | |
| .padding-box { | |
| padding: 2vmin 3vmin; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .responsive-text { | |
| font-size: var(--fs-base); | |
| } | |
| .text-large { | |
| font-size: var(--fs-h2); | |
| } | |
| /* mapear a Nivel 2 */ | |
| .text-medium { | |
| font-size: var(--fs-h3); | |
| } | |
| /* mapear a Nivel 3 */ | |
| .text-small { | |
| font-size: var(--fs-h4); | |
| } | |
| /* mapear a Nivel 4 */ | |
| .row { | |
| display: flex; | |
| gap: var(--gap-default); | |
| height: 100%; | |
| } | |
| .col { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .v-center { | |
| justify-content: center; | |
| } | |
| /* TIPOGRAFÍA UNIFORME */ | |
| h1 { | |
| font-size: var(--fs-h1); | |
| font-weight: 900; | |
| color: var(--lr-black); | |
| margin: 0; | |
| line-height: 1.05; | |
| letter-spacing: -0.5px; | |
| text-transform: uppercase; | |
| } | |
| h2 { | |
| font-size: var(--fs-h2); | |
| font-weight: 700; | |
| color: var(--lr-red); | |
| margin: 0 0 12px 0; | |
| } | |
| h3 { | |
| font-size: var(--fs-h3); | |
| font-weight: 600; | |
| color: var(--lr-dark-gray); | |
| margin: 0 0 10px 0; | |
| } | |
| h4 { | |
| font-size: var(--fs-h4); | |
| font-weight: 600; | |
| color: var(--lr-dark-gray); | |
| margin: 0 0 8px 0; | |
| } | |
| p, | |
| li { | |
| font-size: var(--fs-base); | |
| color: #555; | |
| line-height: 1.45; | |
| margin-bottom: 12px; | |
| word-wrap: break-word; | |
| overflow-wrap: anywhere; | |
| } | |
| /* monospace badges (mantener) */ | |
| .mono { | |
| font-family: 'JetBrains Mono', monospace; | |
| color: var(--lr-red); | |
| font-weight: 700; | |
| } | |
| /* COMPONENTS */ | |
| .header-strip { | |
| height: 10px; | |
| background: linear-gradient(90deg, var(--lr-red) 30%, var(--lr-black) 30%); | |
| width: 100%; | |
| } | |
| .card { | |
| background: var(--lr-light-gray); | |
| border-left: 5px solid var(--lr-black); | |
| padding: var(--card-padding); | |
| border-radius: 0 8px 8px 0; | |
| margin-bottom: 14px; | |
| min-height: 0; | |
| /* evita que crezca por padding excesivo */ | |
| overflow: auto; | |
| } | |
| /* tech badge: usar variable para tamaño */ | |
| .tech-badge { | |
| display: inline-block; | |
| background: var(--lr-black); | |
| color: white; | |
| padding: 6px 10px; | |
| font-size: var(--fs-small, 12px); | |
| font-weight: bold; | |
| border-radius: 4px; | |
| margin-right: 5px; | |
| margin-bottom: 5px; | |
| } | |
| /* DIAGRAM NODES (reducir tamaños) */ | |
| .arch-flow { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-top: 18px; | |
| background: #fff; | |
| border: 1px dashed #ccc; | |
| padding: 18px; | |
| border-radius: 10px; | |
| } | |
| .node { | |
| min-width: 140px; | |
| max-width: 220px; | |
| padding: 10px; | |
| background: var(--lr-black); | |
| color: white; | |
| text-align: center; | |
| border-radius: 6px; | |
| font-size: var(--fs-h4); | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .node.red { | |
| background: var(--lr-red); | |
| } | |
| .node.blue { | |
| background: #0056b3; | |
| } | |
| .connector { | |
| flex: 1; | |
| height: 2px; | |
| background: #999; | |
| margin: 0 8px; | |
| position: relative; | |
| } | |
| .connector::after { | |
| content: '▶'; | |
| position: absolute; | |
| right: -8px; | |
| top: -7px; | |
| color: #999; | |
| font-size: calc(var(--fs-base) + 2px); | |
| } | |
| /* TABLES: tamaño claro y legible */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: var(--fs-base); | |
| } | |
| th { | |
| background: var(--lr-black); | |
| color: white; | |
| padding: 10px; | |
| text-align: left; | |
| font-size: var(--fs-h4); | |
| } | |
| td { | |
| border-bottom: 1px solid #ddd; | |
| padding: 10px; | |
| color: #333; | |
| } | |
| tr:nth-child(even) { | |
| background-color: #f9f9f9; | |
| } | |
| /* FOOTER */ | |
| .footer { | |
| margin-top: auto; | |
| border-top: 1px solid #ddd; | |
| padding-top: 12px; | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: calc(var(--fs-base) - 1px); | |
| color: #888; | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| /* ICONOVS: forzar tamaño uniforme dentro de la presentación */ | |
| .presentation-container i[class^="fa-"], | |
| .presentation-container i[class*=" fa-"] { | |
| font-size: var(--fs-icon) ; | |
| line-height: 1; | |
| } | |
| /* Pequeños ajustes responsivos extra */ | |
| @media (max-width: 900px) { | |
| .padding-box { | |
| padding: 2vmin; | |
| } | |
| .row { | |
| flex-direction: column; | |
| gap: 1.8vmin; | |
| } | |
| .card { | |
| padding: 12px; | |
| } | |
| } | |
| /* Animaciones */ | |
| .slider-container.shake { | |
| animation: shake 0.5s ease-in-out; | |
| } | |
| @keyframes shake { | |
| 0%, | |
| 100% { | |
| transform: translateX(0); | |
| } | |
| 25% { | |
| transform: translateX(-5px); | |
| } | |
| 75% { | |
| transform: translateX(5px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="presentation-container"> | |
| <!-- SLIDE 1: PORTADA --> | |
| <div class="slide active"> | |
| <div class="header-strip"></div> | |
| <div class="padding-box v-center"> | |
| <div style="border-left: 15px solid var(--lr-red); padding-left: 4vmin;"> | |
| <p class="responsive-text" style="color: #666; font-weight: 300; margin-bottom: 1vmin;">PROPUESTA | |
| ESTRATÉGICA & | |
| TÉCNICA</p> | |
| <h1 class="text-large">OCI AI + NETSUITE<br>ECOSYSTEM</h1> | |
| <p class="text-medium" style="margin-top: 3vmin; color: var(--lr-dark-gray); max-width: 90%;"> | |
| Integración de <strong>LLMs</strong> y <strong>Document Understanding</strong>: De la solución | |
| Nativa a la Arquitectura Híbrida con LangChain. | |
| </p> | |
| </div> | |
| <div style="display: flex; gap: 3vmin; margin-top: 8vmin; padding-left: 7.5vmin;"> | |
| <div class="card" style="background: white; border: 2px solid #eee; width: 25vmin;"> | |
| <i class="fa-solid fa-layer-group" | |
| style="color: var(--lr-red); font-size: 3vmin; margin-bottom: 1vmin;"></i><br> | |
| <strong class="responsive-text">Arquitectura</strong><br><span class="text-small">Nativa vs | |
| Híbrida</span> | |
| </div> | |
| <div class="card" style="background: white; border: 2px solid #eee; width: 25vmin;"> | |
| <i class="fa-solid fa-code" | |
| style="color: var(--lr-red); font-size: 3vmin; margin-bottom: 1vmin;"></i><br> | |
| <strong class="responsive-text">LangChain</strong><br><span class="text-small">Orquestación | |
| Avanzada</span> | |
| </div> | |
| <div class="card" style="background: white; border: 2px solid #eee; width: 25vmin;"> | |
| <i class="fa-solid fa-chart-line" | |
| style="color: var(--lr-red); font-size: 3vmin; margin-bottom: 1vmin;"></i><br> | |
| <strong class="responsive-text">Costos Reales</strong><br><span class="text-small">OCR vs | |
| GenAI</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="padding-box" style="height: auto;"> | |
| <div class="footer"> | |
| <span>LATAMREADY TECHNICAL DECK</span> | |
| <span>PREPARED FOR EXECUTIVE REVIEW</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 2: RESUMEN EJECUTIVO --> | |
| <div class="slide"> | |
| <div class="header-strip"></div> | |
| <div class="padding-box"> | |
| <h2 class="text-large">RESUMEN EJECUTIVO</h2> | |
| <p class="responsive-text">Visión pragmática para la toma de decisiones: ¿Qué ganamos y cuánto cuesta? | |
| </p> | |
| <div class="row" style="margin-top: 3vmin;"> | |
| <div class="col"> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-bullseye"></i> El Objetivo</h3> | |
| <p class="text-small">Automatizar la ingesta de documentos (OCR) y el análisis de datos | |
| (LLM) directamente en | |
| NetSuite, eliminando digitación manual y acelerando la toma de decisiones.</p> | |
| </div> | |
| <div class="card" style="border-left-color: var(--lr-red);"> | |
| <h3><i class="fa-solid fa-road"></i> Rutas de Implementación</h3> | |
| <ul class="text-small"> | |
| <li><strong>Ruta Rápida (Nativa):</strong> Usar módulos SuiteScript 2.1 | |
| (<code>N/llm</code>, | |
| <code>N/documentCapture</code>). Ideal para MVP. | |
| </li> | |
| <li><strong>Ruta Robusta (Híbrida):</strong> Python en OCI Functions. Necesaria para | |
| lógica | |
| compleja o modelos externos.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-money-bill-wave"></i> Estructura de Costos</h3> | |
| <p class="text-small"><strong>Separados y Predecibles:</strong></p> | |
| <ul class="text-small"> | |
| <li><strong>OCR:</strong> Se paga por página (~$0.01 - $0.025/pág).</li> | |
| <li><strong>GenAI:</strong> Se paga por transacción/carácter. Llama 3 es muy económico | |
| (~$0.03/1M chars).</li> | |
| <li><strong>Infraestructura:</strong> OCI Functions solo cobra por milisegundos de | |
| ejecución.</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <h3><i class="fa-solid fa-industry"></i> Aplicaciones Clave</h3> | |
| <p class="text-small">Procesamiento de facturas, extracción de tablas en contratos, | |
| clasificación de correos de | |
| soporte, chatbots internos RAG.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span>EXECUTIVE SUMMARY</span> | |
| <span>PAGE 02</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 3: ARQUITECTURA NATIVA --> | |
| <div class="slide"> | |
| <div class="header-strip"></div> | |
| <div class="padding-box"> | |
| <div style="display:flex; justify-content:space-between; align-items:center;"> | |
| <h2 class="text-large">OPCIÓN A: ARQUITECTURA NATIVA</h2> | |
| <span class="tech-badge" style="font-size: 2.5vmin;">SUITESCRIPT 2.1</span> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| <p class="responsive-text">Uso directo de los módulos integrados en NetSuite 2024.1+. Sin | |
| servidores externos.</p> | |
| <div class="card" style="background: #fff; border: 1px solid #ddd;"> | |
| <h3 class="mono">N/documentCapture</h3> | |
| <p class="text-small">Para digitalización. Envías un PDF y recibes un JSON con campos y | |
| tablas.</p> | |
| <ul class="text-small"> | |
| <li><i class="fa-solid fa-check" style="color: green;"></i> Integrado en UI de NetSuite. | |
| </li> | |
| <li><i class="fa-solid fa-xmark" style="color: red;"></i> Solo soporta modelos | |
| pre-entrenados de OCI (Facturas, Recibos, Driver ID, Pasaportes).</li> | |
| </ul> | |
| </div> | |
| <div class="card" style="background: #fff; border: 1px solid #ddd;"> | |
| <h3 class="mono">N/llm</h3> | |
| <p class="text-small">Para generación de texto y chat.</p> | |
| <ul class="text-small"> | |
| <li><i class="fa-solid fa-check" style="color: green;"></i> Fácil de usar: | |
| <code>llm.generateText()</code>. | |
| </li> | |
| <li><i class="fa-solid fa-xmark" style="color: red;"></i> Limitado a modelos OCI | |
| (Cohere/Llama). Timeout de script de 45s/5m.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="col v-center"> | |
| <div class="arch-flow" style="flex-direction: column; gap: 2vmin;"> | |
| <div class="node red">Usuario NetSuite</div> | |
| <div style="font-size: 3vmin; color: #999;">⬇</div> | |
| <div class="node">SuiteScript<br>(UserEvent / Suitelet)</div> | |
| <div style="font-size: 3vmin; color: #999;">⬇ Invoca Módulos</div> | |
| <div class="row" style="width: 100%; justify-content: center; gap: 1vmin;"> | |
| <div class="node blue" style="width: 20vmin;">OCI GenAI</div> | |
| <div class="node blue" style="width: 20vmin;">OCI Doc AI</div> | |
| </div> | |
| </div> | |
| <p style="text-align: center; font-size: 2vmin; margin-top: 1vmin;"><strong>Veredicto:</strong> | |
| Ideal | |
| para tareas simples y rápidas.</p> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span>NATIVE ARCHITECTURE</span> | |
| <span>PAGE 03</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 4: ARQUITECTURA HÍBRIDA & LANGCHAIN --> | |
| <div class="slide"> | |
| <div class="header-strip"></div> | |
| <div class="padding-box"> | |
| <div style="display:flex; justify-content:space-between; align-items:center;"> | |
| <h2 class="text-large">OPCIÓN B: HÍBRIDA CON LANGCHAIN</h2> | |
| <span class="tech-badge" style="font-size: 2.5vmin;">PYTHON + LANGCHAIN</span> | |
| </div> | |
| <p class="responsive-text"><strong>El problema:</strong> NetSuite no procesa vectores, no corre Python, | |
| y sus timeouts son | |
| cortos.<br> | |
| <strong>La solución:</strong> Delegar la "inteligencia" a OCI Functions usando | |
| <code>langchain-oracle</code>. | |
| </p> | |
| <div class="arch-flow"> | |
| <div class="node red">NetSuite<br>(N/https)</div> | |
| <div class="connector">JSON Payload</div> | |
| <div class="node">OCI API Gateway<br>(Seguridad)</div> | |
| <div class="connector">Trigger</div> | |
| <div class="node blue">OCI Functions<br>(Python)</div> | |
| <div class="connector">LangChain</div> | |
| <div class="node" style="background: #444;">Multi-LLM<br>OCI/OpenAI</div> | |
| </div> | |
| <div class="row" style="margin-top: 3vmin;"> | |
| <div class="col"> | |
| <div class="card" style="height: 100%;"> | |
| <h3><i class="fa-brands fa-python"></i> Librería `langchain-oracle`</h3> | |
| <p class="text-small">Es el conector oficial. Permite:</p> | |
| <ol class="text-small"> | |
| <li>Cargar documentos desde Object Storage.</li> | |
| <li>Generar Embeddings (Vectores).</li> | |
| <li>Conectar a <strong>Oracle Database 23ai</strong> para Vector Search.</li> | |
| <li>Orquestar cadenas de pensamiento (Chain of Thought).</li> | |
| </ol> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card" style="height: 100%;"> | |
| <h3><i class="fa-solid fa-code-branch"></i> Ventajas Híbridas</h3> | |
| <ul class="text-small"> | |
| <li><strong>Agnóstico:</strong> Tu código Python puede llamar a OCI GenAI hoy, y a | |
| OpenAI | |
| mañana.</li> | |
| <li><strong>Potencia:</strong> Usa Pandas para limpiar tablas complejas del OCR antes de | |
| devolverlas a NetSuite.</li> | |
| <li><strong>Memoria:</strong> LangChain maneja el historial del chat (Memory), algo | |
| difícil | |
| de hacer en SuiteScript puro.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span>HYBRID ARCHITECTURE & LANGCHAIN</span> | |
| <span>PAGE 04</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 5: ECOSISTEMA MULTI-PROVEEDOR --> | |
| <div class="slide"> | |
| <div class="header-strip"></div> | |
| <div class="padding-box"> | |
| <h2>ECOSISTEMA MULTI-PROVEEDOR</h2> | |
| <p>OCI es la base segura, pero la arquitectura híbrida nos permite conectar todo.</p> | |
| <div class="row" style="gap: 20px;"> | |
| <!-- OCI NATIVE --> | |
| <div class="col"> | |
| <div | |
| style="background: #FFF0F0; border-top: 5px solid var(--lr-red); padding: 20px; height: 100%;"> | |
| <h3>OCI Managed (Nativo)</h3> | |
| <p style="font-size: 14px;">Modelos alojados y gestionados por Oracle. Privacidad total.</p> | |
| <hr style="border:0; border-top:1px solid #ddd;"> | |
| <ul class="mono" style="list-style: none; padding: 0; color: #333; font-size: 14px;"> | |
| <li><i class="fa-solid fa-check-circle" style="color: var(--lr-red);"></i> Meta Llama 3 | |
| (70B/8B)</li> | |
| <li><i class="fa-solid fa-check-circle" style="color: var(--lr-red);"></i> Cohere | |
| Command R+ | |
| </li> | |
| <li><i class="fa-solid fa-check-circle" style="color: var(--lr-red);"></i> Cohere Embed | |
| v3 | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- OCI DATA SCIENCE --> | |
| <div class="col"> | |
| <div style="background: #F4F4F4; border-top: 5px solid #555; padding: 20px; height: 100%;"> | |
| <h3>OCI Data Science (BYOM)</h3> | |
| <p style="font-size: 14px;">"Bring Your Own Model". Despliega modelos de HuggingFace en GPUs | |
| dedicadas.</p> | |
| <hr style="border:0; border-top:1px solid #ddd;"> | |
| <ul class="mono" style="list-style: none; padding: 0; color: #333; font-size: 14px;"> | |
| <li><i class="fa-solid fa-flask" style="color: #555;"></i> Mistral / Mixtral</li> | |
| <li><i class="fa-solid fa-flask" style="color: #555;"></i> Falcon</li> | |
| <li><i class="fa-solid fa-flask" style="color: #555;"></i> Google Gemma</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- EXTERNAL --> | |
| <div class="col"> | |
| <div style="background: #E8F4FF; border-top: 5px solid #0056b3; padding: 20px; height: 100%;"> | |
| <h3>Externos (Vía Python)</h3> | |
| <p style="font-size: 14px;">Conexión vía API desde OCI Functions usando LangChain wrappers. | |
| </p> | |
| <hr style="border:0; border-top:1px solid #ddd;"> | |
| <ul class="mono" style="list-style: none; padding: 0; color: #333; font-size: 14px;"> | |
| <li><i class="fa-solid fa-globe" style="color: #0056b3;"></i> OpenAI (GPT-4o)</li> | |
| <li><i class="fa-solid fa-globe" style="color: #0056b3;"></i> Google Gemini Pro</li> | |
| <li><i class="fa-solid fa-globe" style="color: #0056b3;"></i> Anthropic Claude</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span>MULTI-PROVIDER LANDSCAPE</span> | |
| <span>PAGE 05</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 6: COSTOS REALES --> | |
| <div class="slide"> | |
| <div class="header-strip"></div> | |
| <div class="padding-box"> | |
| <h2>ESTRUCTURA DE COSTOS REALES</h2> | |
| <p>Separación crítica para el presupuesto: <strong>Páginas (OCR)</strong> vs. <strong>Transacciones | |
| (LLM)</strong>.</p> | |
| <table style="margin-top: 20px;"> | |
| <thead> | |
| <tr> | |
| <th style="width: 20%;">Servicio</th> | |
| <th style="width: 20%;">Unidad de Cobro</th> | |
| <th style="width: 20%;">Precio Estimado*</th> | |
| <th>Notas Críticas</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td style="font-weight: bold; color: var(--lr-red);">OCI Document Understanding (OCR)</td> | |
| <td>Por Página</td> | |
| <td>$10 - $25 USD<br><small>per 1,000 pages</small></td> | |
| <td>Varía si es solo texto (barato) o extracción de campos clave/tablas (más caro). Las | |
| facturas | |
| requieren extracción de campos.</td> | |
| </tr> | |
| <tr> | |
| <td style="font-weight: bold; color: #0056b3;">OCI GenAI (Llama 3 70B)</td> | |
| <td>Por Transacción<br>(Carácter)</td> | |
| <td>~$0.03 USD<br><small>per 1M chars</small></td> | |
| <td>Modelo Open Source hosteado. Extremadamente barato para resúmenes y clasificación.</td> | |
| </tr> | |
| <tr> | |
| <td style="font-weight: bold; color: #0056b3;">OCI GenAI (Cohere Command R)</td> | |
| <td>Por Transacción<br>(Carácter)</td> | |
| <td>~$0.50 - $2.00 USD<br><small>per 1M chars</small></td> | |
| <td>Modelo propietario. Mejor razonamiento, pero más costoso. Usar solo para tareas | |
| complejas. | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="card" style="margin-top: 20px; background: #fff3cd; border-left-color: #ffc107;"> | |
| <strong><i class="fa-solid fa-lightbulb"></i> Insight de Costos:</strong> | |
| Para procesar 1,000 facturas, gastarás mucho más en el OCR (lectura) que en el LLM (análisis). | |
| <em>Estrategia:</em> Usa OCR solo para extraer datos crudos y pásaselos a Llama 3 (barato) para | |
| validaciones lógicas. | |
| </div> | |
| <div class="footer"> | |
| <span>COST ANALYSIS</span> | |
| <span>PAGE 06</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SLIDE 7: ROADMAP Y CIERRE --> | |
| <div class="slide"> | |
| <div class="header-strip"></div> | |
| <div class="padding-box"> | |
| <h2>ROADMAP DE IMPLEMENTACIÓN</h2> | |
| <div class="row" style="gap: 30px; margin-top: 30px;"> | |
| <div class="col"> | |
| <div style="border: 2px solid #ddd; padding: 20px; border-radius: 8px; position: relative;"> | |
| <div | |
| style="position: absolute; top: -15px; background: var(--lr-red); color: white; padding: 2px 10px; font-weight: bold;"> | |
| FASE 1</div> | |
| <h3>MVP Nativo</h3> | |
| <p>Usar <code>N/documentCapture</code> para digitalizar facturas entrantes. Sin código | |
| externo. | |
| Rápido "time-to-market".</p> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div style="border: 2px solid #333; padding: 20px; border-radius: 8px; position: relative;"> | |
| <div | |
| style="position: absolute; top: -15px; background: #333; color: white; padding: 2px 10px; font-weight: bold;"> | |
| FASE 2</div> | |
| <h3>Inteligencia Híbrida</h3> | |
| <p>Desplegar OCI Functions con <code>langchain-oracle</code>. Conectar a Oracle Database | |
| 23ai | |
| para hacer RAG sobre manuales o políticas internas.</p> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div style="border: 2px dashed #999; padding: 20px; border-radius: 8px; position: relative;"> | |
| <div | |
| style="position: absolute; top: -15px; background: #999; color: white; padding: 2px 10px; font-weight: bold;"> | |
| FASE 3</div> | |
| <h3>Escalado Multi-Modelo</h3> | |
| <p>Evaluar si Llama 3 es suficiente o si se requiere GPT-4o para casos edge. Ajustar el | |
| enrutador en Python.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="margin-top: auto; text-align: center;"> | |
| <p style="font-size: 16px; color: #666;"> | |
| <strong>Conclusión:</strong> La arquitectura híbrida es la única que garantiza escalabilidad a | |
| largo | |
| plazo sin quedar atados a las limitaciones de SuiteScript, aprovechando costos bajos de OCI. | |
| </p> | |
| <div style="border-top: 1px solid #ccc; width: 50%; margin: 20px auto 0;"></div> | |
| <p style="font-weight: bold; margin-top: 10px;">Jairo Mendoza | LatamReady</p> | |
| </div> | |
| <div class="footer"> | |
| <span>ROADMAP & CONCLUSION</span> | |
| <span>PAGE 07</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="nav-button prev"><i class="fas fa-chevron-left"></i></button> | |
| <button class="nav-button next"><i class="fas fa-chevron-right"></i></button> | |
| <div class="progress-bar-container"> | |
| <div class="progress-bar"></div> | |
| </div> | |
| </div> | |
| <script> | |
| const slides = document.querySelectorAll('.slide'); | |
| const prevButton = document.querySelector('.prev'); | |
| const nextButton = document.querySelector('.next'); | |
| const progressBar = document.querySelector('.progress-bar'); | |
| const presentationContainer = document.querySelector('.presentation-container'); | |
| let currentIndex = 0; | |
| function showSlide(index) { | |
| slides.forEach((slide, i) => { | |
| slide.classList.toggle('active', i === index); | |
| }); | |
| const progressPercentage = ((index + 1) / slides.length) * 100; | |
| progressBar.style.width = `${progressPercentage}%`; | |
| } | |
| function nextSlide() { | |
| if (currentIndex < slides.length - 1) { | |
| currentIndex++; | |
| showSlide(currentIndex); | |
| } else { | |
| presentationContainer.classList.add('shake'); | |
| setTimeout(() => { | |
| presentationContainer.classList.remove('shake'); | |
| }, 500); | |
| } | |
| } | |
| function prevSlide() { | |
| if (currentIndex > 0) { | |
| currentIndex--; | |
| showSlide(currentIndex); | |
| } | |
| } | |
| nextButton.addEventListener('click', nextSlide); | |
| prevButton.addEventListener('click', prevSlide); | |
| document.addEventListener('keydown', (event) => { | |
| if (event.key === 'ArrowRight') { | |
| nextSlide(); | |
| } else if (event.key === 'ArrowLeft') { | |
| prevSlide(); | |
| } | |
| }); | |
| // Initialize the slider | |
| showSlide(currentIndex); | |
| </script> | |
| </body> | |
| </html> |