webs-sdk 0.19.7 → 0.19.9
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.map +1 -1
- package/dist/components/ArtGenerator.js +32 -27
- package/dist/components/ArtGenerator.js.map +1 -1
- package/dist/components/AvatarAI.js +1 -1
- package/dist/components/AvatarAI.js.map +1 -1
- package/dist/components/CreativeFaceSwap.d.ts +9 -1
- package/dist/components/CreativeFaceSwap.d.ts.map +1 -1
- package/dist/components/CreativeFaceSwap.js +202 -113
- package/dist/components/CreativeFaceSwap.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -13,8 +13,8 @@ const ui_1 = require("./ui");
|
|
|
13
13
|
const utils_1 = require("../libraries/utils");
|
|
14
14
|
const FACESWAP_CSS = `
|
|
15
15
|
.faceswap-layout { display: flex; flex-direction: row; align-items: stretch; }
|
|
16
|
-
.faceswap-col-left { width: 30%; min-width: 280px; background:
|
|
17
|
-
.faceswap-col-right { flex: 1; background:
|
|
16
|
+
.faceswap-col-left { width: 30%; min-width: 280px; background: var(--color-surface-base); border: 1px solid #e5e7eb; display: flex; flex-direction: column; }
|
|
17
|
+
.faceswap-col-right { flex: 1; background: var(--color-surface-base); border: 1px solid #e5e7eb; border-left: none; display: flex; flex-direction: column; }
|
|
18
18
|
.faceswap-col-right > div:first-child { flex: 0 0 auto; }
|
|
19
19
|
.faceswap-col-right > div:last-child { flex: 1; display: flex; flex-direction: column; }
|
|
20
20
|
.faceswap-col-right > div:last-child > .faceswap-result-area { flex: 1; min-height: 0; }
|
|
@@ -67,9 +67,14 @@ const defaultTexts = {
|
|
|
67
67
|
startingText: "Starting generation...",
|
|
68
68
|
preparingText: "Preparing your image...",
|
|
69
69
|
};
|
|
70
|
-
function CreativeFaceSwap({ config, examples: examplesProp = [], examplesTag, apiBaseUrl, locale, theme = {}, texts = {}, onGenerationComplete, onError, }) {
|
|
70
|
+
function CreativeFaceSwap({ config, examples: examplesProp = [], collections = [], examplesTag, apiBaseUrl, locale, theme = {}, texts = {}, onGenerationComplete, onError, }) {
|
|
71
|
+
var _a, _b, _c;
|
|
71
72
|
const mergedTheme = Object.assign(Object.assign({}, defaultTheme), theme);
|
|
72
73
|
const mergedTexts = Object.assign(Object.assign({}, defaultTexts), texts);
|
|
74
|
+
const createTabLabel = (_a = mergedTexts.createTabLabel) !== null && _a !== void 0 ? _a : "Create";
|
|
75
|
+
const collectionsTabLabel = (_b = mergedTexts.collectionsTabLabel) !== null && _b !== void 0 ? _b : "Collections";
|
|
76
|
+
const collectionsEmptyText = (_c = mergedTexts.collectionsEmptyText) !== null && _c !== void 0 ? _c : "No collections available.";
|
|
77
|
+
const hasCollections = collections.length > 0;
|
|
73
78
|
(0, react_1.useEffect)(() => {
|
|
74
79
|
const id = "faceswap-styles";
|
|
75
80
|
if (document.getElementById(id))
|
|
@@ -117,8 +122,9 @@ function CreativeFaceSwap({ config, examples: examplesProp = [], examplesTag, ap
|
|
|
117
122
|
}
|
|
118
123
|
};
|
|
119
124
|
fetchExamples();
|
|
120
|
-
}, [examplesTag, apiBaseUrl, locale]);
|
|
125
|
+
}, [examplesTag, apiBaseUrl, locale, config]);
|
|
121
126
|
const examples = examplesProp.length > 0 ? examplesProp : dynamicExamples;
|
|
127
|
+
const [activeTab, setActiveTab] = (0, react_1.useState)("create");
|
|
122
128
|
const [uploadedImage, setUploadedImage] = (0, react_1.useState)(null);
|
|
123
129
|
const [imageDimensions, setImageDimensions] = (0, react_1.useState)(null);
|
|
124
130
|
const [description, setDescription] = (0, react_1.useState)("");
|
|
@@ -152,10 +158,7 @@ function CreativeFaceSwap({ config, examples: examplesProp = [], examplesTag, ap
|
|
|
152
158
|
setUploadedImage(base64String);
|
|
153
159
|
const img = new Image();
|
|
154
160
|
img.onload = () => {
|
|
155
|
-
setImageDimensions({
|
|
156
|
-
width: img.width,
|
|
157
|
-
height: img.height,
|
|
158
|
-
});
|
|
161
|
+
setImageDimensions({ width: img.width, height: img.height });
|
|
159
162
|
console.log("Image dimensions:", img.width, "x", img.height);
|
|
160
163
|
};
|
|
161
164
|
img.src = base64String;
|
|
@@ -166,9 +169,8 @@ function CreativeFaceSwap({ config, examples: examplesProp = [], examplesTag, ap
|
|
|
166
169
|
const handleRemoveImage = () => {
|
|
167
170
|
setUploadedImage(null);
|
|
168
171
|
setImageDimensions(null);
|
|
169
|
-
if (fileInputRef.current)
|
|
172
|
+
if (fileInputRef.current)
|
|
170
173
|
fileInputRef.current.value = "";
|
|
171
|
-
}
|
|
172
174
|
};
|
|
173
175
|
const handlePrevExample = () => {
|
|
174
176
|
setCurrentExampleIndex((prev) => prev === 0 ? examples.length - 2 : prev - 2);
|
|
@@ -180,25 +182,19 @@ function CreativeFaceSwap({ config, examples: examplesProp = [], examplesTag, ap
|
|
|
180
182
|
setDescription(exampleDescription);
|
|
181
183
|
};
|
|
182
184
|
(0, react_1.useEffect)(() => {
|
|
183
|
-
if (!(generatedResult === null || generatedResult === void 0 ? void 0 : generatedResult.md5) || progressPercent === 100)
|
|
185
|
+
if (!(generatedResult === null || generatedResult === void 0 ? void 0 : generatedResult.md5) || progressPercent === 100)
|
|
184
186
|
return;
|
|
185
|
-
}
|
|
186
187
|
const checkProgress = async () => {
|
|
187
188
|
try {
|
|
188
189
|
const response = await fetch(config.apiEndpoints.progress, {
|
|
189
190
|
method: "POST",
|
|
190
|
-
headers: {
|
|
191
|
-
"Content-Type": "application/json",
|
|
192
|
-
},
|
|
191
|
+
headers: { "Content-Type": "application/json" },
|
|
193
192
|
body: JSON.stringify(Object.assign({ us_id: config.userId, us_login: config.userLogin, md5: generatedResult.md5 }, (config.wid ? { wid: config.wid } : {}))),
|
|
194
193
|
});
|
|
195
194
|
const data = await response.json();
|
|
196
195
|
if (response.ok && data.success) {
|
|
197
196
|
setProgressPercent(data.data.pct);
|
|
198
197
|
console.log("Progress:", data.data.pct + "%");
|
|
199
|
-
if (data.data.pct === 100) {
|
|
200
|
-
console.log("Progress complete! Fetching final image...");
|
|
201
|
-
}
|
|
202
198
|
}
|
|
203
199
|
}
|
|
204
200
|
catch (err) {
|
|
@@ -210,16 +206,13 @@ function CreativeFaceSwap({ config, examples: examplesProp = [], examplesTag, ap
|
|
|
210
206
|
return () => clearInterval(interval);
|
|
211
207
|
}, [generatedResult, progressPercent, config]);
|
|
212
208
|
(0, react_1.useEffect)(() => {
|
|
213
|
-
if (!(generatedResult === null || generatedResult === void 0 ? void 0 : generatedResult.md5) || progressPercent !== 100 || generatedImageUrl)
|
|
209
|
+
if (!(generatedResult === null || generatedResult === void 0 ? void 0 : generatedResult.md5) || progressPercent !== 100 || generatedImageUrl)
|
|
214
210
|
return;
|
|
215
|
-
}
|
|
216
211
|
const fetchFinalImage = async () => {
|
|
217
212
|
try {
|
|
218
213
|
const response = await fetch(config.apiEndpoints.getImage, {
|
|
219
214
|
method: "POST",
|
|
220
|
-
headers: {
|
|
221
|
-
"Content-Type": "application/json",
|
|
222
|
-
},
|
|
215
|
+
headers: { "Content-Type": "application/json" },
|
|
223
216
|
body: JSON.stringify(Object.assign({ us_id: config.userId, us_login: config.userLogin, md5: generatedResult.md5 }, (config.wid ? { wid: config.wid } : {}))),
|
|
224
217
|
});
|
|
225
218
|
const data = await response.json();
|
|
@@ -248,18 +241,15 @@ function CreativeFaceSwap({ config, examples: examplesProp = [], examplesTag, ap
|
|
|
248
241
|
]);
|
|
249
242
|
const handleCreate = async () => {
|
|
250
243
|
var _a;
|
|
251
|
-
if (!uploadedImage || !description.trim() || !imageDimensions)
|
|
244
|
+
if (!uploadedImage || !description.trim() || !imageDimensions)
|
|
252
245
|
return;
|
|
253
|
-
}
|
|
254
246
|
setIsGenerating(true);
|
|
255
247
|
setError(null);
|
|
256
248
|
setGeneratedResult(null);
|
|
257
249
|
try {
|
|
258
250
|
const response = await fetch(config.apiEndpoints.generate, {
|
|
259
251
|
method: "POST",
|
|
260
|
-
headers: {
|
|
261
|
-
"Content-Type": "application/json",
|
|
262
|
-
},
|
|
252
|
+
headers: { "Content-Type": "application/json" },
|
|
263
253
|
body: JSON.stringify(Object.assign({ us_id: config.userId, us_login: config.userLogin, prompt: description, img_data: uploadedImage, width: imageDimensions.width, height: imageDimensions.height }, (config.wid ? { wid: config.wid } : {}))),
|
|
264
254
|
});
|
|
265
255
|
const contentType = (_a = response.headers.get("content-type")) !== null && _a !== void 0 ? _a : "";
|
|
@@ -274,7 +264,6 @@ function CreativeFaceSwap({ config, examples: examplesProp = [], examplesTag, ap
|
|
|
274
264
|
}
|
|
275
265
|
setGeneratedResult(data.data);
|
|
276
266
|
console.log("Image generation started:", data.data);
|
|
277
|
-
console.log("Image dimensions used:", imageDimensions);
|
|
278
267
|
}
|
|
279
268
|
catch (err) {
|
|
280
269
|
console.error("Error creating image:", err);
|
|
@@ -317,94 +306,194 @@ function CreativeFaceSwap({ config, examples: examplesProp = [], examplesTag, ap
|
|
|
317
306
|
return text;
|
|
318
307
|
return text.substring(0, maxLength) + "...";
|
|
319
308
|
};
|
|
320
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, children: (0, jsx_runtime_1.
|
|
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
|
-
|
|
309
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, children: (0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: "1280px", margin: "0 auto" }, children: [hasCollections && ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", gap: "8px", padding: "0 0 16px 0" }, children: [
|
|
310
|
+
{ id: "create", label: createTabLabel },
|
|
311
|
+
{ id: "collections", label: collectionsTabLabel },
|
|
312
|
+
].map((tab) => {
|
|
313
|
+
var _a, _b;
|
|
314
|
+
return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab(tab.id), style: {
|
|
315
|
+
padding: "8px 20px",
|
|
316
|
+
borderRadius: "20px",
|
|
317
|
+
border: activeTab === tab.id
|
|
318
|
+
? "none"
|
|
319
|
+
: `1px solid ${mergedTheme.textColor}33`,
|
|
320
|
+
backgroundColor: activeTab === tab.id
|
|
321
|
+
? (_a = mergedTheme.primaryColor) !== null && _a !== void 0 ? _a : "#FF5500"
|
|
322
|
+
: "transparent",
|
|
323
|
+
color: activeTab === tab.id
|
|
324
|
+
? "#FFFFFF"
|
|
325
|
+
: (_b = mergedTheme.textColor) !== null && _b !== void 0 ? _b : "#001B5E",
|
|
326
|
+
fontSize: "14px",
|
|
327
|
+
fontWeight: 600,
|
|
328
|
+
cursor: "pointer",
|
|
329
|
+
transition: "all 0.2s",
|
|
330
|
+
outline: "none",
|
|
331
|
+
}, children: tab.label }, tab.id));
|
|
332
|
+
}) })), hasCollections && activeTab === "collections" && ((0, jsx_runtime_1.jsx)("div", { style: { padding: "8px 0 24px" }, children: collections.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { style: {
|
|
333
|
+
color: mergedTheme.textColor,
|
|
334
|
+
opacity: 0.5,
|
|
335
|
+
fontSize: "14px",
|
|
336
|
+
}, children: collectionsEmptyText })) : (collections.map((cat, catIdx) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "40px" }, children: [(0, jsx_runtime_1.jsx)("h3", { style: {
|
|
337
|
+
fontSize: "18px",
|
|
338
|
+
fontWeight: 700,
|
|
339
|
+
color: mergedTheme.textColor,
|
|
340
|
+
margin: "0 0 16px 0",
|
|
341
|
+
}, children: cat.label }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
342
|
+
display: "grid",
|
|
343
|
+
gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))",
|
|
344
|
+
gap: "16px",
|
|
345
|
+
}, children: cat.items.map((item) => ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
346
|
+
borderRadius: "12px",
|
|
347
|
+
overflow: "hidden",
|
|
348
|
+
cursor: "pointer",
|
|
349
|
+
transition: "transform 0.18s, box-shadow 0.18s",
|
|
350
|
+
}, onMouseEnter: (e) => {
|
|
351
|
+
e.currentTarget.style.transform = "translateY(-4px)";
|
|
352
|
+
e.currentTarget.style.boxShadow =
|
|
353
|
+
"0 8px 24px rgba(0,0,0,0.18)";
|
|
354
|
+
}, onMouseLeave: (e) => {
|
|
355
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
356
|
+
e.currentTarget.style.boxShadow = "none";
|
|
357
|
+
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
358
|
+
overflow: "hidden",
|
|
359
|
+
borderRadius: "10px 10px 0 0",
|
|
360
|
+
}, children: (0, jsx_runtime_1.jsx)("img", { src: item.image, alt: item.description, style: {
|
|
361
|
+
width: "100%",
|
|
362
|
+
aspectRatio: "3/4",
|
|
363
|
+
objectFit: "cover",
|
|
364
|
+
display: "block",
|
|
365
|
+
} }) }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: "8px 8px 10px" }, children: [(0, jsx_runtime_1.jsx)("p", { style: {
|
|
366
|
+
margin: "0 0 8px",
|
|
367
|
+
fontSize: "11px",
|
|
368
|
+
color: mergedTheme.textColor,
|
|
369
|
+
opacity: 0.7,
|
|
370
|
+
lineHeight: 1.35,
|
|
371
|
+
overflow: "hidden",
|
|
372
|
+
display: "-webkit-box",
|
|
373
|
+
WebkitLineClamp: 2,
|
|
374
|
+
WebkitBoxOrient: "vertical",
|
|
375
|
+
}, children: item.description }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
|
|
376
|
+
setDescription(item.description);
|
|
377
|
+
setActiveTab("create");
|
|
378
|
+
setTimeout(() => window.scrollTo({
|
|
379
|
+
top: 0,
|
|
380
|
+
behavior: "smooth",
|
|
381
|
+
}), 50);
|
|
382
|
+
}, style: {
|
|
383
|
+
width: "100%",
|
|
384
|
+
padding: "6px",
|
|
385
|
+
borderRadius: "16px",
|
|
386
|
+
border: `1px solid ${mergedTheme.primaryColor}`,
|
|
387
|
+
backgroundColor: "transparent",
|
|
388
|
+
color: mergedTheme.primaryColor,
|
|
389
|
+
fontSize: "12px",
|
|
390
|
+
fontWeight: 600,
|
|
391
|
+
cursor: "pointer",
|
|
392
|
+
display: "flex",
|
|
393
|
+
alignItems: "center",
|
|
394
|
+
justifyContent: "center",
|
|
395
|
+
gap: "4px",
|
|
396
|
+
}, onMouseEnter: (e) => {
|
|
397
|
+
var _a;
|
|
398
|
+
e.currentTarget.style.backgroundColor =
|
|
399
|
+
(_a = mergedTheme.primaryColor) !== null && _a !== void 0 ? _a : "#FF5500";
|
|
400
|
+
e.currentTarget.style.color = "#fff";
|
|
401
|
+
}, onMouseLeave: (e) => {
|
|
402
|
+
var _a;
|
|
403
|
+
e.currentTarget.style.backgroundColor =
|
|
404
|
+
"transparent";
|
|
405
|
+
e.currentTarget.style.color =
|
|
406
|
+
(_a = mergedTheme.primaryColor) !== null && _a !== void 0 ? _a : "#FF5500";
|
|
407
|
+
}, 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" })] }), mergedTexts.tryButton] })] })] }, item.id))) })] }, catIdx)))) })), (!hasCollections || activeTab === "create") && ((0, jsx_runtime_1.jsxs)("div", { className: "faceswap-layout", children: [(0, jsx_runtime_1.jsxs)("div", { className: "faceswap-col-left", children: [(0, jsx_runtime_1.jsxs)("div", { style: { padding: "16px 24px 24px", borderBottom: `1px solid ${mergedTheme.textColor}22` }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: mergedTheme.textColor, fontSize: "18px", fontWeight: 700, marginBottom: "16px" }, children: mergedTexts.uploadTitle }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, className: "hidden" }), (0, jsx_runtime_1.jsx)("div", { className: "relative rounded-lg p-8 mb-4 flex items-center justify-center border-2 border-dashed border-gray-300 overflow-hidden", style: { minHeight: "300px", background: "var(--neutral-10)" }, children: uploadedImage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: uploadedImage, alt: "Uploaded photo", className: "w-full h-full object-contain max-h-[300px]" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleRemoveImage, className: "absolute top-4 right-4 w-12 h-12 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center shadow-lg transition-colors", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] })) : null }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleUploadClick, className: "w-full text-white font-bold text-base px-6 py-3 rounded-full transition-colors duration-300 cursor-pointer flex items-center justify-center gap-2", style: { backgroundColor: mergedTheme.primaryColor }, onMouseEnter: (e) => {
|
|
408
|
+
e.currentTarget.style.backgroundColor =
|
|
409
|
+
mergedTheme.primaryHoverColor ||
|
|
410
|
+
mergedTheme.primaryColor ||
|
|
411
|
+
"#ff1600";
|
|
380
412
|
}, onMouseLeave: (e) => {
|
|
381
|
-
|
|
413
|
+
e.currentTarget.style.backgroundColor =
|
|
414
|
+
mergedTheme.primaryColor || "#FF5500";
|
|
415
|
+
}, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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-8l-4-4m0 0L8 8m4-4v12" }) }), uploadedImage
|
|
416
|
+
? mergedTexts.changeImageButton
|
|
417
|
+
: mergedTexts.uploadButton] })] }), examples.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-bold mb-4", style: { color: mergedTheme.textColor }, children: mergedTexts.examplesTitle }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handlePrevExample, className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 w-8 h-8 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-gray-100 transition-colors -ml-4", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-4", children: examples
|
|
418
|
+
.slice(currentExampleIndex, currentExampleIndex + 2)
|
|
419
|
+
.map((example) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "aspect-[3/4] rounded-lg overflow-hidden mb-2", style: { background: "rgba(255,255,255,0.07)" }, children: (0, jsx_runtime_1.jsx)("img", { src: example.image, alt: `Example ${example.id}`, className: "w-full h-full object-cover" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs leading-tight line-clamp-3 mb-2 min-h-[3rem]", style: { color: mergedTheme.textColor }, children: truncateText(example.description, 120) }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => handleTryExample(example.description), className: "w-full text-white font-bold text-sm px-4 py-2 rounded-full transition-colors duration-300 cursor-pointer flex items-center justify-center gap-2 mt-auto", style: {
|
|
420
|
+
backgroundColor: mergedTheme.primaryColor,
|
|
421
|
+
}, onMouseEnter: (e) => {
|
|
422
|
+
e.currentTarget.style.backgroundColor =
|
|
423
|
+
mergedTheme.primaryHoverColor ||
|
|
424
|
+
mergedTheme.primaryColor ||
|
|
425
|
+
"#ff1600";
|
|
426
|
+
}, onMouseLeave: (e) => {
|
|
427
|
+
e.currentTarget.style.backgroundColor =
|
|
428
|
+
mergedTheme.primaryColor || "#FF5500";
|
|
429
|
+
}, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 5l7 7m0 0l-7 7m7-7H3" }) }), mergedTexts.tryButton] })] }, example.id))) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleNextExample, className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 w-8 h-8 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-gray-100 transition-colors -mr-4", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center gap-2 mt-4", children: Array.from({
|
|
430
|
+
length: Math.ceil(examples.length / 2),
|
|
431
|
+
}).map((_, index) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setCurrentExampleIndex(index * 2), className: `h-2 rounded-full transition-all duration-300 ${currentExampleIndex === index * 2
|
|
432
|
+
? "w-6"
|
|
433
|
+
: "w-2 bg-gray-300 hover:bg-gray-400"}`, style: {
|
|
434
|
+
backgroundColor: currentExampleIndex === index * 2
|
|
435
|
+
? mergedTheme.primaryColor
|
|
436
|
+
: undefined,
|
|
437
|
+
} }, index))) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "faceswap-col-right", children: [(0, jsx_runtime_1.jsxs)("div", { style: { padding: "16px 24px 24px", borderBottom: `1px solid ${mergedTheme.textColor}22` }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "16px", position: "relative" }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: mergedTheme.textColor, fontSize: "18px", fontWeight: 700 }, children: mergedTexts.describeTitle }), (0, jsx_runtime_1.jsx)(ui_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(ui_1.Tooltip, { open: showTooltip, onOpenChange: setShowTooltip, children: [(0, jsx_runtime_1.jsx)(ui_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "w-5 h-5 rounded-full border-2 flex items-center justify-center text-xs font-bold transition-colors border-[var(--theme-color)] text-[var(--theme-color)] hover:bg-(--theme-color) hover:text-white", style: {
|
|
438
|
+
"--theme-color": mergedTheme.textColor || "#001B5E",
|
|
439
|
+
}, children: "i" }) }), (0, jsx_runtime_1.jsx)(ui_1.TooltipContent, { className: "mt-2 w-64 bg-white border border-gray-300 rounded-lg shadow-lg p-4 z-20 text-sm", children: (0, jsx_runtime_1.jsx)("p", { className: "leading-relaxed whitespace-pre-line", children: mergedTexts.describeTooltip }) })] }) })] }), (0, jsx_runtime_1.jsx)("textarea", { value: description, onChange: (e) => setDescription(e.target.value), placeholder: mergedTexts.descriptionPlaceholder, className: (0, utils_1.cn)("w-full rounded-lg p-4 italic text-(--text-color) placeholder-gray-400 border border-gray-200 focus:outline-none focus:ring-2 min-h-25 resize-none", showTooltip && "border-(--active-border-color)"), style: {
|
|
440
|
+
"--text-color": mergedTheme.textColor,
|
|
441
|
+
"--active-border-color": mergedTheme.primaryColor,
|
|
442
|
+
background: "var(--neutral-10)",
|
|
443
|
+
} }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end mt-4", children: (0, jsx_runtime_1.jsx)("button", { onClick: handleCreate, disabled: !uploadedImage ||
|
|
444
|
+
!description.trim() ||
|
|
445
|
+
isGenerating ||
|
|
446
|
+
(!!generatedResult && !generatedImageUrl), className: `font-bold text-base px-6 py-3 rounded-full transition-colors duration-300 flex items-center gap-2 ${uploadedImage &&
|
|
382
447
|
description.trim() &&
|
|
383
448
|
!isGenerating &&
|
|
384
|
-
!(!!generatedResult && !generatedImageUrl)
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
"#ff1600";
|
|
449
|
+
!(!!generatedResult && !generatedImageUrl)
|
|
450
|
+
? "text-white cursor-pointer"
|
|
451
|
+
: "bg-gray-300 text-gray-500 cursor-not-allowed"}`, style: {
|
|
452
|
+
backgroundColor: uploadedImage &&
|
|
453
|
+
description.trim() &&
|
|
454
|
+
!isGenerating &&
|
|
455
|
+
!(!!generatedResult && !generatedImageUrl)
|
|
456
|
+
? mergedTheme.primaryColor
|
|
457
|
+
: undefined,
|
|
458
|
+
}, onMouseEnter: (e) => {
|
|
459
|
+
if (uploadedImage &&
|
|
460
|
+
description.trim() &&
|
|
461
|
+
!isGenerating &&
|
|
462
|
+
!(!!generatedResult && !generatedImageUrl)) {
|
|
463
|
+
e.currentTarget.style.backgroundColor =
|
|
464
|
+
mergedTheme.primaryHoverColor ||
|
|
465
|
+
mergedTheme.primaryColor ||
|
|
466
|
+
"#ff1600";
|
|
467
|
+
}
|
|
404
468
|
}, onMouseLeave: (e) => {
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
469
|
+
if (uploadedImage &&
|
|
470
|
+
description.trim() &&
|
|
471
|
+
!isGenerating &&
|
|
472
|
+
!(!!generatedResult && !generatedImageUrl)) {
|
|
473
|
+
e.currentTarget.style.backgroundColor =
|
|
474
|
+
mergedTheme.primaryColor || "#FF5500";
|
|
475
|
+
}
|
|
476
|
+
}, children: isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { className: "w-5 h-5 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-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", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), mergedTexts.createButton] })) }) }), error && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 p-3 bg-red-50 border border-red-200 rounded-lg", children: (0, jsx_runtime_1.jsx)("p", { className: "text-red-600 text-sm", children: error }) }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: "16px 24px 24px" }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: mergedTheme.textColor, fontSize: "18px", fontWeight: 700, marginBottom: "16px" }, children: mergedTexts.resultTitle }), (0, jsx_runtime_1.jsx)("div", { className: "rounded-lg mb-4 border border-gray-200 flex items-center justify-center", style: { minHeight: "600px", background: "var(--neutral-10)" }, children: isGenerating ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "w-16 h-16 animate-spin", fill: "none", viewBox: "0 0 24 24", style: { color: mergedTheme.primaryColor }, children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-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" })] }), (0, jsx_runtime_1.jsx)("p", { className: "font-bold", style: { color: mergedTheme.textColor }, children: "Generating your image..." }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500", children: "This may take a few moments" })] })) : generatedResult ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: generatedImageUrl ? ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "rounded-lg overflow-hidden mb-4", children: (0, jsx_runtime_1.jsx)("img", { src: generatedImageUrl, alt: "Generated image", className: "w-full h-auto" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 justify-center", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6 text-green-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-green-600 font-bold", children: mergedTexts.successMessage })] })] })) : progressPercent !== null ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-16 h-16 animate-pulse", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { color: mergedTheme.primaryColor }, 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" }) }), (0, jsx_runtime_1.jsx)("p", { className: "font-bold text-lg", style: { color: mergedTheme.textColor }, children: "Generating Image..." }), (0, jsx_runtime_1.jsx)("div", { className: "w-full max-w-md", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-white rounded-lg p-6 border border-gray-300", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-600 font-bold", children: mergedTexts.progressText }), (0, jsx_runtime_1.jsxs)("span", { className: "text-2xl font-bold", style: { color: mergedTheme.primaryColor }, children: [progressPercent, "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full bg-gray-200 rounded-full h-4 overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "h-4 rounded-full transition-all duration-500 ease-out", style: {
|
|
477
|
+
width: `${progressPercent}%`,
|
|
478
|
+
background: `linear-gradient(to right, ${mergedTheme.primaryColor}, #FF8800)`,
|
|
479
|
+
} }) })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-gray-500 text-center", children: "Creating your masterpiece..." })] }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { className: "w-16 h-16 animate-spin", fill: "none", viewBox: "0 0 24 24", style: { color: mergedTheme.primaryColor }, children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-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" })] }), (0, jsx_runtime_1.jsx)("p", { className: "font-bold text-lg", style: { color: mergedTheme.textColor }, children: mergedTexts.startingText }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 text-center", children: mergedTexts.preparingText })] })) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-3 text-gray-400", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-16 h-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-center", children: mergedTexts.emptyStateText })] })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 justify-end", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleStartAgain, disabled: !generatedResult, className: "text-white font-bold text-base px-6 py-3 rounded-full transition-colors duration-300 flex items-center gap-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed", style: { backgroundColor: mergedTheme.primaryColor }, onMouseEnter: (e) => {
|
|
480
|
+
e.currentTarget.style.backgroundColor =
|
|
481
|
+
mergedTheme.primaryHoverColor ||
|
|
482
|
+
mergedTheme.primaryColor ||
|
|
483
|
+
"#ff1600";
|
|
484
|
+
}, onMouseLeave: (e) => {
|
|
485
|
+
e.currentTarget.style.backgroundColor =
|
|
486
|
+
mergedTheme.primaryColor || "#FF5500";
|
|
487
|
+
}, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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.jsxs)("button", { onClick: handleDownload, disabled: !generatedImageUrl, className: "text-white font-bold text-base px-6 py-3 rounded-full transition-colors duration-300 flex items-center gap-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed", style: { backgroundColor: mergedTheme.primaryColor }, onMouseEnter: (e) => {
|
|
488
|
+
e.currentTarget.style.backgroundColor =
|
|
489
|
+
mergedTheme.primaryHoverColor ||
|
|
490
|
+
mergedTheme.primaryColor ||
|
|
491
|
+
"#ff1600";
|
|
492
|
+
}, onMouseLeave: (e) => {
|
|
493
|
+
e.currentTarget.style.backgroundColor =
|
|
494
|
+
mergedTheme.primaryColor || "#FF5500";
|
|
495
|
+
}, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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] })] })] })] })] }))] }) }));
|
|
408
496
|
}
|
|
497
|
+
void ui_1.Button;
|
|
409
498
|
exports.default = CreativeFaceSwap;
|
|
410
499
|
//# sourceMappingURL=CreativeFaceSwap.js.map
|