Fix: lucide + stable gemini 0.5K selector

This commit is contained in:
2026-03-20 21:29:42 -07:00
parent 28989cbbe3
commit d6f8298767

View File

@@ -26,8 +26,11 @@
}; };
</script> </script>
<!-- Lucide (UMD, reliable global window.lucide) --> <!-- Lucide -->
<script src="https://cdn.jsdelivr.net/npm/lucide@0.559.0/dist/umd/lucide.min.js"></script> <!-- Development version -->
<!-- <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> -->
<!-- Production version -->
<script src="https://unpkg.com/lucide@latest"></script>
<!-- gif.js + worker --> <!-- gif.js + worker -->
<script src="https://cdn.jsdelivr.net/npm/gif.js.optimized/dist/gif.js"></script> <script src="https://cdn.jsdelivr.net/npm/gif.js.optimized/dist/gif.js"></script>
@@ -47,6 +50,7 @@
@click="settingsOpen = true" @click="settingsOpen = true"
class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-ui-border hover:bg-gray-100" class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-ui-border hover:bg-gray-100"
title="Account settings" title="Account settings"
aria-label="Open account settings"
> >
<i data-lucide="panel-left" class="h-5 w-5 text-ui-accent"></i> <i data-lucide="panel-left" class="h-5 w-5 text-ui-accent"></i>
</button> </button>
@@ -94,13 +98,23 @@
<div class="grid grid-cols-2 gap-3"> <div class="grid grid-cols-2 gap-3">
<div class="space-y-1"> <div class="space-y-1">
<label class="text-sm text-ui-sub">Image size</label> <label class="text-sm text-ui-sub">Image size</label>
<select x-model="form.imageSize" class="w-full rounded-xl border border-ui-border bg-white px-3 py-2">
<option value="1K">1K</option> <!-- Gemini: 1K + 0.5K -->
<template x-if="form.model === 'google/gemini-3.1-flash-image-preview'"> <template x-if="isGeminiModel(form.model)">
<select x-model="form.imageSize" class="w-full rounded-xl border border-ui-border bg-white px-3 py-2">
<option value="1K">1K</option>
<option value="0.5K">0.5K</option> <option value="0.5K">0.5K</option>
</template> </select>
</select> </template>
<!-- Non-Gemini: 1K only -->
<template x-if="!isGeminiModel(form.model)">
<select x-model="form.imageSize" class="w-full rounded-xl border border-ui-border bg-white px-3 py-2">
<option value="1K">1K</option>
</select>
</template>
</div> </div>
<div class="space-y-1"> <div class="space-y-1">
<label class="text-sm text-ui-sub">Aspect ratio</label> <label class="text-sm text-ui-sub">Aspect ratio</label>
<select x-model="form.aspectRatio" class="w-full rounded-xl border border-ui-border bg-white px-3 py-2"> <select x-model="form.aspectRatio" class="w-full rounded-xl border border-ui-border bg-white px-3 py-2">
@@ -163,7 +177,7 @@
<div @click.outside="settingsOpen=false" class="w-full max-w-md rounded-2xl border border-ui-border bg-white p-4 space-y-3"> <div @click.outside="settingsOpen=false" class="w-full max-w-md rounded-2xl border border-ui-border bg-white p-4 space-y-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h3 class="font-semibold">Account Settings</h3> <h3 class="font-semibold">Account Settings</h3>
<button @click="settingsOpen=false" class="rounded-lg p-2 hover:bg-gray-100"> <button @click="settingsOpen=false" class="rounded-lg p-2 hover:bg-gray-100" aria-label="Close modal">
<i data-lucide="x" class="h-4 w-4"></i> <i data-lucide="x" class="h-4 w-4"></i>
</button> </button>
</div> </div>