Failed to load resource: net::ERR_FAILED　というエラーが発生して困っています。

#	確率
0	-
1	-
2	-
3	-
4	-
5	-
6	-
7	-
8	-
9	-

前提・実現したいこと

手書き文字認識アプリをTensorflow.jsを用いて作ってみたのですが、うまく動かないので質問します。どなたかご教授よろしくお願いします。

発生している問題・エラーメッセージ

Failed to load resouce: net::ERR_FAILED

該当のソースコード

ファイルはindex.html、script.js、lib.jsの3つのファイルで構成されています。

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Tensorflow.js MNIST</title>
9
10    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/th.min.js"></script>
11    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.0.2/dist/tfjs-vis.umd.min.js"></script>
12    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
13
14    <script src="lib.js" type="module"></script>
15
16    <script src="script.js" type="module"></script>
17
18    <style type="text/css">
19        .is-selected {
20            background-color: blue;
21            color: white;
22            line-height: 1.5;
23        }
24    </style>
25</head>
26
27
28
29<body>
30    <p id="loading-message">学習モデルの作成中です。しばらくお待ちください</p>
31    <div id="main" style="display:none;">
32        <canvas id="pad" width="280" height="280"></canvas>
33        <div>
34            <input type="button" value="認識" id="predict-button">
35            <input type="button" value="リセット" id="reset-button">
36        </div>
37        <br />
38
39        <table>
40            <thead>
41                <tr>
42                    <th>#</th>
43                    <th>確率</th>
44                </tr>
45            </thead>
46            <tbody>
47                <tr>
48                    <th>0</th>
49                    <td class="classconfidence">-</td>
50                </tr>
51                <tr>
52                    <th>1</th>
53                    <td class="classconfidence">-</td>
54                </tr>
55                <tr>
56                    <th>2</th>
57                    <td class="classconfidence">-</td>
58                </tr>
59                <tr>
60                    <th>3</th>
61                    <td class="classconfidence">-</td>
62                </tr>
63                <tr>
64                    <th>4</th>
65                    <td class="classconfidence">-</td>
66                </tr>
67                <tr>
68                    <th>5</th>
69                    <td class="classconfidence">-</td>
70                </tr>
71                <tr>
72                    <th>6</th>
73                    <td class="classconfidence">-</td>
74                </tr>
75                <tr>
76                    <th>7</th>
77                    <td class="classconfidence">-</td>
78                </tr>
79                <tr>
80                    <th>8</th>
81                    <td class="classconfidence">-</td>
82                </tr>
83                <tr>
84                    <th>9</th>
85                    <td class="classconfidence">-</td>
86                </tr>
87            </tbody>
88        </table>
89    </div>
90</body>
91
92</html>

script.js

javascript
1import { MnistData } from 'https://storage.googleapis.com/tfjs-tutorial/mnist_data.js';
2import { showExamples, getModel, train } from './lib.js'
3import { prependOnceListener } from 'cluster';
4
5const IMAGE_WIDTH = 28;
6const IMAGE_HEIGHT = 28;
7
8async function run() {
9    let signaturePad = initSignaturePad();
10
11    const data = new MnistData();
12    await data.load()
13    await showExamples(data);
14
15    let model = getModel();
16
17    tfvis.show.modelSummary({ name: 'Model Architecture' }, model);
18
19    await train(model, data);
20    document.getElementById("loading-message").style.display = "none"
21    document.getElementById("main").style.display = "block"
22
23    document.getElementById("predict-button").onclick = function() {
24        predict(model);
25    }
26    document.getElementById("reset-button").onclick = function() {
27        reset(signaturePad);
28    };
29}
30
31document.addEventListener('DOMContentLoaded', run);
32
33function initSignaturePad() {
34    let pad = document.getElementById('pad');
35    return new signaturePad(pad, {
36        minWidth: 5,
37        maxWidth: 5,
38        penColor: 'white',
39        backgroundColor: 'black',
40    });
41}
42
43function predict(model) {
44    let ctx = document.createElement('canvas').getContent('2d');
45    let pad = document.getElementById('pad');
46
47    ctx.drawImage(pad, 0, 0, IMAGE_WIDTH, IMAGE_HEIGHT);
48    let imageData = ctx.getImageData(0, 0, IMAGE_WIDTH, IMAGE_HEIGHT);
49
50    let score = tf.tidy(() => {
51        let input = tf.browser.fromPixels(imageData, 1).reshape([1, IMAGE_WIDTH, IMAGE_HEIGHT, 1]).div(tf.scalar(255));
52        return model.predict(input);
53    });
54
55    let maxConfidence = score.dataSync().indexOf(Math.max.apply(null, score.dataSync()));
56
57    let elements = document.querySelectorAll(".confidence");
58
59    elements.forEach((el, i) => {
60        el.parentNode.classList.remove('is-selected');
61        if (i === maxConfidence) {
62            el.parentNode.classList.add('is-selected');
63        }
64        el.innerText = score.dataSync()[i];
65    })
66}
67
68
69function reset(signaturePad) {
70    signaturePad.clear();
71    let elements = document.querySelectorAll(".confidence");
72    elements.forEach(el => {
73        el.parentNode.classList.remove('is-selected');
74        el.innerText = '-';
75    })
76}

lib.js

javascript
1export async function showExamples(data) {
2    const surface = tfvis.visor().surface({ name: 'Input Data Examples', tab: 'Input Data' });
3
4    const examples = data.nextTestBatch(20);
5    const numExamples = examples.xs.shape[0];
6
7    for (let i = 0; i < numExamples; i++) {
8        const imageTensor = tf.tidy(() => {
9            return examples.xs
10                .slice([i, 0], [1, examples.xs.shape[1]])
11                .reshape([28, 28, 1]);
12        });
13        const canvas = document.createElement('canvas');
14        canvas.width = 28;
15        canvas.height = 28;
16        canvas.style = 'margin: 4px';
17        await tf.browser.toPixels(imageTensor, canvas)
18        surface.drawArea.appendChild(canvas);
19
20        imageTensor.dispose();
21    }
22}
23
24
25//手書き数字認識の学習モデルを定義
26export function getModel() {
27    const model = tf.sequential();
28
29    const IMAGE_WIDTH = 28;
30    const IMAGE_HEIGHT = 28;
31    const IMAGE_CHANNELS = 1;
32
33    model.add(tf.layers.conv2d({
34        inputShape: [IMAGE_WIDTH, IMAGE_HEIGHT, IMAGE_CHANNELS],
35        kernelSize: 5,
36        filters: 8,
37        strides: 1,
38        activation: 'relu',
39        kernelInitializer: 'varianceScaling'
40    }));
41    model.add(tf.layers.maxPooling2d({ poolSize: [2, 2], strides: [2, 2] }));
42    model.add(tf.layers.conv2d({
43        kernelSize: 5,
44        filters: 16,
45        strides: 1,
46        activation: 'relu',
47        kernelInitializer: 'varianceScaling'
48    }));
49
50    model.add(tf.layers.maxPooling2d({ poolSize: [2, 2], strides: [2, 2] }));
51
52    model.add(tf.layers.maxPooling2d({ poolSize: [2, 2], strides: [2, 2] }))
53    model.add(tf.layers.flatten());
54
55
56    const NUM_OUTPUT_CLASSES = 10;
57    model.add(tf.layers.dense({
58        units: NUM_OUTPUT_CLASSES,
59        kernelInitializer: 'varianceScaling',
60        activation: 'softmax'
61    }));
62
63    const optimizer = tf.train.adam();
64    model.compile({
65        optimizer: optimizer,
66        loss: 'categoricalCrossentropy',
67        metrics: ['accuracy'],
68    });
69
70    return model;
71}
72
73
74
75export async function train(model, data) {
76    const metrics = ['loss', 'val_loss', 'acc', 'val_acc']
77    const container = {
78        name: 'Model Training',
79        styles: { height: '1000px' }
80    };
81    const fitCallbacks = tfvis.show.fitCallbacks(container, metrics);
82
83    const BATCH_SIZE = 512;
84    const TRAIN_DATA_SIZE = 5500;
85    const TEST_DATA_SIZE = 1000;
86
87    const [trainXs, trainYs] = tf.tidy(() => {
88        const d = data.nextTrainBatch(TRAIN_DATA_SIZE);
89        return [
90            d.xs.reshape([TRAIN_DATA_SIZE, 28, 28, 1]),
91            d.labels
92        ];
93    });
94
95    const [textXs, testYs] = tf.tidy(() => {
96        const d = data.nextTestBatch(TEST_DATA_SIZE);
97        return [
98            d.xs.reshape([TEST_DATA_SIZE, 28, 28, 1]),
99            d.labels
100        ];
101    });
102
103    return model.fit(trainXs, trainYs, {
104        batchSize: BATCH_SIZE,
105        validationData: [testXs, testYs],
106        epochs: 10,
107        shuffle: true,
108        callbacks: fitCallbacks
109    });
110}

試したこと

.chromeのキャッシュを削除してみたが、改善されなかった。

行動規範の内容に同意します

回答1件

ベストアンサー

多分一緒に以下のようなエラーも出ているのでは無いでしょうか？

Access to script at 'file:~~/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

scriptのtypeをmoduleにするとファイルへのアクセス方法が、httpプロトコルではなく、fileプロトコルになってしまいます。最近のChromeはローカルファイルへのhttpdを通さないアクセスを許可していないのでエラーとなってしまうのだとおもいます。

参考サイト
・https://teratail.com/questions/216443

投稿2020/02/26 10:56