![](https://www.kuretom.com/wp-content/uploads/2023/04/a7a966e74eb49b3f5609b02a6c2e7d79.png)
ブラウザを開かなくても簡単に画像生成ができるんだね。
![](https://www.kuretom.com/wp-content/uploads/2023/04/259bb9d004303ed8fe5a6b78b50ae941.png)
Alexaアプリから実行できるよ。
![](https://www.kuretom.com/wp-content/uploads/2024/03/7f77967499ec98656f31e6e1af45590c-1.jpg)
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8803.jpg)
![](https://www.kuretom.com/wp-content/uploads/2024/03/f4205a7fc8c643dc3b86b8c5b1e653d7-1.png)
↓↓
自身のメールアドレスにURLが届く
↓↓
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8797-1.jpg)
↓↓
URLから画像が確認できる
↓↓
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8801-1.jpg)
本記事では、Alexaのカスタムスキル実装方法と実際の動作についてご紹介します。
Contents
構成と処理の流れ
主な構成要素は、以下のとおりです。
- Alexa
- Lambda
- EC2(Lambdaのレイヤー作成用)
- OpenAIのAPI(gptとDALL-E 3)
- Amazon SNS
![](https://www.kuretom.com/wp-content/uploads/2024/03/flow-1.jpg)
- アレクサスキルでLambda処理を呼び出す
- Alexaからの入力(日本語)をgptのAPIで英訳
- DALL-E 3のAPIの実行(プロンプトは2の処理で英訳したもの)
- 生成画像のURLをAmazon SNSで自身のメールアドレスに送信
Alexaのカスタムスキル作成
![](https://www.kuretom.com/wp-content/uploads/2024/03/image-2.png)
- カスタムスキルを作成
- カスタムスキルとLambdaの紐付け
カスタムスキルを作成
Alexaのカスタムスキルとは、自身で実装した処理に従ってアレクサが応答するというものです。
Alexa Developer Consoleから、カスタムスキルを作成することができます。
![](https://www.kuretom.com/wp-content/uploads/2023/05/20cfce153c6dcbd30dc35695758066ae-2.png)
![](https://www.kuretom.com/wp-content/uploads/2024/03/f2b6e0df75a6b82e3d12f3e779cdebe6.png)
カスタムスキル作成のさらに具体的な作成手順は、以下の記事をご確認ください。
Skill Invocation Nameの設定
作成したカスタムスキルのdeveloper consoleから、「Skill Invocation Name」を選択します。
![](https://www.kuretom.com/wp-content/uploads/2024/03/cd1c48f32dc9d799e11402973b45ad32.png)
カスタムスキルを呼び出すためのトリガーワードを設定します。
今回は「イラスト作成して」というトリガーワードでカスタムスキルが起動するようにしてみました。
![](https://www.kuretom.com/wp-content/uploads/2024/03/f0c683a8f9e8ccf49dd4548c77b4eaf8.png)
Intentsの作成
developer consoleからIntentsも作成しておきます。
ユーザーからの応答は、このIntentsに設定内容に応じて処理されます。
![](https://www.kuretom.com/wp-content/uploads/2024/03/906001af9b1c38871be12a2551493cba.png)
![](https://www.kuretom.com/wp-content/uploads/2024/03/440fb094a8607f412eb0a33293838cf4.png)
questionという名前でAMAZON.Languageというスロットを設定します。
![](https://www.kuretom.com/wp-content/uploads/2023/05/934d36cec8f72c892ecb2b5552d45a8b-1-1024x296.png)
ざっくりというと、日本語を検知したら「この処理が走るよ。」という意味のスロットです。
Lambda関数では、以下の箇所が該当します。
ユーザーからの応答が日本語として、questionに格納されます。
class ChatGPTImageGeneIntentHandler(AbstractRequestHandler):
def can_handle(self, handler_input):
return ask_utils.is_intent_name("ChatGPTImageGeneIntent")(handler_input)
def handle(self, handler_input):
slots = handler_input.request_envelope.request.intent.slots
question = slots["question"].value
prompt = question
詳しくは以下のドキュメントを参照してみてください。
Alexa developer console スロットタイプリファレンス
アレクサスキルとLambdaの紐付け
developer consoleのEndpointで「Default Region」を設定します。
この値は、Lambda関数のARNを入力してください。
![](https://www.kuretom.com/wp-content/uploads/2024/03/7cf612dbc770803d92539272f18e3400.png)
![](https://www.kuretom.com/wp-content/uploads/2024/03/60d753ef28004b9b38e0eafeafbb3230.png)
‖
![](https://www.kuretom.com/wp-content/uploads/2024/03/9564f8c806348662bfe92a10cba6b8d8.png)
![](https://www.kuretom.com/wp-content/uploads/2023/04/259bb9d004303ed8fe5a6b78b50ae941.png)
これでAlexaカスタムスキルの設定は完了です。
Lambda設定
![](https://www.kuretom.com/wp-content/uploads/2024/03/image-1.png)
Lambda関数では、実際の処理を実装します。
今回はアレクサで読み取った音声を入力として、ChatGPT、VOICEVOXで出力ファイルを作成し、最後にアレクサから応答を返す処理をPythonにて実装します。
- Lambda関数の作成
- Pythonコード作成
- レイヤーの設定(Python3.12ライブラリ)
- OpenAIの環境変数を設定
Lambda関数の作成
Lambdaのコンソール画面から、「関数の作成」ボタンを押下します。
![](https://www.kuretom.com/wp-content/uploads/2024/03/4f6f25accdca3ff8418a77eac659eac3.png)
以下の値で作成します。
- 関数名:任意
- ランタイム:Python3.12
- アーキテクチャ:x86_64
![](https://www.kuretom.com/wp-content/uploads/2024/03/10531b60eb37890c36a2c4f44417951f.png)
「関数の作成」ボタンを押下し、Lambda関数を作成します。
以下のように、関数が作成できていることを確認します。
![](https://www.kuretom.com/wp-content/uploads/2024/03/83b72754bcd9e93f48a2689d7e0c6710.png)
Pythonコードの作成
Alexaのカスタムスキル起動時は、lambda_function.pyが呼び出されます。
Lambda関数の画面にて、lambda_function.pyコードを作成します。
![](https://www.kuretom.com/wp-content/uploads/2024/03/3444d6bde4d0f689d57d0fe935cef7d8.png)
実際に今回使用したlambda_function.pyのコードは以下のgithubに公開しています。
- リンク:https://github.com/my-repo-441/alexa-openai-img-gene
- コード:
・lambda_function.py(Alexaから呼び出されるコード)
レイヤーの設定(Python3.12ライブラリ)
以下をLambdaのレイヤーに登録します。
上記は、Pythonの実行に必要なライブラリをzip化したものです。(openaiなど)
LambdaにてPythonコードを実行する際は、レイヤーに登録したライブラリが読み込まれます。
- 使用するライブラリ一覧
・requirements.txt
![](https://www.kuretom.com/wp-content/uploads/2024/03/928ca9cc4ff17bf01f31000733a7271a.png)
ライブラリは予め別環境のマシンでpip installしたものをzip化します。
EC2でPythonライブラリのzip化
![](https://www.kuretom.com/wp-content/uploads/2024/03/image-3.png)
今回は、Lambdaの実行アーキテクチャ(x86_64)とライブラリの形式を合わせるために、同じアーキテクチャのEC2を立ち上げて、Pythonライブラリのzip化を行いました。
実行環境がx86_64とarm64のように異なる場合、同じPythonのライブラリでもバイナリ形式が異なって動作しない場合があるようです。
EC2のコンソール画面から、以下の設定でEC2を起動します。
- Amazonマシンイメージ:Amazon Linux2023 AMI
- アーキテクチャ:64ビット(x86)
- インスタンスタイプ:t2.micro
- ネットワーク設定:EC2からインターネットに接続できる設定にする。
(Python実行環境のインストール、pip install でライブラリをインストールするため。) - ストレージ:8GiB(gp3)
![](https://www.kuretom.com/wp-content/uploads/2024/03/3d991f1b65db584819b3b7b737ab0ba7.png)
![](https://www.kuretom.com/wp-content/uploads/2024/03/9f68a5965664865b81b8539133359e62.png)
![](https://www.kuretom.com/wp-content/uploads/2024/03/6ac73cb19aaf0206938ea4f81b703e16.png)
起動したEC2にSSH接続します。
![](https://www.kuretom.com/wp-content/uploads/2024/03/828c92c836b3962ed0e7504b391a3ef5-1024x386.png)
以下のコマンドを実行し、Python3.12をインストールします。
Python3.12は、Lambda関数のPythonランタイムと同じバージョンです。
# Python3.12のインストール
# ---------------------
# 以下の手順では、Amazon Linux 2023にPython3をインストールする方法を示す。
#開発ツールのインストール
sudo yum groupinstall "Development Tools" -y
sudo yum install openssl-devel bzip2-devel libffi-devel -y
#tmpディレクトリの作成
cd /tmp
#python3.12のダウンロード
wget -c https://www.python.org/ftp/python/3.12.2/Python-3.12.2.tgz
#ダウンロードしたアーカイブを解凍し、ビルドする。
tar -xzf Python-3.12.2.tgz
cd Python-3.12.2
./configure --enable-optimizations
make -j $(nproc)
sudo make altinstall
以下のコマンドを実行し、Lambdaレイヤーに登録するPythonライブラリのインストールとzip化をします。
![](https://www.kuretom.com/wp-content/uploads/2024/03/259bb9d004303ed8fe5a6b78b50ae941.png)
「pip install -r requirements.txt」コマンドの実行前には、EC2にrequirements.txtファイル(上記のgithub内に記載した内容)を作成しておいてください。
# lambdaのレイヤーに登録するライブラリのzipファイルを作成
# ---------------------
# python3.12の仮想環境を作成し、ライブラリをインストールする。
# インストールしたライブラリをzip化する。(zipをLambdaレイヤーに登録する。)
# pipのインストール
# ---------------------
#インストールコマンド
python3.12 -m ensurepip --upgrade
#バージョン確認
python3.12 -m pip --version
#pipのbinファイルのパスをexportする(pipのbinファイルへのパスを記載)
export PATH=$PATH:/pipのbinまでのパス
#pipでもpip3が使えるようにシンボリックリンクを作成
sudo ln -s ~/.local/bin/pip3 ~/.local/bin/pip
# 仮想環境の作成
python3.12 -m venv ~/venv/openai-img-gene
#仮想環境のアクティベート
source ~/venv/openai-img-gene/bin/activate
# requirements.txt に記載のライブラリをファイルにインストール
pip install -r requirements.txt -t ./python
# インストールしたライブラリをzip化
zip -r python.zip ./python/
作成したPython.zipファイルを、ローカル環境に転送します。
#python.zipをEC2からローカル環境に転送する。
scp -i /path/to/your-key.pem ec2-user@your-ec2-instance-public-ip:/path/to/python.zip /local/destination/path
ローカル環境にpython.zipファイルが転送されていることを確認します。
このzipファイルをLambdaレイヤーとしてアップロードします。
![](https://www.kuretom.com/wp-content/uploads/2024/03/fd4cc9914e008bcd32e355e631e57962.png)
Lambdaレイヤーにアップロード
Lambdaのコンソール画面から、レイヤーを選択します。
![](https://www.kuretom.com/wp-content/uploads/2024/03/fe498820680a82083eb27c24f9782be1.png)
「レイヤーの作成」を押下し、作成したzipファイルをアップロードしてください。
この時、ランタイムはPython3.12としてください。
![](https://www.kuretom.com/wp-content/uploads/2024/03/ea9eaa1895c0346cbcffb0d9c5a62189-1.png)
OpenAIのAPIキーを環境変数として設定
Lambdaの「設定」から、「環境変数」を選択します。
以下のように、OpenAIのAPIキーを環境変数として追加します。
![](https://www.kuretom.com/wp-content/uploads/2024/03/f96069a63d412a11191b5db3af66750d-1024x322.png)
上記で追加した環境変数は、コードから以下のようにして呼び出すことができます。
import os
openai.api_key = os.getenv('OPENAI_API_KEY')
GPTおよびDALL-E3のAPIを使用するためには、OpenAIのAPIキーが必要です。
APIキーを取得されていない方は、まずOpenAIのAPI発行画面からAPIキーを発行しましょう。
Create new secret keyを押下します。
![](https://www.kuretom.com/wp-content/uploads/2024/03/7bd690889c3abe40c548b87fd2254679.png)
「Create secret key」を押下します。
![](https://www.kuretom.com/wp-content/uploads/2024/03/b3af09bfe59bb4329dc3b1bc53db095b.png)
作成されたキーをコピーしておきます。
画面を閉じてしまうとキーがコピーできなくなるため、注意してください。
![](https://www.kuretom.com/wp-content/uploads/2024/03/4aff9a2829233c4003514c3472e0cb0e.png)
Amazon SNSの設定
![](https://www.kuretom.com/wp-content/uploads/2024/03/image-8.png)
DALL-E 3は、生成した画像をURL形式で応答します。
画像のURLを、自身のメールアドレスに送信するように設定します。
- SNSトピックを作成
- 自身のメールをサブスクライブ
SNSトピックを作成
トピックの作成を選択します。
タイプはスタンダードを選択し、名前は任意でOKです。
![](https://www.kuretom.com/wp-content/uploads/2024/03/98df5630c8e9eae1fc1b03e534f3e4db.png)
トピックの作成を押下します。
![](https://www.kuretom.com/wp-content/uploads/2024/03/a646eca73472324c2194bb571b0f121d.png)
自身のメールをサブスクライブ
作成したトピックの画面で、サブスクリプションの作成を押下します。
![](https://www.kuretom.com/wp-content/uploads/2024/03/0041791478204a5a8c56fdab6d30ce16.png)
![](https://www.kuretom.com/wp-content/uploads/2024/03/18d5a423ee0a284f53435912c9059927-1.png)
![](https://www.kuretom.com/wp-content/uploads/2023/08/928ca9cc4ff17bf01f31000733a7271a.png)
エンドポイントのメールアドレス宛に、以下のように承認の確認メールがきます。Confirm subscriptionを押下することで、SNSからのメールを受け取ることができるようになります。
![](https://www.kuretom.com/wp-content/uploads/2024/03/91d5e8075f28ea14d4c7dca14477206a.png)
これで実装は完了です。
Alexaカスタムスキルを実行
![](https://www.kuretom.com/wp-content/uploads/2024/03/flow-2.jpg)
上図の処理を実際に動かしてみます。
作成したAlexaカスタムスキルを実行する方法は、以下の3つです。
- Alexa Developer Consoleから実行
- Alexaアプリから実行
- Alexaから実行
Alexa Developer Consoleから実行
カスタムスキル作成するためのAlexa Developer Consoleから実行できます。
この方法は、主にカスタムスキルのテスト目的で使われます。
![](https://www.kuretom.com/wp-content/uploads/2024/03/259bb9d004303ed8fe5a6b78b50ae941.png)
作成したLambda関数が正常に動作するかを確認するためにも、まずはDeveloper Consoleから実行してみましょう。
![](https://www.kuretom.com/wp-content/uploads/2024/03/9c0f22abf0de3850d1503d32e4fb801b.png)
![](https://www.kuretom.com/wp-content/uploads/2024/03/fd18b832693748f065d3ae2afa7b7026.png)
↓↓
メールアドレスにURLが届く
↓↓
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8797-500x412.png)
↓↓
URLから画像が確認できる
↓↓
![](https://www.kuretom.com/wp-content/uploads/2024/03/image-12-2.jpg)
![](https://www.kuretom.com/wp-content/uploads/2024/03/ecff6d8bd717996a0f9043dc0bdfdf70.png)
動作に問題ないことを確認できました。
Alexaアプリから実行
以下のAlexaアプリを使って、スマートフォン上でスキルを実行できます。
![](https://www.kuretom.com/wp-content/uploads/2024/03/7f77967499ec98656f31e6e1af45590c-1.jpg)
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8803.jpg)
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8795-645x1024.jpg)
「雨の中を散歩する飼い主と豆柴」と入力しました。
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8805-1.png)
↓↓
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8797-500x412.png)
↓↓
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8806-1.jpg)
「家の中でくつろぐビションフリーゼとミニチュアダックスフンド」と入力しました。
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8807.png)
↓↓
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8797-500x412.png)
↓↓
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8790.jpg)
Alexaから実行
Alexaから直接カスタムスキルを呼び出すこともできます。
![](https://www.kuretom.com/wp-content/uploads/2024/03/928ca9cc4ff17bf01f31000733a7271a.png)
アレクサ、イラスト作成して。
![](https://www.kuretom.com/wp-content/uploads/2024/03/amazonecho5.jpg)
どんな画像が欲しい?
「海で泳ぐシロナガスクジラ」という指示で画像生成してみました。
↓↓
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8797-500x412.png)
↓↓
![](https://www.kuretom.com/wp-content/uploads/2024/03/image-12-1.jpg)
指示した通りの画像が生成できていることが確認できました。
lambda_functionの追加修正
どんなプロンプトで画像を作成したか分かるようにしました。
具体的には、SNSでメールアドレスに送信されるメッセージに、プロンプト内容を含めるようにしました。
![](https://www.kuretom.com/wp-content/uploads/2024/03/d56bf055bb30423db489307e71cbd743.png)
![](https://www.kuretom.com/wp-content/uploads/2024/03/IMG_8814.png)
![](https://www.kuretom.com/wp-content/uploads/2024/03/image-12-3.jpg)
修正したコードは以下の箇所です。
単純な文字列の結合でURLのハイパーリンクが無効化されないように、json形式にしました。
(画像生成プロンプトと画像URLを、それぞれキーバリューとして指定)
import json
# URLとプロンプトの内容を含むメッセージの組み立て
message = {
"Image URL": image_url,
"Prompt": prompt_img
}
message_json_to_publish = json.dumps(message_to_publish, ensure_ascii=False)
まとめ
今回はAlexaとOpenAIのAPI「gpt」と「DALL-E 3」を使って、Alexaアプリから画像生成ができるようにしてみました。
アレクサから音声入力で画像生成を指示することも可能なので、家族や友人と集まったときにちょっとした遊びとして各々好きなプロンプトで画像生成を楽しんでみるのも良いかもしれません。
最後まで見ていただきありがとうございました。
今回はAlexaからOpenAIの画像生成API「DALL-E 3」を実行して、メールアドレスに画像のURLが届くようにしてみたよ。