We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hello, thank you for the package, i am trying to implement the color example into a next JS app, but i don't understand how to,
here is my api/colors :
import { z } from "zod"; import { Configuration, OpenAIApi } from 'openai-edge'; import { OpenAIStream, StreamingTextResponse } from 'ai'; import { OpenAiHandler, StreamMode, Entity } from "openai-partial-stream"; // Set the runtime to edge for best performance export const runtime = 'edge'; const config = new Configuration({ apiKey: process.env.OPENAI_API_KEY, }); const openai = new OpenAIApi(config); async function callGenerateColors( mode = StreamMode.StreamObjectKeyValueTokens, ) { // Call OpenAI API, with function calling // Function calling: https://openai.com/blog/function-calling-and-other-api-updates const stream = await openai.createChatCompletion({ messages: [ { role: "user", content: "Give me a palette of 2 gorgeous color with the hex code, name and a description.", }, ], model: "gpt-3.5-turbo", // OR "gpt-4" stream: true, // ENABLE STREAMING temperature: 1.3, functions: [ { name: "give_colors", description: "Give a list of color", parameters: { type: "object", properties: { colors: { type: "array", items: { type: "object", properties: { hex: { type: "string", description: "The hexadecimal code of the color", }, name: { type: "string", description: "The color name", }, description: { type: "string", description: "The description of the color", }, }, }, }, }, }, }, ], function_call: { name: "give_colors" }, }); // Handle the stream from OpenAI client const openAiHandler = new OpenAiHandler(mode); // Parse the stream to valid JSON const entityStream = openAiHandler.process(stream); return entityStream; } export async function POST( req: Request ) { // Instantiate OpenAI client // // Select the mode of the stream parser const mode = StreamMode.StreamObject; // ONE-BY-ONE // const colorEntityStream = await callGenerateColors(mode); return callGenerateColors(mode); }
and my page:
import React, { useState, useEffect } from 'react'; import { useCompletion } from 'ai/react'; interface Color { hex: string; name: string; description: string; } const IndexPage = () => { const [colors, setColors] = useState<Color[]>([]); const [loading, setLoading] = useState<boolean>(true); const { completion, input, stop, isLoading, handleInputChange, handleSubmit, } = useCompletion({ api: '/api/colors', }); if (isLoading) return <p>Loading...</p>; return ( <div> <h1>Generated Colors</h1> {completion} <ul> {colors.map((color, index) => ( <li key={index}> <strong>{color.name}</strong> ({color.hex}): {color.description} </li> ))} </ul> </div> ); }; export default IndexPage;
do you have any idea about how i could integrate your package into nextJS 13? thank you!
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Hello, thank you for the package, i am trying to implement the color example into a next JS app, but i don't understand how to,
here is my api/colors :
and my page:
do you have any idea about how i could integrate your package into nextJS 13? thank you!
The text was updated successfully, but these errors were encountered: