styling and fixes

src/components/common/UrlInput.vue

@@ -35,6 +35,7 @@ import { ValidationState } from '@/utils/validationUtil'
 const props = defineProps<{
   modelValue: string
   validateUrlFn?: (url: string) => Promise<boolean>
+  disableValidation?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -101,6 +102,8 @@ const defaultValidateUrl = async (url: string): Promise<boolean> => {
 }
 
 const validateUrl = async (value: string) => {
+  if (props.disableValidation) return
+
   if (validationState.value === ValidationState.LOADING) return
 
   const url = cleanInput(value)

src/locales/en/main.json

@@ -1984,6 +1984,32 @@
     "noModelsInFolder": "No {type} available in this folder",
     "searchAssetsPlaceholder": "Type to search...",
     "uploadModel": "Upload model",
+    "uploadModelFromCivitai": "Upload a model from Civitai",
+    "uploadModelDescription1": "Paste a Civitai model download link to add it to your library.",
+    "uploadModelDescription2": "Only links from https://civitai.com are supported at the moment",
+    "uploadModelDescription3": "Max file size: 1 GB",
+    "civitaiLinkLabel": "Civitai model download link",
+    "civitaiLinkPlaceholder": "Paste link here",
+    "civitaiLinkExample": "Example: https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor",
+    "confirmModelDetails": "Confirm Model Details",
+    "fileName": "File Name",
+    "fileSize": "File Size",
+    "modelName": "Model Name",
+    "modelNamePlaceholder": "Enter a name for this model",
+    "tags": "Tags",
+    "tagsPlaceholder": "e.g., models, checkpoint",
+    "tagsHelp": "Separate tags with commas",
+    "upload": "Upload",
+    "uploadingModel": "Uploading model...",
+    "uploadSuccess": "Model uploaded successfully!",
+    "uploadFailed": "Upload failed",
+    "modelAssociatedWithLink": "The model associated with the link you provided:",
+    "whatTypeOfModel": "What type of model is this?",
+    "selectModelType": "Select model type",
+    "notSureLeaveAsIs": "Not sure? Just leave this as is",
+    "modelUploaded": "Model uploaded!",
+    "findInLibrary": "Find it in the {type} section of the models library.",
+    "finish": "Finish",
     "allModels": "All Models",
     "allCategory": "All {category}",
     "unknown": "Unknown",

src/platform/assets/components/AssetBrowserModal.vue

@@ -73,11 +73,14 @@ import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
 import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
+import UploadModelDialog from '@/platform/assets/components/UploadModelDialog.vue'
+import UploadModelDialogHeader from '@/platform/assets/components/UploadModelDialogHeader.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { assetService } from '@/platform/assets/services/assetService'
 import { formatCategoryLabel } from '@/platform/assets/utils/categoryLabel'
+import { useDialogStore } from '@/stores/dialogStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { OnCloseKey } from '@/types/widgetTypes'
 
@@ -92,6 +95,7 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
+const dialogStore = useDialogStore()
 
 const emit = defineEmits<{
   'asset-select': [asset: AssetDisplayItem]
@@ -189,6 +193,15 @@ const { flags } = useFeatureFlags()
 const isUploadButtonEnabled = computed(() => flags.modelUploadButtonEnabled)
 
 function handleUploadClick() {
-  // Will be implemented in the future commit
+  dialogStore.showDialog({
+    key: 'upload-model',
+    headerComponent: UploadModelDialogHeader,
+    component: UploadModelDialog,
+    props: {
+      onUploadSuccess: async () => {
+        await execute()
+      }
+    }
+  })
 }
 </script>

src/platform/assets/components/UploadModelConfirmation.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <!-- Model Info Section -->
+    <div class="flex flex-col gap-2">
+      <p class="text-sm text-muted m-0">
+        {{ $t('assetBrowser.modelAssociatedWithLink') }}
+      </p>
+      <p class="text-sm mt-0">
+        {{ metadata?.name || metadata?.filename }}
+      </p>
+    </div>
+
+    <!-- Model Type Selection -->
+    <div class="flex flex-col gap-2">
+      <label class="text-sm text-muted">
+        {{ $t('assetBrowser.whatTypeOfModel') }}
+      </label>
+      <SingleSelect
+        v-model="selectedModelType"
+        :label="$t('assetBrowser.whatTypeOfModel')"
+        :options="modelTypes"
+      />
+      <div class="flex items-center gap-2 text-sm text-muted">
+        <i class="icon-[lucide--info]" />
+        <span>{{ $t('assetBrowser.notSureLeaveAsIs') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import SingleSelect from '@/components/input/SingleSelect.vue'
+import { useModelTypes } from '@/platform/assets/composables/useModelTypes'
+
+interface ModelMetadata {
+  content_length: number
+  final_url: string
+  content_type?: string
+  filename?: string
+  name?: string
+  tags?: string[]
+  preview_url?: string
+}
+
+const props = defineProps<{
+  modelValue: string
+  metadata: ModelMetadata | null
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const { modelTypes } = useModelTypes()
+
+const selectedModelType = computed({
+  get: () => props.modelValue,
+  set: (value: string) => emit('update:modelValue', value)
+})
+</script>

src/platform/assets/components/UploadModelDialog.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="upload-model-dialog flex flex-col justify-between gap-6 p-4 pt-6">
+    <!-- Step 1: Enter URL -->
+    <UploadModelUrlInput v-if="currentStep === 1" v-model="wizardData.url" />
+
+    <!-- Step 2: Confirm Metadata -->
+    <UploadModelConfirmation
+      v-else-if="currentStep === 2"
+      v-model="selectedModelType"
+      :metadata="wizardData.metadata"
+    />
+
+    <!-- Step 3: Upload Progress -->
+    <UploadModelProgress
+      v-else-if="currentStep === 3"
+      :status="uploadStatus"
+      :error="uploadError"
+      :metadata="wizardData.metadata"
+      :model-type="selectedModelType"
+    />
+
+    <!-- Navigation Footer -->
+    <div class="flex justify-end gap-2">
+      <TextButton
+        v-if="currentStep !== 1 && currentStep !== 3"
+        :label="$t('g.back')"
+        type="secondary"
+        size="md"
+        :disabled="isFetchingMetadata || isUploading"
+        :on-click="goToPreviousStep"
+      />
+      <span v-else />
+
+      <IconTextButton
+        v-if="currentStep === 1"
+        :label="$t('g.continue')"
+        type="primary"
+        size="md"
+        :disabled="!canFetchMetadata || isFetchingMetadata"
+        :on-click="handleFetchMetadata"
+      >
+        <template #icon>
+          <i
+            v-if="isFetchingMetadata"
+            class="icon-[lucide--loader-circle] animate-spin"
+          />
+        </template>
+      </IconTextButton>
+      <IconTextButton
+        v-else-if="currentStep === 2"
+        :label="$t('assetBrowser.upload')"
+        type="primary"
+        size="md"
+        :disabled="!canUploadModel || isUploading"
+        :on-click="handleUploadModel"
+      >
+        <template #icon>
+          <i
+            v-if="isUploading"
+            class="icon-[lucide--loader-circle] animate-spin"
+          />
+        </template>
+      </IconTextButton>
+      <TextButton
+        v-else-if="currentStep === 3 && uploadStatus === 'success'"
+        :label="$t('assetBrowser.finish')"
+        type="primary"
+        size="md"
+        :on-click="handleClose"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
+import UploadModelConfirmation from '@/platform/assets/components/UploadModelConfirmation.vue'
+import UploadModelProgress from '@/platform/assets/components/UploadModelProgress.vue'
+import UploadModelUrlInput from '@/platform/assets/components/UploadModelUrlInput.vue'
+import { useModelTypes } from '@/platform/assets/composables/useModelTypes'
+import { assetService } from '@/platform/assets/services/assetService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const dialogStore = useDialogStore()
+
+const emit = defineEmits<{
+  'upload-success': []
+}>()
+
+const currentStep = ref(1)
+const isFetchingMetadata = ref(false)
+const isUploading = ref(false)
+const uploadStatus = ref<'idle' | 'uploading' | 'success' | 'error'>('idle')
+const uploadError = ref('')
+
+const wizardData = ref<{
+  url: string
+  metadata: {
+    content_length: number
+    final_url: string
+    content_type?: string
+    filename?: string
+    name?: string
+    tags?: string[]
+    preview_url?: string
+  } | null
+  name: string
+  tags: string[]
+}>({
+  url: '',
+  metadata: null,
+  name: '',
+  tags: []
+})
+
+const selectedModelType = ref<string>('loras')
+
+const { modelTypes, fetchModelTypes } = useModelTypes()
+
+// Validation
+const canFetchMetadata = computed(() => {
+  return wizardData.value.url.trim().length > 0
+})
+
+const canUploadModel = computed(() => {
+  return !!selectedModelType.value
+})
+
+async function handleFetchMetadata() {
+  if (!canFetchMetadata.value) return
+
+  isFetchingMetadata.value = true
+  try {
+    const metadata = await assetService.getAssetMetadata(wizardData.value.url)
+    wizardData.value.metadata = metadata
+
+    // Pre-fill name from metadata
+    wizardData.value.name = metadata.filename || metadata.name || ''
+
+    // Pre-fill model type from metadata tags if available
+    if (metadata.tags && metadata.tags.length > 0) {
+      wizardData.value.tags = metadata.tags
+      // Try to detect model type from tags
+      const typeTag = metadata.tags.find((tag) =>
+        modelTypes.value.some((type) => type.value === tag)
+      )
+      if (typeTag) {
+        selectedModelType.value = typeTag
+      }
+    }
+
+    currentStep.value = 2
+  } catch (error) {
+    console.error('Failed to retrieve metadata:', error)
+    uploadError.value =
+      error instanceof Error ? error.message : 'Failed to retrieve metadata'
+    // TODO: Show error toast to user
+  } finally {
+    isFetchingMetadata.value = false
+  }
+}
+
+async function handleUploadModel() {
+  if (!canUploadModel.value) return
+
+  isUploading.value = true
+  uploadStatus.value = 'uploading'
+
+  try {
+    const tags = ['models', selectedModelType.value]
+    const filename =
+      wizardData.value.metadata?.filename ||
+      wizardData.value.metadata?.name ||
+      'model'
+
+    await assetService.uploadAssetFromUrl({
+      url: wizardData.value.url,
+      name: filename,
+      tags,
+      user_metadata: {
+        source: 'civitai',
+        source_url: wizardData.value.url,
+        model_type: selectedModelType.value
+      }
+    })
+
+    uploadStatus.value = 'success'
+    currentStep.value = 3
+    emit('upload-success')
+  } catch (error) {
+    console.error('Failed to upload asset:', error)
+    uploadStatus.value = 'error'
+    uploadError.value =
+      error instanceof Error ? error.message : 'Failed to upload model'
+    currentStep.value = 3
+  } finally {
+    isUploading.value = false
+  }
+}
+
+function goToPreviousStep() {
+  if (currentStep.value > 1) {
+    currentStep.value = currentStep.value - 1
+  }
+}
+
+function handleClose() {
+  dialogStore.closeDialog({ key: 'upload-model' })
+}
+
+onMounted(() => {
+  fetchModelTypes()
+})
+</script>
+
+<style scoped>
+.upload-model-dialog {
+  min-width: 600px;
+  min-height: 400px;
+}
+</style>

src/platform/assets/components/UploadModelDialogHeader.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex items-center gap-3 px-4 py-2 font-bold">
+    <span>{{ $t('assetBrowser.uploadModelFromCivitai') }}</span>
+    <span
+      class="rounded-full bg-white px-1.5 py-0 text-xxs font-medium uppercase text-black"
+    >
+      {{ $t('g.beta') }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

src/platform/assets/components/UploadModelProgress.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="flex flex-1 flex-col gap-6">
+    <!-- Uploading State -->
+    <div
+      v-if="status === 'uploading'"
+      class="flex flex-1 flex-col items-center justify-center gap-6"
+    >
+      <i
+        class="icon-[lucide--loader-circle] animate-spin text-6xl text-primary"
+      />
+      <div class="text-center">
+        <p class="m-0 text-sm font-bold">
+          {{ $t('assetBrowser.uploadingModel') }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Success State -->
+    <div v-else-if="status === 'success'" class="flex flex-col gap-8">
+      <div class="flex flex-col gap-4">
+        <p class="text-sm text-muted m-0 font-bold">
+          {{ $t('assetBrowser.modelUploaded') }} 🎉
+        </p>
+        <p class="text-sm text-muted m-0">
+          {{ $t('assetBrowser.findInLibrary', { type: modelType }) }}
+        </p>
+      </div>
+
+      <div
+        class="flex flex-row items-start p-8 bg-node-component-surface rounded-lg"
+      >
+        <div class="flex flex-col justify-center items-start gap-1 flex-1">
+          <p class="text-sm m-0">
+            {{ metadata?.name || metadata?.filename }}
+          </p>
+          <p class="text-sm text-muted m-0">
+            {{ modelType }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Error State -->
+    <div
+      v-else-if="status === 'error'"
+      class="flex flex-1 flex-col items-center justify-center gap-6"
+    >
+      <i class="icon-[lucide--x-circle] text-6xl text-red-500" />
+      <div class="text-center">
+        <p class="m-0 text-sm font-bold">
+          {{ $t('assetBrowser.uploadFailed') }}
+        </p>
+        <p v-if="error" class="text-sm text-muted mb-0">
+          {{ error }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ModelMetadata {
+  content_length: number
+  final_url: string
+  content_type?: string
+  filename?: string
+  name?: string
+  tags?: string[]
+  preview_url?: string
+}
+
+defineProps<{
+  status: 'idle' | 'uploading' | 'success' | 'error'
+  error?: string
+  metadata: ModelMetadata | null
+  modelType: string
+}>()
+</script>

src/platform/assets/components/UploadModelUrlInput.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <p class="text-sm text-muted m-0">
+        {{ $t('assetBrowser.uploadModelDescription1') }}
+      </p>
+      <ul class="list-disc space-y-1 pl-5 mt-0 text-sm text-muted">
+        <li>{{ $t('assetBrowser.uploadModelDescription2') }}</li>
+        <li>{{ $t('assetBrowser.uploadModelDescription3') }}</li>
+      </ul>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <label class="text-sm text-muted mb-0">
+        {{ $t('assetBrowser.civitaiLinkLabel') }}
+      </label>
+      <UrlInput
+        v-model="url"
+        :placeholder="$t('assetBrowser.civitaiLinkPlaceholder')"
+        :disable-validation="true"
+      />
+      <p class="text-xs text-muted">
+        {{ $t('assetBrowser.civitaiLinkExample') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import UrlInput from '@/components/common/UrlInput.vue'
+
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const url = computed({
+  get: () => props.modelValue,
+  set: (value: string) => emit('update:modelValue', value)
+})
+</script>

src/platform/assets/composables/useModelTypes.ts

@@ -0,0 +1,94 @@
+import { ref } from 'vue'
+
+import { assetService } from '@/platform/assets/services/assetService'
+
+/**
+ * Format folder name to display name
+ * Converts "upscale_models" -> "Upscale Models"
+ * Converts "loras" -> "LoRAs"
+ */
+function formatDisplayName(folderName: string): string {
+  // Special cases for acronyms and proper nouns
+  const specialCases: Record<string, string> = {
+    loras: 'LoRAs',
+    ipadapter: 'IP-Adapter',
+    sams: 'SAMs',
+    clip_vision: 'CLIP Vision',
+    animatediff_motion_lora: 'AnimateDiff Motion LoRA',
+    animatediff_models: 'AnimateDiff Models',
+    vae: 'VAE',
+    sam2: 'SAM 2',
+    controlnet: 'ControlNet',
+    gligen: 'GLIGEN'
+  }
+
+  if (specialCases[folderName]) {
+    return specialCases[folderName]
+  }
+
+  return folderName
+    .split('_')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+interface ModelTypeOption {
+  name: string // Display name
+  value: string // Actual tag value
+}
+
+// Shared state across all instances
+const modelTypes = ref<ModelTypeOption[]>([])
+const isLoading = ref(false)
+const error = ref<string | null>(null)
+let fetchPromise: Promise<void> | null = null
+
+/**
+ * Composable for fetching and managing model types from the API
+ * Uses shared state to ensure data is only fetched once
+ */
+export function useModelTypes() {
+  /**
+   * Fetch model types from the API (only fetches once, subsequent calls reuse the same promise)
+   */
+  async function fetchModelTypes() {
+    // If already loaded, return immediately
+    if (modelTypes.value.length > 0) {
+      return
+    }
+
+    // If currently loading, return the existing promise
+    if (fetchPromise) {
+      return fetchPromise
+    }
+
+    isLoading.value = true
+    error.value = null
+
+    fetchPromise = (async () => {
+      try {
+        const response = await assetService.getModelTypes()
+        modelTypes.value = response.map((folder) => ({
+          name: formatDisplayName(folder.name),
+          value: folder.name
+        }))
+      } catch (err) {
+        error.value =
+          err instanceof Error ? err.message : 'Failed to fetch model types'
+        console.error('Failed to fetch model types:', err)
+      } finally {
+        isLoading.value = false
+        fetchPromise = null
+      }
+    })()
+
+    return fetchPromise
+  }
+
+  return {
+    modelTypes,
+    isLoading,
+    error,
+    fetchModelTypes
+  }
+}

src/platform/assets/services/assetService.ts

@@ -249,6 +249,91 @@ function createAssetService() {
     }
   }
 
+  /**
+   * Retrieves metadata from a download URL without downloading the file
+   *
+   * @param url - Download URL to retrieve metadata from (will be URL-encoded)
+   * @returns Promise with metadata including content_length, final_url, filename, etc.
+   * @throws Error if metadata retrieval fails
+   */
+  async function getAssetMetadata(url: string): Promise<{
+    content_length: number
+    final_url: string
+    content_type?: string
+    filename?: string
+    name?: string
+    tags?: string[]
+  }> {
+    const encodedUrl = encodeURIComponent(url)
+    const res = await api.fetchApi(
+      `${ASSETS_ENDPOINT}/metadata?url=${encodedUrl}`
+    )
+
+    if (!res.ok) {
+      const errorText = await res.text().catch(() => 'Unknown error')
+      throw new Error(
+        `Failed to retrieve metadata: Server returned ${res.status}. ${errorText}`
+      )
+    }
+
+    return await res.json()
+  }
+
+  /**
+   * Uploads an asset by providing a URL to download from
+   *
+   * @param params - Upload parameters
+   * @param params.url - HTTP/HTTPS URL to download from
+   * @param params.name - Display name (determines extension)
+   * @param params.tags - Optional freeform tags
+   * @param params.user_metadata - Optional custom metadata object
+   * @param params.preview_id - Optional UUID for preview asset
+   * @returns Promise<AssetItem & { created_new: boolean }> - Asset object with created_new flag
+   * @throws Error if upload fails
+   */
+  async function uploadAssetFromUrl(params: {
+    url: string
+    name: string
+    tags?: string[]
+    user_metadata?: Record<string, any>
+    preview_id?: string
+  }): Promise<AssetItem & { created_new: boolean }> {
+    const res = await api.fetchApi(ASSETS_ENDPOINT, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    })
+
+    if (!res.ok) {
+      const errorText = await res.text().catch(() => 'Unknown error')
+      throw new Error(
+        `Failed to upload asset: Server returned ${res.status}. ${errorText}`
+      )
+    }
+
+    return await res.json()
+  }
+
+  /**
+   * Gets available model types from the server
+   *
+   * @returns Promise<ModelFolder[]> - List of model types with their folder mappings
+   * @throws Error if request fails
+   */
+  async function getModelTypes(): Promise<ModelFolder[]> {
+    const res = await api.fetchApi('/experiment/models')
+
+    if (!res.ok) {
+      throw new Error(
+        `Failed to fetch model types: Server returned ${res.status}`
+      )
+    }
+
+    return await res.json()
+  }
+
   return {
     getAssetModelFolders,
     getAssetModels,
@@ -256,7 +341,10 @@ function createAssetService() {
     getAssetsForNodeType,
     getAssetDetails,
     getAssetsByTag,
-    deleteAsset
+    deleteAsset,
+    getAssetMetadata,
+    uploadAssetFromUrl,
+    getModelTypes
   }
 }