[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","689dd0e2bdf48191a254b9a9eb3d6eb0","versionInt","title","App/ia/page","type","code/react","content","'use client'\n// Cuestionario IA + Informe — versión bonita (shadcn/ui) con informe ampliado y justificado\n// ==========================================================================================\n// Cómo usarlo (Next.js 13/14 con App Router):\n// 1) Instala dependencias: npm install framer-motion lucide-react html2canvas jspdf\n// 2) Instala shadcn/ui (si no lo tienes):\n// npx shadcn@latest init\n// npx shadcn@latest add button card alert badge input textarea separator switch tooltip\n// 3) Crea la ruta app/ia/page.tsx y pega este archivo. Arranca: npm run dev\n// 4) Abre /ia → rellena, copia texto, imprime o exporta PDF.\n\nimport React, { useMemo, useRef, useState } from 'react'\nimport { motion } from 'framer-motion'\nimport html2canvas from 'html2canvas'\nimport jsPDF from 'jspdf'\n\n// shadcn/ui\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'\nimport { Textarea } from '@/components/ui/textarea'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'\n\n// Icons\nimport { Info, CheckCircle2, AlertTriangle, Copy, Printer, RotateCcw, Download } from 'lucide-react'\n\n// ===== Utilidades =====\nconst cx = (...cls: (string | undefined | false)[]) => cls.filter(Boolean).join(' ')\n\nconst QUESTIONS = [\n { q: '¿El sistema ha sido diseñado para realizar tareas que normalmente requieren inteligencia humana?', h: 'Ej.: clasificación, PLN, decisiones, predicción, reconocimiento de imagen/voz.' },\n { q: '¿Aprende, mejora o adapta su comportamiento a lo largo del tiempo?', h: 'Mejora con más datos; no solo reglas fijas.' },\n { q: '¿Genera predicciones, recomendaciones o decisiones basadas en inferencias o patrones?', h: 'Recomendadores, scoring basado en históricos, etc.' },\n { q: '¿Opera con cierto grado de autonomía (sin intervención directa constante de personas)?', h: 'Ejecución/ajuste dentro de límites definidos.' },\n { q: '¿Utiliza técnicas de aprendizaje automático (modelos, redes, árboles, boosting)?', h: 'Modelos entrenados con datos, no solo reglas.' },\n { q: '¿El proveedor declara explícitamente que su solución incluye IA en documentación técnica o contratos?', h: 'Menciones a ML, LLM, IA generativa, servicios cognitivos.' },\n { q: '¿Usa modelos preentrenados o servicios de IA de terceros (APIs)?', h: 'LLM/visión/servicios cloud como parte del flujo.' },\n { q: '¿Las decisiones pueden afectar significativamente a personas (empleo, crédito, salud, educación, servicios esenciales)?', h: 'Si afecta derechos u oportunidades, cautela reforzada.' },\n { q: '¿Se adapta en tiempo real o casi real a nuevos datos o situaciones?', h: 'Actualiza comportamiento/ponderaciones sin reprogramar.' },\n { q: '¿Genera contenido nuevo (texto, imágenes, audio o vídeo) de forma autónoma?', h: 'Redacción, imagen, voz sintética, etc.' },\n] as const\n\ntype LevelKey = 'veryHigh' | 'high' | 'medium' | 'low' | 'none'\n\nconst LEVELS: Record = {\n veryHigh: { label: 'Es IA con total certeza', summary: 'Con 9–10 SÍ, se confirma el uso de IA. Debe realizarse una EIPD antes del tratamiento y revisar obligaciones del Reglamento de IA.', tone: 'success', range: '9–10 SÍ' },\n high: { label: 'Muy probablemente es IA', summary: 'Con 7–8 SÍ hay evidencias sólidas de IA. Inicia la EIPD y solicita documentación técnica al proveedor.', tone: 'warning', range: '7–8 SÍ' },\n medium: { label: 'Indicios claros de IA', summary: 'Con 4–6 SÍ hay señales relevantes. Revisión técnica y, según el caso, EIPD preventiva.', tone: 'neutral', range: '4–6 SÍ' },\n low: { label: 'Poca probabilidad de IA', summary: 'Con 1–3 SÍ parece más cercano a automatización por reglas. Verifica ausencia de IA no declarada.', tone: 'neutral', range: '1–3 SÍ' },\n none: { label: 'No parece IA', summary: 'Con 0 SÍ no se observan rasgos de IA. Aun así, revisar módulos no declarados y obligaciones RGPD generales.', tone: 'neutral', range: '0 SÍ' },\n}\n\nfunction classify(count: number): LevelKey {\n if (count >= 9) return 'veryHigh'\n if (count >= 7) return 'high'\n if (count >= 4) return 'medium'\n if (count >= 1) return 'low'\n return 'none'\n}\n\nconst toneStyles = {\n success: { icon: , container: 'border-emerald-200 bg-emerald-50', title: 'text-emerald-900', text: 'text-emerald-800' },\n warning: { icon: , container: 'border-amber-200 bg-amber-50', title: 'text-amber-900', text: 'text-amber-800' },\n neutral: { icon: , container: 'border-slate-200 bg-slate-50', title: 'text-slate-900', text: 'text-slate-700' },\n}\n\n// ===== Justificaciones por pregunta =====\nconst RATIONALES = [\n { yes: 'La tarea apunta a capacidades típicas de IA (percepción, predicción o decisión a partir de datos).', no: 'Se describe como automatización de reglas fijas sin capacidades cognitivas simuladas.' },\n { yes: 'La adaptación/mejora con datos sugiere aprendizaje automático o por refuerzo.', no: 'Comportamiento invariable → indica software determinista basado en reglas.' },\n { yes: 'Generar salidas por inferencia/patrones es característico de modelos entrenados.', no: 'Sin inferencias → más probable motor de reglas con if/else o scoring fijo.' },\n { yes: 'Autonomía operacional es rasgo clave de sistemas de IA dentro de límites definidos.', no: 'Dependencia constante de instrucciones humanas → automatización asistida, no IA.' },\n { yes: 'El uso de técnicas ML confirma el componente IA (modelos estadísticos/neurales).', no: 'Ausencia declarada de ML → sugiere reglas fijas salvo evidencia contraria.' },\n { yes: 'Declaración del proveedor aporta evidencia documental del uso de IA.', no: 'Sin declaración: no descarta IA, pero requiere diligencia y revisión técnica.' },\n { yes: 'Dependencia de APIs de IA externas es un indicador claro de funcionalidad IA.', no: 'Sin servicios externos no implica ausencia de IA, pero reduce probabilidad.' },\n { yes: 'Impacto significativo en personas exige cautelas reforzadas (posible alto riesgo).', no: 'Sin impacto fuerte, pero mantener evaluación según el caso y datos tratados.' },\n { yes: 'Adaptación en tiempo (casi) real implica ciclo de vida de modelos y monitorización.', no: 'Sin adaptación dinámica → menor complejidad operacional del sistema.' },\n { yes: 'Generación de contenido nuevo es rasgo típico de IA generativa.', no: 'Sin generación autónoma → podría ser analítica tradicional o reglas.' },\n] as const\n\ntype MatrixRow = { idx: number; question: string; answer: 'Sí' | 'No'; indicio: string }\n\ntype ReportSection = { title: string; text?: string; bullets?: string[]; matrix?: MatrixRow[] }\n\ntype DetailedReport = { sections: ReportSection[] }\n\nfunction buildDetailedReport({ answers, yesCount, levelKey, context }: { answers: boolean[]; yesCount: number; levelKey: LevelKey; context: string }): DetailedReport {\n const level = LEVELS[levelKey]\n const matrix: MatrixRow[] = answers.map((a, i) => ({ idx: i + 1, question: QUESTIONS[i].q, answer: a ? 'Sí' : 'No', indicio: a ? RATIONALES[i].yes : RATIONALES[i].no }))\n const positives = matrix.filter(r => r.answer === 'Sí')\n\n const recs: string[] = []\n if (answers[4]) recs.push('Solicitar al proveedor ficha de modelos: tipo, versión, datos de entrenamiento, métricas, límites conocidos y procedimiento de actualización.')\n if (answers[6]) recs.push('Revisar contratos de APIs de IA: DPA/encargo, ubicación de datos, subencargados y transferencias internacionales.')\n if (answers[8]) recs.push('Definir controles de MLOps: monitorización de desempeño, detección de drift, alertas y plan de rollback de modelos.')\n if (answers[9]) recs.push('Política de IA generativa: revisión humana, gestión de contenido sensible, derechos de autor y trazabilidad del output.')\n if (positives.length === 0) recs.push('Verificar técnicamente que no existan módulos IA no declarados (auditar documentación y arquitectura).')\n\n const sections: ReportSection[] = [\n { title: 'Resumen ejecutivo', bullets: [ `Clasificación preliminar: ${level.label} (SÍ: ${yesCount}/10 — regla ${level.range}).`, level.summary, 'Este dictamen es indiciario y debe confirmarse con documentación técnica del proveedor y, en su caso, pruebas funcionales.' ] },\n { title: 'Metodología y criterios', bullets: [ 'Cuestionario de 10 indicadores de IA (aprendizaje, inferencia, autonomía, uso de modelos/servicios, impacto, adaptabilidad y generación de contenido).', 'Umbrales: 9–10 SÍ (confirmado), 7–8 SÍ (muy probable), 4–6 SÍ (indicios claros), 1–3 SÍ (baja probabilidad), 0 SÍ (no parece IA).', 'El resultado clasifica la probabilidad de que el software incorpore IA, no la categoría de riesgo final bajo el Reglamento de IA.' ] },\n { title: 'Matriz de respuestas y razonamiento', matrix },\n { title: 'Justificación del diagnóstico', bullets: [ positives.length ? 'Principales indicios detectados:' : 'No se han detectado indicios positivos. Se asume funcionamiento basado en reglas salvo evidencia en contrario.', ...positives.map(r => `• P${r.idx} — ${r.indicio}`) ].filter(Boolean) },\n { title: 'Implicaciones normativas (orientativas)', bullets: [ 'RGPD: si hay tratamiento de datos personales, debe realizarse una Evaluación de Impacto en Protección de Datos (EIPD) antes del tratamiento.', 'Reglamento de IA: revisar categoría de riesgo aplicable y obligaciones (gestión de riesgos, gobernanza de datos, documentación técnica, transparencia, supervisión humana).', answers[7] ? 'La funcionalidad puede afectar significativamente a personas (P8). Evaluar posible encaje en categorías de alto riesgo.' : undefined, answers[9] ? 'Si existe IA generativa (P10), añadir medidas de transparencia y revisión humana del contenido.' : undefined ].filter(Boolean) as string[] },\n { title: 'Recomendaciones prioritarias (próximos 30 días)', bullets: recs.length ? recs : ['Sin acciones prioritarias específicas más allá de la verificación documental.'] },\n { title: 'Checklist para el proveedor', bullets: [ 'Arquitectura y diagrama de componentes (identificar módulos IA y flujos de datos).', 'Descripción de modelos: tipo, versión, datos de entrenamiento, métricas, límites y plan de mantenimiento.', 'Políticas de datos: minimización, retención, eliminación, enmascaramiento/pseudonimización.', 'Seguridad y robustez: controles de acceso, cifrado, pruebas adversariales, registros y auditoría.', answers[6] ? 'Contratos de APIs de IA externas, subencargados y transferencias (si aplica).' : undefined ].filter(Boolean) as string[] },\n { title: 'Notas del solicitante', text: context?.trim() ? context.trim() : '(Sin notas adicionales)' },\n { title: 'Limitaciones y supuestos', bullets: [ 'Resultado basado en la información disponible y en respuestas declarativas.', 'El software podría incorporar IA no visible para el usuario final; se recomienda verificación técnica.', 'Este informe no sustituye a un dictamen jurídico completo.' ] },\n { title: 'Anexo A — Glosario mínimo', bullets: [ 'Aprendizaje automático (ML): modelos que aprenden patrones a partir de datos.', 'Inferencia: generación de salidas (predicciones/decisiones) a partir de un modelo entrenado.', 'Drift: desviación del desempeño del modelo con el tiempo por cambios en los datos.', 'IA generativa: sistemas capaces de crear contenido nuevo (texto, imagen, audio, vídeo).' ] },\n { title: 'Anexo B — Registro de evaluación', bullets: [ `Vector de respuestas: ${answers.map(a => (a ? 'S' : 'N')).join(', ')}`, `Total de SÍ: ${yesCount}`, `Regla aplicada: ${level.range}`, `Fecha: ${new Date().toLocaleString()}` ] },\n ]\n\n return { sections }\n}\n\n// ===== UI =====\nfunction Question({ index, q, h, value, onChange }: { index: number; q: string; h?: string; value: boolean; onChange: (v: boolean) => void }) {\n return (\n \n \n

\n {index}. {q}\n {h &&

{h}

}\n

\n \n \n \n \n \n {h}\n \n \n \n \n

\n \n {value ? 'Sí' : 'No'}\n

\n \n \n )\n}\n\nfunction ResultBlock({ levelKey }: { levelKey: LevelKey }) {\n const l = LEVELS[levelKey]\n const t = toneStyles[l.tone]\n return (\n

\n {t.icon}\n

{l.label}

{l.summary}

Regla aplicada: {l.range}

\n )\n}\n\nexport default function PageIA() {\n const [answers, setAnswers] = useState(Array(10).fill(false))\n const [context, setContext] = useState('')\n const [project, setProject] = useState('')\n const [client, setClient] = useState('')\n\n const yesCount = useMemo(() => answers.filter(Boolean).length, [answers])\n const levelKey = classify(yesCount)\n const report = useMemo(() => buildDetailedReport({ answers, yesCount, levelKey, context }), [answers, yesCount, levelKey, context])\n\n const reportRef = useRef(null)\n\n const resetAll = () => { setAnswers(Array(10).fill(false)); setContext(''); setProject(''); setClient('') }\n\n const copyAsText = async () => {\n const text = toPlainText({ project, client, yesCount, levelKey, report })\n try { await navigator.clipboard.writeText(text) } catch {}\n }\n\n const printReport = () => window.print()\n\n const exportPDF = async () => {\n const node = reportRef.current\n if (!node) return\n const canvas = await html2canvas(node, { scale: 2, useCORS: true })\n const imgData = canvas.toDataURL('image/png')\n const pdf = new jsPDF({ unit: 'pt', format: 'a4', compress: true })\n const pageW = pdf.internal.pageSize.getWidth()\n const pageH = pdf.internal.pageSize.getHeight()\n const imgW = pageW - 72\n const imgH = (canvas.height * imgW) / canvas.width\n let heightLeft = imgH\n let position = 36\n pdf.addImage(imgData, 'PNG', 36, position, imgW, imgH)\n heightLeft -= (pageH - 72)\n while (heightLeft > 0) {\n pdf.addPage(); position = 36 - (imgH - heightLeft)\n pdf.addImage(imgData, 'PNG', 36, position, imgW, imgH)\n heightLeft -= (pageH - 72)\n }\n pdf.save(`Informe-IA-${sanitize(project || 'proyecto')}.pdf`)\n }\n\n return (\n

\n \n

Cuestionario IA + Informe ampliado

Responde las 10 preguntas y genera un informe detallado con matriz y justificación.

\n v1.4\n

\n\n \n Aviso importante\n Resultado orientativo. No constituye asesoramiento jurídico.\n \n\n {/* Datos básicos */}\n \n \n Datos del expediente\n \n \n setProject(e.target.value)} />\n setClient(e.target.value)} />\n \n \n\n {/* Preguntas */}\n

\n {QUESTIONS.map((item, i) => (\n setAnswers((a) => a.map((x, idx) => (idx === i ? v : x)))} />\n ))}\n

\n\n \n\n {/* Notas */}\n \n \n Notas del solicitante (opcional)\n \n \n

setContext(e.target.value)} />\n            </CardContent>\n          </Card>\n\n          {/* Acciones */}\n          <div className=\"flex flex-wrap items-center gap-2 mb-6\">\n            <Badge variant=\"secondary\" className=\"rounded-2xl\">SÍ: {yesCount} / 10</Badge>\n            <Badge variant=\"outline\" className=\"rounded-2xl\">{LEVELS[levelKey].label}</Badge>\n            <Button onClick={copyAsText} variant=\"secondary\" className=\"gap-2\"><Copy className=\"w-4 h-4\"/> Copiar texto</Button>\n            <Button onClick={exportPDF} className=\"gap-2\"><Download className=\"w-4 h-4\"/> Exportar PDF</Button>\n            <Button onClick={printReport} variant=\"outline\" className=\"gap-2\"><Printer className=\"w-4 h-4\"/> Imprimir</Button>\n            <Button onClick={resetAll} variant=\"ghost\" className=\"gap-2\"><RotateCcw className=\"w-4 h-4\"/> Reiniciar</Button>\n          </div>\n\n          {/* Informe (captura para PDF) */}\n          <div ref={reportRef} className=\"bg-white border rounded-2xl shadow-sm\">\n            <div className=\"p-6 border-b flex items-start justify-between gap-3\">\n              <div>\n                <h2 className=\"text-xl font-semibold\">Informe preliminar sobre uso de IA</h2>\n                <p className=\"text-slate-600 text-sm\">{new Date().toLocaleDateString()}</p>\n              </div>\n              <Badge>Diagnóstico</Badge>\n            </div>\n\n            <div className=\"p-6 space-y-6\">\n              <div className=\"grid md:grid-cols-2 gap-4\">\n                <div>\n                  <p className=\"text-sm text-slate-500\">Proyecto</p>\n                  <p className=\"font-medium\">{project || '(Sin nombre)'}</p>\n                </div>\n                <div>\n                  <p className=\"text-sm text-slate-500\">Cliente</p>\n                  <p className=\"font-medium\">{client || '(Sin especificar)'}</p>\n                </div>\n                <div>\n                  <p className=\"text-sm text-slate-500\">Resultado</p>\n                  <p className=\"font-medium\">SÍ: {yesCount}/10 — {LEVELS[levelKey].label} ({LEVELS[levelKey].range})</p>\n                </div>\n              </div>\n\n              <ResultBlock levelKey={levelKey} />\n\n              {report.sections.map((sec, idx) => (\n                <section key={idx}>\n                  <h4 className=\"font-semibold text-slate-800 mb-2\">{sec.title}</h4>\n                  {sec.text && <p className=\"text-sm text-slate-700 whitespace-pre-wrap\">{sec.text}</p>}\n                  {sec.bullets && (\n                    <ul className=\"list-disc list-inside text-sm text-slate-700 space-y-1\">\n                      {sec.bullets.map((b, i) => b && <li key={i}>{b}</li>)}\n                    </ul>\n                  )}\n                  {sec.matrix && (\n                    <div className=\"overflow-x-auto mt-2 border rounded-xl\">\n                      <table className=\"w-full text-sm\">\n                        <thead className=\"bg-slate-50\">\n                          <tr className=\"text-left\">\n                            <th className=\"px-3 py-2 border-b\">#</th>\n                            <th className=\"px-3 py-2 border-b\">Pregunta</th>\n                            <th className=\"px-3 py-2 border-b\">Respuesta</th>\n                            <th className=\"px-3 py-2 border-b\">Indicio / razonamiento</th>\n                          </tr>\n                        </thead>\n                        <tbody>\n                          {sec.matrix.map((row) => (\n                            <tr key={row.idx} className=\"align-top\">\n                              <td className=\"px-3 py-2 border-b w-10\">{row.idx}</td>\n                              <td className=\"px-3 py-2 border-b min-w-[220px]\">{row.question}</td>\n                              <td className={cx('px-3 py-2 border-b', row.answer === 'Sí' ? 'text-emerald-700' : 'text-slate-700')}>{row.answer}</td>\n                              <td className=\"px-3 py-2 border-b\">{row.indicio}</td>\n                            </tr>\n                          ))}\n                        </tbody>\n                      </table>\n                    </div>\n                  )}\n                </section>\n              ))}\n\n              <div className=\"text-xs text-slate-500 border-t pt-4\">Este informe es orientativo y no sustituye un dictamen jurídico. Requiere validación técnica y legal del caso concreto.</div>\n            </div>\n          </div>\n        </motion.div>\n      </div>\n    </div>\n  )\n}\n\nfunction sanitize(name: string){ return name.replace(/[^a-z0-9\\-_.]+/gi, '-') }\n\nfunction toPlainText({ project, client, yesCount, levelKey, report }: { project: string; client: string; yesCount: number; levelKey: LevelKey; report: DetailedReport }){\n  const lines: string[] = []\n  lines.push('# Informe preliminar sobre uso de IA')\n  if (project) lines.push(`Proyecto: ${project}`)\n  if (client) lines.push(`Cliente: ${client}`)\n  lines.push('')\n  lines.push(`Resultado: ${LEVELS[levelKey].label} (SÍ: ${yesCount}/10 — ${LEVELS[levelKey].range})`)\n  lines.push(LEVELS[levelKey].summary)\n  lines.push('')\n  report.sections.forEach((sec) => {\n    lines.push(`## ${sec.title}`)\n    if (sec.text) lines.push(sec.text)\n    if (sec.bullets) sec.bullets.forEach((b) => lines.push(`- ${b}`))\n    if (sec.matrix) {\n      lines.push('')\n      lines.push('| # | Pregunta | Respuesta | Indicio |')\n      lines.push('|---|----------|-----------|---------|')\n      sec.matrix.forEach((r) => { lines.push(`| ${r.idx} | ${r.question} | ${r.answer} | ${r.indicio} |`) })\n    }\n    lines.push('')\n  })\n  return lines.join('\\n')\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","5930172511734834695","traceTime",1776648105853]
</article></body></html>