Refactor lab 1 for Netron and local confidence views

src/components/labs/LabContent.tsx

@@ -1,10 +1,13 @@
 "use client";
 
 import { Fragment, useEffect, useRef, useState } from "react";
+import { Lab1ConfidenceChat } from "~/components/labs/Lab1ConfidenceChat";
+import { Lab1NetronPanel } from "~/components/labs/Lab1NetronPanel";
 import { Lab3TerminalFrame } from "~/components/labs/Lab3TerminalFrame";
 import { Objective5Chat } from "~/components/labs/Objective5Chat";
 import { QuantizationGridExplorer } from "~/components/labs/QuantizationGridExplorer";
 import { QuantizationExplorer } from "~/components/labs/QuantizationExplorer";
+import { TokenizerPlaygroundEmbed } from "~/components/labs/TokenizerPlaygroundEmbed";
 
 type LabContentProps = {
   className: string;
@@ -35,6 +38,9 @@ const quantizationGridExplorerToken =
   "<div data-quantization-grid-explorer></div>";
 const objective5ChatToken = "<div data-objective5-chat></div>";
 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>";
 
 function looksLikeCliCommand(commandText: string, className: string) {
   if (cliLanguagePattern.test(className)) return true;
@@ -199,7 +205,7 @@ export function LabContent({ className, html }: LabContentProps) {
   const renderedContent = html
     .split(
       new RegExp(
-        `(${escapeRegex(quantizationExplorerToken)}|${escapeRegex(quantizationGridExplorerToken)}|${escapeRegex(objective5ChatToken)}|${escapeRegex(lab3TerminalToken)})`,
+        `(${escapeRegex(quantizationExplorerToken)}|${escapeRegex(quantizationGridExplorerToken)}|${escapeRegex(objective5ChatToken)}|${escapeRegex(lab3TerminalToken)}|${escapeRegex(lab1ConfidenceToken)}|${escapeRegex(lab1NetronToken)}|${escapeRegex(tokenizerPlaygroundToken)})`,
         "g",
       ),
     )
@@ -225,6 +231,18 @@ export function LabContent({ className, html }: LabContentProps) {
         return <Lab3TerminalFrame key={`lab3-terminal-${index}`} />;
       }
 
+      if (part === lab1ConfidenceToken) {
+        return <Lab1ConfidenceChat key={`lab1-confidence-${index}`} />;
+      }
+
+      if (part === lab1NetronToken) {
+        return <Lab1NetronPanel key={`lab1-netron-${index}`} />;
+      }
+
+      if (part === tokenizerPlaygroundToken) {
+        return <TokenizerPlaygroundEmbed key={`tokenizer-playground-${index}`} />;
+      }
+
       return (
         <Fragment key={`html-segment-${index}`}>
           <div dangerouslySetInnerHTML={{ __html: part }} />