支持绘图功能

geekr-dev · geekr-dev · commit e961de6791f2 · 2023-03-20T20:06:28.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -5,7 +5,7 @@
 /public/build
 /storage/*.key
 /vendor
-/resources/views/analysis.blade.php
+/resources/views
 .env
 .env.backup
 .env.production
diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
@@ -152,6 +152,32 @@ public function audio(Request $request): JsonResponse
         return response()->json(['chat_id' => $chatId, 'message' => $userMessage]); // 将语音识别结果先返回给客户端
     }
 
+    public function image(Request $request): JsonResponse
+    {
+        $request->validate([
+            'prompt' => 'required|string'
+        ]);
+        $messages = $request->session()->get('messages', [$this->preset]);
+        $prompt = $request->input('prompt');
+        $userMsg = ['role' => 'user', 'content' => $prompt];
+        $messages[] = $userMsg;
+        $response = OpenAI::image([
+            "prompt" => $prompt,
+            "n" => 1,
+            "size" => "256x256",
+            "response_format" => "url",
+        ]);
+        $result = json_decode($response);
+        $image = '';
+        if (isset($result->data[0]->url)) {
+            $image = '![](' . $result->data[0]->url . ')';
+        }
+        $assistantMsg = ['role' => 'assistant', 'content' => $image];
+        $messages[] = $assistantMsg;
+        $request->session()->put('messages', $messages);
+        return response()->json($assistantMsg);
+    }
+
     /**
      * Reset the session.
      */
diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
@@ -50,5 +50,8 @@ protected function configureRateLimiting(): void
         RateLimiter::for('audio', function (Request $request) {
             return Limit::perMinute(30)->by($request->user()?->id ?: $request->ip());
         });
+        RateLimiter::for('image', function (Request $request) {
+            return Limit::perMinute(20)->by($request->user()?->id ?: $request->ip());
+        });
     }
 }
diff --git a/resources/js/Components/AudioWidget.vue b/resources/js/Components/AudioWidget.vue
@@ -35,7 +35,7 @@ export default {
     },
     computed: {
         buttonClass() {
-            return "flex items-center justify-center px-4 py-2 border border-green-600 hover:border-green-700 text-white rounded-md text-sm md:text-base cursor-pointer";
+            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";
         }
     },
     beforeUnmount() {
diff --git a/resources/js/Components/IconButton.vue b/resources/js/Components/IconButton.vue
@@ -11,10 +11,10 @@ export default {
     return {
       icons: {
         download: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6"><path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"/><path fill="none" d="M0 0h24v24H0z"/></svg>',
-        mic: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
+        mic: '<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"><path fill="#FFFFFF" d="M12 15c1.66 0 2.99-1.34 2.99-3L15 6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 15 6.7 12H5c0 3.42 2.72 6.23 6 6.72V22h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"></path></svg>',
         play: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
         save: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
-        stop: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h12v12H6z"/></svg>',
+        stop: '<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"><path fill="#FFFFFF" d="M6 6h12v12H6V6z"></path></svg>',
         volume: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/><path d="M0 0h24v24H0z" fill="#none"/></svg>',
       },
     };
diff --git a/resources/js/Pages/Chat.vue b/resources/js/Pages/Chat.vue
@@ -37,6 +37,10 @@ const audioFailed = (error) => {
     })
 }
 
+const image = () => {
+    store.dispatch('imageMessage', form.prompt)
+}
+
 </script>
 
 <template>
@@ -116,6 +120,16 @@ const audioFailed = (error) => {
                                     </svg>
                                 </button>
                                 <audio-widget @audio-upload="audio" @audio-failed="audioFailed" />
+                                <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 }"
+                                    @click="image" title="绘制图片" type="button">
+                                    <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">
+                                        <path fill="#FFFFFF"
+                                            d="M4 2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4l-4 4l-4-4H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m15 13V7l-4 4l-2-2l-6 6h12M7 5a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2Z">
+                                        </path>
+                                    </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"
                                     @click="reset" title="清空消息" type="button">
diff --git a/resources/js/api/chat.js b/resources/js/api/chat.js
@@ -21,6 +21,13 @@ export default {
         return fetch(CHAT_CONFIG.BASE_URL + '/audio', { method: 'POST', body: formData })
     },
 
+    // 发送画图消息
+    imageMessage: (message) => {
+        const formData = new FormData();
+        formData.append('prompt', message);
+        return axios.post(CHAT_CONFIG.BASE_URL + '/image', formData, { responseType: 'json' })
+    },
+
     // 清空所有消息
     clearMessages: () => {
         return axios.get(CHAT_CONFIG.BASE_URL + '/reset')
diff --git a/resources/js/store.js b/resources/js/store.js
@@ -65,7 +65,7 @@ const store = createStore({
                 eventSource.onerror = function (e) {
                     eventSource.close();
                     commit('deleteMessage');
-                    commit('addMessage', { 'role': 'assistant', 'content': '接收回复出错，请重试' })
+                    commit('addMessage', { 'role': 'assistant', 'content': '请求频率太高，请稍后再试' })
                 };
             }).catch(error => {
                 console.log(error);
@@ -103,7 +103,7 @@ const store = createStore({
                 eventSource.onerror = function (e) {
                     eventSource.close();
                     commit('deleteMessage');
-                    commit('addMessage', { 'role': 'assistant', 'content': '接收回复出错，请重试' })
+                    commit('addMessage', { 'role': 'assistant', 'content': '请求频率太高，请稍后再试' })
                 };
             }).catch(error => {
                 if (state.messages[state.messages.length - 1].content === '正在识别语音，请稍候...') {
@@ -113,6 +113,21 @@ const store = createStore({
                 console.log(error);
             });
         },
+        imageMessage({ commit }, message) {
+            commit('addMessage', { 'role': 'user', 'content': message })
+            commit('addMessage', { 'role': 'assistant', 'content': '正在根据你提供的信息绘图，请稍候...' })
+            ChatAPI.imageMessage(message).then(response => {
+                commit('deleteMessage')
+                commit('addMessage', response.data);
+            }).catch(error => {
+                commit('deleteMessage')
+                if (error.response.status === 429) {
+                    commit('addMessage', { 'role': 'assistant', 'content': '请求过于频繁，请稍后再试' });
+                } else {
+                    commit('addMessage', { 'role': 'assistant', 'content': '请求处理失败，请重试' });
+                }
+            });
+        },
         clearMessages({ commit }) {
             ChatAPI.clearMessages().then(response => {
                 commit('clearMessages');
diff --git a/routes/web.php b/routes/web.php
@@ -20,6 +20,7 @@
 Route::post('/chat', ChatController::class . '@chat')->name('chat')->middleware('throttle:chat');
 Route::get('/stream', ChatController::class . '@stream')->name('stream');
 Route::post('/audio', ChatController::class . '@audio')->name('audio')->middleware('throttle:audio');
+Route::post('/image', ChatController::class . '@image')->name('image')->middleware('throttle:imgae');
 Route::get('/reset', ChatController::class . '@reset')->name('reset');
 
 // 暂不开放用户认证功能

Original file line number	Diff line number	Diff line change
`@@ -50,5 +50,8 @@ protected function configureRateLimiting(): void`
`50`	`50`	`RateLimiter::for('audio', function (Request $request) {`
`51`	`51`	`return Limit::perMinute(30)->by($request->user()?->id ?: $request->ip());`
`52`	`52`	`});`
	`53`	`+ RateLimiter::for('image', function (Request $request) {`
	`54`	`+ return Limit::perMinute(20)->by($request->user()?->id ?: $request->ip());`
	`55`	`+ });`
`53`	`56`	`}`
`54`	`57`	`}`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export default {`
`35`	`35`	`},`
`36`	`36`	`computed: {`
`37`	`37`	`buttonClass() {`
`38`		`- return "flex items-center justify-center px-4 py-2 border border-green-600 hover:border-green-700 text-white rounded-md text-sm md:text-base cursor-pointer";`
	`38`	`+ 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";`
`39`	`39`	`}`
`40`	`40`	`},`
`41`	`41`	`beforeUnmount() {`