神威 第三世代 スライド生成(要件定義yaml版)
神威の簡易的なガイドページを作りました 第三世代版です
現在公式さんで簡単操作ガイドを作成されているとのことで繋ぎガイドです
1. 第三世代にアクセスしてログイン
こちら↓
2. 一旦、トップページのテキスト欄にtestと入れてページ遷移
「test」と入力してテンプレートのyamlのみ生成
現在初期設定されているAPIは(多分)日本語の言語理解力の良さとパフォーマンスのバランスからClaude HAIKUが設定されているのですが、生成するコンテンツやタイミングによってAPIレート制限で全出力がされないことがあります。Anthropicに制限解除の依頼中らしいので一旦はgeminiなどを選択しなおした方がスムーズに行きます
3. gemini or gpt4oを選択
好きなLLMを選択して要望入力後に送信ボタンをクリック
私はなんとなくgemini-2.0-flash-expを選択しています
4. 要件定義yamlのかたまりをチャット欄にそのまま投げる
グリモアと呼ばれる構造を持った要件定義yamlをそのままチャット欄に投げることで
スライドが一気に生成できてしまいます。
柔軟性を持ったプログラムファイルと呼べるようなもので、あらかじめ必要な要素を階層構造でプライオリティをつけながら役割を明確に分けて定義することで、各種必要な要素がぬけ漏れなくきっちり入れることが可能なフォーマットになっています
今回は神威日報でスライドグリモアとして元木さんが共有されていたものを使います
src:
structure.yaml:
content: |-
未来技術プレゼンテーション用スライドデッキ
- Marpを使用したスライドデッキ
- 背景は黒
- 2枚目以降は左にタイトルとテキスト、右に挿絵
- オレンジと青の粒子感と内容に合わせた画像
- 画像には文字を入れない
- 未来技術をテーマにした5枚のスライド
dependency:
- src/slides/01_title.png
- src/slides/02_genai.png
- src/slides/03_quantum.png
- src/slides/04_fusion.png
- src/slides/05_conclusion.png
- src/theme/style.css
agent: "claude-3-5-sonnet-20241022"
api: ["imagen-3.0-generate-001"]
slides:
'01_title.png':
content: |-
タイトルスライド用画像
- 未来的な抽象デザイン
- オレンジと青の粒子
dependency: []
agent: "imagen-3.0-generate-001"
api: []
'02_genai.png':
content: |-
生成AIの概念を表現する画像
- オレンジと青の粒子感のある抽象的な機械学習モデルの画像
- GANとTransformerの視覚化
dependency: []
agent: "imagen-3.0-generate-001"
api: []
'03_quantum.png':
content: |-
量子コンピューティングの概念画像
- オレンジと青の粒子感のある量子ビットの抽象表現の画像
- 重ね合わせと量子もつれの可視化
dependency: []
agent: "imagen-3.0-generate-001"
api: []
'04_fusion.png':
content: |-
生成AIと量子技術の融合
- オレンジと青の粒子感のあるAIと量子コンピュータの相互作用の画像
- 技術融合の抽象的な表現
dependency: []
agent: "imagen-3.0-generate-001"
api: []
'05_conclusion.png':
content: |-
結論スライド用画像
- オレンジと青の粒子感のある未来技術の展望の画像
- イノベーションの象徴的表現
dependency: []
agent: "imagen-3.0-generate-001"
api: []
presentation.marp:
content: |-
Marpスライドデッキの構成
- 5枚のスライドで技術革新を解説
- 各スライドに対応する画像を配置
- 2枚目以降は左にタイトルとテキスト、右に挿絵
- 背景は黒
- 未来技術の可能性を探求
dependency:
- src/slides/01_title.png
- src/slides/02_genai.png
- src/slides/03_quantum.png
- src/slides/04_fusion.png
- src/slides/05_conclusion.png
agent: "claude-3-5-sonnet-20241022"
api: []
theme:
style.css:
content: |-
プレゼンテーションのスタイリング
- モダンでクリーンなデザイン
- 未来的な色彩と typography
- レスポンシブな視覚効果
- 背景は黒
- 2枚目以降は左にタイトルとテキスト、右に画像
dependency: []
agent: "claude-3-5-sonnet-20241022"
api: []
5. 要件定義yamlの構造と役割
小さくて見づらいのですが、それぞれの役割を記載しました
大枠で3つのブロックに分かれていて、内容は画像の赤枠の部分(content)、ここを差し替えたり、同じ内容を入れることによって統一性を保ちつつ変化を入れていくことが可能になります
※プロンプトだけで制御すると構造がなく柔軟すぎてフォーマットが崩れやすい
1. 全体の定義ブロック
2. スライドの定義ブロック
3. テーマの定義ブロック
画像3,4,5は省略
6. 実装を押して生成する
画像はプログレスバーが出なくても大丈夫
7. データを確認してダウンロード
既に神威の中で閲覧できるように最適化されているグリモアなので、そのまま神威でスライドを確認できます！
8. Cursorで確認や調整
srcフォルダの中身をCursorで確認します。
画像のダウンロードでerrorが出ることがあるのでその場合は神威本体から直接ドラッグして持ってきます。
presentation.marpの拡張子を.mdにすることでプレビューできるようになります。
9. 補足 ハッピーニューイヤーグリモア
こちらはテーマのブロックがない版グリモアで各ブロック内にagent_selection_reasonとapi_selection_reasonの項目があります
これは神威がそのエージェントやLLMを選んだ理由で、要望 > 神威が自動生成したグリモアの時のフォーマットで、なぜそのAIが該当要素にアサインされたかの理由をユーザーに伝える役割なので
今回のように自分からチャット欄にグリモア入力する時点ではなくてもOKです
src:
structure.yaml:
content: |-
未来技術プレゼンテーション用スライドデッキ
- Marpを使用したスライドデッキ
- 背景は黒
- オレンジと青の粒子感と内容に合わせた画像
- 画像には文字を入れない
- 未来技術をテーマにした5枚のスライド
- 全ページにKAMUI HAPPY NEW YEARを表示し、KAMUIを中央に、HAPPY NEW YEARをその下に配置する。文字は大きく表示する。
agent_selection_reason: claude-3-5-sonnet-20241022は、プロジェクト全体の構造を把握し、複数の画像生成APIとの連携を管理するのに適しています。
api_selection_reason: imagen-3.0-generate-001は、高品質な画像生成が可能で、抽象的なデザインの生成に優れているため選択しました。
dependency:
- src/slides/01_title.png
- src/slides/02_genai.png
- src/slides/03_quantum.png
- src/slides/04_fusion.png
- src/slides/05_conclusion.png
- src/theme/style.css
agent: "claude-3-5-sonnet-20241022"
api:
- "imagen-3.0-generate-001"
slides:
'01_title.png':
content: |-
タイトルスライド用画像
- 未来的な抽象デザイン
- オレンジと青の粒子
- 画像には文字を入れない
agent_selection_reason: imagen-3.0-generate-001は、抽象的なデザインの生成に優れています。
dependency: []
agent: "imagen-3.0-generate-001"
api: []
'02_genai.png':
content: |-
生成AIの概念を表現する画像
- オレンジと青の粒子感のある抽象的な機械学習モデルの画像
- GANとTransformerの視覚化
- 画像には文字を入れない
agent_selection_reason: imagen-3.0-generate-001は、抽象的な機械学習モデルの表現に優れています。
dependency: []
agent: "imagen-3.0-generate-001"
api: []
'03_quantum.png':
content: |-
量子コンピューティングの概念画像
- オレンジと青の粒子感のある量子ビットの抽象表現の画像
- 重ね合わせと量子もつれの可視化
- 画像には文字を入れない
agent_selection_reason: imagen-3.0-generate-001は、量子ビットの抽象表現に優れています。
dependency: []
agent: "imagen-3.0-generate-001"
api: []
'04_fusion.png':
content: |-
生成AIと量子技術の融合
- オレンジと青の粒子感のあるAIと量子コンピュータの相互作用の画像
- 技術融合の抽象的な表現
- 画像には文字を入れない
agent_selection_reason: imagen-3.0-generate-001は、技術融合の抽象的な表現に優れています。
dependency: []
agent: "imagen-3.0-generate-001"
api: []
'05_conclusion.png':
content: |-
結論スライド用画像
- オレンジと青の粒子感のある未来技術の展望の画像
- イノベーションの象徴的表現
- 画像には文字を入れない
agent_selection_reason: imagen-3.0-generate-001は、未来技術の展望を描写する能力に長けています。
dependency: []
agent: "imagen-3.0-generate-001"
api: []
presentation.marp:
content: |-
Marpスライドデッキの構成
- 5枚のスライドで技術革新を解説
- 各スライドに対応する画像を配置
- 背景は黒
- 未来技術の可能性を探求
- 全ページにKAMUI HAPPY NEW YEARを表示し、KAMUIをスライドの中央に、HAPPY NEW YEARをその下に配置する。文字は大きく表示する。
agent_selection_reason: claude-3-5-sonnet-20241022は、Marpの構文を理解し、テキストの配置とサイズを指示するのに適しています。
dependency:
- src/slides/01_title.png
- src/slides/02_genai.png
- src/slides/03_quantum.png
- src/slides/04_fusion.png
- src/slides/05_conclusion.png
agent: "claude-3-5-sonnet-20241022"
api: []
画像3,4,5は省略
Discussion