{"id":1511,"date":"2024-12-08T22:55:15","date_gmt":"2024-12-08T22:55:15","guid":{"rendered":"https:\/\/sparkonelabs.com\/home\/?p=1511"},"modified":"2024-12-08T23:04:33","modified_gmt":"2024-12-08T23:04:33","slug":"webgl-visualization-of-transformer-model-experimental","status":"publish","type":"post","link":"https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/","title":{"rendered":"WebGL Visualization of Transformer Model (Experimental)"},"content":{"rendered":"\n<div id=\"transformer-visualization\" style=\"width: 100%; height: 600px; position: relative;\">\n    <div id=\"info\" style=\"position: absolute; top: 10px; left: 10px; color: white; font-family: Arial, sans-serif; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 5px; z-index: 100;\">\n        Transformer Model 3D Visualization<br>\n        Click and drag to rotate<br>\n        Scroll to zoom\n    <\/div>\n    <div id=\"transformer-canvas-container\" style=\"width: 100%; height: 100%;\"><\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\n(function() {\n    \/\/ Ensure Three.js is loaded\n    if (typeof THREE === 'undefined') {\n        const threeScript = document.createElement('script');\n        threeScript.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/0.160.0\/three.min.js';\n        document.head.appendChild(threeScript);\n    }\n    \n    \/\/ Ensure Tween.js is loaded\n    if (typeof TWEEN === 'undefined') {\n        const tweenScript = document.createElement('script');\n        tweenScript.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tween.js\/21.0.0\/tween.umd.js';\n        document.head.appendChild(tweenScript);\n    }\n\n    \/\/ Wait for scripts to load\n    function initVisualization() {\n \n        document.getElementById('transformer-visualization').scrollTop = 600;\n\n        if (typeof THREE === 'undefined' || typeof TWEEN === 'undefined') {\n            setTimeout(initVisualization, 100);\n            return;\n        }\n\n        const container = document.getElementById('transformer-canvas-container');\n        const containerWidth = container.clientWidth;\n        const containerHeight = container.clientHeight;\n\n        \/\/ Scene setup\n        const scene = new THREE.Scene();\n        scene.background = new THREE.Color(0x1a1a1a);\n        \n        const camera = new THREE.PerspectiveCamera(75, containerWidth\/containerHeight, 0.1, 1000);\n        camera.position.z = 15;\n        camera.position.y = 5;\n        \n        const renderer = new THREE.WebGLRenderer({ antialias: true });\n        renderer.setSize(containerWidth, containerHeight);\n        container.appendChild(renderer.domElement);\n\n        \/\/ Lighting\n        const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);\n        scene.add(ambientLight);\n\n        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\n        directionalLight.position.set(5, 5, 5);\n        scene.add(directionalLight);\n\n        \/\/ Materials\n        const materials = {\n            embedding: new THREE.MeshPhongMaterial({ \n                color: 0x4285f4,\n                emissive: 0x1a1a5a\n            }),\n            attention: new THREE.MeshPhongMaterial({ \n                color: 0xea4335,\n                emissive: 0x5a1a1a\n            }),\n            ffn: new THREE.MeshPhongMaterial({ \n                color: 0x34a853,\n                emissive: 0x1a5a1a\n            })\n        };\n\n        \/\/ Flow materials\n        const flowMaterials = {\n            embedding: new THREE.MeshPhongMaterial({ \n                color: 0x4285f4,\n                transparent: true,\n                opacity: 0.6\n            }),\n            attention: new THREE.MeshPhongMaterial({ \n                color: 0xea4335,\n                transparent: true,\n                opacity: 0.6\n            }),\n            ffn: new THREE.MeshPhongMaterial({ \n                color: 0x34a853,\n                transparent: true,\n                opacity: 0.6\n            })\n        };\n\n        \/\/ Label creation\n        const labels = [];\n        function createLabel(text, position) {\n            const div = document.createElement('div');\n            div.className = 'label';\n            div.textContent = text;\n            div.style.position = 'absolute';\n            div.style.color = 'white';\n            div.style.background = 'rgba(0,0,0,0.7)';\n            div.style.padding = '5px';\n            div.style.borderRadius = '3px';\n            div.style.fontSize = '12px';\n            div.style.fontFamily = 'Arial, sans-serif';\n            div.style.pointerEvents = 'none';\n            container.appendChild(div);\n            return { div, position };\n        }\n\n        \/\/ Create component\n        function createComponent(width, height, depth, material, position, labelText) {\n            const geometry = new THREE.BoxGeometry(width, height, depth);\n            const mesh = new THREE.Mesh(geometry, material);\n            mesh.position.copy(position);\n            if (labelText) {\n                labels.push(createLabel(labelText, position));\n            }\n            return mesh;\n        }\n\n        \/\/ Create main components\n        const embeddings = createComponent(2, 3, 0.5, materials.embedding, \n            new THREE.Vector3(-5, 4, 0), \"Input Embeddings\");\n        scene.add(embeddings);\n\n        \/\/ Create attention heads\n        const attentionHeads = [];\n        const attentionLabels = [\"Q\", \"K\", \"V\", \"Output\"];\n        for (let i = 0; i < 4; i++) {\n            const head = createComponent(1, 1.5, 0.5, materials.attention, \n                new THREE.Vector3(-3 + i * 1.5, 0, 0), \n                `Attention Head ${i + 1}\\n${attentionLabels[i]}`);\n            attentionHeads.push(head);\n            scene.add(head);\n        }\n\n        \/\/ Create FFN layers\n        const ffn1 = createComponent(4, 2, 0.5, materials.ffn, \n            new THREE.Vector3(0, -4, 0), \"FFN Hidden Layer\");\n        const ffn2 = createComponent(2, 1, 0.5, materials.ffn, \n            new THREE.Vector3(4, -4, 0), \"FFN Output\");\n        scene.add(ffn1, ffn2);\n\n        \/\/ Create flow particles\n        function createFlowParticle(startPos, endPos, type) {\n            const geometry = new THREE.SphereGeometry(0.1, 8, 8);\n            const particle = new THREE.Mesh(geometry, flowMaterials[type]);\n            particle.position.copy(startPos);\n            scene.add(particle);\n            \n            const duration = 2000 + Math.random() * 1000;\n            const midPoint = new THREE.Vector3(\n                (startPos.x + endPos.x) \/ 2,\n                (startPos.y + endPos.y) \/ 2,\n                (startPos.z + endPos.z) \/ 2 + (Math.random() - 0.5)\n            );\n            \n            new TWEEN.Tween(particle.position)\n                .to({ x: midPoint.x, y: midPoint.y, z: midPoint.z }, duration\/2)\n                .easing(TWEEN.Easing.Quadratic.Out)\n                .chain(\n                    new TWEEN.Tween(particle.position)\n                        .to({ x: endPos.x, y: endPos.y, z: endPos.z }, duration\/2)\n                        .easing(TWEEN.Easing.Quadratic.In)\n                )\n                .repeat(Infinity)\n                .start();\n            \n            return particle;\n        }\n\n        \/\/ Create flow particles\n        const flowParticles = [];\n        for (let i = 0; i < 5; i++) {\n            flowParticles.push(createFlowParticle(\n                new THREE.Vector3(-5, 4, 0),\n                new THREE.Vector3(-3, 0, 0),\n                'embedding'\n            ));\n            \n            flowParticles.push(createFlowParticle(\n                new THREE.Vector3(-1.5, 0, 0),\n                new THREE.Vector3(0, 0, 0),\n                'attention'\n            ));\n            \n            flowParticles.push(createFlowParticle(\n                new THREE.Vector3(0, 0, 0),\n                new THREE.Vector3(0, -4, 0),\n                'ffn'\n            ));\n        }\n\n        \/\/ Attention animation\n        function animateAttentionMechanism() {\n            attentionHeads.forEach((head, i) => {\n                new TWEEN.Tween(head.scale)\n                    .to({ x: 1.2, y: 1.2, z: 1.2 }, 1000)\n                    .easing(TWEEN.Easing.Quadratic.InOut)\n                    .yoyo(true)\n                    .repeat(1)\n                    .delay(i * 300)\n                    .start();\n                \n                new TWEEN.Tween(head.rotation)\n                    .to({ y: Math.PI * 2 }, 2000)\n                    .easing(TWEEN.Easing.Quadratic.InOut)\n                    .delay(i * 300)\n                    .start();\n            });\n        }\n\n        setInterval(animateAttentionMechanism, 4000);\n\n        \/\/ Controls\n        let isDragging = false;\n        let previousMousePosition = { x: 0, y: 0 };\n\n        container.addEventListener('mousedown', () => isDragging = true);\n        container.addEventListener('mouseup', () => isDragging = false);\n        container.addEventListener('mouseleave', () => isDragging = false);\n        \n        container.addEventListener('mousemove', (e) => {\n            if (isDragging) {\n                const deltaMove = {\n                    x: e.clientX - previousMousePosition.x,\n                    y: e.clientY - previousMousePosition.y\n                };\n\n                scene.rotation.y += deltaMove.x * 0.005;\n                scene.rotation.x += deltaMove.y * 0.005;\n            }\n            previousMousePosition = { x: e.clientX, y: e.clientY };\n        });\n\n        container.addEventListener('wheel', (e) => {\n            e.preventDefault();\n            camera.position.z = Math.max(5, Math.min(30, camera.position.z + e.deltaY * 0.01));\n        });\n\n        \/\/ Update labels\n        function updateLabels() {\n            labels.forEach(label => {\n                const vector = label.position.clone();\n                vector.project(camera);\n                \n                const x = (vector.x * 0.5 + 0.5) * containerWidth;\n                const y = (-vector.y * 0.5 + 0.5) * containerHeight;\n                \n                label.div.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;\n            });\n        }\n\n        \/\/ Resize handler\n        function handleResize() {\n            const newWidth = container.clientWidth;\n            const newHeight = container.clientHeight;\n            camera.aspect = newWidth \/ newHeight;\n            camera.updateProjectionMatrix();\n            renderer.setSize(newWidth, newHeight);\n        }\n\n        window.addEventListener('resize', handleResize);\n\n        \/\/ Animation loop\n        function animate() {\n            requestAnimationFrame(animate);\n            TWEEN.update();\n            updateLabels();\n            renderer.render(scene, camera);\n        }\n        \n        animate();\n    }\n\n    \/\/ Start initialization when DOM is ready\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initVisualization);\n    } else {\n        initVisualization();\n    }\n})();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\">The Blue block is the Input Embeddings, the Red Blocks are Attention Heads, The Large Green Block is the Hidden Feed Forward Network and the Little Green Block is the Feed Forward Network Output.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Transformer Model 3D Visualization Click and drag to rotate Scroll to zoom The Blue block is the Input Embeddings, the Red Blocks are Attention Heads, The Large Green Block is the Hidden Feed Forward Network and the Little Green Block is the Feed Forward Network Output.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1511","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>WebGL Visualization of Transformer Model (Experimental) - SparkOne() Labs Official Site<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WebGL Visualization of Transformer Model (Experimental) - SparkOne() Labs Official Site\" \/>\n<meta property=\"og:description\" content=\"Transformer Model 3D Visualization Click and drag to rotate Scroll to zoom The Blue block is the Input Embeddings, the Red Blocks are Attention Heads, The Large Green Block is the Hidden Feed Forward Network and the Little Green Block is the Feed Forward Network Output.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/\" \/>\n<meta property=\"og:site_name\" content=\"SparkOne() Labs Official Site\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61551444286908\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-08T22:55:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-08T23:04:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/sparkonelabs.com\/home\/wp-content\/uploads\/2024\/01\/logo_sparkone_12.png?fit=1152%2C896&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1152\" \/>\n\t<meta property=\"og:image:height\" content=\"896\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@sparkonelabs\" \/>\n<meta name=\"twitter:site\" content=\"@sparkonelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/08\\\/webgl-visualization-of-transformer-model-experimental\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/08\\\/webgl-visualization-of-transformer-model-experimental\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#\\\/schema\\\/person\\\/ee3bd21f007818ac04abf178e749642c\"},\"headline\":\"WebGL Visualization of Transformer Model (Experimental)\",\"datePublished\":\"2024-12-08T22:55:15+00:00\",\"dateModified\":\"2024-12-08T23:04:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/08\\\/webgl-visualization-of-transformer-model-experimental\\\/\"},\"wordCount\":52,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/08\\\/webgl-visualization-of-transformer-model-experimental\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/08\\\/webgl-visualization-of-transformer-model-experimental\\\/\",\"url\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/08\\\/webgl-visualization-of-transformer-model-experimental\\\/\",\"name\":\"WebGL Visualization of Transformer Model (Experimental) - SparkOne() Labs Official Site\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#website\"},\"datePublished\":\"2024-12-08T22:55:15+00:00\",\"dateModified\":\"2024-12-08T23:04:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/08\\\/webgl-visualization-of-transformer-model-experimental\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/08\\\/webgl-visualization-of-transformer-model-experimental\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/08\\\/webgl-visualization-of-transformer-model-experimental\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WebGL Visualization of Transformer Model (Experimental)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#website\",\"url\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/\",\"name\":\"SparkOne() Labs Official Site\",\"description\":\"SparkOne Labs is a Science, Art and Technology blog. Email: sparkonelabs@sparkonelabs.com\",\"publisher\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#organization\"},\"alternateName\":\"SparkOne Labs\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#organization\",\"name\":\"SparkOne() Labs\",\"alternateName\":\"SparkOne Labs\",\"url\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/logo_sparkone_12.png\",\"contentUrl\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/logo_sparkone_12.png\",\"width\":1152,\"height\":896,\"caption\":\"SparkOne() Labs\"},\"image\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=61551444286908\",\"https:\\\/\\\/x.com\\\/sparkonelabs\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#\\\/schema\\\/person\\\/ee3bd21f007818ac04abf178e749642c\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bc8a8c84ca952e624e7407ec63589bc91e7996574dee7a01c13a96c536c341e9?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bc8a8c84ca952e624e7407ec63589bc91e7996574dee7a01c13a96c536c341e9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bc8a8c84ca952e624e7407ec63589bc91e7996574dee7a01c13a96c536c341e9?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\\\/\\\/sparkonelabs.com\\\/home\"],\"url\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WebGL Visualization of Transformer Model (Experimental) - SparkOne() Labs Official Site","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/","og_locale":"en_US","og_type":"article","og_title":"WebGL Visualization of Transformer Model (Experimental) - SparkOne() Labs Official Site","og_description":"Transformer Model 3D Visualization Click and drag to rotate Scroll to zoom The Blue block is the Input Embeddings, the Red Blocks are Attention Heads, The Large Green Block is the Hidden Feed Forward Network and the Little Green Block is the Feed Forward Network Output.","og_url":"https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/","og_site_name":"SparkOne() Labs Official Site","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61551444286908","article_published_time":"2024-12-08T22:55:15+00:00","article_modified_time":"2024-12-08T23:04:33+00:00","og_image":[{"width":1152,"height":896,"url":"https:\/\/i0.wp.com\/sparkonelabs.com\/home\/wp-content\/uploads\/2024\/01\/logo_sparkone_12.png?fit=1152%2C896&ssl=1","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@sparkonelabs","twitter_site":"@sparkonelabs","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/#article","isPartOf":{"@id":"https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/"},"author":{"name":"admin","@id":"https:\/\/sparkonelabs.com\/home\/#\/schema\/person\/ee3bd21f007818ac04abf178e749642c"},"headline":"WebGL Visualization of Transformer Model (Experimental)","datePublished":"2024-12-08T22:55:15+00:00","dateModified":"2024-12-08T23:04:33+00:00","mainEntityOfPage":{"@id":"https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/"},"wordCount":52,"commentCount":0,"publisher":{"@id":"https:\/\/sparkonelabs.com\/home\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/","url":"https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/","name":"WebGL Visualization of Transformer Model (Experimental) - SparkOne() Labs Official Site","isPartOf":{"@id":"https:\/\/sparkonelabs.com\/home\/#website"},"datePublished":"2024-12-08T22:55:15+00:00","dateModified":"2024-12-08T23:04:33+00:00","breadcrumb":{"@id":"https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sparkonelabs.com\/home\/2024\/12\/08\/webgl-visualization-of-transformer-model-experimental\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sparkonelabs.com\/home\/"},{"@type":"ListItem","position":2,"name":"WebGL Visualization of Transformer Model (Experimental)"}]},{"@type":"WebSite","@id":"https:\/\/sparkonelabs.com\/home\/#website","url":"https:\/\/sparkonelabs.com\/home\/","name":"SparkOne() Labs Official Site","description":"SparkOne Labs is a Science, Art and Technology blog. Email: sparkonelabs@sparkonelabs.com","publisher":{"@id":"https:\/\/sparkonelabs.com\/home\/#organization"},"alternateName":"SparkOne Labs","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sparkonelabs.com\/home\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sparkonelabs.com\/home\/#organization","name":"SparkOne() Labs","alternateName":"SparkOne Labs","url":"https:\/\/sparkonelabs.com\/home\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sparkonelabs.com\/home\/#\/schema\/logo\/image\/","url":"https:\/\/sparkonelabs.com\/home\/wp-content\/uploads\/2024\/01\/logo_sparkone_12.png","contentUrl":"https:\/\/sparkonelabs.com\/home\/wp-content\/uploads\/2024\/01\/logo_sparkone_12.png","width":1152,"height":896,"caption":"SparkOne() Labs"},"image":{"@id":"https:\/\/sparkonelabs.com\/home\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=61551444286908","https:\/\/x.com\/sparkonelabs"]},{"@type":"Person","@id":"https:\/\/sparkonelabs.com\/home\/#\/schema\/person\/ee3bd21f007818ac04abf178e749642c","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bc8a8c84ca952e624e7407ec63589bc91e7996574dee7a01c13a96c536c341e9?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bc8a8c84ca952e624e7407ec63589bc91e7996574dee7a01c13a96c536c341e9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bc8a8c84ca952e624e7407ec63589bc91e7996574dee7a01c13a96c536c341e9?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/sparkonelabs.com\/home"],"url":"https:\/\/sparkonelabs.com\/home\/author\/admin\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/posts\/1511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/comments?post=1511"}],"version-history":[{"count":3,"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/posts\/1511\/revisions"}],"predecessor-version":[{"id":1516,"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/posts\/1511\/revisions\/1516"}],"wp:attachment":[{"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/media?parent=1511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/categories?post=1511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/tags?post=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}