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