src/routes/+page.svelte

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

	let url = 'https://huggingface.co./spaces/coyotte508/dduf-check/resolve/main/file.dduf';
	let output = '';
	let error = '';

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

		try {
			for await (const str of checkDduf(url)) {
				output += '\n' + str;
			}
		} catch (e) {
			console.error(e);
			error = (e as Error).message;
		}
	}
</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
		>

		{#if error}
			<p class="text-red-500">{error}</p>
		{/if}
	</form>
</div>