import * as tf from "@tensorflow/tfjs";
import * as cocoSsd from "@tensorflow-models/coco-ssd";
// other imports
export default () => {
    const {videoRef} = useVideoStream();
    const canvasRef = useRef<HTMLCanvasElement>(null);
    const modelRef = useRef<ObjectDetection>();
    function detectFrame() {
        if (modelRef.current && canvasRef.current && videoRef.current) {
            modelRef.current.detect(videoRef.current)
                .then(objects => {
                    buildObjectReactangle(canvasRef.current, objects);
                    window.requestAnimationFrame(detectFrame);
                });
        }
    }
    useEffect(() => {
        cocoSsd.load().then(model => {
            modelRef.current = model;
            detectFrame();
        });
    }, []);
    return (
        <div style={{position: 'relative'}}>
            <video ref={videoRef} width={640} height={480}/>
            <canvas ref={canvasRef} width={640} height={480}/>
        </div>
    );
}

[{
  bbox: [x, y, width, height],
  class: "person",
  score: 0.8380282521247864
}, {
  bbox: [x, y, width, height],
  class: "kite",
  score: 0.74644153267145157
}]

const model = tf.loadGraphModel('/path/to/model.json')

const model = tf.loadLayersModel('/path/to/model.json')

$ pip  install tensorflowjs

$ tensorflowjs_converter \
      --input_format keras \
      --output_format tfjs_layers_model \
      path/to/my_model.h5 \
      path/to/tfjs_target_dir

$ pipenv keras tensorflowjs

import keras
import tensorflowjs as tfjs
mobileNet = keras.applications.mobilenet_v2.MobileNetV2()
tfjs.converters.save_keras_model(mobileNet, './model/from_python_script')

Uncaught (in promise) Error: Unknown layer: Functional. This may be due to one of the following reasons:
1. The layer is defined in Python, in which case it needs to be ported to TensorFlow.js or your JavaScript code.
2. The custom layer is defined in JavaScript, but is not registered properly with tf.serialization.registerClass().
    at deserializeKerasObject (generic_utils.ts:242)
    at deserialize (serialization.ts:31)
    at loadLayersModelFromIOHandler (models.ts:294)
    at async loadModel (index.js:9)

 "inputs": {
    "input_1:0": {
        "name": "input_1:0",
        "dtype": "DT_FLOAT",
        "tensorShape": {
            "dim": [
                { "size": "-1"},
                { "size": "224"},
                { "size": "224"},
                { "size": "3"}
            ]
        }
    }
},

"outputs": {
    "Identity:0": {
        "name": "Identity:0",
        "dtype": "DT_FLOAT",
        "tensorShape": {
            "dim": [
                { "size": "-1" },
                { "size": "1000" }
            ]
        }
    }
}

import * as tf from '@tensorflow/tfjs';
import {GraphModel, Tensor2D} from '@tensorflow/tfjs';
// other dependencies
export default () => {
    const [model, setModel] = useState<GraphModel>();
    const [image, setImage] = useState<ImageType>();
    const [results, setResults] = useState<ResultType[]>([]);
    useEffect(() => {
        (async () => {
            setModel(await tf.loadGraphModel('/mobileNetV2/model.json'));
        })();
    }, []);
    useEffect(() => {
        tf.tidy(() => {
            if (image?.image && model) {
                (async () => {
                    const offset = tf.scalar(127.5);
                    const input = tf.browser.fromPixels(image.image)
                        // make image compatable with model input
                        .resizeNearestNeighbor([224, 224])
                        // feature scale tensor image to range [-1, 1]
                        .sub(offset).div(offset)
                        .toFloat()
                        // adding batch axis and convert tensor with shape
                        // [224, 224, 3] to [1, 224, 224, 3]
                        .expandDims();
                    const output = model.predict(input) as Tensor2D;
                    const results = Array.from(await output.data())
                        .map((item, i) => ({probability: item, label: labels[i]}))
                        .sort((a1, a2) => a2.probability - a1.probability)
                        .slice(0, 5);
                    setResults(results);
                })();
            }
        });
    }, [image]);
    return (
        <div>
            {model && <InputFile setImage={setImage}/>}
            {image && image.src && <img src={image.src} alt={'Image'}/>}
            {results && results.length > 0 && results.map((item, i) => (
                <div key={i}>
                    {item.label} with probability {item.probability.toFixed(5)}
                </div>
            ))}
        </div>
    );
}