如何将生成AI集成到撇号中-DEV365 开发者社区

最近在阿比亚奇（AI is transforming the CMS industry）的费城科技周（Philly Tech Week）的一次演讲中，Apostrophe的首席技术官汤姆·布特尔（Tom Boutell）最近强调了。同时，找到将AI集成到CMS的正确方法可能并不容易。这就是为什么Apostrophe背后的团队构建了一个AI助手模块，以仅使用几行代码为CMS和网站构建器添加文本和图像生成功能。

在这里，您将了解撇号AI助手是什么，其工作原理以及如何使用AI来生成内容。

什么是撇号AI助手模块？

AI Helper模块是撇号的许多可用扩展之一。顾名思义，它旨在促进撇号中基于AI的功能。换句话说，AI助手提供了一种简化的方法，将OpenAI功能集成到只有几行代码的撇号项目中。

详细说明，它依赖于OpenAI API用AI驱动的助手增强撇号。集成后，该模块当前提供：

插入菜单选项，通过GPT（Chatgpt背后的AI模型）从提示中生成丰富文本。
一个按钮通过dall-e从文本提示中生成图像。

借助这两个功能，编辑可以要求人工智能生成撇号就绪内容，而无需离开平台。这是一个巨大的生产力提升。

在撰写本文时，该模块仍在Beta中。原因是：

AI模型仍然不是完美的，它们很容易产生不可靠的结果。
它依赖的OpenAI API会受到更改的约束。
生成的AI正在如此迅速地发展，以至于将其整合到撇号中的最佳方法可能会随着UI和整体技术方法而迅速变化。

这并不意味着您不能在内容创建过程中使用它来尝试生成AI。相反！

使用AI助手模块将AI添加到撇号中

在本分步教程中，您将学习如何将撇号AI助手助手模块集成到您的项目中。按照下面的说明进行操作，并开始利用生成AI！

的力量

注意：如果您已经有一个撇号应用程序，则可以跳过前两个步骤。

先决条件

跳入本节之前，您需要满足撇号3+先决条件：

使初始化撇号项目的过程更容易，请安装撇号CLI：

npm install -g @apostrophecms/cli

您现在可以访问apos命令，您可以通过该命令快速设置和管理撇号项目。

如果您是Windows用户，则需要如in the official docs所述配置WSL（Windows Subsystem for Linux）。

太好了！您现在准备设置一个撇号3+项目。

初始化撇号项目

首先，请确保MongoDB本地服务器正在遵循official guide for your OS。

在终端中，输入要创建撇号项目并启动的文件夹：

apos create apos-ai-demo

此命令将创建一个名为apos-ai-demo的撇号项目。

在此过程中，将要求您输入管理用户的密码。输入安全密码，然后将其存储在安全的地方。

现在，apos-ai-demo文件夹应包含一个apostrophecms项目。如果这是您的第一个撇号项目，您应该花一些时间熟悉Apostrophe file structure。

要启动您的应用程序，请输入项目文件夹：

cd apos-ai-demo

然后，使用：
运行开发服务器

npm run dev

您将收到以下警告消息：

WARNING: No session secret provided, please set the secret property of the session property of the @apostrophecms/express module in app.js

不用担心，您可以轻松地修复as explained in the docs。

在浏览器中打开http://localhost:3000/login页面，以确保您的撇号启动器项目正在运行。

在初始化过程中，用“管理员”作为用户名和密码填写表格。

成功登录后，您将被重定向到下面的Apostrophe仪表板：

在这里，您可以访问所有great features offered by ApostropheCMS，包括网站构建功能，用于内容管理的直观UI，起草系统和内部文化编辑。

完美！您现在有一个撇号项目，可以通过Openai Apis扩展。

集成AI助手模块

在项目文件夹中，运行下面的命令以安装AI Helper模块：

npm install @apostrophecms/ai-helper

这将添加[@apostrophecms/ai-helper](https://www.npmjs.com/package/@apostrophecms/ai-helper)库中的项目依赖项。

与任何其他撇号模块一样，您必须首先在app.js文件中启用它。为此，请确保app.js包含以下几行：

// app.js

require('apostrophe')({
  // the name of your project
  shortName: 'apos-ia-demo',
  modules: {
    // other modules...

    // enable the ai-helper module
    '@apostrophecms/ai-helper': {},
  },
  // remaining configs...
});

如果您运行了该应用程序，它将崩溃，以下错误：

Error: APOS_OPENAI_KEY must be set in your environment

原因是ai-helper模块需要一个OpenAI API键才能功能。如果您没有一个，请按照以下程序检索您的免费API密钥以进行有限的使用：

创建一个OpenAI account。
遵循说明并验证您的帐户。
Sign in.
在主仪表板中，单击API卡：

单击右上角的个人资料图像，然后选择“查看API键”选项：

单击“创建新的秘密键”按钮。

称为新的API键，如下：

单击“创建秘密键”按钮。

复制OpenAI API键并将其存储在一个秘密的地方：

请记住，审判结束时，您将受到OpenAI pricing的约束。

您现在必须设置一个具有OpenAI API密钥值的APOS_OPENAI_KEY环境变量。在Linux，MacOS或Windows子系统上，用于Linux（WSL）Windows带有git bash，在下面运行命令：

export APOS_OPENAI_KEY=<YOUR_OPENAI_API_KEY>

在带有PowerShell的Windows上，运行：

$Env:APOS_OPENAI_KEY = "<YOUR_OPENAI_API_KEY>"

用上面检索的秘密API键替换<YOUR_OPENAI_API_KEY>。

该命令将在终端会话中配置所需的ENV。在同一终端窗口中，再次重新启动项目：

npm run dev

这次，撇号应加载而没有错误。

您准备将基于OpenAI的AI功能添加到支持[rich-text widget] (https://v3.docs.apostrophecms.org/guide/core-widgets.html#rich-text-widget)的任何页面。为此，请通过将ai选项添加到insert属性来更新'@apostrophecms/rich-text'模块配置：

insert: [
    // other values...
    'ai'
],

然后，如果您想要求GPT生成带有子标题的文本，则还需要确保styles包含：

styles: [
  {
    tag: 'p',
    label: 'Paragraph (P)'
  },
  {
    tag: 'h2',
    label: 'Heading 2 (H2)'
  },
  {
    tag: 'h3',
    label: 'Heading 3 (H3)'
  },
  {
    tag: 'h4',
    label: 'Heading 4 (H4)'
  }
  // other styles...
],

如果您使用的是Apostrophe Security Headers插件，则还需要将以下配置添加到modules/@apostrophecms中的security-headers/index.js：

// modules/@apostrophecms/security-headers/index.js

module.exports = {
  options: {
    policies: {
      ai: {
        'img-src': '*.blob.core.windows.net'
      }
    }
  }
};

此策略允许您处理用于编辑目的的OpenAI图像。

现在，假设您要在postrophe默认页面模块中添加AI内容生成功能。这就是modules中的default-page/index.js的样子：

// modules/default-page/index.js

module.exports = {
  extend: '@apostrophecms/page-type',
  options: {
    label: 'Default Page'
  },
  fields: {
    add: {
      main: {
        type: 'area',
        options: {
          widgets: {
            '@apostrophecms/rich-text': {
              toolbar: [
                'styles',
                '|',
                'bold',
                'italic',
                'strike',
                'link',
                '|',
                'bulletList',
                'orderedList'
              ],
              styles: [
                {
                  tag: 'p',
                  label: 'Paragraph (P)'
                },
                {
                  tag: 'h2',
                  label: 'Heading 2 (H2)'
                },
                {
                  tag: 'h3',
                  label: 'Heading 3 (H3)'
                },
                {
                  tag: 'h4',
                  label: 'Heading 4 (H4)'
                }
              ],
              insert: [
                'table',
                'image',
                'ai' // add the AI features
              ]
            },
            '@apostrophecms/image': {},
            '@apostrophecms/video': {}
          }
        }
      }
    },
    group: {
      basics: {
        label: 'Basics',
        fields: [
          'title',
          'main'
        ]
      }
    }
  }
};

太好了！在您的网站中添加一个新的默认页面，以查看正在行动中的人工智能功能。

准备释放AI的力量

在撇号仪表板中，单击“页面”，然后新页面。这将打开下面的模式：

给您的新页面一个标题，选择“默认为页面类型”，然后单击发布。

现在将出现在“管理页面”部分中的新记录：

单击右侧的点，然后选择“预览”以打开新页面：

做得好！此空白页即将填充一些AI生成的内容。

AI丰富的文字一代

现在您的页面准备托管一些AI生成的内容，点击“编辑”按钮：

单击“添加内容”，然后选择“丰富文本”选项。

在空的富文本小部件中键入/â键访问元素菜单，然后选择生成文本。

这将打开一个输入区域，您可以在其中为AI模型编写提示：

例如，类型：

100个单词，说明AI以欧内斯特·海明威（Ernest Hemingway）的风格，带有副标题的方式要编写一个好的提示，指定单词计数也是一个好主意。另外，不要忘记，您可以要求GPT包括标题和链接。

单击生成并等待AI魔术发生。

¥boom！您的页面现在将包含AI生成的格式化文本：

请注意，AI可能会产生令人惊讶或不适当的结果。

请参阅下面视频中的整个过程：

AI助手富文字的工作原理

如果您想知道这是如何工作的，请查看koude19 file on GitHub。详细关注：

const marked = require('marked');

// ...

prompt = `
  Generate text in markdown format, based on the following prompt:

  ${prompt}
`;
const body = {
  prompt,
  model: aiHelper.options.textModel,
  max_tokens: aiHelper.options.textMaxTokens,
  n: 1
};
const result = await self.apos.http.post('https://api.openai.com/v1/completions', {
    headers: {
      Authorization: `Bearer ${process.env.APOS_OPENAI_KEY}`
    },
    body
});

if (!result?.choices?.[0]?.text) {
  throw self.apos.error('error');
}
let markdown = result.choices[0].text;

// Remap headings to levels actually available in this widget
markdown = markdown.replace(/(^|\n)(#+) /g, (all, before, hashes) => {
  if (!headingLevels.length) {
    return '';
  }
  const level = headingLevels[hashes.length - 1];
  return before + (level ? (before + '#'.repeat(level) + ' ') : '');
});

const html = marked.parse(markdown);
return {
  html
};

此代码片段的作用是：