"use client"; import { useState } from "react"; import Head from "next/head"; import styles from "./page.module.css"; const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); export default function Home() { const [prediction, setPrediction] = useState(null); const [error, setError] = useState(null); const handleSubmit = async (e) => { e.preventDefault(); const response = await fetch("/api/predictions", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ image: e.target.imgUrl.value, prompt: e.target.prompt.value, }), }); let prediction = await response.json(); if (response.status !== 201) { setError(prediction.detail); return; } setPrediction(prediction); while ( prediction.status !== "succeeded" && prediction.status !== "failed" ) { await sleep(1000); const response = await fetch("/api/predictions/" + prediction.id); prediction = await response.json(); if (response.status !== 200) { setError(prediction.detail); return; } setPrediction(prediction); } }; return (
Replicate + Next.js

Large Vision Language model - {" "} QWEN-VL-CHAT:

{error &&
{error}
} {prediction && (

Output: {prediction.output}

Status: {prediction.status}

)}
); }