Tensorflow js / Chrome cannot load Python Keras model with more than 6 shards (6+ xhr requests)

Question

I have a model which has 11 shards. For some reason, Chrome fails to load it when it has to perform more than 6 XHR requests. Safari loads all of them without a problem.

When I edit the model.json to only include 6 shards, the model loads. But of course without all the weights and fails to actually construct the model.

And, of course the script fails when it doesn't have all the needed weights...

The javascript code to load the model:

// index.html
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
<script src="main.js"></script>

// main.js
(function () {
    let result = document.getElementById('output');

    async function loadModel() {
        result.innerText = 'Loading model... ⏳';
        const m = await tf.loadLayersModel('model/model.json');
        result.innerText = 'Model loaded! ';
        return m;
    }

    const model = loadModel();
    console.log(model);
})();

Here is a summary of the Keras model. The model is converted from a Python Keras model to tensorflow js version.

tensorflowjs_converter --input_format keras \
'model.h5' \
'model/'

Answer 1

Browsers limit the max number of concurrent downloads to limit malicious use. You will need to wait for the first few to finish before requesting the other shards.

See this for more context: Max parallel http connections in a browser?