趣味、精美、安全、可打印的儿童“故事卡片”，采用 Cloudflare AI 技术

AI故事卡（#CloudflareAIDevChallenge）

这是参加Cloudflare AI 挑战赛的作品。

我建造的

一款专为儿童设计的互动式人工智能“故事卡片”制作工具（我们也曾是孩子哦😉）。这款趣味十足且易于使用的网页应用，可以帮助孩子们创作属于自己的明信片大小的故事卡片，并配上精美的插图。故事卡片可以翻译，可以重新设计各种儿童故事主题的插图，甚至可以下载打印。在人工智能时代，生成内容的安全性至关重要——所有生成的插图和故事都经过人工智能的安全审核。

什么是“故事卡片”？

故事卡 =明信片上的故事

最近，我给刚出生的儿子买了一套绘本故事书，每本有365个故事。我非常喜欢这些故事的叙述方式，每个故事都围绕一个主题，用简短的段落和一幅插图来讲述。与此同时，我也在想，能不能把每个故事都印在卡片上，这样以后就可以随意打乱顺序阅读，而不用按顺序读。于是，“故事卡片”的想法就诞生了。

它的运作方式如下：

• 🎒选择你的冒险：孩子们可以从一系列引人入胜的故事元素中进行选择，包括类型（童话、超级英雄、神秘）、角色（独角兽、机器人、王子）、场景（城堡、糖果王国、丛林）、基调（搞笑、冒险、魔法）和主题（友谊、勇敢、想象力）。
• 🌟给我惊喜！：点击“给我惊喜”按钮，即可获得完全随机的故事组合，带来意想不到的精彩剧情转折！
• 📇让你的故事栩栩如生：一旦选定了元素，人工智能就会构思出一个引人入胜的故事标题、叙事内容，甚至还有一幅引人注目的插图，完美地衬托出冒险故事。
• 🌏翻译世界：将您的故事标题和内容翻译成各种语言，拓宽孩子的视野，激发他们对外国语言的兴趣。
• 💅打造专属冒险：以各种故事书主题重新设计插图。多种选项供您选择，打造真正个性化的故事卡片。
• 🦺儿童安全：插图和故事内容均经过人工智能安全分级审核。
• 💖下载和分享：当你对自己的杰作感到满意后，即可将故事卡片下载为精美的明信片式图片，准备打印、与朋友分享或永远珍藏！

演示

AI驱动的故事卡片制作器 - 演示

用户旅程 1：创建“故事卡片”

用户旅程 2：翻译故事

用户旅程 3：重新设计插图

其他功能

a.给我惊喜！

b.安全调节

c.下载故事卡

d.链接到故事卡片

故事卡片生成后，将有一个唯一的链接供访问和下载，有效期为 24 小时。

我的代码

这款人工智能驱动的故事卡片制作工具使用 TypeScript 和SvelteKit构建。整个应用的布局使用了Flowbite Svelte组件库。故事卡片（模拟明信片大小，4 英寸 x 3 英寸）的布局则使用Fabric.js以 HTML Canvas 的形式创建。

此外，SvelteKit 应用部署在 Cloudflare Pages 中，并配备了Cloudflare R2（用于存储插图）、Cloudflare KV（用于存储故事元数据）和Cloudflare AI（显然是 LLM 和其他 GenAI 模型的最佳选择）。

最后，这是我第一次使用 SvelteKit 构建完整的 Web 应用程序并将其部署到 Cloudflare Pages 上。

完整的源代码以 MIT 许可证发布，请点击此处查看。

旅行

Cloudflare Dev AI挑战赛激发了我的创作灵感！受到我孩子绘本故事的启发，我构思了一套故事卡片——简短而引人入胜的故事，可以打印出来，打乱顺序，以任意顺序阅读。

以下是我将这个想法付诸实践的过程：

灵感与设计：

Cloudflare 的开放式 AI 模型功能强大，尤其擅长处理特定任务，似乎非常适合创作短篇故事。与规模更大的逻辑逻辑模型 (LLM) 相比，我发现了它们在创意写作方面的潜力。因此，我决定创作带有插图的短篇故事，并以可打印的故事卡片形式呈现，作为我的参赛作品。

首先，我使用 Affinity Designer 绘制了故事卡片的布局草图，重点是适合儿童的字体和类似故事书的布局。

构建 Web 应用程序：

SvelteKit 的开发体验非常流畅，使用起来令人愉悦。由于我设想了多种功能，Cloudflare KV 和 R2 自然而然地成为了数据存储的选择，而 SvelteKit 的适配器让集成变得轻而易举。最后，Wrangler CLI 帮助我轻松部署了应用程序。

驾驭人工智能的力量：

故事卡片制作工具运用了五项核心人工智能任务：

• 文本生成：mistral-7b-instruct-v0.2LLM 模型生成故事标题、内容和插图说明。
• 图像生成：该stable-diffusion-xl-base-1.0模型可创建插图并允许风格变化。
• 翻译：该m2m100-1.2b模型将故事内容翻译成各种语言（由于字体使用限制，仅限于拉丁字符集）。
• 图像转文本：该uform-gen2-qwen-500m模型会生成对所生成插图的详细精确描述。
• 文本内容审核：该llamaguard-7b-awq模型审核故事内容以及插图描述，判断其是否对儿童“安全”或“不安全”。

主要收获和未来展望：

这次挑战是一次绝佳的学习经历，帮助我在短时间内将想法转化为可运行的应用程序。展望未来，我期待着为这个项目添加新功能，并为我的儿子和其他人制作更多种类的故事卡片。在技术方面，我发现某些模型存在局限性，例如翻译的字符数限制。探索将内容拆分成多个部分进行翻译等解决方案，或许是未来的一个方向。

我引以为豪的是：

总的来说，我最引以为豪的是创造了一款用户友好且引人入胜的应用程序，它将人工智能的力量与讲故事的魔力结合起来。

多种模型和/或三重任务类型

该应用程序目前符合这两种类型。

• 每个任务使用多种模型：第一个流程——“创建故事卡”——按顺序使用了以下两种模型，共分为三个步骤。

  a. mistral-7b-instruct-v0.2- 根据提供的主题、类型、角色、地点等生成故事标题和内容。

  b. mistral-7b-instruct-v0.2（相同模型）- 根据生成的故事，确定一个主要场景，并为其生成插图。

  c. stable-diffusion-xl-base-1.0- 根据场景描述，构建文本到图像的提示，以特定风格生成插图。

  d.uform-gen2-qwen-500m然后，生成图像的详细描述。

  e. llamaguard-7b-awq- 最后，为了安全起见，故事内容（标题+内容）和插图描述都会经过审核。

• 三重任务：利用了 5 种任务类型的 AI 模型。

  1. 文本生成——mistral-7b-instruct-v0.2用于生成故事标题和内容，以及生成文本到图像的提示（场景）
  2. 图像生成——stable-diffusion-xl-base-1.0用于插图生成
  3. 翻译——m2m100-1.2b用于将故事标题和内容翻译成多种语言
  4. 图像转文本——uform-gen2-qwen-500m为了理解生成的插图中的内容，需要由法学硕士进行审核。
  5. 文本内容审核——llamaguard-7b-awq用于审核插图描述、故事标题和内容。

编辑：

• 更新了mistral-7b-instruct-v0.1模型mistral-7b-instruct-v0.2，因为我在帖子发布后不久就遇到了问题。
• 新增了“安全分类”功能，因为这对于人工智能生成的文本和图像内容至关重要。此外，对于一款专注于为儿童生成内容的应用程序来说，这更是必不可少。新增了使用uform-gen2-qwen-500m“&”llamaguard-7b-awq符号进行内容审核的功能。