Decouple title from title block (#696)

* Decouple title from title block

* fix lint

* remove dry run for FormTitleMigration

* Skip form title migration for forms with hidden titles

* Refactor AI Form Generation with Dedicated Prompt Services

- Extract AI form generation logic from GenerateTemplate command into dedicated prompt service classes
- Update GenerateAiForm job to use new prompt generation services
- Improve GptCompleter with more robust error handling and token tracking
- Add error field to AiFormCompletion model for better error logging
- Simplify command signature from 'ai:make-form-template' to 'form:generate'

* Consolidate Template Metadata Generation with Unified Prompt Service

- Create GenerateTemplateMetadataPrompt to centralize template metadata generation
- Update GenerateTemplate command to use new consolidated metadata generation approach
- Enhance GptCompleter to support strict JSON schema validation
- Increase form prompt max length to support more complex form descriptions
- Refactor form generation to simplify metadata extraction and processing

* Implement Form Mode Strategy for Flexible Form Rendering

- Introduce FormModeStrategy to centralize form rendering logic
- Add support for different form modes: LIVE, PREVIEW, TEST, EDIT, PREFILL
- Refactor components to use mode-based rendering strategy
- Remove legacy boolean props like adminPreview and creating
- Enhance form component flexibility and reusability

* Refine Form Mode Strategy Display Behavior

- Update FormModeStrategy to hide hidden fields in PREVIEW mode
- Add FormMode getter in UrlFormPrefill component for mode-specific rendering
- Clarify mode-specific validation and display logic in form strategies

* Enhance Form Template Generation with Advanced Field Options

- Update GenerateTemplate command to use front_url for template URL output
- Expand GenerateFormPrompt with comprehensive field configuration options
- Add support for advanced field types: date with time, toggle switches, radio/checkbox selections
- Introduce field width configuration and HTML formatting for text elements
- Re-enable select, multi-select, and matrix field type definitions with enhanced configurations

* Remove Deprecated Template Metadata Generation Services

- Delete multiple AI prompt services related to template metadata generation
- Simplify GenerateTemplate command to use default values instead of complex metadata generation
- Remove GenerateTemplateMetadataPrompt and related classes like GenerateTemplateDescriptionPrompt, GenerateTemplateImageKeywordsPrompt, etc.
- Update form template generation to use basic fallback metadata generation approach

* Restore GenerateTemplateMetadataPrompt for Comprehensive Template Generation

- Reintroduce GenerateTemplateMetadataPrompt to replace default metadata generation
- Update GenerateTemplate command to use consolidated metadata generation approach
- Extract detailed metadata components including title, description, industries, and image search query
- Improve template generation with more dynamic and AI-generated metadata

* Refactor Template Preview Section Layout

- Remove unnecessary nested div in template preview section
- Simplify HTML structure for the template preview component
- Maintain existing styling and functionality while improving code readability

* Refactor Constructor and Code Formatting in AI Form Generation and Prompt Classes

- Updated the constructor in GenerateAiForm.php to use a block structure for improved readability and consistency.
- Added a blank line in the Prompt.php file to enhance code formatting and maintain consistency with PHP coding standards.
- Modified the migration file to use a more concise class declaration syntax, improving clarity.

These changes aim to enhance code readability and maintainability across the affected files.

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala
2025-03-21 21:29:18 +05:30
committed by GitHub
parent d2b8572d75
commit aa5c1acf3a
28 changed files with 1345 additions and 457 deletions

View File

@@ -0,0 +1,95 @@
<?php
namespace App\Console\Commands;
use App\Models\Forms\Form;
use App\Models\Template;
use Illuminate\Console\Command;
use Illuminate\Support\Str;
class FormTitleMigration extends Command
{
/**
* The name and signature of the console command.
*
* @var string
*/
protected $signature = 'forms:form-title-migration';
/**
* The console command description.
*
* @var string
*/
protected $description = 'One Time Only -- Migrate Form Title to new Form Title';
/**
* Execute the console command.
*
* @return int
*/
public function handle()
{
$this->formMigration();
$this->formTemplateMigration();
$this->line('Migration Done');
}
public function formMigration()
{
$this->info('Starting forms migration...');
Form::chunk(100, function ($forms) {
foreach ($forms as $form) {
if ($form?->hide_title ?? false) {
continue;
}
$properties = $form->properties ?? [];
array_unshift($properties, [
'type' => 'nf-text',
'content' => '<h1>' . $form->title . '</h1>',
'name' => 'Title',
'align' => $form->layout_rtl ? 'right' : 'left',
'id' => Str::uuid()
]);
$form->properties = $properties;
$form->timestamps = false;
$form->save();
}
});
}
public function formTemplateMigration()
{
$this->info('Starting forms template migration...');
Template::chunk(100, function ($templates) {
foreach ($templates as $template) {
$structure = $template->structure ?? [];
if (!$structure) {
continue;
}
$properties = $structure['properties'] ?? [];
array_unshift($properties, [
'type' => 'nf-text',
'content' => '<h1>' . $structure['title'] . '</h1>',
'name' => 'Title',
'align' => isset($structure['layout_rtl']) && $structure['layout_rtl'] ? 'right' : 'left',
'id' => Str::uuid()
]);
$structure['properties'] = $properties;
$template->structure = $structure;
$template->timestamps = false;
$template->save();
}
});
}
}

View File

@@ -3,7 +3,8 @@
namespace App\Console\Commands;
use App\Models\Template;
use App\Service\OpenAi\GptCompleter;
use App\Service\AI\Prompts\Form\GenerateFormPrompt;
use App\Service\AI\Prompts\Template\GenerateTemplateMetadataPrompt;
use Illuminate\Console\Command;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Str;
@@ -15,7 +16,7 @@ class GenerateTemplate extends Command
*
* @var string
*/
protected $signature = 'ai:make-form-template {prompt}';
protected $signature = 'form:generate {prompt}';
/**
* The console command description.
@@ -26,190 +27,6 @@ class GenerateTemplate extends Command
public const MAX_RELATED_TEMPLATES = 8;
public const FORM_STRUCTURE_PROMPT = <<<'EOD'
You are an AI assistant for OpnForm, a form builder and your job is to build a form for our user.
Forms are represented as Json objects. Here's an example form:
```json
{
"title": "Contact Us",
"properties": [
{
"help": null,
"name": "What's your name?",
"type": "text",
"hidden": false,
"required": true,
"placeholder": "Steve Jobs"
},
{
"help": "We will never share your email with anyone else.",
"name": "Email",
"type": "email",
"hidden": false,
"required": true,
"placeholder": "steve@apple.com"
},
{
"help": null,
"name": "How would you rate your overall experience?",
"type": "select",
"hidden": false,
"select": {
"options": [
{"name": 1, "value": 1},
{"name": 2, "value": 2},
{"name": 3, "value": 3},
{"name": 4, "value": 4},
{"name": 5, "value": 5}
]
},
"prefill": 5,
"required": true,
"placeholder": null
},
{
"help": null,
"name": "Subject",
"type": "text",
"hidden": false,
"required": true,
"placeholder": null
},
{
"help": null,
"name": "How can we help?",
"type": "text",
"hidden": false,
"required": true,
"multi_lines": true,
"placeholder": null,
"generates_uuid": false,
"max_char_limit": "2000",
"hide_field_name": false,
"show_char_limit": false
},
{
"help": "Upload any relevant files here.",
"name": "Have any attachments?",
"type": "files",
"hidden": false,
"placeholder": null
}
],
"description": "<p>Looking for a real person to speak to?</p><p>We're here for you! Just drop in your queries below and we'll connect with you as soon as we can.</p>",
"re_fillable": false,
"use_captcha": false,
"redirect_url": null,
"submitted_text": "<p>Great, we've received your message. We'll get back to you as soon as we can :)</p>",
"uppercase_labels": false,
"submit_button_text": "Submit",
"re_fill_button_text": "Fill Again",
"color": "#64748b"
}
```
The form properties can only have one of the following types: 'text', 'number', 'rating', 'scale','slider', 'select', 'multi_select', 'date', 'files', 'checkbox', 'url', 'email', 'phone_number', 'signature'.
All form properties objects need to have the keys 'help', 'name', 'type', 'hidden', 'placeholder', 'prefill'.
The placeholder property is optional (can be "null") and is used to display a placeholder text in the input field.
The help property is optional (can be "null") and is used to display extra information about the field.
For the type "select" and "multi_select", the input object must have a key "select" (or "multi_select") that's mapped to an object like this one:
```json
{
"options": [
{"name": 1, "value": 1},
{"name": 2, "value": 2},
{"name": 3, "value": 3},
{"name": 4, "value": 4}
]
}
```
For "rating" you can set the field property "rating_max_value" to set the maximum value of the rating.
For "scale" you can set the field property "scale_min_value", "scale_max_value" and "scale_step_value" to set the minimum, maximum and step value of the scale.
For "slider" you can set the field property "slider_min_value", "slider_max_value" and "slider_step_value" to set the minimum, maximum and step value of the slider.
If the form is too long, you can paginate it by adding a page break block in the list of properties:
```json
{
"name":"Page Break",
"next_btn_text":"Next",
"previous_btn_text":"Previous",
"type":"nf-page-break",
}
```
If you need to add more context to the form, you can add text blocks:
```json
{
"name":"My Text",
"type":"nf-text",
"content": "<p>This is a text block.</p>"
}
```
Give me the valid JSON object only, representing the following form: "[REPLACE]"
Do not ask me for more information about required properties or types, only suggest me a form structure.
EOD;
public const FORM_DESCRIPTION_PROMPT = <<<'EOD'
You are an AI assistant for OpnForm, a form builder and your job is to help us build form templates for our users.
Give me some valid html code (using only h2, p, ul, li html tags) for the following form template page: "[REPLACE]".
The html code should have the following structure:
- A paragraph explaining what the template is about
- A paragraph explaining why and when to use such a form
- A paragraph explaining who is the target audience and why it's a great idea to build this form
- A paragraph explaining that OpnForm is the best tool to build this form. They can duplicate this template in a few seconds, and integrate with many other tools through our webhook or zapier integration.
Each paragraph (except for the first one) MUST start with with a h2 tag containing a title for this paragraph.
EOD;
public const FORM_SHORT_DESCRIPTION_PROMPT = <<<'EOD'
I own a form builder online named OpnForm. It's free to use.
Give me a 1 sentence description for the following form template page: "[REPLACE]". It should be short and concise, but still explain what the form is about.
EOD;
public const FORM_INDUSTRY_PROMPT = <<<'EOD'
You are an AI assistant for OpnForm, a form builder and your job is to help us build form templates for our users.
I am creating a form template: "[REPLACE]". You must assign the template to industries. Return a list of industries (minimum 1, maximum 3 but only if very relevant) and order them by relevance (most relevant first).
Here are the only industries you can choose from: [INDUSTRIES]
Do no make up any new type, only use the ones listed above.
Reply only with a valid JSON array, being an array of string. Order assigned industries from the most relevant to the less relevant.
Ex: { "industries": ["banking_forms","customer_service_forms"]}
EOD;
public const FORM_TYPES_PROMPT = <<<'EOD'
You are an AI assistant for OpnForm, a form builder and your job is to help us build form templates for our users.
I am creating a form template: "[REPLACE]". You must assign the template to one or more types. Return a list of types (minimum 1, maximum 3 but only if very accurate) and order them by relevance (most relevant first).
Here are the only types you can choose from: [TYPES]
Do no make up any new type, only use the ones listed above.
Reply only with a valid JSON array, being an array of string. Order assigned types from the most relevant to the less relevant.
Ex: { "types": ["consent_forms","award_forms"]}
EOD;
public const FORM_QAS_PROMPT = <<<'EOD'
Now give me 4 to 6 question and answers to put on the form template page. The questions should be about the reasons for this template (when to use, why, target audience, goal etc.).
The questions should also explain why OpnForm is the best option to create this form (open-source, free to use, integrations etc).
Reply only with a valid JSON, being an array of object containing the keys "question" and "answer".
EOD;
public const FORM_TITLE_PROMPT = <<<'EOD'
Finally give me a title for the template. It must contain or end with "template". It should be short and to the point, without any quotes.
EOD;
public const FORM_IMG_KEYWORDS_PROMPT = <<<'EOD'
I want to add an image to illustrate this form template page. Give me a relevant search query for unsplash. Reply only with a valid JSON like this:
```json
{
"search_query": ""
}
```
EOD;
/**
* Execute the console command.
*
@@ -217,57 +34,25 @@ class GenerateTemplate extends Command
*/
public function handle()
{
// Get form structure
$completer = (new GptCompleter(config('services.openai.api_key')))
->useStreaming()
->setSystemMessage('You are an assistant helping to generate forms.');
$completer->expectsJson()->completeChat([
['role' => 'user', 'content' => Str::of(self::FORM_STRUCTURE_PROMPT)->replace('[REPLACE]', $this->argument('prompt'))->toString()],
]);
$formData = $completer->getArray();
$formData = self::cleanAiOutput($formData);
// Get form structure using the form prompt class
$formData = GenerateFormPrompt::run($this->argument('prompt'));
$completer->doesNotExpectJson();
$formDescriptionPrompt = Str::of(self::FORM_DESCRIPTION_PROMPT)->replace('[REPLACE]', $this->argument('prompt'))->toString();
$formShortDescription = $completer->completeChat([
['role' => 'user', 'content' => Str::of(self::FORM_SHORT_DESCRIPTION_PROMPT)->replace('[REPLACE]', $this->argument('prompt'))->toString()],
])->getString();
// If description is between quotes, remove quotes
$formShortDescription = Str::of($formShortDescription)->replaceMatches('/^"(.*)"$/', '$1')->toString();
// Generate all template metadata using the consolidated prompt
$metadata = GenerateTemplateMetadataPrompt::run($this->argument('prompt'));
// Get industry & types
$completer->expectsJson();
$industry = $this->getIndustries($completer, $this->argument('prompt'));
$types = $this->getTypes($completer, $this->argument('prompt'));
// Extract metadata components
$formShortDescription = $metadata['short_description'];
$formDescription = $metadata['detailed_description'];
$formTitle = $metadata['title'];
$industry = $metadata['industries'];
$types = $metadata['types'];
$formQAs = $metadata['qa_content'];
// Get Related Templates
$relatedTemplates = $this->getRelatedTemplates($industry, $types);
// Now get description and QAs
$completer->doesNotExpectJson();
$formDescription = $completer->completeChat([
['role' => 'user', 'content' => $formDescriptionPrompt],
])->getHtml();
$completer->expectsJson();
$formCoverKeywords = $completer->completeChat([
['role' => 'user', 'content' => $formDescriptionPrompt],
['role' => 'assistant', 'content' => $formDescription],
['role' => 'user', 'content' => self::FORM_IMG_KEYWORDS_PROMPT],
])->getArray();
$imageUrl = $this->getImageCoverUrl($formCoverKeywords['search_query']);
$formQAs = $completer->completeChat([
['role' => 'user', 'content' => $formDescriptionPrompt],
['role' => 'assistant', 'content' => $formDescription],
['role' => 'user', 'content' => self::FORM_QAS_PROMPT],
])->getArray();
$completer->doesNotExpectJson();
$formTitle = $completer->completeChat([
['role' => 'user', 'content' => $formDescriptionPrompt],
['role' => 'assistant', 'content' => $formDescription],
['role' => 'user', 'content' => self::FORM_TITLE_PROMPT],
])->getString();
// Get image cover URL
$imageUrl = $this->getImageCoverUrl($metadata['image_search_query']);
$template = $this->createFormTemplate(
$formData,
@@ -280,11 +65,12 @@ class GenerateTemplate extends Command
$types,
$relatedTemplates
);
$this->info('/form-templates/' . $template->slug);
// Set reverse related Templates
$this->setReverseRelatedTemplates($template);
$this->info(front_url('/form-templates/' . $template->slug));
return Command::SUCCESS;
}
@@ -303,30 +89,6 @@ class GenerateTemplate extends Command
return null;
}
private function getIndustries(GptCompleter $completer, string $formPrompt): array
{
$industriesString = Template::getAllIndustries()->pluck('slug')->join(', ');
return $completer->completeChat([
['role' => 'user', 'content' => Str::of(self::FORM_INDUSTRY_PROMPT)
->replace('[REPLACE]', $formPrompt)
->replace('[INDUSTRIES]', $industriesString)
->toString()],
])->getArray()['industries'];
}
private function getTypes(GptCompleter $completer, string $formPrompt): array
{
$typesString = Template::getAllTypes()->pluck('slug')->join(', ');
return $completer->completeChat([
['role' => 'user', 'content' => Str::of(self::FORM_TYPES_PROMPT)
->replace('[REPLACE]', $formPrompt)
->replace('[TYPES]', $typesString)
->toString()],
])->getArray()['types'];
}
private function getRelatedTemplates(array $industries, array $types): array
{
$templateScore = [];
@@ -383,36 +145,4 @@ class GenerateTemplate extends Command
}
}
}
public static function cleanAiOutput(array $formData): array
{
// Add property uuids, improve form with options
foreach ($formData['properties'] as &$property) {
$property['id'] = Str::uuid()->toString(); // Column ID
// Fix types
if ($property['type'] == 'rating') {
$property['rating_max_value'] = $property['rating_max_value'] ?? 5;
} elseif ($property['type'] == 'scale') {
$property['scale_min_value'] = $property['scale_min_value'] ?? 1;
$property['scale_max_value'] = $property['scale_max_value'] ?? 5;
$property['scale_step_value'] = $property['scale_step_value'] ?? 1;
} elseif ($property['type'] == 'slider') {
$property['slider_min_value'] = $property['slider_min_value'] ?? 0;
$property['slider_max_value'] = $property['slider_max_value'] ?? 100;
$property['slider_step_value'] = $property['slider_step_value'] ?? 1;
}
if (($property['type'] == 'select' && count($property['select']['options']) <= 4)
|| ($property['type'] == 'multi_select' && count($property['multi_select']['options']) <= 4)
) {
$property['without_dropdown'] = true;
}
}
// Clean data
$formData['title'] = Str::of($formData['title'])->replace('"', '')->toString();
return $formData;
}
}