Promptify is a React-based web application integrated with an Express.js server to generate AI-driven images using the Hugging Face Stable Diffusion API. The project aims to provide an intuitive user interface for generating and viewing AI-generated images in real time.
- Allows users to enter a text description (prompt) for generating an image.
- Displays status updates such as:
- "Initializing..."
- "Generating your image..."
- Provides error messages if image generation fails.
- Displays the generated image or a placeholder if no prompt is provided.
- UI Design:
- A clean, responsive interface.
- Background image with a blurred container for the form.
- Shadowed text for better readability.
- Form:
- Input field for the prompt.
- A button to trigger the image generation.
- Loading and disabled states to prevent multiple submissions.
- Uses inline styling for components:
- Backdrop blur and rounded edges for a polished look.
- Real-time visual feedback (e.g., button states) to enhance user experience.
- Sends a
POSTrequest to the/generate-imageendpoint. - Passes the prompt as JSON in the request body.
- Listens for
POSTrequests at the/generate-imageendpoint. - Interacts with Hugging Face's Stable Diffusion API to generate images based on the prompt.
- Converts the binary image data to a base64 URL format to send back to the frontend.
- API:
- Uses the Hugging Face model
stabilityai/stable-diffusion-xl-base-1.0. - Requires an API key stored in environment variables (
HUGGINGFACE_API_KEY).
- Uses the Hugging Face model
- Image Handling:
- Converts binary image data into a base64 string for display.
- Handles API call errors and sends descriptive error responses to the client.
- Logs issues on the server side for debugging.
- Express.js: Framework for server setup.
- Axios: Library for making HTTP requests to the Hugging Face API.
- Middleware:
cors: Enables cross-origin requests.express.json: Parses incoming JSON payloads.
Promptify is an AI image generation application that combines a React-based frontend with an Express.js backend. It leverages the Hugging Face API for seamless generation of AI-driven images, focusing on a user-friendly interface and robust backend error handling.