-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
pika3.html
153 lines (109 loc) · 4.32 KB
/
pika3.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Etch-A-Sketch</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900|Satisfy" rel="stylesheet">
<script src="script.js" type="text/javascript" async></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="maincontainer">
<div id="top">
<button id="hover">Hover</button>
<button id="header"><h1>Etch-A-Sketch</h1></button>
<button id="drag">Drag</button>
</div>
<div id="canvaswrapper">
<div id="gridcontainer">
</div>
</div>
<div id="bottombuttons">
<button id="clear">Clear</button>
<button id="default">Black</button>
<button id="transparent">Gray</button>
<button id="colorized">Color</button>
<button id="resize">Size</button>
<button onclick="renderimg()"> Render</button>
</div>
</div>
<footer id="footer">
<p id="codedby">Coded by Ben Smyth, © 2018.</p>
<p id="visitme"><a href="https://github.com/benjsmyth" target="_blank">Visit forked project on Github!</a></p>
<p id="visitme"><a href="https://github.com/benjsmyth" target="_blank">Visit parent forked project author (Benjsmyth) on Github!</a></p>
</footer>
<br>
<hr>
<!-- @STCGoal Capture Canvas from an HTML Elements -->
<script type="text/javascript" src="node_modules/html2canvas/dist/html2canvas.js"></script>
<!-- @STCGoal So we dont publish on the web our config like pika_token -->
<script type="text/javascript" src="/config.js"></script>
<!-- @STCGoal Render Stylistic inferences via hosted AI model -->
<script src="https://cdn.jsdelivr.net/npm/@runwayml/hosted-models@latest/dist/hosted-models.js"></script>
<!-- @STCGoal Logic doing all the work -->
<script type="text/javascript">
//----------------------------------------------------------------------------------
//--------------------------------------------Inference Starts after that timeout
var infereAfterTimeOut = 19000;
//----------------------------------------------------------FEATURE ON/OFF --------------------
//----------------- Toogle This for processing Style or Not (Cost 0.01$ USD per inference -----
var doProcess = true;
setTimeout(() => {
console.log("Starting the whole thing BYPASSED in this by the button RENDER!");
}, infereAfterTimeOut);
//----------------------------------------------
function imgToBase64(img) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
// I think this won't work inside the function from the console
img.crossOrigin = 'anonymous';
ctx.drawImage(img, 0, 0);
return canvas.toDataURL();
}
function renderimg()
{
console.log("RENDER the whole thing!");
var htmlIdSource = "canvaswrapper";// the html id that we capture, convert as image and send to the Pika agent which will send us back our stylized image.
html2canvas(document.getElementById(htmlIdSource)).then(function(canvas) {
document.body.appendChild(canvas);
// document.appendChild("<hr>");
var enc64 = imgToBase64(canvas);
// console.log(enc64);
//@STCStatus We have an encoded grabbed capture
//----------------------------------------------
//----------------------------------------------
//@STCGoal posting to our hosted Pika model on the cloud
const model = new rw.HostedModel({
url: pika_url,
token: pika_token,
});
//// You can use the info() method to see what type of input object the model expects
model.info().then(info => console.log(info));
const inputs = {
"contentImage": enc64
};
if (doProcess){
model.query(inputs).then(outputs => {
const { stylizedImage } = outputs;
console.log('-------Runway stylized:');
console.log(stylizedImage);
var image = new Image();
image.src= stylizedImage;
document.body.appendChild(image);
// use the outputs in your project
});
}
else {
console.log("-------- DISABLED WARNING-----");
console.log("-- Processing style is disabled, set doProcess = true to enable");
}
});
console.log("ending the whole thing");
}
</script>
</body>
</html>