@rslsp1/fa-app-tools 2.0.23 → 2.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +10 -2
- package/dist/index.d.ts +10 -2
- package/dist/index.js +589 -350
- package/dist/index.mjs +569 -337
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -801,7 +801,7 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
|
|
|
801
801
|
}
|
|
802
802
|
|
|
803
803
|
// src/components/AvatarArchitectApp.tsx
|
|
804
|
-
import { useState as
|
|
804
|
+
import { useState as useState18, useCallback as useCallback3, useMemo as useMemo2, useEffect as useEffect7, useRef as useRef8 } from "react";
|
|
805
805
|
|
|
806
806
|
// src/components/PromptTab.tsx
|
|
807
807
|
import { useRef as useRef4, useState as useState5 } from "react";
|
|
@@ -3962,10 +3962,234 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3962
3962
|
] });
|
|
3963
3963
|
}
|
|
3964
3964
|
|
|
3965
|
+
// src/components/ServerTab.tsx
|
|
3966
|
+
import { useState as useState17, useEffect as useEffect6 } from "react";
|
|
3967
|
+
|
|
3968
|
+
// src/lib/faHfServerService.ts
|
|
3969
|
+
var FA_APP_SPACE = "https://rslsp1-fa-app.hf.space";
|
|
3970
|
+
async function request(method, path, env = "prod", body) {
|
|
3971
|
+
const token = getHFToken();
|
|
3972
|
+
if (!token) throw new Error("fa-app gateway: kein HF Token gesetzt");
|
|
3973
|
+
const res = await fetch(`${FA_APP_SPACE}/${path.replace(/^\//, "")}`, {
|
|
3974
|
+
method,
|
|
3975
|
+
headers: {
|
|
3976
|
+
"Authorization": `Bearer ${token}`,
|
|
3977
|
+
"X-Env": env,
|
|
3978
|
+
...body !== void 0 ? { "Content-Type": "application/json" } : {}
|
|
3979
|
+
},
|
|
3980
|
+
...body !== void 0 ? { body: JSON.stringify(body) } : {}
|
|
3981
|
+
});
|
|
3982
|
+
if (!res.ok) {
|
|
3983
|
+
const text = await res.text().catch(() => "");
|
|
3984
|
+
throw new Error(`fa-app gateway ${method} /${path} [${env}] \u2192 ${res.status}: ${text.slice(0, 200)}`);
|
|
3985
|
+
}
|
|
3986
|
+
return res.json();
|
|
3987
|
+
}
|
|
3988
|
+
function faServerGet(path, env = "prod") {
|
|
3989
|
+
return request("GET", path, env);
|
|
3990
|
+
}
|
|
3991
|
+
function faServerPost(path, body, env = "prod") {
|
|
3992
|
+
return request("POST", path, env, body);
|
|
3993
|
+
}
|
|
3994
|
+
function faServerPut(path, body, env = "prod") {
|
|
3995
|
+
return request("PUT", path, env, body);
|
|
3996
|
+
}
|
|
3997
|
+
function faServerDelete(path, env = "prod") {
|
|
3998
|
+
return request("DELETE", path, env);
|
|
3999
|
+
}
|
|
4000
|
+
|
|
4001
|
+
// src/components/ServerTab.tsx
|
|
4002
|
+
import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
4003
|
+
function StarRating({ rating = 0 }) {
|
|
4004
|
+
return /* @__PURE__ */ jsx22("div", { className: "flex gap-[2px]", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx22("span", { className: `material-symbols-outlined text-[12px] ${i <= rating ? "text-yellow-400" : "text-white/15"}`, children: "star" }, i)) });
|
|
4005
|
+
}
|
|
4006
|
+
function ServerTab() {
|
|
4007
|
+
const hasToken = !!getHFToken();
|
|
4008
|
+
const [env, setEnv] = useState17("prod");
|
|
4009
|
+
const [step, setStep] = useState17("user");
|
|
4010
|
+
const [users, setUsers] = useState17([]);
|
|
4011
|
+
const [usersLoading, setUsersLoading] = useState17(false);
|
|
4012
|
+
const [usersError, setUsersError] = useState17(null);
|
|
4013
|
+
const [selectedUser, setSelectedUser] = useState17(null);
|
|
4014
|
+
const [contexts, setContexts] = useState17([]);
|
|
4015
|
+
const [contextsLoading, setContextsLoading] = useState17(false);
|
|
4016
|
+
const [selectedContext, setSelectedContext] = useState17(null);
|
|
4017
|
+
const [tags, setTags] = useState17([]);
|
|
4018
|
+
const [items, setItems] = useState17([]);
|
|
4019
|
+
const [libLoading, setLibLoading] = useState17(false);
|
|
4020
|
+
const [libError, setLibError] = useState17(null);
|
|
4021
|
+
const [activeTag, setActiveTag] = useState17(null);
|
|
4022
|
+
const [preview, setPreview] = useState17(null);
|
|
4023
|
+
useEffect6(() => {
|
|
4024
|
+
if (!hasToken) return;
|
|
4025
|
+
setUsersLoading(true);
|
|
4026
|
+
setUsersError(null);
|
|
4027
|
+
faServerGet("/api/v2/users", env).then(setUsers).catch((e) => setUsersError(String(e))).finally(() => setUsersLoading(false));
|
|
4028
|
+
}, [env, hasToken]);
|
|
4029
|
+
const selectUser = async (user) => {
|
|
4030
|
+
setSelectedUser(user);
|
|
4031
|
+
setContextsLoading(true);
|
|
4032
|
+
try {
|
|
4033
|
+
const data = await faServerGet(`/api/v2/contexts?user_id=${user.id}`, env);
|
|
4034
|
+
if (data.length === 1) {
|
|
4035
|
+
await loadLibrary(user, data[0]);
|
|
4036
|
+
} else {
|
|
4037
|
+
setContexts(data);
|
|
4038
|
+
setStep("context");
|
|
4039
|
+
}
|
|
4040
|
+
} catch (e) {
|
|
4041
|
+
setUsersError(String(e));
|
|
4042
|
+
} finally {
|
|
4043
|
+
setContextsLoading(false);
|
|
4044
|
+
}
|
|
4045
|
+
};
|
|
4046
|
+
const loadLibrary = async (user, ctx) => {
|
|
4047
|
+
setSelectedContext(ctx);
|
|
4048
|
+
setStep("library");
|
|
4049
|
+
setLibLoading(true);
|
|
4050
|
+
setLibError(null);
|
|
4051
|
+
try {
|
|
4052
|
+
const [tagsRes, libRes] = await Promise.all([
|
|
4053
|
+
faServerGet(`/api/v2/tags?user_id=${user.id}`, env),
|
|
4054
|
+
faServerGet(`/api/v2/library?user_id=${user.id}&context_id=${ctx.id}&limit=100`, env)
|
|
4055
|
+
]);
|
|
4056
|
+
setTags(Array.isArray(tagsRes) ? tagsRes : []);
|
|
4057
|
+
const raw = Array.isArray(libRes) ? libRes : libRes.data ?? [];
|
|
4058
|
+
setItems(raw);
|
|
4059
|
+
} catch (e) {
|
|
4060
|
+
setLibError(String(e));
|
|
4061
|
+
} finally {
|
|
4062
|
+
setLibLoading(false);
|
|
4063
|
+
}
|
|
4064
|
+
};
|
|
4065
|
+
const reset = () => {
|
|
4066
|
+
setStep("user");
|
|
4067
|
+
setSelectedUser(null);
|
|
4068
|
+
setSelectedContext(null);
|
|
4069
|
+
setContexts([]);
|
|
4070
|
+
setTags([]);
|
|
4071
|
+
setItems([]);
|
|
4072
|
+
setActiveTag(null);
|
|
4073
|
+
setPreview(null);
|
|
4074
|
+
setLibError(null);
|
|
4075
|
+
};
|
|
4076
|
+
const filteredItems = activeTag ? items.filter((item) => item.tags?.some((t) => t.l === activeTag)) : items;
|
|
4077
|
+
if (!hasToken) {
|
|
4078
|
+
return /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center h-full p-6", children: /* @__PURE__ */ jsxs20("p", { className: "text-white/30 text-[12px] text-center", children: [
|
|
4079
|
+
"Kein HF Token gesetzt.",
|
|
4080
|
+
/* @__PURE__ */ jsx22("br", {}),
|
|
4081
|
+
"Bitte zuerst im Setup-Tab einrichten."
|
|
4082
|
+
] }) });
|
|
4083
|
+
}
|
|
4084
|
+
return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col h-full min-h-0", children: [
|
|
4085
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-white/8", children: [
|
|
4086
|
+
step !== "user" && /* @__PURE__ */ jsx22("button", { onClick: reset, className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[18px]", children: "arrow_back" }) }),
|
|
4087
|
+
/* @__PURE__ */ jsxs20("span", { className: "text-[11px] font-medium text-white/40 tracking-wide flex-1", children: [
|
|
4088
|
+
step === "user" && "Server Browser",
|
|
4089
|
+
step === "context" && `${selectedUser?.username} \u2014 Kontext w\xE4hlen`,
|
|
4090
|
+
step === "library" && `${selectedUser?.username} / ${selectedContext?.label || selectedContext?.name || selectedContext?.id}`
|
|
4091
|
+
] }),
|
|
4092
|
+
step === "user" && /* @__PURE__ */ jsx22("div", { className: "flex gap-1", children: ["prod", "dev"].map((e) => /* @__PURE__ */ jsx22(
|
|
4093
|
+
"button",
|
|
4094
|
+
{
|
|
4095
|
+
onClick: () => setEnv(e),
|
|
4096
|
+
className: `text-[10px] font-bold px-2 py-0.5 rounded-lg transition-colors ${env === e ? "bg-white/15 text-white" : "text-white/30 hover:text-white/60"}`,
|
|
4097
|
+
children: e
|
|
4098
|
+
},
|
|
4099
|
+
e
|
|
4100
|
+
)) })
|
|
4101
|
+
] }),
|
|
4102
|
+
step === "user" && /* @__PURE__ */ jsxs20("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-3 gap-2", children: [
|
|
4103
|
+
usersLoading && /* @__PURE__ */ jsx22("p", { className: "text-white/30 text-[11px] text-center py-4", children: "Lade User\u2026" }),
|
|
4104
|
+
usersError && /* @__PURE__ */ jsx22("p", { className: "text-red-400 text-[11px] text-center py-4", children: usersError }),
|
|
4105
|
+
!usersLoading && users.map((u) => /* @__PURE__ */ jsxs20(
|
|
4106
|
+
"button",
|
|
4107
|
+
{
|
|
4108
|
+
onClick: () => selectUser(u),
|
|
4109
|
+
className: "flex items-center gap-3 px-3 py-2.5 rounded-xl border border-white/8 hover:border-white/20 hover:bg-white/5 transition-all text-left",
|
|
4110
|
+
children: [
|
|
4111
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px] text-white/40", children: "person" }),
|
|
4112
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
4113
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[12px] font-medium text-white", children: u.username }),
|
|
4114
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[10px] text-white/30", children: u.id })
|
|
4115
|
+
] }),
|
|
4116
|
+
contextsLoading && selectedUser?.id === u.id ? /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[16px] text-white/30 animate-spin", children: "progress_activity" }) : /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[16px] text-white/20", children: "chevron_right" })
|
|
4117
|
+
]
|
|
4118
|
+
},
|
|
4119
|
+
u.id
|
|
4120
|
+
))
|
|
4121
|
+
] }),
|
|
4122
|
+
step === "context" && /* @__PURE__ */ jsx22("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-3 gap-2", children: contexts.map((ctx) => /* @__PURE__ */ jsxs20(
|
|
4123
|
+
"button",
|
|
4124
|
+
{
|
|
4125
|
+
onClick: () => loadLibrary(selectedUser, ctx),
|
|
4126
|
+
className: "flex items-center gap-3 px-3 py-2.5 rounded-xl border border-white/8 hover:border-white/20 hover:bg-white/5 transition-all text-left",
|
|
4127
|
+
children: [
|
|
4128
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[20px] text-white/40", children: "folder" }),
|
|
4129
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
4130
|
+
/* @__PURE__ */ jsx22("span", { className: "text-[12px] font-medium text-white", children: ctx.label || ctx.name || ctx.id }),
|
|
4131
|
+
ctx.description && /* @__PURE__ */ jsx22("span", { className: "text-[10px] text-white/30 truncate", children: ctx.description })
|
|
4132
|
+
] }),
|
|
4133
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[16px] text-white/20", children: "chevron_right" })
|
|
4134
|
+
]
|
|
4135
|
+
},
|
|
4136
|
+
ctx.id
|
|
4137
|
+
)) }),
|
|
4138
|
+
step === "library" && /* @__PURE__ */ jsxs20("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
4139
|
+
tags.length > 0 && /* @__PURE__ */ jsxs20("div", { className: "flex gap-1.5 px-3 py-2 overflow-x-auto border-b border-white/8", style: { scrollbarWidth: "none" }, children: [
|
|
4140
|
+
/* @__PURE__ */ jsx22(
|
|
4141
|
+
"button",
|
|
4142
|
+
{
|
|
4143
|
+
onClick: () => setActiveTag(null),
|
|
4144
|
+
className: `shrink-0 text-[10px] font-medium px-2.5 py-1 rounded-lg transition-colors ${!activeTag ? "bg-white/20 text-white" : "bg-white/5 text-white/40 hover:bg-white/10"}`,
|
|
4145
|
+
children: "Alle"
|
|
4146
|
+
}
|
|
4147
|
+
),
|
|
4148
|
+
tags.map((t) => /* @__PURE__ */ jsx22(
|
|
4149
|
+
"button",
|
|
4150
|
+
{
|
|
4151
|
+
onClick: () => setActiveTag(activeTag === t.label ? null : t.label),
|
|
4152
|
+
className: `shrink-0 text-[10px] font-medium px-2.5 py-1 rounded-lg transition-colors whitespace-nowrap ${activeTag === t.label ? "bg-white/20 text-white" : "bg-white/5 text-white/40 hover:bg-white/10"}`,
|
|
4153
|
+
children: t.label
|
|
4154
|
+
},
|
|
4155
|
+
t.id
|
|
4156
|
+
))
|
|
4157
|
+
] }),
|
|
4158
|
+
libLoading && /* @__PURE__ */ jsx22("p", { className: "text-white/30 text-[11px] text-center py-8", children: "Lade Library\u2026" }),
|
|
4159
|
+
libError && /* @__PURE__ */ jsx22("p", { className: "text-red-400 text-[11px] text-center py-8", children: libError }),
|
|
4160
|
+
!libLoading && !libError && /* @__PURE__ */ jsxs20("div", { className: "flex-1 min-h-0 overflow-y-auto p-3 grid grid-cols-2 gap-2 content-start", children: [
|
|
4161
|
+
filteredItems.length === 0 && /* @__PURE__ */ jsx22("p", { className: "col-span-2 text-white/30 text-[11px] text-center py-8", children: "Keine Eintr\xE4ge." }),
|
|
4162
|
+
filteredItems.map((item) => {
|
|
4163
|
+
const imgUrl = item.images?.[0]?.url;
|
|
4164
|
+
return /* @__PURE__ */ jsxs20(
|
|
4165
|
+
"button",
|
|
4166
|
+
{
|
|
4167
|
+
onClick: () => imgUrl && setPreview(imgUrl),
|
|
4168
|
+
className: "flex flex-col rounded-xl overflow-hidden border border-white/8 hover:border-white/25 transition-all bg-white/3 text-left",
|
|
4169
|
+
children: [
|
|
4170
|
+
imgUrl ? /* @__PURE__ */ jsx22("img", { src: imgUrl, alt: "", className: "w-full aspect-square object-cover bg-white/5" }) : /* @__PURE__ */ jsx22("div", { className: "w-full aspect-square bg-white/5 flex items-center justify-center", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[24px] text-white/15", children: "image" }) }),
|
|
4171
|
+
/* @__PURE__ */ jsxs20("div", { className: "p-1.5 flex flex-col gap-0.5", children: [
|
|
4172
|
+
item.title && /* @__PURE__ */ jsx22("span", { className: "text-[10px] font-medium text-white/70 truncate", children: item.title }),
|
|
4173
|
+
/* @__PURE__ */ jsx22(StarRating, { rating: item.rating })
|
|
4174
|
+
] })
|
|
4175
|
+
]
|
|
4176
|
+
},
|
|
4177
|
+
item.ref_id
|
|
4178
|
+
);
|
|
4179
|
+
})
|
|
4180
|
+
] })
|
|
4181
|
+
] }),
|
|
4182
|
+
preview && /* @__PURE__ */ jsxs20("div", { className: "absolute inset-0 z-50 bg-black/90 flex items-center justify-center", onClick: () => setPreview(null), children: [
|
|
4183
|
+
/* @__PURE__ */ jsx22("img", { src: preview, alt: "", className: "max-w-full max-h-full object-contain" }),
|
|
4184
|
+
/* @__PURE__ */ jsx22("button", { className: "absolute top-3 right-3 text-white/60 hover:text-white", children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined text-[24px]", children: "close" }) })
|
|
4185
|
+
] })
|
|
4186
|
+
] });
|
|
4187
|
+
}
|
|
4188
|
+
|
|
3965
4189
|
// src/components/AvatarArchitectApp.tsx
|
|
3966
|
-
import { Fragment as Fragment9, jsx as
|
|
4190
|
+
import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
3967
4191
|
function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
|
|
3968
|
-
|
|
4192
|
+
useEffect7(() => {
|
|
3969
4193
|
const id = "flow-styles";
|
|
3970
4194
|
if (!document.getElementById(id)) {
|
|
3971
4195
|
const style = document.createElement("style");
|
|
@@ -3974,19 +4198,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3974
4198
|
document.head.appendChild(style);
|
|
3975
4199
|
}
|
|
3976
4200
|
}, []);
|
|
3977
|
-
const [showStart, setShowStart] =
|
|
3978
|
-
const [layoutChoice, setLayoutChoice] =
|
|
4201
|
+
const [showStart, setShowStart] = useState18(true);
|
|
4202
|
+
const [layoutChoice, setLayoutChoice] = useState18(() => {
|
|
3979
4203
|
try {
|
|
3980
4204
|
return localStorage.getItem("aa-layout") || null;
|
|
3981
4205
|
} catch {
|
|
3982
4206
|
return null;
|
|
3983
4207
|
}
|
|
3984
4208
|
});
|
|
3985
|
-
const [projectLoaded, setProjectLoaded] =
|
|
3986
|
-
const [hfToken, setHfToken] =
|
|
3987
|
-
const [hfTokenInput, setHfTokenInput] =
|
|
3988
|
-
const [isLoadingFromHF, setIsLoadingFromHF] =
|
|
3989
|
-
const [hfNamespaceLocal, setHfNamespaceLocal] =
|
|
4209
|
+
const [projectLoaded, setProjectLoaded] = useState18(false);
|
|
4210
|
+
const [hfToken, setHfToken] = useState18(initialHfToken || "");
|
|
4211
|
+
const [hfTokenInput, setHfTokenInput] = useState18(initialHfToken || "");
|
|
4212
|
+
const [isLoadingFromHF, setIsLoadingFromHF] = useState18(false);
|
|
4213
|
+
const [hfNamespaceLocal, setHfNamespaceLocal] = useState18(() => {
|
|
3990
4214
|
try {
|
|
3991
4215
|
const stored = localStorage.getItem("aa-hf-namespace");
|
|
3992
4216
|
if (stored !== null) return stored;
|
|
@@ -3995,8 +4219,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3995
4219
|
return "";
|
|
3996
4220
|
}
|
|
3997
4221
|
});
|
|
3998
|
-
const [hfNamespaceFromServer, setHfNamespaceFromServer] =
|
|
3999
|
-
|
|
4222
|
+
const [hfNamespaceFromServer, setHfNamespaceFromServer] = useState18(null);
|
|
4223
|
+
useEffect7(() => {
|
|
4000
4224
|
if (hfNamespace !== void 0) return;
|
|
4001
4225
|
const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
|
|
4002
4226
|
if (!backendUrl) return;
|
|
@@ -4018,35 +4242,35 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4018
4242
|
refresh: refreshHF,
|
|
4019
4243
|
hasStateZip
|
|
4020
4244
|
} = useHFState(hfToken, effectiveNamespace);
|
|
4021
|
-
const [imageUploadStatus, setImageUploadStatus] =
|
|
4022
|
-
const [bootstrapLog, setBootstrapLog] =
|
|
4023
|
-
const [isBootstrapping, setIsBootstrapping] =
|
|
4024
|
-
const syncTopSlot = /* @__PURE__ */
|
|
4025
|
-
localOnlyCount > 0 && /* @__PURE__ */
|
|
4245
|
+
const [imageUploadStatus, setImageUploadStatus] = useState18(/* @__PURE__ */ new Map());
|
|
4246
|
+
const [bootstrapLog, setBootstrapLog] = useState18([]);
|
|
4247
|
+
const [isBootstrapping, setIsBootstrapping] = useState18(false);
|
|
4248
|
+
const syncTopSlot = /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
4249
|
+
localOnlyCount > 0 && /* @__PURE__ */ jsxs21("div", { style: { background: "rgba(234,179,8,0.15)", border: "1px solid rgba(234,179,8,0.3)", padding: "4px 10px", fontSize: 11, color: "#fbbf24", borderRadius: 4, marginBottom: 4 }, children: [
|
|
4026
4250
|
"\u26A0 ",
|
|
4027
4251
|
localOnlyCount,
|
|
4028
4252
|
" lokale Event",
|
|
4029
4253
|
localOnlyCount > 1 ? "s" : "",
|
|
4030
4254
|
" noch nicht auf HF best\xE4tigt"
|
|
4031
4255
|
] }),
|
|
4032
|
-
pendingBufferCount > 0 && /* @__PURE__ */
|
|
4256
|
+
pendingBufferCount > 0 && /* @__PURE__ */ jsxs21("div", { style: { background: "linear-gradient(90deg,#f59e0b,#ef4444)", padding: "4px 10px", fontSize: 11, color: "#fff", borderRadius: 4, marginBottom: 4 }, children: [
|
|
4033
4257
|
pendingBufferCount,
|
|
4034
4258
|
" \xC4nderung",
|
|
4035
4259
|
pendingBufferCount > 1 ? "en" : "",
|
|
4036
4260
|
" lokal \u2014 bei Flow-Reload verloren wenn nicht synchronisiert"
|
|
4037
4261
|
] }),
|
|
4038
|
-
eventCount > 100 && /* @__PURE__ */
|
|
4262
|
+
eventCount > 100 && /* @__PURE__ */ jsxs21("div", { style: { background: "#dc2626", color: "#fff", padding: "5px 10px", borderRadius: 4, marginBottom: 4, fontWeight: 600, fontSize: 11 }, children: [
|
|
4039
4263
|
"\u26A0 ",
|
|
4040
4264
|
eventCount,
|
|
4041
4265
|
" Events nicht konsolidiert \u2014 Konsolidierung dringend empfohlen"
|
|
4042
4266
|
] }),
|
|
4043
|
-
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */
|
|
4267
|
+
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ jsxs21("div", { style: { background: "#44403c", color: "#a8a29e", padding: "4px 10px", borderRadius: 4, marginBottom: 4, fontSize: 11 }, children: [
|
|
4044
4268
|
eventCount,
|
|
4045
4269
|
" Events seit letzter Konsolidierung \u2014 Konsolidierung empfohlen"
|
|
4046
4270
|
] }),
|
|
4047
|
-
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */
|
|
4048
|
-
/* @__PURE__ */
|
|
4049
|
-
/* @__PURE__ */
|
|
4271
|
+
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ jsxs21("div", { style: { background: "#1c1917", border: "1px solid #44403c", borderRadius: 6, padding: "10px 12px" }, children: [
|
|
4272
|
+
/* @__PURE__ */ jsx23("div", { style: { fontSize: 12, color: "#a8a29e", marginBottom: 6 }, children: effectiveNamespace ? `Kein State-Snapshot in HF (${effectiveNamespace}) \u2014 aus Legacy-Daten (tags.json + metadata.json) migrieren?` : "Namespace wird geladen\u2026" }),
|
|
4273
|
+
/* @__PURE__ */ jsx23(
|
|
4050
4274
|
"button",
|
|
4051
4275
|
{
|
|
4052
4276
|
disabled: isBootstrapping || !effectiveNamespace,
|
|
@@ -4067,7 +4291,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4067
4291
|
children: isBootstrapping ? "Migriere\u2026" : "Legacy-Migration starten"
|
|
4068
4292
|
}
|
|
4069
4293
|
),
|
|
4070
|
-
bootstrapLog.length > 0 && /* @__PURE__ */
|
|
4294
|
+
bootstrapLog.length > 0 && /* @__PURE__ */ jsx23("div", { style: { marginTop: 6, fontFamily: "monospace", fontSize: 10, color: "#78716c", lineHeight: 1.6 }, children: bootstrapLog.map((l, i) => /* @__PURE__ */ jsx23("div", { children: l }, i)) })
|
|
4071
4295
|
] })
|
|
4072
4296
|
] });
|
|
4073
4297
|
const wsInputRef = useRef8(null);
|
|
@@ -4079,16 +4303,16 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4079
4303
|
setLayoutChoice(choice);
|
|
4080
4304
|
setShowStart(false);
|
|
4081
4305
|
};
|
|
4082
|
-
const [nodes, setNodes] =
|
|
4083
|
-
const [edges, setEdges] =
|
|
4084
|
-
const [history, setHistory] =
|
|
4085
|
-
const [galleryItems, setGalleryItems] =
|
|
4306
|
+
const [nodes, setNodes] = useState18([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
|
|
4307
|
+
const [edges, setEdges] = useState18([]);
|
|
4308
|
+
const [history, setHistory] = useState18([]);
|
|
4309
|
+
const [galleryItems, setGalleryItems] = useState18([]);
|
|
4086
4310
|
const galleryItemsRef = useRef8([]);
|
|
4087
|
-
|
|
4311
|
+
useEffect7(() => {
|
|
4088
4312
|
galleryItemsRef.current = galleryItems;
|
|
4089
4313
|
}, [galleryItems]);
|
|
4090
4314
|
const hfImageNotFoundRef = useRef8(/* @__PURE__ */ new Map());
|
|
4091
|
-
|
|
4315
|
+
useEffect7(() => {
|
|
4092
4316
|
if (!hfState) return;
|
|
4093
4317
|
if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
|
|
4094
4318
|
const hfIds = new Set(hfState.metadata.map((m) => m.id));
|
|
@@ -4130,59 +4354,59 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4130
4354
|
});
|
|
4131
4355
|
}
|
|
4132
4356
|
}, [hfState]);
|
|
4133
|
-
const [activePrompt, setActivePrompt] =
|
|
4134
|
-
const [isSynthesizing, setIsSynthesizing] =
|
|
4135
|
-
const [activeGenerationsCount, setActiveGenerationsCount] =
|
|
4136
|
-
const [currentResult, setCurrentResult] =
|
|
4137
|
-
const [focusedNodeId, setFocusedNodeId] =
|
|
4138
|
-
const [leftTab, setLeftTab] =
|
|
4139
|
-
const [promptFeedback, setPromptFeedback] =
|
|
4140
|
-
const [lastPromptPayload, setLastPromptPayload] =
|
|
4141
|
-
const [isPromptTabGenerating, setIsPromptTabGenerating] =
|
|
4142
|
-
const [activeTab, setActiveTab] =
|
|
4143
|
-
const [mobileTab, setMobileTab] =
|
|
4144
|
-
const [middlePanel, setMiddlePanel] =
|
|
4145
|
-
const [recentLabItems, setRecentLabItems] =
|
|
4146
|
-
const [aspectRatio, setAspectRatio] =
|
|
4147
|
-
const [selectedModel, setSelectedModel] =
|
|
4148
|
-
const [seed, setSeed] =
|
|
4149
|
-
const [seedMode, setSeedMode] =
|
|
4150
|
-
const [isLeftCollapsed, setIsLeftCollapsed] =
|
|
4151
|
-
const [isRightCollapsed, setIsRightCollapsed] =
|
|
4152
|
-
const [leftPanelWidth, setLeftPanelWidth] =
|
|
4357
|
+
const [activePrompt, setActivePrompt] = useState18("");
|
|
4358
|
+
const [isSynthesizing, setIsSynthesizing] = useState18(false);
|
|
4359
|
+
const [activeGenerationsCount, setActiveGenerationsCount] = useState18(0);
|
|
4360
|
+
const [currentResult, setCurrentResult] = useState18(null);
|
|
4361
|
+
const [focusedNodeId, setFocusedNodeId] = useState18(null);
|
|
4362
|
+
const [leftTab, setLeftTab] = useState18("prompt");
|
|
4363
|
+
const [promptFeedback, setPromptFeedback] = useState18(null);
|
|
4364
|
+
const [lastPromptPayload, setLastPromptPayload] = useState18(null);
|
|
4365
|
+
const [isPromptTabGenerating, setIsPromptTabGenerating] = useState18(false);
|
|
4366
|
+
const [activeTab, setActiveTab] = useState18("history");
|
|
4367
|
+
const [mobileTab, setMobileTab] = useState18("stage");
|
|
4368
|
+
const [middlePanel, setMiddlePanel] = useState18("stage");
|
|
4369
|
+
const [recentLabItems, setRecentLabItems] = useState18([]);
|
|
4370
|
+
const [aspectRatio, setAspectRatio] = useState18("1:1");
|
|
4371
|
+
const [selectedModel, setSelectedModel] = useState18("\u{1F34C} Nano Banana Pro");
|
|
4372
|
+
const [seed, setSeed] = useState18(Math.floor(Math.random() * 1e6));
|
|
4373
|
+
const [seedMode, setSeedMode] = useState18("random");
|
|
4374
|
+
const [isLeftCollapsed, setIsLeftCollapsed] = useState18(false);
|
|
4375
|
+
const [isRightCollapsed, setIsRightCollapsed] = useState18(false);
|
|
4376
|
+
const [leftPanelWidth, setLeftPanelWidth] = useState18(() => {
|
|
4153
4377
|
try {
|
|
4154
4378
|
return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
|
|
4155
4379
|
} catch {
|
|
4156
4380
|
return 260;
|
|
4157
4381
|
}
|
|
4158
4382
|
});
|
|
4159
|
-
const [rightPanelWidth, setRightPanelWidth] =
|
|
4383
|
+
const [rightPanelWidth, setRightPanelWidth] = useState18(() => {
|
|
4160
4384
|
try {
|
|
4161
4385
|
return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
|
|
4162
4386
|
} catch {
|
|
4163
4387
|
return 320;
|
|
4164
4388
|
}
|
|
4165
4389
|
});
|
|
4166
|
-
const [isPromptCollapsed, setIsPromptCollapsed] =
|
|
4167
|
-
const [projectActionState, setProjectActionState] =
|
|
4390
|
+
const [isPromptCollapsed, setIsPromptCollapsed] = useState18(false);
|
|
4391
|
+
const [projectActionState, setProjectActionState] = useState18("idle");
|
|
4168
4392
|
const syncServerDataRef = useRef8(null);
|
|
4169
|
-
const [workspaceTags, setWorkspaceTags] =
|
|
4170
|
-
const [serverProjects, setServerProjects] =
|
|
4171
|
-
const [isLoadingFromServer, setIsLoadingFromServer] =
|
|
4172
|
-
const [highContrast, setHighContrast] =
|
|
4393
|
+
const [workspaceTags, setWorkspaceTags] = useState18(null);
|
|
4394
|
+
const [serverProjects, setServerProjects] = useState18([]);
|
|
4395
|
+
const [isLoadingFromServer, setIsLoadingFromServer] = useState18(false);
|
|
4396
|
+
const [highContrast, setHighContrast] = useState18(() => {
|
|
4173
4397
|
try {
|
|
4174
4398
|
return localStorage.getItem("aa-contrast") === "high";
|
|
4175
4399
|
} catch {
|
|
4176
4400
|
return false;
|
|
4177
4401
|
}
|
|
4178
4402
|
});
|
|
4179
|
-
const [activeReferenceId, setActiveReferenceId] =
|
|
4180
|
-
const [activeReferenceThumbnail, setActiveReferenceThumbnail] =
|
|
4181
|
-
const [isScanningImage, setIsScanningImage] =
|
|
4182
|
-
const [touchStartX, setTouchStartX] =
|
|
4183
|
-
const [isFullscreen, setIsFullscreen] =
|
|
4184
|
-
const [zoomScale, setZoomScale] =
|
|
4185
|
-
const [zoomOffset, setZoomOffset] =
|
|
4403
|
+
const [activeReferenceId, setActiveReferenceId] = useState18(null);
|
|
4404
|
+
const [activeReferenceThumbnail, setActiveReferenceThumbnail] = useState18(null);
|
|
4405
|
+
const [isScanningImage, setIsScanningImage] = useState18(false);
|
|
4406
|
+
const [touchStartX, setTouchStartX] = useState18(null);
|
|
4407
|
+
const [isFullscreen, setIsFullscreen] = useState18(false);
|
|
4408
|
+
const [zoomScale, setZoomScale] = useState18(1);
|
|
4409
|
+
const [zoomOffset, setZoomOffset] = useState18({ x: 0, y: 0 });
|
|
4186
4410
|
const lastPinchDist = useRef8(null);
|
|
4187
4411
|
const lastTapTime = useRef8(0);
|
|
4188
4412
|
const dragStart = useRef8(null);
|
|
@@ -4694,7 +4918,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4694
4918
|
setTimeout(() => setProjectActionState("idle"), 4e3);
|
|
4695
4919
|
}
|
|
4696
4920
|
};
|
|
4697
|
-
|
|
4921
|
+
useEffect7(() => {
|
|
4698
4922
|
if (activeTab === "setup" || activeTab === "sync") fetchServerProjects();
|
|
4699
4923
|
}, [activeTab]);
|
|
4700
4924
|
const mergeWorkspaceTags = (local, remote) => {
|
|
@@ -4718,7 +4942,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4718
4942
|
};
|
|
4719
4943
|
if (isFullscreen && currentResult?.base64) {
|
|
4720
4944
|
const fsBase64 = currentResult.base64.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}`;
|
|
4721
|
-
return /* @__PURE__ */
|
|
4945
|
+
return /* @__PURE__ */ jsxs21(
|
|
4722
4946
|
"div",
|
|
4723
4947
|
{
|
|
4724
4948
|
className: "fixed inset-0 bg-black z-50 flex items-center justify-center overflow-hidden touch-none",
|
|
@@ -4726,7 +4950,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4726
4950
|
onTouchMove: handleFsTouchMove,
|
|
4727
4951
|
onTouchEnd: handleFsTouchEnd,
|
|
4728
4952
|
children: [
|
|
4729
|
-
/* @__PURE__ */
|
|
4953
|
+
/* @__PURE__ */ jsx23(
|
|
4730
4954
|
"img",
|
|
4731
4955
|
{
|
|
4732
4956
|
src: fsBase64,
|
|
@@ -4743,77 +4967,77 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4743
4967
|
}
|
|
4744
4968
|
}
|
|
4745
4969
|
),
|
|
4746
|
-
/* @__PURE__ */
|
|
4747
|
-
zoomScale > 1 && /* @__PURE__ */
|
|
4970
|
+
/* @__PURE__ */ jsx23("button", { onClick: closeFullscreen, className: "absolute top-4 right-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", children: "close" }) }),
|
|
4971
|
+
zoomScale > 1 && /* @__PURE__ */ jsx23("button", { onClick: () => {
|
|
4748
4972
|
setZoomScale(1);
|
|
4749
4973
|
setZoomOffset({ x: 0, y: 0 });
|
|
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__ */
|
|
4751
|
-
history.length > 1 && /* @__PURE__ */
|
|
4752
|
-
/* @__PURE__ */
|
|
4974
|
+
}, className: "absolute top-4 left-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "zoom_out_map" }) }),
|
|
4975
|
+
history.length > 1 && /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
4976
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => {
|
|
4753
4977
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
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__ */
|
|
4755
|
-
/* @__PURE__ */
|
|
4978
|
+
}, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
4979
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => {
|
|
4756
4980
|
if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
|
|
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__ */
|
|
4758
|
-
/* @__PURE__ */
|
|
4981
|
+
}, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
4982
|
+
/* @__PURE__ */ jsxs21("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
|
|
4759
4983
|
currentIndex + 1,
|
|
4760
4984
|
" / ",
|
|
4761
4985
|
history.length
|
|
4762
4986
|
] })
|
|
4763
4987
|
] }),
|
|
4764
|
-
zoomScale === 1 && /* @__PURE__ */
|
|
4988
|
+
zoomScale === 1 && /* @__PURE__ */ jsx23("div", { className: "absolute bottom-6 right-4 text-[9px] text-white/20 font-mono", children: "Pinch zum Zoomen \xB7 Doppeltipp 2.5\xD7" })
|
|
4765
4989
|
]
|
|
4766
4990
|
}
|
|
4767
4991
|
);
|
|
4768
4992
|
}
|
|
4769
4993
|
if (showStart) {
|
|
4770
|
-
return /* @__PURE__ */
|
|
4771
|
-
/* @__PURE__ */
|
|
4994
|
+
return /* @__PURE__ */ jsxs21("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
|
|
4995
|
+
/* @__PURE__ */ jsx23("input", { ref: wsInputRef, type: "file", accept: ".zip", className: "hidden", onChange: (e) => {
|
|
4772
4996
|
const f = e.target.files?.[0];
|
|
4773
4997
|
if (f) handleProjectImport(f);
|
|
4774
4998
|
e.target.value = "";
|
|
4775
4999
|
} }),
|
|
4776
|
-
/* @__PURE__ */
|
|
4777
|
-
/* @__PURE__ */
|
|
4778
|
-
/* @__PURE__ */
|
|
4779
|
-
/* @__PURE__ */
|
|
5000
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-1", children: [
|
|
5001
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
|
|
5002
|
+
/* @__PURE__ */ jsx23("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" }),
|
|
5003
|
+
/* @__PURE__ */ jsxs21("span", { className: "text-white text-[13px] font-mono", children: [
|
|
4780
5004
|
"v",
|
|
4781
5005
|
LIB_VERSION
|
|
4782
5006
|
] })
|
|
4783
5007
|
] }),
|
|
4784
|
-
/* @__PURE__ */
|
|
5008
|
+
/* @__PURE__ */ jsxs21(
|
|
4785
5009
|
"button",
|
|
4786
5010
|
{
|
|
4787
5011
|
onClick: toggleContrast,
|
|
4788
5012
|
className: "flex items-center gap-3 px-5 py-3 rounded-2xl border transition-colors",
|
|
4789
5013
|
style: { borderColor: highContrast ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.08)", background: highContrast ? "rgba(255,255,255,0.08)" : "transparent" },
|
|
4790
5014
|
children: [
|
|
4791
|
-
/* @__PURE__ */
|
|
4792
|
-
/* @__PURE__ */
|
|
4793
|
-
/* @__PURE__ */
|
|
4794
|
-
/* @__PURE__ */
|
|
5015
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.35)" }, children: highContrast ? "light_mode" : "dark_mode" }),
|
|
5016
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-start", children: [
|
|
5017
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[13px] font-bold", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.5)" }, children: highContrast ? "Hoher Kontrast" : "Normaler Kontrast" }),
|
|
5018
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px]", style: { color: "rgba(255,255,255,0.25)" }, children: "Tippen zum Umschalten" })
|
|
4795
5019
|
] })
|
|
4796
5020
|
]
|
|
4797
5021
|
}
|
|
4798
5022
|
),
|
|
4799
|
-
/* @__PURE__ */
|
|
4800
|
-
/* @__PURE__ */
|
|
5023
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5024
|
+
/* @__PURE__ */ jsxs21(
|
|
4801
5025
|
"button",
|
|
4802
5026
|
{
|
|
4803
5027
|
onClick: () => wsInputRef.current?.click(),
|
|
4804
5028
|
className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform",
|
|
4805
5029
|
style: { height: 56, background: projectLoaded ? "#16a34a" : "#0284c7" },
|
|
4806
5030
|
children: [
|
|
4807
|
-
/* @__PURE__ */
|
|
5031
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", children: projectLoaded ? "check_circle" : "folder_zip" }),
|
|
4808
5032
|
projectLoaded ? "Projekt geladen \u2713" : "Projekt laden (.zip)"
|
|
4809
5033
|
]
|
|
4810
5034
|
}
|
|
4811
5035
|
),
|
|
4812
|
-
!projectLoaded && /* @__PURE__ */
|
|
5036
|
+
!projectLoaded && /* @__PURE__ */ jsx23("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
|
|
4813
5037
|
] }),
|
|
4814
|
-
/* @__PURE__ */
|
|
4815
|
-
!initialHfToken && /* @__PURE__ */
|
|
4816
|
-
/* @__PURE__ */
|
|
5038
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5039
|
+
!initialHfToken && /* @__PURE__ */ jsxs21("div", { className: "flex gap-2 w-full", children: [
|
|
5040
|
+
/* @__PURE__ */ jsx23(
|
|
4817
5041
|
"input",
|
|
4818
5042
|
{
|
|
4819
5043
|
type: "password",
|
|
@@ -4829,7 +5053,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4829
5053
|
style: { height: 44, background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.7)" }
|
|
4830
5054
|
}
|
|
4831
5055
|
),
|
|
4832
|
-
hfTokenInput.trim() && /* @__PURE__ */
|
|
5056
|
+
hfTokenInput.trim() && /* @__PURE__ */ jsx23(
|
|
4833
5057
|
"button",
|
|
4834
5058
|
{
|
|
4835
5059
|
type: "button",
|
|
@@ -4840,9 +5064,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4840
5064
|
}
|
|
4841
5065
|
)
|
|
4842
5066
|
] }),
|
|
4843
|
-
!hfNamespace && /* @__PURE__ */
|
|
4844
|
-
/* @__PURE__ */
|
|
4845
|
-
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */
|
|
5067
|
+
!hfNamespace && /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3 w-full", children: [
|
|
5068
|
+
/* @__PURE__ */ jsx23("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold flex-shrink-0", children: "State:" }),
|
|
5069
|
+
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ jsx23(
|
|
4846
5070
|
"button",
|
|
4847
5071
|
{
|
|
4848
5072
|
onClick: () => {
|
|
@@ -4862,7 +5086,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4862
5086
|
ns
|
|
4863
5087
|
))
|
|
4864
5088
|
] }),
|
|
4865
|
-
hfToken && /* @__PURE__ */
|
|
5089
|
+
hfToken && /* @__PURE__ */ jsxs21(
|
|
4866
5090
|
"button",
|
|
4867
5091
|
{
|
|
4868
5092
|
disabled: isLoadingFromHF,
|
|
@@ -4884,15 +5108,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4884
5108
|
className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform disabled:opacity-50",
|
|
4885
5109
|
style: { height: 56, background: "#f59e0b" },
|
|
4886
5110
|
children: [
|
|
4887
|
-
/* @__PURE__ */
|
|
5111
|
+
/* @__PURE__ */ jsx23("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromHF ? " animate-spin" : ""}`, children: isLoadingFromHF ? "sync" : "cloud_download" }),
|
|
4888
5112
|
isLoadingFromHF ? "Laden\u2026" : "Von HF laden"
|
|
4889
5113
|
]
|
|
4890
5114
|
}
|
|
4891
5115
|
),
|
|
4892
|
-
hfToken && /* @__PURE__ */
|
|
5116
|
+
hfToken && /* @__PURE__ */ jsx23("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand von Hugging Face laden" })
|
|
4893
5117
|
] }),
|
|
4894
|
-
onFetchServerProjects && /* @__PURE__ */
|
|
4895
|
-
/* @__PURE__ */
|
|
5118
|
+
onFetchServerProjects && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5119
|
+
/* @__PURE__ */ jsxs21(
|
|
4896
5120
|
"button",
|
|
4897
5121
|
{
|
|
4898
5122
|
disabled: isLoadingFromServer,
|
|
@@ -4913,35 +5137,35 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4913
5137
|
className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform disabled:opacity-50",
|
|
4914
5138
|
style: { height: 56, background: "#7c3aed" },
|
|
4915
5139
|
children: [
|
|
4916
|
-
/* @__PURE__ */
|
|
5140
|
+
/* @__PURE__ */ jsx23("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromServer ? " animate-spin" : ""}`, children: isLoadingFromServer ? "sync" : "cloud_download" }),
|
|
4917
5141
|
isLoadingFromServer ? "Laden\u2026" : "Vom Server laden"
|
|
4918
5142
|
]
|
|
4919
5143
|
}
|
|
4920
5144
|
),
|
|
4921
|
-
/* @__PURE__ */
|
|
5145
|
+
/* @__PURE__ */ jsx23("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand vom Server wiederherstellen" })
|
|
4922
5146
|
] }),
|
|
4923
|
-
/* @__PURE__ */
|
|
4924
|
-
/* @__PURE__ */
|
|
4925
|
-
/* @__PURE__ */
|
|
5147
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5148
|
+
/* @__PURE__ */ jsx23("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
|
|
5149
|
+
/* @__PURE__ */ jsx23("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
|
|
4926
5150
|
{ id: "mobile", icon: "smartphone", label: "Mobile" },
|
|
4927
5151
|
{ id: "mobile-desktop", icon: "phonelink", label: "Mobile+" },
|
|
4928
5152
|
{ id: "desktop", icon: "desktop_windows", label: "Desktop" },
|
|
4929
5153
|
{ id: "tablet-landscape", icon: "tablet", label: "Landscape" }
|
|
4930
|
-
].map((opt) => /* @__PURE__ */
|
|
5154
|
+
].map((opt) => /* @__PURE__ */ jsxs21(
|
|
4931
5155
|
"button",
|
|
4932
5156
|
{
|
|
4933
5157
|
onClick: () => startApp(opt.id),
|
|
4934
5158
|
className: "flex flex-col items-center gap-2 py-4 rounded-2xl border transition-colors",
|
|
4935
5159
|
style: { borderColor: layoutChoice === opt.id ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.08)", background: layoutChoice === opt.id ? "rgba(255,255,255,0.07)" : "transparent" },
|
|
4936
5160
|
children: [
|
|
4937
|
-
/* @__PURE__ */
|
|
4938
|
-
/* @__PURE__ */
|
|
5161
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[24px]", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.icon }),
|
|
5162
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[11px] font-bold", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.label })
|
|
4939
5163
|
]
|
|
4940
5164
|
},
|
|
4941
5165
|
opt.id
|
|
4942
5166
|
)) }),
|
|
4943
|
-
layoutChoice === "mobile-desktop" && /* @__PURE__ */
|
|
4944
|
-
layoutChoice === "tablet-landscape" && /* @__PURE__ */
|
|
5167
|
+
layoutChoice === "mobile-desktop" && /* @__PURE__ */ jsx23("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
|
|
5168
|
+
layoutChoice === "tablet-landscape" && /* @__PURE__ */ jsx23("span", { className: "text-white/20 text-[9px] text-center", children: "2-Spalten-Layout f\xFCr Landscape-Tablet im Desktop-Mode" })
|
|
4945
5169
|
] })
|
|
4946
5170
|
] });
|
|
4947
5171
|
}
|
|
@@ -4950,21 +5174,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4950
5174
|
const mdScale = mdMode ? window.innerWidth / 430 : 1;
|
|
4951
5175
|
const mdW = mdMode ? 430 : void 0;
|
|
4952
5176
|
const mdH = mdMode ? Math.ceil(window.innerHeight / mdScale) : void 0;
|
|
4953
|
-
const mobileRoot = /* @__PURE__ */
|
|
5177
|
+
const mobileRoot = /* @__PURE__ */ jsxs21("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
|
|
4954
5178
|
width: mdMode ? mdW : "100vw",
|
|
4955
5179
|
height: mdMode ? mdH : "100dvh",
|
|
4956
5180
|
transform: mdMode ? `scale(${mdScale})` : void 0,
|
|
4957
5181
|
transformOrigin: mdMode ? "top left" : void 0,
|
|
4958
5182
|
...hcStyle || {}
|
|
4959
5183
|
}, children: [
|
|
4960
|
-
mobileTab === "labs" && /* @__PURE__ */
|
|
5184
|
+
mobileTab === "labs" && /* @__PURE__ */ jsx23("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx23(LabsTab, { services: labServices, onResult: (item) => {
|
|
4961
5185
|
const frame = item.frames[0];
|
|
4962
5186
|
if (frame?.base64) {
|
|
4963
5187
|
setCurrentResult(frameToGeneration(frame, item));
|
|
4964
5188
|
setMobileTab("stage");
|
|
4965
5189
|
}
|
|
4966
5190
|
} }) }),
|
|
4967
|
-
mobileTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5191
|
+
mobileTab === "tags" && workspaceTags && /* @__PURE__ */ jsx23("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx23(
|
|
4968
5192
|
TagManagerPanel,
|
|
4969
5193
|
{
|
|
4970
5194
|
workspaceTags,
|
|
@@ -4975,21 +5199,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4975
5199
|
onTagMove: handleTagMove
|
|
4976
5200
|
}
|
|
4977
5201
|
) }),
|
|
4978
|
-
mobileTab === "stage" && /* @__PURE__ */
|
|
4979
|
-
/* @__PURE__ */
|
|
4980
|
-
/* @__PURE__ */
|
|
4981
|
-
/* @__PURE__ */
|
|
4982
|
-
/* @__PURE__ */
|
|
4983
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
4984
|
-
/* @__PURE__ */
|
|
4985
|
-
/* @__PURE__ */
|
|
4986
|
-
/* @__PURE__ */
|
|
4987
|
-
] }) : /* @__PURE__ */
|
|
4988
|
-
/* @__PURE__ */
|
|
4989
|
-
/* @__PURE__ */
|
|
5202
|
+
mobileTab === "stage" && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
5203
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
|
|
5204
|
+
/* @__PURE__ */ jsx23(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5205
|
+
/* @__PURE__ */ jsx23(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
|
|
5206
|
+
/* @__PURE__ */ jsx23("div", { className: "flex-1" }),
|
|
5207
|
+
activeReferenceThumbnail ? /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden mr-2", style: { height: 28 }, children: [
|
|
5208
|
+
/* @__PURE__ */ jsx23("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
5209
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
5210
|
+
/* @__PURE__ */ jsx23("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 active:text-white/80 transition-colors", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5211
|
+
] }) : /* @__PURE__ */ jsx23("button", { onClick: handleSelectReference, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "add_photo_alternate" }) }),
|
|
5212
|
+
/* @__PURE__ */ jsx23("button", { onClick: toggleContrast, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
5213
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => setShowStart(true), className: "text-white/20 active:text-white/60 transition-colors mr-1", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "desktop_windows" }) })
|
|
4990
5214
|
] }),
|
|
4991
|
-
/* @__PURE__ */
|
|
4992
|
-
/* @__PURE__ */
|
|
5215
|
+
/* @__PURE__ */ jsx23("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ jsxs21("div", { className: `relative rounded-xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
5216
|
+
/* @__PURE__ */ jsx23(
|
|
4993
5217
|
"textarea",
|
|
4994
5218
|
{
|
|
4995
5219
|
value: activePrompt,
|
|
@@ -4999,26 +5223,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4999
5223
|
placeholder: "Prompt eingeben..."
|
|
5000
5224
|
}
|
|
5001
5225
|
),
|
|
5002
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
5226
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ jsx23("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center text-white/20 active:text-white transition-colors", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
|
|
5003
5227
|
] }) }),
|
|
5004
|
-
/* @__PURE__ */
|
|
5228
|
+
/* @__PURE__ */ jsx23("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ jsx23(
|
|
5005
5229
|
"button",
|
|
5006
5230
|
{
|
|
5007
5231
|
onClick: () => handleGenerateImage(),
|
|
5008
5232
|
disabled: !activePrompt.trim() || isGenerating,
|
|
5009
5233
|
className: "w-full flex items-center justify-center gap-2 rounded-xl font-bold text-[14px] uppercase tracking-wide transition-all disabled:opacity-30 active:scale-95",
|
|
5010
5234
|
style: { height: 48, background: activePrompt.trim() && !isGenerating ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
|
|
5011
|
-
children: isGenerating ? /* @__PURE__ */
|
|
5012
|
-
/* @__PURE__ */
|
|
5013
|
-
/* @__PURE__ */
|
|
5014
|
-
] }) : /* @__PURE__ */
|
|
5015
|
-
/* @__PURE__ */
|
|
5016
|
-
/* @__PURE__ */
|
|
5235
|
+
children: isGenerating ? /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
5236
|
+
/* @__PURE__ */ jsx23("div", { className: "w-4 h-4 border-t-2 border-white rounded-full animate-spin" }),
|
|
5237
|
+
/* @__PURE__ */ jsx23("span", { children: "Generiere..." })
|
|
5238
|
+
] }) : /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
5239
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
|
|
5240
|
+
/* @__PURE__ */ jsx23("span", { children: "Generieren" })
|
|
5017
5241
|
] })
|
|
5018
5242
|
}
|
|
5019
5243
|
) }),
|
|
5020
|
-
/* @__PURE__ */
|
|
5021
|
-
/* @__PURE__ */
|
|
5244
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
|
|
5245
|
+
/* @__PURE__ */ jsxs21(
|
|
5022
5246
|
"div",
|
|
5023
5247
|
{
|
|
5024
5248
|
className: "w-full rounded-2xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center",
|
|
@@ -5032,25 +5256,25 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5032
5256
|
setTouchStartX(null);
|
|
5033
5257
|
},
|
|
5034
5258
|
children: [
|
|
5035
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
5036
|
-
/* @__PURE__ */
|
|
5037
|
-
/* @__PURE__ */
|
|
5259
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-3", children: [
|
|
5260
|
+
/* @__PURE__ */ jsx23("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
|
|
5261
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[11px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
5038
5262
|
] }),
|
|
5039
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
5040
|
-
/* @__PURE__ */
|
|
5041
|
-
/* @__PURE__ */
|
|
5042
|
-
/* @__PURE__ */
|
|
5263
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs21("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
|
|
5264
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
|
|
5265
|
+
/* @__PURE__ */ jsx23("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
|
|
5266
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => handleGenerateImage(currentResult.prompt), className: "px-4 py-2 rounded-lg border border-white/20 text-[13px] text-white/70 active:bg-white/10", children: "Erneut versuchen" })
|
|
5043
5267
|
] }),
|
|
5044
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
5045
|
-
!currentResult && /* @__PURE__ */
|
|
5046
|
-
/* @__PURE__ */
|
|
5047
|
-
/* @__PURE__ */
|
|
5268
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx23("img", { src: currentResult.base64, className: "w-full h-full object-contain" }),
|
|
5269
|
+
!currentResult && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
5270
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
|
|
5271
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
5048
5272
|
] }),
|
|
5049
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5050
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
5051
|
-
/* @__PURE__ */
|
|
5052
|
-
/* @__PURE__ */
|
|
5053
|
-
/* @__PURE__ */
|
|
5273
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsx23("button", { onClick: openFullscreen, className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center rounded-full bg-black/60 border border-white/10 z-10", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[18px]", children: "fullscreen" }) }),
|
|
5274
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
5275
|
+
/* @__PURE__ */ jsx23("button", { onClick: goToPrev, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
5276
|
+
/* @__PURE__ */ jsx23("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
5277
|
+
/* @__PURE__ */ jsxs21("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
|
|
5054
5278
|
currentIndex + 1,
|
|
5055
5279
|
" / ",
|
|
5056
5280
|
history.length
|
|
@@ -5059,33 +5283,33 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5059
5283
|
]
|
|
5060
5284
|
}
|
|
5061
5285
|
),
|
|
5062
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5063
|
-
/* @__PURE__ */
|
|
5064
|
-
/* @__PURE__ */
|
|
5065
|
-
/* @__PURE__ */
|
|
5286
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs21("div", { className: "flex gap-2 mt-3", children: [
|
|
5287
|
+
/* @__PURE__ */ jsxs21("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
|
|
5288
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
|
|
5289
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[12px] text-white/60", children: "Prompt" })
|
|
5066
5290
|
] }),
|
|
5067
|
-
/* @__PURE__ */
|
|
5068
|
-
/* @__PURE__ */
|
|
5069
|
-
/* @__PURE__ */
|
|
5291
|
+
/* @__PURE__ */ jsxs21("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl bg-white/10 active:bg-white/15 transition-colors", style: { height: 44 }, children: [
|
|
5292
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
|
|
5293
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
|
|
5070
5294
|
] }),
|
|
5071
|
-
/* @__PURE__ */
|
|
5072
|
-
/* @__PURE__ */
|
|
5073
|
-
/* @__PURE__ */
|
|
5295
|
+
/* @__PURE__ */ jsxs21("button", { onClick: handleDownloadSingle, className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
|
|
5296
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "download" }),
|
|
5297
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[12px] text-white/60", children: "Laden" })
|
|
5074
5298
|
] })
|
|
5075
5299
|
] })
|
|
5076
5300
|
] })
|
|
5077
5301
|
] }),
|
|
5078
|
-
mobileTab === "browse" && /* @__PURE__ */
|
|
5079
|
-
/* @__PURE__ */
|
|
5080
|
-
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */
|
|
5081
|
-
hfToken && /* @__PURE__ */
|
|
5302
|
+
mobileTab === "browse" && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
5303
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
5304
|
+
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ jsx23("button", { onClick: () => setActiveTab(tab), className: `flex-1 flex items-center justify-center gap-1.5 transition-colors text-[11px] font-bold uppercase tracking-wide ${activeTab === tab ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : "info" }) }, tab)),
|
|
5305
|
+
hfToken && /* @__PURE__ */ jsx23("button", { onClick: () => refreshHF(), disabled: isHfRefreshing, className: "w-12 flex items-center justify-center text-white/20 active:text-white transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx23("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
|
|
5082
5306
|
] }),
|
|
5083
|
-
/* @__PURE__ */
|
|
5084
|
-
activeTab === "history" && /* @__PURE__ */
|
|
5307
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5308
|
+
activeTab === "history" && /* @__PURE__ */ jsx23(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: (g) => {
|
|
5085
5309
|
setCurrentResult(g);
|
|
5086
5310
|
setMobileTab("stage");
|
|
5087
5311
|
}, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
|
|
5088
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
5312
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx23(
|
|
5089
5313
|
MediaLibrary,
|
|
5090
5314
|
{
|
|
5091
5315
|
items: galleryItems,
|
|
@@ -5105,43 +5329,44 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5105
5329
|
}
|
|
5106
5330
|
}
|
|
5107
5331
|
),
|
|
5108
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
5332
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx23(InspectPanel, { currentResult, history, onSelect: (g) => {
|
|
5109
5333
|
setCurrentResult(g);
|
|
5110
5334
|
} })
|
|
5111
5335
|
] })
|
|
5112
5336
|
] }),
|
|
5113
|
-
/* @__PURE__ */
|
|
5114
|
-
/* @__PURE__ */
|
|
5115
|
-
workspaceTags && /* @__PURE__ */
|
|
5337
|
+
/* @__PURE__ */ jsxs21("div", { style: { display: mobileTab === "tools" ? "flex" : "none" }, className: "flex flex-col flex-1 min-h-0", children: [
|
|
5338
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
5339
|
+
workspaceTags && /* @__PURE__ */ jsxs21("button", { onClick: () => {
|
|
5116
5340
|
setLeftTab("prompt");
|
|
5117
5341
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
5118
5342
|
}, className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
5119
|
-
/* @__PURE__ */
|
|
5343
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
|
|
5120
5344
|
"Prompt"
|
|
5121
5345
|
] }),
|
|
5122
|
-
/* @__PURE__ */
|
|
5346
|
+
/* @__PURE__ */ jsxs21("button", { onClick: () => {
|
|
5123
5347
|
setLeftTab("hierarchy");
|
|
5124
5348
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
5125
5349
|
}, className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
5126
|
-
/* @__PURE__ */
|
|
5350
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
|
|
5127
5351
|
"Hierarchie"
|
|
5128
5352
|
] }),
|
|
5129
|
-
/* @__PURE__ */
|
|
5130
|
-
/* @__PURE__ */
|
|
5353
|
+
/* @__PURE__ */ jsxs21("button", { onClick: () => setActiveTab("setup"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "setup" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
5354
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "settings" }),
|
|
5131
5355
|
"Setup"
|
|
5132
5356
|
] }),
|
|
5133
|
-
/* @__PURE__ */
|
|
5134
|
-
/* @__PURE__ */
|
|
5357
|
+
/* @__PURE__ */ jsxs21("button", { onClick: () => setActiveTab("sync"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
5358
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "cloud_sync" }),
|
|
5135
5359
|
"Sync"
|
|
5136
5360
|
] }),
|
|
5137
|
-
/* @__PURE__ */
|
|
5138
|
-
/* @__PURE__ */
|
|
5361
|
+
/* @__PURE__ */ jsxs21("button", { onClick: () => setActiveTab("hftest"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "hftest" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
5362
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "biotech" }),
|
|
5139
5363
|
"HF"
|
|
5140
5364
|
] }),
|
|
5141
|
-
|
|
5365
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => setActiveTab("server"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "server" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) }),
|
|
5366
|
+
workspaceTags && /* @__PURE__ */ jsx23("button", { onClick: () => setActiveTab("tags"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "tags" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
5142
5367
|
] }),
|
|
5143
|
-
/* @__PURE__ */
|
|
5144
|
-
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */
|
|
5368
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5369
|
+
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx23(
|
|
5145
5370
|
ListView,
|
|
5146
5371
|
{
|
|
5147
5372
|
nodes,
|
|
@@ -5172,12 +5397,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5172
5397
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
5173
5398
|
}
|
|
5174
5399
|
) }),
|
|
5175
|
-
workspaceTags && /* @__PURE__ */
|
|
5400
|
+
workspaceTags && /* @__PURE__ */ jsx23("div", { style: { display: leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" ? "flex" : "none" }, className: "absolute inset-0 flex-col", children: /* @__PURE__ */ jsx23(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => {
|
|
5176
5401
|
handleGenerateImage(prompt);
|
|
5177
5402
|
setMobileTab("stage");
|
|
5178
5403
|
}, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
|
|
5179
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
5180
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
5404
|
+
activeTab === "setup" && /* @__PURE__ */ jsx23(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
5405
|
+
activeTab === "sync" && /* @__PURE__ */ jsx23(
|
|
5181
5406
|
ProjectSyncTab,
|
|
5182
5407
|
{
|
|
5183
5408
|
topSlot: syncTopSlot,
|
|
@@ -5201,7 +5426,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5201
5426
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
5202
5427
|
}
|
|
5203
5428
|
),
|
|
5204
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5429
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx23(
|
|
5205
5430
|
TagManagerPanel,
|
|
5206
5431
|
{
|
|
5207
5432
|
workspaceTags,
|
|
@@ -5212,7 +5437,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5212
5437
|
onTagMove: handleTagMove
|
|
5213
5438
|
}
|
|
5214
5439
|
),
|
|
5215
|
-
activeTab === "hftest" && /* @__PURE__ */
|
|
5440
|
+
activeTab === "hftest" && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx23(
|
|
5216
5441
|
HFTestTab,
|
|
5217
5442
|
{
|
|
5218
5443
|
token: hfToken,
|
|
@@ -5222,22 +5447,23 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5222
5447
|
confirmedEventKeys: hfConfirmedKeys,
|
|
5223
5448
|
imageUploadStatus
|
|
5224
5449
|
}
|
|
5225
|
-
) })
|
|
5450
|
+
) }),
|
|
5451
|
+
activeTab === "server" && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx23(ServerTab, {}) })
|
|
5226
5452
|
] })
|
|
5227
5453
|
] }),
|
|
5228
|
-
/* @__PURE__ */
|
|
5454
|
+
/* @__PURE__ */ jsx23("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
|
|
5229
5455
|
{ id: "tools", icon: "auto_fix_high", label: "Prompt" },
|
|
5230
5456
|
{ id: "stage", icon: "palette", label: "Stage" },
|
|
5231
5457
|
{ id: "labs", icon: "science", label: "Labs" },
|
|
5232
5458
|
...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
|
|
5233
5459
|
{ id: "browse", icon: "photo_library", label: "Galerie" }
|
|
5234
|
-
].map((tab) => /* @__PURE__ */
|
|
5235
|
-
/* @__PURE__ */
|
|
5236
|
-
/* @__PURE__ */
|
|
5460
|
+
].map((tab) => /* @__PURE__ */ jsxs21("button", { onClick: () => setMobileTab(tab.id), className: `flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors ${mobileTab === tab.id ? "text-white" : "text-white/30"}`, children: [
|
|
5461
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
|
|
5462
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
|
|
5237
5463
|
] }, tab.id)) })
|
|
5238
5464
|
] });
|
|
5239
5465
|
if (mdMode) {
|
|
5240
|
-
return /* @__PURE__ */
|
|
5466
|
+
return /* @__PURE__ */ jsx23("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
|
|
5241
5467
|
}
|
|
5242
5468
|
return mobileRoot;
|
|
5243
5469
|
}
|
|
@@ -5245,17 +5471,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5245
5471
|
const tlScale = Math.min(window.innerWidth / 920, window.innerHeight / 520);
|
|
5246
5472
|
const tlW = 920;
|
|
5247
5473
|
const tlH = 520;
|
|
5248
|
-
return /* @__PURE__ */
|
|
5249
|
-
/* @__PURE__ */
|
|
5250
|
-
/* @__PURE__ */
|
|
5251
|
-
/* @__PURE__ */
|
|
5252
|
-
/* @__PURE__ */
|
|
5253
|
-
/* @__PURE__ */
|
|
5254
|
-
/* @__PURE__ */
|
|
5255
|
-
/* @__PURE__ */
|
|
5474
|
+
return /* @__PURE__ */ jsx23("div", { style: { position: "fixed", inset: 0, background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", ...hcStyle || {} }, children: /* @__PURE__ */ jsxs21("div", { style: { width: tlW, height: tlH, transform: `scale(${tlScale})`, transformOrigin: "center center", display: "flex", flexDirection: "row", color: "#fff", overflow: "hidden", borderRadius: 0 }, children: [
|
|
5475
|
+
/* @__PURE__ */ jsxs21("div", { style: { width: 320, height: tlH, display: "flex", flexDirection: "column", borderRight: "1px solid rgba(255,255,255,0.05)", background: "#000", flexShrink: 0 }, children: [
|
|
5476
|
+
/* @__PURE__ */ jsxs21("div", { style: { height: 52, borderBottom: "1px solid rgba(255,255,255,0.05)", display: "flex", alignItems: "center", gap: 8, padding: "0 12px", flexShrink: 0 }, children: [
|
|
5477
|
+
/* @__PURE__ */ jsx23(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5478
|
+
/* @__PURE__ */ jsx23(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
|
|
5479
|
+
/* @__PURE__ */ jsx23("div", { style: { flex: 1 } }),
|
|
5480
|
+
/* @__PURE__ */ jsx23("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
5481
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
|
|
5256
5482
|
] }),
|
|
5257
|
-
/* @__PURE__ */
|
|
5258
|
-
/* @__PURE__ */
|
|
5483
|
+
/* @__PURE__ */ jsx23("div", { style: { padding: "12px 12px 8px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs21("div", { style: { position: "relative", borderRadius: 12, border: `1px solid ${isSynthesizing ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.1)"}`, background: "rgba(255,255,255,0.05)" }, children: [
|
|
5484
|
+
/* @__PURE__ */ jsx23(
|
|
5259
5485
|
"textarea",
|
|
5260
5486
|
{
|
|
5261
5487
|
value: activePrompt,
|
|
@@ -5264,27 +5490,27 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5264
5490
|
placeholder: "Prompt eingeben..."
|
|
5265
5491
|
}
|
|
5266
5492
|
),
|
|
5267
|
-
activePrompt && /* @__PURE__ */
|
|
5493
|
+
activePrompt && /* @__PURE__ */ jsx23("button", { onClick: () => setActivePrompt(""), style: { position: "absolute", top: 6, right: 6, width: 22, height: 22, display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 0 }, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
|
|
5268
5494
|
] }) }),
|
|
5269
|
-
/* @__PURE__ */
|
|
5495
|
+
/* @__PURE__ */ jsx23("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ jsx23(
|
|
5270
5496
|
"button",
|
|
5271
5497
|
{
|
|
5272
5498
|
onClick: () => handleGenerateImage(),
|
|
5273
5499
|
disabled: !activePrompt.trim() || isGenerating,
|
|
5274
5500
|
style: { width: "100%", height: 42, display: "flex", alignItems: "center", justifyContent: "center", gap: 8, borderRadius: 10, fontWeight: "bold", fontSize: 13, textTransform: "uppercase", letterSpacing: "0.05em", border: "1px solid rgba(255,255,255,0.1)", background: activePrompt.trim() && !isGenerating ? "#0284c7" : "transparent", color: "#fff", cursor: activePrompt.trim() && !isGenerating ? "pointer" : "default", opacity: !activePrompt.trim() || isGenerating ? 0.3 : 1, fontFamily: "inherit", transition: "background 0.2s" },
|
|
5275
|
-
children: isGenerating ? /* @__PURE__ */
|
|
5276
|
-
/* @__PURE__ */
|
|
5277
|
-
/* @__PURE__ */
|
|
5278
|
-
] }) : /* @__PURE__ */
|
|
5279
|
-
/* @__PURE__ */
|
|
5280
|
-
/* @__PURE__ */
|
|
5501
|
+
children: isGenerating ? /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
5502
|
+
/* @__PURE__ */ jsx23("div", { style: { width: 14, height: 14, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
|
|
5503
|
+
/* @__PURE__ */ jsx23("span", { children: "Generiere..." })
|
|
5504
|
+
] }) : /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
5505
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
|
|
5506
|
+
/* @__PURE__ */ jsx23("span", { children: "Generieren" })
|
|
5281
5507
|
] })
|
|
5282
5508
|
}
|
|
5283
5509
|
) }),
|
|
5284
|
-
/* @__PURE__ */
|
|
5510
|
+
/* @__PURE__ */ jsx23("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ jsx23(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }) })
|
|
5285
5511
|
] }),
|
|
5286
|
-
/* @__PURE__ */
|
|
5287
|
-
/* @__PURE__ */
|
|
5512
|
+
/* @__PURE__ */ jsxs21("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
|
|
5513
|
+
/* @__PURE__ */ jsx23(
|
|
5288
5514
|
"div",
|
|
5289
5515
|
{
|
|
5290
5516
|
style: { flex: 1, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" },
|
|
@@ -5296,26 +5522,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5296
5522
|
else if (dx > 50) goToPrev();
|
|
5297
5523
|
setTouchStartX(null);
|
|
5298
5524
|
},
|
|
5299
|
-
children: /* @__PURE__ */
|
|
5300
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
5301
|
-
/* @__PURE__ */
|
|
5302
|
-
/* @__PURE__ */
|
|
5525
|
+
children: /* @__PURE__ */ jsxs21("div", { style: { height: "100%", width: "100%", borderRadius: 20, border: "1px solid rgba(255,255,255,0.05)", background: "rgba(0,0,0,0.4)", position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }, children: [
|
|
5526
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs21("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
5527
|
+
/* @__PURE__ */ jsx23("div", { style: { width: 36, height: 36, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
|
|
5528
|
+
/* @__PURE__ */ jsx23("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
|
|
5303
5529
|
] }),
|
|
5304
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
5305
|
-
/* @__PURE__ */
|
|
5306
|
-
/* @__PURE__ */
|
|
5307
|
-
/* @__PURE__ */
|
|
5530
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs21("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
5531
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
|
|
5532
|
+
/* @__PURE__ */ jsx23("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
|
|
5533
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => handleGenerateImage(currentResult.prompt), style: { padding: "8px 16px", borderRadius: 8, border: "1px solid rgba(255,255,255,0.2)", fontSize: 11, color: "rgba(255,255,255,0.7)", background: "none", cursor: "pointer", fontFamily: "inherit" }, children: "Erneut versuchen" })
|
|
5308
5534
|
] }),
|
|
5309
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
5310
|
-
!currentResult && /* @__PURE__ */
|
|
5311
|
-
/* @__PURE__ */
|
|
5312
|
-
/* @__PURE__ */
|
|
5535
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx23("img", { src: currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
|
|
5536
|
+
!currentResult && /* @__PURE__ */ jsxs21("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
|
|
5537
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
|
|
5538
|
+
/* @__PURE__ */ jsx23("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
|
|
5313
5539
|
] }),
|
|
5314
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5315
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
5316
|
-
/* @__PURE__ */
|
|
5317
|
-
/* @__PURE__ */
|
|
5318
|
-
/* @__PURE__ */
|
|
5540
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsx23("button", { onClick: openFullscreen, style: { position: "absolute", top: 8, right: 8, width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff" }, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "fullscreen" }) }),
|
|
5541
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
5542
|
+
/* @__PURE__ */ jsx23("button", { onClick: goToPrev, disabled: currentIndex <= 0, style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex <= 0 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_left" }) }),
|
|
5543
|
+
/* @__PURE__ */ jsx23("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, style: { position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex >= history.length - 1 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_right" }) }),
|
|
5544
|
+
/* @__PURE__ */ jsxs21("div", { style: { position: "absolute", bottom: 8, left: "50%", transform: "translateX(-50%)", background: "rgba(0,0,0,0.6)", borderRadius: 999, padding: "2px 12px", fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: "monospace" }, children: [
|
|
5319
5545
|
currentIndex + 1,
|
|
5320
5546
|
" / ",
|
|
5321
5547
|
history.length
|
|
@@ -5324,42 +5550,42 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5324
5550
|
] })
|
|
5325
5551
|
}
|
|
5326
5552
|
),
|
|
5327
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5328
|
-
/* @__PURE__ */
|
|
5329
|
-
/* @__PURE__ */
|
|
5330
|
-
/* @__PURE__ */
|
|
5553
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs21("div", { style: { padding: "0 16px 16px", display: "flex", gap: 8, flexShrink: 0 }, children: [
|
|
5554
|
+
/* @__PURE__ */ jsxs21("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.6)", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }, children: [
|
|
5555
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
|
|
5556
|
+
/* @__PURE__ */ jsx23("span", { children: "Prompt" })
|
|
5331
5557
|
] }),
|
|
5332
|
-
/* @__PURE__ */
|
|
5333
|
-
/* @__PURE__ */
|
|
5334
|
-
/* @__PURE__ */
|
|
5558
|
+
/* @__PURE__ */ jsxs21("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "none", background: "rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.8)", fontSize: 11, fontWeight: "bold", cursor: "pointer", fontFamily: "inherit" }, children: [
|
|
5559
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
|
|
5560
|
+
/* @__PURE__ */ jsx23("span", { children: "Referenz" })
|
|
5335
5561
|
] }),
|
|
5336
|
-
/* @__PURE__ */
|
|
5337
|
-
/* @__PURE__ */
|
|
5338
|
-
/* @__PURE__ */
|
|
5562
|
+
/* @__PURE__ */ jsxs21("button", { onClick: handleDownloadSingle, style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.6)", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }, children: [
|
|
5563
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "download" }),
|
|
5564
|
+
/* @__PURE__ */ jsx23("span", { children: "Laden" })
|
|
5339
5565
|
] })
|
|
5340
5566
|
] })
|
|
5341
5567
|
] })
|
|
5342
5568
|
] }) });
|
|
5343
5569
|
}
|
|
5344
|
-
return /* @__PURE__ */
|
|
5345
|
-
/* @__PURE__ */
|
|
5346
|
-
/* @__PURE__ */
|
|
5347
|
-
/* @__PURE__ */
|
|
5348
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5349
|
-
workspaceTags && /* @__PURE__ */
|
|
5350
|
-
/* @__PURE__ */
|
|
5570
|
+
return /* @__PURE__ */ jsxs21("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", style: hcStyle, children: [
|
|
5571
|
+
/* @__PURE__ */ jsx23("div", { className: "absolute top-2 right-2 z-50", children: /* @__PURE__ */ jsx23("button", { onClick: () => setShowStart(true), className: "text-white/10 hover:text-white/30 transition-colors text-[10px]", children: "\u21C4" }) }),
|
|
5572
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col border-r border-white/5 overflow-hidden relative bg-black/10 shrink-0", style: { width: isLeftCollapsed ? 48 : leftPanelWidth, transition: "none" }, children: [
|
|
5573
|
+
/* @__PURE__ */ jsxs21("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
|
|
5574
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs21("div", { className: "flex flex-1 gap-1", children: [
|
|
5575
|
+
workspaceTags && /* @__PURE__ */ jsxs21("button", { onClick: () => setLeftTab("prompt"), className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "prompt" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`, children: [
|
|
5576
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
|
|
5351
5577
|
"Prompt"
|
|
5352
5578
|
] }),
|
|
5353
|
-
/* @__PURE__ */
|
|
5354
|
-
/* @__PURE__ */
|
|
5579
|
+
/* @__PURE__ */ jsxs21("button", { onClick: () => setLeftTab("hierarchy"), className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "hierarchy" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`, children: [
|
|
5580
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
|
|
5355
5581
|
"Hierarchie"
|
|
5356
5582
|
] }),
|
|
5357
|
-
workspaceTags && /* @__PURE__ */
|
|
5583
|
+
workspaceTags && /* @__PURE__ */ jsx23("button", { onClick: () => setActiveTab("tags"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "tags" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
5358
5584
|
] }),
|
|
5359
|
-
/* @__PURE__ */
|
|
5585
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => setIsLeftCollapsed(!isLeftCollapsed), className: "material-symbols-outlined text-[18px] text-white/40 hover:text-white transition-all w-10 flex items-center justify-center", children: isLeftCollapsed ? "chevron_right" : "chevron_left" })
|
|
5360
5586
|
] }),
|
|
5361
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5362
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5587
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs21("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5588
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx23(
|
|
5363
5589
|
TagManagerPanel,
|
|
5364
5590
|
{
|
|
5365
5591
|
workspaceTags,
|
|
@@ -5370,11 +5596,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5370
5596
|
onTagMove: handleTagMove
|
|
5371
5597
|
}
|
|
5372
5598
|
),
|
|
5373
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
5374
|
-
/* @__PURE__ */
|
|
5375
|
-
/* @__PURE__ */
|
|
5599
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs21("div", { children: [
|
|
5600
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
5601
|
+
/* @__PURE__ */ jsx23("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
5376
5602
|
] }) }),
|
|
5377
|
-
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */
|
|
5603
|
+
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx23(
|
|
5378
5604
|
ListView,
|
|
5379
5605
|
{
|
|
5380
5606
|
nodes,
|
|
@@ -5399,18 +5625,18 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5399
5625
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
5400
5626
|
}
|
|
5401
5627
|
) }),
|
|
5402
|
-
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */
|
|
5628
|
+
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ jsx23(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => handleGenerateImage(prompt), onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage })
|
|
5403
5629
|
] })
|
|
5404
5630
|
] }),
|
|
5405
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5406
|
-
/* @__PURE__ */
|
|
5407
|
-
/* @__PURE__ */
|
|
5408
|
-
/* @__PURE__ */
|
|
5409
|
-
/* @__PURE__ */
|
|
5410
|
-
/* @__PURE__ */
|
|
5631
|
+
!isLeftCollapsed && /* @__PURE__ */ jsx23("div", { onMouseDown: startLeftResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
5632
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
|
|
5633
|
+
/* @__PURE__ */ jsxs21("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
|
|
5634
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1.5", children: [
|
|
5635
|
+
/* @__PURE__ */ jsx23(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5636
|
+
/* @__PURE__ */ jsx23(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] })
|
|
5411
5637
|
] }),
|
|
5412
|
-
/* @__PURE__ */
|
|
5413
|
-
/* @__PURE__ */
|
|
5638
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 mx-auto", children: [
|
|
5639
|
+
/* @__PURE__ */ jsx23(
|
|
5414
5640
|
"button",
|
|
5415
5641
|
{
|
|
5416
5642
|
onClick: () => setMiddlePanel("stage"),
|
|
@@ -5418,7 +5644,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5418
5644
|
children: "Stage"
|
|
5419
5645
|
}
|
|
5420
5646
|
),
|
|
5421
|
-
/* @__PURE__ */
|
|
5647
|
+
/* @__PURE__ */ jsx23(
|
|
5422
5648
|
"button",
|
|
5423
5649
|
{
|
|
5424
5650
|
onClick: () => setMiddlePanel("labs"),
|
|
@@ -5427,68 +5653,68 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5427
5653
|
}
|
|
5428
5654
|
)
|
|
5429
5655
|
] }),
|
|
5430
|
-
/* @__PURE__ */
|
|
5431
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
5432
|
-
/* @__PURE__ */
|
|
5433
|
-
/* @__PURE__ */
|
|
5434
|
-
/* @__PURE__ */
|
|
5435
|
-
] }) : /* @__PURE__ */
|
|
5436
|
-
/* @__PURE__ */
|
|
5437
|
-
/* @__PURE__ */
|
|
5656
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
|
|
5657
|
+
activeReferenceThumbnail ? /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden", style: { height: 28 }, children: [
|
|
5658
|
+
/* @__PURE__ */ jsx23("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
5659
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
5660
|
+
/* @__PURE__ */ jsx23("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 hover:text-white/80 transition-colors", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5661
|
+
] }) : /* @__PURE__ */ jsxs21("button", { onClick: handleSelectReference, className: "flex items-center gap-1 h-7 px-2 rounded-lg border border-white/10 text-white/30 hover:text-white/60 hover:border-white/20 transition-colors text-[10px] font-bold uppercase tracking-wide", children: [
|
|
5662
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
|
|
5663
|
+
/* @__PURE__ */ jsx23("span", { children: "Ref" })
|
|
5438
5664
|
] }),
|
|
5439
|
-
/* @__PURE__ */
|
|
5440
|
-
/* @__PURE__ */
|
|
5665
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
|
|
5666
|
+
/* @__PURE__ */ jsx23(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
|
|
5441
5667
|
] })
|
|
5442
5668
|
] }),
|
|
5443
|
-
/* @__PURE__ */
|
|
5444
|
-
!isPromptCollapsed && /* @__PURE__ */
|
|
5445
|
-
/* @__PURE__ */
|
|
5446
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
5669
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
|
|
5670
|
+
!isPromptCollapsed && /* @__PURE__ */ jsx23("div", { className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ jsxs21("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
5671
|
+
/* @__PURE__ */ jsx23("textarea", { value: activePrompt, onChange: (e) => setActivePrompt(e.target.value), className: "w-full bg-transparent border-none outline-none text-[12px] leading-relaxed text-white/80 resize-none h-20 dark-scrollbar", placeholder: "W\xE4hle einen Knoten oder tippe einen Prompt..." }),
|
|
5672
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ jsx23("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors text-white/20 hover:text-white", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5447
5673
|
] }) }),
|
|
5448
|
-
middlePanel === "labs" ? /* @__PURE__ */
|
|
5674
|
+
middlePanel === "labs" ? /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx23(LabsTab, { services: labServices, onResult: (item) => {
|
|
5449
5675
|
const frame = item.frames[0];
|
|
5450
5676
|
if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
|
|
5451
|
-
} }) }) : /* @__PURE__ */
|
|
5452
|
-
isGenerating && currentResult?.status === "done" && /* @__PURE__ */
|
|
5453
|
-
/* @__PURE__ */
|
|
5454
|
-
/* @__PURE__ */
|
|
5677
|
+
} }) }) : /* @__PURE__ */ jsx23("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ jsxs21("div", { className: "h-full w-full max-w-4xl aspect-square rounded-3xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center group shadow-2xl", children: [
|
|
5678
|
+
isGenerating && currentResult?.status === "done" && /* @__PURE__ */ jsxs21("div", { className: "absolute top-6 right-6 z-30 bg-black/60 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 flex items-center gap-3", children: [
|
|
5679
|
+
/* @__PURE__ */ jsx23("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
|
|
5680
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
|
|
5455
5681
|
] }),
|
|
5456
|
-
currentResult ? currentResult.status === "processing" ? /* @__PURE__ */
|
|
5457
|
-
/* @__PURE__ */
|
|
5458
|
-
/* @__PURE__ */
|
|
5459
|
-
] }) : currentResult.status === "error" ? /* @__PURE__ */
|
|
5460
|
-
/* @__PURE__ */
|
|
5461
|
-
/* @__PURE__ */
|
|
5462
|
-
/* @__PURE__ */
|
|
5463
|
-
/* @__PURE__ */
|
|
5682
|
+
currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-4", children: [
|
|
5683
|
+
/* @__PURE__ */ jsx23("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
|
|
5684
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
5685
|
+
] }) : currentResult.status === "error" ? /* @__PURE__ */ jsxs21("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
|
|
5686
|
+
/* @__PURE__ */ jsx23("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
|
|
5687
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2", children: [
|
|
5688
|
+
/* @__PURE__ */ jsx23("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
|
|
5689
|
+
/* @__PURE__ */ jsx23("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
|
|
5464
5690
|
] }),
|
|
5465
|
-
/* @__PURE__ */
|
|
5466
|
-
] }) : /* @__PURE__ */
|
|
5467
|
-
/* @__PURE__ */
|
|
5468
|
-
/* @__PURE__ */
|
|
5469
|
-
/* @__PURE__ */
|
|
5470
|
-
/* @__PURE__ */
|
|
5471
|
-
/* @__PURE__ */
|
|
5691
|
+
/* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
|
|
5692
|
+
] }) : /* @__PURE__ */ jsxs21("div", { className: "h-full w-full relative flex items-center justify-center", children: [
|
|
5693
|
+
/* @__PURE__ */ jsx23("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
|
|
5694
|
+
/* @__PURE__ */ jsxs21("div", { className: "absolute bottom-6 flex gap-2 opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0 z-20", children: [
|
|
5695
|
+
/* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
|
|
5696
|
+
/* @__PURE__ */ jsx23(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
|
|
5697
|
+
/* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
|
|
5472
5698
|
] })
|
|
5473
|
-
] }) : /* @__PURE__ */
|
|
5474
|
-
/* @__PURE__ */
|
|
5475
|
-
/* @__PURE__ */
|
|
5699
|
+
] }) : /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
5700
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
|
|
5701
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
5476
5702
|
] })
|
|
5477
5703
|
] }) })
|
|
5478
5704
|
] })
|
|
5479
5705
|
] }),
|
|
5480
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
5481
|
-
/* @__PURE__ */
|
|
5482
|
-
/* @__PURE__ */
|
|
5483
|
-
/* @__PURE__ */
|
|
5706
|
+
!isRightCollapsed && /* @__PURE__ */ jsx23("div", { onMouseDown: startRightResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
5707
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", style: { width: isRightCollapsed ? 60 : rightPanelWidth, transition: "none" }, children: [
|
|
5708
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
|
|
5709
|
+
/* @__PURE__ */ jsx23("div", { className: "flex flex-1", children: ["history", "gallery", "inspect", "setup", "sync", "tags", "server"].map((tab) => /* @__PURE__ */ jsx23("button", { onClick: () => {
|
|
5484
5710
|
setActiveTab(tab);
|
|
5485
5711
|
setIsRightCollapsed(false);
|
|
5486
|
-
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */
|
|
5487
|
-
hfToken && /* @__PURE__ */
|
|
5488
|
-
/* @__PURE__ */
|
|
5712
|
+
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : tab === "setup" ? "settings" : tab === "sync" ? "cloud_sync" : tab === "tags" ? "label" : "storage" }) }, tab)) }),
|
|
5713
|
+
hfToken && /* @__PURE__ */ jsx23("button", { onClick: () => refreshHF(), disabled: isHfRefreshing, className: "w-10 flex items-center justify-center text-white/20 hover:text-white/60 transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx23("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
|
|
5714
|
+
/* @__PURE__ */ jsx23("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
|
|
5489
5715
|
] }),
|
|
5490
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
5491
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5716
|
+
!isRightCollapsed && /* @__PURE__ */ jsxs21("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5717
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx23(
|
|
5492
5718
|
TagManagerPanel,
|
|
5493
5719
|
{
|
|
5494
5720
|
workspaceTags,
|
|
@@ -5499,12 +5725,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5499
5725
|
onTagMove: handleTagMove
|
|
5500
5726
|
}
|
|
5501
5727
|
),
|
|
5502
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
5503
|
-
/* @__PURE__ */
|
|
5504
|
-
/* @__PURE__ */
|
|
5728
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs21("div", { children: [
|
|
5729
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
5730
|
+
/* @__PURE__ */ jsx23("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
5505
5731
|
] }) }),
|
|
5506
|
-
activeTab === "history" && /* @__PURE__ */
|
|
5507
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
5732
|
+
activeTab === "history" && /* @__PURE__ */ jsx23(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
|
|
5733
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx23(
|
|
5508
5734
|
MediaLibrary,
|
|
5509
5735
|
{
|
|
5510
5736
|
items: galleryItems,
|
|
@@ -5518,9 +5744,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5518
5744
|
onGenerateReference: (item) => handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true })
|
|
5519
5745
|
}
|
|
5520
5746
|
),
|
|
5521
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
5522
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
5523
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
5747
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx23(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
|
|
5748
|
+
activeTab === "setup" && /* @__PURE__ */ jsx23(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
5749
|
+
activeTab === "sync" && /* @__PURE__ */ jsx23(
|
|
5524
5750
|
ProjectSyncTab,
|
|
5525
5751
|
{
|
|
5526
5752
|
topSlot: syncTopSlot,
|
|
@@ -5543,15 +5769,16 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5543
5769
|
},
|
|
5544
5770
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
5545
5771
|
}
|
|
5546
|
-
)
|
|
5772
|
+
),
|
|
5773
|
+
activeTab === "server" && /* @__PURE__ */ jsx23(ServerTab, {})
|
|
5547
5774
|
] })
|
|
5548
5775
|
] })
|
|
5549
5776
|
] });
|
|
5550
5777
|
}
|
|
5551
5778
|
|
|
5552
5779
|
// src/components/FaApp.tsx
|
|
5553
|
-
import { useState as
|
|
5554
|
-
import { jsx as
|
|
5780
|
+
import { useState as useState19, useEffect as useEffect8 } from "react";
|
|
5781
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
5555
5782
|
function FaApp({
|
|
5556
5783
|
onGenerateImage,
|
|
5557
5784
|
onGeneratePrompt,
|
|
@@ -5570,8 +5797,8 @@ function FaApp({
|
|
|
5570
5797
|
onServerDelete,
|
|
5571
5798
|
buildInfo
|
|
5572
5799
|
}) {
|
|
5573
|
-
const [hfNamespace, setHfNamespace] =
|
|
5574
|
-
|
|
5800
|
+
const [hfNamespace, setHfNamespace] = useState19(void 0);
|
|
5801
|
+
useEffect8(() => {
|
|
5575
5802
|
if (!serverBaseUrl) return;
|
|
5576
5803
|
fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
|
|
5577
5804
|
if (typeof d.hfNamespace === "string") setHfNamespace(d.hfNamespace);
|
|
@@ -5582,7 +5809,7 @@ function FaApp({
|
|
|
5582
5809
|
const result = await onGeneratePrompt(text, options);
|
|
5583
5810
|
return result.text;
|
|
5584
5811
|
};
|
|
5585
|
-
return /* @__PURE__ */
|
|
5812
|
+
return /* @__PURE__ */ jsx24(
|
|
5586
5813
|
AvatarArchitectApp,
|
|
5587
5814
|
{
|
|
5588
5815
|
onGenerateImage,
|
|
@@ -5602,7 +5829,7 @@ function FaApp({
|
|
|
5602
5829
|
}
|
|
5603
5830
|
|
|
5604
5831
|
// src/index.ts
|
|
5605
|
-
var LIB_VERSION = "2.0.
|
|
5832
|
+
var LIB_VERSION = "2.0.24";
|
|
5606
5833
|
export {
|
|
5607
5834
|
AvatarArchitectApp,
|
|
5608
5835
|
CollapsibleCard,
|
|
@@ -5626,6 +5853,7 @@ export {
|
|
|
5626
5853
|
ProjectSyncTab,
|
|
5627
5854
|
PromptTab,
|
|
5628
5855
|
SectionLabel,
|
|
5856
|
+
ServerTab,
|
|
5629
5857
|
SetupPanel,
|
|
5630
5858
|
TagManagerPanel,
|
|
5631
5859
|
applyEvent,
|
|
@@ -5645,6 +5873,10 @@ export {
|
|
|
5645
5873
|
cleanAiResponse,
|
|
5646
5874
|
createFlowServices,
|
|
5647
5875
|
exportProjectToZip,
|
|
5876
|
+
faServerDelete,
|
|
5877
|
+
faServerGet,
|
|
5878
|
+
faServerPost,
|
|
5879
|
+
faServerPut,
|
|
5648
5880
|
findForks,
|
|
5649
5881
|
findTips,
|
|
5650
5882
|
formatTreeToMarkdown,
|