@rslsp1/fa-app-tools 2.0.61 → 2.0.62
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 +1001 -861
- package/dist/index.mjs +970 -830
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -860,7 +860,7 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
|
|
|
860
860
|
}
|
|
861
861
|
|
|
862
862
|
// src/components/AvatarArchitectApp.tsx
|
|
863
|
-
import { useState as
|
|
863
|
+
import { useState as useState19, useCallback as useCallback3, useMemo as useMemo2, useEffect as useEffect7, useRef as useRef8 } from "react";
|
|
864
864
|
|
|
865
865
|
// src/components/PromptTab.tsx
|
|
866
866
|
import { useRef as useRef4, useState as useState5 } from "react";
|
|
@@ -2160,10 +2160,10 @@ function useHFState(token, namespace) {
|
|
|
2160
2160
|
}
|
|
2161
2161
|
|
|
2162
2162
|
// src/components/labs/LabsTab.tsx
|
|
2163
|
-
import { useState as
|
|
2163
|
+
import { useState as useState15 } from "react";
|
|
2164
2164
|
|
|
2165
2165
|
// src/components/labs/LabRemix.tsx
|
|
2166
|
-
import { useState as
|
|
2166
|
+
import { useState as useState10 } from "react";
|
|
2167
2167
|
|
|
2168
2168
|
// src/components/labs/LabImagePicker.tsx
|
|
2169
2169
|
import { useState as useState8 } from "react";
|
|
@@ -2275,16 +2275,120 @@ var LabImagePicker = ({
|
|
|
2275
2275
|
] });
|
|
2276
2276
|
};
|
|
2277
2277
|
|
|
2278
|
+
// src/components/GenerationControls.tsx
|
|
2279
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
2280
|
+
var ASPECT_OPTIONS = [
|
|
2281
|
+
{ label: "1:1", value: "1:1" },
|
|
2282
|
+
{ label: "16:9", value: "16:9" },
|
|
2283
|
+
{ label: "9:16", value: "9:16" }
|
|
2284
|
+
];
|
|
2285
|
+
var MODEL_OPTIONS = [
|
|
2286
|
+
{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" },
|
|
2287
|
+
{ value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" },
|
|
2288
|
+
{ value: "Imagen 4", label: "Imagen 4" }
|
|
2289
|
+
];
|
|
2290
|
+
var COUNT_OPTIONS = [
|
|
2291
|
+
{ label: "1 Bild", value: "1" },
|
|
2292
|
+
{ label: "2 Bilder", value: "2" },
|
|
2293
|
+
{ label: "4 Bilder", value: "4" },
|
|
2294
|
+
{ label: "8 Bilder", value: "8" }
|
|
2295
|
+
];
|
|
2296
|
+
var GenerationControls = ({
|
|
2297
|
+
aspectRatio,
|
|
2298
|
+
onAspectRatioChange,
|
|
2299
|
+
model,
|
|
2300
|
+
onModelChange,
|
|
2301
|
+
imageCount,
|
|
2302
|
+
onImageCountChange,
|
|
2303
|
+
runningCount = 0,
|
|
2304
|
+
className
|
|
2305
|
+
}) => /* @__PURE__ */ jsxs12("div", { className: `flex items-center gap-2 flex-wrap ${className || ""}`, children: [
|
|
2306
|
+
/* @__PURE__ */ jsx14(CompactDropdown, { value: aspectRatio, onChange: onAspectRatioChange, options: ASPECT_OPTIONS }),
|
|
2307
|
+
/* @__PURE__ */ jsx14(CompactDropdown, { value: model, onChange: onModelChange, options: MODEL_OPTIONS }),
|
|
2308
|
+
imageCount !== void 0 && onImageCountChange && /* @__PURE__ */ jsx14(
|
|
2309
|
+
CompactDropdown,
|
|
2310
|
+
{
|
|
2311
|
+
value: String(imageCount),
|
|
2312
|
+
displayValue: `${imageCount}\xD7`,
|
|
2313
|
+
onChange: onImageCountChange,
|
|
2314
|
+
options: COUNT_OPTIONS
|
|
2315
|
+
}
|
|
2316
|
+
),
|
|
2317
|
+
runningCount > 0 && /* @__PURE__ */ jsxs12(
|
|
2318
|
+
"div",
|
|
2319
|
+
{
|
|
2320
|
+
className: "flex items-center gap-1 rounded-full bg-sky-500/15 border border-sky-400/30 px-2 shrink-0",
|
|
2321
|
+
style: { height: 24 },
|
|
2322
|
+
title: `${runningCount} Generierung${runningCount === 1 ? "" : "en"} l\xE4uft`,
|
|
2323
|
+
children: [
|
|
2324
|
+
/* @__PURE__ */ jsx14("span", { className: "material-symbols-outlined text-sky-300", style: { fontSize: 14, lineHeight: 1 }, children: "autorenew" }),
|
|
2325
|
+
/* @__PURE__ */ jsx14("span", { className: "text-[11px] font-bold text-sky-300 tabular-nums", children: runningCount })
|
|
2326
|
+
]
|
|
2327
|
+
}
|
|
2328
|
+
)
|
|
2329
|
+
] });
|
|
2330
|
+
|
|
2331
|
+
// src/hooks/useGenerationSettings.ts
|
|
2332
|
+
import { useState as useState9 } from "react";
|
|
2333
|
+
function useGenerationSettings() {
|
|
2334
|
+
const [aspectRatio, setAspectRatio] = useState9(() => {
|
|
2335
|
+
try {
|
|
2336
|
+
return localStorage.getItem("aa-lab-aspect") || "1:1";
|
|
2337
|
+
} catch {
|
|
2338
|
+
return "1:1";
|
|
2339
|
+
}
|
|
2340
|
+
});
|
|
2341
|
+
const [model, setModel] = useState9(() => {
|
|
2342
|
+
try {
|
|
2343
|
+
return localStorage.getItem("aa-lab-model") || "\u{1F34C} Nano Banana Pro";
|
|
2344
|
+
} catch {
|
|
2345
|
+
return "\u{1F34C} Nano Banana Pro";
|
|
2346
|
+
}
|
|
2347
|
+
});
|
|
2348
|
+
const [imageCount, setImageCount] = useState9(() => {
|
|
2349
|
+
try {
|
|
2350
|
+
const v = parseInt(localStorage.getItem("aa-image-count") || "", 10);
|
|
2351
|
+
return v >= 1 && v <= 8 ? v : 4;
|
|
2352
|
+
} catch {
|
|
2353
|
+
return 4;
|
|
2354
|
+
}
|
|
2355
|
+
});
|
|
2356
|
+
const updateAspectRatio = (v) => {
|
|
2357
|
+
setAspectRatio(v);
|
|
2358
|
+
try {
|
|
2359
|
+
localStorage.setItem("aa-lab-aspect", v);
|
|
2360
|
+
} catch {
|
|
2361
|
+
}
|
|
2362
|
+
};
|
|
2363
|
+
const updateModel = (v) => {
|
|
2364
|
+
setModel(v);
|
|
2365
|
+
try {
|
|
2366
|
+
localStorage.setItem("aa-lab-model", v);
|
|
2367
|
+
} catch {
|
|
2368
|
+
}
|
|
2369
|
+
};
|
|
2370
|
+
const updateImageCount = (v) => {
|
|
2371
|
+
const n = Math.max(1, Math.min(8, parseInt(v, 10) || 4));
|
|
2372
|
+
setImageCount(n);
|
|
2373
|
+
try {
|
|
2374
|
+
localStorage.setItem("aa-image-count", String(n));
|
|
2375
|
+
} catch {
|
|
2376
|
+
}
|
|
2377
|
+
};
|
|
2378
|
+
return { aspectRatio, model, imageCount, updateAspectRatio, updateModel, updateImageCount };
|
|
2379
|
+
}
|
|
2380
|
+
|
|
2278
2381
|
// src/components/labs/LabRemix.tsx
|
|
2279
|
-
import { Fragment as Fragment5, jsx as
|
|
2382
|
+
import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
2280
2383
|
var LabRemix = ({ services, onResult }) => {
|
|
2281
|
-
const [showPicker, setShowPicker] =
|
|
2282
|
-
const [selected, setSelected] =
|
|
2283
|
-
const [instruction, setInstruction] =
|
|
2284
|
-
const [generatedPrompt, setGeneratedPrompt] =
|
|
2285
|
-
const [
|
|
2286
|
-
const [isGeneratingPrompt, setIsGeneratingPrompt] =
|
|
2287
|
-
const [
|
|
2384
|
+
const [showPicker, setShowPicker] = useState10(false);
|
|
2385
|
+
const [selected, setSelected] = useState10(null);
|
|
2386
|
+
const [instruction, setInstruction] = useState10("");
|
|
2387
|
+
const [generatedPrompt, setGeneratedPrompt] = useState10("");
|
|
2388
|
+
const [resultImages, setResultImages] = useState10([]);
|
|
2389
|
+
const [isGeneratingPrompt, setIsGeneratingPrompt] = useState10(false);
|
|
2390
|
+
const [runningCount, setRunningCount] = useState10(0);
|
|
2391
|
+
const { aspectRatio, model, imageCount, updateAspectRatio, updateModel, updateImageCount } = useGenerationSettings();
|
|
2288
2392
|
const handleSelectImage = (item, frame) => {
|
|
2289
2393
|
services.onItemUsed(item);
|
|
2290
2394
|
setSelected({
|
|
@@ -2297,7 +2401,7 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2297
2401
|
roleForImage: ""
|
|
2298
2402
|
});
|
|
2299
2403
|
setGeneratedPrompt("");
|
|
2300
|
-
|
|
2404
|
+
setResultImages([]);
|
|
2301
2405
|
};
|
|
2302
2406
|
const handleGeneratePrompt = async () => {
|
|
2303
2407
|
if (!selected || !instruction.trim()) return;
|
|
@@ -2316,34 +2420,40 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2316
2420
|
setIsGeneratingPrompt(false);
|
|
2317
2421
|
}
|
|
2318
2422
|
};
|
|
2319
|
-
const
|
|
2423
|
+
const handleGenerateBatch = async () => {
|
|
2320
2424
|
if (!generatedPrompt) return;
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
|
|
2425
|
+
const count = Math.max(1, Math.min(8, imageCount));
|
|
2426
|
+
const refIds = buildReferenceImageMediaIds(selected ? [selected] : []);
|
|
2427
|
+
const options = {
|
|
2428
|
+
prompt: generatedPrompt,
|
|
2429
|
+
aspectRatio,
|
|
2430
|
+
modelDisplayName: model,
|
|
2431
|
+
...refIds.length ? { referenceImageMediaIds: refIds } : {}
|
|
2432
|
+
};
|
|
2433
|
+
setRunningCount((c) => c + count);
|
|
2434
|
+
const results = await Promise.allSettled(
|
|
2435
|
+
Array.from({ length: count }, () => services.generateImage(options))
|
|
2436
|
+
);
|
|
2437
|
+
setRunningCount((c) => c - count);
|
|
2438
|
+
for (const r of results) {
|
|
2439
|
+
if (r.status === "fulfilled") {
|
|
2440
|
+
const { base64, mediaId } = r.value;
|
|
2441
|
+
const newBase64 = `data:image/png;base64,${base64}`;
|
|
2442
|
+
setResultImages((prev) => [newBase64, ...prev]);
|
|
2443
|
+
const frameId = crypto.randomUUID();
|
|
2444
|
+
const newItem = {
|
|
2445
|
+
id: frameId,
|
|
2446
|
+
prompt: generatedPrompt,
|
|
2447
|
+
tags: selected?.item.tags || [],
|
|
2448
|
+
frames: [{ id: frameId, base64: newBase64, mediaId, source: "generated" }]
|
|
2449
|
+
};
|
|
2450
|
+
services.saveResult?.(newItem);
|
|
2451
|
+
onResult?.(newItem);
|
|
2452
|
+
}
|
|
2343
2453
|
}
|
|
2344
2454
|
};
|
|
2345
2455
|
if (showPicker) {
|
|
2346
|
-
return /* @__PURE__ */
|
|
2456
|
+
return /* @__PURE__ */ jsx15(
|
|
2347
2457
|
LabImagePicker,
|
|
2348
2458
|
{
|
|
2349
2459
|
availableItems: services.availableItems,
|
|
@@ -2354,15 +2464,15 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2354
2464
|
}
|
|
2355
2465
|
);
|
|
2356
2466
|
}
|
|
2357
|
-
return /* @__PURE__ */
|
|
2358
|
-
/* @__PURE__ */
|
|
2359
|
-
/* @__PURE__ */
|
|
2360
|
-
selected ? /* @__PURE__ */
|
|
2361
|
-
/* @__PURE__ */
|
|
2362
|
-
/* @__PURE__ */
|
|
2363
|
-
/* @__PURE__ */
|
|
2364
|
-
/* @__PURE__ */
|
|
2365
|
-
/* @__PURE__ */
|
|
2467
|
+
return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3 p-4 overflow-y-auto dark-scrollbar", children: [
|
|
2468
|
+
/* @__PURE__ */ jsxs13("div", { children: [
|
|
2469
|
+
/* @__PURE__ */ jsx15("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40 mb-2", children: "Basis-Bild" }),
|
|
2470
|
+
selected ? /* @__PURE__ */ jsxs13("div", { className: "flex gap-3 p-3 rounded-xl border border-white/10 bg-white/5", children: [
|
|
2471
|
+
/* @__PURE__ */ jsx15("img", { src: selected.frame.base64, className: "w-16 h-16 object-cover rounded-lg shrink-0" }),
|
|
2472
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0 flex flex-col gap-1.5", children: [
|
|
2473
|
+
/* @__PURE__ */ jsx15("p", { className: "text-[10px] text-white/60 leading-tight line-clamp-2", children: selected.item.prompt }),
|
|
2474
|
+
/* @__PURE__ */ jsxs13("label", { className: "flex items-center gap-2 text-[10px] text-white/50", children: [
|
|
2475
|
+
/* @__PURE__ */ jsx15(
|
|
2366
2476
|
"input",
|
|
2367
2477
|
{
|
|
2368
2478
|
type: "checkbox",
|
|
@@ -2372,8 +2482,8 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2372
2482
|
),
|
|
2373
2483
|
"Bild an KI (Prompt)"
|
|
2374
2484
|
] }),
|
|
2375
|
-
/* @__PURE__ */
|
|
2376
|
-
/* @__PURE__ */
|
|
2485
|
+
/* @__PURE__ */ jsxs13("label", { className: "flex items-center gap-2 text-[10px] text-white/50", children: [
|
|
2486
|
+
/* @__PURE__ */ jsx15(
|
|
2377
2487
|
"input",
|
|
2378
2488
|
{
|
|
2379
2489
|
type: "checkbox",
|
|
@@ -2383,7 +2493,7 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2383
2493
|
),
|
|
2384
2494
|
"Bild als Referenz (Generierung)"
|
|
2385
2495
|
] }),
|
|
2386
|
-
/* @__PURE__ */
|
|
2496
|
+
/* @__PURE__ */ jsx15(
|
|
2387
2497
|
"input",
|
|
2388
2498
|
{
|
|
2389
2499
|
value: selected.roleForPrompt || "",
|
|
@@ -2393,22 +2503,22 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2393
2503
|
}
|
|
2394
2504
|
)
|
|
2395
2505
|
] }),
|
|
2396
|
-
/* @__PURE__ */
|
|
2397
|
-
] }) : /* @__PURE__ */
|
|
2506
|
+
/* @__PURE__ */ jsx15("button", { onClick: () => setShowPicker(true), className: "text-white/30 active:text-white self-start", children: /* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[18px]", children: "swap_horiz" }) })
|
|
2507
|
+
] }) : /* @__PURE__ */ jsxs13(
|
|
2398
2508
|
"button",
|
|
2399
2509
|
{
|
|
2400
2510
|
onClick: () => setShowPicker(true),
|
|
2401
2511
|
className: "w-full py-6 rounded-xl border border-dashed border-white/20 text-[11px] text-white/30 active:bg-white/5 flex items-center justify-center gap-2",
|
|
2402
2512
|
children: [
|
|
2403
|
-
/* @__PURE__ */
|
|
2513
|
+
/* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[20px]", children: "add_photo_alternate" }),
|
|
2404
2514
|
"Bild w\xE4hlen"
|
|
2405
2515
|
]
|
|
2406
2516
|
}
|
|
2407
2517
|
)
|
|
2408
2518
|
] }),
|
|
2409
|
-
/* @__PURE__ */
|
|
2410
|
-
/* @__PURE__ */
|
|
2411
|
-
/* @__PURE__ */
|
|
2519
|
+
/* @__PURE__ */ jsxs13("div", { children: [
|
|
2520
|
+
/* @__PURE__ */ jsx15("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40 mb-2", children: "Anweisung" }),
|
|
2521
|
+
/* @__PURE__ */ jsx15(
|
|
2412
2522
|
"textarea",
|
|
2413
2523
|
{
|
|
2414
2524
|
value: instruction,
|
|
@@ -2419,25 +2529,24 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2419
2529
|
}
|
|
2420
2530
|
)
|
|
2421
2531
|
] }),
|
|
2422
|
-
|
|
2423
|
-
/* @__PURE__ */ jsx14(
|
|
2532
|
+
/* @__PURE__ */ jsx15(
|
|
2424
2533
|
"button",
|
|
2425
2534
|
{
|
|
2426
2535
|
onClick: handleGeneratePrompt,
|
|
2427
2536
|
disabled: !selected || !instruction.trim() || isGeneratingPrompt,
|
|
2428
2537
|
className: "w-full py-3 rounded-xl bg-white/10 text-white font-bold text-[12px] uppercase tracking-wide disabled:opacity-30 active:bg-white/15 flex items-center justify-center gap-2",
|
|
2429
|
-
children: isGeneratingPrompt ? /* @__PURE__ */
|
|
2430
|
-
/* @__PURE__ */
|
|
2431
|
-
/* @__PURE__ */
|
|
2432
|
-
] }) : /* @__PURE__ */
|
|
2433
|
-
/* @__PURE__ */
|
|
2434
|
-
/* @__PURE__ */
|
|
2538
|
+
children: isGeneratingPrompt ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
|
|
2539
|
+
/* @__PURE__ */ jsx15("div", { className: "w-3 h-3 border-t border-white rounded-full animate-spin" }),
|
|
2540
|
+
/* @__PURE__ */ jsx15("span", { children: "Generiere Prompt..." })
|
|
2541
|
+
] }) : /* @__PURE__ */ jsxs13(Fragment5, { children: [
|
|
2542
|
+
/* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[16px]", children: "auto_fix_high" }),
|
|
2543
|
+
/* @__PURE__ */ jsx15("span", { children: "Prompt generieren" })
|
|
2435
2544
|
] })
|
|
2436
2545
|
}
|
|
2437
2546
|
),
|
|
2438
|
-
generatedPrompt && /* @__PURE__ */
|
|
2439
|
-
/* @__PURE__ */
|
|
2440
|
-
/* @__PURE__ */
|
|
2547
|
+
generatedPrompt && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2", children: [
|
|
2548
|
+
/* @__PURE__ */ jsx15("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40", children: "Generierter Prompt" }),
|
|
2549
|
+
/* @__PURE__ */ jsx15(
|
|
2441
2550
|
"textarea",
|
|
2442
2551
|
{
|
|
2443
2552
|
value: generatedPrompt,
|
|
@@ -2446,37 +2555,46 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2446
2555
|
rows: 4
|
|
2447
2556
|
}
|
|
2448
2557
|
),
|
|
2449
|
-
/* @__PURE__ */
|
|
2558
|
+
/* @__PURE__ */ jsx15(
|
|
2559
|
+
GenerationControls,
|
|
2560
|
+
{
|
|
2561
|
+
aspectRatio,
|
|
2562
|
+
onAspectRatioChange: updateAspectRatio,
|
|
2563
|
+
model,
|
|
2564
|
+
onModelChange: updateModel,
|
|
2565
|
+
imageCount,
|
|
2566
|
+
onImageCountChange: updateImageCount,
|
|
2567
|
+
runningCount
|
|
2568
|
+
}
|
|
2569
|
+
),
|
|
2570
|
+
/* @__PURE__ */ jsxs13(
|
|
2450
2571
|
"button",
|
|
2451
2572
|
{
|
|
2452
|
-
onClick:
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
/* @__PURE__ */
|
|
2457
|
-
|
|
2458
|
-
] }) : /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
2459
|
-
/* @__PURE__ */ jsx14("span", { className: "material-symbols-outlined text-[16px]", children: "image" }),
|
|
2460
|
-
/* @__PURE__ */ jsx14("span", { children: "Bild generieren" })
|
|
2461
|
-
] })
|
|
2573
|
+
onClick: handleGenerateBatch,
|
|
2574
|
+
className: "w-full py-3 rounded-xl bg-blue-600/80 text-white font-bold text-[12px] uppercase tracking-wide active:bg-blue-600 flex items-center justify-center gap-2",
|
|
2575
|
+
children: [
|
|
2576
|
+
/* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[16px]", children: "image" }),
|
|
2577
|
+
/* @__PURE__ */ jsx15("span", { children: "Bilder generieren" })
|
|
2578
|
+
]
|
|
2462
2579
|
}
|
|
2463
2580
|
)
|
|
2464
2581
|
] }),
|
|
2465
|
-
|
|
2582
|
+
resultImages.length > 0 && /* @__PURE__ */ jsx15("div", { className: `grid gap-2 ${resultImages.length > 1 ? "grid-cols-2" : "grid-cols-1"}`, children: resultImages.map((src, i) => /* @__PURE__ */ jsx15("div", { className: "rounded-xl overflow-hidden border border-white/10", children: /* @__PURE__ */ jsx15("img", { src, className: "w-full object-cover" }) }, i)) })
|
|
2466
2583
|
] });
|
|
2467
2584
|
};
|
|
2468
2585
|
|
|
2469
2586
|
// src/components/labs/LabBlend.tsx
|
|
2470
|
-
import { useState as
|
|
2471
|
-
import { Fragment as Fragment6, jsx as
|
|
2587
|
+
import { useState as useState11 } from "react";
|
|
2588
|
+
import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
2472
2589
|
var LabBlend = ({ services, onResult }) => {
|
|
2473
|
-
const [showPickerFor, setShowPickerFor] =
|
|
2474
|
-
const [selectedImages, setSelectedImages] =
|
|
2475
|
-
const [instruction, setInstruction] =
|
|
2476
|
-
const [generatedPrompt, setGeneratedPrompt] =
|
|
2477
|
-
const [
|
|
2478
|
-
const [isGeneratingPrompt, setIsGeneratingPrompt] =
|
|
2479
|
-
const [
|
|
2590
|
+
const [showPickerFor, setShowPickerFor] = useState11(null);
|
|
2591
|
+
const [selectedImages, setSelectedImages] = useState11([]);
|
|
2592
|
+
const [instruction, setInstruction] = useState11("");
|
|
2593
|
+
const [generatedPrompt, setGeneratedPrompt] = useState11("");
|
|
2594
|
+
const [resultImages, setResultImages] = useState11([]);
|
|
2595
|
+
const [isGeneratingPrompt, setIsGeneratingPrompt] = useState11(false);
|
|
2596
|
+
const [runningCount, setRunningCount] = useState11(0);
|
|
2597
|
+
const { aspectRatio, model, imageCount, updateAspectRatio, updateModel, updateImageCount } = useGenerationSettings();
|
|
2480
2598
|
const handleSelectImage = (index, item, frame) => {
|
|
2481
2599
|
services.onItemUsed(item);
|
|
2482
2600
|
const newImg = {
|
|
@@ -2495,7 +2613,7 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2495
2613
|
});
|
|
2496
2614
|
setShowPickerFor(null);
|
|
2497
2615
|
setGeneratedPrompt("");
|
|
2498
|
-
|
|
2616
|
+
setResultImages([]);
|
|
2499
2617
|
};
|
|
2500
2618
|
const addSlot = () => setSelectedImages((prev) => [...prev, null]);
|
|
2501
2619
|
const removeSlot = (i) => setSelectedImages((prev) => prev.filter((_, idx) => idx !== i));
|
|
@@ -2513,35 +2631,41 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2513
2631
|
setIsGeneratingPrompt(false);
|
|
2514
2632
|
}
|
|
2515
2633
|
};
|
|
2516
|
-
const
|
|
2634
|
+
const handleGenerateBatch = async () => {
|
|
2517
2635
|
if (!generatedPrompt) return;
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
|
|
2539
|
-
|
|
2540
|
-
|
|
2636
|
+
const count = Math.max(1, Math.min(8, imageCount));
|
|
2637
|
+
const filled = selectedImages.filter(Boolean);
|
|
2638
|
+
const refIds = buildReferenceImageMediaIds(filled);
|
|
2639
|
+
const options = {
|
|
2640
|
+
prompt: generatedPrompt,
|
|
2641
|
+
aspectRatio,
|
|
2642
|
+
modelDisplayName: model,
|
|
2643
|
+
...refIds.length ? { referenceImageMediaIds: refIds } : {}
|
|
2644
|
+
};
|
|
2645
|
+
setRunningCount((c) => c + count);
|
|
2646
|
+
const results = await Promise.allSettled(
|
|
2647
|
+
Array.from({ length: count }, () => services.generateImage(options))
|
|
2648
|
+
);
|
|
2649
|
+
setRunningCount((c) => c - count);
|
|
2650
|
+
for (const r of results) {
|
|
2651
|
+
if (r.status === "fulfilled") {
|
|
2652
|
+
const { base64, mediaId } = r.value;
|
|
2653
|
+
const newBase64 = `data:image/png;base64,${base64}`;
|
|
2654
|
+
setResultImages((prev) => [newBase64, ...prev]);
|
|
2655
|
+
const frameId = crypto.randomUUID();
|
|
2656
|
+
const newItem = {
|
|
2657
|
+
id: frameId,
|
|
2658
|
+
prompt: generatedPrompt,
|
|
2659
|
+
tags: [],
|
|
2660
|
+
frames: [{ id: frameId, base64: newBase64, mediaId, source: "generated" }]
|
|
2661
|
+
};
|
|
2662
|
+
services.saveResult?.(newItem);
|
|
2663
|
+
onResult?.(newItem);
|
|
2664
|
+
}
|
|
2541
2665
|
}
|
|
2542
2666
|
};
|
|
2543
2667
|
if (showPickerFor !== null) {
|
|
2544
|
-
return /* @__PURE__ */
|
|
2668
|
+
return /* @__PURE__ */ jsx16(
|
|
2545
2669
|
LabImagePicker,
|
|
2546
2670
|
{
|
|
2547
2671
|
availableItems: services.availableItems,
|
|
@@ -2552,25 +2676,25 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2552
2676
|
}
|
|
2553
2677
|
);
|
|
2554
2678
|
}
|
|
2555
|
-
return /* @__PURE__ */
|
|
2556
|
-
/* @__PURE__ */
|
|
2557
|
-
selectedImages.map((img, i) => /* @__PURE__ */
|
|
2558
|
-
/* @__PURE__ */
|
|
2559
|
-
img ? /* @__PURE__ */
|
|
2560
|
-
/* @__PURE__ */
|
|
2561
|
-
/* @__PURE__ */
|
|
2562
|
-
/* @__PURE__ */
|
|
2563
|
-
/* @__PURE__ */
|
|
2564
|
-
/* @__PURE__ */
|
|
2565
|
-
/* @__PURE__ */
|
|
2679
|
+
return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-3 p-4 overflow-y-auto dark-scrollbar", children: [
|
|
2680
|
+
/* @__PURE__ */ jsx16("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40", children: "Bilder" }),
|
|
2681
|
+
selectedImages.map((img, i) => /* @__PURE__ */ jsxs14("div", { className: "flex gap-3 p-3 rounded-xl border border-white/10 bg-white/5", children: [
|
|
2682
|
+
/* @__PURE__ */ jsx16("span", { className: "text-[10px] font-bold text-white/40 w-6 shrink-0 pt-1", children: autoLabel(i) }),
|
|
2683
|
+
img ? /* @__PURE__ */ jsxs14(Fragment6, { children: [
|
|
2684
|
+
/* @__PURE__ */ jsx16("img", { src: img.frame.base64, className: "w-12 h-12 object-cover rounded-lg shrink-0", onClick: () => setShowPickerFor(i) }),
|
|
2685
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
|
|
2686
|
+
/* @__PURE__ */ jsx16("p", { className: "text-[10px] text-white/50 line-clamp-1", children: img.item.prompt }),
|
|
2687
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex gap-3", children: [
|
|
2688
|
+
/* @__PURE__ */ jsxs14("label", { className: "flex items-center gap-1 text-[10px] text-white/40", children: [
|
|
2689
|
+
/* @__PURE__ */ jsx16("input", { type: "checkbox", checked: img.sendToPromptAI, onChange: (e) => updateImg(i, { sendToPromptAI: e.target.checked }) }),
|
|
2566
2690
|
"KI-Prompt"
|
|
2567
2691
|
] }),
|
|
2568
|
-
/* @__PURE__ */
|
|
2569
|
-
/* @__PURE__ */
|
|
2692
|
+
/* @__PURE__ */ jsxs14("label", { className: "flex items-center gap-1 text-[10px] text-white/40", children: [
|
|
2693
|
+
/* @__PURE__ */ jsx16("input", { type: "checkbox", checked: img.sendToImageGen, onChange: (e) => updateImg(i, { sendToImageGen: e.target.checked }) }),
|
|
2570
2694
|
"Referenz"
|
|
2571
2695
|
] })
|
|
2572
2696
|
] }),
|
|
2573
|
-
/* @__PURE__ */
|
|
2697
|
+
/* @__PURE__ */ jsx16(
|
|
2574
2698
|
"input",
|
|
2575
2699
|
{
|
|
2576
2700
|
value: img.roleForPrompt || "",
|
|
@@ -2579,7 +2703,7 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2579
2703
|
className: "bg-black/30 border border-white/10 rounded px-2 py-0.5 text-[10px] text-white/60 outline-none"
|
|
2580
2704
|
}
|
|
2581
2705
|
),
|
|
2582
|
-
/* @__PURE__ */
|
|
2706
|
+
/* @__PURE__ */ jsx16(
|
|
2583
2707
|
"input",
|
|
2584
2708
|
{
|
|
2585
2709
|
value: img.roleForImage || "",
|
|
@@ -2589,23 +2713,23 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2589
2713
|
}
|
|
2590
2714
|
)
|
|
2591
2715
|
] })
|
|
2592
|
-
] }) : /* @__PURE__ */
|
|
2593
|
-
/* @__PURE__ */
|
|
2716
|
+
] }) : /* @__PURE__ */ jsx16("button", { onClick: () => setShowPickerFor(i), className: "flex-1 py-3 border border-dashed border-white/20 rounded-lg text-[10px] text-white/30 active:bg-white/5", children: "Bild w\xE4hlen" }),
|
|
2717
|
+
/* @__PURE__ */ jsx16("button", { onClick: () => removeSlot(i), className: "text-white/20 active:text-red-400 self-start", children: /* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[16px]", children: "close" }) })
|
|
2594
2718
|
] }, i)),
|
|
2595
|
-
/* @__PURE__ */
|
|
2719
|
+
/* @__PURE__ */ jsxs14(
|
|
2596
2720
|
"button",
|
|
2597
2721
|
{
|
|
2598
2722
|
onClick: addSlot,
|
|
2599
2723
|
className: "w-full py-2 border border-dashed border-white/10 rounded-xl text-[10px] text-white/30 active:bg-white/5 flex items-center justify-center gap-1",
|
|
2600
2724
|
children: [
|
|
2601
|
-
/* @__PURE__ */
|
|
2725
|
+
/* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[14px]", children: "add" }),
|
|
2602
2726
|
"Bild hinzuf\xFCgen"
|
|
2603
2727
|
]
|
|
2604
2728
|
}
|
|
2605
2729
|
),
|
|
2606
|
-
/* @__PURE__ */
|
|
2607
|
-
/* @__PURE__ */
|
|
2608
|
-
/* @__PURE__ */
|
|
2730
|
+
/* @__PURE__ */ jsxs14("div", { children: [
|
|
2731
|
+
/* @__PURE__ */ jsx16("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40 mb-2", children: "Blend-Anweisung" }),
|
|
2732
|
+
/* @__PURE__ */ jsx16(
|
|
2609
2733
|
"textarea",
|
|
2610
2734
|
{
|
|
2611
2735
|
value: instruction,
|
|
@@ -2616,24 +2740,24 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2616
2740
|
}
|
|
2617
2741
|
)
|
|
2618
2742
|
] }),
|
|
2619
|
-
/* @__PURE__ */
|
|
2743
|
+
/* @__PURE__ */ jsx16(
|
|
2620
2744
|
"button",
|
|
2621
2745
|
{
|
|
2622
2746
|
onClick: handleGeneratePrompt,
|
|
2623
2747
|
disabled: selectedImages.filter(Boolean).length < 2 || !instruction.trim() || isGeneratingPrompt,
|
|
2624
2748
|
className: "w-full py-3 rounded-xl bg-white/10 text-white font-bold text-[12px] uppercase tracking-wide disabled:opacity-30 active:bg-white/15 flex items-center justify-center gap-2",
|
|
2625
|
-
children: isGeneratingPrompt ? /* @__PURE__ */
|
|
2626
|
-
/* @__PURE__ */
|
|
2627
|
-
/* @__PURE__ */
|
|
2628
|
-
] }) : /* @__PURE__ */
|
|
2629
|
-
/* @__PURE__ */
|
|
2630
|
-
/* @__PURE__ */
|
|
2749
|
+
children: isGeneratingPrompt ? /* @__PURE__ */ jsxs14(Fragment6, { children: [
|
|
2750
|
+
/* @__PURE__ */ jsx16("div", { className: "w-3 h-3 border-t border-white rounded-full animate-spin" }),
|
|
2751
|
+
/* @__PURE__ */ jsx16("span", { children: "Blend l\xE4uft..." })
|
|
2752
|
+
] }) : /* @__PURE__ */ jsxs14(Fragment6, { children: [
|
|
2753
|
+
/* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[16px]", children: "merge" }),
|
|
2754
|
+
/* @__PURE__ */ jsx16("span", { children: "Prompts blenden" })
|
|
2631
2755
|
] })
|
|
2632
2756
|
}
|
|
2633
2757
|
),
|
|
2634
|
-
generatedPrompt && /* @__PURE__ */
|
|
2635
|
-
/* @__PURE__ */
|
|
2636
|
-
/* @__PURE__ */
|
|
2758
|
+
generatedPrompt && /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-2", children: [
|
|
2759
|
+
/* @__PURE__ */ jsx16("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40", children: "Blend-Prompt" }),
|
|
2760
|
+
/* @__PURE__ */ jsx16(
|
|
2637
2761
|
"textarea",
|
|
2638
2762
|
{
|
|
2639
2763
|
value: generatedPrompt,
|
|
@@ -2642,38 +2766,46 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2642
2766
|
rows: 4
|
|
2643
2767
|
}
|
|
2644
2768
|
),
|
|
2645
|
-
/* @__PURE__ */
|
|
2769
|
+
/* @__PURE__ */ jsx16(
|
|
2770
|
+
GenerationControls,
|
|
2771
|
+
{
|
|
2772
|
+
aspectRatio,
|
|
2773
|
+
onAspectRatioChange: updateAspectRatio,
|
|
2774
|
+
model,
|
|
2775
|
+
onModelChange: updateModel,
|
|
2776
|
+
imageCount,
|
|
2777
|
+
onImageCountChange: updateImageCount,
|
|
2778
|
+
runningCount
|
|
2779
|
+
}
|
|
2780
|
+
),
|
|
2781
|
+
/* @__PURE__ */ jsxs14(
|
|
2646
2782
|
"button",
|
|
2647
2783
|
{
|
|
2648
|
-
onClick:
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
/* @__PURE__ */
|
|
2653
|
-
|
|
2654
|
-
] }) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
|
|
2655
|
-
/* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[16px]", children: "image" }),
|
|
2656
|
-
/* @__PURE__ */ jsx15("span", { children: "Bild generieren" })
|
|
2657
|
-
] })
|
|
2784
|
+
onClick: handleGenerateBatch,
|
|
2785
|
+
className: "w-full py-3 rounded-xl bg-blue-600/80 text-white font-bold text-[12px] uppercase tracking-wide active:bg-blue-600 flex items-center justify-center gap-2",
|
|
2786
|
+
children: [
|
|
2787
|
+
/* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[16px]", children: "image" }),
|
|
2788
|
+
/* @__PURE__ */ jsx16("span", { children: "Bilder generieren" })
|
|
2789
|
+
]
|
|
2658
2790
|
}
|
|
2659
2791
|
)
|
|
2660
2792
|
] }),
|
|
2661
|
-
|
|
2793
|
+
resultImages.length > 0 && /* @__PURE__ */ jsx16("div", { className: `grid gap-2 ${resultImages.length > 1 ? "grid-cols-2" : "grid-cols-1"}`, children: resultImages.map((src, i) => /* @__PURE__ */ jsx16("div", { className: "rounded-xl overflow-hidden border border-white/10", children: /* @__PURE__ */ jsx16("img", { src, className: "w-full object-cover" }) }, i)) })
|
|
2662
2794
|
] });
|
|
2663
2795
|
};
|
|
2664
2796
|
|
|
2665
2797
|
// src/components/labs/LabCompare.tsx
|
|
2666
|
-
import { useState as
|
|
2667
|
-
import { Fragment as Fragment7, jsx as
|
|
2798
|
+
import { useState as useState12 } from "react";
|
|
2799
|
+
import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2668
2800
|
var LabCompare = ({ services, onResult }) => {
|
|
2669
|
-
const [showPickerFor, setShowPickerFor] =
|
|
2670
|
-
const [selectedImages, setSelectedImages] =
|
|
2671
|
-
const [instruction, setInstruction] =
|
|
2672
|
-
const [analysis, setAnalysis] =
|
|
2673
|
-
const [generatedPrompt, setGeneratedPrompt] =
|
|
2674
|
-
const [resultImage, setResultImage] =
|
|
2675
|
-
const [isAnalyzing, setIsAnalyzing] =
|
|
2676
|
-
const [isGeneratingImage, setIsGeneratingImage] =
|
|
2801
|
+
const [showPickerFor, setShowPickerFor] = useState12(null);
|
|
2802
|
+
const [selectedImages, setSelectedImages] = useState12([]);
|
|
2803
|
+
const [instruction, setInstruction] = useState12("");
|
|
2804
|
+
const [analysis, setAnalysis] = useState12("");
|
|
2805
|
+
const [generatedPrompt, setGeneratedPrompt] = useState12("");
|
|
2806
|
+
const [resultImage, setResultImage] = useState12(null);
|
|
2807
|
+
const [isAnalyzing, setIsAnalyzing] = useState12(false);
|
|
2808
|
+
const [isGeneratingImage, setIsGeneratingImage] = useState12(false);
|
|
2677
2809
|
const handleSelectImage = (index, item, frame) => {
|
|
2678
2810
|
services.onItemUsed(item);
|
|
2679
2811
|
const newImg = {
|
|
@@ -2731,7 +2863,7 @@ var LabCompare = ({ services, onResult }) => {
|
|
|
2731
2863
|
}
|
|
2732
2864
|
};
|
|
2733
2865
|
if (showPickerFor !== null) {
|
|
2734
|
-
return /* @__PURE__ */
|
|
2866
|
+
return /* @__PURE__ */ jsx17(
|
|
2735
2867
|
LabImagePicker,
|
|
2736
2868
|
{
|
|
2737
2869
|
availableItems: services.availableItems,
|
|
@@ -2742,19 +2874,19 @@ var LabCompare = ({ services, onResult }) => {
|
|
|
2742
2874
|
}
|
|
2743
2875
|
);
|
|
2744
2876
|
}
|
|
2745
|
-
return /* @__PURE__ */
|
|
2746
|
-
/* @__PURE__ */
|
|
2747
|
-
selectedImages.map((img, i) => /* @__PURE__ */
|
|
2748
|
-
/* @__PURE__ */
|
|
2749
|
-
img ? /* @__PURE__ */
|
|
2750
|
-
/* @__PURE__ */
|
|
2751
|
-
/* @__PURE__ */
|
|
2752
|
-
/* @__PURE__ */
|
|
2753
|
-
/* @__PURE__ */
|
|
2754
|
-
/* @__PURE__ */
|
|
2877
|
+
return /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-3 p-4 overflow-y-auto dark-scrollbar", children: [
|
|
2878
|
+
/* @__PURE__ */ jsx17("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40", children: "Bilder zum Vergleichen" }),
|
|
2879
|
+
selectedImages.map((img, i) => /* @__PURE__ */ jsxs15("div", { className: "flex gap-3 p-3 rounded-xl border border-white/10 bg-white/5", children: [
|
|
2880
|
+
/* @__PURE__ */ jsx17("span", { className: "text-[10px] font-bold text-white/40 w-6 shrink-0 pt-1", children: autoLabel(i) }),
|
|
2881
|
+
img ? /* @__PURE__ */ jsxs15(Fragment7, { children: [
|
|
2882
|
+
/* @__PURE__ */ jsx17("img", { src: img.frame.base64, className: "w-12 h-12 object-cover rounded-lg shrink-0 cursor-pointer", onClick: () => setShowPickerFor(i) }),
|
|
2883
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
|
|
2884
|
+
/* @__PURE__ */ jsx17("p", { className: "text-[10px] text-white/50 line-clamp-1", children: img.item.prompt }),
|
|
2885
|
+
/* @__PURE__ */ jsxs15("label", { className: "flex items-center gap-1 text-[10px] text-white/40", children: [
|
|
2886
|
+
/* @__PURE__ */ jsx17("input", { type: "checkbox", checked: img.sendToPromptAI, onChange: (e) => updateImg(i, { sendToPromptAI: e.target.checked }) }),
|
|
2755
2887
|
"Bild an KI mitgeben"
|
|
2756
2888
|
] }),
|
|
2757
|
-
/* @__PURE__ */
|
|
2889
|
+
/* @__PURE__ */ jsx17(
|
|
2758
2890
|
"input",
|
|
2759
2891
|
{
|
|
2760
2892
|
value: img.roleForPrompt || "",
|
|
@@ -2764,16 +2896,16 @@ var LabCompare = ({ services, onResult }) => {
|
|
|
2764
2896
|
}
|
|
2765
2897
|
)
|
|
2766
2898
|
] })
|
|
2767
|
-
] }) : /* @__PURE__ */
|
|
2768
|
-
/* @__PURE__ */
|
|
2899
|
+
] }) : /* @__PURE__ */ jsx17("button", { onClick: () => setShowPickerFor(i), className: "flex-1 py-3 border border-dashed border-white/20 rounded-lg text-[10px] text-white/30 active:bg-white/5", children: "Bild w\xE4hlen" }),
|
|
2900
|
+
/* @__PURE__ */ jsx17("button", { onClick: () => removeSlot(i), className: "text-white/20 active:text-red-400 self-start", children: /* @__PURE__ */ jsx17("span", { className: "material-symbols-outlined text-[16px]", children: "close" }) })
|
|
2769
2901
|
] }, i)),
|
|
2770
|
-
/* @__PURE__ */
|
|
2771
|
-
/* @__PURE__ */
|
|
2902
|
+
/* @__PURE__ */ jsxs15("button", { onClick: addSlot, className: "w-full py-2 border border-dashed border-white/10 rounded-xl text-[10px] text-white/30 active:bg-white/5 flex items-center justify-center gap-1", children: [
|
|
2903
|
+
/* @__PURE__ */ jsx17("span", { className: "material-symbols-outlined text-[14px]", children: "add" }),
|
|
2772
2904
|
"Bild hinzuf\xFCgen"
|
|
2773
2905
|
] }),
|
|
2774
|
-
/* @__PURE__ */
|
|
2775
|
-
/* @__PURE__ */
|
|
2776
|
-
/* @__PURE__ */
|
|
2906
|
+
/* @__PURE__ */ jsxs15("div", { children: [
|
|
2907
|
+
/* @__PURE__ */ jsx17("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40 mb-2", children: "Analyse-Anweisung" }),
|
|
2908
|
+
/* @__PURE__ */ jsx17(
|
|
2777
2909
|
"textarea",
|
|
2778
2910
|
{
|
|
2779
2911
|
value: instruction,
|
|
@@ -2784,27 +2916,27 @@ var LabCompare = ({ services, onResult }) => {
|
|
|
2784
2916
|
}
|
|
2785
2917
|
)
|
|
2786
2918
|
] }),
|
|
2787
|
-
/* @__PURE__ */
|
|
2919
|
+
/* @__PURE__ */ jsx17(
|
|
2788
2920
|
"button",
|
|
2789
2921
|
{
|
|
2790
2922
|
onClick: handleAnalyze,
|
|
2791
2923
|
disabled: selectedImages.filter(Boolean).length < 1 || !instruction.trim() || isAnalyzing,
|
|
2792
2924
|
className: "w-full py-3 rounded-xl bg-white/10 text-white font-bold text-[12px] uppercase tracking-wide disabled:opacity-30 active:bg-white/15 flex items-center justify-center gap-2",
|
|
2793
|
-
children: isAnalyzing ? /* @__PURE__ */
|
|
2794
|
-
/* @__PURE__ */
|
|
2795
|
-
/* @__PURE__ */
|
|
2796
|
-
] }) : /* @__PURE__ */
|
|
2797
|
-
/* @__PURE__ */
|
|
2798
|
-
/* @__PURE__ */
|
|
2925
|
+
children: isAnalyzing ? /* @__PURE__ */ jsxs15(Fragment7, { children: [
|
|
2926
|
+
/* @__PURE__ */ jsx17("div", { className: "w-3 h-3 border-t border-white rounded-full animate-spin" }),
|
|
2927
|
+
/* @__PURE__ */ jsx17("span", { children: "Analysiere..." })
|
|
2928
|
+
] }) : /* @__PURE__ */ jsxs15(Fragment7, { children: [
|
|
2929
|
+
/* @__PURE__ */ jsx17("span", { className: "material-symbols-outlined text-[16px]", children: "compare" }),
|
|
2930
|
+
/* @__PURE__ */ jsx17("span", { children: "Analysieren" })
|
|
2799
2931
|
] })
|
|
2800
2932
|
}
|
|
2801
2933
|
),
|
|
2802
|
-
analysis && /* @__PURE__ */
|
|
2803
|
-
/* @__PURE__ */
|
|
2804
|
-
/* @__PURE__ */
|
|
2805
|
-
/* @__PURE__ */
|
|
2806
|
-
/* @__PURE__ */
|
|
2807
|
-
/* @__PURE__ */
|
|
2934
|
+
analysis && /* @__PURE__ */ jsxs15("div", { children: [
|
|
2935
|
+
/* @__PURE__ */ jsx17("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40 mb-2", children: "Analyse" }),
|
|
2936
|
+
/* @__PURE__ */ jsx17("div", { className: "bg-white/5 border border-white/10 rounded-xl px-3 py-3", children: /* @__PURE__ */ jsx17("p", { className: "text-[12px] text-white/70 leading-relaxed whitespace-pre-wrap", children: analysis }) }),
|
|
2937
|
+
/* @__PURE__ */ jsxs15("div", { className: "mt-3", children: [
|
|
2938
|
+
/* @__PURE__ */ jsx17("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40 mb-2", children: "Als Prompt nutzen" }),
|
|
2939
|
+
/* @__PURE__ */ jsx17(
|
|
2808
2940
|
"textarea",
|
|
2809
2941
|
{
|
|
2810
2942
|
value: generatedPrompt,
|
|
@@ -2814,36 +2946,37 @@ var LabCompare = ({ services, onResult }) => {
|
|
|
2814
2946
|
rows: 3
|
|
2815
2947
|
}
|
|
2816
2948
|
),
|
|
2817
|
-
/* @__PURE__ */
|
|
2949
|
+
/* @__PURE__ */ jsx17(
|
|
2818
2950
|
"button",
|
|
2819
2951
|
{
|
|
2820
2952
|
onClick: handleGenerateImage,
|
|
2821
2953
|
disabled: !generatedPrompt.trim() || isGeneratingImage,
|
|
2822
2954
|
className: "w-full mt-2 py-3 rounded-xl bg-blue-600/80 text-white font-bold text-[12px] uppercase tracking-wide disabled:opacity-30 active:bg-blue-600 flex items-center justify-center gap-2",
|
|
2823
|
-
children: isGeneratingImage ? /* @__PURE__ */
|
|
2824
|
-
/* @__PURE__ */
|
|
2825
|
-
/* @__PURE__ */
|
|
2826
|
-
] }) : /* @__PURE__ */
|
|
2827
|
-
/* @__PURE__ */
|
|
2828
|
-
/* @__PURE__ */
|
|
2955
|
+
children: isGeneratingImage ? /* @__PURE__ */ jsxs15(Fragment7, { children: [
|
|
2956
|
+
/* @__PURE__ */ jsx17("div", { className: "w-3 h-3 border-t border-white rounded-full animate-spin" }),
|
|
2957
|
+
/* @__PURE__ */ jsx17("span", { children: "Generiere..." })
|
|
2958
|
+
] }) : /* @__PURE__ */ jsxs15(Fragment7, { children: [
|
|
2959
|
+
/* @__PURE__ */ jsx17("span", { className: "material-symbols-outlined text-[16px]", children: "image" }),
|
|
2960
|
+
/* @__PURE__ */ jsx17("span", { children: "Bild generieren" })
|
|
2829
2961
|
] })
|
|
2830
2962
|
}
|
|
2831
2963
|
)
|
|
2832
2964
|
] })
|
|
2833
2965
|
] }),
|
|
2834
|
-
resultImage && /* @__PURE__ */
|
|
2966
|
+
resultImage && /* @__PURE__ */ jsx17("div", { className: "rounded-xl overflow-hidden border border-white/10", children: /* @__PURE__ */ jsx17("img", { src: resultImage, className: "w-full object-cover" }) })
|
|
2835
2967
|
] });
|
|
2836
2968
|
};
|
|
2837
2969
|
|
|
2838
2970
|
// src/components/labs/LabLoop.tsx
|
|
2839
|
-
import { useState as
|
|
2840
|
-
import {
|
|
2971
|
+
import { useState as useState13 } from "react";
|
|
2972
|
+
import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2841
2973
|
var LabLoop = ({ services, onResult }) => {
|
|
2842
|
-
const [rounds, setRounds] =
|
|
2843
|
-
const [currentInstruction, setCurrentInstruction] =
|
|
2844
|
-
const [showPickerForRound, setShowPickerForRound] =
|
|
2845
|
-
const [pendingImages, setPendingImages] =
|
|
2846
|
-
const [isGenerating, setIsGenerating] =
|
|
2974
|
+
const [rounds, setRounds] = useState13([]);
|
|
2975
|
+
const [currentInstruction, setCurrentInstruction] = useState13("");
|
|
2976
|
+
const [showPickerForRound, setShowPickerForRound] = useState13(null);
|
|
2977
|
+
const [pendingImages, setPendingImages] = useState13([]);
|
|
2978
|
+
const [isGenerating, setIsGenerating] = useState13(false);
|
|
2979
|
+
const { aspectRatio, model, updateAspectRatio, updateModel } = useGenerationSettings();
|
|
2847
2980
|
const currentPrompt = rounds.length > 0 ? rounds[rounds.length - 1].prompt : "";
|
|
2848
2981
|
const handleAddImage = (item, frame) => {
|
|
2849
2982
|
services.onItemUsed(item);
|
|
@@ -2877,8 +3010,8 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
2877
3010
|
});
|
|
2878
3011
|
const { base64, mediaId } = await services.generateImage({
|
|
2879
3012
|
prompt: newPrompt,
|
|
2880
|
-
aspectRatio
|
|
2881
|
-
modelDisplayName:
|
|
3013
|
+
aspectRatio,
|
|
3014
|
+
modelDisplayName: model
|
|
2882
3015
|
});
|
|
2883
3016
|
const newBase64 = `data:image/png;base64,${base64}`;
|
|
2884
3017
|
const newFrame = { id: crypto.randomUUID(), base64: newBase64, mediaId, source: "generated" };
|
|
@@ -2904,7 +3037,7 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
2904
3037
|
}
|
|
2905
3038
|
};
|
|
2906
3039
|
if (showPickerForRound !== null) {
|
|
2907
|
-
return /* @__PURE__ */
|
|
3040
|
+
return /* @__PURE__ */ jsx18(
|
|
2908
3041
|
LabImagePicker,
|
|
2909
3042
|
{
|
|
2910
3043
|
availableItems: services.availableItems,
|
|
@@ -2915,32 +3048,32 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
2915
3048
|
}
|
|
2916
3049
|
);
|
|
2917
3050
|
}
|
|
2918
|
-
return /* @__PURE__ */
|
|
2919
|
-
rounds.map((round, i) => /* @__PURE__ */
|
|
2920
|
-
/* @__PURE__ */
|
|
2921
|
-
/* @__PURE__ */
|
|
3051
|
+
return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-3 p-4 overflow-y-auto dark-scrollbar", children: [
|
|
3052
|
+
rounds.map((round, i) => /* @__PURE__ */ jsxs16("div", { className: "flex gap-3 p-3 rounded-xl border border-white/10 bg-white/5", children: [
|
|
3053
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center gap-1 shrink-0", children: [
|
|
3054
|
+
/* @__PURE__ */ jsxs16("span", { className: "text-[9px] font-bold text-white/30", children: [
|
|
2922
3055
|
"R",
|
|
2923
3056
|
i + 1
|
|
2924
3057
|
] }),
|
|
2925
|
-
round.frame && /* @__PURE__ */
|
|
3058
|
+
round.frame && /* @__PURE__ */ jsx18("img", { src: round.frame.base64, className: "w-12 h-12 object-cover rounded-lg" })
|
|
2926
3059
|
] }),
|
|
2927
|
-
/* @__PURE__ */
|
|
2928
|
-
/* @__PURE__ */
|
|
3060
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex-1 min-w-0", children: [
|
|
3061
|
+
/* @__PURE__ */ jsxs16("p", { className: "text-[9px] text-white/30 italic mb-1", children: [
|
|
2929
3062
|
'"',
|
|
2930
3063
|
round.instruction,
|
|
2931
3064
|
'"'
|
|
2932
3065
|
] }),
|
|
2933
|
-
/* @__PURE__ */
|
|
3066
|
+
/* @__PURE__ */ jsx18("p", { className: "text-[10px] text-white/60 leading-tight line-clamp-3", children: round.prompt })
|
|
2934
3067
|
] })
|
|
2935
3068
|
] }, i)),
|
|
2936
|
-
/* @__PURE__ */
|
|
2937
|
-
/* @__PURE__ */
|
|
2938
|
-
currentPrompt && /* @__PURE__ */
|
|
3069
|
+
/* @__PURE__ */ jsxs16("div", { className: "rounded-xl border border-white/20 bg-white/5 p-3 flex flex-col gap-3", children: [
|
|
3070
|
+
/* @__PURE__ */ jsx18("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40", children: rounds.length === 0 ? "Runde 1 \u2014 Erster Prompt" : `Runde ${rounds.length + 1}` }),
|
|
3071
|
+
currentPrompt && /* @__PURE__ */ jsxs16("p", { className: "text-[10px] text-white/40 italic line-clamp-2", children: [
|
|
2939
3072
|
'Letzter Prompt: "',
|
|
2940
3073
|
currentPrompt,
|
|
2941
3074
|
'"'
|
|
2942
3075
|
] }),
|
|
2943
|
-
/* @__PURE__ */
|
|
3076
|
+
/* @__PURE__ */ jsx18(
|
|
2944
3077
|
"textarea",
|
|
2945
3078
|
{
|
|
2946
3079
|
value: currentInstruction,
|
|
@@ -2950,10 +3083,10 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
2950
3083
|
rows: 3
|
|
2951
3084
|
}
|
|
2952
3085
|
),
|
|
2953
|
-
pendingImages.map((img, i) => /* @__PURE__ */
|
|
2954
|
-
/* @__PURE__ */
|
|
2955
|
-
/* @__PURE__ */
|
|
2956
|
-
/* @__PURE__ */
|
|
3086
|
+
pendingImages.map((img, i) => /* @__PURE__ */ jsxs16("div", { className: "flex gap-2 items-center", children: [
|
|
3087
|
+
/* @__PURE__ */ jsx18("img", { src: img.frame.base64, className: "w-8 h-8 object-cover rounded" }),
|
|
3088
|
+
/* @__PURE__ */ jsx18("span", { className: "text-[10px] text-white/40", children: img.label }),
|
|
3089
|
+
/* @__PURE__ */ jsx18(
|
|
2957
3090
|
"input",
|
|
2958
3091
|
{
|
|
2959
3092
|
value: img.roleForPrompt || "",
|
|
@@ -2962,36 +3095,43 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
2962
3095
|
className: "flex-1 bg-black/30 border border-white/10 rounded px-2 py-0.5 text-[10px] text-white/60 outline-none"
|
|
2963
3096
|
}
|
|
2964
3097
|
),
|
|
2965
|
-
/* @__PURE__ */
|
|
2966
|
-
/* @__PURE__ */
|
|
3098
|
+
/* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-1 text-[9px] text-white/30", children: [
|
|
3099
|
+
/* @__PURE__ */ jsx18("input", { type: "checkbox", checked: img.sendToPromptAI, onChange: (e) => updatePendingImage(i, { sendToPromptAI: e.target.checked }) }),
|
|
2967
3100
|
"KI"
|
|
2968
3101
|
] }),
|
|
2969
|
-
/* @__PURE__ */
|
|
3102
|
+
/* @__PURE__ */ jsx18("button", { onClick: () => setPendingImages((prev) => prev.filter((_, idx) => idx !== i)), className: "text-white/20 active:text-red-400", children: /* @__PURE__ */ jsx18("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
2970
3103
|
] }, i)),
|
|
2971
|
-
/* @__PURE__ */
|
|
3104
|
+
/* @__PURE__ */ jsxs16(
|
|
2972
3105
|
"button",
|
|
2973
3106
|
{
|
|
2974
3107
|
onClick: () => setShowPickerForRound(rounds.length),
|
|
2975
3108
|
className: "text-[10px] text-white/30 active:text-white/60 flex items-center gap-1 self-start",
|
|
2976
3109
|
children: [
|
|
2977
|
-
/* @__PURE__ */
|
|
3110
|
+
/* @__PURE__ */ jsx18("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
|
|
2978
3111
|
"Referenzbild hinzuf\xFCgen"
|
|
2979
3112
|
]
|
|
2980
3113
|
}
|
|
2981
3114
|
),
|
|
2982
|
-
/* @__PURE__ */
|
|
3115
|
+
/* @__PURE__ */ jsx18(
|
|
3116
|
+
GenerationControls,
|
|
3117
|
+
{
|
|
3118
|
+
aspectRatio,
|
|
3119
|
+
onAspectRatioChange: updateAspectRatio,
|
|
3120
|
+
model,
|
|
3121
|
+
onModelChange: updateModel,
|
|
3122
|
+
runningCount: isGenerating ? 1 : 0
|
|
3123
|
+
}
|
|
3124
|
+
),
|
|
3125
|
+
/* @__PURE__ */ jsxs16(
|
|
2983
3126
|
"button",
|
|
2984
3127
|
{
|
|
2985
3128
|
onClick: handleRunRound,
|
|
2986
|
-
disabled: !currentInstruction.trim()
|
|
3129
|
+
disabled: !currentInstruction.trim(),
|
|
2987
3130
|
className: "w-full py-3 rounded-xl bg-white/10 text-white font-bold text-[12px] uppercase tracking-wide disabled:opacity-30 active:bg-white/15 flex items-center justify-center gap-2",
|
|
2988
|
-
children:
|
|
2989
|
-
/* @__PURE__ */
|
|
2990
|
-
/* @__PURE__ */
|
|
2991
|
-
]
|
|
2992
|
-
/* @__PURE__ */ jsx17("span", { className: "material-symbols-outlined text-[16px]", children: "loop" }),
|
|
2993
|
-
/* @__PURE__ */ jsx17("span", { children: "Runde starten" })
|
|
2994
|
-
] })
|
|
3131
|
+
children: [
|
|
3132
|
+
/* @__PURE__ */ jsx18("span", { className: "material-symbols-outlined text-[16px]", children: "loop" }),
|
|
3133
|
+
/* @__PURE__ */ jsx18("span", { children: "Runde starten" })
|
|
3134
|
+
]
|
|
2995
3135
|
}
|
|
2996
3136
|
)
|
|
2997
3137
|
] })
|
|
@@ -2999,8 +3139,8 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
2999
3139
|
};
|
|
3000
3140
|
|
|
3001
3141
|
// src/components/labs/LabFrameExtractor.tsx
|
|
3002
|
-
import { useRef as useRef7, useState as
|
|
3003
|
-
import { jsx as
|
|
3142
|
+
import { useRef as useRef7, useState as useState14, useCallback as useCallback2 } from "react";
|
|
3143
|
+
import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
3004
3144
|
var formatTime = (s) => {
|
|
3005
3145
|
const m = Math.floor(s / 60);
|
|
3006
3146
|
const sec = (s % 60).toFixed(1);
|
|
@@ -3016,12 +3156,12 @@ var LabFrameExtractor = ({
|
|
|
3016
3156
|
const videoRef = useRef7(null);
|
|
3017
3157
|
const canvasRef = useRef7(null);
|
|
3018
3158
|
const cancelledRef = useRef7(false);
|
|
3019
|
-
const [selectedItem, setSelectedItem] =
|
|
3020
|
-
const [videoSrc, setVideoSrc] =
|
|
3021
|
-
const [videoReady, setVideoReady] =
|
|
3022
|
-
const [frames, setFrames] =
|
|
3023
|
-
const [isExtracting, setIsExtracting] =
|
|
3024
|
-
const [intervalSec, setIntervalSec] =
|
|
3159
|
+
const [selectedItem, setSelectedItem] = useState14(null);
|
|
3160
|
+
const [videoSrc, setVideoSrc] = useState14(null);
|
|
3161
|
+
const [videoReady, setVideoReady] = useState14(false);
|
|
3162
|
+
const [frames, setFrames] = useState14([]);
|
|
3163
|
+
const [isExtracting, setIsExtracting] = useState14(false);
|
|
3164
|
+
const [intervalSec, setIntervalSec] = useState14("1");
|
|
3025
3165
|
const handleVideoSelect = (item) => {
|
|
3026
3166
|
const mediaId = item.frames[0]?.mediaId;
|
|
3027
3167
|
if (!mediaId) return;
|
|
@@ -3101,10 +3241,10 @@ var LabFrameExtractor = ({
|
|
|
3101
3241
|
frames: [labFrame]
|
|
3102
3242
|
});
|
|
3103
3243
|
};
|
|
3104
|
-
return /* @__PURE__ */
|
|
3105
|
-
/* @__PURE__ */
|
|
3106
|
-
videoItems.length === 0 && /* @__PURE__ */
|
|
3107
|
-
videoItems.map((item) => /* @__PURE__ */
|
|
3244
|
+
return /* @__PURE__ */ jsxs17("div", { style: { display: "flex", flexDirection: "column", gap: 12, padding: 12, height: "100%", overflow: "auto" }, children: [
|
|
3245
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: [
|
|
3246
|
+
videoItems.length === 0 && /* @__PURE__ */ jsx19("span", { style: { fontSize: 11, color: "#666", fontStyle: "italic" }, children: "No video items available" }),
|
|
3247
|
+
videoItems.map((item) => /* @__PURE__ */ jsx19(
|
|
3108
3248
|
"button",
|
|
3109
3249
|
{
|
|
3110
3250
|
onClick: () => handleVideoSelect(item),
|
|
@@ -3122,7 +3262,7 @@ var LabFrameExtractor = ({
|
|
|
3122
3262
|
item.id
|
|
3123
3263
|
))
|
|
3124
3264
|
] }),
|
|
3125
|
-
videoSrc && /* @__PURE__ */
|
|
3265
|
+
videoSrc && /* @__PURE__ */ jsx19(
|
|
3126
3266
|
"video",
|
|
3127
3267
|
{
|
|
3128
3268
|
ref: videoRef,
|
|
@@ -3133,9 +3273,9 @@ var LabFrameExtractor = ({
|
|
|
3133
3273
|
style: { width: "100%", maxHeight: 280, background: "#000", borderRadius: 6, display: "block" }
|
|
3134
3274
|
}
|
|
3135
3275
|
),
|
|
3136
|
-
/* @__PURE__ */
|
|
3137
|
-
/* @__PURE__ */
|
|
3138
|
-
["start", "current", "end"].map((mode) => /* @__PURE__ */
|
|
3276
|
+
/* @__PURE__ */ jsx19("canvas", { ref: canvasRef, style: { display: "none" } }),
|
|
3277
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, alignItems: "center" }, children: [
|
|
3278
|
+
["start", "current", "end"].map((mode) => /* @__PURE__ */ jsx19(
|
|
3139
3279
|
"button",
|
|
3140
3280
|
{
|
|
3141
3281
|
disabled: !videoReady,
|
|
@@ -3154,21 +3294,21 @@ var LabFrameExtractor = ({
|
|
|
3154
3294
|
},
|
|
3155
3295
|
mode
|
|
3156
3296
|
)),
|
|
3157
|
-
/* @__PURE__ */
|
|
3158
|
-
/* @__PURE__ */
|
|
3297
|
+
/* @__PURE__ */ jsx19("span", { style: { fontSize: 11, color: "#aaa" }, children: "every" }),
|
|
3298
|
+
/* @__PURE__ */ jsx19(
|
|
3159
3299
|
"select",
|
|
3160
3300
|
{
|
|
3161
3301
|
value: intervalSec,
|
|
3162
3302
|
onChange: (e) => setIntervalSec(e.target.value),
|
|
3163
3303
|
disabled: !videoReady || isExtracting,
|
|
3164
3304
|
style: { fontSize: 11, background: "#111", border: "1px solid #333", color: "#fff", borderRadius: 4, padding: "2px 4px" },
|
|
3165
|
-
children: INTERVAL_OPTIONS.map((v) => /* @__PURE__ */
|
|
3305
|
+
children: INTERVAL_OPTIONS.map((v) => /* @__PURE__ */ jsxs17("option", { value: v, children: [
|
|
3166
3306
|
v,
|
|
3167
3307
|
"s"
|
|
3168
3308
|
] }, v))
|
|
3169
3309
|
}
|
|
3170
3310
|
),
|
|
3171
|
-
/* @__PURE__ */
|
|
3311
|
+
/* @__PURE__ */ jsx19(
|
|
3172
3312
|
"button",
|
|
3173
3313
|
{
|
|
3174
3314
|
disabled: !videoReady,
|
|
@@ -3189,8 +3329,8 @@ var LabFrameExtractor = ({
|
|
|
3189
3329
|
}
|
|
3190
3330
|
)
|
|
3191
3331
|
] }),
|
|
3192
|
-
/* @__PURE__ */
|
|
3193
|
-
frames.map((frame) => /* @__PURE__ */
|
|
3332
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: 8, overflowX: "auto", paddingBottom: 4 }, children: [
|
|
3333
|
+
frames.map((frame) => /* @__PURE__ */ jsxs17(
|
|
3194
3334
|
"div",
|
|
3195
3335
|
{
|
|
3196
3336
|
style: {
|
|
@@ -3202,10 +3342,10 @@ var LabFrameExtractor = ({
|
|
|
3202
3342
|
background: "rgba(255,255,255,0.03)"
|
|
3203
3343
|
},
|
|
3204
3344
|
children: [
|
|
3205
|
-
/* @__PURE__ */
|
|
3206
|
-
/* @__PURE__ */
|
|
3207
|
-
/* @__PURE__ */
|
|
3208
|
-
/* @__PURE__ */
|
|
3345
|
+
/* @__PURE__ */ jsx19("img", { src: frame.dataUrl, style: { width: "100%", aspectRatio: "16/9", objectFit: "cover", display: "block" }, alt: frame.label }),
|
|
3346
|
+
/* @__PURE__ */ jsx19("div", { style: { fontSize: 9, color: "#888", textAlign: "center", padding: "2px 4px", fontFamily: "monospace" }, children: frame.label }),
|
|
3347
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: 2, padding: "0 4px 4px", justifyContent: "center" }, children: [
|
|
3348
|
+
/* @__PURE__ */ jsx19(
|
|
3209
3349
|
"button",
|
|
3210
3350
|
{
|
|
3211
3351
|
onClick: () => useFrame(frame),
|
|
@@ -3222,7 +3362,7 @@ var LabFrameExtractor = ({
|
|
|
3222
3362
|
children: "Use"
|
|
3223
3363
|
}
|
|
3224
3364
|
),
|
|
3225
|
-
/* @__PURE__ */
|
|
3365
|
+
/* @__PURE__ */ jsx19(
|
|
3226
3366
|
"button",
|
|
3227
3367
|
{
|
|
3228
3368
|
onClick: () => setFrames((prev) => prev.filter((f) => f.id !== frame.id)),
|
|
@@ -3243,13 +3383,13 @@ var LabFrameExtractor = ({
|
|
|
3243
3383
|
},
|
|
3244
3384
|
frame.id
|
|
3245
3385
|
)),
|
|
3246
|
-
frames.length === 0 && /* @__PURE__ */
|
|
3386
|
+
frames.length === 0 && /* @__PURE__ */ jsx19("span", { style: { fontSize: 11, color: "#444", fontStyle: "italic", padding: "16px 0" }, children: isExtracting ? "Extracting frames\u2026" : "No frames yet" })
|
|
3247
3387
|
] })
|
|
3248
3388
|
] });
|
|
3249
3389
|
};
|
|
3250
3390
|
|
|
3251
3391
|
// src/components/labs/LabsTab.tsx
|
|
3252
|
-
import { jsx as
|
|
3392
|
+
import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
3253
3393
|
var BASE_TABS = [
|
|
3254
3394
|
{ key: "remix", label: "Remix", icon: "auto_fix_high" },
|
|
3255
3395
|
{ key: "blend", label: "Blend", icon: "merge" },
|
|
@@ -3258,28 +3398,28 @@ var BASE_TABS = [
|
|
|
3258
3398
|
];
|
|
3259
3399
|
var FRAMES_TAB = { key: "frames", label: "Frames", icon: "crop_original" };
|
|
3260
3400
|
var LabsTab = ({ services, onResult, videoItems, resolveVideoUrl }) => {
|
|
3261
|
-
const [activeTab, setActiveTab] =
|
|
3401
|
+
const [activeTab, setActiveTab] = useState15("remix");
|
|
3262
3402
|
const showFrames = !!(videoItems && resolveVideoUrl);
|
|
3263
3403
|
const tabs = showFrames ? [...BASE_TABS, FRAMES_TAB] : BASE_TABS;
|
|
3264
|
-
return /* @__PURE__ */
|
|
3265
|
-
/* @__PURE__ */
|
|
3404
|
+
return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col h-full overflow-hidden", children: [
|
|
3405
|
+
/* @__PURE__ */ jsx20("div", { className: "flex border-b border-white/5 shrink-0", children: tabs.map((tab) => /* @__PURE__ */ jsxs18(
|
|
3266
3406
|
"button",
|
|
3267
3407
|
{
|
|
3268
3408
|
onClick: () => setActiveTab(tab.key),
|
|
3269
3409
|
className: `flex-1 flex items-center justify-center gap-1 h-10 text-[9px] font-bold uppercase tracking-wide transition-colors ${activeTab === tab.key ? "text-white border-b-2 border-white" : "text-white/30 hover:text-white/60"}`,
|
|
3270
3410
|
children: [
|
|
3271
|
-
/* @__PURE__ */
|
|
3411
|
+
/* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined text-[14px]", children: tab.icon }),
|
|
3272
3412
|
tab.label
|
|
3273
3413
|
]
|
|
3274
3414
|
},
|
|
3275
3415
|
tab.key
|
|
3276
3416
|
)) }),
|
|
3277
|
-
/* @__PURE__ */
|
|
3278
|
-
activeTab === "remix" && /* @__PURE__ */
|
|
3279
|
-
activeTab === "blend" && /* @__PURE__ */
|
|
3280
|
-
activeTab === "compare" && /* @__PURE__ */
|
|
3281
|
-
activeTab === "loop" && /* @__PURE__ */
|
|
3282
|
-
activeTab === "frames" && showFrames && /* @__PURE__ */
|
|
3417
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex-1 overflow-hidden", children: [
|
|
3418
|
+
activeTab === "remix" && /* @__PURE__ */ jsx20(LabRemix, { services, onResult }),
|
|
3419
|
+
activeTab === "blend" && /* @__PURE__ */ jsx20(LabBlend, { services, onResult }),
|
|
3420
|
+
activeTab === "compare" && /* @__PURE__ */ jsx20(LabCompare, { services, onResult }),
|
|
3421
|
+
activeTab === "loop" && /* @__PURE__ */ jsx20(LabLoop, { services, onResult }),
|
|
3422
|
+
activeTab === "frames" && showFrames && /* @__PURE__ */ jsx20(
|
|
3283
3423
|
LabFrameExtractor,
|
|
3284
3424
|
{
|
|
3285
3425
|
videoItems,
|
|
@@ -3292,19 +3432,19 @@ var LabsTab = ({ services, onResult, videoItems, resolveVideoUrl }) => {
|
|
|
3292
3432
|
};
|
|
3293
3433
|
|
|
3294
3434
|
// src/components/TagManagerPanel.tsx
|
|
3295
|
-
import { useState as
|
|
3296
|
-
import { jsx as
|
|
3435
|
+
import { useState as useState16 } from "react";
|
|
3436
|
+
import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
3297
3437
|
function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete, onTagReorder, onTagMove }) {
|
|
3298
3438
|
const categories = Object.keys(workspaceTags.by_category).filter(
|
|
3299
3439
|
(cat) => (workspaceTags.by_category[cat] || []).some((t) => !t.is_deleted)
|
|
3300
3440
|
);
|
|
3301
|
-
const [selectedCategory, setSelectedCategory] =
|
|
3441
|
+
const [selectedCategory, setSelectedCategory] = useState16(categories[0] || "");
|
|
3302
3442
|
const effectiveCategory = categories.includes(selectedCategory) ? selectedCategory : categories[0] || "";
|
|
3303
|
-
const [editingLabel, setEditingLabel] =
|
|
3304
|
-
const [editState, setEditState] =
|
|
3305
|
-
const [newTag, setNewTag] =
|
|
3306
|
-
const [movingLabel, setMovingLabel] =
|
|
3307
|
-
const [moveTarget, setMoveTarget] =
|
|
3443
|
+
const [editingLabel, setEditingLabel] = useState16(null);
|
|
3444
|
+
const [editState, setEditState] = useState16({ label: "", value: "" });
|
|
3445
|
+
const [newTag, setNewTag] = useState16({ label: "", value: "" });
|
|
3446
|
+
const [movingLabel, setMovingLabel] = useState16(null);
|
|
3447
|
+
const [moveTarget, setMoveTarget] = useState16("");
|
|
3308
3448
|
const tags = (workspaceTags.by_category[effectiveCategory] || []).filter((t) => !t.is_deleted);
|
|
3309
3449
|
const otherCategories = categories.filter((c) => c !== effectiveCategory);
|
|
3310
3450
|
const startEdit = (tag) => {
|
|
@@ -3347,10 +3487,10 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3347
3487
|
if (!confirm(`Tag "${tag.label}" l\xF6schen?`)) return;
|
|
3348
3488
|
onTagDelete(tag.label, effectiveCategory);
|
|
3349
3489
|
};
|
|
3350
|
-
return /* @__PURE__ */
|
|
3351
|
-
/* @__PURE__ */
|
|
3352
|
-
/* @__PURE__ */
|
|
3353
|
-
categories.map((cat) => /* @__PURE__ */
|
|
3490
|
+
return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col h-full overflow-hidden", children: [
|
|
3491
|
+
/* @__PURE__ */ jsx21("div", { className: "px-3 py-2 border-b border-white/5 shrink-0", children: /* @__PURE__ */ jsx21("span", { className: "text-[10px] font-bold uppercase tracking-widest text-white/40", children: "Tag Manager" }) }),
|
|
3492
|
+
/* @__PURE__ */ jsx21("div", { className: "px-3 py-2 shrink-0 overflow-x-auto", children: /* @__PURE__ */ jsxs19("div", { className: "flex gap-1.5 flex-nowrap", children: [
|
|
3493
|
+
categories.map((cat) => /* @__PURE__ */ jsxs19(
|
|
3354
3494
|
"button",
|
|
3355
3495
|
{
|
|
3356
3496
|
onClick: () => {
|
|
@@ -3362,17 +3502,17 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3362
3502
|
children: [
|
|
3363
3503
|
cat,
|
|
3364
3504
|
" ",
|
|
3365
|
-
/* @__PURE__ */
|
|
3505
|
+
/* @__PURE__ */ jsx21("span", { className: "ml-1 opacity-50", children: (workspaceTags.by_category[cat] || []).filter((t) => !t.is_deleted).length })
|
|
3366
3506
|
]
|
|
3367
3507
|
},
|
|
3368
3508
|
cat
|
|
3369
3509
|
)),
|
|
3370
|
-
categories.length === 0 && /* @__PURE__ */
|
|
3510
|
+
categories.length === 0 && /* @__PURE__ */ jsx21("span", { className: "text-[10px] text-white/20", children: "Erst Workspace importieren" })
|
|
3371
3511
|
] }) }),
|
|
3372
|
-
/* @__PURE__ */
|
|
3373
|
-
tags.map((tag, i) => /* @__PURE__ */
|
|
3374
|
-
editingLabel === tag.label ? /* @__PURE__ */
|
|
3375
|
-
/* @__PURE__ */
|
|
3512
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex-1 overflow-y-auto dark-scrollbar px-3 pb-2 space-y-1", children: [
|
|
3513
|
+
tags.map((tag, i) => /* @__PURE__ */ jsxs19("div", { children: [
|
|
3514
|
+
editingLabel === tag.label ? /* @__PURE__ */ jsxs19("div", { className: "bg-white/5 border border-blue-600/40 rounded-lg p-2.5 space-y-1.5", children: [
|
|
3515
|
+
/* @__PURE__ */ jsx21(
|
|
3376
3516
|
"input",
|
|
3377
3517
|
{
|
|
3378
3518
|
value: editState.label,
|
|
@@ -3383,7 +3523,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3383
3523
|
onKeyDown: (e) => e.key === "Enter" && saveEdit(tag.label)
|
|
3384
3524
|
}
|
|
3385
3525
|
),
|
|
3386
|
-
/* @__PURE__ */
|
|
3526
|
+
/* @__PURE__ */ jsx21(
|
|
3387
3527
|
"textarea",
|
|
3388
3528
|
{
|
|
3389
3529
|
value: editState.value,
|
|
@@ -3393,24 +3533,24 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3393
3533
|
placeholder: "Prompt-Wert (leer = Label)"
|
|
3394
3534
|
}
|
|
3395
3535
|
),
|
|
3396
|
-
/* @__PURE__ */
|
|
3397
|
-
/* @__PURE__ */
|
|
3398
|
-
/* @__PURE__ */
|
|
3536
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex gap-1.5 justify-end", children: [
|
|
3537
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => saveEdit(tag.label), className: "px-2.5 py-1 bg-blue-700 hover:bg-blue-600 text-white text-[10px] font-bold rounded transition", children: "SPEICHERN" }),
|
|
3538
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => setEditingLabel(null), className: "px-2.5 py-1 bg-white/5 hover:bg-white/10 text-white/50 text-[10px] font-bold rounded transition", children: "ABBRUCH" })
|
|
3399
3539
|
] })
|
|
3400
|
-
] }) : /* @__PURE__ */
|
|
3401
|
-
/* @__PURE__ */
|
|
3402
|
-
/* @__PURE__ */
|
|
3403
|
-
/* @__PURE__ */
|
|
3540
|
+
] }) : /* @__PURE__ */ jsxs19("div", { className: "group flex items-center gap-1.5 bg-white/3 hover:bg-white/6 border border-white/5 rounded-lg px-2 py-1.5 transition", children: [
|
|
3541
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-0 shrink-0", children: [
|
|
3542
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => handleMoveUp(i), disabled: i === 0, className: "text-white/20 hover:text-white/60 disabled:opacity-10 transition leading-none", children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[14px]", children: "arrow_drop_up" }) }),
|
|
3543
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => handleMoveDown(i), disabled: i === tags.length - 1, className: "text-white/20 hover:text-white/60 disabled:opacity-10 transition leading-none", children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[14px]", children: "arrow_drop_down" }) })
|
|
3404
3544
|
] }),
|
|
3405
|
-
/* @__PURE__ */
|
|
3406
|
-
/* @__PURE__ */
|
|
3407
|
-
tag.value && tag.value !== tag.label && /* @__PURE__ */
|
|
3545
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex-1 min-w-0", children: [
|
|
3546
|
+
/* @__PURE__ */ jsx21("div", { className: "text-[12px] text-white/80 font-medium truncate", children: tag.label }),
|
|
3547
|
+
tag.value && tag.value !== tag.label && /* @__PURE__ */ jsxs19("div", { className: "text-[10px] text-white/30 truncate", children: [
|
|
3408
3548
|
tag.value.slice(0, 60),
|
|
3409
3549
|
tag.value.length > 60 ? "\u2026" : ""
|
|
3410
3550
|
] })
|
|
3411
3551
|
] }),
|
|
3412
|
-
/* @__PURE__ */
|
|
3413
|
-
otherCategories.length > 0 && /* @__PURE__ */
|
|
3552
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex gap-1 opacity-0 group-hover:opacity-100 transition shrink-0", children: [
|
|
3553
|
+
otherCategories.length > 0 && /* @__PURE__ */ jsx21(
|
|
3414
3554
|
"button",
|
|
3415
3555
|
{
|
|
3416
3556
|
onClick: () => {
|
|
@@ -3420,29 +3560,29 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3420
3560
|
},
|
|
3421
3561
|
className: "p-1 rounded text-white/30 hover:text-purple-400 transition",
|
|
3422
3562
|
title: "Kategorie wechseln",
|
|
3423
|
-
children: /* @__PURE__ */
|
|
3563
|
+
children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[16px]", children: "drive_file_move" })
|
|
3424
3564
|
}
|
|
3425
3565
|
),
|
|
3426
|
-
/* @__PURE__ */
|
|
3427
|
-
/* @__PURE__ */
|
|
3566
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => startEdit(tag), className: "p-1 rounded text-white/30 hover:text-blue-400 transition", title: "Bearbeiten", children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[16px]", children: "edit" }) }),
|
|
3567
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => handleDelete(tag), className: "p-1 rounded text-white/30 hover:text-red-400 transition", title: "L\xF6schen", children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[16px]", children: "delete" }) })
|
|
3428
3568
|
] })
|
|
3429
3569
|
] }),
|
|
3430
|
-
movingLabel === tag.label && /* @__PURE__ */
|
|
3431
|
-
/* @__PURE__ */
|
|
3432
|
-
/* @__PURE__ */
|
|
3570
|
+
movingLabel === tag.label && /* @__PURE__ */ jsxs19("div", { className: "mt-1 bg-purple-900/20 border border-purple-700/30 rounded-lg p-2.5 space-y-1.5", children: [
|
|
3571
|
+
/* @__PURE__ */ jsx21("div", { className: "text-[9px] font-bold uppercase tracking-widest text-purple-400/70", children: "Verschieben nach Kategorie" }),
|
|
3572
|
+
/* @__PURE__ */ jsxs19(
|
|
3433
3573
|
"select",
|
|
3434
3574
|
{
|
|
3435
3575
|
value: moveTarget,
|
|
3436
3576
|
onChange: (e) => setMoveTarget(e.target.value),
|
|
3437
3577
|
className: "w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-[11px] text-white/70 outline-none",
|
|
3438
3578
|
children: [
|
|
3439
|
-
/* @__PURE__ */
|
|
3440
|
-
otherCategories.map((cat) => /* @__PURE__ */
|
|
3579
|
+
/* @__PURE__ */ jsx21("option", { value: "", children: "\u2014 Kategorie w\xE4hlen \u2014" }),
|
|
3580
|
+
otherCategories.map((cat) => /* @__PURE__ */ jsx21("option", { value: cat, children: cat }, cat))
|
|
3441
3581
|
]
|
|
3442
3582
|
}
|
|
3443
3583
|
),
|
|
3444
|
-
/* @__PURE__ */
|
|
3445
|
-
/* @__PURE__ */
|
|
3584
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex gap-1.5 justify-end", children: [
|
|
3585
|
+
/* @__PURE__ */ jsx21(
|
|
3446
3586
|
"button",
|
|
3447
3587
|
{
|
|
3448
3588
|
onClick: () => handleMove(tag),
|
|
@@ -3451,19 +3591,19 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3451
3591
|
children: "VERSCHIEBEN"
|
|
3452
3592
|
}
|
|
3453
3593
|
),
|
|
3454
|
-
/* @__PURE__ */
|
|
3594
|
+
/* @__PURE__ */ jsx21("button", { onClick: () => setMovingLabel(null), className: "px-2.5 py-1 bg-white/5 hover:bg-white/10 text-white/50 text-[10px] font-bold rounded transition", children: "ABBRUCH" })
|
|
3455
3595
|
] })
|
|
3456
3596
|
] })
|
|
3457
3597
|
] }, `${effectiveCategory}-${i}`)),
|
|
3458
|
-
tags.length === 0 && effectiveCategory && /* @__PURE__ */
|
|
3598
|
+
tags.length === 0 && effectiveCategory && /* @__PURE__ */ jsx21("div", { className: "text-center text-[11px] text-white/20 py-6", children: "Keine Tags in dieser Kategorie." })
|
|
3459
3599
|
] }),
|
|
3460
|
-
effectiveCategory && /* @__PURE__ */
|
|
3461
|
-
/* @__PURE__ */
|
|
3600
|
+
effectiveCategory && /* @__PURE__ */ jsxs19("div", { className: "px-3 py-2 border-t border-white/5 shrink-0 space-y-1.5", children: [
|
|
3601
|
+
/* @__PURE__ */ jsxs19("div", { className: "text-[9px] font-bold uppercase tracking-widest text-white/30", children: [
|
|
3462
3602
|
"Neuer Tag in \u201E",
|
|
3463
3603
|
effectiveCategory,
|
|
3464
3604
|
'"'
|
|
3465
3605
|
] }),
|
|
3466
|
-
/* @__PURE__ */
|
|
3606
|
+
/* @__PURE__ */ jsx21(
|
|
3467
3607
|
"input",
|
|
3468
3608
|
{
|
|
3469
3609
|
value: newTag.label,
|
|
@@ -3473,7 +3613,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3473
3613
|
className: "w-full bg-black/40 border border-white/10 rounded px-2 py-1.5 text-[12px] text-white outline-none focus:border-white/20"
|
|
3474
3614
|
}
|
|
3475
3615
|
),
|
|
3476
|
-
/* @__PURE__ */
|
|
3616
|
+
/* @__PURE__ */ jsx21(
|
|
3477
3617
|
"textarea",
|
|
3478
3618
|
{
|
|
3479
3619
|
value: newTag.value,
|
|
@@ -3483,14 +3623,14 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3483
3623
|
className: "w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-[11px] text-white/60 outline-none focus:border-white/20 resize-none"
|
|
3484
3624
|
}
|
|
3485
3625
|
),
|
|
3486
|
-
/* @__PURE__ */
|
|
3626
|
+
/* @__PURE__ */ jsxs19(
|
|
3487
3627
|
"button",
|
|
3488
3628
|
{
|
|
3489
3629
|
onClick: handleCreate,
|
|
3490
3630
|
disabled: !newTag.label.trim(),
|
|
3491
3631
|
className: "w-full py-1.5 bg-white/5 border border-white/10 text-white/60 text-[10px] font-bold rounded hover:bg-white/10 hover:text-white transition disabled:opacity-30 flex items-center justify-center gap-1.5",
|
|
3492
3632
|
children: [
|
|
3493
|
-
/* @__PURE__ */
|
|
3633
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[14px]", children: "add" }),
|
|
3494
3634
|
"TAG ERSTELLEN"
|
|
3495
3635
|
]
|
|
3496
3636
|
}
|
|
@@ -3500,8 +3640,8 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3500
3640
|
}
|
|
3501
3641
|
|
|
3502
3642
|
// src/components/HFTestTab.tsx
|
|
3503
|
-
import { useState as
|
|
3504
|
-
import { jsx as
|
|
3643
|
+
import { useState as useState17 } from "react";
|
|
3644
|
+
import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
3505
3645
|
var HF_BASE = "https://huggingface.co";
|
|
3506
3646
|
var HF_REPO = "RolandSch/fa-app-state";
|
|
3507
3647
|
var TEST_DIR = "test";
|
|
@@ -3693,8 +3833,8 @@ function tryFmt(s) {
|
|
|
3693
3833
|
}
|
|
3694
3834
|
}
|
|
3695
3835
|
function CopyBtn({ text }) {
|
|
3696
|
-
const [done, setDone] =
|
|
3697
|
-
return /* @__PURE__ */
|
|
3836
|
+
const [done, setDone] = useState17(false);
|
|
3837
|
+
return /* @__PURE__ */ jsxs20(
|
|
3698
3838
|
"button",
|
|
3699
3839
|
{
|
|
3700
3840
|
onClick: () => {
|
|
@@ -3705,7 +3845,7 @@ function CopyBtn({ text }) {
|
|
|
3705
3845
|
},
|
|
3706
3846
|
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 },
|
|
3707
3847
|
children: [
|
|
3708
|
-
/* @__PURE__ */
|
|
3848
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: done ? "check" : "content_copy" }),
|
|
3709
3849
|
done ? "Kopiert" : "Copy"
|
|
3710
3850
|
]
|
|
3711
3851
|
}
|
|
@@ -3713,35 +3853,35 @@ function CopyBtn({ text }) {
|
|
|
3713
3853
|
}
|
|
3714
3854
|
function StepView({ step }) {
|
|
3715
3855
|
const isSpecial = step.method === "-" || step.method === "import()" || step.method === "import()+call";
|
|
3716
|
-
return /* @__PURE__ */
|
|
3717
|
-
/* @__PURE__ */
|
|
3718
|
-
/* @__PURE__ */
|
|
3719
|
-
/* @__PURE__ */
|
|
3720
|
-
step.durationMs !== void 0 && /* @__PURE__ */
|
|
3856
|
+
return /* @__PURE__ */ jsxs20("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: [
|
|
3857
|
+
/* @__PURE__ */ jsxs20("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }, children: [
|
|
3858
|
+
/* @__PURE__ */ jsx22("span", { style: { fontSize: 11, fontWeight: 700, color: step.ok === false ? "#f87171" : "#4ade80" }, children: step.ok === false ? "\u2717" : "\u2713" }),
|
|
3859
|
+
/* @__PURE__ */ jsx22("span", { style: { fontSize: 11, fontWeight: 600, color: "rgba(255,255,255,0.7)", flex: 1 }, children: step.label }),
|
|
3860
|
+
step.durationMs !== void 0 && /* @__PURE__ */ jsxs20("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)" }, children: [
|
|
3721
3861
|
step.durationMs,
|
|
3722
3862
|
"ms"
|
|
3723
3863
|
] }),
|
|
3724
|
-
/* @__PURE__ */
|
|
3864
|
+
/* @__PURE__ */ jsx22(CopyBtn, { text: JSON.stringify(step, null, 2) })
|
|
3725
3865
|
] }),
|
|
3726
|
-
!isSpecial && /* @__PURE__ */
|
|
3727
|
-
/* @__PURE__ */
|
|
3866
|
+
!isSpecial && /* @__PURE__ */ jsxs20("div", { style: { marginBottom: 5 }, children: [
|
|
3867
|
+
/* @__PURE__ */ jsxs20("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginBottom: 2 }, children: [
|
|
3728
3868
|
"\u2192 ",
|
|
3729
3869
|
step.method,
|
|
3730
3870
|
" ",
|
|
3731
3871
|
step.url
|
|
3732
3872
|
] }),
|
|
3733
|
-
Object.keys(step.reqHeaders).length > 0 && /* @__PURE__ */
|
|
3734
|
-
step.reqBody && /* @__PURE__ */
|
|
3873
|
+
Object.keys(step.reqHeaders).length > 0 && /* @__PURE__ */ jsx22("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") }),
|
|
3874
|
+
step.reqBody && /* @__PURE__ */ jsx22("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 })
|
|
3735
3875
|
] }),
|
|
3736
|
-
step.error && /* @__PURE__ */
|
|
3737
|
-
!step.error && (step.resStatus !== void 0 || step.resBody) && /* @__PURE__ */
|
|
3738
|
-
step.resStatus !== void 0 && /* @__PURE__ */
|
|
3876
|
+
step.error && /* @__PURE__ */ jsx22("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 }),
|
|
3877
|
+
!step.error && (step.resStatus !== void 0 || step.resBody) && /* @__PURE__ */ jsxs20("div", { children: [
|
|
3878
|
+
step.resStatus !== void 0 && /* @__PURE__ */ jsxs20("div", { style: { fontSize: 11, fontWeight: 700, color: (step.resStatus || 0) < 300 ? "#4ade80" : "#f87171", marginBottom: 3 }, children: [
|
|
3739
3879
|
"\u2190 ",
|
|
3740
3880
|
step.resStatus,
|
|
3741
3881
|
" ",
|
|
3742
3882
|
step.resStatusText
|
|
3743
3883
|
] }),
|
|
3744
|
-
step.resBody && /* @__PURE__ */
|
|
3884
|
+
step.resBody && /* @__PURE__ */ jsx22("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) })
|
|
3745
3885
|
] })
|
|
3746
3886
|
] });
|
|
3747
3887
|
}
|
|
@@ -3757,15 +3897,15 @@ function TestCard({
|
|
|
3757
3897
|
onToggle
|
|
3758
3898
|
}) {
|
|
3759
3899
|
const hasResult = state && state.status !== "idle";
|
|
3760
|
-
return /* @__PURE__ */
|
|
3761
|
-
/* @__PURE__ */
|
|
3762
|
-
/* @__PURE__ */
|
|
3763
|
-
/* @__PURE__ */
|
|
3764
|
-
/* @__PURE__ */
|
|
3765
|
-
/* @__PURE__ */
|
|
3900
|
+
return /* @__PURE__ */ jsxs20("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: [
|
|
3901
|
+
/* @__PURE__ */ jsxs20("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "9px 10px" }, children: [
|
|
3902
|
+
/* @__PURE__ */ jsx22("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 }),
|
|
3903
|
+
/* @__PURE__ */ jsxs20("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
3904
|
+
/* @__PURE__ */ jsx22("div", { style: { fontSize: 13, fontWeight: 700, color: "#fff" }, children: label }),
|
|
3905
|
+
/* @__PURE__ */ jsx22("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: desc })
|
|
3766
3906
|
] }),
|
|
3767
|
-
hasResult && state?.status !== "running" && /* @__PURE__ */
|
|
3768
|
-
/* @__PURE__ */
|
|
3907
|
+
hasResult && state?.status !== "running" && /* @__PURE__ */ jsx22("button", { onClick: onToggle, style: { background: "none", border: "none", color: "rgba(255,255,255,0.3)", cursor: "pointer", padding: 2, lineHeight: 0 }, children: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: expanded ? "expand_less" : "expand_more" }) }),
|
|
3908
|
+
/* @__PURE__ */ jsx22(
|
|
3769
3909
|
"button",
|
|
3770
3910
|
{
|
|
3771
3911
|
onClick: onRun,
|
|
@@ -3775,20 +3915,20 @@ function TestCard({
|
|
|
3775
3915
|
}
|
|
3776
3916
|
)
|
|
3777
3917
|
] }),
|
|
3778
|
-
hasResult && /* @__PURE__ */
|
|
3779
|
-
/* @__PURE__ */
|
|
3780
|
-
/* @__PURE__ */
|
|
3781
|
-
/* @__PURE__ */
|
|
3918
|
+
hasResult && /* @__PURE__ */ jsxs20("div", { style: { borderTop: "1px solid rgba(255,255,255,0.05)" }, children: [
|
|
3919
|
+
/* @__PURE__ */ jsxs20("div", { style: { padding: "4px 10px 5px", display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
3920
|
+
/* @__PURE__ */ jsx22("span", { style: { fontSize: 11, fontWeight: 700, color: state.status === "ok" ? "#4ade80" : "#f87171" }, children: state.status === "ok" ? "\u2713 OK" : state.status === "running" ? "\u2026" : "\u2717 Fehler" }),
|
|
3921
|
+
/* @__PURE__ */ jsxs20("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)" }, children: [
|
|
3782
3922
|
state.totalMs,
|
|
3783
3923
|
"ms \xB7 ",
|
|
3784
3924
|
state.steps.length,
|
|
3785
3925
|
" Step",
|
|
3786
3926
|
state.steps.length !== 1 ? "s" : ""
|
|
3787
3927
|
] }),
|
|
3788
|
-
/* @__PURE__ */
|
|
3789
|
-
/* @__PURE__ */
|
|
3928
|
+
/* @__PURE__ */ jsx22("div", { style: { flex: 1 } }),
|
|
3929
|
+
/* @__PURE__ */ jsx22(CopyBtn, { text: JSON.stringify(state, null, 2) })
|
|
3790
3930
|
] }),
|
|
3791
|
-
expanded && state.steps.map((step, i) => /* @__PURE__ */
|
|
3931
|
+
expanded && state.steps.map((step, i) => /* @__PURE__ */ jsx22("div", { style: { padding: "0 10px 4px" }, children: /* @__PURE__ */ jsx22(StepView, { step }) }, i))
|
|
3792
3932
|
] })
|
|
3793
3933
|
] });
|
|
3794
3934
|
}
|
|
@@ -3800,10 +3940,10 @@ var EVENT_TYPE_COLORS = {
|
|
|
3800
3940
|
};
|
|
3801
3941
|
function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadStatus }) {
|
|
3802
3942
|
if (!events.length) {
|
|
3803
|
-
return /* @__PURE__ */
|
|
3943
|
+
return /* @__PURE__ */ jsx22("div", { style: { padding: "12px 14px", fontSize: 12, color: "rgba(255,255,255,0.3)", fontStyle: "italic" }, children: "Noch keine Events geladen." });
|
|
3804
3944
|
}
|
|
3805
3945
|
const sorted = [...events].sort((a, b) => b.ts - a.ts).slice(0, 30);
|
|
3806
|
-
return /* @__PURE__ */
|
|
3946
|
+
return /* @__PURE__ */ jsxs20("div", { style: { padding: "6px 8px 4px" }, children: [
|
|
3807
3947
|
sorted.map((e, i) => {
|
|
3808
3948
|
const eKey = `${e.ts}_${e.clientId}`;
|
|
3809
3949
|
const isConfirmed = confirmedEventKeys.has(eKey);
|
|
@@ -3816,47 +3956,47 @@ function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadSta
|
|
|
3816
3956
|
const uploadStatus = imgId ? imageUploadStatus.get(imgId) : void 0;
|
|
3817
3957
|
const payloadStr = JSON.stringify(e.payload ?? {});
|
|
3818
3958
|
const payloadPreview = payloadStr.length > 70 ? payloadStr.slice(0, 70) + "\u2026" : payloadStr;
|
|
3819
|
-
return /* @__PURE__ */
|
|
3820
|
-
/* @__PURE__ */
|
|
3821
|
-
/* @__PURE__ */
|
|
3822
|
-
/* @__PURE__ */
|
|
3823
|
-
/* @__PURE__ */
|
|
3824
|
-
/* @__PURE__ */
|
|
3825
|
-
/* @__PURE__ */
|
|
3826
|
-
isConfirmed ? /* @__PURE__ */
|
|
3827
|
-
/* @__PURE__ */
|
|
3959
|
+
return /* @__PURE__ */ jsxs20("div", { style: { display: "flex", gap: 7, alignItems: "flex-start", padding: "6px 2px", borderBottom: "1px solid rgba(255,255,255,0.05)" }, children: [
|
|
3960
|
+
/* @__PURE__ */ jsx22("div", { style: { width: 36, height: 36, flexShrink: 0, borderRadius: 4, overflow: "hidden", background: "rgba(255,255,255,0.05)", display: "flex", alignItems: "center", justifyContent: "center" }, children: isImageEvent ? galleryItem?.base64 ? /* @__PURE__ */ jsx22("img", { src: galleryItem.base64, style: { width: "100%", height: "100%", objectFit: "cover" } }) : /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 18, color: "rgba(255,255,255,0.2)" }, children: "image" }) : /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 16, color: "rgba(255,255,255,0.15)" }, children: e.type === "tag_upserted" ? "label" : e.type === "metadata_updated" ? "edit_note" : "data_object" }) }),
|
|
3961
|
+
/* @__PURE__ */ jsxs20("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
3962
|
+
/* @__PURE__ */ jsxs20("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
|
|
3963
|
+
/* @__PURE__ */ jsx22("span", { style: { fontSize: 11, fontWeight: 700, color: typeColor }, children: e.type }),
|
|
3964
|
+
/* @__PURE__ */ jsx22("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", fontVariantNumeric: "tabular-nums" }, children: timeStr }),
|
|
3965
|
+
/* @__PURE__ */ jsx22("div", { style: { flex: 1 } }),
|
|
3966
|
+
isConfirmed ? /* @__PURE__ */ jsxs20("span", { style: { fontSize: 9, fontWeight: 700, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3967
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "check_circle" }),
|
|
3828
3968
|
"HF"
|
|
3829
|
-
] }) : /* @__PURE__ */
|
|
3830
|
-
/* @__PURE__ */
|
|
3969
|
+
] }) : /* @__PURE__ */ jsxs20("span", { style: { fontSize: 9, fontWeight: 700, color: "#fbbf24", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3970
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "schedule" }),
|
|
3831
3971
|
"lokal"
|
|
3832
3972
|
] })
|
|
3833
3973
|
] }),
|
|
3834
|
-
isImageEvent && /* @__PURE__ */
|
|
3835
|
-
uploadStatus === "done" && /* @__PURE__ */
|
|
3836
|
-
/* @__PURE__ */
|
|
3974
|
+
isImageEvent && /* @__PURE__ */ jsxs20("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3, flexWrap: "wrap" }, children: [
|
|
3975
|
+
uploadStatus === "done" && /* @__PURE__ */ jsxs20("span", { style: { fontSize: 9, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3976
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_done" }),
|
|
3837
3977
|
"Upload \u2713"
|
|
3838
3978
|
] }),
|
|
3839
|
-
uploadStatus === "uploading" && /* @__PURE__ */
|
|
3840
|
-
/* @__PURE__ */
|
|
3979
|
+
uploadStatus === "uploading" && /* @__PURE__ */ jsxs20("span", { style: { fontSize: 9, color: "#60a5fa", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3980
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_upload" }),
|
|
3841
3981
|
"l\xE4dt hoch\u2026"
|
|
3842
3982
|
] }),
|
|
3843
|
-
uploadStatus === "failed" && /* @__PURE__ */
|
|
3844
|
-
/* @__PURE__ */
|
|
3983
|
+
uploadStatus === "failed" && /* @__PURE__ */ jsxs20("span", { style: { fontSize: 9, color: "#f87171", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3984
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_off" }),
|
|
3845
3985
|
"Upload fehlgeschlagen"
|
|
3846
3986
|
] }),
|
|
3847
|
-
galleryItem?.base64 ? /* @__PURE__ */
|
|
3848
|
-
/* @__PURE__ */
|
|
3987
|
+
galleryItem?.base64 ? /* @__PURE__ */ jsxs20("span", { style: { fontSize: 9, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3988
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "photo" }),
|
|
3849
3989
|
uploadStatus ? "lokal" : "von HF geladen"
|
|
3850
|
-
] }) : /* @__PURE__ */
|
|
3851
|
-
/* @__PURE__ */
|
|
3990
|
+
] }) : /* @__PURE__ */ jsxs20("span", { style: { fontSize: 9, color: "#f87171", display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
3991
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "broken_image" }),
|
|
3852
3992
|
uploadStatus === "failed" ? "Binary nicht auf HF" : "wird geladen\u2026"
|
|
3853
3993
|
] })
|
|
3854
3994
|
] }),
|
|
3855
|
-
/* @__PURE__ */
|
|
3995
|
+
/* @__PURE__ */ jsx22("div", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: payloadPreview })
|
|
3856
3996
|
] })
|
|
3857
3997
|
] }, `${eKey}_${i}`);
|
|
3858
3998
|
}),
|
|
3859
|
-
/* @__PURE__ */
|
|
3999
|
+
/* @__PURE__ */ jsxs20("div", { style: { padding: "6px 0 2px", fontSize: 9, color: "rgba(255,255,255,0.2)", textAlign: "right" }, children: [
|
|
3860
4000
|
events.length,
|
|
3861
4001
|
" Events gesamt \xB7 ",
|
|
3862
4002
|
[...confirmedEventKeys].length,
|
|
@@ -3865,9 +4005,9 @@ function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadSta
|
|
|
3865
4005
|
] });
|
|
3866
4006
|
}
|
|
3867
4007
|
function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEventKeys = /* @__PURE__ */ new Set(), imageUploadStatus = /* @__PURE__ */ new Map(), missingImages = [] }) {
|
|
3868
|
-
const [selected, setSelected] =
|
|
3869
|
-
const [results, setResults] =
|
|
3870
|
-
const [expanded, setExpanded] =
|
|
4008
|
+
const [selected, setSelected] = useState17(null);
|
|
4009
|
+
const [results, setResults] = useState17({});
|
|
4010
|
+
const [expanded, setExpanded] = useState17({});
|
|
3871
4011
|
const withResults = galleryItems.filter((g) => g.base64 && g.status === "done");
|
|
3872
4012
|
const setRunning = (id) => setResults((r) => ({ ...r, [id]: { status: "running", steps: [], totalMs: 0 } }));
|
|
3873
4013
|
const setDone = (id, steps, t0) => {
|
|
@@ -3915,15 +4055,15 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3915
4055
|
{ id: "img-hub", label: "Upload hub lib", icon: "package_2", desc: "uploadFile() via @huggingface/hub" },
|
|
3916
4056
|
{ id: "img-cdn", label: "Upload CDN lib", icon: "language", desc: "uploadFile() via esm.sh hub lib" }
|
|
3917
4057
|
];
|
|
3918
|
-
return /* @__PURE__ */
|
|
3919
|
-
noToken && /* @__PURE__ */
|
|
3920
|
-
/* @__PURE__ */
|
|
4058
|
+
return /* @__PURE__ */ jsxs20("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflowY: "auto", padding: "12px 10px 80px", boxSizing: "border-box", fontFamily: "inherit" }, children: [
|
|
4059
|
+
noToken && /* @__PURE__ */ jsx22("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." }),
|
|
4060
|
+
/* @__PURE__ */ jsx22("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsx22(
|
|
3921
4061
|
CollapsibleCard,
|
|
3922
4062
|
{
|
|
3923
4063
|
title: "Event Monitor",
|
|
3924
|
-
icon: /* @__PURE__ */
|
|
4064
|
+
icon: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "bolt" }),
|
|
3925
4065
|
defaultOpen: true,
|
|
3926
|
-
children: /* @__PURE__ */
|
|
4066
|
+
children: /* @__PURE__ */ jsx22(
|
|
3927
4067
|
EventMonitor,
|
|
3928
4068
|
{
|
|
3929
4069
|
events: allEvents,
|
|
@@ -3934,52 +4074,52 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3934
4074
|
)
|
|
3935
4075
|
}
|
|
3936
4076
|
) }),
|
|
3937
|
-
missingImages.length > 0 && /* @__PURE__ */
|
|
4077
|
+
missingImages.length > 0 && /* @__PURE__ */ jsx22("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsx22(
|
|
3938
4078
|
CollapsibleCard,
|
|
3939
4079
|
{
|
|
3940
4080
|
title: `Fehlende Bilder auf HF (${missingImages.length})`,
|
|
3941
|
-
icon: /* @__PURE__ */
|
|
4081
|
+
icon: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "broken_image" }),
|
|
3942
4082
|
defaultOpen: false,
|
|
3943
|
-
children: /* @__PURE__ */
|
|
3944
|
-
/* @__PURE__ */
|
|
3945
|
-
/* @__PURE__ */
|
|
3946
|
-
/* @__PURE__ */
|
|
4083
|
+
children: /* @__PURE__ */ jsxs20("div", { style: { padding: "8px 10px 4px" }, children: [
|
|
4084
|
+
/* @__PURE__ */ jsx22("div", { style: { fontSize: 11, color: "rgba(255,255,255,0.4)", marginBottom: 8 }, children: "Metadata-Eintr\xE4ge ohne Bild auf HuggingFace \u2014 Orphaned entries." }),
|
|
4085
|
+
/* @__PURE__ */ jsxs20("div", { style: { display: "flex", gap: 8, marginBottom: 8, fontSize: 11, color: "rgba(255,255,255,0.5)" }, children: [
|
|
4086
|
+
/* @__PURE__ */ jsxs20("span", { children: [
|
|
3947
4087
|
"UUID (Flow-App): ",
|
|
3948
4088
|
missingImages.filter((e) => !e.filename).length
|
|
3949
4089
|
] }),
|
|
3950
|
-
/* @__PURE__ */
|
|
3951
|
-
/* @__PURE__ */
|
|
4090
|
+
/* @__PURE__ */ jsx22("span", { children: "\xB7" }),
|
|
4091
|
+
/* @__PURE__ */ jsxs20("span", { children: [
|
|
3952
4092
|
"Filename (Server-Upload): ",
|
|
3953
4093
|
missingImages.filter((e) => !!e.filename).length
|
|
3954
4094
|
] })
|
|
3955
4095
|
] }),
|
|
3956
|
-
/* @__PURE__ */
|
|
3957
|
-
/* @__PURE__ */
|
|
3958
|
-
/* @__PURE__ */
|
|
3959
|
-
/* @__PURE__ */
|
|
4096
|
+
/* @__PURE__ */ jsx22("div", { style: { maxHeight: 300, overflowY: "auto", fontFamily: "monospace", fontSize: 10 }, children: missingImages.map((e) => /* @__PURE__ */ jsxs20("div", { style: { padding: "3px 0", borderBottom: "1px solid rgba(255,255,255,0.04)", color: "rgba(255,255,255,0.5)", display: "flex", gap: 8 }, children: [
|
|
4097
|
+
/* @__PURE__ */ jsx22("span", { style: { color: e.filename ? "#fb923c" : "#60a5fa", minWidth: 60 }, children: e.filename ? "filename" : "uuid" }),
|
|
4098
|
+
/* @__PURE__ */ jsx22("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: e.filename ?? e.id }),
|
|
4099
|
+
/* @__PURE__ */ jsx22("span", { style: { color: "rgba(255,255,255,0.3)" }, children: new Date(e.timestamp).toLocaleDateString("de") })
|
|
3960
4100
|
] }, e.id)) })
|
|
3961
4101
|
] })
|
|
3962
4102
|
}
|
|
3963
4103
|
) }),
|
|
3964
|
-
/* @__PURE__ */
|
|
4104
|
+
/* @__PURE__ */ jsx22(
|
|
3965
4105
|
CollapsibleCard,
|
|
3966
4106
|
{
|
|
3967
4107
|
title: "Upload Tests",
|
|
3968
|
-
icon: /* @__PURE__ */
|
|
4108
|
+
icon: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "science" }),
|
|
3969
4109
|
defaultOpen: false,
|
|
3970
|
-
children: /* @__PURE__ */
|
|
3971
|
-
/* @__PURE__ */
|
|
3972
|
-
/* @__PURE__ */
|
|
4110
|
+
children: /* @__PURE__ */ jsxs20("div", { style: { padding: "10px 10px 4px" }, children: [
|
|
4111
|
+
/* @__PURE__ */ jsxs20("div", { style: { marginBottom: 14 }, children: [
|
|
4112
|
+
/* @__PURE__ */ jsxs20("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }, children: [
|
|
3973
4113
|
"Bild ausw\xE4hlen (",
|
|
3974
4114
|
withResults.length,
|
|
3975
4115
|
" verf\xFCgbar)"
|
|
3976
4116
|
] }),
|
|
3977
|
-
withResults.length === 0 ? /* @__PURE__ */
|
|
4117
|
+
withResults.length === 0 ? /* @__PURE__ */ jsx22("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__ */ jsx22("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }, children: withResults.slice(0, 12).map((g) => /* @__PURE__ */ jsx22(
|
|
3978
4118
|
"button",
|
|
3979
4119
|
{
|
|
3980
4120
|
onClick: () => setSelected(g),
|
|
3981
4121
|
style: { padding: 0, border: `2px solid ${selected?.id === g.id ? "#0284c7" : "transparent"}`, borderRadius: 6, cursor: "pointer", overflow: "hidden", background: "none", lineHeight: 0 },
|
|
3982
|
-
children: /* @__PURE__ */
|
|
4122
|
+
children: /* @__PURE__ */ jsx22(
|
|
3983
4123
|
"img",
|
|
3984
4124
|
{
|
|
3985
4125
|
src: g.base64,
|
|
@@ -3990,38 +4130,38 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3990
4130
|
},
|
|
3991
4131
|
g.id
|
|
3992
4132
|
)) }),
|
|
3993
|
-
selected && /* @__PURE__ */
|
|
3994
|
-
/* @__PURE__ */
|
|
4133
|
+
selected && /* @__PURE__ */ jsxs20("div", { style: { marginTop: 10, display: "flex", gap: 10, alignItems: "flex-start" }, children: [
|
|
4134
|
+
/* @__PURE__ */ jsx22(
|
|
3995
4135
|
"img",
|
|
3996
4136
|
{
|
|
3997
4137
|
src: selected.base64,
|
|
3998
4138
|
style: { width: 80, height: 80, objectFit: "cover", borderRadius: 8, border: "1px solid rgba(255,255,255,0.1)", flexShrink: 0 }
|
|
3999
4139
|
}
|
|
4000
4140
|
),
|
|
4001
|
-
/* @__PURE__ */
|
|
4002
|
-
/* @__PURE__ */
|
|
4003
|
-
/* @__PURE__ */
|
|
4141
|
+
/* @__PURE__ */ jsxs20("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
4142
|
+
/* @__PURE__ */ jsx22("div", { style: { fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.7)", marginBottom: 2 }, children: "Ausgew\xE4hlt" }),
|
|
4143
|
+
/* @__PURE__ */ jsxs20("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", wordBreak: "break-all" }, children: [
|
|
4004
4144
|
"ID: ",
|
|
4005
4145
|
selected.id
|
|
4006
4146
|
] }),
|
|
4007
|
-
/* @__PURE__ */
|
|
4147
|
+
/* @__PURE__ */ jsxs20("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }, children: [
|
|
4008
4148
|
"Ziel: test/",
|
|
4009
4149
|
selected.id,
|
|
4010
4150
|
".jpg"
|
|
4011
4151
|
] }),
|
|
4012
|
-
selected.prompt && /* @__PURE__ */
|
|
4152
|
+
selected.prompt && /* @__PURE__ */ jsx22("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selected.prompt })
|
|
4013
4153
|
] })
|
|
4014
4154
|
] })
|
|
4015
4155
|
] }),
|
|
4016
|
-
/* @__PURE__ */
|
|
4017
|
-
/* @__PURE__ */
|
|
4156
|
+
/* @__PURE__ */ jsxs20("div", { style: { marginBottom: 14 }, children: [
|
|
4157
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
4018
4158
|
"Bild hochladen \u2192 test/",
|
|
4019
4159
|
"{",
|
|
4020
4160
|
"id",
|
|
4021
4161
|
"}",
|
|
4022
4162
|
".jpg"
|
|
4023
4163
|
] }),
|
|
4024
|
-
imgTests.map((t) => /* @__PURE__ */
|
|
4164
|
+
imgTests.map((t) => /* @__PURE__ */ jsx22(
|
|
4025
4165
|
TestCard,
|
|
4026
4166
|
{
|
|
4027
4167
|
id: t.id,
|
|
@@ -4037,13 +4177,13 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
4037
4177
|
t.id
|
|
4038
4178
|
))
|
|
4039
4179
|
] }),
|
|
4040
|
-
/* @__PURE__ */
|
|
4041
|
-
/* @__PURE__ */
|
|
4180
|
+
/* @__PURE__ */ jsxs20("div", { style: { marginBottom: 4 }, children: [
|
|
4181
|
+
/* @__PURE__ */ jsxs20("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: [
|
|
4042
4182
|
"Event schreiben \u2192 ",
|
|
4043
4183
|
namespace || "(kein namespace)",
|
|
4044
4184
|
"test/events/"
|
|
4045
4185
|
] }),
|
|
4046
|
-
/* @__PURE__ */
|
|
4186
|
+
/* @__PURE__ */ jsx22(
|
|
4047
4187
|
TestCard,
|
|
4048
4188
|
{
|
|
4049
4189
|
id: "event",
|
|
@@ -4065,10 +4205,10 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
4065
4205
|
}
|
|
4066
4206
|
|
|
4067
4207
|
// src/components/ServerTab.tsx
|
|
4068
|
-
import { useState as
|
|
4069
|
-
import { jsx as
|
|
4208
|
+
import { useState as useState18, useEffect as useEffect6 } from "react";
|
|
4209
|
+
import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
4070
4210
|
function StarRating({ rating = 0 }) {
|
|
4071
|
-
return /* @__PURE__ */
|
|
4211
|
+
return /* @__PURE__ */ jsx23("div", { className: "flex gap-[2px]", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx23("span", { className: `material-symbols-outlined text-[12px] ${i <= rating ? "text-yellow-400" : "text-white/15"}`, children: "star" }, i)) });
|
|
4072
4212
|
}
|
|
4073
4213
|
async function serverGet(baseUrl, path) {
|
|
4074
4214
|
const url = `${baseUrl.replace(/\/$/, "")}${path}`;
|
|
@@ -4078,20 +4218,20 @@ async function serverGet(baseUrl, path) {
|
|
|
4078
4218
|
return json && typeof json === "object" && "data" in json ? json.data : json;
|
|
4079
4219
|
}
|
|
4080
4220
|
function ServerTab({ serverBaseUrl }) {
|
|
4081
|
-
const [step, setStep] =
|
|
4082
|
-
const [users, setUsers] =
|
|
4083
|
-
const [usersLoading, setUsersLoading] =
|
|
4084
|
-
const [usersError, setUsersError] =
|
|
4085
|
-
const [selectedUser, setSelectedUser] =
|
|
4086
|
-
const [contexts, setContexts] =
|
|
4087
|
-
const [contextsLoading, setContextsLoading] =
|
|
4088
|
-
const [selectedContext, setSelectedContext] =
|
|
4089
|
-
const [tags, setTags] =
|
|
4090
|
-
const [items, setItems] =
|
|
4091
|
-
const [libLoading, setLibLoading] =
|
|
4092
|
-
const [libError, setLibError] =
|
|
4093
|
-
const [activeTag, setActiveTag] =
|
|
4094
|
-
const [preview, setPreview] =
|
|
4221
|
+
const [step, setStep] = useState18("user");
|
|
4222
|
+
const [users, setUsers] = useState18([]);
|
|
4223
|
+
const [usersLoading, setUsersLoading] = useState18(false);
|
|
4224
|
+
const [usersError, setUsersError] = useState18(null);
|
|
4225
|
+
const [selectedUser, setSelectedUser] = useState18(null);
|
|
4226
|
+
const [contexts, setContexts] = useState18([]);
|
|
4227
|
+
const [contextsLoading, setContextsLoading] = useState18(false);
|
|
4228
|
+
const [selectedContext, setSelectedContext] = useState18(null);
|
|
4229
|
+
const [tags, setTags] = useState18([]);
|
|
4230
|
+
const [items, setItems] = useState18([]);
|
|
4231
|
+
const [libLoading, setLibLoading] = useState18(false);
|
|
4232
|
+
const [libError, setLibError] = useState18(null);
|
|
4233
|
+
const [activeTag, setActiveTag] = useState18(null);
|
|
4234
|
+
const [preview, setPreview] = useState18(null);
|
|
4095
4235
|
useEffect6(() => {
|
|
4096
4236
|
if (!serverBaseUrl) return;
|
|
4097
4237
|
setUsersLoading(true);
|
|
@@ -4146,54 +4286,54 @@ function ServerTab({ serverBaseUrl }) {
|
|
|
4146
4286
|
};
|
|
4147
4287
|
const filteredItems = activeTag ? items.filter((item) => item.tags?.some((t) => t.l === activeTag)) : items;
|
|
4148
4288
|
if (!serverBaseUrl) return null;
|
|
4149
|
-
return /* @__PURE__ */
|
|
4150
|
-
/* @__PURE__ */
|
|
4151
|
-
step !== "user" && /* @__PURE__ */
|
|
4152
|
-
/* @__PURE__ */
|
|
4289
|
+
return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col h-full min-h-0", children: [
|
|
4290
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-white/8", children: [
|
|
4291
|
+
step !== "user" && /* @__PURE__ */ jsx23("button", { onClick: reset, className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[18px]", children: "arrow_back" }) }),
|
|
4292
|
+
/* @__PURE__ */ jsxs21("span", { className: "text-[11px] font-medium text-white/40 tracking-wide flex-1", children: [
|
|
4153
4293
|
step === "user" && "Server Browser",
|
|
4154
4294
|
step === "context" && `${selectedUser?.username} \u2014 Kontext w\xE4hlen`,
|
|
4155
4295
|
step === "library" && `${selectedUser?.username} / ${selectedContext?.label || selectedContext?.name || selectedContext?.id}`
|
|
4156
4296
|
] })
|
|
4157
4297
|
] }),
|
|
4158
|
-
step === "user" && /* @__PURE__ */
|
|
4159
|
-
usersLoading && /* @__PURE__ */
|
|
4160
|
-
usersError && /* @__PURE__ */
|
|
4161
|
-
!usersLoading && users.map((u) => /* @__PURE__ */
|
|
4298
|
+
step === "user" && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-3 gap-2", children: [
|
|
4299
|
+
usersLoading && /* @__PURE__ */ jsx23("p", { className: "text-white/30 text-[11px] text-center py-4", children: "Lade User\u2026" }),
|
|
4300
|
+
usersError && /* @__PURE__ */ jsx23("p", { className: "text-red-400 text-[11px] text-center py-4", children: usersError }),
|
|
4301
|
+
!usersLoading && users.map((u) => /* @__PURE__ */ jsxs21(
|
|
4162
4302
|
"button",
|
|
4163
4303
|
{
|
|
4164
4304
|
onClick: () => selectUser(u),
|
|
4165
4305
|
className: "flex items-center gap-3 px-3 py-2.5 rounded-xl border border-white/8 hover:border-white/20 hover:bg-white/5 transition-all text-left",
|
|
4166
4306
|
children: [
|
|
4167
|
-
/* @__PURE__ */
|
|
4168
|
-
/* @__PURE__ */
|
|
4169
|
-
/* @__PURE__ */
|
|
4170
|
-
/* @__PURE__ */
|
|
4307
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px] text-white/40", children: "person" }),
|
|
4308
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
4309
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[12px] font-medium text-white", children: u.username }),
|
|
4310
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/30", children: u.id })
|
|
4171
4311
|
] }),
|
|
4172
|
-
contextsLoading && selectedUser?.id === u.id ? /* @__PURE__ */
|
|
4312
|
+
contextsLoading && selectedUser?.id === u.id ? /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[16px] text-white/30 animate-spin", children: "progress_activity" }) : /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[16px] text-white/20", children: "chevron_right" })
|
|
4173
4313
|
]
|
|
4174
4314
|
},
|
|
4175
4315
|
u.id
|
|
4176
4316
|
))
|
|
4177
4317
|
] }),
|
|
4178
|
-
step === "context" && /* @__PURE__ */
|
|
4318
|
+
step === "context" && /* @__PURE__ */ jsx23("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-3 gap-2", children: contexts.map((ctx) => /* @__PURE__ */ jsxs21(
|
|
4179
4319
|
"button",
|
|
4180
4320
|
{
|
|
4181
4321
|
onClick: () => loadLibrary(selectedUser, ctx),
|
|
4182
4322
|
className: "flex items-center gap-3 px-3 py-2.5 rounded-xl border border-white/8 hover:border-white/20 hover:bg-white/5 transition-all text-left",
|
|
4183
4323
|
children: [
|
|
4184
|
-
/* @__PURE__ */
|
|
4185
|
-
/* @__PURE__ */
|
|
4186
|
-
/* @__PURE__ */
|
|
4187
|
-
ctx.description && /* @__PURE__ */
|
|
4324
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px] text-white/40", children: "folder" }),
|
|
4325
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col flex-1 min-w-0", children: [
|
|
4326
|
+
/* @__PURE__ */ jsx23("span", { className: "text-[12px] font-medium text-white", children: ctx.label || ctx.name || ctx.id }),
|
|
4327
|
+
ctx.description && /* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/30 truncate", children: ctx.description })
|
|
4188
4328
|
] }),
|
|
4189
|
-
/* @__PURE__ */
|
|
4329
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[16px] text-white/20", children: "chevron_right" })
|
|
4190
4330
|
]
|
|
4191
4331
|
},
|
|
4192
4332
|
ctx.id
|
|
4193
4333
|
)) }),
|
|
4194
|
-
step === "library" && /* @__PURE__ */
|
|
4195
|
-
tags.length > 0 && /* @__PURE__ */
|
|
4196
|
-
/* @__PURE__ */
|
|
4334
|
+
step === "library" && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
4335
|
+
tags.length > 0 && /* @__PURE__ */ jsxs21("div", { className: "flex gap-1.5 px-3 py-2 overflow-x-auto border-b border-white/8", style: { scrollbarWidth: "none" }, children: [
|
|
4336
|
+
/* @__PURE__ */ jsx23(
|
|
4197
4337
|
"button",
|
|
4198
4338
|
{
|
|
4199
4339
|
onClick: () => setActiveTag(null),
|
|
@@ -4201,7 +4341,7 @@ function ServerTab({ serverBaseUrl }) {
|
|
|
4201
4341
|
children: "Alle"
|
|
4202
4342
|
}
|
|
4203
4343
|
),
|
|
4204
|
-
tags.map((t) => /* @__PURE__ */
|
|
4344
|
+
tags.map((t) => /* @__PURE__ */ jsx23(
|
|
4205
4345
|
"button",
|
|
4206
4346
|
{
|
|
4207
4347
|
onClick: () => setActiveTag(activeTag === t.label ? null : t.label),
|
|
@@ -4211,22 +4351,22 @@ function ServerTab({ serverBaseUrl }) {
|
|
|
4211
4351
|
t.id
|
|
4212
4352
|
))
|
|
4213
4353
|
] }),
|
|
4214
|
-
libLoading && /* @__PURE__ */
|
|
4215
|
-
libError && /* @__PURE__ */
|
|
4216
|
-
!libLoading && !libError && /* @__PURE__ */
|
|
4217
|
-
filteredItems.length === 0 && /* @__PURE__ */
|
|
4354
|
+
libLoading && /* @__PURE__ */ jsx23("p", { className: "text-white/30 text-[11px] text-center py-8", children: "Lade Library\u2026" }),
|
|
4355
|
+
libError && /* @__PURE__ */ jsx23("p", { className: "text-red-400 text-[11px] text-center py-8", children: libError }),
|
|
4356
|
+
!libLoading && !libError && /* @__PURE__ */ jsxs21("div", { className: "flex-1 min-h-0 overflow-y-auto p-3 grid grid-cols-2 gap-2 content-start", children: [
|
|
4357
|
+
filteredItems.length === 0 && /* @__PURE__ */ jsx23("p", { className: "col-span-2 text-white/30 text-[11px] text-center py-8", children: "Keine Eintr\xE4ge." }),
|
|
4218
4358
|
filteredItems.map((item, i) => {
|
|
4219
4359
|
const imgUrl = item.images?.[0]?.url;
|
|
4220
|
-
return /* @__PURE__ */
|
|
4360
|
+
return /* @__PURE__ */ jsxs21(
|
|
4221
4361
|
"button",
|
|
4222
4362
|
{
|
|
4223
4363
|
onClick: () => imgUrl && setPreview(imgUrl),
|
|
4224
4364
|
className: "flex flex-col rounded-xl overflow-hidden border border-white/8 hover:border-white/25 transition-all bg-white/3 text-left",
|
|
4225
4365
|
children: [
|
|
4226
|
-
imgUrl ? /* @__PURE__ */
|
|
4227
|
-
/* @__PURE__ */
|
|
4228
|
-
item.title && /* @__PURE__ */
|
|
4229
|
-
/* @__PURE__ */
|
|
4366
|
+
imgUrl ? /* @__PURE__ */ jsx23("img", { src: imgUrl, alt: "", className: "w-full aspect-square object-cover bg-white/5" }) : /* @__PURE__ */ jsx23("div", { className: "w-full aspect-square bg-white/5 flex items-center justify-center", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[24px] text-white/15", children: "image" }) }),
|
|
4367
|
+
/* @__PURE__ */ jsxs21("div", { className: "p-1.5 flex flex-col gap-0.5", children: [
|
|
4368
|
+
item.title && /* @__PURE__ */ jsx23("span", { className: "text-[10px] font-medium text-white/70 truncate", children: item.title }),
|
|
4369
|
+
/* @__PURE__ */ jsx23(StarRating, { rating: item.rating })
|
|
4230
4370
|
] })
|
|
4231
4371
|
]
|
|
4232
4372
|
},
|
|
@@ -4235,15 +4375,15 @@ function ServerTab({ serverBaseUrl }) {
|
|
|
4235
4375
|
})
|
|
4236
4376
|
] })
|
|
4237
4377
|
] }),
|
|
4238
|
-
preview && /* @__PURE__ */
|
|
4239
|
-
/* @__PURE__ */
|
|
4240
|
-
/* @__PURE__ */
|
|
4378
|
+
preview && /* @__PURE__ */ jsxs21("div", { className: "absolute inset-0 z-50 bg-black/90 flex items-center justify-center", onClick: () => setPreview(null), children: [
|
|
4379
|
+
/* @__PURE__ */ jsx23("img", { src: preview, alt: "", className: "max-w-full max-h-full object-contain" }),
|
|
4380
|
+
/* @__PURE__ */ jsx23("button", { className: "absolute top-3 right-3 text-white/60 hover:text-white", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[24px]", children: "close" }) })
|
|
4241
4381
|
] })
|
|
4242
4382
|
] });
|
|
4243
4383
|
}
|
|
4244
4384
|
|
|
4245
4385
|
// src/components/AvatarArchitectApp.tsx
|
|
4246
|
-
import { Fragment as
|
|
4386
|
+
import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
4247
4387
|
function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, serverBaseUrl, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
|
|
4248
4388
|
useEffect7(() => {
|
|
4249
4389
|
const id = "flow-styles";
|
|
@@ -4254,19 +4394,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4254
4394
|
document.head.appendChild(style);
|
|
4255
4395
|
}
|
|
4256
4396
|
}, []);
|
|
4257
|
-
const [showStart, setShowStart] =
|
|
4258
|
-
const [layoutChoice, setLayoutChoice] =
|
|
4397
|
+
const [showStart, setShowStart] = useState19(true);
|
|
4398
|
+
const [layoutChoice, setLayoutChoice] = useState19(() => {
|
|
4259
4399
|
try {
|
|
4260
4400
|
return localStorage.getItem("aa-layout") || null;
|
|
4261
4401
|
} catch {
|
|
4262
4402
|
return null;
|
|
4263
4403
|
}
|
|
4264
4404
|
});
|
|
4265
|
-
const [projectLoaded, setProjectLoaded] =
|
|
4266
|
-
const [hfToken, setHfToken] =
|
|
4267
|
-
const [hfTokenInput, setHfTokenInput] =
|
|
4268
|
-
const [isLoadingFromHF, setIsLoadingFromHF] =
|
|
4269
|
-
const [hfNamespaceLocal, setHfNamespaceLocal] =
|
|
4405
|
+
const [projectLoaded, setProjectLoaded] = useState19(false);
|
|
4406
|
+
const [hfToken, setHfToken] = useState19(initialHfToken || "");
|
|
4407
|
+
const [hfTokenInput, setHfTokenInput] = useState19(initialHfToken || "");
|
|
4408
|
+
const [isLoadingFromHF, setIsLoadingFromHF] = useState19(false);
|
|
4409
|
+
const [hfNamespaceLocal, setHfNamespaceLocal] = useState19(() => {
|
|
4270
4410
|
const KNOWN = ["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"];
|
|
4271
4411
|
const DEFAULT = "app.art-by-rolands.de/";
|
|
4272
4412
|
try {
|
|
@@ -4278,7 +4418,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4278
4418
|
return DEFAULT;
|
|
4279
4419
|
}
|
|
4280
4420
|
});
|
|
4281
|
-
const [hfNamespaceFromServer, setHfNamespaceFromServer] =
|
|
4421
|
+
const [hfNamespaceFromServer, setHfNamespaceFromServer] = useState19(null);
|
|
4282
4422
|
useEffect7(() => {
|
|
4283
4423
|
if (hfNamespace !== void 0) return;
|
|
4284
4424
|
const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
|
|
@@ -4301,36 +4441,36 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4301
4441
|
refresh: refreshHF,
|
|
4302
4442
|
hasStateZip
|
|
4303
4443
|
} = useHFState(hfToken, effectiveNamespace);
|
|
4304
|
-
const [imageUploadStatus, setImageUploadStatus] =
|
|
4305
|
-
const [bootstrapLog, setBootstrapLog] =
|
|
4306
|
-
const [isBootstrapping, setIsBootstrapping] =
|
|
4307
|
-
const [hfMissingImages, setHfMissingImages] =
|
|
4308
|
-
const syncTopSlot = /* @__PURE__ */
|
|
4309
|
-
localOnlyCount > 0 && /* @__PURE__ */
|
|
4444
|
+
const [imageUploadStatus, setImageUploadStatus] = useState19(/* @__PURE__ */ new Map());
|
|
4445
|
+
const [bootstrapLog, setBootstrapLog] = useState19([]);
|
|
4446
|
+
const [isBootstrapping, setIsBootstrapping] = useState19(false);
|
|
4447
|
+
const [hfMissingImages, setHfMissingImages] = useState19([]);
|
|
4448
|
+
const syncTopSlot = /* @__PURE__ */ jsxs22(Fragment8, { children: [
|
|
4449
|
+
localOnlyCount > 0 && /* @__PURE__ */ jsxs22("div", { style: { background: "rgba(234,179,8,0.15)", border: "1px solid rgba(234,179,8,0.3)", padding: "4px 10px", fontSize: 11, color: "#fbbf24", borderRadius: 4, marginBottom: 4 }, children: [
|
|
4310
4450
|
"\u26A0 ",
|
|
4311
4451
|
localOnlyCount,
|
|
4312
4452
|
" lokale Event",
|
|
4313
4453
|
localOnlyCount > 1 ? "s" : "",
|
|
4314
4454
|
" noch nicht auf HF best\xE4tigt"
|
|
4315
4455
|
] }),
|
|
4316
|
-
pendingBufferCount > 0 && /* @__PURE__ */
|
|
4456
|
+
pendingBufferCount > 0 && /* @__PURE__ */ jsxs22("div", { style: { background: "linear-gradient(90deg,#f59e0b,#ef4444)", padding: "4px 10px", fontSize: 11, color: "#fff", borderRadius: 4, marginBottom: 4 }, children: [
|
|
4317
4457
|
pendingBufferCount,
|
|
4318
4458
|
" \xC4nderung",
|
|
4319
4459
|
pendingBufferCount > 1 ? "en" : "",
|
|
4320
4460
|
" lokal \u2014 bei Flow-Reload verloren wenn nicht synchronisiert"
|
|
4321
4461
|
] }),
|
|
4322
|
-
eventCount > 100 && /* @__PURE__ */
|
|
4462
|
+
eventCount > 100 && /* @__PURE__ */ jsxs22("div", { style: { background: "#dc2626", color: "#fff", padding: "5px 10px", borderRadius: 4, marginBottom: 4, fontWeight: 600, fontSize: 11 }, children: [
|
|
4323
4463
|
"\u26A0 ",
|
|
4324
4464
|
eventCount,
|
|
4325
4465
|
" Events nicht konsolidiert \u2014 Konsolidierung dringend empfohlen"
|
|
4326
4466
|
] }),
|
|
4327
|
-
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */
|
|
4467
|
+
eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ jsxs22("div", { style: { background: "#44403c", color: "#a8a29e", padding: "4px 10px", borderRadius: 4, marginBottom: 4, fontSize: 11 }, children: [
|
|
4328
4468
|
eventCount,
|
|
4329
4469
|
" Events seit letzter Konsolidierung \u2014 Konsolidierung empfohlen"
|
|
4330
4470
|
] }),
|
|
4331
|
-
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */
|
|
4332
|
-
/* @__PURE__ */
|
|
4333
|
-
/* @__PURE__ */
|
|
4471
|
+
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ jsxs22("div", { style: { background: "#1c1917", border: "1px solid #44403c", borderRadius: 6, padding: "10px 12px" }, children: [
|
|
4472
|
+
/* @__PURE__ */ jsx24("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" }),
|
|
4473
|
+
/* @__PURE__ */ jsx24(
|
|
4334
4474
|
"button",
|
|
4335
4475
|
{
|
|
4336
4476
|
disabled: isBootstrapping || !effectiveNamespace,
|
|
@@ -4351,7 +4491,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4351
4491
|
children: isBootstrapping ? "Migriere\u2026" : "Legacy-Migration starten"
|
|
4352
4492
|
}
|
|
4353
4493
|
),
|
|
4354
|
-
bootstrapLog.length > 0 && /* @__PURE__ */
|
|
4494
|
+
bootstrapLog.length > 0 && /* @__PURE__ */ jsx24("div", { style: { marginTop: 6, fontFamily: "monospace", fontSize: 10, color: "#78716c", lineHeight: 1.6 }, children: bootstrapLog.map((l, i) => /* @__PURE__ */ jsx24("div", { children: l }, i)) })
|
|
4355
4495
|
] })
|
|
4356
4496
|
] });
|
|
4357
4497
|
const wsInputRef = useRef8(null);
|
|
@@ -4363,17 +4503,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4363
4503
|
setLayoutChoice(choice);
|
|
4364
4504
|
setShowStart(false);
|
|
4365
4505
|
};
|
|
4366
|
-
const [nodes, setNodes] =
|
|
4367
|
-
const [edges, setEdges] =
|
|
4368
|
-
const [history, setHistory] =
|
|
4369
|
-
const [galleryItems, setGalleryItems] =
|
|
4506
|
+
const [nodes, setNodes] = useState19([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
|
|
4507
|
+
const [edges, setEdges] = useState19([]);
|
|
4508
|
+
const [history, setHistory] = useState19([]);
|
|
4509
|
+
const [galleryItems, setGalleryItems] = useState19([]);
|
|
4370
4510
|
const galleryItemsRef = useRef8([]);
|
|
4371
4511
|
useEffect7(() => {
|
|
4372
4512
|
galleryItemsRef.current = galleryItems;
|
|
4373
4513
|
}, [galleryItems]);
|
|
4374
4514
|
const hfImageNotFoundRef = useRef8(/* @__PURE__ */ new Map());
|
|
4375
|
-
const [galleryVisibleCount, setGalleryVisibleCount] =
|
|
4376
|
-
const [historyVisibleCount, setHistoryVisibleCount] =
|
|
4515
|
+
const [galleryVisibleCount, setGalleryVisibleCount] = useState19(20);
|
|
4516
|
+
const [historyVisibleCount, setHistoryVisibleCount] = useState19(20);
|
|
4377
4517
|
const loadThumbnailsForEntries = useCallback3(async (entries) => {
|
|
4378
4518
|
for (const entry of entries) {
|
|
4379
4519
|
if (galleryItemsRef.current.find((g) => g.id === entry.id)?.base64) continue;
|
|
@@ -4432,24 +4572,24 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4432
4572
|
const sortedMeta = [...hfState.metadata].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
|
|
4433
4573
|
loadThumbnailsForEntries(sortedMeta.slice(0, historyVisibleCount));
|
|
4434
4574
|
}, [hfState, historyVisibleCount, loadThumbnailsForEntries]);
|
|
4435
|
-
const [activePrompt, setActivePrompt] =
|
|
4436
|
-
const [isSynthesizing, setIsSynthesizing] =
|
|
4437
|
-
const [activeGenerationsCount, setActiveGenerationsCount] =
|
|
4438
|
-
const [currentResult, setCurrentResult] =
|
|
4439
|
-
const [focusedNodeId, setFocusedNodeId] =
|
|
4440
|
-
const [leftTab, setLeftTab] =
|
|
4441
|
-
const [promptFeedback, setPromptFeedback] =
|
|
4442
|
-
const [lastPromptPayload, setLastPromptPayload] =
|
|
4443
|
-
const [isPromptTabGenerating, setIsPromptTabGenerating] =
|
|
4444
|
-
const [activeTab, setActiveTab] =
|
|
4445
|
-
const [mobileTab, setMobileTab] =
|
|
4446
|
-
const [middlePanel, setMiddlePanel] =
|
|
4447
|
-
const [recentLabItems, setRecentLabItems] =
|
|
4448
|
-
const [aspectRatio, setAspectRatio] =
|
|
4449
|
-
const [selectedModel, setSelectedModel] =
|
|
4450
|
-
const [seed, setSeed] =
|
|
4451
|
-
const [seedMode, setSeedMode] =
|
|
4452
|
-
const [imageCount, setImageCount] =
|
|
4575
|
+
const [activePrompt, setActivePrompt] = useState19("");
|
|
4576
|
+
const [isSynthesizing, setIsSynthesizing] = useState19(false);
|
|
4577
|
+
const [activeGenerationsCount, setActiveGenerationsCount] = useState19(0);
|
|
4578
|
+
const [currentResult, setCurrentResult] = useState19(null);
|
|
4579
|
+
const [focusedNodeId, setFocusedNodeId] = useState19(null);
|
|
4580
|
+
const [leftTab, setLeftTab] = useState19("prompt");
|
|
4581
|
+
const [promptFeedback, setPromptFeedback] = useState19(null);
|
|
4582
|
+
const [lastPromptPayload, setLastPromptPayload] = useState19(null);
|
|
4583
|
+
const [isPromptTabGenerating, setIsPromptTabGenerating] = useState19(false);
|
|
4584
|
+
const [activeTab, setActiveTab] = useState19("history");
|
|
4585
|
+
const [mobileTab, setMobileTab] = useState19("stage");
|
|
4586
|
+
const [middlePanel, setMiddlePanel] = useState19("stage");
|
|
4587
|
+
const [recentLabItems, setRecentLabItems] = useState19([]);
|
|
4588
|
+
const [aspectRatio, setAspectRatio] = useState19("1:1");
|
|
4589
|
+
const [selectedModel, setSelectedModel] = useState19("\u{1F34C} Nano Banana Pro");
|
|
4590
|
+
const [seed, setSeed] = useState19(Math.floor(Math.random() * 1e6));
|
|
4591
|
+
const [seedMode, setSeedMode] = useState19("random");
|
|
4592
|
+
const [imageCount, setImageCount] = useState19(() => {
|
|
4453
4593
|
try {
|
|
4454
4594
|
const v = parseInt(localStorage.getItem("aa-image-count") || "", 10);
|
|
4455
4595
|
return v >= 1 && v <= 8 ? v : 4;
|
|
@@ -4471,42 +4611,42 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4471
4611
|
{ label: "4 Bilder", value: "4" },
|
|
4472
4612
|
{ label: "8 Bilder", value: "8" }
|
|
4473
4613
|
];
|
|
4474
|
-
const [isLeftCollapsed, setIsLeftCollapsed] =
|
|
4475
|
-
const [isRightCollapsed, setIsRightCollapsed] =
|
|
4476
|
-
const [leftPanelWidth, setLeftPanelWidth] =
|
|
4614
|
+
const [isLeftCollapsed, setIsLeftCollapsed] = useState19(false);
|
|
4615
|
+
const [isRightCollapsed, setIsRightCollapsed] = useState19(false);
|
|
4616
|
+
const [leftPanelWidth, setLeftPanelWidth] = useState19(() => {
|
|
4477
4617
|
try {
|
|
4478
4618
|
return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
|
|
4479
4619
|
} catch {
|
|
4480
4620
|
return 260;
|
|
4481
4621
|
}
|
|
4482
4622
|
});
|
|
4483
|
-
const [rightPanelWidth, setRightPanelWidth] =
|
|
4623
|
+
const [rightPanelWidth, setRightPanelWidth] = useState19(() => {
|
|
4484
4624
|
try {
|
|
4485
4625
|
return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
|
|
4486
4626
|
} catch {
|
|
4487
4627
|
return 320;
|
|
4488
4628
|
}
|
|
4489
4629
|
});
|
|
4490
|
-
const [isPromptCollapsed, setIsPromptCollapsed] =
|
|
4491
|
-
const [projectActionState, setProjectActionState] =
|
|
4630
|
+
const [isPromptCollapsed, setIsPromptCollapsed] = useState19(false);
|
|
4631
|
+
const [projectActionState, setProjectActionState] = useState19("idle");
|
|
4492
4632
|
const syncServerDataRef = useRef8(null);
|
|
4493
|
-
const [workspaceTags, setWorkspaceTags] =
|
|
4494
|
-
const [serverProjects, setServerProjects] =
|
|
4495
|
-
const [isLoadingFromServer, setIsLoadingFromServer] =
|
|
4496
|
-
const [highContrast, setHighContrast] =
|
|
4633
|
+
const [workspaceTags, setWorkspaceTags] = useState19(null);
|
|
4634
|
+
const [serverProjects, setServerProjects] = useState19([]);
|
|
4635
|
+
const [isLoadingFromServer, setIsLoadingFromServer] = useState19(false);
|
|
4636
|
+
const [highContrast, setHighContrast] = useState19(() => {
|
|
4497
4637
|
try {
|
|
4498
4638
|
return localStorage.getItem("aa-contrast") === "high";
|
|
4499
4639
|
} catch {
|
|
4500
4640
|
return false;
|
|
4501
4641
|
}
|
|
4502
4642
|
});
|
|
4503
|
-
const [activeReferenceId, setActiveReferenceId] =
|
|
4504
|
-
const [activeReferenceThumbnail, setActiveReferenceThumbnail] =
|
|
4505
|
-
const [isScanningImage, setIsScanningImage] =
|
|
4506
|
-
const [touchStartX, setTouchStartX] =
|
|
4507
|
-
const [isFullscreen, setIsFullscreen] =
|
|
4508
|
-
const [zoomScale, setZoomScale] =
|
|
4509
|
-
const [zoomOffset, setZoomOffset] =
|
|
4643
|
+
const [activeReferenceId, setActiveReferenceId] = useState19(null);
|
|
4644
|
+
const [activeReferenceThumbnail, setActiveReferenceThumbnail] = useState19(null);
|
|
4645
|
+
const [isScanningImage, setIsScanningImage] = useState19(false);
|
|
4646
|
+
const [touchStartX, setTouchStartX] = useState19(null);
|
|
4647
|
+
const [isFullscreen, setIsFullscreen] = useState19(false);
|
|
4648
|
+
const [zoomScale, setZoomScale] = useState19(1);
|
|
4649
|
+
const [zoomOffset, setZoomOffset] = useState19({ x: 0, y: 0 });
|
|
4510
4650
|
const lastPinchDist = useRef8(null);
|
|
4511
4651
|
const lastTapTime = useRef8(0);
|
|
4512
4652
|
const dragStart = useRef8(null);
|
|
@@ -4713,15 +4853,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4713
4853
|
})();
|
|
4714
4854
|
}, [currentResult?.id, currentResult?.prompt]);
|
|
4715
4855
|
const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
|
|
4716
|
-
const runningBadge = activeGenerationsCount > 0 ? /* @__PURE__ */
|
|
4856
|
+
const runningBadge = activeGenerationsCount > 0 ? /* @__PURE__ */ jsxs22(
|
|
4717
4857
|
"div",
|
|
4718
4858
|
{
|
|
4719
4859
|
className: "flex items-center gap-1 rounded-full bg-sky-500/15 border border-sky-400/30 px-2 shrink-0",
|
|
4720
4860
|
style: { height: 24 },
|
|
4721
4861
|
title: `${activeGenerationsCount} Generierung${activeGenerationsCount === 1 ? "" : "en"} l\xE4uft gerade`,
|
|
4722
4862
|
children: [
|
|
4723
|
-
/* @__PURE__ */
|
|
4724
|
-
/* @__PURE__ */
|
|
4863
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-sky-300", style: { fontSize: 14, lineHeight: 1 }, children: "autorenew" }),
|
|
4864
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[11px] font-bold text-sky-300 tabular-nums", children: activeGenerationsCount })
|
|
4725
4865
|
]
|
|
4726
4866
|
}
|
|
4727
4867
|
) : null;
|
|
@@ -5117,7 +5257,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5117
5257
|
if (isFullscreen && currentResult?.base64) {
|
|
5118
5258
|
const fsRaw = currentResult.fullBase64 || currentResult.base64;
|
|
5119
5259
|
const fsBase64 = fsRaw.startsWith("data:") ? fsRaw : `data:image/png;base64,${fsRaw}`;
|
|
5120
|
-
return /* @__PURE__ */
|
|
5260
|
+
return /* @__PURE__ */ jsxs22(
|
|
5121
5261
|
"div",
|
|
5122
5262
|
{
|
|
5123
5263
|
className: "fixed inset-0 bg-black z-50 flex items-center justify-center overflow-hidden touch-none",
|
|
@@ -5125,7 +5265,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5125
5265
|
onTouchMove: handleFsTouchMove,
|
|
5126
5266
|
onTouchEnd: handleFsTouchEnd,
|
|
5127
5267
|
children: [
|
|
5128
|
-
/* @__PURE__ */
|
|
5268
|
+
/* @__PURE__ */ jsx24(
|
|
5129
5269
|
"img",
|
|
5130
5270
|
{
|
|
5131
5271
|
src: fsBase64,
|
|
@@ -5142,77 +5282,77 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5142
5282
|
}
|
|
5143
5283
|
}
|
|
5144
5284
|
),
|
|
5145
|
-
/* @__PURE__ */
|
|
5146
|
-
zoomScale > 1 && /* @__PURE__ */
|
|
5285
|
+
/* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined text-[22px]", children: "close" }) }),
|
|
5286
|
+
zoomScale > 1 && /* @__PURE__ */ jsx24("button", { onClick: () => {
|
|
5147
5287
|
setZoomScale(1);
|
|
5148
5288
|
setZoomOffset({ x: 0, y: 0 });
|
|
5149
|
-
}, 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__ */
|
|
5150
|
-
history.length > 1 && /* @__PURE__ */
|
|
5151
|
-
/* @__PURE__ */
|
|
5289
|
+
}, 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__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "zoom_out_map" }) }),
|
|
5290
|
+
history.length > 1 && /* @__PURE__ */ jsxs22(Fragment8, { children: [
|
|
5291
|
+
/* @__PURE__ */ jsx24("button", { onClick: () => {
|
|
5152
5292
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
5153
|
-
}, 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__ */
|
|
5154
|
-
/* @__PURE__ */
|
|
5293
|
+
}, 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__ */ jsx24("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
5294
|
+
/* @__PURE__ */ jsx24("button", { onClick: () => {
|
|
5155
5295
|
if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
|
|
5156
|
-
}, 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__ */
|
|
5157
|
-
/* @__PURE__ */
|
|
5296
|
+
}, 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__ */ jsx24("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
5297
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5158
5298
|
currentIndex + 1,
|
|
5159
5299
|
" / ",
|
|
5160
5300
|
history.length
|
|
5161
5301
|
] })
|
|
5162
5302
|
] }),
|
|
5163
|
-
zoomScale === 1 && /* @__PURE__ */
|
|
5303
|
+
zoomScale === 1 && /* @__PURE__ */ jsx24("div", { className: "absolute bottom-6 right-4 text-[9px] text-white/20 font-mono", children: "Pinch zum Zoomen \xB7 Doppeltipp 2.5\xD7" })
|
|
5164
5304
|
]
|
|
5165
5305
|
}
|
|
5166
5306
|
);
|
|
5167
5307
|
}
|
|
5168
5308
|
if (showStart) {
|
|
5169
|
-
return /* @__PURE__ */
|
|
5170
|
-
/* @__PURE__ */
|
|
5309
|
+
return /* @__PURE__ */ jsxs22("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
|
|
5310
|
+
/* @__PURE__ */ jsx24("input", { ref: wsInputRef, type: "file", accept: ".zip", className: "hidden", onChange: (e) => {
|
|
5171
5311
|
const f = e.target.files?.[0];
|
|
5172
5312
|
if (f) handleProjectImport(f);
|
|
5173
5313
|
e.target.value = "";
|
|
5174
5314
|
} }),
|
|
5175
|
-
/* @__PURE__ */
|
|
5176
|
-
/* @__PURE__ */
|
|
5177
|
-
/* @__PURE__ */
|
|
5178
|
-
/* @__PURE__ */
|
|
5315
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-1", children: [
|
|
5316
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
|
|
5317
|
+
/* @__PURE__ */ jsx24("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" }),
|
|
5318
|
+
/* @__PURE__ */ jsxs22("span", { className: "text-white text-[13px] font-mono", children: [
|
|
5179
5319
|
"v",
|
|
5180
5320
|
LIB_VERSION
|
|
5181
5321
|
] })
|
|
5182
5322
|
] }),
|
|
5183
|
-
/* @__PURE__ */
|
|
5323
|
+
/* @__PURE__ */ jsxs22(
|
|
5184
5324
|
"button",
|
|
5185
5325
|
{
|
|
5186
5326
|
onClick: toggleContrast,
|
|
5187
5327
|
className: "flex items-center gap-3 px-5 py-3 rounded-2xl border transition-colors",
|
|
5188
5328
|
style: { borderColor: highContrast ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.08)", background: highContrast ? "rgba(255,255,255,0.08)" : "transparent" },
|
|
5189
5329
|
children: [
|
|
5190
|
-
/* @__PURE__ */
|
|
5191
|
-
/* @__PURE__ */
|
|
5192
|
-
/* @__PURE__ */
|
|
5193
|
-
/* @__PURE__ */
|
|
5330
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[22px]", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.35)" }, children: highContrast ? "light_mode" : "dark_mode" }),
|
|
5331
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-start", children: [
|
|
5332
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[13px] font-bold", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.5)" }, children: highContrast ? "Hoher Kontrast" : "Normaler Kontrast" }),
|
|
5333
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[10px]", style: { color: "rgba(255,255,255,0.25)" }, children: "Tippen zum Umschalten" })
|
|
5194
5334
|
] })
|
|
5195
5335
|
]
|
|
5196
5336
|
}
|
|
5197
5337
|
),
|
|
5198
|
-
/* @__PURE__ */
|
|
5199
|
-
/* @__PURE__ */
|
|
5338
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5339
|
+
/* @__PURE__ */ jsxs22(
|
|
5200
5340
|
"button",
|
|
5201
5341
|
{
|
|
5202
5342
|
onClick: () => wsInputRef.current?.click(),
|
|
5203
5343
|
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",
|
|
5204
5344
|
style: { height: 56, background: projectLoaded ? "#16a34a" : "#0284c7" },
|
|
5205
5345
|
children: [
|
|
5206
|
-
/* @__PURE__ */
|
|
5346
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[22px]", children: projectLoaded ? "check_circle" : "folder_zip" }),
|
|
5207
5347
|
projectLoaded ? "Projekt geladen \u2713" : "Projekt laden (.zip)"
|
|
5208
5348
|
]
|
|
5209
5349
|
}
|
|
5210
5350
|
),
|
|
5211
|
-
!projectLoaded && /* @__PURE__ */
|
|
5351
|
+
!projectLoaded && /* @__PURE__ */ jsx24("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
|
|
5212
5352
|
] }),
|
|
5213
|
-
/* @__PURE__ */
|
|
5214
|
-
!initialHfToken && /* @__PURE__ */
|
|
5215
|
-
/* @__PURE__ */
|
|
5353
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5354
|
+
!initialHfToken && /* @__PURE__ */ jsxs22("div", { className: "flex gap-2 w-full", children: [
|
|
5355
|
+
/* @__PURE__ */ jsx24(
|
|
5216
5356
|
"input",
|
|
5217
5357
|
{
|
|
5218
5358
|
type: "password",
|
|
@@ -5228,7 +5368,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5228
5368
|
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)" }
|
|
5229
5369
|
}
|
|
5230
5370
|
),
|
|
5231
|
-
hfTokenInput.trim() && /* @__PURE__ */
|
|
5371
|
+
hfTokenInput.trim() && /* @__PURE__ */ jsx24(
|
|
5232
5372
|
"button",
|
|
5233
5373
|
{
|
|
5234
5374
|
type: "button",
|
|
@@ -5239,9 +5379,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5239
5379
|
}
|
|
5240
5380
|
)
|
|
5241
5381
|
] }),
|
|
5242
|
-
!hfNamespace && /* @__PURE__ */
|
|
5243
|
-
/* @__PURE__ */
|
|
5244
|
-
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */
|
|
5382
|
+
!hfNamespace && /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3 w-full", children: [
|
|
5383
|
+
/* @__PURE__ */ jsx24("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold flex-shrink-0", children: "State:" }),
|
|
5384
|
+
["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ jsx24(
|
|
5245
5385
|
"button",
|
|
5246
5386
|
{
|
|
5247
5387
|
onClick: () => {
|
|
@@ -5261,7 +5401,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5261
5401
|
ns
|
|
5262
5402
|
))
|
|
5263
5403
|
] }),
|
|
5264
|
-
hfToken && /* @__PURE__ */
|
|
5404
|
+
hfToken && /* @__PURE__ */ jsxs22(
|
|
5265
5405
|
"button",
|
|
5266
5406
|
{
|
|
5267
5407
|
disabled: isLoadingFromHF,
|
|
@@ -5283,15 +5423,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5283
5423
|
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",
|
|
5284
5424
|
style: { height: 56, background: "#f59e0b" },
|
|
5285
5425
|
children: [
|
|
5286
|
-
/* @__PURE__ */
|
|
5426
|
+
/* @__PURE__ */ jsx24("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromHF ? " animate-spin" : ""}`, children: isLoadingFromHF ? "sync" : "cloud_download" }),
|
|
5287
5427
|
isLoadingFromHF ? "Laden\u2026" : "Von HF laden"
|
|
5288
5428
|
]
|
|
5289
5429
|
}
|
|
5290
5430
|
),
|
|
5291
|
-
hfToken && /* @__PURE__ */
|
|
5431
|
+
hfToken && /* @__PURE__ */ jsx24("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand von Hugging Face laden" })
|
|
5292
5432
|
] }),
|
|
5293
|
-
onFetchServerProjects && /* @__PURE__ */
|
|
5294
|
-
/* @__PURE__ */
|
|
5433
|
+
onFetchServerProjects && /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5434
|
+
/* @__PURE__ */ jsxs22(
|
|
5295
5435
|
"button",
|
|
5296
5436
|
{
|
|
5297
5437
|
disabled: isLoadingFromServer,
|
|
@@ -5312,35 +5452,35 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5312
5452
|
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",
|
|
5313
5453
|
style: { height: 56, background: "#7c3aed" },
|
|
5314
5454
|
children: [
|
|
5315
|
-
/* @__PURE__ */
|
|
5455
|
+
/* @__PURE__ */ jsx24("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromServer ? " animate-spin" : ""}`, children: isLoadingFromServer ? "sync" : "cloud_download" }),
|
|
5316
5456
|
isLoadingFromServer ? "Laden\u2026" : "Vom Server laden"
|
|
5317
5457
|
]
|
|
5318
5458
|
}
|
|
5319
5459
|
),
|
|
5320
|
-
/* @__PURE__ */
|
|
5460
|
+
/* @__PURE__ */ jsx24("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand vom Server wiederherstellen" })
|
|
5321
5461
|
] }),
|
|
5322
|
-
/* @__PURE__ */
|
|
5323
|
-
/* @__PURE__ */
|
|
5324
|
-
/* @__PURE__ */
|
|
5462
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5463
|
+
/* @__PURE__ */ jsx24("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
|
|
5464
|
+
/* @__PURE__ */ jsx24("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
|
|
5325
5465
|
{ id: "mobile", icon: "smartphone", label: "Mobile" },
|
|
5326
5466
|
{ id: "mobile-desktop", icon: "phonelink", label: "Mobile+" },
|
|
5327
5467
|
{ id: "desktop", icon: "desktop_windows", label: "Desktop" },
|
|
5328
5468
|
{ id: "tablet-landscape", icon: "tablet", label: "Landscape" }
|
|
5329
|
-
].map((opt) => /* @__PURE__ */
|
|
5469
|
+
].map((opt) => /* @__PURE__ */ jsxs22(
|
|
5330
5470
|
"button",
|
|
5331
5471
|
{
|
|
5332
5472
|
onClick: () => startApp(opt.id),
|
|
5333
5473
|
className: "flex flex-col items-center gap-2 py-4 rounded-2xl border transition-colors",
|
|
5334
5474
|
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" },
|
|
5335
5475
|
children: [
|
|
5336
|
-
/* @__PURE__ */
|
|
5337
|
-
/* @__PURE__ */
|
|
5476
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[24px]", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.icon }),
|
|
5477
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[11px] font-bold", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.label })
|
|
5338
5478
|
]
|
|
5339
5479
|
},
|
|
5340
5480
|
opt.id
|
|
5341
5481
|
)) }),
|
|
5342
|
-
layoutChoice === "mobile-desktop" && /* @__PURE__ */
|
|
5343
|
-
layoutChoice === "tablet-landscape" && /* @__PURE__ */
|
|
5482
|
+
layoutChoice === "mobile-desktop" && /* @__PURE__ */ jsx24("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
|
|
5483
|
+
layoutChoice === "tablet-landscape" && /* @__PURE__ */ jsx24("span", { className: "text-white/20 text-[9px] text-center", children: "2-Spalten-Layout f\xFCr Landscape-Tablet im Desktop-Mode" })
|
|
5344
5484
|
] })
|
|
5345
5485
|
] });
|
|
5346
5486
|
}
|
|
@@ -5349,22 +5489,22 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5349
5489
|
const mdScale = mdMode ? window.innerWidth / 430 : 1;
|
|
5350
5490
|
const mdW = mdMode ? 430 : void 0;
|
|
5351
5491
|
const mdH = mdMode ? Math.ceil(window.innerHeight / mdScale) : void 0;
|
|
5352
|
-
const mobileRoot = /* @__PURE__ */
|
|
5492
|
+
const mobileRoot = /* @__PURE__ */ jsxs22("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
|
|
5353
5493
|
width: mdMode ? mdW : "100vw",
|
|
5354
5494
|
height: mdMode ? mdH : "100dvh",
|
|
5355
5495
|
transform: mdMode ? `scale(${mdScale})` : void 0,
|
|
5356
5496
|
transformOrigin: mdMode ? "top left" : void 0,
|
|
5357
5497
|
...hcStyle || {}
|
|
5358
5498
|
}, children: [
|
|
5359
|
-
mobileTab === "labs" && /* @__PURE__ */
|
|
5499
|
+
mobileTab === "labs" && /* @__PURE__ */ jsx24("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx24(LabsTab, { services: labServices, onResult: (item) => {
|
|
5360
5500
|
const frame = item.frames[0];
|
|
5361
5501
|
if (frame?.base64) {
|
|
5362
5502
|
setCurrentResult(frameToGeneration(frame, item));
|
|
5363
5503
|
setMobileTab("stage");
|
|
5364
5504
|
}
|
|
5365
5505
|
} }) }),
|
|
5366
|
-
mobileTab === "server" && /* @__PURE__ */
|
|
5367
|
-
mobileTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5506
|
+
mobileTab === "server" && /* @__PURE__ */ jsx24("div", { className: "flex flex-col flex-1 min-h-0 relative", children: /* @__PURE__ */ jsx24(ServerTab, { serverBaseUrl }) }),
|
|
5507
|
+
mobileTab === "tags" && workspaceTags && /* @__PURE__ */ jsx24("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsx24(
|
|
5368
5508
|
TagManagerPanel,
|
|
5369
5509
|
{
|
|
5370
5510
|
workspaceTags,
|
|
@@ -5375,23 +5515,23 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5375
5515
|
onTagMove: handleTagMove
|
|
5376
5516
|
}
|
|
5377
5517
|
) }),
|
|
5378
|
-
mobileTab === "stage" && /* @__PURE__ */
|
|
5379
|
-
/* @__PURE__ */
|
|
5380
|
-
/* @__PURE__ */
|
|
5381
|
-
/* @__PURE__ */
|
|
5382
|
-
/* @__PURE__ */
|
|
5383
|
-
/* @__PURE__ */
|
|
5518
|
+
mobileTab === "stage" && /* @__PURE__ */ jsxs22("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
5519
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
|
|
5520
|
+
/* @__PURE__ */ jsx24(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5521
|
+
/* @__PURE__ */ jsx24(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" }] }),
|
|
5522
|
+
/* @__PURE__ */ jsx24(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions }),
|
|
5523
|
+
/* @__PURE__ */ jsx24("div", { className: "flex-1" }),
|
|
5384
5524
|
runningBadge,
|
|
5385
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
5386
|
-
/* @__PURE__ */
|
|
5387
|
-
/* @__PURE__ */
|
|
5388
|
-
/* @__PURE__ */
|
|
5389
|
-
] }) : /* @__PURE__ */
|
|
5390
|
-
/* @__PURE__ */
|
|
5391
|
-
/* @__PURE__ */
|
|
5525
|
+
activeReferenceThumbnail ? /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden mr-2", style: { height: 28 }, children: [
|
|
5526
|
+
/* @__PURE__ */ jsx24("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
5527
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
5528
|
+
/* @__PURE__ */ jsx24("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 active:text-white/80 transition-colors", children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5529
|
+
] }) : /* @__PURE__ */ jsx24("button", { onClick: handleSelectReference, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "add_photo_alternate" }) }),
|
|
5530
|
+
/* @__PURE__ */ jsx24("button", { onClick: toggleContrast, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
5531
|
+
/* @__PURE__ */ jsx24("button", { onClick: () => setShowStart(true), className: "text-white/20 active:text-white/60 transition-colors mr-1", children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "desktop_windows" }) })
|
|
5392
5532
|
] }),
|
|
5393
|
-
/* @__PURE__ */
|
|
5394
|
-
/* @__PURE__ */
|
|
5533
|
+
/* @__PURE__ */ jsx24("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ jsxs22("div", { className: `relative rounded-xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
5534
|
+
/* @__PURE__ */ jsx24(
|
|
5395
5535
|
"textarea",
|
|
5396
5536
|
{
|
|
5397
5537
|
value: activePrompt,
|
|
@@ -5401,9 +5541,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5401
5541
|
placeholder: "Prompt eingeben..."
|
|
5402
5542
|
}
|
|
5403
5543
|
),
|
|
5404
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
5544
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
|
|
5405
5545
|
] }) }),
|
|
5406
|
-
/* @__PURE__ */
|
|
5546
|
+
/* @__PURE__ */ jsx24("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ jsxs22(
|
|
5407
5547
|
"button",
|
|
5408
5548
|
{
|
|
5409
5549
|
onClick: () => handleGenerateBatch(),
|
|
@@ -5411,13 +5551,13 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5411
5551
|
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",
|
|
5412
5552
|
style: { height: 48, background: activePrompt.trim() ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
|
|
5413
5553
|
children: [
|
|
5414
|
-
/* @__PURE__ */
|
|
5415
|
-
/* @__PURE__ */
|
|
5554
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
|
|
5555
|
+
/* @__PURE__ */ jsx24("span", { children: "Generieren" })
|
|
5416
5556
|
]
|
|
5417
5557
|
}
|
|
5418
5558
|
) }),
|
|
5419
|
-
/* @__PURE__ */
|
|
5420
|
-
/* @__PURE__ */
|
|
5559
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
|
|
5560
|
+
/* @__PURE__ */ jsxs22(
|
|
5421
5561
|
"div",
|
|
5422
5562
|
{
|
|
5423
5563
|
className: "w-full rounded-2xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center",
|
|
@@ -5431,25 +5571,25 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5431
5571
|
setTouchStartX(null);
|
|
5432
5572
|
},
|
|
5433
5573
|
children: [
|
|
5434
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
5435
|
-
/* @__PURE__ */
|
|
5436
|
-
/* @__PURE__ */
|
|
5574
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-3 opacity-40", children: [
|
|
5575
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[40px]", children: "hourglass_top" }),
|
|
5576
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[11px] uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
5437
5577
|
] }),
|
|
5438
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
5439
|
-
/* @__PURE__ */
|
|
5440
|
-
/* @__PURE__ */
|
|
5441
|
-
/* @__PURE__ */
|
|
5578
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs22("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
|
|
5579
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
|
|
5580
|
+
/* @__PURE__ */ jsx24("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
|
|
5581
|
+
/* @__PURE__ */ jsx24("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" })
|
|
5442
5582
|
] }),
|
|
5443
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
5444
|
-
!currentResult && /* @__PURE__ */
|
|
5445
|
-
/* @__PURE__ */
|
|
5446
|
-
/* @__PURE__ */
|
|
5583
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx24("img", { src: currentResult.fullBase64 || currentResult.base64, className: "w-full h-full object-contain" }),
|
|
5584
|
+
!currentResult && /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
5585
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
|
|
5586
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
5447
5587
|
] }),
|
|
5448
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5449
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
5450
|
-
/* @__PURE__ */
|
|
5451
|
-
/* @__PURE__ */
|
|
5452
|
-
/* @__PURE__ */
|
|
5588
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined text-[18px]", children: "fullscreen" }) }),
|
|
5589
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs22(Fragment8, { children: [
|
|
5590
|
+
/* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
|
|
5591
|
+
/* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
|
|
5592
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5453
5593
|
currentIndex + 1,
|
|
5454
5594
|
" / ",
|
|
5455
5595
|
history.length
|
|
@@ -5458,8 +5598,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5458
5598
|
]
|
|
5459
5599
|
}
|
|
5460
5600
|
),
|
|
5461
|
-
currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */
|
|
5462
|
-
/* @__PURE__ */
|
|
5601
|
+
currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */ jsx24("div", { className: "mt-2 flex gap-1.5 overflow-x-auto pb-1", style: { scrollbarWidth: "none" }, children: currentGroup.map((item) => /* @__PURE__ */ jsxs22("div", { style: { position: "relative", flexShrink: 0 }, children: [
|
|
5602
|
+
/* @__PURE__ */ jsx24(
|
|
5463
5603
|
"div",
|
|
5464
5604
|
{
|
|
5465
5605
|
onClick: () => handleGallerySelect(item),
|
|
@@ -5472,10 +5612,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5472
5612
|
border: item.id === currentResult.id ? "2px solid rgba(255,255,255,0.8)" : "2px solid rgba(255,255,255,0.15)",
|
|
5473
5613
|
opacity: item.id === currentResult.id ? 1 : 0.55
|
|
5474
5614
|
},
|
|
5475
|
-
children: /* @__PURE__ */
|
|
5615
|
+
children: /* @__PURE__ */ jsx24("img", { src: item.base64, style: { width: "100%", height: "100%", objectFit: "cover" }, alt: "" })
|
|
5476
5616
|
}
|
|
5477
5617
|
),
|
|
5478
|
-
/* @__PURE__ */
|
|
5618
|
+
/* @__PURE__ */ jsx24(
|
|
5479
5619
|
"button",
|
|
5480
5620
|
{
|
|
5481
5621
|
onClick: (e) => {
|
|
@@ -5497,34 +5637,34 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5497
5637
|
alignItems: "center",
|
|
5498
5638
|
justifyContent: "center"
|
|
5499
5639
|
},
|
|
5500
|
-
children: /* @__PURE__ */
|
|
5640
|
+
children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 9, color: item.titleTs ? "#fff" : "rgba(255,255,255,0.5)", lineHeight: 1 }, children: "star" })
|
|
5501
5641
|
}
|
|
5502
5642
|
)
|
|
5503
5643
|
] }, item.id)) }),
|
|
5504
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5505
|
-
/* @__PURE__ */
|
|
5506
|
-
/* @__PURE__ */
|
|
5507
|
-
/* @__PURE__ */
|
|
5644
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs22("div", { className: "flex gap-2 mt-3", children: [
|
|
5645
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5646
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
|
|
5647
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[12px] text-white/60", children: "Prompt" })
|
|
5508
5648
|
] }),
|
|
5509
|
-
/* @__PURE__ */
|
|
5510
|
-
/* @__PURE__ */
|
|
5511
|
-
/* @__PURE__ */
|
|
5649
|
+
/* @__PURE__ */ jsxs22("button", { onClick: () => handleGenerateBatch(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl bg-white/10 active:bg-white/15 transition-colors", style: { height: 44 }, children: [
|
|
5650
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
|
|
5651
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
|
|
5512
5652
|
] }),
|
|
5513
|
-
/* @__PURE__ */
|
|
5514
|
-
/* @__PURE__ */
|
|
5515
|
-
/* @__PURE__ */
|
|
5653
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5654
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "download" }),
|
|
5655
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[12px] text-white/60", children: "Laden" })
|
|
5516
5656
|
] })
|
|
5517
5657
|
] })
|
|
5518
5658
|
] })
|
|
5519
5659
|
] }),
|
|
5520
|
-
mobileTab === "browse" && /* @__PURE__ */
|
|
5521
|
-
/* @__PURE__ */
|
|
5522
|
-
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */
|
|
5523
|
-
hfToken && /* @__PURE__ */
|
|
5660
|
+
mobileTab === "browse" && /* @__PURE__ */ jsxs22("div", { className: "flex flex-col flex-1 min-h-0", children: [
|
|
5661
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
5662
|
+
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : "info" }) }, tab)),
|
|
5663
|
+
hfToken && /* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
|
|
5524
5664
|
] }),
|
|
5525
|
-
/* @__PURE__ */
|
|
5526
|
-
activeTab === "history" && /* @__PURE__ */
|
|
5527
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
5665
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5666
|
+
activeTab === "history" && /* @__PURE__ */ jsx24(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: handleGallerySelect, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)), visibleCount: historyVisibleCount, onLoadMore: () => setHistoryVisibleCount((c) => c + 20) }),
|
|
5667
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx24(
|
|
5528
5668
|
MediaLibrary,
|
|
5529
5669
|
{
|
|
5530
5670
|
items: galleryItems,
|
|
@@ -5543,44 +5683,44 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5543
5683
|
onLoadMore: () => setGalleryVisibleCount((c) => c + 20)
|
|
5544
5684
|
}
|
|
5545
5685
|
),
|
|
5546
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
5686
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx24(InspectPanel, { currentResult, history, onSelect: (g) => {
|
|
5547
5687
|
setCurrentResult(g);
|
|
5548
5688
|
} })
|
|
5549
5689
|
] })
|
|
5550
5690
|
] }),
|
|
5551
|
-
/* @__PURE__ */
|
|
5552
|
-
/* @__PURE__ */
|
|
5553
|
-
workspaceTags && /* @__PURE__ */
|
|
5691
|
+
/* @__PURE__ */ jsxs22("div", { style: { display: mobileTab === "tools" ? "flex" : "none" }, className: "flex flex-col flex-1 min-h-0", children: [
|
|
5692
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
|
|
5693
|
+
workspaceTags && /* @__PURE__ */ jsxs22("button", { onClick: () => {
|
|
5554
5694
|
setLeftTab("prompt");
|
|
5555
5695
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
5556
5696
|
}, 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: [
|
|
5557
|
-
/* @__PURE__ */
|
|
5697
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
|
|
5558
5698
|
"Prompt"
|
|
5559
5699
|
] }),
|
|
5560
|
-
/* @__PURE__ */
|
|
5700
|
+
/* @__PURE__ */ jsxs22("button", { onClick: () => {
|
|
5561
5701
|
setLeftTab("hierarchy");
|
|
5562
5702
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
5563
5703
|
}, 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: [
|
|
5564
|
-
/* @__PURE__ */
|
|
5704
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
|
|
5565
5705
|
"Hierarchie"
|
|
5566
5706
|
] }),
|
|
5567
|
-
/* @__PURE__ */
|
|
5568
|
-
/* @__PURE__ */
|
|
5707
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5708
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "settings" }),
|
|
5569
5709
|
"Setup"
|
|
5570
5710
|
] }),
|
|
5571
|
-
/* @__PURE__ */
|
|
5572
|
-
/* @__PURE__ */
|
|
5711
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5712
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "cloud_sync" }),
|
|
5573
5713
|
"Sync"
|
|
5574
5714
|
] }),
|
|
5575
|
-
/* @__PURE__ */
|
|
5576
|
-
/* @__PURE__ */
|
|
5715
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5716
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "biotech" }),
|
|
5577
5717
|
"HF"
|
|
5578
5718
|
] }),
|
|
5579
|
-
serverBaseUrl && /* @__PURE__ */
|
|
5580
|
-
workspaceTags && /* @__PURE__ */
|
|
5719
|
+
serverBaseUrl && /* @__PURE__ */ jsx24("button", { onClick: () => setActiveTab("server"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "server" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) }),
|
|
5720
|
+
workspaceTags && /* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
5581
5721
|
] }),
|
|
5582
|
-
/* @__PURE__ */
|
|
5583
|
-
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */
|
|
5722
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5723
|
+
leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */ jsx24("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx24(
|
|
5584
5724
|
ListView,
|
|
5585
5725
|
{
|
|
5586
5726
|
nodes,
|
|
@@ -5611,12 +5751,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5611
5751
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
5612
5752
|
}
|
|
5613
5753
|
) }),
|
|
5614
|
-
workspaceTags && /* @__PURE__ */
|
|
5754
|
+
workspaceTags && /* @__PURE__ */ jsx24("div", { style: { display: leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" ? "flex" : "none" }, className: "absolute inset-0 flex-col", children: /* @__PURE__ */ jsx24(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => {
|
|
5615
5755
|
handleGenerateBatch(prompt);
|
|
5616
5756
|
setMobileTab("stage");
|
|
5617
5757
|
}, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
|
|
5618
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
5619
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
5758
|
+
activeTab === "setup" && /* @__PURE__ */ jsx24(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
5759
|
+
activeTab === "sync" && /* @__PURE__ */ jsx24(
|
|
5620
5760
|
ProjectSyncTab,
|
|
5621
5761
|
{
|
|
5622
5762
|
topSlot: syncTopSlot,
|
|
@@ -5640,7 +5780,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5640
5780
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
5641
5781
|
}
|
|
5642
5782
|
),
|
|
5643
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5783
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx24(
|
|
5644
5784
|
TagManagerPanel,
|
|
5645
5785
|
{
|
|
5646
5786
|
workspaceTags,
|
|
@@ -5651,7 +5791,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5651
5791
|
onTagMove: handleTagMove
|
|
5652
5792
|
}
|
|
5653
5793
|
),
|
|
5654
|
-
activeTab === "hftest" && /* @__PURE__ */
|
|
5794
|
+
activeTab === "hftest" && /* @__PURE__ */ jsx24("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx24(
|
|
5655
5795
|
HFTestTab,
|
|
5656
5796
|
{
|
|
5657
5797
|
token: hfToken,
|
|
@@ -5663,23 +5803,23 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5663
5803
|
missingImages: hfMissingImages
|
|
5664
5804
|
}
|
|
5665
5805
|
) }),
|
|
5666
|
-
activeTab === "server" && /* @__PURE__ */
|
|
5806
|
+
activeTab === "server" && /* @__PURE__ */ jsx24("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx24(ServerTab, { serverBaseUrl }) })
|
|
5667
5807
|
] })
|
|
5668
5808
|
] }),
|
|
5669
|
-
/* @__PURE__ */
|
|
5809
|
+
/* @__PURE__ */ jsx24("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
|
|
5670
5810
|
{ id: "tools", icon: "auto_fix_high", label: "Prompt" },
|
|
5671
5811
|
{ id: "stage", icon: "palette", label: "Stage" },
|
|
5672
5812
|
{ id: "labs", icon: "science", label: "Labs" },
|
|
5673
5813
|
...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
|
|
5674
5814
|
{ id: "browse", icon: "photo_library", label: "Galerie" },
|
|
5675
5815
|
...serverBaseUrl ? [{ id: "server", icon: "storage", label: "Server" }] : []
|
|
5676
|
-
].map((tab) => /* @__PURE__ */
|
|
5677
|
-
/* @__PURE__ */
|
|
5678
|
-
/* @__PURE__ */
|
|
5816
|
+
].map((tab) => /* @__PURE__ */ jsxs22("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: [
|
|
5817
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
|
|
5818
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
|
|
5679
5819
|
] }, tab.id)) })
|
|
5680
5820
|
] });
|
|
5681
5821
|
if (mdMode) {
|
|
5682
|
-
return /* @__PURE__ */
|
|
5822
|
+
return /* @__PURE__ */ jsx24("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
|
|
5683
5823
|
}
|
|
5684
5824
|
return mobileRoot;
|
|
5685
5825
|
}
|
|
@@ -5687,19 +5827,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5687
5827
|
const tlScale = Math.min(window.innerWidth / 920, window.innerHeight / 520);
|
|
5688
5828
|
const tlW = 920;
|
|
5689
5829
|
const tlH = 520;
|
|
5690
|
-
return /* @__PURE__ */
|
|
5691
|
-
/* @__PURE__ */
|
|
5692
|
-
/* @__PURE__ */
|
|
5693
|
-
/* @__PURE__ */
|
|
5694
|
-
/* @__PURE__ */
|
|
5695
|
-
/* @__PURE__ */
|
|
5696
|
-
/* @__PURE__ */
|
|
5830
|
+
return /* @__PURE__ */ jsx24("div", { style: { position: "fixed", inset: 0, background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", ...hcStyle || {} }, children: /* @__PURE__ */ jsxs22("div", { style: { width: tlW, height: tlH, transform: `scale(${tlScale})`, transformOrigin: "center center", display: "flex", flexDirection: "row", color: "#fff", overflow: "hidden", borderRadius: 0 }, children: [
|
|
5831
|
+
/* @__PURE__ */ jsxs22("div", { style: { width: 320, height: tlH, display: "flex", flexDirection: "column", borderRight: "1px solid rgba(255,255,255,0.05)", background: "#000", flexShrink: 0 }, children: [
|
|
5832
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5833
|
+
/* @__PURE__ */ jsx24(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5834
|
+
/* @__PURE__ */ jsx24(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" }] }),
|
|
5835
|
+
/* @__PURE__ */ jsx24(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions }),
|
|
5836
|
+
/* @__PURE__ */ jsx24("div", { style: { flex: 1 } }),
|
|
5697
5837
|
runningBadge,
|
|
5698
|
-
/* @__PURE__ */
|
|
5699
|
-
/* @__PURE__ */
|
|
5838
|
+
/* @__PURE__ */ jsx24("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
|
|
5839
|
+
/* @__PURE__ */ jsx24("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
|
|
5700
5840
|
] }),
|
|
5701
|
-
/* @__PURE__ */
|
|
5702
|
-
/* @__PURE__ */
|
|
5841
|
+
/* @__PURE__ */ jsx24("div", { style: { padding: "12px 12px 8px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs22("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: [
|
|
5842
|
+
/* @__PURE__ */ jsx24(
|
|
5703
5843
|
"textarea",
|
|
5704
5844
|
{
|
|
5705
5845
|
value: activePrompt,
|
|
@@ -5708,24 +5848,24 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5708
5848
|
placeholder: "Prompt eingeben..."
|
|
5709
5849
|
}
|
|
5710
5850
|
),
|
|
5711
|
-
activePrompt && /* @__PURE__ */
|
|
5851
|
+
activePrompt && /* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
|
|
5712
5852
|
] }) }),
|
|
5713
|
-
/* @__PURE__ */
|
|
5853
|
+
/* @__PURE__ */ jsx24("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs22(
|
|
5714
5854
|
"button",
|
|
5715
5855
|
{
|
|
5716
5856
|
onClick: () => handleGenerateBatch(),
|
|
5717
5857
|
disabled: !activePrompt.trim(),
|
|
5718
5858
|
style: { width: "100%", height: 42, display: "flex", alignItems: "center", justifyContent: "center", gap: 8, borderRadius: 10, fontWeight: "bold", fontSize: 13, textTransform: "uppercase", letterSpacing: "0.05em", border: "1px solid rgba(255,255,255,0.1)", background: activePrompt.trim() ? "#0284c7" : "transparent", color: "#fff", cursor: activePrompt.trim() ? "pointer" : "default", opacity: !activePrompt.trim() ? 0.3 : 1, fontFamily: "inherit", transition: "background 0.2s" },
|
|
5719
5859
|
children: [
|
|
5720
|
-
/* @__PURE__ */
|
|
5721
|
-
/* @__PURE__ */
|
|
5860
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
|
|
5861
|
+
/* @__PURE__ */ jsx24("span", { children: "Generieren" })
|
|
5722
5862
|
]
|
|
5723
5863
|
}
|
|
5724
5864
|
) }),
|
|
5725
|
-
/* @__PURE__ */
|
|
5865
|
+
/* @__PURE__ */ jsx24("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ jsx24(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: handleGallerySelect, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)), visibleCount: historyVisibleCount, onLoadMore: () => setHistoryVisibleCount((c) => c + 20) }) })
|
|
5726
5866
|
] }),
|
|
5727
|
-
/* @__PURE__ */
|
|
5728
|
-
/* @__PURE__ */
|
|
5867
|
+
/* @__PURE__ */ jsxs22("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
|
|
5868
|
+
/* @__PURE__ */ jsx24(
|
|
5729
5869
|
"div",
|
|
5730
5870
|
{
|
|
5731
5871
|
style: { flex: 1, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" },
|
|
@@ -5737,26 +5877,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5737
5877
|
else if (dx > 50) goToPrev();
|
|
5738
5878
|
setTouchStartX(null);
|
|
5739
5879
|
},
|
|
5740
|
-
children: /* @__PURE__ */
|
|
5741
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
5742
|
-
/* @__PURE__ */
|
|
5743
|
-
/* @__PURE__ */
|
|
5880
|
+
children: /* @__PURE__ */ jsxs22("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: [
|
|
5881
|
+
currentResult?.status === "processing" && /* @__PURE__ */ jsxs22("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, opacity: 0.4 }, children: [
|
|
5882
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 36 }, children: "hourglass_top" }),
|
|
5883
|
+
/* @__PURE__ */ jsx24("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.6)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
|
|
5744
5884
|
] }),
|
|
5745
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
5746
|
-
/* @__PURE__ */
|
|
5747
|
-
/* @__PURE__ */
|
|
5748
|
-
/* @__PURE__ */
|
|
5885
|
+
currentResult?.status === "error" && /* @__PURE__ */ jsxs22("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
|
|
5886
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
|
|
5887
|
+
/* @__PURE__ */ jsx24("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
|
|
5888
|
+
/* @__PURE__ */ jsx24("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" })
|
|
5749
5889
|
] }),
|
|
5750
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
5751
|
-
!currentResult && /* @__PURE__ */
|
|
5752
|
-
/* @__PURE__ */
|
|
5753
|
-
/* @__PURE__ */
|
|
5890
|
+
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx24("img", { src: currentResult.fullBase64 || currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
|
|
5891
|
+
!currentResult && /* @__PURE__ */ jsxs22("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
|
|
5892
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
|
|
5893
|
+
/* @__PURE__ */ jsx24("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
|
|
5754
5894
|
] }),
|
|
5755
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5756
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
5757
|
-
/* @__PURE__ */
|
|
5758
|
-
/* @__PURE__ */
|
|
5759
|
-
/* @__PURE__ */
|
|
5895
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "fullscreen" }) }),
|
|
5896
|
+
history.length > 1 && currentResult && /* @__PURE__ */ jsxs22(Fragment8, { children: [
|
|
5897
|
+
/* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_left" }) }),
|
|
5898
|
+
/* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_right" }) }),
|
|
5899
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5760
5900
|
currentIndex + 1,
|
|
5761
5901
|
" / ",
|
|
5762
5902
|
history.length
|
|
@@ -5765,42 +5905,42 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5765
5905
|
] })
|
|
5766
5906
|
}
|
|
5767
5907
|
),
|
|
5768
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5769
|
-
/* @__PURE__ */
|
|
5770
|
-
/* @__PURE__ */
|
|
5771
|
-
/* @__PURE__ */
|
|
5908
|
+
currentResult?.status === "done" && /* @__PURE__ */ jsxs22("div", { style: { padding: "0 16px 16px", display: "flex", gap: 8, flexShrink: 0 }, children: [
|
|
5909
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5910
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
|
|
5911
|
+
/* @__PURE__ */ jsx24("span", { children: "Prompt" })
|
|
5772
5912
|
] }),
|
|
5773
|
-
/* @__PURE__ */
|
|
5774
|
-
/* @__PURE__ */
|
|
5775
|
-
/* @__PURE__ */
|
|
5913
|
+
/* @__PURE__ */ jsxs22("button", { onClick: () => handleGenerateBatch(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "none", background: "rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.8)", fontSize: 11, fontWeight: "bold", cursor: "pointer", fontFamily: "inherit" }, children: [
|
|
5914
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
|
|
5915
|
+
/* @__PURE__ */ jsx24("span", { children: "Referenz" })
|
|
5776
5916
|
] }),
|
|
5777
|
-
/* @__PURE__ */
|
|
5778
|
-
/* @__PURE__ */
|
|
5779
|
-
/* @__PURE__ */
|
|
5917
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5918
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "download" }),
|
|
5919
|
+
/* @__PURE__ */ jsx24("span", { children: "Laden" })
|
|
5780
5920
|
] })
|
|
5781
5921
|
] })
|
|
5782
5922
|
] })
|
|
5783
5923
|
] }) });
|
|
5784
5924
|
}
|
|
5785
|
-
return /* @__PURE__ */
|
|
5786
|
-
/* @__PURE__ */
|
|
5787
|
-
/* @__PURE__ */
|
|
5788
|
-
/* @__PURE__ */
|
|
5789
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5790
|
-
workspaceTags && /* @__PURE__ */
|
|
5791
|
-
/* @__PURE__ */
|
|
5925
|
+
return /* @__PURE__ */ jsxs22("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", style: hcStyle, children: [
|
|
5926
|
+
/* @__PURE__ */ jsx24("div", { className: "absolute top-2 right-2 z-50", children: /* @__PURE__ */ jsx24("button", { onClick: () => setShowStart(true), className: "text-white/10 hover:text-white/30 transition-colors text-[10px]", children: "\u21C4" }) }),
|
|
5927
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5928
|
+
/* @__PURE__ */ jsxs22("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
|
|
5929
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs22("div", { className: "flex flex-1 gap-1", children: [
|
|
5930
|
+
workspaceTags && /* @__PURE__ */ jsxs22("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: [
|
|
5931
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
|
|
5792
5932
|
"Prompt"
|
|
5793
5933
|
] }),
|
|
5794
|
-
/* @__PURE__ */
|
|
5795
|
-
/* @__PURE__ */
|
|
5934
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
5935
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
|
|
5796
5936
|
"Hierarchie"
|
|
5797
5937
|
] }),
|
|
5798
|
-
workspaceTags && /* @__PURE__ */
|
|
5938
|
+
workspaceTags && /* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
|
|
5799
5939
|
] }),
|
|
5800
|
-
/* @__PURE__ */
|
|
5940
|
+
/* @__PURE__ */ jsx24("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" })
|
|
5801
5941
|
] }),
|
|
5802
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5803
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5942
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs22("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5943
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx24(
|
|
5804
5944
|
TagManagerPanel,
|
|
5805
5945
|
{
|
|
5806
5946
|
workspaceTags,
|
|
@@ -5811,11 +5951,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5811
5951
|
onTagMove: handleTagMove
|
|
5812
5952
|
}
|
|
5813
5953
|
),
|
|
5814
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
5815
|
-
/* @__PURE__ */
|
|
5816
|
-
/* @__PURE__ */
|
|
5954
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs22("div", { children: [
|
|
5955
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
5956
|
+
/* @__PURE__ */ jsx24("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
5817
5957
|
] }) }),
|
|
5818
|
-
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */
|
|
5958
|
+
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ jsx24("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx24(
|
|
5819
5959
|
ListView,
|
|
5820
5960
|
{
|
|
5821
5961
|
nodes,
|
|
@@ -5840,19 +5980,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5840
5980
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
5841
5981
|
}
|
|
5842
5982
|
) }),
|
|
5843
|
-
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */
|
|
5983
|
+
leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ jsx24(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => handleGenerateBatch(prompt), onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage })
|
|
5844
5984
|
] })
|
|
5845
5985
|
] }),
|
|
5846
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5847
|
-
/* @__PURE__ */
|
|
5848
|
-
/* @__PURE__ */
|
|
5849
|
-
/* @__PURE__ */
|
|
5850
|
-
/* @__PURE__ */
|
|
5851
|
-
/* @__PURE__ */
|
|
5852
|
-
/* @__PURE__ */
|
|
5986
|
+
!isLeftCollapsed && /* @__PURE__ */ jsx24("div", { onMouseDown: startLeftResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
5987
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
|
|
5988
|
+
/* @__PURE__ */ jsxs22("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
|
|
5989
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1.5", children: [
|
|
5990
|
+
/* @__PURE__ */ jsx24(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
|
|
5991
|
+
/* @__PURE__ */ jsx24(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" }] }),
|
|
5992
|
+
/* @__PURE__ */ jsx24(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions })
|
|
5853
5993
|
] }),
|
|
5854
|
-
/* @__PURE__ */
|
|
5855
|
-
/* @__PURE__ */
|
|
5994
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1 mx-auto", children: [
|
|
5995
|
+
/* @__PURE__ */ jsx24(
|
|
5856
5996
|
"button",
|
|
5857
5997
|
{
|
|
5858
5998
|
onClick: () => setMiddlePanel("stage"),
|
|
@@ -5860,7 +6000,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5860
6000
|
children: "Stage"
|
|
5861
6001
|
}
|
|
5862
6002
|
),
|
|
5863
|
-
/* @__PURE__ */
|
|
6003
|
+
/* @__PURE__ */ jsx24(
|
|
5864
6004
|
"button",
|
|
5865
6005
|
{
|
|
5866
6006
|
onClick: () => setMiddlePanel("labs"),
|
|
@@ -5869,52 +6009,52 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5869
6009
|
}
|
|
5870
6010
|
)
|
|
5871
6011
|
] }),
|
|
5872
|
-
/* @__PURE__ */
|
|
5873
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
5874
|
-
/* @__PURE__ */
|
|
5875
|
-
/* @__PURE__ */
|
|
5876
|
-
/* @__PURE__ */
|
|
5877
|
-
] }) : /* @__PURE__ */
|
|
5878
|
-
/* @__PURE__ */
|
|
5879
|
-
/* @__PURE__ */
|
|
6012
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
|
|
6013
|
+
activeReferenceThumbnail ? /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden", style: { height: 28 }, children: [
|
|
6014
|
+
/* @__PURE__ */ jsx24("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
|
|
6015
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
|
|
6016
|
+
/* @__PURE__ */ jsx24("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 hover:text-white/80 transition-colors", children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
6017
|
+
] }) : /* @__PURE__ */ jsxs22("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: [
|
|
6018
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
|
|
6019
|
+
/* @__PURE__ */ jsx24("span", { children: "Ref" })
|
|
5880
6020
|
] }),
|
|
5881
|
-
/* @__PURE__ */
|
|
6021
|
+
/* @__PURE__ */ jsx24("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
|
|
5882
6022
|
runningBadge,
|
|
5883
|
-
/* @__PURE__ */
|
|
6023
|
+
/* @__PURE__ */ jsx24(PillButton, { variant: "solid", icon: "bolt", disabled: !activePrompt.trim(), onClick: () => handleGenerateBatch(), children: "Generieren" })
|
|
5884
6024
|
] })
|
|
5885
6025
|
] }),
|
|
5886
|
-
/* @__PURE__ */
|
|
5887
|
-
!isPromptCollapsed && /* @__PURE__ */
|
|
5888
|
-
/* @__PURE__ */
|
|
5889
|
-
activePrompt && !isSynthesizing && /* @__PURE__ */
|
|
6026
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
|
|
6027
|
+
!isPromptCollapsed && /* @__PURE__ */ jsx24("div", { className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ jsxs22("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
|
|
6028
|
+
/* @__PURE__ */ jsx24("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..." }),
|
|
6029
|
+
activePrompt && !isSynthesizing && /* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
|
|
5890
6030
|
] }) }),
|
|
5891
|
-
middlePanel === "labs" ? /* @__PURE__ */
|
|
6031
|
+
middlePanel === "labs" ? /* @__PURE__ */ jsx24("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx24(LabsTab, { services: labServices, onResult: (item) => {
|
|
5892
6032
|
const frame = item.frames[0];
|
|
5893
6033
|
if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
|
|
5894
|
-
} }) }) : /* @__PURE__ */
|
|
5895
|
-
/* @__PURE__ */
|
|
5896
|
-
/* @__PURE__ */
|
|
5897
|
-
/* @__PURE__ */
|
|
5898
|
-
] }) : currentResult.status === "error" ? /* @__PURE__ */
|
|
5899
|
-
/* @__PURE__ */
|
|
5900
|
-
/* @__PURE__ */
|
|
5901
|
-
/* @__PURE__ */
|
|
5902
|
-
/* @__PURE__ */
|
|
6034
|
+
} }) }) : /* @__PURE__ */ jsxs22("div", { className: "flex-1 overflow-hidden flex flex-col", children: [
|
|
6035
|
+
/* @__PURE__ */ jsx24("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ jsx24("div", { className: "h-full w-full max-w-4xl aspect-square rounded-3xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center group shadow-2xl", children: currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-4 opacity-40", children: [
|
|
6036
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[40px]", children: "hourglass_top" }),
|
|
6037
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[10px] uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
|
|
6038
|
+
] }) : currentResult.status === "error" ? /* @__PURE__ */ jsxs22("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
|
|
6039
|
+
/* @__PURE__ */ jsx24("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
|
|
6040
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-2", children: [
|
|
6041
|
+
/* @__PURE__ */ jsx24("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
|
|
6042
|
+
/* @__PURE__ */ jsx24("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
|
|
5903
6043
|
] }),
|
|
5904
|
-
/* @__PURE__ */
|
|
5905
|
-
] }) : /* @__PURE__ */
|
|
5906
|
-
/* @__PURE__ */
|
|
5907
|
-
/* @__PURE__ */
|
|
5908
|
-
/* @__PURE__ */
|
|
5909
|
-
/* @__PURE__ */
|
|
5910
|
-
/* @__PURE__ */
|
|
6044
|
+
/* @__PURE__ */ jsx24(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
|
|
6045
|
+
] }) : /* @__PURE__ */ jsxs22("div", { className: "h-full w-full relative flex items-center justify-center", children: [
|
|
6046
|
+
/* @__PURE__ */ jsx24("img", { src: currentResult.fullBase64 || currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
|
|
6047
|
+
/* @__PURE__ */ jsxs22("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: [
|
|
6048
|
+
/* @__PURE__ */ jsx24(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
|
|
6049
|
+
/* @__PURE__ */ jsx24(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateBatch(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
|
|
6050
|
+
/* @__PURE__ */ jsx24(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
|
|
5911
6051
|
] })
|
|
5912
|
-
] }) : /* @__PURE__ */
|
|
5913
|
-
/* @__PURE__ */
|
|
5914
|
-
/* @__PURE__ */
|
|
6052
|
+
] }) : /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
6053
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
|
|
6054
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
5915
6055
|
] }) }) }),
|
|
5916
|
-
currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */
|
|
5917
|
-
/* @__PURE__ */
|
|
6056
|
+
currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */ jsx24("div", { className: "px-6 pb-4 shrink-0 flex gap-2 overflow-x-auto", style: { scrollbarWidth: "none" }, children: currentGroup.map((item) => /* @__PURE__ */ jsxs22("div", { style: { position: "relative", flexShrink: 0 }, children: [
|
|
6057
|
+
/* @__PURE__ */ jsx24(
|
|
5918
6058
|
"div",
|
|
5919
6059
|
{
|
|
5920
6060
|
onClick: () => handleGallerySelect(item),
|
|
@@ -5929,10 +6069,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5929
6069
|
transition: "opacity 0.15s, border-color 0.15s"
|
|
5930
6070
|
},
|
|
5931
6071
|
className: "hover:opacity-80",
|
|
5932
|
-
children: /* @__PURE__ */
|
|
6072
|
+
children: /* @__PURE__ */ jsx24("img", { src: item.base64, style: { width: "100%", height: "100%", objectFit: "cover" }, alt: "" })
|
|
5933
6073
|
}
|
|
5934
6074
|
),
|
|
5935
|
-
/* @__PURE__ */
|
|
6075
|
+
/* @__PURE__ */ jsx24(
|
|
5936
6076
|
"button",
|
|
5937
6077
|
{
|
|
5938
6078
|
onClick: (e) => {
|
|
@@ -5955,31 +6095,31 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5955
6095
|
alignItems: "center",
|
|
5956
6096
|
justifyContent: "center"
|
|
5957
6097
|
},
|
|
5958
|
-
children: /* @__PURE__ */
|
|
6098
|
+
children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 10, color: item.titleTs ? "#fff" : "rgba(255,255,255,0.5)", lineHeight: 1 }, children: "star" })
|
|
5959
6099
|
}
|
|
5960
6100
|
)
|
|
5961
6101
|
] }, item.id)) })
|
|
5962
6102
|
] })
|
|
5963
6103
|
] })
|
|
5964
6104
|
] }),
|
|
5965
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
5966
|
-
/* @__PURE__ */
|
|
5967
|
-
/* @__PURE__ */
|
|
5968
|
-
/* @__PURE__ */
|
|
5969
|
-
["history", "gallery", "inspect", "setup", "sync", "tags"].map((tab) => /* @__PURE__ */
|
|
6105
|
+
!isRightCollapsed && /* @__PURE__ */ jsx24("div", { onMouseDown: startRightResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
|
|
6106
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", style: { width: isRightCollapsed ? 60 : rightPanelWidth, transition: "none" }, children: [
|
|
6107
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
|
|
6108
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-1", children: [
|
|
6109
|
+
["history", "gallery", "inspect", "setup", "sync", "tags"].map((tab) => /* @__PURE__ */ jsx24("button", { onClick: () => {
|
|
5970
6110
|
setActiveTab(tab);
|
|
5971
6111
|
setIsRightCollapsed(false);
|
|
5972
|
-
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */
|
|
5973
|
-
serverBaseUrl && /* @__PURE__ */
|
|
6112
|
+
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx24("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)),
|
|
6113
|
+
serverBaseUrl && /* @__PURE__ */ jsx24("button", { onClick: () => {
|
|
5974
6114
|
setActiveTab("server");
|
|
5975
6115
|
setIsRightCollapsed(false);
|
|
5976
|
-
}, className: `w-10 flex items-center justify-center relative transition-colors ${activeTab === "server" ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */
|
|
6116
|
+
}, className: `w-10 flex items-center justify-center relative transition-colors ${activeTab === "server" ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) })
|
|
5977
6117
|
] }),
|
|
5978
|
-
hfToken && /* @__PURE__ */
|
|
5979
|
-
/* @__PURE__ */
|
|
6118
|
+
hfToken && /* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
|
|
6119
|
+
/* @__PURE__ */ jsx24("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
|
|
5980
6120
|
] }),
|
|
5981
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
5982
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
6121
|
+
!isRightCollapsed && /* @__PURE__ */ jsxs22("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
6122
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx24(
|
|
5983
6123
|
TagManagerPanel,
|
|
5984
6124
|
{
|
|
5985
6125
|
workspaceTags,
|
|
@@ -5990,12 +6130,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5990
6130
|
onTagMove: handleTagMove
|
|
5991
6131
|
}
|
|
5992
6132
|
),
|
|
5993
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
5994
|
-
/* @__PURE__ */
|
|
5995
|
-
/* @__PURE__ */
|
|
6133
|
+
activeTab === "tags" && !workspaceTags && /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ jsxs22("div", { children: [
|
|
6134
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
|
|
6135
|
+
/* @__PURE__ */ jsx24("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
|
|
5996
6136
|
] }) }),
|
|
5997
|
-
activeTab === "history" && /* @__PURE__ */
|
|
5998
|
-
activeTab === "gallery" && /* @__PURE__ */
|
|
6137
|
+
activeTab === "history" && /* @__PURE__ */ jsx24(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: handleGallerySelect, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)), visibleCount: historyVisibleCount, onLoadMore: () => setHistoryVisibleCount((c) => c + 20) }),
|
|
6138
|
+
activeTab === "gallery" && /* @__PURE__ */ jsx24(
|
|
5999
6139
|
MediaLibrary,
|
|
6000
6140
|
{
|
|
6001
6141
|
items: galleryItems,
|
|
@@ -6011,9 +6151,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6011
6151
|
onLoadMore: () => setGalleryVisibleCount((c) => c + 20)
|
|
6012
6152
|
}
|
|
6013
6153
|
),
|
|
6014
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
6015
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
6016
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
6154
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx24(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
|
|
6155
|
+
activeTab === "setup" && /* @__PURE__ */ jsx24(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
6156
|
+
activeTab === "sync" && /* @__PURE__ */ jsx24(
|
|
6017
6157
|
ProjectSyncTab,
|
|
6018
6158
|
{
|
|
6019
6159
|
topSlot: syncTopSlot,
|
|
@@ -6037,15 +6177,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
6037
6177
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
6038
6178
|
}
|
|
6039
6179
|
),
|
|
6040
|
-
activeTab === "server" && /* @__PURE__ */
|
|
6180
|
+
activeTab === "server" && /* @__PURE__ */ jsx24(ServerTab, { serverBaseUrl })
|
|
6041
6181
|
] })
|
|
6042
6182
|
] })
|
|
6043
6183
|
] });
|
|
6044
6184
|
}
|
|
6045
6185
|
|
|
6046
6186
|
// src/components/FaApp.tsx
|
|
6047
|
-
import { useState as
|
|
6048
|
-
import { jsx as
|
|
6187
|
+
import { useState as useState20, useEffect as useEffect8 } from "react";
|
|
6188
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
6049
6189
|
function FaApp({
|
|
6050
6190
|
onGenerateImage,
|
|
6051
6191
|
onGeneratePrompt,
|
|
@@ -6064,7 +6204,7 @@ function FaApp({
|
|
|
6064
6204
|
onServerDelete,
|
|
6065
6205
|
buildInfo
|
|
6066
6206
|
}) {
|
|
6067
|
-
const [hfNamespace, setHfNamespace] =
|
|
6207
|
+
const [hfNamespace, setHfNamespace] = useState20(void 0);
|
|
6068
6208
|
useEffect8(() => {
|
|
6069
6209
|
if (!serverBaseUrl) return;
|
|
6070
6210
|
fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
|
|
@@ -6076,7 +6216,7 @@ function FaApp({
|
|
|
6076
6216
|
const result = await onGeneratePrompt(text, options);
|
|
6077
6217
|
return result.text;
|
|
6078
6218
|
};
|
|
6079
|
-
return /* @__PURE__ */
|
|
6219
|
+
return /* @__PURE__ */ jsx25(
|
|
6080
6220
|
AvatarArchitectApp,
|
|
6081
6221
|
{
|
|
6082
6222
|
onGenerateImage,
|
|
@@ -6097,7 +6237,7 @@ function FaApp({
|
|
|
6097
6237
|
}
|
|
6098
6238
|
|
|
6099
6239
|
// src/index.ts
|
|
6100
|
-
var LIB_VERSION = "2.0.
|
|
6240
|
+
var LIB_VERSION = "2.0.62";
|
|
6101
6241
|
export {
|
|
6102
6242
|
AvatarArchitectApp,
|
|
6103
6243
|
CollapsibleCard,
|