Stream text with image prompt errors

[HuyThanh-09]

"use client";

export const maxDuration = 30;

function MyDropzone () {
const { messages, input, setInput, append, handleSubmit, handleInputChange} = useChat();

const [url, setUrl] = useState<string | null>(null); // Store file URLs and metadata

const onDrop = useCallback((acceptedFiles: File[]) => {
if (acceptedFiles.length > 0) {
const fileUrl = URL.createObjectURL(acceptedFiles[0]);
setUrl(fileUrl); // Update state
}
}, []);

const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
accept: {'image/*': []}, // Accept image files only
multiple: false, // Only one file at a time
});

return (
<>

    <input {...getInputProps()} />
    {isDragActive ? (
      <p>Drop the files here ...</p>
    ) : (
      <p>Drag and drop some files here, or click to select files</p>
    )}
  </div>

     {url && (
      <>
        {messages.map(m => (
          <div key={m.id}>
            {m.role === 'user' ? 'User: ' : 'AI: '}
            {m.content}
          </div>
        ))}

        <div>
          <p>Image Uploaded. Click the button to analyze:</p>
        </div>

        <div className="grid w-full gap-2">
          <form onSubmit={e => {
            handleSubmit(e, {
              data: { imageUrl: url },
            });
          }}>
            <input
              value={input}
              placeholder="What does the image show..."
              onChange={handleInputChange}
            />
          </form>
        </div>
      </>
    )}
  </div>
</>

);
};

export default MyDropzone;

const openai = createOpenAI({
apiKey: process.env.OPENAI_API_KEY,
compatibility: 'strict', // strict mode, enable when using the OpenAI API
});

export const maxDuration = 60;

export async function POST(req: Request) {
const { messages, data } = await req.json();

const initialMessages = messages.slice(0, -1);
const currentMessage = messages[messages.length - 1];

let userMessage: CoreMessage;
console.log("Image URL is being sent", data.imageUrl);

if (req.method === 'POST') {
try {
const result = streamText({
model: openai('gpt-4o-mini'),
messages: [
...initialMessages,
{
role: 'user',
content: [
{ type: 'text', text: currentMessage.content },
{ type: 'image', image: new URL(data.imageUrl) },
],
},
],
});
console.log(result.toDataStreamResponse());
return NextResponse.json(result.toDataStreamResponse());
} catch (error) {
console.error('Error calling OpenAI API:', error);
return NextResponse.json({ error: 'Error communicating with OpenAI' });
}
} else {
return NextResponse.json({ error: 'Method Not Allowed' });
}
}
Hi everyone, I need help with stream text from image, the user message is sent, but no responses, this is what console.log(result.toDataStreamResponse()) return
Response {
status: 200,
statusText: '',
headers: Headers {
'Content-Type': 'text/plain; charset=utf-8',
'X-Vercel-AI-Data-Stream': 'v1'
},
body: ReadableStream { locked: false, state: 'readable', supportsBYOB: false },
bodyUsed: false,
ok: true,
redirected: false,
type: 'default',
url: ''
} other than that nothing is return from provider