vibeCoding-ecommerce-visual-ai-simplified

KO | EN

gitlite — search

#python #hacktoberfest #llm #golang #android #docker #macos #awesome #cli #kubernetes #awesome-list #vue #openai #ios

vibeCoding-ecommerce-visual-ai-simplified

(★ 17)

电商视觉AI系统是一款基于AI技术的电商图片分析和生成工具，旨在帮助电商商家提升商品图片质量和转化率。 - 该系统通过AI技术自动分析商品图片，提取关键信息，并基于分析结果生成专业的电商图片。 - 产品价值在于减少人工设计成本，提高图片质量和一致性，从而提升电商平台的用户体验和转化率。

vibeCoding-ecommerce-visual-ai-simplified 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 电商视觉AI系统

[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
[![Next.js](https://img.shields.io/badge/Next.js-14-black)](https://nextjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue)](https://www.typescriptlang.org/)
[![SQLite](https://img.shields.io/badge/SQLite-3-green)](https://www.sqlite.org/)

## 项目简介

电商视觉AI系统是一款基于AI技术的电商图片分析和生成工具，旨在帮助电商商家提升商品图片质量和转化率。系统采用最新的OpenAI GPT-4o和DALL-E 3技术，能够自动分析商品图片并生成专业的电商视觉内容。

## 技术栈

### 前端
- **Next.js 14** - React框架，支持SSR和SSG
- **TypeScript** - 类型安全的JavaScript超集
- **Tailwind CSS** - 现代化CSS框架
- **React Hooks** - 函数式组件状态管理

### 后端
- **Node.js** - 服务端运行环境
- **SQLite** - 轻量级嵌入式数据库
- **Better-SQLite3** - 高性能SQLite绑定
- **自定义ORM** - 类似MyBatis-Plus的完整ORM实现

### AI集成
- **OpenAI GPT-4o** - 视觉分析模型
- **DALL-E 3** - 图片生成模型

## 核心特性

### 1. 完整ORM方案
实现了类似MyBatis-Plus的ORM功能：
- 基础CRUD操作
- 条件构造器（LambdaQueryWrapper）
- 分页查询
- 装饰器定义实体
- 自动生成ID

### 2. 多环境配置
支持开发、测试、生产三种环境：
- `.env.development` - 开发环境配置
- `.env.test` - 测试环境配置
- `.env.production` - 生产环境配置

不同环境使用不同的数据库文件：
- 开发环境: `dev.db`
- 测试环境: `test.db`
- 生产环境: `prod.db`

### 3. Mock数据支持
支持一键切换数据库数据和Mock数据：
```
USE_MOCK_DATA=true  # 使用Mock数据
USE_MOCK_DATA=false # 使用数据库数据
```

### 4. 统一请求异常管理
- 统一错误码定义
- 自定义错误类
- HTTP响应错误处理
- 网络错误处理

### 5. 现代科技风格UI
- 渐变背景
- 玻璃态效果
- 流畅动画
- 响应式设计

## 项目结构

```
ecommerce-visual-ai-simplified/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── api/               # API路由
│   │   ├── models/            # 模型配置页面
│   │   ├── images/            # 图片上传页面
│   │   ├── analysis/          # 视觉分析页面
│   │   ├── schemes/           # 设计方案页面
│   │   ├── layout.tsx         # 根布局
│   │   └── page.tsx           # 首页
│   ├── components/            # 公共组件
│   │   └── layout/           # 布局组件
│   ├── config/               # 配置管理
│   ├── lib/                  # 工具库
│   ├── mappers/              # 数据访问层
│   ├── orm/                  # ORM实现
│   ├── services/             # 服务层
│   ├── styles/               # 样式文件
│   └── types/                # 类型定义
├── data/                      # 数据库文件
├── uploads/                   # 上传文件
├── generated/                 # 生成文件
├── .env.development          # 开发环境配置
├── .env.test                 # 测试环境配置
├── .env.production           # 生产环境配置
├── next.config.js            # Next.js配置
├── tsconfig.json             # TypeScript配置
├── start.bat                 # 启动脚本
└── stop.bat                  # 关闭脚本
```

## 快速开始

### 环境要求
- Node.js 18+
- npm 9+

### 安装步骤

1. 克隆项目
```bash
git clone https://github.com/zhibilin/vibeCoding-ecommerce-visual-ai-simplified.git
cd vibeCoding-ecommerce-visual-ai-simplified
```

2. 安装依赖
```bash
npm install
```

3. 配置环境变量
```bash
# 复制环境配置文件
copy .env.development .env

# 编辑.env文件，设置OpenAI API密钥
# OPENAI_API_KEY=your-api-key-here
```

4. 启动应用

**Windows用户：**
```bash
# 双击运行
start.bat

# 或命令行运行
npm run dev
```

**Linux/Mac用户：**
```bash
npm run dev
```

5. 访问应用
- 前端地址: http://localhost:3000
- API地址: http://localhost:3001

### 一键启动/关闭

**启动：**
```bash
# Windows
start.bat

# 或
npm run dev
```

**关闭：**
```bash
# Windows
stop.bat

# 或
Ctrl + C
```

## 功能模块

### 1. 模型配置管理
- 添加/编辑/删除模型配置
- 支持多个模型配置
- 设置默认模型

### 2. 图片上传与管理
- 单张图片上传
- 批量图片上传（最多10张）
- 自动图片优化
- 缩略图生成

### 3. 视觉分析
- AI图片分析
- 产品信息提取
- 视觉特征识别

### 4. 设计方案管理
- 方案创建
- 方案编辑
- 图片生成

## ORM使用示例

### 定义实体
```typescript
import { Table, PrimaryKey, AutoGenerateId, Column } from '@/orm';

@Table('users')
export class User {
  @PrimaryKey()
  @AutoGenerateId()
  @Column('id')
  id!: string;

@Column('name')
  name!: string;

@Column('email')
  email!: string;
}
```

### 使用Mapper
```typescript
import { BaseMapper, LambdaQueryWrapper } from '@/orm';
import { User } from '@/types/entities';

class UserMapper extends BaseMapper<User> {
  constructor() {
    super(db, User);
  }
}

// 插入
userMapper.insert({ name: '张三', email: 'zhangsan@example.com' });

// 查询
const users = userMapper.selectList({
  where: [{ field: 'name', operator: 'LIKE', value: '%张%' }]
});

// 分页
const page = userMapper.selectPage(1, 10);

// 条件构造器
const wrapper = new LambdaQueryWrapper<User>()
  .like('name', '张')
  .eq('status', 'active')
  .orderByDesc('createdAt');
```

## 环境切换

### 开发环境
```bash
NODE_ENV=development npm run dev
```

### 测试环境（使用Mock数据）
```bash
NODE_ENV=test USE_MOCK_DATA=true npm run dev
```

### 生产环境
```bash
npm run build
npm run start
```

## API文档

### 健康检查
- `GET /api/health` - 检查服务状态

### 模型配置
- `GET /api/models?userId={userId}` - 获取模型列表
- `POST /api/models` - 创建模型配置
- `PUT /api/models/{id}` - 更新模型配置
- `DELETE /api/models/{id}` - 删除模型配置

### 图片管理
- `GET /api/images?userId={userId}` - 获取图片列表
- `POST /api/images/upload` - 上传图片
- `DELETE /api/images/{id}` - 删除图片

## 部署

### Docker部署
```bash
# 构建镜像
docker build -t ecommerce-visual-ai .

# 运行容器
docker run -p 3000:3000 -v ./data:/app/data ecommerce-visual-ai
```

### Docker Compose
```bash
docker-compose up -d
```

## 开发指南

### 代码规范
- 使用TypeScript严格模式
- 遵循ESLint规则
- 组件使用函数式写法
- 样式使用CSS Modules或styled-jsx

### 提交规范
```
feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式
refactor: 重构
test: 测试
chore: 构建/工具
```

## 远程仓库

项目托管在GitHub：
https://github.com/zhibilin/vibeCoding-ecommerce-visual-ai-simplified.git

## 许可证

Apache-2.0 License

## 联系方式

如有问题或建议，请提交Issue或Pull Request。

---

vibeCoding-ecommerce-visual-ai-simplified

vibeCoding-ecommerce-visual-ai-simplified 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vibeCoding-ecommerce-visual-ai-simplified

vibeCoding-ecommerce-visual-ai-simplified 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README