@rslsp1/fa-app-tools 2.0.22 → 2.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-I73HODO5.mjs → chunk-UCEQOGPT.mjs} +23 -19
- package/dist/{hfStateService-PDBVLFML.mjs → hfStateService-TC65WQXK.mjs} +1 -1
- package/dist/index.d.mts +17 -3
- package/dist/index.d.ts +17 -3
- package/dist/index.js +784 -517
- package/dist/index.mjs +754 -492
- 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 useState17, useCallback as useCallback3, useMemo as useMemo2, useEffect as useEffect6, 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",
|
|
@@ -3702,7 +3963,7 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3702
3963
|
}
|
|
3703
3964
|
|
|
3704
3965
|
// src/components/AvatarArchitectApp.tsx
|
|
3705
|
-
import { Fragment as Fragment9, jsx as
|
|
3966
|
+
import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
3706
3967
|
function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
|
|
3707
3968
|
useEffect6(() => {
|
|
3708
3969
|
const id = "flow-styles";
|
|
@@ -3713,19 +3974,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3713
3974
|
document.head.appendChild(style);
|
|
3714
3975
|
}
|
|
3715
3976
|
}, []);
|
|
3716
|
-
const [showStart, setShowStart] =
|
|
3717
|
-
const [layoutChoice, setLayoutChoice] =
|
|
3977
|
+
const [showStart, setShowStart] = useState17(true);
|
|
3978
|
+
const [layoutChoice, setLayoutChoice] = useState17(() => {
|
|
3718
3979
|
try {
|
|
3719
3980
|
return localStorage.getItem("aa-layout") || null;
|
|
3720
3981
|
} catch {
|
|
3721
3982
|
return null;
|
|
3722
3983
|
}
|
|
3723
3984
|
});
|
|
3724
|
-
const [projectLoaded, setProjectLoaded] =
|
|
3725
|
-
const [hfToken, setHfToken] =
|
|
3726
|
-
const [hfTokenInput, setHfTokenInput] =
|
|
3727
|
-
const [isLoadingFromHF, setIsLoadingFromHF] =
|
|
3728
|
-
const [hfNamespaceLocal, setHfNamespaceLocal] =
|
|
3985
|
+
const [projectLoaded, setProjectLoaded] = useState17(false);
|
|
3986
|
+
const [hfToken, setHfToken] = useState17(initialHfToken || "");
|
|
3987
|
+
const [hfTokenInput, setHfTokenInput] = useState17(initialHfToken || "");
|
|
3988
|
+
const [isLoadingFromHF, setIsLoadingFromHF] = useState17(false);
|
|
3989
|
+
const [hfNamespaceLocal, setHfNamespaceLocal] = useState17(() => {
|
|
3729
3990
|
try {
|
|
3730
3991
|
const stored = localStorage.getItem("aa-hf-namespace");
|
|
3731
3992
|
if (stored !== null) return stored;
|
|
@@ -3734,7 +3995,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3734
3995
|
return "";
|
|
3735
3996
|
}
|
|
3736
3997
|
});
|
|
3737
|
-
const [hfNamespaceFromServer, setHfNamespaceFromServer] =
|
|
3998
|
+
const [hfNamespaceFromServer, setHfNamespaceFromServer] = useState17(null);
|
|
3738
3999
|
useEffect6(() => {
|
|
3739
4000
|
if (hfNamespace !== void 0) return;
|
|
3740
4001
|
const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
|
|
@@ -3757,35 +4018,35 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3757
4018
|
refresh: refreshHF,
|
|
3758
4019
|
hasStateZip
|
|
3759
4020
|
} = useHFState(hfToken, effectiveNamespace);
|
|
3760
|
-
const [imageUploadStatus, setImageUploadStatus] =
|
|
3761
|
-
const [bootstrapLog, setBootstrapLog] =
|
|
3762
|
-
const [isBootstrapping, setIsBootstrapping] =
|
|
3763
|
-
const syncTopSlot = /* @__PURE__ */
|
|
3764
|
-
localOnlyCount > 0 && /* @__PURE__ */
|
|
4021
|
+
const [imageUploadStatus, setImageUploadStatus] = useState17(/* @__PURE__ */ new Map());
|
|
4022
|
+
const [bootstrapLog, setBootstrapLog] = useState17([]);
|
|
4023
|
+
const [isBootstrapping, setIsBootstrapping] = useState17(false);
|
|
4024
|
+
const syncTopSlot = /* @__PURE__ */ jsxs20(Fragment9, { children: [
|
|
4025
|
+
localOnlyCount > 0 && /* @__PURE__ */ jsxs20("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
4026
|
"\u26A0 ",
|
|
3766
4027
|
localOnlyCount,
|
|
3767
4028
|
" lokale Event",
|
|
3768
4029
|
localOnlyCount > 1 ? "s" : "",
|
|
3769
4030
|
" noch nicht auf HF best\xE4tigt"
|
|
3770
4031
|
] }),
|
|
3771
|
-
pendingBufferCount > 0 && /* @__PURE__ */
|
|
4032
|
+
pendingBufferCount > 0 && /* @__PURE__ */ jsxs20("div", { style: { background: "linear-gradient(90deg,#f59e0b,#ef4444)", padding: "4px 10px", fontSize: 11, color: "#fff", borderRadius: 4, marginBottom: 4 }, children: [
|
|
3772
4033
|
pendingBufferCount,
|
|
3773
4034
|
" \xC4nderung",
|
|
3774
4035
|
pendingBufferCount > 1 ? "en" : "",
|
|
3775
4036
|
" lokal \u2014 bei Flow-Reload verloren wenn nicht synchronisiert"
|
|
3776
4037
|
] }),
|
|
3777
|
-
eventCount > 100 && /* @__PURE__ */
|
|
4038
|
+
eventCount > 100 && /* @__PURE__ */ jsxs20("div", { style: { background: "#dc2626", color: "#fff", padding: "5px 10px", borderRadius: 4, marginBottom: 4, fontWeight: 600, fontSize: 11 }, children: [
|
|
3778
4039
|
"\u26A0 ",
|
|
3779
4040
|
eventCount,
|
|
3780
4041
|
" Events nicht konsolidiert \u2014 Konsolidierung dringend empfohlen"
|
|
3781
4042
|
] }),
|
|
3782
|
-
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */
|
|
4043
|
+
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ jsxs20("div", { style: { background: "#44403c", color: "#a8a29e", padding: "4px 10px", borderRadius: 4, marginBottom: 4, fontSize: 11 }, children: [
|
|
3783
4044
|
eventCount,
|
|
3784
4045
|
" Events seit letzter Konsolidierung \u2014 Konsolidierung empfohlen"
|
|
3785
4046
|
] }),
|
|
3786
|
-
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */
|
|
3787
|
-
/* @__PURE__ */
|
|
3788
|
-
/* @__PURE__ */
|
|
4047
|
+
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ jsxs20("div", { style: { background: "#1c1917", border: "1px solid #44403c", borderRadius: 6, padding: "10px 12px" }, children: [
|
|
4048
|
+
/* @__PURE__ */ jsx22("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" }),
|
|
4049
|
+
/* @__PURE__ */ jsx22(
|
|
3789
4050
|
"button",
|
|
3790
4051
|
{
|
|
3791
4052
|
disabled: isBootstrapping || !effectiveNamespace,
|
|
@@ -3806,10 +4067,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3806
4067
|
children: isBootstrapping ? "Migriere\u2026" : "Legacy-Migration starten"
|
|
3807
4068
|
}
|
|
3808
4069
|
),
|
|
3809
|
-
bootstrapLog.length > 0 && /* @__PURE__ */
|
|
4070
|
+
bootstrapLog.length > 0 && /* @__PURE__ */ jsx22("div", { style: { marginTop: 6, fontFamily: "monospace", fontSize: 10, color: "#78716c", lineHeight: 1.6 }, children: bootstrapLog.map((l, i) => /* @__PURE__ */ jsx22("div", { children: l }, i)) })
|
|
3810
4071
|
] })
|
|
3811
4072
|
] });
|
|
3812
|
-
const wsInputRef =
|
|
4073
|
+
const wsInputRef = useRef8(null);
|
|
3813
4074
|
const startApp = (choice) => {
|
|
3814
4075
|
try {
|
|
3815
4076
|
localStorage.setItem("aa-layout", choice);
|
|
@@ -3818,15 +4079,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3818
4079
|
setLayoutChoice(choice);
|
|
3819
4080
|
setShowStart(false);
|
|
3820
4081
|
};
|
|
3821
|
-
const [nodes, setNodes] =
|
|
3822
|
-
const [edges, setEdges] =
|
|
3823
|
-
const [history, setHistory] =
|
|
3824
|
-
const [galleryItems, setGalleryItems] =
|
|
3825
|
-
const galleryItemsRef =
|
|
4082
|
+
const [nodes, setNodes] = useState17([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
|
|
4083
|
+
const [edges, setEdges] = useState17([]);
|
|
4084
|
+
const [history, setHistory] = useState17([]);
|
|
4085
|
+
const [galleryItems, setGalleryItems] = useState17([]);
|
|
4086
|
+
const galleryItemsRef = useRef8([]);
|
|
3826
4087
|
useEffect6(() => {
|
|
3827
4088
|
galleryItemsRef.current = galleryItems;
|
|
3828
4089
|
}, [galleryItems]);
|
|
3829
|
-
const hfImageNotFoundRef =
|
|
4090
|
+
const hfImageNotFoundRef = useRef8(/* @__PURE__ */ new Map());
|
|
3830
4091
|
useEffect6(() => {
|
|
3831
4092
|
if (!hfState) return;
|
|
3832
4093
|
if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
|
|
@@ -3869,62 +4130,62 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3869
4130
|
});
|
|
3870
4131
|
}
|
|
3871
4132
|
}, [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] =
|
|
4133
|
+
const [activePrompt, setActivePrompt] = useState17("");
|
|
4134
|
+
const [isSynthesizing, setIsSynthesizing] = useState17(false);
|
|
4135
|
+
const [activeGenerationsCount, setActiveGenerationsCount] = useState17(0);
|
|
4136
|
+
const [currentResult, setCurrentResult] = useState17(null);
|
|
4137
|
+
const [focusedNodeId, setFocusedNodeId] = useState17(null);
|
|
4138
|
+
const [leftTab, setLeftTab] = useState17("prompt");
|
|
4139
|
+
const [promptFeedback, setPromptFeedback] = useState17(null);
|
|
4140
|
+
const [lastPromptPayload, setLastPromptPayload] = useState17(null);
|
|
4141
|
+
const [isPromptTabGenerating, setIsPromptTabGenerating] = useState17(false);
|
|
4142
|
+
const [activeTab, setActiveTab] = useState17("history");
|
|
4143
|
+
const [mobileTab, setMobileTab] = useState17("stage");
|
|
4144
|
+
const [middlePanel, setMiddlePanel] = useState17("stage");
|
|
4145
|
+
const [recentLabItems, setRecentLabItems] = useState17([]);
|
|
4146
|
+
const [aspectRatio, setAspectRatio] = useState17("1:1");
|
|
4147
|
+
const [selectedModel, setSelectedModel] = useState17("\u{1F34C} Nano Banana Pro");
|
|
4148
|
+
const [seed, setSeed] = useState17(Math.floor(Math.random() * 1e6));
|
|
4149
|
+
const [seedMode, setSeedMode] = useState17("random");
|
|
4150
|
+
const [isLeftCollapsed, setIsLeftCollapsed] = useState17(false);
|
|
4151
|
+
const [isRightCollapsed, setIsRightCollapsed] = useState17(false);
|
|
4152
|
+
const [leftPanelWidth, setLeftPanelWidth] = useState17(() => {
|
|
3892
4153
|
try {
|
|
3893
4154
|
return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
|
|
3894
4155
|
} catch {
|
|
3895
4156
|
return 260;
|
|
3896
4157
|
}
|
|
3897
4158
|
});
|
|
3898
|
-
const [rightPanelWidth, setRightPanelWidth] =
|
|
4159
|
+
const [rightPanelWidth, setRightPanelWidth] = useState17(() => {
|
|
3899
4160
|
try {
|
|
3900
4161
|
return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
|
|
3901
4162
|
} catch {
|
|
3902
4163
|
return 320;
|
|
3903
4164
|
}
|
|
3904
4165
|
});
|
|
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] =
|
|
4166
|
+
const [isPromptCollapsed, setIsPromptCollapsed] = useState17(false);
|
|
4167
|
+
const [projectActionState, setProjectActionState] = useState17("idle");
|
|
4168
|
+
const syncServerDataRef = useRef8(null);
|
|
4169
|
+
const [workspaceTags, setWorkspaceTags] = useState17(null);
|
|
4170
|
+
const [serverProjects, setServerProjects] = useState17([]);
|
|
4171
|
+
const [isLoadingFromServer, setIsLoadingFromServer] = useState17(false);
|
|
4172
|
+
const [highContrast, setHighContrast] = useState17(() => {
|
|
3912
4173
|
try {
|
|
3913
4174
|
return localStorage.getItem("aa-contrast") === "high";
|
|
3914
4175
|
} catch {
|
|
3915
4176
|
return false;
|
|
3916
4177
|
}
|
|
3917
4178
|
});
|
|
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 =
|
|
4179
|
+
const [activeReferenceId, setActiveReferenceId] = useState17(null);
|
|
4180
|
+
const [activeReferenceThumbnail, setActiveReferenceThumbnail] = useState17(null);
|
|
4181
|
+
const [isScanningImage, setIsScanningImage] = useState17(false);
|
|
4182
|
+
const [touchStartX, setTouchStartX] = useState17(null);
|
|
4183
|
+
const [isFullscreen, setIsFullscreen] = useState17(false);
|
|
4184
|
+
const [zoomScale, setZoomScale] = useState17(1);
|
|
4185
|
+
const [zoomOffset, setZoomOffset] = useState17({ x: 0, y: 0 });
|
|
4186
|
+
const lastPinchDist = useRef8(null);
|
|
4187
|
+
const lastTapTime = useRef8(0);
|
|
4188
|
+
const dragStart = useRef8(null);
|
|
3928
4189
|
const openFullscreen = () => {
|
|
3929
4190
|
setIsFullscreen(true);
|
|
3930
4191
|
setZoomScale(1);
|
|
@@ -4068,16 +4329,16 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4068
4329
|
}
|
|
4069
4330
|
};
|
|
4070
4331
|
const currentIndex = useMemo2(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
|
|
4071
|
-
const goToPrev =
|
|
4332
|
+
const goToPrev = useCallback3(() => {
|
|
4072
4333
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
4073
4334
|
}, [currentIndex, history]);
|
|
4074
|
-
const goToNext =
|
|
4335
|
+
const goToNext = useCallback3(() => {
|
|
4075
4336
|
if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
|
|
4076
4337
|
}, [currentIndex, history]);
|
|
4077
4338
|
const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
|
|
4078
4339
|
const isGenerating = activeGenerationsCount > 0;
|
|
4079
4340
|
useKeyboardNavigation(history, currentResult, setCurrentResult);
|
|
4080
|
-
const getSubtreeFormat =
|
|
4341
|
+
const getSubtreeFormat = useCallback3((nodeId, depth = 0) => {
|
|
4081
4342
|
const node = nodes.find((n) => n.id === nodeId);
|
|
4082
4343
|
if (!node) return "";
|
|
4083
4344
|
const childrenIds = edges.filter((e) => e.source === nodeId).map((e) => e.target);
|
|
@@ -4457,7 +4718,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4457
4718
|
};
|
|
4458
4719
|
if (isFullscreen && currentResult?.base64) {
|
|
4459
4720
|
const fsBase64 = currentResult.base64.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}`;
|
|
4460
|
-
return /* @__PURE__ */
|
|
4721
|
+
return /* @__PURE__ */ jsxs20(
|
|
4461
4722
|
"div",
|
|
4462
4723
|
{
|
|
4463
4724
|
className: "fixed inset-0 bg-black z-50 flex items-center justify-center overflow-hidden touch-none",
|
|
@@ -4465,7 +4726,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4465
4726
|
onTouchMove: handleFsTouchMove,
|
|
4466
4727
|
onTouchEnd: handleFsTouchEnd,
|
|
4467
4728
|
children: [
|
|
4468
|
-
/* @__PURE__ */
|
|
4729
|
+
/* @__PURE__ */ jsx22(
|
|
4469
4730
|
"img",
|
|
4470
4731
|
{
|
|
4471
4732
|
src: fsBase64,
|
|
@@ -4482,77 +4743,77 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4482
4743
|
}
|
|
4483
4744
|
}
|
|
4484
4745
|
),
|
|
4485
|
-
/* @__PURE__ */
|
|
4486
|
-
zoomScale > 1 && /* @__PURE__ */
|
|
4746
|
+
/* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined text-[22px]", children: "close" }) }),
|
|
4747
|
+
zoomScale > 1 && /* @__PURE__ */ jsx22("button", { onClick: () => {
|
|
4487
4748
|
setZoomScale(1);
|
|
4488
4749
|
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__ */
|
|
4750
|
+
}, 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__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: "zoom_out_map" }) }),
|
|
4751
|
+
history.length > 1 && /* @__PURE__ */ jsxs20(Fragment9, { children: [
|
|
4752
|
+
/* @__PURE__ */ jsx22("button", { onClick: () => {
|
|
4492
4753
|
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__ */
|
|
4754
|
+
}, 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__ */ jsx22("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
4755
|
+
/* @__PURE__ */ jsx22("button", { onClick: () => {
|
|
4495
4756
|
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__ */
|
|
4757
|
+
}, 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__ */ jsx22("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
4758
|
+
/* @__PURE__ */ jsxs20("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
4759
|
currentIndex + 1,
|
|
4499
4760
|
" / ",
|
|
4500
4761
|
history.length
|
|
4501
4762
|
] })
|
|
4502
4763
|
] }),
|
|
4503
|
-
zoomScale === 1 && /* @__PURE__ */
|
|
4764
|
+
zoomScale === 1 && /* @__PURE__ */ jsx22("div", { className: "absolute bottom-6 right-4 text-[9px] text-white/20 font-mono", children: "Pinch zum Zoomen \xB7 Doppeltipp 2.5\xD7" })
|
|
4504
4765
|
]
|
|
4505
4766
|
}
|
|
4506
4767
|
);
|
|
4507
4768
|
}
|
|
4508
4769
|
if (showStart) {
|
|
4509
|
-
return /* @__PURE__ */
|
|
4510
|
-
/* @__PURE__ */
|
|
4770
|
+
return /* @__PURE__ */ jsxs20("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
|
|
4771
|
+
/* @__PURE__ */ jsx22("input", { ref: wsInputRef, type: "file", accept: ".zip", className: "hidden", onChange: (e) => {
|
|
4511
4772
|
const f = e.target.files?.[0];
|
|
4512
4773
|
if (f) handleProjectImport(f);
|
|
4513
4774
|
e.target.value = "";
|
|
4514
4775
|
} }),
|
|
4515
|
-
/* @__PURE__ */
|
|
4516
|
-
/* @__PURE__ */
|
|
4517
|
-
/* @__PURE__ */
|
|
4518
|
-
/* @__PURE__ */
|
|
4776
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-1", children: [
|
|
4777
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
|
|
4778
|
+
/* @__PURE__ */ jsx22("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" }),
|
|
4779
|
+
/* @__PURE__ */ jsxs20("span", { className: "text-white text-[13px] font-mono", children: [
|
|
4519
4780
|
"v",
|
|
4520
4781
|
LIB_VERSION
|
|
4521
4782
|
] })
|
|
4522
4783
|
] }),
|
|
4523
|
-
/* @__PURE__ */
|
|
4784
|
+
/* @__PURE__ */ jsxs20(
|
|
4524
4785
|
"button",
|
|
4525
4786
|
{
|
|
4526
4787
|
onClick: toggleContrast,
|
|
4527
4788
|
className: "flex items-center gap-3 px-5 py-3 rounded-2xl border transition-colors",
|
|
4528
4789
|
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
4790
|
children: [
|
|
4530
|
-
/* @__PURE__ */
|
|
4531
|
-
/* @__PURE__ */
|
|
4532
|
-
/* @__PURE__ */
|
|
4533
|
-
/* @__PURE__ */
|
|
4791
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[22px]", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.35)" }, children: highContrast ? "light_mode" : "dark_mode" }),
|
|
4792
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-start", children: [
|
|
4793
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[13px] font-bold", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.5)" }, children: highContrast ? "Hoher Kontrast" : "Normaler Kontrast" }),
|
|
4794
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[10px]", style: { color: "rgba(255,255,255,0.25)" }, children: "Tippen zum Umschalten" })
|
|
4534
4795
|
] })
|
|
4535
4796
|
]
|
|
4536
4797
|
}
|
|
4537
4798
|
),
|
|
4538
|
-
/* @__PURE__ */
|
|
4539
|
-
/* @__PURE__ */
|
|
4799
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
4800
|
+
/* @__PURE__ */ jsxs20(
|
|
4540
4801
|
"button",
|
|
4541
4802
|
{
|
|
4542
4803
|
onClick: () => wsInputRef.current?.click(),
|
|
4543
4804
|
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
4805
|
style: { height: 56, background: projectLoaded ? "#16a34a" : "#0284c7" },
|
|
4545
4806
|
children: [
|
|
4546
|
-
/* @__PURE__ */
|
|
4807
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[22px]", children: projectLoaded ? "check_circle" : "folder_zip" }),
|
|
4547
4808
|
projectLoaded ? "Projekt geladen \u2713" : "Projekt laden (.zip)"
|
|
4548
4809
|
]
|
|
4549
4810
|
}
|
|
4550
4811
|
),
|
|
4551
|
-
!projectLoaded && /* @__PURE__ */
|
|
4812
|
+
!projectLoaded && /* @__PURE__ */ jsx22("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
|
|
4552
4813
|
] }),
|
|
4553
|
-
/* @__PURE__ */
|
|
4554
|
-
!initialHfToken && /* @__PURE__ */
|
|
4555
|
-
/* @__PURE__ */
|
|
4814
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
4815
|
+
!initialHfToken && /* @__PURE__ */ jsxs20("div", { className: "flex gap-2 w-full", children: [
|
|
4816
|
+
/* @__PURE__ */ jsx22(
|
|
4556
4817
|
"input",
|
|
4557
4818
|
{
|
|
4558
4819
|
type: "password",
|
|
@@ -4568,7 +4829,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4568
4829
|
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
4830
|
}
|
|
4570
4831
|
),
|
|
4571
|
-
hfTokenInput.trim() && /* @__PURE__ */
|
|
4832
|
+
hfTokenInput.trim() && /* @__PURE__ */ jsx22(
|
|
4572
4833
|
"button",
|
|
4573
4834
|
{
|
|
4574
4835
|
type: "button",
|
|
@@ -4579,9 +4840,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4579
4840
|
}
|
|
4580
4841
|
)
|
|
4581
4842
|
] }),
|
|
4582
|
-
!hfNamespace && /* @__PURE__ */
|
|
4583
|
-
/* @__PURE__ */
|
|
4584
|
-
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */
|
|
4843
|
+
!hfNamespace && /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3 w-full", children: [
|
|
4844
|
+
/* @__PURE__ */ jsx22("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold flex-shrink-0", children: "State:" }),
|
|
4845
|
+
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ jsx22(
|
|
4585
4846
|
"button",
|
|
4586
4847
|
{
|
|
4587
4848
|
onClick: () => {
|
|
@@ -4601,14 +4862,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4601
4862
|
ns
|
|
4602
4863
|
))
|
|
4603
4864
|
] }),
|
|
4604
|
-
hfToken && /* @__PURE__ */
|
|
4865
|
+
hfToken && /* @__PURE__ */ jsxs20(
|
|
4605
4866
|
"button",
|
|
4606
4867
|
{
|
|
4607
4868
|
disabled: isLoadingFromHF,
|
|
4608
4869
|
onClick: async () => {
|
|
4609
4870
|
setIsLoadingFromHF(true);
|
|
4610
4871
|
try {
|
|
4611
|
-
const { hfListProjects: hfListProjects2, hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-
|
|
4872
|
+
const { hfListProjects: hfListProjects2, hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-TC65WQXK.mjs");
|
|
4612
4873
|
const projects = await hfListProjects2(hfToken);
|
|
4613
4874
|
if (projects.length > 0) {
|
|
4614
4875
|
const file = await hfDownloadProject2(projects[0].path, hfToken);
|
|
@@ -4623,15 +4884,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4623
4884
|
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
4885
|
style: { height: 56, background: "#f59e0b" },
|
|
4625
4886
|
children: [
|
|
4626
|
-
/* @__PURE__ */
|
|
4887
|
+
/* @__PURE__ */ jsx22("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromHF ? " animate-spin" : ""}`, children: isLoadingFromHF ? "sync" : "cloud_download" }),
|
|
4627
4888
|
isLoadingFromHF ? "Laden\u2026" : "Von HF laden"
|
|
4628
4889
|
]
|
|
4629
4890
|
}
|
|
4630
4891
|
),
|
|
4631
|
-
hfToken && /* @__PURE__ */
|
|
4892
|
+
hfToken && /* @__PURE__ */ jsx22("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand von Hugging Face laden" })
|
|
4632
4893
|
] }),
|
|
4633
|
-
onFetchServerProjects && /* @__PURE__ */
|
|
4634
|
-
/* @__PURE__ */
|
|
4894
|
+
onFetchServerProjects && /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
4895
|
+
/* @__PURE__ */ jsxs20(
|
|
4635
4896
|
"button",
|
|
4636
4897
|
{
|
|
4637
4898
|
disabled: isLoadingFromServer,
|
|
@@ -4652,35 +4913,35 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4652
4913
|
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
4914
|
style: { height: 56, background: "#7c3aed" },
|
|
4654
4915
|
children: [
|
|
4655
|
-
/* @__PURE__ */
|
|
4916
|
+
/* @__PURE__ */ jsx22("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromServer ? " animate-spin" : ""}`, children: isLoadingFromServer ? "sync" : "cloud_download" }),
|
|
4656
4917
|
isLoadingFromServer ? "Laden\u2026" : "Vom Server laden"
|
|
4657
4918
|
]
|
|
4658
4919
|
}
|
|
4659
4920
|
),
|
|
4660
|
-
/* @__PURE__ */
|
|
4921
|
+
/* @__PURE__ */ jsx22("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand vom Server wiederherstellen" })
|
|
4661
4922
|
] }),
|
|
4662
|
-
/* @__PURE__ */
|
|
4663
|
-
/* @__PURE__ */
|
|
4664
|
-
/* @__PURE__ */
|
|
4923
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
4924
|
+
/* @__PURE__ */ jsx22("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
|
|
4925
|
+
/* @__PURE__ */ jsx22("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
|
|
4665
4926
|
{ id: "mobile", icon: "smartphone", label: "Mobile" },
|
|
4666
4927
|
{ id: "mobile-desktop", icon: "phonelink", label: "Mobile+" },
|
|
4667
4928
|
{ id: "desktop", icon: "desktop_windows", label: "Desktop" },
|
|
4668
4929
|
{ id: "tablet-landscape", icon: "tablet", label: "Landscape" }
|
|
4669
|
-
].map((opt) => /* @__PURE__ */
|
|
4930
|
+
].map((opt) => /* @__PURE__ */ jsxs20(
|
|
4670
4931
|
"button",
|
|
4671
4932
|
{
|
|
4672
4933
|
onClick: () => startApp(opt.id),
|
|
4673
4934
|
className: "flex flex-col items-center gap-2 py-4 rounded-2xl border transition-colors",
|
|
4674
4935
|
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
4936
|
children: [
|
|
4676
|
-
/* @__PURE__ */
|
|
4677
|
-
/* @__PURE__ */
|
|
4937
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[24px]", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.icon }),
|
|
4938
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[11px] font-bold", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.label })
|
|
4678
4939
|
]
|
|
4679
4940
|
},
|
|
4680
4941
|
opt.id
|
|
4681
4942
|
)) }),
|
|
4682
|
-
layoutChoice === "mobile-desktop" && /* @__PURE__ */
|
|
4683
|
-
layoutChoice === "tablet-landscape" && /* @__PURE__ */
|
|
4943
|
+
layoutChoice === "mobile-desktop" && /* @__PURE__ */ jsx22("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
|
|
4944
|
+
layoutChoice === "tablet-landscape" && /* @__PURE__ */ jsx22("span", { className: "text-white/20 text-[9px] text-center", children: "2-Spalten-Layout f\xFCr Landscape-Tablet im Desktop-Mode" })
|
|
4684
4945
|
] })
|
|
4685
4946
|
] });
|
|
4686
4947
|
}
|
|
@@ -4689,21 +4950,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4689
4950
|
const mdScale = mdMode ? window.innerWidth / 430 : 1;
|
|
4690
4951
|
const mdW = mdMode ? 430 : void 0;
|
|
4691
4952
|
const mdH = mdMode ? Math.ceil(window.innerHeight / mdScale) : void 0;
|
|
4692
|
-
const mobileRoot = /* @__PURE__ */
|
|
4953
|
+
const mobileRoot = /* @__PURE__ */ jsxs20("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
|
|
4693
4954
|
width: mdMode ? mdW : "100vw",
|
|
4694
4955
|
height: mdMode ? mdH : "100dvh",
|
|
4695
4956
|
transform: mdMode ? `scale(${mdScale})` : void 0,
|
|
4696
4957
|
transformOrigin: mdMode ? "top left" : void 0,
|
|
4697
4958
|
...hcStyle || {}
|
|
4698
4959
|
}, children: [
|
|
4699
|
-
mobileTab === "labs" && /* @__PURE__ */
|
|
4960
|
+
mobileTab === "labs" && /* @__PURE__ */ jsx22("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx22(LabsTab, { services: labServices, onResult: (item) => {
|
|
4700
4961
|
const frame = item.frames[0];
|
|
4701
4962
|
if (frame?.base64) {
|
|
4702
4963
|
setCurrentResult(frameToGeneration(frame, item));
|
|
4703
4964
|
setMobileTab("stage");
|
|
4704
4965
|
}
|
|
4705
4966
|
} }) }),
|
|
4706
|
-
mobileTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
4967
|
+
mobileTab === "tags" && workspaceTags && /* @__PURE__ */ jsx22("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx22(
|
|
4707
4968
|
TagManagerPanel,
|
|
4708
4969
|
{
|
|
4709
4970
|
workspaceTags,
|
|
@@ -4714,21 +4975,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4714
4975
|
onTagMove: handleTagMove
|
|
4715
4976
|
}
|
|
4716
4977
|
) }),
|
|
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__ */
|
|
4978
|
+
mobileTab === "stage" && /* @__PURE__ */ jsxs20("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
4979
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
|
|
4980
|
+
/* @__PURE__ */ jsx22(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
4981
|
+
/* @__PURE__ */ jsx22(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" }] }),
|
|
4982
|
+
/* @__PURE__ */ jsx22("div", { className: "flex-1" }),
|
|
4983
|
+
activeReferenceThumbnail ? /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden mr-2", style: { height: 28 }, children: [
|
|
4984
|
+
/* @__PURE__ */ jsx22("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
4985
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
4986
|
+
/* @__PURE__ */ jsx22("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 active:text-white/80 transition-colors", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
4987
|
+
] }) : /* @__PURE__ */ jsx22("button", { onClick: handleSelectReference, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: "add_photo_alternate" }) }),
|
|
4988
|
+
/* @__PURE__ */ jsx22("button", { onClick: toggleContrast, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
4989
|
+
/* @__PURE__ */ jsx22("button", { onClick: () => setShowStart(true), className: "text-white/20 active:text-white/60 transition-colors mr-1", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: "desktop_windows" }) })
|
|
4729
4990
|
] }),
|
|
4730
|
-
/* @__PURE__ */
|
|
4731
|
-
/* @__PURE__ */
|
|
4991
|
+
/* @__PURE__ */ jsx22("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ jsxs20("div", { className: `relative rounded-xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
4992
|
+
/* @__PURE__ */ jsx22(
|
|
4732
4993
|
"textarea",
|
|
4733
4994
|
{
|
|
4734
4995
|
value: activePrompt,
|
|
@@ -4738,26 +4999,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4738
4999
|
placeholder: "Prompt eingeben..."
|
|
4739
5000
|
}
|
|
4740
5001
|
),
|
|
4741
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
5002
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
|
|
4742
5003
|
] }) }),
|
|
4743
|
-
/* @__PURE__ */
|
|
5004
|
+
/* @__PURE__ */ jsx22("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ jsx22(
|
|
4744
5005
|
"button",
|
|
4745
5006
|
{
|
|
4746
5007
|
onClick: () => handleGenerateImage(),
|
|
4747
5008
|
disabled: !activePrompt.trim() || isGenerating,
|
|
4748
5009
|
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
5010
|
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__ */
|
|
5011
|
+
children: isGenerating ? /* @__PURE__ */ jsxs20(Fragment9, { children: [
|
|
5012
|
+
/* @__PURE__ */ jsx22("div", { className: "w-4 h-4 border-t-2 border-white rounded-full animate-spin" }),
|
|
5013
|
+
/* @__PURE__ */ jsx22("span", { children: "Generiere..." })
|
|
5014
|
+
] }) : /* @__PURE__ */ jsxs20(Fragment9, { children: [
|
|
5015
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
|
|
5016
|
+
/* @__PURE__ */ jsx22("span", { children: "Generieren" })
|
|
4756
5017
|
] })
|
|
4757
5018
|
}
|
|
4758
5019
|
) }),
|
|
4759
|
-
/* @__PURE__ */
|
|
4760
|
-
/* @__PURE__ */
|
|
5020
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
|
|
5021
|
+
/* @__PURE__ */ jsxs20(
|
|
4761
5022
|
"div",
|
|
4762
5023
|
{
|
|
4763
5024
|
className: "w-full rounded-2xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center",
|
|
@@ -4771,25 +5032,25 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4771
5032
|
setTouchStartX(null);
|
|
4772
5033
|
},
|
|
4773
5034
|
children: [
|
|
4774
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
4775
|
-
/* @__PURE__ */
|
|
4776
|
-
/* @__PURE__ */
|
|
5035
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-3", children: [
|
|
5036
|
+
/* @__PURE__ */ jsx22("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
|
|
5037
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[11px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
4777
5038
|
] }),
|
|
4778
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
4779
|
-
/* @__PURE__ */
|
|
4780
|
-
/* @__PURE__ */
|
|
4781
|
-
/* @__PURE__ */
|
|
5039
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs20("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
|
|
5040
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
|
|
5041
|
+
/* @__PURE__ */ jsx22("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
|
|
5042
|
+
/* @__PURE__ */ jsx22("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
5043
|
] }),
|
|
4783
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
4784
|
-
!currentResult && /* @__PURE__ */
|
|
4785
|
-
/* @__PURE__ */
|
|
4786
|
-
/* @__PURE__ */
|
|
5044
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx22("img", { src: currentResult.base64, className: "w-full h-full object-contain" }),
|
|
5045
|
+
!currentResult && /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
5046
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
|
|
5047
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
4787
5048
|
] }),
|
|
4788
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
4789
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
4790
|
-
/* @__PURE__ */
|
|
4791
|
-
/* @__PURE__ */
|
|
4792
|
-
/* @__PURE__ */
|
|
5049
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined text-[18px]", children: "fullscreen" }) }),
|
|
5050
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs20(Fragment9, { children: [
|
|
5051
|
+
/* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
5052
|
+
/* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
5053
|
+
/* @__PURE__ */ jsxs20("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
5054
|
currentIndex + 1,
|
|
4794
5055
|
" / ",
|
|
4795
5056
|
history.length
|
|
@@ -4798,33 +5059,33 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4798
5059
|
]
|
|
4799
5060
|
}
|
|
4800
5061
|
),
|
|
4801
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
4802
|
-
/* @__PURE__ */
|
|
4803
|
-
/* @__PURE__ */
|
|
4804
|
-
/* @__PURE__ */
|
|
5062
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs20("div", { className: "flex gap-2 mt-3", children: [
|
|
5063
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5064
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
|
|
5065
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[12px] text-white/60", children: "Prompt" })
|
|
4805
5066
|
] }),
|
|
4806
|
-
/* @__PURE__ */
|
|
4807
|
-
/* @__PURE__ */
|
|
4808
|
-
/* @__PURE__ */
|
|
5067
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5068
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
|
|
5069
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
|
|
4809
5070
|
] }),
|
|
4810
|
-
/* @__PURE__ */
|
|
4811
|
-
/* @__PURE__ */
|
|
4812
|
-
/* @__PURE__ */
|
|
5071
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5072
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "download" }),
|
|
5073
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[12px] text-white/60", children: "Laden" })
|
|
4813
5074
|
] })
|
|
4814
5075
|
] })
|
|
4815
5076
|
] })
|
|
4816
5077
|
] }),
|
|
4817
|
-
mobileTab === "browse" && /* @__PURE__ */
|
|
4818
|
-
/* @__PURE__ */
|
|
4819
|
-
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */
|
|
4820
|
-
hfToken && /* @__PURE__ */
|
|
5078
|
+
mobileTab === "browse" && /* @__PURE__ */ jsxs20("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
5079
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
5080
|
+
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : "info" }) }, tab)),
|
|
5081
|
+
hfToken && /* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
|
|
4821
5082
|
] }),
|
|
4822
|
-
/* @__PURE__ */
|
|
4823
|
-
activeTab === "history" && /* @__PURE__ */
|
|
5083
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5084
|
+
activeTab === "history" && /* @__PURE__ */ jsx22(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: (g) => {
|
|
4824
5085
|
setCurrentResult(g);
|
|
4825
5086
|
setMobileTab("stage");
|
|
4826
5087
|
}, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
|
|
4827
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
5088
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx22(
|
|
4828
5089
|
MediaLibrary,
|
|
4829
5090
|
{
|
|
4830
5091
|
items: galleryItems,
|
|
@@ -4844,43 +5105,43 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4844
5105
|
}
|
|
4845
5106
|
}
|
|
4846
5107
|
),
|
|
4847
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
5108
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx22(InspectPanel, { currentResult, history, onSelect: (g) => {
|
|
4848
5109
|
setCurrentResult(g);
|
|
4849
5110
|
} })
|
|
4850
5111
|
] })
|
|
4851
5112
|
] }),
|
|
4852
|
-
/* @__PURE__ */
|
|
4853
|
-
/* @__PURE__ */
|
|
4854
|
-
workspaceTags && /* @__PURE__ */
|
|
5113
|
+
/* @__PURE__ */ jsxs20("div", { style: { display: mobileTab === "tools" ? "flex" : "none" }, className: "flex flex-col flex-1 min-h-0", children: [
|
|
5114
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
5115
|
+
workspaceTags && /* @__PURE__ */ jsxs20("button", { onClick: () => {
|
|
4855
5116
|
setLeftTab("prompt");
|
|
4856
5117
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
4857
5118
|
}, 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__ */
|
|
5119
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
|
|
4859
5120
|
"Prompt"
|
|
4860
5121
|
] }),
|
|
4861
|
-
/* @__PURE__ */
|
|
5122
|
+
/* @__PURE__ */ jsxs20("button", { onClick: () => {
|
|
4862
5123
|
setLeftTab("hierarchy");
|
|
4863
5124
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
4864
5125
|
}, 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__ */
|
|
5126
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
|
|
4866
5127
|
"Hierarchie"
|
|
4867
5128
|
] }),
|
|
4868
|
-
/* @__PURE__ */
|
|
4869
|
-
/* @__PURE__ */
|
|
5129
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5130
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: "settings" }),
|
|
4870
5131
|
"Setup"
|
|
4871
5132
|
] }),
|
|
4872
|
-
/* @__PURE__ */
|
|
4873
|
-
/* @__PURE__ */
|
|
5133
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5134
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: "cloud_sync" }),
|
|
4874
5135
|
"Sync"
|
|
4875
5136
|
] }),
|
|
4876
|
-
/* @__PURE__ */
|
|
4877
|
-
/* @__PURE__ */
|
|
5137
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5138
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: "biotech" }),
|
|
4878
5139
|
"HF"
|
|
4879
5140
|
] }),
|
|
4880
|
-
workspaceTags && /* @__PURE__ */
|
|
5141
|
+
workspaceTags && /* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
4881
5142
|
] }),
|
|
4882
|
-
/* @__PURE__ */
|
|
4883
|
-
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */
|
|
5143
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5144
|
+
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */ jsx22("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx22(
|
|
4884
5145
|
ListView,
|
|
4885
5146
|
{
|
|
4886
5147
|
nodes,
|
|
@@ -4911,12 +5172,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4911
5172
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
4912
5173
|
}
|
|
4913
5174
|
) }),
|
|
4914
|
-
workspaceTags && /* @__PURE__ */
|
|
5175
|
+
workspaceTags && /* @__PURE__ */ jsx22("div", { style: { display: leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" ? "flex" : "none" }, className: "absolute inset-0 flex-col", children: /* @__PURE__ */ jsx22(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => {
|
|
4915
5176
|
handleGenerateImage(prompt);
|
|
4916
5177
|
setMobileTab("stage");
|
|
4917
5178
|
}, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
|
|
4918
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
4919
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
5179
|
+
activeTab === "setup" && /* @__PURE__ */ jsx22(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
5180
|
+
activeTab === "sync" && /* @__PURE__ */ jsx22(
|
|
4920
5181
|
ProjectSyncTab,
|
|
4921
5182
|
{
|
|
4922
5183
|
topSlot: syncTopSlot,
|
|
@@ -4940,7 +5201,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4940
5201
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
4941
5202
|
}
|
|
4942
5203
|
),
|
|
4943
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5204
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx22(
|
|
4944
5205
|
TagManagerPanel,
|
|
4945
5206
|
{
|
|
4946
5207
|
workspaceTags,
|
|
@@ -4951,7 +5212,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4951
5212
|
onTagMove: handleTagMove
|
|
4952
5213
|
}
|
|
4953
5214
|
),
|
|
4954
|
-
activeTab === "hftest" && /* @__PURE__ */
|
|
5215
|
+
activeTab === "hftest" && /* @__PURE__ */ jsx22("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx22(
|
|
4955
5216
|
HFTestTab,
|
|
4956
5217
|
{
|
|
4957
5218
|
token: hfToken,
|
|
@@ -4964,19 +5225,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4964
5225
|
) })
|
|
4965
5226
|
] })
|
|
4966
5227
|
] }),
|
|
4967
|
-
/* @__PURE__ */
|
|
5228
|
+
/* @__PURE__ */ jsx22("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
|
|
4968
5229
|
{ id: "tools", icon: "auto_fix_high", label: "Prompt" },
|
|
4969
5230
|
{ id: "stage", icon: "palette", label: "Stage" },
|
|
4970
5231
|
{ id: "labs", icon: "science", label: "Labs" },
|
|
4971
5232
|
...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
|
|
4972
5233
|
{ id: "browse", icon: "photo_library", label: "Galerie" }
|
|
4973
|
-
].map((tab) => /* @__PURE__ */
|
|
4974
|
-
/* @__PURE__ */
|
|
4975
|
-
/* @__PURE__ */
|
|
5234
|
+
].map((tab) => /* @__PURE__ */ jsxs20("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: [
|
|
5235
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
|
|
5236
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
|
|
4976
5237
|
] }, tab.id)) })
|
|
4977
5238
|
] });
|
|
4978
5239
|
if (mdMode) {
|
|
4979
|
-
return /* @__PURE__ */
|
|
5240
|
+
return /* @__PURE__ */ jsx22("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
|
|
4980
5241
|
}
|
|
4981
5242
|
return mobileRoot;
|
|
4982
5243
|
}
|
|
@@ -4984,17 +5245,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4984
5245
|
const tlScale = Math.min(window.innerWidth / 920, window.innerHeight / 520);
|
|
4985
5246
|
const tlW = 920;
|
|
4986
5247
|
const tlH = 520;
|
|
4987
|
-
return /* @__PURE__ */
|
|
4988
|
-
/* @__PURE__ */
|
|
4989
|
-
/* @__PURE__ */
|
|
4990
|
-
/* @__PURE__ */
|
|
4991
|
-
/* @__PURE__ */
|
|
4992
|
-
/* @__PURE__ */
|
|
4993
|
-
/* @__PURE__ */
|
|
4994
|
-
/* @__PURE__ */
|
|
5248
|
+
return /* @__PURE__ */ jsx22("div", { style: { position: "fixed", inset: 0, background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", ...hcStyle || {} }, children: /* @__PURE__ */ jsxs20("div", { style: { width: tlW, height: tlH, transform: `scale(${tlScale})`, transformOrigin: "center center", display: "flex", flexDirection: "row", color: "#fff", overflow: "hidden", borderRadius: 0 }, children: [
|
|
5249
|
+
/* @__PURE__ */ jsxs20("div", { style: { width: 320, height: tlH, display: "flex", flexDirection: "column", borderRight: "1px solid rgba(255,255,255,0.05)", background: "#000", flexShrink: 0 }, children: [
|
|
5250
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5251
|
+
/* @__PURE__ */ jsx22(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5252
|
+
/* @__PURE__ */ jsx22(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" }] }),
|
|
5253
|
+
/* @__PURE__ */ jsx22("div", { style: { flex: 1 } }),
|
|
5254
|
+
/* @__PURE__ */ jsx22("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
5255
|
+
/* @__PURE__ */ jsx22("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
|
|
4995
5256
|
] }),
|
|
4996
|
-
/* @__PURE__ */
|
|
4997
|
-
/* @__PURE__ */
|
|
5257
|
+
/* @__PURE__ */ jsx22("div", { style: { padding: "12px 12px 8px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs20("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: [
|
|
5258
|
+
/* @__PURE__ */ jsx22(
|
|
4998
5259
|
"textarea",
|
|
4999
5260
|
{
|
|
5000
5261
|
value: activePrompt,
|
|
@@ -5003,27 +5264,27 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5003
5264
|
placeholder: "Prompt eingeben..."
|
|
5004
5265
|
}
|
|
5005
5266
|
),
|
|
5006
|
-
activePrompt && /* @__PURE__ */
|
|
5267
|
+
activePrompt && /* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
|
|
5007
5268
|
] }) }),
|
|
5008
|
-
/* @__PURE__ */
|
|
5269
|
+
/* @__PURE__ */ jsx22("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ jsx22(
|
|
5009
5270
|
"button",
|
|
5010
5271
|
{
|
|
5011
5272
|
onClick: () => handleGenerateImage(),
|
|
5012
5273
|
disabled: !activePrompt.trim() || isGenerating,
|
|
5013
5274
|
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__ */
|
|
5275
|
+
children: isGenerating ? /* @__PURE__ */ jsxs20(Fragment9, { children: [
|
|
5276
|
+
/* @__PURE__ */ jsx22("div", { style: { width: 14, height: 14, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
|
|
5277
|
+
/* @__PURE__ */ jsx22("span", { children: "Generiere..." })
|
|
5278
|
+
] }) : /* @__PURE__ */ jsxs20(Fragment9, { children: [
|
|
5279
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
|
|
5280
|
+
/* @__PURE__ */ jsx22("span", { children: "Generieren" })
|
|
5020
5281
|
] })
|
|
5021
5282
|
}
|
|
5022
5283
|
) }),
|
|
5023
|
-
/* @__PURE__ */
|
|
5284
|
+
/* @__PURE__ */ jsx22("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ jsx22(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }) })
|
|
5024
5285
|
] }),
|
|
5025
|
-
/* @__PURE__ */
|
|
5026
|
-
/* @__PURE__ */
|
|
5286
|
+
/* @__PURE__ */ jsxs20("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
|
|
5287
|
+
/* @__PURE__ */ jsx22(
|
|
5027
5288
|
"div",
|
|
5028
5289
|
{
|
|
5029
5290
|
style: { flex: 1, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" },
|
|
@@ -5035,26 +5296,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5035
5296
|
else if (dx > 50) goToPrev();
|
|
5036
5297
|
setTouchStartX(null);
|
|
5037
5298
|
},
|
|
5038
|
-
children: /* @__PURE__ */
|
|
5039
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
5040
|
-
/* @__PURE__ */
|
|
5041
|
-
/* @__PURE__ */
|
|
5299
|
+
children: /* @__PURE__ */ jsxs20("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: [
|
|
5300
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs20("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
5301
|
+
/* @__PURE__ */ jsx22("div", { style: { width: 36, height: 36, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
|
|
5302
|
+
/* @__PURE__ */ jsx22("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
|
|
5042
5303
|
] }),
|
|
5043
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
5044
|
-
/* @__PURE__ */
|
|
5045
|
-
/* @__PURE__ */
|
|
5046
|
-
/* @__PURE__ */
|
|
5304
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs20("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
5305
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
|
|
5306
|
+
/* @__PURE__ */ jsx22("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
|
|
5307
|
+
/* @__PURE__ */ jsx22("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
5308
|
] }),
|
|
5048
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
5049
|
-
!currentResult && /* @__PURE__ */
|
|
5050
|
-
/* @__PURE__ */
|
|
5051
|
-
/* @__PURE__ */
|
|
5309
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx22("img", { src: currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
|
|
5310
|
+
!currentResult && /* @__PURE__ */ jsxs20("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
|
|
5311
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
|
|
5312
|
+
/* @__PURE__ */ jsx22("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
|
|
5052
5313
|
] }),
|
|
5053
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5054
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
5055
|
-
/* @__PURE__ */
|
|
5056
|
-
/* @__PURE__ */
|
|
5057
|
-
/* @__PURE__ */
|
|
5314
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "fullscreen" }) }),
|
|
5315
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs20(Fragment9, { children: [
|
|
5316
|
+
/* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_left" }) }),
|
|
5317
|
+
/* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_right" }) }),
|
|
5318
|
+
/* @__PURE__ */ jsxs20("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
5319
|
currentIndex + 1,
|
|
5059
5320
|
" / ",
|
|
5060
5321
|
history.length
|
|
@@ -5063,42 +5324,42 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5063
5324
|
] })
|
|
5064
5325
|
}
|
|
5065
5326
|
),
|
|
5066
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5067
|
-
/* @__PURE__ */
|
|
5068
|
-
/* @__PURE__ */
|
|
5069
|
-
/* @__PURE__ */
|
|
5327
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs20("div", { style: { padding: "0 16px 16px", display: "flex", gap: 8, flexShrink: 0 }, children: [
|
|
5328
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5329
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
|
|
5330
|
+
/* @__PURE__ */ jsx22("span", { children: "Prompt" })
|
|
5070
5331
|
] }),
|
|
5071
|
-
/* @__PURE__ */
|
|
5072
|
-
/* @__PURE__ */
|
|
5073
|
-
/* @__PURE__ */
|
|
5332
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5333
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
|
|
5334
|
+
/* @__PURE__ */ jsx22("span", { children: "Referenz" })
|
|
5074
5335
|
] }),
|
|
5075
|
-
/* @__PURE__ */
|
|
5076
|
-
/* @__PURE__ */
|
|
5077
|
-
/* @__PURE__ */
|
|
5336
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5337
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "download" }),
|
|
5338
|
+
/* @__PURE__ */ jsx22("span", { children: "Laden" })
|
|
5078
5339
|
] })
|
|
5079
5340
|
] })
|
|
5080
5341
|
] })
|
|
5081
5342
|
] }) });
|
|
5082
5343
|
}
|
|
5083
|
-
return /* @__PURE__ */
|
|
5084
|
-
/* @__PURE__ */
|
|
5085
|
-
/* @__PURE__ */
|
|
5086
|
-
/* @__PURE__ */
|
|
5087
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5088
|
-
workspaceTags && /* @__PURE__ */
|
|
5089
|
-
/* @__PURE__ */
|
|
5344
|
+
return /* @__PURE__ */ jsxs20("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", style: hcStyle, children: [
|
|
5345
|
+
/* @__PURE__ */ jsx22("div", { className: "absolute top-2 right-2 z-50", children: /* @__PURE__ */ jsx22("button", { onClick: () => setShowStart(true), className: "text-white/10 hover:text-white/30 transition-colors text-[10px]", children: "\u21C4" }) }),
|
|
5346
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5347
|
+
/* @__PURE__ */ jsxs20("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
|
|
5348
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 gap-1", children: [
|
|
5349
|
+
workspaceTags && /* @__PURE__ */ jsxs20("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: [
|
|
5350
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
|
|
5090
5351
|
"Prompt"
|
|
5091
5352
|
] }),
|
|
5092
|
-
/* @__PURE__ */
|
|
5093
|
-
/* @__PURE__ */
|
|
5353
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5354
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
|
|
5094
5355
|
"Hierarchie"
|
|
5095
5356
|
] }),
|
|
5096
|
-
workspaceTags && /* @__PURE__ */
|
|
5357
|
+
workspaceTags && /* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
5097
5358
|
] }),
|
|
5098
|
-
/* @__PURE__ */
|
|
5359
|
+
/* @__PURE__ */ jsx22("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
5360
|
] }),
|
|
5100
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5101
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5361
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs20("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5362
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx22(
|
|
5102
5363
|
TagManagerPanel,
|
|
5103
5364
|
{
|
|
5104
5365
|
workspaceTags,
|
|
@@ -5109,11 +5370,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5109
5370
|
onTagMove: handleTagMove
|
|
5110
5371
|
}
|
|
5111
5372
|
),
|
|
5112
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
5113
|
-
/* @__PURE__ */
|
|
5114
|
-
/* @__PURE__ */
|
|
5373
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs20("div", { children: [
|
|
5374
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
5375
|
+
/* @__PURE__ */ jsx22("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
5115
5376
|
] }) }),
|
|
5116
|
-
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */
|
|
5377
|
+
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ jsx22("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx22(
|
|
5117
5378
|
ListView,
|
|
5118
5379
|
{
|
|
5119
5380
|
nodes,
|
|
@@ -5138,18 +5399,18 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5138
5399
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
5139
5400
|
}
|
|
5140
5401
|
) }),
|
|
5141
|
-
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */
|
|
5402
|
+
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ jsx22(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
5403
|
] })
|
|
5143
5404
|
] }),
|
|
5144
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5145
|
-
/* @__PURE__ */
|
|
5146
|
-
/* @__PURE__ */
|
|
5147
|
-
/* @__PURE__ */
|
|
5148
|
-
/* @__PURE__ */
|
|
5149
|
-
/* @__PURE__ */
|
|
5405
|
+
!isLeftCollapsed && /* @__PURE__ */ jsx22("div", { onMouseDown: startLeftResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
5406
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
|
|
5407
|
+
/* @__PURE__ */ jsxs20("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
|
|
5408
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1.5", children: [
|
|
5409
|
+
/* @__PURE__ */ jsx22(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5410
|
+
/* @__PURE__ */ jsx22(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
5411
|
] }),
|
|
5151
|
-
/* @__PURE__ */
|
|
5152
|
-
/* @__PURE__ */
|
|
5412
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 mx-auto", children: [
|
|
5413
|
+
/* @__PURE__ */ jsx22(
|
|
5153
5414
|
"button",
|
|
5154
5415
|
{
|
|
5155
5416
|
onClick: () => setMiddlePanel("stage"),
|
|
@@ -5157,7 +5418,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5157
5418
|
children: "Stage"
|
|
5158
5419
|
}
|
|
5159
5420
|
),
|
|
5160
|
-
/* @__PURE__ */
|
|
5421
|
+
/* @__PURE__ */ jsx22(
|
|
5161
5422
|
"button",
|
|
5162
5423
|
{
|
|
5163
5424
|
onClick: () => setMiddlePanel("labs"),
|
|
@@ -5166,68 +5427,68 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5166
5427
|
}
|
|
5167
5428
|
)
|
|
5168
5429
|
] }),
|
|
5169
|
-
/* @__PURE__ */
|
|
5170
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
5171
|
-
/* @__PURE__ */
|
|
5172
|
-
/* @__PURE__ */
|
|
5173
|
-
/* @__PURE__ */
|
|
5174
|
-
] }) : /* @__PURE__ */
|
|
5175
|
-
/* @__PURE__ */
|
|
5176
|
-
/* @__PURE__ */
|
|
5430
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
|
|
5431
|
+
activeReferenceThumbnail ? /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden", style: { height: 28 }, children: [
|
|
5432
|
+
/* @__PURE__ */ jsx22("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
5433
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
5434
|
+
/* @__PURE__ */ jsx22("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 hover:text-white/80 transition-colors", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5435
|
+
] }) : /* @__PURE__ */ jsxs20("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: [
|
|
5436
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
|
|
5437
|
+
/* @__PURE__ */ jsx22("span", { children: "Ref" })
|
|
5177
5438
|
] }),
|
|
5178
|
-
/* @__PURE__ */
|
|
5179
|
-
/* @__PURE__ */
|
|
5439
|
+
/* @__PURE__ */ jsx22("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
|
|
5440
|
+
/* @__PURE__ */ jsx22(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
|
|
5180
5441
|
] })
|
|
5181
5442
|
] }),
|
|
5182
|
-
/* @__PURE__ */
|
|
5183
|
-
!isPromptCollapsed && /* @__PURE__ */
|
|
5184
|
-
/* @__PURE__ */
|
|
5185
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
5443
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
|
|
5444
|
+
!isPromptCollapsed && /* @__PURE__ */ jsx22("div", { className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ jsxs20("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
5445
|
+
/* @__PURE__ */ jsx22("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..." }),
|
|
5446
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5186
5447
|
] }) }),
|
|
5187
|
-
middlePanel === "labs" ? /* @__PURE__ */
|
|
5448
|
+
middlePanel === "labs" ? /* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx22(LabsTab, { services: labServices, onResult: (item) => {
|
|
5188
5449
|
const frame = item.frames[0];
|
|
5189
5450
|
if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
|
|
5190
|
-
} }) }) : /* @__PURE__ */
|
|
5191
|
-
isGenerating && currentResult?.status === "done" && /* @__PURE__ */
|
|
5192
|
-
/* @__PURE__ */
|
|
5193
|
-
/* @__PURE__ */
|
|
5451
|
+
} }) }) : /* @__PURE__ */ jsx22("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ jsxs20("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: [
|
|
5452
|
+
isGenerating && currentResult?.status === "done" && /* @__PURE__ */ jsxs20("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: [
|
|
5453
|
+
/* @__PURE__ */ jsx22("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
|
|
5454
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
|
|
5194
5455
|
] }),
|
|
5195
|
-
currentResult ? currentResult.status === "processing" ? /* @__PURE__ */
|
|
5196
|
-
/* @__PURE__ */
|
|
5197
|
-
/* @__PURE__ */
|
|
5198
|
-
] }) : currentResult.status === "error" ? /* @__PURE__ */
|
|
5199
|
-
/* @__PURE__ */
|
|
5200
|
-
/* @__PURE__ */
|
|
5201
|
-
/* @__PURE__ */
|
|
5202
|
-
/* @__PURE__ */
|
|
5456
|
+
currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-4", children: [
|
|
5457
|
+
/* @__PURE__ */ jsx22("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
|
|
5458
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
5459
|
+
] }) : currentResult.status === "error" ? /* @__PURE__ */ jsxs20("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
|
|
5460
|
+
/* @__PURE__ */ jsx22("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
|
|
5461
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-2", children: [
|
|
5462
|
+
/* @__PURE__ */ jsx22("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
|
|
5463
|
+
/* @__PURE__ */ jsx22("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
|
|
5203
5464
|
] }),
|
|
5204
|
-
/* @__PURE__ */
|
|
5205
|
-
] }) : /* @__PURE__ */
|
|
5206
|
-
/* @__PURE__ */
|
|
5207
|
-
/* @__PURE__ */
|
|
5208
|
-
/* @__PURE__ */
|
|
5209
|
-
/* @__PURE__ */
|
|
5210
|
-
/* @__PURE__ */
|
|
5465
|
+
/* @__PURE__ */ jsx22(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
|
|
5466
|
+
] }) : /* @__PURE__ */ jsxs20("div", { className: "h-full w-full relative flex items-center justify-center", children: [
|
|
5467
|
+
/* @__PURE__ */ jsx22("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
|
|
5468
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
5469
|
+
/* @__PURE__ */ jsx22(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
|
|
5470
|
+
/* @__PURE__ */ jsx22(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
|
|
5471
|
+
/* @__PURE__ */ jsx22(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
|
|
5211
5472
|
] })
|
|
5212
|
-
] }) : /* @__PURE__ */
|
|
5213
|
-
/* @__PURE__ */
|
|
5214
|
-
/* @__PURE__ */
|
|
5473
|
+
] }) : /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
5474
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
|
|
5475
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
5215
5476
|
] })
|
|
5216
5477
|
] }) })
|
|
5217
5478
|
] })
|
|
5218
5479
|
] }),
|
|
5219
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
5220
|
-
/* @__PURE__ */
|
|
5221
|
-
/* @__PURE__ */
|
|
5222
|
-
/* @__PURE__ */
|
|
5480
|
+
!isRightCollapsed && /* @__PURE__ */ jsx22("div", { onMouseDown: startRightResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
5481
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", style: { width: isRightCollapsed ? 60 : rightPanelWidth, transition: "none" }, children: [
|
|
5482
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
|
|
5483
|
+
/* @__PURE__ */ jsx22("div", { className: "flex flex-1", children: ["history", "gallery", "inspect", "setup", "sync", "tags"].map((tab) => /* @__PURE__ */ jsx22("button", { onClick: () => {
|
|
5223
5484
|
setActiveTab(tab);
|
|
5224
5485
|
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__ */
|
|
5486
|
+
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : tab === "setup" ? "settings" : tab === "sync" ? "cloud_sync" : "label" }) }, tab)) }),
|
|
5487
|
+
hfToken && /* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
|
|
5488
|
+
/* @__PURE__ */ jsx22("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
|
|
5228
5489
|
] }),
|
|
5229
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
5230
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5490
|
+
!isRightCollapsed && /* @__PURE__ */ jsxs20("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5491
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx22(
|
|
5231
5492
|
TagManagerPanel,
|
|
5232
5493
|
{
|
|
5233
5494
|
workspaceTags,
|
|
@@ -5238,12 +5499,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5238
5499
|
onTagMove: handleTagMove
|
|
5239
5500
|
}
|
|
5240
5501
|
),
|
|
5241
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
5242
|
-
/* @__PURE__ */
|
|
5243
|
-
/* @__PURE__ */
|
|
5502
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs20("div", { children: [
|
|
5503
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
5504
|
+
/* @__PURE__ */ jsx22("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
5244
5505
|
] }) }),
|
|
5245
|
-
activeTab === "history" && /* @__PURE__ */
|
|
5246
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
5506
|
+
activeTab === "history" && /* @__PURE__ */ jsx22(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
|
|
5507
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx22(
|
|
5247
5508
|
MediaLibrary,
|
|
5248
5509
|
{
|
|
5249
5510
|
items: galleryItems,
|
|
@@ -5257,9 +5518,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5257
5518
|
onGenerateReference: (item) => handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true })
|
|
5258
5519
|
}
|
|
5259
5520
|
),
|
|
5260
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
5261
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
5262
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
5521
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx22(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
|
|
5522
|
+
activeTab === "setup" && /* @__PURE__ */ jsx22(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
5523
|
+
activeTab === "sync" && /* @__PURE__ */ jsx22(
|
|
5263
5524
|
ProjectSyncTab,
|
|
5264
5525
|
{
|
|
5265
5526
|
topSlot: syncTopSlot,
|
|
@@ -5289,8 +5550,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5289
5550
|
}
|
|
5290
5551
|
|
|
5291
5552
|
// src/components/FaApp.tsx
|
|
5292
|
-
import { useState as
|
|
5293
|
-
import { jsx as
|
|
5553
|
+
import { useState as useState18, useEffect as useEffect7 } from "react";
|
|
5554
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
5294
5555
|
function FaApp({
|
|
5295
5556
|
onGenerateImage,
|
|
5296
5557
|
onGeneratePrompt,
|
|
@@ -5309,7 +5570,7 @@ function FaApp({
|
|
|
5309
5570
|
onServerDelete,
|
|
5310
5571
|
buildInfo
|
|
5311
5572
|
}) {
|
|
5312
|
-
const [hfNamespace, setHfNamespace] =
|
|
5573
|
+
const [hfNamespace, setHfNamespace] = useState18(void 0);
|
|
5313
5574
|
useEffect7(() => {
|
|
5314
5575
|
if (!serverBaseUrl) return;
|
|
5315
5576
|
fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
|
|
@@ -5321,7 +5582,7 @@ function FaApp({
|
|
|
5321
5582
|
const result = await onGeneratePrompt(text, options);
|
|
5322
5583
|
return result.text;
|
|
5323
5584
|
};
|
|
5324
|
-
return /* @__PURE__ */
|
|
5585
|
+
return /* @__PURE__ */ jsx23(
|
|
5325
5586
|
AvatarArchitectApp,
|
|
5326
5587
|
{
|
|
5327
5588
|
onGenerateImage,
|
|
@@ -5341,7 +5602,7 @@ function FaApp({
|
|
|
5341
5602
|
}
|
|
5342
5603
|
|
|
5343
5604
|
// src/index.ts
|
|
5344
|
-
var LIB_VERSION = "2.0.
|
|
5605
|
+
var LIB_VERSION = "2.0.23";
|
|
5345
5606
|
export {
|
|
5346
5607
|
AvatarArchitectApp,
|
|
5347
5608
|
CollapsibleCard,
|
|
@@ -5354,6 +5615,7 @@ export {
|
|
|
5354
5615
|
LIB_VERSION,
|
|
5355
5616
|
LabBlend,
|
|
5356
5617
|
LabCompare,
|
|
5618
|
+
LabFrameExtractor,
|
|
5357
5619
|
LabImagePicker,
|
|
5358
5620
|
LabLoop,
|
|
5359
5621
|
LabRemix,
|