@rslsp1/fa-app-tools 2.0.57 → 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 +5 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.js +1173 -993
- package/dist/index.mjs +1116 -936
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -353,10 +353,8 @@ var CompactDropdown = ({
|
|
|
353
353
|
};
|
|
354
354
|
|
|
355
355
|
// src/components/HistoryPanel.tsx
|
|
356
|
-
import { useState as useState2 } from "react";
|
|
357
356
|
import { motion } from "motion/react";
|
|
358
357
|
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
359
|
-
var PAGE_SIZE = 20;
|
|
360
358
|
var formatFriendlyTimestamp = (timestamp) => {
|
|
361
359
|
const date = new Date(timestamp);
|
|
362
360
|
const now = /* @__PURE__ */ new Date();
|
|
@@ -368,8 +366,7 @@ var formatFriendlyTimestamp = (timestamp) => {
|
|
|
368
366
|
if (date.toDateString() === yesterday.toDateString()) return `Gestern, ${timeStr}`;
|
|
369
367
|
return `${date.toLocaleDateString([], { day: "2-digit", month: "2-digit" })}, ${timeStr}`;
|
|
370
368
|
};
|
|
371
|
-
var HistoryPanel = ({ history, currentResultId, onSelect, onDelete }) => {
|
|
372
|
-
const [visibleCount, setVisibleCount] = useState2(PAGE_SIZE);
|
|
369
|
+
var HistoryPanel = ({ history, currentResultId, onSelect, onDelete, visibleCount, onLoadMore }) => {
|
|
373
370
|
const visibleHistory = history.slice(0, visibleCount);
|
|
374
371
|
if (history.length === 0) {
|
|
375
372
|
return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center py-20 text-center gap-4 opacity-10", children: [
|
|
@@ -413,7 +410,7 @@ var HistoryPanel = ({ history, currentResultId, onSelect, onDelete }) => {
|
|
|
413
410
|
},
|
|
414
411
|
gen.id
|
|
415
412
|
)),
|
|
416
|
-
visibleCount < history.length && /* @__PURE__ */ jsxs3("button", { type: "button", onClick:
|
|
413
|
+
visibleCount < history.length && /* @__PURE__ */ jsxs3("button", { type: "button", onClick: onLoadMore, className: "w-full py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-[10px] font-bold uppercase text-white/60 hover:text-white transition-all", children: [
|
|
417
414
|
history.length - visibleCount,
|
|
418
415
|
" weitere laden"
|
|
419
416
|
] })
|
|
@@ -486,7 +483,7 @@ var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagTogg
|
|
|
486
483
|
};
|
|
487
484
|
|
|
488
485
|
// src/components/SetupPanel.tsx
|
|
489
|
-
import { useRef as useRef2, useState as
|
|
486
|
+
import { useRef as useRef2, useState as useState2 } from "react";
|
|
490
487
|
import { motion as motion3 } from "motion/react";
|
|
491
488
|
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
492
489
|
var PRESET_URLS = [
|
|
@@ -496,11 +493,11 @@ var PRESET_URLS = [
|
|
|
496
493
|
];
|
|
497
494
|
var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
|
|
498
495
|
const workspaceInputRef = useRef2(null);
|
|
499
|
-
const [urlInput, setUrlInput] =
|
|
500
|
-
const [tokenInput, setTokenInput] =
|
|
501
|
-
const [testStatus, setTestStatus] =
|
|
502
|
-
const [result, setResult] =
|
|
503
|
-
const [fetchError, setFetchError] =
|
|
496
|
+
const [urlInput, setUrlInput] = useState2("");
|
|
497
|
+
const [tokenInput, setTokenInput] = useState2("");
|
|
498
|
+
const [testStatus, setTestStatus] = useState2("idle");
|
|
499
|
+
const [result, setResult] = useState2(null);
|
|
500
|
+
const [fetchError, setFetchError] = useState2(null);
|
|
504
501
|
const runTest = async (url) => {
|
|
505
502
|
if (!url.trim()) return;
|
|
506
503
|
setTestStatus("loading");
|
|
@@ -663,7 +660,6 @@ var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
|
|
|
663
660
|
};
|
|
664
661
|
|
|
665
662
|
// src/components/MediaLibrary.tsx
|
|
666
|
-
import { useState as useState4 } from "react";
|
|
667
663
|
import { motion as motion4 } from "motion/react";
|
|
668
664
|
|
|
669
665
|
// src/lib/grouping.ts
|
|
@@ -689,9 +685,7 @@ function groupByPrompt(items) {
|
|
|
689
685
|
|
|
690
686
|
// src/components/MediaLibrary.tsx
|
|
691
687
|
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
692
|
-
var
|
|
693
|
-
var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, onBatchDownload, onGenerateReference }) => {
|
|
694
|
-
const [visibleCount, setVisibleCount] = useState4(PAGE_SIZE2);
|
|
688
|
+
var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, onBatchDownload, onGenerateReference, visibleCount, onLoadMore }) => {
|
|
695
689
|
const selectedCount = items.filter((i) => i.selectedForExport).length;
|
|
696
690
|
const groups = groupByPrompt(items);
|
|
697
691
|
const visibleGroups = groups.slice(0, visibleCount);
|
|
@@ -764,7 +758,7 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
|
|
|
764
758
|
rep.id
|
|
765
759
|
);
|
|
766
760
|
}),
|
|
767
|
-
visibleCount < groups.length && /* @__PURE__ */ jsx8("div", { className: "col-span-2 flex justify-center pt-2 pb-4", children: /* @__PURE__ */ jsxs6("button", { type: "button", onClick:
|
|
761
|
+
visibleCount < groups.length && /* @__PURE__ */ jsx8("div", { className: "col-span-2 flex justify-center pt-2 pb-4", children: /* @__PURE__ */ jsxs6("button", { type: "button", onClick: onLoadMore, className: "px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-[10px] font-bold uppercase text-white/60 hover:text-white transition-all", children: [
|
|
768
762
|
groups.length - visibleCount,
|
|
769
763
|
" weitere laden"
|
|
770
764
|
] }) })
|
|
@@ -773,7 +767,7 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
|
|
|
773
767
|
};
|
|
774
768
|
|
|
775
769
|
// src/components/ListView.tsx
|
|
776
|
-
import { useEffect as useEffect3, useRef as useRef3, useState as
|
|
770
|
+
import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
|
|
777
771
|
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
778
772
|
var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNode, onIndentNode, onOutdentNode, onAddSibling, isActive, isInPath, onFocus, onGenerate, onGenerateBranch, onGenerateSubtree, isGenerating, isCollapsed, toggleCollapse, renderNode, children }) => {
|
|
779
773
|
const inputRef = useRef3(null);
|
|
@@ -838,7 +832,7 @@ var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNod
|
|
|
838
832
|
] });
|
|
839
833
|
};
|
|
840
834
|
function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMoveNode, onIndentNode, onOutdentNode, onAddSibling, focusedNodeId, onFocus, activePath, onGenerate, onGenerateBranch, onGenerateSubtree, isGeneratingNodeId }) {
|
|
841
|
-
const [collapsed, setCollapsed] =
|
|
835
|
+
const [collapsed, setCollapsed] = useState3(/* @__PURE__ */ new Set());
|
|
842
836
|
const toggleCollapse = (id) => {
|
|
843
837
|
setCollapsed((prev) => {
|
|
844
838
|
const next = new Set(prev);
|
|
@@ -866,13 +860,13 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
|
|
|
866
860
|
}
|
|
867
861
|
|
|
868
862
|
// src/components/AvatarArchitectApp.tsx
|
|
869
|
-
import { useState as
|
|
863
|
+
import { useState as useState19, useCallback as useCallback3, useMemo as useMemo2, useEffect as useEffect7, useRef as useRef8 } from "react";
|
|
870
864
|
|
|
871
865
|
// src/components/PromptTab.tsx
|
|
872
|
-
import { useRef as useRef4, useState as
|
|
866
|
+
import { useRef as useRef4, useState as useState5 } from "react";
|
|
873
867
|
|
|
874
868
|
// src/components/CollapsibleCard.tsx
|
|
875
|
-
import { useState as
|
|
869
|
+
import { useState as useState4 } from "react";
|
|
876
870
|
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
877
871
|
var CollapsibleCard = ({
|
|
878
872
|
title,
|
|
@@ -883,7 +877,7 @@ var CollapsibleCard = ({
|
|
|
883
877
|
collapsible = true,
|
|
884
878
|
className = ""
|
|
885
879
|
}) => {
|
|
886
|
-
const [isOpen, setIsOpen] =
|
|
880
|
+
const [isOpen, setIsOpen] = useState4(defaultOpen);
|
|
887
881
|
return /* @__PURE__ */ jsxs8("div", { className: `border border-neutral-800 rounded-lg ${className}`, children: [
|
|
888
882
|
/* @__PURE__ */ jsxs8(
|
|
889
883
|
"div",
|
|
@@ -930,18 +924,18 @@ var PromptTab = ({
|
|
|
930
924
|
onTagUpdate,
|
|
931
925
|
onTagDelete
|
|
932
926
|
}) => {
|
|
933
|
-
const [selectedLabels, setSelectedLabels] =
|
|
934
|
-
const [instructions, setInstructions] =
|
|
935
|
-
const [rules, setRules] =
|
|
936
|
-
const [activeCategory, setActiveCategory] =
|
|
937
|
-
const [copied, setCopied] =
|
|
927
|
+
const [selectedLabels, setSelectedLabels] = useState5(/* @__PURE__ */ new Set());
|
|
928
|
+
const [instructions, setInstructions] = useState5("");
|
|
929
|
+
const [rules, setRules] = useState5("");
|
|
930
|
+
const [activeCategory, setActiveCategory] = useState5(null);
|
|
931
|
+
const [copied, setCopied] = useState5(false);
|
|
938
932
|
const imgInputRef = useRef4(null);
|
|
939
|
-
const [addingInCat, setAddingInCat] =
|
|
940
|
-
const [newLabel, setNewLabel] =
|
|
941
|
-
const [newValue, setNewValue] =
|
|
942
|
-
const [editingTag, setEditingTag] =
|
|
943
|
-
const [editLabel, setEditLabel] =
|
|
944
|
-
const [editValue, setEditValue] =
|
|
933
|
+
const [addingInCat, setAddingInCat] = useState5(null);
|
|
934
|
+
const [newLabel, setNewLabel] = useState5("");
|
|
935
|
+
const [newValue, setNewValue] = useState5("");
|
|
936
|
+
const [editingTag, setEditingTag] = useState5(null);
|
|
937
|
+
const [editLabel, setEditLabel] = useState5("");
|
|
938
|
+
const [editValue, setEditValue] = useState5("");
|
|
945
939
|
const longPressTimer = useRef4(null);
|
|
946
940
|
const longPressActivated = useRef4(false);
|
|
947
941
|
const toggleTag = (label) => {
|
|
@@ -1390,7 +1384,7 @@ var PromptTab = ({
|
|
|
1390
1384
|
};
|
|
1391
1385
|
|
|
1392
1386
|
// src/components/ProjectSyncTab.tsx
|
|
1393
|
-
import { useRef as useRef5, useState as
|
|
1387
|
+
import { useRef as useRef5, useState as useState6, useEffect as useEffect4 } from "react";
|
|
1394
1388
|
import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1395
1389
|
var ProjectSyncTab = ({
|
|
1396
1390
|
topSlot,
|
|
@@ -1412,12 +1406,12 @@ var ProjectSyncTab = ({
|
|
|
1412
1406
|
}) => {
|
|
1413
1407
|
const projectInputRef = useRef5(null);
|
|
1414
1408
|
const workspaceInputRef = useRef5(null);
|
|
1415
|
-
const [saveName, setSaveName] =
|
|
1416
|
-
const [isSaving, setIsSaving] =
|
|
1417
|
-
const [isExporting, setIsExporting] =
|
|
1418
|
-
const [syncState, setSyncState] =
|
|
1419
|
-
const [syncDiff, setSyncDiff] =
|
|
1420
|
-
const [selectedLocalIds, setSelectedLocalIds] =
|
|
1409
|
+
const [saveName, setSaveName] = useState6("");
|
|
1410
|
+
const [isSaving, setIsSaving] = useState6(false);
|
|
1411
|
+
const [isExporting, setIsExporting] = useState6(false);
|
|
1412
|
+
const [syncState, setSyncState] = useState6("idle");
|
|
1413
|
+
const [syncDiff, setSyncDiff] = useState6(null);
|
|
1414
|
+
const [selectedLocalIds, setSelectedLocalIds] = useState6(/* @__PURE__ */ new Set());
|
|
1421
1415
|
const handleExport = async () => {
|
|
1422
1416
|
if (!onProjectExport) return;
|
|
1423
1417
|
setIsExporting(true);
|
|
@@ -1463,13 +1457,13 @@ var ProjectSyncTab = ({
|
|
|
1463
1457
|
});
|
|
1464
1458
|
};
|
|
1465
1459
|
const isWorking = projectActionState === "working" || projectActionState === "working-full";
|
|
1466
|
-
const [hfProjects, setHfProjects] =
|
|
1467
|
-
const [hfLoading, setHfLoading] =
|
|
1468
|
-
const [hfSaving, setHfSaving] =
|
|
1469
|
-
const [hfError, setHfError] =
|
|
1470
|
-
const [hfSaveName, setHfSaveName] =
|
|
1471
|
-
const [hfSyncProgress, setHfSyncProgress] =
|
|
1472
|
-
const [hfSyncing, setHfSyncing] =
|
|
1460
|
+
const [hfProjects, setHfProjects] = useState6([]);
|
|
1461
|
+
const [hfLoading, setHfLoading] = useState6(false);
|
|
1462
|
+
const [hfSaving, setHfSaving] = useState6(false);
|
|
1463
|
+
const [hfError, setHfError] = useState6(null);
|
|
1464
|
+
const [hfSaveName, setHfSaveName] = useState6("");
|
|
1465
|
+
const [hfSyncProgress, setHfSyncProgress] = useState6(null);
|
|
1466
|
+
const [hfSyncing, setHfSyncing] = useState6(false);
|
|
1473
1467
|
const loadHfProjects = async (token) => {
|
|
1474
1468
|
setHfLoading(true);
|
|
1475
1469
|
setHfError(null);
|
|
@@ -1888,7 +1882,7 @@ function toPromptImages(images) {
|
|
|
1888
1882
|
}
|
|
1889
1883
|
|
|
1890
1884
|
// src/hooks/useHFState.ts
|
|
1891
|
-
import { useState as
|
|
1885
|
+
import { useState as useState7, useEffect as useEffect5, useRef as useRef6, useCallback } from "react";
|
|
1892
1886
|
|
|
1893
1887
|
// src/lib/hfReducer.ts
|
|
1894
1888
|
function applyEvent(state, event) {
|
|
@@ -2020,15 +2014,15 @@ function writeOfflineBuffer(events) {
|
|
|
2020
2014
|
}
|
|
2021
2015
|
}
|
|
2022
2016
|
function useHFState(token, namespace) {
|
|
2023
|
-
const [state, setState] =
|
|
2024
|
-
const [isLoading, setIsLoading] =
|
|
2025
|
-
const [error, setError] =
|
|
2026
|
-
const [eventCount, setEventCount] =
|
|
2027
|
-
const [localOnlyCount, setLocalOnlyCount] =
|
|
2028
|
-
const [forks, setForks] =
|
|
2029
|
-
const [pendingBufferCount, setPendingBufferCount] =
|
|
2030
|
-
const [lastEventTs, setLastEventTs] =
|
|
2031
|
-
const [hasStateZip, setHasStateZip] =
|
|
2017
|
+
const [state, setState] = useState7(null);
|
|
2018
|
+
const [isLoading, setIsLoading] = useState7(false);
|
|
2019
|
+
const [error, setError] = useState7(null);
|
|
2020
|
+
const [eventCount, setEventCount] = useState7(0);
|
|
2021
|
+
const [localOnlyCount, setLocalOnlyCount] = useState7(0);
|
|
2022
|
+
const [forks, setForks] = useState7([]);
|
|
2023
|
+
const [pendingBufferCount, setPendingBufferCount] = useState7(readOfflineBuffer().length);
|
|
2024
|
+
const [lastEventTs, setLastEventTs] = useState7(0);
|
|
2025
|
+
const [hasStateZip, setHasStateZip] = useState7(false);
|
|
2032
2026
|
const knownEventPaths = useRef6(/* @__PURE__ */ new Set());
|
|
2033
2027
|
const knownFilePaths = useRef6(/* @__PURE__ */ new Set());
|
|
2034
2028
|
const allEventsRef = useRef6([]);
|
|
@@ -2166,13 +2160,13 @@ function useHFState(token, namespace) {
|
|
|
2166
2160
|
}
|
|
2167
2161
|
|
|
2168
2162
|
// src/components/labs/LabsTab.tsx
|
|
2169
|
-
import { useState as
|
|
2163
|
+
import { useState as useState15 } from "react";
|
|
2170
2164
|
|
|
2171
2165
|
// src/components/labs/LabRemix.tsx
|
|
2172
|
-
import { useState as
|
|
2166
|
+
import { useState as useState10 } from "react";
|
|
2173
2167
|
|
|
2174
2168
|
// src/components/labs/LabImagePicker.tsx
|
|
2175
|
-
import { useState as
|
|
2169
|
+
import { useState as useState8 } from "react";
|
|
2176
2170
|
import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
2177
2171
|
var LabImagePicker = ({
|
|
2178
2172
|
availableItems,
|
|
@@ -2181,8 +2175,8 @@ var LabImagePicker = ({
|
|
|
2181
2175
|
onClose,
|
|
2182
2176
|
title = "Bild w\xE4hlen"
|
|
2183
2177
|
}) => {
|
|
2184
|
-
const [search, setSearch] =
|
|
2185
|
-
const [drillItem, setDrillItem] =
|
|
2178
|
+
const [search, setSearch] = useState8("");
|
|
2179
|
+
const [drillItem, setDrillItem] = useState8(null);
|
|
2186
2180
|
const filtered = availableItems.filter(
|
|
2187
2181
|
(item) => !search || item.prompt.toLowerCase().includes(search.toLowerCase())
|
|
2188
2182
|
);
|
|
@@ -2281,16 +2275,120 @@ var LabImagePicker = ({
|
|
|
2281
2275
|
] });
|
|
2282
2276
|
};
|
|
2283
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
|
+
|
|
2284
2381
|
// src/components/labs/LabRemix.tsx
|
|
2285
|
-
import { Fragment as Fragment5, jsx as
|
|
2382
|
+
import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
2286
2383
|
var LabRemix = ({ services, onResult }) => {
|
|
2287
|
-
const [showPicker, setShowPicker] =
|
|
2288
|
-
const [selected, setSelected] =
|
|
2289
|
-
const [instruction, setInstruction] =
|
|
2290
|
-
const [generatedPrompt, setGeneratedPrompt] =
|
|
2291
|
-
const [
|
|
2292
|
-
const [isGeneratingPrompt, setIsGeneratingPrompt] =
|
|
2293
|
-
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();
|
|
2294
2392
|
const handleSelectImage = (item, frame) => {
|
|
2295
2393
|
services.onItemUsed(item);
|
|
2296
2394
|
setSelected({
|
|
@@ -2303,7 +2401,7 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2303
2401
|
roleForImage: ""
|
|
2304
2402
|
});
|
|
2305
2403
|
setGeneratedPrompt("");
|
|
2306
|
-
|
|
2404
|
+
setResultImages([]);
|
|
2307
2405
|
};
|
|
2308
2406
|
const handleGeneratePrompt = async () => {
|
|
2309
2407
|
if (!selected || !instruction.trim()) return;
|
|
@@ -2322,34 +2420,40 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2322
2420
|
setIsGeneratingPrompt(false);
|
|
2323
2421
|
}
|
|
2324
2422
|
};
|
|
2325
|
-
const
|
|
2423
|
+
const handleGenerateBatch = async () => {
|
|
2326
2424
|
if (!generatedPrompt) return;
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
|
|
2343
|
-
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
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
|
+
}
|
|
2349
2453
|
}
|
|
2350
2454
|
};
|
|
2351
2455
|
if (showPicker) {
|
|
2352
|
-
return /* @__PURE__ */
|
|
2456
|
+
return /* @__PURE__ */ jsx15(
|
|
2353
2457
|
LabImagePicker,
|
|
2354
2458
|
{
|
|
2355
2459
|
availableItems: services.availableItems,
|
|
@@ -2360,15 +2464,15 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2360
2464
|
}
|
|
2361
2465
|
);
|
|
2362
2466
|
}
|
|
2363
|
-
return /* @__PURE__ */
|
|
2364
|
-
/* @__PURE__ */
|
|
2365
|
-
/* @__PURE__ */
|
|
2366
|
-
selected ? /* @__PURE__ */
|
|
2367
|
-
/* @__PURE__ */
|
|
2368
|
-
/* @__PURE__ */
|
|
2369
|
-
/* @__PURE__ */
|
|
2370
|
-
/* @__PURE__ */
|
|
2371
|
-
/* @__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(
|
|
2372
2476
|
"input",
|
|
2373
2477
|
{
|
|
2374
2478
|
type: "checkbox",
|
|
@@ -2378,8 +2482,8 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2378
2482
|
),
|
|
2379
2483
|
"Bild an KI (Prompt)"
|
|
2380
2484
|
] }),
|
|
2381
|
-
/* @__PURE__ */
|
|
2382
|
-
/* @__PURE__ */
|
|
2485
|
+
/* @__PURE__ */ jsxs13("label", { className: "flex items-center gap-2 text-[10px] text-white/50", children: [
|
|
2486
|
+
/* @__PURE__ */ jsx15(
|
|
2383
2487
|
"input",
|
|
2384
2488
|
{
|
|
2385
2489
|
type: "checkbox",
|
|
@@ -2389,7 +2493,7 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2389
2493
|
),
|
|
2390
2494
|
"Bild als Referenz (Generierung)"
|
|
2391
2495
|
] }),
|
|
2392
|
-
/* @__PURE__ */
|
|
2496
|
+
/* @__PURE__ */ jsx15(
|
|
2393
2497
|
"input",
|
|
2394
2498
|
{
|
|
2395
2499
|
value: selected.roleForPrompt || "",
|
|
@@ -2399,22 +2503,22 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2399
2503
|
}
|
|
2400
2504
|
)
|
|
2401
2505
|
] }),
|
|
2402
|
-
/* @__PURE__ */
|
|
2403
|
-
] }) : /* @__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(
|
|
2404
2508
|
"button",
|
|
2405
2509
|
{
|
|
2406
2510
|
onClick: () => setShowPicker(true),
|
|
2407
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",
|
|
2408
2512
|
children: [
|
|
2409
|
-
/* @__PURE__ */
|
|
2513
|
+
/* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[20px]", children: "add_photo_alternate" }),
|
|
2410
2514
|
"Bild w\xE4hlen"
|
|
2411
2515
|
]
|
|
2412
2516
|
}
|
|
2413
2517
|
)
|
|
2414
2518
|
] }),
|
|
2415
|
-
/* @__PURE__ */
|
|
2416
|
-
/* @__PURE__ */
|
|
2417
|
-
/* @__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(
|
|
2418
2522
|
"textarea",
|
|
2419
2523
|
{
|
|
2420
2524
|
value: instruction,
|
|
@@ -2425,25 +2529,24 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2425
2529
|
}
|
|
2426
2530
|
)
|
|
2427
2531
|
] }),
|
|
2428
|
-
|
|
2429
|
-
/* @__PURE__ */ jsx14(
|
|
2532
|
+
/* @__PURE__ */ jsx15(
|
|
2430
2533
|
"button",
|
|
2431
2534
|
{
|
|
2432
2535
|
onClick: handleGeneratePrompt,
|
|
2433
2536
|
disabled: !selected || !instruction.trim() || isGeneratingPrompt,
|
|
2434
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",
|
|
2435
|
-
children: isGeneratingPrompt ? /* @__PURE__ */
|
|
2436
|
-
/* @__PURE__ */
|
|
2437
|
-
/* @__PURE__ */
|
|
2438
|
-
] }) : /* @__PURE__ */
|
|
2439
|
-
/* @__PURE__ */
|
|
2440
|
-
/* @__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" })
|
|
2441
2544
|
] })
|
|
2442
2545
|
}
|
|
2443
2546
|
),
|
|
2444
|
-
generatedPrompt && /* @__PURE__ */
|
|
2445
|
-
/* @__PURE__ */
|
|
2446
|
-
/* @__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(
|
|
2447
2550
|
"textarea",
|
|
2448
2551
|
{
|
|
2449
2552
|
value: generatedPrompt,
|
|
@@ -2452,37 +2555,46 @@ var LabRemix = ({ services, onResult }) => {
|
|
|
2452
2555
|
rows: 4
|
|
2453
2556
|
}
|
|
2454
2557
|
),
|
|
2455
|
-
/* @__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(
|
|
2456
2571
|
"button",
|
|
2457
2572
|
{
|
|
2458
|
-
onClick:
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
/* @__PURE__ */
|
|
2463
|
-
|
|
2464
|
-
] }) : /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
2465
|
-
/* @__PURE__ */ jsx14("span", { className: "material-symbols-outlined text-[16px]", children: "image" }),
|
|
2466
|
-
/* @__PURE__ */ jsx14("span", { children: "Bild generieren" })
|
|
2467
|
-
] })
|
|
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
|
+
]
|
|
2468
2579
|
}
|
|
2469
2580
|
)
|
|
2470
2581
|
] }),
|
|
2471
|
-
|
|
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)) })
|
|
2472
2583
|
] });
|
|
2473
2584
|
};
|
|
2474
2585
|
|
|
2475
2586
|
// src/components/labs/LabBlend.tsx
|
|
2476
|
-
import { useState as
|
|
2477
|
-
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";
|
|
2478
2589
|
var LabBlend = ({ services, onResult }) => {
|
|
2479
|
-
const [showPickerFor, setShowPickerFor] =
|
|
2480
|
-
const [selectedImages, setSelectedImages] =
|
|
2481
|
-
const [instruction, setInstruction] =
|
|
2482
|
-
const [generatedPrompt, setGeneratedPrompt] =
|
|
2483
|
-
const [
|
|
2484
|
-
const [isGeneratingPrompt, setIsGeneratingPrompt] =
|
|
2485
|
-
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();
|
|
2486
2598
|
const handleSelectImage = (index, item, frame) => {
|
|
2487
2599
|
services.onItemUsed(item);
|
|
2488
2600
|
const newImg = {
|
|
@@ -2501,7 +2613,7 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2501
2613
|
});
|
|
2502
2614
|
setShowPickerFor(null);
|
|
2503
2615
|
setGeneratedPrompt("");
|
|
2504
|
-
|
|
2616
|
+
setResultImages([]);
|
|
2505
2617
|
};
|
|
2506
2618
|
const addSlot = () => setSelectedImages((prev) => [...prev, null]);
|
|
2507
2619
|
const removeSlot = (i) => setSelectedImages((prev) => prev.filter((_, idx) => idx !== i));
|
|
@@ -2519,35 +2631,41 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2519
2631
|
setIsGeneratingPrompt(false);
|
|
2520
2632
|
}
|
|
2521
2633
|
};
|
|
2522
|
-
const
|
|
2634
|
+
const handleGenerateBatch = async () => {
|
|
2523
2635
|
if (!generatedPrompt) return;
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
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
|
+
}
|
|
2547
2665
|
}
|
|
2548
2666
|
};
|
|
2549
2667
|
if (showPickerFor !== null) {
|
|
2550
|
-
return /* @__PURE__ */
|
|
2668
|
+
return /* @__PURE__ */ jsx16(
|
|
2551
2669
|
LabImagePicker,
|
|
2552
2670
|
{
|
|
2553
2671
|
availableItems: services.availableItems,
|
|
@@ -2558,25 +2676,25 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2558
2676
|
}
|
|
2559
2677
|
);
|
|
2560
2678
|
}
|
|
2561
|
-
return /* @__PURE__ */
|
|
2562
|
-
/* @__PURE__ */
|
|
2563
|
-
selectedImages.map((img, i) => /* @__PURE__ */
|
|
2564
|
-
/* @__PURE__ */
|
|
2565
|
-
img ? /* @__PURE__ */
|
|
2566
|
-
/* @__PURE__ */
|
|
2567
|
-
/* @__PURE__ */
|
|
2568
|
-
/* @__PURE__ */
|
|
2569
|
-
/* @__PURE__ */
|
|
2570
|
-
/* @__PURE__ */
|
|
2571
|
-
/* @__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 }) }),
|
|
2572
2690
|
"KI-Prompt"
|
|
2573
2691
|
] }),
|
|
2574
|
-
/* @__PURE__ */
|
|
2575
|
-
/* @__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 }) }),
|
|
2576
2694
|
"Referenz"
|
|
2577
2695
|
] })
|
|
2578
2696
|
] }),
|
|
2579
|
-
/* @__PURE__ */
|
|
2697
|
+
/* @__PURE__ */ jsx16(
|
|
2580
2698
|
"input",
|
|
2581
2699
|
{
|
|
2582
2700
|
value: img.roleForPrompt || "",
|
|
@@ -2585,7 +2703,7 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2585
2703
|
className: "bg-black/30 border border-white/10 rounded px-2 py-0.5 text-[10px] text-white/60 outline-none"
|
|
2586
2704
|
}
|
|
2587
2705
|
),
|
|
2588
|
-
/* @__PURE__ */
|
|
2706
|
+
/* @__PURE__ */ jsx16(
|
|
2589
2707
|
"input",
|
|
2590
2708
|
{
|
|
2591
2709
|
value: img.roleForImage || "",
|
|
@@ -2595,23 +2713,23 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2595
2713
|
}
|
|
2596
2714
|
)
|
|
2597
2715
|
] })
|
|
2598
|
-
] }) : /* @__PURE__ */
|
|
2599
|
-
/* @__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" }) })
|
|
2600
2718
|
] }, i)),
|
|
2601
|
-
/* @__PURE__ */
|
|
2719
|
+
/* @__PURE__ */ jsxs14(
|
|
2602
2720
|
"button",
|
|
2603
2721
|
{
|
|
2604
2722
|
onClick: addSlot,
|
|
2605
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",
|
|
2606
2724
|
children: [
|
|
2607
|
-
/* @__PURE__ */
|
|
2725
|
+
/* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[14px]", children: "add" }),
|
|
2608
2726
|
"Bild hinzuf\xFCgen"
|
|
2609
2727
|
]
|
|
2610
2728
|
}
|
|
2611
2729
|
),
|
|
2612
|
-
/* @__PURE__ */
|
|
2613
|
-
/* @__PURE__ */
|
|
2614
|
-
/* @__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(
|
|
2615
2733
|
"textarea",
|
|
2616
2734
|
{
|
|
2617
2735
|
value: instruction,
|
|
@@ -2622,24 +2740,24 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2622
2740
|
}
|
|
2623
2741
|
)
|
|
2624
2742
|
] }),
|
|
2625
|
-
/* @__PURE__ */
|
|
2743
|
+
/* @__PURE__ */ jsx16(
|
|
2626
2744
|
"button",
|
|
2627
2745
|
{
|
|
2628
2746
|
onClick: handleGeneratePrompt,
|
|
2629
2747
|
disabled: selectedImages.filter(Boolean).length < 2 || !instruction.trim() || isGeneratingPrompt,
|
|
2630
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",
|
|
2631
|
-
children: isGeneratingPrompt ? /* @__PURE__ */
|
|
2632
|
-
/* @__PURE__ */
|
|
2633
|
-
/* @__PURE__ */
|
|
2634
|
-
] }) : /* @__PURE__ */
|
|
2635
|
-
/* @__PURE__ */
|
|
2636
|
-
/* @__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" })
|
|
2637
2755
|
] })
|
|
2638
2756
|
}
|
|
2639
2757
|
),
|
|
2640
|
-
generatedPrompt && /* @__PURE__ */
|
|
2641
|
-
/* @__PURE__ */
|
|
2642
|
-
/* @__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(
|
|
2643
2761
|
"textarea",
|
|
2644
2762
|
{
|
|
2645
2763
|
value: generatedPrompt,
|
|
@@ -2648,38 +2766,46 @@ var LabBlend = ({ services, onResult }) => {
|
|
|
2648
2766
|
rows: 4
|
|
2649
2767
|
}
|
|
2650
2768
|
),
|
|
2651
|
-
/* @__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(
|
|
2652
2782
|
"button",
|
|
2653
2783
|
{
|
|
2654
|
-
onClick:
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
/* @__PURE__ */
|
|
2659
|
-
|
|
2660
|
-
] }) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
|
|
2661
|
-
/* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[16px]", children: "image" }),
|
|
2662
|
-
/* @__PURE__ */ jsx15("span", { children: "Bild generieren" })
|
|
2663
|
-
] })
|
|
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
|
+
]
|
|
2664
2790
|
}
|
|
2665
2791
|
)
|
|
2666
2792
|
] }),
|
|
2667
|
-
|
|
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)) })
|
|
2668
2794
|
] });
|
|
2669
2795
|
};
|
|
2670
2796
|
|
|
2671
2797
|
// src/components/labs/LabCompare.tsx
|
|
2672
|
-
import { useState as
|
|
2673
|
-
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";
|
|
2674
2800
|
var LabCompare = ({ services, onResult }) => {
|
|
2675
|
-
const [showPickerFor, setShowPickerFor] =
|
|
2676
|
-
const [selectedImages, setSelectedImages] =
|
|
2677
|
-
const [instruction, setInstruction] =
|
|
2678
|
-
const [analysis, setAnalysis] =
|
|
2679
|
-
const [generatedPrompt, setGeneratedPrompt] =
|
|
2680
|
-
const [resultImage, setResultImage] =
|
|
2681
|
-
const [isAnalyzing, setIsAnalyzing] =
|
|
2682
|
-
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);
|
|
2683
2809
|
const handleSelectImage = (index, item, frame) => {
|
|
2684
2810
|
services.onItemUsed(item);
|
|
2685
2811
|
const newImg = {
|
|
@@ -2737,7 +2863,7 @@ var LabCompare = ({ services, onResult }) => {
|
|
|
2737
2863
|
}
|
|
2738
2864
|
};
|
|
2739
2865
|
if (showPickerFor !== null) {
|
|
2740
|
-
return /* @__PURE__ */
|
|
2866
|
+
return /* @__PURE__ */ jsx17(
|
|
2741
2867
|
LabImagePicker,
|
|
2742
2868
|
{
|
|
2743
2869
|
availableItems: services.availableItems,
|
|
@@ -2748,19 +2874,19 @@ var LabCompare = ({ services, onResult }) => {
|
|
|
2748
2874
|
}
|
|
2749
2875
|
);
|
|
2750
2876
|
}
|
|
2751
|
-
return /* @__PURE__ */
|
|
2752
|
-
/* @__PURE__ */
|
|
2753
|
-
selectedImages.map((img, i) => /* @__PURE__ */
|
|
2754
|
-
/* @__PURE__ */
|
|
2755
|
-
img ? /* @__PURE__ */
|
|
2756
|
-
/* @__PURE__ */
|
|
2757
|
-
/* @__PURE__ */
|
|
2758
|
-
/* @__PURE__ */
|
|
2759
|
-
/* @__PURE__ */
|
|
2760
|
-
/* @__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 }) }),
|
|
2761
2887
|
"Bild an KI mitgeben"
|
|
2762
2888
|
] }),
|
|
2763
|
-
/* @__PURE__ */
|
|
2889
|
+
/* @__PURE__ */ jsx17(
|
|
2764
2890
|
"input",
|
|
2765
2891
|
{
|
|
2766
2892
|
value: img.roleForPrompt || "",
|
|
@@ -2770,16 +2896,16 @@ var LabCompare = ({ services, onResult }) => {
|
|
|
2770
2896
|
}
|
|
2771
2897
|
)
|
|
2772
2898
|
] })
|
|
2773
|
-
] }) : /* @__PURE__ */
|
|
2774
|
-
/* @__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" }) })
|
|
2775
2901
|
] }, i)),
|
|
2776
|
-
/* @__PURE__ */
|
|
2777
|
-
/* @__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" }),
|
|
2778
2904
|
"Bild hinzuf\xFCgen"
|
|
2779
2905
|
] }),
|
|
2780
|
-
/* @__PURE__ */
|
|
2781
|
-
/* @__PURE__ */
|
|
2782
|
-
/* @__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(
|
|
2783
2909
|
"textarea",
|
|
2784
2910
|
{
|
|
2785
2911
|
value: instruction,
|
|
@@ -2790,27 +2916,27 @@ var LabCompare = ({ services, onResult }) => {
|
|
|
2790
2916
|
}
|
|
2791
2917
|
)
|
|
2792
2918
|
] }),
|
|
2793
|
-
/* @__PURE__ */
|
|
2919
|
+
/* @__PURE__ */ jsx17(
|
|
2794
2920
|
"button",
|
|
2795
2921
|
{
|
|
2796
2922
|
onClick: handleAnalyze,
|
|
2797
2923
|
disabled: selectedImages.filter(Boolean).length < 1 || !instruction.trim() || isAnalyzing,
|
|
2798
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",
|
|
2799
|
-
children: isAnalyzing ? /* @__PURE__ */
|
|
2800
|
-
/* @__PURE__ */
|
|
2801
|
-
/* @__PURE__ */
|
|
2802
|
-
] }) : /* @__PURE__ */
|
|
2803
|
-
/* @__PURE__ */
|
|
2804
|
-
/* @__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" })
|
|
2805
2931
|
] })
|
|
2806
2932
|
}
|
|
2807
2933
|
),
|
|
2808
|
-
analysis && /* @__PURE__ */
|
|
2809
|
-
/* @__PURE__ */
|
|
2810
|
-
/* @__PURE__ */
|
|
2811
|
-
/* @__PURE__ */
|
|
2812
|
-
/* @__PURE__ */
|
|
2813
|
-
/* @__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(
|
|
2814
2940
|
"textarea",
|
|
2815
2941
|
{
|
|
2816
2942
|
value: generatedPrompt,
|
|
@@ -2820,36 +2946,37 @@ var LabCompare = ({ services, onResult }) => {
|
|
|
2820
2946
|
rows: 3
|
|
2821
2947
|
}
|
|
2822
2948
|
),
|
|
2823
|
-
/* @__PURE__ */
|
|
2949
|
+
/* @__PURE__ */ jsx17(
|
|
2824
2950
|
"button",
|
|
2825
2951
|
{
|
|
2826
2952
|
onClick: handleGenerateImage,
|
|
2827
2953
|
disabled: !generatedPrompt.trim() || isGeneratingImage,
|
|
2828
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",
|
|
2829
|
-
children: isGeneratingImage ? /* @__PURE__ */
|
|
2830
|
-
/* @__PURE__ */
|
|
2831
|
-
/* @__PURE__ */
|
|
2832
|
-
] }) : /* @__PURE__ */
|
|
2833
|
-
/* @__PURE__ */
|
|
2834
|
-
/* @__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" })
|
|
2835
2961
|
] })
|
|
2836
2962
|
}
|
|
2837
2963
|
)
|
|
2838
2964
|
] })
|
|
2839
2965
|
] }),
|
|
2840
|
-
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" }) })
|
|
2841
2967
|
] });
|
|
2842
2968
|
};
|
|
2843
2969
|
|
|
2844
2970
|
// src/components/labs/LabLoop.tsx
|
|
2845
|
-
import { useState as
|
|
2846
|
-
import {
|
|
2971
|
+
import { useState as useState13 } from "react";
|
|
2972
|
+
import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2847
2973
|
var LabLoop = ({ services, onResult }) => {
|
|
2848
|
-
const [rounds, setRounds] =
|
|
2849
|
-
const [currentInstruction, setCurrentInstruction] =
|
|
2850
|
-
const [showPickerForRound, setShowPickerForRound] =
|
|
2851
|
-
const [pendingImages, setPendingImages] =
|
|
2852
|
-
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();
|
|
2853
2980
|
const currentPrompt = rounds.length > 0 ? rounds[rounds.length - 1].prompt : "";
|
|
2854
2981
|
const handleAddImage = (item, frame) => {
|
|
2855
2982
|
services.onItemUsed(item);
|
|
@@ -2883,8 +3010,8 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
2883
3010
|
});
|
|
2884
3011
|
const { base64, mediaId } = await services.generateImage({
|
|
2885
3012
|
prompt: newPrompt,
|
|
2886
|
-
aspectRatio
|
|
2887
|
-
modelDisplayName:
|
|
3013
|
+
aspectRatio,
|
|
3014
|
+
modelDisplayName: model
|
|
2888
3015
|
});
|
|
2889
3016
|
const newBase64 = `data:image/png;base64,${base64}`;
|
|
2890
3017
|
const newFrame = { id: crypto.randomUUID(), base64: newBase64, mediaId, source: "generated" };
|
|
@@ -2910,7 +3037,7 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
2910
3037
|
}
|
|
2911
3038
|
};
|
|
2912
3039
|
if (showPickerForRound !== null) {
|
|
2913
|
-
return /* @__PURE__ */
|
|
3040
|
+
return /* @__PURE__ */ jsx18(
|
|
2914
3041
|
LabImagePicker,
|
|
2915
3042
|
{
|
|
2916
3043
|
availableItems: services.availableItems,
|
|
@@ -2921,32 +3048,32 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
2921
3048
|
}
|
|
2922
3049
|
);
|
|
2923
3050
|
}
|
|
2924
|
-
return /* @__PURE__ */
|
|
2925
|
-
rounds.map((round, i) => /* @__PURE__ */
|
|
2926
|
-
/* @__PURE__ */
|
|
2927
|
-
/* @__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: [
|
|
2928
3055
|
"R",
|
|
2929
3056
|
i + 1
|
|
2930
3057
|
] }),
|
|
2931
|
-
round.frame && /* @__PURE__ */
|
|
3058
|
+
round.frame && /* @__PURE__ */ jsx18("img", { src: round.frame.base64, className: "w-12 h-12 object-cover rounded-lg" })
|
|
2932
3059
|
] }),
|
|
2933
|
-
/* @__PURE__ */
|
|
2934
|
-
/* @__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: [
|
|
2935
3062
|
'"',
|
|
2936
3063
|
round.instruction,
|
|
2937
3064
|
'"'
|
|
2938
3065
|
] }),
|
|
2939
|
-
/* @__PURE__ */
|
|
3066
|
+
/* @__PURE__ */ jsx18("p", { className: "text-[10px] text-white/60 leading-tight line-clamp-3", children: round.prompt })
|
|
2940
3067
|
] })
|
|
2941
3068
|
] }, i)),
|
|
2942
|
-
/* @__PURE__ */
|
|
2943
|
-
/* @__PURE__ */
|
|
2944
|
-
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: [
|
|
2945
3072
|
'Letzter Prompt: "',
|
|
2946
3073
|
currentPrompt,
|
|
2947
3074
|
'"'
|
|
2948
3075
|
] }),
|
|
2949
|
-
/* @__PURE__ */
|
|
3076
|
+
/* @__PURE__ */ jsx18(
|
|
2950
3077
|
"textarea",
|
|
2951
3078
|
{
|
|
2952
3079
|
value: currentInstruction,
|
|
@@ -2956,10 +3083,10 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
2956
3083
|
rows: 3
|
|
2957
3084
|
}
|
|
2958
3085
|
),
|
|
2959
|
-
pendingImages.map((img, i) => /* @__PURE__ */
|
|
2960
|
-
/* @__PURE__ */
|
|
2961
|
-
/* @__PURE__ */
|
|
2962
|
-
/* @__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(
|
|
2963
3090
|
"input",
|
|
2964
3091
|
{
|
|
2965
3092
|
value: img.roleForPrompt || "",
|
|
@@ -2968,36 +3095,43 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
2968
3095
|
className: "flex-1 bg-black/30 border border-white/10 rounded px-2 py-0.5 text-[10px] text-white/60 outline-none"
|
|
2969
3096
|
}
|
|
2970
3097
|
),
|
|
2971
|
-
/* @__PURE__ */
|
|
2972
|
-
/* @__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 }) }),
|
|
2973
3100
|
"KI"
|
|
2974
3101
|
] }),
|
|
2975
|
-
/* @__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" }) })
|
|
2976
3103
|
] }, i)),
|
|
2977
|
-
/* @__PURE__ */
|
|
3104
|
+
/* @__PURE__ */ jsxs16(
|
|
2978
3105
|
"button",
|
|
2979
3106
|
{
|
|
2980
3107
|
onClick: () => setShowPickerForRound(rounds.length),
|
|
2981
3108
|
className: "text-[10px] text-white/30 active:text-white/60 flex items-center gap-1 self-start",
|
|
2982
3109
|
children: [
|
|
2983
|
-
/* @__PURE__ */
|
|
3110
|
+
/* @__PURE__ */ jsx18("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
|
|
2984
3111
|
"Referenzbild hinzuf\xFCgen"
|
|
2985
3112
|
]
|
|
2986
3113
|
}
|
|
2987
3114
|
),
|
|
2988
|
-
/* @__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(
|
|
2989
3126
|
"button",
|
|
2990
3127
|
{
|
|
2991
3128
|
onClick: handleRunRound,
|
|
2992
|
-
disabled: !currentInstruction.trim()
|
|
3129
|
+
disabled: !currentInstruction.trim(),
|
|
2993
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",
|
|
2994
|
-
children:
|
|
2995
|
-
/* @__PURE__ */
|
|
2996
|
-
/* @__PURE__ */
|
|
2997
|
-
]
|
|
2998
|
-
/* @__PURE__ */ jsx17("span", { className: "material-symbols-outlined text-[16px]", children: "loop" }),
|
|
2999
|
-
/* @__PURE__ */ jsx17("span", { children: "Runde starten" })
|
|
3000
|
-
] })
|
|
3131
|
+
children: [
|
|
3132
|
+
/* @__PURE__ */ jsx18("span", { className: "material-symbols-outlined text-[16px]", children: "loop" }),
|
|
3133
|
+
/* @__PURE__ */ jsx18("span", { children: "Runde starten" })
|
|
3134
|
+
]
|
|
3001
3135
|
}
|
|
3002
3136
|
)
|
|
3003
3137
|
] })
|
|
@@ -3005,8 +3139,8 @@ var LabLoop = ({ services, onResult }) => {
|
|
|
3005
3139
|
};
|
|
3006
3140
|
|
|
3007
3141
|
// src/components/labs/LabFrameExtractor.tsx
|
|
3008
|
-
import { useRef as useRef7, useState as
|
|
3009
|
-
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";
|
|
3010
3144
|
var formatTime = (s) => {
|
|
3011
3145
|
const m = Math.floor(s / 60);
|
|
3012
3146
|
const sec = (s % 60).toFixed(1);
|
|
@@ -3022,12 +3156,12 @@ var LabFrameExtractor = ({
|
|
|
3022
3156
|
const videoRef = useRef7(null);
|
|
3023
3157
|
const canvasRef = useRef7(null);
|
|
3024
3158
|
const cancelledRef = useRef7(false);
|
|
3025
|
-
const [selectedItem, setSelectedItem] =
|
|
3026
|
-
const [videoSrc, setVideoSrc] =
|
|
3027
|
-
const [videoReady, setVideoReady] =
|
|
3028
|
-
const [frames, setFrames] =
|
|
3029
|
-
const [isExtracting, setIsExtracting] =
|
|
3030
|
-
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");
|
|
3031
3165
|
const handleVideoSelect = (item) => {
|
|
3032
3166
|
const mediaId = item.frames[0]?.mediaId;
|
|
3033
3167
|
if (!mediaId) return;
|
|
@@ -3107,10 +3241,10 @@ var LabFrameExtractor = ({
|
|
|
3107
3241
|
frames: [labFrame]
|
|
3108
3242
|
});
|
|
3109
3243
|
};
|
|
3110
|
-
return /* @__PURE__ */
|
|
3111
|
-
/* @__PURE__ */
|
|
3112
|
-
videoItems.length === 0 && /* @__PURE__ */
|
|
3113
|
-
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(
|
|
3114
3248
|
"button",
|
|
3115
3249
|
{
|
|
3116
3250
|
onClick: () => handleVideoSelect(item),
|
|
@@ -3128,7 +3262,7 @@ var LabFrameExtractor = ({
|
|
|
3128
3262
|
item.id
|
|
3129
3263
|
))
|
|
3130
3264
|
] }),
|
|
3131
|
-
videoSrc && /* @__PURE__ */
|
|
3265
|
+
videoSrc && /* @__PURE__ */ jsx19(
|
|
3132
3266
|
"video",
|
|
3133
3267
|
{
|
|
3134
3268
|
ref: videoRef,
|
|
@@ -3139,9 +3273,9 @@ var LabFrameExtractor = ({
|
|
|
3139
3273
|
style: { width: "100%", maxHeight: 280, background: "#000", borderRadius: 6, display: "block" }
|
|
3140
3274
|
}
|
|
3141
3275
|
),
|
|
3142
|
-
/* @__PURE__ */
|
|
3143
|
-
/* @__PURE__ */
|
|
3144
|
-
["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(
|
|
3145
3279
|
"button",
|
|
3146
3280
|
{
|
|
3147
3281
|
disabled: !videoReady,
|
|
@@ -3160,21 +3294,21 @@ var LabFrameExtractor = ({
|
|
|
3160
3294
|
},
|
|
3161
3295
|
mode
|
|
3162
3296
|
)),
|
|
3163
|
-
/* @__PURE__ */
|
|
3164
|
-
/* @__PURE__ */
|
|
3297
|
+
/* @__PURE__ */ jsx19("span", { style: { fontSize: 11, color: "#aaa" }, children: "every" }),
|
|
3298
|
+
/* @__PURE__ */ jsx19(
|
|
3165
3299
|
"select",
|
|
3166
3300
|
{
|
|
3167
3301
|
value: intervalSec,
|
|
3168
3302
|
onChange: (e) => setIntervalSec(e.target.value),
|
|
3169
3303
|
disabled: !videoReady || isExtracting,
|
|
3170
3304
|
style: { fontSize: 11, background: "#111", border: "1px solid #333", color: "#fff", borderRadius: 4, padding: "2px 4px" },
|
|
3171
|
-
children: INTERVAL_OPTIONS.map((v) => /* @__PURE__ */
|
|
3305
|
+
children: INTERVAL_OPTIONS.map((v) => /* @__PURE__ */ jsxs17("option", { value: v, children: [
|
|
3172
3306
|
v,
|
|
3173
3307
|
"s"
|
|
3174
3308
|
] }, v))
|
|
3175
3309
|
}
|
|
3176
3310
|
),
|
|
3177
|
-
/* @__PURE__ */
|
|
3311
|
+
/* @__PURE__ */ jsx19(
|
|
3178
3312
|
"button",
|
|
3179
3313
|
{
|
|
3180
3314
|
disabled: !videoReady,
|
|
@@ -3195,8 +3329,8 @@ var LabFrameExtractor = ({
|
|
|
3195
3329
|
}
|
|
3196
3330
|
)
|
|
3197
3331
|
] }),
|
|
3198
|
-
/* @__PURE__ */
|
|
3199
|
-
frames.map((frame) => /* @__PURE__ */
|
|
3332
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: 8, overflowX: "auto", paddingBottom: 4 }, children: [
|
|
3333
|
+
frames.map((frame) => /* @__PURE__ */ jsxs17(
|
|
3200
3334
|
"div",
|
|
3201
3335
|
{
|
|
3202
3336
|
style: {
|
|
@@ -3208,10 +3342,10 @@ var LabFrameExtractor = ({
|
|
|
3208
3342
|
background: "rgba(255,255,255,0.03)"
|
|
3209
3343
|
},
|
|
3210
3344
|
children: [
|
|
3211
|
-
/* @__PURE__ */
|
|
3212
|
-
/* @__PURE__ */
|
|
3213
|
-
/* @__PURE__ */
|
|
3214
|
-
/* @__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(
|
|
3215
3349
|
"button",
|
|
3216
3350
|
{
|
|
3217
3351
|
onClick: () => useFrame(frame),
|
|
@@ -3228,7 +3362,7 @@ var LabFrameExtractor = ({
|
|
|
3228
3362
|
children: "Use"
|
|
3229
3363
|
}
|
|
3230
3364
|
),
|
|
3231
|
-
/* @__PURE__ */
|
|
3365
|
+
/* @__PURE__ */ jsx19(
|
|
3232
3366
|
"button",
|
|
3233
3367
|
{
|
|
3234
3368
|
onClick: () => setFrames((prev) => prev.filter((f) => f.id !== frame.id)),
|
|
@@ -3249,13 +3383,13 @@ var LabFrameExtractor = ({
|
|
|
3249
3383
|
},
|
|
3250
3384
|
frame.id
|
|
3251
3385
|
)),
|
|
3252
|
-
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" })
|
|
3253
3387
|
] })
|
|
3254
3388
|
] });
|
|
3255
3389
|
};
|
|
3256
3390
|
|
|
3257
3391
|
// src/components/labs/LabsTab.tsx
|
|
3258
|
-
import { jsx as
|
|
3392
|
+
import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
3259
3393
|
var BASE_TABS = [
|
|
3260
3394
|
{ key: "remix", label: "Remix", icon: "auto_fix_high" },
|
|
3261
3395
|
{ key: "blend", label: "Blend", icon: "merge" },
|
|
@@ -3264,28 +3398,28 @@ var BASE_TABS = [
|
|
|
3264
3398
|
];
|
|
3265
3399
|
var FRAMES_TAB = { key: "frames", label: "Frames", icon: "crop_original" };
|
|
3266
3400
|
var LabsTab = ({ services, onResult, videoItems, resolveVideoUrl }) => {
|
|
3267
|
-
const [activeTab, setActiveTab] =
|
|
3401
|
+
const [activeTab, setActiveTab] = useState15("remix");
|
|
3268
3402
|
const showFrames = !!(videoItems && resolveVideoUrl);
|
|
3269
3403
|
const tabs = showFrames ? [...BASE_TABS, FRAMES_TAB] : BASE_TABS;
|
|
3270
|
-
return /* @__PURE__ */
|
|
3271
|
-
/* @__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(
|
|
3272
3406
|
"button",
|
|
3273
3407
|
{
|
|
3274
3408
|
onClick: () => setActiveTab(tab.key),
|
|
3275
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"}`,
|
|
3276
3410
|
children: [
|
|
3277
|
-
/* @__PURE__ */
|
|
3411
|
+
/* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined text-[14px]", children: tab.icon }),
|
|
3278
3412
|
tab.label
|
|
3279
3413
|
]
|
|
3280
3414
|
},
|
|
3281
3415
|
tab.key
|
|
3282
3416
|
)) }),
|
|
3283
|
-
/* @__PURE__ */
|
|
3284
|
-
activeTab === "remix" && /* @__PURE__ */
|
|
3285
|
-
activeTab === "blend" && /* @__PURE__ */
|
|
3286
|
-
activeTab === "compare" && /* @__PURE__ */
|
|
3287
|
-
activeTab === "loop" && /* @__PURE__ */
|
|
3288
|
-
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(
|
|
3289
3423
|
LabFrameExtractor,
|
|
3290
3424
|
{
|
|
3291
3425
|
videoItems,
|
|
@@ -3298,19 +3432,19 @@ var LabsTab = ({ services, onResult, videoItems, resolveVideoUrl }) => {
|
|
|
3298
3432
|
};
|
|
3299
3433
|
|
|
3300
3434
|
// src/components/TagManagerPanel.tsx
|
|
3301
|
-
import { useState as
|
|
3302
|
-
import { jsx as
|
|
3435
|
+
import { useState as useState16 } from "react";
|
|
3436
|
+
import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
3303
3437
|
function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete, onTagReorder, onTagMove }) {
|
|
3304
3438
|
const categories = Object.keys(workspaceTags.by_category).filter(
|
|
3305
3439
|
(cat) => (workspaceTags.by_category[cat] || []).some((t) => !t.is_deleted)
|
|
3306
3440
|
);
|
|
3307
|
-
const [selectedCategory, setSelectedCategory] =
|
|
3441
|
+
const [selectedCategory, setSelectedCategory] = useState16(categories[0] || "");
|
|
3308
3442
|
const effectiveCategory = categories.includes(selectedCategory) ? selectedCategory : categories[0] || "";
|
|
3309
|
-
const [editingLabel, setEditingLabel] =
|
|
3310
|
-
const [editState, setEditState] =
|
|
3311
|
-
const [newTag, setNewTag] =
|
|
3312
|
-
const [movingLabel, setMovingLabel] =
|
|
3313
|
-
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("");
|
|
3314
3448
|
const tags = (workspaceTags.by_category[effectiveCategory] || []).filter((t) => !t.is_deleted);
|
|
3315
3449
|
const otherCategories = categories.filter((c) => c !== effectiveCategory);
|
|
3316
3450
|
const startEdit = (tag) => {
|
|
@@ -3353,10 +3487,10 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3353
3487
|
if (!confirm(`Tag "${tag.label}" l\xF6schen?`)) return;
|
|
3354
3488
|
onTagDelete(tag.label, effectiveCategory);
|
|
3355
3489
|
};
|
|
3356
|
-
return /* @__PURE__ */
|
|
3357
|
-
/* @__PURE__ */
|
|
3358
|
-
/* @__PURE__ */
|
|
3359
|
-
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(
|
|
3360
3494
|
"button",
|
|
3361
3495
|
{
|
|
3362
3496
|
onClick: () => {
|
|
@@ -3368,17 +3502,17 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3368
3502
|
children: [
|
|
3369
3503
|
cat,
|
|
3370
3504
|
" ",
|
|
3371
|
-
/* @__PURE__ */
|
|
3505
|
+
/* @__PURE__ */ jsx21("span", { className: "ml-1 opacity-50", children: (workspaceTags.by_category[cat] || []).filter((t) => !t.is_deleted).length })
|
|
3372
3506
|
]
|
|
3373
3507
|
},
|
|
3374
3508
|
cat
|
|
3375
3509
|
)),
|
|
3376
|
-
categories.length === 0 && /* @__PURE__ */
|
|
3510
|
+
categories.length === 0 && /* @__PURE__ */ jsx21("span", { className: "text-[10px] text-white/20", children: "Erst Workspace importieren" })
|
|
3377
3511
|
] }) }),
|
|
3378
|
-
/* @__PURE__ */
|
|
3379
|
-
tags.map((tag, i) => /* @__PURE__ */
|
|
3380
|
-
editingLabel === tag.label ? /* @__PURE__ */
|
|
3381
|
-
/* @__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(
|
|
3382
3516
|
"input",
|
|
3383
3517
|
{
|
|
3384
3518
|
value: editState.label,
|
|
@@ -3389,7 +3523,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3389
3523
|
onKeyDown: (e) => e.key === "Enter" && saveEdit(tag.label)
|
|
3390
3524
|
}
|
|
3391
3525
|
),
|
|
3392
|
-
/* @__PURE__ */
|
|
3526
|
+
/* @__PURE__ */ jsx21(
|
|
3393
3527
|
"textarea",
|
|
3394
3528
|
{
|
|
3395
3529
|
value: editState.value,
|
|
@@ -3399,24 +3533,24 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3399
3533
|
placeholder: "Prompt-Wert (leer = Label)"
|
|
3400
3534
|
}
|
|
3401
3535
|
),
|
|
3402
|
-
/* @__PURE__ */
|
|
3403
|
-
/* @__PURE__ */
|
|
3404
|
-
/* @__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" })
|
|
3405
3539
|
] })
|
|
3406
|
-
] }) : /* @__PURE__ */
|
|
3407
|
-
/* @__PURE__ */
|
|
3408
|
-
/* @__PURE__ */
|
|
3409
|
-
/* @__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" }) })
|
|
3410
3544
|
] }),
|
|
3411
|
-
/* @__PURE__ */
|
|
3412
|
-
/* @__PURE__ */
|
|
3413
|
-
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: [
|
|
3414
3548
|
tag.value.slice(0, 60),
|
|
3415
3549
|
tag.value.length > 60 ? "\u2026" : ""
|
|
3416
3550
|
] })
|
|
3417
3551
|
] }),
|
|
3418
|
-
/* @__PURE__ */
|
|
3419
|
-
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(
|
|
3420
3554
|
"button",
|
|
3421
3555
|
{
|
|
3422
3556
|
onClick: () => {
|
|
@@ -3426,29 +3560,29 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3426
3560
|
},
|
|
3427
3561
|
className: "p-1 rounded text-white/30 hover:text-purple-400 transition",
|
|
3428
3562
|
title: "Kategorie wechseln",
|
|
3429
|
-
children: /* @__PURE__ */
|
|
3563
|
+
children: /* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[16px]", children: "drive_file_move" })
|
|
3430
3564
|
}
|
|
3431
3565
|
),
|
|
3432
|
-
/* @__PURE__ */
|
|
3433
|
-
/* @__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" }) })
|
|
3434
3568
|
] })
|
|
3435
3569
|
] }),
|
|
3436
|
-
movingLabel === tag.label && /* @__PURE__ */
|
|
3437
|
-
/* @__PURE__ */
|
|
3438
|
-
/* @__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(
|
|
3439
3573
|
"select",
|
|
3440
3574
|
{
|
|
3441
3575
|
value: moveTarget,
|
|
3442
3576
|
onChange: (e) => setMoveTarget(e.target.value),
|
|
3443
3577
|
className: "w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-[11px] text-white/70 outline-none",
|
|
3444
3578
|
children: [
|
|
3445
|
-
/* @__PURE__ */
|
|
3446
|
-
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))
|
|
3447
3581
|
]
|
|
3448
3582
|
}
|
|
3449
3583
|
),
|
|
3450
|
-
/* @__PURE__ */
|
|
3451
|
-
/* @__PURE__ */
|
|
3584
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex gap-1.5 justify-end", children: [
|
|
3585
|
+
/* @__PURE__ */ jsx21(
|
|
3452
3586
|
"button",
|
|
3453
3587
|
{
|
|
3454
3588
|
onClick: () => handleMove(tag),
|
|
@@ -3457,19 +3591,19 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3457
3591
|
children: "VERSCHIEBEN"
|
|
3458
3592
|
}
|
|
3459
3593
|
),
|
|
3460
|
-
/* @__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" })
|
|
3461
3595
|
] })
|
|
3462
3596
|
] })
|
|
3463
3597
|
] }, `${effectiveCategory}-${i}`)),
|
|
3464
|
-
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." })
|
|
3465
3599
|
] }),
|
|
3466
|
-
effectiveCategory && /* @__PURE__ */
|
|
3467
|
-
/* @__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: [
|
|
3468
3602
|
"Neuer Tag in \u201E",
|
|
3469
3603
|
effectiveCategory,
|
|
3470
3604
|
'"'
|
|
3471
3605
|
] }),
|
|
3472
|
-
/* @__PURE__ */
|
|
3606
|
+
/* @__PURE__ */ jsx21(
|
|
3473
3607
|
"input",
|
|
3474
3608
|
{
|
|
3475
3609
|
value: newTag.label,
|
|
@@ -3479,7 +3613,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3479
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"
|
|
3480
3614
|
}
|
|
3481
3615
|
),
|
|
3482
|
-
/* @__PURE__ */
|
|
3616
|
+
/* @__PURE__ */ jsx21(
|
|
3483
3617
|
"textarea",
|
|
3484
3618
|
{
|
|
3485
3619
|
value: newTag.value,
|
|
@@ -3489,14 +3623,14 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3489
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"
|
|
3490
3624
|
}
|
|
3491
3625
|
),
|
|
3492
|
-
/* @__PURE__ */
|
|
3626
|
+
/* @__PURE__ */ jsxs19(
|
|
3493
3627
|
"button",
|
|
3494
3628
|
{
|
|
3495
3629
|
onClick: handleCreate,
|
|
3496
3630
|
disabled: !newTag.label.trim(),
|
|
3497
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",
|
|
3498
3632
|
children: [
|
|
3499
|
-
/* @__PURE__ */
|
|
3633
|
+
/* @__PURE__ */ jsx21("span", { className: "material-symbols-outlined text-[14px]", children: "add" }),
|
|
3500
3634
|
"TAG ERSTELLEN"
|
|
3501
3635
|
]
|
|
3502
3636
|
}
|
|
@@ -3506,8 +3640,8 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
|
|
|
3506
3640
|
}
|
|
3507
3641
|
|
|
3508
3642
|
// src/components/HFTestTab.tsx
|
|
3509
|
-
import { useState as
|
|
3510
|
-
import { jsx as
|
|
3643
|
+
import { useState as useState17 } from "react";
|
|
3644
|
+
import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
3511
3645
|
var HF_BASE = "https://huggingface.co";
|
|
3512
3646
|
var HF_REPO = "RolandSch/fa-app-state";
|
|
3513
3647
|
var TEST_DIR = "test";
|
|
@@ -3699,8 +3833,8 @@ function tryFmt(s) {
|
|
|
3699
3833
|
}
|
|
3700
3834
|
}
|
|
3701
3835
|
function CopyBtn({ text }) {
|
|
3702
|
-
const [done, setDone] =
|
|
3703
|
-
return /* @__PURE__ */
|
|
3836
|
+
const [done, setDone] = useState17(false);
|
|
3837
|
+
return /* @__PURE__ */ jsxs20(
|
|
3704
3838
|
"button",
|
|
3705
3839
|
{
|
|
3706
3840
|
onClick: () => {
|
|
@@ -3711,7 +3845,7 @@ function CopyBtn({ text }) {
|
|
|
3711
3845
|
},
|
|
3712
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 },
|
|
3713
3847
|
children: [
|
|
3714
|
-
/* @__PURE__ */
|
|
3848
|
+
/* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: done ? "check" : "content_copy" }),
|
|
3715
3849
|
done ? "Kopiert" : "Copy"
|
|
3716
3850
|
]
|
|
3717
3851
|
}
|
|
@@ -3719,35 +3853,35 @@ function CopyBtn({ text }) {
|
|
|
3719
3853
|
}
|
|
3720
3854
|
function StepView({ step }) {
|
|
3721
3855
|
const isSpecial = step.method === "-" || step.method === "import()" || step.method === "import()+call";
|
|
3722
|
-
return /* @__PURE__ */
|
|
3723
|
-
/* @__PURE__ */
|
|
3724
|
-
/* @__PURE__ */
|
|
3725
|
-
/* @__PURE__ */
|
|
3726
|
-
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: [
|
|
3727
3861
|
step.durationMs,
|
|
3728
3862
|
"ms"
|
|
3729
3863
|
] }),
|
|
3730
|
-
/* @__PURE__ */
|
|
3864
|
+
/* @__PURE__ */ jsx22(CopyBtn, { text: JSON.stringify(step, null, 2) })
|
|
3731
3865
|
] }),
|
|
3732
|
-
!isSpecial && /* @__PURE__ */
|
|
3733
|
-
/* @__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: [
|
|
3734
3868
|
"\u2192 ",
|
|
3735
3869
|
step.method,
|
|
3736
3870
|
" ",
|
|
3737
3871
|
step.url
|
|
3738
3872
|
] }),
|
|
3739
|
-
Object.keys(step.reqHeaders).length > 0 && /* @__PURE__ */
|
|
3740
|
-
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 })
|
|
3741
3875
|
] }),
|
|
3742
|
-
step.error && /* @__PURE__ */
|
|
3743
|
-
!step.error && (step.resStatus !== void 0 || step.resBody) && /* @__PURE__ */
|
|
3744
|
-
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: [
|
|
3745
3879
|
"\u2190 ",
|
|
3746
3880
|
step.resStatus,
|
|
3747
3881
|
" ",
|
|
3748
3882
|
step.resStatusText
|
|
3749
3883
|
] }),
|
|
3750
|
-
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) })
|
|
3751
3885
|
] })
|
|
3752
3886
|
] });
|
|
3753
3887
|
}
|
|
@@ -3763,15 +3897,15 @@ function TestCard({
|
|
|
3763
3897
|
onToggle
|
|
3764
3898
|
}) {
|
|
3765
3899
|
const hasResult = state && state.status !== "idle";
|
|
3766
|
-
return /* @__PURE__ */
|
|
3767
|
-
/* @__PURE__ */
|
|
3768
|
-
/* @__PURE__ */
|
|
3769
|
-
/* @__PURE__ */
|
|
3770
|
-
/* @__PURE__ */
|
|
3771
|
-
/* @__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 })
|
|
3772
3906
|
] }),
|
|
3773
|
-
hasResult && state?.status !== "running" && /* @__PURE__ */
|
|
3774
|
-
/* @__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(
|
|
3775
3909
|
"button",
|
|
3776
3910
|
{
|
|
3777
3911
|
onClick: onRun,
|
|
@@ -3781,20 +3915,20 @@ function TestCard({
|
|
|
3781
3915
|
}
|
|
3782
3916
|
)
|
|
3783
3917
|
] }),
|
|
3784
|
-
hasResult && /* @__PURE__ */
|
|
3785
|
-
/* @__PURE__ */
|
|
3786
|
-
/* @__PURE__ */
|
|
3787
|
-
/* @__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: [
|
|
3788
3922
|
state.totalMs,
|
|
3789
3923
|
"ms \xB7 ",
|
|
3790
3924
|
state.steps.length,
|
|
3791
3925
|
" Step",
|
|
3792
3926
|
state.steps.length !== 1 ? "s" : ""
|
|
3793
3927
|
] }),
|
|
3794
|
-
/* @__PURE__ */
|
|
3795
|
-
/* @__PURE__ */
|
|
3928
|
+
/* @__PURE__ */ jsx22("div", { style: { flex: 1 } }),
|
|
3929
|
+
/* @__PURE__ */ jsx22(CopyBtn, { text: JSON.stringify(state, null, 2) })
|
|
3796
3930
|
] }),
|
|
3797
|
-
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))
|
|
3798
3932
|
] })
|
|
3799
3933
|
] });
|
|
3800
3934
|
}
|
|
@@ -3806,10 +3940,10 @@ var EVENT_TYPE_COLORS = {
|
|
|
3806
3940
|
};
|
|
3807
3941
|
function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadStatus }) {
|
|
3808
3942
|
if (!events.length) {
|
|
3809
|
-
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." });
|
|
3810
3944
|
}
|
|
3811
3945
|
const sorted = [...events].sort((a, b) => b.ts - a.ts).slice(0, 30);
|
|
3812
|
-
return /* @__PURE__ */
|
|
3946
|
+
return /* @__PURE__ */ jsxs20("div", { style: { padding: "6px 8px 4px" }, children: [
|
|
3813
3947
|
sorted.map((e, i) => {
|
|
3814
3948
|
const eKey = `${e.ts}_${e.clientId}`;
|
|
3815
3949
|
const isConfirmed = confirmedEventKeys.has(eKey);
|
|
@@ -3822,47 +3956,47 @@ function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadSta
|
|
|
3822
3956
|
const uploadStatus = imgId ? imageUploadStatus.get(imgId) : void 0;
|
|
3823
3957
|
const payloadStr = JSON.stringify(e.payload ?? {});
|
|
3824
3958
|
const payloadPreview = payloadStr.length > 70 ? payloadStr.slice(0, 70) + "\u2026" : payloadStr;
|
|
3825
|
-
return /* @__PURE__ */
|
|
3826
|
-
/* @__PURE__ */
|
|
3827
|
-
/* @__PURE__ */
|
|
3828
|
-
/* @__PURE__ */
|
|
3829
|
-
/* @__PURE__ */
|
|
3830
|
-
/* @__PURE__ */
|
|
3831
|
-
/* @__PURE__ */
|
|
3832
|
-
isConfirmed ? /* @__PURE__ */
|
|
3833
|
-
/* @__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" }),
|
|
3834
3968
|
"HF"
|
|
3835
|
-
] }) : /* @__PURE__ */
|
|
3836
|
-
/* @__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" }),
|
|
3837
3971
|
"lokal"
|
|
3838
3972
|
] })
|
|
3839
3973
|
] }),
|
|
3840
|
-
isImageEvent && /* @__PURE__ */
|
|
3841
|
-
uploadStatus === "done" && /* @__PURE__ */
|
|
3842
|
-
/* @__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" }),
|
|
3843
3977
|
"Upload \u2713"
|
|
3844
3978
|
] }),
|
|
3845
|
-
uploadStatus === "uploading" && /* @__PURE__ */
|
|
3846
|
-
/* @__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" }),
|
|
3847
3981
|
"l\xE4dt hoch\u2026"
|
|
3848
3982
|
] }),
|
|
3849
|
-
uploadStatus === "failed" && /* @__PURE__ */
|
|
3850
|
-
/* @__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" }),
|
|
3851
3985
|
"Upload fehlgeschlagen"
|
|
3852
3986
|
] }),
|
|
3853
|
-
galleryItem?.base64 ? /* @__PURE__ */
|
|
3854
|
-
/* @__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" }),
|
|
3855
3989
|
uploadStatus ? "lokal" : "von HF geladen"
|
|
3856
|
-
] }) : /* @__PURE__ */
|
|
3857
|
-
/* @__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" }),
|
|
3858
3992
|
uploadStatus === "failed" ? "Binary nicht auf HF" : "wird geladen\u2026"
|
|
3859
3993
|
] })
|
|
3860
3994
|
] }),
|
|
3861
|
-
/* @__PURE__ */
|
|
3995
|
+
/* @__PURE__ */ jsx22("div", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: payloadPreview })
|
|
3862
3996
|
] })
|
|
3863
3997
|
] }, `${eKey}_${i}`);
|
|
3864
3998
|
}),
|
|
3865
|
-
/* @__PURE__ */
|
|
3999
|
+
/* @__PURE__ */ jsxs20("div", { style: { padding: "6px 0 2px", fontSize: 9, color: "rgba(255,255,255,0.2)", textAlign: "right" }, children: [
|
|
3866
4000
|
events.length,
|
|
3867
4001
|
" Events gesamt \xB7 ",
|
|
3868
4002
|
[...confirmedEventKeys].length,
|
|
@@ -3871,9 +4005,9 @@ function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadSta
|
|
|
3871
4005
|
] });
|
|
3872
4006
|
}
|
|
3873
4007
|
function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEventKeys = /* @__PURE__ */ new Set(), imageUploadStatus = /* @__PURE__ */ new Map(), missingImages = [] }) {
|
|
3874
|
-
const [selected, setSelected] =
|
|
3875
|
-
const [results, setResults] =
|
|
3876
|
-
const [expanded, setExpanded] =
|
|
4008
|
+
const [selected, setSelected] = useState17(null);
|
|
4009
|
+
const [results, setResults] = useState17({});
|
|
4010
|
+
const [expanded, setExpanded] = useState17({});
|
|
3877
4011
|
const withResults = galleryItems.filter((g) => g.base64 && g.status === "done");
|
|
3878
4012
|
const setRunning = (id) => setResults((r) => ({ ...r, [id]: { status: "running", steps: [], totalMs: 0 } }));
|
|
3879
4013
|
const setDone = (id, steps, t0) => {
|
|
@@ -3921,15 +4055,15 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3921
4055
|
{ id: "img-hub", label: "Upload hub lib", icon: "package_2", desc: "uploadFile() via @huggingface/hub" },
|
|
3922
4056
|
{ id: "img-cdn", label: "Upload CDN lib", icon: "language", desc: "uploadFile() via esm.sh hub lib" }
|
|
3923
4057
|
];
|
|
3924
|
-
return /* @__PURE__ */
|
|
3925
|
-
noToken && /* @__PURE__ */
|
|
3926
|
-
/* @__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(
|
|
3927
4061
|
CollapsibleCard,
|
|
3928
4062
|
{
|
|
3929
4063
|
title: "Event Monitor",
|
|
3930
|
-
icon: /* @__PURE__ */
|
|
4064
|
+
icon: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "bolt" }),
|
|
3931
4065
|
defaultOpen: true,
|
|
3932
|
-
children: /* @__PURE__ */
|
|
4066
|
+
children: /* @__PURE__ */ jsx22(
|
|
3933
4067
|
EventMonitor,
|
|
3934
4068
|
{
|
|
3935
4069
|
events: allEvents,
|
|
@@ -3940,52 +4074,52 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3940
4074
|
)
|
|
3941
4075
|
}
|
|
3942
4076
|
) }),
|
|
3943
|
-
missingImages.length > 0 && /* @__PURE__ */
|
|
4077
|
+
missingImages.length > 0 && /* @__PURE__ */ jsx22("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsx22(
|
|
3944
4078
|
CollapsibleCard,
|
|
3945
4079
|
{
|
|
3946
4080
|
title: `Fehlende Bilder auf HF (${missingImages.length})`,
|
|
3947
|
-
icon: /* @__PURE__ */
|
|
4081
|
+
icon: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "broken_image" }),
|
|
3948
4082
|
defaultOpen: false,
|
|
3949
|
-
children: /* @__PURE__ */
|
|
3950
|
-
/* @__PURE__ */
|
|
3951
|
-
/* @__PURE__ */
|
|
3952
|
-
/* @__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: [
|
|
3953
4087
|
"UUID (Flow-App): ",
|
|
3954
4088
|
missingImages.filter((e) => !e.filename).length
|
|
3955
4089
|
] }),
|
|
3956
|
-
/* @__PURE__ */
|
|
3957
|
-
/* @__PURE__ */
|
|
4090
|
+
/* @__PURE__ */ jsx22("span", { children: "\xB7" }),
|
|
4091
|
+
/* @__PURE__ */ jsxs20("span", { children: [
|
|
3958
4092
|
"Filename (Server-Upload): ",
|
|
3959
4093
|
missingImages.filter((e) => !!e.filename).length
|
|
3960
4094
|
] })
|
|
3961
4095
|
] }),
|
|
3962
|
-
/* @__PURE__ */
|
|
3963
|
-
/* @__PURE__ */
|
|
3964
|
-
/* @__PURE__ */
|
|
3965
|
-
/* @__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") })
|
|
3966
4100
|
] }, e.id)) })
|
|
3967
4101
|
] })
|
|
3968
4102
|
}
|
|
3969
4103
|
) }),
|
|
3970
|
-
/* @__PURE__ */
|
|
4104
|
+
/* @__PURE__ */ jsx22(
|
|
3971
4105
|
CollapsibleCard,
|
|
3972
4106
|
{
|
|
3973
4107
|
title: "Upload Tests",
|
|
3974
|
-
icon: /* @__PURE__ */
|
|
4108
|
+
icon: /* @__PURE__ */ jsx22("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "science" }),
|
|
3975
4109
|
defaultOpen: false,
|
|
3976
|
-
children: /* @__PURE__ */
|
|
3977
|
-
/* @__PURE__ */
|
|
3978
|
-
/* @__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: [
|
|
3979
4113
|
"Bild ausw\xE4hlen (",
|
|
3980
4114
|
withResults.length,
|
|
3981
4115
|
" verf\xFCgbar)"
|
|
3982
4116
|
] }),
|
|
3983
|
-
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(
|
|
3984
4118
|
"button",
|
|
3985
4119
|
{
|
|
3986
4120
|
onClick: () => setSelected(g),
|
|
3987
4121
|
style: { padding: 0, border: `2px solid ${selected?.id === g.id ? "#0284c7" : "transparent"}`, borderRadius: 6, cursor: "pointer", overflow: "hidden", background: "none", lineHeight: 0 },
|
|
3988
|
-
children: /* @__PURE__ */
|
|
4122
|
+
children: /* @__PURE__ */ jsx22(
|
|
3989
4123
|
"img",
|
|
3990
4124
|
{
|
|
3991
4125
|
src: g.base64,
|
|
@@ -3996,38 +4130,38 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
3996
4130
|
},
|
|
3997
4131
|
g.id
|
|
3998
4132
|
)) }),
|
|
3999
|
-
selected && /* @__PURE__ */
|
|
4000
|
-
/* @__PURE__ */
|
|
4133
|
+
selected && /* @__PURE__ */ jsxs20("div", { style: { marginTop: 10, display: "flex", gap: 10, alignItems: "flex-start" }, children: [
|
|
4134
|
+
/* @__PURE__ */ jsx22(
|
|
4001
4135
|
"img",
|
|
4002
4136
|
{
|
|
4003
4137
|
src: selected.base64,
|
|
4004
4138
|
style: { width: 80, height: 80, objectFit: "cover", borderRadius: 8, border: "1px solid rgba(255,255,255,0.1)", flexShrink: 0 }
|
|
4005
4139
|
}
|
|
4006
4140
|
),
|
|
4007
|
-
/* @__PURE__ */
|
|
4008
|
-
/* @__PURE__ */
|
|
4009
|
-
/* @__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: [
|
|
4010
4144
|
"ID: ",
|
|
4011
4145
|
selected.id
|
|
4012
4146
|
] }),
|
|
4013
|
-
/* @__PURE__ */
|
|
4147
|
+
/* @__PURE__ */ jsxs20("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }, children: [
|
|
4014
4148
|
"Ziel: test/",
|
|
4015
4149
|
selected.id,
|
|
4016
4150
|
".jpg"
|
|
4017
4151
|
] }),
|
|
4018
|
-
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 })
|
|
4019
4153
|
] })
|
|
4020
4154
|
] })
|
|
4021
4155
|
] }),
|
|
4022
|
-
/* @__PURE__ */
|
|
4023
|
-
/* @__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: [
|
|
4024
4158
|
"Bild hochladen \u2192 test/",
|
|
4025
4159
|
"{",
|
|
4026
4160
|
"id",
|
|
4027
4161
|
"}",
|
|
4028
4162
|
".jpg"
|
|
4029
4163
|
] }),
|
|
4030
|
-
imgTests.map((t) => /* @__PURE__ */
|
|
4164
|
+
imgTests.map((t) => /* @__PURE__ */ jsx22(
|
|
4031
4165
|
TestCard,
|
|
4032
4166
|
{
|
|
4033
4167
|
id: t.id,
|
|
@@ -4043,13 +4177,13 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
4043
4177
|
t.id
|
|
4044
4178
|
))
|
|
4045
4179
|
] }),
|
|
4046
|
-
/* @__PURE__ */
|
|
4047
|
-
/* @__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: [
|
|
4048
4182
|
"Event schreiben \u2192 ",
|
|
4049
4183
|
namespace || "(kein namespace)",
|
|
4050
4184
|
"test/events/"
|
|
4051
4185
|
] }),
|
|
4052
|
-
/* @__PURE__ */
|
|
4186
|
+
/* @__PURE__ */ jsx22(
|
|
4053
4187
|
TestCard,
|
|
4054
4188
|
{
|
|
4055
4189
|
id: "event",
|
|
@@ -4071,10 +4205,10 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
|
|
|
4071
4205
|
}
|
|
4072
4206
|
|
|
4073
4207
|
// src/components/ServerTab.tsx
|
|
4074
|
-
import { useState as
|
|
4075
|
-
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";
|
|
4076
4210
|
function StarRating({ rating = 0 }) {
|
|
4077
|
-
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)) });
|
|
4078
4212
|
}
|
|
4079
4213
|
async function serverGet(baseUrl, path) {
|
|
4080
4214
|
const url = `${baseUrl.replace(/\/$/, "")}${path}`;
|
|
@@ -4084,20 +4218,20 @@ async function serverGet(baseUrl, path) {
|
|
|
4084
4218
|
return json && typeof json === "object" && "data" in json ? json.data : json;
|
|
4085
4219
|
}
|
|
4086
4220
|
function ServerTab({ serverBaseUrl }) {
|
|
4087
|
-
const [step, setStep] =
|
|
4088
|
-
const [users, setUsers] =
|
|
4089
|
-
const [usersLoading, setUsersLoading] =
|
|
4090
|
-
const [usersError, setUsersError] =
|
|
4091
|
-
const [selectedUser, setSelectedUser] =
|
|
4092
|
-
const [contexts, setContexts] =
|
|
4093
|
-
const [contextsLoading, setContextsLoading] =
|
|
4094
|
-
const [selectedContext, setSelectedContext] =
|
|
4095
|
-
const [tags, setTags] =
|
|
4096
|
-
const [items, setItems] =
|
|
4097
|
-
const [libLoading, setLibLoading] =
|
|
4098
|
-
const [libError, setLibError] =
|
|
4099
|
-
const [activeTag, setActiveTag] =
|
|
4100
|
-
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);
|
|
4101
4235
|
useEffect6(() => {
|
|
4102
4236
|
if (!serverBaseUrl) return;
|
|
4103
4237
|
setUsersLoading(true);
|
|
@@ -4152,54 +4286,54 @@ function ServerTab({ serverBaseUrl }) {
|
|
|
4152
4286
|
};
|
|
4153
4287
|
const filteredItems = activeTag ? items.filter((item) => item.tags?.some((t) => t.l === activeTag)) : items;
|
|
4154
4288
|
if (!serverBaseUrl) return null;
|
|
4155
|
-
return /* @__PURE__ */
|
|
4156
|
-
/* @__PURE__ */
|
|
4157
|
-
step !== "user" && /* @__PURE__ */
|
|
4158
|
-
/* @__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: [
|
|
4159
4293
|
step === "user" && "Server Browser",
|
|
4160
4294
|
step === "context" && `${selectedUser?.username} \u2014 Kontext w\xE4hlen`,
|
|
4161
4295
|
step === "library" && `${selectedUser?.username} / ${selectedContext?.label || selectedContext?.name || selectedContext?.id}`
|
|
4162
4296
|
] })
|
|
4163
4297
|
] }),
|
|
4164
|
-
step === "user" && /* @__PURE__ */
|
|
4165
|
-
usersLoading && /* @__PURE__ */
|
|
4166
|
-
usersError && /* @__PURE__ */
|
|
4167
|
-
!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(
|
|
4168
4302
|
"button",
|
|
4169
4303
|
{
|
|
4170
4304
|
onClick: () => selectUser(u),
|
|
4171
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",
|
|
4172
4306
|
children: [
|
|
4173
|
-
/* @__PURE__ */
|
|
4174
|
-
/* @__PURE__ */
|
|
4175
|
-
/* @__PURE__ */
|
|
4176
|
-
/* @__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 })
|
|
4177
4311
|
] }),
|
|
4178
|
-
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" })
|
|
4179
4313
|
]
|
|
4180
4314
|
},
|
|
4181
4315
|
u.id
|
|
4182
4316
|
))
|
|
4183
4317
|
] }),
|
|
4184
|
-
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(
|
|
4185
4319
|
"button",
|
|
4186
4320
|
{
|
|
4187
4321
|
onClick: () => loadLibrary(selectedUser, ctx),
|
|
4188
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",
|
|
4189
4323
|
children: [
|
|
4190
|
-
/* @__PURE__ */
|
|
4191
|
-
/* @__PURE__ */
|
|
4192
|
-
/* @__PURE__ */
|
|
4193
|
-
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 })
|
|
4194
4328
|
] }),
|
|
4195
|
-
/* @__PURE__ */
|
|
4329
|
+
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[16px] text-white/20", children: "chevron_right" })
|
|
4196
4330
|
]
|
|
4197
4331
|
},
|
|
4198
4332
|
ctx.id
|
|
4199
4333
|
)) }),
|
|
4200
|
-
step === "library" && /* @__PURE__ */
|
|
4201
|
-
tags.length > 0 && /* @__PURE__ */
|
|
4202
|
-
/* @__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(
|
|
4203
4337
|
"button",
|
|
4204
4338
|
{
|
|
4205
4339
|
onClick: () => setActiveTag(null),
|
|
@@ -4207,7 +4341,7 @@ function ServerTab({ serverBaseUrl }) {
|
|
|
4207
4341
|
children: "Alle"
|
|
4208
4342
|
}
|
|
4209
4343
|
),
|
|
4210
|
-
tags.map((t) => /* @__PURE__ */
|
|
4344
|
+
tags.map((t) => /* @__PURE__ */ jsx23(
|
|
4211
4345
|
"button",
|
|
4212
4346
|
{
|
|
4213
4347
|
onClick: () => setActiveTag(activeTag === t.label ? null : t.label),
|
|
@@ -4217,22 +4351,22 @@ function ServerTab({ serverBaseUrl }) {
|
|
|
4217
4351
|
t.id
|
|
4218
4352
|
))
|
|
4219
4353
|
] }),
|
|
4220
|
-
libLoading && /* @__PURE__ */
|
|
4221
|
-
libError && /* @__PURE__ */
|
|
4222
|
-
!libLoading && !libError && /* @__PURE__ */
|
|
4223
|
-
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." }),
|
|
4224
4358
|
filteredItems.map((item, i) => {
|
|
4225
4359
|
const imgUrl = item.images?.[0]?.url;
|
|
4226
|
-
return /* @__PURE__ */
|
|
4360
|
+
return /* @__PURE__ */ jsxs21(
|
|
4227
4361
|
"button",
|
|
4228
4362
|
{
|
|
4229
4363
|
onClick: () => imgUrl && setPreview(imgUrl),
|
|
4230
4364
|
className: "flex flex-col rounded-xl overflow-hidden border border-white/8 hover:border-white/25 transition-all bg-white/3 text-left",
|
|
4231
4365
|
children: [
|
|
4232
|
-
imgUrl ? /* @__PURE__ */
|
|
4233
|
-
/* @__PURE__ */
|
|
4234
|
-
item.title && /* @__PURE__ */
|
|
4235
|
-
/* @__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 })
|
|
4236
4370
|
] })
|
|
4237
4371
|
]
|
|
4238
4372
|
},
|
|
@@ -4241,15 +4375,15 @@ function ServerTab({ serverBaseUrl }) {
|
|
|
4241
4375
|
})
|
|
4242
4376
|
] })
|
|
4243
4377
|
] }),
|
|
4244
|
-
preview && /* @__PURE__ */
|
|
4245
|
-
/* @__PURE__ */
|
|
4246
|
-
/* @__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" }) })
|
|
4247
4381
|
] })
|
|
4248
4382
|
] });
|
|
4249
4383
|
}
|
|
4250
4384
|
|
|
4251
4385
|
// src/components/AvatarArchitectApp.tsx
|
|
4252
|
-
import { Fragment as
|
|
4386
|
+
import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
4253
4387
|
function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, serverBaseUrl, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
|
|
4254
4388
|
useEffect7(() => {
|
|
4255
4389
|
const id = "flow-styles";
|
|
@@ -4260,19 +4394,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4260
4394
|
document.head.appendChild(style);
|
|
4261
4395
|
}
|
|
4262
4396
|
}, []);
|
|
4263
|
-
const [showStart, setShowStart] =
|
|
4264
|
-
const [layoutChoice, setLayoutChoice] =
|
|
4397
|
+
const [showStart, setShowStart] = useState19(true);
|
|
4398
|
+
const [layoutChoice, setLayoutChoice] = useState19(() => {
|
|
4265
4399
|
try {
|
|
4266
4400
|
return localStorage.getItem("aa-layout") || null;
|
|
4267
4401
|
} catch {
|
|
4268
4402
|
return null;
|
|
4269
4403
|
}
|
|
4270
4404
|
});
|
|
4271
|
-
const [projectLoaded, setProjectLoaded] =
|
|
4272
|
-
const [hfToken, setHfToken] =
|
|
4273
|
-
const [hfTokenInput, setHfTokenInput] =
|
|
4274
|
-
const [isLoadingFromHF, setIsLoadingFromHF] =
|
|
4275
|
-
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(() => {
|
|
4276
4410
|
const KNOWN = ["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"];
|
|
4277
4411
|
const DEFAULT = "app.art-by-rolands.de/";
|
|
4278
4412
|
try {
|
|
@@ -4284,7 +4418,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4284
4418
|
return DEFAULT;
|
|
4285
4419
|
}
|
|
4286
4420
|
});
|
|
4287
|
-
const [hfNamespaceFromServer, setHfNamespaceFromServer] =
|
|
4421
|
+
const [hfNamespaceFromServer, setHfNamespaceFromServer] = useState19(null);
|
|
4288
4422
|
useEffect7(() => {
|
|
4289
4423
|
if (hfNamespace !== void 0) return;
|
|
4290
4424
|
const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
|
|
@@ -4307,36 +4441,36 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4307
4441
|
refresh: refreshHF,
|
|
4308
4442
|
hasStateZip
|
|
4309
4443
|
} = useHFState(hfToken, effectiveNamespace);
|
|
4310
|
-
const [imageUploadStatus, setImageUploadStatus] =
|
|
4311
|
-
const [bootstrapLog, setBootstrapLog] =
|
|
4312
|
-
const [isBootstrapping, setIsBootstrapping] =
|
|
4313
|
-
const [hfMissingImages, setHfMissingImages] =
|
|
4314
|
-
const syncTopSlot = /* @__PURE__ */
|
|
4315
|
-
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: [
|
|
4316
4450
|
"\u26A0 ",
|
|
4317
4451
|
localOnlyCount,
|
|
4318
4452
|
" lokale Event",
|
|
4319
4453
|
localOnlyCount > 1 ? "s" : "",
|
|
4320
4454
|
" noch nicht auf HF best\xE4tigt"
|
|
4321
4455
|
] }),
|
|
4322
|
-
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: [
|
|
4323
4457
|
pendingBufferCount,
|
|
4324
4458
|
" \xC4nderung",
|
|
4325
4459
|
pendingBufferCount > 1 ? "en" : "",
|
|
4326
4460
|
" lokal \u2014 bei Flow-Reload verloren wenn nicht synchronisiert"
|
|
4327
4461
|
] }),
|
|
4328
|
-
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: [
|
|
4329
4463
|
"\u26A0 ",
|
|
4330
4464
|
eventCount,
|
|
4331
4465
|
" Events nicht konsolidiert \u2014 Konsolidierung dringend empfohlen"
|
|
4332
4466
|
] }),
|
|
4333
|
-
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: [
|
|
4334
4468
|
eventCount,
|
|
4335
4469
|
" Events seit letzter Konsolidierung \u2014 Konsolidierung empfohlen"
|
|
4336
4470
|
] }),
|
|
4337
|
-
hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */
|
|
4338
|
-
/* @__PURE__ */
|
|
4339
|
-
/* @__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(
|
|
4340
4474
|
"button",
|
|
4341
4475
|
{
|
|
4342
4476
|
disabled: isBootstrapping || !effectiveNamespace,
|
|
@@ -4357,7 +4491,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4357
4491
|
children: isBootstrapping ? "Migriere\u2026" : "Legacy-Migration starten"
|
|
4358
4492
|
}
|
|
4359
4493
|
),
|
|
4360
|
-
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)) })
|
|
4361
4495
|
] })
|
|
4362
4496
|
] });
|
|
4363
4497
|
const wsInputRef = useRef8(null);
|
|
@@ -4369,15 +4503,36 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4369
4503
|
setLayoutChoice(choice);
|
|
4370
4504
|
setShowStart(false);
|
|
4371
4505
|
};
|
|
4372
|
-
const [nodes, setNodes] =
|
|
4373
|
-
const [edges, setEdges] =
|
|
4374
|
-
const [history, setHistory] =
|
|
4375
|
-
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([]);
|
|
4376
4510
|
const galleryItemsRef = useRef8([]);
|
|
4377
4511
|
useEffect7(() => {
|
|
4378
4512
|
galleryItemsRef.current = galleryItems;
|
|
4379
4513
|
}, [galleryItems]);
|
|
4380
4514
|
const hfImageNotFoundRef = useRef8(/* @__PURE__ */ new Map());
|
|
4515
|
+
const [galleryVisibleCount, setGalleryVisibleCount] = useState19(20);
|
|
4516
|
+
const [historyVisibleCount, setHistoryVisibleCount] = useState19(20);
|
|
4517
|
+
const loadThumbnailsForEntries = useCallback3(async (entries) => {
|
|
4518
|
+
for (const entry of entries) {
|
|
4519
|
+
if (galleryItemsRef.current.find((g) => g.id === entry.id)?.base64) continue;
|
|
4520
|
+
if (hfImageNotFoundRef.current.has(entry.id)) continue;
|
|
4521
|
+
try {
|
|
4522
|
+
const b64 = await hfLoadImageAsBase64(entry.id, hfToken, effectiveNamespace, entry.filename, void 0, entry.mimeType, entry.hasThumb);
|
|
4523
|
+
if (!b64) {
|
|
4524
|
+
hfImageNotFoundRef.current.set(entry.id, Date.now());
|
|
4525
|
+
setHfMissingImages((prev) => prev.find((e) => e.id === entry.id) ? prev : [...prev, { id: entry.id, filename: entry.filename, mimeType: entry.mimeType ?? "image/jpeg", timestamp: entry.timestamp ?? 0 }]);
|
|
4526
|
+
continue;
|
|
4527
|
+
}
|
|
4528
|
+
const prefix = `data:${entry.mimeType || "image/jpeg"};base64,`;
|
|
4529
|
+
setGalleryItems((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
|
|
4530
|
+
setHistory((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
|
|
4531
|
+
} catch {
|
|
4532
|
+
hfImageNotFoundRef.current.set(entry.id, Date.now());
|
|
4533
|
+
}
|
|
4534
|
+
}
|
|
4535
|
+
}, [hfToken, effectiveNamespace]);
|
|
4381
4536
|
useEffect7(() => {
|
|
4382
4537
|
if (!hfState) return;
|
|
4383
4538
|
if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
|
|
@@ -4404,87 +4559,94 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4404
4559
|
const merged = skeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
|
|
4405
4560
|
return [...localOnly, ...merged].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
|
|
4406
4561
|
});
|
|
4407
|
-
const sortedEntries = [...hfState.metadata].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
|
|
4408
|
-
const galleryRepIds = new Set(groupByPrompt(skeletons).slice(0, 20).map((g) => g.representative.id));
|
|
4409
|
-
const historyIds = new Set(sortedEntries.slice(0, 20).map((e) => e.id));
|
|
4410
|
-
const initialIds = /* @__PURE__ */ new Set([...galleryRepIds, ...historyIds]);
|
|
4411
|
-
const toLoad = sortedEntries.filter((e) => initialIds.has(e.id));
|
|
4412
|
-
(async () => {
|
|
4413
|
-
for (const entry of toLoad) {
|
|
4414
|
-
if (galleryItemsRef.current.find((g) => g.id === entry.id)?.base64) continue;
|
|
4415
|
-
if (hfImageNotFoundRef.current.has(entry.id)) continue;
|
|
4416
|
-
try {
|
|
4417
|
-
const b64 = await hfLoadImageAsBase64(entry.id, hfToken, effectiveNamespace, entry.filename, void 0, entry.mimeType, entry.hasThumb);
|
|
4418
|
-
if (!b64) {
|
|
4419
|
-
hfImageNotFoundRef.current.set(entry.id, Date.now());
|
|
4420
|
-
setHfMissingImages((prev) => {
|
|
4421
|
-
if (prev.find((e) => e.id === entry.id)) return prev;
|
|
4422
|
-
return [...prev, { id: entry.id, filename: entry.filename, mimeType: entry.mimeType, timestamp: entry.timestamp }];
|
|
4423
|
-
});
|
|
4424
|
-
continue;
|
|
4425
|
-
}
|
|
4426
|
-
const prefix = `data:${entry.mimeType || "image/jpeg"};base64,`;
|
|
4427
|
-
setGalleryItems((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
|
|
4428
|
-
setHistory((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
|
|
4429
|
-
} catch {
|
|
4430
|
-
hfImageNotFoundRef.current.set(entry.id, Date.now());
|
|
4431
|
-
}
|
|
4432
|
-
}
|
|
4433
|
-
})();
|
|
4434
4562
|
}, [hfState]);
|
|
4435
|
-
|
|
4436
|
-
|
|
4437
|
-
|
|
4438
|
-
|
|
4439
|
-
|
|
4440
|
-
|
|
4441
|
-
|
|
4442
|
-
|
|
4443
|
-
|
|
4444
|
-
|
|
4445
|
-
|
|
4446
|
-
|
|
4447
|
-
const [
|
|
4448
|
-
const [
|
|
4449
|
-
const [
|
|
4450
|
-
const [
|
|
4451
|
-
const [
|
|
4452
|
-
const [
|
|
4453
|
-
const [
|
|
4454
|
-
const [
|
|
4563
|
+
useEffect7(() => {
|
|
4564
|
+
if (!hfState) return;
|
|
4565
|
+
const sortedMeta = [...hfState.metadata].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
|
|
4566
|
+
const skeletons = sortedMeta.map((m) => ({ id: m.id, prompt: m.prompt, timestamp: m.timestamp, status: "done", nodeId: m.id, tags: m.tags || [] }));
|
|
4567
|
+
const repIds = new Set(groupByPrompt(skeletons).slice(0, galleryVisibleCount).map((g) => g.representative.id));
|
|
4568
|
+
loadThumbnailsForEntries(sortedMeta.filter((e) => repIds.has(e.id)));
|
|
4569
|
+
}, [hfState, galleryVisibleCount, loadThumbnailsForEntries]);
|
|
4570
|
+
useEffect7(() => {
|
|
4571
|
+
if (!hfState) return;
|
|
4572
|
+
const sortedMeta = [...hfState.metadata].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
|
|
4573
|
+
loadThumbnailsForEntries(sortedMeta.slice(0, historyVisibleCount));
|
|
4574
|
+
}, [hfState, historyVisibleCount, loadThumbnailsForEntries]);
|
|
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(() => {
|
|
4593
|
+
try {
|
|
4594
|
+
const v = parseInt(localStorage.getItem("aa-image-count") || "", 10);
|
|
4595
|
+
return v >= 1 && v <= 8 ? v : 4;
|
|
4596
|
+
} catch {
|
|
4597
|
+
return 4;
|
|
4598
|
+
}
|
|
4599
|
+
});
|
|
4600
|
+
const updateImageCount = (val) => {
|
|
4601
|
+
const n = Math.max(1, Math.min(8, parseInt(val, 10) || 4));
|
|
4602
|
+
setImageCount(n);
|
|
4603
|
+
try {
|
|
4604
|
+
localStorage.setItem("aa-image-count", String(n));
|
|
4605
|
+
} catch {
|
|
4606
|
+
}
|
|
4607
|
+
};
|
|
4608
|
+
const imageCountOptions = [
|
|
4609
|
+
{ label: "1 Bild", value: "1" },
|
|
4610
|
+
{ label: "2 Bilder", value: "2" },
|
|
4611
|
+
{ label: "4 Bilder", value: "4" },
|
|
4612
|
+
{ label: "8 Bilder", value: "8" }
|
|
4613
|
+
];
|
|
4614
|
+
const [isLeftCollapsed, setIsLeftCollapsed] = useState19(false);
|
|
4615
|
+
const [isRightCollapsed, setIsRightCollapsed] = useState19(false);
|
|
4616
|
+
const [leftPanelWidth, setLeftPanelWidth] = useState19(() => {
|
|
4455
4617
|
try {
|
|
4456
4618
|
return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
|
|
4457
4619
|
} catch {
|
|
4458
4620
|
return 260;
|
|
4459
4621
|
}
|
|
4460
4622
|
});
|
|
4461
|
-
const [rightPanelWidth, setRightPanelWidth] =
|
|
4623
|
+
const [rightPanelWidth, setRightPanelWidth] = useState19(() => {
|
|
4462
4624
|
try {
|
|
4463
4625
|
return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
|
|
4464
4626
|
} catch {
|
|
4465
4627
|
return 320;
|
|
4466
4628
|
}
|
|
4467
4629
|
});
|
|
4468
|
-
const [isPromptCollapsed, setIsPromptCollapsed] =
|
|
4469
|
-
const [projectActionState, setProjectActionState] =
|
|
4630
|
+
const [isPromptCollapsed, setIsPromptCollapsed] = useState19(false);
|
|
4631
|
+
const [projectActionState, setProjectActionState] = useState19("idle");
|
|
4470
4632
|
const syncServerDataRef = useRef8(null);
|
|
4471
|
-
const [workspaceTags, setWorkspaceTags] =
|
|
4472
|
-
const [serverProjects, setServerProjects] =
|
|
4473
|
-
const [isLoadingFromServer, setIsLoadingFromServer] =
|
|
4474
|
-
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(() => {
|
|
4475
4637
|
try {
|
|
4476
4638
|
return localStorage.getItem("aa-contrast") === "high";
|
|
4477
4639
|
} catch {
|
|
4478
4640
|
return false;
|
|
4479
4641
|
}
|
|
4480
4642
|
});
|
|
4481
|
-
const [activeReferenceId, setActiveReferenceId] =
|
|
4482
|
-
const [activeReferenceThumbnail, setActiveReferenceThumbnail] =
|
|
4483
|
-
const [isScanningImage, setIsScanningImage] =
|
|
4484
|
-
const [touchStartX, setTouchStartX] =
|
|
4485
|
-
const [isFullscreen, setIsFullscreen] =
|
|
4486
|
-
const [zoomScale, setZoomScale] =
|
|
4487
|
-
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 });
|
|
4488
4650
|
const lastPinchDist = useRef8(null);
|
|
4489
4651
|
const lastTapTime = useRef8(0);
|
|
4490
4652
|
const dragStart = useRef8(null);
|
|
@@ -4640,7 +4802,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4640
4802
|
const handleGallerySelect = useCallback3((g) => {
|
|
4641
4803
|
setCurrentResult(g);
|
|
4642
4804
|
setMobileTab("stage");
|
|
4643
|
-
if (g.filename && hfToken && !g.fullBase64) {
|
|
4805
|
+
if (g.hasThumb && g.filename && hfToken && !g.fullBase64) {
|
|
4644
4806
|
hfLoadImageAsBase64(g.id, hfToken, effectiveNamespace, g.filename, void 0, g.mimeType, false).then((b64) => {
|
|
4645
4807
|
if (!b64) return;
|
|
4646
4808
|
const full = `data:${g.mimeType || "image/jpeg"};base64,${b64}`;
|
|
@@ -4691,7 +4853,18 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4691
4853
|
})();
|
|
4692
4854
|
}, [currentResult?.id, currentResult?.prompt]);
|
|
4693
4855
|
const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
|
|
4694
|
-
const
|
|
4856
|
+
const runningBadge = activeGenerationsCount > 0 ? /* @__PURE__ */ jsxs22(
|
|
4857
|
+
"div",
|
|
4858
|
+
{
|
|
4859
|
+
className: "flex items-center gap-1 rounded-full bg-sky-500/15 border border-sky-400/30 px-2 shrink-0",
|
|
4860
|
+
style: { height: 24 },
|
|
4861
|
+
title: `${activeGenerationsCount} Generierung${activeGenerationsCount === 1 ? "" : "en"} l\xE4uft gerade`,
|
|
4862
|
+
children: [
|
|
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 })
|
|
4865
|
+
]
|
|
4866
|
+
}
|
|
4867
|
+
) : null;
|
|
4695
4868
|
useKeyboardNavigation(history, currentResult, setCurrentResult);
|
|
4696
4869
|
const getSubtreeFormat = useCallback3((nodeId, depth = 0) => {
|
|
4697
4870
|
const node = nodes.find((n) => n.id === nodeId);
|
|
@@ -4764,6 +4937,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
4764
4937
|
setActiveGenerationsCount((prev) => Math.max(0, prev - 1));
|
|
4765
4938
|
}
|
|
4766
4939
|
};
|
|
4940
|
+
const handleGenerateBatch = (customPrompt, useReferenceId, overrideNodeId, options = { silent: false }) => {
|
|
4941
|
+
const count = Math.max(1, Math.min(8, imageCount));
|
|
4942
|
+
return Promise.all(
|
|
4943
|
+
Array.from(
|
|
4944
|
+
{ length: count },
|
|
4945
|
+
(_, i) => handleGenerateImage(customPrompt, useReferenceId, overrideNodeId, { silent: options.silent || i > 0 })
|
|
4946
|
+
)
|
|
4947
|
+
);
|
|
4948
|
+
};
|
|
4767
4949
|
const handleSynthesizePrompt = async (nodeId, autoGenerate = false) => {
|
|
4768
4950
|
setIsSynthesizing(true);
|
|
4769
4951
|
try {
|
|
@@ -5075,7 +5257,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5075
5257
|
if (isFullscreen && currentResult?.base64) {
|
|
5076
5258
|
const fsRaw = currentResult.fullBase64 || currentResult.base64;
|
|
5077
5259
|
const fsBase64 = fsRaw.startsWith("data:") ? fsRaw : `data:image/png;base64,${fsRaw}`;
|
|
5078
|
-
return /* @__PURE__ */
|
|
5260
|
+
return /* @__PURE__ */ jsxs22(
|
|
5079
5261
|
"div",
|
|
5080
5262
|
{
|
|
5081
5263
|
className: "fixed inset-0 bg-black z-50 flex items-center justify-center overflow-hidden touch-none",
|
|
@@ -5083,7 +5265,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5083
5265
|
onTouchMove: handleFsTouchMove,
|
|
5084
5266
|
onTouchEnd: handleFsTouchEnd,
|
|
5085
5267
|
children: [
|
|
5086
|
-
/* @__PURE__ */
|
|
5268
|
+
/* @__PURE__ */ jsx24(
|
|
5087
5269
|
"img",
|
|
5088
5270
|
{
|
|
5089
5271
|
src: fsBase64,
|
|
@@ -5100,77 +5282,77 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5100
5282
|
}
|
|
5101
5283
|
}
|
|
5102
5284
|
),
|
|
5103
|
-
/* @__PURE__ */
|
|
5104
|
-
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: () => {
|
|
5105
5287
|
setZoomScale(1);
|
|
5106
5288
|
setZoomOffset({ x: 0, y: 0 });
|
|
5107
|
-
}, 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__ */
|
|
5108
|
-
history.length > 1 && /* @__PURE__ */
|
|
5109
|
-
/* @__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: () => {
|
|
5110
5292
|
if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
|
|
5111
|
-
}, 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__ */
|
|
5112
|
-
/* @__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: () => {
|
|
5113
5295
|
if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
|
|
5114
|
-
}, 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__ */
|
|
5115
|
-
/* @__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: [
|
|
5116
5298
|
currentIndex + 1,
|
|
5117
5299
|
" / ",
|
|
5118
5300
|
history.length
|
|
5119
5301
|
] })
|
|
5120
5302
|
] }),
|
|
5121
|
-
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" })
|
|
5122
5304
|
]
|
|
5123
5305
|
}
|
|
5124
5306
|
);
|
|
5125
5307
|
}
|
|
5126
5308
|
if (showStart) {
|
|
5127
|
-
return /* @__PURE__ */
|
|
5128
|
-
/* @__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) => {
|
|
5129
5311
|
const f = e.target.files?.[0];
|
|
5130
5312
|
if (f) handleProjectImport(f);
|
|
5131
5313
|
e.target.value = "";
|
|
5132
5314
|
} }),
|
|
5133
|
-
/* @__PURE__ */
|
|
5134
|
-
/* @__PURE__ */
|
|
5135
|
-
/* @__PURE__ */
|
|
5136
|
-
/* @__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: [
|
|
5137
5319
|
"v",
|
|
5138
5320
|
LIB_VERSION
|
|
5139
5321
|
] })
|
|
5140
5322
|
] }),
|
|
5141
|
-
/* @__PURE__ */
|
|
5323
|
+
/* @__PURE__ */ jsxs22(
|
|
5142
5324
|
"button",
|
|
5143
5325
|
{
|
|
5144
5326
|
onClick: toggleContrast,
|
|
5145
5327
|
className: "flex items-center gap-3 px-5 py-3 rounded-2xl border transition-colors",
|
|
5146
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" },
|
|
5147
5329
|
children: [
|
|
5148
|
-
/* @__PURE__ */
|
|
5149
|
-
/* @__PURE__ */
|
|
5150
|
-
/* @__PURE__ */
|
|
5151
|
-
/* @__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" })
|
|
5152
5334
|
] })
|
|
5153
5335
|
]
|
|
5154
5336
|
}
|
|
5155
5337
|
),
|
|
5156
|
-
/* @__PURE__ */
|
|
5157
|
-
/* @__PURE__ */
|
|
5338
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5339
|
+
/* @__PURE__ */ jsxs22(
|
|
5158
5340
|
"button",
|
|
5159
5341
|
{
|
|
5160
5342
|
onClick: () => wsInputRef.current?.click(),
|
|
5161
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",
|
|
5162
5344
|
style: { height: 56, background: projectLoaded ? "#16a34a" : "#0284c7" },
|
|
5163
5345
|
children: [
|
|
5164
|
-
/* @__PURE__ */
|
|
5346
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[22px]", children: projectLoaded ? "check_circle" : "folder_zip" }),
|
|
5165
5347
|
projectLoaded ? "Projekt geladen \u2713" : "Projekt laden (.zip)"
|
|
5166
5348
|
]
|
|
5167
5349
|
}
|
|
5168
5350
|
),
|
|
5169
|
-
!projectLoaded && /* @__PURE__ */
|
|
5351
|
+
!projectLoaded && /* @__PURE__ */ jsx24("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
|
|
5170
5352
|
] }),
|
|
5171
|
-
/* @__PURE__ */
|
|
5172
|
-
!initialHfToken && /* @__PURE__ */
|
|
5173
|
-
/* @__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(
|
|
5174
5356
|
"input",
|
|
5175
5357
|
{
|
|
5176
5358
|
type: "password",
|
|
@@ -5186,7 +5368,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5186
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)" }
|
|
5187
5369
|
}
|
|
5188
5370
|
),
|
|
5189
|
-
hfTokenInput.trim() && /* @__PURE__ */
|
|
5371
|
+
hfTokenInput.trim() && /* @__PURE__ */ jsx24(
|
|
5190
5372
|
"button",
|
|
5191
5373
|
{
|
|
5192
5374
|
type: "button",
|
|
@@ -5197,9 +5379,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5197
5379
|
}
|
|
5198
5380
|
)
|
|
5199
5381
|
] }),
|
|
5200
|
-
!hfNamespace && /* @__PURE__ */
|
|
5201
|
-
/* @__PURE__ */
|
|
5202
|
-
["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(
|
|
5203
5385
|
"button",
|
|
5204
5386
|
{
|
|
5205
5387
|
onClick: () => {
|
|
@@ -5219,7 +5401,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5219
5401
|
ns
|
|
5220
5402
|
))
|
|
5221
5403
|
] }),
|
|
5222
|
-
hfToken && /* @__PURE__ */
|
|
5404
|
+
hfToken && /* @__PURE__ */ jsxs22(
|
|
5223
5405
|
"button",
|
|
5224
5406
|
{
|
|
5225
5407
|
disabled: isLoadingFromHF,
|
|
@@ -5241,15 +5423,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5241
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",
|
|
5242
5424
|
style: { height: 56, background: "#f59e0b" },
|
|
5243
5425
|
children: [
|
|
5244
|
-
/* @__PURE__ */
|
|
5426
|
+
/* @__PURE__ */ jsx24("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromHF ? " animate-spin" : ""}`, children: isLoadingFromHF ? "sync" : "cloud_download" }),
|
|
5245
5427
|
isLoadingFromHF ? "Laden\u2026" : "Von HF laden"
|
|
5246
5428
|
]
|
|
5247
5429
|
}
|
|
5248
5430
|
),
|
|
5249
|
-
hfToken && /* @__PURE__ */
|
|
5431
|
+
hfToken && /* @__PURE__ */ jsx24("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand von Hugging Face laden" })
|
|
5250
5432
|
] }),
|
|
5251
|
-
onFetchServerProjects && /* @__PURE__ */
|
|
5252
|
-
/* @__PURE__ */
|
|
5433
|
+
onFetchServerProjects && /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
|
|
5434
|
+
/* @__PURE__ */ jsxs22(
|
|
5253
5435
|
"button",
|
|
5254
5436
|
{
|
|
5255
5437
|
disabled: isLoadingFromServer,
|
|
@@ -5270,35 +5452,35 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5270
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",
|
|
5271
5453
|
style: { height: 56, background: "#7c3aed" },
|
|
5272
5454
|
children: [
|
|
5273
|
-
/* @__PURE__ */
|
|
5455
|
+
/* @__PURE__ */ jsx24("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromServer ? " animate-spin" : ""}`, children: isLoadingFromServer ? "sync" : "cloud_download" }),
|
|
5274
5456
|
isLoadingFromServer ? "Laden\u2026" : "Vom Server laden"
|
|
5275
5457
|
]
|
|
5276
5458
|
}
|
|
5277
5459
|
),
|
|
5278
|
-
/* @__PURE__ */
|
|
5460
|
+
/* @__PURE__ */ jsx24("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand vom Server wiederherstellen" })
|
|
5279
5461
|
] }),
|
|
5280
|
-
/* @__PURE__ */
|
|
5281
|
-
/* @__PURE__ */
|
|
5282
|
-
/* @__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: [
|
|
5283
5465
|
{ id: "mobile", icon: "smartphone", label: "Mobile" },
|
|
5284
5466
|
{ id: "mobile-desktop", icon: "phonelink", label: "Mobile+" },
|
|
5285
5467
|
{ id: "desktop", icon: "desktop_windows", label: "Desktop" },
|
|
5286
5468
|
{ id: "tablet-landscape", icon: "tablet", label: "Landscape" }
|
|
5287
|
-
].map((opt) => /* @__PURE__ */
|
|
5469
|
+
].map((opt) => /* @__PURE__ */ jsxs22(
|
|
5288
5470
|
"button",
|
|
5289
5471
|
{
|
|
5290
5472
|
onClick: () => startApp(opt.id),
|
|
5291
5473
|
className: "flex flex-col items-center gap-2 py-4 rounded-2xl border transition-colors",
|
|
5292
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" },
|
|
5293
5475
|
children: [
|
|
5294
|
-
/* @__PURE__ */
|
|
5295
|
-
/* @__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 })
|
|
5296
5478
|
]
|
|
5297
5479
|
},
|
|
5298
5480
|
opt.id
|
|
5299
5481
|
)) }),
|
|
5300
|
-
layoutChoice === "mobile-desktop" && /* @__PURE__ */
|
|
5301
|
-
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" })
|
|
5302
5484
|
] })
|
|
5303
5485
|
] });
|
|
5304
5486
|
}
|
|
@@ -5307,22 +5489,22 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5307
5489
|
const mdScale = mdMode ? window.innerWidth / 430 : 1;
|
|
5308
5490
|
const mdW = mdMode ? 430 : void 0;
|
|
5309
5491
|
const mdH = mdMode ? Math.ceil(window.innerHeight / mdScale) : void 0;
|
|
5310
|
-
const mobileRoot = /* @__PURE__ */
|
|
5492
|
+
const mobileRoot = /* @__PURE__ */ jsxs22("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
|
|
5311
5493
|
width: mdMode ? mdW : "100vw",
|
|
5312
5494
|
height: mdMode ? mdH : "100dvh",
|
|
5313
5495
|
transform: mdMode ? `scale(${mdScale})` : void 0,
|
|
5314
5496
|
transformOrigin: mdMode ? "top left" : void 0,
|
|
5315
5497
|
...hcStyle || {}
|
|
5316
5498
|
}, children: [
|
|
5317
|
-
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) => {
|
|
5318
5500
|
const frame = item.frames[0];
|
|
5319
5501
|
if (frame?.base64) {
|
|
5320
5502
|
setCurrentResult(frameToGeneration(frame, item));
|
|
5321
5503
|
setMobileTab("stage");
|
|
5322
5504
|
}
|
|
5323
5505
|
} }) }),
|
|
5324
|
-
mobileTab === "server" && /* @__PURE__ */
|
|
5325
|
-
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(
|
|
5326
5508
|
TagManagerPanel,
|
|
5327
5509
|
{
|
|
5328
5510
|
workspaceTags,
|
|
@@ -5333,21 +5515,23 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5333
5515
|
onTagMove: handleTagMove
|
|
5334
5516
|
}
|
|
5335
5517
|
) }),
|
|
5336
|
-
mobileTab === "stage" && /* @__PURE__ */
|
|
5337
|
-
/* @__PURE__ */
|
|
5338
|
-
/* @__PURE__ */
|
|
5339
|
-
/* @__PURE__ */
|
|
5340
|
-
/* @__PURE__ */
|
|
5341
|
-
|
|
5342
|
-
|
|
5343
|
-
|
|
5344
|
-
/* @__PURE__ */
|
|
5345
|
-
|
|
5346
|
-
|
|
5347
|
-
/* @__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" }),
|
|
5524
|
+
runningBadge,
|
|
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" }) })
|
|
5348
5532
|
] }),
|
|
5349
|
-
/* @__PURE__ */
|
|
5350
|
-
/* @__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(
|
|
5351
5535
|
"textarea",
|
|
5352
5536
|
{
|
|
5353
5537
|
value: activePrompt,
|
|
@@ -5357,26 +5541,23 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5357
5541
|
placeholder: "Prompt eingeben..."
|
|
5358
5542
|
}
|
|
5359
5543
|
),
|
|
5360
|
-
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" }) })
|
|
5361
5545
|
] }) }),
|
|
5362
|
-
/* @__PURE__ */
|
|
5546
|
+
/* @__PURE__ */ jsx24("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ jsxs22(
|
|
5363
5547
|
"button",
|
|
5364
5548
|
{
|
|
5365
|
-
onClick: () =>
|
|
5366
|
-
disabled: !activePrompt.trim()
|
|
5549
|
+
onClick: () => handleGenerateBatch(),
|
|
5550
|
+
disabled: !activePrompt.trim(),
|
|
5367
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",
|
|
5368
|
-
style: { height: 48, background: activePrompt.trim()
|
|
5369
|
-
children:
|
|
5370
|
-
/* @__PURE__ */
|
|
5371
|
-
/* @__PURE__ */
|
|
5372
|
-
]
|
|
5373
|
-
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
|
|
5374
|
-
/* @__PURE__ */ jsx23("span", { children: "Generieren" })
|
|
5375
|
-
] })
|
|
5552
|
+
style: { height: 48, background: activePrompt.trim() ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
|
|
5553
|
+
children: [
|
|
5554
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
|
|
5555
|
+
/* @__PURE__ */ jsx24("span", { children: "Generieren" })
|
|
5556
|
+
]
|
|
5376
5557
|
}
|
|
5377
5558
|
) }),
|
|
5378
|
-
/* @__PURE__ */
|
|
5379
|
-
/* @__PURE__ */
|
|
5559
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
|
|
5560
|
+
/* @__PURE__ */ jsxs22(
|
|
5380
5561
|
"div",
|
|
5381
5562
|
{
|
|
5382
5563
|
className: "w-full rounded-2xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center",
|
|
@@ -5390,25 +5571,25 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5390
5571
|
setTouchStartX(null);
|
|
5391
5572
|
},
|
|
5392
5573
|
children: [
|
|
5393
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
5394
|
-
/* @__PURE__ */
|
|
5395
|
-
/* @__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..." })
|
|
5396
5577
|
] }),
|
|
5397
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
5398
|
-
/* @__PURE__ */
|
|
5399
|
-
/* @__PURE__ */
|
|
5400
|
-
/* @__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" })
|
|
5401
5582
|
] }),
|
|
5402
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
5403
|
-
!currentResult && /* @__PURE__ */
|
|
5404
|
-
/* @__PURE__ */
|
|
5405
|
-
/* @__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" })
|
|
5406
5587
|
] }),
|
|
5407
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5408
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
5409
|
-
/* @__PURE__ */
|
|
5410
|
-
/* @__PURE__ */
|
|
5411
|
-
/* @__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: [
|
|
5412
5593
|
currentIndex + 1,
|
|
5413
5594
|
" / ",
|
|
5414
5595
|
history.length
|
|
@@ -5417,8 +5598,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5417
5598
|
]
|
|
5418
5599
|
}
|
|
5419
5600
|
),
|
|
5420
|
-
currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */
|
|
5421
|
-
/* @__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(
|
|
5422
5603
|
"div",
|
|
5423
5604
|
{
|
|
5424
5605
|
onClick: () => handleGallerySelect(item),
|
|
@@ -5431,10 +5612,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5431
5612
|
border: item.id === currentResult.id ? "2px solid rgba(255,255,255,0.8)" : "2px solid rgba(255,255,255,0.15)",
|
|
5432
5613
|
opacity: item.id === currentResult.id ? 1 : 0.55
|
|
5433
5614
|
},
|
|
5434
|
-
children: /* @__PURE__ */
|
|
5615
|
+
children: /* @__PURE__ */ jsx24("img", { src: item.base64, style: { width: "100%", height: "100%", objectFit: "cover" }, alt: "" })
|
|
5435
5616
|
}
|
|
5436
5617
|
),
|
|
5437
|
-
/* @__PURE__ */
|
|
5618
|
+
/* @__PURE__ */ jsx24(
|
|
5438
5619
|
"button",
|
|
5439
5620
|
{
|
|
5440
5621
|
onClick: (e) => {
|
|
@@ -5456,34 +5637,34 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5456
5637
|
alignItems: "center",
|
|
5457
5638
|
justifyContent: "center"
|
|
5458
5639
|
},
|
|
5459
|
-
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" })
|
|
5460
5641
|
}
|
|
5461
5642
|
)
|
|
5462
5643
|
] }, item.id)) }),
|
|
5463
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5464
|
-
/* @__PURE__ */
|
|
5465
|
-
/* @__PURE__ */
|
|
5466
|
-
/* @__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" })
|
|
5467
5648
|
] }),
|
|
5468
|
-
/* @__PURE__ */
|
|
5469
|
-
/* @__PURE__ */
|
|
5470
|
-
/* @__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" })
|
|
5471
5652
|
] }),
|
|
5472
|
-
/* @__PURE__ */
|
|
5473
|
-
/* @__PURE__ */
|
|
5474
|
-
/* @__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" })
|
|
5475
5656
|
] })
|
|
5476
5657
|
] })
|
|
5477
5658
|
] })
|
|
5478
5659
|
] }),
|
|
5479
|
-
mobileTab === "browse" && /* @__PURE__ */
|
|
5480
|
-
/* @__PURE__ */
|
|
5481
|
-
["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */
|
|
5482
|
-
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" }) })
|
|
5483
5664
|
] }),
|
|
5484
|
-
/* @__PURE__ */
|
|
5485
|
-
activeTab === "history" && /* @__PURE__ */
|
|
5486
|
-
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(
|
|
5487
5668
|
MediaLibrary,
|
|
5488
5669
|
{
|
|
5489
5670
|
items: galleryItems,
|
|
@@ -5495,49 +5676,51 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5495
5676
|
onDelete: (id) => setGalleryItems((g) => g.filter((x) => x.id !== id)),
|
|
5496
5677
|
onSelect: handleGallerySelect,
|
|
5497
5678
|
onGenerateReference: (item) => {
|
|
5498
|
-
|
|
5679
|
+
handleGenerateBatch(item.prompt || activePrompt, item.mediaId, void 0, { silent: true });
|
|
5499
5680
|
setMobileTab("stage");
|
|
5500
|
-
}
|
|
5681
|
+
},
|
|
5682
|
+
visibleCount: galleryVisibleCount,
|
|
5683
|
+
onLoadMore: () => setGalleryVisibleCount((c) => c + 20)
|
|
5501
5684
|
}
|
|
5502
5685
|
),
|
|
5503
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
5686
|
+
activeTab === "inspect" && /* @__PURE__ */ jsx24(InspectPanel, { currentResult, history, onSelect: (g) => {
|
|
5504
5687
|
setCurrentResult(g);
|
|
5505
5688
|
} })
|
|
5506
5689
|
] })
|
|
5507
5690
|
] }),
|
|
5508
|
-
/* @__PURE__ */
|
|
5509
|
-
/* @__PURE__ */
|
|
5510
|
-
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: () => {
|
|
5511
5694
|
setLeftTab("prompt");
|
|
5512
5695
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
5513
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: [
|
|
5514
|
-
/* @__PURE__ */
|
|
5697
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
|
|
5515
5698
|
"Prompt"
|
|
5516
5699
|
] }),
|
|
5517
|
-
/* @__PURE__ */
|
|
5700
|
+
/* @__PURE__ */ jsxs22("button", { onClick: () => {
|
|
5518
5701
|
setLeftTab("hierarchy");
|
|
5519
5702
|
if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
|
|
5520
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: [
|
|
5521
|
-
/* @__PURE__ */
|
|
5704
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
|
|
5522
5705
|
"Hierarchie"
|
|
5523
5706
|
] }),
|
|
5524
|
-
/* @__PURE__ */
|
|
5525
|
-
/* @__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" }),
|
|
5526
5709
|
"Setup"
|
|
5527
5710
|
] }),
|
|
5528
|
-
/* @__PURE__ */
|
|
5529
|
-
/* @__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" }),
|
|
5530
5713
|
"Sync"
|
|
5531
5714
|
] }),
|
|
5532
|
-
/* @__PURE__ */
|
|
5533
|
-
/* @__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" }),
|
|
5534
5717
|
"HF"
|
|
5535
5718
|
] }),
|
|
5536
|
-
serverBaseUrl && /* @__PURE__ */
|
|
5537
|
-
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" }) })
|
|
5538
5721
|
] }),
|
|
5539
|
-
/* @__PURE__ */
|
|
5540
|
-
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(
|
|
5541
5724
|
ListView,
|
|
5542
5725
|
{
|
|
5543
5726
|
nodes,
|
|
@@ -5568,12 +5751,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5568
5751
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
5569
5752
|
}
|
|
5570
5753
|
) }),
|
|
5571
|
-
workspaceTags && /* @__PURE__ */
|
|
5572
|
-
|
|
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) => {
|
|
5755
|
+
handleGenerateBatch(prompt);
|
|
5573
5756
|
setMobileTab("stage");
|
|
5574
5757
|
}, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
|
|
5575
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
5576
|
-
activeTab === "sync" && /* @__PURE__ */
|
|
5758
|
+
activeTab === "setup" && /* @__PURE__ */ jsx24(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
|
|
5759
|
+
activeTab === "sync" && /* @__PURE__ */ jsx24(
|
|
5577
5760
|
ProjectSyncTab,
|
|
5578
5761
|
{
|
|
5579
5762
|
topSlot: syncTopSlot,
|
|
@@ -5597,7 +5780,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5597
5780
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
5598
5781
|
}
|
|
5599
5782
|
),
|
|
5600
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5783
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx24(
|
|
5601
5784
|
TagManagerPanel,
|
|
5602
5785
|
{
|
|
5603
5786
|
workspaceTags,
|
|
@@ -5608,7 +5791,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5608
5791
|
onTagMove: handleTagMove
|
|
5609
5792
|
}
|
|
5610
5793
|
),
|
|
5611
|
-
activeTab === "hftest" && /* @__PURE__ */
|
|
5794
|
+
activeTab === "hftest" && /* @__PURE__ */ jsx24("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx24(
|
|
5612
5795
|
HFTestTab,
|
|
5613
5796
|
{
|
|
5614
5797
|
token: hfToken,
|
|
@@ -5620,23 +5803,23 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5620
5803
|
missingImages: hfMissingImages
|
|
5621
5804
|
}
|
|
5622
5805
|
) }),
|
|
5623
|
-
activeTab === "server" && /* @__PURE__ */
|
|
5806
|
+
activeTab === "server" && /* @__PURE__ */ jsx24("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx24(ServerTab, { serverBaseUrl }) })
|
|
5624
5807
|
] })
|
|
5625
5808
|
] }),
|
|
5626
|
-
/* @__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: [
|
|
5627
5810
|
{ id: "tools", icon: "auto_fix_high", label: "Prompt" },
|
|
5628
5811
|
{ id: "stage", icon: "palette", label: "Stage" },
|
|
5629
5812
|
{ id: "labs", icon: "science", label: "Labs" },
|
|
5630
5813
|
...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
|
|
5631
5814
|
{ id: "browse", icon: "photo_library", label: "Galerie" },
|
|
5632
5815
|
...serverBaseUrl ? [{ id: "server", icon: "storage", label: "Server" }] : []
|
|
5633
|
-
].map((tab) => /* @__PURE__ */
|
|
5634
|
-
/* @__PURE__ */
|
|
5635
|
-
/* @__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 })
|
|
5636
5819
|
] }, tab.id)) })
|
|
5637
5820
|
] });
|
|
5638
5821
|
if (mdMode) {
|
|
5639
|
-
return /* @__PURE__ */
|
|
5822
|
+
return /* @__PURE__ */ jsx24("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
|
|
5640
5823
|
}
|
|
5641
5824
|
return mobileRoot;
|
|
5642
5825
|
}
|
|
@@ -5644,17 +5827,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5644
5827
|
const tlScale = Math.min(window.innerWidth / 920, window.innerHeight / 520);
|
|
5645
5828
|
const tlW = 920;
|
|
5646
5829
|
const tlH = 520;
|
|
5647
|
-
return /* @__PURE__ */
|
|
5648
|
-
/* @__PURE__ */
|
|
5649
|
-
/* @__PURE__ */
|
|
5650
|
-
/* @__PURE__ */
|
|
5651
|
-
/* @__PURE__ */
|
|
5652
|
-
/* @__PURE__ */
|
|
5653
|
-
/* @__PURE__ */
|
|
5654
|
-
|
|
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 } }),
|
|
5837
|
+
runningBadge,
|
|
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" }) })
|
|
5655
5840
|
] }),
|
|
5656
|
-
/* @__PURE__ */
|
|
5657
|
-
/* @__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(
|
|
5658
5843
|
"textarea",
|
|
5659
5844
|
{
|
|
5660
5845
|
value: activePrompt,
|
|
@@ -5663,27 +5848,24 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5663
5848
|
placeholder: "Prompt eingeben..."
|
|
5664
5849
|
}
|
|
5665
5850
|
),
|
|
5666
|
-
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" }) })
|
|
5667
5852
|
] }) }),
|
|
5668
|
-
/* @__PURE__ */
|
|
5853
|
+
/* @__PURE__ */ jsx24("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs22(
|
|
5669
5854
|
"button",
|
|
5670
5855
|
{
|
|
5671
|
-
onClick: () =>
|
|
5672
|
-
disabled: !activePrompt.trim()
|
|
5673
|
-
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()
|
|
5674
|
-
children:
|
|
5675
|
-
/* @__PURE__ */
|
|
5676
|
-
/* @__PURE__ */
|
|
5677
|
-
]
|
|
5678
|
-
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
|
|
5679
|
-
/* @__PURE__ */ jsx23("span", { children: "Generieren" })
|
|
5680
|
-
] })
|
|
5856
|
+
onClick: () => handleGenerateBatch(),
|
|
5857
|
+
disabled: !activePrompt.trim(),
|
|
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" },
|
|
5859
|
+
children: [
|
|
5860
|
+
/* @__PURE__ */ jsx24("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
|
|
5861
|
+
/* @__PURE__ */ jsx24("span", { children: "Generieren" })
|
|
5862
|
+
]
|
|
5681
5863
|
}
|
|
5682
5864
|
) }),
|
|
5683
|
-
/* @__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) }) })
|
|
5684
5866
|
] }),
|
|
5685
|
-
/* @__PURE__ */
|
|
5686
|
-
/* @__PURE__ */
|
|
5867
|
+
/* @__PURE__ */ jsxs22("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
|
|
5868
|
+
/* @__PURE__ */ jsx24(
|
|
5687
5869
|
"div",
|
|
5688
5870
|
{
|
|
5689
5871
|
style: { flex: 1, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" },
|
|
@@ -5695,26 +5877,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5695
5877
|
else if (dx > 50) goToPrev();
|
|
5696
5878
|
setTouchStartX(null);
|
|
5697
5879
|
},
|
|
5698
|
-
children: /* @__PURE__ */
|
|
5699
|
-
currentResult?.status === "processing" && /* @__PURE__ */
|
|
5700
|
-
/* @__PURE__ */
|
|
5701
|
-
/* @__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..." })
|
|
5702
5884
|
] }),
|
|
5703
|
-
currentResult?.status === "error" && /* @__PURE__ */
|
|
5704
|
-
/* @__PURE__ */
|
|
5705
|
-
/* @__PURE__ */
|
|
5706
|
-
/* @__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" })
|
|
5707
5889
|
] }),
|
|
5708
|
-
currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */
|
|
5709
|
-
!currentResult && /* @__PURE__ */
|
|
5710
|
-
/* @__PURE__ */
|
|
5711
|
-
/* @__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" })
|
|
5712
5894
|
] }),
|
|
5713
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5714
|
-
history.length > 1 && currentResult && /* @__PURE__ */
|
|
5715
|
-
/* @__PURE__ */
|
|
5716
|
-
/* @__PURE__ */
|
|
5717
|
-
/* @__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: [
|
|
5718
5900
|
currentIndex + 1,
|
|
5719
5901
|
" / ",
|
|
5720
5902
|
history.length
|
|
@@ -5723,42 +5905,42 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5723
5905
|
] })
|
|
5724
5906
|
}
|
|
5725
5907
|
),
|
|
5726
|
-
currentResult?.status === "done" && /* @__PURE__ */
|
|
5727
|
-
/* @__PURE__ */
|
|
5728
|
-
/* @__PURE__ */
|
|
5729
|
-
/* @__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" })
|
|
5730
5912
|
] }),
|
|
5731
|
-
/* @__PURE__ */
|
|
5732
|
-
/* @__PURE__ */
|
|
5733
|
-
/* @__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" })
|
|
5734
5916
|
] }),
|
|
5735
|
-
/* @__PURE__ */
|
|
5736
|
-
/* @__PURE__ */
|
|
5737
|
-
/* @__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" })
|
|
5738
5920
|
] })
|
|
5739
5921
|
] })
|
|
5740
5922
|
] })
|
|
5741
5923
|
] }) });
|
|
5742
5924
|
}
|
|
5743
|
-
return /* @__PURE__ */
|
|
5744
|
-
/* @__PURE__ */
|
|
5745
|
-
/* @__PURE__ */
|
|
5746
|
-
/* @__PURE__ */
|
|
5747
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5748
|
-
workspaceTags && /* @__PURE__ */
|
|
5749
|
-
/* @__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" }),
|
|
5750
5932
|
"Prompt"
|
|
5751
5933
|
] }),
|
|
5752
|
-
/* @__PURE__ */
|
|
5753
|
-
/* @__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" }),
|
|
5754
5936
|
"Hierarchie"
|
|
5755
5937
|
] }),
|
|
5756
|
-
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" }) })
|
|
5757
5939
|
] }),
|
|
5758
|
-
/* @__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" })
|
|
5759
5941
|
] }),
|
|
5760
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5761
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
5942
|
+
!isLeftCollapsed && /* @__PURE__ */ jsxs22("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
5943
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx24(
|
|
5762
5944
|
TagManagerPanel,
|
|
5763
5945
|
{
|
|
5764
5946
|
workspaceTags,
|
|
@@ -5769,11 +5951,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5769
5951
|
onTagMove: handleTagMove
|
|
5770
5952
|
}
|
|
5771
5953
|
),
|
|
5772
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
5773
|
-
/* @__PURE__ */
|
|
5774
|
-
/* @__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." })
|
|
5775
5957
|
] }) }),
|
|
5776
|
-
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */
|
|
5958
|
+
leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ jsx24("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx24(
|
|
5777
5959
|
ListView,
|
|
5778
5960
|
{
|
|
5779
5961
|
nodes,
|
|
@@ -5798,18 +5980,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5798
5980
|
isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
|
|
5799
5981
|
}
|
|
5800
5982
|
) }),
|
|
5801
|
-
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 })
|
|
5802
5984
|
] })
|
|
5803
5985
|
] }),
|
|
5804
|
-
!isLeftCollapsed && /* @__PURE__ */
|
|
5805
|
-
/* @__PURE__ */
|
|
5806
|
-
/* @__PURE__ */
|
|
5807
|
-
/* @__PURE__ */
|
|
5808
|
-
/* @__PURE__ */
|
|
5809
|
-
/* @__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 })
|
|
5810
5993
|
] }),
|
|
5811
|
-
/* @__PURE__ */
|
|
5812
|
-
/* @__PURE__ */
|
|
5994
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1 mx-auto", children: [
|
|
5995
|
+
/* @__PURE__ */ jsx24(
|
|
5813
5996
|
"button",
|
|
5814
5997
|
{
|
|
5815
5998
|
onClick: () => setMiddlePanel("stage"),
|
|
@@ -5817,7 +6000,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5817
6000
|
children: "Stage"
|
|
5818
6001
|
}
|
|
5819
6002
|
),
|
|
5820
|
-
/* @__PURE__ */
|
|
6003
|
+
/* @__PURE__ */ jsx24(
|
|
5821
6004
|
"button",
|
|
5822
6005
|
{
|
|
5823
6006
|
onClick: () => setMiddlePanel("labs"),
|
|
@@ -5826,57 +6009,52 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5826
6009
|
}
|
|
5827
6010
|
)
|
|
5828
6011
|
] }),
|
|
5829
|
-
/* @__PURE__ */
|
|
5830
|
-
activeReferenceThumbnail ? /* @__PURE__ */
|
|
5831
|
-
/* @__PURE__ */
|
|
5832
|
-
/* @__PURE__ */
|
|
5833
|
-
/* @__PURE__ */
|
|
5834
|
-
] }) : /* @__PURE__ */
|
|
5835
|
-
/* @__PURE__ */
|
|
5836
|
-
/* @__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" })
|
|
5837
6020
|
] }),
|
|
5838
|
-
/* @__PURE__ */
|
|
5839
|
-
|
|
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" }) }),
|
|
6022
|
+
runningBadge,
|
|
6023
|
+
/* @__PURE__ */ jsx24(PillButton, { variant: "solid", icon: "bolt", disabled: !activePrompt.trim(), onClick: () => handleGenerateBatch(), children: "Generieren" })
|
|
5840
6024
|
] })
|
|
5841
6025
|
] }),
|
|
5842
|
-
/* @__PURE__ */
|
|
5843
|
-
!isPromptCollapsed && /* @__PURE__ */
|
|
5844
|
-
/* @__PURE__ */
|
|
5845
|
-
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" }) })
|
|
5846
6030
|
] }) }),
|
|
5847
|
-
middlePanel === "labs" ? /* @__PURE__ */
|
|
6031
|
+
middlePanel === "labs" ? /* @__PURE__ */ jsx24("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx24(LabsTab, { services: labServices, onResult: (item) => {
|
|
5848
6032
|
const frame = item.frames[0];
|
|
5849
6033
|
if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
|
|
5850
|
-
} }) }) : /* @__PURE__ */
|
|
5851
|
-
/* @__PURE__ */
|
|
5852
|
-
|
|
5853
|
-
|
|
5854
|
-
|
|
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 })
|
|
5855
6043
|
] }),
|
|
5856
|
-
|
|
5857
|
-
|
|
5858
|
-
|
|
5859
|
-
|
|
5860
|
-
/* @__PURE__ */
|
|
5861
|
-
/* @__PURE__ */
|
|
5862
|
-
|
|
5863
|
-
/* @__PURE__ */ jsx23("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
|
|
5864
|
-
] }),
|
|
5865
|
-
/* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
|
|
5866
|
-
] }) : /* @__PURE__ */ jsxs21("div", { className: "h-full w-full relative flex items-center justify-center", children: [
|
|
5867
|
-
/* @__PURE__ */ jsx23("img", { src: currentResult.fullBase64 || currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
|
|
5868
|
-
/* @__PURE__ */ jsxs21("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: [
|
|
5869
|
-
/* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
|
|
5870
|
-
/* @__PURE__ */ jsx23(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
|
|
5871
|
-
/* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
|
|
5872
|
-
] })
|
|
5873
|
-
] }) : /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
|
|
5874
|
-
/* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
|
|
5875
|
-
/* @__PURE__ */ jsx23("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
|
|
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" })
|
|
5876
6051
|
] })
|
|
5877
|
-
] })
|
|
5878
|
-
|
|
5879
|
-
/* @__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" })
|
|
6055
|
+
] }) }) }),
|
|
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(
|
|
5880
6058
|
"div",
|
|
5881
6059
|
{
|
|
5882
6060
|
onClick: () => handleGallerySelect(item),
|
|
@@ -5891,10 +6069,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5891
6069
|
transition: "opacity 0.15s, border-color 0.15s"
|
|
5892
6070
|
},
|
|
5893
6071
|
className: "hover:opacity-80",
|
|
5894
|
-
children: /* @__PURE__ */
|
|
6072
|
+
children: /* @__PURE__ */ jsx24("img", { src: item.base64, style: { width: "100%", height: "100%", objectFit: "cover" }, alt: "" })
|
|
5895
6073
|
}
|
|
5896
6074
|
),
|
|
5897
|
-
/* @__PURE__ */
|
|
6075
|
+
/* @__PURE__ */ jsx24(
|
|
5898
6076
|
"button",
|
|
5899
6077
|
{
|
|
5900
6078
|
onClick: (e) => {
|
|
@@ -5917,31 +6095,31 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5917
6095
|
alignItems: "center",
|
|
5918
6096
|
justifyContent: "center"
|
|
5919
6097
|
},
|
|
5920
|
-
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" })
|
|
5921
6099
|
}
|
|
5922
6100
|
)
|
|
5923
6101
|
] }, item.id)) })
|
|
5924
6102
|
] })
|
|
5925
6103
|
] })
|
|
5926
6104
|
] }),
|
|
5927
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
5928
|
-
/* @__PURE__ */
|
|
5929
|
-
/* @__PURE__ */
|
|
5930
|
-
/* @__PURE__ */
|
|
5931
|
-
["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: () => {
|
|
5932
6110
|
setActiveTab(tab);
|
|
5933
6111
|
setIsRightCollapsed(false);
|
|
5934
|
-
}, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */
|
|
5935
|
-
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: () => {
|
|
5936
6114
|
setActiveTab("server");
|
|
5937
6115
|
setIsRightCollapsed(false);
|
|
5938
|
-
}, 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" }) })
|
|
5939
6117
|
] }),
|
|
5940
|
-
hfToken && /* @__PURE__ */
|
|
5941
|
-
/* @__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" }) })
|
|
5942
6120
|
] }),
|
|
5943
|
-
!isRightCollapsed && /* @__PURE__ */
|
|
5944
|
-
activeTab === "tags" && workspaceTags && /* @__PURE__ */
|
|
6121
|
+
!isRightCollapsed && /* @__PURE__ */ jsxs22("div", { className: "flex-1 overflow-hidden relative", children: [
|
|
6122
|
+
activeTab === "tags" && workspaceTags && /* @__PURE__ */ jsx24(
|
|
5945
6123
|
TagManagerPanel,
|
|
5946
6124
|
{
|
|
5947
6125
|
workspaceTags,
|
|
@@ -5952,12 +6130,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5952
6130
|
onTagMove: handleTagMove
|
|
5953
6131
|
}
|
|
5954
6132
|
),
|
|
5955
|
-
activeTab === "tags" && !workspaceTags && /* @__PURE__ */
|
|
5956
|
-
/* @__PURE__ */
|
|
5957
|
-
/* @__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." })
|
|
5958
6136
|
] }) }),
|
|
5959
|
-
activeTab === "history" && /* @__PURE__ */
|
|
5960
|
-
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(
|
|
5961
6139
|
MediaLibrary,
|
|
5962
6140
|
{
|
|
5963
6141
|
items: galleryItems,
|
|
@@ -5968,12 +6146,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5968
6146
|
},
|
|
5969
6147
|
onDelete: (id) => setGalleryItems((g) => g.filter((x) => x.id !== id)),
|
|
5970
6148
|
onSelect: handleGallerySelect,
|
|
5971
|
-
onGenerateReference: (item) =>
|
|
6149
|
+
onGenerateReference: (item) => handleGenerateBatch(item.prompt || activePrompt, item.mediaId, void 0, { silent: true }),
|
|
6150
|
+
visibleCount: galleryVisibleCount,
|
|
6151
|
+
onLoadMore: () => setGalleryVisibleCount((c) => c + 20)
|
|
5972
6152
|
}
|
|
5973
6153
|
),
|
|
5974
|
-
activeTab === "inspect" && /* @__PURE__ */
|
|
5975
|
-
activeTab === "setup" && /* @__PURE__ */
|
|
5976
|
-
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(
|
|
5977
6157
|
ProjectSyncTab,
|
|
5978
6158
|
{
|
|
5979
6159
|
topSlot: syncTopSlot,
|
|
@@ -5997,15 +6177,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
|
|
|
5997
6177
|
onHfInitialSync: hfToken ? handleHfInitialSync : void 0
|
|
5998
6178
|
}
|
|
5999
6179
|
),
|
|
6000
|
-
activeTab === "server" && /* @__PURE__ */
|
|
6180
|
+
activeTab === "server" && /* @__PURE__ */ jsx24(ServerTab, { serverBaseUrl })
|
|
6001
6181
|
] })
|
|
6002
6182
|
] })
|
|
6003
6183
|
] });
|
|
6004
6184
|
}
|
|
6005
6185
|
|
|
6006
6186
|
// src/components/FaApp.tsx
|
|
6007
|
-
import { useState as
|
|
6008
|
-
import { jsx as
|
|
6187
|
+
import { useState as useState20, useEffect as useEffect8 } from "react";
|
|
6188
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
6009
6189
|
function FaApp({
|
|
6010
6190
|
onGenerateImage,
|
|
6011
6191
|
onGeneratePrompt,
|
|
@@ -6024,7 +6204,7 @@ function FaApp({
|
|
|
6024
6204
|
onServerDelete,
|
|
6025
6205
|
buildInfo
|
|
6026
6206
|
}) {
|
|
6027
|
-
const [hfNamespace, setHfNamespace] =
|
|
6207
|
+
const [hfNamespace, setHfNamespace] = useState20(void 0);
|
|
6028
6208
|
useEffect8(() => {
|
|
6029
6209
|
if (!serverBaseUrl) return;
|
|
6030
6210
|
fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
|
|
@@ -6036,7 +6216,7 @@ function FaApp({
|
|
|
6036
6216
|
const result = await onGeneratePrompt(text, options);
|
|
6037
6217
|
return result.text;
|
|
6038
6218
|
};
|
|
6039
|
-
return /* @__PURE__ */
|
|
6219
|
+
return /* @__PURE__ */ jsx25(
|
|
6040
6220
|
AvatarArchitectApp,
|
|
6041
6221
|
{
|
|
6042
6222
|
onGenerateImage,
|
|
@@ -6057,7 +6237,7 @@ function FaApp({
|
|
|
6057
6237
|
}
|
|
6058
6238
|
|
|
6059
6239
|
// src/index.ts
|
|
6060
|
-
var LIB_VERSION = "2.0.
|
|
6240
|
+
var LIB_VERSION = "2.0.62";
|
|
6061
6241
|
export {
|
|
6062
6242
|
AvatarArchitectApp,
|
|
6063
6243
|
CollapsibleCard,
|