@rslsp1/fa-app-tools 1.3.2 → 1.3.4

package/dist/index.d.mts

@@ -448,6 +448,6 @@ declare function buildLoopInstruction(rounds: Array<{
 declare function autoLabel(index: number): string;
 declare function buildReferenceImageMediaIds(images: SelectedLabImage[]): string[];
 
-declare const LIB_VERSION = "1.3.2";
+declare const LIB_VERSION = "1.3.4";
 
 export { AvatarArchitectApp, type AvatarArchitectAppProps, CollapsibleCard, CompactDropdown, type ExtractedCharacter, FaToolsBadge, type FlowSdk, GLOBAL_STYLES, type Generation, HistoryPanel, InspectPanel, LIB_VERSION, LabBlend, LabCompare, type LabFrame, LabImagePicker, type LabItem, LabLoop, LabRemix, type LabServices, LabsTab, ListView, type MediaItem, MediaLibrary, PillButton, type ProjectMeta, type ProjectSettings, ProjectSyncTab, PromptTab, SectionLabel, type SelectedLabImage, type SelectedTag, SetupPanel, type SyncDiff, TagManagerPanel, type TagOption, type WorkspaceTags, autoLabel, buildBlendInstruction, buildCompareInstruction, buildFallbackPrompt, buildGenerationPrompt, buildImageGenerationOptions, buildLoopInstruction, buildPromptTabPayload, buildReferenceImageMediaIds, buildRemixInstruction, buildScanInstruction, cleanAiResponse, createFlowServices, exportProjectToZip, formatTreeToMarkdown, frameToGeneration, getFormattedTimestamp, groupGenerationsToLabItems, importProjectFromZip, injectXMPMetadata, interpretSdkError, parsePromptFile, parsePromptResponse, useKeyboardNavigation, useOnClickOutside };

package/dist/index.d.ts

@@ -448,6 +448,6 @@ declare function buildLoopInstruction(rounds: Array<{
 declare function autoLabel(index: number): string;
 declare function buildReferenceImageMediaIds(images: SelectedLabImage[]): string[];
 
-declare const LIB_VERSION = "1.3.2";
+declare const LIB_VERSION = "1.3.4";
 
 export { AvatarArchitectApp, type AvatarArchitectAppProps, CollapsibleCard, CompactDropdown, type ExtractedCharacter, FaToolsBadge, type FlowSdk, GLOBAL_STYLES, type Generation, HistoryPanel, InspectPanel, LIB_VERSION, LabBlend, LabCompare, type LabFrame, LabImagePicker, type LabItem, LabLoop, LabRemix, type LabServices, LabsTab, ListView, type MediaItem, MediaLibrary, PillButton, type ProjectMeta, type ProjectSettings, ProjectSyncTab, PromptTab, SectionLabel, type SelectedLabImage, type SelectedTag, SetupPanel, type SyncDiff, TagManagerPanel, type TagOption, type WorkspaceTags, autoLabel, buildBlendInstruction, buildCompareInstruction, buildFallbackPrompt, buildGenerationPrompt, buildImageGenerationOptions, buildLoopInstruction, buildPromptTabPayload, buildReferenceImageMediaIds, buildRemixInstruction, buildScanInstruction, cleanAiResponse, createFlowServices, exportProjectToZip, formatTreeToMarkdown, frameToGeneration, getFormattedTimestamp, groupGenerationsToLabItems, importProjectFromZip, injectXMPMetadata, interpretSdkError, parsePromptFile, parsePromptResponse, useKeyboardNavigation, useOnClickOutside };

package/dist/index.js

@@ -2223,6 +2223,13 @@ function autoLabel(index) {
 function buildReferenceImageMediaIds(images) {
   return images.filter((i) => i.sendToImageGen && i.frame.mediaId).map((i) => i.frame.mediaId);
 }
+function toPromptImages(images) {
+  return images.filter((i) => i.sendToPromptAI && i.frame.base64).map((i) => {
+    const raw = i.frame.base64.includes(",") ? i.frame.base64.split(",")[1] : i.frame.base64;
+    const mimeType = i.frame.base64.startsWith("data:image/png") ? "image/png" : "image/jpeg";
+    return { base64: raw, mimeType };
+  });
+}
 
 // src/components/labs/LabsTab.tsx
 var import_react19 = require("react");
@@ -2373,7 +2380,8 @@ var LabRemix = ({ services, onResult }) => {
         instruction,
         selected.item.prompt
       );
-      const images = selected.sendToPromptAI ? [{ base64: selected.frame.base64, mimeType: "image/png" }] : void 0;
+      const imgs = toPromptImages([selected]);
+      const images = imgs.length ? imgs : void 0;
       const result = await services.generateText(text, { systemInstruction, images });
       setGeneratedPrompt(result);
     } finally {
@@ -2766,7 +2774,7 @@ var LabCompare = ({ services, onResult }) => {
     setIsAnalyzing(true);
     try {
       const { text, systemInstruction } = buildCompareInstruction(filled, instruction);
-      const images = filled.filter((i) => i.sendToPromptAI).map((i) => ({ base64: i.frame.base64, mimeType: "image/png" }));
+      const images = toPromptImages(filled);
       const result = await services.generateText(text, { systemInstruction, images: images.length ? images : void 0 });
       setAnalysis(result);
       setGeneratedPrompt("");
@@ -2934,7 +2942,7 @@ var LabLoop = ({ services, onResult }) => {
         images: r.images
       }));
       const { text, systemInstruction } = buildLoopInstruction(historyForBuilder, currentInstruction);
-      const allImages = [...rounds.flatMap((r) => r.images), ...pendingImages].filter((i) => i.sendToPromptAI).map((i) => ({ base64: i.frame.base64, mimeType: "image/png" }));
+      const allImages = toPromptImages([...rounds.flatMap((r) => r.images), ...pendingImages]);
       const newPrompt = await services.generateText(text, {
         systemInstruction,
         images: allImages.length ? allImages : void 0
@@ -3927,42 +3935,34 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         !projectLoaded && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          "form",
-          {
-            onSubmit: (e) => {
-              e.preventDefault();
-              if (hfTokenInput.trim()) setHfToken(hfTokenInput.trim());
-            },
-            className: "flex gap-2 w-full",
-            autoComplete: "on",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { type: "text", name: "username", value: "hf-token", readOnly: true, autoComplete: "username", className: "hidden" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                "input",
-                {
-                  type: "password",
-                  name: "password",
-                  autoComplete: "current-password",
-                  value: hfTokenInput,
-                  onChange: (e) => setHfTokenInput(e.target.value),
-                  placeholder: "HF Token (hf_\u2026)",
-                  className: "flex-1 rounded-xl px-3 text-[11px] font-mono outline-none",
-                  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)" }
-                }
-              ),
-              hfTokenInput.trim() && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                "button",
-                {
-                  type: "submit",
-                  className: "px-3 rounded-xl text-[11px] font-bold text-white",
-                  style: { background: "#f59e0b", height: 44 },
-                  children: "OK"
-                }
-              )
-            ]
-          }
-        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-2 w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "input",
+            {
+              type: "password",
+              autoComplete: "current-password",
+              id: "hf-token-input",
+              value: hfTokenInput,
+              onChange: (e) => setHfTokenInput(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && hfTokenInput.trim()) setHfToken(hfTokenInput.trim());
+              },
+              placeholder: "HF Token (hf_\u2026)",
+              className: "flex-1 rounded-xl px-3 text-[11px] font-mono outline-none",
+              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)" }
+            }
+          ),
+          hfTokenInput.trim() && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setHfToken(hfTokenInput.trim()),
+              className: "px-3 rounded-xl text-[11px] font-bold text-white",
+              style: { background: "#f59e0b", height: 44 },
+              children: "OK"
+            }
+          )
+        ] }),
         hfToken && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "button",
           {
@@ -4628,7 +4628,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/index.ts
-var LIB_VERSION = "1.3.2";
+var LIB_VERSION = "1.3.4";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarArchitectApp,

package/dist/index.mjs

@@ -1760,6 +1760,13 @@ function autoLabel(index) {
 function buildReferenceImageMediaIds(images) {
   return images.filter((i) => i.sendToImageGen && i.frame.mediaId).map((i) => i.frame.mediaId);
 }
+function toPromptImages(images) {
+  return images.filter((i) => i.sendToPromptAI && i.frame.base64).map((i) => {
+    const raw = i.frame.base64.includes(",") ? i.frame.base64.split(",")[1] : i.frame.base64;
+    const mimeType = i.frame.base64.startsWith("data:image/png") ? "image/png" : "image/jpeg";
+    return { base64: raw, mimeType };
+  });
+}
 
 // src/components/labs/LabsTab.tsx
 import { useState as useState12 } from "react";
@@ -1910,7 +1917,8 @@ var LabRemix = ({ services, onResult }) => {
         instruction,
         selected.item.prompt
       );
-      const images = selected.sendToPromptAI ? [{ base64: selected.frame.base64, mimeType: "image/png" }] : void 0;
+      const imgs = toPromptImages([selected]);
+      const images = imgs.length ? imgs : void 0;
       const result = await services.generateText(text, { systemInstruction, images });
       setGeneratedPrompt(result);
     } finally {
@@ -2303,7 +2311,7 @@ var LabCompare = ({ services, onResult }) => {
     setIsAnalyzing(true);
     try {
       const { text, systemInstruction } = buildCompareInstruction(filled, instruction);
-      const images = filled.filter((i) => i.sendToPromptAI).map((i) => ({ base64: i.frame.base64, mimeType: "image/png" }));
+      const images = toPromptImages(filled);
       const result = await services.generateText(text, { systemInstruction, images: images.length ? images : void 0 });
       setAnalysis(result);
       setGeneratedPrompt("");
@@ -2471,7 +2479,7 @@ var LabLoop = ({ services, onResult }) => {
         images: r.images
       }));
       const { text, systemInstruction } = buildLoopInstruction(historyForBuilder, currentInstruction);
-      const allImages = [...rounds.flatMap((r) => r.images), ...pendingImages].filter((i) => i.sendToPromptAI).map((i) => ({ base64: i.frame.base64, mimeType: "image/png" }));
+      const allImages = toPromptImages([...rounds.flatMap((r) => r.images), ...pendingImages]);
       const newPrompt = await services.generateText(text, {
         systemInstruction,
         images: allImages.length ? allImages : void 0
@@ -3464,42 +3472,34 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         !projectLoaded && /* @__PURE__ */ jsx20("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
       ] }),
       /* @__PURE__ */ jsxs18("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
-        /* @__PURE__ */ jsxs18(
-          "form",
-          {
-            onSubmit: (e) => {
-              e.preventDefault();
-              if (hfTokenInput.trim()) setHfToken(hfTokenInput.trim());
-            },
-            className: "flex gap-2 w-full",
-            autoComplete: "on",
-            children: [
-              /* @__PURE__ */ jsx20("input", { type: "text", name: "username", value: "hf-token", readOnly: true, autoComplete: "username", className: "hidden" }),
-              /* @__PURE__ */ jsx20(
-                "input",
-                {
-                  type: "password",
-                  name: "password",
-                  autoComplete: "current-password",
-                  value: hfTokenInput,
-                  onChange: (e) => setHfTokenInput(e.target.value),
-                  placeholder: "HF Token (hf_\u2026)",
-                  className: "flex-1 rounded-xl px-3 text-[11px] font-mono outline-none",
-                  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)" }
-                }
-              ),
-              hfTokenInput.trim() && /* @__PURE__ */ jsx20(
-                "button",
-                {
-                  type: "submit",
-                  className: "px-3 rounded-xl text-[11px] font-bold text-white",
-                  style: { background: "#f59e0b", height: 44 },
-                  children: "OK"
-                }
-              )
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 w-full", children: [
+          /* @__PURE__ */ jsx20(
+            "input",
+            {
+              type: "password",
+              autoComplete: "current-password",
+              id: "hf-token-input",
+              value: hfTokenInput,
+              onChange: (e) => setHfTokenInput(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && hfTokenInput.trim()) setHfToken(hfTokenInput.trim());
+              },
+              placeholder: "HF Token (hf_\u2026)",
+              className: "flex-1 rounded-xl px-3 text-[11px] font-mono outline-none",
+              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)" }
+            }
+          ),
+          hfTokenInput.trim() && /* @__PURE__ */ jsx20(
+            "button",
+            {
+              type: "button",
+              onClick: () => setHfToken(hfTokenInput.trim()),
+              className: "px-3 rounded-xl text-[11px] font-bold text-white",
+              style: { background: "#f59e0b", height: 44 },
+              children: "OK"
+            }
+          )
+        ] }),
         hfToken && /* @__PURE__ */ jsxs18(
           "button",
           {
@@ -4165,7 +4165,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/index.ts
-var LIB_VERSION = "1.3.2";
+var LIB_VERSION = "1.3.4";
 export {
   AvatarArchitectApp,
   CollapsibleCard,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rslsp1/fa-app-tools",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Shared tools and hooks for Fine Art flow apps",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",