mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
c6f2ae3130
## Summary Addresses UI/UX feedback on the Upload Model Dialog (BYOM feature). ## Changes 1. **Standardize link styling** - Use consistent `text-muted-foreground underline` for all links in both URL input variants 2. **Increase warning/example text font size** - Changed from 12px (`text-xs`) to 14px (`text-sm`) for better readability 3. **Fix padding inconsistency** - Aligned padding between model name box and SingleSelect dropdown; moved "Not sure?" help text inline with the label 4. **Add "Upload Another" button** - Allows users to upload multiple models without closing and reopening the dialog ## Testing - Verified link styling consistency across both Civitai and generic URL input components - Confirmed padding alignment in confirmation step - Tested Upload Another button resets wizard to step 1 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7969-fix-upload-model-UI-UX-improvements-for-Upload-Model-Dialog-2e66d73d3650815c8184cedb3d02672d) by [Unito](https://www.unito.io)
128 lines
3.4 KiB
Vue
128 lines
3.4 KiB
Vue
<template>
|
|
<div
|
|
class="upload-model-dialog flex flex-col gap-6 border-t border-border-default p-4 pt-6"
|
|
>
|
|
<!-- Scrollable content area -->
|
|
<div class="min-h-0 flex-auto basis-0 overflow-y-auto">
|
|
<!-- Step 1: Enter URL -->
|
|
<UploadModelUrlInput
|
|
v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"
|
|
v-model="wizardData.url"
|
|
:error="uploadError"
|
|
/>
|
|
<UploadModelUrlInputCivitai
|
|
v-else-if="currentStep === 1"
|
|
v-model="wizardData.url"
|
|
:error="uploadError"
|
|
/>
|
|
|
|
<!-- Step 2: Confirm Metadata -->
|
|
<UploadModelConfirmation
|
|
v-else-if="currentStep === 2"
|
|
v-model="selectedModelType"
|
|
:metadata="wizardData.metadata"
|
|
:preview-image="wizardData.previewImage"
|
|
/>
|
|
|
|
<!-- Step 3: Upload Progress -->
|
|
<UploadModelProgress
|
|
v-else-if="currentStep === 3 && uploadStatus != null"
|
|
:result="uploadStatus"
|
|
:error="uploadError"
|
|
:metadata="wizardData.metadata"
|
|
:model-type="selectedModelType"
|
|
:preview-image="wizardData.previewImage"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Navigation Footer - always visible -->
|
|
<UploadModelFooter
|
|
class="flex-shrink-0"
|
|
:current-step="currentStep"
|
|
:is-fetching-metadata="isFetchingMetadata"
|
|
:is-uploading="isUploading"
|
|
:can-fetch-metadata="canFetchMetadata"
|
|
:can-upload-model="canUploadModel"
|
|
:upload-status="uploadStatus"
|
|
@back="goToPreviousStep"
|
|
@fetch-metadata="handleFetchMetadata"
|
|
@upload="handleUploadModel"
|
|
@close="handleClose"
|
|
@import-another="resetWizard"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
|
|
import { useFeatureFlags } from '@/composables/useFeatureFlags'
|
|
import UploadModelConfirmation from '@/platform/assets/components/UploadModelConfirmation.vue'
|
|
import UploadModelFooter from '@/platform/assets/components/UploadModelFooter.vue'
|
|
import UploadModelProgress from '@/platform/assets/components/UploadModelProgress.vue'
|
|
import UploadModelUrlInput from '@/platform/assets/components/UploadModelUrlInput.vue'
|
|
import UploadModelUrlInputCivitai from '@/platform/assets/components/UploadModelUrlInputCivitai.vue'
|
|
import { useModelTypes } from '@/platform/assets/composables/useModelTypes'
|
|
import { useUploadModelWizard } from '@/platform/assets/composables/useUploadModelWizard'
|
|
import { useDialogStore } from '@/stores/dialogStore'
|
|
|
|
const { flags } = useFeatureFlags()
|
|
const dialogStore = useDialogStore()
|
|
const { modelTypes, fetchModelTypes } = useModelTypes()
|
|
|
|
const emit = defineEmits<{
|
|
'upload-success': []
|
|
}>()
|
|
|
|
const {
|
|
currentStep,
|
|
isFetchingMetadata,
|
|
isUploading,
|
|
uploadStatus,
|
|
uploadError,
|
|
wizardData,
|
|
selectedModelType,
|
|
canFetchMetadata,
|
|
canUploadModel,
|
|
fetchMetadata,
|
|
uploadModel,
|
|
goToPreviousStep,
|
|
resetWizard
|
|
} = useUploadModelWizard(modelTypes)
|
|
|
|
async function handleFetchMetadata() {
|
|
await fetchMetadata()
|
|
}
|
|
|
|
async function handleUploadModel() {
|
|
const success = await uploadModel()
|
|
if (success) {
|
|
emit('upload-success')
|
|
}
|
|
}
|
|
|
|
function handleClose() {
|
|
dialogStore.closeDialog({ key: 'upload-model' })
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchModelTypes()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.upload-model-dialog {
|
|
width: 90vw;
|
|
max-width: 800px;
|
|
min-height: min(400px, 80vh);
|
|
max-height: 90vh;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.upload-model-dialog {
|
|
width: auto;
|
|
min-width: 600px;
|
|
}
|
|
}
|
|
</style>
|