-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathui.html
409 lines (367 loc) · 19.5 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
<div class="container">
<div class="header">
<div class="tabs-container">
<button class="tabs ux-writer active" onclick="openCategory('ux-writer')">
<svg width="25" height="24" viewBox="0 0 16 16" fill="#788290" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.66667C2 2.29848 2.29848 2 2.66667 2H13.3333C13.7015 2 14 2.29848 14 2.66667V4.66667C14 5.03486 13.7015 5.33333 13.3333 5.33333C12.9651 5.33333 12.6667 5.03486 12.6667 4.66667V3.33333H3.33333V4.66667C3.33333 5.03486 3.03486 5.33333 2.66667 5.33333C2.29848 5.33333 2 5.03486 2 4.66667V2.66667Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33333 13.3333C5.33333 12.9651 5.63181 12.6667 6 12.6667H10C10.3682 12.6667 10.6667 12.9651 10.6667 13.3333C10.6667 13.7015 10.3682 14 10 14H6C5.63181 14 5.33333 13.7015 5.33333 13.3333Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2C8.36819 2 8.66667 2.29848 8.66667 2.66667V13.3333C8.66667 13.7015 8.36819 14 8 14C7.63181 14 7.33333 13.7015 7.33333 13.3333V2.66667C7.33333 2.29848 7.63181 2 8 2Z" />
</svg>
<span class="tabText">UX Writer</span>
</button>
<button class="tabs icons" onclick="openCategory('icons')">
<svg width="25" height="24" viewBox="0 0 16 16" fill="#788290" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9652 3.44272C12.3048 2.78707 11.5202 2.26991 10.6574 1.92159C9.79448 1.57327 8.87071 1.40081 7.94028 1.41433C6.19365 1.40996 4.51683 2.09962 3.27869 3.33159C2.04055 4.56355 1.34251 6.23691 1.33815 7.98354C1.33378 9.73017 2.02344 11.407 3.2554 12.6451C4.48737 13.8833 6.16073 14.5813 7.90736 14.5857C8.28372 14.5921 8.65156 14.4733 8.95313 14.248C9.25469 14.0228 9.47291 13.7037 9.57353 13.341C9.63767 13.079 9.63701 12.8054 9.5716 12.5438C9.50619 12.2822 9.37801 12.0404 9.19815 11.8395C9.15656 11.7921 9.12942 11.7339 9.11996 11.6716C9.1105 11.6093 9.1191 11.5456 9.14476 11.488C9.17041 11.4305 9.21203 11.3815 9.26469 11.3469C9.31734 11.3123 9.37882 11.2935 9.44182 11.2928H10.5285C11.5512 11.2976 12.5378 10.9153 13.2903 10.2227C14.0428 9.53005 14.5054 8.57838 14.5852 7.55877C14.6097 6.79852 14.4787 6.04129 14.2001 5.3335C13.9215 4.62572 13.5013 3.9823 12.9652 3.44272V3.44272ZM10.5548 9.97571H9.46816C9.15081 9.97391 8.83977 10.0642 8.57274 10.2357C8.30572 10.4072 8.09419 10.6525 7.96381 10.9418C7.83344 11.2312 7.78982 11.5521 7.83825 11.8658C7.88667 12.1794 8.02507 12.4722 8.23664 12.7088C8.27783 12.7503 8.30695 12.8023 8.32087 12.8592C8.33479 12.916 8.33299 12.9756 8.31567 13.0315C8.28274 13.1698 8.13127 13.2554 7.92711 13.2685C7.17919 13.259 6.44188 13.0902 5.76424 12.7736C5.08659 12.4569 4.48413 11.9996 3.99694 11.432C3.50975 10.8645 3.14899 10.1997 2.93867 9.4819C2.72834 8.76409 2.67327 8.00974 2.77712 7.269C2.96492 6.02427 3.58686 4.88606 4.53295 4.05567C5.47903 3.22528 6.6883 2.75623 7.94687 2.73147H7.99955C8.74429 2.72172 9.48344 2.86121 10.1734 3.14172C10.8634 3.42222 11.4902 3.83807 12.0168 4.36471C12.4278 4.77592 12.7506 5.26653 12.9658 5.80661C13.1809 6.34669 13.2838 6.92494 13.2681 7.50608C13.1999 8.17984 12.8852 8.80464 12.3844 9.26048C11.8836 9.71631 11.232 9.97103 10.5548 9.97571V9.97571Z"/>
<path d="M7.99955 5.36574C8.54513 5.36574 8.98741 4.92347 8.98741 4.37789C8.98741 3.83232 8.54513 3.39004 7.99955 3.39004C7.45398 3.39004 7.0117 3.83232 7.0117 4.37789C7.0117 4.92347 7.45398 5.36574 7.99955 5.36574Z"/>
<path d="M10.1399 4.83889C9.97076 4.93659 9.83438 5.08225 9.74801 5.25745C9.66163 5.43264 9.62913 5.62951 9.65462 5.82317C9.68011 6.01684 9.76244 6.1986 9.8912 6.34548C10.02 6.49236 10.1894 6.59777 10.378 6.64839C10.5667 6.699 10.7661 6.69255 10.9511 6.62985C11.1361 6.56715 11.2984 6.45101 11.4174 6.29611C11.5364 6.14121 11.6068 5.95452 11.6197 5.75961C11.6326 5.56471 11.5875 5.37035 11.49 5.2011C11.4251 5.08862 11.3388 4.99001 11.2359 4.91092C11.1329 4.83183 11.0154 4.77381 10.89 4.74017C10.7646 4.70653 10.6338 4.69793 10.5051 4.71487C10.3764 4.73181 10.2523 4.77395 10.1399 4.83889V4.83889Z"/>
<path d="M5.85921 4.83889C5.68996 4.74137 5.4956 4.69622 5.3007 4.70914C5.1058 4.72206 4.9191 4.79247 4.7642 4.91147C4.6093 5.03047 4.49317 5.19273 4.43046 5.37772C4.36776 5.56272 4.36131 5.76215 4.41193 5.95081C4.46254 6.13947 4.56795 6.30889 4.71483 6.43765C4.86172 6.56641 5.04347 6.64874 5.23714 6.67423C5.4308 6.69972 5.62767 6.66722 5.80286 6.58085C5.97806 6.49447 6.12372 6.35809 6.22142 6.18895C6.28636 6.07654 6.3285 5.95243 6.34544 5.82372C6.36238 5.69502 6.35378 5.56423 6.32014 5.43885C6.2865 5.31346 6.22848 5.19594 6.14939 5.09299C6.0703 4.99005 5.97169 4.9037 5.85921 4.83889V4.83889Z"/>
<path d="M4.15352 7.51267C3.99149 7.62208 3.86557 7.7771 3.7917 7.95811C3.71783 8.13913 3.69933 8.33799 3.73854 8.52952C3.77776 8.72105 3.87293 8.89664 4.012 9.03405C4.15106 9.17147 4.32778 9.26453 4.51977 9.30145C4.71175 9.33837 4.91038 9.31749 5.0905 9.24146C5.27061 9.16543 5.42412 9.03766 5.53157 8.87433C5.63903 8.71101 5.69561 8.51947 5.69414 8.32397C5.69268 8.12847 5.63323 7.9378 5.52334 7.7761C5.45115 7.66833 5.3583 7.57593 5.25017 7.50427C5.14204 7.43261 5.02078 7.3831 4.89339 7.3586C4.766 7.3341 4.63502 7.3351 4.50803 7.36155C4.38103 7.388 4.26054 7.43936 4.15352 7.51267V7.51267Z"/>
</svg>
<span class="tabText">illustration</span>
</button>
<button class="tabs layout" onclick="openCategory('layout')">
<svg width="25" height="24" viewBox="0 0 16 16" fill="#788290" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.85589 2.75574H3.14231C2.65267 2.75574 2.25574 3.15267 2.25574 3.64231V12.3571C2.25574 12.8467 2.65267 13.2436 3.14231 13.2436H5.85589C6.34553 13.2436 6.74246 12.8467 6.74246 12.3571V3.64231C6.74246 3.15267 6.34553 2.75574 5.85589 2.75574ZM3.14231 1.5C1.95914 1.5 1 2.45914 1 3.64231V12.3571C1 13.5402 1.95914 14.4994 3.14231 14.4994H5.85589C7.03906 14.4994 7.9982 13.5402 7.9982 12.3571V3.64231C7.9982 2.45914 7.03906 1.5 5.85589 1.5H3.14231Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8577 2.75574H11.1439C10.6542 2.75574 10.2573 3.15267 10.2573 3.6423V5.35615C10.2573 5.84579 10.6542 6.24272 11.1438 6.24272H12.8577C13.3473 6.24272 13.7443 5.84579 13.7443 5.35615V3.64231C13.7443 3.15267 13.3473 2.75574 12.8577 2.75574ZM11.1439 1.5C9.96069 1.5 9.00154 2.45914 9.00154 3.6423V5.35615C9.00154 6.53931 9.96069 7.49846 11.1438 7.49846H12.8577C14.0409 7.49846 15 6.53931 15 5.35615V3.64231C15 2.45914 14.0409 1.5 12.8577 1.5H11.1439Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8577 9.75534H11.1439C10.6542 9.75534 10.2573 10.1523 10.2573 10.6419V12.3558C10.2573 12.8454 10.6542 13.2423 11.1438 13.2423H12.8577C13.3473 13.2423 13.7443 12.8454 13.7443 12.3558V10.6419C13.7443 10.1523 13.3473 9.75534 12.8577 9.75534ZM11.1439 8.4996C9.96069 8.4996 9.00154 9.45875 9.00154 10.6419V12.3558C9.00154 13.5389 9.96069 14.4981 11.1438 14.4981H12.8577C14.0409 14.4981 15 13.5389 15 12.3558V10.6419C15 9.45875 14.0409 8.4996 12.8577 8.4996H11.1439Z"/>
</svg>
<span class="tabText">Layout</span>
</button>
</div>
</div>
<div class="body">
<div id="ux-writer" class="category">
<div class="control">
<div class="selectedTextGroup pd-bottom-15">
<div class="categoryTitleText pd-bottom-5">
<span class="title font-12-medium">Your text</span>
<span class="instructions font-12-medium"><a href="#" class="showInstructions" id="showHideInstructionCTA">Customize instructions</a></span>
</div>
<div class="selectedText font-12-medium">
<span id="selectedTextValue">
Streamline Your Product Design with Chat GPT and Figma
</span>
<span class="refreshIcon">
<a href="#" id="refreshSelection">
<svg width="16" height="16" viewBox="0 0 16 16" fill="4B9EF4" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5333 8.95333C13.3654 8.90098 13.1835 8.91715 13.0274 8.99833C12.8713 9.0795 12.7536 9.21909 12.7 9.38667C12.385 10.3497 11.771 11.187 10.9473 11.7769C10.1236 12.3669 9.13311 12.6785 8.12 12.6667C6.8669 12.6809 5.65929 12.1976 4.76198 11.3228C3.86467 10.448 3.3509 9.25306 3.33333 8C3.3509 6.74694 3.86467 5.55199 4.76198 4.67718C5.65929 3.80236 6.8669 3.31909 8.12 3.33333C9.25172 3.3306 10.3486 3.72454 11.22 4.44667L9.77333 4.20667C9.68663 4.1924 9.59797 4.19542 9.51243 4.21554C9.4269 4.23566 9.34619 4.27249 9.27494 4.32391C9.20369 4.37533 9.14331 4.44034 9.09727 4.51518C9.05123 4.59002 9.02044 4.67322 9.00667 4.76C8.9924 4.8467 8.99542 4.93537 9.01554 5.0209C9.03566 5.10643 9.07249 5.18715 9.12391 5.25839C9.17533 5.32964 9.24033 5.39002 9.31517 5.43606C9.39002 5.4821 9.47322 5.5129 9.56 5.52667L12.3867 5.99333H12.5C12.5773 5.99324 12.654 5.97971 12.7267 5.95333C12.7511 5.94406 12.7737 5.93052 12.7933 5.91333C12.8411 5.89556 12.8861 5.87085 12.9267 5.84L12.9867 5.76667C12.9867 5.73333 13.0467 5.70667 13.0733 5.66667C13.1 5.62667 13.0733 5.6 13.1067 5.57333C13.1251 5.53451 13.1407 5.4944 13.1533 5.45333L13.6533 2.78667C13.67 2.69912 13.6692 2.60915 13.6511 2.5219C13.6329 2.43465 13.5978 2.35183 13.5476 2.27816C13.4975 2.20449 13.4333 2.14143 13.3588 2.09255C13.2843 2.04368 13.2009 2.00997 13.1133 1.99333C13.0258 1.9767 12.9358 1.97747 12.8486 1.99561C12.7613 2.01374 12.6785 2.04889 12.6048 2.09903C12.4561 2.2003 12.3536 2.35652 12.32 2.53333L12.14 3.5C11.024 2.53283 9.59679 2.00029 8.12 2C6.51329 1.98578 4.96656 2.60953 3.8192 3.73439C2.67185 4.85924 2.01759 6.39332 2 8C2.01759 9.60668 2.67185 11.1408 3.8192 12.2656C4.96656 13.3905 6.51329 14.0142 8.12 14C9.42209 14.02 10.6962 13.6214 11.7548 12.8629C12.8133 12.1044 13.6003 11.0261 14 9.78667C14.0253 9.70131 14.0332 9.61176 14.0233 9.52329C14.0135 9.43482 13.986 9.34922 13.9425 9.27155C13.899 9.19388 13.8404 9.12571 13.7701 9.07105C13.6998 9.0164 13.6193 8.97637 13.5333 8.95333Z"/>
</svg>
</a>
</span>
</div>
</div>
<div class="instructionsGroup" id="instructionGroupID">
<div class="instructionsTitleText pd-bottom-5">
<span class="title font-12-medium">Instructions</span>
</div>
<div class="instructionInput">
<textarea id="instructionInputBox" name="instructionInputBox" rows="2" cols="50" class="inputBox">Suggest 5 text alternatives. Keep the tone neutral. Limit each suggestion to 12 words.</textarea>
</div>
</div>
<div class="generateCTAGroup">
<button class="generateCTA mainCTA" id="generateCTA">Generate Copy</button>
</div>
</div>
<div class="suggestion" id="suggestionContainer">
<div class="suggTitleText pd-bottom-5">
<span class="title font-12-medium">Suggestion</span>
</div>
<div class="suggList">
<div class="singleSugg font-12-medium" id="suggestionBox">
</div>
</div>
</div>
</div>
<div id="icons" class="category" style="display:none">
<div class="control">
<div class="selectedTextGroup pd-bottom-15" id="imagePromptGroupID">
<div class="instructionsTitleText pd-bottom-5">
<span class="title font-12-medium">Enter your prompt</span>
</div>
<div class="instructionInput">
<textarea id="imagePromptInputBox" name="imagePromptInputBox" rows="2" cols="50" class="inputBox" placeholder="Enter your prompt here">Cat playing with fire</textarea>
</div>
</div>
<div class="generateCTAGroup">
<button class="generateCTA mainCTA" id="imageGenerateCTA">Generate Image</button>
</div>
</div>
<div class="suggestion" id="imageSuggestionContainer">
<div class="suggList">
<div class="singleSugg font-12-medium" id="imageRenderBox">
</div>
</div>
</div>
</div>
<div id="layout" class="category" style="display:none">
<h2 class="font-18-medium comingSoon">Layout Assistant<br>Coming Soon</h2>
<p></p>
</div>
</div>
<div id="errorMessage"></div>
</div>
<style>
.container{
background: #ffffff;
margin : -8px;
font-family: 'Inter';
line-height: 1.4 !important;
}
img {
width: 20px;
}
.tabs-container{
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
}
.tabs{
display: flex;
width: 100%;
border-radius: 0px;
background: #fff;
border : 0px solid;
justify-content: center;
border-bottom: 2px solid #D9DDE1;
padding: 12px;
cursor: pointer;
align-items: center;
color: #788290;
}
.tabs > svg {
width: 18px;
}
.tabs.active {
border-bottom: 2px solid #3892E3;
color: #333;
}
.tabs.active > svg {
fill: #333333;
}
#ux-writer .selectedText {
padding:10px;
background-color: #E5E5E5;
border: 1px solid #D9DDE1;
font-size: 12px;
font-weight: 500;
border-radius: 2px;
display: flex;
justify-content: space-between;
}
.font-12-medium{
font-size: 12px;
font-weight: 500;
}
.font-18-medium{
font-size: 18px;
font-weight: 500;
}
.inputBox{
padding: 10px;
width: 100%;
border: 1px solid #D9DDE1;
border-radius: 2px;
outline:none;
font-family: 'Inter' !important;
font-size: 12px;
line-height: 1.4 !important;
}
.inputBox:hover{
border: 1px solid #c3c7cb;
}
.inputBox:focus{
border: 1px solid #333;
}
#ux-writer .categoryTitleText{
display: flex;
justify-content: space-between;
}
.pd-bottom-5{
padding-bottom: 5px;
}
.pd-bottom-15{
padding-bottom: 15px;
}
#ux-writer .categoryTitleText a{
color: #4B9EF4;
text-decoration: none;
}
#ux-writer .categoryTitleText a:hover{
color: #438edf;
}
.mainCTA{
background-color: #4B9EF4;
color: #fff;
border: 0px solid;
padding: 12px;
cursor: pointer;
width: 100%;
border-radius: 4px;
font-weight: 600;
font-size: 12px;
}
.mainCTA:hover{
background-color: #438edf;
color: #fff;
}
.control{
padding: 30px;
}
.suggestion{
padding: 30px;
border-top: 1px solid #D9DDE1;
}
.singleSugg{
padding: 10px;
border: 1px solid #D9DDE1;
border-radius: 2px;
font-weight: 400;
}
#instructionGroupID{
display: none;
padding-bottom: 10px;
}
.loader{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#selectedTextValue{
font-style: italic;
}
.comingSoon{
text-align: center;
padding-top: 100px;
}
.tabText{
padding-left: 8px;
font-weight: 600;
}
.shine {
background: #e2e5e8;
background-image: linear-gradient(to right, #e2e5e8 0%, #f6f7f8 30%, #e2e5e8 60%, #e2e5e8 100%);
background-repeat: no-repeat;
background-size: 800px 104px;
margin-top: 5px;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
lines {
height: 10px;
width: 100%;
border-radius: 2px;
}
.imageloader lines {
height: 100px;
}
@keyframes placeholderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
#refreshSelection svg {
fill: #333;
}
.generatedImage{
width: 100%;
}
#imageSuggestionContainer{
display: none;
}
</style>
<script>
document.getElementById("instructionGroupID").style.display = "none";
document.getElementById("suggestionContainer").style.display = "none";
document.getElementById("imageSuggestionContainer").style.display = "none";
document.getElementById("showHideInstructionCTA").onclick = () => {
let div = document.getElementById("instructionGroupID");
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
document.getElementById("refreshSelection").onclick = () => {
parent.postMessage({ pluginMessage: { type: 'updateSelection' } }, '*');
}
function openCategory(categoryName) {
var categories = document.querySelectorAll(".category");
var tabs = document.querySelectorAll(".tabs");
categories.forEach(category => {
category.style.display = "none";
});
tabs.forEach(tab => {
tab.classList.remove("active");
});
document.querySelectorAll("."+categoryName)[0].classList.add("active");
document.querySelectorAll("#"+categoryName)[0].style.display = "block";
}
document.getElementById("generateCTA").onclick = () => {
const instruction = document.getElementById("instructionInputBox");
const instructionValue = instruction.value;
var selectedText = document.getElementById("selectedTextValue");
var selectedTextValue = selectedText.textContent.trim();
var promptMessage = selectedTextValue + " " + instructionValue;
parent.postMessage({ pluginMessage: { promptMessage } }, '*');
}
document.getElementById("imageGenerateCTA").onclick = () => {
const prompt = document.getElementById("imagePromptInputBox");
const imagePromptValue = prompt.value;
parent.postMessage({ pluginMessage: { imagePromptValue } }, '*');
}
onmessage = (event) => {
if (event.data.pluginMessage.selectedTextValueUI) {
let selectedText = event.data.pluginMessage.selectedTextValueUI;
document.getElementById("selectedTextValue").innerText = selectedText;
} else if (event.data.error) {
let errorMessage = event.data.error;
document.getElementById("errorMessage").innerText = errorMessage;
}
if (event.data.pluginMessage.loaderShow) {
if(event.data.pluginMessage.loaderShow === "show"){
document.getElementById("suggestionContainer").style.display = "block";
document.getElementById("suggestionBox").innerHTML = '<div class="loader"><lines class="shine"></lines><lines class="shine"></lines><lines class="shine"></lines><lines class="shine"></lines><lines class="shine"></lines></div>';
}
else if(event.data.pluginMessage.loaderShow === "hide"){
}
} else if (event.data.error) {
let errorMessage = event.data.error;
document.getElementById("errorMessage").innerText = errorMessage;
}
if (event.data.pluginMessage.imageRenderLoader) {
if(event.data.pluginMessage.imageRenderLoader === "show"){
document.getElementById("imageSuggestionContainer").style.display = "block";
document.getElementById("imageRenderBox").innerHTML = '<div class="imageloader loader"><lines class="shine"></div>';
}
else if(event.data.pluginMessage.imageRenderLoader === "hide"){
}
} else if (event.data.error) {
let errorMessage = event.data.error;
document.getElementById("errorMessage").innerText = errorMessage;
}
if (event.data.pluginMessage.newSuggestion) {
let suggestion = event.data.pluginMessage.newSuggestion;
let formattedResponse = suggestion.replace(/\n/g, "<br>");
document.getElementById("suggestionBox").innerHTML = formattedResponse;
} else if (event.data.error) {
let errorMessage = event.data.error;
document.getElementById("errorMessage").innerText = errorMessage;
}
if (event.data.pluginMessage.imageOutput) {
let imageURL = event.data.pluginMessage.imageOutput;
document.getElementById("imageRenderBox").innerHTML = '<img src="'+imageURL+'" class="generatedImage">';
} else if (event.data.error) {
let errorMessage = event.data.error;
document.getElementById("errorMessage").innerText = errorMessage;
}
};
</script>