AI Image Alt Text
AIビジョンモデルを使用して画像フィールドのalt テキストを生成します。手動・自動生成の両方に対応し、言語を考慮した出力が可能です。
ai_image_alt_text
インストール
composer require 'drupal/ai_image_alt_text:^1.0'
概要
AI Image Alt Text モジュールは AI モジュールエコシステムの一部であり、AIビジョンモデルを使用して画像フィールドのアクセシビリティ準拠の alt テキストを自動生成します。このモジュールは Drupal の画像フィールドウィジェットとシームレスに統合され、「AIで生成」ボタンを追加することで、コンテンツ編集者がワンクリックで説明的な alt テキストを生成できます。
このモジュールは、生成された alt テキストを保存前に確認・編集できる人間参加型ワークフローをサポートしています。エンティティの言語を自動検出し、対応する言語で alt テキストを生成するため、多言語サイトに最適です。カスタマイズ可能なプロンプトは柔軟性のために Twig テンプレートを使用し、画像はAIプロバイダーとのコストと互換性を最適化するために画像スタイルを使用して前処理できます。
オプションのサブモジュール(AI Image Bulk Alt Text)は、サイト全体で alt テキストが欠落しているすべての画像を検索して修正するための一括インターフェースを提供し、既存コンテンツのアクセシビリティ準拠を簡単に改善できます。
Features
- AIビジョンモデル(OpenAI、Anthropic、Fireworks AI など)を使用して画像フィールドの説明的な alt テキストを生成
- 保存前の手動レビューのための画像フィールドウィジェット上の「AIで生成」ボタンによる人間参加型ワークフロー
- 画像アップロード時の自動 alt テキスト生成(オプションでボタン非表示モードあり)
- 多言語サポートのためにエンティティの言語で alt テキストを生成する言語対応生成
- エンティティの言語名とファイル名のトークンを含む Twig テンプレートを使用したカスタマイズ可能な AI プロンプト
- AI に送信する前に画像の解像度とフォーマットを最適化する画像スタイル前処理の設定(コスト削減)
- 特定のAIプロバイダー/モデルの選択またはデフォルトのビジョンモデルの使用をサポート
- サイト全体で alt テキストが欠落しているすべての画像を検索して修正するための一括 alt テキスト生成サブモジュール
Use Cases
新しい画像のコンテンツ編集者ワークフロー
コンテンツ編集者が記事に画像をアップロードすると、alt テキストフィールドの横に「AIで生成」ボタンが表示されます。クリックすると、画像が設定済みの AI プロバイダーに送信され、alt テキストフィールドに説明的でアクセシビリティ準拠の説明が入力されます。編集者はコンテンツを保存する前にテキストを確認・修正できます。
大量の画像があるサイトでの自動 alt テキスト
多くの画像がアップロードされるサイトでは、管理者は設定で「アップロード時に自動生成」を有効にできます。これにより、画像がアップロードされると自動的に alt テキストが生成され、オプションで生成ボタンを非表示にできます。編集者は生成されたテキストを確認するだけで済みます。
多言語 alt テキスト生成
異なる言語(ドイツ語やフランス語の翻訳など)でコンテンツを編集する際、モジュールは自動的にエンティティの言語を検出し、その言語で alt テキストを生成するよう AI に指示するため、アクセシビリティコンテンツの適切なローカライゼーションが確保されます。
一括アクセシビリティ改善
alt テキストが欠落している多くの画像がある既存サイトでは、管理者は AI Image Bulk Alt Text サブモジュールを有効にし、/admin/config/media/ai_image_bulk_alt_text に移動して、「AIで Alt テキストを一括生成」ボタンを使用して最大50枚の画像の提案を一度に生成できます。各提案を確認し、編集を加えて、すべての変更をまとめて保存できます。
ブランド一貫性のためのカスタムプロンプト
特定の alt テキストガイドラインを持つ組織は、設定で AI プロンプトをカスタマイズして、ブランドボイスを適用したり、特定の用語を含めたり、デフォルトを超えるアクセシビリティ基準に従うことができます。Twig テンプレートにより、画像ファイル名などの動的コンテンツをプロンプトに含めることができます。
Tips
- 画像スタイル(デフォルトの「AI Image Alt Text」など)を使用して AI に送信する前に画像解像度を下げると、良好な alt テキスト品質を維持しながら API コストを大幅に削減できます
- デフォルトのプロンプトを組織のアクセシビリティガイドラインやブランドボイスに合わせてカスタマイズしてください
- 多言語サイトでは、モジュールが自動的にエンティティの言語で alt テキストを生成します - AI プロバイダーが必要な言語をサポートしていることを確認してください
- AI は複雑または曖昧な画像を誤って解釈することがあるため、保存前に生成された alt テキストを確認してください
- 一括生成サブモジュールは AI プロバイダーへの過負荷を避けるために画像を順次処理します - 大きなバッチには時間がかかります
- 頻繁に画像をアップロードするが alt テキストを忘れがちなユーザーロールには自動生成を有効にすることを検討してください
Technical Details
Admin Pages 2
/admin/config/ai/ai_image_alt_text
AI を使用した画像の alt テキスト生成方法を設定します。このページでは、AI に送信するプロンプトのカスタマイズ、画像前処理オプションの選択、使用する AI モデルの選択、自動生成動作の設定が可能です。
/admin/config/media/ai_image_bulk_alt_text
サイト全体で alt テキストが欠落しているすべての画像を検索して修正します。alt テキストのない最大50枚の画像をテーブルに表示し、個別または一括で alt テキストを生成し、提案を確認して変更を保存できます。
権限 2
Hooks 1
hook_field_widget_single_element_form_alter
画像フィールドウィジェットを変更して「AIで生成」ボタンを追加し、必要な JavaScript をアタッチします。alt フィールドが有効な ImageWidget インスタンスにのみ適用されます。
Troubleshooting 5
ユーザーが「Generate AI Alt Tags」権限を持っていること、画像フィールド設定で alt フィールドが有効になっていること、画像ビジョン機能を持つ動作中の AI プロバイダーが設定されていること(AI Image Alt Text 設定または AI モジュールのデフォルト)を確認してください。
/admin/config/ai/ai_image_alt_text に移動して特定の AI プロバイダー/モデルを選択するか、/admin/config/ai の AI モジュール設定でデフォルトの「Chat with Image Vision」プロバイダーを設定してください。
選択した AI プロバイダーが画像ビジョンをサポートし、有効な API 資格情報で適切に設定されていることを確認してください。一部のプロバイダーにはサイズやフォーマットの制限があります。画像スタイルを使用して解像度を下げてみてください。
このモジュールは生成にエンティティの言語を使用します。コンテンツが正しい言語バリアントで編集されていることを確認してください。言語は {{ entity_lang_name }} トークンを介して AI プロンプトに渡されます。
これは、すべてのコンテンツにわたる alt テキストが有効なすべての画像フィールドにすでに alt テキストが入力されていることを意味します。このページは alt フィールドが空の画像のみを表示します。
Security Notes 3
- 画像ファイルは分析のために外部 AI プロバイダーに送信されます - これがコンテンツとプライバシー要件にとって許容可能であることを確認してください
- 生成エンドポイント(/admin/config/ai/ai_image_alt_text/generate/{file}/{lang_code})は「generate ai alt tags」権限で保護されています
- 処理前にファイルアクセスが検証されます - ユーザーは表示権限を持つファイルに対してのみ alt テキストを生成できます