【画像生成AI】Leonardo.Aiで自社キャラクターをイケイケにしてみた

# はじめに
株式会社マーズフラッグ、フロントエンドエンジニアの安座間です。
会社では、主に**MARS EmoTech**のフロント領域を担当しています。

今回は、こちらのサービスのキャラクターをイメチェンしていきますので、「MARS EmoTechとはなんぞや！！！」という方は、以下サービス概要をご一読ください。

#### MARS EmoTechとは？
> MARS EmoTechは、Generative AI技術を活用したチャット形式の自然文入力による対話を実現するサービスです。企業向けサイト内検索サービスで培った知見を活用して、対象となるコーポレートサイト内の情報に特化した学習を行い、回答の精度を高めます。また、サイト内検索とのシームレスな連携により、情報ソースが示されない、誤った情報を作成しがちな領域も補完し、厚みのあるサービスを実現します。
> 
https://www.marsflag.com/ja/services/marsemotech/

因みに、上記内容もEmoTechに「**MARS EmoTechのサービス概要を教えて**」と質問した回答となります。

# この記事で分かること
1. Leonardo.Aiについて
    1. 画像からテイストを変えた新たな画像を生成する手順
    1. ファインチューニングの手順
1. 弊社キャラクターのイメチェンまでの道のり
## 登場人物

####  えもちゃん
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/c62a73f9-eef0-b44e-0c40-4ba670514e5a.png">

お客様のWebサイトに鎮座し、サイト訪問者に寄り添う心優しきチャットボット

#### Leonardo.Ai
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/3692a6c6-1946-7af0-a588-f66c52a4dac1.png">

画像生成AIツール
画像生成AIと言われて多い浮かぶのは、Stable Diffusion、DALL、Midjourney あたりだと思いますが、これらに比べると知名度は低く、今回初めて知った方も多いのではないでしょうか。

実際に使ってみると、機能が豊富で、GUIとしてならかなりオススメできます。
##### 良いところ

- GUIで多機能
    - キャンバス機能
    - ファインチューニング可
    - i2i機能が豊富
        - 線画から画像生成
        - ポーズを画像に合わせる
- 無料（150トークン/日 ※最大150枚）
- 商用利用可能 ※必ず利用規約をご確認ください
- UIがイケてる
- 圧倒的レオナルド感

https://leonardo.ai/

# 目的
1. クリックしたくなるキャラクターの作成
1. 画像生成AIの楽しさを共有する

現在のえもちゃんは、少し可愛らしすぎるので頼りない印象を与えていることを危惧しています。サイト訪問者にEmoTechを使用していただく為には、ファーストアクションであるアイコンクリックが必須となりますので、「**インパクトがあり頼もしい**」感じのキャラクターが必要になります。

**既存のテイストを保ちながら、3D・AI感を強調し、頼もしいビジュアル**にイメチェンしてCTR向上を目指します。



# 画像生成AIのコツ

作りたいイメージの画像を生成するにはプロンプトが重要になりますので、以下を意識して進めていきます。特に指示を明確にすることが大切なようです。

**ポイント**

- 順番が先のものほど優先度が高い
- プロンプトは具体的に書く
- 括弧で重み付けをする
- ネガティブプロンプトを組み合わせる
- 再試行することを恐れない
- 運要素が大きい

**明確なプロンプト**
NG：人間がいない風景
OK：人間がいない、静かな風景

NG：青い空
OK：空に青い雲が浮かんでいる

NG：猫
OK：笑顔の猫が、大きな花束を持って、あなたにキスをしている

# 既存のテイストを踏襲した"えもちゃん"

まずは、左メニューの **AI Image Generation > Image Guidance** から既存のえもちゃん画像をアップロード

![スクリーンショット 2023-12-01 15.16.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/2457e2a6-c2d6-c4fe-a6c1-499b24e7db93.png)
![スクリーンショット 2023-12-01 15.25.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/237f214d-a996-db07-424c-0ea50d1991ef.png)


今回は、3D化したいのでモデルは、**3D Animation Style**を選択し、**Strength**でアップロードした画像にどの程度よせるかを微調整していきます。

以下の設定で **Generate** をクリック

```
Model:3D Animation Style
Type：Image to Image 
Strength：0.10

Prompt:
# クールな笑顔の人工知能23世紀の検索エンジン
Artificially intelligent 23rd century search engine with a cool smile.
```
.

.

.

.

.

.

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/3c39ed01-3205-5f33-319c-2a33d20a141f.jpeg">


.

.

です

.

画像生成AIを使い始めの頃、ひとりでニヤついてましたが今ではなんとも思いません。

気にせず続けます。

自由度が高すぎたので **Strength** を **0.30** に上げます。
.

.

.

.

.

.

.

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/99ea5aa1-d84a-300b-4f8c-1b2956e56735.jpeg">


元画像によってきました。
弊社のロゴマーク「M」を残したいので **Strength** をもう少し上げます（**0.40**）
.

.

.

.

.

.

.

.

.
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/de9992b0-52fa-642b-9d35-28d9c498a013.jpeg">

いい感じ

Strengthはこれで良さそうなのでプロンプトを調整します。

.

.

.

.

.

.

.

そして、試行錯誤して出来上がったのがこちら

![スクリーンショット 2023-12-01 15.43.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/94fee366-1e41-8b85-32a5-99047a9ddecf.png)

```
Model:3D Animation Style
Type：Image to Image 
Strength：0.37

Prompt:
# 次世代AI検索エンジン、23世紀、マトリックス風、クール、全身、3D、高画質、背景透過、サーバー、人工知能、検索エンジンキャラクター、ロボット、額のMマーク、メインカラー青、サブカラー橙
Next-generation AI search engine, 23rd century, Matrix-style, cool, full-body, 3D, high quality, transparent background, server, artificial intelligence, search engine character, robot, M mark on the forehead, main color blue, sub-color orange
```

Strengthが高い（アップロード画像によせる）とプロンプトの影響が弱くなるので、プロンプトを微調整しても期待する画像は生成されませんでした。ですので、同じプロンプトで好みの画像が現れるまで生成しまくる。という運要素が大きかったです。

また、プロンプトを明確にすることが推奨されてますが、キーワードを羅列したものでも特に不自由はなかったです。（プロンプトの影響が弱いから？）


とりあえず、「**既存のテイストを保ちながら、3D・AI感を強調する**」は、クリアできたと思います。

## 0から生成する"えもちゃん"

今度は、EmoTechや弊社のイメージを含めながら、大幅にテイストを変えたいと思います。

#### 手順
1. プロンプトのみで画像を生成
1. Image to Imageでカスタマイズ
1. 手作業でMマーク追加
1. Image to Imageで微調整

### プロンプトのみで画像を生成
まずは、ベースとなる画像をプロンプトのみで生成します。
いくつかのキーワードは無視されましたが、弊社のコーポレートカラー（青、オレンジ）を指定したらいい感じにアクセントになりました

```
Model: Leonardo Diffusion XLprompt

Prompt:
# 次世代検索エンジンAI、23世紀、マトリックス風、かっこいい、全身、3D、高画質、背景透過、サーバー、人工知能、検索エンジンキャラクター、ロボット、額にMマーク、メインカラーは青、サブカラーはオレンジ、23世紀の渋谷の空を飛ぶ、手からレーザーが出る
Next-generation search engine AI, 23rd century, Matrix-style, cool, full body, 3D, high quality, transparent background, server, artificial intelligence, search engine character, robot, M mark on the forehead, main color is blue, sub-color is orange, flying in the sky of Shibuya in the 23rd century, laser coming out of the hand
```

![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/ba3a87e7-9809-07ba-404c-c249a4d45957.jpeg)


### Image to Imageでカスタマイズ

```
Model：3D Animation Style
Type: Image to Image 
Strength: 0.43

Prompt:
# 次世代検索エンジンAI、23世紀、マトリックス風、かっこいい、全身、3D、高画質、背景透過、サーバー、人工知能、検索エンジンキャラクター、ロボット、額にMマーク、メインカラーは青、サブカラーはオレンジ、23世紀の渋谷の空を飛ぶ、手からレーザーが出る
Next-generation search engine AI, 23rd century, Matrix-style, cool, full body, 3D, high quality, transparent background, server, artificial intelligence, search engine character, robot, M mark on the forehead, main color is blue, sub-color is orange, flying in the sky of Shibuya in the 23rd century, laser coming out of the hand
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/8b7ffe93-eafb-bd4e-386c-8f3d43e69a69.png)


### Mマーク追加

試行錯誤しましたが結局プロンプトで「M」を追加できず、、、、
邪道ですがPhotoshopで追加しました。合成感がすごいですが、この後調整するので現時点で違和感があっても問題ありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/59d3128b-f524-390f-0446-029c1eed59ae.png)


### Image to Imageで微調整

Mあり画像を元にプロンプトでMマークの指示を出します。
ついでに **頼もしい感じ** が出るように **アーマースーツ** を着させました。

```
Model：3D Animation Style
Type: Image to Image 
Strength: 0.43

# 額にMマークをつけ、アーマースーツを着込んでいる。
Prompt: He wears an M mark on his forehead and an armor suit.
```

.

.

.

.

.

.

.

.

.

![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/d252b3e2-c631-f9f3-ed92-7ab97cd0e4da.jpeg)

えもちゃん降臨

.

.

AI感は弱まった気もしますが、自信に満ち溢れています。
そして、額にMを固定できている仕組みが気になります。

完全にアーマースーツにひっぱられ、ダンディーな熟練戦士感が否めないですが、目的である「**クリックしたくなるキャラクターの作成**」は達成できたと思います。



# モデルチューニング

Leonardo.Aiは、画面上からモデルをファインチューニングできるので、せっかくなので生成した画像を学習させ、モデルえもちゃんを作ってみました。

左メニューの **Training & Datasets > New Dataset** から画像を選択（最大40枚）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/ac2b0b2f-1355-e628-83fd-a7faf25429b9.png)

**Train Model** をクリックし、設定画面移動

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/09c5ee98-bfd9-a76c-4d3a-2361f690a6a8.png)

情報を入力し **Start Training** をクリックします。

**Instance Prompt** が **トリガーとなるキーワード** になるのですが、cat など既に意味を持つキーワードは設定すると、「猫」と「学習内容」が混在し正しく機能しないので注意してください。

今回は **emo-chan** を設定しました。

10分程でトレーニングが完了するので **Select Other Model → View → Generate with this Model** からモデルを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/58970dd3-bcad-ef19-7a9a-73fe5753cd11.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/188a1298-02cc-65b1-bd7b-9f15e3108d00.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/68b5fe22-8d89-2f92-9c5e-da4ded493ca5.png)

モデルを選択したら、プロンプトに先程設定したトリガーキーワード **emo-chan** を指定して生成

.

.

.

![adfafda.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/c1a83aef-6b13-2602-24d6-4167c512d079.png)

ちゃんと機能しました。
.
.

上を向いて怒ってもらいましょう。

```
# 上を向いて怒っている
emo-chan, He's looking up and angry.
```

![fadsfaf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/97831d4b-2ac2-cbc4-3275-a8ff0614c543.png)


正面を向いたままスマイル
.
.
学習させる画像は、スタイルを統一したり、表情、画角、ポーズなどバリエーションをもたせるとより汎用的なモデルになるのかもしれません。

因みに、無料アカウントだとファインチューニングは1度しか行えないので今回はここまでさせていただきます。

# まとめ

いかがでしたか。

画像生成AIを使えばイラストが描けなくても画像や写真からプロンプトによりイメージに近い画像を生成することもできます。

Leonard.Aiには、今回紹介できなかった、線画から画像、アングルだけ画像に合わせるなど、豊富な機能が備わっているので、興味が湧いた方は是非触ってみてください。

画像生成AIの楽しさを伝えられてたら嬉しいです。

# おまけ

ローカルでアイコンを差し替えてみました。

![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/5927d099-6630-1ed3-3f75-db818e009277.png)

![b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/26e7eaf5-1b0c-25de-283c-1353f45eaa1e.png)

![c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624653/35fab76d-6742-8980-fab2-5611028488aa.png)


本番リリースしないように気をつけます。