(Lesson 06.05 · 20 minutes · Your model · Your model)

An app that works without a network.

A useful model has to end up in your pocket and work out in the countryside too. Here you'll see how a page becomes an app that works offline, how the model gets updated, and how it can keep learning without sending your data anywhere.

What you learn

What a PWA is and how it works offline
Why privacy is the most solid advantage of local models
How to update a model that's already installed
What on-device training and federated learning are

You need to know

If you don't remember one of these, the link takes you to the chapter that explains it.

How do you want to follow it

Preparing the scene…

01 Installable
A page you install like an app.

This course's lab is a web page, but you can add it to your home screen. It opens full screen, without the browser bar, and it works offline too. This kind of page is called a PWA, a progressive web app. It doesn't go through the app stores, and it updates itself whenever there's a connection.

In practice. On Android, use Add to Home screen from the browser menu. On iPhone, the Home Screen app has its own storage, so train the models you want to use from the app inside the app itself.
02 Offline
The page and the model stay on the phone.

A PWA has a small program that works behind the scenes, called the service worker. It saves the pages and the files in the browser's storage. The first time, it downloads everything, including the model. From the second time on it takes them from there, even in airplane mode. The model you trained stays saved on the phone, in a small database inside the browser.

In practice. Always test the app in airplane mode before you hand it over. It's the quickest way to catch a file that's still loading from the network.
03 Privacy
Data that never leaves can't get lost.

If photos, sounds and measurements stay on the phone, there's no server to protect and no archive they could leak from. That's the most solid advantage of edge AI^01.01. In Europe, the GDPR asks you to collect only the data you need, and a model that works locally often collects none at all.

In practice. Write in the app, in one sentence, what stays on the phone and what doesn't. People trust a clear promise more than a long privacy notice.
04 Updates
A new model arrives as a file.

Sooner or later you'll want a better model. With a PWA, you just publish the new file. The service worker downloads it when there's a network, and uses it from the next time on. It's a good idea to give every model a version number and save it along with every answer. That way, when something goes wrong, you know which model made the mistake.

In practice. Don't publish a new model without measuring it on the reference phone. A model that's more accurate on the computer can be slower or heavier in your pocket.
05 Learning in your pocket
The model can get better inside the phone.

Some apps go one step further and keep training the model on the phone, with the data of the person using it. The keyboard learns your words, and the gallery learns the faces of the people you photograph. Usually only the last layers are trained, just a few weights, at night and while the phone is charging. It's called on-device training.

In practice. The people who use the app must be able to erase what the model has learned about them. Plan for a button that takes the model back to its starting version.
06 Learning together
Many phones improve the same model.

With federated learning, many phones improve a shared model without sending their data. Each one learns a little locally and sends back only the corrections to the weights. A server puts them together and sends the new model back to everyone. Google has used it since 2017 for the suggestions in its Gboard keyboard.

In practice. Even the weight corrections alone can reveal something about the data. Serious systems add a little noise and mix together the contributions of many phones.
07 The final step
From the model in the lab to the app in your pocket.

In the lab, your model has one last step. You quantize it to 8 bits, compare size and accuracy, and try it live in airplane mode. Then you can export it, to use in an app of your own or in another project. It's the same path every app in this course follows, on a small scale.

In practice. Before you export, write a model card. What it's for, what data it was trained on, how often it's wrong and where it shouldn't be used.

01 / 07

(Go deeper)

A few more numbers.

(01)

How a service worker works

The service worker is a JavaScript file that the browser installs next to the page. It sits in the middle of every request the page makes and decides whether to answer from the network or from the saved storage. It only works on https pages, or on localhost while you're developing.

This course uses one with three rules. Pages are requested from the network first and then from storage, so a corrected text shows up right away. Other files are taken from storage first. Models live in a separate storage that stays even when a new version of the site comes out, so they don't get downloaded again every time.

(02)

Where the browser saves data

The browser offers several kinds of storage. localStorage is small and simple, good for settings and for your progress in the course. IndexedDB is a real database that can hold hundreds of MB, good for datasets and trained models. Cache Storage belongs to the service worker, for pages and downloaded files.

When the phone is full, the browser can delete this data. With navigator.storage.persist a page asks to keep it safe, and many browsers allow it for installed apps. It's a step you don't want to forget if the phone holds the dataset you spent an hour collecting.

if (navigator.storage && navigator.storage.persist) {
  const kept = await navigator.storage.persist();   // true means the browser won't delete them on its own
}

(03)

Federated learning in the keyboard

In 2017 Brendan McMahan and Daniel Ramage of Google described the first use on a large scale. The Gboard keyboard learns which words to suggest on people's phones, at night, while charging and on Wi-Fi. Only the corrections reach the server, mixed with those of many other phones.

In the years that followed, Google added differential privacy, a mathematical way of adding noise that puts a limit on how much anyone can learn about a single person. In 2023 it wrote that all of Gboard's language models are trained this way.

(Try it on your phone)

The final step

Pick one of the models you trained in the lab, for example the one with the mug and the keys, and take it all the way. It takes ten minutes.

Open the lab and choose a model you've already trained, from the Your models list.
In the Shrink step, press Shrink to 8 bits. You see the size and the test results, before and after. If the results hold up, check the box for the 8-bit version.
On Android, add the course to your home screen from the browser menu. On iPhone, stay in Safari. The app you add to the Home Screen has its own storage, and the model you trained in Safari isn't there.
Put the phone in airplane mode. On Android, open the app from the home screen. On iPhone, open the lab again in Safari. In the Your models list, open the model again and try it live.
Write the model card and export the model, if you want to use it somewhere else.

Open the lab →

(Quiz)

4 questions to close the lesson.

When you have answered them all, the lesson counts as done and its stone on the map turns yellow. Answering is what counts, not the score.

(01)

What lets a web page work in airplane mode?
(02)

What's the most solid advantage of a model that works on the phone?
(03)

In federated learning, what reaches the server?
(04)

You publish a new model. What should you save with every answer?

New words, and where they are explained

PWAchapter 1
Service workerchapter 2
On-device trainingchapter 5
Federated learningchapter 6

Sources and reading

To close the lesson, answer the quiz

← Formats and engines Back to the map

(Next lesson · 06.06) Responsible AI