AISnap——AI快照,智能格式转换平台、便捷分享工具
本作品为大连理工大学第一届Vibe Coding Hackathon“灵码杯”参赛作品。
参赛队伍：加油才队
所选赛题：3. 智享生活
当今人们的生活已离不开AI的帮助，无论是生活常识答疑、专业知识求助、文章写作还是用AI编程助手提升开发效率，AI都能提供极大的便利。“调教”下AI生成的一些内容也成为表情包、短视频等互联网文化的一部分。
由此可见，有效利用与分享AI生成的内容成为配合AI技术本身发展的重要方面，我们组发现了当前利用与分享AI生成的内容的一些痛点：AI生成的Markdown文本复制后格式错乱、就算复制成功也仍需删掉大量Markdown语法符号(如# * -)而无法直接使用、想直接截图分享但样式不美观而且也无法清晰体现语境、使用格式转换工具需提交文件会产生大量的临时文件且效率低......
而 CodeSnap 这款代码分享插件则为我们提供了灵感：它可以将代码片段转换为图片并直接分享，且支持多种语言的语法高亮，用户只需运行插件并鼠标选中要分享的代码即可生成图片，且可以复制粘贴进行分享，极大提升了代码分享效率和美观程度。
图1 CodeSnap效果图
为此我们也希望开发一款同类的AI内容分享工具 AISnap(AI快照)，实现针对于以上痛点场景的便捷的AI内容转换利用与分享。
核心功能是实现多格式输入转换成多格式输出的快捷功能。输入支持Markdown/HTML/LaTeX文本与图片(AI生成内容的完整截图)，输出支持DOCX/HTML/LaTeX/PDF文件、模板图片、纯文本。输出可进行文件下载与文本复制的一键操作，还提供输出预览功能。
图2 格式转换流程图
图像转换功能是核心功能一个亮点，该功能是指将输入的图片进行识别，再转换成支持的各种输出格式，该技术通过调用通义千问大模型(Qwen-VL)的API接口实现识别功能，实现高准确率、高位置精度(指精准生成对应的空格)的文本识别。
图3 测试用例截图(使用此图作为测试用例进行下图的识别转换生成)
图4 图片转换图
为了达到CodeSnap中生成图片的效果，我们使用HTML2Canvas实现了截图功能，预设了一组精美的模板，即允许用户体现AI身份也可以添加用户prompt，是使语境更完备，一键下载与复制真正实现了如CodeSnap中的快捷分享。
图5 模板图片生成图
图6 生成的模板图片
我们还充分考虑到现代化应用的开发与用户的个性化需求，将用户分为登录用户与游客两种类型，建立起完备的用户管理系统。所有用户都可以使用核心转换功能，而登录用户则可以个性化设置头像、背景、昵称等用户信息，并可以查看自己的转换历史记录。
图7 用户权限图
图8 个性化设置演示图
图9 转换历史演示图
为了有更良好的用户浏览体验，我们还设计并适配了暗色主题，用户可以从导航栏中一键切换。
图10 暗色主题演示图
核心转换原理为 Pandoc (或node-pandoc)这一工具的文本转换功能，该工具也被称为格式转换的“瑞士军刀”，支持Markdown、HTML、LaTeX、DOCX、PDF等多种格式的转换。但该工具为命令行工具，可视化程度低，上手难度较高，且更多是文件的转换，会产生临时文件、效率低。本项目充分利用其优势并结合前端技术实现了文件内容上的多个接口，可实现更多复制粘贴与内容提取的快捷功能，提升效率、贴近生活。
图片生成原理为 HTML2Canvas 库，该库可以将HTML元素渲染为Canvas并生成图片，实现高质量截图功能，既能避免浏览器截图权限问题又能生成高质量的截图图片。实际上配合预设CSS样式实现生成美观的模板图片，便于分享。
图像识别原理为接入了阿里的通义千问模型的API接口，使用模型为 Qwen-VL 的图像识别功能，支持高准确率的文本识别与位置精度，能够将图片中的文本内容转换为可编辑的文本格式。
- Node
- pandoc（转换功能所必需，可通过下文安装步骤进行安装）
注意：本项目虽做了移动端适配，但更多针对PC端场景，请优先使用PC端运行。
通过域名 https://www.aisnap.site/ 访问。
若无法访问或有功能无法使用(已经开发完备，所有功能测试后均可正常使用)请及时联系或尝试下面的本地运行。当前网站访问不稳定，且此网站为个人站将来可能替换内容，优先建议您本地运行项目。
以下为本地安装运行步骤：
- 安装pandoc环境
yum install -y pandoc安装后可通过 npm pandoc -v 检查是否安装成功。
- 克隆项目到本地：
git clone https://github.com/ProselyteCoding/aisnap-lingma.git
cd aisnap-lingma/aisnap- 安装依赖：
npm install- 配置环境变量：
根据
.env.example环境变量示例文件编写.env文件，并根据实际情况填写数据库等配置。
cp .env.example .env
# 或手动新建 .env 文件- 初始化数据库：
npx prisma migrate dev
# 或 npx prisma db push- 启动开发服务器：
npm run dev- 访问本地项目： 在浏览器中打开 http://localhost:3000
该项目签署了MIT 授权许可，详情请参阅 LICENSE.txt