Introduction to php-openai-gpt-stream-chat-api-webui
The php-openai-gpt-stream-chat-api-webui project, created by @qiayue, is an open-source solution that offers a pure PHP implementation for streaming GPT requests alongside a real-time printing web user interface. The repository can be found on GitHub.
Recent Updates
As of April 13th, the speed of responses has slowed due to OpenAI's rate limiting of free accounts. For accounts with a credit card bound on platform.openai.com, responses match the previous normal speed - where the first token in a streaming request takes around 2 seconds to return, compared to 20 seconds for non-billed accounts.
Project Structure
The project follows a structured directory setup:
/
├─ /class
│ ├─ Class.ChatGPT.php
│ ├─ Class.DFA.php
│ ├─ Class.StreamHandler.php
├─ /static
│ ├─ css
│ │ ├─ chat.css
│ │ ├─ monokai-sublime.css
│ ├─ js
│ │ ├─ chat.js
│ │ ├─ highlight.min.js
│ │ ├─ marked.min.js
├─ /chat.php
├─ /index.html
├─ /README.md
├─ /sensitive_words.txt
Here's an overview of the directories and files:
- Root Directory (/): The main directory of the program.
- /class/: Contains PHP class files.
- Class.ChatGPT.php: Handles front-end requests and submits them to the OpenAI API.
- Class.DFA.php: Checks and replaces sensitive words using the DFA algorithm.
- Class.StreamHandler.php: Manages the real-time processing of data returned from the OpenAI stream.
- /static/: Contains all the static files needed for the front-end pages.
- css/: Stores all CSS files for front-end styling.
- js/: Stores all JavaScript files for front-end interactivity, including code highlighting and markdown parsing libraries.
- /chat.php: Entry point for handling chat requests from the front-end.
- /index.html: The HTML code for the front-end page.
- /README.md: Documentation for the repository.
- /sensitive_words.txt: A file containing sensitive words, where each line is a separate word to be monitored.
How to Use
This project uses no frameworks or third-party back-end libraries. The front end includes downloaded libraries for code highlighting (highlight.js) and markdown parsing (marked.js), so there's no need for installation.
To use the project, simply insert your API key:
- Obtain the source code.
- Modify
chat.phpand enter your OpenAI API key as follows:$chat = new ChatGPT([ 'api_key' => 'Enter your OpenAI API key here', ]);
For sensitive words detection, populate sensitive_words.txt with a list of words, one per line.
How It Works
Streaming OpenAI Responses
In the Class.ChatGPT.php file, requests are made to OpenAI using curl, with options set for streaming responses. Responses are handled by StreamHandler class methods to ensure efficient processing.
The code snippet for handling stream responses involves a buffer to manage incomplete data segments, processing each data packet as it arrives to extract the necessary content.
Sensitive Words Detection
Using the deterministic finite automaton (DFA) algorithm, Class.DFA.php performs text analysis to detect and replace sensitive words. The DFA class is initialized with a path to the sensitive words file, allowing for input text monitoring and replacement.
Front-End Streaming with EventSource
The front-end utilizes JavaScript's EventSource to establish a connection for receiving streamed responses. This connection ensures efficient data retrieval and display in real-time, with handlers for potential errors and a close event for ending streams.
Typing Effect
For a more engaging user experience, response content is displayed using a typing effect. This effect is achieved by caching responses in an array and gradually displaying them using a timer – doing so adds a dynamic feel, similar to a typewriter's output.
In conclusion, the php-openai-gpt-stream-chat-api-webui project provides a robust framework for handling GPT-3 powered chat applications, leveraging PHP for server-side processing and a streamlined front end for dynamic user interactions.