Viam Visual Quality Check App

Simple web application which allows taking an image from the camera and run it through an ML model trained in the Viam platform. Classifications and score are displayed on screen. Code can easily be changed to object detection.

Prerequisits

Create a .env inside the project root with the following content. You must update the values with your data!

VITE_API_KEY_ID=your_api_key_id_here
VITE_API_KEY_SECRET=your_api_key_secret_here
VITE_PART_ID=your_machines_part_id_here

Developing

Warning

The TFlite Javascript library has a bug. You must therefore install the dependencies with PNPM install!

Install the dependencies and start a development server:

pnpm install

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Add Your Own ML Model

The model is place in the static folder as model.tflite. You should be able to simply replace it with another Tflite model usin the same name.

If you have trained a model in the Viam platform, you can use the following URL schema to download your model:

https://app.viam.com/packages/<registry-item-org-id>/<modelname>/ml_model/<version>/<requesting-org-id>

Will bring this up with the Viam SDK team to make it much easier.

ML Model Validation

There is currently now efficient way of validating an ML model within the Viam platform. This Python sript will help you do this in the meantime:

Model Validation Readme.md

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.