webs-sdk 0.18.90 → 0.18.91
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ArtGenerator.d.ts +6 -1
- package/dist/components/ArtGenerator.d.ts.map +1 -1
- package/dist/components/ArtGenerator.js +273 -99
- package/dist/components/ArtGenerator.js.map +1 -1
- package/dist/components/GifsIa.d.ts +5 -1
- package/dist/components/GifsIa.d.ts.map +1 -1
- package/dist/components/GifsIa.js +196 -94
- package/dist/components/GifsIa.js.map +1 -1
- package/dist/components/for-you/hooks/useArtGenerator.d.ts.map +1 -1
- package/dist/components/for-you/hooks/useArtGenerator.js +11 -7
- package/dist/components/for-you/hooks/useArtGenerator.js.map +1 -1
- package/dist/components/for-you/hooks/useGifsIa.js +9 -12
- package/dist/components/for-you/hooks/useGifsIa.js.map +1 -1
- package/package.json +1 -1
|
@@ -27,7 +27,12 @@ const ART_GENERATOR_CSS = `
|
|
|
27
27
|
grid-template-columns: repeat(2, 1fr);
|
|
28
28
|
gap: 16px;
|
|
29
29
|
}
|
|
30
|
-
@media (min-width:
|
|
30
|
+
@media (min-width: 640px) {
|
|
31
|
+
.artgen-collections-grid {
|
|
32
|
+
grid-template-columns: repeat(3, 1fr);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
@media (min-width: 1024px) {
|
|
31
36
|
.artgen-collections-grid {
|
|
32
37
|
grid-template-columns: repeat(4, 1fr);
|
|
33
38
|
}
|
|
@@ -37,16 +42,28 @@ const ART_GENERATOR_CSS = `
|
|
|
37
42
|
grid-template-columns: repeat(6, 1fr);
|
|
38
43
|
}
|
|
39
44
|
}
|
|
40
|
-
.artgen-carousel-
|
|
45
|
+
.artgen-carousel-scroll {
|
|
41
46
|
display: flex;
|
|
42
47
|
gap: 12px;
|
|
43
|
-
overflow:
|
|
48
|
+
overflow-x: auto;
|
|
49
|
+
scroll-snap-type: x mandatory;
|
|
50
|
+
-webkit-overflow-scrolling: touch;
|
|
51
|
+
scrollbar-width: none;
|
|
52
|
+
-ms-overflow-style: none;
|
|
53
|
+
}
|
|
54
|
+
.artgen-carousel-scroll::-webkit-scrollbar {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
.artgen-carousel-item {
|
|
58
|
+
scroll-snap-align: start;
|
|
59
|
+
flex: 0 0 calc(50% - 6px);
|
|
60
|
+
min-width: 0;
|
|
44
61
|
}
|
|
45
62
|
`;
|
|
46
63
|
exports.DEFAULT_ART_STYLES = [
|
|
47
64
|
{
|
|
48
65
|
key: 'no-style',
|
|
49
|
-
label: '
|
|
66
|
+
label: 'No style',
|
|
50
67
|
url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/Preview_NOStyle_AI2.png',
|
|
51
68
|
prompt: '',
|
|
52
69
|
negative_prompt: '',
|
|
@@ -162,23 +179,24 @@ const defaultTheme = {
|
|
|
162
179
|
disabledColor: '#4A4A6A',
|
|
163
180
|
};
|
|
164
181
|
const defaultTexts = {
|
|
165
|
-
createTabLabel: '
|
|
166
|
-
collectionsTabLabel: '
|
|
167
|
-
examplesTitle: '
|
|
168
|
-
tryButton: '
|
|
169
|
-
promptTitle: 'Describe
|
|
170
|
-
promptTooltip: '
|
|
171
|
-
promptPlaceholder: '
|
|
172
|
-
createButton: '
|
|
173
|
-
generatingButton: '
|
|
174
|
-
resultTitle: '
|
|
175
|
-
emptyResultText: '
|
|
176
|
-
startAgainButton: '
|
|
177
|
-
downloadButton: '
|
|
178
|
-
stylesTitle: '
|
|
179
|
-
loadingText: '
|
|
180
|
-
errorText: '
|
|
181
|
-
queueText: '
|
|
182
|
+
createTabLabel: 'Create',
|
|
183
|
+
collectionsTabLabel: 'Collections',
|
|
184
|
+
examplesTitle: 'Try these examples',
|
|
185
|
+
tryButton: 'Try',
|
|
186
|
+
promptTitle: 'Describe the desired image',
|
|
187
|
+
promptTooltip: 'The more detailed the description, the better the result.',
|
|
188
|
+
promptPlaceholder: 'A mysterious enchanted forest at night, illuminated by moonlight...',
|
|
189
|
+
createButton: 'Create',
|
|
190
|
+
generatingButton: 'Generating...',
|
|
191
|
+
resultTitle: 'Your result',
|
|
192
|
+
emptyResultText: 'Your generated image will appear here',
|
|
193
|
+
startAgainButton: 'Start again',
|
|
194
|
+
downloadButton: 'Download',
|
|
195
|
+
stylesTitle: 'Choose an artistic style',
|
|
196
|
+
loadingText: 'Loading...',
|
|
197
|
+
errorText: 'An error occurred. Please try again.',
|
|
198
|
+
queueText: 'In queue',
|
|
199
|
+
recommendedLabel: 'Recommended',
|
|
182
200
|
};
|
|
183
201
|
function buildFinalPrompt(userPrompt, style) {
|
|
184
202
|
if (!style.prompt)
|
|
@@ -220,7 +238,7 @@ function ArtGenerator({ config, styles = exports.DEFAULT_ART_STYLES, examples: e
|
|
|
220
238
|
apiBaseUrl: config.apiBaseUrl,
|
|
221
239
|
tags,
|
|
222
240
|
contents: config.examplesContents,
|
|
223
|
-
locale: config.locale || '
|
|
241
|
+
locale: config.locale || 'en',
|
|
224
242
|
website_id: config.website_id,
|
|
225
243
|
});
|
|
226
244
|
const mapped = items
|
|
@@ -236,7 +254,7 @@ function ArtGenerator({ config, styles = exports.DEFAULT_ART_STYLES, examples: e
|
|
|
236
254
|
setDynamicExamples(mapped);
|
|
237
255
|
}
|
|
238
256
|
catch (err) {
|
|
239
|
-
console.error('[ArtGenerator] Error
|
|
257
|
+
console.error('[ArtGenerator] Error loading examples:', err);
|
|
240
258
|
}
|
|
241
259
|
finally {
|
|
242
260
|
setLoadingExamples(false);
|
|
@@ -258,50 +276,114 @@ function ArtGenerator({ config, styles = exports.DEFAULT_ART_STYLES, examples: e
|
|
|
258
276
|
setLoadingCollections(true);
|
|
259
277
|
try {
|
|
260
278
|
const apiUrl = (_a = config.apiUrl) !== null && _a !== void 0 ? _a : (config.apiBaseUrl ? `${config.apiBaseUrl}/api/get_contents_by_tags` : '/api/get_contents_by_tags');
|
|
279
|
+
if (config.collectionsContents && config.collectionsContents.length > 0) {
|
|
280
|
+
const categories = [];
|
|
281
|
+
for (const preset of config.collectionsContents) {
|
|
282
|
+
const items = await (0, forYouFetch_1.forYouFetch)({
|
|
283
|
+
apiUrl,
|
|
284
|
+
apiBaseUrl: config.apiBaseUrl,
|
|
285
|
+
contents: [preset],
|
|
286
|
+
locale: config.locale || 'en',
|
|
287
|
+
website_id: config.website_id,
|
|
288
|
+
});
|
|
289
|
+
const mapped = items.map((item, idx) => {
|
|
290
|
+
var _a, _b, _c;
|
|
291
|
+
return ({
|
|
292
|
+
id: (_a = item.id) !== null && _a !== void 0 ? _a : idx,
|
|
293
|
+
image: item.thumbnail || ((_b = item.images) === null || _b === void 0 ? void 0 : _b.img1) || item.imageUrl || '',
|
|
294
|
+
title: item.title || '',
|
|
295
|
+
description: ((_c = item.metadata) === null || _c === void 0 ? void 0 : _c.prompt) || item.description || '',
|
|
296
|
+
});
|
|
297
|
+
}).filter((i) => i.image);
|
|
298
|
+
if (mapped.length === 0)
|
|
299
|
+
continue;
|
|
300
|
+
let categoryLabel;
|
|
301
|
+
const presetAny = preset;
|
|
302
|
+
if (presetAny.tags && Array.isArray(presetAny.tags) && presetAny.tags.length > 0) {
|
|
303
|
+
const tag = presetAny.tags[0];
|
|
304
|
+
categoryLabel = tag.charAt(0).toUpperCase() + tag.slice(1).replace(/-/g, ' ');
|
|
305
|
+
}
|
|
306
|
+
else {
|
|
307
|
+
categoryLabel = t.recommendedLabel;
|
|
308
|
+
}
|
|
309
|
+
const existing = categories.find(c => c.label === categoryLabel);
|
|
310
|
+
if (existing) {
|
|
311
|
+
existing.items.push(...mapped);
|
|
312
|
+
}
|
|
313
|
+
else {
|
|
314
|
+
categories.push({ label: categoryLabel, items: mapped });
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
setDynamicCollections(categories);
|
|
318
|
+
return;
|
|
319
|
+
}
|
|
261
320
|
const tags = config.collectionsTags
|
|
262
321
|
? (Array.isArray(config.collectionsTags) ? config.collectionsTags : [config.collectionsTags])
|
|
263
322
|
: undefined;
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
323
|
+
if (tags && tags.length > 1) {
|
|
324
|
+
const categories = [];
|
|
325
|
+
for (const tag of tags) {
|
|
326
|
+
const items = await (0, forYouFetch_1.forYouFetch)({
|
|
327
|
+
apiUrl,
|
|
328
|
+
apiBaseUrl: config.apiBaseUrl,
|
|
329
|
+
tags: [tag],
|
|
330
|
+
locale: config.locale || 'en',
|
|
331
|
+
website_id: config.website_id,
|
|
332
|
+
});
|
|
333
|
+
const mapped = items.map((item, idx) => {
|
|
334
|
+
var _a, _b, _c;
|
|
335
|
+
return ({
|
|
336
|
+
id: (_a = item.id) !== null && _a !== void 0 ? _a : idx,
|
|
337
|
+
image: item.thumbnail || ((_b = item.images) === null || _b === void 0 ? void 0 : _b.img1) || item.imageUrl || '',
|
|
338
|
+
title: item.title || '',
|
|
339
|
+
description: ((_c = item.metadata) === null || _c === void 0 ? void 0 : _c.prompt) || item.description || '',
|
|
340
|
+
});
|
|
341
|
+
}).filter((i) => i.image);
|
|
342
|
+
if (mapped.length > 0) {
|
|
343
|
+
const label = tag.charAt(0).toUpperCase() + tag.slice(1).replace(/-/g, ' ');
|
|
344
|
+
categories.push({ label, items: mapped });
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
setDynamicCollections(categories);
|
|
348
|
+
}
|
|
349
|
+
else {
|
|
350
|
+
const items = await (0, forYouFetch_1.forYouFetch)({
|
|
351
|
+
apiUrl,
|
|
352
|
+
apiBaseUrl: config.apiBaseUrl,
|
|
353
|
+
tags,
|
|
354
|
+
locale: config.locale || 'en',
|
|
355
|
+
website_id: config.website_id,
|
|
279
356
|
});
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
357
|
+
const mapped = items.map((item, idx) => {
|
|
358
|
+
var _a, _b, _c;
|
|
359
|
+
return ({
|
|
360
|
+
id: (_a = item.id) !== null && _a !== void 0 ? _a : idx,
|
|
361
|
+
image: item.thumbnail || ((_b = item.images) === null || _b === void 0 ? void 0 : _b.img1) || item.imageUrl || '',
|
|
362
|
+
title: item.title || '',
|
|
363
|
+
description: ((_c = item.metadata) === null || _c === void 0 ? void 0 : _c.prompt) || item.description || '',
|
|
364
|
+
});
|
|
365
|
+
}).filter((i) => i.image);
|
|
366
|
+
if (mapped.length > 0) {
|
|
367
|
+
const label = (tags === null || tags === void 0 ? void 0 : tags[0])
|
|
368
|
+
? tags[0].charAt(0).toUpperCase() + tags[0].slice(1).replace(/-/g, ' ')
|
|
369
|
+
: t.recommendedLabel;
|
|
370
|
+
setDynamicCollections([{ label, items: mapped }]);
|
|
371
|
+
}
|
|
372
|
+
}
|
|
291
373
|
}
|
|
292
374
|
catch (err) {
|
|
293
|
-
console.error('[ArtGenerator] Error
|
|
375
|
+
console.error('[ArtGenerator] Error loading collections:', err);
|
|
294
376
|
}
|
|
295
377
|
finally {
|
|
296
378
|
setLoadingCollections(false);
|
|
297
379
|
}
|
|
298
380
|
};
|
|
299
381
|
load();
|
|
300
|
-
}, [config.apiUrl, config.apiBaseUrl, config.collectionsTags]);
|
|
382
|
+
}, [config.apiUrl, config.apiBaseUrl, config.collectionsTags, config.collectionsContents]);
|
|
301
383
|
const collections = collectionsProp && collectionsProp.length > 0 ? collectionsProp : dynamicCollections;
|
|
302
384
|
const [prompt, setPrompt] = (0, react_1.useState)('');
|
|
303
385
|
const [selectedStyle, setSelectedStyle] = (0, react_1.useState)(styles[0]);
|
|
304
|
-
const
|
|
386
|
+
const carouselRef = (0, react_1.useRef)(null);
|
|
305
387
|
const [isGenerating, setIsGenerating] = (0, react_1.useState)(false);
|
|
306
388
|
const [generatedImageUrl, setGeneratedImageUrl] = (0, react_1.useState)(null);
|
|
307
389
|
const [progressPercent, setProgressPercent] = (0, react_1.useState)(null);
|
|
@@ -309,10 +391,19 @@ function ArtGenerator({ config, styles = exports.DEFAULT_ART_STYLES, examples: e
|
|
|
309
391
|
const [genError, setGenError] = (0, react_1.useState)(null);
|
|
310
392
|
const pollRef = (0, react_1.useRef)(null);
|
|
311
393
|
const timeoutRef = (0, react_1.useRef)(null);
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
394
|
+
(0, react_1.useEffect)(() => {
|
|
395
|
+
const el = carouselRef.current;
|
|
396
|
+
if (!el)
|
|
397
|
+
return;
|
|
398
|
+
const onWheel = (e) => {
|
|
399
|
+
if (Math.abs(e.deltaX) > Math.abs(e.deltaY))
|
|
400
|
+
return;
|
|
401
|
+
e.preventDefault();
|
|
402
|
+
el.scrollLeft += e.deltaY;
|
|
403
|
+
};
|
|
404
|
+
el.addEventListener('wheel', onWheel, { passive: false });
|
|
405
|
+
return () => el.removeEventListener('wheel', onWheel);
|
|
406
|
+
}, []);
|
|
316
407
|
const clearPolls = (0, react_1.useCallback)(() => {
|
|
317
408
|
if (pollRef.current) {
|
|
318
409
|
clearInterval(pollRef.current);
|
|
@@ -334,7 +425,7 @@ function ArtGenerator({ config, styles = exports.DEFAULT_ART_STYLES, examples: e
|
|
|
334
425
|
setPrompt('');
|
|
335
426
|
};
|
|
336
427
|
const handleCreate = async () => {
|
|
337
|
-
var _a, _b, _c;
|
|
428
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
338
429
|
if (!prompt.trim() || isGenerating)
|
|
339
430
|
return;
|
|
340
431
|
clearPolls();
|
|
@@ -345,42 +436,65 @@ function ArtGenerator({ config, styles = exports.DEFAULT_ART_STYLES, examples: e
|
|
|
345
436
|
setGenError(null);
|
|
346
437
|
const finalPrompt = buildFinalPrompt(prompt, selectedStyle);
|
|
347
438
|
const negativePrompt = selectedStyle.negative_prompt;
|
|
348
|
-
const base = config.generateBaseUrl.replace(/\/$/, '');
|
|
349
439
|
const pollInterval = (_a = config.pollInterval) !== null && _a !== void 0 ? _a : 3000;
|
|
350
440
|
const maxPollTime = (_b = config.maxPollTime) !== null && _b !== void 0 ? _b : 120000;
|
|
441
|
+
const generateUrl = (_c = config.generateApiUrl) !== null && _c !== void 0 ? _c : (config.generateBaseUrl ? `${config.generateBaseUrl.replace(/\/$/, '')}/get_art_generation` : null);
|
|
442
|
+
if (!generateUrl) {
|
|
443
|
+
setGenError(t.errorText);
|
|
444
|
+
setIsGenerating(false);
|
|
445
|
+
return;
|
|
446
|
+
}
|
|
351
447
|
try {
|
|
352
|
-
const genRes = await fetch(
|
|
448
|
+
const genRes = await fetch(generateUrl, {
|
|
353
449
|
method: 'POST',
|
|
354
450
|
headers: { 'Content-Type': 'application/json' },
|
|
355
451
|
body: JSON.stringify(Object.assign(Object.assign(Object.assign({ prompt: finalPrompt, negative_prompt: negativePrompt }, (config.userId && { us_id: config.userId })), (config.userLogin && { us_login: config.userLogin })), (config.wid && { wid: config.wid }))),
|
|
356
452
|
});
|
|
357
453
|
if (!genRes.ok)
|
|
358
|
-
throw new Error(`
|
|
454
|
+
throw new Error(`Generation error: ${genRes.status}`);
|
|
359
455
|
const genData = await genRes.json();
|
|
360
|
-
console.log('[ArtGenerator]
|
|
361
|
-
|
|
456
|
+
console.log('[ArtGenerator] generate response:', JSON.stringify(genData));
|
|
457
|
+
if ((genData === null || genData === void 0 ? void 0 : genData.success) === 0 || (genData === null || genData === void 0 ? void 0 : genData.success) === false) {
|
|
458
|
+
throw new Error((genData === null || genData === void 0 ? void 0 : genData.msg) || (genData === null || genData === void 0 ? void 0 : genData.error) || 'Generation failed');
|
|
459
|
+
}
|
|
460
|
+
const jobId = ((_d = genData === null || genData === void 0 ? void 0 : genData.data) === null || _d === void 0 ? void 0 : _d.md5) ||
|
|
461
|
+
((_e = genData === null || genData === void 0 ? void 0 : genData.data) === null || _e === void 0 ? void 0 : _e.request_id) ||
|
|
462
|
+
((_f = genData === null || genData === void 0 ? void 0 : genData.data) === null || _f === void 0 ? void 0 : _f.job_id) ||
|
|
463
|
+
((_g = genData === null || genData === void 0 ? void 0 : genData.data) === null || _g === void 0 ? void 0 : _g.id) ||
|
|
464
|
+
(genData === null || genData === void 0 ? void 0 : genData.md5) ||
|
|
465
|
+
(genData === null || genData === void 0 ? void 0 : genData.request_id) ||
|
|
466
|
+
(genData === null || genData === void 0 ? void 0 : genData.job_id) ||
|
|
467
|
+
(genData === null || genData === void 0 ? void 0 : genData.id);
|
|
468
|
+
console.log('[ArtGenerator] jobId extracted:', jobId);
|
|
362
469
|
if (!jobId)
|
|
363
|
-
throw new Error(
|
|
470
|
+
throw new Error(`No job ID received. Response: ${JSON.stringify(genData)}`);
|
|
364
471
|
timeoutRef.current = setTimeout(() => {
|
|
365
472
|
clearPolls();
|
|
366
473
|
setIsGenerating(false);
|
|
367
474
|
setGenError(t.errorText);
|
|
368
475
|
onError === null || onError === void 0 ? void 0 : onError(t.errorText);
|
|
369
476
|
}, maxPollTime);
|
|
477
|
+
const base = (_j = (_h = config.generateBaseUrl) === null || _h === void 0 ? void 0 : _h.replace(/\/$/, '')) !== null && _j !== void 0 ? _j : '';
|
|
370
478
|
const poll = async () => {
|
|
371
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
479
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
372
480
|
try {
|
|
373
|
-
const
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
481
|
+
const queueUrl = (_a = config.queueApiUrl) !== null && _a !== void 0 ? _a : (base ? `${base}/get_queue_position` : null);
|
|
482
|
+
if (queueUrl) {
|
|
483
|
+
const queueRes = await fetch(queueUrl, {
|
|
484
|
+
method: 'POST',
|
|
485
|
+
headers: { 'Content-Type': 'application/json' },
|
|
486
|
+
body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
|
|
487
|
+
});
|
|
488
|
+
if (queueRes.ok) {
|
|
489
|
+
const queueData = await queueRes.json();
|
|
490
|
+
const pos = (_d = (_c = (_b = queueData === null || queueData === void 0 ? void 0 : queueData.data) === null || _b === void 0 ? void 0 : _b.position) !== null && _c !== void 0 ? _c : queueData === null || queueData === void 0 ? void 0 : queueData.position) !== null && _d !== void 0 ? _d : null;
|
|
491
|
+
setQueuePosition(pos);
|
|
492
|
+
}
|
|
382
493
|
}
|
|
383
|
-
const
|
|
494
|
+
const progressUrl = (_e = config.progressApiUrl) !== null && _e !== void 0 ? _e : (base ? `${base}/get_arg_pct` : null);
|
|
495
|
+
if (!progressUrl)
|
|
496
|
+
return;
|
|
497
|
+
const pctRes = await fetch(progressUrl, {
|
|
384
498
|
method: 'POST',
|
|
385
499
|
headers: { 'Content-Type': 'application/json' },
|
|
386
500
|
body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
|
|
@@ -388,23 +502,24 @@ function ArtGenerator({ config, styles = exports.DEFAULT_ART_STYLES, examples: e
|
|
|
388
502
|
if (!pctRes.ok)
|
|
389
503
|
return;
|
|
390
504
|
const pctData = await pctRes.json();
|
|
391
|
-
const pct = (
|
|
505
|
+
const pct = (_h = (_g = (_f = pctData === null || pctData === void 0 ? void 0 : pctData.data) === null || _f === void 0 ? void 0 : _f.pct) !== null && _g !== void 0 ? _g : pctData === null || pctData === void 0 ? void 0 : pctData.pct) !== null && _h !== void 0 ? _h : 0;
|
|
392
506
|
setProgressPercent(pct);
|
|
393
|
-
console.log('[ArtGenerator] progress:', pct);
|
|
394
507
|
if (pct >= 100) {
|
|
395
508
|
clearPolls();
|
|
396
|
-
const
|
|
509
|
+
const resultUrl = (_j = config.resultApiUrl) !== null && _j !== void 0 ? _j : (base ? `${base}/get_art_job` : null);
|
|
510
|
+
if (!resultUrl)
|
|
511
|
+
throw new Error('No result URL configured');
|
|
512
|
+
const jobRes = await fetch(resultUrl, {
|
|
397
513
|
method: 'POST',
|
|
398
514
|
headers: { 'Content-Type': 'application/json' },
|
|
399
515
|
body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
|
|
400
516
|
});
|
|
401
517
|
if (!jobRes.ok)
|
|
402
|
-
throw new Error('Error
|
|
518
|
+
throw new Error('Error fetching final image');
|
|
403
519
|
const jobData = await jobRes.json();
|
|
404
|
-
|
|
405
|
-
const imageUrl = ((_g = jobData === null || jobData === void 0 ? void 0 : jobData.data) === null || _g === void 0 ? void 0 : _g.url) || (jobData === null || jobData === void 0 ? void 0 : jobData.url) || (jobData === null || jobData === void 0 ? void 0 : jobData.image) || ((_h = jobData === null || jobData === void 0 ? void 0 : jobData.data) === null || _h === void 0 ? void 0 : _h.image);
|
|
520
|
+
const imageUrl = ((_k = jobData === null || jobData === void 0 ? void 0 : jobData.data) === null || _k === void 0 ? void 0 : _k.url) || (jobData === null || jobData === void 0 ? void 0 : jobData.url) || (jobData === null || jobData === void 0 ? void 0 : jobData.image) || ((_l = jobData === null || jobData === void 0 ? void 0 : jobData.data) === null || _l === void 0 ? void 0 : _l.image);
|
|
406
521
|
if (!imageUrl)
|
|
407
|
-
throw new Error('No
|
|
522
|
+
throw new Error('No image URL received');
|
|
408
523
|
setGeneratedImageUrl(imageUrl);
|
|
409
524
|
setProgressPercent(100);
|
|
410
525
|
setIsGenerating(false);
|
|
@@ -412,7 +527,7 @@ function ArtGenerator({ config, styles = exports.DEFAULT_ART_STYLES, examples: e
|
|
|
412
527
|
}
|
|
413
528
|
}
|
|
414
529
|
catch (err) {
|
|
415
|
-
console.error('[ArtGenerator]
|
|
530
|
+
console.error('[ArtGenerator] Polling error:', err);
|
|
416
531
|
}
|
|
417
532
|
};
|
|
418
533
|
poll();
|
|
@@ -462,22 +577,81 @@ function ArtGenerator({ config, styles = exports.DEFAULT_ART_STYLES, examples: e
|
|
|
462
577
|
transition: 'width 0.3s ease',
|
|
463
578
|
} }) })] }));
|
|
464
579
|
};
|
|
465
|
-
const renderCreateTab = () => ((0, jsx_runtime_1.jsxs)("div", { className: "artgen-grid", children: [(0, jsx_runtime_1.jsxs)("div", { style: { padding: '24px', borderRight: `1px solid ${th.borderColor}`, display: 'flex', flexDirection: 'column', gap: '24px' }, children: [(loadingExamples || examples.length > 0) && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '16px', fontWeight: 700, color: th.textColor, margin: '0 0 12px 0' }, children: t.examplesTitle }), loadingExamples ? ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '13px' }, children: t.loadingText })) : ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("
|
|
580
|
+
const renderCreateTab = () => ((0, jsx_runtime_1.jsxs)("div", { className: "artgen-grid", children: [(0, jsx_runtime_1.jsxs)("div", { style: { padding: '24px', borderRight: `1px solid ${th.borderColor}`, display: 'flex', flexDirection: 'column', gap: '24px' }, children: [(loadingExamples || examples.length > 0) && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '16px', fontWeight: 700, color: th.textColor, margin: '0 0 12px 0' }, children: t.examplesTitle }), loadingExamples ? ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '13px' }, children: t.loadingText })) : ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => { if (carouselRef.current)
|
|
581
|
+
carouselRef.current.scrollBy({ left: -260, behavior: 'smooth' }); }, style: {
|
|
582
|
+
position: 'absolute', left: '4px', top: '40%', transform: 'translateY(-50%)',
|
|
583
|
+
zIndex: 10, width: '32px', height: '32px', borderRadius: '50%', border: 'none',
|
|
584
|
+
backgroundColor: `${th.primaryColor}dd`, color: '#FFFFFF',
|
|
585
|
+
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
586
|
+
cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.5)',
|
|
587
|
+
transition: 'background-color 0.2s',
|
|
588
|
+
}, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = th.primaryColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = `${th.primaryColor}dd`; }, children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("polyline", { points: "15 18 9 12 15 6" }) }) }), (0, jsx_runtime_1.jsx)("div", { ref: carouselRef, style: {
|
|
589
|
+
display: 'flex',
|
|
590
|
+
flexDirection: 'row',
|
|
591
|
+
gap: '12px',
|
|
592
|
+
overflowX: 'auto',
|
|
593
|
+
overflowY: 'hidden',
|
|
594
|
+
scrollSnapType: 'x mandatory',
|
|
595
|
+
WebkitOverflowScrolling: 'touch',
|
|
596
|
+
scrollbarWidth: 'none',
|
|
597
|
+
msOverflowStyle: 'none',
|
|
598
|
+
width: '100%',
|
|
599
|
+
}, children: examples.map((ex) => ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
600
|
+
flexShrink: 0,
|
|
601
|
+
width: 'calc(50% - 6px)',
|
|
602
|
+
scrollSnapAlign: 'start',
|
|
603
|
+
}, children: [(0, jsx_runtime_1.jsx)("div", { style: { borderRadius: '8px', overflow: 'hidden', marginBottom: '8px' }, children: (0, jsx_runtime_1.jsx)("img", { src: ex.image, alt: ex.description, style: { width: '100%', height: '140px', objectFit: 'cover', display: 'block' } }) }), (0, jsx_runtime_1.jsx)("p", { style: { fontSize: '12px', color: th.textSecondaryColor, margin: '0 0 8px 0', lineHeight: 1.4, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical' }, children: ex.description }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setPrompt(ex.description), style: {
|
|
466
604
|
width: '100%', padding: '6px 12px', borderRadius: '20px', border: `1px solid ${th.primaryColor}`,
|
|
467
605
|
backgroundColor: 'transparent', color: th.primaryColor, fontSize: '12px', fontWeight: 600,
|
|
468
606
|
cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px',
|
|
469
|
-
}, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), t.tryButton] })] }, ex.id))) }), (0, jsx_runtime_1.
|
|
607
|
+
}, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), t.tryButton] })] }, ex.id))) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => { if (carouselRef.current)
|
|
608
|
+
carouselRef.current.scrollBy({ left: 260, behavior: 'smooth' }); }, style: {
|
|
609
|
+
position: 'absolute', right: '4px', top: '40%', transform: 'translateY(-50%)',
|
|
610
|
+
zIndex: 10, width: '32px', height: '32px', borderRadius: '50%', border: 'none',
|
|
611
|
+
backgroundColor: `${th.primaryColor}dd`, color: '#FFFFFF',
|
|
612
|
+
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
613
|
+
cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.5)',
|
|
614
|
+
transition: 'background-color 0.2s',
|
|
615
|
+
}, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = th.primaryColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = `${th.primaryColor}dd`; }, children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("polyline", { points: "9 18 15 12 9 6" }) }) })] }))] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '16px', fontWeight: 700, color: th.textColor, margin: '0 0 12px 0' }, children: t.stylesTitle }), (0, jsx_runtime_1.jsx)("div", { className: "artgen-styles-grid", children: styles.map((style) => {
|
|
470
616
|
const isActive = selectedStyle.key === style.key;
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
617
|
+
const isNoStyle = style.key === 'no-style';
|
|
618
|
+
return ((0, jsx_runtime_1.jsx)("button", { onClick: () => setSelectedStyle(style), title: style.label, style: {
|
|
619
|
+
padding: 0,
|
|
620
|
+
border: `2px solid ${isActive ? th.primaryColor : th.borderColor}`,
|
|
621
|
+
borderRadius: '8px',
|
|
622
|
+
overflow: 'hidden',
|
|
623
|
+
cursor: 'pointer',
|
|
624
|
+
backgroundColor: 'transparent',
|
|
474
625
|
transition: 'border-color 0.2s',
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
626
|
+
position: 'relative',
|
|
627
|
+
}, children: isNoStyle ? ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
628
|
+
width: '100%',
|
|
629
|
+
aspectRatio: '1',
|
|
630
|
+
display: 'flex',
|
|
631
|
+
alignItems: 'center',
|
|
632
|
+
justifyContent: 'center',
|
|
633
|
+
backgroundColor: isActive ? `${th.primaryColor}22` : 'rgba(255,255,255,0.06)',
|
|
634
|
+
}, children: (0, jsx_runtime_1.jsxs)("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", stroke: isActive ? th.primaryColor : th.textSecondaryColor, strokeWidth: "1.5", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })] }) })) : ((0, jsx_runtime_1.jsx)("img", { src: style.url, alt: style.label, style: { width: '100%', aspectRatio: '1', objectFit: 'cover', display: 'block' } })) }, style.key));
|
|
635
|
+
}) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: '24px', display: 'flex', flexDirection: 'column', gap: '20px' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '16px', fontWeight: 700, color: th.textColor, margin: 0 }, children: t.promptTitle }), (0, jsx_runtime_1.jsx)("span", { title: t.promptTooltip, style: { width: '18px', height: '18px', borderRadius: '50%', border: `1px solid ${th.textSecondaryColor}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '11px', color: th.textSecondaryColor, cursor: 'help', flexShrink: 0 }, children: "i" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("textarea", { value: prompt, onChange: (e) => {
|
|
636
|
+
setPrompt(e.target.value);
|
|
637
|
+
e.target.style.height = 'auto';
|
|
638
|
+
e.target.style.height = `${e.target.scrollHeight}px`;
|
|
639
|
+
}, placeholder: t.promptPlaceholder, disabled: isGenerating, rows: 4, style: {
|
|
640
|
+
width: '100%',
|
|
641
|
+
padding: '12px',
|
|
642
|
+
paddingRight: '100px',
|
|
643
|
+
borderRadius: '8px',
|
|
644
|
+
border: `1px solid ${th.borderColor}`,
|
|
645
|
+
backgroundColor: th.cardBackground,
|
|
646
|
+
color: th.textColor,
|
|
647
|
+
fontSize: '14px',
|
|
648
|
+
resize: 'none',
|
|
649
|
+
outline: 'none',
|
|
650
|
+
lineHeight: 1.5,
|
|
651
|
+
boxSizing: 'border-box',
|
|
480
652
|
opacity: isGenerating ? 0.6 : 1,
|
|
653
|
+
overflowY: 'hidden',
|
|
654
|
+
minHeight: '100px',
|
|
481
655
|
} }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCreate, disabled: !prompt.trim() || isGenerating, style: {
|
|
482
656
|
position: 'absolute', right: '8px', bottom: '8px',
|
|
483
657
|
padding: '8px 20px', borderRadius: '20px', border: 'none',
|
|
@@ -487,11 +661,11 @@ function ArtGenerator({ config, styles = exports.DEFAULT_ART_STYLES, examples: e
|
|
|
487
661
|
transition: 'background-color 0.2s',
|
|
488
662
|
}, onMouseEnter: (e) => { if (prompt.trim() && !isGenerating)
|
|
489
663
|
e.currentTarget.style.backgroundColor = th.primaryHoverColor; }, onMouseLeave: (e) => { if (prompt.trim() && !isGenerating)
|
|
490
|
-
e.currentTarget.style.backgroundColor = th.primaryColor; }, children: isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { animation: 'spin 1s linear infinite' }, children: [(0, jsx_runtime_1.jsx)("polyline", { points: "23 4 23 10 17 10" }), (0, jsx_runtime_1.jsx)("polyline", { points: "1 20 1 14 7 14" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })] }), t.generatingButton] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) }), t.createButton] })) })] }), isGenerating && renderProgressBar()] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '16px', fontWeight: 700, color: th.textColor, margin: '0 0 12px 0' }, children: t.resultTitle }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
664
|
+
e.currentTarget.style.backgroundColor = th.primaryColor; }, children: isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { animation: 'artgen-spin 1s linear infinite' }, children: [(0, jsx_runtime_1.jsx)("polyline", { points: "23 4 23 10 17 10" }), (0, jsx_runtime_1.jsx)("polyline", { points: "1 20 1 14 7 14" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })] }), t.generatingButton] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) }), t.createButton] })) })] }), isGenerating && renderProgressBar()] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '16px', fontWeight: 700, color: th.textColor, margin: '0 0 12px 0' }, children: t.resultTitle }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
491
665
|
minHeight: '320px', borderRadius: '12px', border: `1px solid ${th.borderColor}`,
|
|
492
666
|
backgroundColor: th.cardBackground, overflow: 'hidden', position: 'relative',
|
|
493
667
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
494
|
-
}, children: genError ? ((0, jsx_runtime_1.jsx)("p", { style: { color: '#F87171', fontSize: '14px', textAlign: 'center', padding: '24px' }, children: genError })) : generatedImageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: generatedImageUrl, alt: "
|
|
668
|
+
}, children: genError ? ((0, jsx_runtime_1.jsx)("p", { style: { color: '#F87171', fontSize: '14px', textAlign: 'center', padding: '24px' }, children: genError })) : generatedImageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: generatedImageUrl, alt: "Generated result", style: { width: '100%', height: 'auto', display: 'block' } })) : isGenerating ? ((0, jsx_runtime_1.jsxs)("div", { style: { textAlign: 'center', color: th.textSecondaryColor, padding: '24px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '48px', height: '48px', border: `3px solid ${th.borderColor}`, borderTop: `3px solid ${th.primaryColor}`, borderRadius: '50%', margin: '0 auto 16px', animation: 'artgen-spin 1s linear infinite' } }), (0, jsx_runtime_1.jsx)("p", { style: { margin: 0, fontSize: '14px' }, children: t.generatingButton })] })) : ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '14px', textAlign: 'center', padding: '24px' }, children: t.emptyResultText })) }), generatedImageUrl && !isGenerating && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '12px', marginTop: '12px', justifyContent: 'flex-end' }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleStartAgain, style: {
|
|
495
669
|
padding: '10px 20px', borderRadius: '20px', border: `1px solid ${th.borderColor}`,
|
|
496
670
|
backgroundColor: 'transparent', color: th.textColor, fontSize: '14px', fontWeight: 600,
|
|
497
671
|
cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px',
|
|
@@ -500,14 +674,14 @@ function ArtGenerator({ config, styles = exports.DEFAULT_ART_STYLES, examples: e
|
|
|
500
674
|
backgroundColor: th.primaryColor, color: '#FFFFFF', fontSize: '14px', fontWeight: 600,
|
|
501
675
|
cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px',
|
|
502
676
|
}, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = th.primaryHoverColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = th.primaryColor; }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), (0, jsx_runtime_1.jsx)("polyline", { points: "7 10 12 15 17 10" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] }), t.downloadButton] })] }))] })] })] }));
|
|
503
|
-
const renderCollectionsTab = () => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px' }, children: loadingCollections ? ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '14px' }, children: t.loadingText })) : collections.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '14px' }, children: t.emptyResultText })) : (collections.map((cat, catIdx) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '32px' }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '18px', fontWeight: 700, color: th.textColor, margin: '0 0 16px 0' }, children: cat.label }), (0, jsx_runtime_1.jsx)("div", { className: "artgen-collections-grid", children: cat.items.map((item) => ((0, jsx_runtime_1.jsxs)("div", { style: { borderRadius: '8px', overflow: 'hidden', backgroundColor: th.cardBackground, border: `1px solid ${th.borderColor}` }, children: [(0, jsx_runtime_1.jsx)("img", { src: item.image, alt: item.title || '', style: { width: '100%', aspectRatio: '3/4', objectFit: 'cover', display: 'block' } }),
|
|
677
|
+
const renderCollectionsTab = () => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px' }, children: loadingCollections ? ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '14px' }, children: t.loadingText })) : collections.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '14px' }, children: t.emptyResultText })) : (collections.map((cat, catIdx) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '32px' }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '18px', fontWeight: 700, color: th.textColor, margin: '0 0 16px 0' }, children: cat.label }), (0, jsx_runtime_1.jsx)("div", { className: "artgen-collections-grid", children: cat.items.map((item) => ((0, jsx_runtime_1.jsxs)("div", { style: { borderRadius: '8px', overflow: 'hidden', backgroundColor: th.cardBackground, border: `1px solid ${th.borderColor}` }, children: [(0, jsx_runtime_1.jsx)("img", { src: item.image, alt: item.title || '', style: { width: '100%', aspectRatio: '3/4', objectFit: 'cover', display: 'block' } }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: '8px' }, children: [item.title && ((0, jsx_runtime_1.jsx)("p", { style: { margin: '0 0 6px', fontSize: '12px', color: th.textSecondaryColor, lineHeight: 1.4, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }, children: item.title })), (0, jsx_runtime_1.jsxs)("button", { onClick: () => { setPrompt(item.description || item.title || ''); setActiveTab('create'); }, style: {
|
|
504
678
|
width: '100%', padding: '6px', borderRadius: '16px', border: `1px solid ${th.primaryColor}`,
|
|
505
679
|
backgroundColor: 'transparent', color: th.primaryColor, fontSize: '12px', fontWeight: 600,
|
|
506
680
|
cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px',
|
|
507
|
-
}, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), t.tryButton] })] })
|
|
508
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: { backgroundColor: th.backgroundColor, borderRadius: '12px', overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)("style", { children: `@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '8px', padding: '16px 24px', borderBottom: `1px solid ${th.borderColor}` }, children: [
|
|
509
|
-
{ id: 'create', label: t.createTabLabel
|
|
510
|
-
{ id: 'collections', label: t.collectionsTabLabel
|
|
681
|
+
}, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), t.tryButton] })] })] }, item.id))) })] }, catIdx)))) }));
|
|
682
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: { backgroundColor: th.backgroundColor, borderRadius: '12px', overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)("style", { children: `@keyframes artgen-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '8px', padding: '16px 24px', borderBottom: `1px solid ${th.borderColor}` }, children: [
|
|
683
|
+
{ id: 'create', label: t.createTabLabel },
|
|
684
|
+
{ id: 'collections', label: t.collectionsTabLabel },
|
|
511
685
|
].map(tab => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setActiveTab(tab.id), style: {
|
|
512
686
|
padding: '8px 20px', borderRadius: '20px',
|
|
513
687
|
border: activeTab === tab.id ? 'none' : `1px solid ${th.borderColor}`,
|