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 Image

中文文档

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:

Online Demo

support text && voice

image

support stream

image

support image

image

final, support custom openai api key:

image

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.