Merge pull request #519 from daisuke-awaji/feat/gen-ui

スライド生成とウェブサイト生成の出力を安定させる

packages/web/src/pages/summit/GenerateSlidePage.tsx

@@ -189,6 +189,10 @@ const GenerateSlidePage: React.FC = () => {
       value:
         '半導体市場の動向について、現状分析と将来予測を行い、10枚のスライドにまとめてください。表形式で数値的エビデンスも提示してください。',
     },
+    {
+      label: '物理の方程式',
+      value: `美しい物理の方程式をランキング形式で紹介！美しい理由も熱く語ってください。`,
+    },
     {
       label: 'アウトラインから作る',
       value:

packages/web/src/prompts/claude.ts

@@ -76,31 +76,119 @@ const systemContexts: { [key: string]: string } = {
 
   // Summit用
   '/slide': `あなたはスライドを生成する Marp を支援するAIアシスタントです。与えられた文章とルールに従い、Marp が出力可能な Markdown を出力してください。
-  <rules>
-  * 説明は一切不要です。
-  * \`\`\`yaml のような接頭語も一切不要です。
-  * Markdown のテキストだけ生成してください。
-  * --- によって、スライドが分割されます。適切な粒度で分割してください。
-  * 標準で gaia の theme を使用します。指定があればそれ以外も使用してください。
-  * 積極的に図、表などの構造化された文章、画像を使用してください。
-  * 画像は pexels から適当なものを参照してください。指定があればそれ以外から参照することも可能です。
-  * 背景に画像を挿入することは極力避けてください。
-  </rules>
-  
-  Markdown の先頭に書く theme などの Local directives のサンプルは以下の通りです。
-  theme などはファイル全体に適用されます。スライド１枚ずつに記述してはいけません。
-  特に指定がなければ以下のフォーマットに従ってください。
-  <format>
-  ---
-  theme: gaia
-  _class: lead
-  paginate: true
-  backgroundColor: #fff
-  backgroundImage: url('https://marp.app/assets/hero-background.svg')
-  ---
-  
-  本文
-  </format>`,
+<rules>
+* 説明は一切不要です。
+* \`\`\`yaml のような接頭語も一切不要です。
+* Markdown のテキストだけ生成してください。
+* --- によって、スライドが分割されます。適切な粒度で分割してください。
+* 標準で gaia の theme を使用します。指定があればそれ以外も使用してください。
+* 図、表などの構造化された文章、箇条書きの文章や数式、画像、アイコンを使用してください。
+  * 画像は全体のスライド数に対して３割程度の使用として多用しないでください。
+  * 背景画像は 100% の比率にします。背景画像だけのページは避け、白い色の文書も入れてください。
+  * ソースコードを記述する場合、1ページあたり、15行以内にしてください。
+* 画像は pexels から適当なものを参照してください。指定があればそれ以外から参照することも可能です。
+* 指定されない限り背景画像は以下から選択してください。
+  * https://marp.app/assets/hero-background.svg
+* 背景画像がある場合、文字色を白にしてください。
+* アイコンが必要な場合、Flaticon から適当なものを参照してください。
+</rules>
+
+Markdown の先頭に書く theme などの Local directives のサンプルは以下の通りです。
+theme などはファイル全体に適用されます。スライド１枚ずつに記述してはいけません。
+特に指定がなければ以下のフォーマットに従ってください。
+<format>
+---
+theme: gaia
+class: lead
+paginate: true
+backgroundColor: #fff
+backgroundImage: url('https://marp.app/assets/hero-background.svg')
+---
+<!-- header: "スライドのテーマ" ---> ヘッダーを指定
+<!-- footer: "©︎2024, Amazon Web Services, Inc. or its affiliates.All rights reserved." ---> フッターを指定
+
+# タイトル
+
+### サブタイトル
+
+オシャレ要素（powerd by Amazon Bedrock ♡ Marp のようなオシャレ要素を入れると良い）
+
+---
+![bg 100%](背景画像)
+
+<!-- 背景画像がある場合、文字色を白くする -->
+<style scoped>
+* {
+  color: white;
+}
+</style>
+
+
+<!-- header: "スライドのテーマ２" ---> ヘッダーを指定
+<!-- footer: "©︎2024, Amazon Web Services, Inc. or its affiliates.All rights reserved." ---> フッターを指定
+
+## タイトル
+
+内容
+
+---
+<!-- header: "スライドのテーマ３" ---> ヘッダーを指定
+<!-- footer: "©︎2024, Amazon Web Services, Inc. or its affiliates.All rights reserved." ---> フッターを指定
+
+## タイトル
+
+内容
+
+</format>
+
+また、スタイルを変更する場合は以下のようにしてください。
+<styling-example>
+---
+theme: base
+---
+
+<style>
+section {
+  background: yellow;
+}
+</style>
+
+# Tweak style through Markdown
+
+You would see a yellow slide.
+</styling-example>
+
+スコープ付きスタイル
+また、<style scoped>を通じてスコープ付きインラインスタイルもサポートしています。
+style要素にscoped属性がある場合、そのスタイルは現在のスライドページにのみ適用されます。
+スライドページごとにスタイルを微調整したい場合に便利です。
+<scoped-styling-example>
+
+<!-- Global style -->
+<style>
+h1 {
+  color: red;
+}
+</style>
+
+# Red text
+
+---
+
+<!-- Scoped style -->
+<style scoped>
+h1 {
+  color: blue;
+}
+</style>
+
+# Blue text (only in the current slide page)
+
+---
+
+# Red text
+</scoped-styling-example>
+`,
   '/generate-sql': `以下はユーザーと AI のやりとりです。
 ユーザーは AI に <schemas></schemas> の xml タグで囲って RDB のスキーマ情報を渡します。
 さらに、<input></input> の xml タグで囲って AI に記述して欲しい SQL の説明を渡します。
@@ -162,7 +250,7 @@ GROUP BY
 * トリプルバックティックまたはトリプルバッククォート（\`\`\`）は出力してはいけない
 * 必要であれば API をフェッチして表示するソースコードも生成する
 * background color は white を基調とする
-* 画像が必要な場合、Unsplash から適当なものを参照してください。指定があればそれ以外から参照することも可能です。
+* 画像が必要な場合、pexels から適当なものを参照してください。指定があればそれ以外から参照することも可能です。
 </rules>
 `,
   '/interpreter': `あなたはAWS Lambda関数を生成するAIアシスタントです。