🖼️
Enter a prompt and click Generate
`;
// Replace the container div (slot's parent) with our wrapper
const slot = root.querySelector("slot");
const containerDiv = slot?.parentElement as HTMLElement;
if (containerDiv) {
containerDiv.replaceWith(wrapper);
}
this.#promptInput = wrapper.querySelector(".prompt-input");
this.#styleSelect = wrapper.querySelector(".style-select");
this.#providerSelect = wrapper.querySelector(".provider-select");
this.#imageArea = wrapper.querySelector(".image-area");
this.#generateBtn = wrapper.querySelector(".generate-btn");
const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement;
// Provider select
this.#providerSelect?.addEventListener("change", () => {
this.#provider = (this.#providerSelect?.value as "fal" | "gemini") || "fal";
});
// Generate button handler
this.#generateBtn?.addEventListener("click", (e) => {
e.stopPropagation();
this.#generate();
});
// Enter key in prompt
this.#promptInput?.addEventListener("keydown", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
this.#generate();
}
});
// Prevent canvas drag when interacting with content
this.#imageArea?.addEventListener("pointerdown", (e) => e.stopPropagation());
this.#promptInput?.addEventListener("pointerdown", (e) => e.stopPropagation());
// Close button
closeBtn.addEventListener("click", (e) => {
e.stopPropagation();
this.dispatchEvent(new CustomEvent("close"));
});
// Listen for incoming port data (arrow connections)
this.addEventListener("port-value-changed", ((e: CustomEvent) => {
const { name, value } = e.detail;
if (name === "prompt" && typeof value === "string" && this.#promptInput) {
this.#promptInput.value = value;
}
}) as EventListener);
return root;
}
async #generate() {
const prompt = this.#promptInput?.value.trim();
if (!prompt || this.#isLoading) return;
const style = this.#styleSelect?.value || "illustration";
this.#isLoading = true;
this.#error = null;
if (this.#generateBtn) this.#generateBtn.disabled = true;
this.#renderLoading();
try {
const endpoint = this.#provider === "gemini" ? "/api/gemini/image" : "/api/image-gen";
const response = await fetch(endpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ prompt, style }),
});
if (!response.ok) {
throw new Error(`Generation failed: ${response.statusText}`);
}
const result = await response.json();
const image: GeneratedImage = {
id: crypto.randomUUID(),
prompt,
url: result.url || result.image_url,
timestamp: new Date(),
};
this.#images.unshift(image);
this.#renderImages();
this.setPortValue("image", image.url);
this.dispatchEvent(new CustomEvent("image-generated", { detail: { image } }));
// Clear input
if (this.#promptInput) this.#promptInput.value = "";
} catch (error) {
this.#error = error instanceof Error ? error.message : "Generation failed";
this.#renderError();
} finally {
this.#isLoading = false;
if (this.#generateBtn) this.#generateBtn.disabled = false;
}
}
#renderLoading() {
if (!this.#imageArea) return;
this.#imageArea.innerHTML = `