<UForm
                  ref="form"
                  :state="state"
                  :schema="schema"
                  class="w-full max-w-[960px] mx-auto"
                  @submit="onSubmit"
                >
                  <div class="grid grid-cols-1 gap-4">
                  
                    <UFormField
                      label="Filter Color"
                      name="filters"
                    >
                      <USelect
                        v-model="state.filters"
                        size="xl"
                        :items="filters"
                        class="w-full"
                      />
                    </UFormField>

                    <div class="flex gap-2 mt-8">
                      <UButton
                        v-if="!generatedImage"
                        loading-auto
                        type="submit"
                      >
                        Generate
                      </UButton>
                      <UButton
                        v-if="generatedImage"
                        @click="downloadImage"
                      >
                        Download
                      </UButton>
                      <UButton
                        variant="outline"
                        @click="() => {
                          form?.clear();
                          clearFormAndCanvas();
                        }"
                      >
                        Clear
                      </UButton>
                    </div>
                  </div>

                  <canvas
                    ref="canvas"
                    class="border mt-10 max-w-[960px] max-h-[540px] w-full h-auto"
                  />
                </UForm>

<UForm
                  ref="form"
                  :state="state"
                  :schema="schema"
                  class="w-full max-w-[960px] mx-auto"
                  @submit="onSubmit"
                >
                  <div class="grid grid-cols-1 gap-4">
                  
                    <UFormField
                      label="Filter Color"
                      name="filters"
                    >
                      <USelect
                        v-model="state.filters"
                        size="xl"
                        :items="filters"
                        class="w-full"
                      />
                    </UFormField>

                    <div class="flex gap-2 mt-8">
                      <UButton
                        v-if="!generatedImage"
                        loading-auto
                        type="submit"
                      >
                        Generate
                      </UButton>
                      <UButton
                        v-if="generatedImage"
                        @click="downloadImage"
                      >
                        Download
                      </UButton>
                      <UButton
                        variant="outline"
                        @click="() => {
                          form?.clear();
                          clearFormAndCanvas();
                        }"
                      >
                        Clear
                      </UButton>
                    </div>
                  </div>

                  <canvas
                    ref="canvas"
                    class="border mt-10 max-w-[960px] max-h-[540px] w-full h-auto"
                  />
                </UForm>