DALL-EのAPIでAIお絵描きLINE Botを作ってみよう！

https://protoout.connpass.com/event/289837/

本資料はこちらの体験会で使用するハンズオン資料となります。
[LINE Developers](https://developers.line.biz/ja/)のアカウント設定や[OpenAIのAPI_key](https://platform.openai.com/account/api-keys)、[make(integromat)](https://eu1.make.com/)のアカウント作成などは実施をお願いします。

https://developers.line.biz/ja/

https://platform.openai.com/account/api-keys

https://eu1.make.com/

::: note alert
本記事にはLINE Messaging APIのCHANNEL_ACCESS_TOKENなど記載されていますが、本来は悪用を防ぐために、漏洩には十分注意してください。記事中のキーは全てハンズオン用に取得したものであり、イベント終了後は使用できないものとなっております。
:::

## イベントに参加いただくにあたって

### 今回の目標

今回のイベントでは
- **入力した文字がそのまま帰ってくる、オウム返しLINE Botをつくる🦜**
- **LINEを通じてDALL-EのAPIを叩き、文字から絵が返ってくるようにする🖼**
- **プロンプトを調整し、任意の画風に仕上げる✍**

以上、3点が実施できることを目標としています。

更にミニハッカソンとして、自分オリジナルのLINE Bot作成にも挑戦していただきますので、作ってみたい題材も頭の片隅で考えてみてください。

途中経過も含めて、スクリーンショットや動画をtwitterに `#protoout` `#LINEDC`をつけて発信してみましょう。

### ハンズオンについていけなくなってしまったら

普段の授業では時間をとって説明するようにしていますが、今回は限られた時間で実施するイベントとなりますので、もしかするとすべての方が進行通りに作成することは難しいかもしれません。
もしついていけなくなってしまったら、
- 一旦は画面の中での説明をしっかり聞いて、今何をしようとしているのかを理解してみてください。
- 今回利用する`make`というサービスはモジュール単位で作業を進めますので、現在のモジュールは一旦あきらめて次のモジュールから再度手を動かしてみてください。
- 途中に休憩時間を設けますので、その時に質問してみてください。

また、参加いただいた方には動画も共有されるかと思いますので、後日改めてじっくりと挑戦してみてください。

以下、ハンズオンの作業資料です
---


## おうむ返しBotの作成

**まずはリプライメッセージを送るLINE Botの基本となるおうむ返しBotを準備します。**

### [こちらの記事](https://qiita.com/watanabe-tsubasa/items/8342595d641143b780f7#%E3%81%8A%E3%81%86%E3%82%80%E8%BF%94%E3%81%97bot%E3%81%AE%E4%BD%9C%E6%88%90)の「おうむ返しBotの作成」の章を参照

https://qiita.com/watanabe-tsubasa/items/8342595d641143b780f7#%E3%81%8A%E3%81%86%E3%82%80%E8%BF%94%E3%81%97bot%E3%81%AE%E4%BD%9C%E6%88%90

## OpenAI モジュールの組み込み

**OpenAIのAPI（Generate an Image）を叩いて、返ってきた画像URLをリプライするLINE Botを作成します。**

参考:[OpenAI APIクレジット登録](https://musemyuzu.com/programming/openai-payment/)

https://musemyuzu.com/programming/openai-payment/

### 目標となる形

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/f488480a-7ed3-96bc-b9ef-3a872d5400fa.png)

### Generate an Image

- モジュールは画像の通り、`Generate an Image`を選んでください。`Connection`の`Add`ボタンをクリックし、取得した`API Key`と`Organization ID`を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/25435370-44a3-3028-846e-032af4c08350.png)
- Promptのところには`Events[]:Message.Text`を入力してください。これでLINEに入力した言葉でDALL-EのAPIを叩くことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/99213676-ee23-de6f-3993-0c4faf8cf5c5.png)

### Send a Reply Message

- 先ほどはMessagesのTextのところに送られてきたテキストをそのまま返すようにしていましたが、今回はまず`Type`を`Image`に変更します。その後2か所のURL記入欄に`Data[]:url`を入力します。これが、DALL-EのAPIから返ってきた画像のURLとなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/4deed3f9-fff0-6877-4f1d-0337b26c5ede.png)


実行すると画像が生成されて返信されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/4f2185b9-3d64-1bcd-3abf-b10189fd688c.png)

## プロンプトの設定

DALL-Eに特定の役割を与え、自分の想定した画風を引き出す技術がプロンプトの調整となります。詳細は下記リンク先[DALL・Eで使えるプロンプトまとめ](https://www.ka-net.org/blog/?p=15498)などを参考にしてみてください。

https://www.ka-net.org/blog/?p=15498

今回はクロード・モネ風の画像を生成してもらいましょう。

### Generate an Image

- Promptの`Events[]:Message.Text`の横に`painted by Claude Monet`と入力して下さい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/afd6146a-82b5-396b-3e16-084405e8fe73.png)

### プロンプトを与えた場合の返答

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/9a557075-fef8-67fb-f4d1-44a8b4574384.png)

## 発展　「ちょっと待ってね…」を先に返信する

画像生成には少し時間がかかるので、「ちょっと待ってね…」というメッセージを一旦返しておきます。

### 目標となる形
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/d19b21af-0373-a65d-630f-cbb49385621d.png)

### Send a Push Message

- モジュールは画像の通り、`Send a Push Message`を選んでください。To欄には`Events[]:Souce.User ID`を入力し、Textの中身も任意でメッセージを入力してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/ff41c543-744a-48f7-9493-110062538690.png)

### 画像生成前に一旦返答されるようになります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/0d334633-fa56-a927-4d3f-a91349a15e20.png)


## 発展　ChatGPTと会話できるLINE Botを作る

### [こちらの記事](https://qiita.com/watanabe-tsubasa/items/8342595d641143b780f7#openai-%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%AE%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF)の「OpenAI モジュールの組み込み」以降の章を参照

https://qiita.com/watanabe-tsubasa/items/8342595d641143b780f7#openai-%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%AE%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF

## ミニハッカソン：オリジナルのお絵描きLINE Botを作成しましょう。

- 今回紹介したMakeとDALL-EのAPIを活用して、オリジナルのお絵描きLINE Botを作成してみましょう。
- プロンプトの調整は、APIを叩くだけではなく[webのDALL-E](https://openai.com/dall-e-2)も活用してみましょう。
- 作成したら動く様子を表したスクリーンショットや動画をtwitterに `#protoout` `#LINEDC`をつけて発信してみましょう。
- 2名程度発表していただきます。迷ったら発表テンプレートは下記の通り

> お名前
> 普段のお仕事や活動紹介
> **なぜこのLINE Botを作ろうと思ったか**
> こだわったポイント

### 企画を立てる上で重要なプロトアウトとしての考え方

- 企画はどこかで聞いたことのあるような広いものではなく、自分だから思いつくような尖ったものだとなおよいです。
- 完成するのではなく締め切りがやってくるのです。まずは時間内に作り上げることができるものを、素早く作りましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/2fa2c592-3f45-7388-63dc-e4647fe18824.png)
**せっかく作ったものは積極的に発信しましょう（企業機密発信してはだめですが）**