@blocklet/pages-kit-agents 0.5.12

package/.env.local.example

@@ -0,0 +1,8 @@
+# Change the name of this file to .env.local and fill in the following values
+
+DEBUG=aigne:*
+
+OPENAI_API_KEY="" # Your OpenAI API key
+GEMINI_API_KEY="" 
+CLAUDE_API_KEY=""
+OPENAI_BASE_URL=https://openai.arcblock.io/v1

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2020 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,10 @@
+# Web Site Writer
+
+## Usage
+
+1. Setup the environment variables
+
+- `BLOCKLET_APP_URL`: The URL of the blocklet app
+- `OPENAI_API_KEY`: The OpenAI API key
+
+2. Authenticate with the blocklet app

package/cli.ts

@@ -0,0 +1,354 @@
+import { AIGNE } from '@aigne/core';
+import yaml from 'js-yaml';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import open from 'open';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+import { z } from 'zod';
+
+import generatePageContentMultiAgent, { type GeneratePageContentInput } from './agents/multi-agent-page-writer.js';
+import { sampleHtmlGeneratorAgent } from './agents/sample-html-generator.js';
+import { generateHtmlFromTemplate, getModel, readFile, saveHtmlContent, updateFileList } from './utils/index.js';
+import { logger } from './utils/logger.js';
+
+// 定义配置文件的结构
+const ConfigSchema = z.object({
+  models: z.array(
+    z.object({
+      name: z.string(),
+      enabled: z.boolean().default(true),
+    })
+  ),
+  outputSettings: z.object({
+    useTemplate: z.boolean().default(true),
+    openBrowserAfterComplete: z.boolean().default(true),
+  }),
+  logging: z.object({
+    showProgress: z.boolean().default(true),
+  }),
+});
+
+type Config = z.infer<typeof ConfigSchema>;
+
+// 默认配置
+const defaultConfig: Config = {
+  models: [
+    { name: 'gpt-4o-mini', enabled: true },
+    { name: 'gemini-2.5-flash-preview-04-17', enabled: true },
+    { name: 'gemini-2.5-pro-preview-05-06', enabled: true },
+    // { name: 'claude-3-7-sonnet-latest', enabled: false },
+  ],
+  outputSettings: {
+    useTemplate: true,
+    openBrowserAfterComplete: true,
+  },
+  logging: {
+    showProgress: true,
+  },
+};
+
+// 加载配置文件
+async function loadConfig(): Promise<Config> {
+  const configPath = path.join(__dirname, 'config.yaml');
+  try {
+    const fileContent = await fs.readFile(configPath, 'utf-8');
+    const parsedConfig = yaml.load(fileContent) as any;
+    return ConfigSchema.parse(parsedConfig);
+  } catch (error) {
+    logger.warn(`Failed to load config file: ${error instanceof Error ? error.message : String(error)}`);
+    logger.warn('Using default configuration');
+    return defaultConfig;
+  }
+}
+
+// 处理命令行参数
+function parseCommandLineArgs() {
+  return yargs(hideBin(process.argv))
+    .option('model', {
+      describe: 'Specify a single model to run',
+      type: 'string',
+    })
+    .option('use-template', {
+      describe: 'Whether to use template for output',
+      type: 'boolean',
+    })
+    .option('open-browser', {
+      describe: 'Open browser after completion',
+      type: 'boolean',
+    })
+    .option('show-progress', {
+      describe: 'Show progress logs',
+      type: 'boolean',
+    })
+    .help()
+    .parse();
+}
+
+// 定义命令行参数的类型
+interface CommandLineArgs {
+  model?: string;
+  'use-template'?: boolean;
+  'open-browser'?: boolean;
+  'show-progress'?: boolean;
+  [key: string]: unknown;
+}
+
+// 记录执行时间作为 output 的文件夹名称
+const now = new Date();
+const runTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}-${now.getHours().toString().padStart(2, '0')}-${now.getMinutes().toString().padStart(2, '0')}-${now.getSeconds().toString().padStart(2, '0')}`;
+
+const generatePageContent = async (
+  input: GeneratePageContentInput,
+  {
+    outputUseTemplate,
+    showProgress,
+    currentModelIndex,
+    totalModels,
+  }: {
+    outputUseTemplate?: boolean;
+    showProgress?: boolean;
+    currentModelIndex?: number;
+    totalModels?: number;
+  } = {
+    outputUseTemplate: true,
+    showProgress: true,
+  }
+) => {
+  const modelName = input.modelName || 'gpt-4o-mini';
+
+  if (showProgress && currentModelIndex !== undefined && totalModels !== undefined) {
+    logger.info(
+      `Processing model ${currentModelIndex + 1}/${totalModels} (${Math.round(((currentModelIndex + 1) / totalModels) * 100)}%): ${modelName}`
+    );
+  } else {
+    logger.info(`Generating page content with model: ${modelName}`);
+  }
+
+  if (showProgress) {
+    logger.info(`[${modelName}] Step 1/2: Generating content structure...`);
+  }
+
+  const result = await generatePageContentMultiAgent(input);
+
+  if (!result) {
+    throw new Error('Failed to generate page content');
+  }
+
+  if (showProgress) {
+    logger.info(`[${modelName}] Step 2/2: Creating HTML output...`);
+  }
+
+  if (outputUseTemplate) {
+    await generateHtmlFromTemplate({
+      jsonData: result,
+      outputFolder: runTime,
+      outputFileName: modelName,
+    });
+  } else {
+    const model = getModel('gemini-2.5-pro-preview-05-06');
+    const engine = new AIGNE({
+      model,
+    });
+
+    const htmlResult = await engine.invoke(sampleHtmlGeneratorAgent, {
+      jsonData: JSON.stringify(result),
+    });
+
+    // 保存结果到output目录
+    await saveHtmlContent({
+      htmlContent: htmlResult.html,
+      outputFolder: runTime,
+      outputFileName: modelName,
+    });
+  }
+
+  if (showProgress) {
+    logger.info(`[${modelName}] HTML output completed`);
+  }
+
+  logger.info(
+    `Generated sample page successfully, model: ${modelName}, review path: ${path.join(process.cwd(), 'sample-output', runTime)}`
+  );
+};
+
+// 主函数
+async function main() {
+  // 加载配置文件
+  const config = await loadConfig();
+
+  // 解析命令行参数
+  const args = parseCommandLineArgs() as CommandLineArgs;
+
+  // 合并配置，命令行参数优先
+  const effectiveConfig: Config = {
+    ...config,
+    outputSettings: {
+      ...config.outputSettings,
+      useTemplate:
+        args['use-template'] === undefined ? config.outputSettings.useTemplate : Boolean(args['use-template']),
+      openBrowserAfterComplete:
+        args['open-browser'] === undefined
+          ? config.outputSettings.openBrowserAfterComplete
+          : Boolean(args['open-browser']),
+    },
+    logging: {
+      ...config.logging,
+      showProgress: args['show-progress'] === undefined ? config.logging.showProgress : Boolean(args['show-progress']),
+    },
+  };
+
+  // 如果指定了单个模型，则只运行该模型
+  const modelsToRun = args.model
+    ? [{ name: String(args.model), enabled: true }]
+    : effectiveConfig.models.filter((m) => m.enabled);
+
+  if (modelsToRun.length === 0) {
+    logger.warn(
+      'No models enabled. Please enable at least one model in config.yaml or specify a model via command line.'
+    );
+    return;
+  }
+
+  // 加载上下文
+  let context = '';
+  context = await readFile(path.join(__dirname, 'data-sources', 'aigne-framework.yaml'));
+
+  const imagesContext = await readFile(path.join(__dirname, 'data-sources', 'aigne-framework-images.md'));
+
+  context = `${context}\n
+## 图片资源
+1. 从中挑选相关的图片同合适文案一起展示
+2. 不需要图片的描述和文案完全匹配，只需要相关即可
+${imagesContext}`;
+
+  const pageRule = `
+生成页面内容，文案有吸引力。
+尽可能多的包含 context 中相关的信息。
+`;
+
+  const locale = 'zh';
+
+  const input = {
+    context,
+    question: pageRule,
+    locale,
+    outputSchema: z.object({
+      title: z.string(),
+      description: z.string(),
+      sectionsData: z.object({
+        heroSection: z.object({
+          title: z.string(),
+          description: z.string(),
+        }),
+        featuresSection: z.object({
+          title: z.string(),
+          description: z.string(),
+          features: z.array(
+            z.object({
+              title: z.string(),
+              description: z.string(),
+              image: z.string(),
+            })
+          ),
+        }),
+        architectureSection: z.object({
+          title: z.string(),
+          description: z.string(),
+          architecture: z.array(
+            z.object({
+              title: z.string(),
+              description: z.string(),
+              image: z.string(),
+            })
+          ),
+        }),
+        workflowSection: z.object({
+          title: z.string(),
+          description: z.string(),
+          workflows: z.array(
+            z.object({
+              title: z.string(),
+              description: z.string(),
+            })
+          ),
+        }),
+        mcpIntegrationSection: z.object({
+          title: z.string(),
+          description: z.string(),
+          integrations: z.array(
+            z.object({
+              title: z.string(),
+              description: z.string(),
+            })
+          ),
+        }),
+        supportModelSection: z.object({
+          title: z.string(),
+          models: z.array(
+            z.object({
+              name: z.string(),
+              link: z.string(),
+            })
+          ),
+        }),
+        faqSection: z.object({
+          title: z.string(),
+          description: z.string(),
+          questions: z.array(
+            z.object({
+              question: z.string(),
+              answer: z.string(),
+            })
+          ),
+        }),
+        callToActionSection: z.object({
+          title: z.string(),
+          description: z.string(),
+          cta: z.string(),
+        }),
+      }),
+    }),
+  };
+
+  // 循环执行每个启用的模型
+  for (let i = 0; i < modelsToRun.length; i++) {
+    const model = modelsToRun[i];
+    if (model) {
+      try {
+        // eslint-disable-next-line no-await-in-loop
+        await generatePageContent(
+          { ...input, modelName: model.name },
+          {
+            outputUseTemplate: effectiveConfig.outputSettings.useTemplate,
+            showProgress: effectiveConfig.logging.showProgress,
+            currentModelIndex: i,
+            totalModels: modelsToRun.length,
+          }
+        );
+      } catch (error) {
+        logger.error(
+          `Error generating page content for model ${model.name}: ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
+    } else {
+      logger.warn(`Model at index ${i} is undefined, skipping`);
+    }
+  }
+
+  // 更新文件列表
+  await updateFileList();
+
+  // 如果配置启用了浏览器自动打开，则打开index.html
+  if (effectiveConfig.outputSettings.openBrowserAfterComplete) {
+    const indexPath = path.join(process.cwd(), 'sample-output', 'index.html');
+    await open(indexPath);
+    logger.info('Opened browser to view results');
+  }
+}
+
+// 执行主函数
+main().catch((error) => {
+  logger.error(`Error: ${error instanceof Error ? error.message : String(error)}`);
+  process.exit(1);
+});

package/index.ts

@@ -0,0 +1,14 @@
+export {};
+
+// Export all agents
+export {
+  default as generatePageContentMultiAgent,
+  generateSingleSectionContent,
+} from './agents/multi-agent-page-writer';
+export * from './agents/page-metadata-generator';
+export * from './agents/page-structure-planner';
+export * from './agents/page-structure-validator';
+export * from './agents/section-content-generator';
+
+// Export utilities that might be useful for consumers
+export * from './utils/index';

package/lib/cjs/agents/multi-agent-page-writer.d.ts

@@ -0,0 +1,48 @@
+import type { z } from 'zod';
+export interface GeneratePageContentInput {
+    context: string;
+    question: string;
+    sectionsRules?: Record<string, string>;
+    locale: string;
+    outputSchema: z.ZodObject<any>;
+    modelName?: string;
+    onProgress?: (params: {
+        sectionName?: string;
+        sectionIndex?: number;
+        totalSections: number;
+        sectionData?: Record<string, any>;
+        eventType?: 'progress' | 'section' | 'structure_start' | 'structure_complete';
+        structureData?: any;
+    }) => void;
+    checkConnection?: () => boolean;
+}
+/**
+ * 多Agent协作生成页面内容
+ *
+ * 工作流程：
+ * 1. 使用页面结构规划Agent分析内容，规划各section内容
+ * 2. 使用结构验证Agent检查规划的完整性和有效性
+ * 3. 如果验证不通过，将反馈提供给规划Agent进行修正
+ * 4. 逐个生成各section内容
+ * 5. 基于所有section内容生成页面元数据
+ * 6. 整合所有内容返回完整页面数据
+ */
+export default function generatePageContentMultiAgent(input: GeneratePageContentInput): Promise<{
+    title: string;
+    description: string;
+    sectionsData: Record<string, any>;
+} | null>;
+/**
+ * 单独生成特定section的内容
+ * 支持独立调用，为特定section重新生成内容
+ */
+export declare function generateSingleSectionContent({ context, question, locale, sectionName, sectionSchema, sectionPlan, existingSections, modelName, }: {
+    context: string;
+    question: string;
+    locale: string;
+    sectionName: string;
+    sectionSchema: any;
+    sectionPlan?: string;
+    existingSections?: Record<string, any>;
+    modelName?: string;
+}): Promise<import("@aigne/core").Message>;

package/lib/cjs/agents/multi-agent-page-writer.js

@@ -0,0 +1,203 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = generatePageContentMultiAgent;
+exports.generateSingleSectionContent = generateSingleSectionContent;
+const core_1 = require("@aigne/core");
+const zod_utils_1 = require("@blocklet/pages-kit-block-studio/zod-utils");
+const agent_utils_js_1 = require("../utils/agent-utils.js");
+const logger_js_1 = require("../utils/logger.js");
+const page_metadata_generator_js_1 = require("./page-metadata-generator.js");
+const page_structure_planner_js_1 = require("./page-structure-planner.js");
+const page_structure_validator_js_1 = require("./page-structure-validator.js");
+const section_content_generator_js_1 = require("./section-content-generator.js");
+/**
+ * 多Agent协作生成页面内容
+ *
+ * 工作流程：
+ * 1. 使用页面结构规划Agent分析内容，规划各section内容
+ * 2. 使用结构验证Agent检查规划的完整性和有效性
+ * 3. 如果验证不通过，将反馈提供给规划Agent进行修正
+ * 4. 逐个生成各section内容
+ * 5. 基于所有section内容生成页面元数据
+ * 6. 整合所有内容返回完整页面数据
+ */
+async function generatePageContentMultiAgent(input) {
+    const { context = '', question = '', locale = '', outputSchema, onProgress, checkConnection, sectionsRules, modelName = 'gpt-4o-mini', } = input;
+    try {
+        logger_js_1.logger.info('Starting multi-agent page content generation');
+        // 检查客户端连接状态的辅助函数
+        const isClientConnected = () => {
+            // 如果没有提供检查函数，默认认为客户端仍连接
+            if (!checkConnection)
+                return true;
+            // 否则调用提供的检查函数
+            return checkConnection();
+        };
+        // 1. 从outputSchema提取sectionsData结构
+        const outputSchemaJson = (0, zod_utils_1.zodSchemaToJsonSchema)(outputSchema);
+        const sectionsSchema = outputSchema.shape.sectionsData;
+        const sectionNames = Object.keys(sectionsSchema.shape);
+        // 触发页面结构开始生成事件
+        if (onProgress) {
+            onProgress({
+                totalSections: sectionNames.length,
+                eventType: 'structure_start',
+            });
+        }
+        // 2. 初始页面结构规划
+        logger_js_1.logger.info('Planning initial page structure');
+        // 检查客户端是否仍然连接
+        if (!isClientConnected()) {
+            logger_js_1.logger.warn('Client disconnected during structure planning, aborting generation');
+            throw new Error('Client disconnected');
+        }
+        let structurePlanMap = {};
+        const model = (0, agent_utils_js_1.getModel)(modelName);
+        // 3-4 使用反思工作流生成页面结构
+        const planningEngine = new core_1.AIGNE({
+            model,
+            agents: [page_structure_planner_js_1.pageStructurePlannerAgent, page_structure_validator_js_1.pageStructureValidatorAgent],
+            limits: {
+                maxAgentInvokes: 20,
+            },
+        });
+        await planningEngine.invoke(page_structure_planner_js_1.pageStructurePlannerAgent, {
+            context,
+            question,
+            locale,
+            initialStructurePlan: Object.entries(sectionsRules || {}).map(([sectionName, sectionContentPlan]) => ({
+                sectionName,
+                sectionContentPlan,
+            })),
+            outputSchema: JSON.stringify(outputSchemaJson),
+            expectedSections: JSON.stringify(sectionNames),
+        });
+        const structurePlanResult = await planningEngine.subscribe(core_1.UserOutputTopic);
+        const { structurePlan } = structurePlanResult.message;
+        // const { structurePlan } = structurePlanResult;
+        logger_js_1.logger.info('Initial structure plan generated', structurePlan);
+        await planningEngine.shutdown();
+        // 触发页面结构生成成功事件
+        if (onProgress) {
+            onProgress({
+                totalSections: sectionNames.length,
+                eventType: 'structure_complete',
+                structureData: {
+                    structurePlan,
+                },
+            });
+        }
+        structurePlanMap = Object.fromEntries(structurePlan.map((item) => [item.sectionName, item.sectionContentPlan]));
+        const engine = new core_1.AIGNE({
+            model,
+        });
+        // 5. 逐个生成各section内容
+        const sectionsData = {};
+        for (let i = 0; i < sectionNames.length; i++) {
+            const sectionName = sectionNames[i];
+            if (!sectionName) {
+                // eslint-disable-next-line no-continue
+                continue;
+            }
+            // 每个section生成前检查客户端连接状态
+            if (!isClientConnected()) {
+                logger_js_1.logger.warn(`Client disconnected before generating section ${sectionName}, aborting generation`);
+                return null;
+            }
+            logger_js_1.logger.info(`Generating content for section: ${sectionName}`);
+            // 通知当前正在处理的section
+            if (onProgress) {
+                onProgress({
+                    sectionName,
+                    sectionIndex: i,
+                    totalSections: sectionNames.length,
+                });
+            }
+            const sectionSchema = sectionsSchema.shape[sectionName];
+            const sectionPlan = structurePlanMap[sectionName] || `Generate content for ${sectionName}`;
+            const sectionContentInput = {
+                context,
+                question,
+                locale,
+                sectionName,
+                sectionSchema,
+                sectionPlan,
+                generatedSections: JSON.stringify(sectionsData), // 传递已生成的sections
+            };
+            // eslint-disable-next-line no-await-in-loop
+            const sectionContentAgent = await (0, section_content_generator_js_1.createSectionContentAgent)(sectionContentInput);
+            // eslint-disable-next-line no-await-in-loop
+            const sectionContent = await engine.invoke(sectionContentAgent, sectionContentInput);
+            sectionsData[sectionName] = sectionContent;
+            logger_js_1.logger.info(`Content generated for section: ${sectionName}`);
+            // 通知该section已生成完成
+            if (onProgress) {
+                const sectionDataObj = {};
+                sectionDataObj[sectionName] = sectionContent;
+                onProgress({
+                    sectionName,
+                    sectionIndex: i,
+                    totalSections: sectionNames.length,
+                    sectionData: sectionDataObj,
+                });
+            }
+        }
+        // 6. 生成页面元数据
+        logger_js_1.logger.info('Generating page metadata');
+        // 检查客户端是否仍然连接
+        if (!isClientConnected()) {
+            logger_js_1.logger.warn('Client disconnected before generating metadata, aborting generation');
+            throw new Error('Client disconnected');
+        }
+        const metadata = await engine.invoke(page_metadata_generator_js_1.generatePageMetadataAgent, {
+            context,
+            question,
+            locale,
+            sectionsData: JSON.stringify(sectionsData),
+        });
+        // 7. 组装完整页面数据
+        const result = {
+            title: metadata.title,
+            description: metadata.description,
+            sectionsData,
+        };
+        logger_js_1.logger.info('Multi-agent page content generation completed');
+        return result;
+    }
+    catch (error) {
+        logger_js_1.logger.error('Error in multi-agent page content generation:', error);
+        throw error;
+    }
+}
+/**
+ * 单独生成特定section的内容
+ * 支持独立调用，为特定section重新生成内容
+ */
+async function generateSingleSectionContent({ context, question, locale, sectionName, sectionSchema, sectionPlan, existingSections = {}, modelName = 'gpt-4o-mini', }) {
+    try {
+        logger_js_1.logger.info(`Starting single section content generation for: ${sectionName}`);
+        const actualSectionPlan = sectionPlan || `Generate content for ${sectionName}`;
+        const sectionContentInput = {
+            context,
+            question,
+            locale,
+            sectionName,
+            sectionSchema,
+            sectionPlan: actualSectionPlan,
+            generatedSections: JSON.stringify(existingSections),
+        };
+        const sectionContentAgent = await (0, section_content_generator_js_1.createSectionContentAgent)(sectionContentInput);
+        const model = (0, agent_utils_js_1.getModel)(modelName);
+        const engine = new core_1.AIGNE({
+            model,
+        });
+        // eslint-disable-next-line no-await-in-loop
+        const sectionContent = await engine.invoke(sectionContentAgent, sectionContentInput);
+        logger_js_1.logger.info(`Single section content generated for: ${sectionName}`);
+        return sectionContent;
+    }
+    catch (error) {
+        logger_js_1.logger.error(`Error generating content for section ${sectionName}:`, error);
+        throw error;
+    }
+}

package/lib/cjs/agents/page-metadata-generator.d.ts

@@ -0,0 +1,10 @@
+import { AIAgent } from '@aigne/core';
+export declare const generatePageMetadataAgent: AIAgent<{
+    context: string;
+    question: string;
+    locale: string;
+    sectionsData: string;
+}, {
+    description: string;
+    title: string;
+}>;