Feature/ai agent (#24)

* AI agent

Author: zhongyiio

README.md

@@ -1,75 +1,61 @@
 # ReadLite - Simple Reading Mode
 
-ReadLite is a browser extension focused on user experience, providing clean typography and immersive reading experience similar to physical books. It intelligently extracts webpage content, filters out ads and distracting elements, allowing you to focus on the content itself.
+A browser extension that provides a clean, distraction-free reading experience with AI summarization capabilities.
 
-## ✨ Key Features
+![ReadLite Screenshot](assets/screenshot.png)
 
-### 📖 Smart Content Extraction
-- Automatically identifies and extracts main content using advanced algorithms
-- Effectively filters out ads, popups, and other distracting elements
-- Supports various news sites, blogs, documentation, and long-form content
+## Features
 
-### 🎨 Beautiful Reading Experience
-- Multiple themes: Light, Dark, Sepia, and Paper mode
-- Customizable fonts, font sizes, line spacing, and page width
-- Automatically adapts to different screen sizes for optimal reading
+- **Clean Reader Interface**: Transform cluttered web pages into a beautiful, distraction-free reading experience
+- **AI Article Summarization**: Get instant summaries and insights about what you're reading
+- **Multiple Themes**: Choose from Light, Dark, Sepia, and Paper themes to suit your preference
+- **Adjustable Typography**: Customize font size, line spacing, and width for optimal reading comfort
+- **Article Saving**: Save articles as markdown for offline reading
 
-### 🔤 Multilingual Support
-- Automatically detects page language and applies appropriate typography rules
-- Provides specialized reading experience for Chinese and English content
-- Supports switching between Chinese and English interfaces
+## Usage
 
-### ⚡ Convenient Controls
-- One-click adjustment for all reading settings
-- Automatically remembers your reading preferences
+1. Install the extension from the Chrome Web Store (coming soon)
+2. Navigate to any article or blog post
+3. Click the ReadLite icon in your browser toolbar
+4. Enjoy a clean reading experience
+5. Use the AI button to get summaries and ask questions about the article
 
-### 🔒 Privacy Focused
-- All features process locally, no transmission of your reading content
-- No account registration required for full functionality
-- Collects no personal data, protecting your privacy
-
-## 🚀 How to Use
-
-1. After installation, browse any page with articles
-2. Click the ReadLite icon in the toolbar
-3. The page will immediately convert to comfortable reading mode
-4. Customize your reading experience through the settings panel
-
-## 🛠️ Development Guide
+## Development
 
 ### Prerequisites
+- Node.js (v16+)
+- Yarn or npm
 
-- Node.js 16+ and npm/yarn
-- Chrome, Edge, or other modern browsers
-
-### Install Dependencies
-
+### Setup
 ```bash
-npm install
-# or
-yarn install
-```
+# Clone the repository
+git clone https://github.com/yourusername/read-lite.git
+cd read-lite
 
-### Development Mode
+# Install dependencies
+yarn install
 
-```bash
-npm run dev
-# or
+# Start development server
 yarn dev
 ```
 
-### Build Extension
-
+### Build for production
 ```bash
-npm run build
-# or
 yarn build
 ```
 
-## 📄 License
+## Technical Details
+
+This extension is built with:
+- [Plasmo Framework](https://www.plasmo.com/) - Browser extension framework
+- [React](https://reactjs.org/) - UI library
+- [Mozilla Readability](https://github.com/mozilla/readability) - Content extraction
+- [Marked](https://marked.js.org/) - Markdown parsing
+
+## License
 
 MIT
 
----
+## Translation
 
-*For Chinese version, please see [README.zh.md](README.zh.md)*
+- [中文说明](./README.zh.md)

README.zh.md

@@ -1,75 +1,62 @@
 # ReadLite - 简洁阅读模式
 
-ReadLite 是一款注重用户体验的浏览器扩展，为网页内容提供类纸质书籍的简洁排版和沉浸式阅读体验。它能智能提取网页正文，过滤广告和干扰元素，让您专注于内容本身。
+一款提供清爽无干扰阅读体验的浏览器扩展，具备 AI 文章摘要功能。
 
-## ✨ 主要功能
+![ReadLite截图](assets/screenshot.png)
 
-### 📖 智能内容提取
-- 使用先进算法自动识别并提取网页主要内容
-- 有效过滤广告、弹窗和其他干扰元素
-- 支持各类新闻、博客、文档和长文本网站
+## 功能特色
 
-### 🎨 精美阅读体验
-- 提供多种主题：明亮、暗黑、护眼、纸张模式
-- 可自定义字体、字号、行间距和页面宽度
-- 自动适应不同设备屏幕尺寸，提供最佳阅读效果
+- **干净的阅读界面**：将杂乱的网页转换为美观、无干扰的阅读体验
+- **AI文章摘要**：获取即时摘要和对正在阅读内容的见解
+- **多种主题**：可选择亮色、暗色、棕褐色和纸张模式，满足个人偏好
+- **可调整排版**：自定义字体大小、行间距和页面宽度，获得最佳阅读舒适度
+- **文章保存**：将文章保存为markdown格式供离线阅读
 
-### 🔤 多语言支持
-- 自动检测页面语言并应用最合适的排版规则
-- 为中文和英文内容提供专门优化的阅读体验
-- 支持中英文界面切换，满足不同用户的偏好
 
-### ⚡ 便捷操作
-- 一键调整所有阅读设置
-- 自动记忆您的阅读偏好设置
+## 使用方法
 
-### 🔒 注重隐私
-- 所有功能在本地处理，不传输您的阅读内容
-- 无需注册账号即可使用全部功能
-- 不收集任何个人数据，保护您的隐私
+1. 从Chrome网上应用店安装扩展（即将推出）
+2. 浏览任何文章或博客帖子
+3. 点击浏览器工具栏中的ReadLite图标
+4. 享受清爽的阅读体验
+5. 使用AI按钮获取摘要或提问关于文章的问题
 
-## 🚀 使用方法
-
-1. 安装扩展后，浏览任何含有文章的网页
-2. 点击工具栏中的 ReadLite 图标
-3. 网页将立即转换为舒适的阅读模式
-4. 通过设置面板自定义您的阅读体验
-
-## 🛠️ 开发指南
+## 开发
 
 ### 前提条件
+- Node.js (v16+)
+- Yarn或npm
 
-- Node.js 16+ 和 npm/yarn
-- Chrome、Edge 或其他现代浏览器
-
-### 安装依赖
-
+### 安装
 ```bash
-npm install
-# 或
-yarn install
-```
+# 克隆仓库
+git clone https://github.com/yourusername/read-lite.git
+cd read-lite
 
-### 开发模式
+# 安装依赖
+yarn install
 
-```bash
-npm run dev
-# 或
+# 启动开发服务器
 yarn dev
 ```
 
-### 构建扩展
-
+### 生产构建
 ```bash
-npm run build
-# 或
 yarn build
 ```
 
-## 📄 许可证
+## 技术细节
+
+本扩展使用以下技术构建：
+- [Plasmo Framework](https://www.plasmo.com/) - 浏览器扩展框架
+- [React](https://reactjs.org/) - UI库
+- [Mozilla Readability](https://github.com/mozilla/readability) - 内容提取
+- [Marked](https://marked.js.org/) - Markdown解析
+
+## 许可证
 
 MIT
 
----
+## 其他语言
 
-*英文版请查看 [README.md](README.md)* 
+- [English](./README.md)