webs-sdk 0.19.75 → 0.19.77
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 +2 -2
- package/dist/components/ArtGenerator.js.map +1 -1
- package/dist/components/AvatarAI.d.ts +6 -1
- package/dist/components/AvatarAI.d.ts.map +1 -1
- package/dist/components/AvatarAI.js +160 -160
- package/dist/components/AvatarAI.js.map +1 -1
- package/dist/components/GifsIa.d.ts +6 -1
- package/dist/components/GifsIa.d.ts.map +1 -1
- package/dist/components/GifsIa.js +2 -2
- package/dist/components/GifsIa.js.map +1 -1
- package/dist/components/SpinningWheel/SpinningWheel.d.ts +1 -1
- package/dist/components/SpinningWheel/SpinningWheel.d.ts.map +1 -1
- package/dist/components/SpinningWheel/SpinningWheel.js +25 -12
- package/dist/components/SpinningWheel/SpinningWheel.js.map +1 -1
- package/dist/components/SpinningWheel/index.d.ts +1 -1
- package/dist/components/SpinningWheel/index.d.ts.map +1 -1
- package/dist/components/SpinningWheel/index.js.map +1 -1
- package/dist/components/SpinningWheel/types.d.ts +13 -0
- package/dist/components/SpinningWheel/types.d.ts.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/types/disclaimer.d.ts +6 -0
- package/dist/types/disclaimer.d.ts.map +1 -0
- package/dist/types/disclaimer.js +3 -0
- package/dist/types/disclaimer.js.map +1 -0
- package/package.json +1 -1
|
@@ -126,7 +126,7 @@ const defaultTexts = {
|
|
|
126
126
|
startingText: 'Starting generation...',
|
|
127
127
|
preparingText: 'Preparing your avatar...',
|
|
128
128
|
};
|
|
129
|
-
function AvatarAI({ styles: stylesProp = [], stylesTag, apiBaseUrl, locale, moods = defaultMoods, theme = {}, texts = {}, config, onGenerationComplete, onError, }) {
|
|
129
|
+
function AvatarAI({ styles: stylesProp = [], stylesTag, apiBaseUrl, locale, moods = defaultMoods, theme = {}, texts = {}, config, onGenerationComplete, onError, disclaimerAiCfg, }) {
|
|
130
130
|
var _a, _b;
|
|
131
131
|
const mergedTheme = Object.assign(Object.assign({}, defaultTheme), theme);
|
|
132
132
|
const mergedTexts = Object.assign(Object.assign({}, defaultTexts), texts);
|
|
@@ -388,166 +388,166 @@ function AvatarAI({ styles: stylesProp = [], stylesTag, apiBaseUrl, locale, mood
|
|
|
388
388
|
};
|
|
389
389
|
const isProcessing = isGenerating || (!!generatedResult && !generatedImageUrl);
|
|
390
390
|
const canGenerate = !!uploadedImage && !!selectedStyle && !isProcessing && !!config;
|
|
391
|
-
return ((0, jsx_runtime_1.
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
transition: 'all 0.2s',
|
|
483
|
-
}, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedMood === mood.id ? 'scale(1.1)' : 'scale(1)'; }, children: (0, jsx_runtime_1.jsx)("img", { src: mood.icon, alt: mood.name, style: {
|
|
484
|
-
width: '100%', height: '100%', objectFit: 'contain',
|
|
485
|
-
filter: selectedMood === mood.id ? 'brightness(0) invert(1)' : 'none',
|
|
486
|
-
} }) }, mood.id))) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: '1 1 140px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" }) }), (0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '18px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 }, children: mergedTexts.backgroundTitle })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleColorPickerClick, title: "Select color", style: {
|
|
487
|
-
position: 'relative',
|
|
488
|
-
width: '48px', height: '48px', borderRadius: '50%',
|
|
489
|
-
border: `2px solid ${mergedTheme.primaryColor}44`, backgroundColor: mergedTheme.cardBackground, cursor: 'pointer',
|
|
490
|
-
display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '8px',
|
|
491
|
-
outline: selectedBgColor && selectedBgColor !== 'transparent' ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
|
|
492
|
-
transform: selectedBgColor && selectedBgColor !== 'transparent' ? 'scale(1.1)' : 'scale(1)',
|
|
391
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: { width: '100%', backgroundColor: mergedTheme.backgroundColor }, children: [(0, jsx_runtime_1.jsx)("div", { style: { maxWidth: '1280px', margin: '0 auto' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
392
|
+
backgroundColor: mergedTheme.cardBackground,
|
|
393
|
+
borderRadius: '8px',
|
|
394
|
+
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
|
|
395
|
+
padding: '32px',
|
|
396
|
+
}, children: [(0, jsx_runtime_1.jsx)("h2", { style: { fontSize: 'clamp(24px, 4vw, 36px)', fontWeight: 700, color: mergedTheme.textColor, marginBottom: '32px' }, children: mergedTexts.styleTitle }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px', flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsxs)("div", { ref: resultRef, style: {
|
|
397
|
+
flex: '1 1 300px',
|
|
398
|
+
minHeight: '500px',
|
|
399
|
+
border: `2px dashed ${generatedImageUrl ? mergedTheme.primaryColor : mergedTheme.borderColor}`,
|
|
400
|
+
borderRadius: '8px',
|
|
401
|
+
display: 'flex',
|
|
402
|
+
flexDirection: 'column',
|
|
403
|
+
alignItems: 'center',
|
|
404
|
+
justifyContent: 'center',
|
|
405
|
+
position: 'relative',
|
|
406
|
+
padding: '32px',
|
|
407
|
+
backgroundColor: mergedTheme.cardBackground || mergedTheme.backgroundColor || '#1F1F2E',
|
|
408
|
+
transition: 'border-color 0.3s',
|
|
409
|
+
}, children: [(0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, style: { display: 'none' } }), uploadedImage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: generatedImageUrl && !isComparing ? generatedImageUrl : uploadedImage, alt: generatedImageUrl && !isComparing ? 'Generated avatar' : 'Uploaded photo', style: { width: '100%', objectFit: 'contain', maxHeight: '450px', borderRadius: '8px' } }), generatedImageUrl && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
410
|
+
position: 'absolute', top: '16px', left: '16px',
|
|
411
|
+
backgroundColor: isComparing ? 'rgba(0,0,0,0.6)' : mergedTheme.primaryColor,
|
|
412
|
+
color: 'white', fontSize: '11px', fontWeight: 700,
|
|
413
|
+
padding: '4px 10px', borderRadius: '9999px',
|
|
414
|
+
transition: 'background-color 0.2s',
|
|
415
|
+
}, children: isComparing ? 'ORIGINAL' : 'RESULT' })), isProcessing && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.45)', borderRadius: '8px', zIndex: 10 } }), (0, jsx_runtime_1.jsx)("style", { children: `.avatarai-scan-line { background: linear-gradient(90deg, transparent, ${mergedTheme.primaryColor || '#FF5500'}, transparent); box-shadow: 0 0 8px 2px ${mergedTheme.primaryColor || '#FF5500'}80; }` }), (0, jsx_runtime_1.jsx)("div", { className: "avatarai-scan-line" }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
416
|
+
position: 'absolute', inset: 0,
|
|
417
|
+
display: 'flex', flexDirection: 'column',
|
|
418
|
+
alignItems: 'center', justifyContent: 'center',
|
|
419
|
+
zIndex: 12,
|
|
420
|
+
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
421
|
+
width: '64px', height: '64px',
|
|
422
|
+
border: '4px solid rgba(255,255,255,0.3)',
|
|
423
|
+
borderTopColor: mergedTheme.primaryColor || '#FF5500',
|
|
424
|
+
borderRadius: '50%',
|
|
425
|
+
animation: 'avatarai-spin 1s linear infinite',
|
|
426
|
+
marginBottom: '16px',
|
|
427
|
+
} }), (0, jsx_runtime_1.jsx)("p", { style: {
|
|
428
|
+
color: 'white', fontSize: '16px', fontWeight: 700,
|
|
429
|
+
margin: '0 0 8px 0',
|
|
430
|
+
animation: 'avatarai-pulse 1.5s ease-in-out infinite',
|
|
431
|
+
}, children: progressPercent !== null
|
|
432
|
+
? `${mergedTexts.progressText}: ${progressPercent}%`
|
|
433
|
+
: isGenerating
|
|
434
|
+
? mergedTexts.startingText
|
|
435
|
+
: mergedTexts.preparingText }), progressPercent !== null && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
436
|
+
width: '60%', height: '6px',
|
|
437
|
+
backgroundColor: 'rgba(255,255,255,0.3)',
|
|
438
|
+
borderRadius: '3px', overflow: 'hidden',
|
|
439
|
+
}, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
440
|
+
width: `${progressPercent}%`,
|
|
441
|
+
height: '100%',
|
|
442
|
+
backgroundColor: mergedTheme.primaryColor || '#FF5500',
|
|
443
|
+
borderRadius: '3px',
|
|
444
|
+
transition: 'width 0.5s ease',
|
|
445
|
+
} }) }))] })] })), !generatedImageUrl && !isProcessing && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRemoveImage, style: {
|
|
446
|
+
position: 'absolute', top: '16px', right: '16px',
|
|
447
|
+
width: '48px', height: '48px', backgroundColor: '#FF6B6B',
|
|
448
|
+
borderRadius: '50%', border: 'none', cursor: 'pointer',
|
|
449
|
+
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
450
|
+
boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
|
|
451
|
+
}, children: (0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: "white", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), generatedImageUrl && ((0, jsx_runtime_1.jsxs)("button", { onMouseDown: () => setIsComparing(true), onMouseUp: () => setIsComparing(false), onMouseLeave: () => setIsComparing(false), onTouchStart: () => setIsComparing(true), onTouchEnd: () => setIsComparing(false), style: {
|
|
452
|
+
position: 'absolute', bottom: '16px', left: '50%', transform: 'translateX(-50%)',
|
|
453
|
+
backgroundColor: 'rgba(0,0,0,0.65)', color: 'white',
|
|
454
|
+
fontWeight: 700, fontSize: '13px', padding: '10px 20px',
|
|
455
|
+
borderRadius: '9999px', border: 'none', cursor: 'pointer',
|
|
456
|
+
display: 'flex', alignItems: 'center', gap: '8px',
|
|
457
|
+
backdropFilter: 'blur(4px)',
|
|
458
|
+
userSelect: 'none',
|
|
459
|
+
whiteSpace: 'nowrap',
|
|
460
|
+
}, children: [(0, jsx_runtime_1.jsxs)("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '16px', height: '16px' }, children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }), "Hold to compare"] }))] })) : ((0, jsx_runtime_1.jsxs)("button", { onClick: handleUploadClick, style: {
|
|
461
|
+
backgroundColor: mergedTheme.primaryColor, color: 'white',
|
|
462
|
+
fontWeight: 700, fontSize: '18px', padding: '16px 32px',
|
|
463
|
+
borderRadius: '9999px', border: 'none', cursor: 'pointer',
|
|
464
|
+
display: 'flex', alignItems: 'center', gap: '12px',
|
|
465
|
+
}, onMouseEnter: e => { e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), mergedTexts.uploadButton] }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: '1 1 300px', display: 'flex', flexDirection: 'column', gap: '24px' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" }) }), (0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '20px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 }, children: mergedTexts.styleSectionTitle })] }), (0, jsx_runtime_1.jsx)("div", { className: "avatarai-styles-grid", style: { maxHeight: '480px', overflowY: 'auto', padding: '4px' }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px' }, children: styles.map((style) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setSelectedStyle(style.id), title: style.name, style: {
|
|
466
|
+
position: 'relative', aspectRatio: '1 / 1', borderRadius: '12px',
|
|
467
|
+
overflow: 'hidden', border: 'none', padding: 0, cursor: 'pointer',
|
|
468
|
+
outline: selectedStyle === style.id ? `3px solid ${mergedTheme.primaryColor}` : '3px solid transparent',
|
|
469
|
+
outlineOffset: '2px',
|
|
470
|
+
transform: selectedStyle === style.id ? 'scale(1.03)' : 'scale(1)',
|
|
471
|
+
transition: 'transform 0.2s, outline-color 0.2s',
|
|
472
|
+
}, onMouseEnter: e => { if (selectedStyle !== style.id)
|
|
473
|
+
e.currentTarget.style.transform = 'scale(1.03)'; }, onMouseLeave: e => { if (selectedStyle !== style.id)
|
|
474
|
+
e.currentTarget.style.transform = 'scale(1)'; }, children: (0, jsx_runtime_1.jsx)("img", { src: style.image, alt: style.name, style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } }) }, style.id))) }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '24px', flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: '1 1 140px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), (0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '18px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 }, children: mergedTexts.moodsTitle })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '8px' }, children: moods.map((mood) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setSelectedMood(mood.id), title: mood.name, style: {
|
|
475
|
+
width: '40px', height: '40px', borderRadius: '50%',
|
|
476
|
+
border: selectedMood === mood.id ? 'none' : `2px solid ${mergedTheme.primaryColor}`,
|
|
477
|
+
backgroundColor: selectedMood === mood.id ? mergedTheme.primaryColor : (mergedTheme.cardBackground || 'transparent'),
|
|
478
|
+
padding: '8px', cursor: 'pointer',
|
|
479
|
+
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
480
|
+
transform: selectedMood === mood.id ? 'scale(1.1)' : 'scale(1)',
|
|
481
|
+
outline: selectedMood === mood.id ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
|
|
493
482
|
transition: 'all 0.2s',
|
|
494
|
-
}, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform =
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
483
|
+
}, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedMood === mood.id ? 'scale(1.1)' : 'scale(1)'; }, children: (0, jsx_runtime_1.jsx)("img", { src: mood.icon, alt: mood.name, style: {
|
|
484
|
+
width: '100%', height: '100%', objectFit: 'contain',
|
|
485
|
+
filter: selectedMood === mood.id ? 'brightness(0) invert(1)' : 'none',
|
|
486
|
+
} }) }, mood.id))) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: '1 1 140px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" }) }), (0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '18px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 }, children: mergedTexts.backgroundTitle })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleColorPickerClick, title: "Select color", style: {
|
|
487
|
+
position: 'relative',
|
|
488
|
+
width: '48px', height: '48px', borderRadius: '50%',
|
|
489
|
+
border: `2px solid ${mergedTheme.primaryColor}44`, backgroundColor: mergedTheme.cardBackground, cursor: 'pointer',
|
|
490
|
+
display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '8px',
|
|
491
|
+
outline: selectedBgColor && selectedBgColor !== 'transparent' ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
|
|
492
|
+
transform: selectedBgColor && selectedBgColor !== 'transparent' ? 'scale(1.1)' : 'scale(1)',
|
|
493
|
+
transition: 'all 0.2s',
|
|
494
|
+
}, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedBgColor && selectedBgColor !== 'transparent' ? 'scale(1.1)' : 'scale(1)'; }, children: [(0, jsx_runtime_1.jsx)("input", { ref: colorPickerRef, type: "color", onChange: handleColorChange, style: {
|
|
495
|
+
position: 'absolute',
|
|
496
|
+
top: '50%',
|
|
497
|
+
left: '50%',
|
|
498
|
+
transform: 'translate(-50%, -50%)',
|
|
499
|
+
width: '1px',
|
|
500
|
+
height: '1px',
|
|
501
|
+
opacity: 0,
|
|
502
|
+
pointerEvents: 'none',
|
|
503
|
+
border: 'none',
|
|
504
|
+
padding: 0,
|
|
505
|
+
} }), (0, jsx_runtime_1.jsx)("img", { src: "https://d2obs2d3lmpnq9.cloudfront.net/ADS/cmp%20color%20picker/ColorPicker_CONsombra%201%20%281%29.svg", alt: "Color Picker", style: { width: '32px', height: '32px', objectFit: 'contain' } })] }), recentColors.map((color, index) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleRecentColorClick(color), title: `Recent color ${index + 1}`, style: {
|
|
506
|
+
width: '48px', height: '48px', borderRadius: '50%',
|
|
507
|
+
border: selectedBgColor === color ? `2px solid ${mergedTheme.primaryColor}` : '2px solid #d1d5db',
|
|
508
|
+
backgroundColor: color, cursor: 'pointer',
|
|
509
|
+
outline: selectedBgColor === color ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
|
|
510
|
+
transform: selectedBgColor === color ? 'scale(1.1)' : 'scale(1)',
|
|
511
|
+
transition: 'all 0.2s',
|
|
512
|
+
}, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedBgColor === color ? 'scale(1.1)' : 'scale(1)'; } }, index))), (0, jsx_runtime_1.jsx)("button", { onClick: handleTransparentClick, title: "Transparent", style: {
|
|
513
|
+
width: '48px', height: '48px', borderRadius: '50%',
|
|
514
|
+
border: selectedBgColor === 'transparent' ? `2px solid ${mergedTheme.primaryColor}` : '2px solid #d1d5db',
|
|
515
|
+
backgroundImage: 'repeating-linear-gradient(45deg, #ddd 0, #ddd 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, #ddd 0, #ddd 1px, transparent 0, transparent 50%)',
|
|
516
|
+
backgroundSize: '10px 10px', backgroundColor: '#fff', cursor: 'pointer',
|
|
517
|
+
outline: selectedBgColor === 'transparent' ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
|
|
518
|
+
transform: selectedBgColor === 'transparent' ? 'scale(1.1)' : 'scale(1)',
|
|
519
|
+
transition: 'all 0.2s',
|
|
520
|
+
}, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedBgColor === 'transparent' ? 'scale(1.1)' : 'scale(1)'; } })] })] })] })] })] }), error && ((0, jsx_runtime_1.jsx)("div", { style: { padding: '12px', backgroundColor: `${mergedTheme.cardBackground}`, border: `1px solid rgba(255,80,80,0.4)`, borderRadius: '8px', marginTop: '16px' }, children: (0, jsx_runtime_1.jsx)("p", { style: { color: '#f87171', fontSize: '14px', margin: 0 }, children: error }) })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', marginTop: '32px' }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleStartAgain, disabled: !generatedResult, style: {
|
|
521
|
+
backgroundColor: generatedResult ? mergedTheme.primaryColor : `${mergedTheme.cardBackground}`,
|
|
522
|
+
color: generatedResult ? 'white' : `${mergedTheme.textColor}66`,
|
|
523
|
+
fontWeight: 700, fontSize: '18px', padding: '16px 32px',
|
|
524
|
+
borderRadius: '9999px', border: `1px solid ${generatedResult ? 'transparent' : `${mergedTheme.textColor}22`}`,
|
|
525
|
+
cursor: generatedResult ? 'pointer' : 'not-allowed',
|
|
526
|
+
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
|
|
527
|
+
opacity: generatedResult ? 1 : 0.5,
|
|
528
|
+
}, onMouseEnter: e => { if (generatedResult)
|
|
529
|
+
e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { if (generatedResult)
|
|
530
|
+
e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), mergedTexts.startAgainButton] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleGenerate, disabled: !canGenerate, style: {
|
|
531
|
+
backgroundColor: canGenerate ? mergedTheme.primaryColor : `${mergedTheme.cardBackground}`,
|
|
532
|
+
color: canGenerate ? 'white' : `${mergedTheme.textColor}66`,
|
|
533
|
+
fontWeight: 700, fontSize: '18px', padding: '16px 32px',
|
|
534
|
+
borderRadius: '9999px', border: `1px solid ${canGenerate ? 'transparent' : `${mergedTheme.textColor}22`}`,
|
|
535
|
+
cursor: canGenerate ? 'pointer' : 'not-allowed',
|
|
536
|
+
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
|
|
537
|
+
opacity: canGenerate ? 1 : 0.5,
|
|
538
|
+
}, onMouseEnter: e => { if (canGenerate)
|
|
539
|
+
e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { if (canGenerate)
|
|
540
|
+
e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; }, children: isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { style: { width: '24px', height: '24px', animation: 'avatarai-spin 1s linear infinite' }, fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { style: { opacity: 0.25 }, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { style: { opacity: 0.75 }, fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), mergedTexts.generatingButton] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), mergedTexts.generateButton] })) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleDownload, disabled: !generatedImageUrl, style: {
|
|
541
|
+
backgroundColor: generatedImageUrl ? mergedTheme.primaryColor : `${mergedTheme.cardBackground}`,
|
|
542
|
+
color: generatedImageUrl ? 'white' : `${mergedTheme.textColor}66`,
|
|
543
|
+
fontWeight: 700, fontSize: '18px', padding: '16px 32px',
|
|
544
|
+
borderRadius: '9999px', border: `1px solid ${generatedImageUrl ? 'transparent' : `${mergedTheme.textColor}22`}`,
|
|
545
|
+
cursor: generatedImageUrl ? 'pointer' : 'not-allowed',
|
|
546
|
+
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
|
|
547
|
+
opacity: generatedImageUrl ? 1 : 0.5,
|
|
548
|
+
}, onMouseEnter: e => { if (generatedImageUrl)
|
|
549
|
+
e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { if (generatedImageUrl)
|
|
550
|
+
e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; }, children: [(0, jsx_runtime_1.jsx)("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' }, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" }) }), mergedTexts.downloadButton] })] })] }) }), (disclaimerAiCfg === null || disclaimerAiCfg === void 0 ? void 0 : disclaimerAiCfg.pais_ue) === 1 && ((0, jsx_runtime_1.jsxs)("div", { style: { margin: '16px 16px 0', padding: '12px 16px', background: '#eff6ff', border: '1px solid #bfdbfe', borderRadius: 8, display: 'flex', alignItems: 'flex-start', gap: 10 }, className: disclaimerAiCfg.className, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "#2563eb", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0, marginTop: 2 }, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })] }), (0, jsx_runtime_1.jsx)("p", { style: { margin: 0, fontSize: 13, color: '#1e40af', lineHeight: 1.5 }, children: disclaimerAiCfg.text })] }))] }));
|
|
551
551
|
}
|
|
552
552
|
function AvatarAIForYouCard({ title, description, ctaText, ctaHref, desktopImage, mobileImage, imageAlt = '', imageOnRight = true, titleColor = '#001B5E', descriptionColor = '#001B5E', ctaColor = '#FF5500', ctaHoverColor = '#ff1600', backgroundColor = '#F9F9F9', paddingClass = 'py-12 md:py-16 lg:py-20', }) {
|
|
553
553
|
const effectiveMobileImage = mobileImage || desktopImage;
|