勇哥

勇哥开发之路

I build things on web.

前端はどのように DeepSeek 深度思考効果を実現するか

DeepSeek 春風が地に吹き渡り、誰もが早起きして遅れた集まりを恐れています。

大小の企業が次々とフルパワー版 DeepSeek R1 をオンラインで提供し、多くの選択肢があります。 DeepSeek 公式を除いて、勇哥が使用したのは腾讯元宝问小白当贝 AIなどで、ここではすべてを列挙することはありません。

皆さんご存知のように、DeepSeek R1 は推論モデルであり、他のチャットボットとは異なり、推論モデルは質問に答える際に、まずモデルの推論プロセスをユーザーに示します。以下の図のように:

deepseek

DeepSeek の春風は勇哥の会社にも吹き込み、春節が始まると、上司は DeepSeek の導入を要求しました。

勇哥が取り組んでいるチャットボットプロジェクトの大モデルは阿里云百炼に基づいており、AI ライブラリにはVercel の AI SDKを使用し、フロントエンド UI はNext.js AI Chatbotに基づいています。百炼プラットフォームで DeepSeek R1 の設定アプリを開通すると、思考チェーンデータを返すことができ、フロントエンドには思考チェーンの表示を追加する必要があります。勇哥の最初の反応は自分で実装することではなく、Github で Next.js AI chatbot が思考チェーンの表示をサポートするように更新されたかを確認することでした。

やはり、Next.js AI chatbot は最近、DeepSeek R1 のような推論モデルのサポートを追加しました:

ai-chat-reasoning

具体的なファイルは:components/message-reasoning.tsxです。

AI SDK を最新バージョンに更新し、元のコンテンツレンダリングファイルmessage.tsxに以下のコードを追加し、スタイルを微調整するだけです。

{message.reasoning && (
  <MessageReasoning
    isLoading={isLoading}
    reasoning={message.reasoning}
  />
)}

最終的な実現効果は以下の通りです:

reasoning

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。