0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

DeepSeek V4.1 Flashの回答をDeepSeek Harnessで操作可能なUIにする:GenUI導入と検証記録

0
Posted at

DeepSeek HarnessでDeepSeek V4.1 Flashの回答を表やグラフとして操作したいなら、GenUIは導入候補です。2026年11月10日に実際にインストールし、中国語プロンプトで全機能デモを実行したところ、回答は3分58秒で生成され、表の並べ替えや関数パラメータの変更がブラウザ内で完結しました。本記事は、DSHでデータやパラメータを繰り返し確認する開発者向けです。テキスト回答だけで十分な人、モデルAPIが未設定の人、サードパーティ製プラグインの権限を確認できない人には勧めません。全コンポーネントや全DSHバージョンを検証したわけではありません。

DeepSeek V4.1 Flashが生成したGenUIの機能一覧表

実際の回答に表示された機能一覧です。画面は簡体字中国語で、並べ替え、絞り込み、Markdown/CSVコピーと、ローカルで完了する操作を確認しました。

導入のきっかけは、李不凱氏のXへの投稿です。データパネル、関数プロット、採点付きクイズ、入力欄の上に固定するパネルが紹介されていました。見た目の変更だけでなく、回答後の操作をどこまでブラウザ側で処理できるのかを確かめることにしました。

Xで紹介されたDeepSeek Harness用GenUIの使用例

DeepSeek V4.1 FlashにGenUIを導入する前のパッケージ確認

今回使用したパッケージは**@changfenhuang/dsh-genui**です。スコープを省略しないことが重要です。

投稿で紹介されていたchangfenhuang/dsh-genuiというリポジトリパスは、現在404になります。現在のソースはomdsh-dev/dsh-genuiで、対応するnpmパッケージは@changfenhuang/dsh-genuiです。

npmにはスコープのないdsh-genuiもありますが、これは別のメンテナーによる実装です。今回のパッケージの短縮名ではありません。また、通常のNode依存関係としてインストールするだけでは、DSHへのプラグイン登録は完了しません。

DSHのプラグインページでは、次の順序で確認しました。

  1. 「添加插件」を開き、@changfenhuang/dsh-genuiを完全な名前で入力する。
  2. 公式デフォルト、または明示的に信頼できるミラーを使用する。
  3. インストール済み一覧でパッケージ名を確認し、有効にする。
  4. DSH Webサービスを再起動し、ブラウザをハードリフレッシュする。
  5. 新しいセッションで、小さなUIを生成して動作を確認する。

DeepSeek Harnessに登録された@changfenhuang/dsh-genui

2026年11月10日時点の公式Quick Startでは、DSHホストとして^0.2.0-rc.1、^0.2.1-rc.1、^0.2.2-alpha.2が列挙されています。現在のRCとalphaホストにはNode.js 24.9.0以降が必要で、プラグインCLIにはpnpmも必要です。導入前に最新の要件を確認してください。今回のスクリーンショットにはDSHの正確なビルドが記録されていないため、すべての旧バージョンで同じ画面手順になるとは断言できません。

DeepSeek V4.1 Flashの回答がUIになるまでの流れ

私が入力したのは、「展示一下刚刚加入的ui的完整功能。」という中国語プロンプトです。意味は「先ほど追加したUIの全機能を見せてほしい」で、日本語プロンプトの品質を評価した実験ではありません。

DeepSeek V4.1 Flashは、追加した@changfenhuang/dsh-genuiを確認してからデモを生成しました。所要時間は3分58秒です。これは機能を多数含む長い回答の記録で、小さな表やグラフを1件生成する場合の固定の待ち時間ではありません。

回答は生のJSONではなく能力カードから始まり、その後に表、グラフ、関数プロット、計算フィールド、クイズ、3Dシーンが展開されました。

DeepSeek V4.1 Flashの回答に表示されたGenUI能力カード

説明には4つの表示経路が含まれていました。

  • 会話内にコンポーネントを展開するdsh-uiフェンス
  • ツール行に表示するrender_uiカード
  • 入力欄の上に作業領域を固定する/panel
  • パネル右上から開くテンプレートと実績ページ

次のGIFは、実際に回答をスクロールし、グラフを開いた記録です。

DeepSeek V4.1 FlashによるGenUIデモのスクロールとグラフ操作

dsh-uiのコードフェンスだけが表示される場合は、モデル出力とレンダリングを分けて調べます。パッケージの登録と有効化、DSHの再起動、ブラウザの更新、ホストバージョンを先に確認すれば、モデル側の問題と切り分けやすくなります。

DeepSeek V4.1 Flashで確認したローカル操作とモデル再呼び出し

GenUIの利点は、回答を装飾することより、回答後の小さな操作をどこで処理するかにあります。今回の操作では、次の3種類に分かれました。

操作の種類 確認した例 モデルへの再問い合わせ
ブラウザ内の状態変更 表の並べ替え、行の絞り込み、タブ切り替え、Markdown/CSVコピー なし
ローカルでの再計算 凡例の切り替え、関数パラメータの変更、アニメーション再生 なし
後続のモデル処理 フォーム送信、actionを持つボタンの操作 あり

グラフエリアには棒グラフ、P50/P95の折れ線、構成比のリングが含まれていました。数値はすべてデモ用です。実際のサービスや業務データの正しさではなく、操作後に表示が更新されるか、別のモデルリクエストが発生するかを確認しました。

DeepSeek V4.1 Flashが生成した棒・折れ線・リンググラフ

通常のテキスト回答では、「遅延順に並べ替えて」「別の値で曲線を描いて」といった小さな変更にも、再度プロンプトを送る必要があります。GenUIでは、ブラウザが既に持っている状態はその場で更新し、次の推論が必要な操作だけをモデルへ戻します。この違いが、実際の使いやすさに効きます。

ただし、モデルとの往復が減ることと、総トークンが必ず減ることは別です。初回のUI生成にも出力コストがあり、今回は同一内容での比較測定をしていません。

DeepSeek V4.1 Flashの関数プロットとパネルが向く用途

関数プロットでは、スライダーを動かすと曲線が再描画されます。式の説明、教材作成、パラメータ比較では、変更のたびに回答全体を生成し直す必要がありません。

DeepSeek V4.1 Flashが生成した関数プロットとactionイベントの流れ

図の下にあるフローでは、ユーザーが質問し、モデルがdsh-uiの仕様を出力し、レンダラーがコンポーネントを表示します。後続処理を持つコントロールを操作したときだけ、イベントがモデルへ戻ります。自分のワークフローを検証するときも、見た目ではなく、この境界を確認するのが有効です。

私なら、まず次の用途で試します。

  • モデルに整理させた表を、自分で並べ替えて確認する
  • 数式とパラメータを並べ、スライダーで変化を説明する
  • 継続して使うチェックリストや小さな作業領域を/panelに置く

パネルは/panelで切り替え、右側の×で閉じられます。内容のカスタマイズは/panel 清单、消去は/panel clearです。常に表示し続ける必要はありません。

DeepSeek V4.1 FlashのAPI設定とトークン評価の注意点

GenUIは表示と操作を担当するため、モデルの接続設定は別に必要です。今回はCrazyrouterのOpenAI互換APIを使用し、Base URLはhttps://api.crazyrouter.com/v1でした。APIキーはDSHの認証情報設定だけに保存し、プロンプト、スクリーンショット、生成フォームには含めません。モデルIDも、表示名から推測せず、アカウントで利用可能な値を確認します。

現在のモデル候補はCrazyrouterのモデル一覧で確認できます。同じUIプロンプトを複数モデルで試したい場合は、チャット向けモデルを比較することもできます。これはDeepSeek V4.1 Flash専用の仕様ページではなく、チャットモデルの一覧です。比較環境でテキストが返っても、DSHでGenUIが描画されることは別途確認してください。

元のXのコメントにはトークンに関する質問もありました。李不凱氏は、非コーディング用途では出力トークンが一般にそれほど高くならないと回答しています。これは投稿者の説明で、今回の対照測定ではありません。

Xで話題になったGenUIのトークン使用量とパネルの閉じ方

今回確認できたのは、ローカルの並べ替え、絞り込み、スライダー操作でモデルを再呼び出ししなかったことです。初回生成とactionによる後続イベントは別に記録する必要があります。「ローカルファースト」を「常にトークン削減」と読み替えるのは避けます。

DeepSeek V4.1 FlashとGenUIの検証範囲・トラブル対応

回答の後半には、計算フィールド、クイズ、高度なビジュアルもありました。計算カードは任意のJavaScriptではなく、ホワイトリストの式を使います。クイズはローカルで採点でき、スクリーンショットの0/2は未回答の状態です。

DeepSeek V4.1 FlashのGenUIデモに含まれた計算・クイズ・3D領域

3Dシーンはドラッグによる回転とホイールによるズームに対応し、下には分離して描画されたSVGグラフがありました。ただし、日常用途で最初に試すなら、表、グラフ、スライダーで十分です。

末尾にはオフライン地図、画像のlightbox、音声・動画プレイヤー、横方向のcarouselなども列挙されていましたが、個別には開いていません。そのため、列挙された機能と、実際に操作して確認した機能は区別しています。

DeepSeek V4.1 Flashのデモ末尾に列挙された追加コンポーネント

能力カードには60+コンポーネントと表示されましたが、現在の公式READMEでは30+コンポーネントの分類が使われています。バージョンや集計方法が異なる可能性があり、私は個数を独立に数えていません。この差だけでアップグレードやダウングレードは判断しません。

導入後の確認は、並べ替え可能な表1つ、パラメータ2つの関数プロット、actionボタン、/panelの順に進めると、問題を切り分けやすくなります。ホワイトリストと分離描画があっても、サードパーティ製コード、ホスト互換性、権限の確認は必要です。デモフォームにパスワード、APIキー、その他の機密情報を入力しないでください。

GenUIは回答の正しさを保証するものではありません。役立つのは、回答を受け取った後の並べ替え、絞り込み、パラメータ探索、次の操作の選択です。自分が何度もモデルへ送り直している小さな変更を見つけて、そこから試すのが導入判断の近道です。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?