@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.js
CHANGED
|
@@ -630,6 +630,7 @@ __export(index_exports, {
|
|
|
630
630
|
ProjectSyncTab: () => ProjectSyncTab,
|
|
631
631
|
PromptTab: () => PromptTab,
|
|
632
632
|
SectionLabel: () => SectionLabel,
|
|
633
|
+
ServerTab: () => ServerTab,
|
|
633
634
|
SetupPanel: () => SetupPanel,
|
|
634
635
|
TagManagerPanel: () => TagManagerPanel,
|
|
635
636
|
applyEvent: () => applyEvent,
|
|
@@ -649,6 +650,10 @@ __export(index_exports, {
|
|
|
649
650
|
cleanAiResponse: () => cleanAiResponse,
|
|
650
651
|
createFlowServices: () => createFlowServices,
|
|
651
652
|
exportProjectToZip: () => exportProjectToZip,
|
|
653
|
+
faServerDelete: () => faServerDelete,
|
|
654
|
+
faServerGet: () => faServerGet,
|
|
655
|
+
faServerPost: () => faServerPost,
|
|
656
|
+
faServerPut: () => faServerPut,
|
|
652
657
|
findForks: () => findForks,
|
|
653
658
|
findTips: () => findTips,
|
|
654
659
|
formatTreeToMarkdown: () => formatTreeToMarkdown,
|
|
@@ -1466,7 +1471,7 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
|
|
|
1466
1471
|
}
|
|
1467
1472
|
|
|
1468
1473
|
// src/components/AvatarArchitectApp.tsx
|
|
1469
|
-
var
|
|
1474
|
+
var import_react25 = require("react");
|
|
1470
1475
|
|
|
1471
1476
|
// src/components/PromptTab.tsx
|
|
1472
1477
|
var import_react12 = require("react");
|
|
@@ -4636,10 +4641,237 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
4636
4641
|
] });
|
|
4637
4642
|
}
|
|
4638
4643
|
|
|
4639
|
-
// src/components/
|
|
4644
|
+
// src/components/ServerTab.tsx
|
|
4645
|
+
var import_react24 = require("react");
|
|
4646
|
+
|
|
4647
|
+
// src/lib/faHfServerService.ts
|
|
4648
|
+
init_hfStateService();
|
|
4649
|
+
var FA_APP_SPACE = "https://rslsp1-fa-app.hf.space";
|
|
4650
|
+
async function request(method, path, env = "prod", body, tokenOverride) {
|
|
4651
|
+
const token = tokenOverride || getHFToken();
|
|
4652
|
+
if (!token) throw new Error("fa-app gateway: kein HF Token gesetzt");
|
|
4653
|
+
const res = await fetch(`${FA_APP_SPACE}/${path.replace(/^\//, "")}`, {
|
|
4654
|
+
method,
|
|
4655
|
+
headers: {
|
|
4656
|
+
"Authorization": `Bearer ${token}`,
|
|
4657
|
+
"X-Env": env,
|
|
4658
|
+
...body !== void 0 ? { "Content-Type": "application/json" } : {}
|
|
4659
|
+
},
|
|
4660
|
+
...body !== void 0 ? { body: JSON.stringify(body) } : {}
|
|
4661
|
+
});
|
|
4662
|
+
if (!res.ok) {
|
|
4663
|
+
const text = await res.text().catch(() => "");
|
|
4664
|
+
throw new Error(`fa-app gateway ${method} /${path} [${env}] \u2192 ${res.status}: ${text.slice(0, 200)}`);
|
|
4665
|
+
}
|
|
4666
|
+
return res.json();
|
|
4667
|
+
}
|
|
4668
|
+
function faServerGet(path, env = "prod", token) {
|
|
4669
|
+
return request("GET", path, env, void 0, token);
|
|
4670
|
+
}
|
|
4671
|
+
function faServerPost(path, body, env = "prod", token) {
|
|
4672
|
+
return request("POST", path, env, body, token);
|
|
4673
|
+
}
|
|
4674
|
+
function faServerPut(path, body, env = "prod", token) {
|
|
4675
|
+
return request("PUT", path, env, body, token);
|
|
4676
|
+
}
|
|
4677
|
+
function faServerDelete(path, env = "prod", token) {
|
|
4678
|
+
return request("DELETE", path, env, void 0, token);
|
|
4679
|
+
}
|
|
4680
|
+
|
|
4681
|
+
// src/components/ServerTab.tsx
|
|
4682
|
+
init_hfStateService();
|
|
4640
4683
|
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
4641
|
-
function
|
|
4684
|
+
function StarRating({ rating = 0 }) {
|
|
4685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex gap-[2px]", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `material-symbols-outlined text-[12px] ${i <= rating ? "text-yellow-400" : "text-white/15"}`, children: "star" }, i)) });
|
|
4686
|
+
}
|
|
4687
|
+
function ServerTab({ hfToken }) {
|
|
4688
|
+
const token = hfToken || getHFToken() || "";
|
|
4689
|
+
const hasToken = !!token;
|
|
4690
|
+
const [env, setEnv] = (0, import_react24.useState)("prod");
|
|
4691
|
+
const [step, setStep] = (0, import_react24.useState)("user");
|
|
4692
|
+
const [users, setUsers] = (0, import_react24.useState)([]);
|
|
4693
|
+
const [usersLoading, setUsersLoading] = (0, import_react24.useState)(false);
|
|
4694
|
+
const [usersError, setUsersError] = (0, import_react24.useState)(null);
|
|
4695
|
+
const [selectedUser, setSelectedUser] = (0, import_react24.useState)(null);
|
|
4696
|
+
const [contexts, setContexts] = (0, import_react24.useState)([]);
|
|
4697
|
+
const [contextsLoading, setContextsLoading] = (0, import_react24.useState)(false);
|
|
4698
|
+
const [selectedContext, setSelectedContext] = (0, import_react24.useState)(null);
|
|
4699
|
+
const [tags, setTags] = (0, import_react24.useState)([]);
|
|
4700
|
+
const [items, setItems] = (0, import_react24.useState)([]);
|
|
4701
|
+
const [libLoading, setLibLoading] = (0, import_react24.useState)(false);
|
|
4702
|
+
const [libError, setLibError] = (0, import_react24.useState)(null);
|
|
4703
|
+
const [activeTag, setActiveTag] = (0, import_react24.useState)(null);
|
|
4704
|
+
const [preview, setPreview] = (0, import_react24.useState)(null);
|
|
4642
4705
|
(0, import_react24.useEffect)(() => {
|
|
4706
|
+
if (!hasToken) return;
|
|
4707
|
+
setUsersLoading(true);
|
|
4708
|
+
setUsersError(null);
|
|
4709
|
+
faServerGet("/api/v2/users", env, token).then(setUsers).catch((e) => setUsersError(String(e))).finally(() => setUsersLoading(false));
|
|
4710
|
+
}, [env, hasToken]);
|
|
4711
|
+
const selectUser = async (user) => {
|
|
4712
|
+
setSelectedUser(user);
|
|
4713
|
+
setContextsLoading(true);
|
|
4714
|
+
try {
|
|
4715
|
+
const data = await faServerGet(`/api/v2/contexts?user_id=${user.id}`, env, token);
|
|
4716
|
+
if (data.length === 1) {
|
|
4717
|
+
await loadLibrary(user, data[0]);
|
|
4718
|
+
} else {
|
|
4719
|
+
setContexts(data);
|
|
4720
|
+
setStep("context");
|
|
4721
|
+
}
|
|
4722
|
+
} catch (e) {
|
|
4723
|
+
setUsersError(String(e));
|
|
4724
|
+
} finally {
|
|
4725
|
+
setContextsLoading(false);
|
|
4726
|
+
}
|
|
4727
|
+
};
|
|
4728
|
+
const loadLibrary = async (user, ctx) => {
|
|
4729
|
+
setSelectedContext(ctx);
|
|
4730
|
+
setStep("library");
|
|
4731
|
+
setLibLoading(true);
|
|
4732
|
+
setLibError(null);
|
|
4733
|
+
try {
|
|
4734
|
+
const [tagsRes, libRes] = await Promise.all([
|
|
4735
|
+
faServerGet(`/api/v2/tags?user_id=${user.id}`, env, token),
|
|
4736
|
+
faServerGet(`/api/v2/library?user_id=${user.id}&context_id=${ctx.id}&limit=100`, env, token)
|
|
4737
|
+
]);
|
|
4738
|
+
setTags(Array.isArray(tagsRes) ? tagsRes : []);
|
|
4739
|
+
const raw = Array.isArray(libRes) ? libRes : libRes.data ?? [];
|
|
4740
|
+
setItems(raw);
|
|
4741
|
+
} catch (e) {
|
|
4742
|
+
setLibError(String(e));
|
|
4743
|
+
} finally {
|
|
4744
|
+
setLibLoading(false);
|
|
4745
|
+
}
|
|
4746
|
+
};
|
|
4747
|
+
const reset = () => {
|
|
4748
|
+
setStep("user");
|
|
4749
|
+
setSelectedUser(null);
|
|
4750
|
+
setSelectedContext(null);
|
|
4751
|
+
setContexts([]);
|
|
4752
|
+
setTags([]);
|
|
4753
|
+
setItems([]);
|
|
4754
|
+
setActiveTag(null);
|
|
4755
|
+
setPreview(null);
|
|
4756
|
+
setLibError(null);
|
|
4757
|
+
};
|
|
4758
|
+
const filteredItems = activeTag ? items.filter((item) => item.tags?.some((t) => t.l === activeTag)) : items;
|
|
4759
|
+
if (!hasToken) {
|
|
4760
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-center h-full p-6", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "text-white/30 text-[12px] text-center", children: [
|
|
4761
|
+
"Kein HF Token gesetzt.",
|
|
4762
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("br", {}),
|
|
4763
|
+
"Bitte zuerst im Setup-Tab einrichten."
|
|
4764
|
+
] }) });
|
|
4765
|
+
}
|
|
4766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col h-full min-h-0", children: [
|
|
4767
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-white/8", children: [
|
|
4768
|
+
step !== "user" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: reset, className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "arrow_back" }) }),
|
|
4769
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "text-[11px] font-medium text-white/40 tracking-wide flex-1", children: [
|
|
4770
|
+
step === "user" && "Server Browser",
|
|
4771
|
+
step === "context" && `${selectedUser?.username} \u2014 Kontext w\xE4hlen`,
|
|
4772
|
+
step === "library" && `${selectedUser?.username} / ${selectedContext?.label || selectedContext?.name || selectedContext?.id}`
|
|
4773
|
+
] }),
|
|
4774
|
+
step === "user" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex gap-1", children: ["prod", "dev"].map((e) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4775
|
+
"button",
|
|
4776
|
+
{
|
|
4777
|
+
onClick: () => setEnv(e),
|
|
4778
|
+
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"}`,
|
|
4779
|
+
children: e
|
|
4780
|
+
},
|
|
4781
|
+
e
|
|
4782
|
+
)) })
|
|
4783
|
+
] }),
|
|
4784
|
+
step === "user" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-3 gap-2", children: [
|
|
4785
|
+
usersLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-white/30 text-[11px] text-center py-4", children: "Lade User\u2026" }),
|
|
4786
|
+
usersError && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-red-400 text-[11px] text-center py-4", children: usersError }),
|
|
4787
|
+
!usersLoading && users.map((u) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
4788
|
+
"button",
|
|
4789
|
+
{
|
|
4790
|
+
onClick: () => selectUser(u),
|
|
4791
|
+
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",
|
|
4792
|
+
children: [
|
|
4793
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px] text-white/40", children: "person" }),
|
|
4794
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
4795
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[12px] font-medium text-white", children: u.username }),
|
|
4796
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[10px] text-white/30", children: u.id })
|
|
4797
|
+
] }),
|
|
4798
|
+
contextsLoading && selectedUser?.id === u.id ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[16px] text-white/30 animate-spin", children: "progress_activity" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[16px] text-white/20", children: "chevron_right" })
|
|
4799
|
+
]
|
|
4800
|
+
},
|
|
4801
|
+
u.id
|
|
4802
|
+
))
|
|
4803
|
+
] }),
|
|
4804
|
+
step === "context" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-3 gap-2", children: contexts.map((ctx) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
4805
|
+
"button",
|
|
4806
|
+
{
|
|
4807
|
+
onClick: () => loadLibrary(selectedUser, ctx),
|
|
4808
|
+
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",
|
|
4809
|
+
children: [
|
|
4810
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[20px] text-white/40", children: "folder" }),
|
|
4811
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
4812
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[12px] font-medium text-white", children: ctx.label || ctx.name || ctx.id }),
|
|
4813
|
+
ctx.description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[10px] text-white/30 truncate", children: ctx.description })
|
|
4814
|
+
] }),
|
|
4815
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[16px] text-white/20", children: "chevron_right" })
|
|
4816
|
+
]
|
|
4817
|
+
},
|
|
4818
|
+
ctx.id
|
|
4819
|
+
)) }),
|
|
4820
|
+
step === "library" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
4821
|
+
tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex gap-1.5 px-3 py-2 overflow-x-auto border-b border-white/8", style: { scrollbarWidth: "none" }, children: [
|
|
4822
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4823
|
+
"button",
|
|
4824
|
+
{
|
|
4825
|
+
onClick: () => setActiveTag(null),
|
|
4826
|
+
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"}`,
|
|
4827
|
+
children: "Alle"
|
|
4828
|
+
}
|
|
4829
|
+
),
|
|
4830
|
+
tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4831
|
+
"button",
|
|
4832
|
+
{
|
|
4833
|
+
onClick: () => setActiveTag(activeTag === t.label ? null : t.label),
|
|
4834
|
+
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"}`,
|
|
4835
|
+
children: t.label
|
|
4836
|
+
},
|
|
4837
|
+
t.id
|
|
4838
|
+
))
|
|
4839
|
+
] }),
|
|
4840
|
+
libLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-white/30 text-[11px] text-center py-8", children: "Lade Library\u2026" }),
|
|
4841
|
+
libError && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-red-400 text-[11px] text-center py-8", children: libError }),
|
|
4842
|
+
!libLoading && !libError && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex-1 min-h-0 overflow-y-auto p-3 grid grid-cols-2 gap-2 content-start", children: [
|
|
4843
|
+
filteredItems.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "col-span-2 text-white/30 text-[11px] text-center py-8", children: "Keine Eintr\xE4ge." }),
|
|
4844
|
+
filteredItems.map((item) => {
|
|
4845
|
+
const imgUrl = item.images?.[0]?.url;
|
|
4846
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
4847
|
+
"button",
|
|
4848
|
+
{
|
|
4849
|
+
onClick: () => imgUrl && setPreview(imgUrl),
|
|
4850
|
+
className: "flex flex-col rounded-xl overflow-hidden border border-white/8 hover:border-white/25 transition-all bg-white/3 text-left",
|
|
4851
|
+
children: [
|
|
4852
|
+
imgUrl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: imgUrl, alt: "", className: "w-full aspect-square object-cover bg-white/5" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-full aspect-square bg-white/5 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[24px] text-white/15", children: "image" }) }),
|
|
4853
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "p-1.5 flex flex-col gap-0.5", children: [
|
|
4854
|
+
item.title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[10px] font-medium text-white/70 truncate", children: item.title }),
|
|
4855
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StarRating, { rating: item.rating })
|
|
4856
|
+
] })
|
|
4857
|
+
]
|
|
4858
|
+
},
|
|
4859
|
+
item.ref_id
|
|
4860
|
+
);
|
|
4861
|
+
})
|
|
4862
|
+
] })
|
|
4863
|
+
] }),
|
|
4864
|
+
preview && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "absolute inset-0 z-50 bg-black/90 flex items-center justify-center", onClick: () => setPreview(null), children: [
|
|
4865
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: preview, alt: "", className: "max-w-full max-h-full object-contain" }),
|
|
4866
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "absolute top-3 right-3 text-white/60 hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[24px]", children: "close" }) })
|
|
4867
|
+
] })
|
|
4868
|
+
] });
|
|
4869
|
+
}
|
|
4870
|
+
|
|
4871
|
+
// src/components/AvatarArchitectApp.tsx
|
|
4872
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
4873
|
+
function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
|
|
4874
|
+
(0, import_react25.useEffect)(() => {
|
|
4643
4875
|
const id = "flow-styles";
|
|
4644
4876
|
if (!document.getElementById(id)) {
|
|
4645
4877
|
const style = document.createElement("style");
|
|
@@ -4648,19 +4880,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4648
4880
|
document.head.appendChild(style);
|
|
4649
4881
|
}
|
|
4650
4882
|
}, []);
|
|
4651
|
-
const [showStart, setShowStart] = (0,
|
|
4652
|
-
const [layoutChoice, setLayoutChoice] = (0,
|
|
4883
|
+
const [showStart, setShowStart] = (0, import_react25.useState)(true);
|
|
4884
|
+
const [layoutChoice, setLayoutChoice] = (0, import_react25.useState)(() => {
|
|
4653
4885
|
try {
|
|
4654
4886
|
return localStorage.getItem("aa-layout") || null;
|
|
4655
4887
|
} catch {
|
|
4656
4888
|
return null;
|
|
4657
4889
|
}
|
|
4658
4890
|
});
|
|
4659
|
-
const [projectLoaded, setProjectLoaded] = (0,
|
|
4660
|
-
const [hfToken, setHfToken] = (0,
|
|
4661
|
-
const [hfTokenInput, setHfTokenInput] = (0,
|
|
4662
|
-
const [isLoadingFromHF, setIsLoadingFromHF] = (0,
|
|
4663
|
-
const [hfNamespaceLocal, setHfNamespaceLocal] = (0,
|
|
4891
|
+
const [projectLoaded, setProjectLoaded] = (0, import_react25.useState)(false);
|
|
4892
|
+
const [hfToken, setHfToken] = (0, import_react25.useState)(initialHfToken || "");
|
|
4893
|
+
const [hfTokenInput, setHfTokenInput] = (0, import_react25.useState)(initialHfToken || "");
|
|
4894
|
+
const [isLoadingFromHF, setIsLoadingFromHF] = (0, import_react25.useState)(false);
|
|
4895
|
+
const [hfNamespaceLocal, setHfNamespaceLocal] = (0, import_react25.useState)(() => {
|
|
4664
4896
|
try {
|
|
4665
4897
|
const stored = localStorage.getItem("aa-hf-namespace");
|
|
4666
4898
|
if (stored !== null) return stored;
|
|
@@ -4669,8 +4901,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4669
4901
|
return "";
|
|
4670
4902
|
}
|
|
4671
4903
|
});
|
|
4672
|
-
const [hfNamespaceFromServer, setHfNamespaceFromServer] = (0,
|
|
4673
|
-
(0,
|
|
4904
|
+
const [hfNamespaceFromServer, setHfNamespaceFromServer] = (0, import_react25.useState)(null);
|
|
4905
|
+
(0, import_react25.useEffect)(() => {
|
|
4674
4906
|
if (hfNamespace !== void 0) return;
|
|
4675
4907
|
const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
|
|
4676
4908
|
if (!backendUrl) return;
|
|
@@ -4692,35 +4924,35 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4692
4924
|
refresh: refreshHF,
|
|
4693
4925
|
hasStateZip
|
|
4694
4926
|
} = useHFState(hfToken, effectiveNamespace);
|
|
4695
|
-
const [imageUploadStatus, setImageUploadStatus] = (0,
|
|
4696
|
-
const [bootstrapLog, setBootstrapLog] = (0,
|
|
4697
|
-
const [isBootstrapping, setIsBootstrapping] = (0,
|
|
4698
|
-
const syncTopSlot = /* @__PURE__ */ (0,
|
|
4699
|
-
localOnlyCount > 0 && /* @__PURE__ */ (0,
|
|
4927
|
+
const [imageUploadStatus, setImageUploadStatus] = (0, import_react25.useState)(/* @__PURE__ */ new Map());
|
|
4928
|
+
const [bootstrapLog, setBootstrapLog] = (0, import_react25.useState)([]);
|
|
4929
|
+
const [isBootstrapping, setIsBootstrapping] = (0, import_react25.useState)(false);
|
|
4930
|
+
const syncTopSlot = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
4931
|
+
localOnlyCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { background: "rgba(234,179,8,0.15)", border: "1px solid rgba(234,179,8,0.3)", padding: "4px 10px", fontSize: 11, color: "#fbbf24", borderRadius: 4, marginBottom: 4 }, children: [
|
|
4700
4932
|
"\u26A0 ",
|
|
4701
4933
|
localOnlyCount,
|
|
4702
4934
|
" lokale Event",
|
|
4703
4935
|
localOnlyCount > 1 ? "s" : "",
|
|
4704
4936
|
" noch nicht auf HF best\xE4tigt"
|
|
4705
4937
|
] }),
|
|
4706
|
-
pendingBufferCount > 0 && /* @__PURE__ */ (0,
|
|
4938
|
+
pendingBufferCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { background: "linear-gradient(90deg,#f59e0b,#ef4444)", padding: "4px 10px", fontSize: 11, color: "#fff", borderRadius: 4, marginBottom: 4 }, children: [
|
|
4707
4939
|
pendingBufferCount,
|
|
4708
4940
|
" \xC4nderung",
|
|
4709
4941
|
pendingBufferCount > 1 ? "en" : "",
|
|
4710
4942
|
" lokal \u2014 bei Flow-Reload verloren wenn nicht synchronisiert"
|
|
4711
4943
|
] }),
|
|
4712
|
-
eventCount > 100 && /* @__PURE__ */ (0,
|
|
4944
|
+
eventCount > 100 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { background: "#dc2626", color: "#fff", padding: "5px 10px", borderRadius: 4, marginBottom: 4, fontWeight: 600, fontSize: 11 }, children: [
|
|
4713
4945
|
"\u26A0 ",
|
|
4714
4946
|
eventCount,
|
|
4715
4947
|
" Events nicht konsolidiert \u2014 Konsolidierung dringend empfohlen"
|
|
4716
4948
|
] }),
|
|
4717
|
-
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ (0,
|
|
4949
|
+
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { background: "#44403c", color: "#a8a29e", padding: "4px 10px", borderRadius: 4, marginBottom: 4, fontSize: 11 }, children: [
|
|
4718
4950
|
eventCount,
|
|
4719
4951
|
" Events seit letzter Konsolidierung \u2014 Konsolidierung empfohlen"
|
|
4720
4952
|
] }),
|
|
4721
|
-
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ (0,
|
|
4722
|
-
/* @__PURE__ */ (0,
|
|
4723
|
-
/* @__PURE__ */ (0,
|
|
4953
|
+
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { background: "#1c1917", border: "1px solid #44403c", borderRadius: 6, padding: "10px 12px" }, children: [
|
|
4954
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { fontSize: 12, color: "#a8a29e", marginBottom: 6 }, children: effectiveNamespace ? `Kein State-Snapshot in HF (${effectiveNamespace}) \u2014 aus Legacy-Daten (tags.json + metadata.json) migrieren?` : "Namespace wird geladen\u2026" }),
|
|
4955
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4724
4956
|
"button",
|
|
4725
4957
|
{
|
|
4726
4958
|
disabled: isBootstrapping || !effectiveNamespace,
|
|
@@ -4741,10 +4973,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4741
4973
|
children: isBootstrapping ? "Migriere\u2026" : "Legacy-Migration starten"
|
|
4742
4974
|
}
|
|
4743
4975
|
),
|
|
4744
|
-
bootstrapLog.length > 0 && /* @__PURE__ */ (0,
|
|
4976
|
+
bootstrapLog.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { marginTop: 6, fontFamily: "monospace", fontSize: 10, color: "#78716c", lineHeight: 1.6 }, children: bootstrapLog.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: l }, i)) })
|
|
4745
4977
|
] })
|
|
4746
4978
|
] });
|
|
4747
|
-
const wsInputRef = (0,
|
|
4979
|
+
const wsInputRef = (0, import_react25.useRef)(null);
|
|
4748
4980
|
const startApp = (choice) => {
|
|
4749
4981
|
try {
|
|
4750
4982
|
localStorage.setItem("aa-layout", choice);
|
|
@@ -4753,16 +4985,16 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4753
4985
|
setLayoutChoice(choice);
|
|
4754
4986
|
setShowStart(false);
|
|
4755
4987
|
};
|
|
4756
|
-
const [nodes, setNodes] = (0,
|
|
4757
|
-
const [edges, setEdges] = (0,
|
|
4758
|
-
const [history, setHistory] = (0,
|
|
4759
|
-
const [galleryItems, setGalleryItems] = (0,
|
|
4760
|
-
const galleryItemsRef = (0,
|
|
4761
|
-
(0,
|
|
4988
|
+
const [nodes, setNodes] = (0, import_react25.useState)([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
|
|
4989
|
+
const [edges, setEdges] = (0, import_react25.useState)([]);
|
|
4990
|
+
const [history, setHistory] = (0, import_react25.useState)([]);
|
|
4991
|
+
const [galleryItems, setGalleryItems] = (0, import_react25.useState)([]);
|
|
4992
|
+
const galleryItemsRef = (0, import_react25.useRef)([]);
|
|
4993
|
+
(0, import_react25.useEffect)(() => {
|
|
4762
4994
|
galleryItemsRef.current = galleryItems;
|
|
4763
4995
|
}, [galleryItems]);
|
|
4764
|
-
const hfImageNotFoundRef = (0,
|
|
4765
|
-
(0,
|
|
4996
|
+
const hfImageNotFoundRef = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
|
|
4997
|
+
(0, import_react25.useEffect)(() => {
|
|
4766
4998
|
if (!hfState) return;
|
|
4767
4999
|
if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
|
|
4768
5000
|
const hfIds = new Set(hfState.metadata.map((m) => m.id));
|
|
@@ -4804,62 +5036,62 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4804
5036
|
});
|
|
4805
5037
|
}
|
|
4806
5038
|
}, [hfState]);
|
|
4807
|
-
const [activePrompt, setActivePrompt] = (0,
|
|
4808
|
-
const [isSynthesizing, setIsSynthesizing] = (0,
|
|
4809
|
-
const [activeGenerationsCount, setActiveGenerationsCount] = (0,
|
|
4810
|
-
const [currentResult, setCurrentResult] = (0,
|
|
4811
|
-
const [focusedNodeId, setFocusedNodeId] = (0,
|
|
4812
|
-
const [leftTab, setLeftTab] = (0,
|
|
4813
|
-
const [promptFeedback, setPromptFeedback] = (0,
|
|
4814
|
-
const [lastPromptPayload, setLastPromptPayload] = (0,
|
|
4815
|
-
const [isPromptTabGenerating, setIsPromptTabGenerating] = (0,
|
|
4816
|
-
const [activeTab, setActiveTab] = (0,
|
|
4817
|
-
const [mobileTab, setMobileTab] = (0,
|
|
4818
|
-
const [middlePanel, setMiddlePanel] = (0,
|
|
4819
|
-
const [recentLabItems, setRecentLabItems] = (0,
|
|
4820
|
-
const [aspectRatio, setAspectRatio] = (0,
|
|
4821
|
-
const [selectedModel, setSelectedModel] = (0,
|
|
4822
|
-
const [seed, setSeed] = (0,
|
|
4823
|
-
const [seedMode, setSeedMode] = (0,
|
|
4824
|
-
const [isLeftCollapsed, setIsLeftCollapsed] = (0,
|
|
4825
|
-
const [isRightCollapsed, setIsRightCollapsed] = (0,
|
|
4826
|
-
const [leftPanelWidth, setLeftPanelWidth] = (0,
|
|
5039
|
+
const [activePrompt, setActivePrompt] = (0, import_react25.useState)("");
|
|
5040
|
+
const [isSynthesizing, setIsSynthesizing] = (0, import_react25.useState)(false);
|
|
5041
|
+
const [activeGenerationsCount, setActiveGenerationsCount] = (0, import_react25.useState)(0);
|
|
5042
|
+
const [currentResult, setCurrentResult] = (0, import_react25.useState)(null);
|
|
5043
|
+
const [focusedNodeId, setFocusedNodeId] = (0, import_react25.useState)(null);
|
|
5044
|
+
const [leftTab, setLeftTab] = (0, import_react25.useState)("prompt");
|
|
5045
|
+
const [promptFeedback, setPromptFeedback] = (0, import_react25.useState)(null);
|
|
5046
|
+
const [lastPromptPayload, setLastPromptPayload] = (0, import_react25.useState)(null);
|
|
5047
|
+
const [isPromptTabGenerating, setIsPromptTabGenerating] = (0, import_react25.useState)(false);
|
|
5048
|
+
const [activeTab, setActiveTab] = (0, import_react25.useState)("history");
|
|
5049
|
+
const [mobileTab, setMobileTab] = (0, import_react25.useState)("stage");
|
|
5050
|
+
const [middlePanel, setMiddlePanel] = (0, import_react25.useState)("stage");
|
|
5051
|
+
const [recentLabItems, setRecentLabItems] = (0, import_react25.useState)([]);
|
|
5052
|
+
const [aspectRatio, setAspectRatio] = (0, import_react25.useState)("1:1");
|
|
5053
|
+
const [selectedModel, setSelectedModel] = (0, import_react25.useState)("\u{1F34C} Nano Banana Pro");
|
|
5054
|
+
const [seed, setSeed] = (0, import_react25.useState)(Math.floor(Math.random() * 1e6));
|
|
5055
|
+
const [seedMode, setSeedMode] = (0, import_react25.useState)("random");
|
|
5056
|
+
const [isLeftCollapsed, setIsLeftCollapsed] = (0, import_react25.useState)(false);
|
|
5057
|
+
const [isRightCollapsed, setIsRightCollapsed] = (0, import_react25.useState)(false);
|
|
5058
|
+
const [leftPanelWidth, setLeftPanelWidth] = (0, import_react25.useState)(() => {
|
|
4827
5059
|
try {
|
|
4828
5060
|
return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
|
|
4829
5061
|
} catch {
|
|
4830
5062
|
return 260;
|
|
4831
5063
|
}
|
|
4832
5064
|
});
|
|
4833
|
-
const [rightPanelWidth, setRightPanelWidth] = (0,
|
|
5065
|
+
const [rightPanelWidth, setRightPanelWidth] = (0, import_react25.useState)(() => {
|
|
4834
5066
|
try {
|
|
4835
5067
|
return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
|
|
4836
5068
|
} catch {
|
|
4837
5069
|
return 320;
|
|
4838
5070
|
}
|
|
4839
5071
|
});
|
|
4840
|
-
const [isPromptCollapsed, setIsPromptCollapsed] = (0,
|
|
4841
|
-
const [projectActionState, setProjectActionState] = (0,
|
|
4842
|
-
const syncServerDataRef = (0,
|
|
4843
|
-
const [workspaceTags, setWorkspaceTags] = (0,
|
|
4844
|
-
const [serverProjects, setServerProjects] = (0,
|
|
4845
|
-
const [isLoadingFromServer, setIsLoadingFromServer] = (0,
|
|
4846
|
-
const [highContrast, setHighContrast] = (0,
|
|
5072
|
+
const [isPromptCollapsed, setIsPromptCollapsed] = (0, import_react25.useState)(false);
|
|
5073
|
+
const [projectActionState, setProjectActionState] = (0, import_react25.useState)("idle");
|
|
5074
|
+
const syncServerDataRef = (0, import_react25.useRef)(null);
|
|
5075
|
+
const [workspaceTags, setWorkspaceTags] = (0, import_react25.useState)(null);
|
|
5076
|
+
const [serverProjects, setServerProjects] = (0, import_react25.useState)([]);
|
|
5077
|
+
const [isLoadingFromServer, setIsLoadingFromServer] = (0, import_react25.useState)(false);
|
|
5078
|
+
const [highContrast, setHighContrast] = (0, import_react25.useState)(() => {
|
|
4847
5079
|
try {
|
|
4848
5080
|
return localStorage.getItem("aa-contrast") === "high";
|
|
4849
5081
|
} catch {
|
|
4850
5082
|
return false;
|
|
4851
5083
|
}
|
|
4852
5084
|
});
|
|
4853
|
-
const [activeReferenceId, setActiveReferenceId] = (0,
|
|
4854
|
-
const [activeReferenceThumbnail, setActiveReferenceThumbnail] = (0,
|
|
4855
|
-
const [isScanningImage, setIsScanningImage] = (0,
|
|
4856
|
-
const [touchStartX, setTouchStartX] = (0,
|
|
4857
|
-
const [isFullscreen, setIsFullscreen] = (0,
|
|
4858
|
-
const [zoomScale, setZoomScale] = (0,
|
|
4859
|
-
const [zoomOffset, setZoomOffset] = (0,
|
|
4860
|
-
const lastPinchDist = (0,
|
|
4861
|
-
const lastTapTime = (0,
|
|
4862
|
-
const dragStart = (0,
|
|
5085
|
+
const [activeReferenceId, setActiveReferenceId] = (0, import_react25.useState)(null);
|
|
5086
|
+
const [activeReferenceThumbnail, setActiveReferenceThumbnail] = (0, import_react25.useState)(null);
|
|
5087
|
+
const [isScanningImage, setIsScanningImage] = (0, import_react25.useState)(false);
|
|
5088
|
+
const [touchStartX, setTouchStartX] = (0, import_react25.useState)(null);
|
|
5089
|
+
const [isFullscreen, setIsFullscreen] = (0, import_react25.useState)(false);
|
|
5090
|
+
const [zoomScale, setZoomScale] = (0, import_react25.useState)(1);
|
|
5091
|
+
const [zoomOffset, setZoomOffset] = (0, import_react25.useState)({ x: 0, y: 0 });
|
|
5092
|
+
const lastPinchDist = (0, import_react25.useRef)(null);
|
|
5093
|
+
const lastTapTime = (0, import_react25.useRef)(0);
|
|
5094
|
+
const dragStart = (0, import_react25.useRef)(null);
|
|
4863
5095
|
const openFullscreen = () => {
|
|
4864
5096
|
setIsFullscreen(true);
|
|
4865
5097
|
setZoomScale(1);
|
|
@@ -4922,7 +5154,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4922
5154
|
setActiveReferenceId(null);
|
|
4923
5155
|
setActiveReferenceThumbnail(null);
|
|
4924
5156
|
};
|
|
4925
|
-
const labServices = (0,
|
|
5157
|
+
const labServices = (0, import_react25.useMemo)(() => {
|
|
4926
5158
|
const available = groupGenerationsToLabItems([...galleryItems, ...history]);
|
|
4927
5159
|
return {
|
|
4928
5160
|
availableItems: available,
|
|
@@ -5002,17 +5234,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5002
5234
|
setIsScanningImage(false);
|
|
5003
5235
|
}
|
|
5004
5236
|
};
|
|
5005
|
-
const currentIndex = (0,
|
|
5006
|
-
const goToPrev = (0,
|
|
5237
|
+
const currentIndex = (0, import_react25.useMemo)(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
|
|
5238
|
+
const goToPrev = (0, import_react25.useCallback)(() => {
|
|
5007
5239
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
5008
5240
|
}, [currentIndex, history]);
|
|
5009
|
-
const goToNext = (0,
|
|
5241
|
+
const goToNext = (0, import_react25.useCallback)(() => {
|
|
5010
5242
|
if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
|
|
5011
5243
|
}, [currentIndex, history]);
|
|
5012
5244
|
const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
|
|
5013
5245
|
const isGenerating = activeGenerationsCount > 0;
|
|
5014
5246
|
useKeyboardNavigation(history, currentResult, setCurrentResult);
|
|
5015
|
-
const getSubtreeFormat = (0,
|
|
5247
|
+
const getSubtreeFormat = (0, import_react25.useCallback)((nodeId, depth = 0) => {
|
|
5016
5248
|
const node = nodes.find((n) => n.id === nodeId);
|
|
5017
5249
|
if (!node) return "";
|
|
5018
5250
|
const childrenIds = edges.filter((e) => e.source === nodeId).map((e) => e.target);
|
|
@@ -5020,7 +5252,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5020
5252
|
return `${indent}- ${node.data.label || "(unbenannt)"}
|
|
5021
5253
|
` + childrenIds.map((id) => getSubtreeFormat(id, depth + 1)).join("");
|
|
5022
5254
|
}, [nodes, edges]);
|
|
5023
|
-
const activePath = (0,
|
|
5255
|
+
const activePath = (0, import_react25.useMemo)(() => {
|
|
5024
5256
|
if (!focusedNodeId) return /* @__PURE__ */ new Set();
|
|
5025
5257
|
const path = /* @__PURE__ */ new Set([focusedNodeId]);
|
|
5026
5258
|
let currId = focusedNodeId;
|
|
@@ -5368,7 +5600,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5368
5600
|
setTimeout(() => setProjectActionState("idle"), 4e3);
|
|
5369
5601
|
}
|
|
5370
5602
|
};
|
|
5371
|
-
(0,
|
|
5603
|
+
(0, import_react25.useEffect)(() => {
|
|
5372
5604
|
if (activeTab === "setup" || activeTab === "sync") fetchServerProjects();
|
|
5373
5605
|
}, [activeTab]);
|
|
5374
5606
|
const mergeWorkspaceTags = (local, remote) => {
|
|
@@ -5392,7 +5624,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5392
5624
|
};
|
|
5393
5625
|
if (isFullscreen && currentResult?.base64) {
|
|
5394
5626
|
const fsBase64 = currentResult.base64.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}`;
|
|
5395
|
-
return /* @__PURE__ */ (0,
|
|
5627
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
5396
5628
|
"div",
|
|
5397
5629
|
{
|
|
5398
5630
|
className: "fixed inset-0 bg-black z-50 flex items-center justify-center overflow-hidden touch-none",
|
|
@@ -5400,7 +5632,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5400
5632
|
onTouchMove: handleFsTouchMove,
|
|
5401
5633
|
onTouchEnd: handleFsTouchEnd,
|
|
5402
5634
|
children: [
|
|
5403
|
-
/* @__PURE__ */ (0,
|
|
5635
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5404
5636
|
"img",
|
|
5405
5637
|
{
|
|
5406
5638
|
src: fsBase64,
|
|
@@ -5417,77 +5649,77 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5417
5649
|
}
|
|
5418
5650
|
}
|
|
5419
5651
|
),
|
|
5420
|
-
/* @__PURE__ */ (0,
|
|
5421
|
-
zoomScale > 1 && /* @__PURE__ */ (0,
|
|
5652
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: closeFullscreen, className: "absolute top-4 right-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "close" }) }),
|
|
5653
|
+
zoomScale > 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => {
|
|
5422
5654
|
setZoomScale(1);
|
|
5423
5655
|
setZoomOffset({ x: 0, y: 0 });
|
|
5424
|
-
}, className: "absolute top-4 left-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ (0,
|
|
5425
|
-
history.length > 1 && /* @__PURE__ */ (0,
|
|
5426
|
-
/* @__PURE__ */ (0,
|
|
5656
|
+
}, className: "absolute top-4 left-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "zoom_out_map" }) }),
|
|
5657
|
+
history.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
5658
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => {
|
|
5427
5659
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
5428
|
-
}, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ (0,
|
|
5429
|
-
/* @__PURE__ */ (0,
|
|
5660
|
+
}, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
5661
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => {
|
|
5430
5662
|
if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
|
|
5431
|
-
}, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ (0,
|
|
5432
|
-
/* @__PURE__ */ (0,
|
|
5663
|
+
}, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
5664
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
|
|
5433
5665
|
currentIndex + 1,
|
|
5434
5666
|
" / ",
|
|
5435
5667
|
history.length
|
|
5436
5668
|
] })
|
|
5437
5669
|
] }),
|
|
5438
|
-
zoomScale === 1 && /* @__PURE__ */ (0,
|
|
5670
|
+
zoomScale === 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute bottom-6 right-4 text-[9px] text-white/20 font-mono", children: "Pinch zum Zoomen \xB7 Doppeltipp 2.5\xD7" })
|
|
5439
5671
|
]
|
|
5440
5672
|
}
|
|
5441
5673
|
);
|
|
5442
5674
|
}
|
|
5443
5675
|
if (showStart) {
|
|
5444
|
-
return /* @__PURE__ */ (0,
|
|
5445
|
-
/* @__PURE__ */ (0,
|
|
5676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
|
|
5677
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { ref: wsInputRef, type: "file", accept: ".zip", className: "hidden", onChange: (e) => {
|
|
5446
5678
|
const f = e.target.files?.[0];
|
|
5447
5679
|
if (f) handleProjectImport(f);
|
|
5448
5680
|
e.target.value = "";
|
|
5449
5681
|
} }),
|
|
5450
|
-
/* @__PURE__ */ (0,
|
|
5451
|
-
/* @__PURE__ */ (0,
|
|
5452
|
-
/* @__PURE__ */ (0,
|
|
5453
|
-
/* @__PURE__ */ (0,
|
|
5682
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
|
|
5683
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
|
|
5684
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" }),
|
|
5685
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "text-white text-[13px] font-mono", children: [
|
|
5454
5686
|
"v",
|
|
5455
5687
|
LIB_VERSION
|
|
5456
5688
|
] })
|
|
5457
5689
|
] }),
|
|
5458
|
-
/* @__PURE__ */ (0,
|
|
5690
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
5459
5691
|
"button",
|
|
5460
5692
|
{
|
|
5461
5693
|
onClick: toggleContrast,
|
|
5462
5694
|
className: "flex items-center gap-3 px-5 py-3 rounded-2xl border transition-colors",
|
|
5463
5695
|
style: { borderColor: highContrast ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.08)", background: highContrast ? "rgba(255,255,255,0.08)" : "transparent" },
|
|
5464
5696
|
children: [
|
|
5465
|
-
/* @__PURE__ */ (0,
|
|
5466
|
-
/* @__PURE__ */ (0,
|
|
5467
|
-
/* @__PURE__ */ (0,
|
|
5468
|
-
/* @__PURE__ */ (0,
|
|
5697
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[22px]", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.35)" }, children: highContrast ? "light_mode" : "dark_mode" }),
|
|
5698
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-start", children: [
|
|
5699
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[13px] font-bold", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.5)" }, children: highContrast ? "Hoher Kontrast" : "Normaler Kontrast" }),
|
|
5700
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px]", style: { color: "rgba(255,255,255,0.25)" }, children: "Tippen zum Umschalten" })
|
|
5469
5701
|
] })
|
|
5470
5702
|
]
|
|
5471
5703
|
}
|
|
5472
5704
|
),
|
|
5473
|
-
/* @__PURE__ */ (0,
|
|
5474
|
-
/* @__PURE__ */ (0,
|
|
5705
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5706
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
5475
5707
|
"button",
|
|
5476
5708
|
{
|
|
5477
5709
|
onClick: () => wsInputRef.current?.click(),
|
|
5478
5710
|
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",
|
|
5479
5711
|
style: { height: 56, background: projectLoaded ? "#16a34a" : "#0284c7" },
|
|
5480
5712
|
children: [
|
|
5481
|
-
/* @__PURE__ */ (0,
|
|
5713
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: projectLoaded ? "check_circle" : "folder_zip" }),
|
|
5482
5714
|
projectLoaded ? "Projekt geladen \u2713" : "Projekt laden (.zip)"
|
|
5483
5715
|
]
|
|
5484
5716
|
}
|
|
5485
5717
|
),
|
|
5486
|
-
!projectLoaded && /* @__PURE__ */ (0,
|
|
5718
|
+
!projectLoaded && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
|
|
5487
5719
|
] }),
|
|
5488
|
-
/* @__PURE__ */ (0,
|
|
5489
|
-
!initialHfToken && /* @__PURE__ */ (0,
|
|
5490
|
-
/* @__PURE__ */ (0,
|
|
5720
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5721
|
+
!initialHfToken && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex gap-2 w-full", children: [
|
|
5722
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5491
5723
|
"input",
|
|
5492
5724
|
{
|
|
5493
5725
|
type: "password",
|
|
@@ -5503,7 +5735,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5503
5735
|
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)" }
|
|
5504
5736
|
}
|
|
5505
5737
|
),
|
|
5506
|
-
hfTokenInput.trim() && /* @__PURE__ */ (0,
|
|
5738
|
+
hfTokenInput.trim() && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5507
5739
|
"button",
|
|
5508
5740
|
{
|
|
5509
5741
|
type: "button",
|
|
@@ -5514,9 +5746,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5514
5746
|
}
|
|
5515
5747
|
)
|
|
5516
5748
|
] }),
|
|
5517
|
-
!hfNamespace && /* @__PURE__ */ (0,
|
|
5518
|
-
/* @__PURE__ */ (0,
|
|
5519
|
-
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ (0,
|
|
5749
|
+
!hfNamespace && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-3 w-full", children: [
|
|
5750
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold flex-shrink-0", children: "State:" }),
|
|
5751
|
+
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5520
5752
|
"button",
|
|
5521
5753
|
{
|
|
5522
5754
|
onClick: () => {
|
|
@@ -5536,7 +5768,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5536
5768
|
ns
|
|
5537
5769
|
))
|
|
5538
5770
|
] }),
|
|
5539
|
-
hfToken && /* @__PURE__ */ (0,
|
|
5771
|
+
hfToken && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
5540
5772
|
"button",
|
|
5541
5773
|
{
|
|
5542
5774
|
disabled: isLoadingFromHF,
|
|
@@ -5558,15 +5790,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5558
5790
|
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",
|
|
5559
5791
|
style: { height: 56, background: "#f59e0b" },
|
|
5560
5792
|
children: [
|
|
5561
|
-
/* @__PURE__ */ (0,
|
|
5793
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromHF ? " animate-spin" : ""}`, children: isLoadingFromHF ? "sync" : "cloud_download" }),
|
|
5562
5794
|
isLoadingFromHF ? "Laden\u2026" : "Von HF laden"
|
|
5563
5795
|
]
|
|
5564
5796
|
}
|
|
5565
5797
|
),
|
|
5566
|
-
hfToken && /* @__PURE__ */ (0,
|
|
5798
|
+
hfToken && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand von Hugging Face laden" })
|
|
5567
5799
|
] }),
|
|
5568
|
-
onFetchServerProjects && /* @__PURE__ */ (0,
|
|
5569
|
-
/* @__PURE__ */ (0,
|
|
5800
|
+
onFetchServerProjects && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5801
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
5570
5802
|
"button",
|
|
5571
5803
|
{
|
|
5572
5804
|
disabled: isLoadingFromServer,
|
|
@@ -5587,35 +5819,35 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5587
5819
|
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",
|
|
5588
5820
|
style: { height: 56, background: "#7c3aed" },
|
|
5589
5821
|
children: [
|
|
5590
|
-
/* @__PURE__ */ (0,
|
|
5822
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromServer ? " animate-spin" : ""}`, children: isLoadingFromServer ? "sync" : "cloud_download" }),
|
|
5591
5823
|
isLoadingFromServer ? "Laden\u2026" : "Vom Server laden"
|
|
5592
5824
|
]
|
|
5593
5825
|
}
|
|
5594
5826
|
),
|
|
5595
|
-
/* @__PURE__ */ (0,
|
|
5827
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand vom Server wiederherstellen" })
|
|
5596
5828
|
] }),
|
|
5597
|
-
/* @__PURE__ */ (0,
|
|
5598
|
-
/* @__PURE__ */ (0,
|
|
5599
|
-
/* @__PURE__ */ (0,
|
|
5829
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5830
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
|
|
5831
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
|
|
5600
5832
|
{ id: "mobile", icon: "smartphone", label: "Mobile" },
|
|
5601
5833
|
{ id: "mobile-desktop", icon: "phonelink", label: "Mobile+" },
|
|
5602
5834
|
{ id: "desktop", icon: "desktop_windows", label: "Desktop" },
|
|
5603
5835
|
{ id: "tablet-landscape", icon: "tablet", label: "Landscape" }
|
|
5604
|
-
].map((opt) => /* @__PURE__ */ (0,
|
|
5836
|
+
].map((opt) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
5605
5837
|
"button",
|
|
5606
5838
|
{
|
|
5607
5839
|
onClick: () => startApp(opt.id),
|
|
5608
5840
|
className: "flex flex-col items-center gap-2 py-4 rounded-2xl border transition-colors",
|
|
5609
5841
|
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" },
|
|
5610
5842
|
children: [
|
|
5611
|
-
/* @__PURE__ */ (0,
|
|
5612
|
-
/* @__PURE__ */ (0,
|
|
5843
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[24px]", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.icon }),
|
|
5844
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[11px] font-bold", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.label })
|
|
5613
5845
|
]
|
|
5614
5846
|
},
|
|
5615
5847
|
opt.id
|
|
5616
5848
|
)) }),
|
|
5617
|
-
layoutChoice === "mobile-desktop" && /* @__PURE__ */ (0,
|
|
5618
|
-
layoutChoice === "tablet-landscape" && /* @__PURE__ */ (0,
|
|
5849
|
+
layoutChoice === "mobile-desktop" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
|
|
5850
|
+
layoutChoice === "tablet-landscape" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-white/20 text-[9px] text-center", children: "2-Spalten-Layout f\xFCr Landscape-Tablet im Desktop-Mode" })
|
|
5619
5851
|
] })
|
|
5620
5852
|
] });
|
|
5621
5853
|
}
|
|
@@ -5624,21 +5856,22 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5624
5856
|
const mdScale = mdMode ? window.innerWidth / 430 : 1;
|
|
5625
5857
|
const mdW = mdMode ? 430 : void 0;
|
|
5626
5858
|
const mdH = mdMode ? Math.ceil(window.innerHeight / mdScale) : void 0;
|
|
5627
|
-
const mobileRoot = /* @__PURE__ */ (0,
|
|
5859
|
+
const mobileRoot = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
|
|
5628
5860
|
width: mdMode ? mdW : "100vw",
|
|
5629
5861
|
height: mdMode ? mdH : "100dvh",
|
|
5630
5862
|
transform: mdMode ? `scale(${mdScale})` : void 0,
|
|
5631
5863
|
transformOrigin: mdMode ? "top left" : void 0,
|
|
5632
5864
|
...hcStyle || {}
|
|
5633
5865
|
}, children: [
|
|
5634
|
-
mobileTab === "labs" && /* @__PURE__ */ (0,
|
|
5866
|
+
mobileTab === "labs" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LabsTab, { services: labServices, onResult: (item) => {
|
|
5635
5867
|
const frame = item.frames[0];
|
|
5636
5868
|
if (frame?.base64) {
|
|
5637
5869
|
setCurrentResult(frameToGeneration(frame, item));
|
|
5638
5870
|
setMobileTab("stage");
|
|
5639
5871
|
}
|
|
5640
5872
|
} }) }),
|
|
5641
|
-
mobileTab === "
|
|
5873
|
+
mobileTab === "server" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col flex-1 min-h-0 relative", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ServerTab, { hfToken: hfToken || void 0 }) }),
|
|
5874
|
+
mobileTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5642
5875
|
TagManagerPanel,
|
|
5643
5876
|
{
|
|
5644
5877
|
workspaceTags,
|
|
@@ -5649,21 +5882,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5649
5882
|
onTagMove: handleTagMove
|
|
5650
5883
|
}
|
|
5651
5884
|
) }),
|
|
5652
|
-
mobileTab === "stage" && /* @__PURE__ */ (0,
|
|
5653
|
-
/* @__PURE__ */ (0,
|
|
5654
|
-
/* @__PURE__ */ (0,
|
|
5655
|
-
/* @__PURE__ */ (0,
|
|
5656
|
-
/* @__PURE__ */ (0,
|
|
5657
|
-
activeReferenceThumbnail ? /* @__PURE__ */ (0,
|
|
5658
|
-
/* @__PURE__ */ (0,
|
|
5659
|
-
/* @__PURE__ */ (0,
|
|
5660
|
-
/* @__PURE__ */ (0,
|
|
5661
|
-
] }) : /* @__PURE__ */ (0,
|
|
5662
|
-
/* @__PURE__ */ (0,
|
|
5663
|
-
/* @__PURE__ */ (0,
|
|
5885
|
+
mobileTab === "stage" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
5886
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
|
|
5887
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5888
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
|
|
5889
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1" }),
|
|
5890
|
+
activeReferenceThumbnail ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden mr-2", style: { height: 28 }, children: [
|
|
5891
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
5892
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
5893
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 active:text-white/80 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5894
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: handleSelectReference, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "add_photo_alternate" }) }),
|
|
5895
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: toggleContrast, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
5896
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setShowStart(true), className: "text-white/20 active:text-white/60 transition-colors mr-1", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "desktop_windows" }) })
|
|
5664
5897
|
] }),
|
|
5665
|
-
/* @__PURE__ */ (0,
|
|
5666
|
-
/* @__PURE__ */ (0,
|
|
5898
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `relative rounded-xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
5899
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5667
5900
|
"textarea",
|
|
5668
5901
|
{
|
|
5669
5902
|
value: activePrompt,
|
|
@@ -5673,26 +5906,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5673
5906
|
placeholder: "Prompt eingeben..."
|
|
5674
5907
|
}
|
|
5675
5908
|
),
|
|
5676
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */ (0,
|
|
5909
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center text-white/20 active:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
|
|
5677
5910
|
] }) }),
|
|
5678
|
-
/* @__PURE__ */ (0,
|
|
5911
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5679
5912
|
"button",
|
|
5680
5913
|
{
|
|
5681
5914
|
onClick: () => handleGenerateImage(),
|
|
5682
5915
|
disabled: !activePrompt.trim() || isGenerating,
|
|
5683
5916
|
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",
|
|
5684
5917
|
style: { height: 48, background: activePrompt.trim() && !isGenerating ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
|
|
5685
|
-
children: isGenerating ? /* @__PURE__ */ (0,
|
|
5686
|
-
/* @__PURE__ */ (0,
|
|
5687
|
-
/* @__PURE__ */ (0,
|
|
5688
|
-
] }) : /* @__PURE__ */ (0,
|
|
5689
|
-
/* @__PURE__ */ (0,
|
|
5690
|
-
/* @__PURE__ */ (0,
|
|
5918
|
+
children: isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
5919
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-4 h-4 border-t-2 border-white rounded-full animate-spin" }),
|
|
5920
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Generiere..." })
|
|
5921
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
5922
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
|
|
5923
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Generieren" })
|
|
5691
5924
|
] })
|
|
5692
5925
|
}
|
|
5693
5926
|
) }),
|
|
5694
|
-
/* @__PURE__ */ (0,
|
|
5695
|
-
/* @__PURE__ */ (0,
|
|
5927
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
|
|
5928
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
5696
5929
|
"div",
|
|
5697
5930
|
{
|
|
5698
5931
|
className: "w-full rounded-2xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center",
|
|
@@ -5706,25 +5939,25 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5706
5939
|
setTouchStartX(null);
|
|
5707
5940
|
},
|
|
5708
5941
|
children: [
|
|
5709
|
-
currentResult?.status === "processing" && /* @__PURE__ */ (0,
|
|
5710
|
-
/* @__PURE__ */ (0,
|
|
5711
|
-
/* @__PURE__ */ (0,
|
|
5942
|
+
currentResult?.status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
|
|
5943
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
|
|
5944
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[11px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
5712
5945
|
] }),
|
|
5713
|
-
currentResult?.status === "error" && /* @__PURE__ */ (0,
|
|
5714
|
-
/* @__PURE__ */ (0,
|
|
5715
|
-
/* @__PURE__ */ (0,
|
|
5716
|
-
/* @__PURE__ */ (0,
|
|
5946
|
+
currentResult?.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
|
|
5947
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
|
|
5948
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
|
|
5949
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => handleGenerateImage(currentResult.prompt), className: "px-4 py-2 rounded-lg border border-white/20 text-[13px] text-white/70 active:bg-white/10", children: "Erneut versuchen" })
|
|
5717
5950
|
] }),
|
|
5718
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0,
|
|
5719
|
-
!currentResult && /* @__PURE__ */ (0,
|
|
5720
|
-
/* @__PURE__ */ (0,
|
|
5721
|
-
/* @__PURE__ */ (0,
|
|
5951
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: currentResult.base64, className: "w-full h-full object-contain" }),
|
|
5952
|
+
!currentResult && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
5953
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
|
|
5954
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
5722
5955
|
] }),
|
|
5723
|
-
currentResult?.status === "done" && /* @__PURE__ */ (0,
|
|
5724
|
-
history.length > 1 && currentResult && /* @__PURE__ */ (0,
|
|
5725
|
-
/* @__PURE__ */ (0,
|
|
5726
|
-
/* @__PURE__ */ (0,
|
|
5727
|
-
/* @__PURE__ */ (0,
|
|
5956
|
+
currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: openFullscreen, className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center rounded-full bg-black/60 border border-white/10 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "fullscreen" }) }),
|
|
5957
|
+
history.length > 1 && currentResult && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
5958
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: goToPrev, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
5959
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
5960
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
|
|
5728
5961
|
currentIndex + 1,
|
|
5729
5962
|
" / ",
|
|
5730
5963
|
history.length
|
|
@@ -5733,33 +5966,33 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5733
5966
|
]
|
|
5734
5967
|
}
|
|
5735
5968
|
),
|
|
5736
|
-
currentResult?.status === "done" && /* @__PURE__ */ (0,
|
|
5737
|
-
/* @__PURE__ */ (0,
|
|
5738
|
-
/* @__PURE__ */ (0,
|
|
5739
|
-
/* @__PURE__ */ (0,
|
|
5969
|
+
currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex gap-2 mt-3", children: [
|
|
5970
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
|
|
5971
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
|
|
5972
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[12px] text-white/60", children: "Prompt" })
|
|
5740
5973
|
] }),
|
|
5741
|
-
/* @__PURE__ */ (0,
|
|
5742
|
-
/* @__PURE__ */ (0,
|
|
5743
|
-
/* @__PURE__ */ (0,
|
|
5974
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl bg-white/10 active:bg-white/15 transition-colors", style: { height: 44 }, children: [
|
|
5975
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
|
|
5976
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
|
|
5744
5977
|
] }),
|
|
5745
|
-
/* @__PURE__ */ (0,
|
|
5746
|
-
/* @__PURE__ */ (0,
|
|
5747
|
-
/* @__PURE__ */ (0,
|
|
5978
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: handleDownloadSingle, className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
|
|
5979
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "download" }),
|
|
5980
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[12px] text-white/60", children: "Laden" })
|
|
5748
5981
|
] })
|
|
5749
5982
|
] })
|
|
5750
5983
|
] })
|
|
5751
5984
|
] }),
|
|
5752
|
-
mobileTab === "browse" && /* @__PURE__ */ (0,
|
|
5753
|
-
/* @__PURE__ */ (0,
|
|
5754
|
-
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ (0,
|
|
5755
|
-
hfToken && /* @__PURE__ */ (0,
|
|
5985
|
+
mobileTab === "browse" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
5986
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
5987
|
+
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setActiveTab(tab), className: `flex-1 flex items-center justify-center gap-1.5 transition-colors text-[11px] font-bold uppercase tracking-wide ${activeTab === tab ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : "info" }) }, tab)),
|
|
5988
|
+
hfToken && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => refreshHF(), disabled: isHfRefreshing, className: "w-12 flex items-center justify-center text-white/20 active:text-white transition-colors disabled:opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
|
|
5756
5989
|
] }),
|
|
5757
|
-
/* @__PURE__ */ (0,
|
|
5758
|
-
activeTab === "history" && /* @__PURE__ */ (0,
|
|
5990
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5991
|
+
activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: (g) => {
|
|
5759
5992
|
setCurrentResult(g);
|
|
5760
5993
|
setMobileTab("stage");
|
|
5761
5994
|
}, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
|
|
5762
|
-
activeTab === "gallery" && /* @__PURE__ */ (0,
|
|
5995
|
+
activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5763
5996
|
MediaLibrary,
|
|
5764
5997
|
{
|
|
5765
5998
|
items: galleryItems,
|
|
@@ -5779,43 +6012,44 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5779
6012
|
}
|
|
5780
6013
|
}
|
|
5781
6014
|
),
|
|
5782
|
-
activeTab === "inspect" && /* @__PURE__ */ (0,
|
|
6015
|
+
activeTab === "inspect" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InspectPanel, { currentResult, history, onSelect: (g) => {
|
|
5783
6016
|
setCurrentResult(g);
|
|
5784
6017
|
} })
|
|
5785
6018
|
] })
|
|
5786
6019
|
] }),
|
|
5787
|
-
/* @__PURE__ */ (0,
|
|
5788
|
-
/* @__PURE__ */ (0,
|
|
5789
|
-
workspaceTags && /* @__PURE__ */ (0,
|
|
6020
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: mobileTab === "tools" ? "flex" : "none" }, className: "flex flex-col flex-1 min-h-0", children: [
|
|
6021
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
6022
|
+
workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => {
|
|
5790
6023
|
setLeftTab("prompt");
|
|
5791
6024
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
5792
6025
|
}, 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: [
|
|
5793
|
-
/* @__PURE__ */ (0,
|
|
6026
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
|
|
5794
6027
|
"Prompt"
|
|
5795
6028
|
] }),
|
|
5796
|
-
/* @__PURE__ */ (0,
|
|
6029
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => {
|
|
5797
6030
|
setLeftTab("hierarchy");
|
|
5798
6031
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
5799
6032
|
}, 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: [
|
|
5800
|
-
/* @__PURE__ */ (0,
|
|
6033
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
|
|
5801
6034
|
"Hierarchie"
|
|
5802
6035
|
] }),
|
|
5803
|
-
/* @__PURE__ */ (0,
|
|
5804
|
-
/* @__PURE__ */ (0,
|
|
6036
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => setActiveTab("setup"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "setup" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
6037
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "settings" }),
|
|
5805
6038
|
"Setup"
|
|
5806
6039
|
] }),
|
|
5807
|
-
/* @__PURE__ */ (0,
|
|
5808
|
-
/* @__PURE__ */ (0,
|
|
6040
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => setActiveTab("sync"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
6041
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "cloud_sync" }),
|
|
5809
6042
|
"Sync"
|
|
5810
6043
|
] }),
|
|
5811
|
-
/* @__PURE__ */ (0,
|
|
5812
|
-
/* @__PURE__ */ (0,
|
|
6044
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => setActiveTab("hftest"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "hftest" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
|
|
6045
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "biotech" }),
|
|
5813
6046
|
"HF"
|
|
5814
6047
|
] }),
|
|
5815
|
-
|
|
6048
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) }),
|
|
6049
|
+
workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setActiveTab("tags"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "tags" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
5816
6050
|
] }),
|
|
5817
|
-
/* @__PURE__ */ (0,
|
|
5818
|
-
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */ (0,
|
|
6051
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
6052
|
+
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5819
6053
|
ListView,
|
|
5820
6054
|
{
|
|
5821
6055
|
nodes,
|
|
@@ -5846,12 +6080,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5846
6080
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
5847
6081
|
}
|
|
5848
6082
|
) }),
|
|
5849
|
-
workspaceTags && /* @__PURE__ */ (0,
|
|
6083
|
+
workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { display: leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" ? "flex" : "none" }, className: "absolute inset-0 flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => {
|
|
5850
6084
|
handleGenerateImage(prompt);
|
|
5851
6085
|
setMobileTab("stage");
|
|
5852
6086
|
}, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
|
|
5853
|
-
activeTab === "setup" && /* @__PURE__ */ (0,
|
|
5854
|
-
activeTab === "sync" && /* @__PURE__ */ (0,
|
|
6087
|
+
activeTab === "setup" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
6088
|
+
activeTab === "sync" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5855
6089
|
ProjectSyncTab,
|
|
5856
6090
|
{
|
|
5857
6091
|
topSlot: syncTopSlot,
|
|
@@ -5875,7 +6109,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5875
6109
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
5876
6110
|
}
|
|
5877
6111
|
),
|
|
5878
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0,
|
|
6112
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5879
6113
|
TagManagerPanel,
|
|
5880
6114
|
{
|
|
5881
6115
|
workspaceTags,
|
|
@@ -5886,7 +6120,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5886
6120
|
onTagMove: handleTagMove
|
|
5887
6121
|
}
|
|
5888
6122
|
),
|
|
5889
|
-
activeTab === "hftest" && /* @__PURE__ */ (0,
|
|
6123
|
+
activeTab === "hftest" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5890
6124
|
HFTestTab,
|
|
5891
6125
|
{
|
|
5892
6126
|
token: hfToken,
|
|
@@ -5896,22 +6130,24 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5896
6130
|
confirmedEventKeys: hfConfirmedKeys,
|
|
5897
6131
|
imageUploadStatus
|
|
5898
6132
|
}
|
|
5899
|
-
) })
|
|
6133
|
+
) }),
|
|
6134
|
+
activeTab === "server" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ServerTab, { hfToken: hfToken || void 0 }) })
|
|
5900
6135
|
] })
|
|
5901
6136
|
] }),
|
|
5902
|
-
/* @__PURE__ */ (0,
|
|
6137
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
|
|
5903
6138
|
{ id: "tools", icon: "auto_fix_high", label: "Prompt" },
|
|
5904
6139
|
{ id: "stage", icon: "palette", label: "Stage" },
|
|
5905
6140
|
{ id: "labs", icon: "science", label: "Labs" },
|
|
5906
6141
|
...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
|
|
5907
|
-
{ id: "browse", icon: "photo_library", label: "Galerie" }
|
|
5908
|
-
|
|
5909
|
-
|
|
5910
|
-
/* @__PURE__ */ (0,
|
|
6142
|
+
{ id: "browse", icon: "photo_library", label: "Galerie" },
|
|
6143
|
+
{ id: "server", icon: "storage", label: "Server" }
|
|
6144
|
+
].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => setMobileTab(tab.id), className: `flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors ${mobileTab === tab.id ? "text-white" : "text-white/30"}`, children: [
|
|
6145
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
|
|
6146
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
|
|
5911
6147
|
] }, tab.id)) })
|
|
5912
6148
|
] });
|
|
5913
6149
|
if (mdMode) {
|
|
5914
|
-
return /* @__PURE__ */ (0,
|
|
6150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
|
|
5915
6151
|
}
|
|
5916
6152
|
return mobileRoot;
|
|
5917
6153
|
}
|
|
@@ -5919,17 +6155,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5919
6155
|
const tlScale = Math.min(window.innerWidth / 920, window.innerHeight / 520);
|
|
5920
6156
|
const tlW = 920;
|
|
5921
6157
|
const tlH = 520;
|
|
5922
|
-
return /* @__PURE__ */ (0,
|
|
5923
|
-
/* @__PURE__ */ (0,
|
|
5924
|
-
/* @__PURE__ */ (0,
|
|
5925
|
-
/* @__PURE__ */ (0,
|
|
5926
|
-
/* @__PURE__ */ (0,
|
|
5927
|
-
/* @__PURE__ */ (0,
|
|
5928
|
-
/* @__PURE__ */ (0,
|
|
5929
|
-
/* @__PURE__ */ (0,
|
|
6158
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { position: "fixed", inset: 0, background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", ...hcStyle || {} }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { width: tlW, height: tlH, transform: `scale(${tlScale})`, transformOrigin: "center center", display: "flex", flexDirection: "row", color: "#fff", overflow: "hidden", borderRadius: 0 }, children: [
|
|
6159
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { width: 320, height: tlH, display: "flex", flexDirection: "column", borderRight: "1px solid rgba(255,255,255,0.05)", background: "#000", flexShrink: 0 }, children: [
|
|
6160
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { height: 52, borderBottom: "1px solid rgba(255,255,255,0.05)", display: "flex", alignItems: "center", gap: 8, padding: "0 12px", flexShrink: 0 }, children: [
|
|
6161
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
6162
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
|
|
6163
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { flex: 1 } }),
|
|
6164
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
6165
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
|
|
5930
6166
|
] }),
|
|
5931
|
-
/* @__PURE__ */ (0,
|
|
5932
|
-
/* @__PURE__ */ (0,
|
|
6167
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { padding: "12px 12px 8px", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { position: "relative", borderRadius: 12, border: `1px solid ${isSynthesizing ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.1)"}`, background: "rgba(255,255,255,0.05)" }, children: [
|
|
6168
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5933
6169
|
"textarea",
|
|
5934
6170
|
{
|
|
5935
6171
|
value: activePrompt,
|
|
@@ -5938,27 +6174,27 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5938
6174
|
placeholder: "Prompt eingeben..."
|
|
5939
6175
|
}
|
|
5940
6176
|
),
|
|
5941
|
-
activePrompt && /* @__PURE__ */ (0,
|
|
6177
|
+
activePrompt && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setActivePrompt(""), style: { position: "absolute", top: 6, right: 6, width: 22, height: 22, display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
|
|
5942
6178
|
] }) }),
|
|
5943
|
-
/* @__PURE__ */ (0,
|
|
6179
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5944
6180
|
"button",
|
|
5945
6181
|
{
|
|
5946
6182
|
onClick: () => handleGenerateImage(),
|
|
5947
6183
|
disabled: !activePrompt.trim() || isGenerating,
|
|
5948
6184
|
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" },
|
|
5949
|
-
children: isGenerating ? /* @__PURE__ */ (0,
|
|
5950
|
-
/* @__PURE__ */ (0,
|
|
5951
|
-
/* @__PURE__ */ (0,
|
|
5952
|
-
] }) : /* @__PURE__ */ (0,
|
|
5953
|
-
/* @__PURE__ */ (0,
|
|
5954
|
-
/* @__PURE__ */ (0,
|
|
6185
|
+
children: isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
6186
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { width: 14, height: 14, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
|
|
6187
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Generiere..." })
|
|
6188
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
6189
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
|
|
6190
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Generieren" })
|
|
5955
6191
|
] })
|
|
5956
6192
|
}
|
|
5957
6193
|
) }),
|
|
5958
|
-
/* @__PURE__ */ (0,
|
|
6194
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }) })
|
|
5959
6195
|
] }),
|
|
5960
|
-
/* @__PURE__ */ (0,
|
|
5961
|
-
/* @__PURE__ */ (0,
|
|
6196
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
|
|
6197
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5962
6198
|
"div",
|
|
5963
6199
|
{
|
|
5964
6200
|
style: { flex: 1, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" },
|
|
@@ -5970,26 +6206,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5970
6206
|
else if (dx > 50) goToPrev();
|
|
5971
6207
|
setTouchStartX(null);
|
|
5972
6208
|
},
|
|
5973
|
-
children: /* @__PURE__ */ (0,
|
|
5974
|
-
currentResult?.status === "processing" && /* @__PURE__ */ (0,
|
|
5975
|
-
/* @__PURE__ */ (0,
|
|
5976
|
-
/* @__PURE__ */ (0,
|
|
6209
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { height: "100%", width: "100%", borderRadius: 20, border: "1px solid rgba(255,255,255,0.05)", background: "rgba(0,0,0,0.4)", position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }, children: [
|
|
6210
|
+
currentResult?.status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
6211
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { width: 36, height: 36, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
|
|
6212
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
|
|
5977
6213
|
] }),
|
|
5978
|
-
currentResult?.status === "error" && /* @__PURE__ */ (0,
|
|
5979
|
-
/* @__PURE__ */ (0,
|
|
5980
|
-
/* @__PURE__ */ (0,
|
|
5981
|
-
/* @__PURE__ */ (0,
|
|
6214
|
+
currentResult?.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
6215
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
|
|
6216
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
|
|
6217
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => handleGenerateImage(currentResult.prompt), style: { padding: "8px 16px", borderRadius: 8, border: "1px solid rgba(255,255,255,0.2)", fontSize: 11, color: "rgba(255,255,255,0.7)", background: "none", cursor: "pointer", fontFamily: "inherit" }, children: "Erneut versuchen" })
|
|
5982
6218
|
] }),
|
|
5983
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0,
|
|
5984
|
-
!currentResult && /* @__PURE__ */ (0,
|
|
5985
|
-
/* @__PURE__ */ (0,
|
|
5986
|
-
/* @__PURE__ */ (0,
|
|
6219
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
|
|
6220
|
+
!currentResult && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
|
|
6221
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
|
|
6222
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
|
|
5987
6223
|
] }),
|
|
5988
|
-
currentResult?.status === "done" && /* @__PURE__ */ (0,
|
|
5989
|
-
history.length > 1 && currentResult && /* @__PURE__ */ (0,
|
|
5990
|
-
/* @__PURE__ */ (0,
|
|
5991
|
-
/* @__PURE__ */ (0,
|
|
5992
|
-
/* @__PURE__ */ (0,
|
|
6224
|
+
currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: openFullscreen, style: { position: "absolute", top: 8, right: 8, width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "fullscreen" }) }),
|
|
6225
|
+
history.length > 1 && currentResult && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
6226
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: goToPrev, disabled: currentIndex <= 0, style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex <= 0 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_left" }) }),
|
|
6227
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, style: { position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex >= history.length - 1 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_right" }) }),
|
|
6228
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { position: "absolute", bottom: 8, left: "50%", transform: "translateX(-50%)", background: "rgba(0,0,0,0.6)", borderRadius: 999, padding: "2px 12px", fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: "monospace" }, children: [
|
|
5993
6229
|
currentIndex + 1,
|
|
5994
6230
|
" / ",
|
|
5995
6231
|
history.length
|
|
@@ -5998,42 +6234,42 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5998
6234
|
] })
|
|
5999
6235
|
}
|
|
6000
6236
|
),
|
|
6001
|
-
currentResult?.status === "done" && /* @__PURE__ */ (0,
|
|
6002
|
-
/* @__PURE__ */ (0,
|
|
6003
|
-
/* @__PURE__ */ (0,
|
|
6004
|
-
/* @__PURE__ */ (0,
|
|
6237
|
+
currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { padding: "0 16px 16px", display: "flex", gap: 8, flexShrink: 0 }, children: [
|
|
6238
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.6)", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }, children: [
|
|
6239
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
|
|
6240
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Prompt" })
|
|
6005
6241
|
] }),
|
|
6006
|
-
/* @__PURE__ */ (0,
|
|
6007
|
-
/* @__PURE__ */ (0,
|
|
6008
|
-
/* @__PURE__ */ (0,
|
|
6242
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "none", background: "rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.8)", fontSize: 11, fontWeight: "bold", cursor: "pointer", fontFamily: "inherit" }, children: [
|
|
6243
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
|
|
6244
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Referenz" })
|
|
6009
6245
|
] }),
|
|
6010
|
-
/* @__PURE__ */ (0,
|
|
6011
|
-
/* @__PURE__ */ (0,
|
|
6012
|
-
/* @__PURE__ */ (0,
|
|
6246
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: handleDownloadSingle, style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.6)", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }, children: [
|
|
6247
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "download" }),
|
|
6248
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Laden" })
|
|
6013
6249
|
] })
|
|
6014
6250
|
] })
|
|
6015
6251
|
] })
|
|
6016
6252
|
] }) });
|
|
6017
6253
|
}
|
|
6018
|
-
return /* @__PURE__ */ (0,
|
|
6019
|
-
/* @__PURE__ */ (0,
|
|
6020
|
-
/* @__PURE__ */ (0,
|
|
6021
|
-
/* @__PURE__ */ (0,
|
|
6022
|
-
!isLeftCollapsed && /* @__PURE__ */ (0,
|
|
6023
|
-
workspaceTags && /* @__PURE__ */ (0,
|
|
6024
|
-
/* @__PURE__ */ (0,
|
|
6254
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", style: hcStyle, children: [
|
|
6255
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute top-2 right-2 z-50", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setShowStart(true), className: "text-white/10 hover:text-white/30 transition-colors text-[10px]", children: "\u21C4" }) }),
|
|
6256
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col border-r border-white/5 overflow-hidden relative bg-black/10 shrink-0", style: { width: isLeftCollapsed ? 48 : leftPanelWidth, transition: "none" }, children: [
|
|
6257
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
|
|
6258
|
+
!isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-1 gap-1", children: [
|
|
6259
|
+
workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => setLeftTab("prompt"), className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "prompt" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`, children: [
|
|
6260
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
|
|
6025
6261
|
"Prompt"
|
|
6026
6262
|
] }),
|
|
6027
|
-
/* @__PURE__ */ (0,
|
|
6028
|
-
/* @__PURE__ */ (0,
|
|
6263
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => setLeftTab("hierarchy"), className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "hierarchy" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`, children: [
|
|
6264
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
|
|
6029
6265
|
"Hierarchie"
|
|
6030
6266
|
] }),
|
|
6031
|
-
workspaceTags && /* @__PURE__ */ (0,
|
|
6267
|
+
workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setActiveTab("tags"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "tags" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
6032
6268
|
] }),
|
|
6033
|
-
/* @__PURE__ */ (0,
|
|
6269
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setIsLeftCollapsed(!isLeftCollapsed), className: "material-symbols-outlined text-[18px] text-white/40 hover:text-white transition-all w-10 flex items-center justify-center", children: isLeftCollapsed ? "chevron_right" : "chevron_left" })
|
|
6034
6270
|
] }),
|
|
6035
|
-
!isLeftCollapsed && /* @__PURE__ */ (0,
|
|
6036
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0,
|
|
6271
|
+
!isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
6272
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
6037
6273
|
TagManagerPanel,
|
|
6038
6274
|
{
|
|
6039
6275
|
workspaceTags,
|
|
@@ -6044,11 +6280,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6044
6280
|
onTagMove: handleTagMove
|
|
6045
6281
|
}
|
|
6046
6282
|
),
|
|
6047
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ (0,
|
|
6048
|
-
/* @__PURE__ */ (0,
|
|
6049
|
-
/* @__PURE__ */ (0,
|
|
6283
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
|
|
6284
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
6285
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
6050
6286
|
] }) }),
|
|
6051
|
-
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ (0,
|
|
6287
|
+
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
6052
6288
|
ListView,
|
|
6053
6289
|
{
|
|
6054
6290
|
nodes,
|
|
@@ -6073,18 +6309,18 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6073
6309
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
6074
6310
|
}
|
|
6075
6311
|
) }),
|
|
6076
|
-
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ (0,
|
|
6312
|
+
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => handleGenerateImage(prompt), onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage })
|
|
6077
6313
|
] })
|
|
6078
6314
|
] }),
|
|
6079
|
-
!isLeftCollapsed && /* @__PURE__ */ (0,
|
|
6080
|
-
/* @__PURE__ */ (0,
|
|
6081
|
-
/* @__PURE__ */ (0,
|
|
6082
|
-
/* @__PURE__ */ (0,
|
|
6083
|
-
/* @__PURE__ */ (0,
|
|
6084
|
-
/* @__PURE__ */ (0,
|
|
6315
|
+
!isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { onMouseDown: startLeftResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
6316
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
|
|
6317
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
|
|
6318
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1.5", children: [
|
|
6319
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
6320
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] })
|
|
6085
6321
|
] }),
|
|
6086
|
-
/* @__PURE__ */ (0,
|
|
6087
|
-
/* @__PURE__ */ (0,
|
|
6322
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1 mx-auto", children: [
|
|
6323
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
6088
6324
|
"button",
|
|
6089
6325
|
{
|
|
6090
6326
|
onClick: () => setMiddlePanel("stage"),
|
|
@@ -6092,7 +6328,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6092
6328
|
children: "Stage"
|
|
6093
6329
|
}
|
|
6094
6330
|
),
|
|
6095
|
-
/* @__PURE__ */ (0,
|
|
6331
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
6096
6332
|
"button",
|
|
6097
6333
|
{
|
|
6098
6334
|
onClick: () => setMiddlePanel("labs"),
|
|
@@ -6101,68 +6337,74 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6101
6337
|
}
|
|
6102
6338
|
)
|
|
6103
6339
|
] }),
|
|
6104
|
-
/* @__PURE__ */ (0,
|
|
6105
|
-
activeReferenceThumbnail ? /* @__PURE__ */ (0,
|
|
6106
|
-
/* @__PURE__ */ (0,
|
|
6107
|
-
/* @__PURE__ */ (0,
|
|
6108
|
-
/* @__PURE__ */ (0,
|
|
6109
|
-
] }) : /* @__PURE__ */ (0,
|
|
6110
|
-
/* @__PURE__ */ (0,
|
|
6111
|
-
/* @__PURE__ */ (0,
|
|
6340
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
6341
|
+
activeReferenceThumbnail ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden", style: { height: 28 }, children: [
|
|
6342
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
6343
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
6344
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 hover:text-white/80 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
6345
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: handleSelectReference, className: "flex items-center gap-1 h-7 px-2 rounded-lg border border-white/10 text-white/30 hover:text-white/60 hover:border-white/20 transition-colors text-[10px] font-bold uppercase tracking-wide", children: [
|
|
6346
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
|
|
6347
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Ref" })
|
|
6112
6348
|
] }),
|
|
6113
|
-
/* @__PURE__ */ (0,
|
|
6114
|
-
/* @__PURE__ */ (0,
|
|
6349
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
|
|
6350
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
|
|
6115
6351
|
] })
|
|
6116
6352
|
] }),
|
|
6117
|
-
/* @__PURE__ */ (0,
|
|
6118
|
-
!isPromptCollapsed && /* @__PURE__ */ (0,
|
|
6119
|
-
/* @__PURE__ */ (0,
|
|
6120
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */ (0,
|
|
6353
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
|
|
6354
|
+
!isPromptCollapsed && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
6355
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("textarea", { value: activePrompt, onChange: (e) => setActivePrompt(e.target.value), className: "w-full bg-transparent border-none outline-none text-[12px] leading-relaxed text-white/80 resize-none h-20 dark-scrollbar", placeholder: "W\xE4hle einen Knoten oder tippe einen Prompt..." }),
|
|
6356
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors text-white/20 hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
6121
6357
|
] }) }),
|
|
6122
|
-
middlePanel === "labs" ? /* @__PURE__ */ (0,
|
|
6358
|
+
middlePanel === "labs" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LabsTab, { services: labServices, onResult: (item) => {
|
|
6123
6359
|
const frame = item.frames[0];
|
|
6124
6360
|
if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
|
|
6125
|
-
} }) }) : /* @__PURE__ */ (0,
|
|
6126
|
-
isGenerating && currentResult?.status === "done" && /* @__PURE__ */ (0,
|
|
6127
|
-
/* @__PURE__ */ (0,
|
|
6128
|
-
/* @__PURE__ */ (0,
|
|
6361
|
+
} }) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "h-full w-full max-w-4xl aspect-square rounded-3xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center group shadow-2xl", children: [
|
|
6362
|
+
isGenerating && currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute top-6 right-6 z-30 bg-black/60 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 flex items-center gap-3", children: [
|
|
6363
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
|
|
6364
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
|
|
6129
6365
|
] }),
|
|
6130
|
-
currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ (0,
|
|
6131
|
-
/* @__PURE__ */ (0,
|
|
6132
|
-
/* @__PURE__ */ (0,
|
|
6133
|
-
] }) : currentResult.status === "error" ? /* @__PURE__ */ (0,
|
|
6134
|
-
/* @__PURE__ */ (0,
|
|
6135
|
-
/* @__PURE__ */ (0,
|
|
6136
|
-
/* @__PURE__ */ (0,
|
|
6137
|
-
/* @__PURE__ */ (0,
|
|
6366
|
+
currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
|
|
6367
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
|
|
6368
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
6369
|
+
] }) : currentResult.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
|
|
6370
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
|
|
6371
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-2", children: [
|
|
6372
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
|
|
6373
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
|
|
6138
6374
|
] }),
|
|
6139
|
-
/* @__PURE__ */ (0,
|
|
6140
|
-
] }) : /* @__PURE__ */ (0,
|
|
6141
|
-
/* @__PURE__ */ (0,
|
|
6142
|
-
/* @__PURE__ */ (0,
|
|
6143
|
-
/* @__PURE__ */ (0,
|
|
6144
|
-
/* @__PURE__ */ (0,
|
|
6145
|
-
/* @__PURE__ */ (0,
|
|
6375
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
|
|
6376
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "h-full w-full relative flex items-center justify-center", children: [
|
|
6377
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
|
|
6378
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute bottom-6 flex gap-2 opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0 z-20", children: [
|
|
6379
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
|
|
6380
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
|
|
6381
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
|
|
6146
6382
|
] })
|
|
6147
|
-
] }) : /* @__PURE__ */ (0,
|
|
6148
|
-
/* @__PURE__ */ (0,
|
|
6149
|
-
/* @__PURE__ */ (0,
|
|
6383
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
6384
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
|
|
6385
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
6150
6386
|
] })
|
|
6151
6387
|
] }) })
|
|
6152
6388
|
] })
|
|
6153
6389
|
] }),
|
|
6154
|
-
!isRightCollapsed && /* @__PURE__ */ (0,
|
|
6155
|
-
/* @__PURE__ */ (0,
|
|
6156
|
-
/* @__PURE__ */ (0,
|
|
6157
|
-
/* @__PURE__ */ (0,
|
|
6158
|
-
|
|
6159
|
-
|
|
6160
|
-
|
|
6161
|
-
|
|
6162
|
-
|
|
6390
|
+
!isRightCollapsed && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { onMouseDown: startRightResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
6391
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", style: { width: isRightCollapsed ? 60 : rightPanelWidth, transition: "none" }, children: [
|
|
6392
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
|
|
6393
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-1", children: [
|
|
6394
|
+
["history", "gallery", "inspect", "setup", "sync", "tags"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => {
|
|
6395
|
+
setActiveTab(tab);
|
|
6396
|
+
setIsRightCollapsed(false);
|
|
6397
|
+
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : tab === "setup" ? "settings" : tab === "sync" ? "cloud_sync" : "label" }) }, tab)),
|
|
6398
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => {
|
|
6399
|
+
setActiveTab("server");
|
|
6400
|
+
setIsRightCollapsed(false);
|
|
6401
|
+
}, className: `w-10 flex items-center justify-center relative transition-colors ${activeTab === "server" ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) })
|
|
6402
|
+
] }),
|
|
6403
|
+
hfToken && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => refreshHF(), disabled: isHfRefreshing, className: "w-10 flex items-center justify-center text-white/20 hover:text-white/60 transition-colors disabled:opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
|
|
6404
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
|
|
6163
6405
|
] }),
|
|
6164
|
-
!isRightCollapsed && /* @__PURE__ */ (0,
|
|
6165
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0,
|
|
6406
|
+
!isRightCollapsed && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
6407
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
6166
6408
|
TagManagerPanel,
|
|
6167
6409
|
{
|
|
6168
6410
|
workspaceTags,
|
|
@@ -6173,12 +6415,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6173
6415
|
onTagMove: handleTagMove
|
|
6174
6416
|
}
|
|
6175
6417
|
),
|
|
6176
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ (0,
|
|
6177
|
-
/* @__PURE__ */ (0,
|
|
6178
|
-
/* @__PURE__ */ (0,
|
|
6418
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
|
|
6419
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
6420
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
6179
6421
|
] }) }),
|
|
6180
|
-
activeTab === "history" && /* @__PURE__ */ (0,
|
|
6181
|
-
activeTab === "gallery" && /* @__PURE__ */ (0,
|
|
6422
|
+
activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
|
|
6423
|
+
activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
6182
6424
|
MediaLibrary,
|
|
6183
6425
|
{
|
|
6184
6426
|
items: galleryItems,
|
|
@@ -6192,9 +6434,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6192
6434
|
onGenerateReference: (item) => handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true })
|
|
6193
6435
|
}
|
|
6194
6436
|
),
|
|
6195
|
-
activeTab === "inspect" && /* @__PURE__ */ (0,
|
|
6196
|
-
activeTab === "setup" && /* @__PURE__ */ (0,
|
|
6197
|
-
activeTab === "sync" && /* @__PURE__ */ (0,
|
|
6437
|
+
activeTab === "inspect" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
|
|
6438
|
+
activeTab === "setup" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
6439
|
+
activeTab === "sync" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
6198
6440
|
ProjectSyncTab,
|
|
6199
6441
|
{
|
|
6200
6442
|
topSlot: syncTopSlot,
|
|
@@ -6217,15 +6459,16 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6217
6459
|
},
|
|
6218
6460
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
6219
6461
|
}
|
|
6220
|
-
)
|
|
6462
|
+
),
|
|
6463
|
+
activeTab === "server" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ServerTab, { hfToken: hfToken || void 0 })
|
|
6221
6464
|
] })
|
|
6222
6465
|
] })
|
|
6223
6466
|
] });
|
|
6224
6467
|
}
|
|
6225
6468
|
|
|
6226
6469
|
// src/components/FaApp.tsx
|
|
6227
|
-
var
|
|
6228
|
-
var
|
|
6470
|
+
var import_react26 = require("react");
|
|
6471
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
6229
6472
|
function FaApp({
|
|
6230
6473
|
onGenerateImage,
|
|
6231
6474
|
onGeneratePrompt,
|
|
@@ -6244,8 +6487,8 @@ function FaApp({
|
|
|
6244
6487
|
onServerDelete,
|
|
6245
6488
|
buildInfo
|
|
6246
6489
|
}) {
|
|
6247
|
-
const [hfNamespace, setHfNamespace] = (0,
|
|
6248
|
-
(0,
|
|
6490
|
+
const [hfNamespace, setHfNamespace] = (0, import_react26.useState)(void 0);
|
|
6491
|
+
(0, import_react26.useEffect)(() => {
|
|
6249
6492
|
if (!serverBaseUrl) return;
|
|
6250
6493
|
fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
|
|
6251
6494
|
if (typeof d.hfNamespace === "string") setHfNamespace(d.hfNamespace);
|
|
@@ -6256,7 +6499,7 @@ function FaApp({
|
|
|
6256
6499
|
const result = await onGeneratePrompt(text, options);
|
|
6257
6500
|
return result.text;
|
|
6258
6501
|
};
|
|
6259
|
-
return /* @__PURE__ */ (0,
|
|
6502
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
6260
6503
|
AvatarArchitectApp,
|
|
6261
6504
|
{
|
|
6262
6505
|
onGenerateImage,
|
|
@@ -6278,7 +6521,7 @@ function FaApp({
|
|
|
6278
6521
|
// src/index.ts
|
|
6279
6522
|
init_hfStateService();
|
|
6280
6523
|
init_hfStateService();
|
|
6281
|
-
var LIB_VERSION = "2.0.
|
|
6524
|
+
var LIB_VERSION = "2.0.27";
|
|
6282
6525
|
// Annotate the CommonJS export names for ESM import in node:
|
|
6283
6526
|
0 && (module.exports = {
|
|
6284
6527
|
AvatarArchitectApp,
|
|
@@ -6303,6 +6546,7 @@ var LIB_VERSION = "2.0.23";
|
|
|
6303
6546
|
ProjectSyncTab,
|
|
6304
6547
|
PromptTab,
|
|
6305
6548
|
SectionLabel,
|
|
6549
|
+
ServerTab,
|
|
6306
6550
|
SetupPanel,
|
|
6307
6551
|
TagManagerPanel,
|
|
6308
6552
|
applyEvent,
|
|
@@ -6322,6 +6566,10 @@ var LIB_VERSION = "2.0.23";
|
|
|
6322
6566
|
cleanAiResponse,
|
|
6323
6567
|
createFlowServices,
|
|
6324
6568
|
exportProjectToZip,
|
|
6569
|
+
faServerDelete,
|
|
6570
|
+
faServerGet,
|
|
6571
|
+
faServerPost,
|
|
6572
|
+
faServerPut,
|
|
6325
6573
|
findForks,
|
|
6326
6574
|
findTips,
|
|
6327
6575
|
formatTreeToMarkdown,
|