AI Image Generator

AI Image Generator is an npm package that allows you to search for images based on a textual prompt using the Shree AI API. It can be easily integrated into Node.js and React projects, providing a simple way to fetch and display images based on user input.

Table of Contents

• Features
• Installation
• Usage
  • Node.js Usage
  • React Usage
• API
  • generateImage(prompt)
• Configuration
• CSS Styles
• License
• Contributing
• Support

Features

• Generate images based on textual prompts using the Google Custom Search API.
• Easy integration with Node.js and React applications.
• Includes CSS styles for a consistent look and feel.

Installation

To install the package, run the following command in your project directory:

npm install ai-image-generator

Usage
Node.js Usage
Here's a basic example of how to use the ai-image-generator package in a Node.js application:

Require the package and use it in your script:

javascript:
const { generateImage } = require('ai-image-generator');

generateImage('a sunset over a mountain').then(images => {
    console.log(images);
    // Output will be an array of image objects with title and link
}).catch(error => {
    console.error('Error generating images:', error.message);
});
React Usage
If you're using React, follow these steps to integrate the package:

Import the package and the CSS file:

javascript:
import React, { useState } from 'react';
import { generateImage } from 'ai-image-generator';
import 'ai-image-generator/styles/aiImgStyles.css';
Create a React component to use the package:

javascript:
const ImageGenerator = () => {
    const [prompt, setPrompt] = useState('');
    const [images, setImages] = useState([]);

    const handleSearch = async (event) => {
        event.preventDefault();
        try {
            const results = await generateImage(prompt);
            setImages(results);
        } catch (error) {
            console.error('Error generating images:', error.message);
        }
    };

    return (
        <div className="aiImg-body">
            <header className="aiImg-header">
                <img src="shree.jpg" alt="Shree" className="aiImg-shree-img" />
                <span className="aiImg-span">Shree</span><strong className="aiImg-strong"> AI</strong>
            </header>
            <div className="aiImg-main">
                <form onSubmit={handleSearch} className="aiImg-form">
                    <input
                        type="text"
                        id="prompt"
                        name="prompt"
                        placeholder="Describe what you'd like to create"
                        required
                        className="aiImg-input"
                        value={prompt}
                        onChange={(e) => setPrompt(e.target.value)}
                    />
                    <button type="submit" className="aiImg-button">Search</button>
                </form>
                <div className="aiImg-imageResults">
                    {images.map((image, index) => (
                        <div key={index} className="aiImg-image-container">
                            <img src={image.link} alt={image.title} className="aiImg-img" />
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default ImageGenerator;
Use the component in your application:

javascript:
import React from 'react';
import ReactDOM from 'react-dom';
import ImageGenerator from './ImageGenerator';

ReactDOM.render(<ImageGenerator />, document.getElementById('root'));
API
generateImage(prompt)
Description: Generates images based on the provided prompt using the Google Custom Search API.
Parameters:
prompt (string): The textual description of the image you want to generate.
Returns: A Promise that resolves to an array of image objects, each containing:
title (string): The title of the image.
link (string): The URL link to the image.
Example Response
[
  {
    title: 'Sunset over the Great Balsam Mountains',
    link: 'https://example.com/sunset.jpg'
  },
  {
    title: 'Mountain Sunset',
    link: 'https://example.com/mountain-sunset.jpg'
  }
]
Configuration
To configure the package, you need to set up your Shree API credentials. Replace the placeholders in your code with your actual API key and Search Engine ID.

CSS Styles
The package includes the following CSS styles for use with your React components. The styles are located in styles/aiImgStyles.css.

.aiImg-body: Base styles for the body.
.aiImg-header: Styles for the header section.
.aiImg-shree-img: Styles for the header image.
.aiImg-span, .aiImg-strong: Styles for text in the header.
.aiImg-main: Styles for the main content area.
.aiImg-form, .aiImg-input, .aiImg-button: Styles for the form and input elements.
.aiImg-imageResults, .aiImg-image-container, .aiImg-img: Styles for displaying image results.
.aiImg-sticky-search: Styles for the sticky search bar.
.aiImg-floating-btn: Styles for the floating button.
License
This project is licensed under the MIT License. See the LICENSE file for details.

Contributing
Contributions are welcome! If you have suggestions or improvements, please fork the repository and submit a pull request. For major changes, please open an issue first to discuss what you would like to change.

Support
If you encounter any issues or have questions, please open an issue on the GitHub repository.

Feel free to adjust or add any details to suit your specific needs and project requirements.