AI Chat 演示程序

这是一个基于 PHP 和 HTML 开发的 AI 聊天演示程序，支持 OpenAI 和 Ollama API，实现了流式响应、Markdown 格式支持、连续会话和 标签处理等功能。

开源仓库

• Gitee 仓库地址：https://gitee.com/web/ai-php-demo

• 演示地址：https://tool.bitefu.net/ai/

功能特点

• 支持多种 API：同时支持 OpenAI 和 Ollama API

• 流式响应：实现了实时消息返回，提供打字机效果

• Markdown 支持：解析和显示常见的 Markdown 语法，包括表格、代码块、列表等

• 连续会话：支持上下文对话，AI 可以根据历史消息生成响应

• 参数配置：可自定义 API Key、模型、温度等参数

• 模型管理：支持获取 OpenAI 和 Ollama 的可用模型列表

• 测试连接：可测试当前配置是否可用，提供详细的错误信息

• 自定义模型：支持使用自定义模型名称

• 头像显示：为用户和机器人消息显示不同的头像

• 标签支持：支持处理 标签，显示为可折叠的思路过程

• 数学公式支持：支持简单的数学公式显示

系统要求

• PHP 5.6+

• 浏览器（支持现代 JavaScript，如 Chrome、Firefox、Edge 等）

安装和使用

1. 克隆项目

git clone https://gitee.com/web/ai-php-demo.gitcd ai-php-demo

2. 启动本地服务器

使用 PHP 内置服务器：

php -S localhost:8000

或使用其他 Web 服务器，将项目目录设置为网站根目录。

3. 访问演示页面

在浏览器中打开：

http://localhost:8000

4. 配置 API 参数

1. 点击 "设置" 标签页

2. 选择 API 类型（OpenAI 或 Ollama）

3. 填写相应的参数：

• OpenAI：需要填写 API Key

• Ollama：无需 API Key，使用默认 URL 即可

4. 点击 "保存设置" 按钮

5. 获取模型列表

点击 "获取模型列表" 按钮，系统会自动获取并填充可用的模型。

6. 测试连接

点击 "测试连接" 按钮，系统会测试当前配置是否可用，并提供详细的错误信息。

7. 开始聊天

返回 "聊天" 标签页，在输入框中输入消息，点击 "发送" 按钮即可开始聊天。

API 接口文档

1. 聊天接口

请求方式：POST

请求 URL：/api.php

请求参数：

请求示例：

{
  "message": "你好",
  "settings": {
    "apiType": "openai",
    "apiKey": "your-api-key",
    "model": "gpt-3.5-turbo",
    "temperature": 0.7,
    "systemPrompt": "你是一个 AI 的助手。"
  },
  "chatHistory": [],
  "stream": true
}

响应：

• 流式响应：逐块返回 AI 生成的内容

• 非流式响应：一次性返回完整的 AI 生成内容

错误响应：

当请求失败时，会返回错误信息，例如：

错误：API Key 不能为空

错误：HTTP 状态码 401

2. 获取模型列表接口

请求方式：POST

请求 URL：/api.php

请求参数：

请求示例：

{  "action": "get_models",  "apiType": "openai",  "apiKey": "your-api-key"}

响应示例：

{
  "success": true,
  "models": [
    {
      "name": "gpt-3.5-turbo",
      "model": "gpt-3.5-turbo"
    },
    {
      "name": "gpt-4",
      "model": "gpt-4"
    }
  ]
}

错误响应示例：

{  "success": false,  "error": "API Key 不能为空"}

项目结构

ai-php-demo/
├── index.html    # 前端页面
├── api.php       # 后端处理脚本
└── README.md     # 说明文档

技术实现

前端

• HTML5：页面结构

• CSS3：样式设计，包括响应式布局和美观的聊天界面

• JavaScript：交互逻辑，包括消息发送、流式响应处理、Markdown 解析等

• Fetch API：发送 HTTP 请求到后端

• localStorage：存储设置和对话历史

• ReadableStream API：处理流式响应

后端

• PHP 5.6+：处理 API 请求

• cURL：发送 HTTP 请求到 OpenAI 或 Ollama API

• 流式响应：实现实时消息返回

• 类结构：使用 OpenAIChat 类封装所有功能，便于直接调用

核心功能实现

1. 流式响应：

• 前端使用 ReadableStream API 处理流式数据

• 后端使用 cURL 的 CURLOPT_WRITEFUNCTION 回调函数处理流式响应

2. Markdown 解析：

• 前端实现了完整的 Markdown 解析功能

• 支持表格、代码块、列表、引用等常见 Markdown 语法

3. 连续会话：

• 前端维护对话历史数组

• 每次发送消息时包含历史消息

• 后端处理历史消息，确保 AI 能够理解上下文

4. 标签支持：

• 前端实现了 标签的解析和处理

• 显示为可折叠的思路过程区块

5. 错误处理：

• 前端和后端都实现了详细的错误处理

• 测试连接功能提供详细的错误信息

常见问题

1. 连接失败

• OpenAI：检查 API Key 是否正确，网络是否能访问 OpenAI API

• Ollama：检查 Ollama 服务是否运行，URL 是否正确

2. 模型列表获取失败

• OpenAI：确保 API Key 有足够的权限

• Ollama：确保 Ollama 服务正在运行

3. 流式响应不工作

• 检查浏览器是否支持 ReadableStream API

• 确保服务器配置支持长连接

4. Markdown 表格解析问题

• 确保表格格式正确，使用 | 分隔单元格

• 表头和分隔线之间不要有空白行

5. 对话历史过长

• 系统会自动限制对话历史的长度，只保留最近的 10 条消息

• 可以点击 "清空历史" 按钮手动清空对话历史