src/routes/+page.svelte

<script lang="ts">
	import { goto } from '$app/navigation';
	import { checkDduf } from '$lib/check-dduf';

	let url = '';
	let output = '';

	async function handleSubmit(event: Event) {
		event.preventDefault();
		output = 'Checking...';

		for await (const str of checkDduf(url)) {
			output += '\n' + str;
		}
	}
</script>

<div class="flex flex-col gap-4 p-4">
	<h1 class="text-xl font-bold">DDUF Check</h1>

	<form class="flex flex-col gap-4" onsubmit={handleSubmit}>
		<label class="flex flex-col gap-2">
			DDUF URL (resolved url)
			<input
				type="url"
				name="url"
				placeholder="https://huggingface.co/name/repo/main/resolve/file.dduf"
				bind:value={url}
				class="w-full rounded-md border border-gray-300 p-2"
			/>
		</label>

		<button type="submit" class="self-start rounded-md bg-blue-500 p-2 text-white">Check</button>

		<textarea class="w-full rounded-md border border-gray-300 p-2" rows="10" readonly
			>{output}</textarea
		>
	</form>
</div>