iFlow Chat - AI API 测试工具

📖 项目简介

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

核心特性

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

---

🎯 功能特性

界面预览

主界面（配置后）：

对话示例：

系统配置面板：

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 配置

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

API URL 配置

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

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

系统提示词配置

// 默认配置（未设置时）
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 请求

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. 流式响应处理

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. 状态管理

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 官方文档
• OpenAI API 文档
• Qwen 模型文档
• MDN Web 文档

---

📧 下载方式

仓库地址：https://gitee.com/jsxf/iflow-chat
复制或下载到本地用浏览器打开就可以用 0.0

如有问题或建议，请不要联系我！

---

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

免费国产顶级大模型API获取方式
1、打开链接：https://platform.iflow.cn/ 或者搜索“心流开放平台”
2、右上角登录后，点击API管理 复制API，理论上可以在openclaw里面免费用。

3、大模型支持列表，复制模型ID到网页模型列表就可以完成添加！