Add Lab 4 inference settings visualization

src/components/labs/LabContent.tsx

@@ -12,6 +12,7 @@ import { Lab1ConfidenceChat } from "~/components/labs/Lab1ConfidenceChat";
 import { Lab1NetronPanel } from "~/components/labs/Lab1NetronPanel";
 import { Lab3TerminalFrame } from "~/components/labs/Lab3TerminalFrame";
 import { Lab8Chat } from "~/components/labs/Lab8Chat";
+import { InferenceSettingsVisualization } from "~/components/labs/InferenceSettingsVisualization";
 import { Objective5Chat } from "~/components/labs/Objective5Chat";
 import { QuantizationGridExplorer } from "~/components/labs/QuantizationGridExplorer";
 import { QuantizationExplorer } from "~/components/labs/QuantizationExplorer";
@@ -62,6 +63,8 @@ const lab3TerminalToken = "<div data-lab3-terminal></div>";
 const lab1ConfidenceToken = "<div data-lab1-confidence></div>";
 const lab1NetronToken = "<div data-lab1-netron-panel></div>";
 const tokenizerPlaygroundToken = "<div data-tokenizer-playground></div>";
+const inferenceSettingsVisualizationToken =
+  "<div data-inference-settings-visualization></div>";
 const serviceTokenPattern =
   /\{\{service-(url|address):([a-z0-9-]+)(?::([^}]+))?\}\}/g;
 const serviceLabels: Record<string, string> = {
@@ -461,7 +464,7 @@ const LabContentArticle = memo(function LabContentArticle({
   const renderedContent = html
     .split(
       new RegExp(
-        `(${escapeRegex(quantizationExplorerToken)}|${escapeRegex(quantizationGridExplorerToken)}|${escapeRegex(objective5ChatToken)}|${escapeRegex(lab8ChatToken)}|${escapeRegex(lab3TerminalToken)}|${escapeRegex(lab1ConfidenceToken)}|${escapeRegex(lab1NetronToken)}|${escapeRegex(tokenizerPlaygroundToken)})`,
+        `(${escapeRegex(quantizationExplorerToken)}|${escapeRegex(quantizationGridExplorerToken)}|${escapeRegex(objective5ChatToken)}|${escapeRegex(lab8ChatToken)}|${escapeRegex(lab3TerminalToken)}|${escapeRegex(lab1ConfidenceToken)}|${escapeRegex(lab1NetronToken)}|${escapeRegex(tokenizerPlaygroundToken)}|${escapeRegex(inferenceSettingsVisualizationToken)})`,
         "g",
       ),
     )
@@ -505,6 +508,14 @@ const LabContentArticle = memo(function LabContentArticle({
         );
       }
 
+      if (part === inferenceSettingsVisualizationToken) {
+        return (
+          <InferenceSettingsVisualization
+            key={`inference-settings-viz-${index}`}
+          />
+        );
+      }
+
       return (
         <Fragment key={`html-segment-${index}`}>
           <div dangerouslySetInnerHTML={{ __html: part }} />