Queue AI processing to avoid request > 30 sec
This commit is contained in:
Julien Nahum
parent
b5c152400d
commit
d5d5521a90
|
|
@ -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
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -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');
|
||||
}
|
||||
};
|
||||
|
|
@ -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');
|
||||
}
|
||||
};
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.$emit('close')
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue