feat: Add Slides Generator tool with multi-language support and HTML5 presentation design

- Added SlidesPresentation and Slide types - Implemented generateSlides method in all services (Qwen, Ollama, Z.AI) - Created stunning SlidesGenerator component with: - 18 language support (English, Chinese, Spanish, French, etc.) - 6 theme options (Corporate, Modern, Minimal, Dark, Vibrant, Gradient) - 7 audience presets (Executives, Investors, Technical, etc.) - HTML5 slide preview with navigation - Fullscreen presentation mode - Auto-play functionality - Export to standalone HTML file - Slide thumbnails and speaker notes - Updated sidebar navigation with new Slides Generator menu item - Updated store with slidesPresentation state management
2025-12-27 20:51:59 +04:00
parent 9d0ec1f22e
commit 571aa9f694
9 changed files with 1060 additions and 6 deletions
--- a/lib/services/model-adapter.ts
+++ b/lib/services/model-adapter.ts
@@ -186,6 +186,23 @@ export class ModelAdapter {
    return this.callWithFallback((service) => service.generateUXDesignerPrompt(appDescription, model), providers);
  }

+  async generateSlides(
+    topic: string,
+    options: {
+      language?: string;
+      theme?: string;
+      slideCount?: number;
+      audience?: string;
+      organization?: string;
+    } = {},
+    provider?: ModelProvider,
+    model?: string
+  ): Promise<APIResponse<string>> {
+    const fallback = this.buildFallbackProviders(this.preferredProvider, "qwen", "ollama", "zai");
+    const providers: ModelProvider[] = provider ? [provider] : fallback;
+    return this.callWithFallback((service) => service.generateSlides(topic, options, model), providers);
+  }
+
  async chatCompletion(
    messages: ChatMessage[],
    model: string,
@@ -222,7 +239,7 @@ export class ModelAdapter {
      zai: ["glm-4.7", "glm-4.5", "glm-4.5-air", "glm-4-flash", "glm-4-flashx"],
    };
    const models: Record<ModelProvider, string[]> = { ...fallbackModels };
-    
+
    if (provider === "ollama" || !provider) {
      try {
        const ollamaModels = await this.ollamaService.listModels();
--- a/lib/services/ollama-cloud.ts
+++ b/lib/services/ollama-cloud.ts
@@ -303,6 +303,98 @@ Make's prompt specific, inspiring, and comprehensive. Use professional UX termin

    return this.chatCompletion([systemMessage, userMessage], model || "gpt-oss:120b");
  }
+
+  async generateSlides(
+    topic: string,
+    options: {
+      language?: string;
+      theme?: string;
+      slideCount?: number;
+      audience?: string;
+      organization?: string;
+    } = {},
+    model?: string
+  ): Promise<APIResponse<string>> {
+    const { language = "English", theme = "modern", slideCount = 10, audience = "general", organization = "" } = options;
+
+    const systemMessage: ChatMessage = {
+      role: "system",
+      content: `You are a world-class presentation designer and content strategist specializing in creating stunning, impactful slide decks for organizations and professionals.
+
+Your task is to generate a complete presentation with HTML5-ready slide content. Each slide should be designed with modern, visually impressive aesthetics.
+
+OUTPUT FORMAT:
+Return a JSON object with the following structure:
+\`\`\`json
+{
+  "title": "Presentation Title",
+  "subtitle": "Presentation Subtitle",
+  "theme": "${theme}",
+  "language": "${language}",
+  "slides": [
+    {
+      "id": "slide-1",
+      "title": "Slide Title",
+      "content": "Main content text",
+      "htmlContent": "<div class='slide'>Complete HTML content for the slide</div>",
+      "notes": "Speaker notes",
+      "layout": "title|content|two-column|quote|statistics|timeline|comparison",
+      "order": 1
+    }
+  ]
+}
+\`\`\`
+
+DESIGN GUIDELINES:
+1. Create ${slideCount} slides maximum
+2. Use the "${theme}" design theme
+3. All content MUST be in ${language}
+4. Target audience: ${audience}
+${organization ? `5. Organization: ${organization}` : ""}
+
+SLIDE TYPES TO INCLUDE:
+- Title slide with compelling headline
+- Problem/Opportunity statement
+- Key insights with data visualizations
+- Solution/Strategy overview
+- Timeline or roadmap if applicable
+- Key metrics or statistics
+- Call-to-action or next steps
+- Summary/Conclusion slide
+
+HTML CONTENT REQUIREMENTS:
+- Use semantic HTML5 elements
+- Include inline CSS for styling
+- Use modern gradients, shadows, and animations
+- Incorporate icons using Unicode or SVG
+- Ensure responsive design considerations
+- Use professional typography (specify font-family)
+- Include color schemes matching the theme
+
+CONTENT QUALITY:
+- Concise, impactful headlines (max 8 words)
+- Bullet points with 3-5 items maximum
+- Relevant statistics with compelling visuals
+- Professional, business-appropriate language
+- Clear narrative flow between slides`,
+    };
+
+    const userMessage: ChatMessage = {
+      role: "user",
+      content: `Create a stunning presentation about: ${topic}
+
+Requirements:
+- Language: ${language}
+- Theme: ${theme}
+- Number of slides: ${slideCount}
+- Target audience: ${audience}
+${organization ? `- Organization: ${organization}` : ""}
+
+Generate the complete presentation with HTML5 content for each slide. Make it visually impressive and content-rich.`,
+    };
+
+    return this.chatCompletion([systemMessage, userMessage], model || "gpt-oss:120b");
+  }
 }

 export default OllamaCloudService;
--- a/lib/services/qwen-oauth.ts
+++ b/lib/services/qwen-oauth.ts
@@ -631,6 +631,98 @@ Make's prompt specific, inspiring, and comprehensive. Use professional UX termin
    return this.chatCompletion([systemMessage, userMessage], model || "coder-model");
  }

+  async generateSlides(
+    topic: string,
+    options: {
+      language?: string;
+      theme?: string;
+      slideCount?: number;
+      audience?: string;
+      organization?: string;
+    } = {},
+    model?: string
+  ): Promise<APIResponse<string>> {
+    const { language = "English", theme = "modern", slideCount = 10, audience = "general", organization = "" } = options;
+
+    const systemMessage: ChatMessage = {
+      role: "system",
+      content: `You are a world-class presentation designer and content strategist specializing in creating stunning, impactful slide decks for organizations and professionals.
+
+Your task is to generate a complete presentation with HTML5-ready slide content. Each slide should be designed with modern, visually impressive aesthetics.
+
+OUTPUT FORMAT:
+Return a JSON object with the following structure:
+\`\`\`json
+{
+  "title": "Presentation Title",
+  "subtitle": "Presentation Subtitle",
+  "theme": "${theme}",
+  "language": "${language}",
+  "slides": [
+    {
+      "id": "slide-1",
+      "title": "Slide Title",
+      "content": "Main content text",
+      "htmlContent": "<div class='slide'>Complete HTML content for the slide</div>",
+      "notes": "Speaker notes",
+      "layout": "title|content|two-column|quote|statistics|timeline|comparison",
+      "order": 1
+    }
+  ]
+}
+\`\`\`
+
+DESIGN GUIDELINES:
+1. Create ${slideCount} slides maximum
+2. Use the "${theme}" design theme
+3. All content MUST be in ${language}
+4. Target audience: ${audience}
+${organization ? `5. Organization: ${organization}` : ""}
+
+SLIDE TYPES TO INCLUDE:
+- Title slide with compelling headline
+- Problem/Opportunity statement
+- Key insights with data visualizations
+- Solution/Strategy overview
+- Timeline or roadmap if applicable
+- Key metrics or statistics
+- Call-to-action or next steps
+- Summary/Conclusion slide
+
+HTML CONTENT REQUIREMENTS:
+- Use semantic HTML5 elements
+- Include inline CSS for styling
+- Use modern gradients, shadows, and animations
+- Incorporate icons using Unicode or SVG
+- Ensure responsive design considerations
+- Use professional typography (specify font-family)
+- Include color schemes matching the theme
+
+CONTENT QUALITY:
+- Concise, impactful headlines (max 8 words)
+- Bullet points with 3-5 items maximum
+- Relevant statistics with compelling visuals
+- Professional, business-appropriate language
+- Clear narrative flow between slides`,
+    };
+
+    const userMessage: ChatMessage = {
+      role: "user",
+      content: `Create a stunning presentation about: ${topic}
+
+Requirements:
+- Language: ${language}
+- Theme: ${theme}
+- Number of slides: ${slideCount}
+- Target audience: ${audience}
+${organization ? `- Organization: ${organization}` : ""}
+
+Generate the complete presentation with HTML5 content for each slide. Make it visually impressive and content-rich.`,
+    };
+
+    return this.chatCompletion([systemMessage, userMessage], model || "coder-model");
+  }
+
  async listModels(): Promise<APIResponse<string[]>> {
    const models = [
      "coder-model",
--- a/lib/services/zai-plan.ts
+++ b/lib/services/zai-plan.ts
@@ -63,7 +63,7 @@ export class ZaiPlanService {

      const data = await response.json();
      console.log("[Z.AI] Response data:", data);
-      
+
      if (data.choices && data.choices[0] && data.choices[0].message) {
        return { success: true, data: data.choices[0].message.content };
      } else if (data.output && data.output.choices && data.output.choices[0]) {
@@ -168,7 +168,7 @@ Include specific recommendations for:

        const data = await response.json();
        const models = data.data?.map((m: any) => m.id) || [];
-        
+
        return { success: true, data: models };
      } else {
        console.log("[Z.AI] No API key, using fallback models");
@@ -251,6 +251,98 @@ Make the prompt specific, inspiring, and comprehensive. Use professional UX term

    return this.chatCompletion([systemMessage, userMessage], model || "glm-4.7", true);
  }
+
+  async generateSlides(
+    topic: string,
+    options: {
+      language?: string;
+      theme?: string;
+      slideCount?: number;
+      audience?: string;
+      organization?: string;
+    } = {},
+    model?: string
+  ): Promise<APIResponse<string>> {
+    const { language = "English", theme = "modern", slideCount = 10, audience = "general", organization = "" } = options;
+
+    const systemMessage: ChatMessage = {
+      role: "system",
+      content: `You are a world-class presentation designer and content strategist specializing in creating stunning, impactful slide decks for organizations and professionals.
+
+Your task is to generate a complete presentation with HTML5-ready slide content. Each slide should be designed with modern, visually impressive aesthetics.
+
+OUTPUT FORMAT:
+Return a JSON object with the following structure:
+\`\`\`json
+{
+  "title": "Presentation Title",
+  "subtitle": "Presentation Subtitle",
+  "theme": "${theme}",
+  "language": "${language}",
+  "slides": [
+    {
+      "id": "slide-1",
+      "title": "Slide Title",
+      "content": "Main content text",
+      "htmlContent": "<div class='slide'>Complete HTML content for the slide</div>",
+      "notes": "Speaker notes",
+      "layout": "title|content|two-column|quote|statistics|timeline|comparison",
+      "order": 1
+    }
+  ]
+}
+\`\`\`
+
+DESIGN GUIDELINES:
+1. Create ${slideCount} slides maximum
+2. Use the "${theme}" design theme
+3. All content MUST be in ${language}
+4. Target audience: ${audience}
+${organization ? `5. Organization: ${organization}` : ""}
+
+SLIDE TYPES TO INCLUDE:
+- Title slide with compelling headline
+- Problem/Opportunity statement
+- Key insights with data visualizations
+- Solution/Strategy overview
+- Timeline or roadmap if applicable
+- Key metrics or statistics
+- Call-to-action or next steps
+- Summary/Conclusion slide
+
+HTML CONTENT REQUIREMENTS:
+- Use semantic HTML5 elements
+- Include inline CSS for styling
+- Use modern gradients, shadows, and animations
+- Incorporate icons using Unicode or SVG
+- Ensure responsive design considerations
+- Use professional typography (specify font-family)
+- Include color schemes matching the theme
+
+CONTENT QUALITY:
+- Concise, impactful headlines (max 8 words)
+- Bullet points with 3-5 items maximum
+- Relevant statistics with compelling visuals
+- Professional, business-appropriate language
+- Clear narrative flow between slides`,
+    };
+
+    const userMessage: ChatMessage = {
+      role: "user",
+      content: `Create a stunning presentation about: ${topic}
+
+Requirements:
+- Language: ${language}
+- Theme: ${theme}
+- Number of slides: ${slideCount}
+- Target audience: ${audience}
+${organization ? `- Organization: ${organization}` : ""}
+
+Generate the complete presentation with HTML5 content for each slide. Make it visually impressive and content-rich.`,
+    };
+
+    return this.chatCompletion([systemMessage, userMessage], model || "glm-4.7", true);
+  }
 }

 export default ZaiPlanService;