update

assets/images/first_steps_memory_profile.js

@@ -0,0 +1,160 @@
+// first_steps_memory_profile.js
+
+// Function to enhance the SVG content by adding styles and data attributes
+function enhanceSVGContent2(originalContent) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(originalContent, 'image/svg+xml');
+
+  // Create a style element with hover effects and insert it as the first child of the SVG
+  const styleElement = doc.createElementNS('http://www.w3.org/2000/svg', 'style');
+  styleElement.textContent = `
+    /* Memory Block (free memory) */
+    path[data-element-type="memory-block"] {
+      transition: all 0.3s;
+      cursor: pointer;
+    }
+    path[data-element-type="memory-block"]:hover {
+      fill: #a5d6a7 !important; /* slightly darker than original */
+      transform: translate(0, -2px);
+    }
+
+    /* Memory Block (updated) */
+    path[data-element-type="memory-block-updated"] {
+      transition: all 0.3s;
+      cursor: pointer;
+    }
+    path[data-element-type="memory-block-updated"]:hover {
+      fill: #81c784 !important;
+      transform: scale(1.02) translate(0, -2px);
+    }
+
+    /* Stack Segment */
+    path[data-element-type="stack"] {
+      transition: all 0.3s;
+      cursor: pointer;
+    }
+    path[data-element-type="stack"]:hover {
+      fill: #ffd54f !important;
+      transform: translate(0, -2px);
+    }
+
+    /* Read Operation Arrow */
+    path[data-element-type="read"] {
+      transition: all 0.3s;
+      cursor: pointer;
+    }
+    path[data-element-type="read"]:hover {
+      stroke: #1e88e5 !important;
+      stroke-width: 4 !important;
+    }
+
+    /* Write Operation Arrow */
+    path[data-element-type="write"] {
+      transition: all 0.3s;
+      cursor: pointer;
+    }
+    path[data-element-type="write"]:hover {
+      stroke: #d32f2f !important;
+      stroke-width: 4 !important;
+    }
+
+    /* Cache Operation Arrow */
+    path[data-element-type="cache"] {
+      transition: all 0.3s;
+      cursor: pointer;
+    }
+    path[data-element-type="cache"]:hover {
+      stroke: #fbc02d !important;
+      stroke-width: 4 !important;
+    }
+  `;
+  doc.documentElement.insertBefore(styleElement, doc.documentElement.firstChild);
+
+  // Process Memory Blocks (free memory segments) – assume they have fill color "#c8e6c9"
+  doc.querySelectorAll('path[fill="#c8e6c9"]').forEach((node, index) => {
+    node.setAttribute('data-element-id', `memory-block-${index}`);
+    node.setAttribute('data-element-type', 'memory-block');
+  });
+
+  // Process Updated Memory Blocks – assume they have fill color "#a5d6a7"
+  doc.querySelectorAll('path[fill="#a5d6a7"]').forEach((node, index) => {
+    node.setAttribute('data-element-id', `memory-block-updated-${index}`);
+    node.setAttribute('data-element-type', 'memory-block-updated');
+  });
+
+  // Process Stack Segments – assume they have fill color "#ffe082"
+  doc.querySelectorAll('path[fill="#ffe082"]').forEach((node, index) => {
+    node.setAttribute('data-element-id', `stack-${index}`);
+    node.setAttribute('data-element-type', 'stack');
+  });
+
+  // Process arrows for memory operations based on stroke colors
+  // Assume: 
+  //   stroke "#42a5f5" for read operations,
+  //   stroke "#ef5350" for write operations,
+  //   stroke "#ffca28" for cache operations.
+  const arrowTypes = {
+    '#42a5f5': 'read',
+    '#ef5350': 'write',
+    '#ffca28': 'cache'
+  };
+
+  Object.entries(arrowTypes).forEach(([color, type]) => {
+    doc.querySelectorAll(`path[stroke="${color}"]`).forEach((arrow, index) => {
+      arrow.setAttribute('data-element-id', `${type}-${index}`);
+      arrow.setAttribute('data-element-type', type);
+    });
+  });
+
+  // Make the SVG responsive
+  doc.documentElement.setAttribute('width', '100%');
+  doc.documentElement.setAttribute('height', '100%');
+  doc.documentElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+
+  return new XMLSerializer().serializeToString(doc);
+}
+
+// Function to load an SVG file via fetch
+async function loadSVG(url, containerId) {
+  try {
+    console.log('Loading SVG from:', url);
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const svgText = await response.text();
+    const enhancedSVG = enhanceSVGContent2(svgText);
+    document.getElementById(containerId).innerHTML = enhancedSVG;
+  } catch (error) {
+    console.error('Error loading SVG:', error);
+    document.getElementById(containerId).innerHTML = '<p>Error loading SVG.</p>';
+  }
+}
+
+// Load the SVG file (adjust the path if needed)
+loadSVG('../assets/images/first_steps_memory_profile.svg', 'svg-first_steps_memory_profile');
+
+// Set up event listeners to display a description of the hovered element
+const svgContainer2 = document.getElementById('svg-first_steps_memory_profile');
+
+svgContainer2.addEventListener('mouseover', function(event) {
+  const target = event.target;
+  if (target.tagName.toLowerCase() === 'path' && target.hasAttribute('data-element-id')) {
+    const elementId = target.getAttribute('data-element-id');
+    const elementType = target.getAttribute('data-element-type');
+    const descriptions = {
+      'memory-block': 'Memory Block',
+      'memory-block-updated': 'Memory Block (updated)',
+      'stack': 'Stack Segment',
+      'read': 'Memory Read',
+      'write': 'Memory Write',
+      'cache': 'Cache Operation'
+    };
+    const description = descriptions[elementType] || elementType;
+    document.getElementById('info').textContent = `Hovering over: ${description} (${elementId})`;
+  }
+});
+
+svgContainer2.addEventListener('mouseout', function() {
+  document.getElementById('info').textContent = 'Hover over the network elements to see their details';
+});

assets/images/first_steps_simple_training.js

@@ -0,0 +1,149 @@
+
+// Function to enhance the SVG content by adding styles and data attributes
+function enhanceSVGContent(originalContent) {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(originalContent, 'image/svg+xml');
+
+      // Create a style element with hover effects and insert it as the first child of the SVG
+      const styleElement = doc.createElementNS('http://www.w3.org/2000/svg', 'style');
+      styleElement.textContent = `
+      path[data-element-type="layer"] {
+      transition: all 0.3s;
+      cursor: pointer;
+      }
+      path[data-element-type="layer"]:hover {
+      fill: #b197fc !important;
+      transform: translate(0, -2px);
+      }
+
+      path[data-element-type="layer-updated"] {
+      transition: all 0.3s;
+      cursor: pointer;
+      }
+      
+      path[data-element-type="layer-updated"]:hover {
+      fill:rgb(103, 56, 244) !important;
+      transform: scale(1.02);
+      transform: translate(0, -2px);
+      }
+
+      path[data-element-type="gradient"] {
+      transition: all 0.3s;
+      cursor: pointer;
+      }
+      path[data-element-type="gradient"]:hover {
+      fill: #f06595 !important;
+      transform: translate(0, -2px);
+      }
+
+      path[data-element-type="forward"] {
+      transition: all 0.3s;
+      cursor: pointer;
+      }
+      path[data-element-type="forward"]:hover {
+      stroke: #0c8599 !important;
+      stroke-width: 4 !important;
+      }
+
+      path[data-element-type="backward"] {
+      transition: all 0.3s;
+      cursor: pointer;
+      }
+      path[data-element-type="backward"]:hover {
+      stroke: #e8590c !important;
+      stroke-width: 4 !important;
+      }
+
+      path[data-element-type="optimization"] {
+      transition: all 0.3s;
+      cursor: pointer;
+      }
+      path[data-element-type="optimization"]:hover {
+      stroke: #087f5b !important;
+      stroke-width: 4 !important;
+      }
+`;
+      doc.documentElement.insertBefore(styleElement, doc.documentElement.firstChild);
+
+      // Process neural network layers (purple nodes)
+      doc.querySelectorAll('path[fill="#d0bfff"]').forEach((node, index) => {
+            node.setAttribute('data-element-id', `layer-${index}`);
+            node.setAttribute('data-element-type', 'layer');
+      });
+
+      doc.querySelectorAll('path[fill="#9775fa"]').forEach((node, index) => {
+            node.setAttribute('data-element-id', `layer-updated-${index}`);
+            node.setAttribute('data-element-type', 'layer-updated');
+      });
+
+      // Process gradient nodes (pink nodes)
+      doc.querySelectorAll('path[fill="#f783ac"]').forEach((node, index) => {
+            node.setAttribute('data-element-id', `gradient-${index}`);
+            node.setAttribute('data-element-type', 'gradient');
+      });
+
+      // Process arrows by matching stroke colors
+      const arrowTypes = {
+            '#15aabf': 'forward',
+            '#fd7e14': 'backward',
+            '#099268': 'optimization'
+      };
+
+      Object.entries(arrowTypes).forEach(([color, type]) => {
+            doc.querySelectorAll(`path[stroke="${color}"]`).forEach((arrow, index) => {
+                  arrow.setAttribute('data-element-id', `${type}-${index}`);
+                  arrow.setAttribute('data-element-type', type);
+            });
+      });
+
+      // Make the SVG responsive
+      doc.documentElement.setAttribute('width', '100%');
+      doc.documentElement.setAttribute('height', '100%');
+      doc.documentElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+
+      return new XMLSerializer().serializeToString(doc);
+}
+
+// Function to load an SVG file via fetch
+async function loadSVG(url, containerId) {
+      try {
+            const response = await fetch(url);
+            if (!response.ok) {
+                  throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const svgText = await response.text();
+            const enhancedSVG = enhanceSVGContent(svgText);
+            document.getElementById(containerId).innerHTML = enhancedSVG;
+      } catch (error) {
+            console.error('Error loading SVG:', error);
+            document.getElementById(containerId).innerHTML = '<p>Error loading SVG.</p>';
+      }
+}
+
+// Load the SVG file (adjust the path if needed)
+loadSVG('../assets/images/first_steps_simple_training.svg', 'svg-first_steps_simple_training');
+
+// Set up event listeners to display a description of the hovered element
+const svgContainer = document.getElementById('svg-first_steps_simple_training');
+
+svgContainer.addEventListener('mouseover', function (event) {
+      const target = event.target;
+      if (target.tagName.toLowerCase() === 'path' && target.hasAttribute('data-element-id')) {
+            const elementId = target.getAttribute('data-element-id');
+            const elementType = target.getAttribute('data-element-type');
+            const descriptions = {
+                  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'
+            };
+            const description = descriptions[elementType] || elementType;
+            document.getElementById('info').textContent = `Hovering over: ${description} (${elementId})`;
+      }
+});
+
+svgContainer.addEventListener('mouseout', function () {
+      document.getElementById('info').textContent = 'Hover over the network elements to see their details';
+});

assets/svg/test-svg.html

@@ -1,164 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Interactive SVG Hover Effect</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      margin: 20px;
-      background: #f8f9fa;
-    }
-    .svg-container {
-      border: 1px solid #ccc;
-      padding: 10px;
-      border-radius: 8px;
-      background: #fff;
-    }
-    .info {
-      margin-top: 15px;
-      font-size: 16px;
-      color: #555;
-    }
-  </style>
-</head>
-<body>
-  <div class="svg-container" id="svg-container-01">
-    <!-- The enhanced SVG will be injected here -->
-  </div>
-  <div class="info" id="info">Hover over the network elements to see their details</div>
-
-  <script>
-    // Function to enhance the SVG content by adding styles and data attributes
-    function enhanceSVGContent(originalContent) {
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(originalContent, 'image/svg+xml');
-
-      // Create a style element with hover effects and insert it as the first child of the SVG
-      const styleElement = doc.createElementNS('http://www.w3.org/2000/svg', 'style');
-      styleElement.textContent = `
-        path[data-element-type="layer"] {
-          transition: all 0.3s;
-          cursor: pointer;
-        }
-        path[data-element-type="layer"]:hover {
-          fill: #b197fc !important;
-          transform: translate(0, -2px);
-        }
-
-        path[data-element-type="gradient"] {
-          transition: all 0.3s;
-          cursor: pointer;
-        }
-        path[data-element-type="gradient"]:hover {
-          fill: #f06595 !important;
-          transform: translate(0, -2px);
-        }
-
-        path[data-element-type="forward"] {
-          transition: all 0.3s;
-          cursor: pointer;
-        }
-        path[data-element-type="forward"]:hover {
-          stroke: #0c8599 !important;
-          stroke-width: 4 !important;
-        }
-
-        path[data-element-type="backward"] {
-          transition: all 0.3s;
-          cursor: pointer;
-        }
-        path[data-element-type="backward"]:hover {
-          stroke: #e8590c !important;
-          stroke-width: 4 !important;
-        }
-
-        path[data-element-type="optimization"] {
-          transition: all 0.3s;
-          cursor: pointer;
-        }
-        path[data-element-type="optimization"]:hover {
-          stroke: #087f5b !important;
-          stroke-width: 4 !important;
-        }
-      `;
-      doc.documentElement.insertBefore(styleElement, doc.documentElement.firstChild);
-
-      // Process neural network layers (purple nodes)
-      doc.querySelectorAll('path[fill="#d0bfff"]').forEach((node, index) => {
-        node.setAttribute('data-element-id', `layer-${index}`);
-        node.setAttribute('data-element-type', 'layer');
-      });
-
-      // Process gradient nodes (pink nodes)
-      doc.querySelectorAll('path[fill="#f783ac"]').forEach((node, index) => {
-        node.setAttribute('data-element-id', `gradient-${index}`);
-        node.setAttribute('data-element-type', 'gradient');
-      });
-
-      // Process arrows by matching stroke colors
-      const arrowTypes = {
-        '#15aabf': 'forward',
-        '#fd7e14': 'backward',
-        '#099268': 'optimization'
-      };
-
-      Object.entries(arrowTypes).forEach(([color, type]) => {
-        doc.querySelectorAll(`path[stroke="${color}"]`).forEach((arrow, index) => {
-          arrow.setAttribute('data-element-id', `${type}-${index}`);
-          arrow.setAttribute('data-element-type', type);
-        });
-      });
-
-      // Make the SVG responsive
-      doc.documentElement.setAttribute('width', '100%');
-      doc.documentElement.setAttribute('height', 'auto');
-      doc.documentElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-
-      return new XMLSerializer().serializeToString(doc);
-    }
-
-    // Function to load an SVG file via fetch
-    async function loadSVG(url, containerId) {
-      try {
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-        const svgText = await response.text();
-        const enhancedSVG = enhanceSVGContent(svgText);
-        document.getElementById(containerId).innerHTML = enhancedSVG;
-      } catch (error) {
-        console.error('Error loading SVG:', error);
-        document.getElementById(containerId).innerHTML = '<p>Error loading SVG.</p>';
-      }
-    }
-
-    // Load the SVG file (adjust the path if needed)
-    loadSVG('figure-01.svg', 'svg-container-01');
-
-    // Set up event listeners to display a description of the hovered element
-    const svgContainer = document.getElementById('svg-container-01');
-    svgContainer.addEventListener('mouseover', function(event) {
-      const target = event.target;
-      if (target.tagName.toLowerCase() === 'path' && target.hasAttribute('data-element-id')) {
-        const elementId = target.getAttribute('data-element-id');
-        const elementType = target.getAttribute('data-element-type');
-        const descriptions = {
-          layer: 'Neural Network Layer',
-          gradient: 'Gradient Update Layer',
-          forward: 'Forward Pass Connection',
-          backward: 'Backward Pass Connection',
-          optimization: 'Optimization Step'
-        };
-        const description = descriptions[elementType] || elementType;
-        document.getElementById('info').textContent = `Hovering over: ${description} (${elementId})`;
-      }
-    });
-
-    svgContainer.addEventListener('mouseout', function() {
-      document.getElementById('info').textContent = 'Hover over the network elements to see their details';
-    });
-  </script>
-</body>
-</html>

dist/assets/images/first_steps_memory_profile.js

@@ -0,0 +1 @@
+function enhanceSVGContent2(e){const t=(new DOMParser).parseFromString(e,"image/svg+xml"),n=t.createElementNS("http://www.w3.org/2000/svg","style");return n.textContent='\n    /* Memory Block (free memory) */\n    path[data-element-type="memory-block"] {\n      transition: all 0.3s;\n      cursor: pointer;\n    }\n    path[data-element-type="memory-block"]:hover {\n      fill: #a5d6a7 !important; /* slightly darker than original */\n      transform: translate(0, -2px);\n    }\n\n    /* Memory Block (updated) */\n    path[data-element-type="memory-block-updated"] {\n      transition: all 0.3s;\n      cursor: pointer;\n    }\n    path[data-element-type="memory-block-updated"]:hover {\n      fill: #81c784 !important;\n      transform: scale(1.02) translate(0, -2px);\n    }\n\n    /* Stack Segment */\n    path[data-element-type="stack"] {\n      transition: all 0.3s;\n      cursor: pointer;\n    }\n    path[data-element-type="stack"]:hover {\n      fill: #ffd54f !important;\n      transform: translate(0, -2px);\n    }\n\n    /* Read Operation Arrow */\n    path[data-element-type="read"] {\n      transition: all 0.3s;\n      cursor: pointer;\n    }\n    path[data-element-type="read"]:hover {\n      stroke: #1e88e5 !important;\n      stroke-width: 4 !important;\n    }\n\n    /* Write Operation Arrow */\n    path[data-element-type="write"] {\n      transition: all 0.3s;\n      cursor: pointer;\n    }\n    path[data-element-type="write"]:hover {\n      stroke: #d32f2f !important;\n      stroke-width: 4 !important;\n    }\n\n    /* Cache Operation Arrow */\n    path[data-element-type="cache"] {\n      transition: all 0.3s;\n      cursor: pointer;\n    }\n    path[data-element-type="cache"]:hover {\n      stroke: #fbc02d !important;\n      stroke-width: 4 !important;\n    }\n  ',t.documentElement.insertBefore(n,t.documentElement.firstChild),t.querySelectorAll('path[fill="#c8e6c9"]').forEach(((e,t)=>{e.setAttribute("data-element-id",`memory-block-${t}`),e.setAttribute("data-element-type","memory-block")})),t.querySelectorAll('path[fill="#a5d6a7"]').forEach(((e,t)=>{e.setAttribute("data-element-id",`memory-block-updated-${t}`),e.setAttribute("data-element-type","memory-block-updated")})),t.querySelectorAll('path[fill="#ffe082"]').forEach(((e,t)=>{e.setAttribute("data-element-id",`stack-${t}`),e.setAttribute("data-element-type","stack")})),Object.entries({"#42a5f5":"read","#ef5350":"write","#ffca28":"cache"}).forEach((([e,n])=>{t.querySelectorAll(`path[stroke="${e}"]`).forEach(((e,t)=>{e.setAttribute("data-element-id",`${n}-${t}`),e.setAttribute("data-element-type",n)}))})),t.documentElement.setAttribute("width","100%"),t.documentElement.setAttribute("height","100%"),t.documentElement.setAttribute("preserveAspectRatio","xMidYMid meet"),(new XMLSerializer).serializeToString(t)}async function loadSVG(e,t){try{console.log("Loading SVG from:",e);const n=await fetch(e);if(!n.ok)throw new Error(`HTTP error! Status: ${n.status}`);const r=enhanceSVGContent2(await n.text());document.getElementById(t).innerHTML=r}catch(e){console.error("Error loading SVG:",e),document.getElementById(t).innerHTML="<p>Error loading SVG.</p>"}}loadSVG("../assets/images/first_steps_memory_profile.svg","svg-first_steps_memory_profile");const svgContainer2=document.getElementById("svg-first_steps_memory_profile");svgContainer2.addEventListener("mouseover",(function(e){const t=e.target;if("path"===t.tagName.toLowerCase()&&t.hasAttribute("data-element-id")){const e=t.getAttribute("data-element-id"),n=t.getAttribute("data-element-type"),r={"memory-block":"Memory Block","memory-block-updated":"Memory Block (updated)",stack:"Stack Segment",read:"Memory Read",write:"Memory Write",cache:"Cache Operation"}[n]||n;document.getElementById("info").textContent=`Hovering over: ${r} (${e})`}})),svgContainer2.addEventListener("mouseout",(function(){document.getElementById("info").textContent="Hover over the network elements to see their details"}));

dist/assets/images/first_steps_simple_training.js

@@ -0,0 +1 @@
+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("info").textContent=`Hovering over: ${a} (${t})`}})),svgContainer.addEventListener("mouseout",(function(){document.getElementById("info").textContent="Hover over the network elements to see their details"}));

dist/assets/svg/test-svg.html

@@ -1,164 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Interactive SVG Hover Effect</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      margin: 20px;
-      background: #f8f9fa;
-    }
-    .svg-container {
-      border: 1px solid #ccc;
-      padding: 10px;
-      border-radius: 8px;
-      background: #fff;
-    }
-    .info {
-      margin-top: 15px;
-      font-size: 16px;
-      color: #555;
-    }
-  </style>
-</head>
-<body>
-  <div class="svg-container" id="svg-container-01">
-    <!-- The enhanced SVG will be injected here -->
-  </div>
-  <div class="info" id="info">Hover over the network elements to see their details</div>
-
-  <script>
-    // Function to enhance the SVG content by adding styles and data attributes
-    function enhanceSVGContent(originalContent) {
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(originalContent, 'image/svg+xml');
-
-      // Create a style element with hover effects and insert it as the first child of the SVG
-      const styleElement = doc.createElementNS('http://www.w3.org/2000/svg', 'style');
-      styleElement.textContent = `
-        path[data-element-type="layer"] {
-          transition: all 0.3s;
-          cursor: pointer;
-        }
-        path[data-element-type="layer"]:hover {
-          fill: #b197fc !important;
-          transform: translate(0, -2px);
-        }
-
-        path[data-element-type="gradient"] {
-          transition: all 0.3s;
-          cursor: pointer;
-        }
-        path[data-element-type="gradient"]:hover {
-          fill: #f06595 !important;
-          transform: translate(0, -2px);
-        }
-
-        path[data-element-type="forward"] {
-          transition: all 0.3s;
-          cursor: pointer;
-        }
-        path[data-element-type="forward"]:hover {
-          stroke: #0c8599 !important;
-          stroke-width: 4 !important;
-        }
-
-        path[data-element-type="backward"] {
-          transition: all 0.3s;
-          cursor: pointer;
-        }
-        path[data-element-type="backward"]:hover {
-          stroke: #e8590c !important;
-          stroke-width: 4 !important;
-        }
-
-        path[data-element-type="optimization"] {
-          transition: all 0.3s;
-          cursor: pointer;
-        }
-        path[data-element-type="optimization"]:hover {
-          stroke: #087f5b !important;
-          stroke-width: 4 !important;
-        }
-      `;
-      doc.documentElement.insertBefore(styleElement, doc.documentElement.firstChild);
-
-      // Process neural network layers (purple nodes)
-      doc.querySelectorAll('path[fill="#d0bfff"]').forEach((node, index) => {
-        node.setAttribute('data-element-id', `layer-${index}`);
-        node.setAttribute('data-element-type', 'layer');
-      });
-
-      // Process gradient nodes (pink nodes)
-      doc.querySelectorAll('path[fill="#f783ac"]').forEach((node, index) => {
-        node.setAttribute('data-element-id', `gradient-${index}`);
-        node.setAttribute('data-element-type', 'gradient');
-      });
-
-      // Process arrows by matching stroke colors
-      const arrowTypes = {
-        '#15aabf': 'forward',
-        '#fd7e14': 'backward',
-        '#099268': 'optimization'
-      };
-
-      Object.entries(arrowTypes).forEach(([color, type]) => {
-        doc.querySelectorAll(`path[stroke="${color}"]`).forEach((arrow, index) => {
-          arrow.setAttribute('data-element-id', `${type}-${index}`);
-          arrow.setAttribute('data-element-type', type);
-        });
-      });
-
-      // Make the SVG responsive
-      doc.documentElement.setAttribute('width', '100%');
-      doc.documentElement.setAttribute('height', 'auto');
-      doc.documentElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-
-      return new XMLSerializer().serializeToString(doc);
-    }
-
-    // Function to load an SVG file via fetch
-    async function loadSVG(url, containerId) {
-      try {
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-        const svgText = await response.text();
-        const enhancedSVG = enhanceSVGContent(svgText);
-        document.getElementById(containerId).innerHTML = enhancedSVG;
-      } catch (error) {
-        console.error('Error loading SVG:', error);
-        document.getElementById(containerId).innerHTML = '<p>Error loading SVG.</p>';
-      }
-    }
-
-    // Load the SVG file (adjust the path if needed)
-    loadSVG('figure-01.svg', 'svg-container-01');
-
-    // Set up event listeners to display a description of the hovered element
-    const svgContainer = document.getElementById('svg-container-01');
-    svgContainer.addEventListener('mouseover', function(event) {
-      const target = event.target;
-      if (target.tagName.toLowerCase() === 'path' && target.hasAttribute('data-element-id')) {
-        const elementId = target.getAttribute('data-element-id');
-        const elementType = target.getAttribute('data-element-type');
-        const descriptions = {
-          layer: 'Neural Network Layer',
-          gradient: 'Gradient Update Layer',
-          forward: 'Forward Pass Connection',
-          backward: 'Backward Pass Connection',
-          optimization: 'Optimization Step'
-        };
-        const description = descriptions[elementType] || elementType;
-        document.getElementById('info').textContent = `Hovering over: ${description} (${elementId})`;
-      }
-    });
-
-    svgContainer.addEventListener('mouseout', function() {
-      document.getElementById('info').textContent = 'Hover over the network elements to see their details';
-    });
-  </script>
-</body>
-</html>

src/index.html

@@ -48,7 +48,7 @@
         </div>
     </d-title>
     <d-byline></d-byline>
-    <d-article>
+      <d-article>
         <d-contents>
         </d-contents>
         
@@ -232,7 +232,10 @@
         <aside>As we’ll see later, these steps may be repeated or intertwined but for now we’ll start simple.</aside>
 
         <p>It looks generally like this: </p>
-        <p><img alt="image.png" src="assets/images/placeholder.png" /></p>
+
+        <div class="svg-container" id="svg-first_steps_simple_training"> </div>
+        <div class="info" id="info">Hover over the network elements to see their details</div>
+        <script src="../assets/images/first_steps_simple_training.js"></script>
 
         <p>In this figure, the boxes on the top line can be seen as successive layers inside a model (same for the last line). The red boxes are the associated gradients for each of these layers, computed during the backward pass.</p>
 
@@ -294,7 +297,10 @@
 
         <p>Using this snippet [TODO: link to appendix A5], we can understand how memory is allocated throughout training. We can see that memory utilization is not a static thing but varies a lot during training and during a training step:</p>
 
-        <p><img alt="llama-1b-memory.png" src="assets/images/placeholder.png" /></p>
+        <div class="svg-container l-body-outset" id="svg-first_steps_memory_profile"> </div>
+        <script src="../assets/images/first_steps_memory_profile.js"></script>
+
+        <!-- <p><img alt="llama-1b-memory.png" src="assets/images/placeholder.png" /></p> -->
 
         <p>Clearly the first step looks very different from the subsequent ones, but let’s first have a look at the general anatomy of a step: first the activations increase quickly as we do the forward pass, then during the backward pass the gradients build up and as the backward pass propagates, the stored activations used to compute the gradients are progressively cleared. Finally, we perform the optimization step during which we need all the gradients and then update the optimizer states before we start the next forward pass. </p>