Tensorflowjs,Kerasjsにおける画像データの入出力について

Question

現状

当方Javascript初心者です．
いまJavaScriptとtensorflowjsを使いpythonで構築したkerasのモデルを利用しアプリケーションを作ろうとしています．
このとき構築したモデルは画像に加工をするものであり，入力サイズは自由で同じサイズの画像が出力されます．

実現したいこと

ユーザーから入力された画像(URI)と使用したいkerasのモデルを持っている状況で，入力画像をどのようにどの形式に変換してモデルに入力すべきか，また出力された画像をどのようにして表示・保存すれば良いのか，良いと思われる方法をご存知の方がいらっしゃればお教えいただけると幸いです．

以下に今作成中のコードを記載します．
以下のコードと全く異なる実装になってもかまいません．

//Onsen UIを使っています

/* 実行動作 (main)*/
document.addEventListener('init', function() {
    var page = event.target;
    if (page.id == "page2") {
        document.getElementById('run').addEventListener('click', function(){
            //img=>array
            var img = STnet(image);
            //array=>imgオブジェクト
            changeTab2();
            var r = document.getElementById("Pimg");
            if (r){ //NULL or undefined or 0 or "" 以外なら要素を削除
                document.getElementById("outputimg").removeChild(r); //clear
            }
            var o = document.createElement("img");
            o.setAttribute("id", "Pimg");
            o.setAttribute("src", img); //img name
            o.setAttribute("alt","変換画像の確認")
            document.getElementById("outputimg").appendChild(o); //表示
        });
    
    }
}, false);

//image.src=>arrayオブジェクト
function img2arr (){
    const canvas = document.createElement("canvas");
    var img = new Image();
    //
    img.src = image.src;
    
    //変換した画像をarrに
    return arr;
}

// import * as tf from '@tensorflow/tfjs';
// ニューラルネット
function STnet (img){
    var style = window.localStorage.getItem('style'); //モデルの指定
    const model = tf.loadModel(path.join('model',style,'model.json'));
    try {
            model.ready();
            const inputData = {
                input_1: new Float32Array(img)  
            };
            const outputData = model.predict(inputData);
        } catch (err) {
            onFail(err);// handle error
        }
    const prediction = model.predict(img);
    return prediction;
}


/*保存*/
document.addEventListener('init', function() {
    var page = event.target;
    if (page.id == "page3") {
        document.getElementById('save').addEventListener('click', function(){
            //保存動作
            
            
        });
    
    }
}, false);

Comments

[fiveHundred]

まずは自分で調べてみたり、作ってみたりしてください。調べればサンプルぐらいは出てくると思います。その上で「自分で作ろうとしたときに上手くいかない」などのときに質問するとよいでしょう。

[mori_takeshi]

この問題については１週間以上試行錯誤しておりまして，inputDataに入力層を指定しFloat32Arrayをかけてpredictに入れるところまでは理解できたのですが，それ以降は公式のgithubに上がっているソースコードを読んでも理解できず困っております．意図の伝わりにくい質問で申し訳ございません．

[fiveHundred]

現在作成中のソースコードを記載してくれると分かりやすいと思います。

[mori_takeshi]

更新いたしました．ご助言ありがとうございます．