Queue AI processing to avoid request > 30 sec

2023-03-27 19:58:05 +02:00 · 2023-03-27 19:58:05 +02:00 · d5d5521a90
parent b5c152400d
commit d5d5521a90
9 changed files with 248 additions and 23 deletions
--- a/app/Http/Controllers/Forms/AiFormController.php
+++ b/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!',
-            'form' => $this->cleanOutput($completer->getArray())
+            'message' => 'We\'re working on your form, please wait ~1 min.',
+            '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
-        foreach ($formData['properties'] as &$property) {
-            $property['id'] = Str::uuid()->toString();
+        if ($aiFormCompletion->ip != request()->ip()) {
+            return $this->error('You are not authorized to view this AI completion.', 403);
        }

-        return $formData;
+        return $this->success([
+            'ai_form_completion' => $aiFormCompletion
+        ]);
    }
 }
--- a/app/Jobs/Form/GenerateAiForm.php
+++ b/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;
+    }
+}
--- a/app/Models/Forms/AI/AiFormCompletion.php
+++ b/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);
+        });
+    }
+}
--- a/database/migrations/2023_03_27_153317_create_ai_form_completions_table.php
+++ b/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');
+    }
+};
--- a/database/migrations/2023_03_27_173507_create_jobs_table.php
+++ b/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');
+    }
+};
--- a/resources/js/components/common/Notifications.vue
+++ b/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
--- a/resources/js/components/pages/forms/create/CreateFormBaseModal.vue
+++ b/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)
+      }).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)
    }
  }
 }
--- a/routes/api.php
+++ b/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');
 });

 /**
--- a/vapor.yml
+++ b/vapor.yml
@ -21,4 +21,4 @@ environments:
      - 'php artisan migrate --force'
    firewall:
      rate-limit: 1000
-    timeout: 180
+    timeout: 30