Skip to content

GeekChat - ChatGPT With Support For Text、Voice、Image And Translate

geekr-dev/geekchat

Repository files navigation

GeekChat - Free ChatGPT With Support For Text, Voice And Stream

中文文档

Introduction

This is a clone of ChatGPT with support for text, voice, translate, image, stream and beautiful UI, made with Laravel 10 using the ChatGPT and Audio (Whisper model) API, as well as Inertia + Vue3 + Tailwind CSS:

support text && voice

fa89bd30dfc71ef7312ca9dc8d079f3

support stream

db5b094fbc9e739302693c8728dd236

support image

953ccb2083f34156fa2d4f18417ffc1

and support translate

2a2bf9f1a8b2b7ec2b1b925eb5e9e75

final, support custom openai api key:

d0f87acf563e0a1c7798c0088d1b961

Quick Start

1、PHP HTTP Server

php artisan serve npm run dev

2、Docker

git clone https://github.com/geekr-dev/geekchat.git cd geekchat cp .env.example .env # config OPENAI_API_KEY docker-compose up -d docker exec -it geekchat_laravel.test_1 bash composer install npm install npm run build exit docker-compose build --no-cache docker-compose up -d

After that, you can view GeekChat by http://localhost in your local browser.

detail tutorial:https://geekr.dev/posts/chatgpt-website-by-laravel-10

Stream Support

I implement stream with EventSource and curl, you can use it to receive stream response from OpenAI API.

Frontend:

ChatAPI.chatMessage(message).then(response => { ... return response.json(); }).then(data => { ... const eventSource = new EventSource(`/stream?chat_id=${data.chat_id}`); eventSource.onmessage = function (e) { ... if (e.data == "[DONE]") { eventSource.close(); } else { let word = JSON.parse(e.data).choices[0].delta.content if (word !== undefined) { state.messages[state.messages.length - 1].content += JSON.parse(e.data).choices[0].delta.content } } }; eventSource.onerror = function (e) { eventSource.close(); ... }; }).catch(error => { ... });

Backend:

use App\Facades\OpenAI; use Symfony\Component\HttpFoundation\StreamedResponse; ... $params = [ 'model' => 'gpt-3.5-turbo', 'messages' => $messages, 'stream' => true, ]; $response = new StreamedResponse(function () use ($request, $params) { $respData = ''; OpenAI::chat($params, function ($ch, $data) use (&$respData) { $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE); if ($httpCode >= 400) { echo "data: [ERROR] $httpCode"; } else { echo $data; } ob_flush(); flush(); return strlen($data); }); ... }); $response->headers->set('Content-Type', 'text/event-stream'); $response->headers->set('Cache-Control', 'no-cache'); $response->headers->set('X-Accel-Buffering', 'no'); return $response;

Warning: Due to the use of functions such as header, ob_flush, and flush, this does not support PHP HTTP servers driven by persistent memory mechanisms like Swoole or RoadRunner. It's important to keep this in mind when deploying to a production environment.