stream api chunk 처리 방법 문의

[positoy]

안녕하세요.

axios 사용해서 https://clovastudio.stream.ntruss.com/testapp/v1/chat-completions/HCX-003 API 를 호출했을 때,
chunk 데이터가 불규칙하게 들어오는 것 같습니다. 처리하는 방법에 대한 가이드가 있을까요?

1. chunk 데이터가 문자열이어서 처리가 불편하고
2. 아래 세번째 청크처럼 token, result 이벤트의 data 가 분리되어 들어오는 경우가 있어서 로직을 짜기 어렵습니다.
 

(첫번째 청크)
id:9f57c21f-a948-419e-afb4-538affff84ab
event:token
data:{"message":{"role":"assistant","content":" 같습니다"},"index":0,"inputLength":1042,"outputLength":1,"stopReason":null}



(두번째 청크)
id:ba7646c7-166d-4285-b2b2-002feb27945b
event:token
data:

(세번째청크)
{"message":{"role":"assistant","content":"."},"index":0,"inputLength":1042,"outputLength":1,"stopReason":null}

 

 참고로, openai 의 stream api 는 다음처럼 chunk 가 json 타입으로 들어오고 있습니다.

{
  id: 'chatcmpl-9YsdSagK9QHD8U3EkUxP44qmI4yhx',
  object: 'chat.completion.chunk',
  created: 1718100198,
  model: 'gpt-4o-2024-05-13',
  system_fingerprint: 'fp_aa87380ac5',
  choices: [
    { index: 0, delta: [Object], logprobs: null, finish_reason: null }
  ]
}
{
  id: 'chatcmpl-9YsdSagK9QHD8U3EkUxP44qmI4yhx',
  object: 'chat.completion.chunk',
  created: 1718100198,
  model: 'gpt-4o-2024-05-13',
  system_fingerprint: 'fp_aa87380ac5',
  choices: [
    { index: 0, delta: [Object], logprobs: null, finish_reason: null }
  ]
}
{
  id: 'chatcmpl-9YsdSagK9QHD8U3EkUxP44qmI4yhx',
  object: 'chat.completion.chunk',
  created: 1718100198,
  model: 'gpt-4o-2024-05-13',
  system_fingerprint: 'fp_aa87380ac5',
  choices: [
    { index: 0, delta: [Object], logprobs: null, finish_reason: null }
  ]
}
{
  id: 'chatcmpl-9YsdSagK9QHD8U3EkUxP44qmI4yhx',
  object: 'chat.completion.chunk',
  created: 1718100198,
  model: 'gpt-4o-2024-05-13',
  system_fingerprint: 'fp_aa87380ac5',
  choices: [
    { index: 0, delta: [Object], logprobs: null, finish_reason: null }
  ]
}
{
  id: 'chatcmpl-9YsdSagK9QHD8U3EkUxP44qmI4yhx',
  object: 'chat.completion.chunk',
  created: 1718100198,
  model: 'gpt-4o-2024-05-13',
  system_fingerprint: 'fp_aa87380ac5',
  choices: [
    { index: 0, delta: [Object], logprobs: null, finish_reason: null }
  ]
}
{
  id: 'chatcmpl-9YsdSagK9QHD8U3EkUxP44qmI4yhx',
  object: 'chat.completion.chunk',
  created: 1718100198,
  model: 'gpt-4o-2024-05-13',
  system_fingerprint: 'fp_aa87380ac5',
  choices: [
    { index: 0, delta: [Object], logprobs: null, finish_reason: null }
  ]
}
{
  id: 'chatcmpl-9YsdSagK9QHD8U3EkUxP44qmI4yhx',
  object: 'chat.completion.chunk',
  created: 1718100198,
  model: 'gpt-4o-2024-05-13',
  system_fingerprint: 'fp_aa87380ac5',
  choices: [ { index: 0, delta: {}, logprobs: null, finish_reason: 'stop' } ]
}

 

처리가 용이하도록 유의미한 단위의 chunk 가 들어오면 좋겠고, json 단위으로 포맷팅되면 더 애플리케이션 구현이 쉬울 것 같습니다.
혹시 제가 놓친 가이드가 있으면 제공해주셔도 좋습니다.

 

궁극적으로는, [Vercel AI SDK](https://sdk.vercel.ai/docs/getting-started/nextjs-app-router) 의 채팅창에 clova stream API 를 연결해보고 있는데요.
다른 LLM 서비스의 경우 sdk 를 제공하거나, Openai 와 동일 규격의 api endpoint 를 제공하여 호환성을 제공하기도 하는 것 같습니다.

하이퍼클로바에서도 이러한 호환성을 제공해주시면 애플리케이션 구현이 수월해지지 않을까 생각해봤습니다.

Edited June 11, 2024 by positoy

[positoy]

청크 하나에 여러벌의 데이터가 들어오는 경우도 있습니다.

id:d9efd963-4416-4eec-9d9a-5da864e404dc
event:result
data:{"message":{"role":"assistant","content":"네. 구매하신 상품 목록은 다음과 같습니다.  \n\n1. **스와로브스키 브리올렛 비즈 5040 크리스탈AB 6mm 8mm 비즈 공예재료**\n- 주문번호 : 2024060964962331\n- 단가 : 6150원\n- 구매 갯수 : 3개\n\n2.**비즈실 비달론19 실버 15피트 (4.6m), 0.38mm  19가닥 와이어 비즈공예재료**\n - 주문번호 : 2024060964"},"inputLength":1032,"outputLength":101,"stopReason":"length","seed":765016342}

id:92529bae-f875-4243-9d94-d045c4ebf4aa
event:signal
data:{"data":"[DONE]"}

 

Edited June 11, 2024 by positoy

[CLOVA Studio 운영자]

안녕하세요, @positoy님,

클로바 스튜디오에서는 HTTP server-sent events 규약을 따라 데이터를 전송하고 있습니다. 다음 링크를 따라서 직접 chunk 단위로 읽으실 때에는 해당 규약에 맞춰서 처리 부탁 드리겠습니다.

data는 json 형태로 내리고 있어, data field 는 고려 하셨던대로 json으로 처리 부탁 드립니다.

감사합니다.