What This Module Covers

A bare 0.34 on a screen tells a loan officer nothing: not whether to approve or decline, not whether the model was even reachable when the number rendered, not whether 0.34 means a 34% chance of anything at all. The serving endpoint from the previous module answers other systems with exactly that number, and a number is not yet a product. This module puts the endpoint in front of a person — a page that calls it, shows the result in terms a human can act on, and handles the cases where the model is slow, wrong, or unavailable.

A bare 0.34 on a screen tells a loan officer nothing: not whether to approve or decline, not whether the model was even reachable when the number rendered, not whether 0.34 means a 34% chance of anything at all. The serving endpoint from the previous module answers other systems with exactly that number, and a number is not yet a product. This module puts the endpoint in front of a person — a page that calls it, shows the result in terms a human can act on, and handles the cases where the model is slow, wrong, or unavailable.

What this module is

A frontend is the layer a non-ML human actually touches. It collects an input, calls the endpoint over HTTP, and turns the response into something a person can act on. Getting a number onto the screen is almost the easy part. The hard part is everything around it: the response does not exist until the network call resolves, the model is sometimes down and the page must say so rather than lie, and a raw probability shown to someone who does not think in probabilities misleads more than it informs.

This module builds a minimal dashboard against the loan-default endpoint from the serving module. It is deliberately small on frontend mechanics and heavy on the product judgment that separates a demo from a tool someone can trust: async timing, honest failure, and the decisions a frontend owns that the model does not.

What you will learn

The module moves through three lessons, each taking the page from working to trustworthy:

  • Get a working dashboard up. Build the smallest real page that collects an input, calls the endpoint, and renders a prediction a non-ML human can read. You will learn why the result does not exist until the await resolves, and why a render placed before it shows nothing.
  • Make it degrade gracefully. The dashboard works when the API answers. You will harden the case it does not — deploying, overloaded, or down — so the page checks the status before the body and shows an honest unavailable state instead of blanking out or leaving a stale number that the model never produced for this input.
  • A prediction is not a decision. A raw probability misleads a non-ML human, and predict_proba is not even a calibrated probability. You will reframe the number into something honest, place the threshold that turns it into a yes or no where it belongs as a business decision the frontend owns, and learn why an API key in client JavaScript is already public.

The module ends with a project in the same repository, on the Phase 2 starter: one small page against your own M6 /predict service for the Adult / Census Income model — the happy path end to end, an honest unavailable state when the API is down, confidence framed so a non-ML reader cannot misread it, a threshold owned on purpose, and nothing in the page source that should have stayed on the server. The lessons walk the loan dashboard; the project is where you prove the product layer yourself, against a rubric that maps line by line to these lessons.

How it builds on what came before

This module is the consumer of the serving endpoint the last module built. The status codes you learned to return are the status codes this page now reads; the structured response with its model_version is what the page renders and attributes. The honesty thread runs straight through: the serving module made the endpoint refuse bad input, and this module makes the page refuse to present a number it cannot stand behind. Nothing here asks you to abandon what you built; it puts a human in front of it.

What you will be able to do

By the end you will build a dashboard that calls the endpoint and renders a prediction without the async timing bug, degrades honestly when the model is unavailable instead of showing a stale or blank result, reframes a raw probability into something a non-ML user can act on, and keeps the threshold decision and any credentials on the side of the boundary where they belong. The thread through all three lessons is the same: showing a number is the start, and making it a number someone can act on is the job.

This lesson is part of Pro

The Ship a Machine Learning Product path — every lesson, capstone, and the failure modes free tutorials skip. Sign in if you already have Pro, or unlock it below.

Unlock with Pro Sign in