Hugging Face's logo

Spaces:
JairoDanielMT
/
NetSuite.vs.OCI
Running

App Files Community
JairoDanielMT commited on
Commit
8025b54
·
verified ·
1 Parent(s): 6f9f657

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +855 -19
index.html CHANGED
@@ -1,19 +1,855 @@
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
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>OCI AI + NetSuite: Estrategia Corporativa</title>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link
11
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap"
12
+ rel="stylesheet">
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
14
+ <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
15
+ <style>
16
+ /* RESET & BASE */
17
+ :root {
18
+ --lr-red: #E30613;
19
+ --lr-black: #111111;
20
+ --lr-dark-gray: #333333;
21
+ --lr-light-gray: #F4F4F4;
22
+ --white: #FFFFFF;
23
+
24
+ /* TIPOGRAFÍA (clamp para responsividad controlada) */
25
+ --fs-base: clamp(13px, 1.8vmin, 16px);
26
+ /* Texto normal / p, li */
27
+ --fs-h1: clamp(28px, 4.0vmin, 48px);
28
+ /* Nivel 1 */
29
+ --fs-h2: clamp(20px, 3.0vmin, 32px);
30
+ /* Nivel 2 */
31
+ --fs-h3: clamp(16px, 2.2vmin, 24px);
32
+ /* Nivel 3 */
33
+ --fs-h4: clamp(14px, 1.8vmin, 20px);
34
+ /* Nivel 4 / subtítulos */
35
+ --fs-icon: clamp(16px, 2.8vmin, 28px);
36
+ /* Iconos dentro de la presentación */
37
+ --card-padding: clamp(10px, 1.6vmin, 20px);
38
+ --gap-default: clamp(12px, 2.2vmin, 40px);
39
+ }
40
+
41
+ * {
42
+ box-sizing: border-box;
43
+ }
44
+
45
+ body {
46
+ background-color: #2c2c2c;
47
+ font-family: 'Inter', sans-serif;
48
+ margin: 0;
49
+ display: flex;
50
+ justify-content: center;
51
+ align-items: center;
52
+ min-height: 100vh;
53
+ }
54
+
55
+ /* Presentación: hacer responsive manteniendo máximo fijo */
56
+ .presentation-container {
57
+ width: min(95vw, 1280px);
58
+ height: auto;
59
+ aspect-ratio: 16 / 9;
60
+ max-height: 80vh;
61
+ position: relative;
62
+ box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
63
+ background: transparent;
64
+ }
65
+
66
+ .presentation-container:hover .nav-button {
67
+ opacity: 1;
68
+ }
69
+
70
+ /* Slides */
71
+ .slide {
72
+ width: 100%;
73
+ height: 100%;
74
+ background-color: var(--white);
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ opacity: 0;
79
+ transition: opacity 0.45s ease-in-out;
80
+ display: flex;
81
+ flex-direction: column;
82
+ padding-bottom: 28px;
83
+ overflow: hidden;
84
+ }
85
+
86
+ .slide.active {
87
+ opacity: 1;
88
+ }
89
+
90
+ /* NAV */
91
+ .nav-button {
92
+ position: absolute;
93
+ top: 50%;
94
+ transform: translateY(-50%);
95
+ background-color: rgba(0, 0, 0, 0.45);
96
+ color: white;
97
+ border: none;
98
+ padding: 8px;
99
+ cursor: pointer;
100
+ font-size: 20px;
101
+ z-index: 10;
102
+ opacity: 0;
103
+ transition: opacity 0.3s ease-in-out;
104
+ }
105
+
106
+ .prev {
107
+ left: 8px;
108
+ }
109
+
110
+ .next {
111
+ right: 8px;
112
+ }
113
+
114
+ /* Progress */
115
+ .progress-bar-container {
116
+ position: absolute;
117
+ bottom: 0;
118
+ left: 0;
119
+ width: 100%;
120
+ height: 5px;
121
+ background-color: #555;
122
+ z-index: 10;
123
+ }
124
+
125
+ .progress-bar {
126
+ height: 100%;
127
+ width: 0;
128
+ background-color: var(--lr-red);
129
+ transition: width 0.25s ease-in-out;
130
+ }
131
+
132
+ /* LAYOUTS */
133
+ .padding-box {
134
+ padding: 2vmin 3vmin;
135
+ height: 100%;
136
+ display: flex;
137
+ flex-direction: column;
138
+ overflow: hidden;
139
+ }
140
+
141
+ .responsive-text {
142
+ font-size: var(--fs-base);
143
+ }
144
+
145
+ .text-large {
146
+ font-size: var(--fs-h2);
147
+ }
148
+
149
+ /* mapear a Nivel 2 */
150
+ .text-medium {
151
+ font-size: var(--fs-h3);
152
+ }
153
+
154
+ /* mapear a Nivel 3 */
155
+ .text-small {
156
+ font-size: var(--fs-h4);
157
+ }
158
+
159
+ /* mapear a Nivel 4 */
160
+
161
+ .row {
162
+ display: flex;
163
+ gap: var(--gap-default);
164
+ height: 100%;
165
+ }
166
+
167
+ .col {
168
+ flex: 1;
169
+ display: flex;
170
+ flex-direction: column;
171
+ }
172
+
173
+ .v-center {
174
+ justify-content: center;
175
+ }
176
+
177
+ /* TIPOGRAFÍA UNIFORME */
178
+ h1 {
179
+ font-size: var(--fs-h1);
180
+ font-weight: 900;
181
+ color: var(--lr-black);
182
+ margin: 0;
183
+ line-height: 1.05;
184
+ letter-spacing: -0.5px;
185
+ text-transform: uppercase;
186
+ }
187
+
188
+ h2 {
189
+ font-size: var(--fs-h2);
190
+ font-weight: 700;
191
+ color: var(--lr-red);
192
+ margin: 0 0 12px 0;
193
+ }
194
+
195
+ h3 {
196
+ font-size: var(--fs-h3);
197
+ font-weight: 600;
198
+ color: var(--lr-dark-gray);
199
+ margin: 0 0 10px 0;
200
+ }
201
+
202
+ h4 {
203
+ font-size: var(--fs-h4);
204
+ font-weight: 600;
205
+ color: var(--lr-dark-gray);
206
+ margin: 0 0 8px 0;
207
+ }
208
+
209
+ p,
210
+ li {
211
+ font-size: var(--fs-base);
212
+ color: #555;
213
+ line-height: 1.45;
214
+ margin-bottom: 12px;
215
+ word-wrap: break-word;
216
+ overflow-wrap: anywhere;
217
+ }
218
+
219
+ /* monospace badges (mantener) */
220
+ .mono {
221
+ font-family: 'JetBrains Mono', monospace;
222
+ color: var(--lr-red);
223
+ font-weight: 700;
224
+ }
225
+
226
+ /* COMPONENTS */
227
+ .header-strip {
228
+ height: 10px;
229
+ background: linear-gradient(90deg, var(--lr-red) 30%, var(--lr-black) 30%);
230
+ width: 100%;
231
+ }
232
+
233
+ .card {
234
+ background: var(--lr-light-gray);
235
+ border-left: 5px solid var(--lr-black);
236
+ padding: var(--card-padding);
237
+ border-radius: 0 8px 8px 0;
238
+ margin-bottom: 14px;
239
+ min-height: 0;
240
+ /* evita que crezca por padding excesivo */
241
+ overflow: auto;
242
+ }
243
+
244
+ /* tech badge: usar variable para tamaño */
245
+ .tech-badge {
246
+ display: inline-block;
247
+ background: var(--lr-black);
248
+ color: white;
249
+ padding: 6px 10px;
250
+ font-size: var(--fs-small, 12px);
251
+ font-weight: bold;
252
+ border-radius: 4px;
253
+ margin-right: 5px;
254
+ margin-bottom: 5px;
255
+ }
256
+
257
+ /* DIAGRAM NODES (reducir tamaños) */
258
+ .arch-flow {
259
+ display: flex;
260
+ align-items: center;
261
+ justify-content: space-between;
262
+ margin-top: 18px;
263
+ background: #fff;
264
+ border: 1px dashed #ccc;
265
+ padding: 18px;
266
+ border-radius: 10px;
267
+ }
268
+
269
+ .node {
270
+ min-width: 140px;
271
+ max-width: 220px;
272
+ padding: 10px;
273
+ background: var(--lr-black);
274
+ color: white;
275
+ text-align: center;
276
+ border-radius: 6px;
277
+ font-size: var(--fs-h4);
278
+ position: relative;
279
+ z-index: 2;
280
+ }
281
+
282
+ .node.red {
283
+ background: var(--lr-red);
284
+ }
285
+
286
+ .node.blue {
287
+ background: #0056b3;
288
+ }
289
+
290
+ .connector {
291
+ flex: 1;
292
+ height: 2px;
293
+ background: #999;
294
+ margin: 0 8px;
295
+ position: relative;
296
+ }
297
+
298
+ .connector::after {
299
+ content: '▶';
300
+ position: absolute;
301
+ right: -8px;
302
+ top: -7px;
303
+ color: #999;
304
+ font-size: calc(var(--fs-base) + 2px);
305
+ }
306
+
307
+ /* TABLES: tamaño claro y legible */
308
+ table {
309
+ width: 100%;
310
+ border-collapse: collapse;
311
+ font-size: var(--fs-base);
312
+ }
313
+
314
+ th {
315
+ background: var(--lr-black);
316
+ color: white;
317
+ padding: 10px;
318
+ text-align: left;
319
+ font-size: var(--fs-h4);
320
+ }
321
+
322
+ td {
323
+ border-bottom: 1px solid #ddd;
324
+ padding: 10px;
325
+ color: #333;
326
+ }
327
+
328
+ tr:nth-child(even) {
329
+ background-color: #f9f9f9;
330
+ }
331
+
332
+ /* FOOTER */
333
+ .footer {
334
+ margin-top: auto;
335
+ border-top: 1px solid #ddd;
336
+ padding-top: 12px;
337
+ display: flex;
338
+ justify-content: space-between;
339
+ font-size: calc(var(--fs-base) - 1px);
340
+ color: #888;
341
+ font-family: 'JetBrains Mono', monospace;
342
+ }
343
+
344
+ /* ICONOVS: forzar tamaño uniforme dentro de la presentación */
345
+ .presentation-container i[class^="fa-"],
346
+ .presentation-container i[class*=" fa-"] {
347
+ font-size: var(--fs-icon) !important;
348
+ line-height: 1;
349
+ }
350
+
351
+ /* Pequeños ajustes responsivos extra */
352
+ @media (max-width: 900px) {
353
+ .padding-box {
354
+ padding: 2vmin;
355
+ }
356
+
357
+ .row {
358
+ flex-direction: column;
359
+ gap: 1.8vmin;
360
+ }
361
+
362
+ .card {
363
+ padding: 12px;
364
+ }
365
+ }
366
+
367
+ /* Animaciones */
368
+ .slider-container.shake {
369
+ animation: shake 0.5s ease-in-out;
370
+ }
371
+
372
+ @keyframes shake {
373
+
374
+ 0%,
375
+ 100% {
376
+ transform: translateX(0);
377
+ }
378
+
379
+ 25% {
380
+ transform: translateX(-5px);
381
+ }
382
+
383
+ 75% {
384
+ transform: translateX(5px);
385
+ }
386
+ }
387
+ </style>
388
+ </head>
389
+
390
+ <body>
391
+
392
+ <div class="presentation-container">
393
+ <!-- SLIDE 1: PORTADA -->
394
+ <div class="slide active">
395
+ <div class="header-strip"></div>
396
+ <div class="padding-box v-center">
397
+ <div style="border-left: 15px solid var(--lr-red); padding-left: 4vmin;">
398
+ <p class="responsive-text" style="color: #666; font-weight: 300; margin-bottom: 1vmin;">PROPUESTA
399
+ ESTRATÉGICA &
400
+ TÉCNICA</p>
401
+ <h1 class="text-large">OCI AI + NETSUITE<br>ECOSYSTEM</h1>
402
+ <p class="text-medium" style="margin-top: 3vmin; color: var(--lr-dark-gray); max-width: 90%;">
403
+ Integración de <strong>LLMs</strong> y <strong>Document Understanding</strong>: De la solución
404
+ Nativa a la Arquitectura Híbrida con LangChain.
405
+ </p>
406
+ </div>
407
+
408
+ <div style="display: flex; gap: 3vmin; margin-top: 8vmin; padding-left: 7.5vmin;">
409
+ <div class="card" style="background: white; border: 2px solid #eee; width: 25vmin;">
410
+ <i class="fa-solid fa-layer-group"
411
+ style="color: var(--lr-red); font-size: 3vmin; margin-bottom: 1vmin;"></i><br>
412
+ <strong class="responsive-text">Arquitectura</strong><br><span class="text-small">Nativa vs
413
+ Híbrida</span>
414
+ </div>
415
+ <div class="card" style="background: white; border: 2px solid #eee; width: 25vmin;">
416
+ <i class="fa-solid fa-code"
417
+ style="color: var(--lr-red); font-size: 3vmin; margin-bottom: 1vmin;"></i><br>
418
+ <strong class="responsive-text">LangChain</strong><br><span class="text-small">Orquestación
419
+ Avanzada</span>
420
+ </div>
421
+ <div class="card" style="background: white; border: 2px solid #eee; width: 25vmin;">
422
+ <i class="fa-solid fa-chart-line"
423
+ style="color: var(--lr-red); font-size: 3vmin; margin-bottom: 1vmin;"></i><br>
424
+ <strong class="responsive-text">Costos Reales</strong><br><span class="text-small">OCR vs
425
+ GenAI</span>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ <div class="padding-box" style="height: auto;">
430
+ <div class="footer">
431
+ <span>LATAMREADY TECHNICAL DECK</span>
432
+ <span>PREPARED FOR EXECUTIVE REVIEW</span>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <!-- SLIDE 2: RESUMEN EJECUTIVO -->
438
+ <div class="slide">
439
+ <div class="header-strip"></div>
440
+ <div class="padding-box">
441
+ <h2 class="text-large">RESUMEN EJECUTIVO</h2>
442
+ <p class="responsive-text">Visión pragmática para la toma de decisiones: ¿Qué ganamos y cuánto cuesta?
443
+ </p>
444
+
445
+ <div class="row" style="margin-top: 3vmin;">
446
+ <div class="col">
447
+ <div class="card">
448
+ <h3><i class="fa-solid fa-bullseye"></i> El Objetivo</h3>
449
+ <p class="text-small">Automatizar la ingesta de documentos (OCR) y el análisis de datos
450
+ (LLM) directamente en
451
+ NetSuite, eliminando digitación manual y acelerando la toma de decisiones.</p>
452
+ </div>
453
+ <div class="card" style="border-left-color: var(--lr-red);">
454
+ <h3><i class="fa-solid fa-road"></i> Rutas de Implementación</h3>
455
+ <ul class="text-small">
456
+ <li><strong>Ruta Rápida (Nativa):</strong> Usar módulos SuiteScript 2.1
457
+ (<code>N/llm</code>,
458
+ <code>N/documentCapture</code>). Ideal para MVP.
459
+ </li>
460
+ <li><strong>Ruta Robusta (Híbrida):</strong> Python en OCI Functions. Necesaria para
461
+ lógica
462
+ compleja o modelos externos.</li>
463
+ </ul>
464
+ </div>
465
+ </div>
466
+ <div class="col">
467
+ <div class="card">
468
+ <h3><i class="fa-solid fa-money-bill-wave"></i> Estructura de Costos</h3>
469
+ <p class="text-small"><strong>Separados y Predecibles:</strong></p>
470
+ <ul class="text-small">
471
+ <li><strong>OCR:</strong> Se paga por página (~$0.01 - $0.025/pág).</li>
472
+ <li><strong>GenAI:</strong> Se paga por transacción/carácter. Llama 3 es muy económico
473
+ (~$0.03/1M chars).</li>
474
+ <li><strong>Infraestructura:</strong> OCI Functions solo cobra por milisegundos de
475
+ ejecución.</li>
476
+ </ul>
477
+ </div>
478
+ <div class="card">
479
+ <h3><i class="fa-solid fa-industry"></i> Aplicaciones Clave</h3>
480
+ <p class="text-small">Procesamiento de facturas, extracción de tablas en contratos,
481
+ clasificación de correos de
482
+ soporte, chatbots internos RAG.</p>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ <div class="footer">
487
+ <span>EXECUTIVE SUMMARY</span>
488
+ <span>PAGE 02</span>
489
+ </div>
490
+ </div>
491
+ </div>
492
+
493
+ <!-- SLIDE 3: ARQUITECTURA NATIVA -->
494
+ <div class="slide">
495
+ <div class="header-strip"></div>
496
+ <div class="padding-box">
497
+ <div style="display:flex; justify-content:space-between; align-items:center;">
498
+ <h2 class="text-large">OPCIÓN A: ARQUITECTURA NATIVA</h2>
499
+ <span class="tech-badge" style="font-size: 2.5vmin;">SUITESCRIPT 2.1</span>
500
+ </div>
501
+
502
+ <div class="row">
503
+ <div class="col">
504
+ <p class="responsive-text">Uso directo de los módulos integrados en NetSuite 2024.1+. Sin
505
+ servidores externos.</p>
506
+
507
+ <div class="card" style="background: #fff; border: 1px solid #ddd;">
508
+ <h3 class="mono">N/documentCapture</h3>
509
+ <p class="text-small">Para digitalización. Envías un PDF y recibes un JSON con campos y
510
+ tablas.</p>
511
+ <ul class="text-small">
512
+ <li><i class="fa-solid fa-check" style="color: green;"></i> Integrado en UI de NetSuite.
513
+ </li>
514
+ <li><i class="fa-solid fa-xmark" style="color: red;"></i> Solo soporta modelos
515
+ pre-entrenados de OCI (Facturas, Recibos, Driver ID, Pasaportes).</li>
516
+ </ul>
517
+ </div>
518
+
519
+ <div class="card" style="background: #fff; border: 1px solid #ddd;">
520
+ <h3 class="mono">N/llm</h3>
521
+ <p class="text-small">Para generación de texto y chat.</p>
522
+ <ul class="text-small">
523
+ <li><i class="fa-solid fa-check" style="color: green;"></i> Fácil de usar:
524
+ <code>llm.generateText()</code>.
525
+ </li>
526
+ <li><i class="fa-solid fa-xmark" style="color: red;"></i> Limitado a modelos OCI
527
+ (Cohere/Llama). Timeout de script de 45s/5m.</li>
528
+ </ul>
529
+ </div>
530
+ </div>
531
+ <div class="col v-center">
532
+ <div class="arch-flow" style="flex-direction: column; gap: 2vmin;">
533
+ <div class="node red">Usuario NetSuite</div>
534
+ <div style="font-size: 3vmin; color: #999;">⬇</div>
535
+ <div class="node">SuiteScript<br>(UserEvent / Suitelet)</div>
536
+ <div style="font-size: 3vmin; color: #999;">⬇ Invoca Módulos</div>
537
+ <div class="row" style="width: 100%; justify-content: center; gap: 1vmin;">
538
+ <div class="node blue" style="width: 20vmin;">OCI GenAI</div>
539
+ <div class="node blue" style="width: 20vmin;">OCI Doc AI</div>
540
+ </div>
541
+ </div>
542
+ <p style="text-align: center; font-size: 2vmin; margin-top: 1vmin;"><strong>Veredicto:</strong>
543
+ Ideal
544
+ para tareas simples y rápidas.</p>
545
+ </div>
546
+ </div>
547
+ <div class="footer">
548
+ <span>NATIVE ARCHITECTURE</span>
549
+ <span>PAGE 03</span>
550
+ </div>
551
+ </div>
552
+ </div>
553
+
554
+ <!-- SLIDE 4: ARQUITECTURA HÍBRIDA & LANGCHAIN -->
555
+ <div class="slide">
556
+ <div class="header-strip"></div>
557
+ <div class="padding-box">
558
+ <div style="display:flex; justify-content:space-between; align-items:center;">
559
+ <h2 class="text-large">OPCIÓN B: HÍBRIDA CON LANGCHAIN</h2>
560
+ <span class="tech-badge" style="font-size: 2.5vmin;">PYTHON + LANGCHAIN</span>
561
+ </div>
562
+
563
+ <p class="responsive-text"><strong>El problema:</strong> NetSuite no procesa vectores, no corre Python,
564
+ y sus timeouts son
565
+ cortos.<br>
566
+ <strong>La solución:</strong> Delegar la "inteligencia" a OCI Functions usando
567
+ <code>langchain-oracle</code>.
568
+ </p>
569
+
570
+ <div class="arch-flow">
571
+ <div class="node red">NetSuite<br>(N/https)</div>
572
+ <div class="connector">JSON Payload</div>
573
+ <div class="node">OCI API Gateway<br>(Seguridad)</div>
574
+ <div class="connector">Trigger</div>
575
+ <div class="node blue">OCI Functions<br>(Python)</div>
576
+ <div class="connector">LangChain</div>
577
+ <div class="node" style="background: #444;">Multi-LLM<br>OCI/OpenAI</div>
578
+ </div>
579
+
580
+ <div class="row" style="margin-top: 3vmin;">
581
+ <div class="col">
582
+ <div class="card" style="height: 100%;">
583
+ <h3><i class="fa-brands fa-python"></i> Librería `langchain-oracle`</h3>
584
+ <p class="text-small">Es el conector oficial. Permite:</p>
585
+ <ol class="text-small">
586
+ <li>Cargar documentos desde Object Storage.</li>
587
+ <li>Generar Embeddings (Vectores).</li>
588
+ <li>Conectar a <strong>Oracle Database 23ai</strong> para Vector Search.</li>
589
+ <li>Orquestar cadenas de pensamiento (Chain of Thought).</li>
590
+ </ol>
591
+ </div>
592
+ </div>
593
+ <div class="col">
594
+ <div class="card" style="height: 100%;">
595
+ <h3><i class="fa-solid fa-code-branch"></i> Ventajas Híbridas</h3>
596
+ <ul class="text-small">
597
+ <li><strong>Agnóstico:</strong> Tu código Python puede llamar a OCI GenAI hoy, y a
598
+ OpenAI
599
+ mañana.</li>
600
+ <li><strong>Potencia:</strong> Usa Pandas para limpiar tablas complejas del OCR antes de
601
+ devolverlas a NetSuite.</li>
602
+ <li><strong>Memoria:</strong> LangChain maneja el historial del chat (Memory), algo
603
+ difícil
604
+ de hacer en SuiteScript puro.</li>
605
+ </ul>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ <div class="footer">
610
+ <span>HYBRID ARCHITECTURE & LANGCHAIN</span>
611
+ <span>PAGE 04</span>
612
+ </div>
613
+ </div>
614
+ </div>
615
+
616
+ <!-- SLIDE 5: ECOSISTEMA MULTI-PROVEEDOR -->
617
+ <div class="slide">
618
+ <div class="header-strip"></div>
619
+ <div class="padding-box">
620
+ <h2>ECOSISTEMA MULTI-PROVEEDOR</h2>
621
+ <p>OCI es la base segura, pero la arquitectura híbrida nos permite conectar todo.</p>
622
+
623
+ <div class="row" style="gap: 20px;">
624
+ <!-- OCI NATIVE -->
625
+ <div class="col">
626
+ <div
627
+ style="background: #FFF0F0; border-top: 5px solid var(--lr-red); padding: 20px; height: 100%;">
628
+ <h3>OCI Managed (Nativo)</h3>
629
+ <p style="font-size: 14px;">Modelos alojados y gestionados por Oracle. Privacidad total.</p>
630
+ <hr style="border:0; border-top:1px solid #ddd;">
631
+ <ul class="mono" style="list-style: none; padding: 0; color: #333; font-size: 14px;">
632
+ <li><i class="fa-solid fa-check-circle" style="color: var(--lr-red);"></i> Meta Llama 3
633
+ (70B/8B)</li>
634
+ <li><i class="fa-solid fa-check-circle" style="color: var(--lr-red);"></i> Cohere
635
+ Command R+
636
+ </li>
637
+ <li><i class="fa-solid fa-check-circle" style="color: var(--lr-red);"></i> Cohere Embed
638
+ v3
639
+ </li>
640
+ </ul>
641
+ </div>
642
+ </div>
643
+
644
+ <!-- OCI DATA SCIENCE -->
645
+ <div class="col">
646
+ <div style="background: #F4F4F4; border-top: 5px solid #555; padding: 20px; height: 100%;">
647
+ <h3>OCI Data Science (BYOM)</h3>
648
+ <p style="font-size: 14px;">"Bring Your Own Model". Despliega modelos de HuggingFace en GPUs
649
+ dedicadas.</p>
650
+ <hr style="border:0; border-top:1px solid #ddd;">
651
+ <ul class="mono" style="list-style: none; padding: 0; color: #333; font-size: 14px;">
652
+ <li><i class="fa-solid fa-flask" style="color: #555;"></i> Mistral / Mixtral</li>
653
+ <li><i class="fa-solid fa-flask" style="color: #555;"></i> Falcon</li>
654
+ <li><i class="fa-solid fa-flask" style="color: #555;"></i> Google Gemma</li>
655
+ </ul>
656
+ </div>
657
+ </div>
658
+
659
+ <!-- EXTERNAL -->
660
+ <div class="col">
661
+ <div style="background: #E8F4FF; border-top: 5px solid #0056b3; padding: 20px; height: 100%;">
662
+ <h3>Externos (Vía Python)</h3>
663
+ <p style="font-size: 14px;">Conexión vía API desde OCI Functions usando LangChain wrappers.
664
+ </p>
665
+ <hr style="border:0; border-top:1px solid #ddd;">
666
+ <ul class="mono" style="list-style: none; padding: 0; color: #333; font-size: 14px;">
667
+ <li><i class="fa-solid fa-globe" style="color: #0056b3;"></i> OpenAI (GPT-4o)</li>
668
+ <li><i class="fa-solid fa-globe" style="color: #0056b3;"></i> Google Gemini Pro</li>
669
+ <li><i class="fa-solid fa-globe" style="color: #0056b3;"></i> Anthropic Claude</li>
670
+ </ul>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ <div class="footer">
675
+ <span>MULTI-PROVIDER LANDSCAPE</span>
676
+ <span>PAGE 05</span>
677
+ </div>
678
+ </div>
679
+ </div>
680
+
681
+ <!-- SLIDE 6: COSTOS REALES -->
682
+ <div class="slide">
683
+ <div class="header-strip"></div>
684
+ <div class="padding-box">
685
+ <h2>ESTRUCTURA DE COSTOS REALES</h2>
686
+ <p>Separación crítica para el presupuesto: <strong>Páginas (OCR)</strong> vs. <strong>Transacciones
687
+ (LLM)</strong>.</p>
688
+
689
+ <table style="margin-top: 20px;">
690
+ <thead>
691
+ <tr>
692
+ <th style="width: 20%;">Servicio</th>
693
+ <th style="width: 20%;">Unidad de Cobro</th>
694
+ <th style="width: 20%;">Precio Estimado*</th>
695
+ <th>Notas Críticas</th>
696
+ </tr>
697
+ </thead>
698
+ <tbody>
699
+ <tr>
700
+ <td style="font-weight: bold; color: var(--lr-red);">OCI Document Understanding (OCR)</td>
701
+ <td>Por Página</td>
702
+ <td>$10 - $25 USD<br><small>per 1,000 pages</small></td>
703
+ <td>Varía si es solo texto (barato) o extracción de campos clave/tablas (más caro). Las
704
+ facturas
705
+ requieren extracción de campos.</td>
706
+ </tr>
707
+ <tr>
708
+ <td style="font-weight: bold; color: #0056b3;">OCI GenAI (Llama 3 70B)</td>
709
+ <td>Por Transacción<br>(Carácter)</td>
710
+ <td>~$0.03 USD<br><small>per 1M chars</small></td>
711
+ <td>Modelo Open Source hosteado. Extremadamente barato para resúmenes y clasificación.</td>
712
+ </tr>
713
+ <tr>
714
+ <td style="font-weight: bold; color: #0056b3;">OCI GenAI (Cohere Command R)</td>
715
+ <td>Por Transacción<br>(Carácter)</td>
716
+ <td>~$0.50 - $2.00 USD<br><small>per 1M chars</small></td>
717
+ <td>Modelo propietario. Mejor razonamiento, pero más costoso. Usar solo para tareas
718
+ complejas.
719
+ </td>
720
+ </tr>
721
+ </tbody>
722
+ </table>
723
+
724
+ <div class="card" style="margin-top: 20px; background: #fff3cd; border-left-color: #ffc107;">
725
+ <strong><i class="fa-solid fa-lightbulb"></i> Insight de Costos:</strong>
726
+ Para procesar 1,000 facturas, gastarás mucho más en el OCR (lectura) que en el LLM (análisis).
727
+ <em>Estrategia:</em> Usa OCR solo para extraer datos crudos y pásaselos a Llama 3 (barato) para
728
+ validaciones lógicas.
729
+ </div>
730
+
731
+ <div class="footer">
732
+ <span>COST ANALYSIS</span>
733
+ <span>PAGE 06</span>
734
+ </div>
735
+ </div>
736
+ </div>
737
+
738
+ <!-- SLIDE 7: ROADMAP Y CIERRE -->
739
+ <div class="slide">
740
+ <div class="header-strip"></div>
741
+ <div class="padding-box">
742
+ <h2>ROADMAP DE IMPLEMENTACIÓN</h2>
743
+
744
+ <div class="row" style="gap: 30px; margin-top: 30px;">
745
+ <div class="col">
746
+ <div style="border: 2px solid #ddd; padding: 20px; border-radius: 8px; position: relative;">
747
+ <div
748
+ style="position: absolute; top: -15px; background: var(--lr-red); color: white; padding: 2px 10px; font-weight: bold;">
749
+ FASE 1</div>
750
+ <h3>MVP Nativo</h3>
751
+ <p>Usar <code>N/documentCapture</code> para digitalizar facturas entrantes. Sin código
752
+ externo.
753
+ Rápido "time-to-market".</p>
754
+ </div>
755
+ </div>
756
+ <div class="col">
757
+ <div style="border: 2px solid #333; padding: 20px; border-radius: 8px; position: relative;">
758
+ <div
759
+ style="position: absolute; top: -15px; background: #333; color: white; padding: 2px 10px; font-weight: bold;">
760
+ FASE 2</div>
761
+ <h3>Inteligencia Híbrida</h3>
762
+ <p>Desplegar OCI Functions con <code>langchain-oracle</code>. Conectar a Oracle Database
763
+ 23ai
764
+ para hacer RAG sobre manuales o políticas internas.</p>
765
+ </div>
766
+ </div>
767
+ <div class="col">
768
+ <div style="border: 2px dashed #999; padding: 20px; border-radius: 8px; position: relative;">
769
+ <div
770
+ style="position: absolute; top: -15px; background: #999; color: white; padding: 2px 10px; font-weight: bold;">
771
+ FASE 3</div>
772
+ <h3>Escalado Multi-Modelo</h3>
773
+ <p>Evaluar si Llama 3 es suficiente o si se requiere GPT-4o para casos edge. Ajustar el
774
+ enrutador en Python.</p>
775
+ </div>
776
+ </div>
777
+ </div>
778
+
779
+ <div style="margin-top: auto; text-align: center;">
780
+ <p style="font-size: 16px; color: #666;">
781
+ <strong>Conclusión:</strong> La arquitectura híbrida es la única que garantiza escalabilidad a
782
+ largo
783
+ plazo sin quedar atados a las limitaciones de SuiteScript, aprovechando costos bajos de OCI.
784
+ </p>
785
+ <div style="border-top: 1px solid #ccc; width: 50%; margin: 20px auto 0;"></div>
786
+ <p style="font-weight: bold; margin-top: 10px;">Jairo Mendoza | LatamReady</p>
787
+ </div>
788
+
789
+ <div class="footer">
790
+ <span>ROADMAP & CONCLUSION</span>
791
+ <span>PAGE 07</span>
792
+ </div>
793
+ </div>
794
+ </div>
795
+
796
+ <button class="nav-button prev"><i class="fas fa-chevron-left"></i></button>
797
+ <button class="nav-button next"><i class="fas fa-chevron-right"></i></button>
798
+
799
+ <div class="progress-bar-container">
800
+ <div class="progress-bar"></div>
801
+ </div>
802
+ </div>
803
+
804
+ <script>
805
+ const slides = document.querySelectorAll('.slide');
806
+ const prevButton = document.querySelector('.prev');
807
+ const nextButton = document.querySelector('.next');
808
+ const progressBar = document.querySelector('.progress-bar');
809
+ const presentationContainer = document.querySelector('.presentation-container');
810
+ let currentIndex = 0;
811
+
812
+ function showSlide(index) {
813
+ slides.forEach((slide, i) => {
814
+ slide.classList.toggle('active', i === index);
815
+ });
816
+ const progressPercentage = ((index + 1) / slides.length) * 100;
817
+ progressBar.style.width = `${progressPercentage}%`;
818
+ }
819
+
820
+ function nextSlide() {
821
+ if (currentIndex < slides.length - 1) {
822
+ currentIndex++;
823
+ showSlide(currentIndex);
824
+ } else {
825
+ presentationContainer.classList.add('shake');
826
+ setTimeout(() => {
827
+ presentationContainer.classList.remove('shake');
828
+ }, 500);
829
+ }
830
+ }
831
+
832
+ function prevSlide() {
833
+ if (currentIndex > 0) {
834
+ currentIndex--;
835
+ showSlide(currentIndex);
836
+ }
837
+ }
838
+
839
+ nextButton.addEventListener('click', nextSlide);
840
+ prevButton.addEventListener('click', prevSlide);
841
+
842
+ document.addEventListener('keydown', (event) => {
843
+ if (event.key === 'ArrowRight') {
844
+ nextSlide();
845
+ } else if (event.key === 'ArrowLeft') {
846
+ prevSlide();
847
+ }
848
+ });
849
+
850
+ // Initialize the slider
851
+ showSlide(currentIndex);
852
+ </script>
853
+ </body>
854
+
855
+ </html>