forked from aaroniker/figma-remove-bg
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ui.html
129 lines (124 loc) · 3.27 KB
/
ui.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
<form id="setApiKey">
<ol>
<li>Go to the <a target="_blank" href="https://www.remove.bg/r/mH3mbkczVmPg3G9os2bsbgUr">remove.bg website</a> and create a free account (you will need to confirm your email).</li>
<li>After that you can find your API key here <a target="_blank" href="https://www.remove.bg/profile#api-key">https://www.remove.bg/profile#api-key</a>.</li>
</ol>
<input type="text" placeholder="Api Key" id="apiKey">
<button type="submit">
Save
</button>
<p>More information about free accounts & pricing <a target="_blank" href="https://www.remove.bg/pricing">here</a>.</p>
</form>
<style>
#setApiKey a {
color: #18a0fb;
text-decoration: none;
}
#setApiKey a:hover {
text-decoration: underline;
}
#setApiKey p {
font-family: Inter,sans-serif;
font-weight: 400;
font-size: 11px;
line-height: 16px;
color: rgba(0, 0, 0, .5);
margin: 16px 0 0 0;
}
#setApiKey ol {
font-family: Inter,sans-serif;
font-weight: 400;
font-size: 11px;
line-height: 16px;
margin: 0 0 8px 0;
padding: 0 0 0 16px;
}
#setApiKey ol li:not(:last-child) {
margin-bottom: 6px;
}
#setApiKey input,
#setApiKey button {
-webkit-appearance: none;
font-family: Inter,sans-serif;
font-size: 11px;
line-height: 16px;
outline: none;
letter-spacing: .005em;
}
#setApiKey input {
font-weight: 400;
position: relative;
align-items: center;
width: 100%;
height: 30px;
margin: 1px 0 1px 0;
padding: 8px 4px 8px 7px;
color: rgba(0,0,0,.8);
border: 1px solid rgba(0,0,0,.12);
border-radius: 2px;
transition: border-color .3s ease;
}
#setApiKey input:hover {
border-color: rgba(0,0,0,.24);
}
#setApiKey input:focus {
border-color: #18a0fb;
}
#setApiKey button {
color: #fff;
cursor: pointer;
background-color: #18a0fb;
font-weight: 500;
padding: 5px 16px 5px 16px;
border: 2px solid transparent;
border-radius: 6px;
display: table;
margin-top: 8px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
document.querySelector('#setApiKey').onsubmit = e => {
e.preventDefault()
window.parent.postMessage({
pluginMessage: document.getElementById('apiKey').value
}, '*')
}
window.onmessage = async (event) => {
if(event.data.pluginMessage.type == 'key') {
document.getElementById('apiKey').value = event.data.pluginMessage.apikey || ''
}
if(event.data.pluginMessage.type == 'run') {
let data = new FormData(),
base64 = btoa(new Uint8Array(event.data.pluginMessage.bytes).reduce((data, byte) => {
return data + String.fromCharCode(byte)
}, ''));
data.append('image_file_b64', base64)
fetch('https://api.remove.bg/v1.0/removebg', {
method: 'POST',
headers: {
'X-Api-Key': event.data.pluginMessage.apikey,
'Accept': 'application/json'
},
body: data
}).then(response => {
if(!response.ok) {
throw response
}
return response
}).then(response => {
response.json().then(res => {
window.parent.postMessage({
pluginMessage: Uint8Array.from(atob(res.data.result_b64), c => c.charCodeAt(0))
}, '*')
})
}).catch(response => {
response.json().then(res => {
window.parent.postMessage({
pluginMessage: res
}, '*')
})
})
}
}
</script>