# php请求OpenAI Ollama 示例

**Repository Path**: web/ai-php-demo

## Basic Information

- **Project Name**: php请求OpenAI Ollama 示例
- **Description**: php请求OpenAI Ollama 示例 处理前端发送的请求，调用 OpenAPI 和Ollama 接口并返回流式响应
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-04
- **Last Updated**: 2026-02-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI Chat 演示程序

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

## 开源仓库

- **Gitee 仓库地址**：[https://gitee.com/web/ai-php-demo](https://gitee.com/web/ai-php-demo)

- **演示地址**：[https://tool.bitefu.net/ai/](https://tool.bitefu.net/ai/)

## 功能特点

- **支持多种 API**：同时支持 OpenAI 和 Ollama API
- **流式响应**：实现了实时消息返回，提供打字机效果
- **Markdown 支持**：解析和显示常见的 Markdown 语法，包括表格、代码块、列表等
- **连续会话**：支持上下文对话，AI 可以根据历史消息生成响应
- **参数配置**：可自定义 API Key、模型、温度等参数
- **模型管理**：支持获取 OpenAI 和 Ollama 的可用模型列表
- **测试连接**：可测试当前配置是否可用，提供详细的错误信息
- **自定义模型**：支持使用自定义模型名称
- **头像显示**：为用户和机器人消息显示不同的头像
- **<think> 标签支持**：支持处理 <think> 标签，显示为可折叠的思路过程
- **数学公式支持**：支持简单的数学公式显示

## 系统要求

- PHP 5.6+
- 浏览器（支持现代 JavaScript，如 Chrome、Firefox、Edge 等）

## 安装和使用

### 1. 克隆项目

```bash
git clone https://gitee.com/web/ai-php-demo.git
cd ai-php-demo
```

### 2. 启动本地服务器

使用 PHP 内置服务器：

```bash
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 | string | 是 | 用户消息内容 |
| settings | object | 是 | API 设置 |
| settings.apiType | string | 否 | API 类型，可选值：openai, ollama，默认：openai |
| settings.apiKey | string | 否 | OpenAI API Key，使用 OpenAI 时必选 |
| settings.apiUrl | string | 否 | API URL，默认：OpenAI 使用 https://api.openai.com/v1/chat/completions，Ollama 使用 http://localhost:11434/api/chat |
| settings.model | string | 是 | 模型名称 |
| settings.temperature | number | 否 | 温度参数，默认：0.7 |
| settings.maxTokens | number | 否 | 最大 tokens，默认：1000 |
| settings.systemPrompt | string | 否 | 系统提示，默认：你是一个 AI 的助手。 |
| chatHistory | array | 否 | 对话历史，格式：[{role: "user", content: "消息内容"}, {role: "assistant", content: "消息内容"}] |
| stream | boolean | 否 | 是否使用流式响应，默认：true |

**请求示例**：

```json
{
  "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 | string | 是 | 固定值：get_models |
| apiType | string | 是 | API 类型，可选值：openai, ollama |
| apiKey | string | 否 | OpenAI API Key，使用 OpenAI 时必选 |
| apiUrl | string | 否 | API URL，默认：OpenAI 使用 https://api.openai.com/v1/models，Ollama 使用 http://localhost:11434/api/tags |

**请求示例**：

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

**响应示例**：

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

**错误响应示例**：

```json
{
  "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. **<think> 标签支持**：
   - 前端实现了 <think> 标签的解析和处理
   - 显示为可折叠的思路过程区块

5. **错误处理**：
   - 前端和后端都实现了详细的错误处理
   - 测试连接功能提供详细的错误信息

## 常见问题

### 1. 连接失败

- **OpenAI**：检查 API Key 是否正确，网络是否能访问 OpenAI API
- **Ollama**：检查 Ollama 服务是否运行，URL 是否正确

### 2. 模型列表获取失败

- **OpenAI**：确保 API Key 有足够的权限
- **Ollama**：确保 Ollama 服务正在运行

### 3. 流式响应不工作

- 检查浏览器是否支持 ReadableStream API
- 确保服务器配置支持长连接

### 4. Markdown 表格解析问题

- 确保表格格式正确，使用 | 分隔单元格
- 表头和分隔线之间不要有空白行

### 5. 对话历史过长

- 系统会自动限制对话历史的长度，只保留最近的 10 条消息
- 可以点击 "清空历史" 按钮手动清空对话历史

## 许可证

MIT

## 贡献

欢迎提交 Issue 和 Pull Request！

## 联系方式

如有问题，请通过 Gitee Issues 联系。