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

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

ただいまの
回答率

88.58%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 622

mori_takeshi

score 9

 現状

当方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);
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • fiveHundred

    2018/11/08 16:18

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

    キャンセル

  • mori_takeshi

    2018/11/08 16:33

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

    キャンセル

  • fiveHundred

    2018/11/08 16:43

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

    キャンセル

  • mori_takeshi

    2018/11/08 17:28

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

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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