Queue AI processing to avoid request > 30 sec

This commit is contained in:
Julien Nahum 2023-03-27 19:58:05 +02:00
parent b5c152400d
commit d5d5521a90
9 changed files with 248 additions and 23 deletions

View File

@ -5,6 +5,7 @@ namespace App\Http\Controllers\Forms;
use App\Console\Commands\GenerateTemplate; use App\Console\Commands\GenerateTemplate;
use App\Http\Controllers\Controller; use App\Http\Controllers\Controller;
use App\Http\Requests\AiGenerateFormRequest; use App\Http\Requests\AiGenerateFormRequest;
use App\Models\Forms\AI\AiFormCompletion;
use App\Service\OpenAi\GptCompleter; use App\Service\OpenAi\GptCompleter;
use Illuminate\Support\Str; use Illuminate\Support\Str;
@ -13,26 +14,24 @@ class AiFormController extends Controller
public function generateForm(AiGenerateFormRequest $request) public function generateForm(AiGenerateFormRequest $request)
{ {
$this->middleware('throttle:4,1'); $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([ 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
]);
} }
} }

View File

@ -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;
}
}

View File

@ -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);
});
}
}

View File

@ -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');
}
};

View File

@ -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');
}
};

View File

@ -1,5 +1,5 @@
<template> <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 }"> <notification v-slot="{ notifications, close }">
<div class="relative pointer-events-auto" v-for="notification in notifications" :key="notification.id"> <div class="relative pointer-events-auto" v-for="notification in notifications" :key="notification.id">
<div <div

View File

@ -26,7 +26,7 @@
</template> </template>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8" v-if="state=='default'"> <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" <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"> <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"> <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"/> <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> </div>
<p class="font-medium">Start from a simple contact form</p> <p class="font-medium">Start from a simple contact form</p>
</div> </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"> <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"> <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" <path fill-rule="evenodd"
@ -54,7 +55,7 @@
</svg> </svg>
</div> </div>
<p class="font-medium">Start from a template</p> <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> </div>
<div v-else-if="state=='ai'"> <div v-else-if="state=='ai'">
@ -64,9 +65,9 @@
</svg> </svg>
Back Back
</a> </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" /> 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 Generate a form
</v-button> </v-button>
<p class="text-gray-500 text-xs text-center mt-1">~60 sec</p> <p class="text-gray-500 text-xs text-center mt-1">~60 sec</p>
@ -77,6 +78,7 @@
<script> <script>
import Loader from "../../../common/Loader.vue"; import Loader from "../../../common/Loader.vue";
import Form from "vform"; import Form from "vform";
import axios from "axios";
export default { export default {
name: 'CreateFormBaseModal', name: 'CreateFormBaseModal',
@ -89,7 +91,8 @@ export default {
state: 'default', state: 'default',
aiForm: new Form({ aiForm: new Form({
form_prompt: '' form_prompt: ''
}) }),
loading: false,
}), }),
computed: { computed: {
@ -100,14 +103,39 @@ export default {
methods: { methods: {
generateForm() { generateForm() {
if (this.loading) return
this.loading = true
this.aiForm.post('/api/forms/ai/generate').then(response => { this.aiForm.post('/api/forms/ai/generate').then(response => {
this.alertSuccess(response.data.message) 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 => { }).catch(error => {
this.alertError(error.response.data.message) this.alertError(error.response.data.message)
this.loading = false
this.state = 'default' 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)
} }
} }
} }

View File

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

View File

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