Style FileUpload

Author: mythz

AiServer/wwwroot/mjs/components/FileUpload.mjs

@@ -15,16 +15,17 @@ export default {
     >
       <slot v-if="$slots.default"></slot>
       <div v-else class="flex flex-col items-center justify-center">
-        <svg class="w-10 h-10 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <slot v-if="$slots.icon" name="icon"></slot>
+        <svg v-else class="w-12 h-12 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
         </svg>
-        <p class="mb-2 text-sm text-gray-500">
-            <span v-if="instructions">{{instructions}}</span>
+        <p class="mb-2 text-gray-500">
+            <slot v-if="$slots.title" name="title"></slot>
             <template v-else>
                 <span class="font-semibold">Click to upload</span> or drag and drop
             </template>
         </p>
-        <p class="text-xs text-gray-500">{{ acceptLabel ?? grammarList(accept?.split(',').map(x => x.replace('.','').toUpperCase())) }}</p>
+        <p class="text-sm text-gray-500">{{ acceptLabel ?? grammarList(accept?.split(',').map(x => x.replace('.','').toUpperCase())) }}</p>
       </div>
       <input ref="input" type="file" :multiple="multiple"
             :name="id"
@@ -96,7 +97,6 @@ export default {
         values:Array, //string[]
         /** @type {UploadedFile[]} status */
         files:Array,  //UploadedFile[]
-        instructions: String,
         accept: String,
         acceptLabel: String,
     },

AiServer/wwwroot/mjs/components/ImageToText.mjs

@@ -24,14 +24,21 @@ export default {
                                 <div class="grid grid-cols-6 gap-4">
                                     <div class="col-span-6">
                                         <FileUpload ref="refImage" id="image" v-model="request.image" required
-                                            accept=".webp,.jpg,.jpeg,.png,.gif" 
-                                            @change="renderKey++">
+                                            accept=".webp,.jpg,.jpeg,.png,.gif" @change="renderKey++">
+                                            <template #title>
+                                                <span class="font-semibold text-green-600">Click to upload</span> or drag and drop
+                                            </template>
+                                            <template #icon>
+                                                <svg class="mb-2 h-12 w-12 text-green-500 inline" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true" data-phx-id="m9-phx-F_34be7KYfTF66Xh">
+                                                  <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                                                </svg>
+                                            </template>
                                         </FileUpload>
                                     </div>
                                 </div>
                             </fieldset>
                         </div>
-                        <div class="mt-4 flex justify-center">
+                        <div class="mt-4 mb-8 flex justify-center">
                             <PrimaryButton :key="renderKey" type="submit" :disabled="!validPrompt()">
                                 <svg class="-ml-0.5 h-6 w-6 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M11 16V7.85l-2.6 2.6L7 9l5-5l5 5l-1.4 1.45l-2.6-2.6V16zm-5 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"/></svg>
                                 <span class="text-base font-semibold">Upload</span>