@rslsp1/fa-app-tools 2.0.21 → 2.0.23
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/{chunk-I73HODO5.mjs → chunk-UCEQOGPT.mjs} +23 -19
- package/dist/{hfStateService-PDBVLFML.mjs → hfStateService-TC65WQXK.mjs} +1 -1
- package/dist/index.d.mts +17 -3
- package/dist/index.d.ts +17 -3
- package/dist/index.js +791 -519
- package/dist/index.mjs +761 -494
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -407,10 +407,10 @@ async function loadHFState(namespace, token) {
|
|
|
407
407
|
async function loadPendingEvents(namespace, token, sinceTs) {
|
|
408
408
|
const files = await hfListDir(namespace, "events", token);
|
|
409
409
|
const pending = files.filter((f) => f.type === "file" && tsFromEventPath(f.path) > sinceTs).sort((a, b) => a.path.localeCompare(b.path));
|
|
410
|
-
const
|
|
410
|
+
const raw = await Promise.all(
|
|
411
411
|
pending.map((f) => hfDownloadJsonByPath(f.path, token))
|
|
412
412
|
);
|
|
413
|
-
return
|
|
413
|
+
return raw.flatMap((e) => Array.isArray(e) ? e : [e]);
|
|
414
414
|
}
|
|
415
415
|
function getSessionClientId() {
|
|
416
416
|
return SESSION_CLIENT_ID;
|
|
@@ -566,23 +566,27 @@ async function hfUploadImage(base64, id, token, mimeType = "image/jpeg") {
|
|
|
566
566
|
commitTitle: `Add image ${id}`
|
|
567
567
|
});
|
|
568
568
|
}
|
|
569
|
-
async function hfLoadImageAsBase64(id, token) {
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
569
|
+
async function hfLoadImageAsBase64(id, token, namespace) {
|
|
570
|
+
const paths = [`images/${id}`];
|
|
571
|
+
if (namespace) paths.push(`${namespace}images/${id}`);
|
|
572
|
+
for (const basePath of paths) {
|
|
573
|
+
for (const ext of ["jpg", "png"]) {
|
|
574
|
+
try {
|
|
575
|
+
const res = await fetch(
|
|
576
|
+
`${HF_BASE}/datasets/${HF_REPO}/resolve/main/${basePath}.${ext}?download=true`,
|
|
577
|
+
{ headers: { Authorization: `Bearer ${token}` } }
|
|
578
|
+
);
|
|
579
|
+
if (!res.ok) continue;
|
|
580
|
+
const blob = await res.blob();
|
|
581
|
+
return new Promise((resolve, reject) => {
|
|
582
|
+
const reader = new FileReader();
|
|
583
|
+
reader.onload = () => resolve(reader.result.split(",")[1]);
|
|
584
|
+
reader.onerror = reject;
|
|
585
|
+
reader.readAsDataURL(blob);
|
|
586
|
+
});
|
|
587
|
+
} catch {
|
|
588
|
+
continue;
|
|
589
|
+
}
|
|
586
590
|
}
|
|
587
591
|
}
|
|
588
592
|
return null;
|
|
@@ -615,6 +619,7 @@ __export(index_exports, {
|
|
|
615
619
|
LIB_VERSION: () => LIB_VERSION,
|
|
616
620
|
LabBlend: () => LabBlend,
|
|
617
621
|
LabCompare: () => LabCompare,
|
|
622
|
+
LabFrameExtractor: () => LabFrameExtractor,
|
|
618
623
|
LabImagePicker: () => LabImagePicker,
|
|
619
624
|
LabLoop: () => LabLoop,
|
|
620
625
|
LabRemix: () => LabRemix,
|
|
@@ -1341,7 +1346,10 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
|
|
|
1341
1346
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[10px] italic", children: "Importiere Assets aus deinem Projekt." })
|
|
1342
1347
|
] })
|
|
1343
1348
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-2 gap-3 pb-10", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react9.motion.div, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, className: `relative aspect-square group/item rounded-xl overflow-hidden border transition-all bg-white/5 cursor-pointer shadow-lg ${item.selectedForExport ? "border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.2)]" : "border-white/10 opacity-70 hover:opacity-100"}`, onClick: () => onSelect?.(item), children: [
|
|
1344
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.
|
|
1349
|
+
item.status === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "w-full h-full flex flex-col items-center justify-center gap-2 bg-black/40", children: [
|
|
1350
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-6 h-6 border-t-2 border-white rounded-full animate-spin" }),
|
|
1351
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[8px] text-white/40 uppercase font-bold tracking-widest", children: "Generiere\u2026" })
|
|
1352
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: item.base64 ? item.base64.startsWith("data:") ? item.base64 : `data:image/png;base64,${item.base64}` : "", className: "w-full h-full object-cover transition-transform duration-500 group-hover/item:scale-110", alt: item.prompt }),
|
|
1345
1353
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: `absolute top-2 left-2 w-5 h-5 rounded-md border flex items-center justify-center transition-all z-30 pointer-events-auto ${item.selectedForExport ? "bg-blue-500 border-blue-400" : "bg-black/60 border-white/20"}`, onClick: (e) => {
|
|
1346
1354
|
e.stopPropagation();
|
|
1347
1355
|
onToggleSelection?.(item.id);
|
|
@@ -1458,7 +1466,7 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
|
|
|
1458
1466
|
}
|
|
1459
1467
|
|
|
1460
1468
|
// src/components/AvatarArchitectApp.tsx
|
|
1461
|
-
var
|
|
1469
|
+
var import_react24 = require("react");
|
|
1462
1470
|
|
|
1463
1471
|
// src/components/PromptTab.tsx
|
|
1464
1472
|
var import_react12 = require("react");
|
|
@@ -2751,7 +2759,7 @@ function useHFState(token, namespace) {
|
|
|
2751
2759
|
}
|
|
2752
2760
|
|
|
2753
2761
|
// src/components/labs/LabsTab.tsx
|
|
2754
|
-
var
|
|
2762
|
+
var import_react21 = require("react");
|
|
2755
2763
|
|
|
2756
2764
|
// src/components/labs/LabRemix.tsx
|
|
2757
2765
|
var import_react16 = require("react");
|
|
@@ -3589,52 +3597,313 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
3589
3597
|
] });
|
|
3590
3598
|
};
|
|
3591
3599
|
|
|
3592
|
-
// src/components/labs/
|
|
3600
|
+
// src/components/labs/LabFrameExtractor.tsx
|
|
3601
|
+
var import_react20 = require("react");
|
|
3593
3602
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
3594
|
-
var
|
|
3603
|
+
var formatTime = (s) => {
|
|
3604
|
+
const m = Math.floor(s / 60);
|
|
3605
|
+
const sec = (s % 60).toFixed(1);
|
|
3606
|
+
return `${m}:${sec.padStart(4, "0")}`;
|
|
3607
|
+
};
|
|
3608
|
+
var MAX_FRAMES = 40;
|
|
3609
|
+
var INTERVAL_OPTIONS = ["0.5", "1", "2", "5", "10"];
|
|
3610
|
+
var LabFrameExtractor = ({
|
|
3611
|
+
videoItems,
|
|
3612
|
+
onResult,
|
|
3613
|
+
resolveVideoUrl
|
|
3614
|
+
}) => {
|
|
3615
|
+
const videoRef = (0, import_react20.useRef)(null);
|
|
3616
|
+
const canvasRef = (0, import_react20.useRef)(null);
|
|
3617
|
+
const cancelledRef = (0, import_react20.useRef)(false);
|
|
3618
|
+
const [selectedItem, setSelectedItem] = (0, import_react20.useState)(null);
|
|
3619
|
+
const [videoSrc, setVideoSrc] = (0, import_react20.useState)(null);
|
|
3620
|
+
const [videoReady, setVideoReady] = (0, import_react20.useState)(false);
|
|
3621
|
+
const [frames, setFrames] = (0, import_react20.useState)([]);
|
|
3622
|
+
const [isExtracting, setIsExtracting] = (0, import_react20.useState)(false);
|
|
3623
|
+
const [intervalSec, setIntervalSec] = (0, import_react20.useState)("1");
|
|
3624
|
+
const handleVideoSelect = (item) => {
|
|
3625
|
+
const mediaId = item.frames[0]?.mediaId;
|
|
3626
|
+
if (!mediaId) return;
|
|
3627
|
+
setSelectedItem(item);
|
|
3628
|
+
setVideoSrc(resolveVideoUrl(mediaId));
|
|
3629
|
+
setFrames([]);
|
|
3630
|
+
setVideoReady(false);
|
|
3631
|
+
cancelledRef.current = false;
|
|
3632
|
+
};
|
|
3633
|
+
const captureAt = (0, import_react20.useCallback)(
|
|
3634
|
+
(t, label) => new Promise((resolve) => {
|
|
3635
|
+
const video = videoRef.current;
|
|
3636
|
+
const canvas = canvasRef.current;
|
|
3637
|
+
if (!video || !canvas || !isFinite(video.duration)) return resolve(null);
|
|
3638
|
+
const onSeeked = () => {
|
|
3639
|
+
canvas.width = video.videoWidth;
|
|
3640
|
+
canvas.height = video.videoHeight;
|
|
3641
|
+
const ctx = canvas.getContext("2d");
|
|
3642
|
+
if (!ctx) return resolve(null);
|
|
3643
|
+
ctx.drawImage(video, 0, 0);
|
|
3644
|
+
resolve({
|
|
3645
|
+
id: `fe-${Date.now()}-${Math.random().toString(36).slice(2, 5)}`,
|
|
3646
|
+
dataUrl: canvas.toDataURL("image/png"),
|
|
3647
|
+
timeSeconds: t,
|
|
3648
|
+
label
|
|
3649
|
+
});
|
|
3650
|
+
};
|
|
3651
|
+
video.addEventListener("seeked", onSeeked, { once: true });
|
|
3652
|
+
video.currentTime = t;
|
|
3653
|
+
}),
|
|
3654
|
+
[]
|
|
3655
|
+
);
|
|
3656
|
+
const extractSingle = async (mode) => {
|
|
3657
|
+
const v = videoRef.current;
|
|
3658
|
+
if (!v || !videoReady) return;
|
|
3659
|
+
const t = mode === "start" ? 0 : mode === "end" ? Math.max(0, v.duration - 0.01) : v.currentTime;
|
|
3660
|
+
const frame = await captureAt(t, mode === "start" ? "Start" : mode === "end" ? "End" : formatTime(t));
|
|
3661
|
+
if (frame) setFrames((prev) => [frame, ...prev]);
|
|
3662
|
+
};
|
|
3663
|
+
const extractInterval = async () => {
|
|
3664
|
+
const v = videoRef.current;
|
|
3665
|
+
if (!v || !videoReady || isExtracting) return;
|
|
3666
|
+
const every = parseFloat(intervalSec);
|
|
3667
|
+
if (!isFinite(every) || every <= 0) return;
|
|
3668
|
+
const ts = [];
|
|
3669
|
+
for (let t = 0; t <= v.duration; t += every) {
|
|
3670
|
+
ts.push(Math.min(t, v.duration - 0.01));
|
|
3671
|
+
if (ts.length >= MAX_FRAMES) break;
|
|
3672
|
+
}
|
|
3673
|
+
setIsExtracting(true);
|
|
3674
|
+
cancelledRef.current = false;
|
|
3675
|
+
setFrames([]);
|
|
3676
|
+
const collected = [];
|
|
3677
|
+
for (const t of ts) {
|
|
3678
|
+
if (cancelledRef.current) break;
|
|
3679
|
+
const f = await captureAt(t, formatTime(t));
|
|
3680
|
+
if (f) {
|
|
3681
|
+
collected.push(f);
|
|
3682
|
+
setFrames([...collected]);
|
|
3683
|
+
}
|
|
3684
|
+
}
|
|
3685
|
+
setIsExtracting(false);
|
|
3686
|
+
};
|
|
3687
|
+
const useFrame = (frame) => {
|
|
3688
|
+
if (!onResult || !selectedItem) return;
|
|
3689
|
+
const base64 = frame.dataUrl.replace(/^data:image\/png;base64,/, "");
|
|
3690
|
+
const labFrame = {
|
|
3691
|
+
id: frame.id,
|
|
3692
|
+
base64,
|
|
3693
|
+
source: "flow-gallery"
|
|
3694
|
+
};
|
|
3695
|
+
onResult({
|
|
3696
|
+
id: frame.id,
|
|
3697
|
+
prompt: selectedItem.prompt,
|
|
3698
|
+
label: `Frame ${frame.label} \u2013 ${selectedItem.label ?? selectedItem.id}`,
|
|
3699
|
+
tags: selectedItem.tags ?? [],
|
|
3700
|
+
frames: [labFrame]
|
|
3701
|
+
});
|
|
3702
|
+
};
|
|
3703
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12, padding: 12, height: "100%", overflow: "auto" }, children: [
|
|
3704
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: [
|
|
3705
|
+
videoItems.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: 11, color: "#666", fontStyle: "italic" }, children: "No video items available" }),
|
|
3706
|
+
videoItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3707
|
+
"button",
|
|
3708
|
+
{
|
|
3709
|
+
onClick: () => handleVideoSelect(item),
|
|
3710
|
+
style: {
|
|
3711
|
+
padding: "4px 8px",
|
|
3712
|
+
fontSize: 11,
|
|
3713
|
+
background: selectedItem?.id === item.id ? "rgba(168,85,247,0.2)" : "rgba(255,255,255,0.05)",
|
|
3714
|
+
border: `1px solid ${selectedItem?.id === item.id ? "#a855f7" : "rgba(255,255,255,0.1)"}`,
|
|
3715
|
+
borderRadius: 4,
|
|
3716
|
+
color: "#fff",
|
|
3717
|
+
cursor: "pointer"
|
|
3718
|
+
},
|
|
3719
|
+
children: item.label ?? item.id
|
|
3720
|
+
},
|
|
3721
|
+
item.id
|
|
3722
|
+
))
|
|
3723
|
+
] }),
|
|
3724
|
+
videoSrc && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3725
|
+
"video",
|
|
3726
|
+
{
|
|
3727
|
+
ref: videoRef,
|
|
3728
|
+
src: videoSrc,
|
|
3729
|
+
controls: true,
|
|
3730
|
+
crossOrigin: "anonymous",
|
|
3731
|
+
onLoadedMetadata: () => setVideoReady(true),
|
|
3732
|
+
style: { width: "100%", maxHeight: 280, background: "#000", borderRadius: 6, display: "block" }
|
|
3733
|
+
}
|
|
3734
|
+
),
|
|
3735
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("canvas", { ref: canvasRef, style: { display: "none" } }),
|
|
3736
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, alignItems: "center" }, children: [
|
|
3737
|
+
["start", "current", "end"].map((mode) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3738
|
+
"button",
|
|
3739
|
+
{
|
|
3740
|
+
disabled: !videoReady,
|
|
3741
|
+
onClick: () => extractSingle(mode),
|
|
3742
|
+
style: {
|
|
3743
|
+
padding: "4px 10px",
|
|
3744
|
+
fontSize: 11,
|
|
3745
|
+
borderRadius: 4,
|
|
3746
|
+
background: "rgba(255,255,255,0.08)",
|
|
3747
|
+
border: "1px solid rgba(255,255,255,0.15)",
|
|
3748
|
+
color: "#fff",
|
|
3749
|
+
cursor: videoReady ? "pointer" : "not-allowed",
|
|
3750
|
+
opacity: videoReady ? 1 : 0.4
|
|
3751
|
+
},
|
|
3752
|
+
children: mode === "start" ? "Start Frame" : mode === "end" ? "End Frame" : "Current Frame"
|
|
3753
|
+
},
|
|
3754
|
+
mode
|
|
3755
|
+
)),
|
|
3756
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: 11, color: "#aaa" }, children: "every" }),
|
|
3757
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3758
|
+
"select",
|
|
3759
|
+
{
|
|
3760
|
+
value: intervalSec,
|
|
3761
|
+
onChange: (e) => setIntervalSec(e.target.value),
|
|
3762
|
+
disabled: !videoReady || isExtracting,
|
|
3763
|
+
style: { fontSize: 11, background: "#111", border: "1px solid #333", color: "#fff", borderRadius: 4, padding: "2px 4px" },
|
|
3764
|
+
children: INTERVAL_OPTIONS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("option", { value: v, children: [
|
|
3765
|
+
v,
|
|
3766
|
+
"s"
|
|
3767
|
+
] }, v))
|
|
3768
|
+
}
|
|
3769
|
+
),
|
|
3770
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3771
|
+
"button",
|
|
3772
|
+
{
|
|
3773
|
+
disabled: !videoReady,
|
|
3774
|
+
onClick: isExtracting ? () => {
|
|
3775
|
+
cancelledRef.current = true;
|
|
3776
|
+
} : extractInterval,
|
|
3777
|
+
style: {
|
|
3778
|
+
padding: "4px 10px",
|
|
3779
|
+
fontSize: 11,
|
|
3780
|
+
borderRadius: 4,
|
|
3781
|
+
background: isExtracting ? "rgba(239,68,68,0.2)" : "rgba(255,255,255,0.08)",
|
|
3782
|
+
border: `1px solid ${isExtracting ? "#ef4444" : "rgba(255,255,255,0.15)"}`,
|
|
3783
|
+
color: isExtracting ? "#f87171" : "#fff",
|
|
3784
|
+
cursor: videoReady ? "pointer" : "not-allowed",
|
|
3785
|
+
opacity: videoReady ? 1 : 0.4
|
|
3786
|
+
},
|
|
3787
|
+
children: isExtracting ? "Cancel" : "Extract All"
|
|
3788
|
+
}
|
|
3789
|
+
)
|
|
3790
|
+
] }),
|
|
3791
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 8, overflowX: "auto", paddingBottom: 4 }, children: [
|
|
3792
|
+
frames.map((frame) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
3793
|
+
"div",
|
|
3794
|
+
{
|
|
3795
|
+
style: {
|
|
3796
|
+
flexShrink: 0,
|
|
3797
|
+
width: 100,
|
|
3798
|
+
border: "1px solid rgba(255,255,255,0.1)",
|
|
3799
|
+
borderRadius: 6,
|
|
3800
|
+
overflow: "hidden",
|
|
3801
|
+
background: "rgba(255,255,255,0.03)"
|
|
3802
|
+
},
|
|
3803
|
+
children: [
|
|
3804
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src: frame.dataUrl, style: { width: "100%", aspectRatio: "16/9", objectFit: "cover", display: "block" }, alt: frame.label }),
|
|
3805
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 9, color: "#888", textAlign: "center", padding: "2px 4px", fontFamily: "monospace" }, children: frame.label }),
|
|
3806
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 2, padding: "0 4px 4px", justifyContent: "center" }, children: [
|
|
3807
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3808
|
+
"button",
|
|
3809
|
+
{
|
|
3810
|
+
onClick: () => useFrame(frame),
|
|
3811
|
+
style: {
|
|
3812
|
+
flex: 1,
|
|
3813
|
+
padding: "2px 0",
|
|
3814
|
+
fontSize: 9,
|
|
3815
|
+
borderRadius: 3,
|
|
3816
|
+
background: "rgba(168,85,247,0.2)",
|
|
3817
|
+
border: "1px solid #a855f7",
|
|
3818
|
+
color: "#c084fc",
|
|
3819
|
+
cursor: "pointer"
|
|
3820
|
+
},
|
|
3821
|
+
children: "Use"
|
|
3822
|
+
}
|
|
3823
|
+
),
|
|
3824
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3825
|
+
"button",
|
|
3826
|
+
{
|
|
3827
|
+
onClick: () => setFrames((prev) => prev.filter((f) => f.id !== frame.id)),
|
|
3828
|
+
style: {
|
|
3829
|
+
padding: "2px 4px",
|
|
3830
|
+
fontSize: 9,
|
|
3831
|
+
borderRadius: 3,
|
|
3832
|
+
background: "rgba(255,255,255,0.05)",
|
|
3833
|
+
border: "1px solid rgba(255,255,255,0.1)",
|
|
3834
|
+
color: "#666",
|
|
3835
|
+
cursor: "pointer"
|
|
3836
|
+
},
|
|
3837
|
+
children: "\u2715"
|
|
3838
|
+
}
|
|
3839
|
+
)
|
|
3840
|
+
] })
|
|
3841
|
+
]
|
|
3842
|
+
},
|
|
3843
|
+
frame.id
|
|
3844
|
+
)),
|
|
3845
|
+
frames.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: 11, color: "#444", fontStyle: "italic", padding: "16px 0" }, children: isExtracting ? "Extracting frames\u2026" : "No frames yet" })
|
|
3846
|
+
] })
|
|
3847
|
+
] });
|
|
3848
|
+
};
|
|
3849
|
+
|
|
3850
|
+
// src/components/labs/LabsTab.tsx
|
|
3851
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3852
|
+
var BASE_TABS = [
|
|
3595
3853
|
{ key: "remix", label: "Remix", icon: "auto_fix_high" },
|
|
3596
3854
|
{ key: "blend", label: "Blend", icon: "merge" },
|
|
3597
3855
|
{ key: "compare", label: "Compare", icon: "compare" },
|
|
3598
3856
|
{ key: "loop", label: "Loop", icon: "loop" }
|
|
3599
3857
|
];
|
|
3600
|
-
var
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3858
|
+
var FRAMES_TAB = { key: "frames", label: "Frames", icon: "crop_original" };
|
|
3859
|
+
var LabsTab = ({ services, onResult, videoItems, resolveVideoUrl }) => {
|
|
3860
|
+
const [activeTab, setActiveTab] = (0, import_react21.useState)("remix");
|
|
3861
|
+
const showFrames = !!(videoItems && resolveVideoUrl);
|
|
3862
|
+
const tabs = showFrames ? [...BASE_TABS, FRAMES_TAB] : BASE_TABS;
|
|
3863
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col h-full overflow-hidden", children: [
|
|
3864
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex border-b border-white/5 shrink-0", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
3604
3865
|
"button",
|
|
3605
3866
|
{
|
|
3606
3867
|
onClick: () => setActiveTab(tab.key),
|
|
3607
3868
|
className: `flex-1 flex items-center justify-center gap-1 h-10 text-[9px] font-bold uppercase tracking-wide transition-colors ${activeTab === tab.key ? "text-white border-b-2 border-white" : "text-white/30 hover:text-white/60"}`,
|
|
3608
3869
|
children: [
|
|
3609
|
-
/* @__PURE__ */ (0,
|
|
3870
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: tab.icon }),
|
|
3610
3871
|
tab.label
|
|
3611
3872
|
]
|
|
3612
3873
|
},
|
|
3613
3874
|
tab.key
|
|
3614
3875
|
)) }),
|
|
3615
|
-
/* @__PURE__ */ (0,
|
|
3616
|
-
activeTab === "remix" && /* @__PURE__ */ (0,
|
|
3617
|
-
activeTab === "blend" && /* @__PURE__ */ (0,
|
|
3618
|
-
activeTab === "compare" && /* @__PURE__ */ (0,
|
|
3619
|
-
activeTab === "loop" && /* @__PURE__ */ (0,
|
|
3876
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 overflow-hidden", children: [
|
|
3877
|
+
activeTab === "remix" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LabRemix, { services, onResult }),
|
|
3878
|
+
activeTab === "blend" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LabBlend, { services, onResult }),
|
|
3879
|
+
activeTab === "compare" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LabCompare, { services, onResult }),
|
|
3880
|
+
activeTab === "loop" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LabLoop, { services, onResult }),
|
|
3881
|
+
activeTab === "frames" && showFrames && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3882
|
+
LabFrameExtractor,
|
|
3883
|
+
{
|
|
3884
|
+
videoItems,
|
|
3885
|
+
onResult,
|
|
3886
|
+
resolveVideoUrl
|
|
3887
|
+
}
|
|
3888
|
+
)
|
|
3620
3889
|
] })
|
|
3621
3890
|
] });
|
|
3622
3891
|
};
|
|
3623
3892
|
|
|
3624
3893
|
// src/components/TagManagerPanel.tsx
|
|
3625
|
-
var
|
|
3626
|
-
var
|
|
3894
|
+
var import_react22 = require("react");
|
|
3895
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
3627
3896
|
function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete, onTagReorder, onTagMove }) {
|
|
3628
3897
|
const categories = Object.keys(workspaceTags.by_category).filter(
|
|
3629
3898
|
(cat) => (workspaceTags.by_category[cat] || []).some((t) => !t.is_deleted)
|
|
3630
3899
|
);
|
|
3631
|
-
const [selectedCategory, setSelectedCategory] = (0,
|
|
3900
|
+
const [selectedCategory, setSelectedCategory] = (0, import_react22.useState)(categories[0] || "");
|
|
3632
3901
|
const effectiveCategory = categories.includes(selectedCategory) ? selectedCategory : categories[0] || "";
|
|
3633
|
-
const [editingLabel, setEditingLabel] = (0,
|
|
3634
|
-
const [editState, setEditState] = (0,
|
|
3635
|
-
const [newTag, setNewTag] = (0,
|
|
3636
|
-
const [movingLabel, setMovingLabel] = (0,
|
|
3637
|
-
const [moveTarget, setMoveTarget] = (0,
|
|
3902
|
+
const [editingLabel, setEditingLabel] = (0, import_react22.useState)(null);
|
|
3903
|
+
const [editState, setEditState] = (0, import_react22.useState)({ label: "", value: "" });
|
|
3904
|
+
const [newTag, setNewTag] = (0, import_react22.useState)({ label: "", value: "" });
|
|
3905
|
+
const [movingLabel, setMovingLabel] = (0, import_react22.useState)(null);
|
|
3906
|
+
const [moveTarget, setMoveTarget] = (0, import_react22.useState)("");
|
|
3638
3907
|
const tags = (workspaceTags.by_category[effectiveCategory] || []).filter((t) => !t.is_deleted);
|
|
3639
3908
|
const otherCategories = categories.filter((c) => c !== effectiveCategory);
|
|
3640
3909
|
const startEdit = (tag) => {
|
|
@@ -3677,10 +3946,10 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3677
3946
|
if (!confirm(`Tag "${tag.label}" l\xF6schen?`)) return;
|
|
3678
3947
|
onTagDelete(tag.label, effectiveCategory);
|
|
3679
3948
|
};
|
|
3680
|
-
return /* @__PURE__ */ (0,
|
|
3681
|
-
/* @__PURE__ */ (0,
|
|
3682
|
-
/* @__PURE__ */ (0,
|
|
3683
|
-
categories.map((cat) => /* @__PURE__ */ (0,
|
|
3949
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col h-full overflow-hidden", children: [
|
|
3950
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-3 py-2 border-b border-white/5 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-widest text-white/40", children: "Tag Manager" }) }),
|
|
3951
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-3 py-2 shrink-0 overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-1.5 flex-nowrap", children: [
|
|
3952
|
+
categories.map((cat) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
3684
3953
|
"button",
|
|
3685
3954
|
{
|
|
3686
3955
|
onClick: () => {
|
|
@@ -3692,17 +3961,17 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3692
3961
|
children: [
|
|
3693
3962
|
cat,
|
|
3694
3963
|
" ",
|
|
3695
|
-
/* @__PURE__ */ (0,
|
|
3964
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ml-1 opacity-50", children: (workspaceTags.by_category[cat] || []).filter((t) => !t.is_deleted).length })
|
|
3696
3965
|
]
|
|
3697
3966
|
},
|
|
3698
3967
|
cat
|
|
3699
3968
|
)),
|
|
3700
|
-
categories.length === 0 && /* @__PURE__ */ (0,
|
|
3969
|
+
categories.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] text-white/20", children: "Erst Workspace importieren" })
|
|
3701
3970
|
] }) }),
|
|
3702
|
-
/* @__PURE__ */ (0,
|
|
3703
|
-
tags.map((tag, i) => /* @__PURE__ */ (0,
|
|
3704
|
-
editingLabel === tag.label ? /* @__PURE__ */ (0,
|
|
3705
|
-
/* @__PURE__ */ (0,
|
|
3971
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 overflow-y-auto dark-scrollbar px-3 pb-2 space-y-1", children: [
|
|
3972
|
+
tags.map((tag, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
|
|
3973
|
+
editingLabel === tag.label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "bg-white/5 border border-blue-600/40 rounded-lg p-2.5 space-y-1.5", children: [
|
|
3974
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3706
3975
|
"input",
|
|
3707
3976
|
{
|
|
3708
3977
|
value: editState.label,
|
|
@@ -3713,7 +3982,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3713
3982
|
onKeyDown: (e) => e.key === "Enter" && saveEdit(tag.label)
|
|
3714
3983
|
}
|
|
3715
3984
|
),
|
|
3716
|
-
/* @__PURE__ */ (0,
|
|
3985
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3717
3986
|
"textarea",
|
|
3718
3987
|
{
|
|
3719
3988
|
value: editState.value,
|
|
@@ -3723,24 +3992,24 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3723
3992
|
placeholder: "Prompt-Wert (leer = Label)"
|
|
3724
3993
|
}
|
|
3725
3994
|
),
|
|
3726
|
-
/* @__PURE__ */ (0,
|
|
3727
|
-
/* @__PURE__ */ (0,
|
|
3728
|
-
/* @__PURE__ */ (0,
|
|
3995
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-1.5 justify-end", children: [
|
|
3996
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => saveEdit(tag.label), className: "px-2.5 py-1 bg-blue-700 hover:bg-blue-600 text-white text-[10px] font-bold rounded transition", children: "SPEICHERN" }),
|
|
3997
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setEditingLabel(null), className: "px-2.5 py-1 bg-white/5 hover:bg-white/10 text-white/50 text-[10px] font-bold rounded transition", children: "ABBRUCH" })
|
|
3729
3998
|
] })
|
|
3730
|
-
] }) : /* @__PURE__ */ (0,
|
|
3731
|
-
/* @__PURE__ */ (0,
|
|
3732
|
-
/* @__PURE__ */ (0,
|
|
3733
|
-
/* @__PURE__ */ (0,
|
|
3999
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "group flex items-center gap-1.5 bg-white/3 hover:bg-white/6 border border-white/5 rounded-lg px-2 py-1.5 transition", children: [
|
|
4000
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-0 shrink-0", children: [
|
|
4001
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => handleMoveUp(i), disabled: i === 0, className: "text-white/20 hover:text-white/60 disabled:opacity-10 transition leading-none", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "arrow_drop_up" }) }),
|
|
4002
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => handleMoveDown(i), disabled: i === tags.length - 1, className: "text-white/20 hover:text-white/60 disabled:opacity-10 transition leading-none", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "arrow_drop_down" }) })
|
|
3734
4003
|
] }),
|
|
3735
|
-
/* @__PURE__ */ (0,
|
|
3736
|
-
/* @__PURE__ */ (0,
|
|
3737
|
-
tag.value && tag.value !== tag.label && /* @__PURE__ */ (0,
|
|
4004
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 min-w-0", children: [
|
|
4005
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-[12px] text-white/80 font-medium truncate", children: tag.label }),
|
|
4006
|
+
tag.value && tag.value !== tag.label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "text-[10px] text-white/30 truncate", children: [
|
|
3738
4007
|
tag.value.slice(0, 60),
|
|
3739
4008
|
tag.value.length > 60 ? "\u2026" : ""
|
|
3740
4009
|
] })
|
|
3741
4010
|
] }),
|
|
3742
|
-
/* @__PURE__ */ (0,
|
|
3743
|
-
otherCategories.length > 0 && /* @__PURE__ */ (0,
|
|
4011
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-1 opacity-0 group-hover:opacity-100 transition shrink-0", children: [
|
|
4012
|
+
otherCategories.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3744
4013
|
"button",
|
|
3745
4014
|
{
|
|
3746
4015
|
onClick: () => {
|
|
@@ -3750,29 +4019,29 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3750
4019
|
},
|
|
3751
4020
|
className: "p-1 rounded text-white/30 hover:text-purple-400 transition",
|
|
3752
4021
|
title: "Kategorie wechseln",
|
|
3753
|
-
children: /* @__PURE__ */ (0,
|
|
4022
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[16px]", children: "drive_file_move" })
|
|
3754
4023
|
}
|
|
3755
4024
|
),
|
|
3756
|
-
/* @__PURE__ */ (0,
|
|
3757
|
-
/* @__PURE__ */ (0,
|
|
4025
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => startEdit(tag), className: "p-1 rounded text-white/30 hover:text-blue-400 transition", title: "Bearbeiten", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[16px]", children: "edit" }) }),
|
|
4026
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => handleDelete(tag), className: "p-1 rounded text-white/30 hover:text-red-400 transition", title: "L\xF6schen", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[16px]", children: "delete" }) })
|
|
3758
4027
|
] })
|
|
3759
4028
|
] }),
|
|
3760
|
-
movingLabel === tag.label && /* @__PURE__ */ (0,
|
|
3761
|
-
/* @__PURE__ */ (0,
|
|
3762
|
-
/* @__PURE__ */ (0,
|
|
4029
|
+
movingLabel === tag.label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mt-1 bg-purple-900/20 border border-purple-700/30 rounded-lg p-2.5 space-y-1.5", children: [
|
|
4030
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-[9px] font-bold uppercase tracking-widest text-purple-400/70", children: "Verschieben nach Kategorie" }),
|
|
4031
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
3763
4032
|
"select",
|
|
3764
4033
|
{
|
|
3765
4034
|
value: moveTarget,
|
|
3766
4035
|
onChange: (e) => setMoveTarget(e.target.value),
|
|
3767
4036
|
className: "w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-[11px] text-white/70 outline-none",
|
|
3768
4037
|
children: [
|
|
3769
|
-
/* @__PURE__ */ (0,
|
|
3770
|
-
otherCategories.map((cat) => /* @__PURE__ */ (0,
|
|
4038
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: "", children: "\u2014 Kategorie w\xE4hlen \u2014" }),
|
|
4039
|
+
otherCategories.map((cat) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: cat, children: cat }, cat))
|
|
3771
4040
|
]
|
|
3772
4041
|
}
|
|
3773
4042
|
),
|
|
3774
|
-
/* @__PURE__ */ (0,
|
|
3775
|
-
/* @__PURE__ */ (0,
|
|
4043
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-1.5 justify-end", children: [
|
|
4044
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3776
4045
|
"button",
|
|
3777
4046
|
{
|
|
3778
4047
|
onClick: () => handleMove(tag),
|
|
@@ -3781,19 +4050,19 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3781
4050
|
children: "VERSCHIEBEN"
|
|
3782
4051
|
}
|
|
3783
4052
|
),
|
|
3784
|
-
/* @__PURE__ */ (0,
|
|
4053
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setMovingLabel(null), className: "px-2.5 py-1 bg-white/5 hover:bg-white/10 text-white/50 text-[10px] font-bold rounded transition", children: "ABBRUCH" })
|
|
3785
4054
|
] })
|
|
3786
4055
|
] })
|
|
3787
4056
|
] }, `${effectiveCategory}-${i}`)),
|
|
3788
|
-
tags.length === 0 && effectiveCategory && /* @__PURE__ */ (0,
|
|
4057
|
+
tags.length === 0 && effectiveCategory && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-center text-[11px] text-white/20 py-6", children: "Keine Tags in dieser Kategorie." })
|
|
3789
4058
|
] }),
|
|
3790
|
-
effectiveCategory && /* @__PURE__ */ (0,
|
|
3791
|
-
/* @__PURE__ */ (0,
|
|
4059
|
+
effectiveCategory && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "px-3 py-2 border-t border-white/5 shrink-0 space-y-1.5", children: [
|
|
4060
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "text-[9px] font-bold uppercase tracking-widest text-white/30", children: [
|
|
3792
4061
|
"Neuer Tag in \u201E",
|
|
3793
4062
|
effectiveCategory,
|
|
3794
4063
|
'"'
|
|
3795
4064
|
] }),
|
|
3796
|
-
/* @__PURE__ */ (0,
|
|
4065
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3797
4066
|
"input",
|
|
3798
4067
|
{
|
|
3799
4068
|
value: newTag.label,
|
|
@@ -3803,7 +4072,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3803
4072
|
className: "w-full bg-black/40 border border-white/10 rounded px-2 py-1.5 text-[12px] text-white outline-none focus:border-white/20"
|
|
3804
4073
|
}
|
|
3805
4074
|
),
|
|
3806
|
-
/* @__PURE__ */ (0,
|
|
4075
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3807
4076
|
"textarea",
|
|
3808
4077
|
{
|
|
3809
4078
|
value: newTag.value,
|
|
@@ -3813,14 +4082,14 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3813
4082
|
className: "w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-[11px] text-white/60 outline-none focus:border-white/20 resize-none"
|
|
3814
4083
|
}
|
|
3815
4084
|
),
|
|
3816
|
-
/* @__PURE__ */ (0,
|
|
4085
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
3817
4086
|
"button",
|
|
3818
4087
|
{
|
|
3819
4088
|
onClick: handleCreate,
|
|
3820
4089
|
disabled: !newTag.label.trim(),
|
|
3821
4090
|
className: "w-full py-1.5 bg-white/5 border border-white/10 text-white/60 text-[10px] font-bold rounded hover:bg-white/10 hover:text-white transition disabled:opacity-30 flex items-center justify-center gap-1.5",
|
|
3822
4091
|
children: [
|
|
3823
|
-
/* @__PURE__ */ (0,
|
|
4092
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "add" }),
|
|
3824
4093
|
"TAG ERSTELLEN"
|
|
3825
4094
|
]
|
|
3826
4095
|
}
|
|
@@ -3830,8 +4099,8 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3830
4099
|
}
|
|
3831
4100
|
|
|
3832
4101
|
// src/components/HFTestTab.tsx
|
|
3833
|
-
var
|
|
3834
|
-
var
|
|
4102
|
+
var import_react23 = require("react");
|
|
4103
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
3835
4104
|
var HF_BASE2 = "https://huggingface.co";
|
|
3836
4105
|
var HF_REPO2 = "RolandSch/fa-app-state";
|
|
3837
4106
|
var TEST_DIR = "test";
|
|
@@ -4023,8 +4292,8 @@ function tryFmt(s) {
|
|
|
4023
4292
|
}
|
|
4024
4293
|
}
|
|
4025
4294
|
function CopyBtn({ text }) {
|
|
4026
|
-
const [done, setDone] = (0,
|
|
4027
|
-
return /* @__PURE__ */ (0,
|
|
4295
|
+
const [done, setDone] = (0, import_react23.useState)(false);
|
|
4296
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
4028
4297
|
"button",
|
|
4029
4298
|
{
|
|
4030
4299
|
onClick: () => {
|
|
@@ -4035,7 +4304,7 @@ function CopyBtn({ text }) {
|
|
|
4035
4304
|
},
|
|
4036
4305
|
style: { background: "none", border: "1px solid rgba(255,255,255,0.15)", borderRadius: 5, color: done ? "#4ade80" : "rgba(255,255,255,0.45)", fontSize: 10, padding: "3px 8px", cursor: "pointer", fontFamily: "inherit", display: "flex", alignItems: "center", gap: 3 },
|
|
4037
4306
|
children: [
|
|
4038
|
-
/* @__PURE__ */ (0,
|
|
4307
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: done ? "check" : "content_copy" }),
|
|
4039
4308
|
done ? "Kopiert" : "Copy"
|
|
4040
4309
|
]
|
|
4041
4310
|
}
|
|
@@ -4043,35 +4312,35 @@ function CopyBtn({ text }) {
|
|
|
4043
4312
|
}
|
|
4044
4313
|
function StepView({ step }) {
|
|
4045
4314
|
const isSpecial = step.method === "-" || step.method === "import()" || step.method === "import()+call";
|
|
4046
|
-
return /* @__PURE__ */ (0,
|
|
4047
|
-
/* @__PURE__ */ (0,
|
|
4048
|
-
/* @__PURE__ */ (0,
|
|
4049
|
-
/* @__PURE__ */ (0,
|
|
4050
|
-
step.durationMs !== void 0 && /* @__PURE__ */ (0,
|
|
4315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: 6, background: "rgba(0,0,0,0.3)", borderRadius: 7, padding: "7px 9px", border: `1px solid ${step.ok === false ? "rgba(248,113,113,0.2)" : "rgba(255,255,255,0.05)"}` }, children: [
|
|
4316
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }, children: [
|
|
4317
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { fontSize: 11, fontWeight: 700, color: step.ok === false ? "#f87171" : "#4ade80" }, children: step.ok === false ? "\u2717" : "\u2713" }),
|
|
4318
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { fontSize: 11, fontWeight: 600, color: "rgba(255,255,255,0.7)", flex: 1 }, children: step.label }),
|
|
4319
|
+
step.durationMs !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)" }, children: [
|
|
4051
4320
|
step.durationMs,
|
|
4052
4321
|
"ms"
|
|
4053
4322
|
] }),
|
|
4054
|
-
/* @__PURE__ */ (0,
|
|
4323
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CopyBtn, { text: JSON.stringify(step, null, 2) })
|
|
4055
4324
|
] }),
|
|
4056
|
-
!isSpecial && /* @__PURE__ */ (0,
|
|
4057
|
-
/* @__PURE__ */ (0,
|
|
4325
|
+
!isSpecial && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: 5 }, children: [
|
|
4326
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginBottom: 2 }, children: [
|
|
4058
4327
|
"\u2192 ",
|
|
4059
4328
|
step.method,
|
|
4060
4329
|
" ",
|
|
4061
4330
|
step.url
|
|
4062
4331
|
] }),
|
|
4063
|
-
Object.keys(step.reqHeaders).length > 0 && /* @__PURE__ */ (0,
|
|
4064
|
-
step.reqBody && /* @__PURE__ */ (0,
|
|
4332
|
+
Object.keys(step.reqHeaders).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { style: { fontSize: 9, color: "rgba(255,255,255,0.35)", margin: "2px 0", padding: "3px 5px", background: "rgba(255,255,255,0.03)", borderRadius: 3, whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: 60, overflow: "auto" }, children: Object.entries(step.reqHeaders).map(([k, v]) => `${k}: ${v}`).join("\n") }),
|
|
4333
|
+
step.reqBody && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { style: { fontSize: 9, color: "rgba(255,255,255,0.35)", margin: "2px 0", padding: "3px 5px", background: "rgba(255,255,255,0.03)", borderRadius: 3, whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: 80, overflow: "auto" }, children: step.reqBody })
|
|
4065
4334
|
] }),
|
|
4066
|
-
step.error && /* @__PURE__ */ (0,
|
|
4067
|
-
!step.error && (step.resStatus !== void 0 || step.resBody) && /* @__PURE__ */ (0,
|
|
4068
|
-
step.resStatus !== void 0 && /* @__PURE__ */ (0,
|
|
4335
|
+
step.error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { style: { fontSize: 11, color: "#f87171", margin: 0, padding: "3px 5px", background: "rgba(248,113,113,0.05)", borderRadius: 3, whiteSpace: "pre-wrap", wordBreak: "break-all" }, children: step.error }),
|
|
4336
|
+
!step.error && (step.resStatus !== void 0 || step.resBody) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
|
|
4337
|
+
step.resStatus !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { fontSize: 11, fontWeight: 700, color: (step.resStatus || 0) < 300 ? "#4ade80" : "#f87171", marginBottom: 3 }, children: [
|
|
4069
4338
|
"\u2190 ",
|
|
4070
4339
|
step.resStatus,
|
|
4071
4340
|
" ",
|
|
4072
4341
|
step.resStatusText
|
|
4073
4342
|
] }),
|
|
4074
|
-
step.resBody && /* @__PURE__ */ (0,
|
|
4343
|
+
step.resBody && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { style: { fontSize: 9, color: "rgba(255,255,255,0.55)", margin: 0, padding: "3px 5px", background: "rgba(255,255,255,0.03)", borderRadius: 3, whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: 180, overflow: "auto" }, children: tryFmt(step.resBody) })
|
|
4075
4344
|
] })
|
|
4076
4345
|
] });
|
|
4077
4346
|
}
|
|
@@ -4087,15 +4356,15 @@ function TestCard({
|
|
|
4087
4356
|
onToggle
|
|
4088
4357
|
}) {
|
|
4089
4358
|
const hasResult = state && state.status !== "idle";
|
|
4090
|
-
return /* @__PURE__ */ (0,
|
|
4091
|
-
/* @__PURE__ */ (0,
|
|
4092
|
-
/* @__PURE__ */ (0,
|
|
4093
|
-
/* @__PURE__ */ (0,
|
|
4094
|
-
/* @__PURE__ */ (0,
|
|
4095
|
-
/* @__PURE__ */ (0,
|
|
4359
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: 8, background: "rgba(255,255,255,0.03)", borderRadius: 10, border: `1px solid ${state?.status === "ok" ? "rgba(74,222,128,0.15)" : state?.status === "error" ? "rgba(248,113,113,0.15)" : "rgba(255,255,255,0.07)"}`, overflow: "hidden" }, children: [
|
|
4360
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "9px 10px" }, children: [
|
|
4361
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18, color: state?.status === "ok" ? "#4ade80" : state?.status === "error" ? "#f87171" : state?.status === "running" ? "#60a5fa" : "rgba(255,255,255,0.35)", flexShrink: 0 }, children: state?.status === "ok" ? "check_circle" : state?.status === "error" ? "error" : state?.status === "running" ? "hourglass_top" : icon }),
|
|
4362
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
4363
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { fontSize: 13, fontWeight: 700, color: "#fff" }, children: label }),
|
|
4364
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: desc })
|
|
4096
4365
|
] }),
|
|
4097
|
-
hasResult && state?.status !== "running" && /* @__PURE__ */ (0,
|
|
4098
|
-
/* @__PURE__ */ (0,
|
|
4366
|
+
hasResult && state?.status !== "running" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: onToggle, style: { background: "none", border: "none", color: "rgba(255,255,255,0.3)", cursor: "pointer", padding: 2, lineHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: expanded ? "expand_less" : "expand_more" }) }),
|
|
4367
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4099
4368
|
"button",
|
|
4100
4369
|
{
|
|
4101
4370
|
onClick: onRun,
|
|
@@ -4105,20 +4374,20 @@ function TestCard({
|
|
|
4105
4374
|
}
|
|
4106
4375
|
)
|
|
4107
4376
|
] }),
|
|
4108
|
-
hasResult && /* @__PURE__ */ (0,
|
|
4109
|
-
/* @__PURE__ */ (0,
|
|
4110
|
-
/* @__PURE__ */ (0,
|
|
4111
|
-
/* @__PURE__ */ (0,
|
|
4377
|
+
hasResult && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { borderTop: "1px solid rgba(255,255,255,0.05)" }, children: [
|
|
4378
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "4px 10px 5px", display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
4379
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { fontSize: 11, fontWeight: 700, color: state.status === "ok" ? "#4ade80" : "#f87171" }, children: state.status === "ok" ? "\u2713 OK" : state.status === "running" ? "\u2026" : "\u2717 Fehler" }),
|
|
4380
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)" }, children: [
|
|
4112
4381
|
state.totalMs,
|
|
4113
4382
|
"ms \xB7 ",
|
|
4114
4383
|
state.steps.length,
|
|
4115
4384
|
" Step",
|
|
4116
4385
|
state.steps.length !== 1 ? "s" : ""
|
|
4117
4386
|
] }),
|
|
4118
|
-
/* @__PURE__ */ (0,
|
|
4119
|
-
/* @__PURE__ */ (0,
|
|
4387
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { flex: 1 } }),
|
|
4388
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CopyBtn, { text: JSON.stringify(state, null, 2) })
|
|
4120
4389
|
] }),
|
|
4121
|
-
expanded && state.steps.map((step, i) => /* @__PURE__ */ (0,
|
|
4390
|
+
expanded && state.steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { padding: "0 10px 4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StepView, { step }) }, i))
|
|
4122
4391
|
] })
|
|
4123
4392
|
] });
|
|
4124
4393
|
}
|
|
@@ -4130,10 +4399,10 @@ var EVENT_TYPE_COLORS = {
|
|
|
4130
4399
|
};
|
|
4131
4400
|
function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadStatus }) {
|
|
4132
4401
|
if (!events.length) {
|
|
4133
|
-
return /* @__PURE__ */ (0,
|
|
4402
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { padding: "12px 14px", fontSize: 12, color: "rgba(255,255,255,0.3)", fontStyle: "italic" }, children: "Noch keine Events geladen." });
|
|
4134
4403
|
}
|
|
4135
4404
|
const sorted = [...events].sort((a, b) => b.ts - a.ts).slice(0, 30);
|
|
4136
|
-
return /* @__PURE__ */ (0,
|
|
4405
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "6px 8px 4px" }, children: [
|
|
4137
4406
|
sorted.map((e, i) => {
|
|
4138
4407
|
const eKey = `${e.ts}_${e.clientId}`;
|
|
4139
4408
|
const isConfirmed = confirmedEventKeys.has(eKey);
|
|
@@ -4146,47 +4415,47 @@ function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadSta
|
|
|
4146
4415
|
const uploadStatus = imgId ? imageUploadStatus.get(imgId) : void 0;
|
|
4147
4416
|
const payloadStr = JSON.stringify(e.payload ?? {});
|
|
4148
4417
|
const payloadPreview = payloadStr.length > 70 ? payloadStr.slice(0, 70) + "\u2026" : payloadStr;
|
|
4149
|
-
return /* @__PURE__ */ (0,
|
|
4150
|
-
/* @__PURE__ */ (0,
|
|
4151
|
-
/* @__PURE__ */ (0,
|
|
4152
|
-
/* @__PURE__ */ (0,
|
|
4153
|
-
/* @__PURE__ */ (0,
|
|
4154
|
-
/* @__PURE__ */ (0,
|
|
4155
|
-
/* @__PURE__ */ (0,
|
|
4156
|
-
isConfirmed ? /* @__PURE__ */ (0,
|
|
4157
|
-
/* @__PURE__ */ (0,
|
|
4418
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: 7, alignItems: "flex-start", padding: "6px 2px", borderBottom: "1px solid rgba(255,255,255,0.05)" }, children: [
|
|
4419
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { width: 36, height: 36, flexShrink: 0, borderRadius: 4, overflow: "hidden", background: "rgba(255,255,255,0.05)", display: "flex", alignItems: "center", justifyContent: "center" }, children: isImageEvent ? galleryItem?.base64 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: galleryItem.base64, style: { width: "100%", height: "100%", objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18, color: "rgba(255,255,255,0.2)" }, children: "image" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16, color: "rgba(255,255,255,0.15)" }, children: e.type === "tag_upserted" ? "label" : e.type === "metadata_updated" ? "edit_note" : "data_object" }) }),
|
|
4420
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
4421
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
|
|
4422
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { fontSize: 11, fontWeight: 700, color: typeColor }, children: e.type }),
|
|
4423
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", fontVariantNumeric: "tabular-nums" }, children: timeStr }),
|
|
4424
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { flex: 1 } }),
|
|
4425
|
+
isConfirmed ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: { fontSize: 9, fontWeight: 700, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
4426
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "check_circle" }),
|
|
4158
4427
|
"HF"
|
|
4159
|
-
] }) : /* @__PURE__ */ (0,
|
|
4160
|
-
/* @__PURE__ */ (0,
|
|
4428
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: { fontSize: 9, fontWeight: 700, color: "#fbbf24", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
4429
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "schedule" }),
|
|
4161
4430
|
"lokal"
|
|
4162
4431
|
] })
|
|
4163
4432
|
] }),
|
|
4164
|
-
isImageEvent && /* @__PURE__ */ (0,
|
|
4165
|
-
uploadStatus === "done" && /* @__PURE__ */ (0,
|
|
4166
|
-
/* @__PURE__ */ (0,
|
|
4433
|
+
isImageEvent && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3, flexWrap: "wrap" }, children: [
|
|
4434
|
+
uploadStatus === "done" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: { fontSize: 9, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
4435
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_done" }),
|
|
4167
4436
|
"Upload \u2713"
|
|
4168
4437
|
] }),
|
|
4169
|
-
uploadStatus === "uploading" && /* @__PURE__ */ (0,
|
|
4170
|
-
/* @__PURE__ */ (0,
|
|
4438
|
+
uploadStatus === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: { fontSize: 9, color: "#60a5fa", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
4439
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_upload" }),
|
|
4171
4440
|
"l\xE4dt hoch\u2026"
|
|
4172
4441
|
] }),
|
|
4173
|
-
uploadStatus === "failed" && /* @__PURE__ */ (0,
|
|
4174
|
-
/* @__PURE__ */ (0,
|
|
4442
|
+
uploadStatus === "failed" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: { fontSize: 9, color: "#f87171", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
4443
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_off" }),
|
|
4175
4444
|
"Upload fehlgeschlagen"
|
|
4176
4445
|
] }),
|
|
4177
|
-
galleryItem?.base64 ? /* @__PURE__ */ (0,
|
|
4178
|
-
/* @__PURE__ */ (0,
|
|
4446
|
+
galleryItem?.base64 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: { fontSize: 9, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
4447
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "photo" }),
|
|
4179
4448
|
uploadStatus ? "lokal" : "von HF geladen"
|
|
4180
|
-
] }) : /* @__PURE__ */ (0,
|
|
4181
|
-
/* @__PURE__ */ (0,
|
|
4449
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { style: { fontSize: 9, color: "#f87171", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
4450
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "broken_image" }),
|
|
4182
4451
|
uploadStatus === "failed" ? "Binary nicht auf HF" : "wird geladen\u2026"
|
|
4183
4452
|
] })
|
|
4184
4453
|
] }),
|
|
4185
|
-
/* @__PURE__ */ (0,
|
|
4454
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: payloadPreview })
|
|
4186
4455
|
] })
|
|
4187
4456
|
] }, `${eKey}_${i}`);
|
|
4188
4457
|
}),
|
|
4189
|
-
/* @__PURE__ */ (0,
|
|
4458
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "6px 0 2px", fontSize: 9, color: "rgba(255,255,255,0.2)", textAlign: "right" }, children: [
|
|
4190
4459
|
events.length,
|
|
4191
4460
|
" Events gesamt \xB7 ",
|
|
4192
4461
|
[...confirmedEventKeys].length,
|
|
@@ -4195,9 +4464,9 @@ function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadSta
|
|
|
4195
4464
|
] });
|
|
4196
4465
|
}
|
|
4197
4466
|
function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEventKeys = /* @__PURE__ */ new Set(), imageUploadStatus = /* @__PURE__ */ new Map() }) {
|
|
4198
|
-
const [selected, setSelected] = (0,
|
|
4199
|
-
const [results, setResults] = (0,
|
|
4200
|
-
const [expanded, setExpanded] = (0,
|
|
4467
|
+
const [selected, setSelected] = (0, import_react23.useState)(null);
|
|
4468
|
+
const [results, setResults] = (0, import_react23.useState)({});
|
|
4469
|
+
const [expanded, setExpanded] = (0, import_react23.useState)({});
|
|
4201
4470
|
const withResults = galleryItems.filter((g) => g.base64 && g.status === "done");
|
|
4202
4471
|
const setRunning = (id) => setResults((r) => ({ ...r, [id]: { status: "running", steps: [], totalMs: 0 } }));
|
|
4203
4472
|
const setDone = (id, steps, t0) => {
|
|
@@ -4245,15 +4514,15 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
4245
4514
|
{ id: "img-hub", label: "Upload hub lib", icon: "package_2", desc: "uploadFile() via @huggingface/hub" },
|
|
4246
4515
|
{ id: "img-cdn", label: "Upload CDN lib", icon: "language", desc: "uploadFile() via esm.sh hub lib" }
|
|
4247
4516
|
];
|
|
4248
|
-
return /* @__PURE__ */ (0,
|
|
4249
|
-
noToken && /* @__PURE__ */ (0,
|
|
4250
|
-
/* @__PURE__ */ (0,
|
|
4517
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflowY: "auto", padding: "12px 10px 80px", boxSizing: "border-box", fontFamily: "inherit" }, children: [
|
|
4518
|
+
noToken && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { marginBottom: 10, padding: "8px 12px", background: "rgba(248,113,113,0.08)", borderRadius: 8, border: "1px solid rgba(248,113,113,0.2)", fontSize: 12, color: "#f87171" }, children: "Kein HF-Token geladen \u2014 bitte zuerst Token im Sync-Tab eingeben." }),
|
|
4519
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4251
4520
|
CollapsibleCard,
|
|
4252
4521
|
{
|
|
4253
4522
|
title: "Event Monitor",
|
|
4254
|
-
icon: /* @__PURE__ */ (0,
|
|
4523
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "bolt" }),
|
|
4255
4524
|
defaultOpen: true,
|
|
4256
|
-
children: /* @__PURE__ */ (0,
|
|
4525
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4257
4526
|
EventMonitor,
|
|
4258
4527
|
{
|
|
4259
4528
|
events: allEvents,
|
|
@@ -4264,25 +4533,25 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
4264
4533
|
)
|
|
4265
4534
|
}
|
|
4266
4535
|
) }),
|
|
4267
|
-
/* @__PURE__ */ (0,
|
|
4536
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4268
4537
|
CollapsibleCard,
|
|
4269
4538
|
{
|
|
4270
4539
|
title: "Upload Tests",
|
|
4271
|
-
icon: /* @__PURE__ */ (0,
|
|
4540
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "science" }),
|
|
4272
4541
|
defaultOpen: false,
|
|
4273
|
-
children: /* @__PURE__ */ (0,
|
|
4274
|
-
/* @__PURE__ */ (0,
|
|
4275
|
-
/* @__PURE__ */ (0,
|
|
4542
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "10px 10px 4px" }, children: [
|
|
4543
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: 14 }, children: [
|
|
4544
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }, children: [
|
|
4276
4545
|
"Bild ausw\xE4hlen (",
|
|
4277
4546
|
withResults.length,
|
|
4278
4547
|
" verf\xFCgbar)"
|
|
4279
4548
|
] }),
|
|
4280
|
-
withResults.length === 0 ? /* @__PURE__ */ (0,
|
|
4549
|
+
withResults.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.3)", fontStyle: "italic" }, children: "Noch keine Bilder in der Galerie. Generiere zuerst ein Bild oder lade von HF." }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }, children: withResults.slice(0, 12).map((g) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4281
4550
|
"button",
|
|
4282
4551
|
{
|
|
4283
4552
|
onClick: () => setSelected(g),
|
|
4284
4553
|
style: { padding: 0, border: `2px solid ${selected?.id === g.id ? "#0284c7" : "transparent"}`, borderRadius: 6, cursor: "pointer", overflow: "hidden", background: "none", lineHeight: 0 },
|
|
4285
|
-
children: /* @__PURE__ */ (0,
|
|
4554
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4286
4555
|
"img",
|
|
4287
4556
|
{
|
|
4288
4557
|
src: g.base64,
|
|
@@ -4293,38 +4562,38 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
4293
4562
|
},
|
|
4294
4563
|
g.id
|
|
4295
4564
|
)) }),
|
|
4296
|
-
selected && /* @__PURE__ */ (0,
|
|
4297
|
-
/* @__PURE__ */ (0,
|
|
4565
|
+
selected && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginTop: 10, display: "flex", gap: 10, alignItems: "flex-start" }, children: [
|
|
4566
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4298
4567
|
"img",
|
|
4299
4568
|
{
|
|
4300
4569
|
src: selected.base64,
|
|
4301
4570
|
style: { width: 80, height: 80, objectFit: "cover", borderRadius: 8, border: "1px solid rgba(255,255,255,0.1)", flexShrink: 0 }
|
|
4302
4571
|
}
|
|
4303
4572
|
),
|
|
4304
|
-
/* @__PURE__ */ (0,
|
|
4305
|
-
/* @__PURE__ */ (0,
|
|
4306
|
-
/* @__PURE__ */ (0,
|
|
4573
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
4574
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.7)", marginBottom: 2 }, children: "Ausgew\xE4hlt" }),
|
|
4575
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", wordBreak: "break-all" }, children: [
|
|
4307
4576
|
"ID: ",
|
|
4308
4577
|
selected.id
|
|
4309
4578
|
] }),
|
|
4310
|
-
/* @__PURE__ */ (0,
|
|
4579
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }, children: [
|
|
4311
4580
|
"Ziel: test/",
|
|
4312
4581
|
selected.id,
|
|
4313
4582
|
".jpg"
|
|
4314
4583
|
] }),
|
|
4315
|
-
selected.prompt && /* @__PURE__ */ (0,
|
|
4584
|
+
selected.prompt && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selected.prompt })
|
|
4316
4585
|
] })
|
|
4317
4586
|
] })
|
|
4318
4587
|
] }),
|
|
4319
|
-
/* @__PURE__ */ (0,
|
|
4320
|
-
/* @__PURE__ */ (0,
|
|
4588
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: 14 }, children: [
|
|
4589
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
|
|
4321
4590
|
"Bild hochladen \u2192 test/",
|
|
4322
4591
|
"{",
|
|
4323
4592
|
"id",
|
|
4324
4593
|
"}",
|
|
4325
4594
|
".jpg"
|
|
4326
4595
|
] }),
|
|
4327
|
-
imgTests.map((t) => /* @__PURE__ */ (0,
|
|
4596
|
+
imgTests.map((t) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4328
4597
|
TestCard,
|
|
4329
4598
|
{
|
|
4330
4599
|
id: t.id,
|
|
@@ -4340,13 +4609,13 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
4340
4609
|
t.id
|
|
4341
4610
|
))
|
|
4342
4611
|
] }),
|
|
4343
|
-
/* @__PURE__ */ (0,
|
|
4344
|
-
/* @__PURE__ */ (0,
|
|
4612
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: 4 }, children: [
|
|
4613
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
|
|
4345
4614
|
"Event schreiben \u2192 ",
|
|
4346
4615
|
namespace || "(kein namespace)",
|
|
4347
4616
|
"test/events/"
|
|
4348
4617
|
] }),
|
|
4349
|
-
/* @__PURE__ */ (0,
|
|
4618
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4350
4619
|
TestCard,
|
|
4351
4620
|
{
|
|
4352
4621
|
id: "event",
|
|
@@ -4368,9 +4637,9 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
4368
4637
|
}
|
|
4369
4638
|
|
|
4370
4639
|
// src/components/AvatarArchitectApp.tsx
|
|
4371
|
-
var
|
|
4640
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
4372
4641
|
function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
|
|
4373
|
-
(0,
|
|
4642
|
+
(0, import_react24.useEffect)(() => {
|
|
4374
4643
|
const id = "flow-styles";
|
|
4375
4644
|
if (!document.getElementById(id)) {
|
|
4376
4645
|
const style = document.createElement("style");
|
|
@@ -4379,19 +4648,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4379
4648
|
document.head.appendChild(style);
|
|
4380
4649
|
}
|
|
4381
4650
|
}, []);
|
|
4382
|
-
const [showStart, setShowStart] = (0,
|
|
4383
|
-
const [layoutChoice, setLayoutChoice] = (0,
|
|
4651
|
+
const [showStart, setShowStart] = (0, import_react24.useState)(true);
|
|
4652
|
+
const [layoutChoice, setLayoutChoice] = (0, import_react24.useState)(() => {
|
|
4384
4653
|
try {
|
|
4385
4654
|
return localStorage.getItem("aa-layout") || null;
|
|
4386
4655
|
} catch {
|
|
4387
4656
|
return null;
|
|
4388
4657
|
}
|
|
4389
4658
|
});
|
|
4390
|
-
const [projectLoaded, setProjectLoaded] = (0,
|
|
4391
|
-
const [hfToken, setHfToken] = (0,
|
|
4392
|
-
const [hfTokenInput, setHfTokenInput] = (0,
|
|
4393
|
-
const [isLoadingFromHF, setIsLoadingFromHF] = (0,
|
|
4394
|
-
const [hfNamespaceLocal, setHfNamespaceLocal] = (0,
|
|
4659
|
+
const [projectLoaded, setProjectLoaded] = (0, import_react24.useState)(false);
|
|
4660
|
+
const [hfToken, setHfToken] = (0, import_react24.useState)(initialHfToken || "");
|
|
4661
|
+
const [hfTokenInput, setHfTokenInput] = (0, import_react24.useState)(initialHfToken || "");
|
|
4662
|
+
const [isLoadingFromHF, setIsLoadingFromHF] = (0, import_react24.useState)(false);
|
|
4663
|
+
const [hfNamespaceLocal, setHfNamespaceLocal] = (0, import_react24.useState)(() => {
|
|
4395
4664
|
try {
|
|
4396
4665
|
const stored = localStorage.getItem("aa-hf-namespace");
|
|
4397
4666
|
if (stored !== null) return stored;
|
|
@@ -4400,8 +4669,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4400
4669
|
return "";
|
|
4401
4670
|
}
|
|
4402
4671
|
});
|
|
4403
|
-
const [hfNamespaceFromServer, setHfNamespaceFromServer] = (0,
|
|
4404
|
-
(0,
|
|
4672
|
+
const [hfNamespaceFromServer, setHfNamespaceFromServer] = (0, import_react24.useState)(null);
|
|
4673
|
+
(0, import_react24.useEffect)(() => {
|
|
4405
4674
|
if (hfNamespace !== void 0) return;
|
|
4406
4675
|
const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
|
|
4407
4676
|
if (!backendUrl) return;
|
|
@@ -4423,35 +4692,35 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4423
4692
|
refresh: refreshHF,
|
|
4424
4693
|
hasStateZip
|
|
4425
4694
|
} = useHFState(hfToken, effectiveNamespace);
|
|
4426
|
-
const [imageUploadStatus, setImageUploadStatus] = (0,
|
|
4427
|
-
const [bootstrapLog, setBootstrapLog] = (0,
|
|
4428
|
-
const [isBootstrapping, setIsBootstrapping] = (0,
|
|
4429
|
-
const syncTopSlot = /* @__PURE__ */ (0,
|
|
4430
|
-
localOnlyCount > 0 && /* @__PURE__ */ (0,
|
|
4695
|
+
const [imageUploadStatus, setImageUploadStatus] = (0, import_react24.useState)(/* @__PURE__ */ new Map());
|
|
4696
|
+
const [bootstrapLog, setBootstrapLog] = (0, import_react24.useState)([]);
|
|
4697
|
+
const [isBootstrapping, setIsBootstrapping] = (0, import_react24.useState)(false);
|
|
4698
|
+
const syncTopSlot = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
4699
|
+
localOnlyCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { background: "rgba(234,179,8,0.15)", border: "1px solid rgba(234,179,8,0.3)", padding: "4px 10px", fontSize: 11, color: "#fbbf24", borderRadius: 4, marginBottom: 4 }, children: [
|
|
4431
4700
|
"\u26A0 ",
|
|
4432
4701
|
localOnlyCount,
|
|
4433
4702
|
" lokale Event",
|
|
4434
4703
|
localOnlyCount > 1 ? "s" : "",
|
|
4435
4704
|
" noch nicht auf HF best\xE4tigt"
|
|
4436
4705
|
] }),
|
|
4437
|
-
pendingBufferCount > 0 && /* @__PURE__ */ (0,
|
|
4706
|
+
pendingBufferCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { background: "linear-gradient(90deg,#f59e0b,#ef4444)", padding: "4px 10px", fontSize: 11, color: "#fff", borderRadius: 4, marginBottom: 4 }, children: [
|
|
4438
4707
|
pendingBufferCount,
|
|
4439
4708
|
" \xC4nderung",
|
|
4440
4709
|
pendingBufferCount > 1 ? "en" : "",
|
|
4441
4710
|
" lokal \u2014 bei Flow-Reload verloren wenn nicht synchronisiert"
|
|
4442
4711
|
] }),
|
|
4443
|
-
eventCount > 100 && /* @__PURE__ */ (0,
|
|
4712
|
+
eventCount > 100 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { background: "#dc2626", color: "#fff", padding: "5px 10px", borderRadius: 4, marginBottom: 4, fontWeight: 600, fontSize: 11 }, children: [
|
|
4444
4713
|
"\u26A0 ",
|
|
4445
4714
|
eventCount,
|
|
4446
4715
|
" Events nicht konsolidiert \u2014 Konsolidierung dringend empfohlen"
|
|
4447
4716
|
] }),
|
|
4448
|
-
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ (0,
|
|
4717
|
+
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { background: "#44403c", color: "#a8a29e", padding: "4px 10px", borderRadius: 4, marginBottom: 4, fontSize: 11 }, children: [
|
|
4449
4718
|
eventCount,
|
|
4450
4719
|
" Events seit letzter Konsolidierung \u2014 Konsolidierung empfohlen"
|
|
4451
4720
|
] }),
|
|
4452
|
-
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ (0,
|
|
4453
|
-
/* @__PURE__ */ (0,
|
|
4454
|
-
/* @__PURE__ */ (0,
|
|
4721
|
+
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { background: "#1c1917", border: "1px solid #44403c", borderRadius: 6, padding: "10px 12px" }, children: [
|
|
4722
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { fontSize: 12, color: "#a8a29e", marginBottom: 6 }, children: effectiveNamespace ? `Kein State-Snapshot in HF (${effectiveNamespace}) \u2014 aus Legacy-Daten (tags.json + metadata.json) migrieren?` : "Namespace wird geladen\u2026" }),
|
|
4723
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4455
4724
|
"button",
|
|
4456
4725
|
{
|
|
4457
4726
|
disabled: isBootstrapping || !effectiveNamespace,
|
|
@@ -4472,10 +4741,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4472
4741
|
children: isBootstrapping ? "Migriere\u2026" : "Legacy-Migration starten"
|
|
4473
4742
|
}
|
|
4474
4743
|
),
|
|
4475
|
-
bootstrapLog.length > 0 && /* @__PURE__ */ (0,
|
|
4744
|
+
bootstrapLog.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { marginTop: 6, fontFamily: "monospace", fontSize: 10, color: "#78716c", lineHeight: 1.6 }, children: bootstrapLog.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: l }, i)) })
|
|
4476
4745
|
] })
|
|
4477
4746
|
] });
|
|
4478
|
-
const wsInputRef = (0,
|
|
4747
|
+
const wsInputRef = (0, import_react24.useRef)(null);
|
|
4479
4748
|
const startApp = (choice) => {
|
|
4480
4749
|
try {
|
|
4481
4750
|
localStorage.setItem("aa-layout", choice);
|
|
@@ -4484,16 +4753,16 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4484
4753
|
setLayoutChoice(choice);
|
|
4485
4754
|
setShowStart(false);
|
|
4486
4755
|
};
|
|
4487
|
-
const [nodes, setNodes] = (0,
|
|
4488
|
-
const [edges, setEdges] = (0,
|
|
4489
|
-
const [history, setHistory] = (0,
|
|
4490
|
-
const [galleryItems, setGalleryItems] = (0,
|
|
4491
|
-
const galleryItemsRef = (0,
|
|
4492
|
-
(0,
|
|
4756
|
+
const [nodes, setNodes] = (0, import_react24.useState)([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
|
|
4757
|
+
const [edges, setEdges] = (0, import_react24.useState)([]);
|
|
4758
|
+
const [history, setHistory] = (0, import_react24.useState)([]);
|
|
4759
|
+
const [galleryItems, setGalleryItems] = (0, import_react24.useState)([]);
|
|
4760
|
+
const galleryItemsRef = (0, import_react24.useRef)([]);
|
|
4761
|
+
(0, import_react24.useEffect)(() => {
|
|
4493
4762
|
galleryItemsRef.current = galleryItems;
|
|
4494
4763
|
}, [galleryItems]);
|
|
4495
|
-
const hfImageNotFoundRef = (0,
|
|
4496
|
-
(0,
|
|
4764
|
+
const hfImageNotFoundRef = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
|
|
4765
|
+
(0, import_react24.useEffect)(() => {
|
|
4497
4766
|
if (!hfState) return;
|
|
4498
4767
|
if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
|
|
4499
4768
|
const hfIds = new Set(hfState.metadata.map((m) => m.id));
|
|
@@ -4535,62 +4804,62 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4535
4804
|
});
|
|
4536
4805
|
}
|
|
4537
4806
|
}, [hfState]);
|
|
4538
|
-
const [activePrompt, setActivePrompt] = (0,
|
|
4539
|
-
const [isSynthesizing, setIsSynthesizing] = (0,
|
|
4540
|
-
const [activeGenerationsCount, setActiveGenerationsCount] = (0,
|
|
4541
|
-
const [currentResult, setCurrentResult] = (0,
|
|
4542
|
-
const [focusedNodeId, setFocusedNodeId] = (0,
|
|
4543
|
-
const [leftTab, setLeftTab] = (0,
|
|
4544
|
-
const [promptFeedback, setPromptFeedback] = (0,
|
|
4545
|
-
const [lastPromptPayload, setLastPromptPayload] = (0,
|
|
4546
|
-
const [isPromptTabGenerating, setIsPromptTabGenerating] = (0,
|
|
4547
|
-
const [activeTab, setActiveTab] = (0,
|
|
4548
|
-
const [mobileTab, setMobileTab] = (0,
|
|
4549
|
-
const [middlePanel, setMiddlePanel] = (0,
|
|
4550
|
-
const [recentLabItems, setRecentLabItems] = (0,
|
|
4551
|
-
const [aspectRatio, setAspectRatio] = (0,
|
|
4552
|
-
const [selectedModel, setSelectedModel] = (0,
|
|
4553
|
-
const [seed, setSeed] = (0,
|
|
4554
|
-
const [seedMode, setSeedMode] = (0,
|
|
4555
|
-
const [isLeftCollapsed, setIsLeftCollapsed] = (0,
|
|
4556
|
-
const [isRightCollapsed, setIsRightCollapsed] = (0,
|
|
4557
|
-
const [leftPanelWidth, setLeftPanelWidth] = (0,
|
|
4807
|
+
const [activePrompt, setActivePrompt] = (0, import_react24.useState)("");
|
|
4808
|
+
const [isSynthesizing, setIsSynthesizing] = (0, import_react24.useState)(false);
|
|
4809
|
+
const [activeGenerationsCount, setActiveGenerationsCount] = (0, import_react24.useState)(0);
|
|
4810
|
+
const [currentResult, setCurrentResult] = (0, import_react24.useState)(null);
|
|
4811
|
+
const [focusedNodeId, setFocusedNodeId] = (0, import_react24.useState)(null);
|
|
4812
|
+
const [leftTab, setLeftTab] = (0, import_react24.useState)("prompt");
|
|
4813
|
+
const [promptFeedback, setPromptFeedback] = (0, import_react24.useState)(null);
|
|
4814
|
+
const [lastPromptPayload, setLastPromptPayload] = (0, import_react24.useState)(null);
|
|
4815
|
+
const [isPromptTabGenerating, setIsPromptTabGenerating] = (0, import_react24.useState)(false);
|
|
4816
|
+
const [activeTab, setActiveTab] = (0, import_react24.useState)("history");
|
|
4817
|
+
const [mobileTab, setMobileTab] = (0, import_react24.useState)("stage");
|
|
4818
|
+
const [middlePanel, setMiddlePanel] = (0, import_react24.useState)("stage");
|
|
4819
|
+
const [recentLabItems, setRecentLabItems] = (0, import_react24.useState)([]);
|
|
4820
|
+
const [aspectRatio, setAspectRatio] = (0, import_react24.useState)("1:1");
|
|
4821
|
+
const [selectedModel, setSelectedModel] = (0, import_react24.useState)("\u{1F34C} Nano Banana Pro");
|
|
4822
|
+
const [seed, setSeed] = (0, import_react24.useState)(Math.floor(Math.random() * 1e6));
|
|
4823
|
+
const [seedMode, setSeedMode] = (0, import_react24.useState)("random");
|
|
4824
|
+
const [isLeftCollapsed, setIsLeftCollapsed] = (0, import_react24.useState)(false);
|
|
4825
|
+
const [isRightCollapsed, setIsRightCollapsed] = (0, import_react24.useState)(false);
|
|
4826
|
+
const [leftPanelWidth, setLeftPanelWidth] = (0, import_react24.useState)(() => {
|
|
4558
4827
|
try {
|
|
4559
4828
|
return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
|
|
4560
4829
|
} catch {
|
|
4561
4830
|
return 260;
|
|
4562
4831
|
}
|
|
4563
4832
|
});
|
|
4564
|
-
const [rightPanelWidth, setRightPanelWidth] = (0,
|
|
4833
|
+
const [rightPanelWidth, setRightPanelWidth] = (0, import_react24.useState)(() => {
|
|
4565
4834
|
try {
|
|
4566
4835
|
return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
|
|
4567
4836
|
} catch {
|
|
4568
4837
|
return 320;
|
|
4569
4838
|
}
|
|
4570
4839
|
});
|
|
4571
|
-
const [isPromptCollapsed, setIsPromptCollapsed] = (0,
|
|
4572
|
-
const [projectActionState, setProjectActionState] = (0,
|
|
4573
|
-
const syncServerDataRef = (0,
|
|
4574
|
-
const [workspaceTags, setWorkspaceTags] = (0,
|
|
4575
|
-
const [serverProjects, setServerProjects] = (0,
|
|
4576
|
-
const [isLoadingFromServer, setIsLoadingFromServer] = (0,
|
|
4577
|
-
const [highContrast, setHighContrast] = (0,
|
|
4840
|
+
const [isPromptCollapsed, setIsPromptCollapsed] = (0, import_react24.useState)(false);
|
|
4841
|
+
const [projectActionState, setProjectActionState] = (0, import_react24.useState)("idle");
|
|
4842
|
+
const syncServerDataRef = (0, import_react24.useRef)(null);
|
|
4843
|
+
const [workspaceTags, setWorkspaceTags] = (0, import_react24.useState)(null);
|
|
4844
|
+
const [serverProjects, setServerProjects] = (0, import_react24.useState)([]);
|
|
4845
|
+
const [isLoadingFromServer, setIsLoadingFromServer] = (0, import_react24.useState)(false);
|
|
4846
|
+
const [highContrast, setHighContrast] = (0, import_react24.useState)(() => {
|
|
4578
4847
|
try {
|
|
4579
4848
|
return localStorage.getItem("aa-contrast") === "high";
|
|
4580
4849
|
} catch {
|
|
4581
4850
|
return false;
|
|
4582
4851
|
}
|
|
4583
4852
|
});
|
|
4584
|
-
const [activeReferenceId, setActiveReferenceId] = (0,
|
|
4585
|
-
const [activeReferenceThumbnail, setActiveReferenceThumbnail] = (0,
|
|
4586
|
-
const [isScanningImage, setIsScanningImage] = (0,
|
|
4587
|
-
const [touchStartX, setTouchStartX] = (0,
|
|
4588
|
-
const [isFullscreen, setIsFullscreen] = (0,
|
|
4589
|
-
const [zoomScale, setZoomScale] = (0,
|
|
4590
|
-
const [zoomOffset, setZoomOffset] = (0,
|
|
4591
|
-
const lastPinchDist = (0,
|
|
4592
|
-
const lastTapTime = (0,
|
|
4593
|
-
const dragStart = (0,
|
|
4853
|
+
const [activeReferenceId, setActiveReferenceId] = (0, import_react24.useState)(null);
|
|
4854
|
+
const [activeReferenceThumbnail, setActiveReferenceThumbnail] = (0, import_react24.useState)(null);
|
|
4855
|
+
const [isScanningImage, setIsScanningImage] = (0, import_react24.useState)(false);
|
|
4856
|
+
const [touchStartX, setTouchStartX] = (0, import_react24.useState)(null);
|
|
4857
|
+
const [isFullscreen, setIsFullscreen] = (0, import_react24.useState)(false);
|
|
4858
|
+
const [zoomScale, setZoomScale] = (0, import_react24.useState)(1);
|
|
4859
|
+
const [zoomOffset, setZoomOffset] = (0, import_react24.useState)({ x: 0, y: 0 });
|
|
4860
|
+
const lastPinchDist = (0, import_react24.useRef)(null);
|
|
4861
|
+
const lastTapTime = (0, import_react24.useRef)(0);
|
|
4862
|
+
const dragStart = (0, import_react24.useRef)(null);
|
|
4594
4863
|
const openFullscreen = () => {
|
|
4595
4864
|
setIsFullscreen(true);
|
|
4596
4865
|
setZoomScale(1);
|
|
@@ -4653,7 +4922,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4653
4922
|
setActiveReferenceId(null);
|
|
4654
4923
|
setActiveReferenceThumbnail(null);
|
|
4655
4924
|
};
|
|
4656
|
-
const labServices = (0,
|
|
4925
|
+
const labServices = (0, import_react24.useMemo)(() => {
|
|
4657
4926
|
const available = groupGenerationsToLabItems([...galleryItems, ...history]);
|
|
4658
4927
|
return {
|
|
4659
4928
|
availableItems: available,
|
|
@@ -4733,17 +5002,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4733
5002
|
setIsScanningImage(false);
|
|
4734
5003
|
}
|
|
4735
5004
|
};
|
|
4736
|
-
const currentIndex = (0,
|
|
4737
|
-
const goToPrev = (0,
|
|
5005
|
+
const currentIndex = (0, import_react24.useMemo)(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
|
|
5006
|
+
const goToPrev = (0, import_react24.useCallback)(() => {
|
|
4738
5007
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
4739
5008
|
}, [currentIndex, history]);
|
|
4740
|
-
const goToNext = (0,
|
|
5009
|
+
const goToNext = (0, import_react24.useCallback)(() => {
|
|
4741
5010
|
if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
|
|
4742
5011
|
}, [currentIndex, history]);
|
|
4743
5012
|
const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
|
|
4744
5013
|
const isGenerating = activeGenerationsCount > 0;
|
|
4745
5014
|
useKeyboardNavigation(history, currentResult, setCurrentResult);
|
|
4746
|
-
const getSubtreeFormat = (0,
|
|
5015
|
+
const getSubtreeFormat = (0, import_react24.useCallback)((nodeId, depth = 0) => {
|
|
4747
5016
|
const node = nodes.find((n) => n.id === nodeId);
|
|
4748
5017
|
if (!node) return "";
|
|
4749
5018
|
const childrenIds = edges.filter((e) => e.source === nodeId).map((e) => e.target);
|
|
@@ -4751,7 +5020,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4751
5020
|
return `${indent}- ${node.data.label || "(unbenannt)"}
|
|
4752
5021
|
` + childrenIds.map((id) => getSubtreeFormat(id, depth + 1)).join("");
|
|
4753
5022
|
}, [nodes, edges]);
|
|
4754
|
-
const activePath = (0,
|
|
5023
|
+
const activePath = (0, import_react24.useMemo)(() => {
|
|
4755
5024
|
if (!focusedNodeId) return /* @__PURE__ */ new Set();
|
|
4756
5025
|
const path = /* @__PURE__ */ new Set([focusedNodeId]);
|
|
4757
5026
|
let currId = focusedNodeId;
|
|
@@ -4771,13 +5040,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4771
5040
|
const activeSeed = seedMode === "random" ? Math.floor(Math.random() * 1e9) : seed;
|
|
4772
5041
|
const newGen = { id: genId, nodeId: overrideNodeId || focusedNodeId || "1", status: "processing", timestamp: Date.now(), prompt: promptToUse, seed: activeSeed, model: selectedModel, tags: [], type: "generation" };
|
|
4773
5042
|
setHistory((prev) => [newGen, ...prev]);
|
|
5043
|
+
setGalleryItems((prev) => [newGen, ...prev]);
|
|
4774
5044
|
if (!options.silent) setCurrentResult(newGen);
|
|
4775
5045
|
if (seedMode === "random") setSeed(activeSeed);
|
|
4776
5046
|
try {
|
|
4777
5047
|
const { base64, mediaId } = await onGenerateImage(buildImageGenerationOptions(promptToUse, aspectRatio, selectedModel, useReferenceId ?? activeReferenceId ?? void 0));
|
|
4778
5048
|
const finishedGen = { ...newGen, status: "done", base64: `data:image/png;base64,${base64}`, mediaId };
|
|
4779
5049
|
setHistory((prev) => prev.map((g) => g.id === genId ? finishedGen : g));
|
|
4780
|
-
setGalleryItems((prev) =>
|
|
5050
|
+
setGalleryItems((prev) => prev.map((g) => g.id === genId ? finishedGen : g));
|
|
4781
5051
|
setCurrentResult((prev) => {
|
|
4782
5052
|
if (!prev) return finishedGen;
|
|
4783
5053
|
if (prev.id === genId || !options.silent) return finishedGen;
|
|
@@ -4807,6 +5077,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4807
5077
|
} catch (err) {
|
|
4808
5078
|
const errorGen = { ...newGen, status: "error", error: { message: err.message || "Unbekannter Fehler", details: err.toString() } };
|
|
4809
5079
|
setHistory((prev) => prev.map((g) => g.id === genId ? errorGen : g));
|
|
5080
|
+
setGalleryItems((prev) => prev.filter((g) => g.id !== genId));
|
|
4810
5081
|
if (!options.silent || currentResult?.id === genId) setCurrentResult(errorGen);
|
|
4811
5082
|
} finally {
|
|
4812
5083
|
setActiveGenerationsCount((prev) => Math.max(0, prev - 1));
|
|
@@ -5097,7 +5368,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5097
5368
|
setTimeout(() => setProjectActionState("idle"), 4e3);
|
|
5098
5369
|
}
|
|
5099
5370
|
};
|
|
5100
|
-
(0,
|
|
5371
|
+
(0, import_react24.useEffect)(() => {
|
|
5101
5372
|
if (activeTab === "setup" || activeTab === "sync") fetchServerProjects();
|
|
5102
5373
|
}, [activeTab]);
|
|
5103
5374
|
const mergeWorkspaceTags = (local, remote) => {
|
|
@@ -5121,7 +5392,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5121
5392
|
};
|
|
5122
5393
|
if (isFullscreen && currentResult?.base64) {
|
|
5123
5394
|
const fsBase64 = currentResult.base64.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}`;
|
|
5124
|
-
return /* @__PURE__ */ (0,
|
|
5395
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
5125
5396
|
"div",
|
|
5126
5397
|
{
|
|
5127
5398
|
className: "fixed inset-0 bg-black z-50 flex items-center justify-center overflow-hidden touch-none",
|
|
@@ -5129,7 +5400,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5129
5400
|
onTouchMove: handleFsTouchMove,
|
|
5130
5401
|
onTouchEnd: handleFsTouchEnd,
|
|
5131
5402
|
children: [
|
|
5132
|
-
/* @__PURE__ */ (0,
|
|
5403
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5133
5404
|
"img",
|
|
5134
5405
|
{
|
|
5135
5406
|
src: fsBase64,
|
|
@@ -5146,77 +5417,77 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5146
5417
|
}
|
|
5147
5418
|
}
|
|
5148
5419
|
),
|
|
5149
|
-
/* @__PURE__ */ (0,
|
|
5150
|
-
zoomScale > 1 && /* @__PURE__ */ (0,
|
|
5420
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: closeFullscreen, className: "absolute top-4 right-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "close" }) }),
|
|
5421
|
+
zoomScale > 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => {
|
|
5151
5422
|
setZoomScale(1);
|
|
5152
5423
|
setZoomOffset({ x: 0, y: 0 });
|
|
5153
|
-
}, className: "absolute top-4 left-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ (0,
|
|
5154
|
-
history.length > 1 && /* @__PURE__ */ (0,
|
|
5155
|
-
/* @__PURE__ */ (0,
|
|
5424
|
+
}, className: "absolute top-4 left-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "zoom_out_map" }) }),
|
|
5425
|
+
history.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
5426
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => {
|
|
5156
5427
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
5157
|
-
}, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ (0,
|
|
5158
|
-
/* @__PURE__ */ (0,
|
|
5428
|
+
}, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
5429
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => {
|
|
5159
5430
|
if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
|
|
5160
|
-
}, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ (0,
|
|
5161
|
-
/* @__PURE__ */ (0,
|
|
5431
|
+
}, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
5432
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
|
|
5162
5433
|
currentIndex + 1,
|
|
5163
5434
|
" / ",
|
|
5164
5435
|
history.length
|
|
5165
5436
|
] })
|
|
5166
5437
|
] }),
|
|
5167
|
-
zoomScale === 1 && /* @__PURE__ */ (0,
|
|
5438
|
+
zoomScale === 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute bottom-6 right-4 text-[9px] text-white/20 font-mono", children: "Pinch zum Zoomen \xB7 Doppeltipp 2.5\xD7" })
|
|
5168
5439
|
]
|
|
5169
5440
|
}
|
|
5170
5441
|
);
|
|
5171
5442
|
}
|
|
5172
5443
|
if (showStart) {
|
|
5173
|
-
return /* @__PURE__ */ (0,
|
|
5174
|
-
/* @__PURE__ */ (0,
|
|
5444
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
|
|
5445
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { ref: wsInputRef, type: "file", accept: ".zip", className: "hidden", onChange: (e) => {
|
|
5175
5446
|
const f = e.target.files?.[0];
|
|
5176
5447
|
if (f) handleProjectImport(f);
|
|
5177
5448
|
e.target.value = "";
|
|
5178
5449
|
} }),
|
|
5179
|
-
/* @__PURE__ */ (0,
|
|
5180
|
-
/* @__PURE__ */ (0,
|
|
5181
|
-
/* @__PURE__ */ (0,
|
|
5182
|
-
/* @__PURE__ */ (0,
|
|
5450
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
|
|
5451
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
|
|
5452
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" }),
|
|
5453
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "text-white text-[13px] font-mono", children: [
|
|
5183
5454
|
"v",
|
|
5184
5455
|
LIB_VERSION
|
|
5185
5456
|
] })
|
|
5186
5457
|
] }),
|
|
5187
|
-
/* @__PURE__ */ (0,
|
|
5458
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
5188
5459
|
"button",
|
|
5189
5460
|
{
|
|
5190
5461
|
onClick: toggleContrast,
|
|
5191
5462
|
className: "flex items-center gap-3 px-5 py-3 rounded-2xl border transition-colors",
|
|
5192
5463
|
style: { borderColor: highContrast ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.08)", background: highContrast ? "rgba(255,255,255,0.08)" : "transparent" },
|
|
5193
5464
|
children: [
|
|
5194
|
-
/* @__PURE__ */ (0,
|
|
5195
|
-
/* @__PURE__ */ (0,
|
|
5196
|
-
/* @__PURE__ */ (0,
|
|
5197
|
-
/* @__PURE__ */ (0,
|
|
5465
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[22px]", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.35)" }, children: highContrast ? "light_mode" : "dark_mode" }),
|
|
5466
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-start", children: [
|
|
5467
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[13px] font-bold", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.5)" }, children: highContrast ? "Hoher Kontrast" : "Normaler Kontrast" }),
|
|
5468
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[10px]", style: { color: "rgba(255,255,255,0.25)" }, children: "Tippen zum Umschalten" })
|
|
5198
5469
|
] })
|
|
5199
5470
|
]
|
|
5200
5471
|
}
|
|
5201
5472
|
),
|
|
5202
|
-
/* @__PURE__ */ (0,
|
|
5203
|
-
/* @__PURE__ */ (0,
|
|
5473
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5474
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
5204
5475
|
"button",
|
|
5205
5476
|
{
|
|
5206
5477
|
onClick: () => wsInputRef.current?.click(),
|
|
5207
5478
|
className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform",
|
|
5208
5479
|
style: { height: 56, background: projectLoaded ? "#16a34a" : "#0284c7" },
|
|
5209
5480
|
children: [
|
|
5210
|
-
/* @__PURE__ */ (0,
|
|
5481
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: projectLoaded ? "check_circle" : "folder_zip" }),
|
|
5211
5482
|
projectLoaded ? "Projekt geladen \u2713" : "Projekt laden (.zip)"
|
|
5212
5483
|
]
|
|
5213
5484
|
}
|
|
5214
5485
|
),
|
|
5215
|
-
!projectLoaded && /* @__PURE__ */ (0,
|
|
5486
|
+
!projectLoaded && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
|
|
5216
5487
|
] }),
|
|
5217
|
-
/* @__PURE__ */ (0,
|
|
5218
|
-
!initialHfToken && /* @__PURE__ */ (0,
|
|
5219
|
-
/* @__PURE__ */ (0,
|
|
5488
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5489
|
+
!initialHfToken && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex gap-2 w-full", children: [
|
|
5490
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5220
5491
|
"input",
|
|
5221
5492
|
{
|
|
5222
5493
|
type: "password",
|
|
@@ -5232,7 +5503,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5232
5503
|
style: { height: 44, background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.7)" }
|
|
5233
5504
|
}
|
|
5234
5505
|
),
|
|
5235
|
-
hfTokenInput.trim() && /* @__PURE__ */ (0,
|
|
5506
|
+
hfTokenInput.trim() && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5236
5507
|
"button",
|
|
5237
5508
|
{
|
|
5238
5509
|
type: "button",
|
|
@@ -5243,9 +5514,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5243
5514
|
}
|
|
5244
5515
|
)
|
|
5245
5516
|
] }),
|
|
5246
|
-
!hfNamespace && /* @__PURE__ */ (0,
|
|
5247
|
-
/* @__PURE__ */ (0,
|
|
5248
|
-
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ (0,
|
|
5517
|
+
!hfNamespace && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-3 w-full", children: [
|
|
5518
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold flex-shrink-0", children: "State:" }),
|
|
5519
|
+
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5249
5520
|
"button",
|
|
5250
5521
|
{
|
|
5251
5522
|
onClick: () => {
|
|
@@ -5265,7 +5536,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5265
5536
|
ns
|
|
5266
5537
|
))
|
|
5267
5538
|
] }),
|
|
5268
|
-
hfToken && /* @__PURE__ */ (0,
|
|
5539
|
+
hfToken && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
5269
5540
|
"button",
|
|
5270
5541
|
{
|
|
5271
5542
|
disabled: isLoadingFromHF,
|
|
@@ -5287,15 +5558,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5287
5558
|
className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform disabled:opacity-50",
|
|
5288
5559
|
style: { height: 56, background: "#f59e0b" },
|
|
5289
5560
|
children: [
|
|
5290
|
-
/* @__PURE__ */ (0,
|
|
5561
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromHF ? " animate-spin" : ""}`, children: isLoadingFromHF ? "sync" : "cloud_download" }),
|
|
5291
5562
|
isLoadingFromHF ? "Laden\u2026" : "Von HF laden"
|
|
5292
5563
|
]
|
|
5293
5564
|
}
|
|
5294
5565
|
),
|
|
5295
|
-
hfToken && /* @__PURE__ */ (0,
|
|
5566
|
+
hfToken && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand von Hugging Face laden" })
|
|
5296
5567
|
] }),
|
|
5297
|
-
onFetchServerProjects && /* @__PURE__ */ (0,
|
|
5298
|
-
/* @__PURE__ */ (0,
|
|
5568
|
+
onFetchServerProjects && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5569
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
5299
5570
|
"button",
|
|
5300
5571
|
{
|
|
5301
5572
|
disabled: isLoadingFromServer,
|
|
@@ -5316,35 +5587,35 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5316
5587
|
className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform disabled:opacity-50",
|
|
5317
5588
|
style: { height: 56, background: "#7c3aed" },
|
|
5318
5589
|
children: [
|
|
5319
|
-
/* @__PURE__ */ (0,
|
|
5590
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromServer ? " animate-spin" : ""}`, children: isLoadingFromServer ? "sync" : "cloud_download" }),
|
|
5320
5591
|
isLoadingFromServer ? "Laden\u2026" : "Vom Server laden"
|
|
5321
5592
|
]
|
|
5322
5593
|
}
|
|
5323
5594
|
),
|
|
5324
|
-
/* @__PURE__ */ (0,
|
|
5595
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand vom Server wiederherstellen" })
|
|
5325
5596
|
] }),
|
|
5326
|
-
/* @__PURE__ */ (0,
|
|
5327
|
-
/* @__PURE__ */ (0,
|
|
5328
|
-
/* @__PURE__ */ (0,
|
|
5597
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5598
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
|
|
5599
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
|
|
5329
5600
|
{ id: "mobile", icon: "smartphone", label: "Mobile" },
|
|
5330
5601
|
{ id: "mobile-desktop", icon: "phonelink", label: "Mobile+" },
|
|
5331
5602
|
{ id: "desktop", icon: "desktop_windows", label: "Desktop" },
|
|
5332
5603
|
{ id: "tablet-landscape", icon: "tablet", label: "Landscape" }
|
|
5333
|
-
].map((opt) => /* @__PURE__ */ (0,
|
|
5604
|
+
].map((opt) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
5334
5605
|
"button",
|
|
5335
5606
|
{
|
|
5336
5607
|
onClick: () => startApp(opt.id),
|
|
5337
5608
|
className: "flex flex-col items-center gap-2 py-4 rounded-2xl border transition-colors",
|
|
5338
5609
|
style: { borderColor: layoutChoice === opt.id ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.08)", background: layoutChoice === opt.id ? "rgba(255,255,255,0.07)" : "transparent" },
|
|
5339
5610
|
children: [
|
|
5340
|
-
/* @__PURE__ */ (0,
|
|
5341
|
-
/* @__PURE__ */ (0,
|
|
5611
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[24px]", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.icon }),
|
|
5612
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[11px] font-bold", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.label })
|
|
5342
5613
|
]
|
|
5343
5614
|
},
|
|
5344
5615
|
opt.id
|
|
5345
5616
|
)) }),
|
|
5346
|
-
layoutChoice === "mobile-desktop" && /* @__PURE__ */ (0,
|
|
5347
|
-
layoutChoice === "tablet-landscape" && /* @__PURE__ */ (0,
|
|
5617
|
+
layoutChoice === "mobile-desktop" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
|
|
5618
|
+
layoutChoice === "tablet-landscape" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-white/20 text-[9px] text-center", children: "2-Spalten-Layout f\xFCr Landscape-Tablet im Desktop-Mode" })
|
|
5348
5619
|
] })
|
|
5349
5620
|
] });
|
|
5350
5621
|
}
|
|
@@ -5353,21 +5624,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5353
5624
|
const mdScale = mdMode ? window.innerWidth / 430 : 1;
|
|
5354
5625
|
const mdW = mdMode ? 430 : void 0;
|
|
5355
5626
|
const mdH = mdMode ? Math.ceil(window.innerHeight / mdScale) : void 0;
|
|
5356
|
-
const mobileRoot = /* @__PURE__ */ (0,
|
|
5627
|
+
const mobileRoot = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
|
|
5357
5628
|
width: mdMode ? mdW : "100vw",
|
|
5358
5629
|
height: mdMode ? mdH : "100dvh",
|
|
5359
5630
|
transform: mdMode ? `scale(${mdScale})` : void 0,
|
|
5360
5631
|
transformOrigin: mdMode ? "top left" : void 0,
|
|
5361
5632
|
...hcStyle || {}
|
|
5362
5633
|
}, children: [
|
|
5363
|
-
mobileTab === "labs" && /* @__PURE__ */ (0,
|
|
5634
|
+
mobileTab === "labs" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LabsTab, { services: labServices, onResult: (item) => {
|
|
5364
5635
|
const frame = item.frames[0];
|
|
5365
5636
|
if (frame?.base64) {
|
|
5366
5637
|
setCurrentResult(frameToGeneration(frame, item));
|
|
5367
5638
|
setMobileTab("stage");
|
|
5368
5639
|
}
|
|
5369
5640
|
} }) }),
|
|
5370
|
-
mobileTab === "tags" && workspaceTags && /* @__PURE__ */ (0,
|
|
5641
|
+
mobileTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5371
5642
|
TagManagerPanel,
|
|
5372
5643
|
{
|
|
5373
5644
|
workspaceTags,
|
|
@@ -5378,21 +5649,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5378
5649
|
onTagMove: handleTagMove
|
|
5379
5650
|
}
|
|
5380
5651
|
) }),
|
|
5381
|
-
mobileTab === "stage" && /* @__PURE__ */ (0,
|
|
5382
|
-
/* @__PURE__ */ (0,
|
|
5383
|
-
/* @__PURE__ */ (0,
|
|
5384
|
-
/* @__PURE__ */ (0,
|
|
5385
|
-
/* @__PURE__ */ (0,
|
|
5386
|
-
activeReferenceThumbnail ? /* @__PURE__ */ (0,
|
|
5387
|
-
/* @__PURE__ */ (0,
|
|
5388
|
-
/* @__PURE__ */ (0,
|
|
5389
|
-
/* @__PURE__ */ (0,
|
|
5390
|
-
] }) : /* @__PURE__ */ (0,
|
|
5391
|
-
/* @__PURE__ */ (0,
|
|
5392
|
-
/* @__PURE__ */ (0,
|
|
5652
|
+
mobileTab === "stage" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
5653
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
|
|
5654
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5655
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
|
|
5656
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1" }),
|
|
5657
|
+
activeReferenceThumbnail ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden mr-2", style: { height: 28 }, children: [
|
|
5658
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
5659
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
5660
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 active:text-white/80 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5661
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: handleSelectReference, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "add_photo_alternate" }) }),
|
|
5662
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: toggleContrast, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
5663
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => setShowStart(true), className: "text-white/20 active:text-white/60 transition-colors mr-1", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "desktop_windows" }) })
|
|
5393
5664
|
] }),
|
|
5394
|
-
/* @__PURE__ */ (0,
|
|
5395
|
-
/* @__PURE__ */ (0,
|
|
5665
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `relative rounded-xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
5666
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5396
5667
|
"textarea",
|
|
5397
5668
|
{
|
|
5398
5669
|
value: activePrompt,
|
|
@@ -5402,26 +5673,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5402
5673
|
placeholder: "Prompt eingeben..."
|
|
5403
5674
|
}
|
|
5404
5675
|
),
|
|
5405
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */ (0,
|
|
5676
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center text-white/20 active:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
|
|
5406
5677
|
] }) }),
|
|
5407
|
-
/* @__PURE__ */ (0,
|
|
5678
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5408
5679
|
"button",
|
|
5409
5680
|
{
|
|
5410
5681
|
onClick: () => handleGenerateImage(),
|
|
5411
5682
|
disabled: !activePrompt.trim() || isGenerating,
|
|
5412
5683
|
className: "w-full flex items-center justify-center gap-2 rounded-xl font-bold text-[14px] uppercase tracking-wide transition-all disabled:opacity-30 active:scale-95",
|
|
5413
5684
|
style: { height: 48, background: activePrompt.trim() && !isGenerating ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
|
|
5414
|
-
children: isGenerating ? /* @__PURE__ */ (0,
|
|
5415
|
-
/* @__PURE__ */ (0,
|
|
5416
|
-
/* @__PURE__ */ (0,
|
|
5417
|
-
] }) : /* @__PURE__ */ (0,
|
|
5418
|
-
/* @__PURE__ */ (0,
|
|
5419
|
-
/* @__PURE__ */ (0,
|
|
5685
|
+
children: isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
5686
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-4 h-4 border-t-2 border-white rounded-full animate-spin" }),
|
|
5687
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Generiere..." })
|
|
5688
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
5689
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
|
|
5690
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Generieren" })
|
|
5420
5691
|
] })
|
|
5421
5692
|
}
|
|
5422
5693
|
) }),
|
|
5423
|
-
/* @__PURE__ */ (0,
|
|
5424
|
-
/* @__PURE__ */ (0,
|
|
5694
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
|
|
5695
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
5425
5696
|
"div",
|
|
5426
5697
|
{
|
|
5427
5698
|
className: "w-full rounded-2xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center",
|
|
@@ -5435,25 +5706,25 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5435
5706
|
setTouchStartX(null);
|
|
5436
5707
|
},
|
|
5437
5708
|
children: [
|
|
5438
|
-
currentResult?.status === "processing" && /* @__PURE__ */ (0,
|
|
5439
|
-
/* @__PURE__ */ (0,
|
|
5440
|
-
/* @__PURE__ */ (0,
|
|
5709
|
+
currentResult?.status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
|
|
5710
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
|
|
5711
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[11px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
5441
5712
|
] }),
|
|
5442
|
-
currentResult?.status === "error" && /* @__PURE__ */ (0,
|
|
5443
|
-
/* @__PURE__ */ (0,
|
|
5444
|
-
/* @__PURE__ */ (0,
|
|
5445
|
-
/* @__PURE__ */ (0,
|
|
5713
|
+
currentResult?.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
|
|
5714
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
|
|
5715
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
|
|
5716
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => handleGenerateImage(currentResult.prompt), className: "px-4 py-2 rounded-lg border border-white/20 text-[13px] text-white/70 active:bg-white/10", children: "Erneut versuchen" })
|
|
5446
5717
|
] }),
|
|
5447
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0,
|
|
5448
|
-
!currentResult && /* @__PURE__ */ (0,
|
|
5449
|
-
/* @__PURE__ */ (0,
|
|
5450
|
-
/* @__PURE__ */ (0,
|
|
5718
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: currentResult.base64, className: "w-full h-full object-contain" }),
|
|
5719
|
+
!currentResult && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
5720
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
|
|
5721
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
5451
5722
|
] }),
|
|
5452
|
-
currentResult?.status === "done" && /* @__PURE__ */ (0,
|
|
5453
|
-
history.length > 1 && currentResult && /* @__PURE__ */ (0,
|
|
5454
|
-
/* @__PURE__ */ (0,
|
|
5455
|
-
/* @__PURE__ */ (0,
|
|
5456
|
-
/* @__PURE__ */ (0,
|
|
5723
|
+
currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: openFullscreen, className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center rounded-full bg-black/60 border border-white/10 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "fullscreen" }) }),
|
|
5724
|
+
history.length > 1 && currentResult && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
5725
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: goToPrev, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
5726
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
5727
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
|
|
5457
5728
|
currentIndex + 1,
|
|
5458
5729
|
" / ",
|
|
5459
5730
|
history.length
|
|
@@ -5462,33 +5733,33 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5462
5733
|
]
|
|
5463
5734
|
}
|
|
5464
5735
|
),
|
|
5465
|
-
currentResult?.status === "done" && /* @__PURE__ */ (0,
|
|
5466
|
-
/* @__PURE__ */ (0,
|
|
5467
|
-
/* @__PURE__ */ (0,
|
|
5468
|
-
/* @__PURE__ */ (0,
|
|
5736
|
+
currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex gap-2 mt-3", children: [
|
|
5737
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
|
|
5738
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
|
|
5739
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[12px] text-white/60", children: "Prompt" })
|
|
5469
5740
|
] }),
|
|
5470
|
-
/* @__PURE__ */ (0,
|
|
5471
|
-
/* @__PURE__ */ (0,
|
|
5472
|
-
/* @__PURE__ */ (0,
|
|
5741
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl bg-white/10 active:bg-white/15 transition-colors", style: { height: 44 }, children: [
|
|
5742
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
|
|
5743
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
|
|
5473
5744
|
] }),
|
|
5474
|
-
/* @__PURE__ */ (0,
|
|
5475
|
-
/* @__PURE__ */ (0,
|
|
5476
|
-
/* @__PURE__ */ (0,
|
|
5745
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: handleDownloadSingle, className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
|
|
5746
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "download" }),
|
|
5747
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[12px] text-white/60", children: "Laden" })
|
|
5477
5748
|
] })
|
|
5478
5749
|
] })
|
|
5479
5750
|
] })
|
|
5480
5751
|
] }),
|
|
5481
|
-
mobileTab === "browse" && /* @__PURE__ */ (0,
|
|
5482
|
-
/* @__PURE__ */ (0,
|
|
5483
|
-
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ (0,
|
|
5484
|
-
hfToken && /* @__PURE__ */ (0,
|
|
5752
|
+
mobileTab === "browse" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
5753
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
5754
|
+
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => setActiveTab(tab), className: `flex-1 flex items-center justify-center gap-1.5 transition-colors text-[11px] font-bold uppercase tracking-wide ${activeTab === tab ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : "info" }) }, tab)),
|
|
5755
|
+
hfToken && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => refreshHF(), disabled: isHfRefreshing, className: "w-12 flex items-center justify-center text-white/20 active:text-white transition-colors disabled:opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
|
|
5485
5756
|
] }),
|
|
5486
|
-
/* @__PURE__ */ (0,
|
|
5487
|
-
activeTab === "history" && /* @__PURE__ */ (0,
|
|
5757
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5758
|
+
activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: (g) => {
|
|
5488
5759
|
setCurrentResult(g);
|
|
5489
5760
|
setMobileTab("stage");
|
|
5490
5761
|
}, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
|
|
5491
|
-
activeTab === "gallery" && /* @__PURE__ */ (0,
|
|
5762
|
+
activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5492
5763
|
MediaLibrary,
|
|
5493
5764
|
{
|
|
5494
5765
|
items: galleryItems,
|
|
@@ -5508,43 +5779,43 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5508
5779
|
}
|
|
5509
5780
|
}
|
|
5510
5781
|
),
|
|
5511
|
-
activeTab === "inspect" && /* @__PURE__ */ (0,
|
|
5782
|
+
activeTab === "inspect" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(InspectPanel, { currentResult, history, onSelect: (g) => {
|
|
5512
5783
|
setCurrentResult(g);
|
|
5513
5784
|
} })
|
|
5514
5785
|
] })
|
|
5515
5786
|
] }),
|
|
5516
|
-
/* @__PURE__ */ (0,
|
|
5517
|
-
/* @__PURE__ */ (0,
|
|
5518
|
-
workspaceTags && /* @__PURE__ */ (0,
|
|
5787
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: mobileTab === "tools" ? "flex" : "none" }, className: "flex flex-col flex-1 min-h-0", children: [
|
|
5788
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
5789
|
+
workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: () => {
|
|
5519
5790
|
setLeftTab("prompt");
|
|
5520
5791
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
5521
5792
|
}, className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
5522
|
-
/* @__PURE__ */ (0,
|
|
5793
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
|
|
5523
5794
|
"Prompt"
|
|
5524
5795
|
] }),
|
|
5525
|
-
/* @__PURE__ */ (0,
|
|
5796
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: () => {
|
|
5526
5797
|
setLeftTab("hierarchy");
|
|
5527
5798
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
5528
5799
|
}, className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
5529
|
-
/* @__PURE__ */ (0,
|
|
5800
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
|
|
5530
5801
|
"Hierarchie"
|
|
5531
5802
|
] }),
|
|
5532
|
-
/* @__PURE__ */ (0,
|
|
5533
|
-
/* @__PURE__ */ (0,
|
|
5803
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: () => setActiveTab("setup"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "setup" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
5804
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "settings" }),
|
|
5534
5805
|
"Setup"
|
|
5535
5806
|
] }),
|
|
5536
|
-
/* @__PURE__ */ (0,
|
|
5537
|
-
/* @__PURE__ */ (0,
|
|
5807
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: () => setActiveTab("sync"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
5808
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "cloud_sync" }),
|
|
5538
5809
|
"Sync"
|
|
5539
5810
|
] }),
|
|
5540
|
-
/* @__PURE__ */ (0,
|
|
5541
|
-
/* @__PURE__ */ (0,
|
|
5811
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: () => setActiveTab("hftest"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "hftest" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
5812
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "biotech" }),
|
|
5542
5813
|
"HF"
|
|
5543
5814
|
] }),
|
|
5544
|
-
workspaceTags && /* @__PURE__ */ (0,
|
|
5815
|
+
workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => setActiveTab("tags"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "tags" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
5545
5816
|
] }),
|
|
5546
|
-
/* @__PURE__ */ (0,
|
|
5547
|
-
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */ (0,
|
|
5817
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5818
|
+
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5548
5819
|
ListView,
|
|
5549
5820
|
{
|
|
5550
5821
|
nodes,
|
|
@@ -5575,12 +5846,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5575
5846
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
5576
5847
|
}
|
|
5577
5848
|
) }),
|
|
5578
|
-
workspaceTags && /* @__PURE__ */ (0,
|
|
5849
|
+
workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { display: leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" ? "flex" : "none" }, className: "absolute inset-0 flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => {
|
|
5579
5850
|
handleGenerateImage(prompt);
|
|
5580
5851
|
setMobileTab("stage");
|
|
5581
5852
|
}, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
|
|
5582
|
-
activeTab === "setup" && /* @__PURE__ */ (0,
|
|
5583
|
-
activeTab === "sync" && /* @__PURE__ */ (0,
|
|
5853
|
+
activeTab === "setup" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
5854
|
+
activeTab === "sync" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5584
5855
|
ProjectSyncTab,
|
|
5585
5856
|
{
|
|
5586
5857
|
topSlot: syncTopSlot,
|
|
@@ -5604,7 +5875,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5604
5875
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
5605
5876
|
}
|
|
5606
5877
|
),
|
|
5607
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0,
|
|
5878
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5608
5879
|
TagManagerPanel,
|
|
5609
5880
|
{
|
|
5610
5881
|
workspaceTags,
|
|
@@ -5615,7 +5886,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5615
5886
|
onTagMove: handleTagMove
|
|
5616
5887
|
}
|
|
5617
5888
|
),
|
|
5618
|
-
activeTab === "hftest" && /* @__PURE__ */ (0,
|
|
5889
|
+
activeTab === "hftest" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5619
5890
|
HFTestTab,
|
|
5620
5891
|
{
|
|
5621
5892
|
token: hfToken,
|
|
@@ -5628,19 +5899,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5628
5899
|
) })
|
|
5629
5900
|
] })
|
|
5630
5901
|
] }),
|
|
5631
|
-
/* @__PURE__ */ (0,
|
|
5902
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
|
|
5632
5903
|
{ id: "tools", icon: "auto_fix_high", label: "Prompt" },
|
|
5633
5904
|
{ id: "stage", icon: "palette", label: "Stage" },
|
|
5634
5905
|
{ id: "labs", icon: "science", label: "Labs" },
|
|
5635
5906
|
...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
|
|
5636
5907
|
{ id: "browse", icon: "photo_library", label: "Galerie" }
|
|
5637
|
-
].map((tab) => /* @__PURE__ */ (0,
|
|
5638
|
-
/* @__PURE__ */ (0,
|
|
5639
|
-
/* @__PURE__ */ (0,
|
|
5908
|
+
].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: () => setMobileTab(tab.id), className: `flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors ${mobileTab === tab.id ? "text-white" : "text-white/30"}`, children: [
|
|
5909
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
|
|
5910
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
|
|
5640
5911
|
] }, tab.id)) })
|
|
5641
5912
|
] });
|
|
5642
5913
|
if (mdMode) {
|
|
5643
|
-
return /* @__PURE__ */ (0,
|
|
5914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
|
|
5644
5915
|
}
|
|
5645
5916
|
return mobileRoot;
|
|
5646
5917
|
}
|
|
@@ -5648,17 +5919,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5648
5919
|
const tlScale = Math.min(window.innerWidth / 920, window.innerHeight / 520);
|
|
5649
5920
|
const tlW = 920;
|
|
5650
5921
|
const tlH = 520;
|
|
5651
|
-
return /* @__PURE__ */ (0,
|
|
5652
|
-
/* @__PURE__ */ (0,
|
|
5653
|
-
/* @__PURE__ */ (0,
|
|
5654
|
-
/* @__PURE__ */ (0,
|
|
5655
|
-
/* @__PURE__ */ (0,
|
|
5656
|
-
/* @__PURE__ */ (0,
|
|
5657
|
-
/* @__PURE__ */ (0,
|
|
5658
|
-
/* @__PURE__ */ (0,
|
|
5922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { position: "fixed", inset: 0, background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", ...hcStyle || {} }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { width: tlW, height: tlH, transform: `scale(${tlScale})`, transformOrigin: "center center", display: "flex", flexDirection: "row", color: "#fff", overflow: "hidden", borderRadius: 0 }, children: [
|
|
5923
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { width: 320, height: tlH, display: "flex", flexDirection: "column", borderRight: "1px solid rgba(255,255,255,0.05)", background: "#000", flexShrink: 0 }, children: [
|
|
5924
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { height: 52, borderBottom: "1px solid rgba(255,255,255,0.05)", display: "flex", alignItems: "center", gap: 8, padding: "0 12px", flexShrink: 0 }, children: [
|
|
5925
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5926
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
|
|
5927
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1 } }),
|
|
5928
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
5929
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
|
|
5659
5930
|
] }),
|
|
5660
|
-
/* @__PURE__ */ (0,
|
|
5661
|
-
/* @__PURE__ */ (0,
|
|
5931
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { padding: "12px 12px 8px", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { position: "relative", borderRadius: 12, border: `1px solid ${isSynthesizing ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.1)"}`, background: "rgba(255,255,255,0.05)" }, children: [
|
|
5932
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5662
5933
|
"textarea",
|
|
5663
5934
|
{
|
|
5664
5935
|
value: activePrompt,
|
|
@@ -5667,27 +5938,27 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5667
5938
|
placeholder: "Prompt eingeben..."
|
|
5668
5939
|
}
|
|
5669
5940
|
),
|
|
5670
|
-
activePrompt && /* @__PURE__ */ (0,
|
|
5941
|
+
activePrompt && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => setActivePrompt(""), style: { position: "absolute", top: 6, right: 6, width: 22, height: 22, display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
|
|
5671
5942
|
] }) }),
|
|
5672
|
-
/* @__PURE__ */ (0,
|
|
5943
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5673
5944
|
"button",
|
|
5674
5945
|
{
|
|
5675
5946
|
onClick: () => handleGenerateImage(),
|
|
5676
5947
|
disabled: !activePrompt.trim() || isGenerating,
|
|
5677
5948
|
style: { width: "100%", height: 42, display: "flex", alignItems: "center", justifyContent: "center", gap: 8, borderRadius: 10, fontWeight: "bold", fontSize: 13, textTransform: "uppercase", letterSpacing: "0.05em", border: "1px solid rgba(255,255,255,0.1)", background: activePrompt.trim() && !isGenerating ? "#0284c7" : "transparent", color: "#fff", cursor: activePrompt.trim() && !isGenerating ? "pointer" : "default", opacity: !activePrompt.trim() || isGenerating ? 0.3 : 1, fontFamily: "inherit", transition: "background 0.2s" },
|
|
5678
|
-
children: isGenerating ? /* @__PURE__ */ (0,
|
|
5679
|
-
/* @__PURE__ */ (0,
|
|
5680
|
-
/* @__PURE__ */ (0,
|
|
5681
|
-
] }) : /* @__PURE__ */ (0,
|
|
5682
|
-
/* @__PURE__ */ (0,
|
|
5683
|
-
/* @__PURE__ */ (0,
|
|
5949
|
+
children: isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
5950
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { width: 14, height: 14, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
|
|
5951
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Generiere..." })
|
|
5952
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
5953
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
|
|
5954
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Generieren" })
|
|
5684
5955
|
] })
|
|
5685
5956
|
}
|
|
5686
5957
|
) }),
|
|
5687
|
-
/* @__PURE__ */ (0,
|
|
5958
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }) })
|
|
5688
5959
|
] }),
|
|
5689
|
-
/* @__PURE__ */ (0,
|
|
5690
|
-
/* @__PURE__ */ (0,
|
|
5960
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
|
|
5961
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5691
5962
|
"div",
|
|
5692
5963
|
{
|
|
5693
5964
|
style: { flex: 1, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" },
|
|
@@ -5699,26 +5970,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5699
5970
|
else if (dx > 50) goToPrev();
|
|
5700
5971
|
setTouchStartX(null);
|
|
5701
5972
|
},
|
|
5702
|
-
children: /* @__PURE__ */ (0,
|
|
5703
|
-
currentResult?.status === "processing" && /* @__PURE__ */ (0,
|
|
5704
|
-
/* @__PURE__ */ (0,
|
|
5705
|
-
/* @__PURE__ */ (0,
|
|
5973
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { height: "100%", width: "100%", borderRadius: 20, border: "1px solid rgba(255,255,255,0.05)", background: "rgba(0,0,0,0.4)", position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }, children: [
|
|
5974
|
+
currentResult?.status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
5975
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { width: 36, height: 36, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
|
|
5976
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
|
|
5706
5977
|
] }),
|
|
5707
|
-
currentResult?.status === "error" && /* @__PURE__ */ (0,
|
|
5708
|
-
/* @__PURE__ */ (0,
|
|
5709
|
-
/* @__PURE__ */ (0,
|
|
5710
|
-
/* @__PURE__ */ (0,
|
|
5978
|
+
currentResult?.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
5979
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
|
|
5980
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
|
|
5981
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => handleGenerateImage(currentResult.prompt), style: { padding: "8px 16px", borderRadius: 8, border: "1px solid rgba(255,255,255,0.2)", fontSize: 11, color: "rgba(255,255,255,0.7)", background: "none", cursor: "pointer", fontFamily: "inherit" }, children: "Erneut versuchen" })
|
|
5711
5982
|
] }),
|
|
5712
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0,
|
|
5713
|
-
!currentResult && /* @__PURE__ */ (0,
|
|
5714
|
-
/* @__PURE__ */ (0,
|
|
5715
|
-
/* @__PURE__ */ (0,
|
|
5983
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
|
|
5984
|
+
!currentResult && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
|
|
5985
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
|
|
5986
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
|
|
5716
5987
|
] }),
|
|
5717
|
-
currentResult?.status === "done" && /* @__PURE__ */ (0,
|
|
5718
|
-
history.length > 1 && currentResult && /* @__PURE__ */ (0,
|
|
5719
|
-
/* @__PURE__ */ (0,
|
|
5720
|
-
/* @__PURE__ */ (0,
|
|
5721
|
-
/* @__PURE__ */ (0,
|
|
5988
|
+
currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: openFullscreen, style: { position: "absolute", top: 8, right: 8, width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "fullscreen" }) }),
|
|
5989
|
+
history.length > 1 && currentResult && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
5990
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: goToPrev, disabled: currentIndex <= 0, style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex <= 0 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_left" }) }),
|
|
5991
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, style: { position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex >= history.length - 1 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_right" }) }),
|
|
5992
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { position: "absolute", bottom: 8, left: "50%", transform: "translateX(-50%)", background: "rgba(0,0,0,0.6)", borderRadius: 999, padding: "2px 12px", fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: "monospace" }, children: [
|
|
5722
5993
|
currentIndex + 1,
|
|
5723
5994
|
" / ",
|
|
5724
5995
|
history.length
|
|
@@ -5727,42 +5998,42 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5727
5998
|
] })
|
|
5728
5999
|
}
|
|
5729
6000
|
),
|
|
5730
|
-
currentResult?.status === "done" && /* @__PURE__ */ (0,
|
|
5731
|
-
/* @__PURE__ */ (0,
|
|
5732
|
-
/* @__PURE__ */ (0,
|
|
5733
|
-
/* @__PURE__ */ (0,
|
|
6001
|
+
currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "0 16px 16px", display: "flex", gap: 8, flexShrink: 0 }, children: [
|
|
6002
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.6)", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }, children: [
|
|
6003
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
|
|
6004
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Prompt" })
|
|
5734
6005
|
] }),
|
|
5735
|
-
/* @__PURE__ */ (0,
|
|
5736
|
-
/* @__PURE__ */ (0,
|
|
5737
|
-
/* @__PURE__ */ (0,
|
|
6006
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "none", background: "rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.8)", fontSize: 11, fontWeight: "bold", cursor: "pointer", fontFamily: "inherit" }, children: [
|
|
6007
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
|
|
6008
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Referenz" })
|
|
5738
6009
|
] }),
|
|
5739
|
-
/* @__PURE__ */ (0,
|
|
5740
|
-
/* @__PURE__ */ (0,
|
|
5741
|
-
/* @__PURE__ */ (0,
|
|
6010
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: handleDownloadSingle, style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.6)", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }, children: [
|
|
6011
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "download" }),
|
|
6012
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Laden" })
|
|
5742
6013
|
] })
|
|
5743
6014
|
] })
|
|
5744
6015
|
] })
|
|
5745
6016
|
] }) });
|
|
5746
6017
|
}
|
|
5747
|
-
return /* @__PURE__ */ (0,
|
|
5748
|
-
/* @__PURE__ */ (0,
|
|
5749
|
-
/* @__PURE__ */ (0,
|
|
5750
|
-
/* @__PURE__ */ (0,
|
|
5751
|
-
!isLeftCollapsed && /* @__PURE__ */ (0,
|
|
5752
|
-
workspaceTags && /* @__PURE__ */ (0,
|
|
5753
|
-
/* @__PURE__ */ (0,
|
|
6018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", style: hcStyle, children: [
|
|
6019
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute top-2 right-2 z-50", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => setShowStart(true), className: "text-white/10 hover:text-white/30 transition-colors text-[10px]", children: "\u21C4" }) }),
|
|
6020
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col border-r border-white/5 overflow-hidden relative bg-black/10 shrink-0", style: { width: isLeftCollapsed ? 48 : leftPanelWidth, transition: "none" }, children: [
|
|
6021
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
|
|
6022
|
+
!isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-1 gap-1", children: [
|
|
6023
|
+
workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: () => setLeftTab("prompt"), className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "prompt" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`, children: [
|
|
6024
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
|
|
5754
6025
|
"Prompt"
|
|
5755
6026
|
] }),
|
|
5756
|
-
/* @__PURE__ */ (0,
|
|
5757
|
-
/* @__PURE__ */ (0,
|
|
6027
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: () => setLeftTab("hierarchy"), className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "hierarchy" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`, children: [
|
|
6028
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
|
|
5758
6029
|
"Hierarchie"
|
|
5759
6030
|
] }),
|
|
5760
|
-
workspaceTags && /* @__PURE__ */ (0,
|
|
6031
|
+
workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => setActiveTab("tags"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "tags" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
5761
6032
|
] }),
|
|
5762
|
-
/* @__PURE__ */ (0,
|
|
6033
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => setIsLeftCollapsed(!isLeftCollapsed), className: "material-symbols-outlined text-[18px] text-white/40 hover:text-white transition-all w-10 flex items-center justify-center", children: isLeftCollapsed ? "chevron_right" : "chevron_left" })
|
|
5763
6034
|
] }),
|
|
5764
|
-
!isLeftCollapsed && /* @__PURE__ */ (0,
|
|
5765
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0,
|
|
6035
|
+
!isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
6036
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5766
6037
|
TagManagerPanel,
|
|
5767
6038
|
{
|
|
5768
6039
|
workspaceTags,
|
|
@@ -5773,11 +6044,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5773
6044
|
onTagMove: handleTagMove
|
|
5774
6045
|
}
|
|
5775
6046
|
),
|
|
5776
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ (0,
|
|
5777
|
-
/* @__PURE__ */ (0,
|
|
5778
|
-
/* @__PURE__ */ (0,
|
|
6047
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
|
|
6048
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
6049
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
5779
6050
|
] }) }),
|
|
5780
|
-
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ (0,
|
|
6051
|
+
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5781
6052
|
ListView,
|
|
5782
6053
|
{
|
|
5783
6054
|
nodes,
|
|
@@ -5802,18 +6073,18 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5802
6073
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
5803
6074
|
}
|
|
5804
6075
|
) }),
|
|
5805
|
-
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ (0,
|
|
6076
|
+
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => handleGenerateImage(prompt), onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage })
|
|
5806
6077
|
] })
|
|
5807
6078
|
] }),
|
|
5808
|
-
!isLeftCollapsed && /* @__PURE__ */ (0,
|
|
5809
|
-
/* @__PURE__ */ (0,
|
|
5810
|
-
/* @__PURE__ */ (0,
|
|
5811
|
-
/* @__PURE__ */ (0,
|
|
5812
|
-
/* @__PURE__ */ (0,
|
|
5813
|
-
/* @__PURE__ */ (0,
|
|
6079
|
+
!isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { onMouseDown: startLeftResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
6080
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
|
|
6081
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
|
|
6082
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-1.5", children: [
|
|
6083
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
6084
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] })
|
|
5814
6085
|
] }),
|
|
5815
|
-
/* @__PURE__ */ (0,
|
|
5816
|
-
/* @__PURE__ */ (0,
|
|
6086
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-1 mx-auto", children: [
|
|
6087
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5817
6088
|
"button",
|
|
5818
6089
|
{
|
|
5819
6090
|
onClick: () => setMiddlePanel("stage"),
|
|
@@ -5821,7 +6092,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5821
6092
|
children: "Stage"
|
|
5822
6093
|
}
|
|
5823
6094
|
),
|
|
5824
|
-
/* @__PURE__ */ (0,
|
|
6095
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5825
6096
|
"button",
|
|
5826
6097
|
{
|
|
5827
6098
|
onClick: () => setMiddlePanel("labs"),
|
|
@@ -5830,68 +6101,68 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5830
6101
|
}
|
|
5831
6102
|
)
|
|
5832
6103
|
] }),
|
|
5833
|
-
/* @__PURE__ */ (0,
|
|
5834
|
-
activeReferenceThumbnail ? /* @__PURE__ */ (0,
|
|
5835
|
-
/* @__PURE__ */ (0,
|
|
5836
|
-
/* @__PURE__ */ (0,
|
|
5837
|
-
/* @__PURE__ */ (0,
|
|
5838
|
-
] }) : /* @__PURE__ */ (0,
|
|
5839
|
-
/* @__PURE__ */ (0,
|
|
5840
|
-
/* @__PURE__ */ (0,
|
|
6104
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
6105
|
+
activeReferenceThumbnail ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden", style: { height: 28 }, children: [
|
|
6106
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
6107
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
6108
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 hover:text-white/80 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
6109
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { onClick: handleSelectReference, className: "flex items-center gap-1 h-7 px-2 rounded-lg border border-white/10 text-white/30 hover:text-white/60 hover:border-white/20 transition-colors text-[10px] font-bold uppercase tracking-wide", children: [
|
|
6110
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
|
|
6111
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Ref" })
|
|
5841
6112
|
] }),
|
|
5842
|
-
/* @__PURE__ */ (0,
|
|
5843
|
-
/* @__PURE__ */ (0,
|
|
6113
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
|
|
6114
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
|
|
5844
6115
|
] })
|
|
5845
6116
|
] }),
|
|
5846
|
-
/* @__PURE__ */ (0,
|
|
5847
|
-
!isPromptCollapsed && /* @__PURE__ */ (0,
|
|
5848
|
-
/* @__PURE__ */ (0,
|
|
5849
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */ (0,
|
|
6117
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
|
|
6118
|
+
!isPromptCollapsed && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
6119
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("textarea", { value: activePrompt, onChange: (e) => setActivePrompt(e.target.value), className: "w-full bg-transparent border-none outline-none text-[12px] leading-relaxed text-white/80 resize-none h-20 dark-scrollbar", placeholder: "W\xE4hle einen Knoten oder tippe einen Prompt..." }),
|
|
6120
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors text-white/20 hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5850
6121
|
] }) }),
|
|
5851
|
-
middlePanel === "labs" ? /* @__PURE__ */ (0,
|
|
6122
|
+
middlePanel === "labs" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LabsTab, { services: labServices, onResult: (item) => {
|
|
5852
6123
|
const frame = item.frames[0];
|
|
5853
6124
|
if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
|
|
5854
|
-
} }) }) : /* @__PURE__ */ (0,
|
|
5855
|
-
isGenerating && currentResult?.status === "done" && /* @__PURE__ */ (0,
|
|
5856
|
-
/* @__PURE__ */ (0,
|
|
5857
|
-
/* @__PURE__ */ (0,
|
|
6125
|
+
} }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "h-full w-full max-w-4xl aspect-square rounded-3xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center group shadow-2xl", children: [
|
|
6126
|
+
isGenerating && currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "absolute top-6 right-6 z-30 bg-black/60 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 flex items-center gap-3", children: [
|
|
6127
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
|
|
6128
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
|
|
5858
6129
|
] }),
|
|
5859
|
-
currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ (0,
|
|
5860
|
-
/* @__PURE__ */ (0,
|
|
5861
|
-
/* @__PURE__ */ (0,
|
|
5862
|
-
] }) : currentResult.status === "error" ? /* @__PURE__ */ (0,
|
|
5863
|
-
/* @__PURE__ */ (0,
|
|
5864
|
-
/* @__PURE__ */ (0,
|
|
5865
|
-
/* @__PURE__ */ (0,
|
|
5866
|
-
/* @__PURE__ */ (0,
|
|
6130
|
+
currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
|
|
6131
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
|
|
6132
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
6133
|
+
] }) : currentResult.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
|
|
6134
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
|
|
6135
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-2", children: [
|
|
6136
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
|
|
6137
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
|
|
5867
6138
|
] }),
|
|
5868
|
-
/* @__PURE__ */ (0,
|
|
5869
|
-
] }) : /* @__PURE__ */ (0,
|
|
5870
|
-
/* @__PURE__ */ (0,
|
|
5871
|
-
/* @__PURE__ */ (0,
|
|
5872
|
-
/* @__PURE__ */ (0,
|
|
5873
|
-
/* @__PURE__ */ (0,
|
|
5874
|
-
/* @__PURE__ */ (0,
|
|
6139
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
|
|
6140
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "h-full w-full relative flex items-center justify-center", children: [
|
|
6141
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
|
|
6142
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "absolute bottom-6 flex gap-2 opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0 z-20", children: [
|
|
6143
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
|
|
6144
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
|
|
6145
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
|
|
5875
6146
|
] })
|
|
5876
|
-
] }) : /* @__PURE__ */ (0,
|
|
5877
|
-
/* @__PURE__ */ (0,
|
|
5878
|
-
/* @__PURE__ */ (0,
|
|
6147
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
6148
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
|
|
6149
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
5879
6150
|
] })
|
|
5880
6151
|
] }) })
|
|
5881
6152
|
] })
|
|
5882
6153
|
] }),
|
|
5883
|
-
!isRightCollapsed && /* @__PURE__ */ (0,
|
|
5884
|
-
/* @__PURE__ */ (0,
|
|
5885
|
-
/* @__PURE__ */ (0,
|
|
5886
|
-
/* @__PURE__ */ (0,
|
|
6154
|
+
!isRightCollapsed && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { onMouseDown: startRightResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
6155
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", style: { width: isRightCollapsed ? 60 : rightPanelWidth, transition: "none" }, children: [
|
|
6156
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
|
|
6157
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-1", children: ["history", "gallery", "inspect", "setup", "sync", "tags"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => {
|
|
5887
6158
|
setActiveTab(tab);
|
|
5888
6159
|
setIsRightCollapsed(false);
|
|
5889
|
-
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ (0,
|
|
5890
|
-
hfToken && /* @__PURE__ */ (0,
|
|
5891
|
-
/* @__PURE__ */ (0,
|
|
6160
|
+
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : tab === "setup" ? "settings" : tab === "sync" ? "cloud_sync" : "label" }) }, tab)) }),
|
|
6161
|
+
hfToken && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => refreshHF(), disabled: isHfRefreshing, className: "w-10 flex items-center justify-center text-white/20 hover:text-white/60 transition-colors disabled:opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
|
|
6162
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
|
|
5892
6163
|
] }),
|
|
5893
|
-
!isRightCollapsed && /* @__PURE__ */ (0,
|
|
5894
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0,
|
|
6164
|
+
!isRightCollapsed && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
6165
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5895
6166
|
TagManagerPanel,
|
|
5896
6167
|
{
|
|
5897
6168
|
workspaceTags,
|
|
@@ -5902,12 +6173,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5902
6173
|
onTagMove: handleTagMove
|
|
5903
6174
|
}
|
|
5904
6175
|
),
|
|
5905
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ (0,
|
|
5906
|
-
/* @__PURE__ */ (0,
|
|
5907
|
-
/* @__PURE__ */ (0,
|
|
6176
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
|
|
6177
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
6178
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
5908
6179
|
] }) }),
|
|
5909
|
-
activeTab === "history" && /* @__PURE__ */ (0,
|
|
5910
|
-
activeTab === "gallery" && /* @__PURE__ */ (0,
|
|
6180
|
+
activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
|
|
6181
|
+
activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5911
6182
|
MediaLibrary,
|
|
5912
6183
|
{
|
|
5913
6184
|
items: galleryItems,
|
|
@@ -5921,9 +6192,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5921
6192
|
onGenerateReference: (item) => handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true })
|
|
5922
6193
|
}
|
|
5923
6194
|
),
|
|
5924
|
-
activeTab === "inspect" && /* @__PURE__ */ (0,
|
|
5925
|
-
activeTab === "setup" && /* @__PURE__ */ (0,
|
|
5926
|
-
activeTab === "sync" && /* @__PURE__ */ (0,
|
|
6195
|
+
activeTab === "inspect" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
|
|
6196
|
+
activeTab === "setup" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
6197
|
+
activeTab === "sync" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5927
6198
|
ProjectSyncTab,
|
|
5928
6199
|
{
|
|
5929
6200
|
topSlot: syncTopSlot,
|
|
@@ -5953,8 +6224,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5953
6224
|
}
|
|
5954
6225
|
|
|
5955
6226
|
// src/components/FaApp.tsx
|
|
5956
|
-
var
|
|
5957
|
-
var
|
|
6227
|
+
var import_react25 = require("react");
|
|
6228
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
5958
6229
|
function FaApp({
|
|
5959
6230
|
onGenerateImage,
|
|
5960
6231
|
onGeneratePrompt,
|
|
@@ -5973,8 +6244,8 @@ function FaApp({
|
|
|
5973
6244
|
onServerDelete,
|
|
5974
6245
|
buildInfo
|
|
5975
6246
|
}) {
|
|
5976
|
-
const [hfNamespace, setHfNamespace] = (0,
|
|
5977
|
-
(0,
|
|
6247
|
+
const [hfNamespace, setHfNamespace] = (0, import_react25.useState)(void 0);
|
|
6248
|
+
(0, import_react25.useEffect)(() => {
|
|
5978
6249
|
if (!serverBaseUrl) return;
|
|
5979
6250
|
fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
|
|
5980
6251
|
if (typeof d.hfNamespace === "string") setHfNamespace(d.hfNamespace);
|
|
@@ -5985,7 +6256,7 @@ function FaApp({
|
|
|
5985
6256
|
const result = await onGeneratePrompt(text, options);
|
|
5986
6257
|
return result.text;
|
|
5987
6258
|
};
|
|
5988
|
-
return /* @__PURE__ */ (0,
|
|
6259
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5989
6260
|
AvatarArchitectApp,
|
|
5990
6261
|
{
|
|
5991
6262
|
onGenerateImage,
|
|
@@ -6007,7 +6278,7 @@ function FaApp({
|
|
|
6007
6278
|
// src/index.ts
|
|
6008
6279
|
init_hfStateService();
|
|
6009
6280
|
init_hfStateService();
|
|
6010
|
-
var LIB_VERSION = "2.0.
|
|
6281
|
+
var LIB_VERSION = "2.0.23";
|
|
6011
6282
|
// Annotate the CommonJS export names for ESM import in node:
|
|
6012
6283
|
0 && (module.exports = {
|
|
6013
6284
|
AvatarArchitectApp,
|
|
@@ -6021,6 +6292,7 @@ var LIB_VERSION = "2.0.21";
|
|
|
6021
6292
|
LIB_VERSION,
|
|
6022
6293
|
LabBlend,
|
|
6023
6294
|
LabCompare,
|
|
6295
|
+
LabFrameExtractor,
|
|
6024
6296
|
LabImagePicker,
|
|
6025
6297
|
LabLoop,
|
|
6026
6298
|
LabRemix,
|