EssenceCard AI - Book to Viral Content 📚✨

EssenceCard AI 是一个智能化的读书笔记生成工具。它利用 Google Gemini 3.0 模型，能够读取 PDF 电子书，分析章节结构，提取核心“金句”，并生成高颜值的知识卡片、小红书风格的文案脚本以及播客音频。

✨ 核心功能

• 智能 PDF 解析: 自动识别书籍目录结构，按章节提取内容。
• 深度金句提取: 基于产品经理/主编视角的 AI 提示词，提取书中最具洞察力的观点。
• 可视化卡片: 提供多种设计风格（极简白、杂志风、森系、磨砂玻璃等），支持 HTML 转图片下载。
• AI 绘图: 集成 Imagen 模型，根据卡片内容自动生成背景图。
• 多模态输出:
  • 文案生成: 自动撰写符合小红书调性的爆款文案。
  • 播客生成: 利用 Gemini TTS 将文案转化为自然流畅的语音（支持多种音色）。
• 本地化存储:通过 IndexedDB 本地保存项目进度和历史记录。

---

🔑 配置 API Key (至关重要)

本项目使用 Google Gemini API。为了确保灵活性和安全性，我们提供了两种配置方式。

方式一：在界面中配置（推荐用户使用）

无需修改代码。

1. 打开应用网页。
2. 点击右上角的 设置图标 (⚙️)。
3. 在弹窗中粘贴你的 Google Gemini API Key。
4. 点击保存。
   • 注意：Key 会加密存储在浏览器的 LocalStorage 中，仅供当前浏览器使用，不会上传到服务器。

方式二：通过环境变量配置（推荐开发者/部署使用）

如果你希望部署一个带有默认 Key 的版本，或者在本地开发时免去重复输入：

1. 将根目录下的 .env.example 文件重命名为 .env。
2. 打开 .env 文件，填入你的 Key：

   API_KEY=你的_Google_Gemini_API_Key

3. 安全提示: 确保 .gitignore 文件中包含 .env，切勿将含有真实 Key 的文件提交到 GitHub！

优先级逻辑: 系统会优先读取用户在“设置”中手动输入的 Key。如果未输入，则回退使用环境变量中的默认 Key。

---

🛠️ 本地开发与运行

本项目采用了现代化的 ES Module 和 CDN 导入方式 (Import Maps)，无需复杂的构建步骤（如 Webpack 或复杂的 Vite 配置），但需要一个静态文件服务器。

前置要求

• Node.js (可选，仅用于运行简单的本地服务器)
• 一个 Google Gemini API Key (获取地址)

启动步骤

1. 克隆项目

   git clone https://github.com/your-username/essence-card-ai.git
   cd essence-card-ai

2. 配置环境 如上所述，创建 .env 文件并填入 Key（可选）。

3. 启动本地服务器 你需要在一个本地端口（如 3000）上通过 HTTP 服务此目录。

   如果你安装了 Python:

   python3 -m http.server 3000

   或者使用 Node.js 的 serve 包:

   npx serve .

4. 访问应用 打开浏览器访问 http://localhost:3000。

---

🚀 部署指南

本项目是纯前端静态应用，非常适合部署在 Vercel, Netlify, 或 Cloudflare Pages 上。

部署到 Vercel (推荐)

1. Push 代码: 将代码推送到你的 GitHub 仓库。
2. 导入项目: 在 Vercel Dashboard 中点击 "Add New Project"，选择你的仓库。
3. 配置构建:
   • Framework Preset: 选择 "Other" (因为这是一个纯静态 HTML 项目)。
   • Build Command: 留空。
   • Output Directory: 留空 (或者填 .)。
4. 环境变量 (Environment Variables):
   • 如果你希望提供一个公用的默认 Key（注意费用和限额），在 Vercel 的 Environment Variables 设置中添加：
   • Key: API_KEY
   • Value: 你的_Gemini_Key
   • 通常建议不配置此项，让用户使用自己的 Key。
5. 点击 Deploy。

注意事项

• 由于使用了 HTML5 的 <script type="importmap"> 和 ES Modules，请确保你的目标浏览器版本较新。
• 项目依赖 https://aistudio.google.com/... 的 CDN 资源，请确保部署环境的网络可以访问 Google 服务。

---

📂 项目结构

.
├── index.html          # 入口文件 (含 Import Maps)
├── index.tsx           # React 挂载入口
├── App.tsx             # 主应用组件
├── config.ts           # 集中配置文件 (处理 Env vs LocalStorage)
├── types.ts            # TypeScript 类型定义
├── services/
│   ├── geminiService.ts # 与 Google Gemini API 交互的核心逻辑
│   ├── pdfService.ts    # PDF 解析逻辑
│   └── storageService.ts# IndexedDB 存储逻辑
├── components/         # UI 组件 (卡片画布, 设置弹窗, 侧边栏等)
├── .env.example        # 环境变量模板
└── .gitignore          # Git 忽略规则

🤝 贡献

欢迎提交 Issue 或 Pull Request 来改进新的卡片风格或优化提示词 (Prompt)。

📄 License

MIT

---

📣 推广文案素材 (Media Kit)

1. 微信公众号推文示例

标题： 读不完书？这款 AI 神器把 30万字浓缩成 3 张“视觉精华卡”

正文：

在这个信息爆炸的时代，"买书如山倒，读书如抽丝"是很多人的真实写照。我们渴望知识，却被厚重的书本劝退。

今天给大家推荐一款基于 Google Gemini 3.0 的开源工具 —— EssenceCard AI。

它不是简单的摘要工具，而是一位拥有“产品思维”的深度阅读者。

它能做什么？

1. 结构化拆解：自动识别全书章节，你可以只读你感兴趣的那一章。
2. 金句挖掘：它不会给你枯燥的流水账，而是精准捕捉书中那些让你“醍醐灌顶”的底层逻辑和金句。
3. 高颜值输出：内置“极简白”、“杂志风”、“森系治愈”等多种设计模版，一键生成可以直接发朋友圈或小红书的精美卡片。
4. 懒人模式：生成的文案可以直接转成语音播客，通勤路上听书。

为什么选择它？ 不同于市面上泛泛而谈的 AI 总结，EssenceCard 专注于“洞察”。它模拟了资深编辑的视角，帮你过滤掉 90% 的废话，只留 10% 的干货。

---

2. 小红书种草笔记示例

标题： 😭 终于找到了！读书博主都在用的 AI 神仙卡片生成器 ✨

正文：

宝子们！👋 今天要按头安利一个超级宝藏的 AI 工具！ 👉 EssenceCard AI

以前做读书笔记要花好几个小时，排版还要搞半天。 现在直接把 PDF 丢进去，几秒钟就吐出超好看的“精华卡片”！📚➡️🖼️

✅ 颜值绝绝子：有好多神仙模版！我最爱那个“法式玫瑰”和“磨砂玻璃”风，高级感拉满！💖 ✅ 内容超硬核：它提取的不是流水账，是那种很有深度的金句，发出来显得很有水平～🧠 ✅ 懒人福音：还能自动写文案、生成语音，直接当播客听！🎧

不管是做自媒体还是自己学习，真的省了好多时间！

#读书笔记 #AI工具 #学习干货 #小红书排版 #EssenceCardAI #高效学习

---

👨‍💻 关于作者

产品主理人：谁是专家
全网同名（微信公众号 / 小红书 / B站）：谁是专家

我们致力于探索 AI 在内容创作领域的边界。如果您对本项目感兴趣，或有商业合作意向，欢迎关注并联系我。