使用 Vercel AI SDK 实现多个并行 AI 流

export function generationform() {    // state and other info will be defined here...        return (        

export async function streamanswer(question: string) {    // booleans for indicating whether each stream is currently streaming  const isgeneratingstream1 = createstreamablevalue(true);  const isgeneratingstream2 = createstreamablevalue(true);  // the current stream values  const weatherstream = createstreamablevalue("");  const newsstream = createstreamablevalue("");    // create the first stream. notice that we don't use await here, so that we    //  don't block the rest of this function from running.    streamtext({        // ... params, including the llm prompt  }).then(async (result) => {          // read from the async iterator. set the stream value to each new word          //  received.      for await (const value of result.textstream) {        weatherstream.update(value || "");      }    } finally {        // set isgenerating to false, and close that stream.      isgeneratingstream1.update(false);      isgeneratingstream1.done();      // close the given stream so the request doesn't hang.      weatherstream.done();    }  });  // same thing for the second stream.    streamtext({        // ... params  }).then(async (result) => {      // ...  })  // return any streams we want to read on the client.  return {    isgeneratingstream1: isgeneratingstream1.value,    isgeneratingstream2: isgeneratingstream2.value,    weatherstream: weatherstream.value,    newsstream: newsstream.value,  };}

"use client";import { SyntheticEvent, useState } from "react";import { Button } from "./ui/button";import { readStreamableValue, useUIState } from "ai/rsc";import { streamAnswer } from "@/app/actions";import { Spinner } from "./svgs/Spinner";export function GenerationForm() {    // State for loading flags  const [isGeneratingStream1, setIsGeneratingStream1] = useState<boolean>(false);  const [isGeneratingStream2, setIsGeneratingStream2] = useState<boolean>(false);  // State for the LLM output streams  const [weather, setWeather] = useState<string>("");  const [news, setNews] = useState<string>("");  // We'll hide the loader when both streams are done.  const isGenerating = isGeneratingStream1 || isGeneratingStream2;  async function onSubmit(e: SyntheticEvent) {    e.preventDefault();    // Clear previous results.    setNews("");    setWeather("");        // Call the server action. The returned object will have all the streams in it.    const result = await streamAnswer(question);    // Translate each stream into an async iterator so we can loop through    //  the values as they are generated.    const isGeneratingStream1 = readStreamableValue(result.isGeneratingStream1);    const isGeneratingStream2 = readStreamableValue(result.isGeneratingStream2);    const weatherStream = readStreamableValue(result.weatherStream);    const newsStream = readStreamableValue(result.newsStream);        // Iterate through each stream, putting its values into state one by one.        //  Notice the IIFEs again! As on the server, these allow us to prevent blocking        //   the function, so that we can run these iterators in parallel.    (async () =&gt; {      for await (const value of isGeneratingStream1) {        if (value != null) {          setIsGeneratingStream1(value);        }      }    })();    (async () =&gt; {      for await (const value of isGeneratingStream2) {        if (value != null) {          setIsGeneratingStream2(value);        }      }    })();    (async () =&gt; {      for await (const value of weatherStream) {        setWeather((existing) =&gt; (existing + value) as string);      }    })();    (async () =&gt; {      for await (const value of newsStream) {        setNews((existing) =&gt; (existing + value) as string);      }    })();  }  return (    // ... The form code from before.  );}</string></string></boolean></boolean>