テンソルストリームですjsを用いてWebブラウザ上で猫の写真で種を予測できるプログラムを作成する.
ユーザが直接データセットをロードして学習すると予測可能な順序が面倒になるため,ユーザがスタートボタンを押すと,サーバに予め存在するデータセットが自動的にロードされ,学習の論理が少し変化する.
もしそうなら、ユーザーの立場から見ると、猫を入れた写真はすぐに予測したようなものです.
jsといえば、非同期処理で有名だと知っています.
非同期処理をよく学ぶ時が来たようだ.
その問題を解決するには非同期処理を阻止しなければならないからだ...ほほほ

変更されたコード

=>ボタンをクリックすると、あらかじめローカルに保存されているデータセットがラベルにロードされます.

var files = "./dataset/";
        
 for(j=0;j<10;j++)
                {
                        const url =  files+className[i]+"/"+j+".jpg";//이미지 파일 경로
                        const img = new Image();//이미지 객체의 로드 방식
                        img.id = className[i];//("russianblue","bengal","boombey","ragdoll");
                        img.onload = () => {
                            imgAry.push(img);
                            console.log(imgAry);
                        }
                        img.src = url;
                        console.log(img);
                        console.log(url);
                }

既存のコード

=>各タブのボタンをクリックすると、Webブラウザにデータセットが挿入されます.

btn.addEventListener('click', () => {
                const input = document.createElement('input');
                input.type = 'file';
                input.multiple = 'multiple';
                //onchange 변화 탐지해줌->디렉터리에서 파일을 불러오는 방식으로 변경
                input.onchange = evt => {
                    console.log(`Added ${evt.target.files.length} ${className[i]} images.`);
                    for (let f of evt.target.files) {
                        const url = URL.createObjectURL(f);//이미지 파일 경로
                        const img = new Image();//이미지 객체의 로드 방식
                        img.id = className[i];//("russianblue","bengal","boombey","ragdoll");
                        img.onload = () => {
                            imgAry.push(img);
                            console.log(imgAry);
                        }
                        img.src = url;
                        console.log(img);
                        console.log(url);
                    }
                }
                input.click();
            });

一見して二つの違いがわかる。

私が望む論理は、対応するラベルにデータセットをロードすると、img配列のimg値がpushされ、ロードされたデータセットが順次格納されます.
コードの位置から、データセットがラベルに適用されるとすぐにimgAryがプッシュされる可能性がありますが、すべてのラベルにデータセットが適用されるまでimgAryがプッシュされません.

それでは私が順番を決めてimgAryが先に処理されるようにしましょう!

非同期処理とは?
Javaスクリプトのプロパティで、特定のコードが演算を完了するまで、まず次のコードを実行します.
どうして必要なの?
画面からサーバにデータを要求すると、サーバがいつその要求に応答するか分からないため、他のコードを実行せずに待つことはできません.
これで解決すればいいのでしょうか…?
即時settimeout()

any IDEA...?