Skip to content

Commit 873ca32

Browse files
Add screenshots to all series-6 blogs; fix old submodule paths to docs/screenshots
1 parent ce30f48 commit 873ca32

13 files changed

Lines changed: 28 additions & 12 deletions

blogs/series-6-ai-app-features/6.3-angular-ai-chat-widget.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
AI features deserve their own section. This article adds a proper **AI submenu** to the TalentManagement Angular app — four dedicated pages, each with a single responsibility, registered as children of an `ai` route group in the sidebar. Each page is a standalone Angular component with its own route, template, and styles.
66

7-
![Dashboard with the AI submenu expanded in the sidebar — four child items: AI Assistant, HR Insight, NL Search, Vector Search](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-submenu-sidebar.png)
7+
![Dashboard with the AI submenu expanded in the sidebar — four child items: AI Assistant, HR Insight, NL Search, Vector Search](../../docs/screenshots/series-6-ai-app-features/ai-submenu-sidebar.png)
88

99
📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
1010

@@ -409,21 +409,21 @@ Open `http://localhost:4200` → log in → expand **AI** in the sidebar.
409409

410410
**Test AI Assistant (`/ai/assistant`):**
411411

412-
![Full AI Assistant page at /ai/assistant — chat card with message input when aiEnabled is true](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-assistant-page-full.png)
412+
![Full AI Assistant page at /ai/assistant — chat card with message input when aiEnabled is true](../../docs/screenshots/series-6-ai-app-features/ai-assistant-page-full.png)
413413

414-
![AI Assistant page — empty state before any messages, showing the "Start a conversation" prompt](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-assistant-empty-state.png)
414+
![AI Assistant page — empty state before any messages, showing the "Start a conversation" prompt](../../docs/screenshots/series-6-ai-app-features/ai-assistant-empty-state.png)
415415

416416
```
417417
What are the best practices for structuring a .NET Clean Architecture project?
418418
```
419419

420420
**Test HR Insight (`/ai/hr-insight`):**
421421

422-
![HR Insight page at /ai/hr-insight — empty state showing four suggestion buttons and the question input](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-hr-insight-empty.png)
422+
![HR Insight page at /ai/hr-insight — empty state showing four suggestion buttons and the question input](../../docs/screenshots/series-6-ai-app-features/ai-hr-insight-empty.png)
423423

424424
Click a suggestion chip — *"Which department has the most employees?"* — and wait for the live data answer.
425425

426-
![HR Insight page showing a data-grounded Ollama answer — references live department headcounts, execution time shown below reply](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-hr-insight-with-answer.png)
426+
![HR Insight page showing a data-grounded Ollama answer — references live department headcounts, execution time shown below reply](../../docs/screenshots/series-6-ai-app-features/ai-hr-insight-with-answer.png)
427427

428428
**Test the backward-compat redirect:**
429429
Navigate to `http://localhost:4200/ai-chat` — it should silently redirect to `/ai/assistant`.

blogs/series-6-ai-app-features/6.4-angular-ai-nl-search.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
HR managers don't think in filter fields. They think in sentences: *"Show me all software engineers hired in the last 6 months"* or *"Find employees in IT with a salary above $80,000."* This article adds a dedicated **Natural Language Search** page to the TalentManagement Angular app — a text input that accepts a plain-English query, sends it to the LLM for parsing, then fires a structured API call using the extracted filters.
66

7-
![Natural Language Search page at /ai/nl-search — empty state with search input and prompt to type a query](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-nl-search-empty.png)
7+
![Natural Language Search page at /ai/nl-search — empty state with search input and prompt to type a query](../../docs/screenshots/series-6-ai-app-features/ai-nl-search-empty.png)
88

99
📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
1010

@@ -40,6 +40,8 @@ This article is part of the **AngularNetTutorial** series. The full-stack tutori
4040

4141
## 🎯 What We're Building
4242

43+
![Dashboard with the AI submenu expanded — AI Assistant, HR Insight, NL Search, Vector Search child items visible](../../docs/screenshots/series-6-ai-app-features/ai-submenu-sidebar.png)
44+
4345
A dedicated **NL Search** page at `/ai/nl-search`:
4446

4547
* A single text input — type a plain-English description of the employees you want
@@ -331,6 +333,8 @@ export class AiNlSearchComponent implements OnDestroy {
331333

332334
Navigate to `http://localhost:4200/ai/nl-search`.
333335

336+
![Natural Language Search page at /ai/nl-search — empty state with search input and prompt to type a query](../../docs/screenshots/series-6-ai-app-features/ai-nl-search-empty.png)
337+
334338
**Try these queries:**
335339

336340
```

blogs/series-6-ai-app-features/6.4.1-dotnet-natural-language-search.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ What if users could type *"find all engineers"* or *"show me employees named Smi
88

99
This article shows you how to use an LLM as a **query translator** — converting plain English into the structured filter parameters your existing API already understands. The LLM never touches your database. It simply bridges the gap between human language and machine query syntax.
1010

11-
![Natural Language Search page at /ai/nl-search — single text input, type a plain-English description of the employees you are looking for](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-nl-search-empty.png)
11+
![Natural Language Search page at /ai/nl-search — single text input, type a plain-English description of the employees you are looking for](../../docs/screenshots/series-6-ai-app-features/ai-nl-search-empty.png)
1212

1313
📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
1414

@@ -620,7 +620,9 @@ Set `aiEnabled: false` in `environment.ts` → hot-reload → navigate to Employ
620620

621621
**Verify in Swagger:**
622622

623-
Navigate to `https://localhost:44378/swagger` → open `POST /api/v1/ai/nl-employee-search`:
623+
Navigate to `https://localhost:44378/swagger` → open `POST /api/v1/ai/nl-employee-search`.
624+
625+
![Swagger UI AI controller expanded — POST /ai/chat, POST /ai/hr-insight, POST /ai/nl-employee-search](../../docs/screenshots/series-6-ai-app-features/swagger-ai-endpoints.png)
624626

625627
```json
626628
{ "query": "find all software engineers" }

blogs/series-6-ai-app-features/6.5-angular-ai-vector-search.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
Keyword search fails for positions. A user who types *"cloud infrastructure role"* will miss positions titled *"DevOps Engineer"* or *"Platform SRE"* — even if those roles are exactly what they're looking for. This article adds a dedicated **Vector Search** page to the TalentManagement app — a semantic search that finds positions by *meaning*, not exact text match.
66

7-
![Vector Search page at /ai/vector-search — empty state with search input and prompt to describe a position](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-vector-search-empty.png)
7+
![Vector Search page at /ai/vector-search — empty state with search input and prompt to describe a position](../../docs/screenshots/series-6-ai-app-features/ai-vector-search-empty.png)
88

99
📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
1010

@@ -43,6 +43,8 @@ This article is part of the **AngularNetTutorial** series. The full-stack tutori
4343

4444
## 🎯 What We're Building
4545

46+
![Dashboard with the AI submenu expanded — AI Assistant, HR Insight, NL Search, Vector Search child items visible](../../docs/screenshots/series-6-ai-app-features/ai-submenu-sidebar.png)
47+
4648
A dedicated **Vector Search** page at `/ai/vector-search`:
4749

4850
* A single text input — describe the position you're looking for in natural language
@@ -304,6 +306,8 @@ export class AiVectorSearchComponent implements OnDestroy {
304306

305307
Navigate to `http://localhost:4200/ai/vector-search`.
306308

309+
![Vector Search page at /ai/vector-searchempty state with search input and prompt to describe a position](../../docs/screenshots/series-6-ai-app-features/ai-vector-search-empty.png)
310+
307311
**Try these queries:**
308312

309313
```

blogs/series-6-ai-app-features/6.6-dotnet-ai-response-caching.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ The fix is a **cache-aside decorator** — a wrapper around `IAiChatService` tha
1010

1111
This article shows you how to build that decorator using the EasyCaching infrastructure already in the TalentManagement API, and how to expose cache status to API consumers via an `X-AI-Cache: HIT/MISS` response header.
1212

13-
![HR Insight page showing AI response with execution time — the cache decorator reduces repeat query times from seconds to milliseconds](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-hr-insight-with-answer.png)
13+
![HR Insight page showing AI response with execution time — the cache decorator reduces repeat query times from seconds to milliseconds](../../docs/screenshots/series-6-ai-app-features/ai-hr-insight-with-answer.png)
1414

1515
📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
1616

@@ -301,7 +301,9 @@ return result.IsSuccess
301301

302302
**Start the stack and verify via Swagger:**
303303

304-
Navigate to `https://localhost:44378/swagger``POST /api/v1/ai/chat`:
304+
Navigate to `https://localhost:44378/swagger``POST /api/v1/ai/chat`.
305+
306+
![Swagger UI AI controller expanded — POST /ai/chat, POST /ai/hr-insight, POST /ai/nl-employee-search](../../docs/screenshots/series-6-ai-app-features/swagger-ai-endpoints.png)
305307

306308
```json
307309
{ "message": "What is Clean Architecture?" }

blogs/series-6-ai-app-features/6.7-dotnet-mssql-vector-search.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ This article adds semantic search to the **Position list page** using:
1313
* **EF Core 10 `EF.Functions.VectorDistance`** — LINQ query, no raw SQL strings
1414
* **Angular search bar** — same progressive-enhancement pattern as NL search in Article 6.5
1515

16-
![Vector Search page at /ai/vector-search — semantic position search powered by SQL Server native vector columns and Ollama nomic-embed-text embeddings](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-vector-search-empty.png)
16+
![Vector Search page at /ai/vector-search — semantic position search powered by SQL Server native vector columns and Ollama nomic-embed-text embeddings](../../docs/screenshots/series-6-ai-app-features/ai-vector-search-empty.png)
1717

1818
📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
1919

@@ -625,6 +625,8 @@ ollama serve
625625

626626
Navigate to `https://localhost:44378/swagger``POST /api/v1/positions/generate-embeddings`Execute.
627627

628+
![Swagger UI AI controller expandedPOST /ai/chat, POST /ai/hr-insight, POST /ai/nl-employee-search](../../docs/screenshots/series-6-ai-app-features/swagger-ai-endpoints.png)
629+
628630
Expected response: `{ "generated": 25 }` (or however many positions exist)
629631

630632
**Test semantic search via Swagger:**
@@ -639,6 +641,8 @@ Expected: positions ranked by cosine similarity — titles like "DevOps Engineer
639641

640642
Navigate to `http://localhost:4200`Positionstype in the semantic search bar.
641643

644+
![Angular Material data table listing employeessame sortable table pattern used for position results with semantic match scores](../../docs/screenshots/series-6-ai-app-features/employee-list-table.png)
645+
642646
* *"data scientist"*returns data-related positions ranked by similarity
643647
* *"manages people and projects"*returns manager/director positions
644648
* *"builds web applications"*returns developer/engineer positions
53.3 KB
Loading
53.3 KB
Loading
62.8 KB
Loading
57.9 KB
Loading

0 commit comments

Comments
 (0)