Spaces:
Running
Running
| function enhanceSVGContent(t){const e=(new DOMParser).parseFromString(t,"image/svg+xml"),n=e.createElementNS("http://www.w3.org/2000/svg","style");return n.textContent='\n path[data-element-type="layer"] {\n transition: all 0.3s;\n cursor: pointer;\n }\n path[data-element-type="layer"]:hover {\n fill: #b197fc !important;\n transform: translate(0, -2px);\n }\n\n path[data-element-type="layer-updated"] {\n transition: all 0.3s;\n cursor: pointer;\n }\n \n path[data-element-type="layer-updated"]:hover {\n fill:rgb(103, 56, 244) !important;\n transform: scale(1.02);\n transform: translate(0, -2px);\n }\n\n path[data-element-type="gradient"] {\n transition: all 0.3s;\n cursor: pointer;\n }\n path[data-element-type="gradient"]:hover {\n fill: #f06595 !important;\n transform: translate(0, -2px);\n }\n\n path[data-element-type="forward"] {\n transition: all 0.3s;\n cursor: pointer;\n }\n path[data-element-type="forward"]:hover {\n stroke: #0c8599 !important;\n stroke-width: 4 !important;\n }\n\n path[data-element-type="backward"] {\n transition: all 0.3s;\n cursor: pointer;\n }\n path[data-element-type="backward"]:hover {\n stroke: #e8590c !important;\n stroke-width: 4 !important;\n }\n\n path[data-element-type="optimization"] {\n transition: all 0.3s;\n cursor: pointer;\n }\n path[data-element-type="optimization"]:hover {\n stroke: #087f5b !important;\n stroke-width: 4 !important;\n }\n',e.documentElement.insertBefore(n,e.documentElement.firstChild),e.querySelectorAll('path[fill="#d0bfff"]').forEach(((t,e)=>{t.setAttribute("data-element-id",`layer-${e}`),t.setAttribute("data-element-type","layer")})),e.querySelectorAll('path[fill="#9775fa"]').forEach(((t,e)=>{t.setAttribute("data-element-id",`layer-updated-${e}`),t.setAttribute("data-element-type","layer-updated")})),e.querySelectorAll('path[fill="#f783ac"]').forEach(((t,e)=>{t.setAttribute("data-element-id",`gradient-${e}`),t.setAttribute("data-element-type","gradient")})),Object.entries({"#15aabf":"forward","#fd7e14":"backward","#099268":"optimization"}).forEach((([t,n])=>{e.querySelectorAll(`path[stroke="${t}"]`).forEach(((t,e)=>{t.setAttribute("data-element-id",`${n}-${e}`),t.setAttribute("data-element-type",n)}))})),e.documentElement.setAttribute("width","100%"),e.documentElement.setAttribute("height","100%"),e.documentElement.setAttribute("preserveAspectRatio","xMidYMid meet"),(new XMLSerializer).serializeToString(e)}async function loadSVG(t,e){try{const n=await fetch(t);if(!n.ok)throw new Error(`HTTP error! Status: ${n.status}`);const a=enhanceSVGContent(await n.text());document.getElementById(e).innerHTML=a}catch(t){console.error("Error loading SVG:",t),document.getElementById(e).innerHTML="<p>Error loading SVG.</p>"}}loadSVG("../assets/images/first_steps_simple_training.svg","svg-first_steps_simple_training");const svgContainer=document.getElementById("svg-first_steps_simple_training");svgContainer.addEventListener("mouseover",(function(t){const e=t.target;if("path"===e.tagName.toLowerCase()&&e.hasAttribute("data-element-id")){const t=e.getAttribute("data-element-id"),n=e.getAttribute("data-element-type"),a={layer:"Neural Network Layer","layer-updated":"Neural Network Layer (updated)",gradient:"Gradient Update Layer",forward:"Forward Pass Connection",backward:"Backward Pass Connection",optimization:"Optimization Step"}[n]||n;document.getElementById("svg-first_steps_simple_training-info").textContent=`Hovering over: ${a} (${t})`}})),svgContainer.addEventListener("mouseout",(function(){document.getElementById("svg-first_steps_simple_training-info").textContent="Hover over the network elements to see their details"})); |