\u{1F5BC}
Enter a prompt and click Generate
`;
// Replace the container div (slot's parent) with our wrapper
const containerDiv = root.querySelector(":scope > div");
if (containerDiv) {
containerDiv.replaceWith(wrapper);
}
this.#promptInput = wrapper.querySelector(".prompt-input");
this.#styleSelect = wrapper.querySelector(".style-select");
this.#imageArea = wrapper.querySelector(".image-area");
this.#generateBtn = wrapper.querySelector(".generate-btn");
const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement;
// 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 drag on input
this.#promptInput?.addEventListener("pointerdown", (e) => e.stopPropagation());
// Close button
closeBtn.addEventListener("click", (e) => {
e.stopPropagation();
this.dispatchEvent(new CustomEvent("close"));
});
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 {
// Call backend API (to be implemented)
const response = await fetch("/api/image-gen", {
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.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 = `