用AI赋能创意写作：介绍Cloudflare AI挑战Markdown编辑器 #
这是为Cloudflare AI挑战 (opens new window)提交的内容。
我构建的内容 #
我构建了一个工具，可以让您在写作时获得AI的帮助。它本质上是一个基本的Markdown编辑器，但附带了一些AI工具！
- AI助理 - 与AI聊天，询问任何问题，您可以选择首选模型
- AI标题生成器 - 根据您的文本摘要生成标题建议
- AI封面生成器 - 根据您的文本摘要生成封面建议
我自己尝试过，从我的文章中创建标题或封面非常方便！🤓
最重要的是，我希望避免创建一个用于生成文章的应用程序，而是鼓励人们自己写作。让我们成为飞行员，让AI作为副驾驶。
演示 #
我的代码 #
这是一个使用create-next-app (opens new window)创建的Next.js (opens new window)项目。
入门 #
首先，运行开发服务器：
npm run dev
# 或
yarn dev
# 或
pnpm dev
# 或
bun dev
以全屏模式退出全屏模式
使用浏览器打开http://localhost:3000 (opens new window)以查看结果。
您可以通过修改 app/page.tsx 文件来开始编辑页面。在您编辑文件时，页面会自动更新。
此项目使用 next/font (opens new window) 来自动优化和加载Inter，这是一个自定义的Google字体。
了解更多 #
要了解有关Next.js的更多信息，请查看以下资源：
- Next.js文档 (opens new window) - 了解Next.js的功能和API。
- 学习Next.js (opens new window) - 一个交互式的Next.js教程。
您可以查看Next.js GitHub存储库 (opens new window) - 欢迎您的反馈和贡献！
在Vercel上部署 #
部署Next.js应用程序的最简单方法是使用 Vercel平台 (opens new window)，由Next.js的创建者提供。
查看我们的Next.js部署文档 (opens new window)了解更多详情。
@cloudflare/next-on-pages #
@cloudflare/next-on-pages…
旅程 #
这真的是一个充满乐趣的项目！🥳
AI应用程序中仍然有些魔法！🤓
我对Cloudflare发布这样一个出色功能印象深刻，使用模型非常简单。文档很清晰👏
我在Cloudflare Pages上部署了应用程序。通常我使用Vercel 😅，但我想试试。部署还算顺利，遇到了一些问题。在阅读文档后，我成功将Next.js部署到了Pages 👏 酷！😎
我的第一个问题是存储 💾，我的目标是允许用户保存他们的工作和聊天记录。起初我想使用supabase，但我注意到Cloudflare有一个KV！KV是一个简单的键值存储。非常适合这种应用程序！🤓
我的第二个问题是数据结构。我需要一个名为“project”的嵌套对象，并且KV是平面的 🌏 存储。解决方案是将其存储为JSON！😅 不是最佳方式，但足以开发应用程序！
我的第三个问题是为文章生成标题。我无法将整个文本传递给“文本生成”模型，因为它太大 🫣。解决方案是使用“摘要模型”作为代理！🤓
我引以为豪的地方
- 我能够将整个项目托管在Cloudflare基础架构上！👏
- 存储配置
我创建了接口：
export interface Storage<T> {
get: (key: string) => Promise<T>;
set: (key: string, value: string) => Promise<void>;
remove: (key: string) => Promise<void>;
}
然后我实现了“KVStorage”并将其配置在配置文件中：
import { KVStorage } from "../util/storage/KVStorage";
import { Storage } from "../util/storage/Storage";
const cloudfrareKey = process.env.CLOUDDLARE_KV_API_KEY;
const cfAccountId = process.env.CLOUDFLARE_ACCOUNT_ID;
const cloudflareKvNamespaceId = process.env.CLOUDFLARE_KV_NAMESPACE_ID;
if (!cloudfrareKey || !cfAccountId || !cloudflareKvNamespaceId) {
throw new Error("Cloudflare key or account ID is missing");
}
export const storage: Storage<string> = new KVStorage<string>(
cfAccountId,
cloudflareKvNamespaceId,
cloudfrareKey
);
在应用程序中，我使用实现接口的存储对象，因此您可以轻松更改到其他存储！🥳
多个模型和/或三重任务类型
AI助手 #
基于文本生成模型，用户可以选择：
- meta/llama-2-7b-chat-fp16
- thebloke/openhermes-2.5-mistral-7b-awq
- mistral/mistral-7b-instruct-v0.1
- tiiuae/falcon-7b-instruct
- google/gemma-2b-it-lora
- nousresearch/hermes-2-pro-mistral-7b
- thebloke/llama-2-13b-chat-awq
- qwen/qwen1.5-14b-chat-awq
AI标题生成器 #
首先，我使用“bart-large-cnn”对文本进行摘要：
- facebook/bart-large-cnn
然后我使用“nousresearch/hermes-2-pro-mistral-7b”来生成标题
AI封面生成器 #
首先，我使用“bart-large-cnn”对文本进行摘要：
- facebook/bart-large-cnn
然后用户可以使用以下模型之一：
- lykon/dreamshaper-8-lcm
- runwayml/stable-diffusion-v1-5-img2img
- runwayml/stable-diffusion-v1-5-inpainting
- stabilityai/stable-diffusion-xl-base-1.0
- bytedance/stable-diffusion-xl-lightning
阅读下一篇 #
[
使用Cloudflare AI为孩子制作有趣、美丽、可打印的“故事卡” #
Merbin J Anselm - Apr 12
](https://dev.to/anselm94/fun-beautiful-printable-story-cards-for-kids-with-cloudflare-ai-3fbf)
[
一个功能强大的密码生成器NPM包 #
abhilaksh-arora - Apr 7
](https://dev.to/abhilaksharora/a-powerful-password-generator-npm-package-165d)
[
