-
Notifications
You must be signed in to change notification settings - Fork 0
/
texture.html
108 lines (91 loc) · 5 KB
/
texture.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../assets/favicon/favicon.png" type="image/x-icon">
<title>3D style transfer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./app/style/style.css">
</head>
<body">
<div class="container">
<div class="card-container-textures mt-5 mb-5">
<div class="card-header">
<h1 style="text-align: center;">Choose your style</h1>
</div>
<div style="display: flex" class="mt-5">
<div class="card-body">
<label for="formFile" style="margin-left: 50%;transform: translateX(-50%);text-align: center;" class="texture-input">Input your texture</label>
<input onchange="preview1()" id="formFile" type="file" accept="image/png, image/jpeg">
<img src="./assets/textures/images.jpg" class="rounded mx-auto d-block mt-4" id="frame1" style="max-width: 300px; max-height: 300px;" alt="" />
</div>
<div class="card-body">
<label for="imgInp" style="margin-left: 50%;transform: translateX(-50%);text-align: center;" class="form-label texture-input">Input your texture</label>
<input onchange="preview2()" id="imgInp" type="file" accept="image/png, image/jpeg">
<img src="./assets/textures/moon-abstract-art-red-sky-wallpaper-preview.jpg" class="rounded mx-auto d-block mt-4" id="frame2" style="max-width: 300px; max-height: 300px;" alt="" />
</div>
</div>
</div>
<div style="display:flex;align-items:center;justify-content:space-evenly;flex-direction:column;margin-bottom:46px;">
<p>Trend result towards image</p>
<div style="margin-bottom:32px;display:flex;justify-content:space-between;align-items:center;">
<p style="margin-right:12px;margin-bottom:-2px;">Left image</p>
<input id="image-range" type="range" defaultValue="50" value="50" min="1" max="100" step="1">
<p style="margin-left:12px;margin-bottom:-2px;">Right image</p>
</div>
<p style="margin-top:76px;">Show sub-step results</p>
<label for="show-extra" style="display:flex;flex-direction:column;">
<input id="show-extra" type="checkbox">
</label>
<p style="margin-top:32px;">Disable random pattern</p>
<label for="disable-pattern" style="display:flex;flex-direction:column;">
<input id="disable-pattern" type="checkbox">
</label>
<label style="display:flex;cursor:pointer;flex-direction:column;margin-top:50px;margin-bottom:32px;" for="custom-model">
<p>Your custom gltf model (needs UV mapping & no textures)</p>
<a style="cursor:pointer;margin-top:12px;">upload</a>
<input id="custom-model" name="custom-model" type="file" accept=".gltf">
</label>
</div>
<div style="padding-bottom:74px;">
<form id="submitImagesForm">
<input id="submitImages" style="margin-left: 50%;transform: translateX(-50%);" class="button-apply" type="submit" value="Apply textures">
</form>
</div>
<div id="result-container" style="display: none;">
<h1>Your image result:</h1>
<canvas width="300" height="300" id="result1-canvas"></canvas>
</div>
<div id="texture-container" style="display: none;">
<h1>Your randomized pattern:</h1>
<img width="300" height="300" id="texture-canvas" alt="" />
</div>
<div id="result2-container" style="display: none;">
<h1>Your pattern result:</h1>
<canvas width="300" height="300" id="result2-canvas"></canvas>
</div>
</div>
<div id="loading" style="display:none;position:fixed;">
<div id="loading-animation"></div>
</div>
<script defer>
function preview1() {
frame1.src=URL.createObjectURL(event.target.files[0]);
}
function preview2() {
frame2.src=URL.createObjectURL(event.target.files[0]);
}
</script>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="./dist/public.js"></script>
</body>
</html>