feat(variant): image preview on variant creation with a real sample image

web/src/components/variants/VariantPreview.vue

@@ -4,7 +4,13 @@ import { t } from '@/i18n'
 import { computed, ref } from 'vue'
 import ImageCompare from '@/components/variants/ImageCompare.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import { SAMPLE_SOURCE, estimateLabel, estimateVariant } from '@/lib/variants/variantEstimate'
+import { useVariantRender } from '@/composables/useVariantRender'
+import {
+	SAMPLE_SOURCE,
+	estimateLabel,
+	estimateVariant,
+	type EstimateRequest,
+} from '@/lib/variants/variantEstimate'
 import { parseDimension, sliderValue, type VariantFormValues } from '@/lib/variants/variantForm'
 import { formatVariantSize } from '@/lib/variants/variantFormat'
 
@@ -25,22 +31,31 @@ const dimensionsAreValid = computed(
 		(props.values.height.trim() === '' || parseDimension(props.values.height) !== null),
 )
 
-const estimate = computed(() =>
+const request = computed<EstimateRequest | null>(() =>
 	dimensionsAreValid.value
-		? estimateVariant({
+		? {
 				width: parseDimension(props.values.width),
 				height: parseDimension(props.values.height),
 				fit: props.values.fit,
 				format: props.values.format,
 				quality: sliderValue(props.values.quality),
-			})
+			}
 		: null,
 )
 
+const estimate = computed(() => (request.value ? estimateVariant(request.value) : null))
+const { original, variant } = useVariantRender(request)
+
 const shownName = computed(() => props.values.name || t('name'))
-const outputLine = computed(() =>
-	estimate.value ? estimateLabel(estimate.value) : t('No output yet'),
-)
+const outputLine = computed(() => {
+	if (!estimate.value) {
+		return t('No output yet')
+	}
+	const bytes = variant.value
+		? Math.min(SAMPLE_SOURCE.bytes, variant.value.bytes)
+		: estimate.value.bytes
+	return estimateLabel({ size: estimate.value.size, bytes })
+})
 const originalLine = computed(
 	() =>
 		`${SAMPLE_SOURCE.width} × ${SAMPLE_SOURCE.height} · ${formatVariantSize(SAMPLE_SOURCE.bytes)}`,
@@ -67,7 +82,13 @@ async function onCopy() {
 				t('Sample: {0}', [SAMPLE_SOURCE.filename])
 			}}</span>
 		</div>
-		<ImageCompare v-model="position" :name="values.name" :comparable="estimate !== null" />
+		<ImageCompare
+			v-model="position"
+			:name="values.name"
+			:comparable="estimate !== null"
+			:original-src="original"
+			:variant-src="variant?.url ?? null"
+		/>
 		<div class="grid grid-cols-2 gap-3">
 			<div class="flex flex-col">
 				<span class="font-medium text-highlighted">{{ t('Original') }}</span>