Klleon SDK

日本語

한국어
English

日本語

한국어
English

Appearance

はじめに ​

CDNでインストール ​

html
<script src="https://klleon.k1.klleon.io/{VERSION}/klleon-sdk.umd.js"></script>

{VERSION} を実際のバージョン（例: 2.0.0）に置き換えてください。ロード後、window.KlleonSDK でSDKにアクセスします。

基本的な使い方 ​

1. HTMLにコンポーネントを追加 ​

html
<avatar-container style="width: 400px; height: 400px;"></avatar-container>
<chat-container></chat-container>

2. イベント購読 ​

onStatus は init() 中の状態変更を受信するために、init() 前に登録してください。

js
const SDK = window.KlleonSDK;

SDK.onStatus((status) => {
  console.log('状態変更:', status);
});

SDK.onSignal((data) => {
  console.log('シグナル:', data.signal, data.payload);
});

SDK.onError((error) => {
  console.error('エラー:', error.code, error.message);
});
jsx
useEffect(() => {
  const SDK = window.KlleonSDK;

  SDK.onStatus((status) => console.log('状態:', status));
  SDK.onSignal((data) => console.log(data.signal, data.payload));
  SDK.onError((error) => console.error(error.code, error.message));
}, []);

3. SDK初期化 ​

js
SDK.init({
  sdk_key: 'YOUR_SDK_KEY',
  avatar_id: 'YOUR_AVATAR_ID',
}).catch((e) => console.error('初期化失敗:', e.message));
jsx
import { useEffect, useRef } from 'react';

function App() {
  const initialized = useRef(false);

  useEffect(() => {
    const SDK = window.KlleonSDK;
    SDK.init({
      sdk_key: 'YOUR_SDK_KEY',
      avatar_id: 'YOUR_AVATAR_ID',
    })
      .then(() => { initialized.current = true; })
      .catch((e) => console.error('初期化失敗:', e.message));

    return () => {
      if (initialized.current) SDK.destroy();
    };
  }, []);
}

4. メッセージ送信 ​

js
window.KlleonSDK.sendMessage('こんにちは');

5. SDK終了 ​

js
window.KlleonSDK.destroy();

音声入力 ​

js
window.KlleonSDK.startListening(); // STT開始
window.KlleonSDK.endListening();   // STT終了

完全な例 ​

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://klleon.k1.klleon.io/{VERSION}/klleon-sdk.umd.js"></script>
</head>
<body>
  <avatar-container style="width: 400px; height: 600px;"></avatar-container>
  <chat-container></chat-container>

  <script>
    const SDK = window.KlleonSDK;

    SDK.onStatus((status) => {
      console.log('状態:', status);
    });

    SDK.onSignal((data) => {
      if (data.signal === 'RESPONSE_TEXT') {
        console.log('アバター:', data.payload.text);
      }
    });

    SDK.onError((error) => {
      console.error('エラー:', error.code, error.message);
    });

    (async () => {
      try {
        await SDK.init({
          sdk_key: 'YOUR_SDK_KEY',
          avatar_id: 'YOUR_AVATAR_ID',
        });
        SDK.sendMessage('こんにちは');
      } catch (e) {
        console.error('初期化失敗:', e.message);
      }
    })();
  </script>
</body>
</html>
jsx
import { useEffect, useRef } from 'react';

function App() {
  const initialized = useRef(false);

  useEffect(() => {
    const SDK = window.KlleonSDK;

    SDK.onStatus((status) => console.log('状態:', status));
    SDK.onSignal((data) => console.log(data.signal, data.payload));
    SDK.onError((error) => console.error(error.code, error.message));

    SDK.init({
      sdk_key: 'YOUR_SDK_KEY',
      avatar_id: 'YOUR_AVATAR_ID',
    })
      .then(() => { initialized.current = true; })
      .catch((e) => console.error(e.message));

    return () => {
      if (initialized.current) SDK.destroy();
    };
  }, []);

  return (
    <div>
      <avatar-container style={{ width: 400, height: 600 }} />
      <chat-container />
    </div>
  );
}

export default App;