DEV Community

Cover image for From Concept to Image: Exploring OpenAI Image Generation API with Laravel 10 and VueJS
Snehal Rajeev Moon
Snehal Rajeev Moon

Posted on • Updated on

From Concept to Image: Exploring OpenAI Image Generation API with Laravel 10 and VueJS

Hello Artisans,

  • In today's digital era, images play a vital role in enhancing user experiences across various applications and platforms.
  • OpenAI's Image API offers incredible opportunities to harness the power of artificial intelligence and machine learning for image-related tasks. In this tutorial, we'll explore how to integrate OpenAI's Image API into a Laravel application, enabling you to unlock exciting image-based functionalities.

Prerequisites:
To follow this tutorial, you should have a basic understanding of Laravel and its ecosystem. Familiarity with RESTful APIs. Additionally, ensure that you have a working Laravel installation along with composer, the PHP package manager. We are going to use guzzlehttp/guzzle http client for api calls.

Step 1: Obtaining OpenAI API Credentials
Before diving into the integration, we have to obtain OpenAI API credentials by visiting the OpenAI website https://openai.com/ create your account by sign up or log in to your account. Once logged in, navigate to the API section https://platform.openai.com/account/api-keys and create a new API key. Keep the generated key secure, as it will be used in the Laravel application.

Step 2: Install Laravel, breeze and vue using following command



composer create-project laravel/laravel laravel-openai-api

cd laravel-openai-api

composer require laravel/breeze --dev

php artisan breeze:install vue

php artisan migrate
npm install
npm run dev


Enter fullscreen mode Exit fullscreen mode

Step 3: Install Guzzle http client



composer require guzzlehttp/guzzle


Enter fullscreen mode Exit fullscreen mode

Step 4: Add open-ai api key to your env file. Now add this variable to services.php in the config folder. This is an efficient and reliable way to access env variables from our codebase.



OPENAI_API_KEY=your-api-key-goes-here


Enter fullscreen mode Exit fullscreen mode

services.php



'chatgpt' => env('OPENAI_API_KEY')


Enter fullscreen mode Exit fullscreen mode

Step 5: Create controller and web route




php artisan make:controller ImageGeneratorController

// add these routes in youe web.php file

Route::get('/generate/img', [ImageGeneratorController::class, 'index'])->name('generate.img.index');
Route::post('/generate/img', [ImageGeneratorController::class, 'generateImage'])->name('generate.img');


Enter fullscreen mode Exit fullscreen mode

Step 6: Create ImageGenerator.vue vue file to create frontend to generate an image, add the below code in your vue file



<script setup>
import InputLabel from "@/Components/InputLabel.vue";
import axios from "axios";
import { ref } from "vue";
import { ArrowPathIcon } from "@heroicons/vue/24/solid";
components: {
    InputLabel;
}
const images = ref([]);
const form = {
    prompt: "",
    n: 1,
    size: "1024x1024",
};
const isLoading = ref(false);

const getImg = async () => {
    if (images.value.length >= 0) {
        images.value = [];
    }
    isLoading.value = true;
    const {
        data: { data },
    } = await axios.post(route("generate.img"), form);
    images.value = data;
    if (data) {
        isLoading.value = false;
    }
};
</script>
<template>
    <div class="container mx-auto py-8 px-10">
        <p class="text-center text-lg font-bold p-4">
            Example of ChatGPT Image Generation
        </p>
        <div class="w-full max-w-3xl mx-auto">
            <form
                class="bg-lime-200 shadow-md rounded px-8 pt-6 pb-8 mb-4"
                @submit.prevent="getImg"
            >
                <div class="flex items-center border-b border-lime-600 py-2">
                    <input
                        class="appearance-none bg-transparent border-none w-full text-lime-900 mr-3 py-1 px-2 leading-tight focus:outline-none"
                        type="text"
                        placeholder="Enter image Description"
                        aria-label="Image Description"
                        v-model="form.prompt"
                    />
                    <button
                        :class="{ 'w-28': isLoading }"
                        class="inline-flex items-center flex-shrink-0 bg-lime-500 hover:bg-lime-700 border-lime-500 hover:border-lime-700 text-sm border-4 text-white py-1 px-5 rounded"
                        type="submit"
                    >
                        Generate
                        <ArrowPathIcon
                            class="ml-3 animate-spin"
                            v-if="isLoading"
                        />
                    </button>
                </div>
            </form>
            <div
                v-if="isLoading"
                class="h-2 animate-pulse bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded"
            ></div>
        </div>

        <div class="mt-8 w-full max-w-xl mx-auto">
            <div v-for="(image, index) in images" :key="index">
                <img :src="image.url" alt="no image" height="50" />
            </div>
        </div>
    </div>
</template>
<style>
.showLoader {
    margin-left: 20px;
}
</style>


Enter fullscreen mode Exit fullscreen mode

Step 7: Open your ImageGeneratorController.php controller, add below code



<?php

namespace App\Http\Controllers;

use GuzzleHttp\Client;
use GuzzleHttp\Psr7\Request as GuzzelHttpRequest;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redirect;
use Illuminate\Support\Facades\Http;
use Inertia\Inertia;

class ImageGeneratorController extends Controller
{
    public function index()
    {
        return Inertia::render('ImageGenerator');
    }
    public function generateImage(Request $request)
    {
        $client = new Client([
            'verify' => false,
            // 'verify' => 'C:/php8/cacert.pem',
        ]);
        $headers = [
            'Content-Type' => 'application/json',
            'Authorization' => 'Bearer ' .config('services.chatgpt')
        ];
        $body = json_encode($request->all());

        $req = new GuzzelHttpRequest('POST', 'https://api.openai.com/v1/images/generations', $headers, $body);
        $res = $client->sendAsync($req)->wait();
        return response()->json(json_decode($res->getBody()->getContents()));
    }
}



Enter fullscreen mode Exit fullscreen mode

Now run the project and create stunning images.

Staring point of application

Image description

The image created from text

Image description

Here is the link of my github repository

Laravel Logo

Steps to install Laravel and Vue JS

composer create-project laravel/laravel laravel-openai-api

cd laravel-openai-api

composer require laravel/breeze --dev

php artisan breeze:install vue

php artisan migrate npm install npm run dev




Thank You, Happy Reading ❤️ 🦄

Top comments (0)