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>
