Agile育成ブログ
未来を変える喜びを
未分類

Next.jsとLangChainで自動タスク生成アプリ

  
npx create-next-app@latest .
npm i axios langchain

navigation

main

type プロパティが 'task-list' の要素だけを抽出して表示する部分です。
次に、.slice(-1) を使って、抽出された要素のうち最後の1つだけを新しい配列として取得しています。

  • break-words:改行
  • leading-relaxed:行間（行の高さ）を広めに設定するために使用されます。
{messages
  .filter((data) => data.type === 'task-list')
  .slice(-1)
  .map((data, index) => (
    <div key={index}>
      <div className="leading-relaxed break-words whitespace-pre-wrap">{data.text}</div>
    </div>
  ))}

refはReactで要素（HTML要素またはReactコンポーネント）への参照を作成するための特別な属性です。ref を使用すると、コンポーネントの中で直接要素にアクセスできます。

 <input
              className="w-full border rounded-lg py-2 px-3 focus:outline-none bg-gray-50 focus:bg-white"
              type="number"
              ref={iterationRef}
              id="iteration"
              defaultValue={5}
              disabled={loading}
            />

下記のようにiterationRef を使って input 要素の値にアクセスすることが可能です。

const inputValue = iterationRef.current.value;

Startボタンを押したときに入力された内容を取得する。
最後にreturnとしているのは、関数から特定の値を返すためです。
objective の値が空の場合に false を返します。
return 文を使わない場合は、デフォルトで undefined が返されます。

    const startHandler = async () => {
        setLoading(true)
        const objective = objectiveRef.current!.value

        if (!objective) {
            setLoading(false)
            return
        }
    }

キャンセルトークンとは非同期処理において実行中のタスクを中止するための仕組みです。
非同期処理は、リクエストの送信やデータの取得など、時間のかかる処理を行う際に使用されます。

例えば、ウェブページ上でAPIリクエストを行う際、ユーザーがページを移動して別の操作を行ったり、キャンセルボタンを押したりした場合に、そのAPIリクエストを中止させたいと考えるでしょう。こうした場合にキャンセルトークンを使用することで、非同期処理を途中で中止させることができます。

JavaScriptの axios ライブラリなど、多くの非同期処理ライブラリはキャンセルトークンをサポートしており、簡単に中止処理を実装することができます。

stopHandler 関数が呼び出されると、まず sourceRef.current の値をチェックします。
もし sourceRef.current が null ではない場合、つまりキャンセルトークンが存在する場合sourceRef.current.cancel()が実行されます。axios ライブラリの CancelToken オブジェクトの cancel() メソッドを呼び出しています。これにより、関連する非同期処理に対して「ユーザーによって操作がキャンセルされた」という理由を伝えることができます。

try ブロック内のコードが実行される際に例外が発生した場合、例外をキャッチし、catch ブロック内の処理が実行されます。また、例外の発生有無に関わらず最終的に finally ブロック内の処理が実行されます。

タスクリストの要素数が0以下の場合、setLoading(false) が実行されて、return により関数が終了します。

while (maxIteration === 0 || iteration < maxIteration) {
        // タスクリスト確認
        if (taskList.length <= 0) {
          setLoading(false)
          return
        }

現在の messages ステートの配列をスプレッド構文を使って展開し、message オブジェクトを配列の末尾に追加することで、新しいメッセージを配列に追加します。
setMessages 関数を使用して、messages ステートを更新することで、Reactは新しい値を反映してUIを再描画します

    const messageHandler = (message: MessageType) => {
        setMessages((messages) => [...messages,message])
    }
const taskListString = taskList.map((task) => `${task.taskID}. ${task.taskName}`).join('\n')

タスクはtaskIDとtaskNameのプロパティを持っており、それらを連結した文字列を作成。

APIエンドポイントに対して非同期でPOSTリクエストを送信しています。
await キーワードにより、非同期処理が完了するまで次の行の実行を待ちます。

RELATED POST