st3w4r / openai-partial-stream Goto Github PK

 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);   
}

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;

./node_modules/typescript/lib/typescript.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/typescript/lib/typescript.js
./node_modules/zod-to-ts/dist/index.js
./node_modules/openai-partial-stream/dist/chunk-66SDEIDM.mjs
./node_modules/openai-partial-stream/dist/index.mjs
./src/app/api/completion/route.ts
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fcompletion%2Froute&page=%2Fapi%2Fcompletion%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fcompletion%2Froute.ts&appDir=%2FUsers%2Fakashdeepdeb%2FDesktop%2Ftopshelf%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fakashdeepdeb%2FDesktop%2Ftopshelf&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./src/app/api/completion/route.ts?__next_edge_ssr_entry__
<w> [webpack.cache.Pack

error: TypeError: Cannot read properties of undefined (reading 'delta')
      at OpenAiHandler.process (/proj/backend/openai-partial-stream/packages/openai-partial-stream/dist/index.js:205:32)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Entity.genParse (/proj/backend/openai-partial-stream/packages/openai-partial-stream/dist/index.js:270:22)
      at async /proj/backend/index.js:389:30

{ index: 0, status: 'COMPLETED', data: { name: 'Los Angeles', postcode: '90001', population: 3971883 }, entity: 'postcodes' }
{ index: 1, status: 'COMPLETED', data: { name: 'San Francisco', postcode: '94102', population: 883305 }, entity: 'postcodes' }
{ index: 2, status: 'COMPLETED', data: { name: 'San Diego', postcode: '92101', population: 1425976 }, entity: 'postcodes'}