# iFlowChat

**Repository Path**: jsxf/iflow-chat

## Basic Information

- **Project Name**: iFlowChat
- **Description**: iFlow Chat 是一款基于 OpenAI 兼容 API 的现代化 AI 聊天与 API 测试工具，提供简洁、高效的对话体验。支持多种大语言模型，包括 Qwen 系列、Kimi 系列等，适用于开发者、研究人员和普通用户。
这是基于iFlow API编写的AI聊天网页，非官方版本哈，不要混淆！！！
- **Primary Language**: HTML/CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-02-06
- **Last Updated**: 2026-02-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# iFlow Chat - AI API 测试工具

## 📖 项目简介

iFlow Chat 是一款基于 OpenAI 兼容 API 的现代化 AI 聊天与 API 测试工具，提供简洁、高效的对话体验。支持多种大语言模型，包括 Qwen 系列、Kimi 系列等，适用于开发者、研究人员和普通用户。

### 核心特性

- 🚀 **OpenAI API 兼容**：完全兼容 OpenAI API 格式，支持多种模型
- 💬 **流式响应**：实时显示 AI 生成内容，提升交互体验
- ⚙️ **灵活配置**：支持温度、最大 Token 数、Top P 等参数自定义
- 🎨 **现代化 UI**：深色主题设计，简洁专业的用户界面
- 💾 **对话历史**：自动保存对话记录，方便回顾和管理
- 📱 **响应式设计**：适配不同屏幕尺寸

---

## 🎯 功能特性

### 界面预览

**主界面（配置后）：**

![iFlow AI Chat 主界面](image_2_1.png)

**对话示例：**

![iFlow AI Chat 对话示例](image(1).png)

**系统配置面板：**

![iFlow AI Chat 系统配置](image_2.png)

### 1. 模型支持

- **Qwen 系列**：Qwen3-Coder-Plus、Qwen3-Max、Qwen3-Max-Preview、Qwen3-VL-Plus 等
- **Kimi 系列**：Kimi-K2-Instruct-0905 等
- **自定义模型**：支持手动添加任意兼容的模型名称

### 2. 智能配置

- **Temperature（温度）**：控制输出的随机性（0.0 - 2.0），默认值 1.0
- **Max Tokens（最大 Token 数）**：限制生成内容的长度（1 - 128000），默认值 2000
- **Top P**：控制采样策略（0.0 - 1.0），默认值 1.0
- **System Prompt**：自定义系统提示词，设定 AI 角色和行为
- **流式输出**：支持实时流式响应（默认关闭）

### 3. 对话管理

- **新对话**：快速创建新的对话会话
- **历史记录**：查看和管理历史对话
- **清空历史**：一键清除所有对话记录
- **响应保存**：自动保存原始响应数据

> **注意**：当前版本 index.html 未实现连接状态显示功能，需要配置 API Key 后直接开始对话使用

### 4. API 配置

- **API Key 配置**：支持自定义 API Key
- **API URL 自定义**：灵活配置 API 服务器地址，默认值：https://apis.iflow.cn/v1/chat/completions
- **系统提示词**：自定义 AI 角色设定和行为描述
- **模型管理**：支持添加和删除自定义模型

---

## 🚀 快速开始

### 环境要求

- **浏览器**：Chrome 90+、Firefox 88+、Safari 14+、Edge 90+
- **网络**：需要访问 OpenAI 兼容 API 服务

### 使用方法

#### 1. 首次配置

1. 打开 `index.html` 文件
2. 点击右上角的 **设置（齿轮图标）**
3. 输入您的 API Key
4. 配置 API URL（可选，默认使用 iFlow 官方地址：https://apis.iflow.cn/v1/chat/completions）
5. 设置系统提示词（可选）
6. 点击 **保存**

#### 2. 开始对话

1. 在对话框中输入您的问题
2. 点击 **发送按钮** 或按 **Enter 键**
3. 等待 AI 响应（支持实时流式显示）

#### 3. 高级功能

- **参数调整**：在设置面板中调整 Temperature、Max Tokens、Top P 等参数
- **模型切换**：在顶部模型选择器中切换不同模型
- **历史管理**：在左侧侧边栏查看和切换历史对话
- **新对话**：点击 **+ 新对话** 按钮创建新的会话

---

## 📁 项目结构

```
iflow-ai-chat/
├── index.html              # 主应用文件
├── README.md               # 项目文档
└── assets/                 # 资源文件
    └── (图标、样式等)
```

### 核心文件说明

- **index.html**：单文件应用，包含所有 HTML、CSS 和 JavaScript 代码
  - UI 界面：现代化深色主题界面
  - 交互逻辑：API 调用、流式响应、状态管理
  - 配置管理：本地存储配置信息

---

## ⚙️ 配置说明

### API Key 配置

```javascript
// 在设置面板中配置
API Key: your-api-key-here
```

### API URL 配置

```javascript
// 默认配置
API URL: https://apis.iflow.cn/v1/chat/completions

// 自定义配置示例
API URL: https://your-api-server.com/v1/chat/completions
```

### 系统提示词配置

```javascript
// 默认配置（未设置时）
System Prompt: You are a helpful assistant.

// 自定义配置示例
System Prompt: 你是一个专业的 AI 助手，擅长编程和技术解答...
```

### 参数说明

| 参数          | 范围       | 默认值                       | 说明                           |
| ------------- | ---------- | ---------------------------- | ------------------------------ |
| Temperature   | 0.0 - 2.0  | 1.0                          | 控制输出的随机性，越高越随机   |
| Max Tokens    | 1 - 128000 | 2000                         | 限制生成的最大 Token 数        |
| Top P         | 0.0 - 1.0  | 1.0                          | 核采样，控制文本多样性         |
| Stream        | true/false | false                        | 是否启用流式响应               |
| System Prompt | 文本       | You are a helpful assistant. | 系统提示词，设定 AI 角色和行为 |

---

## 🔧 技术实现

### 前端技术栈

- **HTML5**：语义化标签，现代化布局
- **CSS3**：Flexbox 布局，响应式设计，深色主题
- **Vanilla JavaScript**：原生 JS 实现所有交互逻辑

### 核心功能实现

#### 1. API 请求

```javascript
async function sendMessage() {
    const apiKey = state.settings.apiKey.trim();
    const apiUrl = state.settings.apiUrl.trim();
    const model = state.currentModelId;
    
    const requestBody = {
        model: model,
        messages: messages,
        temperature: parseFloat(state.settings.temperature),
        max_tokens: parseInt(state.settings.maxTokens),
        top_p: parseFloat(state.settings.topP),
        stream: state.settings.streamEnabled
    };
    
    const response = await fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify(requestBody)
    });
    
    return response;
}
```

#### 2. 流式响应处理

```javascript
async function handleStreamResponse(response) {
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    
    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        const chunk = decoder.decode(value);
        const lines = chunk.split('\n');
        
        for (const line of lines) {
            if (line.startsWith('data: ')) {
                const data = line.slice(6);
                if (data === '[DONE]') continue;
                
                const parsed = JSON.parse(data);
                const content = parsed.choices[0]?.delta?.content;
                if (content) {
                    // 实时更新 UI
                    updateMessageContent(content);
                }
            }
        }
    }
}
```

#### 3. 状态管理

```javascript
const state = {
    settings: {
        apiKey: '',
        apiUrl: 'https://apis.iflow.cn/v1/chat/completions',
        systemPrompt: '',
        currentModelId: 'qwen3-coder-plus',
        temperature: 1.0,
        maxTokens: 2000,
        topP: 1,
        streamEnabled: false
    },
    conversations: [],
    currentConversationId: null,
    currentModelId: 'qwen3-coder-plus',
    models: [...defaultModels],
    isGenerating: false
};

const defaultModels = [
    { id: 'qwen3-coder-plus', name: 'Qwen3-Coder-Plus' },
    { id: 'qwen3-max', name: 'Qwen3-Max' },
    { id: 'qwen3-max-preview', name: 'Qwen3-Max-Preview' },
    { id: 'qwen3-vl-plus', name: 'Qwen3-VL-Plus' },
    { id: 'kimi-k2-instruct-0905', name: 'Kimi-K2-Instruct-0905' }
];
```

---

## 🎨 界面设计

### 设计理念

- **简洁性**：去除冗余元素，专注于对话体验
- **专业性**：深色主题，适合长时间使用
- **响应性**：快速响应用户操作，流畅的交互体验

### 界面布局

```
┌─────────────────────────────────────────────────┐
│  Logo    对话历史列表              设置  新对话  │
│  iFlow                                    │
├─────────────────────────────────────────────────┤
│                                                 │
│              对话消息显示区域                      │
│                                                 │
│                                                 │
├─────────────────────────────────────────────────┤
│  模型: [Qwen3-Coder]             输入框 [发送]  │
└─────────────────────────────────────────────────┘
```

### 色彩方案

- **背景色**：深灰蓝色（#1a1e2e）
- **次要背景**：灰蓝色（#24283b）
- **主色调**：青绿色（#00d4aa）
- **文字色**：白色（#ffffff）、浅灰色（#a0aec0）
- **辅助色**：成功绿（#10b981）、错误红（#ef4444）、警告黄（#f59e0b）

---

## 🔒 安全说明

### 数据安全

- **本地存储**：所有配置和对话记录存储在浏览器本地
- **隐私保护**：不收集任何用户数据
- **API Key 安全**：API Key 仅存储在本地，不会上传到第三方服务器

### 使用建议

- 🔐 不要在公共场合展示您的 API Key
- 🔐 定期更换 API Key
- 🔐 使用 HTTPS 协议访问 API 服务

---

## 📝 使用示例

### 示例 1：代码生成

```
用户：用 Python 写一个快速排序算法

AI：
def quick_sort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quick_sort(left) + middle + quick_sort(right)
```

### 示例 2：问题解答

```
用户：解释一下什么是量子计算

AI：量子计算是一种利用量子力学原理进行计算的新型计算方式...
```

### 示例 3：创意写作

```
用户：写一段关于未来的科幻小说开篇

AI：2050年，人类终于实现了意识上传技术...
```

---

## 🤝 贡献与反馈

### 问题反馈

如果您在使用过程中遇到问题或有改进建议，欢迎反馈。

### 功能建议

- 支持多语言界面
- 导出对话记录
- 自定义主题
- 语音输入/输出
- 图片生成支持

---

## 📄 许可证

本项目仅供学习和个人使用，请遵守相关 API 服务提供商的使用条款。

---

## 🔗 相关资源

- [iFlow 官方文档](https://platform.iflow.cn/docs/)
- [OpenAI API 文档](https://platform.openai.com/docs)
- [Qwen 模型文档](https://qwen.readthedocs.io/)
- [MDN Web 文档](https://developer.mozilla.org/zh-CN/)

---

**iFlow AI Chat - 让 AI 对话更简单** 🚀