Skip to content

Blog

第1回生成AIアートバトル「AIBATO」で優勝いたしました(実況編)

54

メニュー

投稿

見出し画像

第1回生成AIアートバトル「AIBATO」で優勝いたしました(実況編)

__

40

しらいはかせ AI/Hacker/作家/編集者/AICU代表

しらいはかせ AI/Hacker/作家/編集者/AICU代表

2024年11月23日 23:17 フォローしました

¥0~

圧倒的・・・感謝!!
・・・を込めて、現場より実況ツイートでお送りいたします。

TLDR:優勝しました。日本一の生成AIアーティストになりました。

画像隣のCGみたいなひとは主催の Limerence Ai代表 平田茉莉花さんです

第1回生成AIアートバトル「 #AIBATO 」 StableDiffusion 部門で優勝しました〜

超絶画力な @KARA_Beee さんにライブエンタメ博士として負けられない#背水の陣 …!!

怪しげなインパクトのAI平田茉莉花さんをStabilityAI APIで開発しつつ
「AI生成だっ!!」とわかる指多めの絵作りで〆ました。感謝! pic.twitter.com/rAw9tEoW6n

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

【AIBATO StableDiffusion部門 優勝者発表】

特別審査員にはカンヌでも審査員を務めた
3人をご招待⚡️

【THE FIRSTTAKE】映像プロデューサー
・木下健太郎様
【TBWA\HAKUHODO】CCO
・佐藤カズー様
【TBWA\HAKUHODO】プロデューサー
平久江 勤様

優勝したのは…
🎖️白井博士@o_obpic.twitter.com/L30OAoNMHW

— 平田 マリカ┃AIクリエイティブディレクター (@AI_Marika1018) November 22, 2024


__目次

  1. 前日譚
  2. ウォーミングアップで画像生成し続ける
  3. Day2 第1試合Shot1 テーマ:「閃光」
  4. Day2 第1試合Shot2「堅牢なセキュリティ」
  5. 第1ラウンド審査員講評
  6. そしてやってきた第2ラウンド
  7. Shot1テーマ: ”息が止まる”
  8. 完成作品「息が…ッ!!!??」
  9. Shot1結果は…!
  10. 第2テーマは「最新AIツールの広告」

すべて表示


前日譚

幕張メッセなうです

左側取材してからAIBATOへ向かいます!#コンテンツ東京2024 pic.twitter.com/R2WxmUbwRE

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

余裕かましてる風ですが、新幹線→東京駅で京葉線特急わかしお10分乗換(記録達成)で11時着です。直前までクラウドに準備を仕込んでいたのですね。

明らかにヤバいブースに来た!#AIBATO

ライブ画像生成バトルの機材調整中#コンテンツ東京2024 4-40 pic.twitter.com/sT4AsrvnzK

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

Japan IT Week特有の雰囲気…ってわかりますでしょうか、他のブースはゴリゴリっとした営業さんたちや制服コスプレスタッフさんや、綺麗どころ社員さんたちが「名刺交換!!」とか「バッジスキャンさせてください!!」って右から左から営業されるアレですが、その中に配信突然スタジオがやってくる。

eSportsイベントとかに慣れてないとこの時点で「何やってんのこの人たち…」ってなりそう。

あと30分で第一回戦開始だわ#AIBATO #コンテンツ東京2024 pic.twitter.com/Z3u8PbEIKp

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

余裕かましてますが、この場所、審査員さんが座る場所ですよね。
後で記念写真撮るの難しそうと思って・・・。
ちなみにこの時点で、会場側が準備したPCのうちの一台が不調で、見てみたら、GPUが大変なことになってました。わああ。

いよいよ #AIBATO Day2始まる!
第2回戦なので待機。

ネットも激遅なので@AI_Marika1018 を撮るぐらいしかやることがない1時間

そして観客すごい
通路が塞がるレベルの混雑になってきた! pic.twitter.com/wleLaU3m6Q

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

12:00イベント開始!これは茉莉花ファンに殺される写真だそうです。

キャーモトキサーン!
ナママドジャスサーン
ナマホンダサーン! pic.twitter.com/4mHyOJX5Lz

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

その後、本木さんが白井が選手席にいることに気づいたときの反応が面白すぎた…今日はブラック基調で青サングラスというコスプレです。

本日DAY2です!
よろしくお願いいたします! https://t.co/UhOf9aeaiB

— マドカ・ジャスミン マドジャス (@mdk_jasmine) November 22, 2024

昨日は大激戦のMidjourney部門でした。

今回の大激戦はまさに感動と驚きの嵐✨

4つの個性が火花を散らしました🔥✨

✅ 圧倒的プロンプト力!最短で理想のイメージを具現化 🎨

✅ AIをコントロールする創造性!心を動かすストーリー生成 🌈

✅ 最先端技術×最速プロンプト!AIの可能性を最大化 🚀… https://t.co/RT4RRgBFt7 pic.twitter.com/DBfYEswxyf

— Hakushi🌈精密AIアート技師 (@FantasistaAI) November 21, 2024

ウォーミングアップで画像生成し続ける

第2試合なので待機しようにも、徹夜明け&モンスターエナジーで保っている状態なので、隣にいた選手(もとさん)とかに話しかけるのもアレだし、昨日の振り返りとかを聴きながら、手元で作品を作り続ける俺。

昨日は「映画ポスターみたいな」というお題だったらしいので

待ち時間でなんかつくってみた#AIBATO pic.twitter.com/Drga7CeMC0

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

そうこうしていたら、機材トラブルで、突然対戦カードが変わる。

SDXL組とSD1.5組で再編成。
もとさん vs からびーさんになりました。事務局の英断。

#AIBATO Day2はじまった!

からびーさんvsもとさん#コンテンツ東京2024 pic.twitter.com/FkgKzW4Flq

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

映画ポスター的なもの。

SDXLにて1発出し#AIBATO pic.twitter.com/gHINVWzbco

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

ガチにSDXLベースモデルだけです。文字は完璧ではないが。

時計の文字盤が正しい、目覚めの朝。#AIBATO #AIart pic.twitter.com/3n4GDFcQow

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

あきらかに #コンテンツ東京2024 の会場で異彩を放っている#AIBATO 会場より

第1回戦のShot1が終わったところだ

評価軸は

創造性
テーマの解釈
プロンプト

だそうです! pic.twitter.com/9HXi8Q4YWy

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

評価軸は
・創造性
・テーマの解釈
・プロンプト
なるほどなるほど。と言ってメモをする。
実際こういう情報が最後の勝敗を分けたのかもしれない。

Day2 第1試合Shot1 テーマ:「閃光」

習作"まばゆい あの子"#AIBATO pic.twitter.com/saCCoMJIUx

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

Day2 第1試合Shot2「堅牢なセキュリティ」

#AIBATO
Day2 第1試合Shot2
テーマは「堅牢なセキュリティ」…!?? pic.twitter.com/PD2oX7ZjoT

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

抽象的なテーマが出るとは予想していたけど、これは難しいかもね。

ハリウッド新作映画

"堅牢なセキュリティ"#AIBATO pic.twitter.com/zcYs91LNTh

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

で、作ってみた~。

画像ハリウッド新作映画 "堅牢なセキュリティ"

第1ラウンド審査員講評

このツイートに動画をまとめておいたけどめちゃ重要。

第一ラウンド審査員講評!#AIBATO #コンテンツ東京2024 pic.twitter.com/WgTdTmMqCH

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

かわいい女の子の出力に対する厳しい視点!
Day1の クズなくまさん (@kuzukumasan9) に対するコダワリを指摘されている。

残念ながら敗退してしまった もとさん @moto_ai_ShiSui
普段は飲食サービスで働く店長さん!というのがエモい。
画像生成AI業界の奥の深さがここにあるよ。

#AIBATO 第1戦を終えた
もとさん
@moto_ai_ShiSui pic.twitter.com/XkwhUaCWwR

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

もと「画像生成に時間がかかりすぎた」

なるほど…調べてみたら、Stability MatrixでセットアップされたStable Diffusionの最終段で95%から動かない。VAEが問題か、それとも、入っているNVIDIAのドライバーのせいか…。いずれにせよ調査やチューニングが必要…なんだけど配信セットアップのため、一旦機材からは離れなければならない(という瞬間のインタビュー動画でした)。

緊張していても、勝負で勝ちたくても、ここは落ち着いていこう。

eSportsの舞台で学んだことですが、
ただ勝つだけなら強ければできる。
でも、応援されて勝たないと、意味がないんだ。

そしてやってきた第2ラウンド

この間の機材セットアップは本当に緊張したのですが、この辺に関しては、技術解説編でまとめたいと思います!

対戦相手は上田カズヤさん

Shot1テーマ: ”息が止まる”

ツイ廃である私は緊張とともに突然ツイートをしはじめます。

与えられたお題”息が止まる” #AIBATO
(ツイ廃)

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

この人今壇上でバトル参加してるはずなんですが

(僕も審査員) https://t.co/ceMn1JdVbi

— ユギ イサナ/ CreativeCatalyst. Creative+AI+Marketing. (@137yugi) November 22, 2024

インスピレーションを掴んだ。即座にツイートにする。

これすき
SDXL pic.twitter.com/1Lm8OmadDh

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

これで結局、できあがらなかったら大恥ですが、それはそれ。
「ただ勝つのではない、応援されて勝たないと!」の精神です。

WIP #AIBATO pic.twitter.com/jw0FKy3qCL

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

完成作品「息が…ッ!!!??」

君に決めた!

「息が…ッ!!??」#AIBATO pic.twitter.com/HS8pD44kDV

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

作品解説コメント抜粋なんですが、
11月19日にこんなツイートしてました。

荒木飛呂彦先生のメッセージ、
いちファンとしてグッと来る(=超悲しい)し、
むしろ少年時代から影響を受けまくった荒木飛呂彦先生に悪役として認定されてしまったかのような
"変な快感"すらあるので自分の目で読んで解釈したい。

間に"変な解釈"を入れずになッ!!

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 18, 2024

「生成AIが悪である」という言われようについては、
今まで
「VRは悪である」とか言われたこともあるので、それ単体については動じないのですが、
荒木飛呂彦ほどの人物ですらスタンドのネタにするのではなく、恐怖を感じていることに畏怖を感じますhttps://t.co/xri4HXmdFD

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 18, 2024

「社会の悪」ということに関連して言うと、これからAIが社会に広がっていくことで、それを利用した詐欺師が跋扈する怪しい世界がますます増えると思います。 この前、「これ、俺が描いたよな」という絵を見たのですが、実はAIで描いたものだと知って驚きました。僕が漫画を描くときは、ちょっと自分らしさの印になるようなものを絵に入れています。でもその絵は「この辺のまつ毛の感じとか、俺の絵だよね」というところまでそっくり真似をしていて、本当に見分けがつかないのです。最近の絵だったら「いや、こんなの描いてないよ」とすぐわかりますが、一〇年くらい前の絵でこれをやられたら、記憶も曖昧になっているので、もう全然わかりません。今後、AIが進化すればするほど、こういうことが増えていくでしょう。 アートは時代を反映するもので、漫画もそのひとつですから、そこにこういう詐欺師の世界が出てきているということは、近い将来、詐欺師の世の中がやってくると言えるのかもしれません。そういう時代の「悪」は必ずこれからの漫画に影響していくことになるはずです。

https://www.itmedia.co.jp/news/articles/2411/19/news182.html

とはいえ、僕もデジタルをまったく取り入れていないわけではありません。デジタルツールは漫画を描くための道具のひとつですから、たとえばアシスタントが背景などを描くとき、僕が撮影した写真をソフトに取り込んで加工したデータを使っています。ただそのままだと、そこだけなんだか無機質になって、立体感も出ないので、仕上げには必ず人間の手を入れます。しかし今後、AIがさらに進化していけば、そうした欠点も解消され、人間が手を加える余地はどんどん少なくなっていくでしょう。道具という意味では、デジタル技術はもっともっと発展していってほしいですし、いずれ頂点を極める日も来るのだと思います。

https://www.itmedia.co.jp/news/articles/2411/19/news182.html

世界の16の国と地域で翻訳刊行されるなど、いまや古典となった『荒木飛呂彦の漫画術』(集英社新書)から10年。だが、ある時、『漫画術』を読んで漫画家になった人もいるとしたら、「もうちょっと深い話も伝えておかなければならないのではないか」と、荒木は考えた。『ジョジョの奇妙な冒険』シリーズをはじめとした荒木作品に登場する名悪役たちの魅力とリアリティはどのように生まれるのか? 漫画の王道を歩み続けるために必要なことは? いまだ語られなかった、漫画家・荒木飛呂彦の「企業秘密」を掘り下げた、新・漫画術。

荒木飛呂彦の新・漫画術 悪役の作り方 荒木飛呂彦の漫画術 (集英社新書)

荒木飛呂彦の新・漫画術 悪役の作り方 (集英社新書) __ amzn.to 1,034 円 (2024年11月24日 03:10時点 詳しくはこちら) Amazon.co.jpで購入する

荒木飛呂彦先生のメッセージ、 いちファンとしてグッと来る(=超悲しい)し、 むしろ少年時代から影響を受けまくった荒木飛呂彦先生に悪役として認定されてしまったかのような "変な快感"すらあるので自分の目で読んで解釈したい。 間に"変な解釈"を入れずになッ!!

今まで「VRは悪である」とか言われたこともあるので、それ単体については動じないのですが、荒木飛呂彦ほどの人物ですらスタンドのネタにするのではなく、恐怖を感じていることに畏怖を感じます

荒木飛呂彦先生にそこまでのプレッシャーを与える「生成AI」というスタンドを扱う身として、単に画風を真似るのではなく、きちんと「1枚の絵で漫画になっている画像をつくる」をテーマにしようと考えていました。

今回は実況編なので、メイキング技術については別の原稿で書きますが、「息が止まる」というテーマに対して、ライブで審査員があれこれ言っていた要素をすべて組み込んでいきつつ、自分なりのメッセージを込めたつもりです。でもどうなんだろ、上田さんの作品、圧倒的に美しいし。

Shot1結果は…!

Leosamを使う上田さん、圧倒的に美しい。

#AIBATO おもれった。

DiscordライブならAIグラビアバトル(おっぱいがでたらアウト)もやれそう。生成者目線で勉強になったと同時にツッコミどころもあって解説がアツくて良かった。Leosamありがとう。 pic.twitter.com/N724c2qpxY

— CIG(健全AIグラビア) (@cigmatari) November 22, 2024

結果を訊くまでの自分は、祈り……でした。
しらいはかせリード!よかった!祈って良かった。

第2テーマは「最新AIツールの広告」

「再現性」を重視する、という話とともに設定されたテーマが「最新AIツールの広告」。しかもここはJapan IT Weekの会場のど真ん中。

さあ何をつくるか…。
目を閉じて、瞑想しながら、開眼!

作品「AI代供養に出資しませんか?」

画像「永代供養に出資しませんか?」
https://x.com/o_ob/status/1859839099080954178

コンテキストわからんと何だこれってなるかもですが、これです。

前日に49分の動画を見てブログまで書いて考察してるからね。

画像

「令和の虎 出演の裏側」めちゃ見たかったゾ

画像

まずは「広告を作る」というお題をいただいた以上、アート作品をつくるのではなく、広告としてお客さんがお金を出してくれるアートを作らねばならない!お金を出してくれる人、審査員、あ…そこにお客さんいるじゃん…「最新AI」…いやこの会場、ChatGPTのラッパーサービスばっかりやないかーい!ここは「未来のAI」そんじょそこらのコンセプトじゃあなく、最新最先端のエッジが効いたサービス…ああ眼の前にいるじゃないか審査員が。でも『AI仏壇サービスなんて誰でも考えつくやろ』という「令和の虎」でのトラウマ発言が僕にも乗り移っていまして、僕の中にいる平田茉莉花は『そんなの百も承知ですわよ!さあ私に出資しなさい!!』っていう達観した悪役嬢キャラを描きたいんですよね、しかも美麗な。ああ、これはUSJ『ターミネーター2:3-D』の名物キャストとして知られる綾小路麗華(あやのこうじれいか)さま、じゃないですか。でもそのままでは、つまらない。きちんと札束の旋風を吹かせたい。仏壇としての神々さも装備したい。さらに、茉莉花様を神にしたい。達観したマジ顔で。でできあがったのが、これ。

画像

白井博士が私の大会で私を煽り勝負に勝ちやがりました🖕最高です🔥#AIBATO https://t.co/dQ8a1QD1r7 pic.twitter.com/udBW8blvLI

— 平田 マリカ┃AIクリエイティブディレクター (@AI_Marika1018) November 22, 2024

結果は…決勝進出!

やったーーー!

余裕見せてツイートしてますが、主催の平田茉莉花さんの名前を間違えてマドカと書いているぐらいまどマギしていた私でした。勝ててよかった…けど負けたら…どうなってたか……。

そして、上田カズヤさん @hashitogeika 、すごかった。

#AIBATO 第2戦 上田カズヤさん@hashitogeika
対戦ありがとうございました!!!
めっちゃ勉強になりました

Photoshop3.0の話で町田飲みしましょう🍷 pic.twitter.com/2B7RbPrra5

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

対戦ありがとうございました!!!
めっちゃ勉強になりました
Photoshop3.0の話で町田飲みしましょう🍷

決勝進出

徹夜明けテンションが切れないうちに 最後まで頑張っていくぞ俺!
と思ったけど休憩が入りました。やばい。
持ってきたモンスターエナジーはもう飲みきった。
会場でもらった缶コーヒーを開ける。トイレ行きたい。

思えばこれはフラグだった。

対戦相手は 殻尾(からびー)さん
普段からグラフィックデザイン業界にいる方。

〆切迫ってきたので忘れないうちに( ̄▽ ̄;)

ID:2061190
キャラクター名:黄金の精マナカ

金運を授ける妖精。
気まぐれで好奇心 旺盛。乗っている蛙は銭蛙と言う幻獣の一種で、お腹の袋にマナカの持ち物も色々入っている。

====#SOZO美術館 #AIチューバーコンペhttps://t.co/ZfvpJncJVv
==== https://t.co/91W3qEnPRf pic.twitter.com/koLw46ejfy

— 殻尾(からびー/AI同人作家)🐏 (@KARA_Beee) November 21, 2024

審査員も入れ替えがあり、メンバーの紹介もなかなかよかった。
その時のメモ。

画像

【AIBATO StableDiffusion部門 優勝者発表】

特別審査員にはカンヌでも審査員を務めた
3人をご招待⚡️

【THE FIRSTTAKE】映像プロデューサー
・木下健太郎様
【TBWA\HAKUHODO】CCO
・佐藤カズー様
【TBWA\HAKUHODO】プロデューサー
平久江 勤様

優勝したのは…
🎖️白井博士@o_obpic.twitter.com/L30OAoNMHW

— 平田 マリカ┃AIクリエイティブディレクター (@AI_Marika1018) November 22, 2024

特別審査員にはカンヌでも審査員を務めた 3人
【THE FIRSTTAKE】映像プロデューサー ・木下健太郎様 【TBWA\HAKUHODO】CCO ・佐藤カズー様
【TBWA\HAKUHODO】プロデューサー 平久江 勤様 優勝したのは…

決勝Shot1お題は「ニルヴァーナ」

ラストバトル、お題は

「ニルヴァーナ」#AIBATO

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

「涅槃ニルヴァーナ 」かあ……!涅槃の前に、私が寝たい。
そういえばさっき審査員が僕の作品を見てスタンド名「ニルヴァーナ」とか言ってたな。

ネヴァーマインド(SHM-CD) __ amzn.to 1,521 円 (2024年11月24日 04:04時点 詳しくはこちら) Amazon.co.jpで購入する

生成AI以前の時代にめちゃひどいツッコミどころ満載のジャケット。

画像

赤ん坊をこんな絵作りに使わなくていい分だけ生成AIはアクの中にも善が有るね…。

さて、「ニルヴァーナ」に関する制作メモはこんな感じ。

画像バッジを印刷した裏に書いているメモ

「具体・表現」ってのは、AIBATOの審査員側が設定しているテーマの枠らしい。MCのとんびさんが会場に向けて言っていたのをしっかりメモ。
自分が考えていたことと、審査員が言っていることを逐一メモ。

自分としては、涅槃、魑魅魍魎、曼荼羅、半目を閉じる、光あふれる、悟り顔、吹き消す、といったところを生成していきます。

大乗仏教の曼陀羅でニルヴァーナをシンメトリーで表現。光あふれる。苦悩、煩悩、八百万のAI天使たち、魑魅魍魎がうずめく、半目を閉じた、金髪ショートの黒スーツ女性。

(途中に使っていたプロンプトの一部)

中間過程

まだまだいくよ pic.twitter.com/I45DmT7X5I

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

ここまでできたところで、審査員の独りが「西洋的な絵ばかりですからねぇ」という一言が私を動かす。

画像

「邪悪な八百万ヤオヨロズを背景に」

"prompt": "mahayana buddhist mandala, nirvana, symmetry, radiant light, blonde short-haired businesswoman in black suit, half-closed eyes, serene expression, meditative pose, background of eight million evil ai angels, demons, monsters, swirling chaos",
"negativePrompt": "blurry, low quality, watermarks, text, logos, offensive content, inappropriate elements, realistic depictions, sexualized imagery, religious insensitivity, gore, extreme violence, nudity",

八百万の感じが足りない pic.twitter.com/K0GhjZ5IrQ

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

美しさだけじゃない、邪悪さと八百万の生成AI世界の妖怪たちが必要だ。そして中央の人物には表情のコダワリが必要だ。

やはり半目 pic.twitter.com/7FsDWI4ZEs

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

より世界観が伝わるように。より神々しく。
何が違うのかわからないかもしれないけどラスト1秒ぐらいでの判断。

「魑魅魍魎曼陀羅」 pic.twitter.com/g3nBRAXHJb

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

画像「魑魅魍魎曼陀羅」

結果は…!白井リード。
自分としては
ポイントとしてはリード。でも、優勝するためには、何をすればいいか。
この瞬間から更に深く考えていました。

<からびーさんの作品も素晴らしかったので、紹介したいけど画像がない>

審査員の講評では、明確に からびーさんを応援するメッセージもあったし、技術力は高い。左右シンメトリーの戦いだったし、実写系VS 2Dアニメイラスト系という構図。そもそもローカルGPUが全然うごいてないので、迂闊に慣れないモデル、対話できてないモデルを触ると探求に時間が消費されてしまう。

いままでの経験で、10分間でのローカルGPUでの生成は1-2回できるかどうか。自分の場合はクラウドGPUを5~7並列して処理しているけど、探求に使える時間は前半3分というところ。

最終テーマは「背水の陣」

手元のメモ。

画像

ストーリーテリング、エモーション、クラフトが大事。
どう使うかが大事。で、

画像

「はいすいのじん。背水の陣。」

「排水のJin」「ジン・ハイスイ」
ダジャレが好きな審査員を対策している。
その時の私のもうひとつの頭が考えていたこと。
『やばいトイレいきたい』

中間地点でほぼ完成。はやく終わらせてトイレ行きたい。

「はいすいのジン」#AIBATO pic.twitter.com/BKUcUa7Lra

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

今見直しても、完璧なジン。薬用酒であるドライジン、ジンベースのカクテルに、悪魔的な笑みがあるAI平田茉莉花。

画像

ああ!「排水の」要素がない!っていうか俺が排水したい(トイレで)
だんだんこの飲み物の色が怪しげな液体に見えてきたよ。

画像画像画像

だいたい1系統で30枚、60枚ぐらいの画像を常に比較している。

画像

審査員が「まさか、排水のジン…トニック…とか?」という図星をついてくる。
お願いだ、いまネタバレして笑わないでくれ。審査員は残酷だ。

そのタイミングで自分のプロンプトエンジンが不調を起こしている。

画像

Claudeはダジャレに弱い。まさに背水の陣だ。

そんなトライをしていたら、ネットの調子がおかしい。
もう背水の陣どころか。ハイ背水の陣ハイと言う感じだ。

試しにこんなツイートして確認してますが、何が原因だかわからない。

ネットの調子がおかしいゾ・・・まさに
背水の陣

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

もう、しょうがないな、最後はプロンプトは自力でやるしかない!

そしてこの絵の中から、一番、ラストにふさわしい作画を選ぼう…!

画像

自分で言うのも何だが
俺のコピーライティング能力がやばい。
画像生成もだけどキュレーション速度が1枚1秒以下。
人間が10分で生み出せるアウトプットの量じゃない。

#AIART ファイナル作品テーマは「背水の陣」今日、これが終わったら「排水のジン ファイナル作品
テーマは「背水の陣」

今日、これが終わったら「排水のジン」 pic.twitter.com/7j0GkW9Zcp

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

残りゼロ秒なので、ツイートもぶっ壊れてますが、作品としてはこちら。

画像作品「生成AIバトルの"排水のジン"をどうぞ」

広告の方々が審査員に加わったので、まずはとにかく美的に、そして商品性としては「お酒のCMに使えそうな絵」をつくること。さらに「第1回AIアートバトルの優勝作に相応しい作品であること」を考えた。

この2戦で開発してきたAI平田茉莉花を大事にして、それでいて個性を残しっつつ、分身、双子のようにそっくりだけれども、性格が異なる、というところで胸元の表現が異なっている所が良い。背景の曼荼羅は前回のニルヴァーナから移植してきた。これは「背水の陣」をきちんと解釈したつもり。
最後に「この液体は実は…」と言いかけたけど、やめておいた。
この怪しげな「ハイスイノジン」という飲み物が何であるのかは、優勝してから白状しよう。指がおかしいところもあえてコンセプトとして主張せずに、あえて指がおかしい絵を選んだことを誰も突っ込まないように発表しよう、それが素直な生成AIアート、広告アートのあるべき姿だと思ったので。

でも最後の殻尾さんの作品、すごい。自分もこんな絵にしたかった。

画像

でも一方で、Shot1のバトルの最中、実はからびーさんの作品をしっかり見ていて、さらにShot2のときにも、すごいな…と思いながら審査員の反応と方向性を聞いていて、「自分がこの完璧な絵をこの10分で描いたら」とか「はたして審査員は票をいれるだろうか」とか考えていました。さらに「これで仮に自分が優勝したら」とか「これが一生残る、今後も画像生成AIの歴史に残る第1回の優勝作です」ってことになったとしたら。

ここはあえて「第1回」ならではの要素をいれるべきではないだろうか。
しかし、ただの失敗指じゃあだめだ。きちんとAI画像生成として超絶美しくて、それでいて「AI画像であることがわかる」という要素を入れよう。そうすれば勝っても負けても後悔はない。そんな事を考えて祈ってました。

結果は…優勝……!

やったああああああああ
双方、ほぼ満点で僅差だったそうです。
前半のリードがなければ負けていた!

第1回生成AIアートバトル「 #AIBATO 」 StableDiffusion 部門で優勝しました〜 超絶画力な @KARA_Beee さんにライブエンタメ博士として負けられない #背水の陣 …!! 怪しげなインパクトのAI平田茉莉花さんをStabilityAI APIで開発しつつ 「AI生成だっ!!」とわかる指多めの絵作りで〆ました。感謝!

https://x.com/o_ob/status/1859883395855384816

第1回生成AIアートバトル「 #AIBATO 」 StableDiffusion 部門で優勝しました〜

超絶画力な @KARA_Beee さんにライブエンタメ博士として負けられない#背水の陣 …!!

怪しげなインパクトのAI平田茉莉花さんをStabilityAI APIで開発しつつ
「AI生成だっ!!」とわかる指多めの絵作りで〆ました。感謝! pic.twitter.com/rAw9tEoW6n

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

実は最後の数十秒は
表情と背景と人物と指の仕上げを同時にバッチ処理で実施しながら
トイレ我慢してたので
怪しげな液体「排水のジン」の色が気になっていて…
プレゼンで「これは優勝した時のコメントで言おう…これは生成AIを使った炎上込みの設計作品なんだから」と祈ってました。重賞受賞感謝!

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

実は最後の数十秒は 表情と背景と人物と指の仕上げを同時にバッチ処理で実施しながら トイレ我慢してたので 怪しげな液体「排水のジン」の色が気になっていて… プレゼンで「これは優勝した時のコメントで言おう…これは生成AIを使った炎上込みの設計作品なんだから」と祈ってました。重賞受賞感謝!

https://x.com/o_ob/status/1859885925335273956

優勝したのは…

白井博士
@o_ob 私の令和の虎を風刺しながら会場と審査員を巻き込み、エンタメの根本を理解した上でのクリエイティブ圧巻でした。 また来年、AIBATOでお会いしましょう

ファイナルの審査員コメントを
細い回線でアップロードしておきます

会場外の皆さんに届け!

審査員の皆様
ご審査いただきありがとうございました

対戦者のクリエイターの皆様

最後まで応援いただいた皆様にも感謝です

https://x.com/o_ob/status/1859907262741192710

ファイナルの審査員コメントを
細い回線でアップロードしておきます

会場外の皆さんに届け!

審査員の皆様
ご審査いただきありがとうございました

対戦者のクリエイターの皆様

最後まで応援いただいた皆様にも感謝です#AIBATO pic.twitter.com/0zG4MgerwG

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

評価してくれたみなさん、ありがとうございました!!!

画像

平田茉莉花さんからいただいた公式写真です。キリッ。

画像

感想戦ツイートより

自分自身は、家に帰ってきたら(徹夜明けということもあり)ぶっ倒れてしまったのですが、感想戦ツイートが尊かったので記念に紹介させてください。

はからずしもペアルックぽくなった両日参加審査員の崇人氏 @t_honda と🩶🤍

お疲れ様でした!!!!!#AIBATO #AIアートバトル#AIEXPO#LimerenceAI#NexTechWeek@AI_Marika1018 pic.twitter.com/lbREdBdTfe

— マドカ・ジャスミン マドジャス (@mdk_jasmine) November 22, 2024

AIBATO終了です!
残念ながら優勝ならずでしたが決勝戦敗退なので実質準優勝ですよね( ̄▽ ̄)vニヤリ

............そう言えば地味に顔出し初だな私?😅 https://t.co/Gw4Pxffe9v

— 殻尾(からびー/AI同人作家)🐏 (@KARA_Beee) November 22, 2024

―――あの瞬間こそは正しく「AIアート」だったのではないか。

AIBATOを終えて‐確率と閃きの間に瞬間の美を見る‐
殻Bee(からびー)
2024年11月23日 21:24
https://note.com/kara_bee/n/nd66f9b015ec8

#AIBATO 出場記念 pic.twitter.com/1ViVTafztt

— 殻尾(からびー/AI同人作家)🐏 (@KARA_Beee) November 22, 2024

はかせさん✨
大会でお世話になりましたもとです😊
優勝おめでとうございました!👏👏
独自の発想!エンタメ性!あとはAI画像の愛も感じられる良いものを見せて頂きました!
めちゃくちゃ刺激受けたのでもっと勉強してよりいいモノ生成出来るように頑張りたいと思いました!…

— もと@Shi-Sui・青芭・マナ (@moto_ai_ShiSui) November 22, 2024

撮っておいてよかった…!!
ツイートしておいてよかった

ところで12/14に忘年会やりますhttps://t.co/OauJdRwGdF

— Dr.(Shirai)Hakase - AICU media編集長 しらいはかせ (@o_ob) November 22, 2024

『生成 AI 忘年会』に申し込みました!https://t.co/Td4B8F0uuN#生成AI #人工知能 #生成AI忘年会 #techplayjp

— 殻尾(からびー/AI同人作家)🐏 (@KARA_Beee) November 22, 2024

Day1のクズなくまさんから参考作いただいてしまった

ニルヴァーナ pic.twitter.com/fcGEqeP2l4

— クズなくまさん (@kuzukumasan9) November 23, 2024

背水の陣 pic.twitter.com/8R0wE2ld7u

— クズなくまさん (@kuzukumasan9) November 23, 2024

生成AIやっている人は人生の幸福度高いよ。

だって、こなせる仕事は増えて、時間が空く分たくさん人と話せるし、

— 神威/KAMUI (@ai_syacho) November 22, 2024

平田茉莉花さん、大変お世話になりましたッス!!

弊社実は極道なのかもしれません pic.twitter.com/UEF0NQOXdw

— 平田 マリカ┃AIクリエイティブディレクター (@AI_Marika1018) November 23, 2024

テクニック的には「技術編」にて!

<技術解説編に、続きます!>

実は既に、この辺に一部公開しています

実は私のテクニックはAmazonで買えます。

画像生成AI Stable Diffusion スタートガイド (Generative AI イラストレーション) __ j.aicu.ai 2,640 円 (2025年06月24日 16:48時点 詳しくはこちら) Amazon.co.jpで購入する

今回使っていた Stability AI API 関連はこちら。

AICU Magazine Vol.5 Stability AI Forever! AICU マガジン __ j.aicu.ai 900 円 (2024年11月24日 19:33時点 詳しくはこちら) Amazon.co.jpで購入する

Stability AI APIに関する私のテクニックはColosoで買えます

生成AIクリエイティブ AICU AIツールのインストールと基本設定から、Stable Diffusionの基礎的な操作方法や、Stability AI A j.aicu.ai

謝辞:Stability AIのみなさん
いいAPIをありがとうございました。
いつかきちんとお礼を言いたい。

広告関係はこちら。メイン講師の藤吉香帆先生よりメッセージ。

生成AIクリエイティブ AICU Midjourneyを活用した広告のアイデアまとめと企画資料制作から、Runway Gen-3でコンセプトに合った動画広告 j.aicu.ai

最新作、ComfyUIで画像生成システムを業務開発したい人にはこちらが超おすすめ!

生成AIクリエイティブ AICU Google ColabとAWSを使ったComfyUIの環境設定から、FLUX APIを使った画像生成まで、ComfyUI j.aicu.ai

ボーナストラックでは、生成した画像の一部とメモを提供します。

このラインより上のエリアが無料で表示されます。

__[AIBATO]AICU-Stability-AdGenerator - https___j.aicu.ai_SAIAD.pdf 16.7 MBファイルダウンロードについて __ダウンロード

__[AIBATO2]AICU-Stability-AdGenerator - https___j.aicu.ai_SAIAD.pdf 22.8 MBファイルダウンロードについて __ダウンロード

__20241122-Aibato.pdf 32.4 KBファイルダウンロードについて __ダウンロード

copy __

記事を高評価したユーザー

ないとっち/AIで世界をハッピーに!

1人

すべてのタグを表示

__

40

_ _

_ _

しらいはかせ
AI/Hacker/作家/編集者/AICU代表

しらいはかせ AI/Hacker/作家/編集者/AICU代表

年間700本ぐらいブログを書いているAIやメタバースをエンタメにするホワイトハッカー作家 クリエイティブAIで「つくる人をつくる」AICUというメディア企業の日米代表 https://note.com/aicu 学術研究もします https://akihiko.shirai.as

__

40

_ _

__

40


DeepSeek、高性能かつ低価格な大規模言語モデル「DeepSeek V3」を発表!

ここに効果的な画像

2024年6月20日、DeepSeekは、最新の大規模言語モデル「DeepSeek V3」を発表しました。MoEアーキテクチャを採用することで、前モデルと比較して推論速度が大幅に向上しています。また、様々なベンチマークにおいてオープンソースモデルの中でトップクラスの性能を誇り、世界最先端のクローズドソースモデルに匹敵する実力を持っています。

DeepSeek V3の特徴

DeepSeek V3は、以下のような特徴を持っています。

  • MoEアーキテクチャの採用: Mixture of Experts (MoE) アーキテクチャを採用することで、推論速度が大幅に向上しました。
  • 高性能: 様々なベンチマークにおいて、オープンソースモデルの中でトップクラスの性能を誇ります。
  • 低価格なAPI: APIの価格が非常に低く設定されており、コストパフォーマンスに優れています。
  • 中国語に強い: 中国語の性能が非常に高く、百科事典的な知識や長文テキストのパフォーマンスにも優れています。

DeepSeek V3の性能

DeepSeek V3は、以下のベンチマークにおいて優れた性能を示しています。

  • MMLU (EM): 88.5
  • MMLU-Redux (EM): 89.1
  • MMLU-Pro (EM): 75.9
  • DROP (3-shot F1): 91.6
  • HumanEval-Mul (Pass@1): 82.6
  • LiveCodeBench (Pass@1-COT): 40.5
  • AIME 2024 (Pass@1): 39.2
  • MATH-500 (EM): 90.2
  • CLUEWSC (EM): 90.9
  • C-Eval (EM): 86.5

これらの結果から、DeepSeek V3は、特にコード生成や数学、中国語の能力において優れていることがわかります。

DeepSeek V3のAPI価格

DeepSeek V3のAPI価格は、以下の通りです。

  • 入力トークン: 100万トークンあたり ¥1 ($0.14)
  • 出力トークン: 100万トークンあたり ¥2 ($0.28)

この価格は、他の大規模言語モデルのAPIと比較して非常に低く設定されており、コストパフォーマンスに優れています。

DeepSeek V3の使い方

DeepSeek V3は、以下の方法で利用できます。

  • DeepSeek Chat: DeepSeekのウェブサイト上で、DeepSeek V3とチャット形式で会話できます。
  • DeepSeek Platform: DeepSeekのAPIを利用して、DeepSeek V3をアプリケーションに組み込むことができます。
  • DeepSeek App: DeepSeekのモバイルアプリを利用して、DeepSeek V3とチャット形式で会話できます。

まとめ

DeepSeek V3は、高性能かつ低価格な大規模言語モデルです。MoEアーキテクチャの採用により推論速度が大幅に向上し、様々なベンチマークにおいてオープンソースモデルの中でトップクラスの性能を誇ります。また、APIの価格が非常に低く設定されており、コストパフォーマンスに優れています。

DeepSeek V3は、研究者や開発者にとって非常に魅力的な大規模言語モデルです。今後のさらなる発展に期待しましょう。

AICUからのお知らせ

AICU mediaでは、生成AIに関する最新情報や技術解説などを発信しています。ぜひ、noteのフォローやメールマガジン「週刊AICU通信」の購読をお願いします!

📝noteでのフォロー https://note.com/aicu 📩メールマガジン「週刊AICU通信」購読 https://corp.aicu.ai/ja 📚️Kindle「月刊AICUマガジン」 https://j.aicu.ai/kindle

また、最新情報をキャッチアップしたい方は、ぜひXで @AICUai をフォローしてください!

noteタグ群

生成AI #LLM #DeepSeek #DeepSeekV3 #MoE #API #オープンソース #中国語 #AI #機械学習 #自然言語処理 #大規模言語モデル #低価格 #高性能 #チャットボット

Stable Diffusion プロンプト例

Anime style red-haired 20-year-old kind boyfriend who affirms his girlfriend with all his might, round chin, 1boy, solo, male focus, (streaked hair), red short hair with light highlight, red eyes, hoodie, looking at viewer,short hair, hair between eyes, portrait, simple background, a young man with red hair explaining the structure of the MoE architecture

Docusaurus/ReactでTwitterをいい感じに表示するコンポーネントを最短で書く

Docusaurus3.7をさわってます。久しぶりにReactをやると、今どきはどんな書き方が正しいのかわからないのでメモしておきます。

Markdownからの静的サイトをつくるうえで、X(Twitter)埋め込みがめんどいことがあります。理想をいえば、TwitterやXのURLを書いただけで "publish.twitter.com"で取得できる blockquoteと https://platform.twitter.com/widgets.js  などを含むコードに展開したいと思います、よね?

例えばこのツイートを埋め込みたいとします

https://x.com/o_ob/status/1601011352977305600

こんな感じにプレビューできるので Copy Codeします

こういうコードが生成されます

1
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">852話さんが作った 8528-diffusion-v0.2をGoogle Colab上で起動したWebUIで使用するコードです。<a href="https://t.co/slD5EtZwIZ">https://t.co/slD5EtZwIZ</a><br><br>Running on public URL: <a href="https://t.co/59uk61Jg19">https://t.co/59uk61Jg19</a><br>と出てくるURLをブラウザの <a href="https://t.co/kbnG05BECF">https://t.co/kbnG05BECF</a> のURLを別ウインドウで開くと、AUTOMATIC1111が動きます!<a href="https://twitter.com/hashtag/8528d?src=hash&amp;ref_src=twsrc%5Etfw">#8528d</a> <a href="https://t.co/OjfslEiYpr">pic.twitter.com/OjfslEiYpr</a></p>&mdash; Dr.(Shirai)Hakase - しらいはかせ (@o_ob) <a href="https://twitter.com/o_ob/status/1601011352977305600?ref_src=twsrc%5Etfw">December 9, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これを noteなりqiitaなりhtmlなりmdなりで使えば良いのですが、大きく分けると

  • Blockquote 本来は引用だが "twitter-tweet"クラスで囲ってる
  • p ツイートの中身テキスト(おそらく最初の140文字を意識)
  • <a>とか<br>とか
  • 親ツイートへのリンクとかハッシュタグとか
  • ツイートしたしたユーザーのディスプレイ名、@名
  • そのツイートへのURL(twitter.com)
  • 日付(英語、長い形式)
  • script widget.js へのリンクという構成になっています。

とても長くて、かつTwitter.comやt.coを参照していて、さらに日付とかユーザー名とかもあって「これはもうサーバー側で動的取得せねばなのでは?」という感じがします。

さらにこれはReactだと色んな実現方法があると思います。ちなみに <br> は <br/> としないとMDX環境ではエラーになります。

で、さっきまでLLM (Gemini 2.0 Flash Thinking Experimental 01-21)とTwitter API v2を使う方法を試していたんだけど、cURLでスルッと通るような認証がnodeにすると401になったり、そもそもTwitterのAPI費がとても高くなってしまったので、やめました。

お客さんがアクセスするたびにTwitter APIを消費するような仕組みもアホらしい、docusaurus buildするときに参照するようにしたい、でもそのビルドのときにおかしいと気づいたら、もう直しておいてくれて欲しい。

そもそも僕は知っている、Twitter埋め込みコードで必要となる要素はとても少ない。

上記の要素を全部埋めるのは無理なんですが、そもそも https://x.com/o_ob/status/1601011352977305600 というURLにユーザー名とStatusが含まれています。そこからいろんなものを解決するのがwidget.jsの仕事なので、全部クライアントサイドのレンダリングにしてしまって良い気がしました。

方法としては、まずはこんな感じのReactコンポーネントに処理をさせるのが初手だと思ったので作っていきます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// docs/src/components/Twitter.js
import React from 'react';

export default function Twitter({ children, url }) {
  // URLから username と status を抽出 (twitter.com と x.com 両対応)
  const usernameMatch = url.match(/(twitter|x)\.com\/([^\/]+)/);
  const statusMatch = url.match(/status\/(\d+)/);
  const username = usernameMatch ? `@${usernameMatch[2]}` : 'Unknown User'; // usernameMatch[2] に変更
  const status = statusMatch ? statusMatch[1] : '';

  // 現在の日付を取得
  const datetime = new Date().toLocaleDateString();

  return (
    <div>
      {children && <p>{children}</p>} {/* children がある場合は、ツイートの上に表示 */}
      <blockquote className="twitter-tweet">
        <p lang="ja" dir="ltr">
          {/* children の有無に関わらず、常にこのプレースホルダーテキストを表示 */}
          Loading X.com tweet...
        </p>
        — <a href={`https://twitter.com/${username.replace('@', '')}?ref_src=twsrc%5Etfw`}>{username}</a> <a href={`https://twitter.com/${username.replace('@', '')}/status/${status}?ref_src=twsrc%5Etfw`}>{datetime}</a>
      </blockquote>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
  );
}
https://gist.github.com/kaitas/d71ca0980417f897caadc4cb9ae31f2e

要は正規表現で、x.comとかtwitte.comといったURLがきたら、そこからユーザーネームを拾って、/status/~/をみて、正規表現のmatchでそのステータスIDを取得して…なければないでまあ空白にしておいて、日付は今日の日付でも取っておいて、それをフォーマットに沿って流し込んでいきますと、うまくいきます。

「うまくいきます」とするっと書いてますが、実際には後半の Aタグでtwitter.com をロードしないと正しく動作しないとか、中盤のPタグでプレースホルダしないとうまく動作しないとか、けっこう色々ノウハウが有ることを思い出しましたので、そのへんも味わっていただけると幸いです。

widget.jsはここで読み込む必要はないです、ページの最後にまとめてロードする、という方法もありますが、UX的に速くて、早くて、安定しているのは、同じdivの中にいれることだと思います。

これでMarkdown中では、とセルフ閉じタグで書くか、 このへんにつぶやきの内容が入るとすれば children として渡すことができます。実際にはローディングが終わるまでの一瞬読まれるだけテキストなので「Loading X.com tweet...」をデフォルトとしておきました。引用元のURLも x.com だけでいいかと思ったけど、時々 twitter.com が混ざってくるのでどちらも動くようにしておくと良さそうです。

Docusaurus全体で使いたい。

こうなるとDocusaurus全体で使いたいですよね。自分が使っている最新のDocusaurus3.7だけかもしれないですが、こんな感じに全体で使えるコンポーネントをつくることができます。docs\src\theme\MDXComponents.jsにMDXで使いたいコンポーネントを登録して行きます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import React from 'react';
// Import the original mapper
import MDXComponents from '@theme-original/MDXComponents';
import Highlight from '@site/src/components/Highlight';
import Twitter from '@site/src/components/Twitter';

export default {
  // Re-use the default mapping
  ...MDXComponents,
  // Map the "<Highlight>" tag to our Highlight component
  // `Highlight` will receive all props that were passed to `<Highlight>` in MDX
  Highlight,
  Twitter,
};

参考資料・補足

実際にはフロントマター(markdownの冒頭にあるYAML形式の拡張情報のこと)もparseFrontMatter機能を使用して、独自のフロントマター パーサーを提供したり、デフォルトのパーサーを拡張したりできます。

Docusaurusのデフォルトのパーサーを再利用して、独自のカスタム専用ロジックでラップすることもできます。便利なフロントマター変換やショートカットを実装したり、Docusaurus プラグインがサポートしていないフロントマターを使用して外部システムと統合したりすることが可能になります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export default {
  markdown: {
    parseFrontMatter: async (params) => {
      // Reuse the default parser
      const result = await params.defaultParseFrontMatter(params);

      // Process front matter description placeholders
      result.frontMatter.description =
        result.frontMatter.description?.replaceAll('{{MY_VAR}}', 'MY_VALUE');

      // Create your own front matter shortcut
      if (result.frontMatter.i_do_not_want_docs_pagination) {
        result.frontMatter.pagination_prev = null;
        result.frontMatter.pagination_next = null;
      }

      // Rename an unsupported front matter coming from another system
      if (result.frontMatter.cms_seo_summary) {
        result.frontMatter.description = result.frontMatter.cms_seo_summary;
        delete result.frontMatter.cms_seo_summary;
      }

      return result;
    },
  },
};

Docusaurus 3.7 を使ってる人がどれぐらいいるかわかりませんのと、それぐらいの人であれば Reactでツルッと作ってしまえそうなのですが、LLMで逆に混乱することもあったので書き起こしてみました。