質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0グッド

0クリップ

16569閲覧

投稿2020/02/26 09:58

前提・実現したいこと

手書き文字認識アプリを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のキャッシュを削除してみたが、改善されなかった。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

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

hayato7

総合スコア1135

kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

退会済みユーザー

退会済みユーザー

2020/02/26 13:04

ご回答ありがとうございます。 試してみます!
退会済みユーザー

退会済みユーザー

2020/02/26 13:51

ありがとうございます。 解決しました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。