Fixed Lab 2

content/labs/lab-2-llama-cpp-and-ollama.md

@@ -135,7 +135,7 @@ git clone https://huggingface.co/WhiteRabbitNeo/WhiteRabbitNeo-V3-7B
 **LLaMa.cpp** makes it easy for us to package models downloaded in SafeTensors format to GGUF.  We can convert the model with the following official project script command:
 
 ```bash
-python3 convert_hf_to_gguf.py /home/student/lab2/WhiteRabbitNeo/WhiteRabbitNeo-V3-7B/WhiteRabbitNeo-V3-7B --outfile /home/student/lab2/WhiteRabbitNeo/WhiteRabbitNeo-V3-7B.gguf
+convert_hf_to_gguf.py /home/student/lab2/WhiteRabbitNeo/WhiteRabbitNeo-V3-7B/WhiteRabbitNeo-V3-7B --outfile /home/student/lab2/WhiteRabbitNeo/WhiteRabbitNeo-V3-7B.gguf
 ```
 
 ### 4 Execute: Review Model Metadata
@@ -212,7 +212,7 @@ Quantization reduces memory footprints and speeds inference, but it typically ra
 To generate an 8 bit, 4 bit, and 1 bit quantization, run the following commands:
 
 <div class="lab-callout lab-callout--warning">
-  <strong>Warning:</strong> Although these quantization steps are provided for replication, pre-quantized support files are already available in <code>/home/student/lab2/WhiteRabbitNeo/</code> for faster lab progress.
+  <strong>Warning:</strong> Although these quantization steps are provided for replication, pre-quantized support files are already available in <code>/home/student/lab2/WhiteRabbitNeo/</code> for faster lab progress.  <br><br>You can skip these commands when participating in a live teaching session.
 </div>
 
 ```bash
@@ -459,7 +459,7 @@ When finished, you will be presented with a prompt, similar to the `llama-cli` c
 
 Similarly, we can do the same by pulling a model directly from **HuggingFace**.  As long as the source file is a .gguf of any quantization level that fits within our system memory, Ollama can fetch it directly. 
 
-1. **Select a Quantized Model from Objective 1** – visit [CodeIsAbstract](https://huggingface.co/CodeIsAbstract/Llama-3.2-1B-Q8_0-GGUF) in your browser.
+1. **Select the Quantized Model from Objective 1** – visit [CodeIsAbstract](https://huggingface.co/CodeIsAbstract/Llama-3.2-1B-Q8_0-GGUF) in your browser.
 2. **Use this model** - Click Use this model → choose the Ollama tab. The page displays a ready‑to‑run command:
 
 <figure style="text-align: center;">
@@ -528,10 +528,9 @@ ollama run WhiteRabbitNeo
 | `ollama list` | Shows all models currently registered with Ollama. |
 | `ollama rm <tag>` | Deletes the specified model (freeing disk space). |
 | `ollama show <tag>` | Prints model metadata (architecture, context length, quantization). |
+| `ollama show <tag> --modelfile` | Prints an existing model's modelfile. Often useful for templating our own. |
 | `ollama serve` | Starts the OpenAI-compatible API server (runs automatically when you first use `ollama run`). |
 
-<br>
-
 ---
 
 ## Conclusion

content/labs/lab-3-oi-prompting.md

@@ -27,9 +27,9 @@ Password: student
 
 Once you've successfully connected to Open WebUI, follow the registration instructions.  Feel free to register with any information, as Kaggle instance will tear itself down after four hours (barring manual intervention or inactivity).  Once successful, move on to the next objective.
 <figure style="text-align: center;">
-  <a href="https://i.imgur.com/QrQwWuD.jpeg" target="_blank">
+  <a href="https://i.imgur.com/btkT9IH.png" target="_blank">
     <img 
-      src="https://i.imgur.com/QrQwWuD.jpeg" 
+      src="https://i.imgur.com/btkT9IH.png" 
       style="width: 50%; display: block; margin-left: auto; margin-right: auto; border: 5px solid black;">
   </a>
   <figcaption style="margin-top: 8px; font-size: 1.1em;">
@@ -49,8 +49,8 @@ Locate, pull, and run **Gemma 3 4B‑IT‑QAT** (a quant‑aware‑trained m
    * Locate the search box at the top of the page.  
 
    <figure style="text-align:center;">
-   <a href="https://i.imgur.com/yQ9KMsa.png" target="_blank">
+   <a href="https://i.imgur.com/TuUbK7O.png" target="_blank">
-   <img src="https://i.imgur.com/yQ9KMsa.png" width="600"
+   <img src="https://i.imgur.com/TuUbK7O.png" width="600"
         style="display:block; margin-left:auto; margin-right:auto; border:5px solid black;">
    </a>
    <figcaption>Ollama homepage – use the search bar to look for “Gemma 3”.</figcaption>
@@ -64,8 +64,8 @@ Locate, pull, and run **Gemma 3 4B‑IT‑QAT** (a quant‑aware‑trained m
    * Click the **`Tags`** link beneath the model description.  
 
    <figure style="text-align:center;">
-   <a href="https://i.imgur.com/NgcM7qx.png" target="_blank">
+   <a href="https://i.imgur.com/eaRaqnq.png" target="_blank">
-   <img src="https://i.imgur.com/NgcM7qx.png" width="600"
+   <img src="https://i.imgur.com/eaRaqnq.png" width="600"
         style="display:block; margin-left:auto; margin-right:auto; border:5px solid black;">
    </a>
    <figcaption>Tag view – each entry shows the model size and a short description.</figcaption>
@@ -76,8 +76,8 @@ Locate, pull, and run **Gemma 3 4B‑IT‑QAT** (a quant‑aware‑trained m
    * The size column reads **`3.4 GB`**, indicating the VRAM required for inference.  
 
    <figure style="text-align:center;">
-   <a href="https://i.imgur.com/nDPlOdd.png" target="_blank">
+   <a href="https://i.imgur.com/Sf8sSs3.png" target="_blank">
-   <img src="https://i.imgur.com/nDPlOdd.png" width="600"
+   <img src="https://i.imgur.com/Sf8sSs3.png" width="600"
         style="display:block; margin-left:auto; margin-right:auto; border:5px solid black;">
    </a>
    <figcaption>Model size for `Qwen3.5:4b` (≈ 3.3 GB VRAM).</figcaption>

src/components/labs/LabContent.tsx

@@ -120,6 +120,51 @@ function ensureCopyButton(pre: HTMLPreElement, label: string) {
   pre.appendChild(copyButton);
 }
 
+async function copyTextToClipboard(text: string) {
+  if (window.isSecureContext && navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  const selection = document.getSelection();
+  const previousRanges =
+    selection && selection.rangeCount > 0
+      ? Array.from({ length: selection.rangeCount }, (_, index) => selection.getRangeAt(index).cloneRange())
+      : [];
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.setAttribute("aria-hidden", "true");
+  textarea.style.position = "fixed";
+  textarea.style.top = "0";
+  textarea.style.left = "-9999px";
+  textarea.style.opacity = "0";
+  textarea.style.pointerEvents = "none";
+
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  textarea.setSelectionRange(0, textarea.value.length);
+
+  try {
+    const didCopy = document.execCommand("copy");
+    if (!didCopy) {
+      throw new Error("Copy command was rejected");
+    }
+  } finally {
+    document.body.removeChild(textarea);
+    if (selection) {
+      selection.removeAllRanges();
+      for (const range of previousRanges) {
+        selection.addRange(range);
+      }
+    }
+    activeElement?.focus();
+  }
+}
+
 export function LabContent({ className, html }: LabContentProps) {
   const containerRef = useRef<HTMLElement>(null);
   const [zoomedImage, setZoomedImage] = useState<ZoomedImageState | null>(null);
@@ -158,7 +203,7 @@ export function LabContent({ className, html }: LabContentProps) {
         if (!commandText) return;
         const defaultLabel = button.dataset.defaultLabel ?? "Copy";
 
-        void navigator.clipboard.writeText(commandText).then(() => {
+        void copyTextToClipboard(commandText).then(() => {
           button.textContent = "Copied";
           button.classList.add("is-copied");
           window.setTimeout(() => {

src/styles/globals.css

@@ -249,13 +249,13 @@ ol {
 .lab-content pre.lab-cli-shell {
   position: relative;
   margin: 1rem 0;
-  padding: 1rem 1rem 0.85rem;
+  padding: 0.9rem 1rem 0.85rem;
   border: 1px solid #c8d9e8;
   border-left: 5px solid #004e78;
   border-radius: 10px;
   background: #f4f9ff;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
-  overflow: auto;
+  overflow: hidden;
 }
 
 .lab-content pre.lab-cli-shell::before {
@@ -271,7 +271,9 @@ ol {
 
 .lab-content pre.lab-cli-shell code {
   display: block;
-  margin-top: 0.45rem;
+  margin-top: 1.1rem;
+  overflow-x: auto;
+  overflow-y: hidden;
   font-size: 0.9rem;
   line-height: 1.38;
 }
@@ -280,6 +282,7 @@ ol {
   position: absolute;
   top: 0.36rem;
   right: 0.4rem;
+  z-index: 1;
   border: 1px solid #c3d4e5;
   border-radius: 8px;
   background: #ffffff;
@@ -304,13 +307,13 @@ ol {
 .lab-content pre.lab-prompt-card {
   position: relative;
   margin: 1rem 0;
-  padding: 1rem 1rem 0.92rem;
+  padding: 0.92rem 1rem 0.92rem;
   border: 1px solid #d7c7a7;
   border-left: 5px solid #b77400;
   border-radius: 10px;
   background: #fffaf2;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
-  overflow: auto;
+  overflow: hidden;
 }
 
 .lab-content pre.lab-prompt-card::before {
@@ -326,7 +329,9 @@ ol {
 
 .lab-content pre.lab-prompt-card code {
   display: block;
-  margin-top: 0.82rem;
+  margin-top: 1.15rem;
+  overflow-x: auto;
+  overflow-y: hidden;
   font-size: 0.9rem;
   line-height: 1.4;
   white-space: pre-wrap;
@@ -336,6 +341,7 @@ ol {
   position: absolute;
   top: 0.34rem;
   right: 0.4rem;
+  z-index: 1;
   border: 1px solid #9b5a00;
   border-radius: 999px;
   background: linear-gradient(180deg, #ffd18d, #f3a743);