# gino_ai_web

**Repository Path**: DZHgino/gino_ai_web

## Basic Information

- **Project Name**: gino_ai_web
- **Description**: 前端技术：Vue3.5、Vite、Element Plus、Pinia、Axios、WebSocket

后端技术：Node.js、Express、MySQL、JWT
AI技术：
豆包大模型（文本/语音/图像）、MasterGo AI、Cursor、Trae

工具链：ApiFox、Devbox、WantEditor富文本编辑器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-15
- **Last Updated**: 2026-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Gino AI Web

基于 Vue3.5 + Element Plus 的 **AI 多模态** 前端项目，支持文本、语音、图像等多模态交互与内容创作。

---

## 项目简介

本项目为 AI 多模态应用的前端工程，涵盖智能对话、AI 写作、文生图等能力的前端实现，采用前后端分离架构，可与豆包大模型、MasterGo AI 等 AI 能力对接，适用于智能客服、写作助手、多模态内容创作等场景。

---

## 技术栈组成

| 类别 | 技术 |
|------|------|
| **前端** | Vue 3.5、Vite、Element Plus、Pinia、Axios、WebSocket |
| **后端** | Node.js、Express、MySQL、JWT |
| **AI** | 豆包大模型（文本/语音/图像）、MasterGo AI、Cursor、Trae |
| **工具链** | ApiFox、Devbox、WantEditor 富文本编辑器 |

---

## 环境要求

- **Node.js**：建议 **18.x** 或 **20.x**（LTS）
- **包管理**：npm、pnpm 或 yarn 均可

查看当前 Node 版本：

```bash
node -v
```

若未安装或版本不符，可前往 [Node.js 官网](https://nodejs.org/) 下载安装，或使用 [nvm](https://github.com/nvm-sh/nvm) 管理多版本。

---

## 快速开始

### 1. 拉取项目

从 Gitee 克隆仓库：

```bash
git clone https://gitee.com/DZHgino/gino_ai_web.git
cd gino_ai_web
```

### 2. 安装依赖

```bash
npm install
```

或使用 pnpm：

```bash
pnpm install
```

### 3. 启动开发环境

```bash
npm run dev
```

默认访问：**http://localhost:3000**。

### 4. 构建生产包

```bash
npm run build
```

产物输出在 `dist/` 目录，并按 `js/`、`css/`、`images/` 分目录存放。

### 5. 预览生产构建

```bash
npm run preview
```

---

## 环境变量说明

| 变量 | 说明 | 开发环境示例 | 生产环境示例 |
|------|------|--------------|--------------|
| `VITE_API_BASE_URL` | 后端 API 基础地址（代理目标） | `http://localhost:8080` | `https://api.ai-multimodal.com` |
| `VITE_APP_TITLE` | 应用标题 | Gino AI 多模态 | Gino AI 多模态 |

- 开发环境：见 `.env.development`
- 生产环境：见 `.env.production`

开发时请求 `/api` 会被代理到 `VITE_API_BASE_URL`，无需在前端写死后端地址。

---

## 核心学习收获

### 技术能力

- 掌握多模态 AI 项目从需求分析到部署的全流程开发
- 深入理解 Vue 3.5 响应式原理、Node.js 事件循环、Express 中间件等
- 具备 AI 工具链集成与优化能力，提升开发效率

### 实战技能

- AI 模型接入与流式响应处理
- JWT 鉴权与 WebSocket 实时通信
- 前后端分离架构设计与实现
- 一键部署与生产环境优化

---

## 就业实用性

可直接上手或扩展的项目类型包括：

- 智能客服聊天系统
- AI 写作助手工具
- 文生图应用平台
- 多模态内容创作平台
- 企业内部 AI 工具开发

---

## 项目脚本一览

| 命令 | 说明 |
|------|------|
| `npm run dev` | 启动开发服务器（端口 3000） |
| `npm run build` | 生产环境构建 |
| `npm run preview` | 本地预览构建结果 |

---

## 仓库地址

- **Gitee**：https://gitee.com/DZHgino/gino_ai_web.git

---

## 许可证

Private / 内部使用。