.NET Smart Components のご紹介 - AI を活用した UI コントロール

.NET Smart Components のご紹介 - AI を活⽤した UI コントロール 鈴⽊ 章太郎 プリンシパルエンタープライズアーキテクト ソリューションアーキテクト本部 ヴイエムウェア株式会社 2024/04/27 All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

鈴⽊ 章太郎 X (Twitter) : @shosuz ヴイエムウェア株式会社 プリンシパルエンタープライズアーキテクト Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、 Microsoft Azure 等の開発者向け技術啓発活動を 実施。その後 Dell、Accenture、Elastic での開発者 向け技術啓発活動等を経て現職。 モダンアプリケーション開発、マルチクラウド対応、アーキ テクチャ策定等を中⼼に、開発者向け最新技術啓発 活動中。 2019年4⽉〜2021年8⽉、内閣官房 IT 総合戦略室 政府 CIO 補佐官、2021年9⽉〜2024年3⽉、 デジタル 庁 プロジェクトマネージャーユニット ソリューションアーキ テクトを兼務。 https://www.docswell.com/user/shosuz All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://www.docswell.com/user/shosuz

プラットフォームの認知度を⾼め、開発者の準備態勢を整える さまざまな接点とそれらを増やす機会を探りつなげていく マルチクラウド対応の 訴求 AI プラットフォームとしての 認知向上 デベロッパーアドボカシー All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. Spring の 最新技術啓発

Agenda l OpenAI バックエンドの構成 l Blazor スマート コンポーネントの使⽤開始 l MVC / Razor Pages スマート コンポーネントの使⽤開始 l ローカル埋め込み l Smart ComboBox l Smart Paste l Smart TextArea l まとめ All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 4

“ AI の新たな進歩は、私たちがソフトウェアと対話し、使⽤する⽅法に⾰命を起こすことを約束 します。しかし、既存のソフトウェアに AI 機能を追加するのは困難な場合があります。そのため、 私たちは新しい .NET スマート コンポーネントを構築しました。これは、.NET アプリにすばやく 簡単に追加できる、本当に便利な AI を活⽤した UI コンポーネントのセットです。 UX の再 設計や機械学習とプロンプト エンジニアリングの研究に何週間も開発時間を費やす必要は ありません。 .NET スマート コンポーネントは、既存のアプリ UI にドロップしてユーザーの⽣産性 を向上できる、事前に構築されたエンドツーエンドの AI 機能です。 “ .NET スマート コンポーネントは実験的なもので、当初は .NET 6 以降の Blazor、MVC、およ び Razor Pages で利⽤可能です。 .NET MAUI、WPF、Windows Forms など、他の .NET UI フレームワーク⽤のコンポーネントも提供する予定ですが、まず、これらのコンポーネントがどれ ほど役⽴つか、どのような追加機能が必要かについてのフィードバックをお待ちしています。 https://devblogs.microsoft.com/dotnet/introducing-dotnet-smart-components/ All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 5

• https://devblogs.microsoft.com/dotnet/introducing-dotnet-smart-components/

OpenAI バックエンドの構成 All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 6

サーバープロジェクトで次の操作を実⾏
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/configure-openai-backend.md

•
•

SmartComponents.Inference.OpenAI のパッケージをインストール
Program.cs で AddSmartComponents の呼び出しを次のように更新
builder.Services.AddSmartComponents()
.WithInferenceBackend<OpenAIInferenceBackend>();

•

API キーを構成するには appsettings.Development.json の最上位に次のようなブロックを追加
"SmartComponents": {
"ApiKey": "your key here",
"DeploymentName": "gpt-3.5-turbo",
// Required for Azure OpenAI only. If you're using OpenAI, remove the following line.
"Endpoint": "https://YOUR_ACCOUNT.openai.azure.com/"
}

•

Azure OpenAI の場合
•
•
•

•

Azure OpenAI Service をデプロイ
ApiKey、DeploymentName と使⽤するモデル (例、gpt-3.5-turbo、gpt-4など) に値を設定
Endpoint に値を設定

OpenAI の場合
•
•

ApiKey、DeploymentName と使⽤するモデル (例、gpt-3.5-turbo、gpt-4など) に値を設定
Endpoint 構成の⾏は完全に削除
All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/configure-openai-backend.md

Blazor スマートコンポーネントの 使⽤開始 All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 8

Blazor スマートコンポーネントの使⽤開始 https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-blazor.md 1. 新しい Blazor プロジェクト作成または既 存のプロジェクト (.NET 6 以降) を使⽤ 3. SmartComponents をアプリケーション に登録 dotnet new blazor Program.cs //Add services to container builder.Services.AddSmartComponents(); 2. SmartComponents.AspNetCore パッケージインストール dotnet add package --prerelease SmartComponents.AspNetCore WebAssembly プロジェクトがある場合 SmartComponents.AspNetCore.Components の NuGet パッケージをインストール 4. OpenAI バックエンドを構成 (必要な場合) 5. ページにコンポーネントを追加 ・ SmartPaste ・ SmartTextArea ・ SmartComboBox 注: スマート コンポーネントは、どのレンダリング モード (静的 SSR、サーバー、WebAssembly など) でも同様に機能するところ、ASP.NET Core サーバーが必要であるため、静的ファイル サーバーでホストされている Blazor WebAssembly スタンドアロン アプリを使⽤することはできない。これは純粋に、API キーを安全に保持するサーバーが必要なため。 All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-blazor.md

MVC / Razor Pages スマートコンポーネント の使⽤開始 All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 10

MVC / Razor Pages のスマート コンポーネントの使⽤開始 https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-mvc-razor-pages.md 1. 新しい ASP.NET Core Web アプリ プロ ジェクトを作成するか、既存のプロジェクト (.NET 6 以降) を使⽤ dotnet new mvc または dotnet new razor 2. SmartComponents.AspNetCore パッケージインストール dotnet add package --prerelease SmartComponents.AspNetCore WebAssembly プロジェクトがある場合 SmartComponents.AspNetCore.Components の NuGet パッケージをインストール All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 3. SmartComponents をアプリケーション に登録 1.Program.cs //Add services to container builder.Services.AddSmartComponents(); 2. ViewImports.cshtml (Pages フォルダー内) @addTagHelper *, SmartComponents.AspNetCore 4. OpenAI バックエンドを構成 (必要な場合) 5. ページにコンポーネントを追加 ・ SmartPaste ・ SmartTextArea ・ SmartComboBox

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-mvc-razor-pages.md

ローカル埋め込み All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 12

ローカル埋め込み https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md • • • 埋め込みは意味的な類似性の検索に使⽤される ⾃然⾔語⽂字列は、embedding と呼ばれる数値ベクトルに変換される 2 つの⽂字列が概念的に関連しているほど、それらのベクトルは近づく • • • 外部 AI サービスを使⽤してエンベディングを計算することもできる しかし、多くの場合、単純にサーバー上でローカルにエンベディングを計算できる (GPU は必要なし) SmartComponents.LocalEmbeddings はこれを簡単にするためのパッケージ • SmartComponents.LocalEmbeddings を使⽤すると、埋め込みを 1 ミリ秒未満で計算し、 数⼗万の候補に対するセマンティック検索を 1 桁のミリ秒で実⾏可能。ただし、限界もある • • 1. パフォーマンスの特性 2. 外部ベクトル データベースに移⾏することでメリットが得られる状況 パフォーマンスを参照 All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md

ローカル埋め込み開始 https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md#getting-started • SmartComponents.LocalEmbeddings パッケージを参照し、⽂字列の埋め込みを計算 using var embedder = new LocalEmbedder(); var cat = embedder.Embed("Cats can be blue"); var dog = embedder.Embed("Dogs can be red"); var snooker = embedder.Embed("Snooker world champion Stephen Hendry"); • それらの意味上の類似性を評価 var kitten = embedder.Embed("Kittens!!!"); Console.WriteLine(kitten.Similarity(kitten)); // 1.00 Console.WriteLine(kitten.Similarity(cat)); // 0.65 Console.WriteLine(kitten.Similarity(dog)); // 0.53 Console.WriteLine(kitten.Similarity(snooker)); // 0.37 ・結果︓ ... kitten に完全に関連 ...猫に関する声明とかなり関連 ...⽝に関する声明とはあまり関係なし ...スヌーカーに関する声明とはまったく関係なし All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md#getting-started

類似検索の実⾏ - 1 https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md#peforming-similarity-search • 必要に応じて下記を使⽤するだけで、⼀連の候補埋め込みから最も近い⼀致を⾒つけることができる candidates.OrderByDescending(x => x.Similarity(target)).Take(count) • しかし、LocalEmbedder.FindClosest を使うと、すべての候補をソートするのではなく、ベストNマッチだけ をソートするので、少し効率的 • FindClosest は以下のパラメータを受け⼊れる • target︓ 以前にembedder.Embed または embedder.EmbedRange によって返された埋め込み • candidates︓ (item,embedding) という形式のタプルの列挙可能な値。item は埋め込んだ⽂字 列でも、汎⽤型Tの他のオブジェクトでもOK • maxResults︓ 結果の最⼤数 • minSimilarity︓ オプション、設定された場合、この閾値以下の類似度を持つ候補は含まれない All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md

類似検索の実⾏ - 2

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md#peforming-similarity-search
•

•

次のクラスの場合︓

•

“ Ball game “という⽂字列に最も近い3つの Spot インスタンスが⾒つかる︓

class Sport
{
public string Name { get; init; }.
public EmbeddingF32 Embedding { get; init; }.
}

var candidates = sports.Select(a => (a,
a.Embedding));
var target = embedder.Embed("ball game");
Sport[] closest = LocalEmbedder.FindClosest(target,
candidates, maxResults: 3);

データ︓

// Displays: Soccer, Golf, Tennis
Console.WriteLine(string.Join(", ", closest.Select(x
=> x.Name)));

var sportNames = new[] { "Soccer", "Tennis",
"Swimming", "Horse riding", "Golf",
"Gymnastics" };
var sports = sportNames.Select(name => new Sport
{
Name = name,
Embedding = embedder.Embed(name)
}).ToArray();

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

•
•
•

候補のタプルを列挙して渡せば任意のデータ型（埋め込み⽂字列、その⽂字列
を保持するエンティティオブジェクト、int 型の ID 値など）を返せる
.Where(...) 句の適⽤でプレフィルタをかけられる
省略記法で EmbedRange を使⽤し⼀度に多くの⼊⼒タプルを⽣成可能
var candidates = embedder.EmbedRange(sports, x =>
x.Name);
Sport[] closest = LocalEmbedder.FindClosest(
embedder.Embed("ball game"),
candidates,
maxResults: 3);

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md

LocalEmbedder インスタンスの特⻑と再利⽤ https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md#reusing-localembedder-instances • • • スレッドセーフ • シングルトンインスタンスを多くのスレッド間で共有できる 使い捨て • ONNX ランタイムを内部で使⽤してエンベディング ML モデルを実⾏するため、アンマネージド リソースを保 持。忘れずに処分する 作成には費⽤がかかる • 各インスタンスは ML モデルをロードし、ONNX とのセッションをセットアップする必要あり • 可能であれば、インスタンスをシングルトンとして保持し、再利⽤する。たとえば、 builder.Services.AddSingleton<LocalEmbedder>() を使⽤して DI サービスとして登録 その場合、DI コンテナーが処理するため、破棄する必要はない All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md

エンベディングの縮⼩ (量⼦化)

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md#shrinking-embeddings-quantization
•
•
•
•

•
•
•

デフォルトでは、SmartComponents.LocalEmbeddings384 次元の埋め込みベクトルを返す埋め込みモデルを使⽤する。
各コンポーネントは単精度float値 (4 バイト) で表されるため、⽣の量⼦化されていない埋め込みに必要なメモリは 384*4 = 1536 バイト
多くのシナリオでは、これはメモリが多すぎる。100 万個の埋め込みの場合、それは 1.5 GiB となり、メモリに保持しておく量が多くなり、データベースに追加する
量も多くなる。
ベクトル データの保存に必要なスペースを削減するための⼀般的な⼿法は、量⼦化。量⼦化にはさまざまな形式がある。LocalEmbeddingsには、埋め込み
⽤の 3 つの組み込みストレージ形式があり、さまざまな量⼦化を提供する。
タイプ

サイズ (バイト)

類似性

情報

EmbeddingF32

1536年

余弦

量⼦化されていない⽣のデータ。各コンポーネントは float として保存される。最⾼の精度

EmbeddingI8

388余弦

各コンポーネントは (符号付きバイト) として保存されsbyte、さらにスケール係数を保持するための 4 バイトがある。これにより、良好な精度を
維持しながら、ストレージを⼤幅に削減できる。これは、Faiss の SQ8 量⼦化に似ている。

EmbeddingI1

48ハミング

各コンポーネントは単⼀ビットとして保存され、Faiss の LSH 量⼦化に相当。これにより、ストレージが⼤幅に削減されるものの、精度は中程度
低下。

類似性を評価する場合、スコアは1536 バイト表現に拡張することなく、量⼦化された表現から直接計算される。そのため、CPU が処理するバイト数がはるか
に少ないため、類似性検索は量⼦化が⼩さいほど⾼速に動作する。
類似性は型内でのみ計算できる。つまり、 はEmbeddingI1別の と⽐較できる。EmbeddingI1 と EmbeddingF32 との⽐較はできない。
選択した形式で埋め込みを取得するには、それを汎⽤パラメータとしてEmbed または EmbedRange に渡す。例:
// To produce a single embedding:
var embedding = embedder.Embed<EmbeddingI1>(someString);
// Or to produce a set of (item, embedding) pairs:
var candidates = embedder.EmbedRange<Sport, EmbeddingI1>(sports, x => x.Name);
All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md

永続的な埋め込み
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md#persisting-embeddings
•
•

埋め込みをファイルまたはデータベースに保存する場合は、Bufferプロパティを使⽤して、⽣のメモリに .html ファイルとしてアクセスできる
ReadOnlyMemory<byte> このプロパティは、どの埋め込みタイプでも使⽤できる 例︓
// Normally you'd store embeddings in a database, not a file on disk,
// but for simplicity let's use a file
var originalEmbedding = embedder.Embed<EmbeddingF32>("The chickens are here to see you");
using (var file = File.OpenWrite("somefile"))
{
await file.WriteAsync(originalEmbedding.Buffer);
}
// Now load it back from disk. Be sure to use the same embedding type.
var loadedBuffer = File.ReadAllBytes("somefile");
var loadedEmbedding = new EmbeddingF32(loadedBuffer);
// Displays "1" (the embeddings are identical)
Console.WriteLine(originalEmbedding.Similarity(loadedEmbedding));

•

ベクトル コンポーネントの数値にアクセスしたい場合 (外部ベクトル データベースに保存する場合など)、次のプロパティを使⽤できる
埋め込みタイプ

値のプロパティ

値のタイプ

EmbeddingF32

Values

ReadOnlyMemory<float>

EmbeddingI8

ValuesそしてMagnitude

ReadOnlyMemory<sbyte> と float

EmbeddingI1

利⽤不可

パックされたビットは単に Buffer にあるものだから

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md

Entity Framework を使⽤した保存とクエリ - 1

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md#storing-and-querying-using-entity-framework
•

Entity Framework を使⽤すると、byte[] エンティティ クラスにプロパティを追加して、埋め込み⽤の⽣データを保持できる 例︓
public class Document
{
public int DocumentId { get; set; }
public int OwnerId { get; set; }
public required string Title { get; set; }
public required string Body { get; set; }
// It's helpful to use the property name to keep track of which
// format of embedding is being used
public required byte[] EmbeddingI8Buffer { get; set; }
}

•

byte[] プロパティには、ToArray() を使⽤してデータを⼊⼒できる 例︓
var doc = new Document
{
// ... set other properties here ...
EmbeddingI8Buffer = embedder.Embed<EmbeddingI8>(title).Buffer.ToArray()
};

•

この埋め込みの計算に使⽤されるテキストをユーザーが編集するたびに、この埋め込みを再計算することができる

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md

Entity Framework を使⽤した保存とクエリ - 2

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md#storing-and-querying-using-entity-framework
•

少数のエンティティ (たとえば、現在のユーザーが作成したレコードのみ) を検索する必要がある場合は、オンデマンドでデータをロードしてから類似性検索を実⾏するだけで⼗分な場合がある
using var dbContext = new MyDbContext();
// Load whatever subset of the data you want to consider
// No need to fetch all the columns - only need ID/embedding pairs
var currentUserDocs = await dbContext.Documents
.Where(x => x.OwnerId == currentUserId)
.Select(x => new { x.DocumentId, x.EmbeddingI8Buffer })
.ToListAsync();
// Perform the similarity search
int[] matchingDocIds = LocalEmbedder.FindClosest(
embedder.Embed<EmbeddingI8>(searchText),
currentUserDocs.Select(x => (x.DocumentId, new EmbeddingI8(x.EmbeddingI8Buffer))),
maxResults: 5);
// Load the complete entities for the matching documents
var matchingDocs = await dbContext.Documents
.Where(x => matchingDocIds.Contains(x.DocumentId))
.ToDictionaryAsync(x => x.DocumentId);
var matchingDocsInOrder = matchingDocIds.Select(x => matchingDocs[x]);

•
•
•
•
•

多くの場合、すべてのユーザー間で共有される数万のエンティティなど、多数のエンティティを検索する必要がある
検索のたびに (特に Smart ComboBox のキーストロークごとに) データベースからすべてを取得する必要はない
代わりに、サーバーに ID/埋め込みペアのリストをメモリにキャッシュさせる⽅が合理的
1 つの(int Id, EmbeddingI1 Embedding)ペアはわずか 52 バイトなので、100 万個のペアを保持しても問題ない (52 MB)
これらを定期的に期限切れになる MemoryCache にキャッシュし、データベースの負荷と結果の鮮度の間でトレードオフを図ることができる

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md
• https://learn.microsoft.com/en-us/aspnet/core/performance/caching/memory?view=aspnetcore-8.0

基礎となる埋め込みモデルのカスタマイズ https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md#customizing-the-underlying-embeddings-model • • • • • • LocalEmbedderONNX ランタイムを使⽤して動作し、CPU または GPU でさまざまな埋め込みモデルを実⾏できる (多くの場合、このような⼩さな モデルでは CPU の⽅が⾼速に動作) NuGetSmartComponents.LocalEmbeddingsパッケージには実際には ML モデルが含まれていないが、最初にアプリケーションを構築するときに モデルをダウンロードするように構成されている。どのモデルをダウンロードするかを設定できる ビルド時にダウンロードされるデフォルトのモデルは、MIT ライセンスの BERT 埋め込みモデルであるbge-micro-v2 これはわずか 22.9 MiB まで量⼦化され、CPU 上で効率的に実⾏され、ベンチマークで優れたスコアを獲得し、多くのギガバイト サイズのモデル を上回る 別のモデルを使⽤する場合は、その .onnx ファイルの URL と、トークン化に使⽤する語彙を指定 たとえば、gte-tinyを使⽤するには、.csproj に次のように設定︓ <PropertyGroup> <LocalEmbeddingsModelUrl>https://huggingface.co/TaylorAI/ gte-tiny/resolve/main/onnx/model_quantized.onnx</LocalEmbeddingsModelUrl> <LocalEmbeddingsVocabUrl>https://huggingface.co/TaylorAI/ gte-tiny/resolve/main/vocab.txt</LocalEmbeddingsVocabUrl> </PropertyGroup> • • 要件 モデルは ONNX 形式であり、BERT トークン化されたテキストを受け⼊れ、input_ids、attention_mask、token_type_ids とラベル付けされ た⼊⼒を受け⼊れ、ミーンプーリングに適した出⼒テンソルを返さなければならない Hugging Face の多くの⽂変換モデルは、これらのパターンに従っている。これらはしばしば 384 次元の埋め込みである All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md

パフォーマンス https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md#performance • 概算で CPU は Intel i9-11950H を使⽤ • • • • LocalEmbedder.FindClosest と EmbeddingF32 を使⽤したインメモリ、シングルスレッドでの類似検索では、1,000個の候補を約 0.06ms、100,000個の候補を約6msで検索できる（テキストの⻑さに依存せず候補の数に⽐例） EmbeddingI1 を使⽤すると、これは~2.8msまで下がる • • • • 50⽂字の⽂字列に対してembedder.Embedを使⽤した場合、約0.5msのCPU時間を要する そのため、何千もの⽂字列（または⾮常に⻑い⽂字列）の埋め込みを計算する場合、アプリを再起動するたびにすべてをゼロから再計 算するのではなく、計算された埋め込みを既存のデータベースに保存する価値がある（例えばユーザーが対応するテキストに変更を保存 する度） したがって、何千万もの候補を検索する必要がある場合、Faiss や外部のベクトルデータベースを使⽤するなど、より⾼度な類似検索オプ ションを検討する必要がある ベンチマークによると、LocalEmbedder.FindClosest のパフォーマンスは、Flat インデックスタイプを使⽤した Faiss と同等 HNSW や IVF のような、より強⼒なインデックスを使⽤した場合のみ、Faiss より優れた速度を得ることができる スケールアップのすすめ • • • • • • SmartComponents.LocalEmbeddings の全体的な⽬標は、セマンティック検索を簡単に始められるようにすること 多くのアプリケーションにはこれで⼗分かもしれない。しかし、もし使いこなせなくなったら︓ 例えば、OpenAI エンベッディングや Azure OpenAI エンベッディングなど。 サーバー上で Faiss を使って類似性検索を実⾏できる（例えば、.NET で FaissSharp、faissmask、FaissNet を介して） これにより⾃分のデータでトレーニングできる、より強⼒なインデックスを設定できる。さらに多くのことを学べる また、Faiss の代わりに、pgvector やクラウドベースのベクトルデータベースサービスなどの外部ベクトルデータベースを使⽤することもできる All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md
• https://github.com/facebookresearch/faiss
• https://github.com/facebookresearch/faiss/wiki/Faiss-indexes
• https://platform.openai.com/docs/guides/embeddings
• https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/embeddings
• https://gitlab.com/josetruyol/faisssharp
• https://github.com/andyalm/faissmask
• https://github.com/fwaris/FaissNet
• https://github.com/pgvector/pgvector

Semantic Kernel での使⽤

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md#usage-with-semantic-kernel

•
•

この ONNX ベースのローカル埋め込みジェネレータを Semantic Kernel で使いたい場合、参照する必要があるパッケージは
SmartComponents.LocalEmbeddings.SemanticKernel のみ
このパッケージを参照したら、AddLocalTextEmbeddingGeneration を使って、Kernel にローカル埋め込みジェネレータを追加
できる︓
var builder = Kernel.CreateBuilder();
builder.AddLocalTextEmbeddingGeneration();

•

次いで Semantic Kernel の通常の⽅法で埋め込みを⽣成できる︓
var kernel = builder.Build();
var embeddingGenerator =
kernel.Services.GetRequiredService<ITextEmbeddingGenerationService>();
var embedding = await embeddingGenerator.GenerateEmbeddingAsync("Some text here");

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md
• https://learn.microsoft.com/en-us/semantic-kernel/overview/

Smart ComboBox All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 25

Smart ComboBox https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md • コンボボックスは、ユーザーが値を⼊⼒し、オートコンプリートのドロップダウンから事前定義された値を選択できる UI ⼊⼒要素 • 従来のコンボボックスは、部分⽂字列の完全⼀致に基づいてのみ値を提案。 • スマートコンボボックスは、セマンティックマッチ（つまり、最も密接に関連する意味を持つオプション）を提案する ことにより、これをアップグレード • これは、探している事前定義された⽂字列を正確に知らない/覚えていないユーザーにとって、より便利 All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md

使⽤例 https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md#example-use-cases • 会計カテゴリー • • • 経費トラッキングアプリで、ユーザーが航空券の請求を提出したい Category “フィールドで、ユーザーは ”plane tic “と⼊⼒し始める︓ それがこのシステムでの正しい会計カテゴリー名 だから。 セマンティックマッチングがなければ、ユーザーが何百もの会計カテゴリー名の中から、航空券の正しいカテゴリーを⾒つけ るのは難しかった • タグとラベル • • • バグトラッキングシステムでは、ユーザーが既存のラベルを選択するか、新しいラベルを作成して、ラベルやタグを issue に添付することができる Label “フィールドに ”slow “と⼊⼒すると、Smart ComboBox は ”Performance “と ”Usability “を提案する これにより、適切なラベルがすでに存在することに気づかず、同じコンセプトに対して複数のラベルを作成してしまうという よくある問題が解決される All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md

Blazor でのスマートコンボボックスの追加

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md#adding-smart-combobox-in-blazor

•
•

Blazor のスマートコンポーネントのインストール⼿順に従っていることを確認
Smart ComboBox の場合、完全にローカルで動作するため、OpenAI のバックエンドを設定する必要はない
<SmartComboBox Url="api/accounting-categories" @bind-Value="@text" />
@code {
string? text; // Optionally, set a default value here
}

•
•
•

Url 属性と @bind-Value 属性は両⽅とも必須
このUrl に⼀致する API エンドポイントを設定する必要あり
SmartComboBox は InputText と全く同じように、Blazor のバインディング、フォーム、バリデーション機能と統合

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md
• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-blazor.md

Blazor での Smart ComboBox の追加

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md#adding-smart-combobox-in-blazor

•
•

Blazor のスマートコンポーネントのインストール⼿順に従っていることを確認
Smart ComboBox の場合、完全にローカルで動作するため、OpenAI のバックエンドを設定する必要はない
<SmartComboBox Url="api/accounting-categories" @bind-Value="@text" />
@code {
string? text; // Optionally, set a default value here
}

•
•
•

Url 属性と @bind-Value 属性は両⽅とも必須
このUrl に⼀致する API エンドポイントを設定する必要あり
SmartComboBox は InputText と全く同じように、Blazor のバインディング、フォーム、バリデーション機能と統合

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md
• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-blazor.md

MVC/Razor ページに Smart ComboBox を追加する - 1

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md#adding-smart-combobox-in-mvcrazor-pages

•
•
•

MVC/Razor Pages ⽤のスマートコンポーネントのインストール⼿順に従っていることを確認
Smart ComboBox は、完全にローカルで動作するので、OpenAI のバックエンドを設定する必要なし
.cshtml ファイル（通常は<form>の中）に、<smart-combobox>タグを追加 例︓
<smart-combobox url="~/api/accounting-categories" />

•
•

<smart-combobox url="~/api/accounting-categories" />を追加
url 属性は必須、この url に⼀致する API エンドポイントを設定する必要あり

API エンドポイントの設定
•
•

Blazor または MVC/Razor Pages のいずれを使⽤している場合でも、Smart ComboBox がサジェストを取得するため
に呼び出す API エンドポイントを設定する必要あり
これを⾏うには、サーバーの Program.cs に移動し、app.Map* API への他の呼び出しと⼀緒に以下を追加︓

var candidates = new[] { "Transport", "Rent", "Payroll", "Party" };
app.MapSmartComboBox("api/accounting-categories",
request => candidates);
•

これを実⾏しても Smart ComboBox がまだあまりスマートではない（ユーザーが何を⼊⼒しても、常にこれら4つの固定
候補を使⽤するため）

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md
• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-mvc-razor-pages.md

MVC/Razor ページに Smart ComboBox を追加する - 2

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md#adding-semantic-matching

セマンティックマッチングの追加
• セマンティックマッチングは、⾃然⾔語⽂字列を数値ベクトルに変換する⽅法であるエンベッディングを使って実現される
• 2つの⽂字列が概念的に関連しているほど、そのベクトルは近くなる
• エンベッディングの計算には、外部の AI サービスを利⽤可能だが、サーバー上で⾮常に安価かつ簡単に計算できる（GPU
必要なし – CPU で⼗分）
<smart-combobox url="~/api/accounting-categories" />
埋め込みサービスの参照と登録
サーバプロジェクトに SmartComponents.LocalEmbeddings パッケージへの参照を追加︓
dotnet add package --prerelease SmartComponents.LocalEmbeddings
次に、Program.cs の // Add services to the container コンテナにサービスを追加し、登録する︓
builder.Services.AddSingleton<LocalEmbedder>();

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md

MVC/Razor ページに Smart ComboBox を追加する - 3

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md#adding-semantic-matching

セマンティックマッチングの実⾏
• app.MapSmartComboBox への既存の呼び出しを以下のように置き換える︓
// 埋め込みを⼀旦計算する
var embedder = app.Services.GetRequiredService<LocalEmbedder>()︔
var categories = embedder.EmbedRange(new[] { "Groceries", "Utilities", "Rent", "Mortgage",
"Car Payment", "Car Insurance", "Health Insurance", "Life Insurance", "Home Insurance",
"Gas", "Public Transportation", "Dining Out", "Entertainment", "Travel", "Clothing",
"Electronics", "Home Improvement", "Gifts", "Charity", "Education", "Childcare", "Pet
Care", "Other" })︔
app.MapSmartComboBox("api/accounting-categories"、
request => embedder.FindClosest(request.Query, categories))︔
• アプリケーションを実⾏すると、セマンティックマッチを提案するようになったことがわかる
• 例えば、"cat "と⼊⼒すると、"Pet Care "を提案し、"plane "と⼊⼒すると、"Travel "を提案

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md

MVC/Razor ページに Smart ComboBox を追加する - 4 https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md#adding-semantic-matching セマンティックマッチングの実⾏（続き） • たいていの場合、上記のコードのように、固定されたハードコードされた候補リストを持ちたくはないはず • エンベッディングを既存のデータストアに保存したい場合が多い（例えば、リレーショナル DB のエンティティタイプにエンベッディン グというフィールドとして） • 埋め込み値の計算、保存、問い合わせの詳細については、 Local Embeddings を参照 • MapSmartComboBox に提供されるリクエスト パラメータには HttpContext プロパティも含まれることに注意 • これを使⽤して、他の DI サービスにアクセスしたり、アクセス制御を実⾏したり、ユーザ固有の結果を返したりできる API エンドポイントを⼿動で実装する MapSmartComboBox を使⽤したくない場合は、以下の限り、好きな⽅法で API エンドポイントを⼿動で実装できる︓ 1. Url または url で指定した URL で POST リクエストに応答する 2. POST ボディのパラメータ inputValue、maxResults、および similarityThreshold を受け付ける (application/x-www-form-urlencoded) 3. JSON形式の⽂字列配列で応答する All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md
• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/local-embeddings.md

Smart ComboBox のスタイリング

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md#styling-the-combobox

•
•
•
•

Smart ComboBox は HTML の <input> 要素としてレンダリングされる
<input> に適⽤される任意の CSS クラス名またはその他の HTML 属性を追加して、スタイルを設定できる
suggestions ドロップダウンは、smart-combobox というタグ名の HTML カスタム要素としてレンダリングされる
したがって、実⾏時にレンダリングされる HTML 構造は以下の通り ︓
（さらに role や aria-* を含む多くの属性があるが、わかりやすくするためにここでは省略）
<input value="Some value">
<smart-combobox class="smartcombobox-suggestions">
<div class="smartcombobox-suggestion">Suggestion 1/div>
<div class="smartcombobox-suggestion selected">Suggestion 2 (selected)</div>
<div class="smartcombobox-suggestion">Suggestion 3</div>
</smart-combobox>

• 外観をカスタマイズするために、これらの CSS クラス名を⾃分の .css ファイルからターゲットにすることができる
スコープ付きCSSの使⽤
• スコープされた CSS（すなわち .razor.css または .cshtml.css ファイル）を使⽤している場合、⼦コンテキストで
レンダリングされるため、これらのクラス名に⼀致させるために ::deep 擬似セレクタを使⽤することを忘れない。例︓
::deep .smartcombobox-suggestions { /* ... */ }
All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md

サジェスチョンのカスタマイズ https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md#customizing-the-suggestions • Smart ComboBox では、以下のパラメータも使⽤できる︓ • Maximum number of suggestions（デフォルト︓10） • Blazor <SmartComboBox MaxSuggestions="3" ... /> • MVC/Razorページ︓ <smart-combobox max-suggestions="3" ... /> • Similarity threshold（デフォルト︓0.5、範囲︓0〜1）。類似度が低いマッチは表⽰されない。 • これを⾼くしすぎると、テキストが完全⼀致しない限り、マッチしない • Blazor <SmartComboBox SimilarityThreshold="0.6f" ... /> • MVC/Razor ページ︓ <smart-combobox similarity-threshold="0.6f" ... /> • これらのパラメータは単に API エンドポイントへの指⽰であることに注意 • デフォルトでは MapSmartComboBox はこれらの指⽰に従うも、API エンドポイントを⼿動で実装する場合、コードで これらの指⽰に従うか無視するかは⾃由 All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md

Smart Paste All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 36

Smart Paste https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md • ユーザーのクリップボードのデータを使ってフォームに⾃動的に⼊⼒するインテリジェントなアプリ機能 • Web アプリの既存のフォームに使⽤できる All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md

使⽤例 https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md#example-use-cases • 郵送先住所フォーム • • 電⼦メールやWord⽂書から住所を丸ごとコピーし、アプリケーションで「Smart Paste」をクリックすると、フォームの 住所関連フィールド（名前、1⾏⽬、2⾏⽬、市町村、都道府県など）にすべて⼊⼒されます。 これにより、各フィールドを⼿⼊⼒したり、各フィールドを個別にコピー＆ペーストする必要がなくなるため、ユーザーの 作業負担が軽減されます。 • バグ追跡フォーム • • • ユーザーは（例えば IM/Teams 経由で送られてきた）問題の⾃然⾔語による短い説明をコピーし、「新規課題 の作成」ページ内で「Smart Paste」をクリックすることができる これにより、クリップボードのテキストに基づいて、「タイトル」、「深刻度」、「対処⼿順」などのフィールドが⼊⼒される ⾔語モデルは必要に応じてソース・テキストを⾃動的に⾔い換えます。例えば、「画⾯YでXをクリックしました」のよう なフレーズを、「1.画⾯Yに移動し、2.Xをクリックします」のような再現ステップに変換する • Smart Pasteはどんなフォームでも使えるように設計されている • システムが HTML からフィールドの意味を推測するので、フォームを設定したり、注釈を付けたりする必要は ない • より良い結果を得るために、オプションで注釈を付けることができる All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md

Blazor での Smart ComboBox の追加

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md#adding-smart-combobox-in-blazor
•
•

Blazor の スマートコンポーネントのインストール⼿順を確認（Smart Pasteの前提条件である OpenAI バックエンドの設定も含む）
.razor ファイルの <form> または <EditForm> 内に <SmartPasteButton> コンポーネントを追加 例︓
@page "/"
@using SmartComponents
<form>
<p>Name: <InputText @bind-Value="@name" /></p>
<p>Address line 1: <InputText @bind-Value="@addr1" /></p>
<p>City: <InputText @bind-Value="@city" /></p>
<p>Zip/postal code: <InputText @bind-Value="@zip" /></p>
<button type="submit">Submit</button>
<SmartPasteButton DefaultIcon />
</form>
@code {
string? name, addr1, city, zip;
}

•
•

このアプリを実⾏すると、他のアプリケーションからクリップボードに住所をコピーし、“Smart Paste ”ボタンをクリックすることで、対応する全て
のフォームフィールドに記⼊できる
注︓この例は SmartPasteButton を表⽰するだけ、フォーム送信についての詳細は Blazor のドキュメントを参照
All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md
• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-blazor.md
• https://learn.microsoft.com/en-us/aspnet/core/blazor/forms

MVC / Razor Pages に Smart Paste を追加する https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md#adding-smart-paste-in-mvc--razor-pages • • • MVC/Razor Pages ⽤のスマートコンポーネントのインストール⼿順を確認 これにはSmart Pasteの前提条件である OpenAI バックエンドの設定も含まれる ページ/ビューの .cshtml ファイルの <form> 内に、<smart-paste-button> タグを追加 例 : <form> <p>Name: <input name="name" /></p> <p>Address line 1: <input name="addr1" /></p> <p>City: <input name="city" /></p> <p>Zip/postal code: <input name="zip" /></p> <button type="submit">Submit</button> <smart-paste-button default-icon /> </form> • このアプリを実⾏すると、他のアプリケーションから住所をクリップボードにコピーし、「Smart Paste」ボタンをクリックすることで、 対応するフォーム・フィールドを全て埋めることができる All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md
• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-mvc-razor-pages.md
• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/configure-openai-backend.md

テキスト・ラベルのカスタマイズ
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md#customizing-the-text-label

• テキストラベルをカスタマイズするには、任意の⼦コンテンツを渡す
• これを使⽤して、ローカライズされたテキストや、カスタムアイコンなどのボタンコンテンツを指定することができる
// Blazor
<SmartPasteButton>Smart paste, baby!</SmartPasteButton>
// MVC/Razor Pages
<smart-paste-button>Smart paste, baby!</smart-paste-button>

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md

ボタンのスタイリング
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md#styling-the-button
•
•
•

スマート・ペースト・ボタンはシンプルな HTML の <button> 要素として表⽰される
<button>に適⽤される CSS クラス名やその他の HTML 属性を追加して、スタイルを設定できる。
デフォルトでは、スマート・ペースト・ボタンはスマート・ペースト・ボタンという CSS クラス名を持ちます。Smart Pasteが実⾏されている間
（サーバーからの応答を待っている間）、ボタンはそれ⾃⾝に disabled 属性を適⽤。以下のように CSS でスタイルを適⽤できる︓
/* Applies to all smart paste buttons all the time */
.smart-paste-button { /* your styles here */ }
/* Applies to smart paste buttons while they are waiting for a server response */
.smart-paste-button:disabled { /* your styles here */ }

•

<SmartPasteButton> または <smart-paste-button> タグに明⽰的に class 属性を設定することで、デフォルトの CSS クラス
名 smart-paste-button を上書きできる

スコープ付きCSSの使⽤
• スコープされた CSS (すなわち、.razor.css または .cshtml.css ファイル) を使⽤している場合、⼦コンテキストでレンダリングされるため、
ボタンに⼀致させるために ::deep 擬似セレクタを使⽤すること 例︓
::deep .smart-paste-button { /* ... */ }
::deep .smart-paste-button:disabled { /* ... */ }

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md

アイコンのレンダリング
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md#rendering-an-icon
•
•
•
•
•
•
•

オプションで、ボタン内にデフォルトの “Smart Paste” アイコンをレンダリングできる︓
Blazor︓ <SmartPasteButton DefaultIcon />
MVC/Razor Pages︓ <smart-paste-button default-icon />
ボタン内のインライン <svg class=ʻsmart-paste-iconʼ> 要素としてレンダリングされる
smart-paste-icon のCSSクラス名を使って、アイコンに追加のスタイリング・ルールを適⽤できる
カスタムアイコンを使いたい場合は、DefaultIcon や default-icon を設定する代わりに、⼦コンテンツとしてアイコンを指定する︓
Blazor︓
<SmartPasteButton>
<svg>...</svg> <!-- Can be inline or use a 'src' attribute -->
Click me now!
</SmartPasteButton>

•

MVC/Rαzor Pages︓
<smart-paste-button>
<svg>...</svg> <!-- Can be inline or use a 'src' attribute -->
Click me now!
</smart-paste-button>

•

<button>の中にレンダリングできる⼦コンテンツや、<button>に意味のある属性を指定することができる

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md

AI による推論のカスタマイズ - 1

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md#customizing-the-ai-inference
• デフォルトでは、Smart Paste はフォームフィールドの意味を⾃動的に推測し、⾔語モデルを指⽰するプロンプトが組み込まれている
• これらのいずれかをカスタマイズすることができる
フォームフィールドに注釈を付ける
• デフォルトでは、Smart Pasteは <form> 内のすべてのフィールド（<input>、<select>、<textarea>要素）を検出し、関連す
る <label>、name 属性、または近くのテキストコンテンツに基づいて、それらのフィールドの説明を⽣成する
• このフォーム記述⼦全体がバックエンドの⾔語モデルに供給され、プロンプトを作成するために使われる
• オプションで、特定のフォームフィールドでこれを上書きできる。そのためには、⾔語モデルに提供するフィールド記述を設定する datasmartpaste-description 属性を追加する。例 :
<input data-smartpaste-description="The user's vehicle registration number which must be in the form
XYZ-123" />
<textarea data-smartpaste-description="The job description which must start with JOB TITLE in all
caps, and then contain one paragraph"></textarea>
<input type="checkbox" data-smartpaste-description="True if the product description indicates this
is for children, otherwise False" />
•
•

⾔語モデルの出⼒はさまざまであり、プロンプトエンジニアリングはそれ⾃体がスキル
個⼈のシナリオで最良の結果を得るためには様々な試⾏錯誤する必要がある
All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md

AI による推論のカスタマイズ - 2

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md#customizing-the-ai-inference
プロンプトのカスタマイズ
• SmartPasteInference の独⾃のサブクラスを DI サービスとして登録して、プロンプトをカスタマイズできる
• 例︓次のクラスを定義︓
class MySmartPasteInference : SmartPasteInference
{
public override ChatParameters BuildPrompt(SmartPasteRequestData data)
{
var prompt = base.BuildPrompt(data);
prompt.Messages!.Add(new ChatMessage(ChatMessageRole.System,
"All form field values must be in ALL CAPS"));
prompt.Temperature = 0.5f; // Less deterministic, more creative
return prompt;
}
}
•

そして、Program.cs の builder.Services.AddSmartComponents を呼び出す前に登録する︓
builder.Services.AddSingleton<SmartPasteInference, MySmartPasteInference>();

•

デバッガと BuildPrompt メソッド内のブレークポイントを使⽤すると、デフォルトのプロンプトとパラメータを検査し、変更するコードが書ける
All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md

AI による推論のカスタマイズ - 3

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md#customizing-the-ai-inference

⾔語モデルバックエンドのカスタマイズ
• OpenAI や Azure OpenAI 以外のバックエンドを使いたい場合は、IInferenceBackend を実装し、
Program.cs でカスタム型を使う︓
builder.Services.AddSmartComponents()
.WithInferenceBackend<MyCustomInferenceBackend>();
class MyCustomInferenceBackend : IInferenceBackend { ... }

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md

Smart TextArea All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 47

Smart TextArea https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md • 従来の TextArea を AI でアップグレードしたもの • 設定とユーザーが現在⼊⼒している内容に基づき、⽂章全体への⾃動補完候補を提供 All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md

使⽤例 https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#example-use-cases カスタマーサービス • 例えば、ライブチャットシステム、サポートチケットシステム、CRM、バグトラッカーなど • Smart TextArea で、エージェントの⽣産性を向上させ、より少ないキーストロークでより良いフレーズの回答が書ける • Smart TextArea の主な利点は（OS に内蔵されているオートコンプリートと⽐較して）ハウススタイルや、定義済みの フレーズ、ルール、ポリシー、URL などを設定できること • これにより、エージェントが使⽤することを好むトーン、形式的なレベル、挨拶などを設定することができる ビジネスプロセスの追跡 • 多くのプロセスでは、フリーテキストを使⽤してイベントやステータスを追跡する必要がある • Smart TextArea は、業界やビジネス特有の⽤語やイベントを参照するために必要なキー⼊⼒の回数を減らせる • 例えば、⾃動⾞整備記録システムでは、「タイヤ空気圧チェック済み」を「タイヤ空気圧チェック済み」と⼊⼒したり、「次回 のサービス予定」を「次回のサービス予定」と⼊⼒したりすることができる All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#example-use-cases

Blazor に Smart TextArea を追加する
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#adding-smart-textarea-in-blazor

• Blazor のスマートコンポーネントのインストール⼿順を確認
• これには Smart TextArea の前提条件である OpenAI バックエンドの設定も含まれる
• .razor ファイルに <SmartTextArea> コンポーネントを追加 例 :
@page "/"
@using SmartComponents
<SmartTextArea @bind-Value="@text" UserRole="Generic professional" />
@code {
string? text; // Optionally, set an initial value here
}
• 属性と @bind-Value 属性は両⽅とも必須
• サジェストをカスタマイズする⽅法については、以下を参照
• SmartTextArea は、InputTextArea と全く同じ⽅法で Blazor のバインディング、フォーム、バリデーションシステムと
統合

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#adding-smart-textarea-in-blazor
• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-blazor.md
• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/configure-openai-backend.md

MVC / Razor Pages に Smart TextArea を追加する https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#adding-smart-textarea-in-mvc--razor-pages • • • MVC/Razor Pages ⽤のスマートコンポーネントのインストール⼿順を確認 これには Smart Paste の前提条件である OpenAI バックエンドの設定も含まれる ページ/ビューの .cshtml ファイルの <form> 内に、<smart-paste-button> タグを追加 例 : <smart-textarea user-role="Generic professional" /> • • user-role 属性は必須 サジェストのカスタマイズ⽅法についてはこの後の項⽬を参照 All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md
• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-mvc-razor-pages.md
• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/configure-openai-backend.md

TextArea のスタイリング

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#styling-the-textarea
•
•
•

スマート・テキストエリアはシンプルな HTML <textarea> 要素としてレンダリングされる
CSS クラス名や <textarea> に適⽤される他の HTML 属性を追加することでスタイルを設定できる 例︓
Blazor :
<SmartTextArea class="my-textarea" placeholder="Type here..."
rows="10" cols="80" ... />

•

MVC/Razor Pages :
<smart-textarea class="my-textarea" placeholder="Type here..."
rows="10" cols="80" ... />

スコープ付き CSS の使⽤
• スコープされた CSS（すなわち、.razor.css または .cshtml.css ファイル）を使⽤している場合、TextArea は⼦コンテ
キストでレンダリングされるため、TextArea に⼀致させるために ::deep 擬似セレクタを使⽤すること 例︓
::deep .my-textarea { /* ... */ }

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md

サジェスチョンのカスタマイズ - 1 https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#customizing-the-suggestions • デフォルトのプロンプトでは、⾔語モデルは以下に基づいて補完を提案︓ • • • カーソルの前後にある既存のテキスト UserRole/ユーザロール値 UserPhrases/ユーザフレーズの値 • UserRole には、誰がどのような理由で⼊⼒しているのかを表す⽂字列を設定する必要あり 例︓ • • • "スタッフからの問い合わせに返信する⼈事担当者" "GitHub の課題に返信するオープンソースプロジェクトオーナー" "@SomeUser が投稿した「v3にアップグレードしたらビルドに失敗した」というタイトルの GitHub issue に返信する オープンソースプロジェクトオーナー” • UserPhrases を⽂字列[](配列)に設定して、⾔語モデルが好みのトーン/ボイスや⼀般的なフレーズを使っ て返信できるようにしたり、ポリシーや URL、その他補完候補に組み込むのに関連しそうなあらゆる情報を与え たりできるようにする All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md

サジェスチョンのカスタマイズ - 2 https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#reducing-invented-information 捏造された情報を減らす • 「タイヤ空気圧は 35psi です」のようなユーザーフレーズを設定しないこと • 代わりに、特別なトークン NEED_INFO を使⽤ 例︓"Tyre pressure is NEED_INFO ” • ⾔語モデルはこの特別なトークンにヒットするたびに補完を終了 • そのため、補完は "Tyre pressure is "と表⽰され、ユーザーが値を⼊⼒できるようになる • ⾔語モデルは⽣来予測不可能なので、最も有⽤なフレーズを⾒つけるには実験が必要 • NEED_INFO を使っても、不要な情報を作り出すことがある • 必要であれば、⾃分のシナリオに合うようにプロンプトをカスタマイズすることができる All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md

サジェスチョンのカスタマイズ – 3 - a

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#blazor-example
Blazor の例︓
<SmartTextArea @bind-Value="@text" UserRole="@userRole" UserPhrases="@userPhrases" />
@code {
string? text;
string userRole = "Staff at a wild-west themed restaurant called 'The Wild Brunch’,
replying to a booking enquiry";
string[] userPhrases = [
"Yee-haw!",
MVC/Razor
の例︓
"So Pages
you wanna
mosey on down for a bite?",
"Why sure, we can cook you up somethin' special",
"We're open everyday except Tuesdays (that's when we're at the rodeo)",
"Sorry pardner, even if you're the sherrif, we gotta stick to our policy!",
"Can I book you in for NEED_INFO",
"How can I help you, kind stranger?",
"Our website is at https://wildbrunch.example.com/"
];
}
All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md

サジェスチョンのカスタマイズ – 3 - b

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#mvcrazor-pages-example
MVC/Razor Pages の例︓
@{
ViewData["Title"] = "Home Page";
string userRole = "Maintainer of this open-source project replying to GitHub issues";
string[] userPhrases = [
"Thankyou for contacting us.",
"To investigate, we'll need a repro as a public Git repo.",
"Could you please post a screenshot of NEED_INFO",
"This sounds like a usage question. This issue tracker is intended for bugs and feature
proposals. Unfortunately we don't have capacity to answer general usage questions and would
recommend StackOverflow for a faster response.",
"We don't accept ZIP files as repros.",
];
}
<smart-textarea user-role="@userRole" user-phrases="@userPhrases" />

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md

サジェスト UX のコントロール https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#controlling-the-suggestion-ux • ユーザーが⼊⼒を⼀時停⽌した後、TextArea がフォーカスされると、サジェストが表⽰される • • ⾮タッチデバイス（デスクトップ）では、デフォルトで、サジェストはテキストエリア内のインラインに、カーソルの前⽅にグ レーのテキストで表⽰される。ユーザーは “tab ”キーを押すことで、その提案を受け⼊れることができる タッチ・デバイス（モバイル）の場合、デフォルトでは、カーソルの下にフローティング・オーバーレイで表⽰される。ユー ザーは提案のオーバーレイをタップすることで（または、そのようなキーがあれば「tab」を押すことで）提案を受け⼊れる ことができる • デフォルトのUIスタイルを上書きしたい場合は、data-inline-suggestions 属性を渡せる 例︓ • • Blazor : <SmartTextArea data-inline-suggestions="true" ... /> MVC/Razor Pages︓ <smart-text-area data-inline-suggestions="true" ... /> 属性値 真 偽 設定なし 動作 サジェスチョンは常にインラインで表⽰され、“tab ”を押すことで受け⼊れることができる サジェスチョンは常にフローティングオーバーレイとして表⽰され、タップまたはクリックすることができる タッチデバイスではオーバーレイが使⽤され、タッチデバイス以外ではインラインが使⽤される All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md

AI による推論のカスタマイズ - 1

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#customizing-the-ai-inference
• Smart Textareaには⾔語モデルのプロンプトを⽣成するロジックが含まれ、カスタマイズもできる
プロンプトのカスタマイズ
• SmartTextAreaInference の独⾃のサブクラスを DI サービスとして登録することで、プロンプトをカスタマイズできる 例︓次のクラス定義
class MySmartTextAreaInference : SmartTextAreaInference
{
public override ChatParameters BuildPrompt(
SmartTextAreaConfig config, string textBefore, string textAfter)
{
var prompt = base.BuildPrompt(config, textBefore, textAfter);
prompt.Messages!.Add(new(ChatMessageRole.System,
"The suggestions must ALWAYS BE IN ALL CAPS."));
prompt.Temperature = 0.5f; // Less deterministic, more creative (default = 0)
return prompt;
}
}
Program.cs
で、builder.Services.AddSmartComponents を呼び出す前に、それを登録︓
•
•

builder.Services.AddSingleton<SmartTextAreaInference, MySmartTextAreaInference>()︔
デバッガを使⽤し、BuildPrompt メソッド内にブレークポイントを設定すると、デフォルトのプロンプトとパラメータを検査し、それを変更するコードを記述できる

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md

AI による推論のカスタマイズ - 2

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md#customizing-the-language-model-backend

⾔語モデルバックエンドのカスタマイズ
• OpenAI や Azure OpenAI 以外のバックエンドを使いたい場合は、IInferenceBackend を実装し、
Program.cs でカスタム型を使う︓
builder.Services.AddSmartComponents()
.WithInferenceBackend<MyCustomInferenceBackend>();
class MyCustomInferenceBackend : IInferenceBackend { ... }

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md

AI による推論のカスタマイズ - 3

https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md#customizing-the-ai-inference

⾔語モデルバックエンドのカスタマイズ
• OpenAI や Azure OpenAI 以外のバックエンドを使いたい場合は、IInferenceBackend を実装し、Program.cs で
カスタム型を使う︓
builder.Services.AddSmartComponents()
.WithInferenceBackend<MyCustomInferenceBackend>();
class MyCustomInferenceBackend : IInferenceBackend { ... }

All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md

まとめ All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 61

Agenda まとめ l OpenAI バックエンドを構成する l Blazor スマート コンポーネントの使⽤を開始する l MVC / Razor Pages スマート コンポーネントの使⽤を開始する l ローカル埋め込み l Smart ComboBox l Smart Paste l Smart TextArea l まとめ All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 62

JJUG ナイトセミナー 5/14 19:00-21:00 場所・アジェンダ TBU https://www.java-users.jp/ (仮）「Spring AI を使⽤して AI 学習⽀援アシスタントを作成するためのステップバイステップガイド」 All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 告知

• https://www.java-users.jp/

AI 駆動開発 (AI-Driven Development) 勉強会（第2回） https://aid.connpass.com/event/317096/ (仮）新たな AI 駆動開発の潮流（Devin、AutoDev の登場と将来の開発スタイル） All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 告知

• https://aid.connpass.com/event/317096/

Thank You All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.