Add Template Creation Functionality in Admin Panel (#729)

* Add create template functionality in Admin Panel

- Implemented a new endpoint for creating templates in AdminController, utilizing the GenerateTemplate command.
- Added a form in the admin settings Vue component to allow users to input a template description and submit it.
- Enhanced the user experience with loading states and success/error alerts during template creation.

These changes facilitate the generation of new form templates directly from the admin interface, improving usability and functionality.

* Update template prompt validation length in AdminController

- Increased the maximum length of the 'template_prompt' field from 1000 to 4000 characters in the createTemplate method.

This change allows for more extensive template descriptions, enhancing the flexibility of template creation in the admin panel.

* Refactor template generation to use job-based approach

- Migrate template generation logic from the GenerateTemplate command to a new GenerateTemplateJob class for improved separation of concerns and better handling of asynchronous processing.
- Update AdminController to utilize the new job for generating templates, enhancing maintainability and clarity in the codebase.
- Remove unused dependencies and streamline the command's handle method for better performance and readability.

* fix lint

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

api/app/Console/Commands/GenerateTemplate.php

@@ -2,12 +2,8 @@
 
 namespace App\Console\Commands;
 
-use App\Models\Template;
+use App\Jobs\Template\GenerateTemplateJob;
-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;
 
 class GenerateTemplate extends Command
 {
@@ -25,124 +21,26 @@ class GenerateTemplate extends Command
      */
     protected $description = 'Generates a new form template from a prompt';
 
-    public const MAX_RELATED_TEMPLATES = 8;
+    public $generatedTemplate;
 
     /**
-     * Execute the console command.
+     * Execute the command.
      *
      * @return int
      */
     public function handle()
     {
-        // Get form structure using the form prompt class
+        $job = new GenerateTemplateJob($this->argument('prompt'));
-        $formData = GenerateFormPrompt::run($this->argument('prompt'));
+        $job->handle();
 
-        // Generate all template metadata using the consolidated prompt
+        $this->generatedTemplate = $job->generatedTemplate;
-        $metadata = GenerateTemplateMetadataPrompt::run($this->argument('prompt'));
 
-        // Extract metadata components
+        if ($this->generatedTemplate) {
-        $formShortDescription = $metadata['short_description'];
+            $this->info(front_url('/templates/' . $this->generatedTemplate->slug));
-        $formDescription = $metadata['detailed_description'];
+            return Command::SUCCESS;
-        $formTitle = $metadata['title'];
-        $industry = $metadata['industries'];
-        $types = $metadata['types'];
-        $formQAs = $metadata['qa_content'];
-
-        // Get Related Templates
-        $relatedTemplates = $this->getRelatedTemplates($industry, $types);
-
-        // Get image cover URL
-        $imageUrl = $this->getImageCoverUrl($metadata['image_search_query']);
-
-        $template = $this->createFormTemplate(
-            $formData,
-            $formTitle,
-            $formDescription,
-            $formShortDescription,
-            $formQAs,
-            $imageUrl,
-            $industry,
-            $types,
-            $relatedTemplates
-        );
-
-        // Set reverse related Templates
-        $this->setReverseRelatedTemplates($template);
-
-        $this->info(front_url('/form-templates/' . $template->slug));
-
-        return Command::SUCCESS;
-    }
-
-    /**
-     * Get an image cover URL for the template using unsplash API
-     */
-    private function getImageCoverUrl($searchQuery): ?string
-    {
-        $url = 'https://api.unsplash.com/search/photos?query=' . urlencode($searchQuery) . '&client_id=' . config('services.unsplash.access_key');
-        $response = Http::get($url)->json();
-        $photoIndex = rand(0, max(count($response['results']) - 1, 10));
-        if (isset($response['results'][$photoIndex]['urls']['regular'])) {
-            return Str::of($response['results'][$photoIndex]['urls']['regular'])->replace('w=1080', 'w=600')->toString();
         }
 
-        return null;
+        $this->error('Failed to generate template');
-    }
+        return Command::FAILURE;
-
-    private function getRelatedTemplates(array $industries, array $types): array
-    {
-        $templateScore = [];
-        Template::chunk(100, function ($otherTemplates) use ($industries, $types, &$templateScore) {
-            foreach ($otherTemplates as $otherTemplate) {
-                $industryOverlap = count(array_intersect($industries ?? [], $otherTemplate->industry ?? []));
-                $typeOverlap = count(array_intersect($types ?? [], $otherTemplate->types ?? []));
-                $score = $industryOverlap + $typeOverlap;
-                if ($score > 1) {
-                    $templateScore[$otherTemplate->slug] = $score;
-                }
-            }
-        });
-        arsort($templateScore); // Sort by Score
-
-        return array_slice(array_keys($templateScore), 0, self::MAX_RELATED_TEMPLATES);
-    }
-
-    private function createFormTemplate(
-        array $formData,
-        string $formTitle,
-        string $formDescription,
-        string $formShortDescription,
-        array $formQAs,
-        ?string $imageUrl,
-        array $industry,
-        array $types,
-        array $relatedTemplates
-    ) {
-        return Template::create([
-            'name' => $formTitle,
-            'description' => $formDescription,
-            'short_description' => $formShortDescription,
-            'questions' => $formQAs,
-            'structure' => $formData,
-            'image_url' => $imageUrl,
-            'publicly_listed' => true,
-            'industries' => $industry,
-            'types' => $types,
-            'related_templates' => $relatedTemplates,
-        ]);
-    }
-
-    private function setReverseRelatedTemplates(Template $newTemplate)
-    {
-        if (!$newTemplate || count($newTemplate->related_templates) === 0) {
-            return;
-        }
-
-        $templates = Template::whereIn('slug', $newTemplate->related_templates)->get();
-        foreach ($templates as $template) {
-            if (count($template->related_templates) < self::MAX_RELATED_TEMPLATES) {
-                $template->update(['related_templates' => array_merge($template->related_templates, [$newTemplate->slug])]);
-            }
-        }
     }
 }

api/app/Http/Controllers/Admin/AdminController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Admin;
 
 use App\Http\Controllers\Controller;
+use App\Jobs\Template\GenerateTemplateJob;
 use App\Models\Forms\Form;
 use App\Models\User;
 use Illuminate\Http\Request;
@@ -18,6 +19,20 @@ class AdminController extends Controller
         $this->middleware('moderator');
     }
 
+    public function createTemplate(Request $request)
+    {
+        $request->validate([
+            'template_prompt' => 'required|string|max:4000'
+        ]);
+
+        $job = new GenerateTemplateJob($request->template_prompt);
+        $job->handle();
+
+        return $this->success([
+            'template_slug' => $job->generatedTemplate?->slug ?? null
+        ]);
+    }
+
     public function fetchUser($identifier)
     {
         $user = null;

api/app/Jobs/Template/GenerateTemplateJob.php

@@ -0,0 +1,146 @@
+<?php
+
+namespace App\Jobs\Template;
+
+use App\Models\Template;
+use App\Service\AI\Prompts\Form\GenerateFormPrompt;
+use App\Service\AI\Prompts\Template\GenerateTemplateMetadataPrompt;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Str;
+
+class GenerateTemplateJob implements ShouldQueue
+{
+    use Dispatchable;
+    use InteractsWithQueue;
+    use Queueable;
+    use SerializesModels;
+
+    public ?Template $generatedTemplate = null;
+    public const MAX_RELATED_TEMPLATES = 8;
+
+    /**
+     * Create a new job instance.
+     */
+    public function __construct(public string $prompt)
+    {
+    }
+
+    /**
+     * Execute the job.
+     */
+    public function handle(): void
+    {
+        // Get form structure using the form prompt class
+        $formData = GenerateFormPrompt::run($this->prompt);
+
+        // Generate all template metadata using the consolidated prompt
+        $metadata = GenerateTemplateMetadataPrompt::run($this->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);
+
+        // Get image cover URL
+        $imageUrl = $this->getImageCoverUrl($metadata['image_search_query']);
+
+        $template = $this->createFormTemplate(
+            $formData,
+            $formTitle,
+            $formDescription,
+            $formShortDescription,
+            $formQAs,
+            $imageUrl,
+            $industry,
+            $types,
+            $relatedTemplates
+        );
+        $this->generatedTemplate = $template;
+
+        // Set reverse related Templates
+        $this->setReverseRelatedTemplates($template);
+    }
+
+    /**
+     * Get an image cover URL for the template using unsplash API
+     */
+    private function getImageCoverUrl($searchQuery): ?string
+    {
+        $url = 'https://api.unsplash.com/search/photos?query=' . urlencode($searchQuery) . '&client_id=' . config('services.unsplash.access_key');
+        $response = Http::get($url)->json();
+        $photoIndex = rand(0, max(count($response['results']) - 1, 10));
+        if (isset($response['results'][$photoIndex]['urls']['regular'])) {
+            return Str::of($response['results'][$photoIndex]['urls']['regular'])->replace('w=1080', 'w=600')->toString();
+        }
+
+        return null;
+    }
+
+    private function getRelatedTemplates(array $industries, array $types): array
+    {
+        $templateScore = [];
+        Template::chunk(100, function ($otherTemplates) use ($industries, $types, &$templateScore) {
+            foreach ($otherTemplates as $otherTemplate) {
+                $industryOverlap = count(array_intersect($industries ?? [], $otherTemplate->industry ?? []));
+                $typeOverlap = count(array_intersect($types ?? [], $otherTemplate->types ?? []));
+                $score = $industryOverlap + $typeOverlap;
+                if ($score > 1) {
+                    $templateScore[$otherTemplate->slug] = $score;
+                }
+            }
+        });
+        arsort($templateScore); // Sort by Score
+
+        return array_slice(array_keys($templateScore), 0, self::MAX_RELATED_TEMPLATES);
+    }
+
+    private function createFormTemplate(
+        array $formData,
+        string $formTitle,
+        string $formDescription,
+        string $formShortDescription,
+        array $formQAs,
+        ?string $imageUrl,
+        array $industry,
+        array $types,
+        array $relatedTemplates
+    ) {
+        return Template::create([
+            'name' => $formTitle,
+            'description' => $formDescription,
+            'short_description' => $formShortDescription,
+            'questions' => $formQAs,
+            'structure' => $formData,
+            'image_url' => $imageUrl,
+            'publicly_listed' => true,
+            'industries' => $industry,
+            'types' => $types,
+            'related_templates' => $relatedTemplates,
+        ]);
+    }
+
+    private function setReverseRelatedTemplates(Template $newTemplate)
+    {
+        if (!$newTemplate || count($newTemplate->related_templates) === 0) {
+            return;
+        }
+
+        $templates = Template::whereIn('slug', $newTemplate->related_templates)->get();
+        foreach ($templates as $template) {
+            if (count($template->related_templates) < self::MAX_RELATED_TEMPLATES) {
+                $template->update(['related_templates' => array_merge($template->related_templates, [$newTemplate->slug])]);
+            }
+        }
+    }
+}

api/routes/api.php

@@ -225,6 +225,10 @@ Route::group(['middleware' => 'auth:api'], function () {
     });
 
     Route::group(['middleware' => 'moderator', 'prefix' => 'moderator'], function () {
+        Route::post(
+            'create-template',
+            [\App\Http\Controllers\Admin\AdminController::class, 'createTemplate']
+        );
         Route::get(
             'fetch-user/{identifier}',
             [\App\Http\Controllers\Admin\AdminController::class, 'fetchUser']

client/pages/settings/admin.vue

@@ -62,6 +62,28 @@
           Fetch User
         </v-button>
       </form>
+
+      <form
+        class="pb-8 max-w-lg"
+        @submit.prevent="createTemplate"
+        @keydown="createTemplateForm.onKeydown($event)"
+      >
+        <text-area-input
+          name="template_prompt"
+          :form="createTemplateForm"
+          label="Template Description"
+          :required="true"
+          help="Describe the template you want to create"
+        />
+        <v-button
+          :loading="templateLoading"
+          type="success"
+          color="blue"
+          class="mt-4 w-full"
+        >
+          Create Template
+        </v-button>
+      </form>
     </template>
 
     <div
@@ -136,7 +158,11 @@ export default {
     fetchUserForm: useForm({
       identifier: ''
     }),
-    loading: false
+    createTemplateForm: useForm({
+      template_prompt: ''
+    }),
+    loading: false,
+    templateLoading: false
   }),
 
   computed: {
@@ -193,6 +219,29 @@ export default {
       } else if (workspaces.some(w => w.plan === 'pro')) {
         this.userPlan = 'pro'
       }
+    },
+    async createTemplate() {
+      if (!this.createTemplateForm.template_prompt) {
+        this.useAlert.error('Template prompt is required.')
+        return  
+      }
+
+      this.templateLoading = true
+      opnFetch(`/moderator/create-template`, {
+        method: 'POST',
+        body: {
+          template_prompt: this.createTemplateForm.template_prompt
+        }
+      }).then((data) => {
+        this.templateLoading = false
+        this.createTemplateForm.reset()
+        this.useAlert.success('Template created.')
+        useRouter().push({ name: 'templates-slug', params: { slug: data.template_slug } })
+      })
+      .catch((error) => {
+        this.templateLoading = false
+        this.useAlert.error(error.data.message)
+      })
     }
   }
 }