@rslsp1/fa-app-tools 10.3.4 → 10.3.6
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 +20 -2
- package/dist/index.d.ts +20 -2
- package/dist/index.js +358 -83
- package/dist/index.mjs +656 -381
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -22,7 +22,7 @@ import "./chunk-FUY2OCVC.mjs";
|
|
|
22
22
|
import "./chunk-GKLCL2VQ.mjs";
|
|
23
23
|
|
|
24
24
|
// package.json
|
|
25
|
-
var version = "10.3.
|
|
25
|
+
var version = "10.3.6";
|
|
26
26
|
|
|
27
27
|
// src/hooks/useOnClickOutside.ts
|
|
28
28
|
import { useEffect } from "react";
|
|
@@ -1549,7 +1549,7 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
|
|
|
1549
1549
|
}
|
|
1550
1550
|
|
|
1551
1551
|
// src/components/AvatarArchitectApp.tsx
|
|
1552
|
-
import { useState as
|
|
1552
|
+
import { useState as useState27, useCallback as useCallback4, useMemo as useMemo8, useEffect as useEffect12, useRef as useRef11 } from "react";
|
|
1553
1553
|
|
|
1554
1554
|
// src/components/PromptTab.tsx
|
|
1555
1555
|
import { useRef as useRef5, useState as useState8 } from "react";
|
|
@@ -5465,7 +5465,7 @@ import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-r
|
|
|
5465
5465
|
function FlowWorkspacePicker({
|
|
5466
5466
|
tagBase,
|
|
5467
5467
|
selectedUserId,
|
|
5468
|
-
message:
|
|
5468
|
+
message: message3,
|
|
5469
5469
|
onSelectUser,
|
|
5470
5470
|
onSelectContext
|
|
5471
5471
|
}) {
|
|
@@ -5489,7 +5489,7 @@ function FlowWorkspacePicker({
|
|
|
5489
5489
|
/* @__PURE__ */ jsx28("strong", { children: "FineArt Flow" }),
|
|
5490
5490
|
/* @__PURE__ */ jsx28("small", { children: step === "user" ? "Benutzer w\xE4hlen" : `Kontext f\xFCr ${selectedUser?.username ?? `User ${selectedUserId}`}` })
|
|
5491
5491
|
] }),
|
|
5492
|
-
|
|
5492
|
+
message3 && /* @__PURE__ */ jsx28("p", { className: "flow-workspace-picker__warning", children: message3 }),
|
|
5493
5493
|
step === "user" ? /* @__PURE__ */ jsxs26("div", { className: "flow-workspace-picker__choices", "aria-label": "Benutzer w\xE4hlen", children: [
|
|
5494
5494
|
tagBase.users.map((user) => /* @__PURE__ */ jsxs26("button", { type: "button", onClick: () => chooseUser(user.id), children: [
|
|
5495
5495
|
/* @__PURE__ */ jsx28("span", { children: user.username }),
|
|
@@ -5538,6 +5538,7 @@ var FLOW_BRIDGE_REQUEST_EVENT = "fine-art-flow-bridge:request:v1";
|
|
|
5538
5538
|
var FLOW_BRIDGE_RESPONSE_EVENT = "fine-art-flow-bridge:response:v1";
|
|
5539
5539
|
var FLOW_BRIDGE_HELLO_TIMEOUT_MS = 1500;
|
|
5540
5540
|
var FLOW_BRIDGE_REQUEST_TIMEOUT_MS = 15e3;
|
|
5541
|
+
var FLOW_BRIDGE_PROXY_TIMEOUT_MS = 75e3;
|
|
5541
5542
|
function isRecord(value) {
|
|
5542
5543
|
return value !== null && typeof value === "object" && !Array.isArray(value);
|
|
5543
5544
|
}
|
|
@@ -5604,13 +5605,32 @@ function createFlowBridgeClient({
|
|
|
5604
5605
|
}
|
|
5605
5606
|
return { available: true, name: bridge.name, version: bridge.version, protocol: bridge.protocol, roundTripMs };
|
|
5606
5607
|
},
|
|
5607
|
-
async
|
|
5608
|
+
async proxy({ env, tokenSuffix, method, path }) {
|
|
5609
|
+
const started = clock();
|
|
5610
|
+
const reply = await exchange({ op: "proxy", env, tokenSuffix, method, path }, FLOW_BRIDGE_PROXY_TIMEOUT_MS);
|
|
5611
|
+
const roundTripMs = Math.round(clock() - started);
|
|
5612
|
+
if (!reply) {
|
|
5613
|
+
return { ok: false, transport: null, status: null, data: null, latencyMs: null, roundTripMs, error: noBridge(FLOW_BRIDGE_PROXY_TIMEOUT_MS) };
|
|
5614
|
+
}
|
|
5615
|
+
const ok = reply.ok === true;
|
|
5616
|
+
const body = isRecord(reply.body) && reply.body.encoding === "text" && typeof reply.body.data === "string" ? reply.body.data : null;
|
|
5617
|
+
return {
|
|
5618
|
+
ok,
|
|
5619
|
+
transport: typeof reply.transport === "string" ? reply.transport : null,
|
|
5620
|
+
status: nullableNumber(reply.status),
|
|
5621
|
+
data: ok ? body : null,
|
|
5622
|
+
latencyMs: nullableNumber(reply.latencyMs),
|
|
5623
|
+
roundTripMs,
|
|
5624
|
+
error: ok ? null : readError(reply.error)
|
|
5625
|
+
};
|
|
5626
|
+
},
|
|
5627
|
+
async request(request, { timeoutMs = requestTimeoutMs } = {}) {
|
|
5608
5628
|
const started = clock();
|
|
5609
5629
|
const tokenSuffix = "tokenSuffix" in request && request.tokenSuffix !== void 0 ? { tokenSuffix: request.tokenSuffix } : {};
|
|
5610
|
-
const reply = await exchange({ op: "request", target: request.target, method: request.method, path: request.path, ...tokenSuffix },
|
|
5630
|
+
const reply = await exchange({ op: "request", target: request.target, method: request.method, path: request.path, ...tokenSuffix }, timeoutMs);
|
|
5611
5631
|
const roundTripMs = Math.round(clock() - started);
|
|
5612
5632
|
if (!reply) {
|
|
5613
|
-
return { ok: false, transport: null, status: null, data: null, latencyMs: null, roundTripMs, error: noBridge(
|
|
5633
|
+
return { ok: false, transport: null, status: null, data: null, latencyMs: null, roundTripMs, error: noBridge(timeoutMs) };
|
|
5614
5634
|
}
|
|
5615
5635
|
const ok = reply.ok === true;
|
|
5616
5636
|
return {
|
|
@@ -5852,6 +5872,239 @@ var FlowBridgePanel = ({ appVersion, client, hfToken }) => {
|
|
|
5852
5872
|
] });
|
|
5853
5873
|
};
|
|
5854
5874
|
|
|
5875
|
+
// src/components/FlowFineArtApp.tsx
|
|
5876
|
+
import { useEffect as useEffect11, useMemo as useMemo7, useRef as useRef10, useState as useState26 } from "react";
|
|
5877
|
+
|
|
5878
|
+
// src/lib/flowAppLoader.ts
|
|
5879
|
+
var FLOW_APP_TARGETS = {
|
|
5880
|
+
dev: { bridgeTarget: "devMcp", backendUrl: "https://dev-app.art-by-rolands.de" },
|
|
5881
|
+
prod: { bridgeTarget: "prodMcp", backendUrl: "https://app.art-by-rolands.de" }
|
|
5882
|
+
};
|
|
5883
|
+
var FLOW_APP_FILES = ["react-runtime.js", "master.css", "app.js"];
|
|
5884
|
+
var FLOW_APP_REQUEST_TIMEOUT_MS = 75e3;
|
|
5885
|
+
var FLOW_APP_SCRIPT_TIMEOUT_MS = 15e3;
|
|
5886
|
+
var CSP_SETTLE_MS2 = 100;
|
|
5887
|
+
function isRecord3(value) {
|
|
5888
|
+
return value !== null && typeof value === "object" && !Array.isArray(value);
|
|
5889
|
+
}
|
|
5890
|
+
function readFlowAppFile(data, file) {
|
|
5891
|
+
if (!isRecord3(data)) return null;
|
|
5892
|
+
const { sha256, source } = data;
|
|
5893
|
+
if (data.file !== file) return null;
|
|
5894
|
+
if (typeof sha256 !== "string" || !/^[0-9a-f]{64}$/.test(sha256)) return null;
|
|
5895
|
+
if (typeof source !== "string" || source.length === 0) return null;
|
|
5896
|
+
return { file, sha256, source };
|
|
5897
|
+
}
|
|
5898
|
+
async function sha256Hex2(text) {
|
|
5899
|
+
if (!globalThis.crypto?.subtle) throw new Error("crypto.subtle ist in diesem Kontext nicht verfuegbar.");
|
|
5900
|
+
const digest = await globalThis.crypto.subtle.digest("SHA-256", new TextEncoder().encode(text));
|
|
5901
|
+
return [...new Uint8Array(digest)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
|
|
5902
|
+
}
|
|
5903
|
+
var message2 = (error) => error instanceof Error ? error.message : String(error);
|
|
5904
|
+
var wait2 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
5905
|
+
async function runScriptBlob(source, doc, timeoutMs, step) {
|
|
5906
|
+
const onViolation = (event) => {
|
|
5907
|
+
const violation = event;
|
|
5908
|
+
step.cspViolations.push(`${violation.effectiveDirective || violation.violatedDirective}: ${violation.blockedURI || "unbekannt"}`);
|
|
5909
|
+
};
|
|
5910
|
+
doc.addEventListener("securitypolicyviolation", onViolation);
|
|
5911
|
+
let url = null;
|
|
5912
|
+
let script = null;
|
|
5913
|
+
try {
|
|
5914
|
+
url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
|
|
5915
|
+
const element = doc.createElement("script");
|
|
5916
|
+
script = element;
|
|
5917
|
+
step.scriptEvent = await new Promise((resolve) => {
|
|
5918
|
+
const timer = setTimeout(() => resolve("timeout"), timeoutMs);
|
|
5919
|
+
element.addEventListener("load", () => {
|
|
5920
|
+
clearTimeout(timer);
|
|
5921
|
+
resolve("load");
|
|
5922
|
+
});
|
|
5923
|
+
element.addEventListener("error", () => {
|
|
5924
|
+
clearTimeout(timer);
|
|
5925
|
+
resolve("error");
|
|
5926
|
+
});
|
|
5927
|
+
element.src = url;
|
|
5928
|
+
(doc.head ?? doc.documentElement).appendChild(element);
|
|
5929
|
+
});
|
|
5930
|
+
} catch (error) {
|
|
5931
|
+
step.error = `Skript nicht einfuegbar: ${message2(error)}`;
|
|
5932
|
+
}
|
|
5933
|
+
if (step.scriptEvent !== "load") await wait2(CSP_SETTLE_MS2);
|
|
5934
|
+
doc.removeEventListener("securitypolicyviolation", onViolation);
|
|
5935
|
+
script?.remove();
|
|
5936
|
+
if (url) URL.revokeObjectURL(url);
|
|
5937
|
+
}
|
|
5938
|
+
function scriptFailure(step, expectation) {
|
|
5939
|
+
if (step.error) return step.error;
|
|
5940
|
+
if (step.scriptEvent === "load") return `script.onload, aber ${expectation} \u2014 Ausfuehrung nicht belegt.`;
|
|
5941
|
+
if (step.scriptEvent === "error") return "script.onerror \u2014 Skript nicht geladen oder blockiert.";
|
|
5942
|
+
return "Kein Skript-Ereignis innerhalb der Wartezeit.";
|
|
5943
|
+
}
|
|
5944
|
+
async function loadFlowApp({
|
|
5945
|
+
bridge,
|
|
5946
|
+
environment,
|
|
5947
|
+
tokenSuffix,
|
|
5948
|
+
win = window,
|
|
5949
|
+
doc = document,
|
|
5950
|
+
digest = sha256Hex2,
|
|
5951
|
+
scriptTimeoutMs = FLOW_APP_SCRIPT_TIMEOUT_MS,
|
|
5952
|
+
onStep
|
|
5953
|
+
}) {
|
|
5954
|
+
const target = FLOW_APP_TARGETS[environment];
|
|
5955
|
+
const globals = win;
|
|
5956
|
+
const steps = [];
|
|
5957
|
+
const report = () => onStep?.(steps.map((step) => ({ ...step, cspViolations: [...step.cspViolations] })));
|
|
5958
|
+
const fail3 = (step, error) => {
|
|
5959
|
+
step.error = error;
|
|
5960
|
+
report();
|
|
5961
|
+
return { ok: false, steps, error: `${step.file}: ${error}` };
|
|
5962
|
+
};
|
|
5963
|
+
let css = "";
|
|
5964
|
+
for (const file of FLOW_APP_FILES) {
|
|
5965
|
+
const step = { file, response: null, chars: null, hash: null, scriptEvent: null, cspViolations: [], error: null };
|
|
5966
|
+
steps.push(step);
|
|
5967
|
+
report();
|
|
5968
|
+
step.response = await bridge.request(
|
|
5969
|
+
{ target: target.bridgeTarget, method: "GET", path: `/flow-app/bundle/${file}`, tokenSuffix },
|
|
5970
|
+
{ timeoutMs: FLOW_APP_REQUEST_TIMEOUT_MS }
|
|
5971
|
+
);
|
|
5972
|
+
if (!step.response.ok) {
|
|
5973
|
+
const status = step.response.status !== null ? `HTTP ${step.response.status} \xB7 ` : "";
|
|
5974
|
+
return fail3(step, `${status}${step.response.error?.code}: ${step.response.error?.message}`);
|
|
5975
|
+
}
|
|
5976
|
+
const loaded = readFlowAppFile(step.response.data, file);
|
|
5977
|
+
if (!loaded) return fail3(step, "Antwort ohne gueltige Datei.");
|
|
5978
|
+
step.chars = loaded.source.length;
|
|
5979
|
+
try {
|
|
5980
|
+
step.hash = await digest(loaded.source) === loaded.sha256 ? "ok" : "mismatch";
|
|
5981
|
+
} catch {
|
|
5982
|
+
step.hash = "unavailable";
|
|
5983
|
+
}
|
|
5984
|
+
if (step.hash === "mismatch") return fail3(step, "SHA-256 des empfangenen Quelltexts weicht ab \u2014 nicht ausgefuehrt.");
|
|
5985
|
+
if (file === "master.css") {
|
|
5986
|
+
css = loaded.source;
|
|
5987
|
+
report();
|
|
5988
|
+
continue;
|
|
5989
|
+
}
|
|
5990
|
+
if (file === "app.js") delete globals.FineArtApp;
|
|
5991
|
+
await runScriptBlob(loaded.source, doc, scriptTimeoutMs, step);
|
|
5992
|
+
if (file === "react-runtime.js") {
|
|
5993
|
+
const ReactDOM = globals.ReactDOM;
|
|
5994
|
+
if (!isRecord3(globals.React) || typeof ReactDOM?.createRoot !== "function") {
|
|
5995
|
+
return fail3(step, scriptFailure(step, "window.React/window.ReactDOM.createRoot fehlen"));
|
|
5996
|
+
}
|
|
5997
|
+
} else if (typeof globals.FineArtApp !== "function") {
|
|
5998
|
+
return fail3(step, scriptFailure(step, "window.FineArtApp fehlt"));
|
|
5999
|
+
}
|
|
6000
|
+
report();
|
|
6001
|
+
}
|
|
6002
|
+
return {
|
|
6003
|
+
ok: true,
|
|
6004
|
+
steps,
|
|
6005
|
+
css,
|
|
6006
|
+
runtime: {
|
|
6007
|
+
React: globals.React,
|
|
6008
|
+
ReactDOM: globals.ReactDOM,
|
|
6009
|
+
FineArtApp: globals.FineArtApp
|
|
6010
|
+
},
|
|
6011
|
+
backendUrl: target.backendUrl
|
|
6012
|
+
};
|
|
6013
|
+
}
|
|
6014
|
+
|
|
6015
|
+
// src/components/FlowFineArtApp.tsx
|
|
6016
|
+
import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
6017
|
+
var FLOW_APP_STYLE_ID = "fa-flow-app-master-css";
|
|
6018
|
+
var BAR_HEIGHT = 32;
|
|
6019
|
+
function stepText(step) {
|
|
6020
|
+
const parts = [step.file];
|
|
6021
|
+
if (step.response) {
|
|
6022
|
+
parts.push(step.response.status !== null ? `HTTP ${step.response.status}` : "kein HTTP-Status");
|
|
6023
|
+
parts.push(`${step.response.transport ?? "kein Transport"} \xB7 ${step.response.roundTripMs} ms`);
|
|
6024
|
+
} else {
|
|
6025
|
+
parts.push("l\xE4dt\u2026");
|
|
6026
|
+
}
|
|
6027
|
+
if (step.chars !== null) parts.push(`${step.chars} Zeichen`);
|
|
6028
|
+
if (step.hash === "ok") parts.push("Hash gepr\xFCft");
|
|
6029
|
+
if (step.hash === "unavailable") parts.push("Hash nicht pr\xFCfbar");
|
|
6030
|
+
if (step.scriptEvent) parts.push(`Skript ${step.scriptEvent}`);
|
|
6031
|
+
if (step.cspViolations.length > 0) parts.push(`CSP: ${step.cspViolations.join("; ")}`);
|
|
6032
|
+
if (step.error) parts.push(`FEHLER: ${step.error}`);
|
|
6033
|
+
return parts.join(" \xB7 ");
|
|
6034
|
+
}
|
|
6035
|
+
var FlowFineArtApp = ({ environment, hfToken, appVersion, client, onClose }) => {
|
|
6036
|
+
const bridge = useMemo7(() => client ?? createFlowBridgeClient({ appVersion }), [client, appVersion]);
|
|
6037
|
+
const [access, setAccess] = useState26(null);
|
|
6038
|
+
const [steps, setSteps] = useState26([]);
|
|
6039
|
+
const [load, setLoad] = useState26(null);
|
|
6040
|
+
const [renderError, setRenderError] = useState26(null);
|
|
6041
|
+
const appRootRef = useRef10(null);
|
|
6042
|
+
const tokenSuffix = hfTokenSuffix(hfToken);
|
|
6043
|
+
const target = FLOW_APP_TARGETS[environment];
|
|
6044
|
+
useEffect11(() => {
|
|
6045
|
+
if (!tokenSuffix) return void 0;
|
|
6046
|
+
let active = true;
|
|
6047
|
+
void (async () => {
|
|
6048
|
+
const checked = bridge.proxy ? await bridge.proxy({ env: environment, tokenSuffix, method: "GET", path: "/api/status" }) : { ok: false, transport: null, status: null, data: null, latencyMs: null, roundTripMs: 0, error: { code: "no-bridge", message: "Bridge-Client ohne proxy." } };
|
|
6049
|
+
if (!active) return;
|
|
6050
|
+
setAccess(checked);
|
|
6051
|
+
if (!checked.ok || checked.status !== 200) return;
|
|
6052
|
+
const result = await loadFlowApp({ bridge, environment, tokenSuffix, onStep: (next) => {
|
|
6053
|
+
if (active) setSteps(next);
|
|
6054
|
+
} });
|
|
6055
|
+
if (active) setLoad(result);
|
|
6056
|
+
})();
|
|
6057
|
+
return () => {
|
|
6058
|
+
active = false;
|
|
6059
|
+
};
|
|
6060
|
+
}, [bridge, environment, tokenSuffix]);
|
|
6061
|
+
useEffect11(() => {
|
|
6062
|
+
const container = appRootRef.current;
|
|
6063
|
+
if (!load?.ok || !container) return void 0;
|
|
6064
|
+
const style = document.createElement("style");
|
|
6065
|
+
style.id = FLOW_APP_STYLE_ID;
|
|
6066
|
+
style.textContent = load.css;
|
|
6067
|
+
document.head.appendChild(style);
|
|
6068
|
+
let root = null;
|
|
6069
|
+
try {
|
|
6070
|
+
root = load.runtime.ReactDOM.createRoot(container);
|
|
6071
|
+
root.render(load.runtime.React.createElement(load.runtime.FineArtApp, {
|
|
6072
|
+
customTabs: [],
|
|
6073
|
+
apiKey: null,
|
|
6074
|
+
backendUrl: load.backendUrl,
|
|
6075
|
+
transport: "flow-bridge",
|
|
6076
|
+
bridgeEnv: environment,
|
|
6077
|
+
bridgeTokenSuffix: tokenSuffix
|
|
6078
|
+
}));
|
|
6079
|
+
} catch (error) {
|
|
6080
|
+
setRenderError(error instanceof Error ? error.message : String(error));
|
|
6081
|
+
}
|
|
6082
|
+
return () => {
|
|
6083
|
+
root?.unmount();
|
|
6084
|
+
style.remove();
|
|
6085
|
+
};
|
|
6086
|
+
}, [load, environment, tokenSuffix]);
|
|
6087
|
+
const accessFailed = access !== null && (!access.ok || access.status !== 200);
|
|
6088
|
+
const failed = !tokenSuffix || accessFailed || load !== null && !load.ok || renderError !== null;
|
|
6089
|
+
return /* @__PURE__ */ jsxs28("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col", "data-testid": "flow-fine-art-app", children: [
|
|
6090
|
+
/* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-3 px-3 text-[11px] font-mono text-white/60", style: { height: BAR_HEIGHT, borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: [
|
|
6091
|
+
/* @__PURE__ */ jsx30("button", { type: "button", onClick: onClose, className: "font-bold text-white/80", children: "\u2190 FlowFA" }),
|
|
6092
|
+
/* @__PURE__ */ jsx30("span", { children: `Fine-Art App \xB7 ${environment.toUpperCase()} \xB7 ${target.backendUrl}` })
|
|
6093
|
+
] }),
|
|
6094
|
+
!load?.ok && /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-1 p-4 text-[11px] font-mono break-all", "data-testid": "flow-fine-art-app-steps", children: [
|
|
6095
|
+
!tokenSuffix && /* @__PURE__ */ jsx30("span", { role: "alert", style: { color: "#f87171" }, children: "Kein HF-Token in FlowFA gesetzt \u2014 ohne ihn kein Zugang zum MCP-Host." }),
|
|
6096
|
+
tokenSuffix && !access && /* @__PURE__ */ jsx30("span", { "data-testid": "flow-fine-art-app-access", className: "text-white/60", children: `Datenzugang ${environment.toUpperCase()} wird gepr\xFCft \u2026` }),
|
|
6097
|
+
access && /* @__PURE__ */ jsx30("span", { "data-testid": "flow-fine-art-app-access", style: { color: accessFailed ? "#f87171" : "rgba(255,255,255,0.6)" }, children: access.ok ? `Datenzugang: GET /api/status \u2192 HTTP ${access.status} \xB7 ${access.transport ?? "kein Transport"} \xB7 ${access.roundTripMs} ms` : `Datenzugang: ${access.error?.code}: ${access.error?.message}` }),
|
|
6098
|
+
access?.error?.code === "not-approved" && /* @__PURE__ */ jsx30("span", { style: { color: "#fbbf24" }, children: `Extension-Popup \u201EFine-Art Flow Bridge\u201C \u2192 Fine-Art App: Datenzugang \u2192 ${environment.toUpperCase()} einschalten, dann neu starten.` }),
|
|
6099
|
+
accessFailed && /* @__PURE__ */ jsx30("span", { role: "alert", className: "font-bold", style: { color: "#f87171" }, children: "App nicht gestartet \u2014 ohne Datenzugang erreicht sie ihren Server nicht." }),
|
|
6100
|
+
steps.map((step) => /* @__PURE__ */ jsx30("span", { style: { color: step.error ? "#f87171" : "rgba(255,255,255,0.6)" }, children: stepText(step) }, step.file)),
|
|
6101
|
+
load && !load.ok && /* @__PURE__ */ jsx30("span", { role: "alert", className: "font-bold", style: { color: "#f87171" }, children: `App nicht gestartet \u2014 ${load.error}` })
|
|
6102
|
+
] }),
|
|
6103
|
+
renderError && /* @__PURE__ */ jsx30("span", { role: "alert", className: "p-4 text-[11px] font-mono", style: { color: "#f87171" }, children: `App nicht gerendert \u2014 ${renderError}` }),
|
|
6104
|
+
/* @__PURE__ */ jsx30("div", { ref: appRootRef, className: "flex-1 overflow-auto", style: { display: load?.ok && !failed ? "block" : "none" } })
|
|
6105
|
+
] });
|
|
6106
|
+
};
|
|
6107
|
+
|
|
5855
6108
|
// src/lib/flowBootstrapTarget.ts
|
|
5856
6109
|
var PROD_NAMESPACE = "app.art-by-rolands.de/";
|
|
5857
6110
|
var DEV_NAMESPACE = "dev-app.art-by-rolands.de/";
|
|
@@ -5902,11 +6155,15 @@ function resolveBootstrapTarget(input) {
|
|
|
5902
6155
|
environment: environmentForNamespace(namespace)
|
|
5903
6156
|
};
|
|
5904
6157
|
}
|
|
6158
|
+
function flowAppEnvironment(target, isDialogTarget, selectedNamespace) {
|
|
6159
|
+
if (isDialogTarget) return environmentForNamespace(normalizeSelectableNamespace(selectedNamespace));
|
|
6160
|
+
return target.ready ? target.environment : null;
|
|
6161
|
+
}
|
|
5905
6162
|
|
|
5906
6163
|
// src/components/AvatarArchitectApp.tsx
|
|
5907
|
-
import { Fragment as Fragment11, jsx as
|
|
6164
|
+
import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
5908
6165
|
function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, requireWorkspaceSelection = false, serverBaseUrl }) {
|
|
5909
|
-
|
|
6166
|
+
useEffect12(() => {
|
|
5910
6167
|
const id = "flow-styles";
|
|
5911
6168
|
if (!document.getElementById(id)) {
|
|
5912
6169
|
const style = document.createElement("style");
|
|
@@ -5915,33 +6172,34 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5915
6172
|
document.head.appendChild(style);
|
|
5916
6173
|
}
|
|
5917
6174
|
}, []);
|
|
5918
|
-
const [showStart, setShowStart] =
|
|
5919
|
-
const [layoutChoice, setLayoutChoice] =
|
|
6175
|
+
const [showStart, setShowStart] = useState27(true);
|
|
6176
|
+
const [layoutChoice, setLayoutChoice] = useState27(() => {
|
|
5920
6177
|
try {
|
|
5921
6178
|
return localStorage.getItem("aa-layout") || null;
|
|
5922
6179
|
} catch {
|
|
5923
6180
|
return null;
|
|
5924
6181
|
}
|
|
5925
6182
|
});
|
|
5926
|
-
const [hfToken, setHfToken] =
|
|
5927
|
-
const [
|
|
5928
|
-
const [
|
|
6183
|
+
const [hfToken, setHfToken] = useState27(initialHfToken || "");
|
|
6184
|
+
const [serverAppEnvironment, setServerAppEnvironment] = useState27(null);
|
|
6185
|
+
const [hfTokenInput, setHfTokenInput] = useState27(initialHfToken || "");
|
|
6186
|
+
const [hfNamespaceLocal, setHfNamespaceLocal] = useState27(() => {
|
|
5929
6187
|
try {
|
|
5930
6188
|
return normalizeSelectableNamespace(localStorage.getItem("aa-hf-namespace"));
|
|
5931
6189
|
} catch {
|
|
5932
6190
|
return DEFAULT_NAMESPACE;
|
|
5933
6191
|
}
|
|
5934
6192
|
});
|
|
5935
|
-
const [hfNamespaceFromServer, setHfNamespaceFromServer] =
|
|
5936
|
-
const [serverProbeFailed, setServerProbeFailed] =
|
|
5937
|
-
|
|
6193
|
+
const [hfNamespaceFromServer, setHfNamespaceFromServer] = useState27(null);
|
|
6194
|
+
const [serverProbeFailed, setServerProbeFailed] = useState27(false);
|
|
6195
|
+
useEffect12(() => {
|
|
5938
6196
|
if (hfNamespace !== void 0 || !serverBaseUrl) return;
|
|
5939
6197
|
fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
|
|
5940
6198
|
if (typeof d.hfNamespace === "string" && d.hfNamespace) setHfNamespaceFromServer(d.hfNamespace);
|
|
5941
6199
|
else setServerProbeFailed(true);
|
|
5942
6200
|
}).catch(() => setServerProbeFailed(true));
|
|
5943
6201
|
}, [hfNamespace, serverBaseUrl]);
|
|
5944
|
-
const [targetConfirmed, setTargetConfirmed] =
|
|
6202
|
+
const [targetConfirmed, setTargetConfirmed] = useState27(false);
|
|
5945
6203
|
const isDialogTarget = hfNamespace === void 0 && hfNamespaceFromServer === null && (!serverBaseUrl || serverProbeFailed);
|
|
5946
6204
|
const isProbingServer = hfNamespace === void 0 && !!serverBaseUrl && hfNamespaceFromServer === null && !serverProbeFailed;
|
|
5947
6205
|
const bootstrapTarget = resolveBootstrapTarget({
|
|
@@ -5952,8 +6210,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5952
6210
|
isStartDialogOpen: isDialogTarget && !targetConfirmed
|
|
5953
6211
|
});
|
|
5954
6212
|
const effectiveNamespace = bootstrapTarget.namespace ?? "";
|
|
5955
|
-
const kontextRef =
|
|
5956
|
-
const szenenPort =
|
|
6213
|
+
const kontextRef = useRef11(null);
|
|
6214
|
+
const szenenPort = useMemo8(() => hfToken && effectiveNamespace ? createFlowSzenenViewPort({
|
|
5957
6215
|
generateText: onGeneratePrompt,
|
|
5958
6216
|
token: hfToken,
|
|
5959
6217
|
namespace: effectiveNamespace,
|
|
@@ -5975,36 +6233,36 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5975
6233
|
const tagBaseResult = useTagBase(hfToken, effectiveNamespace);
|
|
5976
6234
|
const szenenKontextId = tagBaseResult.selectedContextId === null ? null : String(tagBaseResult.selectedContextId);
|
|
5977
6235
|
kontextRef.current = szenenKontextId;
|
|
5978
|
-
const [imageUploadStatus, setImageUploadStatus] =
|
|
5979
|
-
const [bootstrapLog, setBootstrapLog] =
|
|
5980
|
-
const [isBootstrapping, setIsBootstrapping] =
|
|
5981
|
-
const [hfMissingImages, setHfMissingImages] =
|
|
5982
|
-
const syncTopSlot = /* @__PURE__ */
|
|
5983
|
-
localOnlyCount > 0 && /* @__PURE__ */
|
|
6236
|
+
const [imageUploadStatus, setImageUploadStatus] = useState27(/* @__PURE__ */ new Map());
|
|
6237
|
+
const [bootstrapLog, setBootstrapLog] = useState27([]);
|
|
6238
|
+
const [isBootstrapping, setIsBootstrapping] = useState27(false);
|
|
6239
|
+
const [hfMissingImages, setHfMissingImages] = useState27([]);
|
|
6240
|
+
const syncTopSlot = /* @__PURE__ */ jsxs29(Fragment11, { children: [
|
|
6241
|
+
localOnlyCount > 0 && /* @__PURE__ */ jsxs29("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: [
|
|
5984
6242
|
"\u26A0 ",
|
|
5985
6243
|
localOnlyCount,
|
|
5986
6244
|
" lokale Event",
|
|
5987
6245
|
localOnlyCount > 1 ? "s" : "",
|
|
5988
6246
|
" noch nicht auf HF best\xE4tigt"
|
|
5989
6247
|
] }),
|
|
5990
|
-
pendingBufferCount > 0 && /* @__PURE__ */
|
|
6248
|
+
pendingBufferCount > 0 && /* @__PURE__ */ jsxs29("div", { style: { background: "linear-gradient(90deg,#f59e0b,#ef4444)", padding: "4px 10px", fontSize: 11, color: "#fff", borderRadius: 4, marginBottom: 4 }, children: [
|
|
5991
6249
|
pendingBufferCount,
|
|
5992
6250
|
" \xC4nderung",
|
|
5993
6251
|
pendingBufferCount > 1 ? "en" : "",
|
|
5994
6252
|
" lokal \u2014 bei Flow-Reload verloren wenn nicht synchronisiert"
|
|
5995
6253
|
] }),
|
|
5996
|
-
eventCount > 100 && /* @__PURE__ */
|
|
6254
|
+
eventCount > 100 && /* @__PURE__ */ jsxs29("div", { style: { background: "#dc2626", color: "#fff", padding: "5px 10px", borderRadius: 4, marginBottom: 4, fontWeight: 600, fontSize: 11 }, children: [
|
|
5997
6255
|
"\u26A0 ",
|
|
5998
6256
|
eventCount,
|
|
5999
6257
|
" Events nicht konsolidiert \u2014 Konsolidierung dringend empfohlen"
|
|
6000
6258
|
] }),
|
|
6001
|
-
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */
|
|
6259
|
+
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ jsxs29("div", { style: { background: "#44403c", color: "#a8a29e", padding: "4px 10px", borderRadius: 4, marginBottom: 4, fontSize: 11 }, children: [
|
|
6002
6260
|
eventCount,
|
|
6003
6261
|
" Events seit letzter Konsolidierung \u2014 Konsolidierung empfohlen"
|
|
6004
6262
|
] }),
|
|
6005
|
-
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */
|
|
6006
|
-
/* @__PURE__ */
|
|
6007
|
-
/* @__PURE__ */
|
|
6263
|
+
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ jsxs29("div", { style: { background: "#1c1917", border: "1px solid #44403c", borderRadius: 6, padding: "10px 12px" }, children: [
|
|
6264
|
+
/* @__PURE__ */ jsx31("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" }),
|
|
6265
|
+
/* @__PURE__ */ jsx31(
|
|
6008
6266
|
"button",
|
|
6009
6267
|
{
|
|
6010
6268
|
disabled: isBootstrapping || !effectiveNamespace,
|
|
@@ -6025,7 +6283,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6025
6283
|
children: isBootstrapping ? "Migriere\u2026" : "Legacy-Migration starten"
|
|
6026
6284
|
}
|
|
6027
6285
|
),
|
|
6028
|
-
bootstrapLog.length > 0 && /* @__PURE__ */
|
|
6286
|
+
bootstrapLog.length > 0 && /* @__PURE__ */ jsx31("div", { style: { marginTop: 6, fontFamily: "monospace", fontSize: 10, color: "#78716c", lineHeight: 1.6 }, children: bootstrapLog.map((l, i) => /* @__PURE__ */ jsx31("div", { children: l }, i)) })
|
|
6029
6287
|
] })
|
|
6030
6288
|
] });
|
|
6031
6289
|
const startApp = (choice) => {
|
|
@@ -6037,18 +6295,18 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6037
6295
|
setTargetConfirmed(true);
|
|
6038
6296
|
setShowStart(false);
|
|
6039
6297
|
};
|
|
6040
|
-
const [nodes, setNodes] =
|
|
6041
|
-
const [edges, setEdges] =
|
|
6042
|
-
const [history, setHistory] =
|
|
6043
|
-
const [galleryItems, setGalleryItems] =
|
|
6044
|
-
const galleryItemsRef =
|
|
6045
|
-
|
|
6298
|
+
const [nodes, setNodes] = useState27([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
|
|
6299
|
+
const [edges, setEdges] = useState27([]);
|
|
6300
|
+
const [history, setHistory] = useState27([]);
|
|
6301
|
+
const [galleryItems, setGalleryItems] = useState27([]);
|
|
6302
|
+
const galleryItemsRef = useRef11([]);
|
|
6303
|
+
useEffect12(() => {
|
|
6046
6304
|
galleryItemsRef.current = galleryItems;
|
|
6047
6305
|
}, [galleryItems]);
|
|
6048
|
-
const hfImageNotFoundRef =
|
|
6049
|
-
const [galleryVisibleCount, setGalleryVisibleCount] =
|
|
6050
|
-
const [historyVisibleCount, setHistoryVisibleCount] =
|
|
6051
|
-
const hfInFlightRef =
|
|
6306
|
+
const hfImageNotFoundRef = useRef11(/* @__PURE__ */ new Map());
|
|
6307
|
+
const [galleryVisibleCount, setGalleryVisibleCount] = useState27(20);
|
|
6308
|
+
const [historyVisibleCount, setHistoryVisibleCount] = useState27(20);
|
|
6309
|
+
const hfInFlightRef = useRef11(/* @__PURE__ */ new Set());
|
|
6052
6310
|
const loadThumbnailsForEntries = useCallback4(async (entries) => {
|
|
6053
6311
|
await loadThumbnailsSequentially(entries, {
|
|
6054
6312
|
inFlight: hfInFlightRef.current,
|
|
@@ -6069,7 +6327,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6069
6327
|
}
|
|
6070
6328
|
});
|
|
6071
6329
|
}, [hfToken, effectiveNamespace]);
|
|
6072
|
-
|
|
6330
|
+
useEffect12(() => {
|
|
6073
6331
|
if (!hfState) return;
|
|
6074
6332
|
if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
|
|
6075
6333
|
const hfIds = new Set(hfState.metadata.map((m) => m.id));
|
|
@@ -6096,24 +6354,24 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6096
6354
|
return [...localOnly, ...merged].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
|
|
6097
6355
|
});
|
|
6098
6356
|
}, [hfState]);
|
|
6099
|
-
const [activePrompt, setActivePrompt] =
|
|
6100
|
-
const [isSynthesizing, setIsSynthesizing] =
|
|
6101
|
-
const [activeGenerationsCount, setActiveGenerationsCount] =
|
|
6102
|
-
const [currentResult, setCurrentResult] =
|
|
6103
|
-
const [focusedNodeId, setFocusedNodeId] =
|
|
6104
|
-
const [leftTab, setLeftTab] =
|
|
6105
|
-
const [promptFeedback, setPromptFeedback] =
|
|
6106
|
-
const [lastPromptPayload, setLastPromptPayload] =
|
|
6107
|
-
const [isPromptTabGenerating, setIsPromptTabGenerating] =
|
|
6108
|
-
const [activeTab, setActiveTab] =
|
|
6109
|
-
const [mobileTab, setMobileTab] =
|
|
6110
|
-
const [middlePanel, setMiddlePanel] =
|
|
6111
|
-
const [recentLabItems, setRecentLabItems] =
|
|
6112
|
-
const [aspectRatio, setAspectRatio] =
|
|
6113
|
-
const [selectedModel, setSelectedModel] =
|
|
6114
|
-
const [seed, setSeed] =
|
|
6115
|
-
const [seedMode, setSeedMode] =
|
|
6116
|
-
const [imageCount, setImageCount] =
|
|
6357
|
+
const [activePrompt, setActivePrompt] = useState27("");
|
|
6358
|
+
const [isSynthesizing, setIsSynthesizing] = useState27(false);
|
|
6359
|
+
const [activeGenerationsCount, setActiveGenerationsCount] = useState27(0);
|
|
6360
|
+
const [currentResult, setCurrentResult] = useState27(null);
|
|
6361
|
+
const [focusedNodeId, setFocusedNodeId] = useState27(null);
|
|
6362
|
+
const [leftTab, setLeftTab] = useState27("prompt");
|
|
6363
|
+
const [promptFeedback, setPromptFeedback] = useState27(null);
|
|
6364
|
+
const [lastPromptPayload, setLastPromptPayload] = useState27(null);
|
|
6365
|
+
const [isPromptTabGenerating, setIsPromptTabGenerating] = useState27(false);
|
|
6366
|
+
const [activeTab, setActiveTab] = useState27("history");
|
|
6367
|
+
const [mobileTab, setMobileTab] = useState27("stage");
|
|
6368
|
+
const [middlePanel, setMiddlePanel] = useState27("stage");
|
|
6369
|
+
const [recentLabItems, setRecentLabItems] = useState27([]);
|
|
6370
|
+
const [aspectRatio, setAspectRatio] = useState27("1:1");
|
|
6371
|
+
const [selectedModel, setSelectedModel] = useState27("\u{1F34C} Nano Banana Pro");
|
|
6372
|
+
const [seed, setSeed] = useState27(Math.floor(Math.random() * 1e6));
|
|
6373
|
+
const [seedMode, setSeedMode] = useState27("random");
|
|
6374
|
+
const [imageCount, setImageCount] = useState27(() => {
|
|
6117
6375
|
try {
|
|
6118
6376
|
const v = parseInt(localStorage.getItem("aa-image-count") || "", 10);
|
|
6119
6377
|
return v >= 1 && v <= 8 ? v : 4;
|
|
@@ -6135,38 +6393,38 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6135
6393
|
{ label: "4 Bilder", value: "4" },
|
|
6136
6394
|
{ label: "8 Bilder", value: "8" }
|
|
6137
6395
|
];
|
|
6138
|
-
const [isLeftCollapsed, setIsLeftCollapsed] =
|
|
6139
|
-
const [isRightCollapsed, setIsRightCollapsed] =
|
|
6140
|
-
const [leftPanelWidth, setLeftPanelWidth] =
|
|
6396
|
+
const [isLeftCollapsed, setIsLeftCollapsed] = useState27(false);
|
|
6397
|
+
const [isRightCollapsed, setIsRightCollapsed] = useState27(false);
|
|
6398
|
+
const [leftPanelWidth, setLeftPanelWidth] = useState27(() => {
|
|
6141
6399
|
try {
|
|
6142
6400
|
return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
|
|
6143
6401
|
} catch {
|
|
6144
6402
|
return 260;
|
|
6145
6403
|
}
|
|
6146
6404
|
});
|
|
6147
|
-
const [rightPanelWidth, setRightPanelWidth] =
|
|
6405
|
+
const [rightPanelWidth, setRightPanelWidth] = useState27(() => {
|
|
6148
6406
|
try {
|
|
6149
6407
|
return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
|
|
6150
6408
|
} catch {
|
|
6151
6409
|
return 320;
|
|
6152
6410
|
}
|
|
6153
6411
|
});
|
|
6154
|
-
const [isPromptCollapsed, setIsPromptCollapsed] =
|
|
6155
|
-
const [workspaceTags, setWorkspaceTags] =
|
|
6156
|
-
const [highContrast, setHighContrast] =
|
|
6412
|
+
const [isPromptCollapsed, setIsPromptCollapsed] = useState27(false);
|
|
6413
|
+
const [workspaceTags, setWorkspaceTags] = useState27(null);
|
|
6414
|
+
const [highContrast, setHighContrast] = useState27(() => {
|
|
6157
6415
|
try {
|
|
6158
6416
|
return localStorage.getItem("aa-contrast") === "high";
|
|
6159
6417
|
} catch {
|
|
6160
6418
|
return false;
|
|
6161
6419
|
}
|
|
6162
6420
|
});
|
|
6163
|
-
const [activeReferenceId, setActiveReferenceId] =
|
|
6164
|
-
const [activeReferenceThumbnail, setActiveReferenceThumbnail] =
|
|
6165
|
-
const [isScanningImage, setIsScanningImage] =
|
|
6166
|
-
const [touchStartX, setTouchStartX] =
|
|
6167
|
-
const [isFullscreen, setIsFullscreen] =
|
|
6168
|
-
const [zoomScale, setZoomScale] =
|
|
6169
|
-
const [zoomOffset, setZoomOffset] =
|
|
6421
|
+
const [activeReferenceId, setActiveReferenceId] = useState27(null);
|
|
6422
|
+
const [activeReferenceThumbnail, setActiveReferenceThumbnail] = useState27(null);
|
|
6423
|
+
const [isScanningImage, setIsScanningImage] = useState27(false);
|
|
6424
|
+
const [touchStartX, setTouchStartX] = useState27(null);
|
|
6425
|
+
const [isFullscreen, setIsFullscreen] = useState27(false);
|
|
6426
|
+
const [zoomScale, setZoomScale] = useState27(1);
|
|
6427
|
+
const [zoomOffset, setZoomOffset] = useState27({ x: 0, y: 0 });
|
|
6170
6428
|
const { historyVisible, galleryVisible } = computePrefetchVisibility({
|
|
6171
6429
|
layoutChoice,
|
|
6172
6430
|
appShellVisible: !showStart && !requireWorkspaceSelection && !(isFullscreen && !!currentResult?.base64),
|
|
@@ -6183,9 +6441,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6183
6441
|
galleryVisibleCount,
|
|
6184
6442
|
loadThumbnailsForEntries
|
|
6185
6443
|
});
|
|
6186
|
-
const lastPinchDist =
|
|
6187
|
-
const lastTapTime =
|
|
6188
|
-
const dragStart =
|
|
6444
|
+
const lastPinchDist = useRef11(null);
|
|
6445
|
+
const lastTapTime = useRef11(0);
|
|
6446
|
+
const dragStart = useRef11(null);
|
|
6189
6447
|
const openFullscreen = () => {
|
|
6190
6448
|
setIsFullscreen(true);
|
|
6191
6449
|
setZoomScale(1);
|
|
@@ -6248,7 +6506,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6248
6506
|
setActiveReferenceId(null);
|
|
6249
6507
|
setActiveReferenceThumbnail(null);
|
|
6250
6508
|
};
|
|
6251
|
-
const labServices =
|
|
6509
|
+
const labServices = useMemo8(() => {
|
|
6252
6510
|
const available = groupGenerationsToLabItems([...galleryItems, ...history]);
|
|
6253
6511
|
return {
|
|
6254
6512
|
availableItems: available,
|
|
@@ -6328,7 +6586,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6328
6586
|
setIsScanningImage(false);
|
|
6329
6587
|
}
|
|
6330
6588
|
};
|
|
6331
|
-
const currentIndex =
|
|
6589
|
+
const currentIndex = useMemo8(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
|
|
6332
6590
|
const goToPrev = useCallback4(() => {
|
|
6333
6591
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
6334
6592
|
}, [currentIndex, history]);
|
|
@@ -6357,13 +6615,13 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6357
6615
|
});
|
|
6358
6616
|
}
|
|
6359
6617
|
}, [hfToken, effectiveNamespace, hfWriteEvent]);
|
|
6360
|
-
const currentGroup =
|
|
6618
|
+
const currentGroup = useMemo8(() => {
|
|
6361
6619
|
if (!currentResult?.prompt) return [];
|
|
6362
6620
|
const groups = groupByPrompt(galleryItems.filter((g) => g.status === "done" && !!g.base64));
|
|
6363
6621
|
const group = groups.find((gr) => gr.prompt === currentResult.prompt);
|
|
6364
6622
|
return group ? group.items : [];
|
|
6365
6623
|
}, [galleryItems, currentResult?.prompt]);
|
|
6366
|
-
|
|
6624
|
+
useEffect12(() => {
|
|
6367
6625
|
if (!currentResult?.prompt || !hfToken || !effectiveNamespace || !hfState) return;
|
|
6368
6626
|
const siblings = galleryItemsRef.current.filter(
|
|
6369
6627
|
(g) => g.prompt === currentResult.prompt && !g.base64 && !hfImageNotFoundRef.current.has(g.id)
|
|
@@ -6389,15 +6647,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6389
6647
|
})();
|
|
6390
6648
|
}, [currentResult?.id, currentResult?.prompt]);
|
|
6391
6649
|
const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
|
|
6392
|
-
const runningBadge = activeGenerationsCount > 0 ? /* @__PURE__ */
|
|
6650
|
+
const runningBadge = activeGenerationsCount > 0 ? /* @__PURE__ */ jsxs29(
|
|
6393
6651
|
"div",
|
|
6394
6652
|
{
|
|
6395
6653
|
className: "flex items-center gap-1 rounded-full bg-sky-500/15 border border-sky-400/30 px-2 shrink-0",
|
|
6396
6654
|
style: { height: 24 },
|
|
6397
6655
|
title: `${activeGenerationsCount} Generierung${activeGenerationsCount === 1 ? "" : "en"} l\xE4uft gerade`,
|
|
6398
6656
|
children: [
|
|
6399
|
-
/* @__PURE__ */
|
|
6400
|
-
/* @__PURE__ */
|
|
6657
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-sky-300", style: { fontSize: 14, lineHeight: 1 }, children: "autorenew" }),
|
|
6658
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[11px] font-bold text-sky-300 tabular-nums", children: activeGenerationsCount })
|
|
6401
6659
|
]
|
|
6402
6660
|
}
|
|
6403
6661
|
) : null;
|
|
@@ -6410,7 +6668,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6410
6668
|
return `${indent}- ${node.data.label || "(unbenannt)"}
|
|
6411
6669
|
` + childrenIds.map((id) => getSubtreeFormat(id, depth + 1)).join("");
|
|
6412
6670
|
}, [nodes, edges]);
|
|
6413
|
-
const activePath =
|
|
6671
|
+
const activePath = useMemo8(() => {
|
|
6414
6672
|
if (!focusedNodeId) return /* @__PURE__ */ new Set();
|
|
6415
6673
|
const path = /* @__PURE__ */ new Set([focusedNodeId]);
|
|
6416
6674
|
let currId = focusedNodeId;
|
|
@@ -6686,7 +6944,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6686
6944
|
if (isFullscreen && currentResult?.base64) {
|
|
6687
6945
|
const fsRaw = currentResult.fullBase64 || currentResult.base64;
|
|
6688
6946
|
const fsBase64 = fsRaw.startsWith("data:") ? fsRaw : `data:image/png;base64,${fsRaw}`;
|
|
6689
|
-
return /* @__PURE__ */
|
|
6947
|
+
return /* @__PURE__ */ jsxs29(
|
|
6690
6948
|
"div",
|
|
6691
6949
|
{
|
|
6692
6950
|
className: "fixed inset-0 bg-black z-50 flex items-center justify-center overflow-hidden touch-none",
|
|
@@ -6694,7 +6952,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6694
6952
|
onTouchMove: handleFsTouchMove,
|
|
6695
6953
|
onTouchEnd: handleFsTouchEnd,
|
|
6696
6954
|
children: [
|
|
6697
|
-
/* @__PURE__ */
|
|
6955
|
+
/* @__PURE__ */ jsx31(
|
|
6698
6956
|
"img",
|
|
6699
6957
|
{
|
|
6700
6958
|
src: fsBase64,
|
|
@@ -6711,57 +6969,61 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6711
6969
|
}
|
|
6712
6970
|
}
|
|
6713
6971
|
),
|
|
6714
|
-
/* @__PURE__ */
|
|
6715
|
-
zoomScale > 1 && /* @__PURE__ */
|
|
6972
|
+
/* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined text-[22px]", children: "close" }) }),
|
|
6973
|
+
zoomScale > 1 && /* @__PURE__ */ jsx31("button", { onClick: () => {
|
|
6716
6974
|
setZoomScale(1);
|
|
6717
6975
|
setZoomOffset({ x: 0, y: 0 });
|
|
6718
|
-
}, 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__ */
|
|
6719
|
-
history.length > 1 && /* @__PURE__ */
|
|
6720
|
-
/* @__PURE__ */
|
|
6976
|
+
}, 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__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "zoom_out_map" }) }),
|
|
6977
|
+
history.length > 1 && /* @__PURE__ */ jsxs29(Fragment11, { children: [
|
|
6978
|
+
/* @__PURE__ */ jsx31("button", { onClick: () => {
|
|
6721
6979
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
6722
|
-
}, 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__ */
|
|
6723
|
-
/* @__PURE__ */
|
|
6980
|
+
}, 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__ */ jsx31("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
6981
|
+
/* @__PURE__ */ jsx31("button", { onClick: () => {
|
|
6724
6982
|
if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
|
|
6725
|
-
}, 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__ */
|
|
6726
|
-
/* @__PURE__ */
|
|
6983
|
+
}, 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__ */ jsx31("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
6984
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
6727
6985
|
currentIndex + 1,
|
|
6728
6986
|
" / ",
|
|
6729
6987
|
history.length
|
|
6730
6988
|
] })
|
|
6731
6989
|
] }),
|
|
6732
|
-
zoomScale === 1 && /* @__PURE__ */
|
|
6990
|
+
zoomScale === 1 && /* @__PURE__ */ jsx31("div", { className: "absolute bottom-6 right-4 text-[9px] text-white/20 font-mono", children: "Pinch zum Zoomen \xB7 Doppeltipp 2.5\xD7" })
|
|
6733
6991
|
]
|
|
6734
6992
|
}
|
|
6735
6993
|
);
|
|
6736
6994
|
}
|
|
6995
|
+
if (serverAppEnvironment) {
|
|
6996
|
+
return /* @__PURE__ */ jsx31(FlowFineArtApp, { environment: serverAppEnvironment, hfToken, appVersion: version, onClose: () => setServerAppEnvironment(null) });
|
|
6997
|
+
}
|
|
6737
6998
|
if (showStart) {
|
|
6738
|
-
|
|
6739
|
-
|
|
6740
|
-
|
|
6741
|
-
/* @__PURE__ */
|
|
6742
|
-
/* @__PURE__ */
|
|
6999
|
+
const serverAppTarget = flowAppEnvironment(bootstrapTarget, isDialogTarget, hfNamespaceLocal);
|
|
7000
|
+
return /* @__PURE__ */ jsxs29("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
|
|
7001
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-1", children: [
|
|
7002
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
|
|
7003
|
+
/* @__PURE__ */ jsx31("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" }),
|
|
7004
|
+
/* @__PURE__ */ jsxs29("span", { className: "text-white text-[13px] font-mono", children: [
|
|
6743
7005
|
"v",
|
|
6744
7006
|
version
|
|
6745
7007
|
] })
|
|
6746
7008
|
] }),
|
|
6747
|
-
/* @__PURE__ */
|
|
7009
|
+
/* @__PURE__ */ jsxs29(
|
|
6748
7010
|
"button",
|
|
6749
7011
|
{
|
|
6750
7012
|
onClick: toggleContrast,
|
|
6751
7013
|
className: "flex items-center gap-3 px-5 py-3 rounded-2xl border transition-colors",
|
|
6752
7014
|
style: { borderColor: highContrast ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.08)", background: highContrast ? "rgba(255,255,255,0.08)" : "transparent" },
|
|
6753
7015
|
children: [
|
|
6754
|
-
/* @__PURE__ */
|
|
6755
|
-
/* @__PURE__ */
|
|
6756
|
-
/* @__PURE__ */
|
|
6757
|
-
/* @__PURE__ */
|
|
7016
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[22px]", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.35)" }, children: highContrast ? "light_mode" : "dark_mode" }),
|
|
7017
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-start", children: [
|
|
7018
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[13px] font-bold", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.5)" }, children: highContrast ? "Hoher Kontrast" : "Normaler Kontrast" }),
|
|
7019
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[10px]", style: { color: "rgba(255,255,255,0.25)" }, children: "Tippen zum Umschalten" })
|
|
6758
7020
|
] })
|
|
6759
7021
|
]
|
|
6760
7022
|
}
|
|
6761
7023
|
),
|
|
6762
|
-
/* @__PURE__ */
|
|
6763
|
-
!initialHfToken && /* @__PURE__ */
|
|
6764
|
-
/* @__PURE__ */
|
|
7024
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
7025
|
+
!initialHfToken && /* @__PURE__ */ jsxs29("div", { className: "flex gap-2 w-full", children: [
|
|
7026
|
+
/* @__PURE__ */ jsx31(
|
|
6765
7027
|
"input",
|
|
6766
7028
|
{
|
|
6767
7029
|
type: "password",
|
|
@@ -6777,7 +7039,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6777
7039
|
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)" }
|
|
6778
7040
|
}
|
|
6779
7041
|
),
|
|
6780
|
-
hfTokenInput.trim() && /* @__PURE__ */
|
|
7042
|
+
hfTokenInput.trim() && /* @__PURE__ */ jsx31(
|
|
6781
7043
|
"button",
|
|
6782
7044
|
{
|
|
6783
7045
|
type: "button",
|
|
@@ -6788,9 +7050,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6788
7050
|
}
|
|
6789
7051
|
)
|
|
6790
7052
|
] }),
|
|
6791
|
-
isDialogTarget && /* @__PURE__ */
|
|
6792
|
-
/* @__PURE__ */
|
|
6793
|
-
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */
|
|
7053
|
+
isDialogTarget && /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-3 w-full", children: [
|
|
7054
|
+
/* @__PURE__ */ jsx31("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold flex-shrink-0", children: "State:" }),
|
|
7055
|
+
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ jsx31(
|
|
6794
7056
|
"button",
|
|
6795
7057
|
{
|
|
6796
7058
|
onClick: () => {
|
|
@@ -6811,48 +7073,61 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6811
7073
|
))
|
|
6812
7074
|
] })
|
|
6813
7075
|
] }),
|
|
6814
|
-
/* @__PURE__ */
|
|
6815
|
-
/* @__PURE__ */
|
|
6816
|
-
/* @__PURE__ */
|
|
7076
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
7077
|
+
/* @__PURE__ */ jsx31("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
|
|
7078
|
+
/* @__PURE__ */ jsx31("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
|
|
6817
7079
|
{ id: "mobile", icon: "smartphone", label: "Mobile" },
|
|
6818
7080
|
{ id: "mobile-desktop", icon: "phonelink", label: "Mobile+" },
|
|
6819
7081
|
{ id: "desktop", icon: "desktop_windows", label: "Desktop" },
|
|
6820
7082
|
{ id: "tablet-landscape", icon: "tablet", label: "Landscape" }
|
|
6821
|
-
].map((opt) => /* @__PURE__ */
|
|
7083
|
+
].map((opt) => /* @__PURE__ */ jsxs29(
|
|
6822
7084
|
"button",
|
|
6823
7085
|
{
|
|
6824
7086
|
onClick: () => startApp(opt.id),
|
|
6825
7087
|
className: "flex flex-col items-center gap-2 py-4 rounded-2xl border transition-colors",
|
|
6826
7088
|
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" },
|
|
6827
7089
|
children: [
|
|
6828
|
-
/* @__PURE__ */
|
|
6829
|
-
/* @__PURE__ */
|
|
7090
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[24px]", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.icon }),
|
|
7091
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[11px] font-bold", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.label })
|
|
6830
7092
|
]
|
|
6831
7093
|
},
|
|
6832
7094
|
opt.id
|
|
6833
7095
|
)) }),
|
|
6834
|
-
layoutChoice === "mobile-desktop" && /* @__PURE__ */
|
|
6835
|
-
layoutChoice === "tablet-landscape" && /* @__PURE__ */
|
|
7096
|
+
layoutChoice === "mobile-desktop" && /* @__PURE__ */ jsx31("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
|
|
7097
|
+
layoutChoice === "tablet-landscape" && /* @__PURE__ */ jsx31("span", { className: "text-white/20 text-[9px] text-center", children: "2-Spalten-Layout f\xFCr Landscape-Tablet im Desktop-Mode" })
|
|
6836
7098
|
] }),
|
|
6837
|
-
/* @__PURE__ */
|
|
7099
|
+
serverAppTarget && /* @__PURE__ */ jsxs29(
|
|
7100
|
+
"button",
|
|
7101
|
+
{
|
|
7102
|
+
type: "button",
|
|
7103
|
+
onClick: () => setServerAppEnvironment(serverAppTarget),
|
|
7104
|
+
className: "flex items-center justify-center gap-2 w-full max-w-[280px] py-3 rounded-2xl border text-[11px] font-bold",
|
|
7105
|
+
style: { borderColor: "rgba(255,255,255,0.08)", color: "rgba(255,255,255,0.6)" },
|
|
7106
|
+
children: [
|
|
7107
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "web" }),
|
|
7108
|
+
`Fine-Art App (Server) \xB7 ${serverAppTarget.toUpperCase()}`
|
|
7109
|
+
]
|
|
7110
|
+
}
|
|
7111
|
+
),
|
|
7112
|
+
/* @__PURE__ */ jsx31(FlowBridgePanel, { appVersion: version, hfToken })
|
|
6838
7113
|
] });
|
|
6839
7114
|
}
|
|
6840
7115
|
if (requireWorkspaceSelection) {
|
|
6841
7116
|
if (!bootstrapTarget.ready) {
|
|
6842
|
-
return /* @__PURE__ */
|
|
7117
|
+
return /* @__PURE__ */ jsx31("main", { className: "flow-workspace-picker", children: /* @__PURE__ */ jsx31("section", { className: "flow-workspace-picker__card", children: "Zielraum wird bestimmt\u2026" }) });
|
|
6843
7118
|
}
|
|
6844
7119
|
if (!hfToken) {
|
|
6845
|
-
return /* @__PURE__ */
|
|
7120
|
+
return /* @__PURE__ */ jsx31("main", { className: "flow-workspace-picker", children: /* @__PURE__ */ jsx31("section", { className: "flow-workspace-picker__card", role: "alert", children: "HF-Token fehlt \u2014 User und Context koennen nicht aus der Tag-Base geladen werden." }) });
|
|
6846
7121
|
}
|
|
6847
7122
|
if (tagBaseResult.isLoading) {
|
|
6848
|
-
return /* @__PURE__ */
|
|
7123
|
+
return /* @__PURE__ */ jsx31("main", { className: "flow-workspace-picker", children: /* @__PURE__ */ jsxs29("section", { className: "flow-workspace-picker__card", children: [
|
|
6849
7124
|
"Lade User und Contexts aus ",
|
|
6850
7125
|
effectiveNamespace,
|
|
6851
7126
|
"\u2026"
|
|
6852
7127
|
] }) });
|
|
6853
7128
|
}
|
|
6854
7129
|
if (tagBaseResult.error) {
|
|
6855
|
-
return /* @__PURE__ */
|
|
7130
|
+
return /* @__PURE__ */ jsx31("main", { className: "flow-workspace-picker", children: /* @__PURE__ */ jsxs29("section", { className: "flow-workspace-picker__card", role: "alert", children: [
|
|
6856
7131
|
"Tag-Base ",
|
|
6857
7132
|
effectiveNamespace,
|
|
6858
7133
|
" konnte nicht geladen werden: ",
|
|
@@ -6860,14 +7135,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6860
7135
|
] }) });
|
|
6861
7136
|
}
|
|
6862
7137
|
if (!tagBaseResult.tagBase) {
|
|
6863
|
-
return /* @__PURE__ */
|
|
7138
|
+
return /* @__PURE__ */ jsx31("main", { className: "flow-workspace-picker", children: /* @__PURE__ */ jsxs29("section", { className: "flow-workspace-picker__card", role: "alert", children: [
|
|
6864
7139
|
"Im Namespace ",
|
|
6865
7140
|
effectiveNamespace,
|
|
6866
7141
|
" fehlt tags-state-*.zip. Der Server muss zuerst die Tag-Base erzeugen."
|
|
6867
7142
|
] }) });
|
|
6868
7143
|
}
|
|
6869
7144
|
if (tagBaseResult.needsPicker) {
|
|
6870
|
-
return /* @__PURE__ */
|
|
7145
|
+
return /* @__PURE__ */ jsx31(
|
|
6871
7146
|
FlowWorkspacePicker,
|
|
6872
7147
|
{
|
|
6873
7148
|
tagBase: tagBaseResult.tagBase,
|
|
@@ -6879,7 +7154,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6879
7154
|
);
|
|
6880
7155
|
}
|
|
6881
7156
|
}
|
|
6882
|
-
const szenenPane = szenenPort ? /* @__PURE__ */
|
|
7157
|
+
const szenenPane = szenenPort ? /* @__PURE__ */ jsx31("div", { className: "flow-szenen-pane", children: /* @__PURE__ */ jsx31(SzenenView, { port: szenenPort, contextId: szenenKontextId }) }) : /* @__PURE__ */ jsx31("div", { className: "flow-szenen-pane flow-szenen-pane--empty", children: /* @__PURE__ */ jsxs29("p", { children: [
|
|
6883
7158
|
"Szenen brauchen einen HF-Token f\xFCr Namespace ",
|
|
6884
7159
|
effectiveNamespace || "(noch nicht bestimmt)",
|
|
6885
7160
|
" \u2014 auf der Flow-Startseite setzen."
|
|
@@ -6889,22 +7164,22 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6889
7164
|
const mdScale = mdMode ? window.innerWidth / 430 : 1;
|
|
6890
7165
|
const mdW = mdMode ? 430 : void 0;
|
|
6891
7166
|
const mdH = mdMode ? Math.ceil(window.innerHeight / mdScale) : void 0;
|
|
6892
|
-
const mobileRoot = /* @__PURE__ */
|
|
7167
|
+
const mobileRoot = /* @__PURE__ */ jsxs29("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
|
|
6893
7168
|
width: mdMode ? mdW : "100vw",
|
|
6894
7169
|
height: mdMode ? mdH : "100dvh",
|
|
6895
7170
|
transform: mdMode ? `scale(${mdScale})` : void 0,
|
|
6896
7171
|
transformOrigin: mdMode ? "top left" : void 0,
|
|
6897
7172
|
...hcStyle || {}
|
|
6898
7173
|
}, children: [
|
|
6899
|
-
mobileTab === "labs" && /* @__PURE__ */
|
|
7174
|
+
mobileTab === "labs" && /* @__PURE__ */ jsx31("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx31(LabsTab, { services: labServices, onResult: (item) => {
|
|
6900
7175
|
const frame = item.frames[0];
|
|
6901
7176
|
if (frame?.base64) {
|
|
6902
7177
|
setCurrentResult(frameToGeneration(frame, item));
|
|
6903
7178
|
setMobileTab("stage");
|
|
6904
7179
|
}
|
|
6905
7180
|
} }) }),
|
|
6906
|
-
mobileTab === "server" && /* @__PURE__ */
|
|
6907
|
-
mobileTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
7181
|
+
mobileTab === "server" && /* @__PURE__ */ jsx31("div", { className: "flex flex-col flex-1 min-h-0 relative", children: /* @__PURE__ */ jsx31(ServerTab, { serverBaseUrl }) }),
|
|
7182
|
+
mobileTab === "tags" && workspaceTags && /* @__PURE__ */ jsx31("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx31(
|
|
6908
7183
|
TagManagerPanel,
|
|
6909
7184
|
{
|
|
6910
7185
|
workspaceTags,
|
|
@@ -6916,24 +7191,24 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6916
7191
|
}
|
|
6917
7192
|
) }),
|
|
6918
7193
|
mobileTab === "szenen" && szenenPane,
|
|
6919
|
-
mobileTab === "stage" && /* @__PURE__ */
|
|
6920
|
-
/* @__PURE__ */
|
|
6921
|
-
/* @__PURE__ */
|
|
6922
|
-
/* @__PURE__ */
|
|
6923
|
-
/* @__PURE__ */
|
|
6924
|
-
/* @__PURE__ */
|
|
6925
|
-
/* @__PURE__ */
|
|
7194
|
+
mobileTab === "stage" && /* @__PURE__ */ jsxs29("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
7195
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
|
|
7196
|
+
/* @__PURE__ */ jsx31(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
7197
|
+
/* @__PURE__ */ jsx31(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" }] }),
|
|
7198
|
+
/* @__PURE__ */ jsx31(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions }),
|
|
7199
|
+
/* @__PURE__ */ jsx31("div", { className: "flex-1" }),
|
|
7200
|
+
/* @__PURE__ */ jsx31(TaskExecutor, { openTasks: hfState?.openTasks || {}, onExecute: handleExecuteTask, onTaskCompleted: handleTaskCompleted }),
|
|
6926
7201
|
runningBadge,
|
|
6927
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
6928
|
-
/* @__PURE__ */
|
|
6929
|
-
/* @__PURE__ */
|
|
6930
|
-
/* @__PURE__ */
|
|
6931
|
-
] }) : /* @__PURE__ */
|
|
6932
|
-
/* @__PURE__ */
|
|
6933
|
-
/* @__PURE__ */
|
|
7202
|
+
activeReferenceThumbnail ? /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden mr-2", style: { height: 28 }, children: [
|
|
7203
|
+
/* @__PURE__ */ jsx31("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
7204
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
7205
|
+
/* @__PURE__ */ jsx31("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 active:text-white/80 transition-colors", children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
7206
|
+
] }) : /* @__PURE__ */ jsx31("button", { onClick: handleSelectReference, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "add_photo_alternate" }) }),
|
|
7207
|
+
/* @__PURE__ */ jsx31("button", { onClick: toggleContrast, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
7208
|
+
/* @__PURE__ */ jsx31("button", { onClick: () => setShowStart(true), className: "text-white/20 active:text-white/60 transition-colors mr-1", children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "desktop_windows" }) })
|
|
6934
7209
|
] }),
|
|
6935
|
-
/* @__PURE__ */
|
|
6936
|
-
/* @__PURE__ */
|
|
7210
|
+
/* @__PURE__ */ jsx31("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ jsxs29("div", { className: `relative rounded-xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
7211
|
+
/* @__PURE__ */ jsx31(
|
|
6937
7212
|
"textarea",
|
|
6938
7213
|
{
|
|
6939
7214
|
value: activePrompt,
|
|
@@ -6943,9 +7218,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6943
7218
|
placeholder: "Prompt eingeben..."
|
|
6944
7219
|
}
|
|
6945
7220
|
),
|
|
6946
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
7221
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
|
|
6947
7222
|
] }) }),
|
|
6948
|
-
/* @__PURE__ */
|
|
7223
|
+
/* @__PURE__ */ jsx31("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ jsxs29(
|
|
6949
7224
|
"button",
|
|
6950
7225
|
{
|
|
6951
7226
|
onClick: () => handleGenerateBatch(),
|
|
@@ -6953,13 +7228,13 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6953
7228
|
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",
|
|
6954
7229
|
style: { height: 48, background: activePrompt.trim() ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
|
|
6955
7230
|
children: [
|
|
6956
|
-
/* @__PURE__ */
|
|
6957
|
-
/* @__PURE__ */
|
|
7231
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
|
|
7232
|
+
/* @__PURE__ */ jsx31("span", { children: "Generieren" })
|
|
6958
7233
|
]
|
|
6959
7234
|
}
|
|
6960
7235
|
) }),
|
|
6961
|
-
/* @__PURE__ */
|
|
6962
|
-
/* @__PURE__ */
|
|
7236
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
|
|
7237
|
+
/* @__PURE__ */ jsxs29(
|
|
6963
7238
|
"div",
|
|
6964
7239
|
{
|
|
6965
7240
|
className: "w-full rounded-2xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center",
|
|
@@ -6973,25 +7248,25 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6973
7248
|
setTouchStartX(null);
|
|
6974
7249
|
},
|
|
6975
7250
|
children: [
|
|
6976
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
6977
|
-
/* @__PURE__ */
|
|
6978
|
-
/* @__PURE__ */
|
|
7251
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-3 opacity-40", children: [
|
|
7252
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[40px]", children: "hourglass_top" }),
|
|
7253
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[11px] uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
6979
7254
|
] }),
|
|
6980
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
6981
|
-
/* @__PURE__ */
|
|
6982
|
-
/* @__PURE__ */
|
|
6983
|
-
/* @__PURE__ */
|
|
7255
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs29("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
|
|
7256
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
|
|
7257
|
+
/* @__PURE__ */ jsx31("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
|
|
7258
|
+
/* @__PURE__ */ jsx31("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" })
|
|
6984
7259
|
] }),
|
|
6985
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
6986
|
-
!currentResult && /* @__PURE__ */
|
|
6987
|
-
/* @__PURE__ */
|
|
6988
|
-
/* @__PURE__ */
|
|
7260
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx31("img", { src: currentResult.fullBase64 || currentResult.base64, className: "w-full h-full object-contain" }),
|
|
7261
|
+
!currentResult && /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
7262
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
|
|
7263
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
6989
7264
|
] }),
|
|
6990
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
6991
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
6992
|
-
/* @__PURE__ */
|
|
6993
|
-
/* @__PURE__ */
|
|
6994
|
-
/* @__PURE__ */
|
|
7265
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined text-[18px]", children: "fullscreen" }) }),
|
|
7266
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs29(Fragment11, { children: [
|
|
7267
|
+
/* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
7268
|
+
/* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
7269
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
6995
7270
|
currentIndex + 1,
|
|
6996
7271
|
" / ",
|
|
6997
7272
|
history.length
|
|
@@ -7000,8 +7275,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7000
7275
|
]
|
|
7001
7276
|
}
|
|
7002
7277
|
),
|
|
7003
|
-
currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */
|
|
7004
|
-
/* @__PURE__ */
|
|
7278
|
+
currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */ jsx31("div", { className: "mt-2 flex gap-1.5 overflow-x-auto pb-1", style: { scrollbarWidth: "none" }, children: currentGroup.map((item) => /* @__PURE__ */ jsxs29("div", { style: { position: "relative", flexShrink: 0 }, children: [
|
|
7279
|
+
/* @__PURE__ */ jsx31(
|
|
7005
7280
|
"div",
|
|
7006
7281
|
{
|
|
7007
7282
|
onClick: () => handleGallerySelect(item),
|
|
@@ -7014,10 +7289,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7014
7289
|
border: item.id === currentResult.id ? "2px solid rgba(255,255,255,0.8)" : "2px solid rgba(255,255,255,0.15)",
|
|
7015
7290
|
opacity: item.id === currentResult.id ? 1 : 0.55
|
|
7016
7291
|
},
|
|
7017
|
-
children: /* @__PURE__ */
|
|
7292
|
+
children: /* @__PURE__ */ jsx31("img", { src: item.base64, style: { width: "100%", height: "100%", objectFit: "cover" }, alt: "" })
|
|
7018
7293
|
}
|
|
7019
7294
|
),
|
|
7020
|
-
/* @__PURE__ */
|
|
7295
|
+
/* @__PURE__ */ jsx31(
|
|
7021
7296
|
"button",
|
|
7022
7297
|
{
|
|
7023
7298
|
onClick: (e) => {
|
|
@@ -7039,34 +7314,34 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7039
7314
|
alignItems: "center",
|
|
7040
7315
|
justifyContent: "center"
|
|
7041
7316
|
},
|
|
7042
|
-
children: /* @__PURE__ */
|
|
7317
|
+
children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 9, color: item.titleTs ? "#fff" : "rgba(255,255,255,0.5)", lineHeight: 1 }, children: "star" })
|
|
7043
7318
|
}
|
|
7044
7319
|
)
|
|
7045
7320
|
] }, item.id)) }),
|
|
7046
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
7047
|
-
/* @__PURE__ */
|
|
7048
|
-
/* @__PURE__ */
|
|
7049
|
-
/* @__PURE__ */
|
|
7321
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs29("div", { className: "flex gap-2 mt-3", children: [
|
|
7322
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
7323
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
|
|
7324
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[12px] text-white/60", children: "Prompt" })
|
|
7050
7325
|
] }),
|
|
7051
|
-
/* @__PURE__ */
|
|
7052
|
-
/* @__PURE__ */
|
|
7053
|
-
/* @__PURE__ */
|
|
7326
|
+
/* @__PURE__ */ jsxs29("button", { onClick: () => handleGenerateBatch(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: [
|
|
7327
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
|
|
7328
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
|
|
7054
7329
|
] }),
|
|
7055
|
-
/* @__PURE__ */
|
|
7056
|
-
/* @__PURE__ */
|
|
7057
|
-
/* @__PURE__ */
|
|
7330
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
7331
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "download" }),
|
|
7332
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[12px] text-white/60", children: "Laden" })
|
|
7058
7333
|
] })
|
|
7059
7334
|
] })
|
|
7060
7335
|
] })
|
|
7061
7336
|
] }),
|
|
7062
|
-
mobileTab === "browse" && /* @__PURE__ */
|
|
7063
|
-
/* @__PURE__ */
|
|
7064
|
-
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */
|
|
7065
|
-
hfToken && /* @__PURE__ */
|
|
7337
|
+
mobileTab === "browse" && /* @__PURE__ */ jsxs29("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
7338
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
7339
|
+
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : "info" }) }, tab)),
|
|
7340
|
+
hfToken && /* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
|
|
7066
7341
|
] }),
|
|
7067
|
-
/* @__PURE__ */
|
|
7068
|
-
activeTab === "history" && /* @__PURE__ */
|
|
7069
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
7342
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
7343
|
+
activeTab === "history" && /* @__PURE__ */ jsx31(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: handleGallerySelect, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)), visibleCount: historyVisibleCount, onLoadMore: () => setHistoryVisibleCount((c) => c + 20) }),
|
|
7344
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx31(
|
|
7070
7345
|
MediaLibrary,
|
|
7071
7346
|
{
|
|
7072
7347
|
items: galleryItems,
|
|
@@ -7085,44 +7360,44 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7085
7360
|
onLoadMore: () => setGalleryVisibleCount((c) => c + 20)
|
|
7086
7361
|
}
|
|
7087
7362
|
),
|
|
7088
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
7363
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx31(InspectPanel, { currentResult, history, onSelect: (g) => {
|
|
7089
7364
|
setCurrentResult(g);
|
|
7090
7365
|
} })
|
|
7091
7366
|
] })
|
|
7092
7367
|
] }),
|
|
7093
|
-
/* @__PURE__ */
|
|
7094
|
-
/* @__PURE__ */
|
|
7095
|
-
workspaceTags && /* @__PURE__ */
|
|
7368
|
+
/* @__PURE__ */ jsxs29("div", { style: { display: mobileTab === "tools" ? "flex" : "none" }, className: "flex flex-col flex-1 min-h-0", children: [
|
|
7369
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
7370
|
+
workspaceTags && /* @__PURE__ */ jsxs29("button", { onClick: () => {
|
|
7096
7371
|
setLeftTab("prompt");
|
|
7097
7372
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
7098
7373
|
}, 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: [
|
|
7099
|
-
/* @__PURE__ */
|
|
7374
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
|
|
7100
7375
|
"Prompt"
|
|
7101
7376
|
] }),
|
|
7102
|
-
/* @__PURE__ */
|
|
7377
|
+
/* @__PURE__ */ jsxs29("button", { onClick: () => {
|
|
7103
7378
|
setLeftTab("hierarchy");
|
|
7104
7379
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
7105
7380
|
}, 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: [
|
|
7106
|
-
/* @__PURE__ */
|
|
7381
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
|
|
7107
7382
|
"Hierarchie"
|
|
7108
7383
|
] }),
|
|
7109
|
-
/* @__PURE__ */
|
|
7110
|
-
/* @__PURE__ */
|
|
7384
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
7385
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "settings" }),
|
|
7111
7386
|
"Setup"
|
|
7112
7387
|
] }),
|
|
7113
|
-
/* @__PURE__ */
|
|
7114
|
-
/* @__PURE__ */
|
|
7388
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
7389
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "cloud_sync" }),
|
|
7115
7390
|
"Sync"
|
|
7116
7391
|
] }),
|
|
7117
|
-
/* @__PURE__ */
|
|
7118
|
-
/* @__PURE__ */
|
|
7392
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
7393
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "biotech" }),
|
|
7119
7394
|
"HF"
|
|
7120
7395
|
] }),
|
|
7121
|
-
serverBaseUrl && /* @__PURE__ */
|
|
7122
|
-
workspaceTags && /* @__PURE__ */
|
|
7396
|
+
serverBaseUrl && /* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) }),
|
|
7397
|
+
workspaceTags && /* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
7123
7398
|
] }),
|
|
7124
|
-
/* @__PURE__ */
|
|
7125
|
-
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */
|
|
7399
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
7400
|
+
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */ jsx31("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx31(
|
|
7126
7401
|
ListView,
|
|
7127
7402
|
{
|
|
7128
7403
|
nodes,
|
|
@@ -7153,19 +7428,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7153
7428
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
7154
7429
|
}
|
|
7155
7430
|
) }),
|
|
7156
|
-
workspaceTags && /* @__PURE__ */
|
|
7431
|
+
workspaceTags && /* @__PURE__ */ jsx31("div", { style: { display: leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" ? "flex" : "none" }, className: "absolute inset-0 flex-col", children: /* @__PURE__ */ jsx31(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => {
|
|
7157
7432
|
handleGenerateBatch(prompt);
|
|
7158
7433
|
setMobileTab("stage");
|
|
7159
7434
|
}, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
|
|
7160
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
7161
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
7435
|
+
activeTab === "setup" && /* @__PURE__ */ jsx31(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo, tagBase: tagBaseResult }),
|
|
7436
|
+
activeTab === "sync" && /* @__PURE__ */ jsx31(
|
|
7162
7437
|
HfMediaSyncTab,
|
|
7163
7438
|
{
|
|
7164
7439
|
topSlot: syncTopSlot,
|
|
7165
7440
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
7166
7441
|
}
|
|
7167
7442
|
),
|
|
7168
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
7443
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx31(
|
|
7169
7444
|
TagManagerPanel,
|
|
7170
7445
|
{
|
|
7171
7446
|
workspaceTags,
|
|
@@ -7176,7 +7451,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7176
7451
|
onTagMove: handleTagMove
|
|
7177
7452
|
}
|
|
7178
7453
|
),
|
|
7179
|
-
activeTab === "hftest" && /* @__PURE__ */
|
|
7454
|
+
activeTab === "hftest" && /* @__PURE__ */ jsx31("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx31(
|
|
7180
7455
|
HFTestTab,
|
|
7181
7456
|
{
|
|
7182
7457
|
token: hfToken,
|
|
@@ -7188,10 +7463,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7188
7463
|
missingImages: hfMissingImages
|
|
7189
7464
|
}
|
|
7190
7465
|
) }),
|
|
7191
|
-
activeTab === "server" && /* @__PURE__ */
|
|
7466
|
+
activeTab === "server" && /* @__PURE__ */ jsx31("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx31(ServerTab, { serverBaseUrl }) })
|
|
7192
7467
|
] })
|
|
7193
7468
|
] }),
|
|
7194
|
-
/* @__PURE__ */
|
|
7469
|
+
/* @__PURE__ */ jsx31("div", { className: "flex overflow-x-auto border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
|
|
7195
7470
|
{ id: "tools", icon: "auto_fix_high", label: "Prompt" },
|
|
7196
7471
|
{ id: "szenen", icon: "movie", label: "Szenen" },
|
|
7197
7472
|
{ id: "stage", icon: "palette", label: "Stage" },
|
|
@@ -7199,13 +7474,13 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7199
7474
|
...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
|
|
7200
7475
|
{ id: "browse", icon: "photo_library", label: "Galerie" },
|
|
7201
7476
|
...serverBaseUrl ? [{ id: "server", icon: "storage", label: "Server" }] : []
|
|
7202
|
-
].map((tab) => /* @__PURE__ */
|
|
7203
|
-
/* @__PURE__ */
|
|
7204
|
-
/* @__PURE__ */
|
|
7477
|
+
].map((tab) => /* @__PURE__ */ jsxs29("button", { onClick: () => setMobileTab(tab.id), className: `flex-none min-w-[64px] flex flex-col items-center justify-center gap-0.5 transition-colors ${mobileTab === tab.id ? "text-white" : "text-white/30"}`, children: [
|
|
7478
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
|
|
7479
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
|
|
7205
7480
|
] }, tab.id)) })
|
|
7206
7481
|
] });
|
|
7207
7482
|
if (mdMode) {
|
|
7208
|
-
return /* @__PURE__ */
|
|
7483
|
+
return /* @__PURE__ */ jsx31("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
|
|
7209
7484
|
}
|
|
7210
7485
|
return mobileRoot;
|
|
7211
7486
|
}
|
|
@@ -7213,20 +7488,20 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7213
7488
|
const tlScale = Math.min(window.innerWidth / 920, window.innerHeight / 520);
|
|
7214
7489
|
const tlW = 920;
|
|
7215
7490
|
const tlH = 520;
|
|
7216
|
-
return /* @__PURE__ */
|
|
7217
|
-
/* @__PURE__ */
|
|
7218
|
-
/* @__PURE__ */
|
|
7219
|
-
/* @__PURE__ */
|
|
7220
|
-
/* @__PURE__ */
|
|
7221
|
-
/* @__PURE__ */
|
|
7222
|
-
/* @__PURE__ */
|
|
7223
|
-
/* @__PURE__ */
|
|
7491
|
+
return /* @__PURE__ */ jsx31("div", { style: { position: "fixed", inset: 0, background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", ...hcStyle || {} }, children: /* @__PURE__ */ jsxs29("div", { style: { width: tlW, height: tlH, transform: `scale(${tlScale})`, transformOrigin: "center center", display: "flex", flexDirection: "row", color: "#fff", overflow: "hidden", borderRadius: 0 }, children: [
|
|
7492
|
+
/* @__PURE__ */ jsxs29("div", { style: { width: 320, height: tlH, display: "flex", flexDirection: "column", borderRight: "1px solid rgba(255,255,255,0.05)", background: "#000", flexShrink: 0 }, children: [
|
|
7493
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
7494
|
+
/* @__PURE__ */ jsx31(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
7495
|
+
/* @__PURE__ */ jsx31(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" }] }),
|
|
7496
|
+
/* @__PURE__ */ jsx31(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions }),
|
|
7497
|
+
/* @__PURE__ */ jsx31("div", { style: { flex: 1 } }),
|
|
7498
|
+
/* @__PURE__ */ jsx31(TaskExecutor, { openTasks: hfState?.openTasks || {}, onExecute: handleExecuteTask, onTaskCompleted: handleTaskCompleted }),
|
|
7224
7499
|
runningBadge,
|
|
7225
|
-
/* @__PURE__ */
|
|
7226
|
-
/* @__PURE__ */
|
|
7500
|
+
/* @__PURE__ */ jsx31("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
7501
|
+
/* @__PURE__ */ jsx31("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
|
|
7227
7502
|
] }),
|
|
7228
|
-
/* @__PURE__ */
|
|
7229
|
-
/* @__PURE__ */
|
|
7503
|
+
/* @__PURE__ */ jsx31("div", { style: { padding: "12px 12px 8px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs29("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: [
|
|
7504
|
+
/* @__PURE__ */ jsx31(
|
|
7230
7505
|
"textarea",
|
|
7231
7506
|
{
|
|
7232
7507
|
value: activePrompt,
|
|
@@ -7235,24 +7510,24 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7235
7510
|
placeholder: "Prompt eingeben..."
|
|
7236
7511
|
}
|
|
7237
7512
|
),
|
|
7238
|
-
activePrompt && /* @__PURE__ */
|
|
7513
|
+
activePrompt && /* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
|
|
7239
7514
|
] }) }),
|
|
7240
|
-
/* @__PURE__ */
|
|
7515
|
+
/* @__PURE__ */ jsx31("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs29(
|
|
7241
7516
|
"button",
|
|
7242
7517
|
{
|
|
7243
7518
|
onClick: () => handleGenerateBatch(),
|
|
7244
7519
|
disabled: !activePrompt.trim(),
|
|
7245
7520
|
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() ? "#0284c7" : "transparent", color: "#fff", cursor: activePrompt.trim() ? "pointer" : "default", opacity: !activePrompt.trim() ? 0.3 : 1, fontFamily: "inherit", transition: "background 0.2s" },
|
|
7246
7521
|
children: [
|
|
7247
|
-
/* @__PURE__ */
|
|
7248
|
-
/* @__PURE__ */
|
|
7522
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
|
|
7523
|
+
/* @__PURE__ */ jsx31("span", { children: "Generieren" })
|
|
7249
7524
|
]
|
|
7250
7525
|
}
|
|
7251
7526
|
) }),
|
|
7252
|
-
/* @__PURE__ */
|
|
7527
|
+
/* @__PURE__ */ jsx31("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ jsx31(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: handleGallerySelect, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)), visibleCount: historyVisibleCount, onLoadMore: () => setHistoryVisibleCount((c) => c + 20) }) })
|
|
7253
7528
|
] }),
|
|
7254
|
-
/* @__PURE__ */
|
|
7255
|
-
/* @__PURE__ */
|
|
7529
|
+
/* @__PURE__ */ jsxs29("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
|
|
7530
|
+
/* @__PURE__ */ jsx31(
|
|
7256
7531
|
"div",
|
|
7257
7532
|
{
|
|
7258
7533
|
style: { flex: 1, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" },
|
|
@@ -7264,26 +7539,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7264
7539
|
else if (dx > 50) goToPrev();
|
|
7265
7540
|
setTouchStartX(null);
|
|
7266
7541
|
},
|
|
7267
|
-
children: /* @__PURE__ */
|
|
7268
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
7269
|
-
/* @__PURE__ */
|
|
7270
|
-
/* @__PURE__ */
|
|
7542
|
+
children: /* @__PURE__ */ jsxs29("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: [
|
|
7543
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs29("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, opacity: 0.4 }, children: [
|
|
7544
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 36 }, children: "hourglass_top" }),
|
|
7545
|
+
/* @__PURE__ */ jsx31("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.6)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
|
|
7271
7546
|
] }),
|
|
7272
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
7273
|
-
/* @__PURE__ */
|
|
7274
|
-
/* @__PURE__ */
|
|
7275
|
-
/* @__PURE__ */
|
|
7547
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs29("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
7548
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
|
|
7549
|
+
/* @__PURE__ */ jsx31("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
|
|
7550
|
+
/* @__PURE__ */ jsx31("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" })
|
|
7276
7551
|
] }),
|
|
7277
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
7278
|
-
!currentResult && /* @__PURE__ */
|
|
7279
|
-
/* @__PURE__ */
|
|
7280
|
-
/* @__PURE__ */
|
|
7552
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx31("img", { src: currentResult.fullBase64 || currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
|
|
7553
|
+
!currentResult && /* @__PURE__ */ jsxs29("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
|
|
7554
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
|
|
7555
|
+
/* @__PURE__ */ jsx31("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
|
|
7281
7556
|
] }),
|
|
7282
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
7283
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
7284
|
-
/* @__PURE__ */
|
|
7285
|
-
/* @__PURE__ */
|
|
7286
|
-
/* @__PURE__ */
|
|
7557
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "fullscreen" }) }),
|
|
7558
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs29(Fragment11, { children: [
|
|
7559
|
+
/* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_left" }) }),
|
|
7560
|
+
/* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_right" }) }),
|
|
7561
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
7287
7562
|
currentIndex + 1,
|
|
7288
7563
|
" / ",
|
|
7289
7564
|
history.length
|
|
@@ -7292,42 +7567,42 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7292
7567
|
] })
|
|
7293
7568
|
}
|
|
7294
7569
|
),
|
|
7295
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
7296
|
-
/* @__PURE__ */
|
|
7297
|
-
/* @__PURE__ */
|
|
7298
|
-
/* @__PURE__ */
|
|
7570
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs29("div", { style: { padding: "0 16px 16px", display: "flex", gap: 8, flexShrink: 0 }, children: [
|
|
7571
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
7572
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
|
|
7573
|
+
/* @__PURE__ */ jsx31("span", { children: "Prompt" })
|
|
7299
7574
|
] }),
|
|
7300
|
-
/* @__PURE__ */
|
|
7301
|
-
/* @__PURE__ */
|
|
7302
|
-
/* @__PURE__ */
|
|
7575
|
+
/* @__PURE__ */ jsxs29("button", { onClick: () => handleGenerateBatch(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: [
|
|
7576
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
|
|
7577
|
+
/* @__PURE__ */ jsx31("span", { children: "Referenz" })
|
|
7303
7578
|
] }),
|
|
7304
|
-
/* @__PURE__ */
|
|
7305
|
-
/* @__PURE__ */
|
|
7306
|
-
/* @__PURE__ */
|
|
7579
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
7580
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "download" }),
|
|
7581
|
+
/* @__PURE__ */ jsx31("span", { children: "Laden" })
|
|
7307
7582
|
] })
|
|
7308
7583
|
] })
|
|
7309
7584
|
] })
|
|
7310
7585
|
] }) });
|
|
7311
7586
|
}
|
|
7312
|
-
return /* @__PURE__ */
|
|
7313
|
-
/* @__PURE__ */
|
|
7314
|
-
/* @__PURE__ */
|
|
7315
|
-
/* @__PURE__ */
|
|
7316
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
7317
|
-
workspaceTags && /* @__PURE__ */
|
|
7318
|
-
/* @__PURE__ */
|
|
7587
|
+
return /* @__PURE__ */ jsxs29("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", style: hcStyle, children: [
|
|
7588
|
+
/* @__PURE__ */ jsx31("div", { className: "absolute top-2 right-2 z-50", children: /* @__PURE__ */ jsx31("button", { onClick: () => setShowStart(true), className: "text-white/10 hover:text-white/30 transition-colors text-[10px]", children: "\u21C4" }) }),
|
|
7589
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
7590
|
+
/* @__PURE__ */ jsxs29("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
|
|
7591
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs29("div", { className: "flex flex-1 gap-1", children: [
|
|
7592
|
+
workspaceTags && /* @__PURE__ */ jsxs29("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: [
|
|
7593
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
|
|
7319
7594
|
"Prompt"
|
|
7320
7595
|
] }),
|
|
7321
|
-
/* @__PURE__ */
|
|
7322
|
-
/* @__PURE__ */
|
|
7596
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
7597
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
|
|
7323
7598
|
"Hierarchie"
|
|
7324
7599
|
] }),
|
|
7325
|
-
workspaceTags && /* @__PURE__ */
|
|
7600
|
+
workspaceTags && /* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
7326
7601
|
] }),
|
|
7327
|
-
/* @__PURE__ */
|
|
7602
|
+
/* @__PURE__ */ jsx31("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" })
|
|
7328
7603
|
] }),
|
|
7329
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
7330
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
7604
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs29("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
7605
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx31(
|
|
7331
7606
|
TagManagerPanel,
|
|
7332
7607
|
{
|
|
7333
7608
|
workspaceTags,
|
|
@@ -7338,11 +7613,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7338
7613
|
onTagMove: handleTagMove
|
|
7339
7614
|
}
|
|
7340
7615
|
),
|
|
7341
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
7342
|
-
/* @__PURE__ */
|
|
7343
|
-
/* @__PURE__ */
|
|
7616
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs29("div", { children: [
|
|
7617
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
7618
|
+
/* @__PURE__ */ jsx31("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
7344
7619
|
] }) }),
|
|
7345
|
-
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */
|
|
7620
|
+
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ jsx31("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx31(
|
|
7346
7621
|
ListView,
|
|
7347
7622
|
{
|
|
7348
7623
|
nodes,
|
|
@@ -7367,19 +7642,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7367
7642
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
7368
7643
|
}
|
|
7369
7644
|
) }),
|
|
7370
|
-
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */
|
|
7645
|
+
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ jsx31(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => handleGenerateBatch(prompt), onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage })
|
|
7371
7646
|
] })
|
|
7372
7647
|
] }),
|
|
7373
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
7374
|
-
/* @__PURE__ */
|
|
7375
|
-
/* @__PURE__ */
|
|
7376
|
-
/* @__PURE__ */
|
|
7377
|
-
/* @__PURE__ */
|
|
7378
|
-
/* @__PURE__ */
|
|
7379
|
-
/* @__PURE__ */
|
|
7648
|
+
!isLeftCollapsed && /* @__PURE__ */ jsx31("div", { onMouseDown: startLeftResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
7649
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
|
|
7650
|
+
/* @__PURE__ */ jsxs29("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
|
|
7651
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1.5", children: [
|
|
7652
|
+
/* @__PURE__ */ jsx31(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
7653
|
+
/* @__PURE__ */ jsx31(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" }] }),
|
|
7654
|
+
/* @__PURE__ */ jsx31(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions })
|
|
7380
7655
|
] }),
|
|
7381
|
-
/* @__PURE__ */
|
|
7382
|
-
/* @__PURE__ */
|
|
7656
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1 mx-auto", children: [
|
|
7657
|
+
/* @__PURE__ */ jsx31(
|
|
7383
7658
|
"button",
|
|
7384
7659
|
{
|
|
7385
7660
|
onClick: () => setMiddlePanel("stage"),
|
|
@@ -7387,7 +7662,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7387
7662
|
children: "Stage"
|
|
7388
7663
|
}
|
|
7389
7664
|
),
|
|
7390
|
-
/* @__PURE__ */
|
|
7665
|
+
/* @__PURE__ */ jsx31(
|
|
7391
7666
|
"button",
|
|
7392
7667
|
{
|
|
7393
7668
|
onClick: () => setMiddlePanel("labs"),
|
|
@@ -7395,7 +7670,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7395
7670
|
children: "Labs"
|
|
7396
7671
|
}
|
|
7397
7672
|
),
|
|
7398
|
-
/* @__PURE__ */
|
|
7673
|
+
/* @__PURE__ */ jsx31(
|
|
7399
7674
|
"button",
|
|
7400
7675
|
{
|
|
7401
7676
|
onClick: () => setMiddlePanel("szenen"),
|
|
@@ -7404,53 +7679,53 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7404
7679
|
}
|
|
7405
7680
|
)
|
|
7406
7681
|
] }),
|
|
7407
|
-
/* @__PURE__ */
|
|
7408
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
7409
|
-
/* @__PURE__ */
|
|
7410
|
-
/* @__PURE__ */
|
|
7411
|
-
/* @__PURE__ */
|
|
7412
|
-
] }) : /* @__PURE__ */
|
|
7413
|
-
/* @__PURE__ */
|
|
7414
|
-
/* @__PURE__ */
|
|
7682
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
|
|
7683
|
+
activeReferenceThumbnail ? /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden", style: { height: 28 }, children: [
|
|
7684
|
+
/* @__PURE__ */ jsx31("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
7685
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
7686
|
+
/* @__PURE__ */ jsx31("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 hover:text-white/80 transition-colors", children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
7687
|
+
] }) : /* @__PURE__ */ jsxs29("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: [
|
|
7688
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
|
|
7689
|
+
/* @__PURE__ */ jsx31("span", { children: "Ref" })
|
|
7415
7690
|
] }),
|
|
7416
|
-
/* @__PURE__ */
|
|
7417
|
-
/* @__PURE__ */
|
|
7691
|
+
/* @__PURE__ */ jsx31("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
|
|
7692
|
+
/* @__PURE__ */ jsx31(TaskExecutor, { openTasks: hfState?.openTasks || {}, onExecute: handleExecuteTask, onTaskCompleted: handleTaskCompleted }),
|
|
7418
7693
|
runningBadge,
|
|
7419
|
-
/* @__PURE__ */
|
|
7694
|
+
/* @__PURE__ */ jsx31(PillButton, { variant: "solid", icon: "bolt", disabled: !activePrompt.trim(), onClick: () => handleGenerateBatch(), children: "Generieren" })
|
|
7420
7695
|
] })
|
|
7421
7696
|
] }),
|
|
7422
|
-
/* @__PURE__ */
|
|
7423
|
-
!isPromptCollapsed && /* @__PURE__ */
|
|
7424
|
-
/* @__PURE__ */
|
|
7425
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
7697
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
|
|
7698
|
+
!isPromptCollapsed && /* @__PURE__ */ jsx31("div", { className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ jsxs29("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
7699
|
+
/* @__PURE__ */ jsx31("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..." }),
|
|
7700
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
7426
7701
|
] }) }),
|
|
7427
|
-
middlePanel === "szenen" ? szenenPane : middlePanel === "labs" ? /* @__PURE__ */
|
|
7702
|
+
middlePanel === "szenen" ? szenenPane : middlePanel === "labs" ? /* @__PURE__ */ jsx31("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx31(LabsTab, { services: labServices, onResult: (item) => {
|
|
7428
7703
|
const frame = item.frames[0];
|
|
7429
7704
|
if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
|
|
7430
|
-
} }) }) : /* @__PURE__ */
|
|
7431
|
-
/* @__PURE__ */
|
|
7432
|
-
/* @__PURE__ */
|
|
7433
|
-
/* @__PURE__ */
|
|
7434
|
-
] }) : currentResult.status === "error" ? /* @__PURE__ */
|
|
7435
|
-
/* @__PURE__ */
|
|
7436
|
-
/* @__PURE__ */
|
|
7437
|
-
/* @__PURE__ */
|
|
7438
|
-
/* @__PURE__ */
|
|
7705
|
+
} }) }) : /* @__PURE__ */ jsxs29("div", { className: "flex-1 overflow-hidden flex flex-col", children: [
|
|
7706
|
+
/* @__PURE__ */ jsx31("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ jsx31("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: currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-4 opacity-40", children: [
|
|
7707
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[40px]", children: "hourglass_top" }),
|
|
7708
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[10px] uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
7709
|
+
] }) : currentResult.status === "error" ? /* @__PURE__ */ jsxs29("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
|
|
7710
|
+
/* @__PURE__ */ jsx31("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
|
|
7711
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-2", children: [
|
|
7712
|
+
/* @__PURE__ */ jsx31("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
|
|
7713
|
+
/* @__PURE__ */ jsx31("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
|
|
7439
7714
|
] }),
|
|
7440
|
-
/* @__PURE__ */
|
|
7441
|
-
] }) : /* @__PURE__ */
|
|
7442
|
-
/* @__PURE__ */
|
|
7443
|
-
/* @__PURE__ */
|
|
7444
|
-
/* @__PURE__ */
|
|
7445
|
-
/* @__PURE__ */
|
|
7446
|
-
/* @__PURE__ */
|
|
7715
|
+
/* @__PURE__ */ jsx31(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
|
|
7716
|
+
] }) : /* @__PURE__ */ jsxs29("div", { className: "h-full w-full relative flex items-center justify-center", children: [
|
|
7717
|
+
/* @__PURE__ */ jsx31("img", { src: currentResult.fullBase64 || currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
|
|
7718
|
+
/* @__PURE__ */ jsxs29("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: [
|
|
7719
|
+
/* @__PURE__ */ jsx31(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
|
|
7720
|
+
/* @__PURE__ */ jsx31(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateBatch(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
|
|
7721
|
+
/* @__PURE__ */ jsx31(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
|
|
7447
7722
|
] })
|
|
7448
|
-
] }) : /* @__PURE__ */
|
|
7449
|
-
/* @__PURE__ */
|
|
7450
|
-
/* @__PURE__ */
|
|
7723
|
+
] }) : /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
7724
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
|
|
7725
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
7451
7726
|
] }) }) }),
|
|
7452
|
-
currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */
|
|
7453
|
-
/* @__PURE__ */
|
|
7727
|
+
currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */ jsx31("div", { className: "px-6 pb-4 shrink-0 flex gap-2 overflow-x-auto", style: { scrollbarWidth: "none" }, children: currentGroup.map((item) => /* @__PURE__ */ jsxs29("div", { style: { position: "relative", flexShrink: 0 }, children: [
|
|
7728
|
+
/* @__PURE__ */ jsx31(
|
|
7454
7729
|
"div",
|
|
7455
7730
|
{
|
|
7456
7731
|
onClick: () => handleGallerySelect(item),
|
|
@@ -7465,10 +7740,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7465
7740
|
transition: "opacity 0.15s, border-color 0.15s"
|
|
7466
7741
|
},
|
|
7467
7742
|
className: "hover:opacity-80",
|
|
7468
|
-
children: /* @__PURE__ */
|
|
7743
|
+
children: /* @__PURE__ */ jsx31("img", { src: item.base64, style: { width: "100%", height: "100%", objectFit: "cover" }, alt: "" })
|
|
7469
7744
|
}
|
|
7470
7745
|
),
|
|
7471
|
-
/* @__PURE__ */
|
|
7746
|
+
/* @__PURE__ */ jsx31(
|
|
7472
7747
|
"button",
|
|
7473
7748
|
{
|
|
7474
7749
|
onClick: (e) => {
|
|
@@ -7491,31 +7766,31 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7491
7766
|
alignItems: "center",
|
|
7492
7767
|
justifyContent: "center"
|
|
7493
7768
|
},
|
|
7494
|
-
children: /* @__PURE__ */
|
|
7769
|
+
children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 10, color: item.titleTs ? "#fff" : "rgba(255,255,255,0.5)", lineHeight: 1 }, children: "star" })
|
|
7495
7770
|
}
|
|
7496
7771
|
)
|
|
7497
7772
|
] }, item.id)) })
|
|
7498
7773
|
] })
|
|
7499
7774
|
] })
|
|
7500
7775
|
] }),
|
|
7501
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
7502
|
-
/* @__PURE__ */
|
|
7503
|
-
/* @__PURE__ */
|
|
7504
|
-
/* @__PURE__ */
|
|
7505
|
-
["history", "gallery", "inspect", "setup", "sync", "tags"].map((tab) => /* @__PURE__ */
|
|
7776
|
+
!isRightCollapsed && /* @__PURE__ */ jsx31("div", { onMouseDown: startRightResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
7777
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", style: { width: isRightCollapsed ? 60 : rightPanelWidth, transition: "none" }, children: [
|
|
7778
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
|
|
7779
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-1", children: [
|
|
7780
|
+
["history", "gallery", "inspect", "setup", "sync", "tags"].map((tab) => /* @__PURE__ */ jsx31("button", { onClick: () => {
|
|
7506
7781
|
setActiveTab(tab);
|
|
7507
7782
|
setIsRightCollapsed(false);
|
|
7508
|
-
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */
|
|
7509
|
-
serverBaseUrl && /* @__PURE__ */
|
|
7783
|
+
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : tab === "setup" ? "settings" : tab === "sync" ? "cloud_sync" : "label" }) }, tab)),
|
|
7784
|
+
serverBaseUrl && /* @__PURE__ */ jsx31("button", { onClick: () => {
|
|
7510
7785
|
setActiveTab("server");
|
|
7511
7786
|
setIsRightCollapsed(false);
|
|
7512
|
-
}, className: `w-10 flex items-center justify-center relative transition-colors ${activeTab === "server" ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */
|
|
7787
|
+
}, className: `w-10 flex items-center justify-center relative transition-colors ${activeTab === "server" ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) })
|
|
7513
7788
|
] }),
|
|
7514
|
-
hfToken && /* @__PURE__ */
|
|
7515
|
-
/* @__PURE__ */
|
|
7789
|
+
hfToken && /* @__PURE__ */ jsx31("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__ */ jsx31("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
|
|
7790
|
+
/* @__PURE__ */ jsx31("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
|
|
7516
7791
|
] }),
|
|
7517
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
7518
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
7792
|
+
!isRightCollapsed && /* @__PURE__ */ jsxs29("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
7793
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx31(
|
|
7519
7794
|
TagManagerPanel,
|
|
7520
7795
|
{
|
|
7521
7796
|
workspaceTags,
|
|
@@ -7526,12 +7801,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7526
7801
|
onTagMove: handleTagMove
|
|
7527
7802
|
}
|
|
7528
7803
|
),
|
|
7529
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
7530
|
-
/* @__PURE__ */
|
|
7531
|
-
/* @__PURE__ */
|
|
7804
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs29("div", { children: [
|
|
7805
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
7806
|
+
/* @__PURE__ */ jsx31("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
7532
7807
|
] }) }),
|
|
7533
|
-
activeTab === "history" && /* @__PURE__ */
|
|
7534
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
7808
|
+
activeTab === "history" && /* @__PURE__ */ jsx31(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: handleGallerySelect, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)), visibleCount: historyVisibleCount, onLoadMore: () => setHistoryVisibleCount((c) => c + 20) }),
|
|
7809
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx31(
|
|
7535
7810
|
MediaLibrary,
|
|
7536
7811
|
{
|
|
7537
7812
|
items: galleryItems,
|
|
@@ -7547,24 +7822,24 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7547
7822
|
onLoadMore: () => setGalleryVisibleCount((c) => c + 20)
|
|
7548
7823
|
}
|
|
7549
7824
|
),
|
|
7550
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
7551
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
7552
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
7825
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx31(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
|
|
7826
|
+
activeTab === "setup" && /* @__PURE__ */ jsx31(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo, tagBase: tagBaseResult }),
|
|
7827
|
+
activeTab === "sync" && /* @__PURE__ */ jsx31(
|
|
7553
7828
|
HfMediaSyncTab,
|
|
7554
7829
|
{
|
|
7555
7830
|
topSlot: syncTopSlot,
|
|
7556
7831
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
7557
7832
|
}
|
|
7558
7833
|
),
|
|
7559
|
-
activeTab === "server" && /* @__PURE__ */
|
|
7834
|
+
activeTab === "server" && /* @__PURE__ */ jsx31(ServerTab, { serverBaseUrl })
|
|
7560
7835
|
] })
|
|
7561
7836
|
] })
|
|
7562
7837
|
] });
|
|
7563
7838
|
}
|
|
7564
7839
|
|
|
7565
7840
|
// src/components/FaApp.tsx
|
|
7566
|
-
import { useState as
|
|
7567
|
-
import { jsx as
|
|
7841
|
+
import { useState as useState28, useEffect as useEffect13, useMemo as useMemo9 } from "react";
|
|
7842
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
7568
7843
|
function FaApp({
|
|
7569
7844
|
onGenerateImage,
|
|
7570
7845
|
onGeneratePrompt,
|
|
@@ -7579,19 +7854,19 @@ function FaApp({
|
|
|
7579
7854
|
serverBaseUrl,
|
|
7580
7855
|
buildInfo
|
|
7581
7856
|
}) {
|
|
7582
|
-
const [hfNamespace, setHfNamespace] =
|
|
7583
|
-
|
|
7857
|
+
const [hfNamespace, setHfNamespace] = useState28(void 0);
|
|
7858
|
+
useEffect13(() => {
|
|
7584
7859
|
if (!serverBaseUrl) return;
|
|
7585
7860
|
fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
|
|
7586
7861
|
if (typeof d.hfNamespace === "string") setHfNamespace(d.hfNamespace);
|
|
7587
7862
|
}).catch(() => {
|
|
7588
7863
|
});
|
|
7589
7864
|
}, [serverBaseUrl]);
|
|
7590
|
-
const wrappedPrompt =
|
|
7865
|
+
const wrappedPrompt = useMemo9(
|
|
7591
7866
|
() => alsFlowTextZugang(onGeneratePrompt),
|
|
7592
7867
|
[onGeneratePrompt]
|
|
7593
7868
|
);
|
|
7594
|
-
return /* @__PURE__ */
|
|
7869
|
+
return /* @__PURE__ */ jsx32(
|
|
7595
7870
|
AvatarArchitectApp,
|
|
7596
7871
|
{
|
|
7597
7872
|
onGenerateImage,
|
|
@@ -7841,15 +8116,15 @@ function createInMemoryWorkspacePersistence(now = () => Date.now()) {
|
|
|
7841
8116
|
}
|
|
7842
8117
|
|
|
7843
8118
|
// node_modules/zustand/esm/react.mjs
|
|
7844
|
-
import
|
|
8119
|
+
import React25 from "react";
|
|
7845
8120
|
var identity = (arg) => arg;
|
|
7846
8121
|
function useStore(api, selector = identity) {
|
|
7847
|
-
const slice =
|
|
8122
|
+
const slice = React25.useSyncExternalStore(
|
|
7848
8123
|
api.subscribe,
|
|
7849
|
-
|
|
7850
|
-
|
|
8124
|
+
React25.useCallback(() => selector(api.getState()), [api, selector]),
|
|
8125
|
+
React25.useCallback(() => selector(api.getInitialState()), [api, selector])
|
|
7851
8126
|
);
|
|
7852
|
-
|
|
8127
|
+
React25.useDebugValue(slice);
|
|
7853
8128
|
return slice;
|
|
7854
8129
|
}
|
|
7855
8130
|
|
|
@@ -8153,7 +8428,7 @@ function zugehoerigkeitenOf(item) {
|
|
|
8153
8428
|
}
|
|
8154
8429
|
|
|
8155
8430
|
// src/features/library/ZugehoerigkeitLinks.tsx
|
|
8156
|
-
import { Fragment as Fragment12, jsx as
|
|
8431
|
+
import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
8157
8432
|
var CHIP_BASIS = "text-[9px] px-1.5 py-0.5 rounded-full font-bold border transition";
|
|
8158
8433
|
var CHIP_LAUF = "bg-teal-900/60 text-teal-200 border-teal-800 hover:bg-teal-800 hover:text-white";
|
|
8159
8434
|
var CHIP_SZENE = "bg-indigo-900/60 text-indigo-200 border-indigo-800 hover:bg-indigo-800 hover:text-white";
|
|
@@ -8179,8 +8454,8 @@ var ZugehoerigkeitLinks = ({
|
|
|
8179
8454
|
};
|
|
8180
8455
|
if (variante === "liste") {
|
|
8181
8456
|
if (!hatNavigationsziele(zugehoerigkeit)) return null;
|
|
8182
|
-
return /* @__PURE__ */
|
|
8183
|
-
run && /* @__PURE__ */
|
|
8457
|
+
return /* @__PURE__ */ jsxs30(Fragment12, { children: [
|
|
8458
|
+
run && /* @__PURE__ */ jsx33(
|
|
8184
8459
|
"button",
|
|
8185
8460
|
{
|
|
8186
8461
|
type: "button",
|
|
@@ -8191,7 +8466,7 @@ var ZugehoerigkeitLinks = ({
|
|
|
8191
8466
|
children: beschriftung(run, "Promptlauf")
|
|
8192
8467
|
}
|
|
8193
8468
|
),
|
|
8194
|
-
scene && /* @__PURE__ */
|
|
8469
|
+
scene && /* @__PURE__ */ jsx33(
|
|
8195
8470
|
"button",
|
|
8196
8471
|
{
|
|
8197
8472
|
type: "button",
|
|
@@ -8204,15 +8479,15 @@ var ZugehoerigkeitLinks = ({
|
|
|
8204
8479
|
)
|
|
8205
8480
|
] });
|
|
8206
8481
|
}
|
|
8207
|
-
return /* @__PURE__ */
|
|
8482
|
+
return /* @__PURE__ */ jsxs30(
|
|
8208
8483
|
"div",
|
|
8209
8484
|
{
|
|
8210
8485
|
className: "bg-black border border-neutral-800 p-2 rounded flex flex-col gap-1",
|
|
8211
8486
|
"data-testid": "zugehoerigkeit-bereich",
|
|
8212
8487
|
children: [
|
|
8213
|
-
/* @__PURE__ */
|
|
8214
|
-
/* @__PURE__ */
|
|
8215
|
-
run && /* @__PURE__ */
|
|
8488
|
+
/* @__PURE__ */ jsx33("span", { className: "text-[10px] uppercase font-bold text-neutral-500", children: "Zugeh\xF6rigkeit" }),
|
|
8489
|
+
/* @__PURE__ */ jsxs30("div", { className: "flex flex-wrap gap-2", children: [
|
|
8490
|
+
run && /* @__PURE__ */ jsx33(
|
|
8216
8491
|
"button",
|
|
8217
8492
|
{
|
|
8218
8493
|
type: "button",
|
|
@@ -8223,7 +8498,7 @@ var ZugehoerigkeitLinks = ({
|
|
|
8223
8498
|
children: beschriftung(run, "Promptlauf \xF6ffnen")
|
|
8224
8499
|
}
|
|
8225
8500
|
),
|
|
8226
|
-
scene && /* @__PURE__ */
|
|
8501
|
+
scene && /* @__PURE__ */ jsx33(
|
|
8227
8502
|
"button",
|
|
8228
8503
|
{
|
|
8229
8504
|
type: "button",
|
|
@@ -8235,7 +8510,7 @@ var ZugehoerigkeitLinks = ({
|
|
|
8235
8510
|
}
|
|
8236
8511
|
)
|
|
8237
8512
|
] }),
|
|
8238
|
-
hinweis && /* @__PURE__ */
|
|
8513
|
+
hinweis && /* @__PURE__ */ jsx33("span", { className: "text-[10px] text-neutral-500", "data-testid": "zugehoerigkeit-hinweis", children: hinweis })
|
|
8239
8514
|
]
|
|
8240
8515
|
}
|
|
8241
8516
|
);
|