Queue AI processing to avoid request > 30 sec

app/Http/Controllers/Forms/AiFormController.php

@@ -5,6 +5,7 @@ namespace App\Http\Controllers\Forms;
 use App\Console\Commands\GenerateTemplate;
 use App\Http\Controllers\Controller;
 use App\Http\Requests\AiGenerateFormRequest;
+use App\Models\Forms\AI\AiFormCompletion;
 use App\Service\OpenAi\GptCompleter;
 use Illuminate\Support\Str;
 
@@ -13,26 +14,24 @@ class AiFormController extends Controller
     public function generateForm(AiGenerateFormRequest $request)
     {
         $this->middleware('throttle:4,1');
-        $completer = (new GptCompleter(config('services.openai.api_key')))
-            ->setSystemMessage('You are a robot helping to generate forms.');
-        $completer->completeChat([
-            ["role" => "user", "content" => Str::of(GenerateTemplate::FORM_STRUCTURE_PROMPT)
-                ->replace('[REPLACE]', $request->form_prompt)->toString()]
-        ], 3000);
 
         return $this->success([
-            'message' => 'Form successfully generated!',
+            'message' => 'We\'re working on your form, please wait ~1 min.',
-            'form' => $this->cleanOutput($completer->getArray())
+            'ai_form_completion_id' => AiFormCompletion::create([
+                'form_prompt' => $request->input('form_prompt'),
+                'ip' => $request->ip()
+            ])->id
         ]);
     }
 
-    private function cleanOutput($formData)
+    public function show(AiFormCompletion $aiFormCompletion)
     {
-        // Add property uuids
+        if ($aiFormCompletion->ip != request()->ip()) {
-        foreach ($formData['properties'] as &$property) {
+            return $this->error('You are not authorized to view this AI completion.', 403);
-            $property['id'] = Str::uuid()->toString();
         }
 
-        return $formData;
+        return $this->success([
+            'ai_form_completion' => $aiFormCompletion
+        ]);
     }
 }

app/Jobs/Form/GenerateAiForm.php

@@ -0,0 +1,88 @@
+<?php
+
+namespace App\Jobs\Form;
+
+use App\Console\Commands\GenerateTemplate;
+use App\Http\Requests\AiGenerateFormRequest;
+use App\Models\Forms\AI\AiFormCompletion;
+use App\Service\OpenAi\GptCompleter;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldBeUnique;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Support\Str;
+
+class GenerateAiForm implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct(public AiFormCompletion $completion)
+    {
+
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $this->completion->update([
+           'status' => AiFormCompletion::STATUS_PROCESSING
+        ]);
+
+        $completer = (new GptCompleter(config('services.openai.api_key')))
+            ->setSystemMessage('You are a robot helping to generate forms.');
+
+        try {
+            $completer->completeChat([
+                ["role" => "user", "content" => Str::of(GenerateTemplate::FORM_STRUCTURE_PROMPT)
+                    ->replace('[REPLACE]', $this->completion->form_prompt)->toString()]
+            ], 3000);
+
+            $this->completion->update([
+                'status' => AiFormCompletion::STATUS_COMPLETED,
+                'result' => $this->cleanOutput($completer->getArray())
+            ]);
+        } catch (\Exception $e) {
+            $this->completion->update([
+                'status' => AiFormCompletion::STATUS_FAILED,
+                'result' => $e->getMessage()
+            ]);
+        }
+
+    }
+
+    public function generateForm(AiGenerateFormRequest $request)
+    {
+        $completer = (new GptCompleter(config('services.openai.api_key')))
+            ->setSystemMessage('You are a robot helping to generate forms.');
+        $completer->completeChat([
+            ["role" => "user", "content" => Str::of(GenerateTemplate::FORM_STRUCTURE_PROMPT)
+                ->replace('[REPLACE]', $request->form_prompt)->toString()]
+        ], 3000);
+
+        return $this->success([
+            'message' => 'Form successfully generated!',
+            'form' => $this->cleanOutput($completer->getArray())
+        ]);
+    }
+
+    private function cleanOutput($formData)
+    {
+        // Add property uuids
+        foreach ($formData['properties'] as &$property) {
+            $property['id'] = Str::uuid()->toString();
+        }
+
+        return $formData;
+    }
+}

app/Models/Forms/AI/AiFormCompletion.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Models\Forms\AI;
+
+use App\Jobs\Form\GenerateAiForm;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class AiFormCompletion extends Model
+{
+    use HasFactory;
+
+    const STATUS_PENDING = 'pending';
+    const STATUS_PROCESSING = 'processing';
+    const STATUS_COMPLETED = 'completed';
+    const STATUS_FAILED = 'failed';
+
+    protected $table = 'ai_form_completions';
+
+    protected $fillable = [
+        'form_prompt',
+        'status',
+        'result',
+        'ip'
+    ];
+
+    protected $attributes = [
+        'status' => self::STATUS_PENDING
+    ];
+
+    protected static function booted()
+    {
+        // Dispatch completion job on creation
+        static::created(function (self $completion) {
+            GenerateAiForm::dispatch($completion);
+        });
+    }
+}

database/migrations/2023_03_27_153317_create_ai_form_completions_table.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('ai_form_completions', function (Blueprint $table) {
+            $table->id();
+            $table->string('form_prompt');
+            $table->string('status');
+            $table->json('result')->nullable();
+            $table->string('ip');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('ai_form_completions');
+    }
+};

database/migrations/2023_03_27_173507_create_jobs_table.php

@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('jobs', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->string('queue')->index();
+            $table->longText('payload');
+            $table->unsignedTinyInteger('attempts');
+            $table->unsignedInteger('reserved_at')->nullable();
+            $table->unsignedInteger('available_at');
+            $table->unsignedInteger('created_at');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('jobs');
+    }
+};

resources/js/components/common/Notifications.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed top-0 bottom-24 right-0 flex px-4 items-start justify-end z-10 pointer-events-none">
+  <div class="fixed top-0 bottom-24 right-0 flex px-4 items-start justify-end z-50 pointer-events-none">
     <notification v-slot="{ notifications, close }">
       <div class="relative pointer-events-auto" v-for="notification in notifications" :key="notification.id">
         <div

resources/js/components/pages/forms/create/CreateFormBaseModal.vue

@@ -26,7 +26,7 @@
     </template>
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8" v-if="state=='default'">
       <div class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50"
-           @click="showInitialFormModal=false">
+           @click="showInitialFormModal=false" v-track.select_form_base="{base:'contact-form'}">
         <div class="p-4">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-blue-500">
             <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"/>
@@ -35,7 +35,8 @@
         </div>
         <p class="font-medium">Start from a simple contact form</p>
       </div>
-      <div v-if="aiFeaturesEnabled" class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50" @click="state='ai'">
+      <div v-if="aiFeaturesEnabled" v-track.select_form_base="{base:'ai'}"
+           class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50" @click="state='ai'">
         <div class="p-4 relative">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-blue-500">
             <path fill-rule="evenodd"
@@ -54,7 +55,7 @@
           </svg>
         </div>
         <p class="font-medium">Start from a template</p>
-        <router-link :to="{name:'templates'}" class="absolute inset-0"/>
+        <router-link :to="{name:'templates'}" v-track.select_form_base="{base:'template'}" class="absolute inset-0"/>
       </div>
     </div>
     <div v-else-if="state=='ai'">
@@ -64,9 +65,9 @@
         </svg>
         Back
       </a>
-      <text-area-input label="Form Description" :form="aiForm" name="form_prompt" help="Give us a description of the form you want to build (the more details the better)"
+      <text-area-input label="Form Description" :disabled="loading" :form="aiForm" name="form_prompt" help="Give us a description of the form you want to build (the more details the better)"
                        placeholder="A simple contact form, with a name, email and message field" />
-      <v-button class="w-full" @click.prevent="generateForm" :loading="aiForm.busy">
+      <v-button class="w-full" @click.prevent="generateForm" :loading="loading">
         Generate a form
       </v-button>
       <p class="text-gray-500 text-xs text-center mt-1">~60 sec</p>
@@ -77,6 +78,7 @@
 <script>
 import Loader from "../../../common/Loader.vue";
 import Form from "vform";
+import axios from "axios";
 
 export default {
   name: 'CreateFormBaseModal',
@@ -89,7 +91,8 @@ export default {
     state: 'default',
     aiForm: new Form({
       form_prompt: ''
-    })
+    }),
+    loading: false,
   }),
 
   computed: {
@@ -100,14 +103,39 @@ export default {
 
   methods: {
     generateForm() {
+      if (this.loading) return
+
+      this.loading = true
       this.aiForm.post('/api/forms/ai/generate').then(response => {
         this.alertSuccess(response.data.message)
-        this.$emit('form-generated', response.data.form)
+        this.fetchGeneratedForm(response.data.ai_form_completion_id)
-        this.$emit('close')
       }).catch(error => {
         this.alertError(error.response.data.message)
+        this.loading = false
         this.state = 'default'
       })
+    },
+    fetchGeneratedForm(generationId) {
+      // check every 4 seconds if form is generated
+      setTimeout(() => {
+        axios.get('/api/forms/ai/' + generationId).then(response => {
+          if (response.data.ai_form_completion.status === 'completed') {
+            this.alertSuccess(response.data.message)
+            this.$emit('form-generated', JSON.parse(response.data.ai_form_completion.result))
+            this.$emit('close')
+          } else if (response.data.ai_form_completion.status === 'failed') {
+            this.alertError('Something went wrong, please try again.')
+            this.state = 'default'
+            this.loading = false
+          } else {
+            this.fetchGeneratedForm(generationId)
+          }
+        }).catch(error => {
+          this.alertError(error.response.data.message)
+          this.state = 'default'
+          this.loading = false
+        })
+      }, 4000)
     }
   }
 }

routes/api.php

@@ -147,6 +147,7 @@ Route::prefix('forms')->name('forms.')->group(function () {
 
     // AI
     Route::post('ai/generate', [\App\Http\Controllers\Forms\AiFormController::class, 'generateForm'])->name('ai.generate');
+    Route::get('ai/{aiFormCompletion}', [\App\Http\Controllers\Forms\AiFormController::class, 'show'])->name('ai.show');
 });
 
 /**

vapor.yml

@@ -21,4 +21,4 @@ environments:
       - 'php artisan migrate --force'
     firewall:
       rate-limit: 1000
-    timeout: 180
+    timeout: 30