@rslsp1/fa-app-tools 2.0.12 → 2.0.13
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 +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +790 -346
- package/dist/index.mjs +771 -327
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -798,7 +798,7 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
|
|
|
798
798
|
}
|
|
799
799
|
|
|
800
800
|
// src/components/AvatarArchitectApp.tsx
|
|
801
|
-
import { useState as
|
|
801
|
+
import { useState as useState16, useCallback as useCallback2, useMemo as useMemo2, useEffect as useEffect6, useRef as useRef7 } from "react";
|
|
802
802
|
|
|
803
803
|
// src/components/PromptTab.tsx
|
|
804
804
|
import { useRef as useRef4, useState as useState5 } from "react";
|
|
@@ -2016,7 +2016,7 @@ function useHFState(token, namespace) {
|
|
|
2016
2016
|
const id = setInterval(pollNew, POLL_INTERVAL_MS);
|
|
2017
2017
|
return () => clearInterval(id);
|
|
2018
2018
|
}, [token, namespace, pollNew]);
|
|
2019
|
-
const
|
|
2019
|
+
const writeEvent2 = useCallback(async (type, payload) => {
|
|
2020
2020
|
const prevTs = lastEventTs ? [lastEventTs] : [state?.meta.consolidatedAt ?? 0];
|
|
2021
2021
|
console.log("[HF] writeEvent called:", { type, namespace, tokenOk: !!token, prevTs });
|
|
2022
2022
|
await pollNew();
|
|
@@ -2051,7 +2051,7 @@ function useHFState(token, namespace) {
|
|
|
2051
2051
|
pendingBufferCount,
|
|
2052
2052
|
eventCount,
|
|
2053
2053
|
forks,
|
|
2054
|
-
writeEvent,
|
|
2054
|
+
writeEvent: writeEvent2,
|
|
2055
2055
|
refresh: loadFull,
|
|
2056
2056
|
lastEventTs,
|
|
2057
2057
|
allEvents: allEventsRef.current,
|
|
@@ -3138,8 +3138,447 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3138
3138
|
] });
|
|
3139
3139
|
}
|
|
3140
3140
|
|
|
3141
|
+
// src/components/HFTestTab.tsx
|
|
3142
|
+
import { useState as useState15 } from "react";
|
|
3143
|
+
import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
3144
|
+
var HF_BASE = "https://huggingface.co";
|
|
3145
|
+
var HF_REPO = "RolandSch/fa-app-state";
|
|
3146
|
+
var TEST_DIR = "test";
|
|
3147
|
+
async function doFetch(label, url, init = {}) {
|
|
3148
|
+
const rawHeaders = init.headers || {};
|
|
3149
|
+
const sanitized = Object.fromEntries(
|
|
3150
|
+
Object.entries(rawHeaders).map(
|
|
3151
|
+
([k, v]) => k.toLowerCase() === "authorization" ? [k, v.replace(/Bearer\s+\S+/, (m) => "Bearer " + m.slice(7, 14) + "***")] : [k, v]
|
|
3152
|
+
)
|
|
3153
|
+
);
|
|
3154
|
+
const s = {
|
|
3155
|
+
label,
|
|
3156
|
+
method: init.method || "GET",
|
|
3157
|
+
url,
|
|
3158
|
+
reqHeaders: sanitized,
|
|
3159
|
+
reqBody: init.body ? typeof init.body === "string" ? init.body.length > 800 ? init.body.slice(0, 800) + "\n\u2026[truncated]" : init.body : "[binary data]" : void 0
|
|
3160
|
+
};
|
|
3161
|
+
const t0 = Date.now();
|
|
3162
|
+
try {
|
|
3163
|
+
const r = await fetch(url, init);
|
|
3164
|
+
s.durationMs = Date.now() - t0;
|
|
3165
|
+
s.resStatus = r.status;
|
|
3166
|
+
s.resStatusText = r.statusText;
|
|
3167
|
+
const body = await r.text().catch(() => "");
|
|
3168
|
+
s.resBody = body.length > 3e3 ? body.slice(0, 3e3) + "\n\u2026[truncated]" : body;
|
|
3169
|
+
s.ok = r.ok;
|
|
3170
|
+
} catch (e) {
|
|
3171
|
+
s.durationMs = Date.now() - t0;
|
|
3172
|
+
s.error = String(e?.message ?? e);
|
|
3173
|
+
s.ok = false;
|
|
3174
|
+
}
|
|
3175
|
+
return s;
|
|
3176
|
+
}
|
|
3177
|
+
function toBase64(bytes) {
|
|
3178
|
+
let bin = "";
|
|
3179
|
+
bytes.forEach((b) => bin += String.fromCharCode(b));
|
|
3180
|
+
return btoa(bin);
|
|
3181
|
+
}
|
|
3182
|
+
async function sha256hex(bytes) {
|
|
3183
|
+
const buf = await crypto.subtle.digest("SHA-256", bytes);
|
|
3184
|
+
return Array.from(new Uint8Array(buf)).map((b) => b.toString(16).padStart(2, "0")).join("");
|
|
3185
|
+
}
|
|
3186
|
+
function b64ToBytes(b64) {
|
|
3187
|
+
const raw = b64.includes(",") ? b64.split(",")[1] : b64;
|
|
3188
|
+
const bin = atob(raw);
|
|
3189
|
+
const bytes = new Uint8Array(bin.length);
|
|
3190
|
+
for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
|
|
3191
|
+
return bytes;
|
|
3192
|
+
}
|
|
3193
|
+
function rawB64(dataUrl) {
|
|
3194
|
+
return dataUrl.includes(",") ? dataUrl.split(",")[1] : dataUrl;
|
|
3195
|
+
}
|
|
3196
|
+
async function uploadDirect(token, path, b64content) {
|
|
3197
|
+
const ndjson = [
|
|
3198
|
+
JSON.stringify({ key: "header", value: { summary: `HF Test: upload ${path}`, description: "" } }),
|
|
3199
|
+
JSON.stringify({ key: "file", value: { path, encoding: "base64", content: b64content } })
|
|
3200
|
+
].join("\n");
|
|
3201
|
+
return [await doFetch(
|
|
3202
|
+
"POST commit (direct, kein LFS)",
|
|
3203
|
+
`${HF_BASE}/api/datasets/${HF_REPO}/commit/main`,
|
|
3204
|
+
{ method: "POST", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/x-ndjson" }, body: ndjson }
|
|
3205
|
+
)];
|
|
3206
|
+
}
|
|
3207
|
+
async function uploadLFS(token, path, bytes) {
|
|
3208
|
+
const oid = await sha256hex(bytes);
|
|
3209
|
+
const size = bytes.length;
|
|
3210
|
+
const sample = toBase64(bytes.slice(0, 512));
|
|
3211
|
+
const steps = [];
|
|
3212
|
+
const pre = await doFetch("Preupload (LFS-URL anfordern)", `${HF_BASE}/api/datasets/${HF_REPO}/preupload/main`, {
|
|
3213
|
+
method: "POST",
|
|
3214
|
+
headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
|
|
3215
|
+
body: JSON.stringify({ files: [{ path, size, sample }] })
|
|
3216
|
+
});
|
|
3217
|
+
steps.push(pre);
|
|
3218
|
+
if (!pre.ok) return steps;
|
|
3219
|
+
let fi;
|
|
3220
|
+
try {
|
|
3221
|
+
fi = JSON.parse(pre.resBody || "{}").files?.[0];
|
|
3222
|
+
} catch {
|
|
3223
|
+
}
|
|
3224
|
+
if (!fi) {
|
|
3225
|
+
steps.push({ label: "Parse", method: "-", url: "-", reqHeaders: {}, resBody: "Kein files[0] in preupload response", ok: false });
|
|
3226
|
+
return steps;
|
|
3227
|
+
}
|
|
3228
|
+
if (fi.uploadMode === "lfs" && fi.uploadUrl) {
|
|
3229
|
+
const up = await doFetch("PUT to LFS upload URL", fi.uploadUrl, {
|
|
3230
|
+
method: "PUT",
|
|
3231
|
+
headers: { "Content-Type": "application/octet-stream", ...fi.header || {} },
|
|
3232
|
+
body: bytes
|
|
3233
|
+
});
|
|
3234
|
+
steps.push(up);
|
|
3235
|
+
if (!up.ok) return steps;
|
|
3236
|
+
if (fi.verifyUrl) {
|
|
3237
|
+
const ver = await doFetch("POST LFS verify", fi.verifyUrl, {
|
|
3238
|
+
method: "POST",
|
|
3239
|
+
headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", ...fi.verifyHeader || {} },
|
|
3240
|
+
body: JSON.stringify({ oid, size })
|
|
3241
|
+
});
|
|
3242
|
+
steps.push(ver);
|
|
3243
|
+
if (!ver.ok) return steps;
|
|
3244
|
+
}
|
|
3245
|
+
} else {
|
|
3246
|
+
steps.push({ label: "Info", method: "-", url: "-", reqHeaders: {}, resBody: `uploadMode="${fi.uploadMode}" \xB7 uploadUrl: ${fi.uploadUrl ? "ja" : "nein"} \u2192 ${!fi.uploadUrl ? "bereits in LFS (Deduplizierung)" : "kein LFS n\xF6tig"}`, ok: true });
|
|
3247
|
+
}
|
|
3248
|
+
const ndjson = [
|
|
3249
|
+
JSON.stringify({ key: "header", value: { summary: `HF Test: LFS commit ${path}`, description: "" } }),
|
|
3250
|
+
JSON.stringify({ key: "lfsFile", value: { path, algo: "sha256", oid, size } })
|
|
3251
|
+
].join("\n");
|
|
3252
|
+
steps.push(await doFetch("Commit (lfsFile reference)", `${HF_BASE}/api/datasets/${HF_REPO}/commit/main`, {
|
|
3253
|
+
method: "POST",
|
|
3254
|
+
headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/x-ndjson" },
|
|
3255
|
+
body: ndjson
|
|
3256
|
+
}));
|
|
3257
|
+
return steps;
|
|
3258
|
+
}
|
|
3259
|
+
async function uploadViaHubLib(token, path, bytes, mimeType) {
|
|
3260
|
+
const s = { label: "uploadFile() via @huggingface/hub", method: "import()+call", url: "@huggingface/hub", reqHeaders: {} };
|
|
3261
|
+
const t0 = Date.now();
|
|
3262
|
+
try {
|
|
3263
|
+
const { uploadFile } = await import(
|
|
3264
|
+
/* @vite-ignore */
|
|
3265
|
+
"@huggingface/hub"
|
|
3266
|
+
);
|
|
3267
|
+
await uploadFile({
|
|
3268
|
+
repo: { type: "dataset", name: HF_REPO },
|
|
3269
|
+
credentials: { accessToken: token },
|
|
3270
|
+
file: { path, content: new Blob([bytes], { type: mimeType }) },
|
|
3271
|
+
branch: "main",
|
|
3272
|
+
commitTitle: `HF Test: hub lib upload ${path}`
|
|
3273
|
+
});
|
|
3274
|
+
s.durationMs = Date.now() - t0;
|
|
3275
|
+
s.resBody = "SUCCESS";
|
|
3276
|
+
s.ok = true;
|
|
3277
|
+
} catch (e) {
|
|
3278
|
+
s.durationMs = Date.now() - t0;
|
|
3279
|
+
s.error = String(e?.message ?? e);
|
|
3280
|
+
s.ok = false;
|
|
3281
|
+
}
|
|
3282
|
+
return [s];
|
|
3283
|
+
}
|
|
3284
|
+
async function uploadViaCdnLib(token, path, bytes, mimeType) {
|
|
3285
|
+
const s = { label: "uploadFile() via esm.sh/@huggingface/hub", method: "import()+call", url: "https://esm.sh/@huggingface/hub", reqHeaders: {} };
|
|
3286
|
+
const t0 = Date.now();
|
|
3287
|
+
try {
|
|
3288
|
+
const { uploadFile } = await import(
|
|
3289
|
+
/* @vite-ignore */
|
|
3290
|
+
"https://esm.sh/@huggingface/hub"
|
|
3291
|
+
);
|
|
3292
|
+
await uploadFile({
|
|
3293
|
+
repo: { type: "dataset", name: HF_REPO },
|
|
3294
|
+
credentials: { accessToken: token },
|
|
3295
|
+
file: { path, content: new Blob([bytes], { type: mimeType }) },
|
|
3296
|
+
branch: "main",
|
|
3297
|
+
commitTitle: `HF Test: CDN hub lib upload ${path}`
|
|
3298
|
+
});
|
|
3299
|
+
s.durationMs = Date.now() - t0;
|
|
3300
|
+
s.resBody = "SUCCESS";
|
|
3301
|
+
s.ok = true;
|
|
3302
|
+
} catch (e) {
|
|
3303
|
+
s.durationMs = Date.now() - t0;
|
|
3304
|
+
s.error = String(e?.message ?? e);
|
|
3305
|
+
s.ok = false;
|
|
3306
|
+
}
|
|
3307
|
+
return [s];
|
|
3308
|
+
}
|
|
3309
|
+
async function writeEvent(token, namespace) {
|
|
3310
|
+
const ns = namespace.endsWith("/") ? namespace : namespace ? namespace + "/" : "";
|
|
3311
|
+
const ts = Date.now();
|
|
3312
|
+
const uuid = crypto.randomUUID().slice(0, 8);
|
|
3313
|
+
const isoTs = new Date(ts).toISOString().replace(/:/g, "-").replace(".", "-");
|
|
3314
|
+
const eventPath = `${ns}${TEST_DIR}/events/${isoTs}_${uuid}.json`;
|
|
3315
|
+
const event = JSON.stringify({ v: { major: 1, minor: 0 }, type: "probe", ts, prevTs: [], clientId: "hf-test-tab", payload: { test: true } }, null, 2);
|
|
3316
|
+
const b64 = toBase64(new TextEncoder().encode(event));
|
|
3317
|
+
const ndjson = [
|
|
3318
|
+
JSON.stringify({ key: "header", value: { summary: "HF Test: write event", description: "" } }),
|
|
3319
|
+
JSON.stringify({ key: "file", value: { path: eventPath, encoding: "base64", content: b64 } })
|
|
3320
|
+
].join("\n");
|
|
3321
|
+
return [await doFetch(
|
|
3322
|
+
`Event \u2192 ${eventPath}`,
|
|
3323
|
+
`${HF_BASE}/api/datasets/${HF_REPO}/commit/main`,
|
|
3324
|
+
{ method: "POST", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/x-ndjson" }, body: ndjson }
|
|
3325
|
+
)];
|
|
3326
|
+
}
|
|
3327
|
+
function tryFmt(s) {
|
|
3328
|
+
try {
|
|
3329
|
+
return JSON.stringify(JSON.parse(s), null, 2);
|
|
3330
|
+
} catch {
|
|
3331
|
+
return s;
|
|
3332
|
+
}
|
|
3333
|
+
}
|
|
3334
|
+
function CopyBtn({ text }) {
|
|
3335
|
+
const [done, setDone] = useState15(false);
|
|
3336
|
+
return /* @__PURE__ */ jsxs18(
|
|
3337
|
+
"button",
|
|
3338
|
+
{
|
|
3339
|
+
onClick: () => {
|
|
3340
|
+
navigator.clipboard?.writeText(text).catch(() => {
|
|
3341
|
+
});
|
|
3342
|
+
setDone(true);
|
|
3343
|
+
setTimeout(() => setDone(false), 1500);
|
|
3344
|
+
},
|
|
3345
|
+
style: { background: "none", border: "1px solid rgba(255,255,255,0.15)", borderRadius: 5, color: done ? "#4ade80" : "rgba(255,255,255,0.45)", fontSize: 10, padding: "3px 8px", cursor: "pointer", fontFamily: "inherit", display: "flex", alignItems: "center", gap: 3 },
|
|
3346
|
+
children: [
|
|
3347
|
+
/* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: done ? "check" : "content_copy" }),
|
|
3348
|
+
done ? "Kopiert" : "Copy"
|
|
3349
|
+
]
|
|
3350
|
+
}
|
|
3351
|
+
);
|
|
3352
|
+
}
|
|
3353
|
+
function StepView({ step }) {
|
|
3354
|
+
const isSpecial = step.method === "-" || step.method === "import()" || step.method === "import()+call";
|
|
3355
|
+
return /* @__PURE__ */ jsxs18("div", { style: { marginBottom: 6, background: "rgba(0,0,0,0.3)", borderRadius: 7, padding: "7px 9px", border: `1px solid ${step.ok === false ? "rgba(248,113,113,0.2)" : "rgba(255,255,255,0.05)"}` }, children: [
|
|
3356
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }, children: [
|
|
3357
|
+
/* @__PURE__ */ jsx20("span", { style: { fontSize: 11, fontWeight: 700, color: step.ok === false ? "#f87171" : "#4ade80" }, children: step.ok === false ? "\u2717" : "\u2713" }),
|
|
3358
|
+
/* @__PURE__ */ jsx20("span", { style: { fontSize: 11, fontWeight: 600, color: "rgba(255,255,255,0.7)", flex: 1 }, children: step.label }),
|
|
3359
|
+
step.durationMs !== void 0 && /* @__PURE__ */ jsxs18("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)" }, children: [
|
|
3360
|
+
step.durationMs,
|
|
3361
|
+
"ms"
|
|
3362
|
+
] }),
|
|
3363
|
+
/* @__PURE__ */ jsx20(CopyBtn, { text: JSON.stringify(step, null, 2) })
|
|
3364
|
+
] }),
|
|
3365
|
+
!isSpecial && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: 5 }, children: [
|
|
3366
|
+
/* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginBottom: 2 }, children: [
|
|
3367
|
+
"\u2192 ",
|
|
3368
|
+
step.method,
|
|
3369
|
+
" ",
|
|
3370
|
+
step.url
|
|
3371
|
+
] }),
|
|
3372
|
+
Object.keys(step.reqHeaders).length > 0 && /* @__PURE__ */ jsx20("pre", { style: { fontSize: 9, color: "rgba(255,255,255,0.35)", margin: "2px 0", padding: "3px 5px", background: "rgba(255,255,255,0.03)", borderRadius: 3, whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: 60, overflow: "auto" }, children: Object.entries(step.reqHeaders).map(([k, v]) => `${k}: ${v}`).join("\n") }),
|
|
3373
|
+
step.reqBody && /* @__PURE__ */ jsx20("pre", { style: { fontSize: 9, color: "rgba(255,255,255,0.35)", margin: "2px 0", padding: "3px 5px", background: "rgba(255,255,255,0.03)", borderRadius: 3, whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: 80, overflow: "auto" }, children: step.reqBody })
|
|
3374
|
+
] }),
|
|
3375
|
+
step.error && /* @__PURE__ */ jsx20("pre", { style: { fontSize: 11, color: "#f87171", margin: 0, padding: "3px 5px", background: "rgba(248,113,113,0.05)", borderRadius: 3, whiteSpace: "pre-wrap", wordBreak: "break-all" }, children: step.error }),
|
|
3376
|
+
!step.error && (step.resStatus !== void 0 || step.resBody) && /* @__PURE__ */ jsxs18("div", { children: [
|
|
3377
|
+
step.resStatus !== void 0 && /* @__PURE__ */ jsxs18("div", { style: { fontSize: 11, fontWeight: 700, color: (step.resStatus || 0) < 300 ? "#4ade80" : "#f87171", marginBottom: 3 }, children: [
|
|
3378
|
+
"\u2190 ",
|
|
3379
|
+
step.resStatus,
|
|
3380
|
+
" ",
|
|
3381
|
+
step.resStatusText
|
|
3382
|
+
] }),
|
|
3383
|
+
step.resBody && /* @__PURE__ */ jsx20("pre", { style: { fontSize: 9, color: "rgba(255,255,255,0.55)", margin: 0, padding: "3px 5px", background: "rgba(255,255,255,0.03)", borderRadius: 3, whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: 180, overflow: "auto" }, children: tryFmt(step.resBody) })
|
|
3384
|
+
] })
|
|
3385
|
+
] });
|
|
3386
|
+
}
|
|
3387
|
+
function TestCard({
|
|
3388
|
+
id,
|
|
3389
|
+
label,
|
|
3390
|
+
icon,
|
|
3391
|
+
desc,
|
|
3392
|
+
disabled,
|
|
3393
|
+
state,
|
|
3394
|
+
onRun,
|
|
3395
|
+
expanded,
|
|
3396
|
+
onToggle
|
|
3397
|
+
}) {
|
|
3398
|
+
const hasResult = state && state.status !== "idle";
|
|
3399
|
+
return /* @__PURE__ */ jsxs18("div", { style: { marginBottom: 8, background: "rgba(255,255,255,0.03)", borderRadius: 10, border: `1px solid ${state?.status === "ok" ? "rgba(74,222,128,0.15)" : state?.status === "error" ? "rgba(248,113,113,0.15)" : "rgba(255,255,255,0.07)"}`, overflow: "hidden" }, children: [
|
|
3400
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "9px 10px" }, children: [
|
|
3401
|
+
/* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 18, color: state?.status === "ok" ? "#4ade80" : state?.status === "error" ? "#f87171" : state?.status === "running" ? "#60a5fa" : "rgba(255,255,255,0.35)", flexShrink: 0 }, children: state?.status === "ok" ? "check_circle" : state?.status === "error" ? "error" : state?.status === "running" ? "hourglass_top" : icon }),
|
|
3402
|
+
/* @__PURE__ */ jsxs18("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
3403
|
+
/* @__PURE__ */ jsx20("div", { style: { fontSize: 13, fontWeight: 700, color: "#fff" }, children: label }),
|
|
3404
|
+
/* @__PURE__ */ jsx20("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: desc })
|
|
3405
|
+
] }),
|
|
3406
|
+
hasResult && state?.status !== "running" && /* @__PURE__ */ jsx20("button", { onClick: onToggle, style: { background: "none", border: "none", color: "rgba(255,255,255,0.3)", cursor: "pointer", padding: 2, lineHeight: 0 }, children: /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: expanded ? "expand_less" : "expand_more" }) }),
|
|
3407
|
+
/* @__PURE__ */ jsx20(
|
|
3408
|
+
"button",
|
|
3409
|
+
{
|
|
3410
|
+
onClick: onRun,
|
|
3411
|
+
disabled,
|
|
3412
|
+
style: { background: disabled ? "transparent" : "#0284c7", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 6, color: "#fff", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", padding: "5px 10px", cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.35 : 1, fontFamily: "inherit", flexShrink: 0 },
|
|
3413
|
+
children: state?.status === "running" ? "\u2026" : "Run"
|
|
3414
|
+
}
|
|
3415
|
+
)
|
|
3416
|
+
] }),
|
|
3417
|
+
hasResult && /* @__PURE__ */ jsxs18("div", { style: { borderTop: "1px solid rgba(255,255,255,0.05)" }, children: [
|
|
3418
|
+
/* @__PURE__ */ jsxs18("div", { style: { padding: "4px 10px 5px", display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
3419
|
+
/* @__PURE__ */ jsx20("span", { style: { fontSize: 11, fontWeight: 700, color: state.status === "ok" ? "#4ade80" : "#f87171" }, children: state.status === "ok" ? "\u2713 OK" : state.status === "running" ? "\u2026" : "\u2717 Fehler" }),
|
|
3420
|
+
/* @__PURE__ */ jsxs18("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)" }, children: [
|
|
3421
|
+
state.totalMs,
|
|
3422
|
+
"ms \xB7 ",
|
|
3423
|
+
state.steps.length,
|
|
3424
|
+
" Step",
|
|
3425
|
+
state.steps.length !== 1 ? "s" : ""
|
|
3426
|
+
] }),
|
|
3427
|
+
/* @__PURE__ */ jsx20("div", { style: { flex: 1 } }),
|
|
3428
|
+
/* @__PURE__ */ jsx20(CopyBtn, { text: JSON.stringify(state, null, 2) })
|
|
3429
|
+
] }),
|
|
3430
|
+
expanded && state.steps.map((step, i) => /* @__PURE__ */ jsx20("div", { style: { padding: "0 10px 4px" }, children: /* @__PURE__ */ jsx20(StepView, { step }) }, i))
|
|
3431
|
+
] })
|
|
3432
|
+
] });
|
|
3433
|
+
}
|
|
3434
|
+
function HFTestTab({ token, namespace, galleryItems }) {
|
|
3435
|
+
const [selected, setSelected] = useState15(null);
|
|
3436
|
+
const [results, setResults] = useState15({});
|
|
3437
|
+
const [expanded, setExpanded] = useState15({});
|
|
3438
|
+
const withResults = galleryItems.filter((g) => g.base64 && g.status === "done");
|
|
3439
|
+
const setRunning = (id) => setResults((r) => ({ ...r, [id]: { status: "running", steps: [], totalMs: 0 } }));
|
|
3440
|
+
const setDone = (id, steps, t0) => {
|
|
3441
|
+
const ok = steps.length > 0 && steps.every((s) => s.ok !== false);
|
|
3442
|
+
setResults((r) => ({ ...r, [id]: { status: ok ? "ok" : "error", steps, totalMs: Date.now() - t0 } }));
|
|
3443
|
+
setExpanded((e) => ({ ...e, [id]: true }));
|
|
3444
|
+
};
|
|
3445
|
+
const run = async (id) => {
|
|
3446
|
+
const isImgTest = id !== "event";
|
|
3447
|
+
if (isImgTest && !selected?.base64) return;
|
|
3448
|
+
setRunning(id);
|
|
3449
|
+
const t0 = Date.now();
|
|
3450
|
+
let steps = [];
|
|
3451
|
+
try {
|
|
3452
|
+
if (isImgTest) {
|
|
3453
|
+
const bytes = b64ToBytes(selected.base64);
|
|
3454
|
+
const imgPath = `${TEST_DIR}/${selected.id}.jpg`;
|
|
3455
|
+
switch (id) {
|
|
3456
|
+
case "img-direct":
|
|
3457
|
+
steps = await uploadDirect(token, imgPath, rawB64(selected.base64));
|
|
3458
|
+
break;
|
|
3459
|
+
case "img-lfs":
|
|
3460
|
+
steps = await uploadLFS(token, imgPath, bytes);
|
|
3461
|
+
break;
|
|
3462
|
+
case "img-hub":
|
|
3463
|
+
steps = await uploadViaHubLib(token, imgPath, bytes, "image/jpeg");
|
|
3464
|
+
break;
|
|
3465
|
+
case "img-cdn":
|
|
3466
|
+
steps = await uploadViaCdnLib(token, imgPath, bytes, "image/jpeg");
|
|
3467
|
+
break;
|
|
3468
|
+
}
|
|
3469
|
+
} else {
|
|
3470
|
+
steps = await writeEvent(token, namespace);
|
|
3471
|
+
}
|
|
3472
|
+
} catch (e) {
|
|
3473
|
+
steps = [{ label: "Unexpected error", method: "-", url: "-", reqHeaders: {}, error: String(e?.message ?? e), ok: false }];
|
|
3474
|
+
}
|
|
3475
|
+
setDone(id, steps, t0);
|
|
3476
|
+
};
|
|
3477
|
+
const noToken = !token;
|
|
3478
|
+
const noImg = !selected;
|
|
3479
|
+
const imgTests = [
|
|
3480
|
+
{ id: "img-direct", label: "Upload Direct", icon: "upload_file", desc: "POST commit + file+base64 (kein LFS)" },
|
|
3481
|
+
{ id: "img-lfs", label: "Upload LFS", icon: "cloud_upload", desc: "preupload \u2192 PUT LFS \u2192 verify \u2192 commit" },
|
|
3482
|
+
{ id: "img-hub", label: "Upload hub lib", icon: "package_2", desc: "uploadFile() via @huggingface/hub" },
|
|
3483
|
+
{ id: "img-cdn", label: "Upload CDN lib", icon: "language", desc: "uploadFile() via esm.sh hub lib" }
|
|
3484
|
+
];
|
|
3485
|
+
return /* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflowY: "auto", padding: "12px 10px 80px", boxSizing: "border-box", fontFamily: "inherit" }, children: [
|
|
3486
|
+
noToken && /* @__PURE__ */ jsx20("div", { style: { marginBottom: 10, padding: "8px 12px", background: "rgba(248,113,113,0.08)", borderRadius: 8, border: "1px solid rgba(248,113,113,0.2)", fontSize: 12, color: "#f87171" }, children: "Kein HF-Token geladen \u2014 bitte zuerst Token im Sync-Tab eingeben." }),
|
|
3487
|
+
/* @__PURE__ */ jsxs18("div", { style: { marginBottom: 14 }, children: [
|
|
3488
|
+
/* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }, children: [
|
|
3489
|
+
"Bild ausw\xE4hlen (",
|
|
3490
|
+
withResults.length,
|
|
3491
|
+
" verf\xFCgbar)"
|
|
3492
|
+
] }),
|
|
3493
|
+
withResults.length === 0 ? /* @__PURE__ */ jsx20("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.3)", fontStyle: "italic" }, children: "Noch keine Bilder in der Galerie. Generiere zuerst ein Bild oder lade von HF." }) : /* @__PURE__ */ jsx20("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }, children: withResults.slice(0, 12).map((g) => /* @__PURE__ */ jsx20(
|
|
3494
|
+
"button",
|
|
3495
|
+
{
|
|
3496
|
+
onClick: () => setSelected(g),
|
|
3497
|
+
style: { padding: 0, border: `2px solid ${selected?.id === g.id ? "#0284c7" : "transparent"}`, borderRadius: 6, cursor: "pointer", overflow: "hidden", background: "none", lineHeight: 0 },
|
|
3498
|
+
children: /* @__PURE__ */ jsx20(
|
|
3499
|
+
"img",
|
|
3500
|
+
{
|
|
3501
|
+
src: g.base64,
|
|
3502
|
+
alt: g.prompt || g.id,
|
|
3503
|
+
style: { width: "100%", aspectRatio: "1", objectFit: "cover", display: "block", borderRadius: 4 }
|
|
3504
|
+
}
|
|
3505
|
+
)
|
|
3506
|
+
},
|
|
3507
|
+
g.id
|
|
3508
|
+
)) }),
|
|
3509
|
+
selected && /* @__PURE__ */ jsxs18("div", { style: { marginTop: 10, display: "flex", gap: 10, alignItems: "flex-start" }, children: [
|
|
3510
|
+
/* @__PURE__ */ jsx20(
|
|
3511
|
+
"img",
|
|
3512
|
+
{
|
|
3513
|
+
src: selected.base64,
|
|
3514
|
+
style: { width: 80, height: 80, objectFit: "cover", borderRadius: 8, border: "1px solid rgba(255,255,255,0.1)", flexShrink: 0 }
|
|
3515
|
+
}
|
|
3516
|
+
),
|
|
3517
|
+
/* @__PURE__ */ jsxs18("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
3518
|
+
/* @__PURE__ */ jsx20("div", { style: { fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.7)", marginBottom: 2 }, children: "Ausgew\xE4hlt" }),
|
|
3519
|
+
/* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", wordBreak: "break-all" }, children: [
|
|
3520
|
+
"ID: ",
|
|
3521
|
+
selected.id
|
|
3522
|
+
] }),
|
|
3523
|
+
/* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }, children: [
|
|
3524
|
+
"Ziel: test/",
|
|
3525
|
+
selected.id,
|
|
3526
|
+
".jpg"
|
|
3527
|
+
] }),
|
|
3528
|
+
selected.prompt && /* @__PURE__ */ jsx20("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selected.prompt })
|
|
3529
|
+
] })
|
|
3530
|
+
] })
|
|
3531
|
+
] }),
|
|
3532
|
+
/* @__PURE__ */ jsxs18("div", { style: { marginBottom: 18 }, children: [
|
|
3533
|
+
/* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
|
|
3534
|
+
"Bild hochladen \u2192 test/",
|
|
3535
|
+
"{",
|
|
3536
|
+
"id",
|
|
3537
|
+
"}",
|
|
3538
|
+
".jpg"
|
|
3539
|
+
] }),
|
|
3540
|
+
imgTests.map((t) => /* @__PURE__ */ jsx20(
|
|
3541
|
+
TestCard,
|
|
3542
|
+
{
|
|
3543
|
+
id: t.id,
|
|
3544
|
+
label: t.label,
|
|
3545
|
+
icon: t.icon,
|
|
3546
|
+
desc: t.desc,
|
|
3547
|
+
disabled: noToken || noImg || results[t.id]?.status === "running",
|
|
3548
|
+
state: results[t.id],
|
|
3549
|
+
onRun: () => run(t.id),
|
|
3550
|
+
expanded: !!expanded[t.id],
|
|
3551
|
+
onToggle: () => setExpanded((e) => ({ ...e, [t.id]: !e[t.id] }))
|
|
3552
|
+
},
|
|
3553
|
+
t.id
|
|
3554
|
+
))
|
|
3555
|
+
] }),
|
|
3556
|
+
/* @__PURE__ */ jsxs18("div", { children: [
|
|
3557
|
+
/* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
|
|
3558
|
+
"Event schreiben \u2192 ",
|
|
3559
|
+
namespace || "(kein namespace)",
|
|
3560
|
+
"test/events/"
|
|
3561
|
+
] }),
|
|
3562
|
+
/* @__PURE__ */ jsx20(
|
|
3563
|
+
TestCard,
|
|
3564
|
+
{
|
|
3565
|
+
id: "event",
|
|
3566
|
+
label: "Write Event",
|
|
3567
|
+
icon: "bolt",
|
|
3568
|
+
desc: "Kleines JSON-Event hochladen (direct commit)",
|
|
3569
|
+
disabled: noToken || results["event"]?.status === "running",
|
|
3570
|
+
state: results["event"],
|
|
3571
|
+
onRun: () => run("event"),
|
|
3572
|
+
expanded: !!expanded["event"],
|
|
3573
|
+
onToggle: () => setExpanded((e) => ({ ...e, event: !e.event }))
|
|
3574
|
+
}
|
|
3575
|
+
)
|
|
3576
|
+
] })
|
|
3577
|
+
] });
|
|
3578
|
+
}
|
|
3579
|
+
|
|
3141
3580
|
// src/components/AvatarArchitectApp.tsx
|
|
3142
|
-
import { Fragment as Fragment9, jsx as
|
|
3581
|
+
import { Fragment as Fragment9, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
3143
3582
|
function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
|
|
3144
3583
|
useEffect6(() => {
|
|
3145
3584
|
const id = "flow-styles";
|
|
@@ -3150,19 +3589,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3150
3589
|
document.head.appendChild(style);
|
|
3151
3590
|
}
|
|
3152
3591
|
}, []);
|
|
3153
|
-
const [showStart, setShowStart] =
|
|
3154
|
-
const [layoutChoice, setLayoutChoice] =
|
|
3592
|
+
const [showStart, setShowStart] = useState16(true);
|
|
3593
|
+
const [layoutChoice, setLayoutChoice] = useState16(() => {
|
|
3155
3594
|
try {
|
|
3156
3595
|
return localStorage.getItem("aa-layout") || null;
|
|
3157
3596
|
} catch {
|
|
3158
3597
|
return null;
|
|
3159
3598
|
}
|
|
3160
3599
|
});
|
|
3161
|
-
const [projectLoaded, setProjectLoaded] =
|
|
3162
|
-
const [hfToken, setHfToken] =
|
|
3163
|
-
const [hfTokenInput, setHfTokenInput] =
|
|
3164
|
-
const [isLoadingFromHF, setIsLoadingFromHF] =
|
|
3165
|
-
const [hfNamespaceLocal, setHfNamespaceLocal] =
|
|
3600
|
+
const [projectLoaded, setProjectLoaded] = useState16(false);
|
|
3601
|
+
const [hfToken, setHfToken] = useState16(initialHfToken || "");
|
|
3602
|
+
const [hfTokenInput, setHfTokenInput] = useState16(initialHfToken || "");
|
|
3603
|
+
const [isLoadingFromHF, setIsLoadingFromHF] = useState16(false);
|
|
3604
|
+
const [hfNamespaceLocal, setHfNamespaceLocal] = useState16(() => {
|
|
3166
3605
|
try {
|
|
3167
3606
|
const stored = localStorage.getItem("aa-hf-namespace");
|
|
3168
3607
|
if (stored !== null) return stored;
|
|
@@ -3171,7 +3610,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3171
3610
|
return "";
|
|
3172
3611
|
}
|
|
3173
3612
|
});
|
|
3174
|
-
const [hfNamespaceFromServer, setHfNamespaceFromServer] =
|
|
3613
|
+
const [hfNamespaceFromServer, setHfNamespaceFromServer] = useState16(null);
|
|
3175
3614
|
useEffect6(() => {
|
|
3176
3615
|
if (hfNamespace !== void 0) return;
|
|
3177
3616
|
const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
|
|
@@ -3191,27 +3630,27 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3191
3630
|
refresh: refreshHF,
|
|
3192
3631
|
hasStateZip
|
|
3193
3632
|
} = useHFState(hfToken, effectiveNamespace);
|
|
3194
|
-
const [bootstrapLog, setBootstrapLog] =
|
|
3195
|
-
const [isBootstrapping, setIsBootstrapping] =
|
|
3196
|
-
const syncTopSlot = /* @__PURE__ */
|
|
3197
|
-
pendingBufferCount > 0 && /* @__PURE__ */
|
|
3633
|
+
const [bootstrapLog, setBootstrapLog] = useState16([]);
|
|
3634
|
+
const [isBootstrapping, setIsBootstrapping] = useState16(false);
|
|
3635
|
+
const syncTopSlot = /* @__PURE__ */ jsxs19(Fragment9, { children: [
|
|
3636
|
+
pendingBufferCount > 0 && /* @__PURE__ */ jsxs19("div", { style: { background: "linear-gradient(90deg,#f59e0b,#ef4444)", padding: "4px 10px", fontSize: 11, color: "#fff", borderRadius: 4, marginBottom: 4 }, children: [
|
|
3198
3637
|
pendingBufferCount,
|
|
3199
3638
|
" \xC4nderung",
|
|
3200
3639
|
pendingBufferCount > 1 ? "en" : "",
|
|
3201
3640
|
" lokal \u2014 bei Flow-Reload verloren wenn nicht synchronisiert"
|
|
3202
3641
|
] }),
|
|
3203
|
-
eventCount > 100 && /* @__PURE__ */
|
|
3642
|
+
eventCount > 100 && /* @__PURE__ */ jsxs19("div", { style: { background: "#dc2626", color: "#fff", padding: "5px 10px", borderRadius: 4, marginBottom: 4, fontWeight: 600, fontSize: 11 }, children: [
|
|
3204
3643
|
"\u26A0 ",
|
|
3205
3644
|
eventCount,
|
|
3206
3645
|
" Events nicht konsolidiert \u2014 Konsolidierung dringend empfohlen"
|
|
3207
3646
|
] }),
|
|
3208
|
-
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */
|
|
3647
|
+
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ jsxs19("div", { style: { background: "#44403c", color: "#a8a29e", padding: "4px 10px", borderRadius: 4, marginBottom: 4, fontSize: 11 }, children: [
|
|
3209
3648
|
eventCount,
|
|
3210
3649
|
" Events seit letzter Konsolidierung \u2014 Konsolidierung empfohlen"
|
|
3211
3650
|
] }),
|
|
3212
|
-
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */
|
|
3213
|
-
/* @__PURE__ */
|
|
3214
|
-
/* @__PURE__ */
|
|
3651
|
+
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ jsxs19("div", { style: { background: "#1c1917", border: "1px solid #44403c", borderRadius: 6, padding: "10px 12px" }, children: [
|
|
3652
|
+
/* @__PURE__ */ jsx21("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" }),
|
|
3653
|
+
/* @__PURE__ */ jsx21(
|
|
3215
3654
|
"button",
|
|
3216
3655
|
{
|
|
3217
3656
|
disabled: isBootstrapping || !effectiveNamespace,
|
|
@@ -3232,7 +3671,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3232
3671
|
children: isBootstrapping ? "Migriere\u2026" : "Legacy-Migration starten"
|
|
3233
3672
|
}
|
|
3234
3673
|
),
|
|
3235
|
-
bootstrapLog.length > 0 && /* @__PURE__ */
|
|
3674
|
+
bootstrapLog.length > 0 && /* @__PURE__ */ jsx21("div", { style: { marginTop: 6, fontFamily: "monospace", fontSize: 10, color: "#78716c", lineHeight: 1.6 }, children: bootstrapLog.map((l, i) => /* @__PURE__ */ jsx21("div", { children: l }, i)) })
|
|
3236
3675
|
] })
|
|
3237
3676
|
] });
|
|
3238
3677
|
const wsInputRef = useRef7(null);
|
|
@@ -3244,10 +3683,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3244
3683
|
setLayoutChoice(choice);
|
|
3245
3684
|
setShowStart(false);
|
|
3246
3685
|
};
|
|
3247
|
-
const [nodes, setNodes] =
|
|
3248
|
-
const [edges, setEdges] =
|
|
3249
|
-
const [history, setHistory] =
|
|
3250
|
-
const [galleryItems, setGalleryItems] =
|
|
3686
|
+
const [nodes, setNodes] = useState16([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
|
|
3687
|
+
const [edges, setEdges] = useState16([]);
|
|
3688
|
+
const [history, setHistory] = useState16([]);
|
|
3689
|
+
const [galleryItems, setGalleryItems] = useState16([]);
|
|
3251
3690
|
const galleryItemsRef = useRef7([]);
|
|
3252
3691
|
useEffect6(() => {
|
|
3253
3692
|
galleryItemsRef.current = galleryItems;
|
|
@@ -3292,59 +3731,59 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3292
3731
|
});
|
|
3293
3732
|
}
|
|
3294
3733
|
}, [hfState]);
|
|
3295
|
-
const [activePrompt, setActivePrompt] =
|
|
3296
|
-
const [isSynthesizing, setIsSynthesizing] =
|
|
3297
|
-
const [activeGenerationsCount, setActiveGenerationsCount] =
|
|
3298
|
-
const [currentResult, setCurrentResult] =
|
|
3299
|
-
const [focusedNodeId, setFocusedNodeId] =
|
|
3300
|
-
const [leftTab, setLeftTab] =
|
|
3301
|
-
const [promptFeedback, setPromptFeedback] =
|
|
3302
|
-
const [lastPromptPayload, setLastPromptPayload] =
|
|
3303
|
-
const [isPromptTabGenerating, setIsPromptTabGenerating] =
|
|
3304
|
-
const [activeTab, setActiveTab] =
|
|
3305
|
-
const [mobileTab, setMobileTab] =
|
|
3306
|
-
const [middlePanel, setMiddlePanel] =
|
|
3307
|
-
const [recentLabItems, setRecentLabItems] =
|
|
3308
|
-
const [aspectRatio, setAspectRatio] =
|
|
3309
|
-
const [selectedModel, setSelectedModel] =
|
|
3310
|
-
const [seed, setSeed] =
|
|
3311
|
-
const [seedMode, setSeedMode] =
|
|
3312
|
-
const [isLeftCollapsed, setIsLeftCollapsed] =
|
|
3313
|
-
const [isRightCollapsed, setIsRightCollapsed] =
|
|
3314
|
-
const [leftPanelWidth, setLeftPanelWidth] =
|
|
3734
|
+
const [activePrompt, setActivePrompt] = useState16("");
|
|
3735
|
+
const [isSynthesizing, setIsSynthesizing] = useState16(false);
|
|
3736
|
+
const [activeGenerationsCount, setActiveGenerationsCount] = useState16(0);
|
|
3737
|
+
const [currentResult, setCurrentResult] = useState16(null);
|
|
3738
|
+
const [focusedNodeId, setFocusedNodeId] = useState16(null);
|
|
3739
|
+
const [leftTab, setLeftTab] = useState16("prompt");
|
|
3740
|
+
const [promptFeedback, setPromptFeedback] = useState16(null);
|
|
3741
|
+
const [lastPromptPayload, setLastPromptPayload] = useState16(null);
|
|
3742
|
+
const [isPromptTabGenerating, setIsPromptTabGenerating] = useState16(false);
|
|
3743
|
+
const [activeTab, setActiveTab] = useState16("history");
|
|
3744
|
+
const [mobileTab, setMobileTab] = useState16("stage");
|
|
3745
|
+
const [middlePanel, setMiddlePanel] = useState16("stage");
|
|
3746
|
+
const [recentLabItems, setRecentLabItems] = useState16([]);
|
|
3747
|
+
const [aspectRatio, setAspectRatio] = useState16("1:1");
|
|
3748
|
+
const [selectedModel, setSelectedModel] = useState16("\u{1F34C} Nano Banana Pro");
|
|
3749
|
+
const [seed, setSeed] = useState16(Math.floor(Math.random() * 1e6));
|
|
3750
|
+
const [seedMode, setSeedMode] = useState16("random");
|
|
3751
|
+
const [isLeftCollapsed, setIsLeftCollapsed] = useState16(false);
|
|
3752
|
+
const [isRightCollapsed, setIsRightCollapsed] = useState16(false);
|
|
3753
|
+
const [leftPanelWidth, setLeftPanelWidth] = useState16(() => {
|
|
3315
3754
|
try {
|
|
3316
3755
|
return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
|
|
3317
3756
|
} catch {
|
|
3318
3757
|
return 260;
|
|
3319
3758
|
}
|
|
3320
3759
|
});
|
|
3321
|
-
const [rightPanelWidth, setRightPanelWidth] =
|
|
3760
|
+
const [rightPanelWidth, setRightPanelWidth] = useState16(() => {
|
|
3322
3761
|
try {
|
|
3323
3762
|
return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
|
|
3324
3763
|
} catch {
|
|
3325
3764
|
return 320;
|
|
3326
3765
|
}
|
|
3327
3766
|
});
|
|
3328
|
-
const [isPromptCollapsed, setIsPromptCollapsed] =
|
|
3329
|
-
const [projectActionState, setProjectActionState] =
|
|
3767
|
+
const [isPromptCollapsed, setIsPromptCollapsed] = useState16(false);
|
|
3768
|
+
const [projectActionState, setProjectActionState] = useState16("idle");
|
|
3330
3769
|
const syncServerDataRef = useRef7(null);
|
|
3331
|
-
const [workspaceTags, setWorkspaceTags] =
|
|
3332
|
-
const [serverProjects, setServerProjects] =
|
|
3333
|
-
const [isLoadingFromServer, setIsLoadingFromServer] =
|
|
3334
|
-
const [highContrast, setHighContrast] =
|
|
3770
|
+
const [workspaceTags, setWorkspaceTags] = useState16(null);
|
|
3771
|
+
const [serverProjects, setServerProjects] = useState16([]);
|
|
3772
|
+
const [isLoadingFromServer, setIsLoadingFromServer] = useState16(false);
|
|
3773
|
+
const [highContrast, setHighContrast] = useState16(() => {
|
|
3335
3774
|
try {
|
|
3336
3775
|
return localStorage.getItem("aa-contrast") === "high";
|
|
3337
3776
|
} catch {
|
|
3338
3777
|
return false;
|
|
3339
3778
|
}
|
|
3340
3779
|
});
|
|
3341
|
-
const [activeReferenceId, setActiveReferenceId] =
|
|
3342
|
-
const [activeReferenceThumbnail, setActiveReferenceThumbnail] =
|
|
3343
|
-
const [isScanningImage, setIsScanningImage] =
|
|
3344
|
-
const [touchStartX, setTouchStartX] =
|
|
3345
|
-
const [isFullscreen, setIsFullscreen] =
|
|
3346
|
-
const [zoomScale, setZoomScale] =
|
|
3347
|
-
const [zoomOffset, setZoomOffset] =
|
|
3780
|
+
const [activeReferenceId, setActiveReferenceId] = useState16(null);
|
|
3781
|
+
const [activeReferenceThumbnail, setActiveReferenceThumbnail] = useState16(null);
|
|
3782
|
+
const [isScanningImage, setIsScanningImage] = useState16(false);
|
|
3783
|
+
const [touchStartX, setTouchStartX] = useState16(null);
|
|
3784
|
+
const [isFullscreen, setIsFullscreen] = useState16(false);
|
|
3785
|
+
const [zoomScale, setZoomScale] = useState16(1);
|
|
3786
|
+
const [zoomOffset, setZoomOffset] = useState16({ x: 0, y: 0 });
|
|
3348
3787
|
const lastPinchDist = useRef7(null);
|
|
3349
3788
|
const lastTapTime = useRef7(0);
|
|
3350
3789
|
const dragStart = useRef7(null);
|
|
@@ -3876,7 +4315,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3876
4315
|
};
|
|
3877
4316
|
if (isFullscreen && currentResult?.base64) {
|
|
3878
4317
|
const fsBase64 = currentResult.base64.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}`;
|
|
3879
|
-
return /* @__PURE__ */
|
|
4318
|
+
return /* @__PURE__ */ jsxs19(
|
|
3880
4319
|
"div",
|
|
3881
4320
|
{
|
|
3882
4321
|
className: "fixed inset-0 bg-black z-50 flex items-center justify-center overflow-hidden touch-none",
|
|
@@ -3884,7 +4323,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3884
4323
|
onTouchMove: handleFsTouchMove,
|
|
3885
4324
|
onTouchEnd: handleFsTouchEnd,
|
|
3886
4325
|
children: [
|
|
3887
|
-
/* @__PURE__ */
|
|
4326
|
+
/* @__PURE__ */ jsx21(
|
|
3888
4327
|
"img",
|
|
3889
4328
|
{
|
|
3890
4329
|
src: fsBase64,
|
|
@@ -3901,77 +4340,77 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3901
4340
|
}
|
|
3902
4341
|
}
|
|
3903
4342
|
),
|
|
3904
|
-
/* @__PURE__ */
|
|
3905
|
-
zoomScale > 1 && /* @__PURE__ */
|
|
4343
|
+
/* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined text-[22px]", children: "close" }) }),
|
|
4344
|
+
zoomScale > 1 && /* @__PURE__ */ jsx21("button", { onClick: () => {
|
|
3906
4345
|
setZoomScale(1);
|
|
3907
4346
|
setZoomOffset({ x: 0, y: 0 });
|
|
3908
|
-
}, 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__ */
|
|
3909
|
-
history.length > 1 && /* @__PURE__ */
|
|
3910
|
-
/* @__PURE__ */
|
|
4347
|
+
}, 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__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: "zoom_out_map" }) }),
|
|
4348
|
+
history.length > 1 && /* @__PURE__ */ jsxs19(Fragment9, { children: [
|
|
4349
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => {
|
|
3911
4350
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
3912
|
-
}, 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__ */
|
|
3913
|
-
/* @__PURE__ */
|
|
4351
|
+
}, 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__ */ jsx21("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
4352
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => {
|
|
3914
4353
|
if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
|
|
3915
|
-
}, 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__ */
|
|
3916
|
-
/* @__PURE__ */
|
|
4354
|
+
}, 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__ */ jsx21("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
4355
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
3917
4356
|
currentIndex + 1,
|
|
3918
4357
|
" / ",
|
|
3919
4358
|
history.length
|
|
3920
4359
|
] })
|
|
3921
4360
|
] }),
|
|
3922
|
-
zoomScale === 1 && /* @__PURE__ */
|
|
4361
|
+
zoomScale === 1 && /* @__PURE__ */ jsx21("div", { className: "absolute bottom-6 right-4 text-[9px] text-white/20 font-mono", children: "Pinch zum Zoomen \xB7 Doppeltipp 2.5\xD7" })
|
|
3923
4362
|
]
|
|
3924
4363
|
}
|
|
3925
4364
|
);
|
|
3926
4365
|
}
|
|
3927
4366
|
if (showStart) {
|
|
3928
|
-
return /* @__PURE__ */
|
|
3929
|
-
/* @__PURE__ */
|
|
4367
|
+
return /* @__PURE__ */ jsxs19("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
|
|
4368
|
+
/* @__PURE__ */ jsx21("input", { ref: wsInputRef, type: "file", accept: ".zip", className: "hidden", onChange: (e) => {
|
|
3930
4369
|
const f = e.target.files?.[0];
|
|
3931
4370
|
if (f) handleProjectImport(f);
|
|
3932
4371
|
e.target.value = "";
|
|
3933
4372
|
} }),
|
|
3934
|
-
/* @__PURE__ */
|
|
3935
|
-
/* @__PURE__ */
|
|
3936
|
-
/* @__PURE__ */
|
|
3937
|
-
/* @__PURE__ */
|
|
4373
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-1", children: [
|
|
4374
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
|
|
4375
|
+
/* @__PURE__ */ jsx21("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" }),
|
|
4376
|
+
/* @__PURE__ */ jsxs19("span", { className: "text-white text-[13px] font-mono", children: [
|
|
3938
4377
|
"v",
|
|
3939
4378
|
LIB_VERSION
|
|
3940
4379
|
] })
|
|
3941
4380
|
] }),
|
|
3942
|
-
/* @__PURE__ */
|
|
4381
|
+
/* @__PURE__ */ jsxs19(
|
|
3943
4382
|
"button",
|
|
3944
4383
|
{
|
|
3945
4384
|
onClick: toggleContrast,
|
|
3946
4385
|
className: "flex items-center gap-3 px-5 py-3 rounded-2xl border transition-colors",
|
|
3947
4386
|
style: { borderColor: highContrast ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.08)", background: highContrast ? "rgba(255,255,255,0.08)" : "transparent" },
|
|
3948
4387
|
children: [
|
|
3949
|
-
/* @__PURE__ */
|
|
3950
|
-
/* @__PURE__ */
|
|
3951
|
-
/* @__PURE__ */
|
|
3952
|
-
/* @__PURE__ */
|
|
4388
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[22px]", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.35)" }, children: highContrast ? "light_mode" : "dark_mode" }),
|
|
4389
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-start", children: [
|
|
4390
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[13px] font-bold", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.5)" }, children: highContrast ? "Hoher Kontrast" : "Normaler Kontrast" }),
|
|
4391
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[10px]", style: { color: "rgba(255,255,255,0.25)" }, children: "Tippen zum Umschalten" })
|
|
3953
4392
|
] })
|
|
3954
4393
|
]
|
|
3955
4394
|
}
|
|
3956
4395
|
),
|
|
3957
|
-
/* @__PURE__ */
|
|
3958
|
-
/* @__PURE__ */
|
|
4396
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
4397
|
+
/* @__PURE__ */ jsxs19(
|
|
3959
4398
|
"button",
|
|
3960
4399
|
{
|
|
3961
4400
|
onClick: () => wsInputRef.current?.click(),
|
|
3962
4401
|
className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform",
|
|
3963
4402
|
style: { height: 56, background: projectLoaded ? "#16a34a" : "#0284c7" },
|
|
3964
4403
|
children: [
|
|
3965
|
-
/* @__PURE__ */
|
|
4404
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[22px]", children: projectLoaded ? "check_circle" : "folder_zip" }),
|
|
3966
4405
|
projectLoaded ? "Projekt geladen \u2713" : "Projekt laden (.zip)"
|
|
3967
4406
|
]
|
|
3968
4407
|
}
|
|
3969
4408
|
),
|
|
3970
|
-
!projectLoaded && /* @__PURE__ */
|
|
4409
|
+
!projectLoaded && /* @__PURE__ */ jsx21("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
|
|
3971
4410
|
] }),
|
|
3972
|
-
/* @__PURE__ */
|
|
3973
|
-
!initialHfToken && /* @__PURE__ */
|
|
3974
|
-
/* @__PURE__ */
|
|
4411
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
4412
|
+
!initialHfToken && /* @__PURE__ */ jsxs19("div", { className: "flex gap-2 w-full", children: [
|
|
4413
|
+
/* @__PURE__ */ jsx21(
|
|
3975
4414
|
"input",
|
|
3976
4415
|
{
|
|
3977
4416
|
type: "password",
|
|
@@ -3987,7 +4426,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3987
4426
|
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)" }
|
|
3988
4427
|
}
|
|
3989
4428
|
),
|
|
3990
|
-
hfTokenInput.trim() && /* @__PURE__ */
|
|
4429
|
+
hfTokenInput.trim() && /* @__PURE__ */ jsx21(
|
|
3991
4430
|
"button",
|
|
3992
4431
|
{
|
|
3993
4432
|
type: "button",
|
|
@@ -3998,7 +4437,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
3998
4437
|
}
|
|
3999
4438
|
)
|
|
4000
4439
|
] }),
|
|
4001
|
-
hfToken && /* @__PURE__ */
|
|
4440
|
+
hfToken && /* @__PURE__ */ jsxs19(
|
|
4002
4441
|
"button",
|
|
4003
4442
|
{
|
|
4004
4443
|
disabled: isLoadingFromHF,
|
|
@@ -4020,15 +4459,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4020
4459
|
className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform disabled:opacity-50",
|
|
4021
4460
|
style: { height: 56, background: "#f59e0b" },
|
|
4022
4461
|
children: [
|
|
4023
|
-
/* @__PURE__ */
|
|
4462
|
+
/* @__PURE__ */ jsx21("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromHF ? " animate-spin" : ""}`, children: isLoadingFromHF ? "sync" : "cloud_download" }),
|
|
4024
4463
|
isLoadingFromHF ? "Laden\u2026" : "Von HF laden"
|
|
4025
4464
|
]
|
|
4026
4465
|
}
|
|
4027
4466
|
),
|
|
4028
|
-
hfToken && /* @__PURE__ */
|
|
4467
|
+
hfToken && /* @__PURE__ */ jsx21("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand von Hugging Face laden" })
|
|
4029
4468
|
] }),
|
|
4030
|
-
onFetchServerProjects && /* @__PURE__ */
|
|
4031
|
-
/* @__PURE__ */
|
|
4469
|
+
onFetchServerProjects && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
4470
|
+
/* @__PURE__ */ jsxs19(
|
|
4032
4471
|
"button",
|
|
4033
4472
|
{
|
|
4034
4473
|
disabled: isLoadingFromServer,
|
|
@@ -4049,39 +4488,39 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4049
4488
|
className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform disabled:opacity-50",
|
|
4050
4489
|
style: { height: 56, background: "#7c3aed" },
|
|
4051
4490
|
children: [
|
|
4052
|
-
/* @__PURE__ */
|
|
4491
|
+
/* @__PURE__ */ jsx21("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromServer ? " animate-spin" : ""}`, children: isLoadingFromServer ? "sync" : "cloud_download" }),
|
|
4053
4492
|
isLoadingFromServer ? "Laden\u2026" : "Vom Server laden"
|
|
4054
4493
|
]
|
|
4055
4494
|
}
|
|
4056
4495
|
),
|
|
4057
|
-
/* @__PURE__ */
|
|
4496
|
+
/* @__PURE__ */ jsx21("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand vom Server wiederherstellen" })
|
|
4058
4497
|
] }),
|
|
4059
|
-
/* @__PURE__ */
|
|
4060
|
-
/* @__PURE__ */
|
|
4061
|
-
/* @__PURE__ */
|
|
4498
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
4499
|
+
/* @__PURE__ */ jsx21("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
|
|
4500
|
+
/* @__PURE__ */ jsx21("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
|
|
4062
4501
|
{ id: "mobile", icon: "smartphone", label: "Mobile" },
|
|
4063
4502
|
{ id: "mobile-desktop", icon: "phonelink", label: "Mobile+" },
|
|
4064
4503
|
{ id: "desktop", icon: "desktop_windows", label: "Desktop" },
|
|
4065
4504
|
{ id: "tablet-landscape", icon: "tablet", label: "Landscape" }
|
|
4066
|
-
].map((opt) => /* @__PURE__ */
|
|
4505
|
+
].map((opt) => /* @__PURE__ */ jsxs19(
|
|
4067
4506
|
"button",
|
|
4068
4507
|
{
|
|
4069
4508
|
onClick: () => startApp(opt.id),
|
|
4070
4509
|
className: "flex flex-col items-center gap-2 py-4 rounded-2xl border transition-colors",
|
|
4071
4510
|
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" },
|
|
4072
4511
|
children: [
|
|
4073
|
-
/* @__PURE__ */
|
|
4074
|
-
/* @__PURE__ */
|
|
4512
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[24px]", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.icon }),
|
|
4513
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[11px] font-bold", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.label })
|
|
4075
4514
|
]
|
|
4076
4515
|
},
|
|
4077
4516
|
opt.id
|
|
4078
4517
|
)) }),
|
|
4079
|
-
layoutChoice === "mobile-desktop" && /* @__PURE__ */
|
|
4080
|
-
layoutChoice === "tablet-landscape" && /* @__PURE__ */
|
|
4518
|
+
layoutChoice === "mobile-desktop" && /* @__PURE__ */ jsx21("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
|
|
4519
|
+
layoutChoice === "tablet-landscape" && /* @__PURE__ */ jsx21("span", { className: "text-white/20 text-[9px] text-center", children: "2-Spalten-Layout f\xFCr Landscape-Tablet im Desktop-Mode" })
|
|
4081
4520
|
] }),
|
|
4082
|
-
!hfNamespace && !hfNamespaceFromServer && /* @__PURE__ */
|
|
4083
|
-
/* @__PURE__ */
|
|
4084
|
-
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */
|
|
4521
|
+
!hfNamespace && !hfNamespaceFromServer && /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-3 w-full max-w-[280px]", children: [
|
|
4522
|
+
/* @__PURE__ */ jsx21("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "State:" }),
|
|
4523
|
+
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ jsx21(
|
|
4085
4524
|
"button",
|
|
4086
4525
|
{
|
|
4087
4526
|
onClick: () => {
|
|
@@ -4108,21 +4547,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4108
4547
|
const mdScale = mdMode ? window.innerWidth / 430 : 1;
|
|
4109
4548
|
const mdW = mdMode ? 430 : void 0;
|
|
4110
4549
|
const mdH = mdMode ? Math.ceil(window.innerHeight / mdScale) : void 0;
|
|
4111
|
-
const mobileRoot = /* @__PURE__ */
|
|
4550
|
+
const mobileRoot = /* @__PURE__ */ jsxs19("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
|
|
4112
4551
|
width: mdMode ? mdW : "100vw",
|
|
4113
4552
|
height: mdMode ? mdH : "100dvh",
|
|
4114
4553
|
transform: mdMode ? `scale(${mdScale})` : void 0,
|
|
4115
4554
|
transformOrigin: mdMode ? "top left" : void 0,
|
|
4116
4555
|
...hcStyle || {}
|
|
4117
4556
|
}, children: [
|
|
4118
|
-
mobileTab === "labs" && /* @__PURE__ */
|
|
4557
|
+
mobileTab === "labs" && /* @__PURE__ */ jsx21("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx21(LabsTab, { services: labServices, onResult: (item) => {
|
|
4119
4558
|
const frame = item.frames[0];
|
|
4120
4559
|
if (frame?.base64) {
|
|
4121
4560
|
setCurrentResult(frameToGeneration(frame, item));
|
|
4122
4561
|
setMobileTab("stage");
|
|
4123
4562
|
}
|
|
4124
4563
|
} }) }),
|
|
4125
|
-
mobileTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
4564
|
+
mobileTab === "tags" && workspaceTags && /* @__PURE__ */ jsx21("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx21(
|
|
4126
4565
|
TagManagerPanel,
|
|
4127
4566
|
{
|
|
4128
4567
|
workspaceTags,
|
|
@@ -4133,21 +4572,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4133
4572
|
onTagMove: handleTagMove
|
|
4134
4573
|
}
|
|
4135
4574
|
) }),
|
|
4136
|
-
mobileTab === "stage" && /* @__PURE__ */
|
|
4137
|
-
/* @__PURE__ */
|
|
4138
|
-
/* @__PURE__ */
|
|
4139
|
-
/* @__PURE__ */
|
|
4140
|
-
/* @__PURE__ */
|
|
4141
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
4142
|
-
/* @__PURE__ */
|
|
4143
|
-
/* @__PURE__ */
|
|
4144
|
-
/* @__PURE__ */
|
|
4145
|
-
] }) : /* @__PURE__ */
|
|
4146
|
-
/* @__PURE__ */
|
|
4147
|
-
/* @__PURE__ */
|
|
4575
|
+
mobileTab === "stage" && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
4576
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
|
|
4577
|
+
/* @__PURE__ */ jsx21(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
4578
|
+
/* @__PURE__ */ jsx21(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" }] }),
|
|
4579
|
+
/* @__PURE__ */ jsx21("div", { className: "flex-1" }),
|
|
4580
|
+
activeReferenceThumbnail ? /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden mr-2", style: { height: 28 }, children: [
|
|
4581
|
+
/* @__PURE__ */ jsx21("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
4582
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
4583
|
+
/* @__PURE__ */ jsx21("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 active:text-white/80 transition-colors", children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
4584
|
+
] }) : /* @__PURE__ */ jsx21("button", { onClick: handleSelectReference, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: "add_photo_alternate" }) }),
|
|
4585
|
+
/* @__PURE__ */ jsx21("button", { onClick: toggleContrast, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
4586
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => setShowStart(true), className: "text-white/20 active:text-white/60 transition-colors mr-1", children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: "desktop_windows" }) })
|
|
4148
4587
|
] }),
|
|
4149
|
-
/* @__PURE__ */
|
|
4150
|
-
/* @__PURE__ */
|
|
4588
|
+
/* @__PURE__ */ jsx21("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ jsxs19("div", { className: `relative rounded-xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
4589
|
+
/* @__PURE__ */ jsx21(
|
|
4151
4590
|
"textarea",
|
|
4152
4591
|
{
|
|
4153
4592
|
value: activePrompt,
|
|
@@ -4157,26 +4596,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4157
4596
|
placeholder: "Prompt eingeben..."
|
|
4158
4597
|
}
|
|
4159
4598
|
),
|
|
4160
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
4599
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
|
|
4161
4600
|
] }) }),
|
|
4162
|
-
/* @__PURE__ */
|
|
4601
|
+
/* @__PURE__ */ jsx21("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ jsx21(
|
|
4163
4602
|
"button",
|
|
4164
4603
|
{
|
|
4165
4604
|
onClick: () => handleGenerateImage(),
|
|
4166
4605
|
disabled: !activePrompt.trim() || isGenerating,
|
|
4167
4606
|
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",
|
|
4168
4607
|
style: { height: 48, background: activePrompt.trim() && !isGenerating ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
|
|
4169
|
-
children: isGenerating ? /* @__PURE__ */
|
|
4170
|
-
/* @__PURE__ */
|
|
4171
|
-
/* @__PURE__ */
|
|
4172
|
-
] }) : /* @__PURE__ */
|
|
4173
|
-
/* @__PURE__ */
|
|
4174
|
-
/* @__PURE__ */
|
|
4608
|
+
children: isGenerating ? /* @__PURE__ */ jsxs19(Fragment9, { children: [
|
|
4609
|
+
/* @__PURE__ */ jsx21("div", { className: "w-4 h-4 border-t-2 border-white rounded-full animate-spin" }),
|
|
4610
|
+
/* @__PURE__ */ jsx21("span", { children: "Generiere..." })
|
|
4611
|
+
] }) : /* @__PURE__ */ jsxs19(Fragment9, { children: [
|
|
4612
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
|
|
4613
|
+
/* @__PURE__ */ jsx21("span", { children: "Generieren" })
|
|
4175
4614
|
] })
|
|
4176
4615
|
}
|
|
4177
4616
|
) }),
|
|
4178
|
-
/* @__PURE__ */
|
|
4179
|
-
/* @__PURE__ */
|
|
4617
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
|
|
4618
|
+
/* @__PURE__ */ jsxs19(
|
|
4180
4619
|
"div",
|
|
4181
4620
|
{
|
|
4182
4621
|
className: "w-full rounded-2xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center",
|
|
@@ -4190,25 +4629,25 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4190
4629
|
setTouchStartX(null);
|
|
4191
4630
|
},
|
|
4192
4631
|
children: [
|
|
4193
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
4194
|
-
/* @__PURE__ */
|
|
4195
|
-
/* @__PURE__ */
|
|
4632
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-3", children: [
|
|
4633
|
+
/* @__PURE__ */ jsx21("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
|
|
4634
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[11px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
4196
4635
|
] }),
|
|
4197
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
4198
|
-
/* @__PURE__ */
|
|
4199
|
-
/* @__PURE__ */
|
|
4200
|
-
/* @__PURE__ */
|
|
4636
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs19("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
|
|
4637
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
|
|
4638
|
+
/* @__PURE__ */ jsx21("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
|
|
4639
|
+
/* @__PURE__ */ jsx21("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" })
|
|
4201
4640
|
] }),
|
|
4202
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
4203
|
-
!currentResult && /* @__PURE__ */
|
|
4204
|
-
/* @__PURE__ */
|
|
4205
|
-
/* @__PURE__ */
|
|
4641
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx21("img", { src: currentResult.base64, className: "w-full h-full object-contain" }),
|
|
4642
|
+
!currentResult && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
4643
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
|
|
4644
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
4206
4645
|
] }),
|
|
4207
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
4208
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
4209
|
-
/* @__PURE__ */
|
|
4210
|
-
/* @__PURE__ */
|
|
4211
|
-
/* @__PURE__ */
|
|
4646
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined text-[18px]", children: "fullscreen" }) }),
|
|
4647
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs19(Fragment9, { children: [
|
|
4648
|
+
/* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
4649
|
+
/* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
4650
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
4212
4651
|
currentIndex + 1,
|
|
4213
4652
|
" / ",
|
|
4214
4653
|
history.length
|
|
@@ -4217,33 +4656,33 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4217
4656
|
]
|
|
4218
4657
|
}
|
|
4219
4658
|
),
|
|
4220
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
4221
|
-
/* @__PURE__ */
|
|
4222
|
-
/* @__PURE__ */
|
|
4223
|
-
/* @__PURE__ */
|
|
4659
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs19("div", { className: "flex gap-2 mt-3", children: [
|
|
4660
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
4661
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
|
|
4662
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[12px] text-white/60", children: "Prompt" })
|
|
4224
4663
|
] }),
|
|
4225
|
-
/* @__PURE__ */
|
|
4226
|
-
/* @__PURE__ */
|
|
4227
|
-
/* @__PURE__ */
|
|
4664
|
+
/* @__PURE__ */ jsxs19("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl bg-white/10 active:bg-white/15 transition-colors", style: { height: 44 }, children: [
|
|
4665
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
|
|
4666
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
|
|
4228
4667
|
] }),
|
|
4229
|
-
/* @__PURE__ */
|
|
4230
|
-
/* @__PURE__ */
|
|
4231
|
-
/* @__PURE__ */
|
|
4668
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
4669
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "download" }),
|
|
4670
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[12px] text-white/60", children: "Laden" })
|
|
4232
4671
|
] })
|
|
4233
4672
|
] })
|
|
4234
4673
|
] })
|
|
4235
4674
|
] }),
|
|
4236
|
-
mobileTab === "browse" && /* @__PURE__ */
|
|
4237
|
-
/* @__PURE__ */
|
|
4238
|
-
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */
|
|
4239
|
-
hfToken && /* @__PURE__ */
|
|
4675
|
+
mobileTab === "browse" && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
4676
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
4677
|
+
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : "info" }) }, tab)),
|
|
4678
|
+
hfToken && /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
|
|
4240
4679
|
] }),
|
|
4241
|
-
/* @__PURE__ */
|
|
4242
|
-
activeTab === "history" && /* @__PURE__ */
|
|
4680
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
4681
|
+
activeTab === "history" && /* @__PURE__ */ jsx21(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: (g) => {
|
|
4243
4682
|
setCurrentResult(g);
|
|
4244
4683
|
setMobileTab("stage");
|
|
4245
4684
|
}, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
|
|
4246
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
4685
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx21(
|
|
4247
4686
|
MediaLibrary,
|
|
4248
4687
|
{
|
|
4249
4688
|
items: galleryItems,
|
|
@@ -4263,39 +4702,43 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4263
4702
|
}
|
|
4264
4703
|
}
|
|
4265
4704
|
),
|
|
4266
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
4705
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx21(InspectPanel, { currentResult, history, onSelect: (g) => {
|
|
4267
4706
|
setCurrentResult(g);
|
|
4268
4707
|
} })
|
|
4269
4708
|
] })
|
|
4270
4709
|
] }),
|
|
4271
|
-
/* @__PURE__ */
|
|
4272
|
-
/* @__PURE__ */
|
|
4273
|
-
workspaceTags && /* @__PURE__ */
|
|
4710
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: mobileTab === "tools" ? "flex" : "none" }, className: "flex flex-col flex-1 min-h-0", children: [
|
|
4711
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
4712
|
+
workspaceTags && /* @__PURE__ */ jsxs19("button", { onClick: () => {
|
|
4274
4713
|
setLeftTab("prompt");
|
|
4275
4714
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
4276
4715
|
}, 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: [
|
|
4277
|
-
/* @__PURE__ */
|
|
4716
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
|
|
4278
4717
|
"Prompt"
|
|
4279
4718
|
] }),
|
|
4280
|
-
/* @__PURE__ */
|
|
4719
|
+
/* @__PURE__ */ jsxs19("button", { onClick: () => {
|
|
4281
4720
|
setLeftTab("hierarchy");
|
|
4282
4721
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
4283
4722
|
}, 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: [
|
|
4284
|
-
/* @__PURE__ */
|
|
4723
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
|
|
4285
4724
|
"Hierarchie"
|
|
4286
4725
|
] }),
|
|
4287
|
-
/* @__PURE__ */
|
|
4288
|
-
/* @__PURE__ */
|
|
4726
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
4727
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: "settings" }),
|
|
4289
4728
|
"Setup"
|
|
4290
4729
|
] }),
|
|
4291
|
-
/* @__PURE__ */
|
|
4292
|
-
/* @__PURE__ */
|
|
4730
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
4731
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: "cloud_sync" }),
|
|
4293
4732
|
"Sync"
|
|
4294
4733
|
] }),
|
|
4295
|
-
|
|
4734
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
4735
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: "biotech" }),
|
|
4736
|
+
"HF"
|
|
4737
|
+
] }),
|
|
4738
|
+
workspaceTags && /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
4296
4739
|
] }),
|
|
4297
|
-
/* @__PURE__ */
|
|
4298
|
-
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && /* @__PURE__ */
|
|
4740
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
4741
|
+
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx21(
|
|
4299
4742
|
ListView,
|
|
4300
4743
|
{
|
|
4301
4744
|
nodes,
|
|
@@ -4326,12 +4769,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4326
4769
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
4327
4770
|
}
|
|
4328
4771
|
) }),
|
|
4329
|
-
workspaceTags && /* @__PURE__ */
|
|
4772
|
+
workspaceTags && /* @__PURE__ */ jsx21("div", { style: { display: leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" ? "flex" : "none" }, className: "absolute inset-0 flex-col", children: /* @__PURE__ */ jsx21(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => {
|
|
4330
4773
|
handleGenerateImage(prompt);
|
|
4331
4774
|
setMobileTab("stage");
|
|
4332
4775
|
}, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
|
|
4333
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
4334
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
4776
|
+
activeTab === "setup" && /* @__PURE__ */ jsx21(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
4777
|
+
activeTab === "sync" && /* @__PURE__ */ jsx21(
|
|
4335
4778
|
ProjectSyncTab,
|
|
4336
4779
|
{
|
|
4337
4780
|
topSlot: syncTopSlot,
|
|
@@ -4355,7 +4798,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4355
4798
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
4356
4799
|
}
|
|
4357
4800
|
),
|
|
4358
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
4801
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx21(
|
|
4359
4802
|
TagManagerPanel,
|
|
4360
4803
|
{
|
|
4361
4804
|
workspaceTags,
|
|
@@ -4365,22 +4808,23 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4365
4808
|
onTagReorder: handleTagReorder,
|
|
4366
4809
|
onTagMove: handleTagMove
|
|
4367
4810
|
}
|
|
4368
|
-
)
|
|
4811
|
+
),
|
|
4812
|
+
activeTab === "hftest" && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx21(HFTestTab, { token: hfToken, namespace: effectiveNamespace, galleryItems }) })
|
|
4369
4813
|
] })
|
|
4370
4814
|
] }),
|
|
4371
|
-
/* @__PURE__ */
|
|
4815
|
+
/* @__PURE__ */ jsx21("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
|
|
4372
4816
|
{ id: "tools", icon: "auto_fix_high", label: "Prompt" },
|
|
4373
4817
|
{ id: "stage", icon: "palette", label: "Stage" },
|
|
4374
4818
|
{ id: "labs", icon: "science", label: "Labs" },
|
|
4375
4819
|
...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
|
|
4376
4820
|
{ id: "browse", icon: "photo_library", label: "Galerie" }
|
|
4377
|
-
].map((tab) => /* @__PURE__ */
|
|
4378
|
-
/* @__PURE__ */
|
|
4379
|
-
/* @__PURE__ */
|
|
4821
|
+
].map((tab) => /* @__PURE__ */ jsxs19("button", { onClick: () => setMobileTab(tab.id), className: `flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors ${mobileTab === tab.id ? "text-white" : "text-white/30"}`, children: [
|
|
4822
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
|
|
4823
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
|
|
4380
4824
|
] }, tab.id)) })
|
|
4381
4825
|
] });
|
|
4382
4826
|
if (mdMode) {
|
|
4383
|
-
return /* @__PURE__ */
|
|
4827
|
+
return /* @__PURE__ */ jsx21("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
|
|
4384
4828
|
}
|
|
4385
4829
|
return mobileRoot;
|
|
4386
4830
|
}
|
|
@@ -4388,17 +4832,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4388
4832
|
const tlScale = Math.min(window.innerWidth / 920, window.innerHeight / 520);
|
|
4389
4833
|
const tlW = 920;
|
|
4390
4834
|
const tlH = 520;
|
|
4391
|
-
return /* @__PURE__ */
|
|
4392
|
-
/* @__PURE__ */
|
|
4393
|
-
/* @__PURE__ */
|
|
4394
|
-
/* @__PURE__ */
|
|
4395
|
-
/* @__PURE__ */
|
|
4396
|
-
/* @__PURE__ */
|
|
4397
|
-
/* @__PURE__ */
|
|
4398
|
-
/* @__PURE__ */
|
|
4835
|
+
return /* @__PURE__ */ jsx21("div", { style: { position: "fixed", inset: 0, background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", ...hcStyle || {} }, children: /* @__PURE__ */ jsxs19("div", { style: { width: tlW, height: tlH, transform: `scale(${tlScale})`, transformOrigin: "center center", display: "flex", flexDirection: "row", color: "#fff", overflow: "hidden", borderRadius: 0 }, children: [
|
|
4836
|
+
/* @__PURE__ */ jsxs19("div", { style: { width: 320, height: tlH, display: "flex", flexDirection: "column", borderRight: "1px solid rgba(255,255,255,0.05)", background: "#000", flexShrink: 0 }, children: [
|
|
4837
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
4838
|
+
/* @__PURE__ */ jsx21(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
4839
|
+
/* @__PURE__ */ jsx21(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" }] }),
|
|
4840
|
+
/* @__PURE__ */ jsx21("div", { style: { flex: 1 } }),
|
|
4841
|
+
/* @__PURE__ */ jsx21("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
4842
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
|
|
4399
4843
|
] }),
|
|
4400
|
-
/* @__PURE__ */
|
|
4401
|
-
/* @__PURE__ */
|
|
4844
|
+
/* @__PURE__ */ jsx21("div", { style: { padding: "12px 12px 8px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs19("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: [
|
|
4845
|
+
/* @__PURE__ */ jsx21(
|
|
4402
4846
|
"textarea",
|
|
4403
4847
|
{
|
|
4404
4848
|
value: activePrompt,
|
|
@@ -4407,27 +4851,27 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4407
4851
|
placeholder: "Prompt eingeben..."
|
|
4408
4852
|
}
|
|
4409
4853
|
),
|
|
4410
|
-
activePrompt && /* @__PURE__ */
|
|
4854
|
+
activePrompt && /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
|
|
4411
4855
|
] }) }),
|
|
4412
|
-
/* @__PURE__ */
|
|
4856
|
+
/* @__PURE__ */ jsx21("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ jsx21(
|
|
4413
4857
|
"button",
|
|
4414
4858
|
{
|
|
4415
4859
|
onClick: () => handleGenerateImage(),
|
|
4416
4860
|
disabled: !activePrompt.trim() || isGenerating,
|
|
4417
4861
|
style: { width: "100%", height: 42, display: "flex", alignItems: "center", justifyContent: "center", gap: 8, borderRadius: 10, fontWeight: "bold", fontSize: 13, textTransform: "uppercase", letterSpacing: "0.05em", border: "1px solid rgba(255,255,255,0.1)", background: activePrompt.trim() && !isGenerating ? "#0284c7" : "transparent", color: "#fff", cursor: activePrompt.trim() && !isGenerating ? "pointer" : "default", opacity: !activePrompt.trim() || isGenerating ? 0.3 : 1, fontFamily: "inherit", transition: "background 0.2s" },
|
|
4418
|
-
children: isGenerating ? /* @__PURE__ */
|
|
4419
|
-
/* @__PURE__ */
|
|
4420
|
-
/* @__PURE__ */
|
|
4421
|
-
] }) : /* @__PURE__ */
|
|
4422
|
-
/* @__PURE__ */
|
|
4423
|
-
/* @__PURE__ */
|
|
4862
|
+
children: isGenerating ? /* @__PURE__ */ jsxs19(Fragment9, { children: [
|
|
4863
|
+
/* @__PURE__ */ jsx21("div", { style: { width: 14, height: 14, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
|
|
4864
|
+
/* @__PURE__ */ jsx21("span", { children: "Generiere..." })
|
|
4865
|
+
] }) : /* @__PURE__ */ jsxs19(Fragment9, { children: [
|
|
4866
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
|
|
4867
|
+
/* @__PURE__ */ jsx21("span", { children: "Generieren" })
|
|
4424
4868
|
] })
|
|
4425
4869
|
}
|
|
4426
4870
|
) }),
|
|
4427
|
-
/* @__PURE__ */
|
|
4871
|
+
/* @__PURE__ */ jsx21("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ jsx21(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }) })
|
|
4428
4872
|
] }),
|
|
4429
|
-
/* @__PURE__ */
|
|
4430
|
-
/* @__PURE__ */
|
|
4873
|
+
/* @__PURE__ */ jsxs19("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
|
|
4874
|
+
/* @__PURE__ */ jsx21(
|
|
4431
4875
|
"div",
|
|
4432
4876
|
{
|
|
4433
4877
|
style: { flex: 1, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" },
|
|
@@ -4439,26 +4883,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4439
4883
|
else if (dx > 50) goToPrev();
|
|
4440
4884
|
setTouchStartX(null);
|
|
4441
4885
|
},
|
|
4442
|
-
children: /* @__PURE__ */
|
|
4443
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
4444
|
-
/* @__PURE__ */
|
|
4445
|
-
/* @__PURE__ */
|
|
4886
|
+
children: /* @__PURE__ */ jsxs19("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: [
|
|
4887
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs19("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
4888
|
+
/* @__PURE__ */ jsx21("div", { style: { width: 36, height: 36, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
|
|
4889
|
+
/* @__PURE__ */ jsx21("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
|
|
4446
4890
|
] }),
|
|
4447
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
4448
|
-
/* @__PURE__ */
|
|
4449
|
-
/* @__PURE__ */
|
|
4450
|
-
/* @__PURE__ */
|
|
4891
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs19("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
4892
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
|
|
4893
|
+
/* @__PURE__ */ jsx21("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
|
|
4894
|
+
/* @__PURE__ */ jsx21("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" })
|
|
4451
4895
|
] }),
|
|
4452
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
4453
|
-
!currentResult && /* @__PURE__ */
|
|
4454
|
-
/* @__PURE__ */
|
|
4455
|
-
/* @__PURE__ */
|
|
4896
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx21("img", { src: currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
|
|
4897
|
+
!currentResult && /* @__PURE__ */ jsxs19("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
|
|
4898
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
|
|
4899
|
+
/* @__PURE__ */ jsx21("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
|
|
4456
4900
|
] }),
|
|
4457
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
4458
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
4459
|
-
/* @__PURE__ */
|
|
4460
|
-
/* @__PURE__ */
|
|
4461
|
-
/* @__PURE__ */
|
|
4901
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "fullscreen" }) }),
|
|
4902
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs19(Fragment9, { children: [
|
|
4903
|
+
/* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_left" }) }),
|
|
4904
|
+
/* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_right" }) }),
|
|
4905
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
4462
4906
|
currentIndex + 1,
|
|
4463
4907
|
" / ",
|
|
4464
4908
|
history.length
|
|
@@ -4467,42 +4911,42 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4467
4911
|
] })
|
|
4468
4912
|
}
|
|
4469
4913
|
),
|
|
4470
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
4471
|
-
/* @__PURE__ */
|
|
4472
|
-
/* @__PURE__ */
|
|
4473
|
-
/* @__PURE__ */
|
|
4914
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs19("div", { style: { padding: "0 16px 16px", display: "flex", gap: 8, flexShrink: 0 }, children: [
|
|
4915
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
4916
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
|
|
4917
|
+
/* @__PURE__ */ jsx21("span", { children: "Prompt" })
|
|
4474
4918
|
] }),
|
|
4475
|
-
/* @__PURE__ */
|
|
4476
|
-
/* @__PURE__ */
|
|
4477
|
-
/* @__PURE__ */
|
|
4919
|
+
/* @__PURE__ */ jsxs19("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "none", background: "rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.8)", fontSize: 11, fontWeight: "bold", cursor: "pointer", fontFamily: "inherit" }, children: [
|
|
4920
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
|
|
4921
|
+
/* @__PURE__ */ jsx21("span", { children: "Referenz" })
|
|
4478
4922
|
] }),
|
|
4479
|
-
/* @__PURE__ */
|
|
4480
|
-
/* @__PURE__ */
|
|
4481
|
-
/* @__PURE__ */
|
|
4923
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
4924
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "download" }),
|
|
4925
|
+
/* @__PURE__ */ jsx21("span", { children: "Laden" })
|
|
4482
4926
|
] })
|
|
4483
4927
|
] })
|
|
4484
4928
|
] })
|
|
4485
4929
|
] }) });
|
|
4486
4930
|
}
|
|
4487
|
-
return /* @__PURE__ */
|
|
4488
|
-
/* @__PURE__ */
|
|
4489
|
-
/* @__PURE__ */
|
|
4490
|
-
/* @__PURE__ */
|
|
4491
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
4492
|
-
workspaceTags && /* @__PURE__ */
|
|
4493
|
-
/* @__PURE__ */
|
|
4931
|
+
return /* @__PURE__ */ jsxs19("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", style: hcStyle, children: [
|
|
4932
|
+
/* @__PURE__ */ jsx21("div", { className: "absolute top-2 right-2 z-50", children: /* @__PURE__ */ jsx21("button", { onClick: () => setShowStart(true), className: "text-white/10 hover:text-white/30 transition-colors text-[10px]", children: "\u21C4" }) }),
|
|
4933
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
4934
|
+
/* @__PURE__ */ jsxs19("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
|
|
4935
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 gap-1", children: [
|
|
4936
|
+
workspaceTags && /* @__PURE__ */ jsxs19("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: [
|
|
4937
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
|
|
4494
4938
|
"Prompt"
|
|
4495
4939
|
] }),
|
|
4496
|
-
/* @__PURE__ */
|
|
4497
|
-
/* @__PURE__ */
|
|
4940
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
4941
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
|
|
4498
4942
|
"Hierarchie"
|
|
4499
4943
|
] }),
|
|
4500
|
-
workspaceTags && /* @__PURE__ */
|
|
4944
|
+
workspaceTags && /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
4501
4945
|
] }),
|
|
4502
|
-
/* @__PURE__ */
|
|
4946
|
+
/* @__PURE__ */ jsx21("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" })
|
|
4503
4947
|
] }),
|
|
4504
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
4505
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
4948
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs19("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
4949
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx21(
|
|
4506
4950
|
TagManagerPanel,
|
|
4507
4951
|
{
|
|
4508
4952
|
workspaceTags,
|
|
@@ -4513,11 +4957,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4513
4957
|
onTagMove: handleTagMove
|
|
4514
4958
|
}
|
|
4515
4959
|
),
|
|
4516
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
4517
|
-
/* @__PURE__ */
|
|
4518
|
-
/* @__PURE__ */
|
|
4960
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs19("div", { children: [
|
|
4961
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
4962
|
+
/* @__PURE__ */ jsx21("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
4519
4963
|
] }) }),
|
|
4520
|
-
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */
|
|
4964
|
+
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx21(
|
|
4521
4965
|
ListView,
|
|
4522
4966
|
{
|
|
4523
4967
|
nodes,
|
|
@@ -4542,18 +4986,18 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4542
4986
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
4543
4987
|
}
|
|
4544
4988
|
) }),
|
|
4545
|
-
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */
|
|
4989
|
+
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ jsx21(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => handleGenerateImage(prompt), onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage })
|
|
4546
4990
|
] })
|
|
4547
4991
|
] }),
|
|
4548
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
4549
|
-
/* @__PURE__ */
|
|
4550
|
-
/* @__PURE__ */
|
|
4551
|
-
/* @__PURE__ */
|
|
4552
|
-
/* @__PURE__ */
|
|
4553
|
-
/* @__PURE__ */
|
|
4992
|
+
!isLeftCollapsed && /* @__PURE__ */ jsx21("div", { onMouseDown: startLeftResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
4993
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
|
|
4994
|
+
/* @__PURE__ */ jsxs19("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
|
|
4995
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1.5", children: [
|
|
4996
|
+
/* @__PURE__ */ jsx21(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
4997
|
+
/* @__PURE__ */ jsx21(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" }] })
|
|
4554
4998
|
] }),
|
|
4555
|
-
/* @__PURE__ */
|
|
4556
|
-
/* @__PURE__ */
|
|
4999
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 mx-auto", children: [
|
|
5000
|
+
/* @__PURE__ */ jsx21(
|
|
4557
5001
|
"button",
|
|
4558
5002
|
{
|
|
4559
5003
|
onClick: () => setMiddlePanel("stage"),
|
|
@@ -4561,7 +5005,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4561
5005
|
children: "Stage"
|
|
4562
5006
|
}
|
|
4563
5007
|
),
|
|
4564
|
-
/* @__PURE__ */
|
|
5008
|
+
/* @__PURE__ */ jsx21(
|
|
4565
5009
|
"button",
|
|
4566
5010
|
{
|
|
4567
5011
|
onClick: () => setMiddlePanel("labs"),
|
|
@@ -4570,68 +5014,68 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4570
5014
|
}
|
|
4571
5015
|
)
|
|
4572
5016
|
] }),
|
|
4573
|
-
/* @__PURE__ */
|
|
4574
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
4575
|
-
/* @__PURE__ */
|
|
4576
|
-
/* @__PURE__ */
|
|
4577
|
-
/* @__PURE__ */
|
|
4578
|
-
] }) : /* @__PURE__ */
|
|
4579
|
-
/* @__PURE__ */
|
|
4580
|
-
/* @__PURE__ */
|
|
5017
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
|
|
5018
|
+
activeReferenceThumbnail ? /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden", style: { height: 28 }, children: [
|
|
5019
|
+
/* @__PURE__ */ jsx21("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
5020
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
5021
|
+
/* @__PURE__ */ jsx21("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 hover:text-white/80 transition-colors", children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5022
|
+
] }) : /* @__PURE__ */ jsxs19("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: [
|
|
5023
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
|
|
5024
|
+
/* @__PURE__ */ jsx21("span", { children: "Ref" })
|
|
4581
5025
|
] }),
|
|
4582
|
-
/* @__PURE__ */
|
|
4583
|
-
/* @__PURE__ */
|
|
5026
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
|
|
5027
|
+
/* @__PURE__ */ jsx21(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
|
|
4584
5028
|
] })
|
|
4585
5029
|
] }),
|
|
4586
|
-
/* @__PURE__ */
|
|
4587
|
-
!isPromptCollapsed && /* @__PURE__ */
|
|
4588
|
-
/* @__PURE__ */
|
|
4589
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
5030
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
|
|
5031
|
+
!isPromptCollapsed && /* @__PURE__ */ jsx21("div", { className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ jsxs19("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
5032
|
+
/* @__PURE__ */ jsx21("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..." }),
|
|
5033
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
4590
5034
|
] }) }),
|
|
4591
|
-
middlePanel === "labs" ? /* @__PURE__ */
|
|
5035
|
+
middlePanel === "labs" ? /* @__PURE__ */ jsx21("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx21(LabsTab, { services: labServices, onResult: (item) => {
|
|
4592
5036
|
const frame = item.frames[0];
|
|
4593
5037
|
if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
|
|
4594
|
-
} }) }) : /* @__PURE__ */
|
|
4595
|
-
isGenerating && currentResult?.status === "done" && /* @__PURE__ */
|
|
4596
|
-
/* @__PURE__ */
|
|
4597
|
-
/* @__PURE__ */
|
|
5038
|
+
} }) }) : /* @__PURE__ */ jsx21("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ jsxs19("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: [
|
|
5039
|
+
isGenerating && currentResult?.status === "done" && /* @__PURE__ */ jsxs19("div", { className: "absolute top-6 right-6 z-30 bg-black/60 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 flex items-center gap-3", children: [
|
|
5040
|
+
/* @__PURE__ */ jsx21("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
|
|
5041
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
|
|
4598
5042
|
] }),
|
|
4599
|
-
currentResult ? currentResult.status === "processing" ? /* @__PURE__ */
|
|
4600
|
-
/* @__PURE__ */
|
|
4601
|
-
/* @__PURE__ */
|
|
4602
|
-
] }) : currentResult.status === "error" ? /* @__PURE__ */
|
|
4603
|
-
/* @__PURE__ */
|
|
4604
|
-
/* @__PURE__ */
|
|
4605
|
-
/* @__PURE__ */
|
|
4606
|
-
/* @__PURE__ */
|
|
5043
|
+
currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-4", children: [
|
|
5044
|
+
/* @__PURE__ */ jsx21("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
|
|
5045
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
5046
|
+
] }) : currentResult.status === "error" ? /* @__PURE__ */ jsxs19("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
|
|
5047
|
+
/* @__PURE__ */ jsx21("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
|
|
5048
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2", children: [
|
|
5049
|
+
/* @__PURE__ */ jsx21("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
|
|
5050
|
+
/* @__PURE__ */ jsx21("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
|
|
4607
5051
|
] }),
|
|
4608
|
-
/* @__PURE__ */
|
|
4609
|
-
] }) : /* @__PURE__ */
|
|
4610
|
-
/* @__PURE__ */
|
|
4611
|
-
/* @__PURE__ */
|
|
4612
|
-
/* @__PURE__ */
|
|
4613
|
-
/* @__PURE__ */
|
|
4614
|
-
/* @__PURE__ */
|
|
5052
|
+
/* @__PURE__ */ jsx21(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
|
|
5053
|
+
] }) : /* @__PURE__ */ jsxs19("div", { className: "h-full w-full relative flex items-center justify-center", children: [
|
|
5054
|
+
/* @__PURE__ */ jsx21("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
|
|
5055
|
+
/* @__PURE__ */ jsxs19("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: [
|
|
5056
|
+
/* @__PURE__ */ jsx21(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
|
|
5057
|
+
/* @__PURE__ */ jsx21(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
|
|
5058
|
+
/* @__PURE__ */ jsx21(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
|
|
4615
5059
|
] })
|
|
4616
|
-
] }) : /* @__PURE__ */
|
|
4617
|
-
/* @__PURE__ */
|
|
4618
|
-
/* @__PURE__ */
|
|
5060
|
+
] }) : /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
5061
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
|
|
5062
|
+
/* @__PURE__ */ jsx21("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
4619
5063
|
] })
|
|
4620
5064
|
] }) })
|
|
4621
5065
|
] })
|
|
4622
5066
|
] }),
|
|
4623
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
4624
|
-
/* @__PURE__ */
|
|
4625
|
-
/* @__PURE__ */
|
|
4626
|
-
/* @__PURE__ */
|
|
5067
|
+
!isRightCollapsed && /* @__PURE__ */ jsx21("div", { onMouseDown: startRightResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
5068
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", style: { width: isRightCollapsed ? 60 : rightPanelWidth, transition: "none" }, children: [
|
|
5069
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
|
|
5070
|
+
/* @__PURE__ */ jsx21("div", { className: "flex flex-1", children: ["history", "gallery", "inspect", "setup", "sync", "tags"].map((tab) => /* @__PURE__ */ jsx21("button", { onClick: () => {
|
|
4627
5071
|
setActiveTab(tab);
|
|
4628
5072
|
setIsRightCollapsed(false);
|
|
4629
|
-
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */
|
|
4630
|
-
hfToken && /* @__PURE__ */
|
|
4631
|
-
/* @__PURE__ */
|
|
5073
|
+
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx21("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)) }),
|
|
5074
|
+
hfToken && /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
|
|
5075
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
|
|
4632
5076
|
] }),
|
|
4633
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
4634
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5077
|
+
!isRightCollapsed && /* @__PURE__ */ jsxs19("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5078
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx21(
|
|
4635
5079
|
TagManagerPanel,
|
|
4636
5080
|
{
|
|
4637
5081
|
workspaceTags,
|
|
@@ -4642,12 +5086,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4642
5086
|
onTagMove: handleTagMove
|
|
4643
5087
|
}
|
|
4644
5088
|
),
|
|
4645
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
4646
|
-
/* @__PURE__ */
|
|
4647
|
-
/* @__PURE__ */
|
|
5089
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs19("div", { children: [
|
|
5090
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
5091
|
+
/* @__PURE__ */ jsx21("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
4648
5092
|
] }) }),
|
|
4649
|
-
activeTab === "history" && /* @__PURE__ */
|
|
4650
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
5093
|
+
activeTab === "history" && /* @__PURE__ */ jsx21(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
|
|
5094
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx21(
|
|
4651
5095
|
MediaLibrary,
|
|
4652
5096
|
{
|
|
4653
5097
|
items: galleryItems,
|
|
@@ -4661,9 +5105,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4661
5105
|
onGenerateReference: (item) => handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true })
|
|
4662
5106
|
}
|
|
4663
5107
|
),
|
|
4664
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
4665
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
4666
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
5108
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx21(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
|
|
5109
|
+
activeTab === "setup" && /* @__PURE__ */ jsx21(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
5110
|
+
activeTab === "sync" && /* @__PURE__ */ jsx21(
|
|
4667
5111
|
ProjectSyncTab,
|
|
4668
5112
|
{
|
|
4669
5113
|
topSlot: syncTopSlot,
|
|
@@ -4693,8 +5137,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4693
5137
|
}
|
|
4694
5138
|
|
|
4695
5139
|
// src/components/FaApp.tsx
|
|
4696
|
-
import { useState as
|
|
4697
|
-
import { jsx as
|
|
5140
|
+
import { useState as useState17, useEffect as useEffect7 } from "react";
|
|
5141
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
4698
5142
|
function FaApp({
|
|
4699
5143
|
onGenerateImage,
|
|
4700
5144
|
onGeneratePrompt,
|
|
@@ -4713,7 +5157,7 @@ function FaApp({
|
|
|
4713
5157
|
onServerDelete,
|
|
4714
5158
|
buildInfo
|
|
4715
5159
|
}) {
|
|
4716
|
-
const [hfNamespace, setHfNamespace] =
|
|
5160
|
+
const [hfNamespace, setHfNamespace] = useState17(void 0);
|
|
4717
5161
|
useEffect7(() => {
|
|
4718
5162
|
if (!serverBaseUrl) return;
|
|
4719
5163
|
fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
|
|
@@ -4725,7 +5169,7 @@ function FaApp({
|
|
|
4725
5169
|
const result = await onGeneratePrompt(text, options);
|
|
4726
5170
|
return result.text;
|
|
4727
5171
|
};
|
|
4728
|
-
return /* @__PURE__ */
|
|
5172
|
+
return /* @__PURE__ */ jsx22(
|
|
4729
5173
|
AvatarArchitectApp,
|
|
4730
5174
|
{
|
|
4731
5175
|
onGenerateImage,
|
|
@@ -4745,7 +5189,7 @@ function FaApp({
|
|
|
4745
5189
|
}
|
|
4746
5190
|
|
|
4747
5191
|
// src/index.ts
|
|
4748
|
-
var LIB_VERSION = "2.0.
|
|
5192
|
+
var LIB_VERSION = "2.0.13";
|
|
4749
5193
|
export {
|
|
4750
5194
|
AvatarArchitectApp,
|
|
4751
5195
|
CollapsibleCard,
|