Kwai-Kolors/Kolors-Virtual-Try-On

Hello,

I am trying to access the api of the specific model ‘Kwai-Kolors/Kolors-Virtual-Try-On’ in our website demo. But there is no output generating with the code i created. When I clicked on Inspect, it shows an error like: {“detail”:“Method Not Allowed”} at this line in the code: const result = await client.predict(‘/tryon’, { (wrote in bold letters in the code)

Could you please help me why I get this error?

<script>
	import { page } from '$app/stores';
	import { onMount } from 'svelte';
	import axios from 'axios';
	import { Client } from '@gradio/client';

	let imageSrc = '';
	let showModal = false; // Controls the visibility of the webcam modal
	let webcamImage = null;
	let uploadedImage = null; // Holds the uploaded image
	let selectedImage = null; // Holds the chosen image (webcam or uploaded)
	let videoElement = null; // Reference to the video element
	let stream = null; // Media stream object
	let countdown = 5; // Countdown timer
	let countdownInterval = null; // Reference to the countdown interval
	let isWebcamActive = false; // Determines if webcam is active
	let isUploadActive = false; // Determines if upload is active
	let responseImageUrl = ''; // Holds the URL of the response image

	onMount(() => {
		if ($page.url.searchParams.has('imageSrc')) {
			// @ts-ignore
			imageSrc = decodeURIComponent($page.url.searchParams.get('imageSrc'));
		}
	});

	// Function to open the webcam modal
	function openWebcamModal() {
		showModal = true;
		startWebcam();
	}

	// Function to start the webcam and countdown timer
	async function startWebcam() {
		stream = await navigator.mediaDevices.getUserMedia({ video: true });
		videoElement.srcObject = stream;
		await videoElement.play();
		startCountdown();
	}

	// Function to start the countdown timer
	function startCountdown() {
		countdown = 5;
		countdownInterval = setInterval(() => {
			countdown -= 1;
			if (countdown === 0) {
				clearInterval(countdownInterval);
				captureImage();
			}
		}, 1000);
	}

	// Function to capture an image from the webcam
	function captureImage() {
		const canvas = document.createElement('canvas');
		canvas.width = videoElement.videoWidth;
		canvas.height = videoElement.videoHeight;
		const context = canvas.getContext('2d');
		// @ts-ignore
		context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
		webcamImage = canvas.toDataURL('image/png');
		stopWebcam();
		showModal = false;
		isWebcamActive = true;
		isUploadActive = false;
	}

	// Function to stop the webcam stream
	function stopWebcam() {
		if (stream) {
			stream.getTracks().forEach((track) => track.stop());
			stream = null;
		}
	}

	// Function to retake the webcam image
	function retakeImage() {
		webcamImage = null;
		openWebcamModal();
	}

	// Function to handle image upload
	function handleUpload(event) {
		const file = event.target.files[0];
		if (file) {
			const reader = new FileReader();
			reader.onload = () => {
				uploadedImage = reader.result;
				isUploadActive = true;
				isWebcamActive = false;
			};
			reader.readAsDataURL(file);
		}
	}

	// Function to choose the image (webcam or uploaded)
	function chooseImage(image) {
		selectedImage = image;
	}

	// Function to convert an image URL or base64 string to base64
	async function dataURLToBinary(dataURL) {
		const response = await fetch(dataURL);
		const buffer = await response.arrayBuffer();
		return new Blob([buffer], { type: 'image/jpeg' });
	}

	// Updated submitImage function
	async function submitImage() {
		if (selectedImage && (webcamImage || uploadedImage)) {
			try {
				// Convert images to binary Blobs
				const personBlob = await dataURLToBinary(selectedImage);
				const clothBlob = await dataURLToBinary(webcamImage || uploadedImage);

				// Mocking client connection and API call structure
				const client = await Client.connect('Kwai-Kolors/Kolors-Virtual-Try-On');
				**const result = await client.predict('/tryon', {**
					person_img: personBlob,
					garment_img: clothBlob,
					seed: 0,
					randomize_seed: true
				});

				if (result.data) {
					console.log('API Response:', result.data[0].url);
					responseImageUrl = result.data[0].url; // Display the result image
					console.log('API Response:', responseImageUrl);
				} else {
					console.error('Unexpected API response format:', result);
				}
			} catch (error) {
				console.error('Error:', error);
			}
		} else {
			alert('Please choose an image to submit.');
		}
	}
</script>

<!-- Main Page Layout -->
<div class="flex min-h-screen flex-col items-center justify-center space-y-6 bg-gray-100 p-4">
	{#if imageSrc}
		<!-- svelte-ignore a11y_img_redundant_alt -->
		<img
			src={imageSrc}
			alt="Passed Image"
			class="mx-auto w-3/4 max-w-lg rounded-lg object-contain shadow-lg"
		/>
	{/if}

	<!-- Display Image Section -->
	{#if responseImageUrl}
		<!-- svelte-ignore a11y_img_redundant_alt -->
		<img
			src={responseImageUrl}
			alt="Response Image"
			class="mx-auto w-3/4 max-w-sm rounded-lg object-contain shadow-lg"
		/>
	{:else if webcamImage || uploadedImage}
		<!-- svelte-ignore a11y_img_redundant_alt -->
		<img
			src={selectedImage || webcamImage || uploadedImage}
			alt="Selected Image"
			class="mx-auto w-3/4 max-w-sm rounded-lg object-contain shadow-lg"
		/>
	{/if}

	<!-- Flexbox for Webcam and Upload Buttons -->
	<div class="mt-4 flex space-x-4">
		<!-- Button to open the webcam modal -->
		{#if !isWebcamActive && !isUploadActive}
			<button
				class="rounded-lg bg-blue-500 px-4 py-2 text-white shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400"
				on:click={openWebcamModal}
			>
				Capture from Webcam
			</button>
		{/if}

		<!-- File input for uploading an image -->
		{#if !isUploadActive && !isWebcamActive}
			<div class="flex items-center space-x-2">
				<label
					for="upload"
					class="cursor-pointer rounded-lg bg-green-500 px-4 py-2 text-white shadow-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400"
				>
					Upload Image
				</label>
				<input id="upload" type="file" accept="image/*" class="hidden" on:change={handleUpload} />
			</div>
		{/if}
	</div>

	<!-- Choose Button -->
	{#if (webcamImage || uploadedImage) && (isWebcamActive || isUploadActive)}
		<button
			class="mt-4 rounded-lg bg-yellow-500 px-4 py-2 text-white shadow-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400"
			on:click={() => chooseImage(webcamImage || uploadedImage)}
		>
			Choose This Image
		</button>
	{/if}

	<!-- Submit Button -->
	{#if selectedImage}
		<button
			class="mt-4 rounded-lg bg-purple-500 px-4 py-2 text-white shadow-md hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400"
			on:click={submitImage}
		>
			Submit Chosen Image
		</button>
	{/if}

	<!-- Modal for webcam capture -->
	{#if showModal}
		<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
			<div class="flex flex-col items-center space-y-4 rounded-lg bg-white p-6">
				<!-- svelte-ignore a11y_media_has_caption -->
				<video bind:this={videoElement} class="rounded-lg shadow-md" autoplay playsinline></video>

				<span class="text-lg font-bold text-red-500">{countdown}</span>

				<!-- Retake Button in Modal -->
				<button
					class="mt-4 rounded-lg bg-gray-500 px-4 py-2 text-white shadow-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400"
					on:click={retakeImage}
				>
					Retake
				</button>
			</div>
		</div>
	{/if}
</div>

<style>
</style>