@rslsp1/fa-app-tools 10.3.4 → 10.3.5
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 +25 -2
- package/dist/index.d.ts +25 -2
- package/dist/index.js +345 -83
- package/dist/index.mjs +643 -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.5";
|
|
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_CONNECT_TIMEOUT_MS = 3e5;
|
|
5541
5542
|
function isRecord(value) {
|
|
5542
5543
|
return value !== null && typeof value === "object" && !Array.isArray(value);
|
|
5543
5544
|
}
|
|
@@ -5604,13 +5605,23 @@ 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 connect(env, { timeoutMs = FLOW_BRIDGE_CONNECT_TIMEOUT_MS } = {}) {
|
|
5609
|
+
const started = clock();
|
|
5610
|
+
const reply = await exchange({ op: "connect", env }, timeoutMs);
|
|
5611
|
+
const waitedMs = Math.round(clock() - started);
|
|
5612
|
+
if (!reply) {
|
|
5613
|
+
return { ok: false, error: { code: "no-bridge", message: `Keine Freigabe innerhalb von ${Math.round(timeoutMs / 1e3)} s \u2014 Extension fehlt, Frame nicht freigegeben oder Popup nicht bestaetigt.` }, waitedMs };
|
|
5614
|
+
}
|
|
5615
|
+
if (reply.ok !== true || reply.env !== env || typeof reply.server !== "string") return { ok: false, error: readError(reply.error), waitedMs };
|
|
5616
|
+
return { ok: true, env, server: reply.server, waitedMs };
|
|
5617
|
+
},
|
|
5618
|
+
async request(request, { timeoutMs = requestTimeoutMs } = {}) {
|
|
5608
5619
|
const started = clock();
|
|
5609
5620
|
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 },
|
|
5621
|
+
const reply = await exchange({ op: "request", target: request.target, method: request.method, path: request.path, ...tokenSuffix }, timeoutMs);
|
|
5611
5622
|
const roundTripMs = Math.round(clock() - started);
|
|
5612
5623
|
if (!reply) {
|
|
5613
|
-
return { ok: false, transport: null, status: null, data: null, latencyMs: null, roundTripMs, error: noBridge(
|
|
5624
|
+
return { ok: false, transport: null, status: null, data: null, latencyMs: null, roundTripMs, error: noBridge(timeoutMs) };
|
|
5614
5625
|
}
|
|
5615
5626
|
const ok = reply.ok === true;
|
|
5616
5627
|
return {
|
|
@@ -5852,6 +5863,235 @@ var FlowBridgePanel = ({ appVersion, client, hfToken }) => {
|
|
|
5852
5863
|
] });
|
|
5853
5864
|
};
|
|
5854
5865
|
|
|
5866
|
+
// src/components/FlowFineArtApp.tsx
|
|
5867
|
+
import { useEffect as useEffect11, useMemo as useMemo7, useRef as useRef10, useState as useState26 } from "react";
|
|
5868
|
+
|
|
5869
|
+
// src/lib/flowAppLoader.ts
|
|
5870
|
+
var FLOW_APP_TARGETS = {
|
|
5871
|
+
dev: { bridgeTarget: "devMcp", backendUrl: "https://dev-app.art-by-rolands.de" },
|
|
5872
|
+
prod: { bridgeTarget: "prodMcp", backendUrl: "https://app.art-by-rolands.de" }
|
|
5873
|
+
};
|
|
5874
|
+
var FLOW_APP_FILES = ["react-runtime.js", "master.css", "app.js"];
|
|
5875
|
+
var FLOW_APP_REQUEST_TIMEOUT_MS = 75e3;
|
|
5876
|
+
var FLOW_APP_SCRIPT_TIMEOUT_MS = 15e3;
|
|
5877
|
+
var CSP_SETTLE_MS2 = 100;
|
|
5878
|
+
function isRecord3(value) {
|
|
5879
|
+
return value !== null && typeof value === "object" && !Array.isArray(value);
|
|
5880
|
+
}
|
|
5881
|
+
function readFlowAppFile(data, file) {
|
|
5882
|
+
if (!isRecord3(data)) return null;
|
|
5883
|
+
const { sha256, source } = data;
|
|
5884
|
+
if (data.file !== file) return null;
|
|
5885
|
+
if (typeof sha256 !== "string" || !/^[0-9a-f]{64}$/.test(sha256)) return null;
|
|
5886
|
+
if (typeof source !== "string" || source.length === 0) return null;
|
|
5887
|
+
return { file, sha256, source };
|
|
5888
|
+
}
|
|
5889
|
+
async function sha256Hex2(text) {
|
|
5890
|
+
if (!globalThis.crypto?.subtle) throw new Error("crypto.subtle ist in diesem Kontext nicht verfuegbar.");
|
|
5891
|
+
const digest = await globalThis.crypto.subtle.digest("SHA-256", new TextEncoder().encode(text));
|
|
5892
|
+
return [...new Uint8Array(digest)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
|
|
5893
|
+
}
|
|
5894
|
+
var message2 = (error) => error instanceof Error ? error.message : String(error);
|
|
5895
|
+
var wait2 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
5896
|
+
async function runScriptBlob(source, doc, timeoutMs, step) {
|
|
5897
|
+
const onViolation = (event) => {
|
|
5898
|
+
const violation = event;
|
|
5899
|
+
step.cspViolations.push(`${violation.effectiveDirective || violation.violatedDirective}: ${violation.blockedURI || "unbekannt"}`);
|
|
5900
|
+
};
|
|
5901
|
+
doc.addEventListener("securitypolicyviolation", onViolation);
|
|
5902
|
+
let url = null;
|
|
5903
|
+
let script = null;
|
|
5904
|
+
try {
|
|
5905
|
+
url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
|
|
5906
|
+
const element = doc.createElement("script");
|
|
5907
|
+
script = element;
|
|
5908
|
+
step.scriptEvent = await new Promise((resolve) => {
|
|
5909
|
+
const timer = setTimeout(() => resolve("timeout"), timeoutMs);
|
|
5910
|
+
element.addEventListener("load", () => {
|
|
5911
|
+
clearTimeout(timer);
|
|
5912
|
+
resolve("load");
|
|
5913
|
+
});
|
|
5914
|
+
element.addEventListener("error", () => {
|
|
5915
|
+
clearTimeout(timer);
|
|
5916
|
+
resolve("error");
|
|
5917
|
+
});
|
|
5918
|
+
element.src = url;
|
|
5919
|
+
(doc.head ?? doc.documentElement).appendChild(element);
|
|
5920
|
+
});
|
|
5921
|
+
} catch (error) {
|
|
5922
|
+
step.error = `Skript nicht einfuegbar: ${message2(error)}`;
|
|
5923
|
+
}
|
|
5924
|
+
if (step.scriptEvent !== "load") await wait2(CSP_SETTLE_MS2);
|
|
5925
|
+
doc.removeEventListener("securitypolicyviolation", onViolation);
|
|
5926
|
+
script?.remove();
|
|
5927
|
+
if (url) URL.revokeObjectURL(url);
|
|
5928
|
+
}
|
|
5929
|
+
function scriptFailure(step, expectation) {
|
|
5930
|
+
if (step.error) return step.error;
|
|
5931
|
+
if (step.scriptEvent === "load") return `script.onload, aber ${expectation} \u2014 Ausfuehrung nicht belegt.`;
|
|
5932
|
+
if (step.scriptEvent === "error") return "script.onerror \u2014 Skript nicht geladen oder blockiert.";
|
|
5933
|
+
return "Kein Skript-Ereignis innerhalb der Wartezeit.";
|
|
5934
|
+
}
|
|
5935
|
+
async function loadFlowApp({
|
|
5936
|
+
bridge,
|
|
5937
|
+
environment,
|
|
5938
|
+
tokenSuffix,
|
|
5939
|
+
win = window,
|
|
5940
|
+
doc = document,
|
|
5941
|
+
digest = sha256Hex2,
|
|
5942
|
+
scriptTimeoutMs = FLOW_APP_SCRIPT_TIMEOUT_MS,
|
|
5943
|
+
onStep
|
|
5944
|
+
}) {
|
|
5945
|
+
const target = FLOW_APP_TARGETS[environment];
|
|
5946
|
+
const globals = win;
|
|
5947
|
+
const steps = [];
|
|
5948
|
+
const report = () => onStep?.(steps.map((step) => ({ ...step, cspViolations: [...step.cspViolations] })));
|
|
5949
|
+
const fail3 = (step, error) => {
|
|
5950
|
+
step.error = error;
|
|
5951
|
+
report();
|
|
5952
|
+
return { ok: false, steps, error: `${step.file}: ${error}` };
|
|
5953
|
+
};
|
|
5954
|
+
let css = "";
|
|
5955
|
+
for (const file of FLOW_APP_FILES) {
|
|
5956
|
+
const step = { file, response: null, chars: null, hash: null, scriptEvent: null, cspViolations: [], error: null };
|
|
5957
|
+
steps.push(step);
|
|
5958
|
+
report();
|
|
5959
|
+
step.response = await bridge.request(
|
|
5960
|
+
{ target: target.bridgeTarget, method: "GET", path: `/flow-app/bundle/${file}`, tokenSuffix },
|
|
5961
|
+
{ timeoutMs: FLOW_APP_REQUEST_TIMEOUT_MS }
|
|
5962
|
+
);
|
|
5963
|
+
if (!step.response.ok) {
|
|
5964
|
+
const status = step.response.status !== null ? `HTTP ${step.response.status} \xB7 ` : "";
|
|
5965
|
+
return fail3(step, `${status}${step.response.error?.code}: ${step.response.error?.message}`);
|
|
5966
|
+
}
|
|
5967
|
+
const loaded = readFlowAppFile(step.response.data, file);
|
|
5968
|
+
if (!loaded) return fail3(step, "Antwort ohne gueltige Datei.");
|
|
5969
|
+
step.chars = loaded.source.length;
|
|
5970
|
+
try {
|
|
5971
|
+
step.hash = await digest(loaded.source) === loaded.sha256 ? "ok" : "mismatch";
|
|
5972
|
+
} catch {
|
|
5973
|
+
step.hash = "unavailable";
|
|
5974
|
+
}
|
|
5975
|
+
if (step.hash === "mismatch") return fail3(step, "SHA-256 des empfangenen Quelltexts weicht ab \u2014 nicht ausgefuehrt.");
|
|
5976
|
+
if (file === "master.css") {
|
|
5977
|
+
css = loaded.source;
|
|
5978
|
+
report();
|
|
5979
|
+
continue;
|
|
5980
|
+
}
|
|
5981
|
+
if (file === "app.js") delete globals.FineArtApp;
|
|
5982
|
+
await runScriptBlob(loaded.source, doc, scriptTimeoutMs, step);
|
|
5983
|
+
if (file === "react-runtime.js") {
|
|
5984
|
+
const ReactDOM = globals.ReactDOM;
|
|
5985
|
+
if (!isRecord3(globals.React) || typeof ReactDOM?.createRoot !== "function") {
|
|
5986
|
+
return fail3(step, scriptFailure(step, "window.React/window.ReactDOM.createRoot fehlen"));
|
|
5987
|
+
}
|
|
5988
|
+
} else if (typeof globals.FineArtApp !== "function") {
|
|
5989
|
+
return fail3(step, scriptFailure(step, "window.FineArtApp fehlt"));
|
|
5990
|
+
}
|
|
5991
|
+
report();
|
|
5992
|
+
}
|
|
5993
|
+
return {
|
|
5994
|
+
ok: true,
|
|
5995
|
+
steps,
|
|
5996
|
+
css,
|
|
5997
|
+
runtime: {
|
|
5998
|
+
React: globals.React,
|
|
5999
|
+
ReactDOM: globals.ReactDOM,
|
|
6000
|
+
FineArtApp: globals.FineArtApp
|
|
6001
|
+
},
|
|
6002
|
+
backendUrl: target.backendUrl
|
|
6003
|
+
};
|
|
6004
|
+
}
|
|
6005
|
+
|
|
6006
|
+
// src/components/FlowFineArtApp.tsx
|
|
6007
|
+
import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
6008
|
+
var FLOW_APP_STYLE_ID = "fa-flow-app-master-css";
|
|
6009
|
+
var BAR_HEIGHT = 32;
|
|
6010
|
+
function stepText(step) {
|
|
6011
|
+
const parts = [step.file];
|
|
6012
|
+
if (step.response) {
|
|
6013
|
+
parts.push(step.response.status !== null ? `HTTP ${step.response.status}` : "kein HTTP-Status");
|
|
6014
|
+
parts.push(`${step.response.transport ?? "kein Transport"} \xB7 ${step.response.roundTripMs} ms`);
|
|
6015
|
+
} else {
|
|
6016
|
+
parts.push("l\xE4dt\u2026");
|
|
6017
|
+
}
|
|
6018
|
+
if (step.chars !== null) parts.push(`${step.chars} Zeichen`);
|
|
6019
|
+
if (step.hash === "ok") parts.push("Hash gepr\xFCft");
|
|
6020
|
+
if (step.hash === "unavailable") parts.push("Hash nicht pr\xFCfbar");
|
|
6021
|
+
if (step.scriptEvent) parts.push(`Skript ${step.scriptEvent}`);
|
|
6022
|
+
if (step.cspViolations.length > 0) parts.push(`CSP: ${step.cspViolations.join("; ")}`);
|
|
6023
|
+
if (step.error) parts.push(`FEHLER: ${step.error}`);
|
|
6024
|
+
return parts.join(" \xB7 ");
|
|
6025
|
+
}
|
|
6026
|
+
var FlowFineArtApp = ({ environment, hfToken, appVersion, client, onClose }) => {
|
|
6027
|
+
const bridge = useMemo7(() => client ?? createFlowBridgeClient({ appVersion }), [client, appVersion]);
|
|
6028
|
+
const [connection, setConnection] = useState26(null);
|
|
6029
|
+
const [steps, setSteps] = useState26([]);
|
|
6030
|
+
const [load, setLoad] = useState26(null);
|
|
6031
|
+
const [renderError, setRenderError] = useState26(null);
|
|
6032
|
+
const appRootRef = useRef10(null);
|
|
6033
|
+
const tokenSuffix = hfTokenSuffix(hfToken);
|
|
6034
|
+
const target = FLOW_APP_TARGETS[environment];
|
|
6035
|
+
useEffect11(() => {
|
|
6036
|
+
if (!tokenSuffix) return void 0;
|
|
6037
|
+
let active = true;
|
|
6038
|
+
void (async () => {
|
|
6039
|
+
const connected = bridge.connect ? await bridge.connect(environment) : { ok: false, error: { code: "no-bridge", message: "Bridge-Client ohne connect." }, waitedMs: 0 };
|
|
6040
|
+
if (!active) return;
|
|
6041
|
+
setConnection(connected);
|
|
6042
|
+
if (!connected.ok) return;
|
|
6043
|
+
const result = await loadFlowApp({ bridge, environment, tokenSuffix, onStep: (next) => {
|
|
6044
|
+
if (active) setSteps(next);
|
|
6045
|
+
} });
|
|
6046
|
+
if (active) setLoad(result);
|
|
6047
|
+
})();
|
|
6048
|
+
return () => {
|
|
6049
|
+
active = false;
|
|
6050
|
+
};
|
|
6051
|
+
}, [bridge, environment, tokenSuffix]);
|
|
6052
|
+
useEffect11(() => {
|
|
6053
|
+
const container = appRootRef.current;
|
|
6054
|
+
if (!load?.ok || !container) return void 0;
|
|
6055
|
+
const style = document.createElement("style");
|
|
6056
|
+
style.id = FLOW_APP_STYLE_ID;
|
|
6057
|
+
style.textContent = load.css;
|
|
6058
|
+
document.head.appendChild(style);
|
|
6059
|
+
let root = null;
|
|
6060
|
+
try {
|
|
6061
|
+
root = load.runtime.ReactDOM.createRoot(container);
|
|
6062
|
+
root.render(load.runtime.React.createElement(load.runtime.FineArtApp, {
|
|
6063
|
+
customTabs: [],
|
|
6064
|
+
apiKey: null,
|
|
6065
|
+
backendUrl: load.backendUrl,
|
|
6066
|
+
transport: "flow-bridge"
|
|
6067
|
+
}));
|
|
6068
|
+
} catch (error) {
|
|
6069
|
+
setRenderError(error instanceof Error ? error.message : String(error));
|
|
6070
|
+
}
|
|
6071
|
+
return () => {
|
|
6072
|
+
root?.unmount();
|
|
6073
|
+
style.remove();
|
|
6074
|
+
};
|
|
6075
|
+
}, [load]);
|
|
6076
|
+
const failed = !tokenSuffix || connection !== null && !connection.ok || load !== null && !load.ok || renderError !== null;
|
|
6077
|
+
return /* @__PURE__ */ jsxs28("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col", "data-testid": "flow-fine-art-app", children: [
|
|
6078
|
+
/* @__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: [
|
|
6079
|
+
/* @__PURE__ */ jsx30("button", { type: "button", onClick: onClose, className: "font-bold text-white/80", children: "\u2190 FlowFA" }),
|
|
6080
|
+
/* @__PURE__ */ jsx30("span", { children: `Fine-Art App \xB7 ${environment.toUpperCase()} \xB7 ${target.backendUrl}` })
|
|
6081
|
+
] }),
|
|
6082
|
+
!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: [
|
|
6083
|
+
!tokenSuffix && /* @__PURE__ */ jsx30("span", { role: "alert", style: { color: "#f87171" }, children: "Kein HF-Token in FlowFA gesetzt \u2014 ohne ihn kein Zugang zum MCP-Host." }),
|
|
6084
|
+
tokenSuffix && !connection && /* @__PURE__ */ jsx30("span", { "data-testid": "flow-fine-art-app-connect", style: { color: "#fbbf24" }, children: `Freigabe n\xF6tig: Extension-Popup \u201EFine-Art Flow Bridge\u201C \xF6ffnen (Zahl am Symbol) \u2192 \u201EFreigeben\u201C f\xFCr ${environment.toUpperCase()} (${target.backendUrl}).` }),
|
|
6085
|
+
connection && /* @__PURE__ */ jsx30("span", { "data-testid": "flow-fine-art-app-connect", style: { color: connection.ok ? "rgba(255,255,255,0.6)" : "#f87171" }, children: connection.ok ? `Freigegeben f\xFCr dieses Dokument \xB7 ${connection.server} \xB7 nach ${connection.waitedMs} ms` : `Keine Freigabe \u2014 ${connection.error.code}: ${connection.error.message}` }),
|
|
6086
|
+
connection && !connection.ok && /* @__PURE__ */ jsx30("span", { role: "alert", className: "font-bold", style: { color: "#f87171" }, children: "App nicht gestartet \u2014 ohne Freigabe erreicht sie ihren Server nicht." }),
|
|
6087
|
+
steps.map((step) => /* @__PURE__ */ jsx30("span", { style: { color: step.error ? "#f87171" : "rgba(255,255,255,0.6)" }, children: stepText(step) }, step.file)),
|
|
6088
|
+
load && !load.ok && /* @__PURE__ */ jsx30("span", { role: "alert", className: "font-bold", style: { color: "#f87171" }, children: `App nicht gestartet \u2014 ${load.error}` })
|
|
6089
|
+
] }),
|
|
6090
|
+
renderError && /* @__PURE__ */ jsx30("span", { role: "alert", className: "p-4 text-[11px] font-mono", style: { color: "#f87171" }, children: `App nicht gerendert \u2014 ${renderError}` }),
|
|
6091
|
+
/* @__PURE__ */ jsx30("div", { ref: appRootRef, className: "flex-1 overflow-auto", style: { display: load?.ok && !failed ? "block" : "none" } })
|
|
6092
|
+
] });
|
|
6093
|
+
};
|
|
6094
|
+
|
|
5855
6095
|
// src/lib/flowBootstrapTarget.ts
|
|
5856
6096
|
var PROD_NAMESPACE = "app.art-by-rolands.de/";
|
|
5857
6097
|
var DEV_NAMESPACE = "dev-app.art-by-rolands.de/";
|
|
@@ -5902,11 +6142,15 @@ function resolveBootstrapTarget(input) {
|
|
|
5902
6142
|
environment: environmentForNamespace(namespace)
|
|
5903
6143
|
};
|
|
5904
6144
|
}
|
|
6145
|
+
function flowAppEnvironment(target, isDialogTarget, selectedNamespace) {
|
|
6146
|
+
if (isDialogTarget) return environmentForNamespace(normalizeSelectableNamespace(selectedNamespace));
|
|
6147
|
+
return target.ready ? target.environment : null;
|
|
6148
|
+
}
|
|
5905
6149
|
|
|
5906
6150
|
// src/components/AvatarArchitectApp.tsx
|
|
5907
|
-
import { Fragment as Fragment11, jsx as
|
|
6151
|
+
import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
5908
6152
|
function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, requireWorkspaceSelection = false, serverBaseUrl }) {
|
|
5909
|
-
|
|
6153
|
+
useEffect12(() => {
|
|
5910
6154
|
const id = "flow-styles";
|
|
5911
6155
|
if (!document.getElementById(id)) {
|
|
5912
6156
|
const style = document.createElement("style");
|
|
@@ -5915,33 +6159,34 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5915
6159
|
document.head.appendChild(style);
|
|
5916
6160
|
}
|
|
5917
6161
|
}, []);
|
|
5918
|
-
const [showStart, setShowStart] =
|
|
5919
|
-
const [layoutChoice, setLayoutChoice] =
|
|
6162
|
+
const [showStart, setShowStart] = useState27(true);
|
|
6163
|
+
const [layoutChoice, setLayoutChoice] = useState27(() => {
|
|
5920
6164
|
try {
|
|
5921
6165
|
return localStorage.getItem("aa-layout") || null;
|
|
5922
6166
|
} catch {
|
|
5923
6167
|
return null;
|
|
5924
6168
|
}
|
|
5925
6169
|
});
|
|
5926
|
-
const [hfToken, setHfToken] =
|
|
5927
|
-
const [
|
|
5928
|
-
const [
|
|
6170
|
+
const [hfToken, setHfToken] = useState27(initialHfToken || "");
|
|
6171
|
+
const [serverAppEnvironment, setServerAppEnvironment] = useState27(null);
|
|
6172
|
+
const [hfTokenInput, setHfTokenInput] = useState27(initialHfToken || "");
|
|
6173
|
+
const [hfNamespaceLocal, setHfNamespaceLocal] = useState27(() => {
|
|
5929
6174
|
try {
|
|
5930
6175
|
return normalizeSelectableNamespace(localStorage.getItem("aa-hf-namespace"));
|
|
5931
6176
|
} catch {
|
|
5932
6177
|
return DEFAULT_NAMESPACE;
|
|
5933
6178
|
}
|
|
5934
6179
|
});
|
|
5935
|
-
const [hfNamespaceFromServer, setHfNamespaceFromServer] =
|
|
5936
|
-
const [serverProbeFailed, setServerProbeFailed] =
|
|
5937
|
-
|
|
6180
|
+
const [hfNamespaceFromServer, setHfNamespaceFromServer] = useState27(null);
|
|
6181
|
+
const [serverProbeFailed, setServerProbeFailed] = useState27(false);
|
|
6182
|
+
useEffect12(() => {
|
|
5938
6183
|
if (hfNamespace !== void 0 || !serverBaseUrl) return;
|
|
5939
6184
|
fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
|
|
5940
6185
|
if (typeof d.hfNamespace === "string" && d.hfNamespace) setHfNamespaceFromServer(d.hfNamespace);
|
|
5941
6186
|
else setServerProbeFailed(true);
|
|
5942
6187
|
}).catch(() => setServerProbeFailed(true));
|
|
5943
6188
|
}, [hfNamespace, serverBaseUrl]);
|
|
5944
|
-
const [targetConfirmed, setTargetConfirmed] =
|
|
6189
|
+
const [targetConfirmed, setTargetConfirmed] = useState27(false);
|
|
5945
6190
|
const isDialogTarget = hfNamespace === void 0 && hfNamespaceFromServer === null && (!serverBaseUrl || serverProbeFailed);
|
|
5946
6191
|
const isProbingServer = hfNamespace === void 0 && !!serverBaseUrl && hfNamespaceFromServer === null && !serverProbeFailed;
|
|
5947
6192
|
const bootstrapTarget = resolveBootstrapTarget({
|
|
@@ -5952,8 +6197,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5952
6197
|
isStartDialogOpen: isDialogTarget && !targetConfirmed
|
|
5953
6198
|
});
|
|
5954
6199
|
const effectiveNamespace = bootstrapTarget.namespace ?? "";
|
|
5955
|
-
const kontextRef =
|
|
5956
|
-
const szenenPort =
|
|
6200
|
+
const kontextRef = useRef11(null);
|
|
6201
|
+
const szenenPort = useMemo8(() => hfToken && effectiveNamespace ? createFlowSzenenViewPort({
|
|
5957
6202
|
generateText: onGeneratePrompt,
|
|
5958
6203
|
token: hfToken,
|
|
5959
6204
|
namespace: effectiveNamespace,
|
|
@@ -5975,36 +6220,36 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5975
6220
|
const tagBaseResult = useTagBase(hfToken, effectiveNamespace);
|
|
5976
6221
|
const szenenKontextId = tagBaseResult.selectedContextId === null ? null : String(tagBaseResult.selectedContextId);
|
|
5977
6222
|
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__ */
|
|
6223
|
+
const [imageUploadStatus, setImageUploadStatus] = useState27(/* @__PURE__ */ new Map());
|
|
6224
|
+
const [bootstrapLog, setBootstrapLog] = useState27([]);
|
|
6225
|
+
const [isBootstrapping, setIsBootstrapping] = useState27(false);
|
|
6226
|
+
const [hfMissingImages, setHfMissingImages] = useState27([]);
|
|
6227
|
+
const syncTopSlot = /* @__PURE__ */ jsxs29(Fragment11, { children: [
|
|
6228
|
+
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
6229
|
"\u26A0 ",
|
|
5985
6230
|
localOnlyCount,
|
|
5986
6231
|
" lokale Event",
|
|
5987
6232
|
localOnlyCount > 1 ? "s" : "",
|
|
5988
6233
|
" noch nicht auf HF best\xE4tigt"
|
|
5989
6234
|
] }),
|
|
5990
|
-
pendingBufferCount > 0 && /* @__PURE__ */
|
|
6235
|
+
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
6236
|
pendingBufferCount,
|
|
5992
6237
|
" \xC4nderung",
|
|
5993
6238
|
pendingBufferCount > 1 ? "en" : "",
|
|
5994
6239
|
" lokal \u2014 bei Flow-Reload verloren wenn nicht synchronisiert"
|
|
5995
6240
|
] }),
|
|
5996
|
-
eventCount > 100 && /* @__PURE__ */
|
|
6241
|
+
eventCount > 100 && /* @__PURE__ */ jsxs29("div", { style: { background: "#dc2626", color: "#fff", padding: "5px 10px", borderRadius: 4, marginBottom: 4, fontWeight: 600, fontSize: 11 }, children: [
|
|
5997
6242
|
"\u26A0 ",
|
|
5998
6243
|
eventCount,
|
|
5999
6244
|
" Events nicht konsolidiert \u2014 Konsolidierung dringend empfohlen"
|
|
6000
6245
|
] }),
|
|
6001
|
-
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */
|
|
6246
|
+
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ jsxs29("div", { style: { background: "#44403c", color: "#a8a29e", padding: "4px 10px", borderRadius: 4, marginBottom: 4, fontSize: 11 }, children: [
|
|
6002
6247
|
eventCount,
|
|
6003
6248
|
" Events seit letzter Konsolidierung \u2014 Konsolidierung empfohlen"
|
|
6004
6249
|
] }),
|
|
6005
|
-
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */
|
|
6006
|
-
/* @__PURE__ */
|
|
6007
|
-
/* @__PURE__ */
|
|
6250
|
+
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ jsxs29("div", { style: { background: "#1c1917", border: "1px solid #44403c", borderRadius: 6, padding: "10px 12px" }, children: [
|
|
6251
|
+
/* @__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" }),
|
|
6252
|
+
/* @__PURE__ */ jsx31(
|
|
6008
6253
|
"button",
|
|
6009
6254
|
{
|
|
6010
6255
|
disabled: isBootstrapping || !effectiveNamespace,
|
|
@@ -6025,7 +6270,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6025
6270
|
children: isBootstrapping ? "Migriere\u2026" : "Legacy-Migration starten"
|
|
6026
6271
|
}
|
|
6027
6272
|
),
|
|
6028
|
-
bootstrapLog.length > 0 && /* @__PURE__ */
|
|
6273
|
+
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
6274
|
] })
|
|
6030
6275
|
] });
|
|
6031
6276
|
const startApp = (choice) => {
|
|
@@ -6037,18 +6282,18 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6037
6282
|
setTargetConfirmed(true);
|
|
6038
6283
|
setShowStart(false);
|
|
6039
6284
|
};
|
|
6040
|
-
const [nodes, setNodes] =
|
|
6041
|
-
const [edges, setEdges] =
|
|
6042
|
-
const [history, setHistory] =
|
|
6043
|
-
const [galleryItems, setGalleryItems] =
|
|
6044
|
-
const galleryItemsRef =
|
|
6045
|
-
|
|
6285
|
+
const [nodes, setNodes] = useState27([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
|
|
6286
|
+
const [edges, setEdges] = useState27([]);
|
|
6287
|
+
const [history, setHistory] = useState27([]);
|
|
6288
|
+
const [galleryItems, setGalleryItems] = useState27([]);
|
|
6289
|
+
const galleryItemsRef = useRef11([]);
|
|
6290
|
+
useEffect12(() => {
|
|
6046
6291
|
galleryItemsRef.current = galleryItems;
|
|
6047
6292
|
}, [galleryItems]);
|
|
6048
|
-
const hfImageNotFoundRef =
|
|
6049
|
-
const [galleryVisibleCount, setGalleryVisibleCount] =
|
|
6050
|
-
const [historyVisibleCount, setHistoryVisibleCount] =
|
|
6051
|
-
const hfInFlightRef =
|
|
6293
|
+
const hfImageNotFoundRef = useRef11(/* @__PURE__ */ new Map());
|
|
6294
|
+
const [galleryVisibleCount, setGalleryVisibleCount] = useState27(20);
|
|
6295
|
+
const [historyVisibleCount, setHistoryVisibleCount] = useState27(20);
|
|
6296
|
+
const hfInFlightRef = useRef11(/* @__PURE__ */ new Set());
|
|
6052
6297
|
const loadThumbnailsForEntries = useCallback4(async (entries) => {
|
|
6053
6298
|
await loadThumbnailsSequentially(entries, {
|
|
6054
6299
|
inFlight: hfInFlightRef.current,
|
|
@@ -6069,7 +6314,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6069
6314
|
}
|
|
6070
6315
|
});
|
|
6071
6316
|
}, [hfToken, effectiveNamespace]);
|
|
6072
|
-
|
|
6317
|
+
useEffect12(() => {
|
|
6073
6318
|
if (!hfState) return;
|
|
6074
6319
|
if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
|
|
6075
6320
|
const hfIds = new Set(hfState.metadata.map((m) => m.id));
|
|
@@ -6096,24 +6341,24 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6096
6341
|
return [...localOnly, ...merged].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
|
|
6097
6342
|
});
|
|
6098
6343
|
}, [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] =
|
|
6344
|
+
const [activePrompt, setActivePrompt] = useState27("");
|
|
6345
|
+
const [isSynthesizing, setIsSynthesizing] = useState27(false);
|
|
6346
|
+
const [activeGenerationsCount, setActiveGenerationsCount] = useState27(0);
|
|
6347
|
+
const [currentResult, setCurrentResult] = useState27(null);
|
|
6348
|
+
const [focusedNodeId, setFocusedNodeId] = useState27(null);
|
|
6349
|
+
const [leftTab, setLeftTab] = useState27("prompt");
|
|
6350
|
+
const [promptFeedback, setPromptFeedback] = useState27(null);
|
|
6351
|
+
const [lastPromptPayload, setLastPromptPayload] = useState27(null);
|
|
6352
|
+
const [isPromptTabGenerating, setIsPromptTabGenerating] = useState27(false);
|
|
6353
|
+
const [activeTab, setActiveTab] = useState27("history");
|
|
6354
|
+
const [mobileTab, setMobileTab] = useState27("stage");
|
|
6355
|
+
const [middlePanel, setMiddlePanel] = useState27("stage");
|
|
6356
|
+
const [recentLabItems, setRecentLabItems] = useState27([]);
|
|
6357
|
+
const [aspectRatio, setAspectRatio] = useState27("1:1");
|
|
6358
|
+
const [selectedModel, setSelectedModel] = useState27("\u{1F34C} Nano Banana Pro");
|
|
6359
|
+
const [seed, setSeed] = useState27(Math.floor(Math.random() * 1e6));
|
|
6360
|
+
const [seedMode, setSeedMode] = useState27("random");
|
|
6361
|
+
const [imageCount, setImageCount] = useState27(() => {
|
|
6117
6362
|
try {
|
|
6118
6363
|
const v = parseInt(localStorage.getItem("aa-image-count") || "", 10);
|
|
6119
6364
|
return v >= 1 && v <= 8 ? v : 4;
|
|
@@ -6135,38 +6380,38 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6135
6380
|
{ label: "4 Bilder", value: "4" },
|
|
6136
6381
|
{ label: "8 Bilder", value: "8" }
|
|
6137
6382
|
];
|
|
6138
|
-
const [isLeftCollapsed, setIsLeftCollapsed] =
|
|
6139
|
-
const [isRightCollapsed, setIsRightCollapsed] =
|
|
6140
|
-
const [leftPanelWidth, setLeftPanelWidth] =
|
|
6383
|
+
const [isLeftCollapsed, setIsLeftCollapsed] = useState27(false);
|
|
6384
|
+
const [isRightCollapsed, setIsRightCollapsed] = useState27(false);
|
|
6385
|
+
const [leftPanelWidth, setLeftPanelWidth] = useState27(() => {
|
|
6141
6386
|
try {
|
|
6142
6387
|
return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
|
|
6143
6388
|
} catch {
|
|
6144
6389
|
return 260;
|
|
6145
6390
|
}
|
|
6146
6391
|
});
|
|
6147
|
-
const [rightPanelWidth, setRightPanelWidth] =
|
|
6392
|
+
const [rightPanelWidth, setRightPanelWidth] = useState27(() => {
|
|
6148
6393
|
try {
|
|
6149
6394
|
return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
|
|
6150
6395
|
} catch {
|
|
6151
6396
|
return 320;
|
|
6152
6397
|
}
|
|
6153
6398
|
});
|
|
6154
|
-
const [isPromptCollapsed, setIsPromptCollapsed] =
|
|
6155
|
-
const [workspaceTags, setWorkspaceTags] =
|
|
6156
|
-
const [highContrast, setHighContrast] =
|
|
6399
|
+
const [isPromptCollapsed, setIsPromptCollapsed] = useState27(false);
|
|
6400
|
+
const [workspaceTags, setWorkspaceTags] = useState27(null);
|
|
6401
|
+
const [highContrast, setHighContrast] = useState27(() => {
|
|
6157
6402
|
try {
|
|
6158
6403
|
return localStorage.getItem("aa-contrast") === "high";
|
|
6159
6404
|
} catch {
|
|
6160
6405
|
return false;
|
|
6161
6406
|
}
|
|
6162
6407
|
});
|
|
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] =
|
|
6408
|
+
const [activeReferenceId, setActiveReferenceId] = useState27(null);
|
|
6409
|
+
const [activeReferenceThumbnail, setActiveReferenceThumbnail] = useState27(null);
|
|
6410
|
+
const [isScanningImage, setIsScanningImage] = useState27(false);
|
|
6411
|
+
const [touchStartX, setTouchStartX] = useState27(null);
|
|
6412
|
+
const [isFullscreen, setIsFullscreen] = useState27(false);
|
|
6413
|
+
const [zoomScale, setZoomScale] = useState27(1);
|
|
6414
|
+
const [zoomOffset, setZoomOffset] = useState27({ x: 0, y: 0 });
|
|
6170
6415
|
const { historyVisible, galleryVisible } = computePrefetchVisibility({
|
|
6171
6416
|
layoutChoice,
|
|
6172
6417
|
appShellVisible: !showStart && !requireWorkspaceSelection && !(isFullscreen && !!currentResult?.base64),
|
|
@@ -6183,9 +6428,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6183
6428
|
galleryVisibleCount,
|
|
6184
6429
|
loadThumbnailsForEntries
|
|
6185
6430
|
});
|
|
6186
|
-
const lastPinchDist =
|
|
6187
|
-
const lastTapTime =
|
|
6188
|
-
const dragStart =
|
|
6431
|
+
const lastPinchDist = useRef11(null);
|
|
6432
|
+
const lastTapTime = useRef11(0);
|
|
6433
|
+
const dragStart = useRef11(null);
|
|
6189
6434
|
const openFullscreen = () => {
|
|
6190
6435
|
setIsFullscreen(true);
|
|
6191
6436
|
setZoomScale(1);
|
|
@@ -6248,7 +6493,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6248
6493
|
setActiveReferenceId(null);
|
|
6249
6494
|
setActiveReferenceThumbnail(null);
|
|
6250
6495
|
};
|
|
6251
|
-
const labServices =
|
|
6496
|
+
const labServices = useMemo8(() => {
|
|
6252
6497
|
const available = groupGenerationsToLabItems([...galleryItems, ...history]);
|
|
6253
6498
|
return {
|
|
6254
6499
|
availableItems: available,
|
|
@@ -6328,7 +6573,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6328
6573
|
setIsScanningImage(false);
|
|
6329
6574
|
}
|
|
6330
6575
|
};
|
|
6331
|
-
const currentIndex =
|
|
6576
|
+
const currentIndex = useMemo8(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
|
|
6332
6577
|
const goToPrev = useCallback4(() => {
|
|
6333
6578
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
6334
6579
|
}, [currentIndex, history]);
|
|
@@ -6357,13 +6602,13 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6357
6602
|
});
|
|
6358
6603
|
}
|
|
6359
6604
|
}, [hfToken, effectiveNamespace, hfWriteEvent]);
|
|
6360
|
-
const currentGroup =
|
|
6605
|
+
const currentGroup = useMemo8(() => {
|
|
6361
6606
|
if (!currentResult?.prompt) return [];
|
|
6362
6607
|
const groups = groupByPrompt(galleryItems.filter((g) => g.status === "done" && !!g.base64));
|
|
6363
6608
|
const group = groups.find((gr) => gr.prompt === currentResult.prompt);
|
|
6364
6609
|
return group ? group.items : [];
|
|
6365
6610
|
}, [galleryItems, currentResult?.prompt]);
|
|
6366
|
-
|
|
6611
|
+
useEffect12(() => {
|
|
6367
6612
|
if (!currentResult?.prompt || !hfToken || !effectiveNamespace || !hfState) return;
|
|
6368
6613
|
const siblings = galleryItemsRef.current.filter(
|
|
6369
6614
|
(g) => g.prompt === currentResult.prompt && !g.base64 && !hfImageNotFoundRef.current.has(g.id)
|
|
@@ -6389,15 +6634,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6389
6634
|
})();
|
|
6390
6635
|
}, [currentResult?.id, currentResult?.prompt]);
|
|
6391
6636
|
const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
|
|
6392
|
-
const runningBadge = activeGenerationsCount > 0 ? /* @__PURE__ */
|
|
6637
|
+
const runningBadge = activeGenerationsCount > 0 ? /* @__PURE__ */ jsxs29(
|
|
6393
6638
|
"div",
|
|
6394
6639
|
{
|
|
6395
6640
|
className: "flex items-center gap-1 rounded-full bg-sky-500/15 border border-sky-400/30 px-2 shrink-0",
|
|
6396
6641
|
style: { height: 24 },
|
|
6397
6642
|
title: `${activeGenerationsCount} Generierung${activeGenerationsCount === 1 ? "" : "en"} l\xE4uft gerade`,
|
|
6398
6643
|
children: [
|
|
6399
|
-
/* @__PURE__ */
|
|
6400
|
-
/* @__PURE__ */
|
|
6644
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-sky-300", style: { fontSize: 14, lineHeight: 1 }, children: "autorenew" }),
|
|
6645
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[11px] font-bold text-sky-300 tabular-nums", children: activeGenerationsCount })
|
|
6401
6646
|
]
|
|
6402
6647
|
}
|
|
6403
6648
|
) : null;
|
|
@@ -6410,7 +6655,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6410
6655
|
return `${indent}- ${node.data.label || "(unbenannt)"}
|
|
6411
6656
|
` + childrenIds.map((id) => getSubtreeFormat(id, depth + 1)).join("");
|
|
6412
6657
|
}, [nodes, edges]);
|
|
6413
|
-
const activePath =
|
|
6658
|
+
const activePath = useMemo8(() => {
|
|
6414
6659
|
if (!focusedNodeId) return /* @__PURE__ */ new Set();
|
|
6415
6660
|
const path = /* @__PURE__ */ new Set([focusedNodeId]);
|
|
6416
6661
|
let currId = focusedNodeId;
|
|
@@ -6686,7 +6931,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6686
6931
|
if (isFullscreen && currentResult?.base64) {
|
|
6687
6932
|
const fsRaw = currentResult.fullBase64 || currentResult.base64;
|
|
6688
6933
|
const fsBase64 = fsRaw.startsWith("data:") ? fsRaw : `data:image/png;base64,${fsRaw}`;
|
|
6689
|
-
return /* @__PURE__ */
|
|
6934
|
+
return /* @__PURE__ */ jsxs29(
|
|
6690
6935
|
"div",
|
|
6691
6936
|
{
|
|
6692
6937
|
className: "fixed inset-0 bg-black z-50 flex items-center justify-center overflow-hidden touch-none",
|
|
@@ -6694,7 +6939,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6694
6939
|
onTouchMove: handleFsTouchMove,
|
|
6695
6940
|
onTouchEnd: handleFsTouchEnd,
|
|
6696
6941
|
children: [
|
|
6697
|
-
/* @__PURE__ */
|
|
6942
|
+
/* @__PURE__ */ jsx31(
|
|
6698
6943
|
"img",
|
|
6699
6944
|
{
|
|
6700
6945
|
src: fsBase64,
|
|
@@ -6711,57 +6956,61 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6711
6956
|
}
|
|
6712
6957
|
}
|
|
6713
6958
|
),
|
|
6714
|
-
/* @__PURE__ */
|
|
6715
|
-
zoomScale > 1 && /* @__PURE__ */
|
|
6959
|
+
/* @__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" }) }),
|
|
6960
|
+
zoomScale > 1 && /* @__PURE__ */ jsx31("button", { onClick: () => {
|
|
6716
6961
|
setZoomScale(1);
|
|
6717
6962
|
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__ */
|
|
6963
|
+
}, 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" }) }),
|
|
6964
|
+
history.length > 1 && /* @__PURE__ */ jsxs29(Fragment11, { children: [
|
|
6965
|
+
/* @__PURE__ */ jsx31("button", { onClick: () => {
|
|
6721
6966
|
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__ */
|
|
6967
|
+
}, 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" }) }),
|
|
6968
|
+
/* @__PURE__ */ jsx31("button", { onClick: () => {
|
|
6724
6969
|
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__ */
|
|
6970
|
+
}, 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" }) }),
|
|
6971
|
+
/* @__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
6972
|
currentIndex + 1,
|
|
6728
6973
|
" / ",
|
|
6729
6974
|
history.length
|
|
6730
6975
|
] })
|
|
6731
6976
|
] }),
|
|
6732
|
-
zoomScale === 1 && /* @__PURE__ */
|
|
6977
|
+
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
6978
|
]
|
|
6734
6979
|
}
|
|
6735
6980
|
);
|
|
6736
6981
|
}
|
|
6982
|
+
if (serverAppEnvironment) {
|
|
6983
|
+
return /* @__PURE__ */ jsx31(FlowFineArtApp, { environment: serverAppEnvironment, hfToken, appVersion: version, onClose: () => setServerAppEnvironment(null) });
|
|
6984
|
+
}
|
|
6737
6985
|
if (showStart) {
|
|
6738
|
-
|
|
6739
|
-
|
|
6740
|
-
|
|
6741
|
-
/* @__PURE__ */
|
|
6742
|
-
/* @__PURE__ */
|
|
6986
|
+
const serverAppTarget = flowAppEnvironment(bootstrapTarget, isDialogTarget, hfNamespaceLocal);
|
|
6987
|
+
return /* @__PURE__ */ jsxs29("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
|
|
6988
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-1", children: [
|
|
6989
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
|
|
6990
|
+
/* @__PURE__ */ jsx31("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" }),
|
|
6991
|
+
/* @__PURE__ */ jsxs29("span", { className: "text-white text-[13px] font-mono", children: [
|
|
6743
6992
|
"v",
|
|
6744
6993
|
version
|
|
6745
6994
|
] })
|
|
6746
6995
|
] }),
|
|
6747
|
-
/* @__PURE__ */
|
|
6996
|
+
/* @__PURE__ */ jsxs29(
|
|
6748
6997
|
"button",
|
|
6749
6998
|
{
|
|
6750
6999
|
onClick: toggleContrast,
|
|
6751
7000
|
className: "flex items-center gap-3 px-5 py-3 rounded-2xl border transition-colors",
|
|
6752
7001
|
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
7002
|
children: [
|
|
6754
|
-
/* @__PURE__ */
|
|
6755
|
-
/* @__PURE__ */
|
|
6756
|
-
/* @__PURE__ */
|
|
6757
|
-
/* @__PURE__ */
|
|
7003
|
+
/* @__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" }),
|
|
7004
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-start", children: [
|
|
7005
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[13px] font-bold", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.5)" }, children: highContrast ? "Hoher Kontrast" : "Normaler Kontrast" }),
|
|
7006
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[10px]", style: { color: "rgba(255,255,255,0.25)" }, children: "Tippen zum Umschalten" })
|
|
6758
7007
|
] })
|
|
6759
7008
|
]
|
|
6760
7009
|
}
|
|
6761
7010
|
),
|
|
6762
|
-
/* @__PURE__ */
|
|
6763
|
-
!initialHfToken && /* @__PURE__ */
|
|
6764
|
-
/* @__PURE__ */
|
|
7011
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
7012
|
+
!initialHfToken && /* @__PURE__ */ jsxs29("div", { className: "flex gap-2 w-full", children: [
|
|
7013
|
+
/* @__PURE__ */ jsx31(
|
|
6765
7014
|
"input",
|
|
6766
7015
|
{
|
|
6767
7016
|
type: "password",
|
|
@@ -6777,7 +7026,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6777
7026
|
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
7027
|
}
|
|
6779
7028
|
),
|
|
6780
|
-
hfTokenInput.trim() && /* @__PURE__ */
|
|
7029
|
+
hfTokenInput.trim() && /* @__PURE__ */ jsx31(
|
|
6781
7030
|
"button",
|
|
6782
7031
|
{
|
|
6783
7032
|
type: "button",
|
|
@@ -6788,9 +7037,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6788
7037
|
}
|
|
6789
7038
|
)
|
|
6790
7039
|
] }),
|
|
6791
|
-
isDialogTarget && /* @__PURE__ */
|
|
6792
|
-
/* @__PURE__ */
|
|
6793
|
-
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */
|
|
7040
|
+
isDialogTarget && /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-3 w-full", children: [
|
|
7041
|
+
/* @__PURE__ */ jsx31("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold flex-shrink-0", children: "State:" }),
|
|
7042
|
+
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ jsx31(
|
|
6794
7043
|
"button",
|
|
6795
7044
|
{
|
|
6796
7045
|
onClick: () => {
|
|
@@ -6811,48 +7060,61 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6811
7060
|
))
|
|
6812
7061
|
] })
|
|
6813
7062
|
] }),
|
|
6814
|
-
/* @__PURE__ */
|
|
6815
|
-
/* @__PURE__ */
|
|
6816
|
-
/* @__PURE__ */
|
|
7063
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
7064
|
+
/* @__PURE__ */ jsx31("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
|
|
7065
|
+
/* @__PURE__ */ jsx31("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
|
|
6817
7066
|
{ id: "mobile", icon: "smartphone", label: "Mobile" },
|
|
6818
7067
|
{ id: "mobile-desktop", icon: "phonelink", label: "Mobile+" },
|
|
6819
7068
|
{ id: "desktop", icon: "desktop_windows", label: "Desktop" },
|
|
6820
7069
|
{ id: "tablet-landscape", icon: "tablet", label: "Landscape" }
|
|
6821
|
-
].map((opt) => /* @__PURE__ */
|
|
7070
|
+
].map((opt) => /* @__PURE__ */ jsxs29(
|
|
6822
7071
|
"button",
|
|
6823
7072
|
{
|
|
6824
7073
|
onClick: () => startApp(opt.id),
|
|
6825
7074
|
className: "flex flex-col items-center gap-2 py-4 rounded-2xl border transition-colors",
|
|
6826
7075
|
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
7076
|
children: [
|
|
6828
|
-
/* @__PURE__ */
|
|
6829
|
-
/* @__PURE__ */
|
|
7077
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[24px]", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.icon }),
|
|
7078
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[11px] font-bold", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.label })
|
|
6830
7079
|
]
|
|
6831
7080
|
},
|
|
6832
7081
|
opt.id
|
|
6833
7082
|
)) }),
|
|
6834
|
-
layoutChoice === "mobile-desktop" && /* @__PURE__ */
|
|
6835
|
-
layoutChoice === "tablet-landscape" && /* @__PURE__ */
|
|
7083
|
+
layoutChoice === "mobile-desktop" && /* @__PURE__ */ jsx31("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
|
|
7084
|
+
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
7085
|
] }),
|
|
6837
|
-
/* @__PURE__ */
|
|
7086
|
+
serverAppTarget && /* @__PURE__ */ jsxs29(
|
|
7087
|
+
"button",
|
|
7088
|
+
{
|
|
7089
|
+
type: "button",
|
|
7090
|
+
onClick: () => setServerAppEnvironment(serverAppTarget),
|
|
7091
|
+
className: "flex items-center justify-center gap-2 w-full max-w-[280px] py-3 rounded-2xl border text-[11px] font-bold",
|
|
7092
|
+
style: { borderColor: "rgba(255,255,255,0.08)", color: "rgba(255,255,255,0.6)" },
|
|
7093
|
+
children: [
|
|
7094
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "web" }),
|
|
7095
|
+
`Fine-Art App (Server) \xB7 ${serverAppTarget.toUpperCase()}`
|
|
7096
|
+
]
|
|
7097
|
+
}
|
|
7098
|
+
),
|
|
7099
|
+
/* @__PURE__ */ jsx31(FlowBridgePanel, { appVersion: version, hfToken })
|
|
6838
7100
|
] });
|
|
6839
7101
|
}
|
|
6840
7102
|
if (requireWorkspaceSelection) {
|
|
6841
7103
|
if (!bootstrapTarget.ready) {
|
|
6842
|
-
return /* @__PURE__ */
|
|
7104
|
+
return /* @__PURE__ */ jsx31("main", { className: "flow-workspace-picker", children: /* @__PURE__ */ jsx31("section", { className: "flow-workspace-picker__card", children: "Zielraum wird bestimmt\u2026" }) });
|
|
6843
7105
|
}
|
|
6844
7106
|
if (!hfToken) {
|
|
6845
|
-
return /* @__PURE__ */
|
|
7107
|
+
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
7108
|
}
|
|
6847
7109
|
if (tagBaseResult.isLoading) {
|
|
6848
|
-
return /* @__PURE__ */
|
|
7110
|
+
return /* @__PURE__ */ jsx31("main", { className: "flow-workspace-picker", children: /* @__PURE__ */ jsxs29("section", { className: "flow-workspace-picker__card", children: [
|
|
6849
7111
|
"Lade User und Contexts aus ",
|
|
6850
7112
|
effectiveNamespace,
|
|
6851
7113
|
"\u2026"
|
|
6852
7114
|
] }) });
|
|
6853
7115
|
}
|
|
6854
7116
|
if (tagBaseResult.error) {
|
|
6855
|
-
return /* @__PURE__ */
|
|
7117
|
+
return /* @__PURE__ */ jsx31("main", { className: "flow-workspace-picker", children: /* @__PURE__ */ jsxs29("section", { className: "flow-workspace-picker__card", role: "alert", children: [
|
|
6856
7118
|
"Tag-Base ",
|
|
6857
7119
|
effectiveNamespace,
|
|
6858
7120
|
" konnte nicht geladen werden: ",
|
|
@@ -6860,14 +7122,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6860
7122
|
] }) });
|
|
6861
7123
|
}
|
|
6862
7124
|
if (!tagBaseResult.tagBase) {
|
|
6863
|
-
return /* @__PURE__ */
|
|
7125
|
+
return /* @__PURE__ */ jsx31("main", { className: "flow-workspace-picker", children: /* @__PURE__ */ jsxs29("section", { className: "flow-workspace-picker__card", role: "alert", children: [
|
|
6864
7126
|
"Im Namespace ",
|
|
6865
7127
|
effectiveNamespace,
|
|
6866
7128
|
" fehlt tags-state-*.zip. Der Server muss zuerst die Tag-Base erzeugen."
|
|
6867
7129
|
] }) });
|
|
6868
7130
|
}
|
|
6869
7131
|
if (tagBaseResult.needsPicker) {
|
|
6870
|
-
return /* @__PURE__ */
|
|
7132
|
+
return /* @__PURE__ */ jsx31(
|
|
6871
7133
|
FlowWorkspacePicker,
|
|
6872
7134
|
{
|
|
6873
7135
|
tagBase: tagBaseResult.tagBase,
|
|
@@ -6879,7 +7141,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6879
7141
|
);
|
|
6880
7142
|
}
|
|
6881
7143
|
}
|
|
6882
|
-
const szenenPane = szenenPort ? /* @__PURE__ */
|
|
7144
|
+
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
7145
|
"Szenen brauchen einen HF-Token f\xFCr Namespace ",
|
|
6884
7146
|
effectiveNamespace || "(noch nicht bestimmt)",
|
|
6885
7147
|
" \u2014 auf der Flow-Startseite setzen."
|
|
@@ -6889,22 +7151,22 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6889
7151
|
const mdScale = mdMode ? window.innerWidth / 430 : 1;
|
|
6890
7152
|
const mdW = mdMode ? 430 : void 0;
|
|
6891
7153
|
const mdH = mdMode ? Math.ceil(window.innerHeight / mdScale) : void 0;
|
|
6892
|
-
const mobileRoot = /* @__PURE__ */
|
|
7154
|
+
const mobileRoot = /* @__PURE__ */ jsxs29("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
|
|
6893
7155
|
width: mdMode ? mdW : "100vw",
|
|
6894
7156
|
height: mdMode ? mdH : "100dvh",
|
|
6895
7157
|
transform: mdMode ? `scale(${mdScale})` : void 0,
|
|
6896
7158
|
transformOrigin: mdMode ? "top left" : void 0,
|
|
6897
7159
|
...hcStyle || {}
|
|
6898
7160
|
}, children: [
|
|
6899
|
-
mobileTab === "labs" && /* @__PURE__ */
|
|
7161
|
+
mobileTab === "labs" && /* @__PURE__ */ jsx31("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx31(LabsTab, { services: labServices, onResult: (item) => {
|
|
6900
7162
|
const frame = item.frames[0];
|
|
6901
7163
|
if (frame?.base64) {
|
|
6902
7164
|
setCurrentResult(frameToGeneration(frame, item));
|
|
6903
7165
|
setMobileTab("stage");
|
|
6904
7166
|
}
|
|
6905
7167
|
} }) }),
|
|
6906
|
-
mobileTab === "server" && /* @__PURE__ */
|
|
6907
|
-
mobileTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
7168
|
+
mobileTab === "server" && /* @__PURE__ */ jsx31("div", { className: "flex flex-col flex-1 min-h-0 relative", children: /* @__PURE__ */ jsx31(ServerTab, { serverBaseUrl }) }),
|
|
7169
|
+
mobileTab === "tags" && workspaceTags && /* @__PURE__ */ jsx31("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx31(
|
|
6908
7170
|
TagManagerPanel,
|
|
6909
7171
|
{
|
|
6910
7172
|
workspaceTags,
|
|
@@ -6916,24 +7178,24 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6916
7178
|
}
|
|
6917
7179
|
) }),
|
|
6918
7180
|
mobileTab === "szenen" && szenenPane,
|
|
6919
|
-
mobileTab === "stage" && /* @__PURE__ */
|
|
6920
|
-
/* @__PURE__ */
|
|
6921
|
-
/* @__PURE__ */
|
|
6922
|
-
/* @__PURE__ */
|
|
6923
|
-
/* @__PURE__ */
|
|
6924
|
-
/* @__PURE__ */
|
|
6925
|
-
/* @__PURE__ */
|
|
7181
|
+
mobileTab === "stage" && /* @__PURE__ */ jsxs29("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
7182
|
+
/* @__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: [
|
|
7183
|
+
/* @__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" }] }),
|
|
7184
|
+
/* @__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" }] }),
|
|
7185
|
+
/* @__PURE__ */ jsx31(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions }),
|
|
7186
|
+
/* @__PURE__ */ jsx31("div", { className: "flex-1" }),
|
|
7187
|
+
/* @__PURE__ */ jsx31(TaskExecutor, { openTasks: hfState?.openTasks || {}, onExecute: handleExecuteTask, onTaskCompleted: handleTaskCompleted }),
|
|
6926
7188
|
runningBadge,
|
|
6927
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
6928
|
-
/* @__PURE__ */
|
|
6929
|
-
/* @__PURE__ */
|
|
6930
|
-
/* @__PURE__ */
|
|
6931
|
-
] }) : /* @__PURE__ */
|
|
6932
|
-
/* @__PURE__ */
|
|
6933
|
-
/* @__PURE__ */
|
|
7189
|
+
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: [
|
|
7190
|
+
/* @__PURE__ */ jsx31("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
7191
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
7192
|
+
/* @__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" }) })
|
|
7193
|
+
] }) : /* @__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" }) }),
|
|
7194
|
+
/* @__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" }) }),
|
|
7195
|
+
/* @__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
7196
|
] }),
|
|
6935
|
-
/* @__PURE__ */
|
|
6936
|
-
/* @__PURE__ */
|
|
7197
|
+
/* @__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: [
|
|
7198
|
+
/* @__PURE__ */ jsx31(
|
|
6937
7199
|
"textarea",
|
|
6938
7200
|
{
|
|
6939
7201
|
value: activePrompt,
|
|
@@ -6943,9 +7205,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6943
7205
|
placeholder: "Prompt eingeben..."
|
|
6944
7206
|
}
|
|
6945
7207
|
),
|
|
6946
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
7208
|
+
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
7209
|
] }) }),
|
|
6948
|
-
/* @__PURE__ */
|
|
7210
|
+
/* @__PURE__ */ jsx31("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ jsxs29(
|
|
6949
7211
|
"button",
|
|
6950
7212
|
{
|
|
6951
7213
|
onClick: () => handleGenerateBatch(),
|
|
@@ -6953,13 +7215,13 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6953
7215
|
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
7216
|
style: { height: 48, background: activePrompt.trim() ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
|
|
6955
7217
|
children: [
|
|
6956
|
-
/* @__PURE__ */
|
|
6957
|
-
/* @__PURE__ */
|
|
7218
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
|
|
7219
|
+
/* @__PURE__ */ jsx31("span", { children: "Generieren" })
|
|
6958
7220
|
]
|
|
6959
7221
|
}
|
|
6960
7222
|
) }),
|
|
6961
|
-
/* @__PURE__ */
|
|
6962
|
-
/* @__PURE__ */
|
|
7223
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
|
|
7224
|
+
/* @__PURE__ */ jsxs29(
|
|
6963
7225
|
"div",
|
|
6964
7226
|
{
|
|
6965
7227
|
className: "w-full rounded-2xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center",
|
|
@@ -6973,25 +7235,25 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6973
7235
|
setTouchStartX(null);
|
|
6974
7236
|
},
|
|
6975
7237
|
children: [
|
|
6976
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
6977
|
-
/* @__PURE__ */
|
|
6978
|
-
/* @__PURE__ */
|
|
7238
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-3 opacity-40", children: [
|
|
7239
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[40px]", children: "hourglass_top" }),
|
|
7240
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[11px] uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
6979
7241
|
] }),
|
|
6980
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
6981
|
-
/* @__PURE__ */
|
|
6982
|
-
/* @__PURE__ */
|
|
6983
|
-
/* @__PURE__ */
|
|
7242
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs29("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
|
|
7243
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
|
|
7244
|
+
/* @__PURE__ */ jsx31("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
|
|
7245
|
+
/* @__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
7246
|
] }),
|
|
6985
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
6986
|
-
!currentResult && /* @__PURE__ */
|
|
6987
|
-
/* @__PURE__ */
|
|
6988
|
-
/* @__PURE__ */
|
|
7247
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx31("img", { src: currentResult.fullBase64 || currentResult.base64, className: "w-full h-full object-contain" }),
|
|
7248
|
+
!currentResult && /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
7249
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
|
|
7250
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
6989
7251
|
] }),
|
|
6990
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
6991
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
6992
|
-
/* @__PURE__ */
|
|
6993
|
-
/* @__PURE__ */
|
|
6994
|
-
/* @__PURE__ */
|
|
7252
|
+
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" }) }),
|
|
7253
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs29(Fragment11, { children: [
|
|
7254
|
+
/* @__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" }) }),
|
|
7255
|
+
/* @__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" }) }),
|
|
7256
|
+
/* @__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
7257
|
currentIndex + 1,
|
|
6996
7258
|
" / ",
|
|
6997
7259
|
history.length
|
|
@@ -7000,8 +7262,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7000
7262
|
]
|
|
7001
7263
|
}
|
|
7002
7264
|
),
|
|
7003
|
-
currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */
|
|
7004
|
-
/* @__PURE__ */
|
|
7265
|
+
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: [
|
|
7266
|
+
/* @__PURE__ */ jsx31(
|
|
7005
7267
|
"div",
|
|
7006
7268
|
{
|
|
7007
7269
|
onClick: () => handleGallerySelect(item),
|
|
@@ -7014,10 +7276,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7014
7276
|
border: item.id === currentResult.id ? "2px solid rgba(255,255,255,0.8)" : "2px solid rgba(255,255,255,0.15)",
|
|
7015
7277
|
opacity: item.id === currentResult.id ? 1 : 0.55
|
|
7016
7278
|
},
|
|
7017
|
-
children: /* @__PURE__ */
|
|
7279
|
+
children: /* @__PURE__ */ jsx31("img", { src: item.base64, style: { width: "100%", height: "100%", objectFit: "cover" }, alt: "" })
|
|
7018
7280
|
}
|
|
7019
7281
|
),
|
|
7020
|
-
/* @__PURE__ */
|
|
7282
|
+
/* @__PURE__ */ jsx31(
|
|
7021
7283
|
"button",
|
|
7022
7284
|
{
|
|
7023
7285
|
onClick: (e) => {
|
|
@@ -7039,34 +7301,34 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7039
7301
|
alignItems: "center",
|
|
7040
7302
|
justifyContent: "center"
|
|
7041
7303
|
},
|
|
7042
|
-
children: /* @__PURE__ */
|
|
7304
|
+
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
7305
|
}
|
|
7044
7306
|
)
|
|
7045
7307
|
] }, item.id)) }),
|
|
7046
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
7047
|
-
/* @__PURE__ */
|
|
7048
|
-
/* @__PURE__ */
|
|
7049
|
-
/* @__PURE__ */
|
|
7308
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs29("div", { className: "flex gap-2 mt-3", children: [
|
|
7309
|
+
/* @__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: [
|
|
7310
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
|
|
7311
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[12px] text-white/60", children: "Prompt" })
|
|
7050
7312
|
] }),
|
|
7051
|
-
/* @__PURE__ */
|
|
7052
|
-
/* @__PURE__ */
|
|
7053
|
-
/* @__PURE__ */
|
|
7313
|
+
/* @__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: [
|
|
7314
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
|
|
7315
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
|
|
7054
7316
|
] }),
|
|
7055
|
-
/* @__PURE__ */
|
|
7056
|
-
/* @__PURE__ */
|
|
7057
|
-
/* @__PURE__ */
|
|
7317
|
+
/* @__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: [
|
|
7318
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "download" }),
|
|
7319
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[12px] text-white/60", children: "Laden" })
|
|
7058
7320
|
] })
|
|
7059
7321
|
] })
|
|
7060
7322
|
] })
|
|
7061
7323
|
] }),
|
|
7062
|
-
mobileTab === "browse" && /* @__PURE__ */
|
|
7063
|
-
/* @__PURE__ */
|
|
7064
|
-
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */
|
|
7065
|
-
hfToken && /* @__PURE__ */
|
|
7324
|
+
mobileTab === "browse" && /* @__PURE__ */ jsxs29("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
7325
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
7326
|
+
["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)),
|
|
7327
|
+
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
7328
|
] }),
|
|
7067
|
-
/* @__PURE__ */
|
|
7068
|
-
activeTab === "history" && /* @__PURE__ */
|
|
7069
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
7329
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
7330
|
+
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) }),
|
|
7331
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx31(
|
|
7070
7332
|
MediaLibrary,
|
|
7071
7333
|
{
|
|
7072
7334
|
items: galleryItems,
|
|
@@ -7085,44 +7347,44 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7085
7347
|
onLoadMore: () => setGalleryVisibleCount((c) => c + 20)
|
|
7086
7348
|
}
|
|
7087
7349
|
),
|
|
7088
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
7350
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx31(InspectPanel, { currentResult, history, onSelect: (g) => {
|
|
7089
7351
|
setCurrentResult(g);
|
|
7090
7352
|
} })
|
|
7091
7353
|
] })
|
|
7092
7354
|
] }),
|
|
7093
|
-
/* @__PURE__ */
|
|
7094
|
-
/* @__PURE__ */
|
|
7095
|
-
workspaceTags && /* @__PURE__ */
|
|
7355
|
+
/* @__PURE__ */ jsxs29("div", { style: { display: mobileTab === "tools" ? "flex" : "none" }, className: "flex flex-col flex-1 min-h-0", children: [
|
|
7356
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
7357
|
+
workspaceTags && /* @__PURE__ */ jsxs29("button", { onClick: () => {
|
|
7096
7358
|
setLeftTab("prompt");
|
|
7097
7359
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
7098
7360
|
}, 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__ */
|
|
7361
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
|
|
7100
7362
|
"Prompt"
|
|
7101
7363
|
] }),
|
|
7102
|
-
/* @__PURE__ */
|
|
7364
|
+
/* @__PURE__ */ jsxs29("button", { onClick: () => {
|
|
7103
7365
|
setLeftTab("hierarchy");
|
|
7104
7366
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
7105
7367
|
}, 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__ */
|
|
7368
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
|
|
7107
7369
|
"Hierarchie"
|
|
7108
7370
|
] }),
|
|
7109
|
-
/* @__PURE__ */
|
|
7110
|
-
/* @__PURE__ */
|
|
7371
|
+
/* @__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: [
|
|
7372
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "settings" }),
|
|
7111
7373
|
"Setup"
|
|
7112
7374
|
] }),
|
|
7113
|
-
/* @__PURE__ */
|
|
7114
|
-
/* @__PURE__ */
|
|
7375
|
+
/* @__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: [
|
|
7376
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "cloud_sync" }),
|
|
7115
7377
|
"Sync"
|
|
7116
7378
|
] }),
|
|
7117
|
-
/* @__PURE__ */
|
|
7118
|
-
/* @__PURE__ */
|
|
7379
|
+
/* @__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: [
|
|
7380
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[20px]", children: "biotech" }),
|
|
7119
7381
|
"HF"
|
|
7120
7382
|
] }),
|
|
7121
|
-
serverBaseUrl && /* @__PURE__ */
|
|
7122
|
-
workspaceTags && /* @__PURE__ */
|
|
7383
|
+
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" }) }),
|
|
7384
|
+
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
7385
|
] }),
|
|
7124
|
-
/* @__PURE__ */
|
|
7125
|
-
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */
|
|
7386
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
7387
|
+
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */ jsx31("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx31(
|
|
7126
7388
|
ListView,
|
|
7127
7389
|
{
|
|
7128
7390
|
nodes,
|
|
@@ -7153,19 +7415,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7153
7415
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
7154
7416
|
}
|
|
7155
7417
|
) }),
|
|
7156
|
-
workspaceTags && /* @__PURE__ */
|
|
7418
|
+
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
7419
|
handleGenerateBatch(prompt);
|
|
7158
7420
|
setMobileTab("stage");
|
|
7159
7421
|
}, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
|
|
7160
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
7161
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
7422
|
+
activeTab === "setup" && /* @__PURE__ */ jsx31(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo, tagBase: tagBaseResult }),
|
|
7423
|
+
activeTab === "sync" && /* @__PURE__ */ jsx31(
|
|
7162
7424
|
HfMediaSyncTab,
|
|
7163
7425
|
{
|
|
7164
7426
|
topSlot: syncTopSlot,
|
|
7165
7427
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
7166
7428
|
}
|
|
7167
7429
|
),
|
|
7168
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
7430
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx31(
|
|
7169
7431
|
TagManagerPanel,
|
|
7170
7432
|
{
|
|
7171
7433
|
workspaceTags,
|
|
@@ -7176,7 +7438,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7176
7438
|
onTagMove: handleTagMove
|
|
7177
7439
|
}
|
|
7178
7440
|
),
|
|
7179
|
-
activeTab === "hftest" && /* @__PURE__ */
|
|
7441
|
+
activeTab === "hftest" && /* @__PURE__ */ jsx31("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx31(
|
|
7180
7442
|
HFTestTab,
|
|
7181
7443
|
{
|
|
7182
7444
|
token: hfToken,
|
|
@@ -7188,10 +7450,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7188
7450
|
missingImages: hfMissingImages
|
|
7189
7451
|
}
|
|
7190
7452
|
) }),
|
|
7191
|
-
activeTab === "server" && /* @__PURE__ */
|
|
7453
|
+
activeTab === "server" && /* @__PURE__ */ jsx31("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx31(ServerTab, { serverBaseUrl }) })
|
|
7192
7454
|
] })
|
|
7193
7455
|
] }),
|
|
7194
|
-
/* @__PURE__ */
|
|
7456
|
+
/* @__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
7457
|
{ id: "tools", icon: "auto_fix_high", label: "Prompt" },
|
|
7196
7458
|
{ id: "szenen", icon: "movie", label: "Szenen" },
|
|
7197
7459
|
{ id: "stage", icon: "palette", label: "Stage" },
|
|
@@ -7199,13 +7461,13 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7199
7461
|
...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
|
|
7200
7462
|
{ id: "browse", icon: "photo_library", label: "Galerie" },
|
|
7201
7463
|
...serverBaseUrl ? [{ id: "server", icon: "storage", label: "Server" }] : []
|
|
7202
|
-
].map((tab) => /* @__PURE__ */
|
|
7203
|
-
/* @__PURE__ */
|
|
7204
|
-
/* @__PURE__ */
|
|
7464
|
+
].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: [
|
|
7465
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
|
|
7466
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
|
|
7205
7467
|
] }, tab.id)) })
|
|
7206
7468
|
] });
|
|
7207
7469
|
if (mdMode) {
|
|
7208
|
-
return /* @__PURE__ */
|
|
7470
|
+
return /* @__PURE__ */ jsx31("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
|
|
7209
7471
|
}
|
|
7210
7472
|
return mobileRoot;
|
|
7211
7473
|
}
|
|
@@ -7213,20 +7475,20 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7213
7475
|
const tlScale = Math.min(window.innerWidth / 920, window.innerHeight / 520);
|
|
7214
7476
|
const tlW = 920;
|
|
7215
7477
|
const tlH = 520;
|
|
7216
|
-
return /* @__PURE__ */
|
|
7217
|
-
/* @__PURE__ */
|
|
7218
|
-
/* @__PURE__ */
|
|
7219
|
-
/* @__PURE__ */
|
|
7220
|
-
/* @__PURE__ */
|
|
7221
|
-
/* @__PURE__ */
|
|
7222
|
-
/* @__PURE__ */
|
|
7223
|
-
/* @__PURE__ */
|
|
7478
|
+
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: [
|
|
7479
|
+
/* @__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: [
|
|
7480
|
+
/* @__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: [
|
|
7481
|
+
/* @__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" }] }),
|
|
7482
|
+
/* @__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" }] }),
|
|
7483
|
+
/* @__PURE__ */ jsx31(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions }),
|
|
7484
|
+
/* @__PURE__ */ jsx31("div", { style: { flex: 1 } }),
|
|
7485
|
+
/* @__PURE__ */ jsx31(TaskExecutor, { openTasks: hfState?.openTasks || {}, onExecute: handleExecuteTask, onTaskCompleted: handleTaskCompleted }),
|
|
7224
7486
|
runningBadge,
|
|
7225
|
-
/* @__PURE__ */
|
|
7226
|
-
/* @__PURE__ */
|
|
7487
|
+
/* @__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" }) }),
|
|
7488
|
+
/* @__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
7489
|
] }),
|
|
7228
|
-
/* @__PURE__ */
|
|
7229
|
-
/* @__PURE__ */
|
|
7490
|
+
/* @__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: [
|
|
7491
|
+
/* @__PURE__ */ jsx31(
|
|
7230
7492
|
"textarea",
|
|
7231
7493
|
{
|
|
7232
7494
|
value: activePrompt,
|
|
@@ -7235,24 +7497,24 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7235
7497
|
placeholder: "Prompt eingeben..."
|
|
7236
7498
|
}
|
|
7237
7499
|
),
|
|
7238
|
-
activePrompt && /* @__PURE__ */
|
|
7500
|
+
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
7501
|
] }) }),
|
|
7240
|
-
/* @__PURE__ */
|
|
7502
|
+
/* @__PURE__ */ jsx31("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs29(
|
|
7241
7503
|
"button",
|
|
7242
7504
|
{
|
|
7243
7505
|
onClick: () => handleGenerateBatch(),
|
|
7244
7506
|
disabled: !activePrompt.trim(),
|
|
7245
7507
|
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
7508
|
children: [
|
|
7247
|
-
/* @__PURE__ */
|
|
7248
|
-
/* @__PURE__ */
|
|
7509
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
|
|
7510
|
+
/* @__PURE__ */ jsx31("span", { children: "Generieren" })
|
|
7249
7511
|
]
|
|
7250
7512
|
}
|
|
7251
7513
|
) }),
|
|
7252
|
-
/* @__PURE__ */
|
|
7514
|
+
/* @__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
7515
|
] }),
|
|
7254
|
-
/* @__PURE__ */
|
|
7255
|
-
/* @__PURE__ */
|
|
7516
|
+
/* @__PURE__ */ jsxs29("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
|
|
7517
|
+
/* @__PURE__ */ jsx31(
|
|
7256
7518
|
"div",
|
|
7257
7519
|
{
|
|
7258
7520
|
style: { flex: 1, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" },
|
|
@@ -7264,26 +7526,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7264
7526
|
else if (dx > 50) goToPrev();
|
|
7265
7527
|
setTouchStartX(null);
|
|
7266
7528
|
},
|
|
7267
|
-
children: /* @__PURE__ */
|
|
7268
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
7269
|
-
/* @__PURE__ */
|
|
7270
|
-
/* @__PURE__ */
|
|
7529
|
+
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: [
|
|
7530
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs29("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, opacity: 0.4 }, children: [
|
|
7531
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 36 }, children: "hourglass_top" }),
|
|
7532
|
+
/* @__PURE__ */ jsx31("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.6)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
|
|
7271
7533
|
] }),
|
|
7272
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
7273
|
-
/* @__PURE__ */
|
|
7274
|
-
/* @__PURE__ */
|
|
7275
|
-
/* @__PURE__ */
|
|
7534
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs29("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
7535
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
|
|
7536
|
+
/* @__PURE__ */ jsx31("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
|
|
7537
|
+
/* @__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
7538
|
] }),
|
|
7277
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
7278
|
-
!currentResult && /* @__PURE__ */
|
|
7279
|
-
/* @__PURE__ */
|
|
7280
|
-
/* @__PURE__ */
|
|
7539
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx31("img", { src: currentResult.fullBase64 || currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
|
|
7540
|
+
!currentResult && /* @__PURE__ */ jsxs29("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
|
|
7541
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
|
|
7542
|
+
/* @__PURE__ */ jsx31("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
|
|
7281
7543
|
] }),
|
|
7282
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
7283
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
7284
|
-
/* @__PURE__ */
|
|
7285
|
-
/* @__PURE__ */
|
|
7286
|
-
/* @__PURE__ */
|
|
7544
|
+
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" }) }),
|
|
7545
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs29(Fragment11, { children: [
|
|
7546
|
+
/* @__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" }) }),
|
|
7547
|
+
/* @__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" }) }),
|
|
7548
|
+
/* @__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
7549
|
currentIndex + 1,
|
|
7288
7550
|
" / ",
|
|
7289
7551
|
history.length
|
|
@@ -7292,42 +7554,42 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7292
7554
|
] })
|
|
7293
7555
|
}
|
|
7294
7556
|
),
|
|
7295
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
7296
|
-
/* @__PURE__ */
|
|
7297
|
-
/* @__PURE__ */
|
|
7298
|
-
/* @__PURE__ */
|
|
7557
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs29("div", { style: { padding: "0 16px 16px", display: "flex", gap: 8, flexShrink: 0 }, children: [
|
|
7558
|
+
/* @__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: [
|
|
7559
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
|
|
7560
|
+
/* @__PURE__ */ jsx31("span", { children: "Prompt" })
|
|
7299
7561
|
] }),
|
|
7300
|
-
/* @__PURE__ */
|
|
7301
|
-
/* @__PURE__ */
|
|
7302
|
-
/* @__PURE__ */
|
|
7562
|
+
/* @__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: [
|
|
7563
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
|
|
7564
|
+
/* @__PURE__ */ jsx31("span", { children: "Referenz" })
|
|
7303
7565
|
] }),
|
|
7304
|
-
/* @__PURE__ */
|
|
7305
|
-
/* @__PURE__ */
|
|
7306
|
-
/* @__PURE__ */
|
|
7566
|
+
/* @__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: [
|
|
7567
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "download" }),
|
|
7568
|
+
/* @__PURE__ */ jsx31("span", { children: "Laden" })
|
|
7307
7569
|
] })
|
|
7308
7570
|
] })
|
|
7309
7571
|
] })
|
|
7310
7572
|
] }) });
|
|
7311
7573
|
}
|
|
7312
|
-
return /* @__PURE__ */
|
|
7313
|
-
/* @__PURE__ */
|
|
7314
|
-
/* @__PURE__ */
|
|
7315
|
-
/* @__PURE__ */
|
|
7316
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
7317
|
-
workspaceTags && /* @__PURE__ */
|
|
7318
|
-
/* @__PURE__ */
|
|
7574
|
+
return /* @__PURE__ */ jsxs29("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", style: hcStyle, children: [
|
|
7575
|
+
/* @__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" }) }),
|
|
7576
|
+
/* @__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: [
|
|
7577
|
+
/* @__PURE__ */ jsxs29("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
|
|
7578
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs29("div", { className: "flex flex-1 gap-1", children: [
|
|
7579
|
+
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: [
|
|
7580
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
|
|
7319
7581
|
"Prompt"
|
|
7320
7582
|
] }),
|
|
7321
|
-
/* @__PURE__ */
|
|
7322
|
-
/* @__PURE__ */
|
|
7583
|
+
/* @__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: [
|
|
7584
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
|
|
7323
7585
|
"Hierarchie"
|
|
7324
7586
|
] }),
|
|
7325
|
-
workspaceTags && /* @__PURE__ */
|
|
7587
|
+
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
7588
|
] }),
|
|
7327
|
-
/* @__PURE__ */
|
|
7589
|
+
/* @__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
7590
|
] }),
|
|
7329
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
7330
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
7591
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs29("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
7592
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx31(
|
|
7331
7593
|
TagManagerPanel,
|
|
7332
7594
|
{
|
|
7333
7595
|
workspaceTags,
|
|
@@ -7338,11 +7600,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7338
7600
|
onTagMove: handleTagMove
|
|
7339
7601
|
}
|
|
7340
7602
|
),
|
|
7341
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
7342
|
-
/* @__PURE__ */
|
|
7343
|
-
/* @__PURE__ */
|
|
7603
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs29("div", { children: [
|
|
7604
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
7605
|
+
/* @__PURE__ */ jsx31("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
7344
7606
|
] }) }),
|
|
7345
|
-
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */
|
|
7607
|
+
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ jsx31("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx31(
|
|
7346
7608
|
ListView,
|
|
7347
7609
|
{
|
|
7348
7610
|
nodes,
|
|
@@ -7367,19 +7629,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7367
7629
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
7368
7630
|
}
|
|
7369
7631
|
) }),
|
|
7370
|
-
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */
|
|
7632
|
+
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
7633
|
] })
|
|
7372
7634
|
] }),
|
|
7373
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
7374
|
-
/* @__PURE__ */
|
|
7375
|
-
/* @__PURE__ */
|
|
7376
|
-
/* @__PURE__ */
|
|
7377
|
-
/* @__PURE__ */
|
|
7378
|
-
/* @__PURE__ */
|
|
7379
|
-
/* @__PURE__ */
|
|
7635
|
+
!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" } }),
|
|
7636
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
|
|
7637
|
+
/* @__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: [
|
|
7638
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1.5", children: [
|
|
7639
|
+
/* @__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" }] }),
|
|
7640
|
+
/* @__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" }] }),
|
|
7641
|
+
/* @__PURE__ */ jsx31(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions })
|
|
7380
7642
|
] }),
|
|
7381
|
-
/* @__PURE__ */
|
|
7382
|
-
/* @__PURE__ */
|
|
7643
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1 mx-auto", children: [
|
|
7644
|
+
/* @__PURE__ */ jsx31(
|
|
7383
7645
|
"button",
|
|
7384
7646
|
{
|
|
7385
7647
|
onClick: () => setMiddlePanel("stage"),
|
|
@@ -7387,7 +7649,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7387
7649
|
children: "Stage"
|
|
7388
7650
|
}
|
|
7389
7651
|
),
|
|
7390
|
-
/* @__PURE__ */
|
|
7652
|
+
/* @__PURE__ */ jsx31(
|
|
7391
7653
|
"button",
|
|
7392
7654
|
{
|
|
7393
7655
|
onClick: () => setMiddlePanel("labs"),
|
|
@@ -7395,7 +7657,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7395
7657
|
children: "Labs"
|
|
7396
7658
|
}
|
|
7397
7659
|
),
|
|
7398
|
-
/* @__PURE__ */
|
|
7660
|
+
/* @__PURE__ */ jsx31(
|
|
7399
7661
|
"button",
|
|
7400
7662
|
{
|
|
7401
7663
|
onClick: () => setMiddlePanel("szenen"),
|
|
@@ -7404,53 +7666,53 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7404
7666
|
}
|
|
7405
7667
|
)
|
|
7406
7668
|
] }),
|
|
7407
|
-
/* @__PURE__ */
|
|
7408
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
7409
|
-
/* @__PURE__ */
|
|
7410
|
-
/* @__PURE__ */
|
|
7411
|
-
/* @__PURE__ */
|
|
7412
|
-
] }) : /* @__PURE__ */
|
|
7413
|
-
/* @__PURE__ */
|
|
7414
|
-
/* @__PURE__ */
|
|
7669
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
|
|
7670
|
+
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: [
|
|
7671
|
+
/* @__PURE__ */ jsx31("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
7672
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
7673
|
+
/* @__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" }) })
|
|
7674
|
+
] }) : /* @__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: [
|
|
7675
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
|
|
7676
|
+
/* @__PURE__ */ jsx31("span", { children: "Ref" })
|
|
7415
7677
|
] }),
|
|
7416
|
-
/* @__PURE__ */
|
|
7417
|
-
/* @__PURE__ */
|
|
7678
|
+
/* @__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" }) }),
|
|
7679
|
+
/* @__PURE__ */ jsx31(TaskExecutor, { openTasks: hfState?.openTasks || {}, onExecute: handleExecuteTask, onTaskCompleted: handleTaskCompleted }),
|
|
7418
7680
|
runningBadge,
|
|
7419
|
-
/* @__PURE__ */
|
|
7681
|
+
/* @__PURE__ */ jsx31(PillButton, { variant: "solid", icon: "bolt", disabled: !activePrompt.trim(), onClick: () => handleGenerateBatch(), children: "Generieren" })
|
|
7420
7682
|
] })
|
|
7421
7683
|
] }),
|
|
7422
|
-
/* @__PURE__ */
|
|
7423
|
-
!isPromptCollapsed && /* @__PURE__ */
|
|
7424
|
-
/* @__PURE__ */
|
|
7425
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
7684
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
|
|
7685
|
+
!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: [
|
|
7686
|
+
/* @__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..." }),
|
|
7687
|
+
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
7688
|
] }) }),
|
|
7427
|
-
middlePanel === "szenen" ? szenenPane : middlePanel === "labs" ? /* @__PURE__ */
|
|
7689
|
+
middlePanel === "szenen" ? szenenPane : middlePanel === "labs" ? /* @__PURE__ */ jsx31("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx31(LabsTab, { services: labServices, onResult: (item) => {
|
|
7428
7690
|
const frame = item.frames[0];
|
|
7429
7691
|
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__ */
|
|
7692
|
+
} }) }) : /* @__PURE__ */ jsxs29("div", { className: "flex-1 overflow-hidden flex flex-col", children: [
|
|
7693
|
+
/* @__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: [
|
|
7694
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[40px]", children: "hourglass_top" }),
|
|
7695
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[10px] uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
7696
|
+
] }) : currentResult.status === "error" ? /* @__PURE__ */ jsxs29("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
|
|
7697
|
+
/* @__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" }) }),
|
|
7698
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-2", children: [
|
|
7699
|
+
/* @__PURE__ */ jsx31("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
|
|
7700
|
+
/* @__PURE__ */ jsx31("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
|
|
7439
7701
|
] }),
|
|
7440
|
-
/* @__PURE__ */
|
|
7441
|
-
] }) : /* @__PURE__ */
|
|
7442
|
-
/* @__PURE__ */
|
|
7443
|
-
/* @__PURE__ */
|
|
7444
|
-
/* @__PURE__ */
|
|
7445
|
-
/* @__PURE__ */
|
|
7446
|
-
/* @__PURE__ */
|
|
7702
|
+
/* @__PURE__ */ jsx31(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
|
|
7703
|
+
] }) : /* @__PURE__ */ jsxs29("div", { className: "h-full w-full relative flex items-center justify-center", children: [
|
|
7704
|
+
/* @__PURE__ */ jsx31("img", { src: currentResult.fullBase64 || currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
|
|
7705
|
+
/* @__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: [
|
|
7706
|
+
/* @__PURE__ */ jsx31(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
|
|
7707
|
+
/* @__PURE__ */ jsx31(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateBatch(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
|
|
7708
|
+
/* @__PURE__ */ jsx31(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
|
|
7447
7709
|
] })
|
|
7448
|
-
] }) : /* @__PURE__ */
|
|
7449
|
-
/* @__PURE__ */
|
|
7450
|
-
/* @__PURE__ */
|
|
7710
|
+
] }) : /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
7711
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
|
|
7712
|
+
/* @__PURE__ */ jsx31("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
7451
7713
|
] }) }) }),
|
|
7452
|
-
currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */
|
|
7453
|
-
/* @__PURE__ */
|
|
7714
|
+
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: [
|
|
7715
|
+
/* @__PURE__ */ jsx31(
|
|
7454
7716
|
"div",
|
|
7455
7717
|
{
|
|
7456
7718
|
onClick: () => handleGallerySelect(item),
|
|
@@ -7465,10 +7727,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7465
7727
|
transition: "opacity 0.15s, border-color 0.15s"
|
|
7466
7728
|
},
|
|
7467
7729
|
className: "hover:opacity-80",
|
|
7468
|
-
children: /* @__PURE__ */
|
|
7730
|
+
children: /* @__PURE__ */ jsx31("img", { src: item.base64, style: { width: "100%", height: "100%", objectFit: "cover" }, alt: "" })
|
|
7469
7731
|
}
|
|
7470
7732
|
),
|
|
7471
|
-
/* @__PURE__ */
|
|
7733
|
+
/* @__PURE__ */ jsx31(
|
|
7472
7734
|
"button",
|
|
7473
7735
|
{
|
|
7474
7736
|
onClick: (e) => {
|
|
@@ -7491,31 +7753,31 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7491
7753
|
alignItems: "center",
|
|
7492
7754
|
justifyContent: "center"
|
|
7493
7755
|
},
|
|
7494
|
-
children: /* @__PURE__ */
|
|
7756
|
+
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
7757
|
}
|
|
7496
7758
|
)
|
|
7497
7759
|
] }, item.id)) })
|
|
7498
7760
|
] })
|
|
7499
7761
|
] })
|
|
7500
7762
|
] }),
|
|
7501
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
7502
|
-
/* @__PURE__ */
|
|
7503
|
-
/* @__PURE__ */
|
|
7504
|
-
/* @__PURE__ */
|
|
7505
|
-
["history", "gallery", "inspect", "setup", "sync", "tags"].map((tab) => /* @__PURE__ */
|
|
7763
|
+
!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" } }),
|
|
7764
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", style: { width: isRightCollapsed ? 60 : rightPanelWidth, transition: "none" }, children: [
|
|
7765
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
|
|
7766
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex flex-1", children: [
|
|
7767
|
+
["history", "gallery", "inspect", "setup", "sync", "tags"].map((tab) => /* @__PURE__ */ jsx31("button", { onClick: () => {
|
|
7506
7768
|
setActiveTab(tab);
|
|
7507
7769
|
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__ */
|
|
7770
|
+
}, 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)),
|
|
7771
|
+
serverBaseUrl && /* @__PURE__ */ jsx31("button", { onClick: () => {
|
|
7510
7772
|
setActiveTab("server");
|
|
7511
7773
|
setIsRightCollapsed(false);
|
|
7512
|
-
}, className: `w-10 flex items-center justify-center relative transition-colors ${activeTab === "server" ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */
|
|
7774
|
+
}, 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
7775
|
] }),
|
|
7514
|
-
hfToken && /* @__PURE__ */
|
|
7515
|
-
/* @__PURE__ */
|
|
7776
|
+
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" }) }),
|
|
7777
|
+
/* @__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
7778
|
] }),
|
|
7517
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
7518
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
7779
|
+
!isRightCollapsed && /* @__PURE__ */ jsxs29("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
7780
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx31(
|
|
7519
7781
|
TagManagerPanel,
|
|
7520
7782
|
{
|
|
7521
7783
|
workspaceTags,
|
|
@@ -7526,12 +7788,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7526
7788
|
onTagMove: handleTagMove
|
|
7527
7789
|
}
|
|
7528
7790
|
),
|
|
7529
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
7530
|
-
/* @__PURE__ */
|
|
7531
|
-
/* @__PURE__ */
|
|
7791
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs29("div", { children: [
|
|
7792
|
+
/* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
7793
|
+
/* @__PURE__ */ jsx31("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
7532
7794
|
] }) }),
|
|
7533
|
-
activeTab === "history" && /* @__PURE__ */
|
|
7534
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
7795
|
+
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) }),
|
|
7796
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx31(
|
|
7535
7797
|
MediaLibrary,
|
|
7536
7798
|
{
|
|
7537
7799
|
items: galleryItems,
|
|
@@ -7547,24 +7809,24 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
7547
7809
|
onLoadMore: () => setGalleryVisibleCount((c) => c + 20)
|
|
7548
7810
|
}
|
|
7549
7811
|
),
|
|
7550
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
7551
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
7552
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
7812
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx31(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
|
|
7813
|
+
activeTab === "setup" && /* @__PURE__ */ jsx31(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo, tagBase: tagBaseResult }),
|
|
7814
|
+
activeTab === "sync" && /* @__PURE__ */ jsx31(
|
|
7553
7815
|
HfMediaSyncTab,
|
|
7554
7816
|
{
|
|
7555
7817
|
topSlot: syncTopSlot,
|
|
7556
7818
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
7557
7819
|
}
|
|
7558
7820
|
),
|
|
7559
|
-
activeTab === "server" && /* @__PURE__ */
|
|
7821
|
+
activeTab === "server" && /* @__PURE__ */ jsx31(ServerTab, { serverBaseUrl })
|
|
7560
7822
|
] })
|
|
7561
7823
|
] })
|
|
7562
7824
|
] });
|
|
7563
7825
|
}
|
|
7564
7826
|
|
|
7565
7827
|
// src/components/FaApp.tsx
|
|
7566
|
-
import { useState as
|
|
7567
|
-
import { jsx as
|
|
7828
|
+
import { useState as useState28, useEffect as useEffect13, useMemo as useMemo9 } from "react";
|
|
7829
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
7568
7830
|
function FaApp({
|
|
7569
7831
|
onGenerateImage,
|
|
7570
7832
|
onGeneratePrompt,
|
|
@@ -7579,19 +7841,19 @@ function FaApp({
|
|
|
7579
7841
|
serverBaseUrl,
|
|
7580
7842
|
buildInfo
|
|
7581
7843
|
}) {
|
|
7582
|
-
const [hfNamespace, setHfNamespace] =
|
|
7583
|
-
|
|
7844
|
+
const [hfNamespace, setHfNamespace] = useState28(void 0);
|
|
7845
|
+
useEffect13(() => {
|
|
7584
7846
|
if (!serverBaseUrl) return;
|
|
7585
7847
|
fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
|
|
7586
7848
|
if (typeof d.hfNamespace === "string") setHfNamespace(d.hfNamespace);
|
|
7587
7849
|
}).catch(() => {
|
|
7588
7850
|
});
|
|
7589
7851
|
}, [serverBaseUrl]);
|
|
7590
|
-
const wrappedPrompt =
|
|
7852
|
+
const wrappedPrompt = useMemo9(
|
|
7591
7853
|
() => alsFlowTextZugang(onGeneratePrompt),
|
|
7592
7854
|
[onGeneratePrompt]
|
|
7593
7855
|
);
|
|
7594
|
-
return /* @__PURE__ */
|
|
7856
|
+
return /* @__PURE__ */ jsx32(
|
|
7595
7857
|
AvatarArchitectApp,
|
|
7596
7858
|
{
|
|
7597
7859
|
onGenerateImage,
|
|
@@ -7841,15 +8103,15 @@ function createInMemoryWorkspacePersistence(now = () => Date.now()) {
|
|
|
7841
8103
|
}
|
|
7842
8104
|
|
|
7843
8105
|
// node_modules/zustand/esm/react.mjs
|
|
7844
|
-
import
|
|
8106
|
+
import React25 from "react";
|
|
7845
8107
|
var identity = (arg) => arg;
|
|
7846
8108
|
function useStore(api, selector = identity) {
|
|
7847
|
-
const slice =
|
|
8109
|
+
const slice = React25.useSyncExternalStore(
|
|
7848
8110
|
api.subscribe,
|
|
7849
|
-
|
|
7850
|
-
|
|
8111
|
+
React25.useCallback(() => selector(api.getState()), [api, selector]),
|
|
8112
|
+
React25.useCallback(() => selector(api.getInitialState()), [api, selector])
|
|
7851
8113
|
);
|
|
7852
|
-
|
|
8114
|
+
React25.useDebugValue(slice);
|
|
7853
8115
|
return slice;
|
|
7854
8116
|
}
|
|
7855
8117
|
|
|
@@ -8153,7 +8415,7 @@ function zugehoerigkeitenOf(item) {
|
|
|
8153
8415
|
}
|
|
8154
8416
|
|
|
8155
8417
|
// src/features/library/ZugehoerigkeitLinks.tsx
|
|
8156
|
-
import { Fragment as Fragment12, jsx as
|
|
8418
|
+
import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
8157
8419
|
var CHIP_BASIS = "text-[9px] px-1.5 py-0.5 rounded-full font-bold border transition";
|
|
8158
8420
|
var CHIP_LAUF = "bg-teal-900/60 text-teal-200 border-teal-800 hover:bg-teal-800 hover:text-white";
|
|
8159
8421
|
var CHIP_SZENE = "bg-indigo-900/60 text-indigo-200 border-indigo-800 hover:bg-indigo-800 hover:text-white";
|
|
@@ -8179,8 +8441,8 @@ var ZugehoerigkeitLinks = ({
|
|
|
8179
8441
|
};
|
|
8180
8442
|
if (variante === "liste") {
|
|
8181
8443
|
if (!hatNavigationsziele(zugehoerigkeit)) return null;
|
|
8182
|
-
return /* @__PURE__ */
|
|
8183
|
-
run && /* @__PURE__ */
|
|
8444
|
+
return /* @__PURE__ */ jsxs30(Fragment12, { children: [
|
|
8445
|
+
run && /* @__PURE__ */ jsx33(
|
|
8184
8446
|
"button",
|
|
8185
8447
|
{
|
|
8186
8448
|
type: "button",
|
|
@@ -8191,7 +8453,7 @@ var ZugehoerigkeitLinks = ({
|
|
|
8191
8453
|
children: beschriftung(run, "Promptlauf")
|
|
8192
8454
|
}
|
|
8193
8455
|
),
|
|
8194
|
-
scene && /* @__PURE__ */
|
|
8456
|
+
scene && /* @__PURE__ */ jsx33(
|
|
8195
8457
|
"button",
|
|
8196
8458
|
{
|
|
8197
8459
|
type: "button",
|
|
@@ -8204,15 +8466,15 @@ var ZugehoerigkeitLinks = ({
|
|
|
8204
8466
|
)
|
|
8205
8467
|
] });
|
|
8206
8468
|
}
|
|
8207
|
-
return /* @__PURE__ */
|
|
8469
|
+
return /* @__PURE__ */ jsxs30(
|
|
8208
8470
|
"div",
|
|
8209
8471
|
{
|
|
8210
8472
|
className: "bg-black border border-neutral-800 p-2 rounded flex flex-col gap-1",
|
|
8211
8473
|
"data-testid": "zugehoerigkeit-bereich",
|
|
8212
8474
|
children: [
|
|
8213
|
-
/* @__PURE__ */
|
|
8214
|
-
/* @__PURE__ */
|
|
8215
|
-
run && /* @__PURE__ */
|
|
8475
|
+
/* @__PURE__ */ jsx33("span", { className: "text-[10px] uppercase font-bold text-neutral-500", children: "Zugeh\xF6rigkeit" }),
|
|
8476
|
+
/* @__PURE__ */ jsxs30("div", { className: "flex flex-wrap gap-2", children: [
|
|
8477
|
+
run && /* @__PURE__ */ jsx33(
|
|
8216
8478
|
"button",
|
|
8217
8479
|
{
|
|
8218
8480
|
type: "button",
|
|
@@ -8223,7 +8485,7 @@ var ZugehoerigkeitLinks = ({
|
|
|
8223
8485
|
children: beschriftung(run, "Promptlauf \xF6ffnen")
|
|
8224
8486
|
}
|
|
8225
8487
|
),
|
|
8226
|
-
scene && /* @__PURE__ */
|
|
8488
|
+
scene && /* @__PURE__ */ jsx33(
|
|
8227
8489
|
"button",
|
|
8228
8490
|
{
|
|
8229
8491
|
type: "button",
|
|
@@ -8235,7 +8497,7 @@ var ZugehoerigkeitLinks = ({
|
|
|
8235
8497
|
}
|
|
8236
8498
|
)
|
|
8237
8499
|
] }),
|
|
8238
|
-
hinweis && /* @__PURE__ */
|
|
8500
|
+
hinweis && /* @__PURE__ */ jsx33("span", { className: "text-[10px] text-neutral-500", "data-testid": "zugehoerigkeit-hinweis", children: hinweis })
|
|
8239
8501
|
]
|
|
8240
8502
|
}
|
|
8241
8503
|
);
|