-
Notifications
You must be signed in to change notification settings - Fork 10
/
style-transfer.html
87 lines (80 loc) · 4.18 KB
/
style-transfer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<html>
<head>
<title>style transfer</title>
<meta charset="utf-8">
<script src="script/tfjs.1.3.1.js"></script>
</head>
<body>
<h1>风格迁移</h1>
<div style="position: relative;overflow: hidden;">
<!--原始图片-->
<div id="upload" style="float: left;width:350px;">
<h2>原始图片</h2>
<input id="img_input1" type="file" accept="image/*" onchange="uploadPic(event)"/>
<!--图片预览-->
<div id="preview1"></div>
</div>
<!--风格-->
<div id="upload" style="float: left;width:350px;">
<h2>风格图片</h2>
<input id="img_input2" type="file" accept="image/*" onchange="uploadPic(event)"/>
<!--图片预览-->
<div id="preview2"></div>
</div>
<!--状态-->
</div>
<p id="status"></p>
<canvas id="styleTransfer" width="0" height="0" ></canvas>
<br>
<button id="button" onclick="styleTransfer()">迁移</button>
<p>官方地址：<a href="https://github.com/reiinakano/arbitrary-image-stylization-tfjs">https://github.com/reiinakano/arbitrary-image-stylization-tfjs</a></p>
<p>前端智能DEMO合集：<a href="http://allan5.com/FE-AI/">http://allan5.com/FE-AI/</a></p>
<script>
let net = null;
let transferNet = null;
let pic1 = null;
let pic2 = null;
let BTN = document.getElementById('button')
const status = document.getElementById('status')
//图片
function uploadPic(e){
var picIndex = e.path[0].getAttribute('id').slice(-1);
var previewIndex = document.getElementById('preview'+picIndex)
let file = e.target.files[0];
if (!file.type.match('image.*')) return;
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
previewIndex.innerHTML = '';
previewIndex.innerHTML = `<img id="pic${picIndex}" src='${e.target.result}' width="300">`;
pic1 = document.getElementById('pic1')
pic2 = document.getElementById('pic2')
}
}
async function styleTransfer(){
if(!pic1 || !pic2) {alert('请先上传两张图片');return;}
if(!net || !transferNet) {alert('请等待模型加载完成');return;}
BTN.innerText = '正在迁移';
BTN.disabled=true;
await tf.nextFrame();
let bottleneck = net.predict(tf.browser.fromPixels(pic2).toFloat().div(tf.scalar(255)).expandDims());
await tf.nextFrame();
let style = transferNet.predict([tf.browser.fromPixels(pic1).toFloat().div(tf.scalar(255)).expandDims(), bottleneck]).squeeze();
await tf.nextFrame();
await tf.browser.toPixels(style, document.getElementById('styleTransfer'));
BTN.innerText = '迁移';
BTN.disabled=false;
}
//加载模型
loadModel()
async function loadModel(){
status.innerText = '正在加载模型...'
//抽取风格图特征抽取
net = await tf.loadGraphModel('model/style-transfer/saved_model_style_js/model.json')
//引用风格图特征
transferNet = await tf.loadGraphModel('model/style-transfer/saved_model_transformer_js/model.json')
status.innerText = ''
}
</script>
</body>
</html>