feat(presets): add cover page for AI slides (toeverything#6105)

packages/presets/src/fragments/copilot-panel/chat/logic.ts

@@ -719,6 +719,7 @@ const pptBuilder = (host: EditorHost) => {
       } satisfies PPTSection;
     });
     const page: PPTPage = {
+      isCover: pages.length === 0,
       title: getText(block),
       sections,
     };

packages/presets/src/fragments/copilot-panel/chat/template.ts

@@ -1,6 +1,7 @@
 import { Bound } from '@blocksuite/blocks';
 import { nanoid } from '@blocksuite/store';
 
+import { basicCover } from './templates/basic-cover.js';
 import { basic1 } from './templates/basic1.js';
 import { basic2 } from './templates/basic2.js';
 import { basic3 } from './templates/basic3.js';
@@ -111,6 +112,31 @@ type PageTemplate = {
   images: TemplateImage[];
   content: unknown;
 };
+const createBasicCover = async (
+  title: string,
+  section1: PPTSection
+): Promise<PageTemplate> => {
+  const template = basicCover();
+  replaceText(
+    {
+      title: title,
+      'section1.title': section1.title,
+      'section1.content': section1.content,
+    },
+    template
+  );
+  return {
+    images: await getImages(
+      {
+        'section1.image': getImageUrlByKeyword(section1.keywords),
+        background: async () =>
+          'https://cdn.affine.pro/ppt-images/background/basic_cover_background.png',
+      },
+      template
+    ),
+    content: template,
+  };
+};
 const basic1section = async (
   title: string,
   section1: PPTSection
@@ -236,10 +262,14 @@ const basic4section = async (
   };
 };
 export type PPTPage = {
+  isCover: boolean;
   title: string;
   sections: PPTSection[];
 };
 export const basicTheme = (page: PPTPage) => {
+  if (page.isCover) {
+    return createBasicCover(page.title, page.sections[0]);
+  }
   if (page.sections.length === 1) {
     return basic1section(page.title, page.sections[0]);
   }

packages/presets/src/fragments/copilot-panel/chat/templates/basic-cover.ts

@@ -0,0 +1,95 @@
+export const basicCover = () => ({
+  type: 'page',
+  meta: {
+    id: 'page:home',
+    title: '',
+    createDate: 1706086837052,
+    tags: [],
+  },
+  blocks: {
+    type: 'block',
+    id: 'QiBH29dycZ',
+    flavour: 'affine:page',
+    version: 2,
+    props: {
+      title: {
+        '$blocksuite:internal:text$': true,
+        delta: [],
+      },
+    },
+    children: [
+      {
+        type: 'block',
+        id: 'WZ9zUizVrs',
+        flavour: 'affine:surface',
+        version: 5,
+        props: {
+          elements: {
+            DcoFASHQKI: {
+              index: 'a1',
+              seed: 1391437441,
+              xywh: '[-83.54346701558063,-50.225603646128235,1600.17596435546875,179]',
+              rotate: 0,
+              text: {
+                'affine:surface:text': true,
+                delta: [
+                  {
+                    insert: 'section1.title',
+                  },
+                ],
+              },
+              color: '--affine-palette-line-black',
+              fontSize: 128,
+              fontFamily: 'blocksuite:surface:Poppins',
+              fontWeight: '400',
+              fontStyle: 'normal',
+              textAlign: 'left',
+              type: 'text',
+              id: 'DcoFASHQKI',
+              hasMaxWidth: false,
+            },
+          },
+        },
+        children: [
+          {
+            type: 'block',
+            id: 'Rb6xTvGyzU',
+            flavour: 'affine:image',
+            version: 1,
+            props: {
+              caption: 'background',
+              sourceId: 'xeeMw2R2FtjRo2Q0H14rsCpImSR9-z54W_PDZUsFvJ8=',
+              width: 1920,
+              height: 1080,
+              index: 'a0',
+              xywh: '[-300.7451171875,-355.744140625,1920,1080]',
+              rotate: 0,
+              size: 938620,
+            },
+            children: [],
+          },
+          {
+            type: 'block',
+            id: 'Pa1ZO7Udi-',
+            flavour: 'affine:frame',
+            version: 1,
+            props: {
+              title: {
+                '$blocksuite:internal:text$': true,
+                delta: [
+                  {
+                    insert: 'title',
+                  },
+                ],
+              },
+              background: '--affine-palette-transparent',
+              xywh: '[-340.7451171875,-395.744140625,2000,1160]',
+              index: 'a0',
+            },
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+});

packages/presets/src/fragments/copilot-panel/chat/templates/basic1.ts

@@ -32,7 +32,7 @@ export const basic1 = () => ({
             lGcs_jsyUu: {
               index: 'a3',
               seed: 1511317069,
-              xywh: '[494.5850414188134,467.3532626441229,192.2879180908203,45]',
+              xywh: '[494.5850414188134,467.3532626441229,600.2879180908203,45]',
               rotate: 0,
               text: {
                 'affine:surface:text': true,

packages/presets/src/fragments/copilot-panel/doc/actions.ts

@@ -182,44 +182,49 @@ I want to write a PPT, that has many pages, each page has 1 to 4 sections,
 each section has a title of no more than 30 words and no more than 500 words of content,
 but also need some keywords that match the content of the paragraph used to generate images,
 Try to have a different number of section per page
+The first page is the cover, which generates a general title (no more than 4 words) and description based on the topic
 this is a template:
 - page name
-    - section name
-      - keywords
-      - content
-    - section name
-      - keywords
-      - content
+  - title
+    - keywords
+    - description
 - page name
-    - section name
-      - keywords
-      - content
-    - section name
-      - keywords
-      - content
-    - section name
-      - keywords
-      - content
+  - section name
+    - keywords
+    - content
+  - section name
+    - keywords
+    - content
 - page name
-    - section name
-      - keywords
-      - content
-    - section name
-      - keywords
-      - content
-    - section name
-      - keywords
-      - content
-    - section name
-      - keywords
-      - content
+  - section name
+    - keywords
+    - content
+  - section name
+    - keywords
+    - content
+  - section name
+    - keywords
+    - content
 - page name
-    - section name
-      - keywords
-      - content
+  - section name
+    - keywords
+    - content
+  - section name
+    - keywords
+    - content
+  - section name
+    - keywords
+    - content
+  - section name
+    - keywords
+    - content
+- page name
+  - section name
+    - keywords
+    - content
 
 
-please help me to write this ppt, do not output any content that does not belong to the ppt content itself outside of the content, Directly output the title content keywords without identifying what this is in front of it
+please help me to write this ppt, do not output any content that does not belong to the ppt content itself outside of the content, Directly output the title content keywords without prefix like Title:xxx, Content: xxx, Keywords: xxx
 The PPT is based on the following topics:
 ${input}`
     ),