零基础打造优雅的AI诗词创作助手

零基础打造优雅的AI诗词创作助手：一个纯前端实现的智能写诗工具

项目介绍

大家好，今天要和大家分享我的一个AI项目 —— AI诗词创作助手。这是一个完全使用原生JavaScript开发的智能写诗工具，不需要复杂的框架，也不需要后端服务器，就能实现专业级的AI诗词创作功能。

在线体验地址
GitHub地址

主要特性

1. 多样化的创作选项

• 支持多个主流AI模型（Deepseek、Moonshot(Kimi)、通义千问）
• 提供多种诗词风格（现代诗、古风诗、俳句）
• 丰富的情感倾向选择（欢快、忧伤、平和、热情）

2. 个性化的界面定制

• 三种精心设计的主题风格（浅色、深色、水墨风）
• 灵活的排版方式（横排/竖排）
• 多样的装饰风格（无装饰/简约线条/传统纹样）

3. 便捷的分享功能

• 一键导出诗词图片
• 快速复制分享文本
• 本地历史记录保存

️ 技术实现

1. 界面设计

• 采用纯CSS变量实现主题切换
• 响应式布局适配各种设备
• SVG图标确保清晰度

:root {
  --primary-color: #4a90e2;
  --text-color: #333;
  --background-color: #fff;
}

[data-theme="dark"] {
  --primary-color: #61dafb;
  --text-color: #fff;
  --background-color: #1a1a1a;
}

[data-theme="ink"] {
  --primary-color: #2c3e50;
  --text-color: #2c3e50;
  --background-color: #f5f5f5;
}

2. 功能实现

• LocalStorage实现数据持久化
• HTML5 Canvas实现图片导出
• 事件委托优化性能

// 示例：图片导出功能
async function exportImage() {
    const poemDisplay = document.getElementById('poem-output');
    const canvas = await html2canvas(poemDisplay);
    const image = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = '我的诗词.png';
    link.href = image;
    link.click();
}

3. AI接口调用

• 支持多个主流AI模型
• 智能情感分析
• 风格化输出处理

使用教程

1. 打开网页，输入想要创作的主题
2. 选择诗词风格（现代诗/古风诗/俳句）
3. 选择情感倾向
4. 点击"生成诗词"按钮
5. 等待AI创作完成
6. 可以选择复制文本或导出图片分享

开发心得

1. 技术选择的重要性：选择原生JavaScript而不是复杂框架，让我能够专注于基础知识的学习。

2. 用户体验的价值：

   • 添加加载动画提升用户体验
   • 保存历史记录方便用户回顾
   • 提供多种主题满足不同需求

3. 代码组织的艺术：

   • 模块化的代码结构
   • 清晰的命名规范
   • 完整的注释文档

后续规划

1. 新功能开发：

   • 添加诗词朗读功能
   • 支持自定义主题颜色
   • 增加更多诗词风格

2. 性能优化：

   • 引入Service Worker实现离线使用
   • 优化移动端体验
   • 添加请求缓存机制

3. 社区功能：

   • 添加作品点赞功能
   • 支持用户评论
   • 作品收藏功能

欢迎交流

如果你对这个项目感兴趣，欢迎：

• 在GitHub上Star和Fork
• 提交Issue或Pull Request
• 通过邮件联系我：[email protected]

参考资料

1. MDN Web文档
2. JavaScript高级程序设计
3. HTML5 Canvas教程
4. CSS Grid完全指南

---

如果觉得文章对你有帮助，欢迎点赞、收藏和评论！