支持自定义key

Author: geekr-dev

app/Client/OpenAI.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Client;
+
+use Orhanerday\OpenAi\OpenAi as BaseOpenAi;
+
+class OpenAI extends BaseOpenAi
+{
+    public function __construct($apiKey)
+    {
+        parent::__construct($apiKey);
+    }
+
+    public function withToken($token = '')
+    {
+        if ($token) {
+            $this->setHeader([1 => 'Authorization: Bearer ' . $token]);
+            return $this;
+        } else {
+            return $this;
+        }
+    }
+}

app/Facades/OpenAI.php

@@ -7,6 +7,7 @@
 use Illuminate\Support\Facades\Facade;
 
 /**
+ * @method static \App\Client\OpenAI withToken($token = '')
  * @method static string chat()
  * @method static string completion()
  * @method static string embeddings()

app/Http/Controllers/ChatController.php

@@ -8,6 +8,7 @@
 use Illuminate\Support\Str;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Support\Facades\Artisan;
+use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Storage;
 use Illuminate\Validation\Rules\File;
@@ -34,7 +35,8 @@ public function messages(): JsonResponse
     public function chat(Request $request): JsonResponse
     {
         $request->validate([
-            'prompt' => 'required|string'
+            'prompt' => 'required|string',
+            'api_key' => 'sometimes|string',
         ]);
         $messages = $request->session()->get('messages', [$this->preset]);
         $userMessage = ['role' => 'user', 'content' => $request->input('prompt')];
@@ -51,7 +53,8 @@ public function chat(Request $request): JsonResponse
     public function translate(Request $request): JsonResponse
     {
         $request->validate([
-            'prompt' => 'required|string'
+            'prompt' => 'required|string',
+            'api_key' => 'sometimes|string',
         ]);
         $messages = $request->session()->get('messages', [$this->preset]);
         // 判断内容是中文还是英文
@@ -85,25 +88,29 @@ public function stream(Request $request)
 
         // 实时将流式响应数据发送到客户端
         $respData = '';
+        $apiKey = $request->input('api_key');
+        if ($apiKey) {
+            $apiKey = base64_decode($apiKey);
+        }
         header('Access-Control-Allow-Origin: *');
         header('Content-type: text/event-stream');
         header('Cache-Control: no-cache');
         header('X-Accel-Buffering: no');
-        OpenAI::chat($params, function ($ch, $data) use (&$respData) {
+        OpenAI::withToken($apiKey)->chat($params, function ($ch, $data) use ($apiKey, &$respData) {
             $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
             if ($httpCode >= 400) {
                 echo "data: [ERROR] $httpCode";
-                if ($httpCode == 429) {
+                if (($httpCode == 400 || $httpCode == 401) && empty($apiKey)) {
                     // app key 耗尽自动切换到下一个免费的 key
                     Artisan::call('app:update-open-ai-key');
                 }
             } else {
                 $respData .= $data;
                 echo $data;;
-                ob_flush();
-                flush();
-                return strlen($data);
             }
+            ob_flush();
+            flush();
+            return strlen($data);
         });
 
         // 将响应数据存储到当前会话中以便刷新页面后可以看到聊天记录
@@ -137,7 +144,8 @@ public function audio(Request $request): JsonResponse
                 File::types(['mp3', 'mp4', 'mpeg', 'mpga', 'm4a', 'wav', 'webm'])
                     ->min(1)  // 最小不低于 1 KB
                     ->max(10 * 1024), // 最大不超过 10 MB
-            ]
+            ],
+            'api_key' => 'sometimes|string',
         ]);
 
         // 保存到本地
@@ -148,24 +156,25 @@ public function audio(Request $request): JsonResponse
         $messages = $request->session()->get('messages', [
             ['role' => 'system', 'content' => 'You are GeekChat - A ChatGPT clone. Answer as concisely as possible. Make Mandarin Chinese the primary language']
         ]);
-
         // $path = 'audios/2023/03/09/test.wav';（测试用）
         // 调用 speech to text API 将语音转化为文字
         try {
-            $response = OpenAI::transcribe([
+            $response = OpenAI::withToken($request->input('api_key'))->transcribe([
                 'model' => 'whisper-1',
                 'file' => curl_file_create(Storage::disk('local')->path($path)),
                 'response_format' => 'verbose_json',
             ]);
         } catch (Exception $exception) {
-            return $this->toJsonResponse($request, SYSTEM_ERROR, $messages);
+            return response()->json(['message' => ['role' => 'assistant', 'content' => SYSTEM_ERROR]]);
         } finally {
             Storage::disk('local')->delete($path);  // 处理完毕删除音频文件
         }
-
         $result = json_decode($response);
         if (empty($result->text)) {
-            return $this->toJsonResponse($request, '对不起，我没有听清你说的话，请再试一次', $messages);
+            if ($request->input('api_key')) {
+                return response()->json(['message' => ['role' => 'assistant', 'content' => '识别语音失败，请确保你的KEY有效']]);
+            }
+            return response()->json(['message' => ['role' => 'assistant', 'content' => '对不起，我没有听清你说的话，请再试一次']]);
         }
 
         // 接下来的流程和 ChatGPT 一样
@@ -180,20 +189,26 @@ public function audio(Request $request): JsonResponse
     public function image(Request $request): JsonResponse
     {
         $request->validate([
-            'prompt' => 'required|string'
+            'prompt' => 'required|string',
+            'api_key' => 'sometimes|string',
         ]);
         $messages = $request->session()->get('messages', [$this->preset]);
         $prompt = $request->input('prompt');
         $userMsg = ['role' => 'user', 'content' => $prompt];
         $messages[] = $userMsg;
-        $response = OpenAI::image([
+        $apiKey = $request->input('api_key');
+        $size = '256x256';
+        if (!empty($apiKey)) {
+            $size = '1024x1024';
+        }
+        $response = OpenAI::withToken($apiKey)->image([
             "prompt" => $prompt,
             "n" => 1,
-            "size" => "256x256",
+            "size" => $size,
             "response_format" => "url",
         ]);
         $result = json_decode($response);
-        $image = '';
+        $image = '画图失败，如果你设置了自己的key，请确保它是有效的';
         if (isset($result->data[0]->url)) {
             $image = '![](' . $result->data[0]->url . ')';
         }
@@ -212,4 +227,21 @@ public function reset(Request $request): JsonResponse
 
         return response()->json(['status' => 'ok']);
     }
+
+    public function valid(Request $request): JsonResponse
+    {
+        $request->validate([
+            'api_key' => 'required|string'
+        ]);
+        $apiKey = $request->input('api_key');
+        if (empty($apiKey)) {
+            return response()->json(['valid' => false, 'error' => '无效的 API KEY']);
+        }
+        $response = Http::withToken($apiKey)->timeout(15)
+            ->get(config('openai.base_uri') . '/dashboard/billing/credit_grants');
+        if ($response->failed()) {
+            return response()->json(['valid' => false, 'error' => '无效的 API KEY']);
+        }
+        return response()->json(['valid' => true]);
+    }
 }

app/Providers/AiServiceProvider.php

@@ -4,9 +4,9 @@
 
 namespace App\Providers;
 
+use App\Client\OpenAI;
 use Illuminate\Support\ServiceProvider;
 use App\Exceptions\OpenAI\ApiKeyIsMissing;
-use Orhanerday\OpenAi\OpenAi;
 
 /**
  * @internal
@@ -18,7 +18,7 @@ class AiServiceProvider extends ServiceProvider
      */
     public function register(): void
     {
-        $this->app->singleton(OpenAi::class, static function (): OpenAi {
+        $this->app->singleton(OpenAI::class, static function (): OpenAI {
             $apiKey = config('openai.api_key');
             $baseUri = config('openai.base_uri');
             $httpProxy = config('openai.http_proxy');
@@ -28,7 +28,7 @@ public function register(): void
                 throw ApiKeyIsMissing::create();
             }
 
-            $openAi = new OpenAi($apiKey);
+            $openAi = new OpenAI($apiKey);
             $openAi->setTimeout(60); // 超时时间默认是60s
             if ($organization !== null) {
                 $openAi->setORG($organization);

app/Providers/RouteServiceProvider.php

@@ -45,13 +45,19 @@ protected function configureRateLimiting(): void
             return Limit::perMinute(60)->by($request->user()?->id ?: $request->ip());
         });
         RateLimiter::for('chat', function (Request $request) {
-            return Limit::perMinute(60)->by($request->user()?->id ?: $request->ip());
+            return $request->input('api_key') || $this->app->environment('development')
+                ? Limit::none()
+                : Limit::perMinute(30)->by($request->user()?->id ?: $request->ip());
         });
         RateLimiter::for('audio', function (Request $request) {
-            return Limit::perMinute(30)->by($request->user()?->id ?: $request->ip());
+            return $request->input('api_key') || $this->app->environment('development')
+                ? Limit::none()
+                : Limit::perMinute(15)->by($request->user()?->id ?: $request->ip());
         });
         RateLimiter::for('image', function (Request $request) {
-            return Limit::perMinute(20)->by($request->user()?->id ?: $request->ip());
+            return $request->input('api_key') || $this->app->environment('development')
+                ? Limit::none()
+                : Limit::perHour(5)->by($request->user()?->id ?: $request->ip());
         });
     }
 }

resources/js/Components/AudioWidget.vue

@@ -37,9 +37,9 @@ export default {
     computed: {
         buttonClass() {
             if (this.isTyping) {
-                return "flex items-center justify-center px-4 py-2 border border-green-600 bg-green-500 hover:bg-green-600 text-white rounded-md text-sm md:text-base cursor-pointer opacity-25";
+                return "flex items-center justify-center px-4 py-2 border border-blue-600 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-sm md:text-base cursor-pointer opacity-25";
             } else {
-                return "flex items-center justify-center px-4 py-2 border border-green-600 bg-green-500 hover:bg-green-600 text-white rounded-md text-sm md:text-base cursor-pointer";
+                return "flex items-center justify-center px-4 py-2 border border-blue-600 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-sm md:text-base cursor-pointer";
             }
         }
     },

resources/js/Pages/Chat.vue

@@ -12,9 +12,10 @@ onMounted(() => {
 
 const messages = computed(() => store.state.messages.filter(message => message != undefined))
 const isTyping = computed(() => store.state.isTyping)
+const apiKey = computed(() => store.state.apiKey ? '*'.repeat(4) + store.state.apiKey.substr(length - 4, 4) : '')
 
 const form = useForm({
-    prompt: null,
+    prompt: null
 })
 
 const chat = () => {
@@ -68,6 +69,11 @@ const translate = () => {
     form.reset()
 }
 
+const enterApiKey = () => {
+    const api_key = prompt("输入你的 OpenAI API Key（使用自己的 Key 可以专享独立的调用通道，不受共享通道频率影响，并且可以绘制更精准的大尺寸图片）：");
+    store.dispatch('validAndSetApiKey', api_key)
+}
+
 </script>
 
 <template>
@@ -81,13 +87,35 @@ const translate = () => {
                                 src="https://image.gstatics.cn/icon/geekchat.png" alt="GeekChat"
                                 class="rounded-lg w-12 h-12">
                             <div class="font-semibold text-4xl sm:text-5xl">Geek<span class="text-blue-500">Chat</span>
-                            </div><span
-                                class="bg-gradient-to-r from-purple-400 to-pink-500 px-3 py-1 text-xs font-semibold text-white text-center rounded-full inline-block ">Beta</span>
+                            </div>
                         </div>
                         <div class="text-center my-4 font-light text-base sm:text-xl my-2 sm:my-5">支持文字、语音、翻译、画图的聊天机器人
                         </div>
                     </div>
                 </div>
+                <div class="mt-5">
+                    <div class="text-sm text-center">
+                        <div>
+                            <button v-if="apiKey" @click="enterApiKey"
+                                class="text-blue-500 hover:underline font-semibold inline-flex space-x-2 disabled:text-gray-500"><svg
+                                    stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512"
+                                    class="w-5 h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M218.1 167.17c0 13 0 25.6 4.1 37.4-43.1 50.6-156.9 184.3-167.5 194.5a20.17 20.17 0 00-6.7 15c0 8.5 5.2 16.7 9.6 21.3 6.6 6.9 34.8 33 40 28 15.4-15 18.5-19 24.8-25.2 9.5-9.3-1-28.3 2.3-36s6.8-9.2 12.5-10.4 15.8 2.9 23.7 3c8.3.1 12.8-3.4 19-9.2 5-4.6 8.6-8.9 8.7-15.6.2-9-12.8-20.9-3.1-30.4s23.7 6.2 34 5 22.8-15.5 24.1-21.6-11.7-21.8-9.7-30.7c.7-3 6.8-10 11.4-11s25 6.9 29.6 5.9c5.6-1.2 12.1-7.1 17.4-10.4 15.5 6.7 29.6 9.4 47.7 9.4 68.5 0 124-53.4 124-119.2S408.5 48 340 48s-121.9 53.37-121.9 119.17zM400 144a32 32 0 11-32-32 32 32 0 0132 32z">
+                                    </path>
+                                </svg><span>修改 API Key ({{ apiKey }})</span></button>
+                            <button v-else @click="enterApiKey"
+                                class="inline-flex items-center justify-center rounded-full px-4 py-3 text-sm shadow-md bg-blue-300 text-white hover:bg-blue-500 transition-all active:bg-blue-600 group font-semibold text-sm disabled:bg-gray-400 space-x-2">
+                                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512"
+                                    class="w-5 h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M218.1 167.17c0 13 0 25.6 4.1 37.4-43.1 50.6-156.9 184.3-167.5 194.5a20.17 20.17 0 00-6.7 15c0 8.5 5.2 16.7 9.6 21.3 6.6 6.9 34.8 33 40 28 15.4-15 18.5-19 24.8-25.2 9.5-9.3-1-28.3 2.3-36s6.8-9.2 12.5-10.4 15.8 2.9 23.7 3c8.3.1 12.8-3.4 19-9.2 5-4.6 8.6-8.9 8.7-15.6.2-9-12.8-20.9-3.1-30.4s23.7 6.2 34 5 22.8-15.5 24.1-21.6-11.7-21.8-9.7-30.7c.7-3 6.8-10 11.4-11s25 6.9 29.6 5.9c5.6-1.2 12.1-7.1 17.4-10.4 15.5 6.7 29.6 9.4 47.7 9.4 68.5 0 124-53.4 124-119.2S408.5 48 340 48s-121.9 53.37-121.9 119.17zM400 144a32 32 0 11-32-32 32 32 0 0132 32z">
+                                    </path>
+                                </svg><span>输入 API Key（可选）</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
                 <div class="px-4 rounded-lg mb-4" v-for="(message, index) in messages" :key="index">
                     <div v-if="message && message.role == 'user'"
                         class="pl-12 relative response-block scroll-mt-32 min-h-[40px]">
@@ -138,7 +166,7 @@ const translate = () => {
                                 class="block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6 resize-y"></textarea>
                             <div class="flex space-x-2">
                                 <button
-                                    :class="{ 'flex items-center justify-center px-4 py-2 border border-green-600 bg-green-500 hover:bg-green-600 text-white rounded-md text-sm md:text-base': true, 'opacity-25': isTyping }"
+                                    :class="{ 'flex items-center justify-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-sm md:text-base': true, 'opacity-25': isTyping }"
                                     title="发送消息" type="submit" :disabled="isTyping">
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                         stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
@@ -148,7 +176,7 @@ const translate = () => {
                                 </button>
                                 <audio-widget @audio-upload="audio" @audio-failed="audioFailed" :is-typing="isTyping" />
                                 <button
-                                    :class="{ 'flex items-center justify-center px-4 py-2 border border-green-600 bg-green-500 hover:bg-green-600 text-white rounded-md text-sm md:text-base': true, 'opacity-25': isTyping }"
+                                    :class="{ 'flex items-center justify-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-sm md:text-base': true, 'opacity-25': isTyping }"
                                     @click="translate" title="中英互译" type="button" :disabled="isTyping">
                                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                         width="24" height="24" viewBox="0 0 24 24">
@@ -161,7 +189,7 @@ const translate = () => {
                                     </svg>
                                 </button>
                                 <button
-                                    :class="{ 'flex items-center justify-center px-4 py-2 border border-green-600 bg-green-500 hover:bg-green-600 text-white rounded-md text-sm md:text-base': true, 'opacity-25': isTyping }"
+                                    :class="{ 'flex items-center justify-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-sm md:text-base': true, 'opacity-25': isTyping }"
                                     @click="image" title="AI绘图" type="button" :disabled="isTyping">
                                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                         width="24" height="24" viewBox="0 0 24 24">
@@ -171,7 +199,7 @@ const translate = () => {
                                     </svg>
                                 </button>
                                 <button
-                                    :class="{ 'flex items-center justify-center px-4 py-2 border border-gray-500 bg-gray-400 hover:bg-gray-500 text-white rounded-md text-sm md:text-base': true, 'opacity-25': isTyping }"
+                                    :class="{ 'flex items-center justify-center px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md text-sm md:text-base': true, 'opacity-25': isTyping }"
                                     @click="reset" title="清空消息" type="button" :disabled="isTyping">
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                         stroke-width="1.5" stroke="currentColor" class="w-6 h-6">