質問編集履歴
1
現在作成中のコードの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,4 +3,78 @@
|
|
|
3
3
|
いまJavaScriptとtensorflowjsを使いpythonで構築したkerasのモデルを利用しアプリケーションを作ろうとしています．
|
|
4
4
|
このとき構築したモデルは画像に加工をするものであり，入力サイズは自由で同じサイズの画像が出力されます．
|
|
5
5
|
## 実現したいこと
|
|
6
|
-
ユーザーから入力された画像(URI)と使用したいkerasのモデルを持っている状況で，入力画像をどのようにどの形式に変換してモデルに入力すべきか，また出力された画像をどのようにして表示・保存すれば良いのか，良いと思われる方法をご存知の方がいらっしゃればお教えいただけると幸いです．
|
|
6
|
+
ユーザーから入力された画像(URI)と使用したいkerasのモデルを持っている状況で，入力画像をどのようにどの形式に変換してモデルに入力すべきか，また出力された画像をどのようにして表示・保存すれば良いのか，良いと思われる方法をご存知の方がいらっしゃればお教えいただけると幸いです．
|
|
7
|
+
|
|
8
|
+
以下に今作成中のコードを記載します．
|
|
9
|
+
以下のコードと全く異なる実装になってもかまいません．
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
```JavaScript
|
|
13
|
+
//Onsen UIを使っています
|
|
14
|
+
|
|
15
|
+
/* 実行動作 (main)*/
|
|
16
|
+
document.addEventListener('init', function() {
|
|
17
|
+
var page = event.target;
|
|
18
|
+
if (page.id == "page2") {
|
|
19
|
+
document.getElementById('run').addEventListener('click', function(){
|
|
20
|
+
//img=>array
|
|
21
|
+
var img = STnet(image);
|
|
22
|
+
//array=>imgオブジェクト
|
|
23
|
+
changeTab2();
|
|
24
|
+
var r = document.getElementById("Pimg");
|
|
25
|
+
if (r){ //NULL or undefined or 0 or "" 以外なら要素を削除
|
|
26
|
+
document.getElementById("outputimg").removeChild(r); //clear
|
|
27
|
+
}
|
|
28
|
+
var o = document.createElement("img");
|
|
29
|
+
o.setAttribute("id", "Pimg");
|
|
30
|
+
o.setAttribute("src", img); //img name
|
|
31
|
+
o.setAttribute("alt","変換画像の確認")
|
|
32
|
+
document.getElementById("outputimg").appendChild(o); //表示
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
}
|
|
36
|
+
}, false);
|
|
37
|
+
|
|
38
|
+
//image.src=>arrayオブジェクト
|
|
39
|
+
function img2arr (){
|
|
40
|
+
const canvas = document.createElement("canvas");
|
|
41
|
+
var img = new Image();
|
|
42
|
+
//
|
|
43
|
+
img.src = image.src;
|
|
44
|
+
|
|
45
|
+
//変換した画像をarrに
|
|
46
|
+
return arr;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// import * as tf from '@tensorflow/tfjs';
|
|
50
|
+
// ニューラルネット
|
|
51
|
+
function STnet (img){
|
|
52
|
+
var style = window.localStorage.getItem('style'); //モデルの指定
|
|
53
|
+
const model = tf.loadModel(path.join('model',style,'model.json'));
|
|
54
|
+
try {
|
|
55
|
+
model.ready();
|
|
56
|
+
const inputData = {
|
|
57
|
+
input_1: new Float32Array(img)
|
|
58
|
+
};
|
|
59
|
+
const outputData = model.predict(inputData);
|
|
60
|
+
} catch (err) {
|
|
61
|
+
onFail(err);// handle error
|
|
62
|
+
}
|
|
63
|
+
const prediction = model.predict(img);
|
|
64
|
+
return prediction;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
/*保存*/
|
|
69
|
+
document.addEventListener('init', function() {
|
|
70
|
+
var page = event.target;
|
|
71
|
+
if (page.id == "page3") {
|
|
72
|
+
document.getElementById('save').addEventListener('click', function(){
|
|
73
|
+
//保存動作
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
}
|
|
79
|
+
}, false);
|
|
80
|
+
```
|