Case Study — Responsible AI Model Oversight (Frontend Only)

Here is an Angular application that helps risk/compliance teams monitor a model, investigate predictions, and walk through a lightweight compliance checklist. This is frontend-only; I'm consuming a mocked REST API (provided in data.json).

---

Concept

Here's a slice of a Responsible AI oversight UI for a binary classification model ("CreditRisk–v3"). Users need to:

1. See model health & drift at a glance.
2. Search & inspect predictions, including explanations.
3. Review audit events.
4. Complete a compliance checklist and export a summary.

---

What is being Built

1) Model Overview

• Card(s) with: model name, version, owner, last deployment, total predictions (24h), error rate (24h), and drift indicator. Data from /api/models/:id and /api/metrics/:modelId.
• A small sparkline or simple trend chips for latency or accuracy (client-side, from recent metrics).

2) Predictions Explorer

• A searchable, paginated table from /api/predictions?modelId=...&q=&page=&limit=.
• Columns: id, timestamp, inputSummary (e.g., age/income), score, decision (Approve/Deny), latencyMs.
• Row click opens a details drawer/page showing:
  • Full inputFeatures.
  • explanations (top-k features with contribution).
  • A compact fairness section showing sensitiveAttributes and a disclaimer.

3) Audit Log

• Stream-like list from /api/audit?modelId=...&type=&page= with filters by type (DEPLOY, PREDICT, POLICY, ERROR).
• Each item shows timestamp, actor, type, and message.

4) Compliance Checklist

• Render checklist steps from /api/checklists/:id.
• Let users toggle items complete/incomplete and add a short note per item (local state is fine).
• “Export Summary” → generate a downloadable JSON or plain text summary of current completion.

---

Specifications

• ETag-style caching (store last fetched and show "stale" badge).
• A11y polish: focus management when opening details; labelled inputs; visible focus states.
• Error states and retry with exponential backoff for the Predictions list.
• Theming via SCSS variables (light/dark toggle).
• Route structure: /overview, /predictions, /audit, /compliance.

---

Tech Stack

• Angular (v15+), TypeScript.
• SCSS (SASS) for styling.
• REST-only APIs.
• No backend code.
• json-server to serve data.json on http://localhost:4000, or

---

API (Mock)

Base URL (recommended): http://localhost:4000/api