@rslsp1/fa-app-tools 2.0.22 → 2.0.24
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 +25 -3
- package/dist/index.d.ts +25 -3
- package/dist/index.js +1025 -519
- package/dist/index.mjs +994 -500
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -21,7 +21,7 @@ import {
|
|
|
21
21
|
setHFToken,
|
|
22
22
|
tsFromEventPath,
|
|
23
23
|
writeHFEvent
|
|
24
|
-
} from "./chunk-
|
|
24
|
+
} from "./chunk-UCEQOGPT.mjs";
|
|
25
25
|
|
|
26
26
|
// src/hooks/useOnClickOutside.ts
|
|
27
27
|
import { useEffect } from "react";
|
|
@@ -801,7 +801,7 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
|
|
|
801
801
|
}
|
|
802
802
|
|
|
803
803
|
// src/components/AvatarArchitectApp.tsx
|
|
804
|
-
import { useState as
|
|
804
|
+
import { useState as useState18, useCallback as useCallback3, useMemo as useMemo2, useEffect as useEffect7, useRef as useRef8 } from "react";
|
|
805
805
|
|
|
806
806
|
// src/components/PromptTab.tsx
|
|
807
807
|
import { useRef as useRef4, useState as useState5 } from "react";
|
|
@@ -1601,7 +1601,7 @@ var ProjectSyncTab = ({
|
|
|
1601
1601
|
{
|
|
1602
1602
|
onClick: async () => {
|
|
1603
1603
|
try {
|
|
1604
|
-
const { hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-
|
|
1604
|
+
const { hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-TC65WQXK.mjs");
|
|
1605
1605
|
const file = await hfDownloadProject2(p.path, hfToken);
|
|
1606
1606
|
onHfLoad(file);
|
|
1607
1607
|
} catch (e) {
|
|
@@ -2085,7 +2085,7 @@ function useHFState(token, namespace) {
|
|
|
2085
2085
|
}
|
|
2086
2086
|
|
|
2087
2087
|
// src/components/labs/LabsTab.tsx
|
|
2088
|
-
import { useState as
|
|
2088
|
+
import { useState as useState14 } from "react";
|
|
2089
2089
|
|
|
2090
2090
|
// src/components/labs/LabRemix.tsx
|
|
2091
2091
|
import { useState as useState9 } from "react";
|
|
@@ -2923,52 +2923,313 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
2923
2923
|
] });
|
|
2924
2924
|
};
|
|
2925
2925
|
|
|
2926
|
-
// src/components/labs/
|
|
2926
|
+
// src/components/labs/LabFrameExtractor.tsx
|
|
2927
|
+
import { useRef as useRef7, useState as useState13, useCallback as useCallback2 } from "react";
|
|
2927
2928
|
import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2928
|
-
var
|
|
2929
|
+
var formatTime = (s) => {
|
|
2930
|
+
const m = Math.floor(s / 60);
|
|
2931
|
+
const sec = (s % 60).toFixed(1);
|
|
2932
|
+
return `${m}:${sec.padStart(4, "0")}`;
|
|
2933
|
+
};
|
|
2934
|
+
var MAX_FRAMES = 40;
|
|
2935
|
+
var INTERVAL_OPTIONS = ["0.5", "1", "2", "5", "10"];
|
|
2936
|
+
var LabFrameExtractor = ({
|
|
2937
|
+
videoItems,
|
|
2938
|
+
onResult,
|
|
2939
|
+
resolveVideoUrl
|
|
2940
|
+
}) => {
|
|
2941
|
+
const videoRef = useRef7(null);
|
|
2942
|
+
const canvasRef = useRef7(null);
|
|
2943
|
+
const cancelledRef = useRef7(false);
|
|
2944
|
+
const [selectedItem, setSelectedItem] = useState13(null);
|
|
2945
|
+
const [videoSrc, setVideoSrc] = useState13(null);
|
|
2946
|
+
const [videoReady, setVideoReady] = useState13(false);
|
|
2947
|
+
const [frames, setFrames] = useState13([]);
|
|
2948
|
+
const [isExtracting, setIsExtracting] = useState13(false);
|
|
2949
|
+
const [intervalSec, setIntervalSec] = useState13("1");
|
|
2950
|
+
const handleVideoSelect = (item) => {
|
|
2951
|
+
const mediaId = item.frames[0]?.mediaId;
|
|
2952
|
+
if (!mediaId) return;
|
|
2953
|
+
setSelectedItem(item);
|
|
2954
|
+
setVideoSrc(resolveVideoUrl(mediaId));
|
|
2955
|
+
setFrames([]);
|
|
2956
|
+
setVideoReady(false);
|
|
2957
|
+
cancelledRef.current = false;
|
|
2958
|
+
};
|
|
2959
|
+
const captureAt = useCallback2(
|
|
2960
|
+
(t, label) => new Promise((resolve) => {
|
|
2961
|
+
const video = videoRef.current;
|
|
2962
|
+
const canvas = canvasRef.current;
|
|
2963
|
+
if (!video || !canvas || !isFinite(video.duration)) return resolve(null);
|
|
2964
|
+
const onSeeked = () => {
|
|
2965
|
+
canvas.width = video.videoWidth;
|
|
2966
|
+
canvas.height = video.videoHeight;
|
|
2967
|
+
const ctx = canvas.getContext("2d");
|
|
2968
|
+
if (!ctx) return resolve(null);
|
|
2969
|
+
ctx.drawImage(video, 0, 0);
|
|
2970
|
+
resolve({
|
|
2971
|
+
id: `fe-${Date.now()}-${Math.random().toString(36).slice(2, 5)}`,
|
|
2972
|
+
dataUrl: canvas.toDataURL("image/png"),
|
|
2973
|
+
timeSeconds: t,
|
|
2974
|
+
label
|
|
2975
|
+
});
|
|
2976
|
+
};
|
|
2977
|
+
video.addEventListener("seeked", onSeeked, { once: true });
|
|
2978
|
+
video.currentTime = t;
|
|
2979
|
+
}),
|
|
2980
|
+
[]
|
|
2981
|
+
);
|
|
2982
|
+
const extractSingle = async (mode) => {
|
|
2983
|
+
const v = videoRef.current;
|
|
2984
|
+
if (!v || !videoReady) return;
|
|
2985
|
+
const t = mode === "start" ? 0 : mode === "end" ? Math.max(0, v.duration - 0.01) : v.currentTime;
|
|
2986
|
+
const frame = await captureAt(t, mode === "start" ? "Start" : mode === "end" ? "End" : formatTime(t));
|
|
2987
|
+
if (frame) setFrames((prev) => [frame, ...prev]);
|
|
2988
|
+
};
|
|
2989
|
+
const extractInterval = async () => {
|
|
2990
|
+
const v = videoRef.current;
|
|
2991
|
+
if (!v || !videoReady || isExtracting) return;
|
|
2992
|
+
const every = parseFloat(intervalSec);
|
|
2993
|
+
if (!isFinite(every) || every <= 0) return;
|
|
2994
|
+
const ts = [];
|
|
2995
|
+
for (let t = 0; t <= v.duration; t += every) {
|
|
2996
|
+
ts.push(Math.min(t, v.duration - 0.01));
|
|
2997
|
+
if (ts.length >= MAX_FRAMES) break;
|
|
2998
|
+
}
|
|
2999
|
+
setIsExtracting(true);
|
|
3000
|
+
cancelledRef.current = false;
|
|
3001
|
+
setFrames([]);
|
|
3002
|
+
const collected = [];
|
|
3003
|
+
for (const t of ts) {
|
|
3004
|
+
if (cancelledRef.current) break;
|
|
3005
|
+
const f = await captureAt(t, formatTime(t));
|
|
3006
|
+
if (f) {
|
|
3007
|
+
collected.push(f);
|
|
3008
|
+
setFrames([...collected]);
|
|
3009
|
+
}
|
|
3010
|
+
}
|
|
3011
|
+
setIsExtracting(false);
|
|
3012
|
+
};
|
|
3013
|
+
const useFrame = (frame) => {
|
|
3014
|
+
if (!onResult || !selectedItem) return;
|
|
3015
|
+
const base64 = frame.dataUrl.replace(/^data:image\/png;base64,/, "");
|
|
3016
|
+
const labFrame = {
|
|
3017
|
+
id: frame.id,
|
|
3018
|
+
base64,
|
|
3019
|
+
source: "flow-gallery"
|
|
3020
|
+
};
|
|
3021
|
+
onResult({
|
|
3022
|
+
id: frame.id,
|
|
3023
|
+
prompt: selectedItem.prompt,
|
|
3024
|
+
label: `Frame ${frame.label} \u2013 ${selectedItem.label ?? selectedItem.id}`,
|
|
3025
|
+
tags: selectedItem.tags ?? [],
|
|
3026
|
+
frames: [labFrame]
|
|
3027
|
+
});
|
|
3028
|
+
};
|
|
3029
|
+
return /* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection: "column", gap: 12, padding: 12, height: "100%", overflow: "auto" }, children: [
|
|
3030
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: [
|
|
3031
|
+
videoItems.length === 0 && /* @__PURE__ */ jsx18("span", { style: { fontSize: 11, color: "#666", fontStyle: "italic" }, children: "No video items available" }),
|
|
3032
|
+
videoItems.map((item) => /* @__PURE__ */ jsx18(
|
|
3033
|
+
"button",
|
|
3034
|
+
{
|
|
3035
|
+
onClick: () => handleVideoSelect(item),
|
|
3036
|
+
style: {
|
|
3037
|
+
padding: "4px 8px",
|
|
3038
|
+
fontSize: 11,
|
|
3039
|
+
background: selectedItem?.id === item.id ? "rgba(168,85,247,0.2)" : "rgba(255,255,255,0.05)",
|
|
3040
|
+
border: `1px solid ${selectedItem?.id === item.id ? "#a855f7" : "rgba(255,255,255,0.1)"}`,
|
|
3041
|
+
borderRadius: 4,
|
|
3042
|
+
color: "#fff",
|
|
3043
|
+
cursor: "pointer"
|
|
3044
|
+
},
|
|
3045
|
+
children: item.label ?? item.id
|
|
3046
|
+
},
|
|
3047
|
+
item.id
|
|
3048
|
+
))
|
|
3049
|
+
] }),
|
|
3050
|
+
videoSrc && /* @__PURE__ */ jsx18(
|
|
3051
|
+
"video",
|
|
3052
|
+
{
|
|
3053
|
+
ref: videoRef,
|
|
3054
|
+
src: videoSrc,
|
|
3055
|
+
controls: true,
|
|
3056
|
+
crossOrigin: "anonymous",
|
|
3057
|
+
onLoadedMetadata: () => setVideoReady(true),
|
|
3058
|
+
style: { width: "100%", maxHeight: 280, background: "#000", borderRadius: 6, display: "block" }
|
|
3059
|
+
}
|
|
3060
|
+
),
|
|
3061
|
+
/* @__PURE__ */ jsx18("canvas", { ref: canvasRef, style: { display: "none" } }),
|
|
3062
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, alignItems: "center" }, children: [
|
|
3063
|
+
["start", "current", "end"].map((mode) => /* @__PURE__ */ jsx18(
|
|
3064
|
+
"button",
|
|
3065
|
+
{
|
|
3066
|
+
disabled: !videoReady,
|
|
3067
|
+
onClick: () => extractSingle(mode),
|
|
3068
|
+
style: {
|
|
3069
|
+
padding: "4px 10px",
|
|
3070
|
+
fontSize: 11,
|
|
3071
|
+
borderRadius: 4,
|
|
3072
|
+
background: "rgba(255,255,255,0.08)",
|
|
3073
|
+
border: "1px solid rgba(255,255,255,0.15)",
|
|
3074
|
+
color: "#fff",
|
|
3075
|
+
cursor: videoReady ? "pointer" : "not-allowed",
|
|
3076
|
+
opacity: videoReady ? 1 : 0.4
|
|
3077
|
+
},
|
|
3078
|
+
children: mode === "start" ? "Start Frame" : mode === "end" ? "End Frame" : "Current Frame"
|
|
3079
|
+
},
|
|
3080
|
+
mode
|
|
3081
|
+
)),
|
|
3082
|
+
/* @__PURE__ */ jsx18("span", { style: { fontSize: 11, color: "#aaa" }, children: "every" }),
|
|
3083
|
+
/* @__PURE__ */ jsx18(
|
|
3084
|
+
"select",
|
|
3085
|
+
{
|
|
3086
|
+
value: intervalSec,
|
|
3087
|
+
onChange: (e) => setIntervalSec(e.target.value),
|
|
3088
|
+
disabled: !videoReady || isExtracting,
|
|
3089
|
+
style: { fontSize: 11, background: "#111", border: "1px solid #333", color: "#fff", borderRadius: 4, padding: "2px 4px" },
|
|
3090
|
+
children: INTERVAL_OPTIONS.map((v) => /* @__PURE__ */ jsxs16("option", { value: v, children: [
|
|
3091
|
+
v,
|
|
3092
|
+
"s"
|
|
3093
|
+
] }, v))
|
|
3094
|
+
}
|
|
3095
|
+
),
|
|
3096
|
+
/* @__PURE__ */ jsx18(
|
|
3097
|
+
"button",
|
|
3098
|
+
{
|
|
3099
|
+
disabled: !videoReady,
|
|
3100
|
+
onClick: isExtracting ? () => {
|
|
3101
|
+
cancelledRef.current = true;
|
|
3102
|
+
} : extractInterval,
|
|
3103
|
+
style: {
|
|
3104
|
+
padding: "4px 10px",
|
|
3105
|
+
fontSize: 11,
|
|
3106
|
+
borderRadius: 4,
|
|
3107
|
+
background: isExtracting ? "rgba(239,68,68,0.2)" : "rgba(255,255,255,0.08)",
|
|
3108
|
+
border: `1px solid ${isExtracting ? "#ef4444" : "rgba(255,255,255,0.15)"}`,
|
|
3109
|
+
color: isExtracting ? "#f87171" : "#fff",
|
|
3110
|
+
cursor: videoReady ? "pointer" : "not-allowed",
|
|
3111
|
+
opacity: videoReady ? 1 : 0.4
|
|
3112
|
+
},
|
|
3113
|
+
children: isExtracting ? "Cancel" : "Extract All"
|
|
3114
|
+
}
|
|
3115
|
+
)
|
|
3116
|
+
] }),
|
|
3117
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: 8, overflowX: "auto", paddingBottom: 4 }, children: [
|
|
3118
|
+
frames.map((frame) => /* @__PURE__ */ jsxs16(
|
|
3119
|
+
"div",
|
|
3120
|
+
{
|
|
3121
|
+
style: {
|
|
3122
|
+
flexShrink: 0,
|
|
3123
|
+
width: 100,
|
|
3124
|
+
border: "1px solid rgba(255,255,255,0.1)",
|
|
3125
|
+
borderRadius: 6,
|
|
3126
|
+
overflow: "hidden",
|
|
3127
|
+
background: "rgba(255,255,255,0.03)"
|
|
3128
|
+
},
|
|
3129
|
+
children: [
|
|
3130
|
+
/* @__PURE__ */ jsx18("img", { src: frame.dataUrl, style: { width: "100%", aspectRatio: "16/9", objectFit: "cover", display: "block" }, alt: frame.label }),
|
|
3131
|
+
/* @__PURE__ */ jsx18("div", { style: { fontSize: 9, color: "#888", textAlign: "center", padding: "2px 4px", fontFamily: "monospace" }, children: frame.label }),
|
|
3132
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: 2, padding: "0 4px 4px", justifyContent: "center" }, children: [
|
|
3133
|
+
/* @__PURE__ */ jsx18(
|
|
3134
|
+
"button",
|
|
3135
|
+
{
|
|
3136
|
+
onClick: () => useFrame(frame),
|
|
3137
|
+
style: {
|
|
3138
|
+
flex: 1,
|
|
3139
|
+
padding: "2px 0",
|
|
3140
|
+
fontSize: 9,
|
|
3141
|
+
borderRadius: 3,
|
|
3142
|
+
background: "rgba(168,85,247,0.2)",
|
|
3143
|
+
border: "1px solid #a855f7",
|
|
3144
|
+
color: "#c084fc",
|
|
3145
|
+
cursor: "pointer"
|
|
3146
|
+
},
|
|
3147
|
+
children: "Use"
|
|
3148
|
+
}
|
|
3149
|
+
),
|
|
3150
|
+
/* @__PURE__ */ jsx18(
|
|
3151
|
+
"button",
|
|
3152
|
+
{
|
|
3153
|
+
onClick: () => setFrames((prev) => prev.filter((f) => f.id !== frame.id)),
|
|
3154
|
+
style: {
|
|
3155
|
+
padding: "2px 4px",
|
|
3156
|
+
fontSize: 9,
|
|
3157
|
+
borderRadius: 3,
|
|
3158
|
+
background: "rgba(255,255,255,0.05)",
|
|
3159
|
+
border: "1px solid rgba(255,255,255,0.1)",
|
|
3160
|
+
color: "#666",
|
|
3161
|
+
cursor: "pointer"
|
|
3162
|
+
},
|
|
3163
|
+
children: "\u2715"
|
|
3164
|
+
}
|
|
3165
|
+
)
|
|
3166
|
+
] })
|
|
3167
|
+
]
|
|
3168
|
+
},
|
|
3169
|
+
frame.id
|
|
3170
|
+
)),
|
|
3171
|
+
frames.length === 0 && /* @__PURE__ */ jsx18("span", { style: { fontSize: 11, color: "#444", fontStyle: "italic", padding: "16px 0" }, children: isExtracting ? "Extracting frames\u2026" : "No frames yet" })
|
|
3172
|
+
] })
|
|
3173
|
+
] });
|
|
3174
|
+
};
|
|
3175
|
+
|
|
3176
|
+
// src/components/labs/LabsTab.tsx
|
|
3177
|
+
import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
3178
|
+
var BASE_TABS = [
|
|
2929
3179
|
{ key: "remix", label: "Remix", icon: "auto_fix_high" },
|
|
2930
3180
|
{ key: "blend", label: "Blend", icon: "merge" },
|
|
2931
3181
|
{ key: "compare", label: "Compare", icon: "compare" },
|
|
2932
3182
|
{ key: "loop", label: "Loop", icon: "loop" }
|
|
2933
3183
|
];
|
|
2934
|
-
var
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
3184
|
+
var FRAMES_TAB = { key: "frames", label: "Frames", icon: "crop_original" };
|
|
3185
|
+
var LabsTab = ({ services, onResult, videoItems, resolveVideoUrl }) => {
|
|
3186
|
+
const [activeTab, setActiveTab] = useState14("remix");
|
|
3187
|
+
const showFrames = !!(videoItems && resolveVideoUrl);
|
|
3188
|
+
const tabs = showFrames ? [...BASE_TABS, FRAMES_TAB] : BASE_TABS;
|
|
3189
|
+
return /* @__PURE__ */ jsxs17("div", { className: "flex flex-col h-full overflow-hidden", children: [
|
|
3190
|
+
/* @__PURE__ */ jsx19("div", { className: "flex border-b border-white/5 shrink-0", children: tabs.map((tab) => /* @__PURE__ */ jsxs17(
|
|
2938
3191
|
"button",
|
|
2939
3192
|
{
|
|
2940
3193
|
onClick: () => setActiveTab(tab.key),
|
|
2941
3194
|
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"}`,
|
|
2942
3195
|
children: [
|
|
2943
|
-
/* @__PURE__ */
|
|
3196
|
+
/* @__PURE__ */ jsx19("span", { className: "material-symbols-outlined text-[14px]", children: tab.icon }),
|
|
2944
3197
|
tab.label
|
|
2945
3198
|
]
|
|
2946
3199
|
},
|
|
2947
3200
|
tab.key
|
|
2948
3201
|
)) }),
|
|
2949
|
-
/* @__PURE__ */
|
|
2950
|
-
activeTab === "remix" && /* @__PURE__ */
|
|
2951
|
-
activeTab === "blend" && /* @__PURE__ */
|
|
2952
|
-
activeTab === "compare" && /* @__PURE__ */
|
|
2953
|
-
activeTab === "loop" && /* @__PURE__ */
|
|
3202
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex-1 overflow-hidden", children: [
|
|
3203
|
+
activeTab === "remix" && /* @__PURE__ */ jsx19(LabRemix, { services, onResult }),
|
|
3204
|
+
activeTab === "blend" && /* @__PURE__ */ jsx19(LabBlend, { services, onResult }),
|
|
3205
|
+
activeTab === "compare" && /* @__PURE__ */ jsx19(LabCompare, { services, onResult }),
|
|
3206
|
+
activeTab === "loop" && /* @__PURE__ */ jsx19(LabLoop, { services, onResult }),
|
|
3207
|
+
activeTab === "frames" && showFrames && /* @__PURE__ */ jsx19(
|
|
3208
|
+
LabFrameExtractor,
|
|
3209
|
+
{
|
|
3210
|
+
videoItems,
|
|
3211
|
+
onResult,
|
|
3212
|
+
resolveVideoUrl
|
|
3213
|
+
}
|
|
3214
|
+
)
|
|
2954
3215
|
] })
|
|
2955
3216
|
] });
|
|
2956
3217
|
};
|
|
2957
3218
|
|
|
2958
3219
|
// src/components/TagManagerPanel.tsx
|
|
2959
|
-
import { useState as
|
|
2960
|
-
import { jsx as
|
|
3220
|
+
import { useState as useState15 } from "react";
|
|
3221
|
+
import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2961
3222
|
function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete, onTagReorder, onTagMove }) {
|
|
2962
3223
|
const categories = Object.keys(workspaceTags.by_category).filter(
|
|
2963
3224
|
(cat) => (workspaceTags.by_category[cat] || []).some((t) => !t.is_deleted)
|
|
2964
3225
|
);
|
|
2965
|
-
const [selectedCategory, setSelectedCategory] =
|
|
3226
|
+
const [selectedCategory, setSelectedCategory] = useState15(categories[0] || "");
|
|
2966
3227
|
const effectiveCategory = categories.includes(selectedCategory) ? selectedCategory : categories[0] || "";
|
|
2967
|
-
const [editingLabel, setEditingLabel] =
|
|
2968
|
-
const [editState, setEditState] =
|
|
2969
|
-
const [newTag, setNewTag] =
|
|
2970
|
-
const [movingLabel, setMovingLabel] =
|
|
2971
|
-
const [moveTarget, setMoveTarget] =
|
|
3228
|
+
const [editingLabel, setEditingLabel] = useState15(null);
|
|
3229
|
+
const [editState, setEditState] = useState15({ label: "", value: "" });
|
|
3230
|
+
const [newTag, setNewTag] = useState15({ label: "", value: "" });
|
|
3231
|
+
const [movingLabel, setMovingLabel] = useState15(null);
|
|
3232
|
+
const [moveTarget, setMoveTarget] = useState15("");
|
|
2972
3233
|
const tags = (workspaceTags.by_category[effectiveCategory] || []).filter((t) => !t.is_deleted);
|
|
2973
3234
|
const otherCategories = categories.filter((c) => c !== effectiveCategory);
|
|
2974
3235
|
const startEdit = (tag) => {
|
|
@@ -3011,10 +3272,10 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3011
3272
|
if (!confirm(`Tag "${tag.label}" l\xF6schen?`)) return;
|
|
3012
3273
|
onTagDelete(tag.label, effectiveCategory);
|
|
3013
3274
|
};
|
|
3014
|
-
return /* @__PURE__ */
|
|
3015
|
-
/* @__PURE__ */
|
|
3016
|
-
/* @__PURE__ */
|
|
3017
|
-
categories.map((cat) => /* @__PURE__ */
|
|
3275
|
+
return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col h-full overflow-hidden", children: [
|
|
3276
|
+
/* @__PURE__ */ jsx20("div", { className: "px-3 py-2 border-b border-white/5 shrink-0", children: /* @__PURE__ */ jsx20("span", { className: "text-[10px] font-bold uppercase tracking-widest text-white/40", children: "Tag Manager" }) }),
|
|
3277
|
+
/* @__PURE__ */ jsx20("div", { className: "px-3 py-2 shrink-0 overflow-x-auto", children: /* @__PURE__ */ jsxs18("div", { className: "flex gap-1.5 flex-nowrap", children: [
|
|
3278
|
+
categories.map((cat) => /* @__PURE__ */ jsxs18(
|
|
3018
3279
|
"button",
|
|
3019
3280
|
{
|
|
3020
3281
|
onClick: () => {
|
|
@@ -3026,17 +3287,17 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3026
3287
|
children: [
|
|
3027
3288
|
cat,
|
|
3028
3289
|
" ",
|
|
3029
|
-
/* @__PURE__ */
|
|
3290
|
+
/* @__PURE__ */ jsx20("span", { className: "ml-1 opacity-50", children: (workspaceTags.by_category[cat] || []).filter((t) => !t.is_deleted).length })
|
|
3030
3291
|
]
|
|
3031
3292
|
},
|
|
3032
3293
|
cat
|
|
3033
3294
|
)),
|
|
3034
|
-
categories.length === 0 && /* @__PURE__ */
|
|
3295
|
+
categories.length === 0 && /* @__PURE__ */ jsx20("span", { className: "text-[10px] text-white/20", children: "Erst Workspace importieren" })
|
|
3035
3296
|
] }) }),
|
|
3036
|
-
/* @__PURE__ */
|
|
3037
|
-
tags.map((tag, i) => /* @__PURE__ */
|
|
3038
|
-
editingLabel === tag.label ? /* @__PURE__ */
|
|
3039
|
-
/* @__PURE__ */
|
|
3297
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex-1 overflow-y-auto dark-scrollbar px-3 pb-2 space-y-1", children: [
|
|
3298
|
+
tags.map((tag, i) => /* @__PURE__ */ jsxs18("div", { children: [
|
|
3299
|
+
editingLabel === tag.label ? /* @__PURE__ */ jsxs18("div", { className: "bg-white/5 border border-blue-600/40 rounded-lg p-2.5 space-y-1.5", children: [
|
|
3300
|
+
/* @__PURE__ */ jsx20(
|
|
3040
3301
|
"input",
|
|
3041
3302
|
{
|
|
3042
3303
|
value: editState.label,
|
|
@@ -3047,7 +3308,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3047
3308
|
onKeyDown: (e) => e.key === "Enter" && saveEdit(tag.label)
|
|
3048
3309
|
}
|
|
3049
3310
|
),
|
|
3050
|
-
/* @__PURE__ */
|
|
3311
|
+
/* @__PURE__ */ jsx20(
|
|
3051
3312
|
"textarea",
|
|
3052
3313
|
{
|
|
3053
3314
|
value: editState.value,
|
|
@@ -3057,24 +3318,24 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3057
3318
|
placeholder: "Prompt-Wert (leer = Label)"
|
|
3058
3319
|
}
|
|
3059
3320
|
),
|
|
3060
|
-
/* @__PURE__ */
|
|
3061
|
-
/* @__PURE__ */
|
|
3062
|
-
/* @__PURE__ */
|
|
3321
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex gap-1.5 justify-end", children: [
|
|
3322
|
+
/* @__PURE__ */ jsx20("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" }),
|
|
3323
|
+
/* @__PURE__ */ jsx20("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" })
|
|
3063
3324
|
] })
|
|
3064
|
-
] }) : /* @__PURE__ */
|
|
3065
|
-
/* @__PURE__ */
|
|
3066
|
-
/* @__PURE__ */
|
|
3067
|
-
/* @__PURE__ */
|
|
3325
|
+
] }) : /* @__PURE__ */ jsxs18("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: [
|
|
3326
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-0 shrink-0", children: [
|
|
3327
|
+
/* @__PURE__ */ jsx20("button", { onClick: () => handleMoveUp(i), disabled: i === 0, className: "text-white/20 hover:text-white/60 disabled:opacity-10 transition leading-none", children: /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined text-[14px]", children: "arrow_drop_up" }) }),
|
|
3328
|
+
/* @__PURE__ */ jsx20("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__ */ jsx20("span", { className: "material-symbols-outlined text-[14px]", children: "arrow_drop_down" }) })
|
|
3068
3329
|
] }),
|
|
3069
|
-
/* @__PURE__ */
|
|
3070
|
-
/* @__PURE__ */
|
|
3071
|
-
tag.value && tag.value !== tag.label && /* @__PURE__ */
|
|
3330
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex-1 min-w-0", children: [
|
|
3331
|
+
/* @__PURE__ */ jsx20("div", { className: "text-[12px] text-white/80 font-medium truncate", children: tag.label }),
|
|
3332
|
+
tag.value && tag.value !== tag.label && /* @__PURE__ */ jsxs18("div", { className: "text-[10px] text-white/30 truncate", children: [
|
|
3072
3333
|
tag.value.slice(0, 60),
|
|
3073
3334
|
tag.value.length > 60 ? "\u2026" : ""
|
|
3074
3335
|
] })
|
|
3075
3336
|
] }),
|
|
3076
|
-
/* @__PURE__ */
|
|
3077
|
-
otherCategories.length > 0 && /* @__PURE__ */
|
|
3337
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex gap-1 opacity-0 group-hover:opacity-100 transition shrink-0", children: [
|
|
3338
|
+
otherCategories.length > 0 && /* @__PURE__ */ jsx20(
|
|
3078
3339
|
"button",
|
|
3079
3340
|
{
|
|
3080
3341
|
onClick: () => {
|
|
@@ -3084,29 +3345,29 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3084
3345
|
},
|
|
3085
3346
|
className: "p-1 rounded text-white/30 hover:text-purple-400 transition",
|
|
3086
3347
|
title: "Kategorie wechseln",
|
|
3087
|
-
children: /* @__PURE__ */
|
|
3348
|
+
children: /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined text-[16px]", children: "drive_file_move" })
|
|
3088
3349
|
}
|
|
3089
3350
|
),
|
|
3090
|
-
/* @__PURE__ */
|
|
3091
|
-
/* @__PURE__ */
|
|
3351
|
+
/* @__PURE__ */ jsx20("button", { onClick: () => startEdit(tag), className: "p-1 rounded text-white/30 hover:text-blue-400 transition", title: "Bearbeiten", children: /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined text-[16px]", children: "edit" }) }),
|
|
3352
|
+
/* @__PURE__ */ jsx20("button", { onClick: () => handleDelete(tag), className: "p-1 rounded text-white/30 hover:text-red-400 transition", title: "L\xF6schen", children: /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined text-[16px]", children: "delete" }) })
|
|
3092
3353
|
] })
|
|
3093
3354
|
] }),
|
|
3094
|
-
movingLabel === tag.label && /* @__PURE__ */
|
|
3095
|
-
/* @__PURE__ */
|
|
3096
|
-
/* @__PURE__ */
|
|
3355
|
+
movingLabel === tag.label && /* @__PURE__ */ jsxs18("div", { className: "mt-1 bg-purple-900/20 border border-purple-700/30 rounded-lg p-2.5 space-y-1.5", children: [
|
|
3356
|
+
/* @__PURE__ */ jsx20("div", { className: "text-[9px] font-bold uppercase tracking-widest text-purple-400/70", children: "Verschieben nach Kategorie" }),
|
|
3357
|
+
/* @__PURE__ */ jsxs18(
|
|
3097
3358
|
"select",
|
|
3098
3359
|
{
|
|
3099
3360
|
value: moveTarget,
|
|
3100
3361
|
onChange: (e) => setMoveTarget(e.target.value),
|
|
3101
3362
|
className: "w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-[11px] text-white/70 outline-none",
|
|
3102
3363
|
children: [
|
|
3103
|
-
/* @__PURE__ */
|
|
3104
|
-
otherCategories.map((cat) => /* @__PURE__ */
|
|
3364
|
+
/* @__PURE__ */ jsx20("option", { value: "", children: "\u2014 Kategorie w\xE4hlen \u2014" }),
|
|
3365
|
+
otherCategories.map((cat) => /* @__PURE__ */ jsx20("option", { value: cat, children: cat }, cat))
|
|
3105
3366
|
]
|
|
3106
3367
|
}
|
|
3107
3368
|
),
|
|
3108
|
-
/* @__PURE__ */
|
|
3109
|
-
/* @__PURE__ */
|
|
3369
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex gap-1.5 justify-end", children: [
|
|
3370
|
+
/* @__PURE__ */ jsx20(
|
|
3110
3371
|
"button",
|
|
3111
3372
|
{
|
|
3112
3373
|
onClick: () => handleMove(tag),
|
|
@@ -3115,19 +3376,19 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3115
3376
|
children: "VERSCHIEBEN"
|
|
3116
3377
|
}
|
|
3117
3378
|
),
|
|
3118
|
-
/* @__PURE__ */
|
|
3379
|
+
/* @__PURE__ */ jsx20("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" })
|
|
3119
3380
|
] })
|
|
3120
3381
|
] })
|
|
3121
3382
|
] }, `${effectiveCategory}-${i}`)),
|
|
3122
|
-
tags.length === 0 && effectiveCategory && /* @__PURE__ */
|
|
3383
|
+
tags.length === 0 && effectiveCategory && /* @__PURE__ */ jsx20("div", { className: "text-center text-[11px] text-white/20 py-6", children: "Keine Tags in dieser Kategorie." })
|
|
3123
3384
|
] }),
|
|
3124
|
-
effectiveCategory && /* @__PURE__ */
|
|
3125
|
-
/* @__PURE__ */
|
|
3385
|
+
effectiveCategory && /* @__PURE__ */ jsxs18("div", { className: "px-3 py-2 border-t border-white/5 shrink-0 space-y-1.5", children: [
|
|
3386
|
+
/* @__PURE__ */ jsxs18("div", { className: "text-[9px] font-bold uppercase tracking-widest text-white/30", children: [
|
|
3126
3387
|
"Neuer Tag in \u201E",
|
|
3127
3388
|
effectiveCategory,
|
|
3128
3389
|
'"'
|
|
3129
3390
|
] }),
|
|
3130
|
-
/* @__PURE__ */
|
|
3391
|
+
/* @__PURE__ */ jsx20(
|
|
3131
3392
|
"input",
|
|
3132
3393
|
{
|
|
3133
3394
|
value: newTag.label,
|
|
@@ -3137,7 +3398,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3137
3398
|
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"
|
|
3138
3399
|
}
|
|
3139
3400
|
),
|
|
3140
|
-
/* @__PURE__ */
|
|
3401
|
+
/* @__PURE__ */ jsx20(
|
|
3141
3402
|
"textarea",
|
|
3142
3403
|
{
|
|
3143
3404
|
value: newTag.value,
|
|
@@ -3147,14 +3408,14 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3147
3408
|
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"
|
|
3148
3409
|
}
|
|
3149
3410
|
),
|
|
3150
|
-
/* @__PURE__ */
|
|
3411
|
+
/* @__PURE__ */ jsxs18(
|
|
3151
3412
|
"button",
|
|
3152
3413
|
{
|
|
3153
3414
|
onClick: handleCreate,
|
|
3154
3415
|
disabled: !newTag.label.trim(),
|
|
3155
3416
|
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",
|
|
3156
3417
|
children: [
|
|
3157
|
-
/* @__PURE__ */
|
|
3418
|
+
/* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined text-[14px]", children: "add" }),
|
|
3158
3419
|
"TAG ERSTELLEN"
|
|
3159
3420
|
]
|
|
3160
3421
|
}
|
|
@@ -3164,8 +3425,8 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3164
3425
|
}
|
|
3165
3426
|
|
|
3166
3427
|
// src/components/HFTestTab.tsx
|
|
3167
|
-
import { useState as
|
|
3168
|
-
import { jsx as
|
|
3428
|
+
import { useState as useState16 } from "react";
|
|
3429
|
+
import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
3169
3430
|
var HF_BASE = "https://huggingface.co";
|
|
3170
3431
|
var HF_REPO = "RolandSch/fa-app-state";
|
|
3171
3432
|
var TEST_DIR = "test";
|
|
@@ -3357,8 +3618,8 @@ function tryFmt(s) {
|
|
|
3357
3618
|
}
|
|
3358
3619
|
}
|
|
3359
3620
|
function CopyBtn({ text }) {
|
|
3360
|
-
const [done, setDone] =
|
|
3361
|
-
return /* @__PURE__ */
|
|
3621
|
+
const [done, setDone] = useState16(false);
|
|
3622
|
+
return /* @__PURE__ */ jsxs19(
|
|
3362
3623
|
"button",
|
|
3363
3624
|
{
|
|
3364
3625
|
onClick: () => {
|
|
@@ -3369,7 +3630,7 @@ function CopyBtn({ text }) {
|
|
|
3369
3630
|
},
|
|
3370
3631
|
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 },
|
|
3371
3632
|
children: [
|
|
3372
|
-
/* @__PURE__ */
|
|
3633
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: done ? "check" : "content_copy" }),
|
|
3373
3634
|
done ? "Kopiert" : "Copy"
|
|
3374
3635
|
]
|
|
3375
3636
|
}
|
|
@@ -3377,35 +3638,35 @@ function CopyBtn({ text }) {
|
|
|
3377
3638
|
}
|
|
3378
3639
|
function StepView({ step }) {
|
|
3379
3640
|
const isSpecial = step.method === "-" || step.method === "import()" || step.method === "import()+call";
|
|
3380
|
-
return /* @__PURE__ */
|
|
3381
|
-
/* @__PURE__ */
|
|
3382
|
-
/* @__PURE__ */
|
|
3383
|
-
/* @__PURE__ */
|
|
3384
|
-
step.durationMs !== void 0 && /* @__PURE__ */
|
|
3641
|
+
return /* @__PURE__ */ jsxs19("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: [
|
|
3642
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }, children: [
|
|
3643
|
+
/* @__PURE__ */ jsx21("span", { style: { fontSize: 11, fontWeight: 700, color: step.ok === false ? "#f87171" : "#4ade80" }, children: step.ok === false ? "\u2717" : "\u2713" }),
|
|
3644
|
+
/* @__PURE__ */ jsx21("span", { style: { fontSize: 11, fontWeight: 600, color: "rgba(255,255,255,0.7)", flex: 1 }, children: step.label }),
|
|
3645
|
+
step.durationMs !== void 0 && /* @__PURE__ */ jsxs19("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)" }, children: [
|
|
3385
3646
|
step.durationMs,
|
|
3386
3647
|
"ms"
|
|
3387
3648
|
] }),
|
|
3388
|
-
/* @__PURE__ */
|
|
3649
|
+
/* @__PURE__ */ jsx21(CopyBtn, { text: JSON.stringify(step, null, 2) })
|
|
3389
3650
|
] }),
|
|
3390
|
-
!isSpecial && /* @__PURE__ */
|
|
3391
|
-
/* @__PURE__ */
|
|
3651
|
+
!isSpecial && /* @__PURE__ */ jsxs19("div", { style: { marginBottom: 5 }, children: [
|
|
3652
|
+
/* @__PURE__ */ jsxs19("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginBottom: 2 }, children: [
|
|
3392
3653
|
"\u2192 ",
|
|
3393
3654
|
step.method,
|
|
3394
3655
|
" ",
|
|
3395
3656
|
step.url
|
|
3396
3657
|
] }),
|
|
3397
|
-
Object.keys(step.reqHeaders).length > 0 && /* @__PURE__ */
|
|
3398
|
-
step.reqBody && /* @__PURE__ */
|
|
3658
|
+
Object.keys(step.reqHeaders).length > 0 && /* @__PURE__ */ jsx21("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") }),
|
|
3659
|
+
step.reqBody && /* @__PURE__ */ jsx21("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 })
|
|
3399
3660
|
] }),
|
|
3400
|
-
step.error && /* @__PURE__ */
|
|
3401
|
-
!step.error && (step.resStatus !== void 0 || step.resBody) && /* @__PURE__ */
|
|
3402
|
-
step.resStatus !== void 0 && /* @__PURE__ */
|
|
3661
|
+
step.error && /* @__PURE__ */ jsx21("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 }),
|
|
3662
|
+
!step.error && (step.resStatus !== void 0 || step.resBody) && /* @__PURE__ */ jsxs19("div", { children: [
|
|
3663
|
+
step.resStatus !== void 0 && /* @__PURE__ */ jsxs19("div", { style: { fontSize: 11, fontWeight: 700, color: (step.resStatus || 0) < 300 ? "#4ade80" : "#f87171", marginBottom: 3 }, children: [
|
|
3403
3664
|
"\u2190 ",
|
|
3404
3665
|
step.resStatus,
|
|
3405
3666
|
" ",
|
|
3406
3667
|
step.resStatusText
|
|
3407
3668
|
] }),
|
|
3408
|
-
step.resBody && /* @__PURE__ */
|
|
3669
|
+
step.resBody && /* @__PURE__ */ jsx21("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) })
|
|
3409
3670
|
] })
|
|
3410
3671
|
] });
|
|
3411
3672
|
}
|
|
@@ -3421,15 +3682,15 @@ function TestCard({
|
|
|
3421
3682
|
onToggle
|
|
3422
3683
|
}) {
|
|
3423
3684
|
const hasResult = state && state.status !== "idle";
|
|
3424
|
-
return /* @__PURE__ */
|
|
3425
|
-
/* @__PURE__ */
|
|
3426
|
-
/* @__PURE__ */
|
|
3427
|
-
/* @__PURE__ */
|
|
3428
|
-
/* @__PURE__ */
|
|
3429
|
-
/* @__PURE__ */
|
|
3685
|
+
return /* @__PURE__ */ jsxs19("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: [
|
|
3686
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "9px 10px" }, children: [
|
|
3687
|
+
/* @__PURE__ */ jsx21("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 }),
|
|
3688
|
+
/* @__PURE__ */ jsxs19("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
3689
|
+
/* @__PURE__ */ jsx21("div", { style: { fontSize: 13, fontWeight: 700, color: "#fff" }, children: label }),
|
|
3690
|
+
/* @__PURE__ */ jsx21("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: desc })
|
|
3430
3691
|
] }),
|
|
3431
|
-
hasResult && state?.status !== "running" && /* @__PURE__ */
|
|
3432
|
-
/* @__PURE__ */
|
|
3692
|
+
hasResult && state?.status !== "running" && /* @__PURE__ */ jsx21("button", { onClick: onToggle, style: { background: "none", border: "none", color: "rgba(255,255,255,0.3)", cursor: "pointer", padding: 2, lineHeight: 0 }, children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: expanded ? "expand_less" : "expand_more" }) }),
|
|
3693
|
+
/* @__PURE__ */ jsx21(
|
|
3433
3694
|
"button",
|
|
3434
3695
|
{
|
|
3435
3696
|
onClick: onRun,
|
|
@@ -3439,20 +3700,20 @@ function TestCard({
|
|
|
3439
3700
|
}
|
|
3440
3701
|
)
|
|
3441
3702
|
] }),
|
|
3442
|
-
hasResult && /* @__PURE__ */
|
|
3443
|
-
/* @__PURE__ */
|
|
3444
|
-
/* @__PURE__ */
|
|
3445
|
-
/* @__PURE__ */
|
|
3703
|
+
hasResult && /* @__PURE__ */ jsxs19("div", { style: { borderTop: "1px solid rgba(255,255,255,0.05)" }, children: [
|
|
3704
|
+
/* @__PURE__ */ jsxs19("div", { style: { padding: "4px 10px 5px", display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
3705
|
+
/* @__PURE__ */ jsx21("span", { style: { fontSize: 11, fontWeight: 700, color: state.status === "ok" ? "#4ade80" : "#f87171" }, children: state.status === "ok" ? "\u2713 OK" : state.status === "running" ? "\u2026" : "\u2717 Fehler" }),
|
|
3706
|
+
/* @__PURE__ */ jsxs19("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)" }, children: [
|
|
3446
3707
|
state.totalMs,
|
|
3447
3708
|
"ms \xB7 ",
|
|
3448
3709
|
state.steps.length,
|
|
3449
3710
|
" Step",
|
|
3450
3711
|
state.steps.length !== 1 ? "s" : ""
|
|
3451
3712
|
] }),
|
|
3452
|
-
/* @__PURE__ */
|
|
3453
|
-
/* @__PURE__ */
|
|
3713
|
+
/* @__PURE__ */ jsx21("div", { style: { flex: 1 } }),
|
|
3714
|
+
/* @__PURE__ */ jsx21(CopyBtn, { text: JSON.stringify(state, null, 2) })
|
|
3454
3715
|
] }),
|
|
3455
|
-
expanded && state.steps.map((step, i) => /* @__PURE__ */
|
|
3716
|
+
expanded && state.steps.map((step, i) => /* @__PURE__ */ jsx21("div", { style: { padding: "0 10px 4px" }, children: /* @__PURE__ */ jsx21(StepView, { step }) }, i))
|
|
3456
3717
|
] })
|
|
3457
3718
|
] });
|
|
3458
3719
|
}
|
|
@@ -3464,10 +3725,10 @@ var EVENT_TYPE_COLORS = {
|
|
|
3464
3725
|
};
|
|
3465
3726
|
function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadStatus }) {
|
|
3466
3727
|
if (!events.length) {
|
|
3467
|
-
return /* @__PURE__ */
|
|
3728
|
+
return /* @__PURE__ */ jsx21("div", { style: { padding: "12px 14px", fontSize: 12, color: "rgba(255,255,255,0.3)", fontStyle: "italic" }, children: "Noch keine Events geladen." });
|
|
3468
3729
|
}
|
|
3469
3730
|
const sorted = [...events].sort((a, b) => b.ts - a.ts).slice(0, 30);
|
|
3470
|
-
return /* @__PURE__ */
|
|
3731
|
+
return /* @__PURE__ */ jsxs19("div", { style: { padding: "6px 8px 4px" }, children: [
|
|
3471
3732
|
sorted.map((e, i) => {
|
|
3472
3733
|
const eKey = `${e.ts}_${e.clientId}`;
|
|
3473
3734
|
const isConfirmed = confirmedEventKeys.has(eKey);
|
|
@@ -3480,47 +3741,47 @@ function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadSta
|
|
|
3480
3741
|
const uploadStatus = imgId ? imageUploadStatus.get(imgId) : void 0;
|
|
3481
3742
|
const payloadStr = JSON.stringify(e.payload ?? {});
|
|
3482
3743
|
const payloadPreview = payloadStr.length > 70 ? payloadStr.slice(0, 70) + "\u2026" : payloadStr;
|
|
3483
|
-
return /* @__PURE__ */
|
|
3484
|
-
/* @__PURE__ */
|
|
3485
|
-
/* @__PURE__ */
|
|
3486
|
-
/* @__PURE__ */
|
|
3487
|
-
/* @__PURE__ */
|
|
3488
|
-
/* @__PURE__ */
|
|
3489
|
-
/* @__PURE__ */
|
|
3490
|
-
isConfirmed ? /* @__PURE__ */
|
|
3491
|
-
/* @__PURE__ */
|
|
3744
|
+
return /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: 7, alignItems: "flex-start", padding: "6px 2px", borderBottom: "1px solid rgba(255,255,255,0.05)" }, children: [
|
|
3745
|
+
/* @__PURE__ */ jsx21("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__ */ jsx21("img", { src: galleryItem.base64, style: { width: "100%", height: "100%", objectFit: "cover" } }) : /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 18, color: "rgba(255,255,255,0.2)" }, children: "image" }) : /* @__PURE__ */ jsx21("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" }) }),
|
|
3746
|
+
/* @__PURE__ */ jsxs19("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
3747
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
|
|
3748
|
+
/* @__PURE__ */ jsx21("span", { style: { fontSize: 11, fontWeight: 700, color: typeColor }, children: e.type }),
|
|
3749
|
+
/* @__PURE__ */ jsx21("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", fontVariantNumeric: "tabular-nums" }, children: timeStr }),
|
|
3750
|
+
/* @__PURE__ */ jsx21("div", { style: { flex: 1 } }),
|
|
3751
|
+
isConfirmed ? /* @__PURE__ */ jsxs19("span", { style: { fontSize: 9, fontWeight: 700, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3752
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "check_circle" }),
|
|
3492
3753
|
"HF"
|
|
3493
|
-
] }) : /* @__PURE__ */
|
|
3494
|
-
/* @__PURE__ */
|
|
3754
|
+
] }) : /* @__PURE__ */ jsxs19("span", { style: { fontSize: 9, fontWeight: 700, color: "#fbbf24", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3755
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "schedule" }),
|
|
3495
3756
|
"lokal"
|
|
3496
3757
|
] })
|
|
3497
3758
|
] }),
|
|
3498
|
-
isImageEvent && /* @__PURE__ */
|
|
3499
|
-
uploadStatus === "done" && /* @__PURE__ */
|
|
3500
|
-
/* @__PURE__ */
|
|
3759
|
+
isImageEvent && /* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3, flexWrap: "wrap" }, children: [
|
|
3760
|
+
uploadStatus === "done" && /* @__PURE__ */ jsxs19("span", { style: { fontSize: 9, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3761
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_done" }),
|
|
3501
3762
|
"Upload \u2713"
|
|
3502
3763
|
] }),
|
|
3503
|
-
uploadStatus === "uploading" && /* @__PURE__ */
|
|
3504
|
-
/* @__PURE__ */
|
|
3764
|
+
uploadStatus === "uploading" && /* @__PURE__ */ jsxs19("span", { style: { fontSize: 9, color: "#60a5fa", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3765
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_upload" }),
|
|
3505
3766
|
"l\xE4dt hoch\u2026"
|
|
3506
3767
|
] }),
|
|
3507
|
-
uploadStatus === "failed" && /* @__PURE__ */
|
|
3508
|
-
/* @__PURE__ */
|
|
3768
|
+
uploadStatus === "failed" && /* @__PURE__ */ jsxs19("span", { style: { fontSize: 9, color: "#f87171", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3769
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_off" }),
|
|
3509
3770
|
"Upload fehlgeschlagen"
|
|
3510
3771
|
] }),
|
|
3511
|
-
galleryItem?.base64 ? /* @__PURE__ */
|
|
3512
|
-
/* @__PURE__ */
|
|
3772
|
+
galleryItem?.base64 ? /* @__PURE__ */ jsxs19("span", { style: { fontSize: 9, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3773
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "photo" }),
|
|
3513
3774
|
uploadStatus ? "lokal" : "von HF geladen"
|
|
3514
|
-
] }) : /* @__PURE__ */
|
|
3515
|
-
/* @__PURE__ */
|
|
3775
|
+
] }) : /* @__PURE__ */ jsxs19("span", { style: { fontSize: 9, color: "#f87171", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3776
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "broken_image" }),
|
|
3516
3777
|
uploadStatus === "failed" ? "Binary nicht auf HF" : "wird geladen\u2026"
|
|
3517
3778
|
] })
|
|
3518
3779
|
] }),
|
|
3519
|
-
/* @__PURE__ */
|
|
3780
|
+
/* @__PURE__ */ jsx21("div", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: payloadPreview })
|
|
3520
3781
|
] })
|
|
3521
3782
|
] }, `${eKey}_${i}`);
|
|
3522
3783
|
}),
|
|
3523
|
-
/* @__PURE__ */
|
|
3784
|
+
/* @__PURE__ */ jsxs19("div", { style: { padding: "6px 0 2px", fontSize: 9, color: "rgba(255,255,255,0.2)", textAlign: "right" }, children: [
|
|
3524
3785
|
events.length,
|
|
3525
3786
|
" Events gesamt \xB7 ",
|
|
3526
3787
|
[...confirmedEventKeys].length,
|
|
@@ -3529,9 +3790,9 @@ function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadSta
|
|
|
3529
3790
|
] });
|
|
3530
3791
|
}
|
|
3531
3792
|
function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEventKeys = /* @__PURE__ */ new Set(), imageUploadStatus = /* @__PURE__ */ new Map() }) {
|
|
3532
|
-
const [selected, setSelected] =
|
|
3533
|
-
const [results, setResults] =
|
|
3534
|
-
const [expanded, setExpanded] =
|
|
3793
|
+
const [selected, setSelected] = useState16(null);
|
|
3794
|
+
const [results, setResults] = useState16({});
|
|
3795
|
+
const [expanded, setExpanded] = useState16({});
|
|
3535
3796
|
const withResults = galleryItems.filter((g) => g.base64 && g.status === "done");
|
|
3536
3797
|
const setRunning = (id) => setResults((r) => ({ ...r, [id]: { status: "running", steps: [], totalMs: 0 } }));
|
|
3537
3798
|
const setDone = (id, steps, t0) => {
|
|
@@ -3579,15 +3840,15 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3579
3840
|
{ id: "img-hub", label: "Upload hub lib", icon: "package_2", desc: "uploadFile() via @huggingface/hub" },
|
|
3580
3841
|
{ id: "img-cdn", label: "Upload CDN lib", icon: "language", desc: "uploadFile() via esm.sh hub lib" }
|
|
3581
3842
|
];
|
|
3582
|
-
return /* @__PURE__ */
|
|
3583
|
-
noToken && /* @__PURE__ */
|
|
3584
|
-
/* @__PURE__ */
|
|
3843
|
+
return /* @__PURE__ */ jsxs19("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflowY: "auto", padding: "12px 10px 80px", boxSizing: "border-box", fontFamily: "inherit" }, children: [
|
|
3844
|
+
noToken && /* @__PURE__ */ jsx21("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." }),
|
|
3845
|
+
/* @__PURE__ */ jsx21("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsx21(
|
|
3585
3846
|
CollapsibleCard,
|
|
3586
3847
|
{
|
|
3587
3848
|
title: "Event Monitor",
|
|
3588
|
-
icon: /* @__PURE__ */
|
|
3849
|
+
icon: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "bolt" }),
|
|
3589
3850
|
defaultOpen: true,
|
|
3590
|
-
children: /* @__PURE__ */
|
|
3851
|
+
children: /* @__PURE__ */ jsx21(
|
|
3591
3852
|
EventMonitor,
|
|
3592
3853
|
{
|
|
3593
3854
|
events: allEvents,
|
|
@@ -3598,25 +3859,25 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3598
3859
|
)
|
|
3599
3860
|
}
|
|
3600
3861
|
) }),
|
|
3601
|
-
/* @__PURE__ */
|
|
3862
|
+
/* @__PURE__ */ jsx21(
|
|
3602
3863
|
CollapsibleCard,
|
|
3603
3864
|
{
|
|
3604
3865
|
title: "Upload Tests",
|
|
3605
|
-
icon: /* @__PURE__ */
|
|
3866
|
+
icon: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "science" }),
|
|
3606
3867
|
defaultOpen: false,
|
|
3607
|
-
children: /* @__PURE__ */
|
|
3608
|
-
/* @__PURE__ */
|
|
3609
|
-
/* @__PURE__ */
|
|
3868
|
+
children: /* @__PURE__ */ jsxs19("div", { style: { padding: "10px 10px 4px" }, children: [
|
|
3869
|
+
/* @__PURE__ */ jsxs19("div", { style: { marginBottom: 14 }, children: [
|
|
3870
|
+
/* @__PURE__ */ jsxs19("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }, children: [
|
|
3610
3871
|
"Bild ausw\xE4hlen (",
|
|
3611
3872
|
withResults.length,
|
|
3612
3873
|
" verf\xFCgbar)"
|
|
3613
3874
|
] }),
|
|
3614
|
-
withResults.length === 0 ? /* @__PURE__ */
|
|
3875
|
+
withResults.length === 0 ? /* @__PURE__ */ jsx21("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__ */ jsx21("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }, children: withResults.slice(0, 12).map((g) => /* @__PURE__ */ jsx21(
|
|
3615
3876
|
"button",
|
|
3616
3877
|
{
|
|
3617
3878
|
onClick: () => setSelected(g),
|
|
3618
3879
|
style: { padding: 0, border: `2px solid ${selected?.id === g.id ? "#0284c7" : "transparent"}`, borderRadius: 6, cursor: "pointer", overflow: "hidden", background: "none", lineHeight: 0 },
|
|
3619
|
-
children: /* @__PURE__ */
|
|
3880
|
+
children: /* @__PURE__ */ jsx21(
|
|
3620
3881
|
"img",
|
|
3621
3882
|
{
|
|
3622
3883
|
src: g.base64,
|
|
@@ -3627,38 +3888,38 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3627
3888
|
},
|
|
3628
3889
|
g.id
|
|
3629
3890
|
)) }),
|
|
3630
|
-
selected && /* @__PURE__ */
|
|
3631
|
-
/* @__PURE__ */
|
|
3891
|
+
selected && /* @__PURE__ */ jsxs19("div", { style: { marginTop: 10, display: "flex", gap: 10, alignItems: "flex-start" }, children: [
|
|
3892
|
+
/* @__PURE__ */ jsx21(
|
|
3632
3893
|
"img",
|
|
3633
3894
|
{
|
|
3634
3895
|
src: selected.base64,
|
|
3635
3896
|
style: { width: 80, height: 80, objectFit: "cover", borderRadius: 8, border: "1px solid rgba(255,255,255,0.1)", flexShrink: 0 }
|
|
3636
3897
|
}
|
|
3637
3898
|
),
|
|
3638
|
-
/* @__PURE__ */
|
|
3639
|
-
/* @__PURE__ */
|
|
3640
|
-
/* @__PURE__ */
|
|
3899
|
+
/* @__PURE__ */ jsxs19("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
3900
|
+
/* @__PURE__ */ jsx21("div", { style: { fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.7)", marginBottom: 2 }, children: "Ausgew\xE4hlt" }),
|
|
3901
|
+
/* @__PURE__ */ jsxs19("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", wordBreak: "break-all" }, children: [
|
|
3641
3902
|
"ID: ",
|
|
3642
3903
|
selected.id
|
|
3643
3904
|
] }),
|
|
3644
|
-
/* @__PURE__ */
|
|
3905
|
+
/* @__PURE__ */ jsxs19("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }, children: [
|
|
3645
3906
|
"Ziel: test/",
|
|
3646
3907
|
selected.id,
|
|
3647
3908
|
".jpg"
|
|
3648
3909
|
] }),
|
|
3649
|
-
selected.prompt && /* @__PURE__ */
|
|
3910
|
+
selected.prompt && /* @__PURE__ */ jsx21("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selected.prompt })
|
|
3650
3911
|
] })
|
|
3651
3912
|
] })
|
|
3652
3913
|
] }),
|
|
3653
|
-
/* @__PURE__ */
|
|
3654
|
-
/* @__PURE__ */
|
|
3914
|
+
/* @__PURE__ */ jsxs19("div", { style: { marginBottom: 14 }, children: [
|
|
3915
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
3655
3916
|
"Bild hochladen \u2192 test/",
|
|
3656
3917
|
"{",
|
|
3657
3918
|
"id",
|
|
3658
3919
|
"}",
|
|
3659
3920
|
".jpg"
|
|
3660
3921
|
] }),
|
|
3661
|
-
imgTests.map((t) => /* @__PURE__ */
|
|
3922
|
+
imgTests.map((t) => /* @__PURE__ */ jsx21(
|
|
3662
3923
|
TestCard,
|
|
3663
3924
|
{
|
|
3664
3925
|
id: t.id,
|
|
@@ -3674,13 +3935,13 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3674
3935
|
t.id
|
|
3675
3936
|
))
|
|
3676
3937
|
] }),
|
|
3677
|
-
/* @__PURE__ */
|
|
3678
|
-
/* @__PURE__ */
|
|
3938
|
+
/* @__PURE__ */ jsxs19("div", { style: { marginBottom: 4 }, children: [
|
|
3939
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
3679
3940
|
"Event schreiben \u2192 ",
|
|
3680
3941
|
namespace || "(kein namespace)",
|
|
3681
3942
|
"test/events/"
|
|
3682
3943
|
] }),
|
|
3683
|
-
/* @__PURE__ */
|
|
3944
|
+
/* @__PURE__ */ jsx21(
|
|
3684
3945
|
TestCard,
|
|
3685
3946
|
{
|
|
3686
3947
|
id: "event",
|
|
@@ -3701,10 +3962,234 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3701
3962
|
] });
|
|
3702
3963
|
}
|
|
3703
3964
|
|
|
3965
|
+
// src/components/ServerTab.tsx
|
|
3966
|
+
import { useState as useState17, useEffect as useEffect6 } from "react";
|
|
3967
|
+
|
|
3968
|
+
// src/lib/faHfServerService.ts
|
|
3969
|
+
var FA_APP_SPACE = "https://rslsp1-fa-app.hf.space";
|
|
3970
|
+
async function request(method, path, env = "prod", body) {
|
|
3971
|
+
const token = getHFToken();
|
|
3972
|
+
if (!token) throw new Error("fa-app gateway: kein HF Token gesetzt");
|
|
3973
|
+
const res = await fetch(`${FA_APP_SPACE}/${path.replace(/^\//, "")}`, {
|
|
3974
|
+
method,
|
|
3975
|
+
headers: {
|
|
3976
|
+
"Authorization": `Bearer ${token}`,
|
|
3977
|
+
"X-Env": env,
|
|
3978
|
+
...body !== void 0 ? { "Content-Type": "application/json" } : {}
|
|
3979
|
+
},
|
|
3980
|
+
...body !== void 0 ? { body: JSON.stringify(body) } : {}
|
|
3981
|
+
});
|
|
3982
|
+
if (!res.ok) {
|
|
3983
|
+
const text = await res.text().catch(() => "");
|
|
3984
|
+
throw new Error(`fa-app gateway ${method} /${path} [${env}] \u2192 ${res.status}: ${text.slice(0, 200)}`);
|
|
3985
|
+
}
|
|
3986
|
+
return res.json();
|
|
3987
|
+
}
|
|
3988
|
+
function faServerGet(path, env = "prod") {
|
|
3989
|
+
return request("GET", path, env);
|
|
3990
|
+
}
|
|
3991
|
+
function faServerPost(path, body, env = "prod") {
|
|
3992
|
+
return request("POST", path, env, body);
|
|
3993
|
+
}
|
|
3994
|
+
function faServerPut(path, body, env = "prod") {
|
|
3995
|
+
return request("PUT", path, env, body);
|
|
3996
|
+
}
|
|
3997
|
+
function faServerDelete(path, env = "prod") {
|
|
3998
|
+
return request("DELETE", path, env);
|
|
3999
|
+
}
|
|
4000
|
+
|
|
4001
|
+
// src/components/ServerTab.tsx
|
|
4002
|
+
import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
4003
|
+
function StarRating({ rating = 0 }) {
|
|
4004
|
+
return /* @__PURE__ */ jsx22("div", { className: "flex gap-[2px]", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx22("span", { className: `material-symbols-outlined text-[12px] ${i <= rating ? "text-yellow-400" : "text-white/15"}`, children: "star" }, i)) });
|
|
4005
|
+
}
|
|
4006
|
+
function ServerTab() {
|
|
4007
|
+
const hasToken = !!getHFToken();
|
|
4008
|
+
const [env, setEnv] = useState17("prod");
|
|
4009
|
+
const [step, setStep] = useState17("user");
|
|
4010
|
+
const [users, setUsers] = useState17([]);
|
|
4011
|
+
const [usersLoading, setUsersLoading] = useState17(false);
|
|
4012
|
+
const [usersError, setUsersError] = useState17(null);
|
|
4013
|
+
const [selectedUser, setSelectedUser] = useState17(null);
|
|
4014
|
+
const [contexts, setContexts] = useState17([]);
|
|
4015
|
+
const [contextsLoading, setContextsLoading] = useState17(false);
|
|
4016
|
+
const [selectedContext, setSelectedContext] = useState17(null);
|
|
4017
|
+
const [tags, setTags] = useState17([]);
|
|
4018
|
+
const [items, setItems] = useState17([]);
|
|
4019
|
+
const [libLoading, setLibLoading] = useState17(false);
|
|
4020
|
+
const [libError, setLibError] = useState17(null);
|
|
4021
|
+
const [activeTag, setActiveTag] = useState17(null);
|
|
4022
|
+
const [preview, setPreview] = useState17(null);
|
|
4023
|
+
useEffect6(() => {
|
|
4024
|
+
if (!hasToken) return;
|
|
4025
|
+
setUsersLoading(true);
|
|
4026
|
+
setUsersError(null);
|
|
4027
|
+
faServerGet("/api/v2/users", env).then(setUsers).catch((e) => setUsersError(String(e))).finally(() => setUsersLoading(false));
|
|
4028
|
+
}, [env, hasToken]);
|
|
4029
|
+
const selectUser = async (user) => {
|
|
4030
|
+
setSelectedUser(user);
|
|
4031
|
+
setContextsLoading(true);
|
|
4032
|
+
try {
|
|
4033
|
+
const data = await faServerGet(`/api/v2/contexts?user_id=${user.id}`, env);
|
|
4034
|
+
if (data.length === 1) {
|
|
4035
|
+
await loadLibrary(user, data[0]);
|
|
4036
|
+
} else {
|
|
4037
|
+
setContexts(data);
|
|
4038
|
+
setStep("context");
|
|
4039
|
+
}
|
|
4040
|
+
} catch (e) {
|
|
4041
|
+
setUsersError(String(e));
|
|
4042
|
+
} finally {
|
|
4043
|
+
setContextsLoading(false);
|
|
4044
|
+
}
|
|
4045
|
+
};
|
|
4046
|
+
const loadLibrary = async (user, ctx) => {
|
|
4047
|
+
setSelectedContext(ctx);
|
|
4048
|
+
setStep("library");
|
|
4049
|
+
setLibLoading(true);
|
|
4050
|
+
setLibError(null);
|
|
4051
|
+
try {
|
|
4052
|
+
const [tagsRes, libRes] = await Promise.all([
|
|
4053
|
+
faServerGet(`/api/v2/tags?user_id=${user.id}`, env),
|
|
4054
|
+
faServerGet(`/api/v2/library?user_id=${user.id}&context_id=${ctx.id}&limit=100`, env)
|
|
4055
|
+
]);
|
|
4056
|
+
setTags(Array.isArray(tagsRes) ? tagsRes : []);
|
|
4057
|
+
const raw = Array.isArray(libRes) ? libRes : libRes.data ?? [];
|
|
4058
|
+
setItems(raw);
|
|
4059
|
+
} catch (e) {
|
|
4060
|
+
setLibError(String(e));
|
|
4061
|
+
} finally {
|
|
4062
|
+
setLibLoading(false);
|
|
4063
|
+
}
|
|
4064
|
+
};
|
|
4065
|
+
const reset = () => {
|
|
4066
|
+
setStep("user");
|
|
4067
|
+
setSelectedUser(null);
|
|
4068
|
+
setSelectedContext(null);
|
|
4069
|
+
setContexts([]);
|
|
4070
|
+
setTags([]);
|
|
4071
|
+
setItems([]);
|
|
4072
|
+
setActiveTag(null);
|
|
4073
|
+
setPreview(null);
|
|
4074
|
+
setLibError(null);
|
|
4075
|
+
};
|
|
4076
|
+
const filteredItems = activeTag ? items.filter((item) => item.tags?.some((t) => t.l === activeTag)) : items;
|
|
4077
|
+
if (!hasToken) {
|
|
4078
|
+
return /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center h-full p-6", children: /* @__PURE__ */ jsxs20("p", { className: "text-white/30 text-[12px] text-center", children: [
|
|
4079
|
+
"Kein HF Token gesetzt.",
|
|
4080
|
+
/* @__PURE__ */ jsx22("br", {}),
|
|
4081
|
+
"Bitte zuerst im Setup-Tab einrichten."
|
|
4082
|
+
] }) });
|
|
4083
|
+
}
|
|
4084
|
+
return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col h-full min-h-0", children: [
|
|
4085
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-white/8", children: [
|
|
4086
|
+
step !== "user" && /* @__PURE__ */ jsx22("button", { onClick: reset, className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[18px]", children: "arrow_back" }) }),
|
|
4087
|
+
/* @__PURE__ */ jsxs20("span", { className: "text-[11px] font-medium text-white/40 tracking-wide flex-1", children: [
|
|
4088
|
+
step === "user" && "Server Browser",
|
|
4089
|
+
step === "context" && `${selectedUser?.username} \u2014 Kontext w\xE4hlen`,
|
|
4090
|
+
step === "library" && `${selectedUser?.username} / ${selectedContext?.label || selectedContext?.name || selectedContext?.id}`
|
|
4091
|
+
] }),
|
|
4092
|
+
step === "user" && /* @__PURE__ */ jsx22("div", { className: "flex gap-1", children: ["prod", "dev"].map((e) => /* @__PURE__ */ jsx22(
|
|
4093
|
+
"button",
|
|
4094
|
+
{
|
|
4095
|
+
onClick: () => setEnv(e),
|
|
4096
|
+
className: `text-[10px] font-bold px-2 py-0.5 rounded-lg transition-colors ${env === e ? "bg-white/15 text-white" : "text-white/30 hover:text-white/60"}`,
|
|
4097
|
+
children: e
|
|
4098
|
+
},
|
|
4099
|
+
e
|
|
4100
|
+
)) })
|
|
4101
|
+
] }),
|
|
4102
|
+
step === "user" && /* @__PURE__ */ jsxs20("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-3 gap-2", children: [
|
|
4103
|
+
usersLoading && /* @__PURE__ */ jsx22("p", { className: "text-white/30 text-[11px] text-center py-4", children: "Lade User\u2026" }),
|
|
4104
|
+
usersError && /* @__PURE__ */ jsx22("p", { className: "text-red-400 text-[11px] text-center py-4", children: usersError }),
|
|
4105
|
+
!usersLoading && users.map((u) => /* @__PURE__ */ jsxs20(
|
|
4106
|
+
"button",
|
|
4107
|
+
{
|
|
4108
|
+
onClick: () => selectUser(u),
|
|
4109
|
+
className: "flex items-center gap-3 px-3 py-2.5 rounded-xl border border-white/8 hover:border-white/20 hover:bg-white/5 transition-all text-left",
|
|
4110
|
+
children: [
|
|
4111
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px] text-white/40", children: "person" }),
|
|
4112
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
4113
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[12px] font-medium text-white", children: u.username }),
|
|
4114
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[10px] text-white/30", children: u.id })
|
|
4115
|
+
] }),
|
|
4116
|
+
contextsLoading && selectedUser?.id === u.id ? /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[16px] text-white/30 animate-spin", children: "progress_activity" }) : /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[16px] text-white/20", children: "chevron_right" })
|
|
4117
|
+
]
|
|
4118
|
+
},
|
|
4119
|
+
u.id
|
|
4120
|
+
))
|
|
4121
|
+
] }),
|
|
4122
|
+
step === "context" && /* @__PURE__ */ jsx22("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-3 gap-2", children: contexts.map((ctx) => /* @__PURE__ */ jsxs20(
|
|
4123
|
+
"button",
|
|
4124
|
+
{
|
|
4125
|
+
onClick: () => loadLibrary(selectedUser, ctx),
|
|
4126
|
+
className: "flex items-center gap-3 px-3 py-2.5 rounded-xl border border-white/8 hover:border-white/20 hover:bg-white/5 transition-all text-left",
|
|
4127
|
+
children: [
|
|
4128
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px] text-white/40", children: "folder" }),
|
|
4129
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
4130
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[12px] font-medium text-white", children: ctx.label || ctx.name || ctx.id }),
|
|
4131
|
+
ctx.description && /* @__PURE__ */ jsx22("span", { className: "text-[10px] text-white/30 truncate", children: ctx.description })
|
|
4132
|
+
] }),
|
|
4133
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[16px] text-white/20", children: "chevron_right" })
|
|
4134
|
+
]
|
|
4135
|
+
},
|
|
4136
|
+
ctx.id
|
|
4137
|
+
)) }),
|
|
4138
|
+
step === "library" && /* @__PURE__ */ jsxs20("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
4139
|
+
tags.length > 0 && /* @__PURE__ */ jsxs20("div", { className: "flex gap-1.5 px-3 py-2 overflow-x-auto border-b border-white/8", style: { scrollbarWidth: "none" }, children: [
|
|
4140
|
+
/* @__PURE__ */ jsx22(
|
|
4141
|
+
"button",
|
|
4142
|
+
{
|
|
4143
|
+
onClick: () => setActiveTag(null),
|
|
4144
|
+
className: `shrink-0 text-[10px] font-medium px-2.5 py-1 rounded-lg transition-colors ${!activeTag ? "bg-white/20 text-white" : "bg-white/5 text-white/40 hover:bg-white/10"}`,
|
|
4145
|
+
children: "Alle"
|
|
4146
|
+
}
|
|
4147
|
+
),
|
|
4148
|
+
tags.map((t) => /* @__PURE__ */ jsx22(
|
|
4149
|
+
"button",
|
|
4150
|
+
{
|
|
4151
|
+
onClick: () => setActiveTag(activeTag === t.label ? null : t.label),
|
|
4152
|
+
className: `shrink-0 text-[10px] font-medium px-2.5 py-1 rounded-lg transition-colors whitespace-nowrap ${activeTag === t.label ? "bg-white/20 text-white" : "bg-white/5 text-white/40 hover:bg-white/10"}`,
|
|
4153
|
+
children: t.label
|
|
4154
|
+
},
|
|
4155
|
+
t.id
|
|
4156
|
+
))
|
|
4157
|
+
] }),
|
|
4158
|
+
libLoading && /* @__PURE__ */ jsx22("p", { className: "text-white/30 text-[11px] text-center py-8", children: "Lade Library\u2026" }),
|
|
4159
|
+
libError && /* @__PURE__ */ jsx22("p", { className: "text-red-400 text-[11px] text-center py-8", children: libError }),
|
|
4160
|
+
!libLoading && !libError && /* @__PURE__ */ jsxs20("div", { className: "flex-1 min-h-0 overflow-y-auto p-3 grid grid-cols-2 gap-2 content-start", children: [
|
|
4161
|
+
filteredItems.length === 0 && /* @__PURE__ */ jsx22("p", { className: "col-span-2 text-white/30 text-[11px] text-center py-8", children: "Keine Eintr\xE4ge." }),
|
|
4162
|
+
filteredItems.map((item) => {
|
|
4163
|
+
const imgUrl = item.images?.[0]?.url;
|
|
4164
|
+
return /* @__PURE__ */ jsxs20(
|
|
4165
|
+
"button",
|
|
4166
|
+
{
|
|
4167
|
+
onClick: () => imgUrl && setPreview(imgUrl),
|
|
4168
|
+
className: "flex flex-col rounded-xl overflow-hidden border border-white/8 hover:border-white/25 transition-all bg-white/3 text-left",
|
|
4169
|
+
children: [
|
|
4170
|
+
imgUrl ? /* @__PURE__ */ jsx22("img", { src: imgUrl, alt: "", className: "w-full aspect-square object-cover bg-white/5" }) : /* @__PURE__ */ jsx22("div", { className: "w-full aspect-square bg-white/5 flex items-center justify-center", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[24px] text-white/15", children: "image" }) }),
|
|
4171
|
+
/* @__PURE__ */ jsxs20("div", { className: "p-1.5 flex flex-col gap-0.5", children: [
|
|
4172
|
+
item.title && /* @__PURE__ */ jsx22("span", { className: "text-[10px] font-medium text-white/70 truncate", children: item.title }),
|
|
4173
|
+
/* @__PURE__ */ jsx22(StarRating, { rating: item.rating })
|
|
4174
|
+
] })
|
|
4175
|
+
]
|
|
4176
|
+
},
|
|
4177
|
+
item.ref_id
|
|
4178
|
+
);
|
|
4179
|
+
})
|
|
4180
|
+
] })
|
|
4181
|
+
] }),
|
|
4182
|
+
preview && /* @__PURE__ */ jsxs20("div", { className: "absolute inset-0 z-50 bg-black/90 flex items-center justify-center", onClick: () => setPreview(null), children: [
|
|
4183
|
+
/* @__PURE__ */ jsx22("img", { src: preview, alt: "", className: "max-w-full max-h-full object-contain" }),
|
|
4184
|
+
/* @__PURE__ */ jsx22("button", { className: "absolute top-3 right-3 text-white/60 hover:text-white", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[24px]", children: "close" }) })
|
|
4185
|
+
] })
|
|
4186
|
+
] });
|
|
4187
|
+
}
|
|
4188
|
+
|
|
3704
4189
|
// src/components/AvatarArchitectApp.tsx
|
|
3705
|
-
import { Fragment as Fragment9, jsx as
|
|
4190
|
+
import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
3706
4191
|
function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
|
|
3707
|
-
|
|
4192
|
+
useEffect7(() => {
|
|
3708
4193
|
const id = "flow-styles";
|
|
3709
4194
|
if (!document.getElementById(id)) {
|
|
3710
4195
|
const style = document.createElement("style");
|
|
@@ -3713,19 +4198,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3713
4198
|
document.head.appendChild(style);
|
|
3714
4199
|
}
|
|
3715
4200
|
}, []);
|
|
3716
|
-
const [showStart, setShowStart] =
|
|
3717
|
-
const [layoutChoice, setLayoutChoice] =
|
|
4201
|
+
const [showStart, setShowStart] = useState18(true);
|
|
4202
|
+
const [layoutChoice, setLayoutChoice] = useState18(() => {
|
|
3718
4203
|
try {
|
|
3719
4204
|
return localStorage.getItem("aa-layout") || null;
|
|
3720
4205
|
} catch {
|
|
3721
4206
|
return null;
|
|
3722
4207
|
}
|
|
3723
4208
|
});
|
|
3724
|
-
const [projectLoaded, setProjectLoaded] =
|
|
3725
|
-
const [hfToken, setHfToken] =
|
|
3726
|
-
const [hfTokenInput, setHfTokenInput] =
|
|
3727
|
-
const [isLoadingFromHF, setIsLoadingFromHF] =
|
|
3728
|
-
const [hfNamespaceLocal, setHfNamespaceLocal] =
|
|
4209
|
+
const [projectLoaded, setProjectLoaded] = useState18(false);
|
|
4210
|
+
const [hfToken, setHfToken] = useState18(initialHfToken || "");
|
|
4211
|
+
const [hfTokenInput, setHfTokenInput] = useState18(initialHfToken || "");
|
|
4212
|
+
const [isLoadingFromHF, setIsLoadingFromHF] = useState18(false);
|
|
4213
|
+
const [hfNamespaceLocal, setHfNamespaceLocal] = useState18(() => {
|
|
3729
4214
|
try {
|
|
3730
4215
|
const stored = localStorage.getItem("aa-hf-namespace");
|
|
3731
4216
|
if (stored !== null) return stored;
|
|
@@ -3734,8 +4219,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3734
4219
|
return "";
|
|
3735
4220
|
}
|
|
3736
4221
|
});
|
|
3737
|
-
const [hfNamespaceFromServer, setHfNamespaceFromServer] =
|
|
3738
|
-
|
|
4222
|
+
const [hfNamespaceFromServer, setHfNamespaceFromServer] = useState18(null);
|
|
4223
|
+
useEffect7(() => {
|
|
3739
4224
|
if (hfNamespace !== void 0) return;
|
|
3740
4225
|
const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
|
|
3741
4226
|
if (!backendUrl) return;
|
|
@@ -3757,35 +4242,35 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3757
4242
|
refresh: refreshHF,
|
|
3758
4243
|
hasStateZip
|
|
3759
4244
|
} = useHFState(hfToken, effectiveNamespace);
|
|
3760
|
-
const [imageUploadStatus, setImageUploadStatus] =
|
|
3761
|
-
const [bootstrapLog, setBootstrapLog] =
|
|
3762
|
-
const [isBootstrapping, setIsBootstrapping] =
|
|
3763
|
-
const syncTopSlot = /* @__PURE__ */
|
|
3764
|
-
localOnlyCount > 0 && /* @__PURE__ */
|
|
4245
|
+
const [imageUploadStatus, setImageUploadStatus] = useState18(/* @__PURE__ */ new Map());
|
|
4246
|
+
const [bootstrapLog, setBootstrapLog] = useState18([]);
|
|
4247
|
+
const [isBootstrapping, setIsBootstrapping] = useState18(false);
|
|
4248
|
+
const syncTopSlot = /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
4249
|
+
localOnlyCount > 0 && /* @__PURE__ */ jsxs21("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: [
|
|
3765
4250
|
"\u26A0 ",
|
|
3766
4251
|
localOnlyCount,
|
|
3767
4252
|
" lokale Event",
|
|
3768
4253
|
localOnlyCount > 1 ? "s" : "",
|
|
3769
4254
|
" noch nicht auf HF best\xE4tigt"
|
|
3770
4255
|
] }),
|
|
3771
|
-
pendingBufferCount > 0 && /* @__PURE__ */
|
|
4256
|
+
pendingBufferCount > 0 && /* @__PURE__ */ jsxs21("div", { style: { background: "linear-gradient(90deg,#f59e0b,#ef4444)", padding: "4px 10px", fontSize: 11, color: "#fff", borderRadius: 4, marginBottom: 4 }, children: [
|
|
3772
4257
|
pendingBufferCount,
|
|
3773
4258
|
" \xC4nderung",
|
|
3774
4259
|
pendingBufferCount > 1 ? "en" : "",
|
|
3775
4260
|
" lokal \u2014 bei Flow-Reload verloren wenn nicht synchronisiert"
|
|
3776
4261
|
] }),
|
|
3777
|
-
eventCount > 100 && /* @__PURE__ */
|
|
4262
|
+
eventCount > 100 && /* @__PURE__ */ jsxs21("div", { style: { background: "#dc2626", color: "#fff", padding: "5px 10px", borderRadius: 4, marginBottom: 4, fontWeight: 600, fontSize: 11 }, children: [
|
|
3778
4263
|
"\u26A0 ",
|
|
3779
4264
|
eventCount,
|
|
3780
4265
|
" Events nicht konsolidiert \u2014 Konsolidierung dringend empfohlen"
|
|
3781
4266
|
] }),
|
|
3782
|
-
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */
|
|
4267
|
+
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ jsxs21("div", { style: { background: "#44403c", color: "#a8a29e", padding: "4px 10px", borderRadius: 4, marginBottom: 4, fontSize: 11 }, children: [
|
|
3783
4268
|
eventCount,
|
|
3784
4269
|
" Events seit letzter Konsolidierung \u2014 Konsolidierung empfohlen"
|
|
3785
4270
|
] }),
|
|
3786
|
-
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */
|
|
3787
|
-
/* @__PURE__ */
|
|
3788
|
-
/* @__PURE__ */
|
|
4271
|
+
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ jsxs21("div", { style: { background: "#1c1917", border: "1px solid #44403c", borderRadius: 6, padding: "10px 12px" }, children: [
|
|
4272
|
+
/* @__PURE__ */ jsx23("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" }),
|
|
4273
|
+
/* @__PURE__ */ jsx23(
|
|
3789
4274
|
"button",
|
|
3790
4275
|
{
|
|
3791
4276
|
disabled: isBootstrapping || !effectiveNamespace,
|
|
@@ -3806,10 +4291,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3806
4291
|
children: isBootstrapping ? "Migriere\u2026" : "Legacy-Migration starten"
|
|
3807
4292
|
}
|
|
3808
4293
|
),
|
|
3809
|
-
bootstrapLog.length > 0 && /* @__PURE__ */
|
|
4294
|
+
bootstrapLog.length > 0 && /* @__PURE__ */ jsx23("div", { style: { marginTop: 6, fontFamily: "monospace", fontSize: 10, color: "#78716c", lineHeight: 1.6 }, children: bootstrapLog.map((l, i) => /* @__PURE__ */ jsx23("div", { children: l }, i)) })
|
|
3810
4295
|
] })
|
|
3811
4296
|
] });
|
|
3812
|
-
const wsInputRef =
|
|
4297
|
+
const wsInputRef = useRef8(null);
|
|
3813
4298
|
const startApp = (choice) => {
|
|
3814
4299
|
try {
|
|
3815
4300
|
localStorage.setItem("aa-layout", choice);
|
|
@@ -3818,16 +4303,16 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3818
4303
|
setLayoutChoice(choice);
|
|
3819
4304
|
setShowStart(false);
|
|
3820
4305
|
};
|
|
3821
|
-
const [nodes, setNodes] =
|
|
3822
|
-
const [edges, setEdges] =
|
|
3823
|
-
const [history, setHistory] =
|
|
3824
|
-
const [galleryItems, setGalleryItems] =
|
|
3825
|
-
const galleryItemsRef =
|
|
3826
|
-
|
|
4306
|
+
const [nodes, setNodes] = useState18([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
|
|
4307
|
+
const [edges, setEdges] = useState18([]);
|
|
4308
|
+
const [history, setHistory] = useState18([]);
|
|
4309
|
+
const [galleryItems, setGalleryItems] = useState18([]);
|
|
4310
|
+
const galleryItemsRef = useRef8([]);
|
|
4311
|
+
useEffect7(() => {
|
|
3827
4312
|
galleryItemsRef.current = galleryItems;
|
|
3828
4313
|
}, [galleryItems]);
|
|
3829
|
-
const hfImageNotFoundRef =
|
|
3830
|
-
|
|
4314
|
+
const hfImageNotFoundRef = useRef8(/* @__PURE__ */ new Map());
|
|
4315
|
+
useEffect7(() => {
|
|
3831
4316
|
if (!hfState) return;
|
|
3832
4317
|
if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
|
|
3833
4318
|
const hfIds = new Set(hfState.metadata.map((m) => m.id));
|
|
@@ -3869,62 +4354,62 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3869
4354
|
});
|
|
3870
4355
|
}
|
|
3871
4356
|
}, [hfState]);
|
|
3872
|
-
const [activePrompt, setActivePrompt] =
|
|
3873
|
-
const [isSynthesizing, setIsSynthesizing] =
|
|
3874
|
-
const [activeGenerationsCount, setActiveGenerationsCount] =
|
|
3875
|
-
const [currentResult, setCurrentResult] =
|
|
3876
|
-
const [focusedNodeId, setFocusedNodeId] =
|
|
3877
|
-
const [leftTab, setLeftTab] =
|
|
3878
|
-
const [promptFeedback, setPromptFeedback] =
|
|
3879
|
-
const [lastPromptPayload, setLastPromptPayload] =
|
|
3880
|
-
const [isPromptTabGenerating, setIsPromptTabGenerating] =
|
|
3881
|
-
const [activeTab, setActiveTab] =
|
|
3882
|
-
const [mobileTab, setMobileTab] =
|
|
3883
|
-
const [middlePanel, setMiddlePanel] =
|
|
3884
|
-
const [recentLabItems, setRecentLabItems] =
|
|
3885
|
-
const [aspectRatio, setAspectRatio] =
|
|
3886
|
-
const [selectedModel, setSelectedModel] =
|
|
3887
|
-
const [seed, setSeed] =
|
|
3888
|
-
const [seedMode, setSeedMode] =
|
|
3889
|
-
const [isLeftCollapsed, setIsLeftCollapsed] =
|
|
3890
|
-
const [isRightCollapsed, setIsRightCollapsed] =
|
|
3891
|
-
const [leftPanelWidth, setLeftPanelWidth] =
|
|
4357
|
+
const [activePrompt, setActivePrompt] = useState18("");
|
|
4358
|
+
const [isSynthesizing, setIsSynthesizing] = useState18(false);
|
|
4359
|
+
const [activeGenerationsCount, setActiveGenerationsCount] = useState18(0);
|
|
4360
|
+
const [currentResult, setCurrentResult] = useState18(null);
|
|
4361
|
+
const [focusedNodeId, setFocusedNodeId] = useState18(null);
|
|
4362
|
+
const [leftTab, setLeftTab] = useState18("prompt");
|
|
4363
|
+
const [promptFeedback, setPromptFeedback] = useState18(null);
|
|
4364
|
+
const [lastPromptPayload, setLastPromptPayload] = useState18(null);
|
|
4365
|
+
const [isPromptTabGenerating, setIsPromptTabGenerating] = useState18(false);
|
|
4366
|
+
const [activeTab, setActiveTab] = useState18("history");
|
|
4367
|
+
const [mobileTab, setMobileTab] = useState18("stage");
|
|
4368
|
+
const [middlePanel, setMiddlePanel] = useState18("stage");
|
|
4369
|
+
const [recentLabItems, setRecentLabItems] = useState18([]);
|
|
4370
|
+
const [aspectRatio, setAspectRatio] = useState18("1:1");
|
|
4371
|
+
const [selectedModel, setSelectedModel] = useState18("\u{1F34C} Nano Banana Pro");
|
|
4372
|
+
const [seed, setSeed] = useState18(Math.floor(Math.random() * 1e6));
|
|
4373
|
+
const [seedMode, setSeedMode] = useState18("random");
|
|
4374
|
+
const [isLeftCollapsed, setIsLeftCollapsed] = useState18(false);
|
|
4375
|
+
const [isRightCollapsed, setIsRightCollapsed] = useState18(false);
|
|
4376
|
+
const [leftPanelWidth, setLeftPanelWidth] = useState18(() => {
|
|
3892
4377
|
try {
|
|
3893
4378
|
return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
|
|
3894
4379
|
} catch {
|
|
3895
4380
|
return 260;
|
|
3896
4381
|
}
|
|
3897
4382
|
});
|
|
3898
|
-
const [rightPanelWidth, setRightPanelWidth] =
|
|
4383
|
+
const [rightPanelWidth, setRightPanelWidth] = useState18(() => {
|
|
3899
4384
|
try {
|
|
3900
4385
|
return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
|
|
3901
4386
|
} catch {
|
|
3902
4387
|
return 320;
|
|
3903
4388
|
}
|
|
3904
4389
|
});
|
|
3905
|
-
const [isPromptCollapsed, setIsPromptCollapsed] =
|
|
3906
|
-
const [projectActionState, setProjectActionState] =
|
|
3907
|
-
const syncServerDataRef =
|
|
3908
|
-
const [workspaceTags, setWorkspaceTags] =
|
|
3909
|
-
const [serverProjects, setServerProjects] =
|
|
3910
|
-
const [isLoadingFromServer, setIsLoadingFromServer] =
|
|
3911
|
-
const [highContrast, setHighContrast] =
|
|
4390
|
+
const [isPromptCollapsed, setIsPromptCollapsed] = useState18(false);
|
|
4391
|
+
const [projectActionState, setProjectActionState] = useState18("idle");
|
|
4392
|
+
const syncServerDataRef = useRef8(null);
|
|
4393
|
+
const [workspaceTags, setWorkspaceTags] = useState18(null);
|
|
4394
|
+
const [serverProjects, setServerProjects] = useState18([]);
|
|
4395
|
+
const [isLoadingFromServer, setIsLoadingFromServer] = useState18(false);
|
|
4396
|
+
const [highContrast, setHighContrast] = useState18(() => {
|
|
3912
4397
|
try {
|
|
3913
4398
|
return localStorage.getItem("aa-contrast") === "high";
|
|
3914
4399
|
} catch {
|
|
3915
4400
|
return false;
|
|
3916
4401
|
}
|
|
3917
4402
|
});
|
|
3918
|
-
const [activeReferenceId, setActiveReferenceId] =
|
|
3919
|
-
const [activeReferenceThumbnail, setActiveReferenceThumbnail] =
|
|
3920
|
-
const [isScanningImage, setIsScanningImage] =
|
|
3921
|
-
const [touchStartX, setTouchStartX] =
|
|
3922
|
-
const [isFullscreen, setIsFullscreen] =
|
|
3923
|
-
const [zoomScale, setZoomScale] =
|
|
3924
|
-
const [zoomOffset, setZoomOffset] =
|
|
3925
|
-
const lastPinchDist =
|
|
3926
|
-
const lastTapTime =
|
|
3927
|
-
const dragStart =
|
|
4403
|
+
const [activeReferenceId, setActiveReferenceId] = useState18(null);
|
|
4404
|
+
const [activeReferenceThumbnail, setActiveReferenceThumbnail] = useState18(null);
|
|
4405
|
+
const [isScanningImage, setIsScanningImage] = useState18(false);
|
|
4406
|
+
const [touchStartX, setTouchStartX] = useState18(null);
|
|
4407
|
+
const [isFullscreen, setIsFullscreen] = useState18(false);
|
|
4408
|
+
const [zoomScale, setZoomScale] = useState18(1);
|
|
4409
|
+
const [zoomOffset, setZoomOffset] = useState18({ x: 0, y: 0 });
|
|
4410
|
+
const lastPinchDist = useRef8(null);
|
|
4411
|
+
const lastTapTime = useRef8(0);
|
|
4412
|
+
const dragStart = useRef8(null);
|
|
3928
4413
|
const openFullscreen = () => {
|
|
3929
4414
|
setIsFullscreen(true);
|
|
3930
4415
|
setZoomScale(1);
|
|
@@ -4068,16 +4553,16 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4068
4553
|
}
|
|
4069
4554
|
};
|
|
4070
4555
|
const currentIndex = useMemo2(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
|
|
4071
|
-
const goToPrev =
|
|
4556
|
+
const goToPrev = useCallback3(() => {
|
|
4072
4557
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
4073
4558
|
}, [currentIndex, history]);
|
|
4074
|
-
const goToNext =
|
|
4559
|
+
const goToNext = useCallback3(() => {
|
|
4075
4560
|
if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
|
|
4076
4561
|
}, [currentIndex, history]);
|
|
4077
4562
|
const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
|
|
4078
4563
|
const isGenerating = activeGenerationsCount > 0;
|
|
4079
4564
|
useKeyboardNavigation(history, currentResult, setCurrentResult);
|
|
4080
|
-
const getSubtreeFormat =
|
|
4565
|
+
const getSubtreeFormat = useCallback3((nodeId, depth = 0) => {
|
|
4081
4566
|
const node = nodes.find((n) => n.id === nodeId);
|
|
4082
4567
|
if (!node) return "";
|
|
4083
4568
|
const childrenIds = edges.filter((e) => e.source === nodeId).map((e) => e.target);
|
|
@@ -4433,7 +4918,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4433
4918
|
setTimeout(() => setProjectActionState("idle"), 4e3);
|
|
4434
4919
|
}
|
|
4435
4920
|
};
|
|
4436
|
-
|
|
4921
|
+
useEffect7(() => {
|
|
4437
4922
|
if (activeTab === "setup" || activeTab === "sync") fetchServerProjects();
|
|
4438
4923
|
}, [activeTab]);
|
|
4439
4924
|
const mergeWorkspaceTags = (local, remote) => {
|
|
@@ -4457,7 +4942,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4457
4942
|
};
|
|
4458
4943
|
if (isFullscreen && currentResult?.base64) {
|
|
4459
4944
|
const fsBase64 = currentResult.base64.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}`;
|
|
4460
|
-
return /* @__PURE__ */
|
|
4945
|
+
return /* @__PURE__ */ jsxs21(
|
|
4461
4946
|
"div",
|
|
4462
4947
|
{
|
|
4463
4948
|
className: "fixed inset-0 bg-black z-50 flex items-center justify-center overflow-hidden touch-none",
|
|
@@ -4465,7 +4950,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4465
4950
|
onTouchMove: handleFsTouchMove,
|
|
4466
4951
|
onTouchEnd: handleFsTouchEnd,
|
|
4467
4952
|
children: [
|
|
4468
|
-
/* @__PURE__ */
|
|
4953
|
+
/* @__PURE__ */ jsx23(
|
|
4469
4954
|
"img",
|
|
4470
4955
|
{
|
|
4471
4956
|
src: fsBase64,
|
|
@@ -4482,77 +4967,77 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4482
4967
|
}
|
|
4483
4968
|
}
|
|
4484
4969
|
),
|
|
4485
|
-
/* @__PURE__ */
|
|
4486
|
-
zoomScale > 1 && /* @__PURE__ */
|
|
4970
|
+
/* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", children: "close" }) }),
|
|
4971
|
+
zoomScale > 1 && /* @__PURE__ */ jsx23("button", { onClick: () => {
|
|
4487
4972
|
setZoomScale(1);
|
|
4488
4973
|
setZoomOffset({ x: 0, y: 0 });
|
|
4489
|
-
}, 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__ */
|
|
4490
|
-
history.length > 1 && /* @__PURE__ */
|
|
4491
|
-
/* @__PURE__ */
|
|
4974
|
+
}, 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__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "zoom_out_map" }) }),
|
|
4975
|
+
history.length > 1 && /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
4976
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => {
|
|
4492
4977
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
4493
|
-
}, 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__ */
|
|
4494
|
-
/* @__PURE__ */
|
|
4978
|
+
}, 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__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
4979
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => {
|
|
4495
4980
|
if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
|
|
4496
|
-
}, 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__ */
|
|
4497
|
-
/* @__PURE__ */
|
|
4981
|
+
}, 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__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
4982
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
4498
4983
|
currentIndex + 1,
|
|
4499
4984
|
" / ",
|
|
4500
4985
|
history.length
|
|
4501
4986
|
] })
|
|
4502
4987
|
] }),
|
|
4503
|
-
zoomScale === 1 && /* @__PURE__ */
|
|
4988
|
+
zoomScale === 1 && /* @__PURE__ */ jsx23("div", { className: "absolute bottom-6 right-4 text-[9px] text-white/20 font-mono", children: "Pinch zum Zoomen \xB7 Doppeltipp 2.5\xD7" })
|
|
4504
4989
|
]
|
|
4505
4990
|
}
|
|
4506
4991
|
);
|
|
4507
4992
|
}
|
|
4508
4993
|
if (showStart) {
|
|
4509
|
-
return /* @__PURE__ */
|
|
4510
|
-
/* @__PURE__ */
|
|
4994
|
+
return /* @__PURE__ */ jsxs21("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
|
|
4995
|
+
/* @__PURE__ */ jsx23("input", { ref: wsInputRef, type: "file", accept: ".zip", className: "hidden", onChange: (e) => {
|
|
4511
4996
|
const f = e.target.files?.[0];
|
|
4512
4997
|
if (f) handleProjectImport(f);
|
|
4513
4998
|
e.target.value = "";
|
|
4514
4999
|
} }),
|
|
4515
|
-
/* @__PURE__ */
|
|
4516
|
-
/* @__PURE__ */
|
|
4517
|
-
/* @__PURE__ */
|
|
4518
|
-
/* @__PURE__ */
|
|
5000
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-1", children: [
|
|
5001
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
|
|
5002
|
+
/* @__PURE__ */ jsx23("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" }),
|
|
5003
|
+
/* @__PURE__ */ jsxs21("span", { className: "text-white text-[13px] font-mono", children: [
|
|
4519
5004
|
"v",
|
|
4520
5005
|
LIB_VERSION
|
|
4521
5006
|
] })
|
|
4522
5007
|
] }),
|
|
4523
|
-
/* @__PURE__ */
|
|
5008
|
+
/* @__PURE__ */ jsxs21(
|
|
4524
5009
|
"button",
|
|
4525
5010
|
{
|
|
4526
5011
|
onClick: toggleContrast,
|
|
4527
5012
|
className: "flex items-center gap-3 px-5 py-3 rounded-2xl border transition-colors",
|
|
4528
5013
|
style: { borderColor: highContrast ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.08)", background: highContrast ? "rgba(255,255,255,0.08)" : "transparent" },
|
|
4529
5014
|
children: [
|
|
4530
|
-
/* @__PURE__ */
|
|
4531
|
-
/* @__PURE__ */
|
|
4532
|
-
/* @__PURE__ */
|
|
4533
|
-
/* @__PURE__ */
|
|
5015
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.35)" }, children: highContrast ? "light_mode" : "dark_mode" }),
|
|
5016
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-start", children: [
|
|
5017
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[13px] font-bold", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.5)" }, children: highContrast ? "Hoher Kontrast" : "Normaler Kontrast" }),
|
|
5018
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px]", style: { color: "rgba(255,255,255,0.25)" }, children: "Tippen zum Umschalten" })
|
|
4534
5019
|
] })
|
|
4535
5020
|
]
|
|
4536
5021
|
}
|
|
4537
5022
|
),
|
|
4538
|
-
/* @__PURE__ */
|
|
4539
|
-
/* @__PURE__ */
|
|
5023
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5024
|
+
/* @__PURE__ */ jsxs21(
|
|
4540
5025
|
"button",
|
|
4541
5026
|
{
|
|
4542
5027
|
onClick: () => wsInputRef.current?.click(),
|
|
4543
5028
|
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",
|
|
4544
5029
|
style: { height: 56, background: projectLoaded ? "#16a34a" : "#0284c7" },
|
|
4545
5030
|
children: [
|
|
4546
|
-
/* @__PURE__ */
|
|
5031
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", children: projectLoaded ? "check_circle" : "folder_zip" }),
|
|
4547
5032
|
projectLoaded ? "Projekt geladen \u2713" : "Projekt laden (.zip)"
|
|
4548
5033
|
]
|
|
4549
5034
|
}
|
|
4550
5035
|
),
|
|
4551
|
-
!projectLoaded && /* @__PURE__ */
|
|
5036
|
+
!projectLoaded && /* @__PURE__ */ jsx23("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
|
|
4552
5037
|
] }),
|
|
4553
|
-
/* @__PURE__ */
|
|
4554
|
-
!initialHfToken && /* @__PURE__ */
|
|
4555
|
-
/* @__PURE__ */
|
|
5038
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5039
|
+
!initialHfToken && /* @__PURE__ */ jsxs21("div", { className: "flex gap-2 w-full", children: [
|
|
5040
|
+
/* @__PURE__ */ jsx23(
|
|
4556
5041
|
"input",
|
|
4557
5042
|
{
|
|
4558
5043
|
type: "password",
|
|
@@ -4568,7 +5053,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4568
5053
|
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)" }
|
|
4569
5054
|
}
|
|
4570
5055
|
),
|
|
4571
|
-
hfTokenInput.trim() && /* @__PURE__ */
|
|
5056
|
+
hfTokenInput.trim() && /* @__PURE__ */ jsx23(
|
|
4572
5057
|
"button",
|
|
4573
5058
|
{
|
|
4574
5059
|
type: "button",
|
|
@@ -4579,9 +5064,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4579
5064
|
}
|
|
4580
5065
|
)
|
|
4581
5066
|
] }),
|
|
4582
|
-
!hfNamespace && /* @__PURE__ */
|
|
4583
|
-
/* @__PURE__ */
|
|
4584
|
-
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */
|
|
5067
|
+
!hfNamespace && /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3 w-full", children: [
|
|
5068
|
+
/* @__PURE__ */ jsx23("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold flex-shrink-0", children: "State:" }),
|
|
5069
|
+
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ jsx23(
|
|
4585
5070
|
"button",
|
|
4586
5071
|
{
|
|
4587
5072
|
onClick: () => {
|
|
@@ -4601,14 +5086,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4601
5086
|
ns
|
|
4602
5087
|
))
|
|
4603
5088
|
] }),
|
|
4604
|
-
hfToken && /* @__PURE__ */
|
|
5089
|
+
hfToken && /* @__PURE__ */ jsxs21(
|
|
4605
5090
|
"button",
|
|
4606
5091
|
{
|
|
4607
5092
|
disabled: isLoadingFromHF,
|
|
4608
5093
|
onClick: async () => {
|
|
4609
5094
|
setIsLoadingFromHF(true);
|
|
4610
5095
|
try {
|
|
4611
|
-
const { hfListProjects: hfListProjects2, hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-
|
|
5096
|
+
const { hfListProjects: hfListProjects2, hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-TC65WQXK.mjs");
|
|
4612
5097
|
const projects = await hfListProjects2(hfToken);
|
|
4613
5098
|
if (projects.length > 0) {
|
|
4614
5099
|
const file = await hfDownloadProject2(projects[0].path, hfToken);
|
|
@@ -4623,15 +5108,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4623
5108
|
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",
|
|
4624
5109
|
style: { height: 56, background: "#f59e0b" },
|
|
4625
5110
|
children: [
|
|
4626
|
-
/* @__PURE__ */
|
|
5111
|
+
/* @__PURE__ */ jsx23("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromHF ? " animate-spin" : ""}`, children: isLoadingFromHF ? "sync" : "cloud_download" }),
|
|
4627
5112
|
isLoadingFromHF ? "Laden\u2026" : "Von HF laden"
|
|
4628
5113
|
]
|
|
4629
5114
|
}
|
|
4630
5115
|
),
|
|
4631
|
-
hfToken && /* @__PURE__ */
|
|
5116
|
+
hfToken && /* @__PURE__ */ jsx23("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand von Hugging Face laden" })
|
|
4632
5117
|
] }),
|
|
4633
|
-
onFetchServerProjects && /* @__PURE__ */
|
|
4634
|
-
/* @__PURE__ */
|
|
5118
|
+
onFetchServerProjects && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5119
|
+
/* @__PURE__ */ jsxs21(
|
|
4635
5120
|
"button",
|
|
4636
5121
|
{
|
|
4637
5122
|
disabled: isLoadingFromServer,
|
|
@@ -4652,35 +5137,35 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4652
5137
|
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",
|
|
4653
5138
|
style: { height: 56, background: "#7c3aed" },
|
|
4654
5139
|
children: [
|
|
4655
|
-
/* @__PURE__ */
|
|
5140
|
+
/* @__PURE__ */ jsx23("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromServer ? " animate-spin" : ""}`, children: isLoadingFromServer ? "sync" : "cloud_download" }),
|
|
4656
5141
|
isLoadingFromServer ? "Laden\u2026" : "Vom Server laden"
|
|
4657
5142
|
]
|
|
4658
5143
|
}
|
|
4659
5144
|
),
|
|
4660
|
-
/* @__PURE__ */
|
|
5145
|
+
/* @__PURE__ */ jsx23("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand vom Server wiederherstellen" })
|
|
4661
5146
|
] }),
|
|
4662
|
-
/* @__PURE__ */
|
|
4663
|
-
/* @__PURE__ */
|
|
4664
|
-
/* @__PURE__ */
|
|
5147
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5148
|
+
/* @__PURE__ */ jsx23("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
|
|
5149
|
+
/* @__PURE__ */ jsx23("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
|
|
4665
5150
|
{ id: "mobile", icon: "smartphone", label: "Mobile" },
|
|
4666
5151
|
{ id: "mobile-desktop", icon: "phonelink", label: "Mobile+" },
|
|
4667
5152
|
{ id: "desktop", icon: "desktop_windows", label: "Desktop" },
|
|
4668
5153
|
{ id: "tablet-landscape", icon: "tablet", label: "Landscape" }
|
|
4669
|
-
].map((opt) => /* @__PURE__ */
|
|
5154
|
+
].map((opt) => /* @__PURE__ */ jsxs21(
|
|
4670
5155
|
"button",
|
|
4671
5156
|
{
|
|
4672
5157
|
onClick: () => startApp(opt.id),
|
|
4673
5158
|
className: "flex flex-col items-center gap-2 py-4 rounded-2xl border transition-colors",
|
|
4674
5159
|
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" },
|
|
4675
5160
|
children: [
|
|
4676
|
-
/* @__PURE__ */
|
|
4677
|
-
/* @__PURE__ */
|
|
5161
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[24px]", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.icon }),
|
|
5162
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[11px] font-bold", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.label })
|
|
4678
5163
|
]
|
|
4679
5164
|
},
|
|
4680
5165
|
opt.id
|
|
4681
5166
|
)) }),
|
|
4682
|
-
layoutChoice === "mobile-desktop" && /* @__PURE__ */
|
|
4683
|
-
layoutChoice === "tablet-landscape" && /* @__PURE__ */
|
|
5167
|
+
layoutChoice === "mobile-desktop" && /* @__PURE__ */ jsx23("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
|
|
5168
|
+
layoutChoice === "tablet-landscape" && /* @__PURE__ */ jsx23("span", { className: "text-white/20 text-[9px] text-center", children: "2-Spalten-Layout f\xFCr Landscape-Tablet im Desktop-Mode" })
|
|
4684
5169
|
] })
|
|
4685
5170
|
] });
|
|
4686
5171
|
}
|
|
@@ -4689,21 +5174,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4689
5174
|
const mdScale = mdMode ? window.innerWidth / 430 : 1;
|
|
4690
5175
|
const mdW = mdMode ? 430 : void 0;
|
|
4691
5176
|
const mdH = mdMode ? Math.ceil(window.innerHeight / mdScale) : void 0;
|
|
4692
|
-
const mobileRoot = /* @__PURE__ */
|
|
5177
|
+
const mobileRoot = /* @__PURE__ */ jsxs21("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
|
|
4693
5178
|
width: mdMode ? mdW : "100vw",
|
|
4694
5179
|
height: mdMode ? mdH : "100dvh",
|
|
4695
5180
|
transform: mdMode ? `scale(${mdScale})` : void 0,
|
|
4696
5181
|
transformOrigin: mdMode ? "top left" : void 0,
|
|
4697
5182
|
...hcStyle || {}
|
|
4698
5183
|
}, children: [
|
|
4699
|
-
mobileTab === "labs" && /* @__PURE__ */
|
|
5184
|
+
mobileTab === "labs" && /* @__PURE__ */ jsx23("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx23(LabsTab, { services: labServices, onResult: (item) => {
|
|
4700
5185
|
const frame = item.frames[0];
|
|
4701
5186
|
if (frame?.base64) {
|
|
4702
5187
|
setCurrentResult(frameToGeneration(frame, item));
|
|
4703
5188
|
setMobileTab("stage");
|
|
4704
5189
|
}
|
|
4705
5190
|
} }) }),
|
|
4706
|
-
mobileTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5191
|
+
mobileTab === "tags" && workspaceTags && /* @__PURE__ */ jsx23("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx23(
|
|
4707
5192
|
TagManagerPanel,
|
|
4708
5193
|
{
|
|
4709
5194
|
workspaceTags,
|
|
@@ -4714,21 +5199,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4714
5199
|
onTagMove: handleTagMove
|
|
4715
5200
|
}
|
|
4716
5201
|
) }),
|
|
4717
|
-
mobileTab === "stage" && /* @__PURE__ */
|
|
4718
|
-
/* @__PURE__ */
|
|
4719
|
-
/* @__PURE__ */
|
|
4720
|
-
/* @__PURE__ */
|
|
4721
|
-
/* @__PURE__ */
|
|
4722
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
4723
|
-
/* @__PURE__ */
|
|
4724
|
-
/* @__PURE__ */
|
|
4725
|
-
/* @__PURE__ */
|
|
4726
|
-
] }) : /* @__PURE__ */
|
|
4727
|
-
/* @__PURE__ */
|
|
4728
|
-
/* @__PURE__ */
|
|
5202
|
+
mobileTab === "stage" && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
5203
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
|
|
5204
|
+
/* @__PURE__ */ jsx23(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5205
|
+
/* @__PURE__ */ jsx23(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" }] }),
|
|
5206
|
+
/* @__PURE__ */ jsx23("div", { className: "flex-1" }),
|
|
5207
|
+
activeReferenceThumbnail ? /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden mr-2", style: { height: 28 }, children: [
|
|
5208
|
+
/* @__PURE__ */ jsx23("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
5209
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
5210
|
+
/* @__PURE__ */ jsx23("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 active:text-white/80 transition-colors", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5211
|
+
] }) : /* @__PURE__ */ jsx23("button", { onClick: handleSelectReference, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "add_photo_alternate" }) }),
|
|
5212
|
+
/* @__PURE__ */ jsx23("button", { onClick: toggleContrast, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
5213
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => setShowStart(true), className: "text-white/20 active:text-white/60 transition-colors mr-1", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "desktop_windows" }) })
|
|
4729
5214
|
] }),
|
|
4730
|
-
/* @__PURE__ */
|
|
4731
|
-
/* @__PURE__ */
|
|
5215
|
+
/* @__PURE__ */ jsx23("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ jsxs21("div", { className: `relative rounded-xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
5216
|
+
/* @__PURE__ */ jsx23(
|
|
4732
5217
|
"textarea",
|
|
4733
5218
|
{
|
|
4734
5219
|
value: activePrompt,
|
|
@@ -4738,26 +5223,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4738
5223
|
placeholder: "Prompt eingeben..."
|
|
4739
5224
|
}
|
|
4740
5225
|
),
|
|
4741
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
5226
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
|
|
4742
5227
|
] }) }),
|
|
4743
|
-
/* @__PURE__ */
|
|
5228
|
+
/* @__PURE__ */ jsx23("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ jsx23(
|
|
4744
5229
|
"button",
|
|
4745
5230
|
{
|
|
4746
5231
|
onClick: () => handleGenerateImage(),
|
|
4747
5232
|
disabled: !activePrompt.trim() || isGenerating,
|
|
4748
5233
|
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",
|
|
4749
5234
|
style: { height: 48, background: activePrompt.trim() && !isGenerating ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
|
|
4750
|
-
children: isGenerating ? /* @__PURE__ */
|
|
4751
|
-
/* @__PURE__ */
|
|
4752
|
-
/* @__PURE__ */
|
|
4753
|
-
] }) : /* @__PURE__ */
|
|
4754
|
-
/* @__PURE__ */
|
|
4755
|
-
/* @__PURE__ */
|
|
5235
|
+
children: isGenerating ? /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
5236
|
+
/* @__PURE__ */ jsx23("div", { className: "w-4 h-4 border-t-2 border-white rounded-full animate-spin" }),
|
|
5237
|
+
/* @__PURE__ */ jsx23("span", { children: "Generiere..." })
|
|
5238
|
+
] }) : /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
5239
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
|
|
5240
|
+
/* @__PURE__ */ jsx23("span", { children: "Generieren" })
|
|
4756
5241
|
] })
|
|
4757
5242
|
}
|
|
4758
5243
|
) }),
|
|
4759
|
-
/* @__PURE__ */
|
|
4760
|
-
/* @__PURE__ */
|
|
5244
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
|
|
5245
|
+
/* @__PURE__ */ jsxs21(
|
|
4761
5246
|
"div",
|
|
4762
5247
|
{
|
|
4763
5248
|
className: "w-full rounded-2xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center",
|
|
@@ -4771,25 +5256,25 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4771
5256
|
setTouchStartX(null);
|
|
4772
5257
|
},
|
|
4773
5258
|
children: [
|
|
4774
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
4775
|
-
/* @__PURE__ */
|
|
4776
|
-
/* @__PURE__ */
|
|
5259
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-3", children: [
|
|
5260
|
+
/* @__PURE__ */ jsx23("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
|
|
5261
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[11px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
4777
5262
|
] }),
|
|
4778
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
4779
|
-
/* @__PURE__ */
|
|
4780
|
-
/* @__PURE__ */
|
|
4781
|
-
/* @__PURE__ */
|
|
5263
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs21("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
|
|
5264
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
|
|
5265
|
+
/* @__PURE__ */ jsx23("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
|
|
5266
|
+
/* @__PURE__ */ jsx23("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" })
|
|
4782
5267
|
] }),
|
|
4783
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
4784
|
-
!currentResult && /* @__PURE__ */
|
|
4785
|
-
/* @__PURE__ */
|
|
4786
|
-
/* @__PURE__ */
|
|
5268
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx23("img", { src: currentResult.base64, className: "w-full h-full object-contain" }),
|
|
5269
|
+
!currentResult && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
5270
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
|
|
5271
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
4787
5272
|
] }),
|
|
4788
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
4789
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
4790
|
-
/* @__PURE__ */
|
|
4791
|
-
/* @__PURE__ */
|
|
4792
|
-
/* @__PURE__ */
|
|
5273
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined text-[18px]", children: "fullscreen" }) }),
|
|
5274
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
5275
|
+
/* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
5276
|
+
/* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
5277
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
4793
5278
|
currentIndex + 1,
|
|
4794
5279
|
" / ",
|
|
4795
5280
|
history.length
|
|
@@ -4798,33 +5283,33 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4798
5283
|
]
|
|
4799
5284
|
}
|
|
4800
5285
|
),
|
|
4801
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
4802
|
-
/* @__PURE__ */
|
|
4803
|
-
/* @__PURE__ */
|
|
4804
|
-
/* @__PURE__ */
|
|
5286
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs21("div", { className: "flex gap-2 mt-3", children: [
|
|
5287
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5288
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
|
|
5289
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[12px] text-white/60", children: "Prompt" })
|
|
4805
5290
|
] }),
|
|
4806
|
-
/* @__PURE__ */
|
|
4807
|
-
/* @__PURE__ */
|
|
4808
|
-
/* @__PURE__ */
|
|
5291
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5292
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
|
|
5293
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
|
|
4809
5294
|
] }),
|
|
4810
|
-
/* @__PURE__ */
|
|
4811
|
-
/* @__PURE__ */
|
|
4812
|
-
/* @__PURE__ */
|
|
5295
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5296
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "download" }),
|
|
5297
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[12px] text-white/60", children: "Laden" })
|
|
4813
5298
|
] })
|
|
4814
5299
|
] })
|
|
4815
5300
|
] })
|
|
4816
5301
|
] }),
|
|
4817
|
-
mobileTab === "browse" && /* @__PURE__ */
|
|
4818
|
-
/* @__PURE__ */
|
|
4819
|
-
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */
|
|
4820
|
-
hfToken && /* @__PURE__ */
|
|
5302
|
+
mobileTab === "browse" && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
5303
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
5304
|
+
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : "info" }) }, tab)),
|
|
5305
|
+
hfToken && /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
|
|
4821
5306
|
] }),
|
|
4822
|
-
/* @__PURE__ */
|
|
4823
|
-
activeTab === "history" && /* @__PURE__ */
|
|
5307
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5308
|
+
activeTab === "history" && /* @__PURE__ */ jsx23(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: (g) => {
|
|
4824
5309
|
setCurrentResult(g);
|
|
4825
5310
|
setMobileTab("stage");
|
|
4826
5311
|
}, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
|
|
4827
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
5312
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx23(
|
|
4828
5313
|
MediaLibrary,
|
|
4829
5314
|
{
|
|
4830
5315
|
items: galleryItems,
|
|
@@ -4844,43 +5329,44 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4844
5329
|
}
|
|
4845
5330
|
}
|
|
4846
5331
|
),
|
|
4847
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
5332
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx23(InspectPanel, { currentResult, history, onSelect: (g) => {
|
|
4848
5333
|
setCurrentResult(g);
|
|
4849
5334
|
} })
|
|
4850
5335
|
] })
|
|
4851
5336
|
] }),
|
|
4852
|
-
/* @__PURE__ */
|
|
4853
|
-
/* @__PURE__ */
|
|
4854
|
-
workspaceTags && /* @__PURE__ */
|
|
5337
|
+
/* @__PURE__ */ jsxs21("div", { style: { display: mobileTab === "tools" ? "flex" : "none" }, className: "flex flex-col flex-1 min-h-0", children: [
|
|
5338
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
5339
|
+
workspaceTags && /* @__PURE__ */ jsxs21("button", { onClick: () => {
|
|
4855
5340
|
setLeftTab("prompt");
|
|
4856
5341
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
4857
5342
|
}, 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: [
|
|
4858
|
-
/* @__PURE__ */
|
|
5343
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
|
|
4859
5344
|
"Prompt"
|
|
4860
5345
|
] }),
|
|
4861
|
-
/* @__PURE__ */
|
|
5346
|
+
/* @__PURE__ */ jsxs21("button", { onClick: () => {
|
|
4862
5347
|
setLeftTab("hierarchy");
|
|
4863
5348
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
4864
5349
|
}, 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: [
|
|
4865
|
-
/* @__PURE__ */
|
|
5350
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
|
|
4866
5351
|
"Hierarchie"
|
|
4867
5352
|
] }),
|
|
4868
|
-
/* @__PURE__ */
|
|
4869
|
-
/* @__PURE__ */
|
|
5353
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5354
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "settings" }),
|
|
4870
5355
|
"Setup"
|
|
4871
5356
|
] }),
|
|
4872
|
-
/* @__PURE__ */
|
|
4873
|
-
/* @__PURE__ */
|
|
5357
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5358
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "cloud_sync" }),
|
|
4874
5359
|
"Sync"
|
|
4875
5360
|
] }),
|
|
4876
|
-
/* @__PURE__ */
|
|
4877
|
-
/* @__PURE__ */
|
|
5361
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5362
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "biotech" }),
|
|
4878
5363
|
"HF"
|
|
4879
5364
|
] }),
|
|
4880
|
-
|
|
5365
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => setActiveTab("server"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "server" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) }),
|
|
5366
|
+
workspaceTags && /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
4881
5367
|
] }),
|
|
4882
|
-
/* @__PURE__ */
|
|
4883
|
-
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */
|
|
5368
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5369
|
+
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx23(
|
|
4884
5370
|
ListView,
|
|
4885
5371
|
{
|
|
4886
5372
|
nodes,
|
|
@@ -4911,12 +5397,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4911
5397
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
4912
5398
|
}
|
|
4913
5399
|
) }),
|
|
4914
|
-
workspaceTags && /* @__PURE__ */
|
|
5400
|
+
workspaceTags && /* @__PURE__ */ jsx23("div", { style: { display: leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" ? "flex" : "none" }, className: "absolute inset-0 flex-col", children: /* @__PURE__ */ jsx23(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => {
|
|
4915
5401
|
handleGenerateImage(prompt);
|
|
4916
5402
|
setMobileTab("stage");
|
|
4917
5403
|
}, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
|
|
4918
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
4919
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
5404
|
+
activeTab === "setup" && /* @__PURE__ */ jsx23(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
5405
|
+
activeTab === "sync" && /* @__PURE__ */ jsx23(
|
|
4920
5406
|
ProjectSyncTab,
|
|
4921
5407
|
{
|
|
4922
5408
|
topSlot: syncTopSlot,
|
|
@@ -4940,7 +5426,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4940
5426
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
4941
5427
|
}
|
|
4942
5428
|
),
|
|
4943
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5429
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx23(
|
|
4944
5430
|
TagManagerPanel,
|
|
4945
5431
|
{
|
|
4946
5432
|
workspaceTags,
|
|
@@ -4951,7 +5437,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4951
5437
|
onTagMove: handleTagMove
|
|
4952
5438
|
}
|
|
4953
5439
|
),
|
|
4954
|
-
activeTab === "hftest" && /* @__PURE__ */
|
|
5440
|
+
activeTab === "hftest" && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx23(
|
|
4955
5441
|
HFTestTab,
|
|
4956
5442
|
{
|
|
4957
5443
|
token: hfToken,
|
|
@@ -4961,22 +5447,23 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4961
5447
|
confirmedEventKeys: hfConfirmedKeys,
|
|
4962
5448
|
imageUploadStatus
|
|
4963
5449
|
}
|
|
4964
|
-
) })
|
|
5450
|
+
) }),
|
|
5451
|
+
activeTab === "server" && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx23(ServerTab, {}) })
|
|
4965
5452
|
] })
|
|
4966
5453
|
] }),
|
|
4967
|
-
/* @__PURE__ */
|
|
5454
|
+
/* @__PURE__ */ jsx23("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
|
|
4968
5455
|
{ id: "tools", icon: "auto_fix_high", label: "Prompt" },
|
|
4969
5456
|
{ id: "stage", icon: "palette", label: "Stage" },
|
|
4970
5457
|
{ id: "labs", icon: "science", label: "Labs" },
|
|
4971
5458
|
...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
|
|
4972
5459
|
{ id: "browse", icon: "photo_library", label: "Galerie" }
|
|
4973
|
-
].map((tab) => /* @__PURE__ */
|
|
4974
|
-
/* @__PURE__ */
|
|
4975
|
-
/* @__PURE__ */
|
|
5460
|
+
].map((tab) => /* @__PURE__ */ jsxs21("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: [
|
|
5461
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
|
|
5462
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
|
|
4976
5463
|
] }, tab.id)) })
|
|
4977
5464
|
] });
|
|
4978
5465
|
if (mdMode) {
|
|
4979
|
-
return /* @__PURE__ */
|
|
5466
|
+
return /* @__PURE__ */ jsx23("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
|
|
4980
5467
|
}
|
|
4981
5468
|
return mobileRoot;
|
|
4982
5469
|
}
|
|
@@ -4984,17 +5471,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4984
5471
|
const tlScale = Math.min(window.innerWidth / 920, window.innerHeight / 520);
|
|
4985
5472
|
const tlW = 920;
|
|
4986
5473
|
const tlH = 520;
|
|
4987
|
-
return /* @__PURE__ */
|
|
4988
|
-
/* @__PURE__ */
|
|
4989
|
-
/* @__PURE__ */
|
|
4990
|
-
/* @__PURE__ */
|
|
4991
|
-
/* @__PURE__ */
|
|
4992
|
-
/* @__PURE__ */
|
|
4993
|
-
/* @__PURE__ */
|
|
4994
|
-
/* @__PURE__ */
|
|
5474
|
+
return /* @__PURE__ */ jsx23("div", { style: { position: "fixed", inset: 0, background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", ...hcStyle || {} }, children: /* @__PURE__ */ jsxs21("div", { style: { width: tlW, height: tlH, transform: `scale(${tlScale})`, transformOrigin: "center center", display: "flex", flexDirection: "row", color: "#fff", overflow: "hidden", borderRadius: 0 }, children: [
|
|
5475
|
+
/* @__PURE__ */ jsxs21("div", { style: { width: 320, height: tlH, display: "flex", flexDirection: "column", borderRight: "1px solid rgba(255,255,255,0.05)", background: "#000", flexShrink: 0 }, children: [
|
|
5476
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5477
|
+
/* @__PURE__ */ jsx23(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5478
|
+
/* @__PURE__ */ jsx23(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" }] }),
|
|
5479
|
+
/* @__PURE__ */ jsx23("div", { style: { flex: 1 } }),
|
|
5480
|
+
/* @__PURE__ */ jsx23("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
5481
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
|
|
4995
5482
|
] }),
|
|
4996
|
-
/* @__PURE__ */
|
|
4997
|
-
/* @__PURE__ */
|
|
5483
|
+
/* @__PURE__ */ jsx23("div", { style: { padding: "12px 12px 8px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs21("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: [
|
|
5484
|
+
/* @__PURE__ */ jsx23(
|
|
4998
5485
|
"textarea",
|
|
4999
5486
|
{
|
|
5000
5487
|
value: activePrompt,
|
|
@@ -5003,27 +5490,27 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5003
5490
|
placeholder: "Prompt eingeben..."
|
|
5004
5491
|
}
|
|
5005
5492
|
),
|
|
5006
|
-
activePrompt && /* @__PURE__ */
|
|
5493
|
+
activePrompt && /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
|
|
5007
5494
|
] }) }),
|
|
5008
|
-
/* @__PURE__ */
|
|
5495
|
+
/* @__PURE__ */ jsx23("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ jsx23(
|
|
5009
5496
|
"button",
|
|
5010
5497
|
{
|
|
5011
5498
|
onClick: () => handleGenerateImage(),
|
|
5012
5499
|
disabled: !activePrompt.trim() || isGenerating,
|
|
5013
5500
|
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" },
|
|
5014
|
-
children: isGenerating ? /* @__PURE__ */
|
|
5015
|
-
/* @__PURE__ */
|
|
5016
|
-
/* @__PURE__ */
|
|
5017
|
-
] }) : /* @__PURE__ */
|
|
5018
|
-
/* @__PURE__ */
|
|
5019
|
-
/* @__PURE__ */
|
|
5501
|
+
children: isGenerating ? /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
5502
|
+
/* @__PURE__ */ jsx23("div", { style: { width: 14, height: 14, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
|
|
5503
|
+
/* @__PURE__ */ jsx23("span", { children: "Generiere..." })
|
|
5504
|
+
] }) : /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
5505
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
|
|
5506
|
+
/* @__PURE__ */ jsx23("span", { children: "Generieren" })
|
|
5020
5507
|
] })
|
|
5021
5508
|
}
|
|
5022
5509
|
) }),
|
|
5023
|
-
/* @__PURE__ */
|
|
5510
|
+
/* @__PURE__ */ jsx23("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ jsx23(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }) })
|
|
5024
5511
|
] }),
|
|
5025
|
-
/* @__PURE__ */
|
|
5026
|
-
/* @__PURE__ */
|
|
5512
|
+
/* @__PURE__ */ jsxs21("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
|
|
5513
|
+
/* @__PURE__ */ jsx23(
|
|
5027
5514
|
"div",
|
|
5028
5515
|
{
|
|
5029
5516
|
style: { flex: 1, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" },
|
|
@@ -5035,26 +5522,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5035
5522
|
else if (dx > 50) goToPrev();
|
|
5036
5523
|
setTouchStartX(null);
|
|
5037
5524
|
},
|
|
5038
|
-
children: /* @__PURE__ */
|
|
5039
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
5040
|
-
/* @__PURE__ */
|
|
5041
|
-
/* @__PURE__ */
|
|
5525
|
+
children: /* @__PURE__ */ jsxs21("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: [
|
|
5526
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs21("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
5527
|
+
/* @__PURE__ */ jsx23("div", { style: { width: 36, height: 36, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
|
|
5528
|
+
/* @__PURE__ */ jsx23("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
|
|
5042
5529
|
] }),
|
|
5043
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
5044
|
-
/* @__PURE__ */
|
|
5045
|
-
/* @__PURE__ */
|
|
5046
|
-
/* @__PURE__ */
|
|
5530
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs21("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
5531
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
|
|
5532
|
+
/* @__PURE__ */ jsx23("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
|
|
5533
|
+
/* @__PURE__ */ jsx23("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" })
|
|
5047
5534
|
] }),
|
|
5048
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
5049
|
-
!currentResult && /* @__PURE__ */
|
|
5050
|
-
/* @__PURE__ */
|
|
5051
|
-
/* @__PURE__ */
|
|
5535
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx23("img", { src: currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
|
|
5536
|
+
!currentResult && /* @__PURE__ */ jsxs21("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
|
|
5537
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
|
|
5538
|
+
/* @__PURE__ */ jsx23("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
|
|
5052
5539
|
] }),
|
|
5053
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5054
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
5055
|
-
/* @__PURE__ */
|
|
5056
|
-
/* @__PURE__ */
|
|
5057
|
-
/* @__PURE__ */
|
|
5540
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "fullscreen" }) }),
|
|
5541
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
5542
|
+
/* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_left" }) }),
|
|
5543
|
+
/* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_right" }) }),
|
|
5544
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5058
5545
|
currentIndex + 1,
|
|
5059
5546
|
" / ",
|
|
5060
5547
|
history.length
|
|
@@ -5063,42 +5550,42 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5063
5550
|
] })
|
|
5064
5551
|
}
|
|
5065
5552
|
),
|
|
5066
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5067
|
-
/* @__PURE__ */
|
|
5068
|
-
/* @__PURE__ */
|
|
5069
|
-
/* @__PURE__ */
|
|
5553
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs21("div", { style: { padding: "0 16px 16px", display: "flex", gap: 8, flexShrink: 0 }, children: [
|
|
5554
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5555
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
|
|
5556
|
+
/* @__PURE__ */ jsx23("span", { children: "Prompt" })
|
|
5070
5557
|
] }),
|
|
5071
|
-
/* @__PURE__ */
|
|
5072
|
-
/* @__PURE__ */
|
|
5073
|
-
/* @__PURE__ */
|
|
5558
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5559
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
|
|
5560
|
+
/* @__PURE__ */ jsx23("span", { children: "Referenz" })
|
|
5074
5561
|
] }),
|
|
5075
|
-
/* @__PURE__ */
|
|
5076
|
-
/* @__PURE__ */
|
|
5077
|
-
/* @__PURE__ */
|
|
5562
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5563
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "download" }),
|
|
5564
|
+
/* @__PURE__ */ jsx23("span", { children: "Laden" })
|
|
5078
5565
|
] })
|
|
5079
5566
|
] })
|
|
5080
5567
|
] })
|
|
5081
5568
|
] }) });
|
|
5082
5569
|
}
|
|
5083
|
-
return /* @__PURE__ */
|
|
5084
|
-
/* @__PURE__ */
|
|
5085
|
-
/* @__PURE__ */
|
|
5086
|
-
/* @__PURE__ */
|
|
5087
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5088
|
-
workspaceTags && /* @__PURE__ */
|
|
5089
|
-
/* @__PURE__ */
|
|
5570
|
+
return /* @__PURE__ */ jsxs21("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", style: hcStyle, children: [
|
|
5571
|
+
/* @__PURE__ */ jsx23("div", { className: "absolute top-2 right-2 z-50", children: /* @__PURE__ */ jsx23("button", { onClick: () => setShowStart(true), className: "text-white/10 hover:text-white/30 transition-colors text-[10px]", children: "\u21C4" }) }),
|
|
5572
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5573
|
+
/* @__PURE__ */ jsxs21("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
|
|
5574
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs21("div", { className: "flex flex-1 gap-1", children: [
|
|
5575
|
+
workspaceTags && /* @__PURE__ */ jsxs21("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: [
|
|
5576
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
|
|
5090
5577
|
"Prompt"
|
|
5091
5578
|
] }),
|
|
5092
|
-
/* @__PURE__ */
|
|
5093
|
-
/* @__PURE__ */
|
|
5579
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5580
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
|
|
5094
5581
|
"Hierarchie"
|
|
5095
5582
|
] }),
|
|
5096
|
-
workspaceTags && /* @__PURE__ */
|
|
5583
|
+
workspaceTags && /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
5097
5584
|
] }),
|
|
5098
|
-
/* @__PURE__ */
|
|
5585
|
+
/* @__PURE__ */ jsx23("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" })
|
|
5099
5586
|
] }),
|
|
5100
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5101
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5587
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs21("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5588
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx23(
|
|
5102
5589
|
TagManagerPanel,
|
|
5103
5590
|
{
|
|
5104
5591
|
workspaceTags,
|
|
@@ -5109,11 +5596,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5109
5596
|
onTagMove: handleTagMove
|
|
5110
5597
|
}
|
|
5111
5598
|
),
|
|
5112
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
5113
|
-
/* @__PURE__ */
|
|
5114
|
-
/* @__PURE__ */
|
|
5599
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs21("div", { children: [
|
|
5600
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
5601
|
+
/* @__PURE__ */ jsx23("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
5115
5602
|
] }) }),
|
|
5116
|
-
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */
|
|
5603
|
+
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx23(
|
|
5117
5604
|
ListView,
|
|
5118
5605
|
{
|
|
5119
5606
|
nodes,
|
|
@@ -5138,18 +5625,18 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5138
5625
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
5139
5626
|
}
|
|
5140
5627
|
) }),
|
|
5141
|
-
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */
|
|
5628
|
+
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ jsx23(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 })
|
|
5142
5629
|
] })
|
|
5143
5630
|
] }),
|
|
5144
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5145
|
-
/* @__PURE__ */
|
|
5146
|
-
/* @__PURE__ */
|
|
5147
|
-
/* @__PURE__ */
|
|
5148
|
-
/* @__PURE__ */
|
|
5149
|
-
/* @__PURE__ */
|
|
5631
|
+
!isLeftCollapsed && /* @__PURE__ */ jsx23("div", { onMouseDown: startLeftResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
5632
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
|
|
5633
|
+
/* @__PURE__ */ jsxs21("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
|
|
5634
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1.5", children: [
|
|
5635
|
+
/* @__PURE__ */ jsx23(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5636
|
+
/* @__PURE__ */ jsx23(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" }] })
|
|
5150
5637
|
] }),
|
|
5151
|
-
/* @__PURE__ */
|
|
5152
|
-
/* @__PURE__ */
|
|
5638
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 mx-auto", children: [
|
|
5639
|
+
/* @__PURE__ */ jsx23(
|
|
5153
5640
|
"button",
|
|
5154
5641
|
{
|
|
5155
5642
|
onClick: () => setMiddlePanel("stage"),
|
|
@@ -5157,7 +5644,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5157
5644
|
children: "Stage"
|
|
5158
5645
|
}
|
|
5159
5646
|
),
|
|
5160
|
-
/* @__PURE__ */
|
|
5647
|
+
/* @__PURE__ */ jsx23(
|
|
5161
5648
|
"button",
|
|
5162
5649
|
{
|
|
5163
5650
|
onClick: () => setMiddlePanel("labs"),
|
|
@@ -5166,68 +5653,68 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5166
5653
|
}
|
|
5167
5654
|
)
|
|
5168
5655
|
] }),
|
|
5169
|
-
/* @__PURE__ */
|
|
5170
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
5171
|
-
/* @__PURE__ */
|
|
5172
|
-
/* @__PURE__ */
|
|
5173
|
-
/* @__PURE__ */
|
|
5174
|
-
] }) : /* @__PURE__ */
|
|
5175
|
-
/* @__PURE__ */
|
|
5176
|
-
/* @__PURE__ */
|
|
5656
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
|
|
5657
|
+
activeReferenceThumbnail ? /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden", style: { height: 28 }, children: [
|
|
5658
|
+
/* @__PURE__ */ jsx23("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
5659
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
5660
|
+
/* @__PURE__ */ jsx23("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 hover:text-white/80 transition-colors", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5661
|
+
] }) : /* @__PURE__ */ jsxs21("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: [
|
|
5662
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
|
|
5663
|
+
/* @__PURE__ */ jsx23("span", { children: "Ref" })
|
|
5177
5664
|
] }),
|
|
5178
|
-
/* @__PURE__ */
|
|
5179
|
-
/* @__PURE__ */
|
|
5665
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
|
|
5666
|
+
/* @__PURE__ */ jsx23(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
|
|
5180
5667
|
] })
|
|
5181
5668
|
] }),
|
|
5182
|
-
/* @__PURE__ */
|
|
5183
|
-
!isPromptCollapsed && /* @__PURE__ */
|
|
5184
|
-
/* @__PURE__ */
|
|
5185
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
5669
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
|
|
5670
|
+
!isPromptCollapsed && /* @__PURE__ */ jsx23("div", { className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ jsxs21("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
5671
|
+
/* @__PURE__ */ jsx23("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..." }),
|
|
5672
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5186
5673
|
] }) }),
|
|
5187
|
-
middlePanel === "labs" ? /* @__PURE__ */
|
|
5674
|
+
middlePanel === "labs" ? /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx23(LabsTab, { services: labServices, onResult: (item) => {
|
|
5188
5675
|
const frame = item.frames[0];
|
|
5189
5676
|
if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
|
|
5190
|
-
} }) }) : /* @__PURE__ */
|
|
5191
|
-
isGenerating && currentResult?.status === "done" && /* @__PURE__ */
|
|
5192
|
-
/* @__PURE__ */
|
|
5193
|
-
/* @__PURE__ */
|
|
5677
|
+
} }) }) : /* @__PURE__ */ jsx23("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ jsxs21("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: [
|
|
5678
|
+
isGenerating && currentResult?.status === "done" && /* @__PURE__ */ jsxs21("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: [
|
|
5679
|
+
/* @__PURE__ */ jsx23("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
|
|
5680
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
|
|
5194
5681
|
] }),
|
|
5195
|
-
currentResult ? currentResult.status === "processing" ? /* @__PURE__ */
|
|
5196
|
-
/* @__PURE__ */
|
|
5197
|
-
/* @__PURE__ */
|
|
5198
|
-
] }) : currentResult.status === "error" ? /* @__PURE__ */
|
|
5199
|
-
/* @__PURE__ */
|
|
5200
|
-
/* @__PURE__ */
|
|
5201
|
-
/* @__PURE__ */
|
|
5202
|
-
/* @__PURE__ */
|
|
5682
|
+
currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-4", children: [
|
|
5683
|
+
/* @__PURE__ */ jsx23("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
|
|
5684
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
5685
|
+
] }) : currentResult.status === "error" ? /* @__PURE__ */ jsxs21("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
|
|
5686
|
+
/* @__PURE__ */ jsx23("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
|
|
5687
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2", children: [
|
|
5688
|
+
/* @__PURE__ */ jsx23("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
|
|
5689
|
+
/* @__PURE__ */ jsx23("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
|
|
5203
5690
|
] }),
|
|
5204
|
-
/* @__PURE__ */
|
|
5205
|
-
] }) : /* @__PURE__ */
|
|
5206
|
-
/* @__PURE__ */
|
|
5207
|
-
/* @__PURE__ */
|
|
5208
|
-
/* @__PURE__ */
|
|
5209
|
-
/* @__PURE__ */
|
|
5210
|
-
/* @__PURE__ */
|
|
5691
|
+
/* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
|
|
5692
|
+
] }) : /* @__PURE__ */ jsxs21("div", { className: "h-full w-full relative flex items-center justify-center", children: [
|
|
5693
|
+
/* @__PURE__ */ jsx23("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
|
|
5694
|
+
/* @__PURE__ */ jsxs21("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: [
|
|
5695
|
+
/* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
|
|
5696
|
+
/* @__PURE__ */ jsx23(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
|
|
5697
|
+
/* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
|
|
5211
5698
|
] })
|
|
5212
|
-
] }) : /* @__PURE__ */
|
|
5213
|
-
/* @__PURE__ */
|
|
5214
|
-
/* @__PURE__ */
|
|
5699
|
+
] }) : /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
5700
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
|
|
5701
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
5215
5702
|
] })
|
|
5216
5703
|
] }) })
|
|
5217
5704
|
] })
|
|
5218
5705
|
] }),
|
|
5219
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
5220
|
-
/* @__PURE__ */
|
|
5221
|
-
/* @__PURE__ */
|
|
5222
|
-
/* @__PURE__ */
|
|
5706
|
+
!isRightCollapsed && /* @__PURE__ */ jsx23("div", { onMouseDown: startRightResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
5707
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", style: { width: isRightCollapsed ? 60 : rightPanelWidth, transition: "none" }, children: [
|
|
5708
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
|
|
5709
|
+
/* @__PURE__ */ jsx23("div", { className: "flex flex-1", children: ["history", "gallery", "inspect", "setup", "sync", "tags", "server"].map((tab) => /* @__PURE__ */ jsx23("button", { onClick: () => {
|
|
5223
5710
|
setActiveTab(tab);
|
|
5224
5711
|
setIsRightCollapsed(false);
|
|
5225
|
-
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */
|
|
5226
|
-
hfToken && /* @__PURE__ */
|
|
5227
|
-
/* @__PURE__ */
|
|
5712
|
+
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx23("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" : tab === "tags" ? "label" : "storage" }) }, tab)) }),
|
|
5713
|
+
hfToken && /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
|
|
5714
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
|
|
5228
5715
|
] }),
|
|
5229
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
5230
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5716
|
+
!isRightCollapsed && /* @__PURE__ */ jsxs21("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5717
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx23(
|
|
5231
5718
|
TagManagerPanel,
|
|
5232
5719
|
{
|
|
5233
5720
|
workspaceTags,
|
|
@@ -5238,12 +5725,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5238
5725
|
onTagMove: handleTagMove
|
|
5239
5726
|
}
|
|
5240
5727
|
),
|
|
5241
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
5242
|
-
/* @__PURE__ */
|
|
5243
|
-
/* @__PURE__ */
|
|
5728
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs21("div", { children: [
|
|
5729
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
5730
|
+
/* @__PURE__ */ jsx23("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
5244
5731
|
] }) }),
|
|
5245
|
-
activeTab === "history" && /* @__PURE__ */
|
|
5246
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
5732
|
+
activeTab === "history" && /* @__PURE__ */ jsx23(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
|
|
5733
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx23(
|
|
5247
5734
|
MediaLibrary,
|
|
5248
5735
|
{
|
|
5249
5736
|
items: galleryItems,
|
|
@@ -5257,9 +5744,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5257
5744
|
onGenerateReference: (item) => handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true })
|
|
5258
5745
|
}
|
|
5259
5746
|
),
|
|
5260
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
5261
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
5262
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
5747
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx23(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
|
|
5748
|
+
activeTab === "setup" && /* @__PURE__ */ jsx23(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
5749
|
+
activeTab === "sync" && /* @__PURE__ */ jsx23(
|
|
5263
5750
|
ProjectSyncTab,
|
|
5264
5751
|
{
|
|
5265
5752
|
topSlot: syncTopSlot,
|
|
@@ -5282,15 +5769,16 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5282
5769
|
},
|
|
5283
5770
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
5284
5771
|
}
|
|
5285
|
-
)
|
|
5772
|
+
),
|
|
5773
|
+
activeTab === "server" && /* @__PURE__ */ jsx23(ServerTab, {})
|
|
5286
5774
|
] })
|
|
5287
5775
|
] })
|
|
5288
5776
|
] });
|
|
5289
5777
|
}
|
|
5290
5778
|
|
|
5291
5779
|
// src/components/FaApp.tsx
|
|
5292
|
-
import { useState as
|
|
5293
|
-
import { jsx as
|
|
5780
|
+
import { useState as useState19, useEffect as useEffect8 } from "react";
|
|
5781
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
5294
5782
|
function FaApp({
|
|
5295
5783
|
onGenerateImage,
|
|
5296
5784
|
onGeneratePrompt,
|
|
@@ -5309,8 +5797,8 @@ function FaApp({
|
|
|
5309
5797
|
onServerDelete,
|
|
5310
5798
|
buildInfo
|
|
5311
5799
|
}) {
|
|
5312
|
-
const [hfNamespace, setHfNamespace] =
|
|
5313
|
-
|
|
5800
|
+
const [hfNamespace, setHfNamespace] = useState19(void 0);
|
|
5801
|
+
useEffect8(() => {
|
|
5314
5802
|
if (!serverBaseUrl) return;
|
|
5315
5803
|
fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
|
|
5316
5804
|
if (typeof d.hfNamespace === "string") setHfNamespace(d.hfNamespace);
|
|
@@ -5321,7 +5809,7 @@ function FaApp({
|
|
|
5321
5809
|
const result = await onGeneratePrompt(text, options);
|
|
5322
5810
|
return result.text;
|
|
5323
5811
|
};
|
|
5324
|
-
return /* @__PURE__ */
|
|
5812
|
+
return /* @__PURE__ */ jsx24(
|
|
5325
5813
|
AvatarArchitectApp,
|
|
5326
5814
|
{
|
|
5327
5815
|
onGenerateImage,
|
|
@@ -5341,7 +5829,7 @@ function FaApp({
|
|
|
5341
5829
|
}
|
|
5342
5830
|
|
|
5343
5831
|
// src/index.ts
|
|
5344
|
-
var LIB_VERSION = "2.0.
|
|
5832
|
+
var LIB_VERSION = "2.0.24";
|
|
5345
5833
|
export {
|
|
5346
5834
|
AvatarArchitectApp,
|
|
5347
5835
|
CollapsibleCard,
|
|
@@ -5354,6 +5842,7 @@ export {
|
|
|
5354
5842
|
LIB_VERSION,
|
|
5355
5843
|
LabBlend,
|
|
5356
5844
|
LabCompare,
|
|
5845
|
+
LabFrameExtractor,
|
|
5357
5846
|
LabImagePicker,
|
|
5358
5847
|
LabLoop,
|
|
5359
5848
|
LabRemix,
|
|
@@ -5364,6 +5853,7 @@ export {
|
|
|
5364
5853
|
ProjectSyncTab,
|
|
5365
5854
|
PromptTab,
|
|
5366
5855
|
SectionLabel,
|
|
5856
|
+
ServerTab,
|
|
5367
5857
|
SetupPanel,
|
|
5368
5858
|
TagManagerPanel,
|
|
5369
5859
|
applyEvent,
|
|
@@ -5383,6 +5873,10 @@ export {
|
|
|
5383
5873
|
cleanAiResponse,
|
|
5384
5874
|
createFlowServices,
|
|
5385
5875
|
exportProjectToZip,
|
|
5876
|
+
faServerDelete,
|
|
5877
|
+
faServerGet,
|
|
5878
|
+
faServerPost,
|
|
5879
|
+
faServerPut,
|
|
5386
5880
|
findForks,
|
|
5387
5881
|
findTips,
|
|
5388
5882
|
formatTreeToMarkdown,
|