前言
前段时间刷到少数派文章 不懂开发，我借助 AI 开发了一个工具，已上线可免费使用 大受启发，目前的AI应用领域已经遍地开花，相关技术也已经相当成熟，能不能做一些很有特色的小工具呢，作为全栈开发者兼设计师的我，决定针对一些特定领域做一些比较好玩的小应用出来～
这是一个SummaryCard-AI 智能总结与内容分享工具，简单说就是总结卡片，思路类似上面文章提到的「妙记文卡」，可以将普通文本快速转化为精美的卡片，以图片的形式导出，我在这个基础上增加了一些有意思的功能：
- 智能摘要：自动提取输入框内的关键信息（链接或任意文本），快速生成内容掌握核心要点。
- 辅助创作：提出任意问题，AI帮你生成一份完整的内容文档。
- 个性定制：根据您的偏好调整摘要风格，确保结果满足您的期望。
- 便捷分享：一键分享至社交平台或发送给好友，简单便捷。
- 多种格式：支持网址、文本及文件上传，轻松生成摘要。
- 卡片导出：保存卡片为图片或生成分享链接，便于存储与传播。
- 个性封面：AI生成设计专属的封面。
- AI编辑：使用AI编辑器进行二次创作，智能调整内容。
- 文本个性化：自定义文字大小、字体和背景，打造独特风格。
- 访问控制：为分享的内容页面设置密码保护，以确保信息的私密性。
在花了一周左右的各种优化与调试之后，目前这个工具已经上线并且正常使用了，地址：https://card.orence.net，如果你有任何问题、意见或建议可以加入交流群与开发者一起讨论。
想法
本来很久之前打算做一个支持MarkDown编辑器的在线剪贴板，方便通过WEB分享一些临时写的文章、教程或代码片段，受到「妙记文卡」的启发，干脆添加一些衍生功能，比如内容总结，当我看到一篇长文章或文档，想快速了解内容，这时候就可以通过AI工具自动提取信息，一目了然，高效获取知识。还可以衍生一下从搜索引擎获取一些即时信息，了解事件经过或一些即时信息，询问一个编程或数学问题快速获得答案并分享给其他人等等。
初步构想
首先就是不能做的太复杂，所以只保留两个页面——工作台和分享页，首先是工作台，按照操作习惯，选择三栏布局，左边展示基础信息及基础操作按钮和主要内容输入框，中间作为预览页，右边分上中下，顶部作为预览页的内容编辑框，中间展示一些定制按钮，底部放置功能按钮。
很快啊，一个简单粗暴的布局概念图就出来了：
虽然最后做出来是这样的：
功能构想
AI功能实现
这里还需要AI来帮我们完善一些功能，如内容解析，联网搜索，数据汇总输出等，这里挑选了Dify来完成一个综合的工作流，Dify是一个开源的 LLM 应用开发平台。提供从 Agent 构建到 AI workflow 编排、RAG 检索、模型管理等能力，轻松构建和运营生成式 AI 原生应用。
无论是Agent还是插件都已经相当完善了，并且提供了API调用，所以只需要编辑合适的工作流完成不同的任务即可：
数据库
由于内容分享涉及到一些信息的存储，根据以往的开发经验，使用vika维格云来做数据库，操作也相当简单，设计数据表结构，创建表、字段，通过API进行调试。
看起来一切正常，然后确定前端技术栈。
技术栈
还是根据以往的开发经验，使用Nodejs+PNPM， VUE3+TypeScript ，请出NUXT3 +Tailwindcss + ArcoDesign，接下来就是初始化项目并载入各种模块，整个流程就不写了，对小白来说比较复杂，想了解过程的可以去看看之前写的文章——我的开发历程-OnMac AppStore｜聊聊一个优雅的软件资源下载站是怎么诞生的～ - 少数派 (sspai.com)
开发
整个开发过程还是轻车熟路，并且还学习了一些很Nice的操作，也遇到一些奇奇怪怪的问题，我们挑一些细节来聊聊。
Markdown预览
我将Markdown预览功能单独做成了一个Vue 组件，这样可以在编辑页和分享页复用代码，将内容编辑框绑定到内容，通过传递内容（content）来实现即时渲染与生成和动态更新，并通过defineExpose来暴露目录数据，实现了目录的及时刷新，这是一个父组件通过模板引用的方式获取到当前组件的实例。
Markdown组件通过markdown-it katex、mathjax3、mermaid、marked等来实现了代码块公式和图表渲染，使用qrcode.vue实现了二维码图形的即时生成。
你可以查看预览：概率流密度在定态中的时间无关性证明
视觉效果切换
视觉效果切换的实现很简单，通过按钮或选择器绑定不同的Class元素即可，再添加对应的CSS，就实现了多个效果直接的切换（背景、字体、显示大小），这样存储数据的时候只需要存储对应的Class属性即可，分享页会自动渲染。
文件总结
由于文件总结需要大模型能获取文件内容，但是能通过URL解析文档的大模型并不多，价格也比较贵，我选择了Reader 来将上传的文档解析为结构化数据。
在Dify的工作流中，通过正则表达式提取URL，交给HTTP模块来从r.jina.ai获取响应并交给大模型处理，最后再返回数据在内容区域渲染。
你可以查看预览：基于情感特征注意力的多粒度卷积网络文本情感分析
分享链接的生成
在Vue3项目中，通过Vue Router可以轻松实现动态路由，每一份保存的内容在vika维格云中都存在唯一ID，将ID作为动态参数，创建一个/page/[id].vue 页面，通过useRoute组合式API来获取当前路由的参数就实现了动态内容的显示。
通过拼装 域名/[id] 就实现了一个分享链接，再通过后缀 ?=password 就实现了携带访问密码，分享功能的逻辑就完善了。
封面生成
得益于Flux模型的优秀能力，无论是生成速度质量都很不错，我在Dify中添加了Flux工作节点用于封面生成，在生成之前，会使用LLM节点根据文章内容生成一份绘图提示词，生成图片之后再永久转存到存储桶避免丢失。
这时候，你就可以在编辑内容之前往编辑框填入你想生成的封面或者编辑内容之后根据内容来生成封面，同时我们也提供了一个自定义文件上传按钮，可以上传自己喜欢的封面。
AI编辑器
由于AI总结实现的是一次性根据输入内容来生成内容，不能二次局部修改，我添加了一个独立的编辑框，可以对内容进行二次创作，二次编辑的内容也会实时显示在预览窗口。
这里使用的是AiEditor富文本编辑器，AiEditor 是一个面向 AI 的下一代富文本编辑器，它基于 Web Component 开发，因此支持 Layui、Vue、React、Angular、Svelte 等几乎任何前端框架。她适配了 PC Web 端和手机端，并提供了 亮色 和 暗色 两个主题。除此之外，她还提供了灵活的配置，开发者可以方便的使用其开发任何文字编辑的应用。
评论
当分享到一些内容希望得到网页反馈时，留个联系方式似乎有点多余，于是加入了一个评论区功能，这里使用到的是 Artalk 评论系统 ，Artalk 是一款简单易用但功能丰富的评论系统，你可以开箱即用地部署并置入任何博客、网站、Web 应用。
当在生成分享链接之前勾选了评论功能，分享页面的底部就会多出一个评论区，访客不需要注册或登录账号，只需要填写昵称和邮箱即可。
评论区会根据页面访问路径的ID区分数据，这里我们通过分享页面传递id到评论组建，并展示在文章底部和抽屉，评论功能就完成了。
这里就分享一些核心功能的实现方法和逻辑，依旧还有许多待优化的地方，等后续慢慢完善～
PWA
PWA（桌面快捷应用）实现的方式很简单，只需要创建manifest.webmanifest 清单文件，这是一个用于描述Web应用程序的清单文件。这种文件可以让开发者定义应用的名称、图标、启动URL、主题颜色等信息，帮助Web应用在移动设备上更像一个原生应用（PWA），放在 /public 目录下，从 nuxt.config.ts导入，这样就可以在浏览器访问的时候安装便携应用到桌面，免去了打包客户端的流程。
总结
作为一个独立开发者，需要通过合理的模块化设计，复用现有的UI组件与模板，可以避免重复造轮子，提高开发效率。SummaryCard作为单一AI应用的首次尝试，实现了AI总结，内容分析，AI创作，图像生成等组合式应用，相信还有更多的玩法等待探索。
接下来我打算探索开发更多在特定领域能通过AI辅助的应用，如果你有更多好玩的想法或需求，可以在SummaryCard的联系页面中找到交流群并加入我们。
