Fill FileUpload with generated images

Im trying to fill a FileUpload field with an image I generate using OpenAI's Dall e

I added the required FileUpload field to my schema and I added the action to generate the image. This action uses a form to ask the user for a prompt:

FileUpload::make('ai_image')
    ->image(),
Actions::make([
    Action::make('aiImage')
        ->icon('heroicon-o-camera')
        ->form([
            TextInput::make('prompt')
                ->label(__('input.prompt')),
        ])
        ->action(function (array $arguments, Set $set, array $data) {
            $prompt = $data['prompt'];

            OpenAIController::getImage($prompt);
        })
]),

FileUpload::make('ai_image')
    ->image(),
Actions::make([
    Action::make('aiImage')
        ->icon('heroicon-o-camera')
        ->form([
            TextInput::make('prompt')
                ->label(__('input.prompt')),
        ])
        ->action(function (array $arguments, Set $set, array $data) {
            $prompt = $data['prompt'];

            OpenAIController::getImage($prompt);
        })
]),

I already prepared the controller for generating the image and downloading it into storage:

public static function getImage(String $prompt)
    {
        $apiKey = env('OPENAI_KEY');
        $client = OpenAI::client($apiKey);

        $aiResponse = $client->images()->create([
            'model' => 'dall-e-3',
            'prompt' => $prompt,
            'n' => 1,
            'size' => '1024x1024',
            'response_format' => 'url',
        ]);

        $client = new Client();
        $url = $aiResponse->data[0]->url;
        $filename = uuid_create().'.jpg';

        $imageResponse = $client->request('GET', $url);

        Storage::disk('public')->put($filename, $imageResponse->getBody()->getContents());
    }

public static function getImage(String $prompt)
    {
        $apiKey = env('OPENAI_KEY');
        $client = OpenAI::client($apiKey);

        $aiResponse = $client->images()->create([
            'model' => 'dall-e-3',
            'prompt' => $prompt,
            'n' => 1,
            'size' => '1024x1024',
            'response_format' => 'url',
        ]);

        $client = new Client();
        $url = $aiResponse->data[0]->url;
        $filename = uuid_create().'.jpg';

        $imageResponse = $client->request('GET', $url);

        Storage::disk('public')->put($filename, $imageResponse->getBody()->getContents());
    }

I already tried to set the ai_image field using the Set method, but this didn't work. Is this possible in Filament? The ultimate goal is to generate the image and show it in the FileUpload preview, so the user can see it before saving.

Solution

I had a similar use case, here is how i did it https://github.com/mansoorkhan96/filament-unsplash-picker/blob/df4d6c3bd3fe720ec11e3cfe6686bd97a812d892/src/Actions/UnsplashPickerAction.php#L104
Maybe not the best way to do it, but it works good.

GitHub

filament-unsplash-picker/src/Actions/UnsplashPickerAction.php at df...

Unsplash gallery for Filament. Search and pick any image from Unsplash.com - mansoorkhan96/filament-unsplash-picker

Jump to solution

Fill FileUpload with generated images

FileUpload::make('ai_image')
    ->image(),
Actions::make([
    Action::make('aiImage')
        ->icon('heroicon-o-camera')
        ->form([
            TextInput::make('prompt')
                ->label(__('input.prompt')),
        ])
        ->action(function (array $arguments, Set $set, array $data) {
            $prompt = $data['prompt'];

            OpenAIController::getImage($prompt);
        })
]),

FileUpload::make('ai_image')
    ->image(),
Actions::make([
    Action::make('aiImage')
        ->icon('heroicon-o-camera')
        ->form([
            TextInput::make('prompt')
                ->label(__('input.prompt')),
        ])
        ->action(function (array $arguments, Set $set, array $data) {
            $prompt = $data['prompt'];

            OpenAIController::getImage($prompt);
        })
]),

I already prepared the controller for generating the image and downloading it into storage:

public static function getImage(String $prompt)
    {
        $apiKey = env('OPENAI_KEY');
        $client = OpenAI::client($apiKey);

        $aiResponse = $client->images()->create([
            'model' => 'dall-e-3',
            'prompt' => $prompt,
            'n' => 1,
            'size' => '1024x1024',
            'response_format' => 'url',
        ]);

        $client = new Client();
        $url = $aiResponse->data[0]->url;
        $filename = uuid_create().'.jpg';

        $imageResponse = $client->request('GET', $url);

        Storage::disk('public')->put($filename, $imageResponse->getBody()->getContents());
    }

public static function getImage(String $prompt)
    {
        $apiKey = env('OPENAI_KEY');
        $client = OpenAI::client($apiKey);

        $aiResponse = $client->images()->create([
            'model' => 'dall-e-3',
            'prompt' => $prompt,
            'n' => 1,
            'size' => '1024x1024',
            'response_format' => 'url',
        ]);

        $client = new Client();
        $url = $aiResponse->data[0]->url;
        $filename = uuid_create().'.jpg';

        $imageResponse = $client->request('GET', $url);

        Storage::disk('public')->put($filename, $imageResponse->getBody()->getContents());
    }

Solution

GitHub

filament-unsplash-picker/src/Actions/UnsplashPickerAction.php at df...

Unsplash gallery for Filament. Search and pick any image from Unsplash.com - mansoorkhan96/filament-unsplash-picker

Jump to solution

Fill FileUpload with generated images

Fill FileUpload with generated images

Similar Threads

Similar Threads

Similar Threads