AI による次世代のウェブへようこそ。デベロッパーがウェブで優れたエクスペリエンスを簡単に構築できるよう、AI がどのように役立つかをご確認ください。
始める プレビュー プログラムに参加する

Chrome で Gemini Nano を使用する

Chrome の Gemini Nano でできることを再考。
Gemini エコシステムの最も効率的なモデルである Gemini Nano が Chrome に導入されます。
クライアントサイド AI は、データのプライバシーを保護し、レイテンシを改善しながら、強力なモデルをユーザーに提供します。
AI を組み込んだ機能やアプリケーションの構築を開始するための要件について学びます。
Chrome で Gemini Nano で使用できる API とその提供状況を確認します。

組み込みの AI API

オリジン トライアルに参加して、これらの API を本番環境で使い始めましょう。
始める
ローカル AI モデルを使用して、ブラウザでテキストをリアルタイムで翻訳します。ユーザーは母国語で投稿できるようになりました。
Language Detector API を使用して、特定のテキストで使用されている言語を特定します。
さまざまな長さと形式（文、段落、箇条書きリストなど）でさまざまなタイプの要約を生成します。
Chrome 拡張機能の Prompt API の無限の可能性をご確認ください。

AI を組み込んで構築

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

おすすめの方法

モデルをデバイス上にキャッシュすることで、アプリケーションの起動を高速化します。
ストリーミングの概要と、AI と LLM でのストリーミングの仕組みを理解します。
以下のフロントエンドのベスト プラクティスに沿って、Gemini からストリーミングされた回答を表示します。
Chrome 内部の特別なページを使用して、Gemini Nano へのプロンプトのデバッグ詳細を確認します。

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

Chromium Chronicle #33: アニメーションのビュー

Updated 2023年4月13日

ビューでレイヤベースのアニメーションを使用すると、パフォーマンスが向上し、 設定がむずかしいこともあります。「 AnimationBuilder レイヤの読みやすさを大幅に向上させ、 作成できます。 次の 2 つの間で連続的なクロスフェードをアニメーション化する必要があるとします。 ビューを示しています。 レイヤ アニメーション API を直接使用してこの処理を行う例を次に示します。 以下は、 AnimationBuilder

Chromium Chronicle #32: パッチ ギャップに注意する

Updated 2023年2月3日

Chromium のデベロッパーが n-day の悪用のリスクを低減する方法をご確認ください。

Chromium Chronicle #28: iOS で Chrome を使ってみる

Updated 2022年2月1日

Chrome の iOS アプリのコードを扱う方法を学びます。

デベロッパーの生産性

DevTools で Gemini とチャットします。このパネルから開始したスレッドには、検査対象のページの技術的な詳細に関するコンテキストが含まれています。
AI アシスタント パネルを使用すると、ウェブサイトの全体的なレイアウトや特定の要素のスタイルを把握し、AI 生成の CSS バグの修正を取得できます。
レイアウトの理解から飛行機の修正まで、ページのスタイル設定を簡単にする 5 つの方法をご確認ください。
コンソールを使用して、オンデバイス AI の結果を表示してデバッグします。

組み込み AI チャレンジの受賞者

組み込み AI チャレンジの受賞者を参考に、組み込み AI のアイデアを見つけましょう。
すべての受賞者
日々の小さなタスクのプロンプトを作成、変更、削除できる、軽量で動的検索バー。
ヒントを得る
読書障がい、ADHD、失読症のユーザーをサポートするようにウェブ コンテンツを調整します。
ヒントを得る
WordPress ブロック エディタに 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 を使用する手法について学びます。
ドキュメントを読む