langchain-ai / langchainjs

๐Ÿฆœ๐Ÿ”— Build context-aware reasoning applications ๐Ÿฆœ๐Ÿ”—
https://js.langchain.com/docs/
MIT License
12.31k stars 2.08k forks source link

Getting started code for chatModel throws error #3105

Closed gsans closed 6 months ago

gsans commented 10 months ago

Following the code here.

The output is:

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'message')
TypeError: Cannot read properties of undefined (reading 'message')
    at base.js:185:34

Looking at "base.js"

    /**
     * Makes a single call to the chat model.
     * @param messages An array of BaseMessage instances.
     * @param options The call options or an array of stop sequences.
     * @param callbacks The callbacks for the language model.
     * @returns A Promise that resolves to a BaseMessage.
     */
    async call(messages, options, callbacks) {
        const result = await this.generate([messages.map(coerceMessageLikeToMessage)], options, callbacks);
        const generations = result.generations;
        return generations[0][0].message;
    }

Not sure how to proceed as this is failing after adding the code from the docs.

Respone from Network looks good

{
  "id": "chatcmpl-8FkXETihLHC5MAjReDMqY7rNR2ddh",
  "object": "chat.completion",
  "created": 1698764492,
  "model": "gpt-4-0613",
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "Rainbow Steps Socks Co."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 22,
    "completion_tokens": 7,
    "total_tokens": 29
  }
}

package.json

    "langchain": "^0.0.150",

For reference original code:

import { Component } from '@angular/core';
import { environment } from '../environments/environment.development';
import { ChatOpenAI } from 'langchain/chat_models/openai';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'chatbot';

  async call() {
    const chatModel = new ChatOpenAI({
      modelName: "gpt-4",
      temperature: 0.9,
      openAIApiKey: environment.OPENAI_API_KEY,
    });
    const text = 'What would be a good company name for a company that makes colorful socks?';
    const chatModelResult = await chatModel.predict(text);
    console.log(chatModelResult);
  }
}
dosubot[bot] commented 10 months ago

๐Ÿค–

Hello @gsans,

I'm here to assist you with your issue. It seems like you're encountering a TypeError when trying to implement the getting started code for chatModel from the LangChainJS documentation.

The error you're seeing typically occurs when you're trying to access a property of an object that hasn't been defined. In your case, it seems like the 'message' property of the 'generations[0][0]' object is undefined.

Looking at your network response, it seems like the response structure is slightly different from what the call method in base.js expects. The call method tries to access the 'message' property of the first item in the 'generations' array. However, in your network response, the 'message' property is nested inside the 'choices' array, which is not being accessed in the call method.

Here's the relevant part of your network response:

"choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "Rainbow Steps Socks Co."
      },
      "finish_reason": "stop"
    }
]

And here's the relevant part of the call method:

const generations = result.generations;
return generations[0][0].message;

As you can see, the call method is trying to access 'message' directly from the first item in the 'generations' array, but in your network response, 'message' is nested inside the 'choices' array.

To fix this issue, you might need to adjust the call method to correctly access the 'message' property from the network response. Here's an example of how you could do this:

const generations = result.generations;
return generations[0][0].choices[0].message;

Please note that this is just a suggestion and might not work depending on the exact structure of your 'generations' array and the rest of your code. If you're still having trouble, please provide more context or details about the error.

I hope this helps! If you have any more questions, feel free to ask.

Best, Dosu

Sources


This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a ๐Ÿ‘ if this is helpful and ๐Ÿ‘Ž if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

gsans commented 10 months ago

You are completely right but "base.js" is part of LangChain codebase.

jacoblee93 commented 10 months ago

Hey @gsans, we made some updates to message formatting in more recent versions and the quickstart likely reflects that. Can you try upgrading to latest?

Please reopen if that doesn't fix it.

gsans commented 10 months ago

I am using the latest I believe. This is 0.0.179

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'message')
TypeError: Cannot read properties of undefined (reading 'message')
    at base.cjs:233:34
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:22:1)
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:11083:33)
    at _ZoneDelegate.invoke (zone.js:367:52)
    at Zone.run (zone.js:129:43)
    at zone.js:1257:36
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at resolvePromise (zone.js:1193:31)
    at zone.js:1100:17
    at zone.js:1116:33
    at asyncGeneratorStep (asyncToGenerator.js:6:1)
    at _throw (asyncToGenerator.js:25:1)
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:11083:33)
    at _ZoneDelegate.invoke (zone.js:367:52)
    at Zone.run (zone.js:129:43)
    at zone.js:1257:36

Response

{
  "id": "chatcmpl-8FlykYkpWUvDEY2jjKyJr1bd5KIUD",
  "object": "chat.completion",
  "created": 1698770042,
  "model": "gpt-4-0613",
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "1. \"Rainbow Threads\"\n2. \"Vibrant Steps\"\n3. \"Spectrum Socks\"\n4. \"Kaleidoscope Comforts\"\n5. \"BrightStride\"\n6. \"ColorPop Socks\"\n7. \"Sock Prism\"\n8. \"Technicolor Toes\"\n9. \"ColorWheel Socks\"\n10. \"Hue Crew\".\n11. \"DazzleSox\"\n12. \"Radiant Wraps\"\n13. \"ChromaFoot\"\n14. \"Colorful Cozies\"\n15. \"Rainbow Peds\"\n16. \"ColorSplash Socks\"\n17. \"VividFootwear\"\n18. \"Pulse of Colors\"\n19. \"PixelSocks\"\n20. \"Stellar Stripes\" \n21. \"ColorCraze Footwear\"\n22. \"Rainbow Rings Socks\"\n23. \"ColorFun Footies\"."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 22,
    "completion_tokens": 185,
    "total_tokens": 207
  }
}

I did notice that the error pops way before the response is back. Could it be a build setting that is messing up with async/await?

tsconfig

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}
gsans commented 10 months ago

Please reopen as it seems to be persistent for Angular apps

https://stackoverflow.com/questions/77075029/langchain-simple-llm-predict-in-angular-returns-empty-result#

jacoblee93 commented 10 months ago

Thanks, will try to repro today.

bracesproul commented 10 months ago

Hey @gsans could you provide the babel config you're using? I see in the issue you filed in Angular you mention A babel plugin that is used to wrap promises into generators could also be involved..

gsans commented 10 months ago

While looking at why there seems to be a Generator code involved. I found out that Angular CLI had a babel setting that could be involved.

This issue shows the code I saw https://github.com/angular/angular-cli/issues/25708

if (options.forceAsyncTransformation) { 
   // Always transform async/await to support Zone.js 
   plugins.push( 
     require('@babel/plugin-transform-async-to-generator').default, 
     require('@babel/plugin-proposal-async-generator-functions').default, 
   ); 
   needRuntimeTransform = true; 
 } 

This CLI option forceAsyncTransformation is not available now but somehow the error shows some traces of a similar mechanism.

The general idea is that Angular change detection (Zones) doesnโ€™t support native Async/await so some other mechanism is needed. My current understanding is that this is messing up with LangChain base codebase.

Since reporting this Iโ€™ve tried to run LangChain code outside Zones but Iโ€™m afraid the build is still messing with the code anyways.

gsans commented 10 months ago

Iโ€™ve also reported this issue to the Angular team to see if they can add some light into a possible workaround.

https://github.com/angular/angular-cli/issues/26204

gsans commented 10 months ago

Created a repo for easy reproduction. https://github.com/gsans/repro-app

Needs OpenAI API key. Instructions https://www.maisieai.com/help/how-to-get-an-openai-api-key-for-chatgpt

1) Run this Angular CLI command to create the local environment

ng g environments

2) Fill in OpenAI API key

// src/environments/environment.development.ts
export const environment = {
  OPENAI_API_KEY: "<<ADD-HERE>>"
};

3) Run locally at http://localhost:4200/

ng serve

4) Click on call button to reproduce error in the console

5) Console

core.mjs:10614 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'message')
TypeError: Cannot read properties of undefined (reading 'message')
    at base.js:229:34
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:22:1)
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:11083:33)
    at _ZoneDelegate.invoke (zone.js:367:52)
    at Zone.run (zone.js:129:43)
    at zone.js:1257:36
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at resolvePromise (zone.js:1193:31)
    at resolvePromise (zone.js:1147:17)
    at zone.js:1260:17
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:10757:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10757:36)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Object.onInvokeTask (core.mjs:11070:33)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Zone.runTask (zone.js:173:47)

Wait for response in the Network tab. Call is successful.

{
  "id": "chatcmpl-8GV5Yh4366uVozlQ1NeceMvwoM70P",
  "object": "chat.completion",
  "created": 1698943444,
  "model": "gpt-4-0613",
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "1. Rainbow Steps\n2. Colorful Cozy Toes\n3. Spectrum Socks\n4. Vibrant Footprints\n5. Popsicle Peds\n6. Bright Steps\n7. Colorama Socks\n8. Hue Crew Socks\n9. Kaleidoscope Socks \n10. ColorSplash Footwear\n11. Technicolor Toes\n12. Dazzle Digits\n13. Footnote Colors\n14. Chromatic Comforts\n15. Tinted Toes\n16. Shade Parade Socks\n17. Rainbow Wrappings\n18. Palette Peds\n19. Prism Paws\n20. ColorWheel Socks\n21. Spectrum Strides\n22. Jazzy Jamboree Socks\n23. Bright Feet Beat\n24. Radiant Rambles\n25. Pigment Patter Socks."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 22,
    "completion_tokens": 178,
    "total_tokens": 200
  }
}

As an overview. The call throws immediately without waiting for the response to come back. The issue seems to be the asyncToGenerator wrapper that fails to replace the original async/await code from LangChain base.js pointing to either: 1) a possible build issue or 2) implementation issue at base.js.

This issue is important as it seems LangChain cannot be used with Angular at the moment.

jacoblee93 commented 10 months ago

Thank you CC @bracesproul

few commented 9 months ago

I'm running into this with my angular app as well. I was able to update until langchain 0.0.140. The error occurs starting with 0.0.141. Looking at the release notes, only one change stands out: Upgrade to OpenAI v4 (extends #2353) by @jacoblee93 in #2389

few commented 9 months ago

https://github.com/openai/openai-node/issues/232 sounds like the same issue.

dosubot[bot] commented 6 months ago

Hi, @gsans,

I'm helping the langchainjs team manage their backlog and am marking this issue as stale. From what I understand, the issue was reported by you regarding a TypeError in the call method of the base.js file in the langchain package. There were discussions about potential fixes, including upgrading to the latest version of the package and investigating Angular build settings. However, it seems that the issue remains unresolved, and it's unclear if it's still relevant to the latest version of the langchainjs repository.

Could you please confirm if the issue is still relevant to the latest version of the langchainjs repository? If it is, please let the langchainjs team know by commenting on the issue. Otherwise, feel free to close the issue yourself, or it will be automatically closed in 7 days. Thank you for your understanding and contribution to the langchainjs project.

gsans commented 6 months ago

I provided all the details you asked for. That included a reproduction project and the versions that introduced the issue in your side.

Iโ€™ve lost interest and trust in your capacity to check on your own issues to provide a solution even when given all the information down to the exact version while dismissing a whole ecosystem like Angular.

It is your own interest to follow up issues and get to the bottom of them. You should behave more professionally.

Gerard.

On Sat, 2 Mar 2024 at 11:01, dosubot[bot] @.***> wrote:

Hi, @gsans https://github.com/gsans,

I'm helping the langchainjs team manage their backlog and am marking this issue as stale. From what I understand, the issue was reported by you regarding a TypeError in the call method of the base.js file in the langchain package. There were discussions about potential fixes, including upgrading to the latest version of the package and investigating Angular build settings. However, it seems that the issue remains unresolved, and it's unclear if it's still relevant to the latest version of the langchainjs repository.

Could you please confirm if the issue is still relevant to the latest version of the langchainjs repository? If it is, please let the langchainjs team know by commenting on the issue. Otherwise, feel free to close the issue yourself, or it will be automatically closed in 7 days. Thank you for your understanding and contribution to the langchainjs project.

โ€” Reply to this email directly, view it on GitHub https://github.com/langchain-ai/langchainjs/issues/3105#issuecomment-1974837522, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABDRYXDGHKERLRK5Y5OSWDDYWHZWRAVCNFSM6AAAAAA6X3Q4JGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZUHAZTONJSGI . You are receiving this because you were mentioned.Message ID: @.***>

jacoblee93 commented 6 months ago

Hey apologies for the silence here - we're a very small team and have a ton to cover.

It sounded like the problem was lower level in the OpenAI dep based on the linked issue? If so you could make another custom class that depends on the prior version of OpenAI:

https://js.langchain.com/docs/guides/extending_langchain

Otherwise I'm not sure there's any changes we can make in LangChain to help.

few commented 6 months ago

The issue has been solved on the angular side in zone.js 0.14.3: https://github.com/angular/angular/issues/53380 I have since then been able to update langchain in my angular project.