ブラウザに組み込まれた Gemini Nano など、ウェブ上で AI を活用した機能を構築する
使ってみる プレビュー プログラムに参加する

組み込みの AI

AI が組み込まれているため、ブラウザが基盤モデルとエキスパート モデルを提供して管理します。Chrome では、Gemini Nano が含まれます。
ウェブサイトやウェブ アプリケーションは、ブラウザで管理される AI モデルと API を使用して、AI を活用したタスクを実行できます。
AI を組み込んだ機能やアプリケーションの構築を開始するための要件について学びます。
Chrome で Gemini Nano で使用できる API とその提供状況を確認します。
学習コース

会社の義務であれ、熱意であれ、AI のための AI は役に立ちません。優れた機能はユーザーのニーズから生まれ、提供する価値によって評価されます。

このコースでは、責任があり、使いやすく、価値のある AI システムを使用してウェブ アプリケーションを構築する方法を学びます。これにより、アプリケーションでテクノロジーの可能性を最大限に引き出すことができます。

学習を始める

API の詳細を確認する

オリジン トライアルに参加して、これらの API を本番環境で使い始めましょう。
コンテンツの読みやすさと文法を改善します。
指定されたライティング タスクに沿って新しいコンテンツを作成します。
既存のテキストを長くしたり短くしたり、トーンを変更したりして、推敲します。
ローカル AI モデルを使用して、ブラウザでテキストをリアルタイムで翻訳します。ユーザーが母語で投稿できるようにします。
Language Detector API を使用して、特定のテキストで使用されている言語を特定します。
さまざまな長さと形式（文、段落、箇条書きリストなど）でさまざまなタイプの要約を生成します。
Prompt API の無限の可能性を探る。

AI を組み込んで構築

ユースケースを解決します。
Firebase AI Logic を AI アプリで使用して、クライアントサイド AI のクラウド フォールバックを行います。
複雑なコンテンツをクライアントサイドで抽出するための要約の要約手法について学びます。
このガイドでは、言語モデルを使用したセッション管理のベスト ��������ィ������ついて���明します。
サーバーサイドの生成 AI を使用してレビューを評価する。推論はサーバー上で行われます。
オンデバイス AI ソリューションで、洞察に満ちたレビューの投稿をサポートします。
Translator API でグローバルなカスタマー サポートを強化します。
ブラウザのカスタマイズとウェブ コンテンツの管理により、ブラウジング エクスペリエンスを向上させます。AI を使用して次世代の拡張機能を構築します。

おすすめの方法

モデルをデバイス上にキャッシュすることで、アプリケーションの起動を高速化します。
ストリーミングの概要と、AI と LLM でのストリーミングの仕組みを理解します。
以下のフロントエンドのベスト プラクティスに沿って、Gemini からストリーミングされた回答を表示します。
Chrome 内部の特別なページを使用して、Gemini Nano へのプロンプトのデバッグ詳細を確認します。
モデルのダウンロード中と、モデルを使用できるようになったタイミングをユーザーに知らせます。
Google Chrome が組み込みの AI モデルのダウンロード、更新、削除を管理する方法について説明します。

事例紹介

AI と Gemini Nano に関するニュース

デベロッパーの生産性

DevTools で Gemini とチャットします。このパネルから開始したスレッドには、検査対象のページの技術的な詳細に関するコンテキストが含まれています。
AI アシスタント パネルを使用すると、ウェブサイトの全体的なレイアウトや特定の要素のスタイルを把握し、AI 生成の CSS バグの修正を取得できます。
レイアウトの理解から飛行機の修正まで、ページのスタイル設定を簡単にする 5 つの方法をご確認ください。
コンソールを使用して、オンデバイス AI の結果を表示してデバッグします。
組み込みの AI API を使用して、Chrome の Gemini Nano のパワーを活用しましょう。
Chrome に搭載された組み込み AI API を使用して、ウェブアプリで��ーザー向けのコンテンツの翻訳、要約、作成、書き換えを行う方法を学びます。ハイブリッド ワークロードを構築する方法と、ブラウザに組み込まれた AI の将来について説明します。
AI API を確認する
クライアントサイド AI とクラウド AI を構築して、ニーズや顧客のニーズに合わせてウェブとブラウザを最適化できます。
AI を活用した Chrome 拡張機能
MediaPipe、LiteRT、Transformers.js などのライブラリと、WebAssembly や WebGPU などの最先端の Web API を使用して、優れた AI ドリブンのエクスペリエンスを構築できます。
まとめを読む

WebGPU

より高度な GPU 機能にアクセスできるウェブ グラフィック API の WebGPU で、AI への取り組みを後押ししましょう。
Chrome の WebGPU の最新情報をご確認ください。
ドキュメントを読む
Chrome で WebGPU を確認し、GPU での一般的な計算処理を高度なサポートを得ることができます。
ドキュメントを読む
WebGPU を使用して GPU にアクセスする方法について説明します。
ドキュメントを読む
クライアントサイドのブラウザベースの AI モデルを実際のブラウザ環境でテストする方法について説明します。
ドキュメントを読む
Chrome で WebGPU ���動作しない理由と、その修正方法について説明します。
ドキュメントを読む
MDN で API リファレンスを検索します。
MDN のサイトを見る

WebAssembly

Chrome を使用してウェブページで高性能アプリケーションを有効にする
AI 推論でよく使用されるタスクの WebAssembly の改善について説明します。
ドキュメントを読む
TensorFlow.js Wasm バックエンド WASM バックエンドと、XNNPACK ライブラリを使用してニューラル ネットワーク オペレータの実装を最適化する方法を学習します。
ドキュメントを読む
ONNX Runtime Web を本番環境にデプロイする方法と、アプリケーションに含める WebAssembly バイナリ ファイルについて説明します。
ドキュメントを読む

ウェブ AI のご紹介

web.dev
AI とも呼ばれるさまざまな新しいテクノロジーの基本と定義を理解します。
ドキュメントを読む
web.dev
ウェブの実務担当者として、新しいテクノロジーを慎重に、責任を持って構築することが重要です。
ドキュメントを読む
web.dev
低レイテンシ、サーバーサイド費用の削減、ユーザー プライバシーの強化などのメリットがあるクライ���ントサイド AI を使用する手法について学びます。
ドキュメントを読む