mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-23 16:24:06 +00:00
e9c47e80b9
Backport of #7746 to `cloud/1.36` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7887-backport-cloud-1-36-feat-Add-async-model-upload-with-WebSocket-progress-tracking-2e26d73d365081c4a060e6e88f33016d) by [Unito](https://www.unito.io) Co-authored-by: Luke Mino-Altherr <luke@comfy.org> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: GitHub Action <action@github.com>
103 lines
3.1 KiB
Vue
103 lines
3.1 KiB
Vue
<template>
|
|
<div class="flex flex-col justify-between h-full gap-6 text-sm">
|
|
<div class="flex flex-col gap-6">
|
|
<div class="flex flex-col gap-2">
|
|
<p class="m-0 text-foreground">
|
|
{{ $t('assetBrowser.uploadModelDescription1Generic') }}
|
|
</p>
|
|
<div class="m-0">
|
|
<p class="m-0 text-muted-foreground">
|
|
{{ $t('assetBrowser.uploadModelDescription2Generic') }}
|
|
</p>
|
|
<span class="inline-flex items-center gap-1 flex-wrap mt-2">
|
|
<span class="inline-flex items-center gap-1">
|
|
<img
|
|
:src="civitaiIcon"
|
|
:alt="$t('assetBrowser.providerCivitai')"
|
|
class="w-4 h-4"
|
|
/>
|
|
<a
|
|
:href="civitaiUrl"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-muted underline"
|
|
>
|
|
{{ $t('assetBrowser.providerCivitai') }}</a
|
|
><span>,</span>
|
|
</span>
|
|
<span class="inline-flex items-center gap-1">
|
|
<img
|
|
:src="huggingFaceIcon"
|
|
:alt="$t('assetBrowser.providerHuggingFace')"
|
|
class="w-4 h-4"
|
|
/>
|
|
<a
|
|
:href="huggingFaceUrl"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-muted underline"
|
|
>
|
|
{{ $t('assetBrowser.providerHuggingFace') }}
|
|
</a>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<InputText
|
|
v-model="url"
|
|
autofocus
|
|
:placeholder="$t('assetBrowser.genericLinkPlaceholder')"
|
|
class="w-full bg-secondary-background border-0 p-4"
|
|
data-attr="upload-model-step1-url-input"
|
|
/>
|
|
<p v-if="error" class="text-xs text-error">
|
|
{{ error }}
|
|
</p>
|
|
<p v-else-if="!flags.asyncModelUploadEnabled" class="text-foreground">
|
|
<i18n-t keypath="assetBrowser.maxFileSize" tag="span">
|
|
<template #size>
|
|
<span class="font-bold italic">{{
|
|
$t('assetBrowser.maxFileSizeValue')
|
|
}}</span>
|
|
</template>
|
|
</i18n-t>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-sm text-muted">
|
|
{{ $t('assetBrowser.uploadModelHelpFooterText') }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import InputText from 'primevue/inputtext'
|
|
import { computed } from 'vue'
|
|
|
|
import { useFeatureFlags } from '@/composables/useFeatureFlags'
|
|
|
|
const { flags } = useFeatureFlags()
|
|
|
|
const props = defineProps<{
|
|
modelValue: string
|
|
error?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string]
|
|
}>()
|
|
|
|
const url = computed({
|
|
get: () => props.modelValue,
|
|
set: (value: string) => emit('update:modelValue', value)
|
|
})
|
|
|
|
const civitaiIcon = '/assets/images/civitai.svg'
|
|
const civitaiUrl = 'https://civitai.com/models'
|
|
const huggingFaceIcon = '/assets/images/hf-logo.svg'
|
|
const huggingFaceUrl = 'https://huggingface.co'
|
|
</script>
|