diff --git a/assets/js/app.js b/assets/js/app.js index c06fcb6..540d2a9 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -23,11 +23,21 @@ window.vibeGifApp = function () { aspectRatio: "1:1" }, + refreshIcons() { + if (!window.lucide?.createIcons) return; + window.lucide.createIcons(); + }, + init() { this.apiKey = localStorage.getItem("openrouter_api_key") || ""; this.apiKeyInput = this.apiKey || ""; - window.lucide?.createIcons(); - this.$watch("settingsOpen", () => setTimeout(() => window.lucide?.createIcons(), 0)); + + this.$nextTick(() => this.refreshIcons()); + setTimeout(() => this.refreshIcons(), 0); + setTimeout(() => this.refreshIcons(), 120); + + this.$watch("settingsOpen", () => this.$nextTick(() => this.refreshIcons())); + this.$watch("form.model", () => { if (this.form.model !== "google/gemini-3.1-flash-image-preview" && this.form.imageSize === "0.5K") { this.form.imageSize = "1K"; @@ -72,9 +82,9 @@ window.vibeGifApp = function () { try { const total = this.form.frameCount; - // Frame 1 prompt must be exactly this template + userPrompt const p1 = firstPrompt(this.form.userPrompt); this.progressLabel = `Generating frame 1/${total}...`; + const frame1 = await generateImageFrame({ apiKey: this.apiKey, model: this.form.model, @@ -83,20 +93,22 @@ window.vibeGifApp = function () { imageSize: this.form.imageSize, aspectRatio: this.form.aspectRatio }); + this.frames.push(frame1); this.progressPct = Math.round((1 / total) * 100); for (let i = 2; i <= total; i++) { this.progressLabel = `Generating frame ${i}/${total}...`; - const p = nextFramePrompt(total); + const next = await generateImageFrame({ apiKey: this.apiKey, model: this.form.model, - textPrompt: p, + textPrompt: nextFramePrompt(total), previousFrames: this.frames.slice(-2), imageSize: this.form.imageSize, aspectRatio: this.form.aspectRatio }); + this.frames.push(next); this.progressPct = Math.round((i / total) * 100); }