fix

src/views/CharacterDetailView.vue

@@ -231,7 +231,7 @@ const qualityOptions = ref([{
 const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
 const aspectRatioOptions = ref([
     { key: "NINESIXTEEN", value: "9:16" },
-    { key: "FOURTHIREE", value: "4:3" },
+    { key: "FOURTHREE", value: "4:3" },
     { key: "THIRDFOUR", value: "3:4" },
     { key: "SIXTEENNINE", value: "16:9" }
 ])

src/views/ImageGenerationView.vue

@@ -46,6 +46,8 @@ const activeAssetFilter = ref('all')
 const sendToTelegram = ref(false)
 const telegramId = ref(localStorage.getItem('telegram_id') || '')
 const isTelegramIdSaved = ref(!!localStorage.getItem('telegram_id'))
+const isUploading = ref(false)
+const fileInput = ref(null)
 
 const saveTelegramId = () => {
     if (telegramId.value) {
@@ -64,7 +66,7 @@ const qualityOptions = ref([
 const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
 const aspectRatioOptions = ref([
     { key: "NINESIXTEEN", value: "9:16" },
-    { key: "FOURTHIREE", value: "4:3" },
+    { key: "FOURTHREE", value: "4:3" },
     { key: "THIRDFOUR", value: "3:4" },
     { key: "SIXTEENNINE", value: "16:9" }
 ])
@@ -139,6 +141,39 @@ const removeSelectedAsset = (index) => {
     selectedAssets.value.splice(index, 1)
 }
 
+const triggerFileUpload = () => {
+    if (fileInput.value) fileInput.value.click()
+}
+
+const onFileSelected = async (event) => {
+    const file = event.target.files[0]
+    if (!file) return
+
+    isUploading.value = true
+    try {
+        // Upload without linked character (global asset)
+        await dataService.uploadAsset(file, null)
+
+        // Reload assets to show the new one. 
+        // ideally uploadAsset returns the new asset, but if not we reload.
+        // If it does return, we could push it to selectedAssets immediately.
+        // Let's assume we reload for now to be safe.
+        assetsFirst.value = 0
+        await loadAssets()
+
+        // Optional: Select the most recent asset if we want to be helpful
+        if (allAssets.value.length > 0) {
+            // Assuming the newest is first, we could:
+            // toggleAssetSelection(allAssets.value[0])
+        }
+    } catch (e) {
+        console.error('Failed to upload asset', e)
+    } finally {
+        isUploading.value = false
+        if (event.target) event.target.value = '' // Clear input
+    }
+}
+
 // --- Generation Logic ---
 
 const handleGenerate = async () => {
@@ -437,10 +472,19 @@ onMounted(() => {
                             <div class="flex justify-between items-center">
                                 <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Reference
                                     Assets ({{ selectedAssets.length }})</label>
+                                <input type="file" ref="fileInput" class="hidden" accept="image/*"
+                                    @change="onFileSelected" />
+                                <div class="flex gap-2">
+                                    <Button :label="isUploading ? 'Uploading...' : 'Upload'"
+                                        :icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
+                                        :loading="isUploading" size="small" text
+                                        class="!text-xs !py-1 !px-2 text-violet-400 hover:bg-violet-500/10"
+                                        @click="triggerFileUpload" />
                                     <Button label="Add Asset" icon="pi pi-plus" size="small" text
                                         class="!text-xs !py-1 !px-2 text-violet-400 hover:bg-violet-500/10"
                                         @click="openAssetModal" />
                                 </div>
+                            </div>
 
                             <div v-if="selectedAssets.length > 0" class="flex flex-wrap gap-2">
                                 <div v-for="(asset, index) in selectedAssets" :key="asset.id"