Skip to content

Commit e633204

Browse files
DrJKLDrJKL
authored
BYOM: Model Import Wizard (#6949)
## Summary Design alignment for the model import wizard. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6949-BYOM-Model-Import-Wizard-2b76d73d365081a48632c40430e05c93) by [Unito](https://www.unito.io)
1 parent 5fa76e2 commit e633204

File tree

13 files changed

+92
-69
lines changed

13 files changed

+92
-69
lines changed

‎public/assets/images/civitai.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/components/input/SingleSelect.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ const {
152152
popoverMaxWidth?: string
153153
}>()
154154
155-
const selectedItem = defineModel<string | null>({ required: true })
155+
const selectedItem = defineModel<string | undefined>({ required: true })
156156
157157
const { t } = useI18n()
158158

‎src/locales/en/main.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2092,11 +2092,11 @@
20922092
"uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.",
20932093
"onlyCivitaiUrlsSupported": "Only Civitai URLs are supported",
20942094
"uploadModelDescription1": "Paste a Civitai model download link to add it to your library.",
2095-
"uploadModelDescription2": "Only links from https://civitai.com are supported at the moment",
2096-
"uploadModelDescription3": "Max file size: 1 GB",
2097-
"civitaiLinkLabel": "Civitai model download link",
2095+
"uploadModelDescription2": "Only links from <a href=\"https://civitai.com\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com</a> are supported at the moment",
2096+
"uploadModelDescription3": "Max file size: <strong>1 GB</strong>",
2097+
"civitaiLinkLabel": "Civitai model <span class=\"font-bold italic\">download</span> link",
20982098
"civitaiLinkPlaceholder": "Paste link here",
2099-
"civitaiLinkExample": "Example: https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor",
2099+
"civitaiLinkExample": "<strong>Example:</strong> <a href=\"https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor</a>",
21002100
"confirmModelDetails": "Confirm Model Details",
21012101
"fileName": "File Name",
21022102
"fileSize": "File Size",

‎src/platform/assets/components/AssetBrowserModal.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,12 @@ function handleUploadClick() {
201201
onUploadSuccess: async () => {
202202
await execute()
203203
}
204+
},
205+
dialogComponentProps: {
206+
pt: {
207+
header: 'py-0! pl-0!',
208+
content: 'p-0!'
209+
}
204210
}
205211
})
206212
}

‎src/platform/assets/components/UploadModelConfirmation.vue‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
<template>
2-
<div class="flex flex-col gap-4">
2+
<div class="flex flex-col gap-4 text-sm text-muted-foreground">
33
<!-- Model Info Section -->
44
<div class="flex flex-col gap-2">
5-
<p class="text-sm text-muted m-0">
5+
<p class="m-0">
66
{{ $t('assetBrowser.modelAssociatedWithLink') }}
77
</p>
8-
<p class="text-sm mt-0">
8+
<p
9+
class="mt-0 bg-modal-card-background text-base-foreground p-3 rounded-lg"
10+
>
911
{{ metadata?.name || metadata?.filename }}
1012
</p>
1113
</div>
1214

1315
<!-- Model Type Selection -->
1416
<div class="flex flex-col gap-2">
15-
<label class="text-sm text-muted">
17+
<label class="">
1618
{{ $t('assetBrowser.modelTypeSelectorLabel') }}
1719
</label>
1820
<SingleSelect
19-
v-model="selectedModelType"
21+
v-model="modelValue"
2022
:label="
2123
isLoading
2224
? $t('g.loading')
@@ -25,34 +27,24 @@
2527
:options="modelTypes"
2628
:disabled="isLoading"
2729
/>
28-
<div class="flex items-center gap-2 text-sm text-muted">
29-
<i class="icon-[lucide--info]" />
30+
<div class="flex items-center gap-2">
31+
<i class="icon-[lucide--circle-question-mark]" />
3032
<span>{{ $t('assetBrowser.notSureLeaveAsIs') }}</span>
3133
</div>
3234
</div>
3335
</div>
3436
</template>
3537

3638
<script setup lang="ts">
37-
import { computed } from 'vue'
38-
3939
import SingleSelect from '@/components/input/SingleSelect.vue'
4040
import { useModelTypes } from '@/platform/assets/composables/useModelTypes'
4141
import type { AssetMetadata } from '@/platform/assets/schemas/assetSchema'
4242
43-
const props = defineProps<{
44-
modelValue: string | undefined
43+
defineProps<{
4544
metadata: AssetMetadata | null
4645
}>()
4746
48-
const emit = defineEmits<{
49-
'update:modelValue': [value: string | undefined]
50-
}>()
47+
const modelValue = defineModel<string | undefined>()
5148
5249
const { modelTypes, isLoading } = useModelTypes()
53-
54-
const selectedModelType = computed({
55-
get: () => props.modelValue ?? null,
56-
set: (value: string | null) => emit('update:modelValue', value ?? undefined)
57-
})
5850
</script>

‎src/platform/assets/components/UploadModelDialog.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<template>
2-
<div class="upload-model-dialog flex flex-col justify-between gap-6 p-4 pt-6">
2+
<div
3+
class="upload-model-dialog flex flex-col justify-between gap-6 p-4 pt-6 border-t-[1px] border-border-default"
4+
>
35
<!-- Step 1: Enter URL -->
46
<UploadModelUrlInput
57
v-if="currentStep === 1"

‎src/platform/assets/components/UploadModelDialogHeader.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<template>
2-
<div class="flex items-center gap-3 px-4 py-2 font-bold">
2+
<div class="flex items-center gap-2 p-4 font-bold">
3+
<img src="/assets/images/civitai.svg" class="size-4" />
34
<span>{{ $t('assetBrowser.uploadModelFromCivitai') }}</span>
45
<span
5-
class="rounded-full bg-white px-1.5 py-0 text-xxs font-medium uppercase text-black"
6+
class="rounded-full bg-white px-1.5 py-0 text-xxs font-inter font-semibold uppercase text-black"
67
>
78
{{ $t('g.beta') }}
89
</span>
910
</div>
1011
</template>
11-
12-
<script setup lang="ts"></script>

‎src/platform/assets/components/UploadModelFooter.vue‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
11
<template>
2-
<div class="flex justify-end gap-2">
2+
<div class="flex justify-end gap-2 w-full">
3+
<span
4+
v-if="currentStep === 1"
5+
class="text-muted-foreground mr-auto underline flex items-center gap-2"
6+
>
7+
<i class="icon-[lucide--circle-question-mark]" />
8+
<a href="#" target="_blank" class="text-muted-foreground">{{
9+
$t('How do I find this?')
10+
}}</a>
11+
</span>
12+
<TextButton
13+
v-if="currentStep === 1"
14+
:label="$t('g.cancel')"
15+
type="transparent"
16+
size="md"
17+
:disabled="isFetchingMetadata || isUploading"
18+
@click="emit('close')"
19+
/>
320
<TextButton
421
v-if="currentStep !== 1 && currentStep !== 3"
522
:label="$t('g.back')"
6-
type="secondary"
23+
type="transparent"
724
size="md"
825
:disabled="isFetchingMetadata || isUploading"
926
@click="emit('back')"
@@ -13,7 +30,7 @@
1330
<IconTextButton
1431
v-if="currentStep === 1"
1532
:label="$t('g.continue')"
16-
type="primary"
33+
type="secondary"
1734
size="md"
1835
:disabled="!canFetchMetadata || isFetchingMetadata"
1936
@click="emit('fetchMetadata')"
@@ -28,7 +45,7 @@
2845
<IconTextButton
2946
v-else-if="currentStep === 2"
3047
:label="$t('assetBrowser.upload')"
31-
type="primary"
48+
type="secondary"
3249
size="md"
3350
:disabled="!canUploadModel || isUploading"
3451
@click="emit('upload')"
@@ -43,7 +60,7 @@
4360
<TextButton
4461
v-else-if="currentStep === 3 && uploadStatus === 'success'"
4562
:label="$t('assetBrowser.finish')"
46-
type="primary"
63+
type="secondary"
4764
size="md"
4865
@click="emit('close')"
4966
/>

‎src/platform/assets/components/UploadModelProgress.vue‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,38 @@
11
<template>
2-
<div class="flex flex-1 flex-col gap-6">
2+
<div class="flex flex-1 flex-col gap-6 text-sm text-muted-foreground">
33
<!-- Uploading State -->
44
<div
55
v-if="status === 'uploading'"
6-
class="flex flex-1 flex-col items-center justify-center gap-6"
6+
class="flex flex-1 flex-col items-center justify-center gap-2"
77
>
88
<i
9-
class="icon-[lucide--loader-circle] animate-spin text-6xl text-primary"
9+
class="icon-[lucide--loader-circle] animate-spin text-6xl text-muted-foreground"
1010
/>
1111
<div class="text-center">
12-
<p class="m-0 text-sm font-bold">
12+
<p class="m-0 font-bold">
1313
{{ $t('assetBrowser.uploadingModel') }}
1414
</p>
1515
</div>
1616
</div>
1717

1818
<!-- Success State -->
19-
<div v-else-if="status === 'success'" class="flex flex-col gap-8">
20-
<div class="flex flex-col gap-4">
21-
<p class="text-sm text-muted m-0 font-bold">
22-
{{ $t('assetBrowser.modelUploaded') }}
23-
</p>
24-
<p class="text-sm text-muted m-0">
25-
{{ $t('assetBrowser.findInLibrary', { type: modelType }) }}
26-
</p>
27-
</div>
19+
<div v-else-if="status === 'success'" class="flex flex-col gap-2">
20+
<p class="m-0 font-bold">
21+
{{ $t('assetBrowser.modelUploaded') }}
22+
</p>
23+
<p class="m-0">
24+
{{ $t('assetBrowser.findInLibrary', { type: modelType }) }}
25+
</p>
2826

29-
<div class="flex flex-row items-start p-8 bg-neutral-800 rounded-lg">
27+
<div
28+
class="flex flex-row items-start p-4 bg-modal-card-background rounded-lg"
29+
>
3030
<div class="flex flex-col justify-center items-start gap-1 flex-1">
31-
<p class="text-sm m-0">
31+
<p class="text-base-foreground m-0">
3232
{{ metadata?.name || metadata?.filename }}
3333
</p>
3434
<p class="text-sm text-muted m-0">
35+
<!-- Going to want to add another translation here to get a nice display name. -->
3536
{{ modelType }}
3637
</p>
3738
</div>

‎src/platform/assets/components/UploadModelUrlInput.vue‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,27 @@
11
<template>
2-
<div class="flex flex-col gap-4">
2+
<div class="flex flex-col gap-6 text-sm text-muted-foreground">
33
<div class="flex flex-col gap-2">
4-
<p class="text-sm text-muted m-0">
4+
<p class="m-0">
55
{{ $t('assetBrowser.uploadModelDescription1') }}
66
</p>
7-
<ul class="list-disc space-y-1 pl-5 mt-0 text-sm text-muted">
8-
<li>{{ $t('assetBrowser.uploadModelDescription2') }}</li>
9-
<li>{{ $t('assetBrowser.uploadModelDescription3') }}</li>
7+
<ul class="list-disc space-y-1 pl-5 mt-0">
8+
<li v-html="$t('assetBrowser.uploadModelDescription2')" />
9+
<li v-html="$t('assetBrowser.uploadModelDescription3')" />
1010
</ul>
1111
</div>
1212

1313
<div class="flex flex-col gap-2">
14-
<label class="text-sm text-muted mb-0">
15-
{{ $t('assetBrowser.civitaiLinkLabel') }}
16-
</label>
14+
<label class="mb-0" v-html="$t('assetBrowser.civitaiLinkLabel')"> </label>
1715
<InputText
1816
v-model="url"
17+
autofocus
1918
:placeholder="$t('assetBrowser.civitaiLinkPlaceholder')"
20-
class="w-full"
19+
class="w-full bg-secondary-background border-0 p-4"
2120
/>
2221
<p v-if="error" class="text-xs text-error">
2322
{{ error }}
2423
</p>
25-
<p v-else class="text-xs text-muted">
26-
{{ $t('assetBrowser.civitaiLinkExample') }}
27-
</p>
24+
<p v-else v-html="$t('assetBrowser.civitaiLinkExample')"></p>
2825
</div>
2926
</div>
3027
</template>

0 commit comments

Comments
 (0)