我构建了一个现代 AI 助手

大多数 AI 教程只展示如何调用 API。我想构建一个真正的应用程序。我使用了原生 HTML、CSS 和 JavaScript。

该应用包含以下功能：

  • 响应式 UI
  • 深色和浅色模式
  • 流式响应
  • Markdown 渲染
  • 语法高亮
  • 聊天记录
  • 错误处理
  • GitHub Pages 部署

我使用了这些工具：

  • HTML5 and CSS3
  • Vanilla JavaScript
  • Marked.js
  • DOMPurify
  • Prism.js
  • Google Generative AI SDK

我专注于安全性。我使用 DOMPurify 来清理 AI 的响应。这可以防止安全风险。

我专注于用户体验。应用会在生成时流式传输文本。你可以获得即时反馈，而无需等待加载图标。

我为代码块添加了 Prism.js。这增加了语言标签和复制按钮。

我使用 localStorage 来存储聊天记录。刷新页面后，你的对话记录依然存在。它速度很快，且不需要后端。

我添加了重试逻辑和错误消息。这让应用更加稳定。

AI 项目能让你学到很多技能：

  • API 集成
  • UI 设计
  • 状态管理
  • 用户体验

为你的作品集构建这样的项目。这能展示你具备实战技能。

下一个功能我应该添加什么？

  • 语音输入
  • 文件上传
  • 记忆功能

在评论区告诉我吧。

Source: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Optional learning community: https://youtu.be/nbFKG_6DkSE