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