From fd77d6ee1ea54d5bc20e263883b5712d100b3aa4 Mon Sep 17 00:00:00 2001 From: c4ch3c4d3 <23181631+c4ch3c4d3@users.noreply.github.com> Date: Mon, 27 Apr 2026 09:11:45 -0600 Subject: [PATCH] Polish lab link buttons --- content/labs/lab-3-llama-cpp-and-ollama.md | 6 +-- content/labs/lab-4-oi-prompting.md | 2 +- content/labs/lab-5-api-and-harnesses.md | 2 +- src/components/labs/LabContent.test.tsx | 51 +++++++++++++++++----- src/styles/globals.css | 9 ++-- 5 files changed, 52 insertions(+), 18 deletions(-) diff --git a/content/labs/lab-3-llama-cpp-and-ollama.md b/content/labs/lab-3-llama-cpp-and-ollama.md index 0d28d8c..d5cb5b2 100644 --- a/content/labs/lab-3-llama-cpp-and-ollama.md +++ b/content/labs/lab-3-llama-cpp-and-ollama.md @@ -60,7 +60,7 @@ The project’s original goal was to make LLaMA models accessible on systems wit [HuggingFace](https://huggingface.com) is the “GitHub” for LLMs, datasets, and more. The following steps walk you through locating Meta’s **LLaMA‑3.2‑1B** model card and its files. 1. **Open the LLaMA‑3.2‑1B page** - + LLaMA-3.2-1B on Hugging Face
2. **Read the model card** – note the description, license, tags (e.g., _Text Generation_, _SafeTensors_, _PyTorch_), and links to fine‑tunes/quantizations.
@@ -104,7 +104,7 @@ For this lab we will work with **WhiteRabbitNeo‑V3‑7B**, a cybersecurity‑o ### 1. Locate & download the model -1. Go to . +1. Go to WhiteRabbitNeo-V3-7B on Hugging Face. 2. Points of Interest on this modelcard: 1. This model appears to be a fine tune of **Qwen2.5-Coder-7B** 2. This model is openly licensed, and does have any requirements to download and use for our purposes. @@ -237,7 +237,7 @@ Ollama is a lightweight framework that hides the low‑level steps required by L Lets start by downloading Meta's llama3.2-3b, the "big" brother to the small model we've continuously worked with so far. The Ollama project and community have made this exceptionally easy for us to accomplish. -1. **Open the Ollama registry** – visit in your browser. +1. **Open the Ollama registry** – visit Ollama registry in your browser. 2. **Search for the model**
diff --git a/content/labs/lab-4-oi-prompting.md b/content/labs/lab-4-oi-prompting.md index 62a8d83..fd7e308 100644 --- a/content/labs/lab-4-oi-prompting.md +++ b/content/labs/lab-4-oi-prompting.md @@ -95,7 +95,7 @@ Locate, pull, and run **Qwen3.5 4B** using the **Open WebUI**. By defualt, Ope - Click the **copy‑to‑clipboard** icon next to the tag (or highlight the text and press **Ctrl +C**). 6. **Open the Open WebUI interface** - - In a new browser tab, navigate to the URL where your Open WebUI instance is running (e.g., `http://localhost:8080`). + - In a new browser tab, navigate to {{service-url:open-webui}}. 7. **Pull the model through the UI** - In the **“Select a model”** dropdown, paste the copied tag into the text field. diff --git a/content/labs/lab-5-api-and-harnesses.md b/content/labs/lab-5-api-and-harnesses.md index 16030d6..fffb51d 100644 --- a/content/labs/lab-5-api-and-harnesses.md +++ b/content/labs/lab-5-api-and-harnesses.md @@ -33,7 +33,7 @@ Before we install any harness, we need a key that lets the harness call the same ### Execute: Sign in to Open WebUI -1. Navigate to `{{service-url:open-webui}}`. +1. Navigate to {{service-url:open-webui}}. 2. Sign in with the same account you used in Lab 4, or the credentials supplied by your instructor. 3. Confirm that you can reach the normal chat screen before continuing. diff --git a/src/components/labs/LabContent.test.tsx b/src/components/labs/LabContent.test.tsx index 856bcb8..08e610d 100644 --- a/src/components/labs/LabContent.test.tsx +++ b/src/components/labs/LabContent.test.tsx @@ -138,6 +138,38 @@ describe("LabContent", () => { expect(link).toHaveClass("lab-service-pill"); }); + it("renders Lab 3 browser targets as polished open buttons", async () => { + mockRuntimeConfig(); + + const lab = getLabDocument("lab-3-llama-cpp-and-ollama"); + expect(lab).not.toBeNull(); + + render( + , + ); + + const llamaLink = await screen.findByRole("link", { + name: "LLaMA-3.2-1B on Hugging Face", + }); + expect(llamaLink).toHaveAttribute( + "href", + "https://huggingface.co/meta-llama/Llama-3.2-1B", + ); + expect(llamaLink).toHaveClass("lab-open-pill"); + + expect( + screen.getByRole("link", { + name: "WhiteRabbitNeo-V3-7B on Hugging Face", + }), + ).toHaveClass("lab-open-pill"); + expect( + screen.getByRole("link", { name: "Ollama registry" }), + ).toHaveClass("lab-open-pill"); + }); + it("keeps rendered service URL links after opening an image zoom modal", async () => { mockRuntimeConfig(); @@ -238,16 +270,15 @@ describe("LabContent", () => { />, ); - expect( - await screen.findByRole("link", { name: "Open WebUI" }), - ).toHaveAttribute("href", "https://lab.example/openwebui"); - expect(screen.getByRole("link", { name: "Open WebUI" })).toHaveClass( - "lab-service-pill", - ); - expect(screen.getByRole("link", { name: "Open WebUI" })).toHaveAttribute( - "title", - "https://lab.example/openwebui", - ); + const openWebUiLinks = await screen.findAllByRole("link", { + name: "Open WebUI", + }); + expect(openWebUiLinks).toHaveLength(2); + for (const link of openWebUiLinks) { + expect(link).toHaveAttribute("href", "https://lab.example/openwebui"); + expect(link).toHaveClass("lab-service-pill"); + expect(link).toHaveAttribute("title", "https://lab.example/openwebui"); + } const apiMatches = await screen.findAllByText( "https://lab.example/openwebui/api", ); diff --git a/src/styles/globals.css b/src/styles/globals.css index 453af41..c4e2d31 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -2051,7 +2051,8 @@ ol { box-shadow: 0 12px 28px -22px rgba(15, 92, 139, 0.85); } -.lab-content a.lab-service-pill { +.lab-content a.lab-service-pill, +.lab-content a.lab-open-pill { display: inline-flex; align-items: center; gap: 0.45rem; @@ -2072,7 +2073,8 @@ ol { background-color 120ms ease; } -.lab-content a.lab-service-pill::before { +.lab-content a.lab-service-pill::before, +.lab-content a.lab-open-pill::before { content: "Open"; display: inline-flex; align-items: center; @@ -2086,7 +2088,8 @@ ol { text-transform: uppercase; } -.lab-content a.lab-service-pill:hover { +.lab-content a.lab-service-pill:hover, +.lab-content a.lab-open-pill:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -22px rgba(15, 92, 139, 0.85); }