[{"_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","6912c2c0854481918f394ebc28411eb4","versionInt","title","Diagrama Jerarquico Ia","type","code/react","content","import React, { useRef, useState, useEffect, useMemo } from \"react\";\n\n// Responsive, interactive hierarchical diagram for IA\n// - Collapsible nodes\n// - Pan & zoom\n// - Simple tree layout computed in JS\n// - Tailwind CSS used for styling (no external deps required)\n\nconst sampleData = {\n name: \"INTELIGENCIA ARTIFICIAL (IA)\",\n id: \"ia\",\n children: [\n {\n name: \"Inteligencia Artificial Débil (Narrow AI)\",\n id: \"weak\",\n children: [\n {\n name: \"Procesamiento del Lenguaje Natural (PLN)\",\n id: \"pln\",\n children: [\n { name: \"Chatbots y asistentes virtuales\", id: \"pln-1\" },\n { name: \"Traducción automática\", id: \"pln-2\" },\n { name: \"Análisis de sentimientos\", id: \"pln-3\" },\n { name: \"Generación automática de texto\", id: \"pln-4\" },\n ],\n },\n {\n name: \"Visión por Computadora\",\n id: \"vision\",\n children: [\n { name: \"Reconocimiento facial y de objetos\", id: \"vision-1\" },\n { name: \"Diagnóstico médico por imagen\", id: \"vision-2\" },\n { name: \"Vehículos autónomos\", id: \"vision-3\" },\n { name: \"Control de calidad en manufactura\", id: \"vision-4\" },\n ],\n },\n {\n name: \"Aprendizaje Automático y Predictivo\",\n id: \"ml\",\n children: [\n { name: \"Sistemas de recomendación\", id: \"ml-1\" },\n { name: \"Detección de fraude\", id: \"ml-2\" },\n { name: \"Predicción de demanda o riesgo\", id: \"ml-3\" },\n { name: \"Modelos de comportamiento del usuario\", id: \"ml-4\" },\n ],\n },\n {\n name: \"Robótica e IA Autónoma\",\n id: \"robotics\",\n children: [\n { name: \"Robots industriales\", id: \"robotics-1\" },\n { name: \"Robots domésticos o asistenciales\", id: \"robotics-2\" },\n { name: \"Drones inteligentes\", id: \"robotics-3\" },\n { name: \"Vehículos y sistemas autónomos\", id: \"robotics-4\" },\n ],\n },\n {\n name: \"Sistemas Expertos y Toma de Decisiones\",\n id: \"expert\",\n children: [\n { name: \"Diagnóstico médico automatizado\", id: \"expert-1\" },\n { name: \"Asesoramiento legal o técnico\", id: \"expert-2\" },\n { name: \"Soporte a decisiones empresariales\", id: \"expert-3\" },\n ],\n },\n {\n name: \"IA Generativa\",\n id: \"generative\",\n children: [\n { name: \"Creación de imágenes\", id: \"gen-1\" },\n { name: \"Generación de música o voz sintética\", id: \"gen-2\" },\n { name: \"Producción de vídeo y animación\", id: \"gen-3\" },\n { name: \"Diseño asistido por IA\", id: \"gen-4\" },\n ],\n },\n ],\n },\n {\n name: \"Inteligencia Artificial General (AGI)\",\n id: \"agi\",\n children: [\n { name: \"Razonamiento y comprensión general\", id: \"agi-1\" },\n { name: \"Aprendizaje autónomo sin entrenamiento específico\", id: \"agi-2\" },\n { name: \"Transferencia de conocimiento entre dominios\", id: \"agi-3\" },\n { name: \"Adaptabilidad y creatividad comparables a humanas\", id: \"agi-4\" },\n ],\n },\n {\n name: \"Inteligencia Artificial Superinteligente (ASI)\",\n id: \"asi\",\n children: [\n { name: \"Supera la inteligencia humana en todos los ámbitos\", id: \"asi-1\" },\n { name: \"Automejora continua y acelerada\", id: \"asi-2\" },\n { name: \"Toma de decisiones estratégicas globales\", id: \"asi-3\" },\n { name: \"Riesgos éticos y de control\", id: \"asi-4\" },\n ],\n },\n ],\n};\n\nfunction cloneNode(n) {\n return JSON.parse(JSON.stringify(n));\n}\n\n// Compute a simple tidy tree layout (vertical oriented, left-to-right depth)\nfunction computeTreePositions(root, nodeWidth = 220, nodeHeight = 40, hGap = 40, vGap = 20) {\n // assign widths by leaves\n let leaves = 0;\n function countLeaves(node) {\n if (!node.children || node.children.length === 0) return 1;\n let s = 0;\n for (let c of node.children) s += countLeaves(c);\n return s;\n }\n\n const totalLeaves = countLeaves(root);\n let currentLeafIndex = 0;\n\n function dfs(node, depth = 0) {\n node.depth = depth;\n if (!node._collapsed && node.children && node.children.length > 0) {\n for (let c of node.children) dfs(c, depth + 1);\n // y = average of children\n const minY = Math.min(...node.children.map((c) => c.y));\n const maxY = Math.max(...node.children.map((c) => c.y));\n node.x = depth * (nodeWidth + hGap);\n node.y = (minY + maxY) / 2;\n } else {\n // leaf\n const y = currentLeafIndex * (nodeHeight + vGap);\n node.x = depth * (nodeWidth + hGap);\n node.y = y;\n currentLeafIndex++;\n }\n }\n\n dfs(root, 0);\n\n // Normalize to center\n return root;\n}\n\nexport default function DiagramaJerarquicoIA() {\n const containerRef = useRef(null);\n const svgRef = useRef(null);\n\n const [data, setData] = useState(() => cloneNode(sampleData));\n const [scale, setScale] = useState(1);\n const [translate, setTranslate] = useState({ x: 20, y: 20 });\n const [isPanning, setIsPanning] = useState(false);\n const panStart = useRef({ x: 0, y: 0 });\n const transformStart = useRef({ x: 0, y: 0 });\n\n // Recompute positions whenever data changes\n const layout = useMemo(() => {\n const copy = cloneNode(data);\n // ensure all nodes have _collapsed property\n function setDefaults(n) {\n if (typeof n._collapsed === \"undefined\") n._collapsed = false;\n if (n.children) n.children.forEach(setDefaults);\n }\n setDefaults(copy);\n computeTreePositions(copy);\n return copy;\n }, [data]);\n\n useEffect(() => {\n function handleWheel(e) {\n if (!e.ctrlKey) return; // require ctrl+wheel to zoom to avoid accidental\n e.preventDefault();\n const delta = -e.deltaY;\n const amount = delta > 0 ? 0.1 : -0.1;\n setScale((s) => Math.max(0.3, Math.min(3, +(s + amount).toFixed(2))));\n }\n const svg = svgRef.current;\n svg && svg.addEventListener(\"wheel\", handleWheel, { passive: false });\n return () => svg && svg.removeEventListener(\"wheel\", handleWheel);\n }, []);\n\n // Pan handlers\n function onPointerDown(e) {\n setIsPanning(true);\n panStart.current = { x: e.clientX, y: e.clientY };\n transformStart.current = { ...translate };\n }\n function onPointerMove(e) {\n if (!isPanning) return;\n const dx = e.clientX - panStart.current.x;\n const dy = e.clientY - panStart.current.y;\n setTranslate({ x: transformStart.current.x + dx, y: transformStart.current.y + dy });\n }\n function onPointerUp() {\n setIsPanning(false);\n }\n\n useEffect(() => {\n window.addEventListener(\"pointerup\", onPointerUp);\n return () => window.removeEventListener(\"pointerup\", onPointerUp);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Toggle collapse\n function toggleCollapse(nodeId) {\n function toggle(n) {\n if (n.id === nodeId) {\n n._collapsed = !n._collapsed;\n } else if (n.children) n.children.forEach(toggle);\n }\n setData((prev) => {\n const copy = cloneNode(prev);\n toggle(copy);\n return copy;\n });\n }\n\n function setCollapseAll(state) {\n function walk(n) {\n n._collapsed = state;\n if (n.children) n.children.forEach(walk);\n }\n setData((prev) => {\n const copy = cloneNode(prev);\n if (copy.children) copy.children.forEach(walk);\n return copy;\n });\n }\n\n function fitToScreen() {\n // crude fit: center content in view\n const svgBox = svgRef.current.getBoundingClientRect();\n // get extents of layout\n let minX = Infinity,\n maxX = -Infinity,\n minY = Infinity,\n maxY = -Infinity;\n\n function ext(n) {\n if (n.x < minX) minX = n.x;\n if (n.x > maxX) maxX = n.x;\n if (n.y < minY) minY = n.y;\n if (n.y > maxY) maxY = n.y;\n if (!n._collapsed && n.children) n.children.forEach(ext);\n }\n ext(layout);\n const contentW = maxX - minX + 260; // nodeWidth padding\n const contentH = maxY - minY + 120; // nodeHeight padding\n\n const scaleX = (svgBox.width - 40) / contentW;\n const scaleY = (svgBox.height - 40) / contentH;\n const newScale = Math.max(0.3, Math.min(2.5, Math.min(scaleX, scaleY)));\n setScale(+newScale.toFixed(2));\n // center\n const centerX = svgBox.width / 2 - (minX + maxX) / 2 * newScale;\n const centerY = svgBox.height / 2 - (minY + maxY) / 2 * newScale;\n setTranslate({ x: centerX, y: centerY });\n }\n\n // render nodes and links\n const nodes = [];\n const links = [];\n function collect(n, parent = null) {\n nodes.push(n);\n if (parent) links.push([parent, n]);\n if (!n._collapsed && n.children) n.children.forEach((c) => collect(c, n));\n }\n collect(layout);\n\n // responsive svg viewBox size\n const [svgSize, setSvgSize] = useState({ w: 1200, h: 700 });\n useEffect(() => {\n function onResize() {\n if (!containerRef.current) return;\n const r = containerRef.current.getBoundingClientRect();\n setSvgSize({ w: Math.max(600, r.width), h: Math.max(300, r.height - 16) });\n }\n onResize();\n window.addEventListener(\"resize\", onResize);\n return () => window.removeEventListener(\"resize\", onResize);\n }, []);\n\n return (\n

\n setScale((s) => Math.min(3, +(s + 0.2).toFixed(2)))}\n >\n Zoom +\n \n setScale((s) => Math.max(0.3, +(s - 0.2).toFixed(2)))}\n >\n Zoom -\n \n \n Ajustar\n \n

\n setCollapseAll(true)}\n >\n Colapsar todo\n \n setCollapseAll(false)}\n >\n Expandir todo\n \n

Arrastra para desplazar • Ctrl+rueda para zoom

\n\n \n \n \n \n \n \n \n\n \n {/* links */}\n {links.map(([p, c], i) => {\n const startX = p.x + 140; // node width offset\n const startY = p.y + 20; // center of node\n const endX = c.x;\n const endY = c.y + 20;\n // simple curved path\n const midX = (startX + endX) / 2;\n const d = `M ${startX} ${startY} C ${midX} ${startY} ${midX} ${endY} ${endX} ${endY}`;\n return (\n \n );\n })}\n\n {/* nodes */}\n {nodes.map((n) => {\n const nx = n.x;\n const ny = n.y;\n const isCollapsed = n._collapsed && n.children && n.children.length > 0;\n return (\n \n n.children && toggleCollapse(n.id)}\n />\n \n {n.name.length > 36 ? n.name.slice(0, 36) + \"...\" : n.name}\n \n\n {/* collapse indicator */}\n {n.children && n.children.length > 0 ? (\n toggleCollapse(n.id)}\n style={{ cursor: \"pointer\" }}\n >\n \n \n {isCollapsed ? \"+\" : \"—\"}\n \n \n ) : null}\n \n );\n })}\n \n \n

\n\n

* Diagrama interactivo y responsive. Pide cambios (colores, tamaño, export PDF/SVG).

\n \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","4172862477603009352","traceTime",1776403375137]