Update lab model defaults and assets

src/components/labs/LabContent.tsx

@@ -1,6 +1,13 @@
 "use client";
 
-import { Fragment, useEffect, useRef, useState } from "react";
+import {
+  Fragment,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { Lab1ConfidenceChat } from "~/components/labs/Lab1ConfidenceChat";
 import { Lab1NetronPanel } from "~/components/labs/Lab1NetronPanel";
 import { Lab3TerminalFrame } from "~/components/labs/Lab3TerminalFrame";
@@ -23,6 +30,10 @@ type LabContentProps = {
   html: string;
 };
 
+type LabContentArticleProps = LabContentProps & {
+  onZoomImage: (image: ZoomedImageState) => void;
+};
+
 const cliLanguagePattern =
   /\b(language-(bash|sh|shell|zsh|console|terminal)|bash|shell|zsh)\b/i;
 const cliCommandPattern =
@@ -54,12 +65,12 @@ const tokenizerPlaygroundToken = "<div data-tokenizer-playground></div>";
 const serviceTokenPattern =
   /\{\{service-(url|address):([a-z0-9-]+)(?::([^}]+))?\}\}/g;
 const serviceLabels: Record<string, string> = {
-  "chunkviz": "ChunkViz",
+  chunkviz: "ChunkViz",
   "embedding-atlas": "Embedding Atlas",
   "open-webui": "Open WebUI",
-  "promptfoo": "Promptfoo",
-  "ssh": "SSH",
-  "unsloth": "Unsloth",
+  promptfoo: "Promptfoo",
+  ssh: "SSH",
+  unsloth: "Unsloth",
 };
 
 function looksLikeCliCommand(commandText: string, className: string) {
@@ -241,7 +252,8 @@ function enhanceHarnessSelectors(root: HTMLElement) {
   const syncHarnessSelection = () => {
     for (const button of harnessButtons) {
       const harnessId = button.dataset.harnessChoice?.trim() ?? "";
-      const isSelected = selectedHarness !== null && harnessId === selectedHarness;
+      const isSelected =
+        selectedHarness !== null && harnessId === selectedHarness;
       button.setAttribute("aria-pressed", isSelected ? "true" : "false");
       button.dataset.selected = isSelected ? "true" : "false";
     }
@@ -259,7 +271,9 @@ function enhanceHarnessSelectors(root: HTMLElement) {
 
   const handleHarnessClick = (event: Event) => {
     const target = event.target as HTMLElement;
-    const button = target.closest<HTMLButtonElement>("button[data-harness-choice]");
+    const button = target.closest<HTMLButtonElement>(
+      "button[data-harness-choice]",
+    );
     if (!button || !root.contains(button)) return;
 
     const harnessId = button.dataset.harnessChoice?.trim() ?? "";
@@ -343,7 +357,12 @@ function replaceServiceTokens(
     const allowLinks = !parent.closest("code, pre, a");
     const nextTextValue = nodeValue.replace(
       serviceTokenPattern,
-      (fullMatch, tokenType: string, serviceId: string, pathSuffix?: string) => {
+      (
+        fullMatch,
+        tokenType: string,
+        serviceId: string,
+        pathSuffix?: string,
+      ) => {
         const replacement = resolveServiceTokenValue(
           runtimeConfig,
           tokenType,
@@ -428,9 +447,12 @@ function replaceServiceTokens(
   }
 }
 
-export function LabContent({ className, html }: LabContentProps) {
+const LabContentArticle = memo(function LabContentArticle({
+  className,
+  html,
+  onZoomImage,
+}: LabContentArticleProps) {
   const containerRef = useRef<HTMLElement>(null);
-  const [zoomedImage, setZoomedImage] = useState<ZoomedImageState | null>(null);
   const [runtimeConfig, setRuntimeConfig] = useState(() =>
     normalizeCoursewareRuntimeConfig(),
   );
@@ -478,7 +500,9 @@ export function LabContent({ className, html }: LabContentProps) {
       }
 
       if (part === tokenizerPlaygroundToken) {
-        return <TokenizerPlaygroundEmbed key={`tokenizer-playground-${index}`} />;
+        return (
+          <TokenizerPlaygroundEmbed key={`tokenizer-playground-${index}`} />
+        );
       }
 
       return (
@@ -575,7 +599,7 @@ export function LabContent({ className, html }: LabContentProps) {
 
       event.preventDefault();
       event.stopPropagation();
-      setZoomedImage({
+      onZoomImage({
         src,
         alt: image.getAttribute("alt") ?? "",
       });
@@ -586,7 +610,20 @@ export function LabContent({ className, html }: LabContentProps) {
       cleanupHarnessSelectors();
       root.removeEventListener("click", handleRootClick);
     };
-  }, [html, isRuntimeResolved, runtimeConfig]);
+  }, [html, isRuntimeResolved, onZoomImage, runtimeConfig]);
+
+  return (
+    <article ref={containerRef} className={className}>
+      {renderedContent}
+    </article>
+  );
+});
+
+export function LabContent({ className, html }: LabContentProps) {
+  const [zoomedImage, setZoomedImage] = useState<ZoomedImageState | null>(null);
+  const handleZoomImage = useCallback((image: ZoomedImageState) => {
+    setZoomedImage(image);
+  }, []);
 
   useEffect(() => {
     if (!zoomedImage) return;
@@ -614,9 +651,11 @@ export function LabContent({ className, html }: LabContentProps) {
 
   return (
     <>
-      <article ref={containerRef} className={className}>
-        {renderedContent}
-      </article>
+      <LabContentArticle
+        className={className}
+        html={html}
+        onZoomImage={handleZoomImage}
+      />
       {zoomedImage ? (
         <div
           className="lab-image-modal"