AI Mandala Art Generator | HTML + CSS + Node.js

The AI Mandala Art Generator with Scoring and Leaderboard is an interactive web-based application that combines Artificial Intelligence (AI) and generative art to create unique mandala designs based on user-inputted prompts. The project leverages the Stable Diffusion API from Hugging Face to generate visually appealing mandala images.

The frontend is developed using React, HTML, CSS, and JavaScript, ensuring a seamless and user-friendly experience. Users provide a textual prompt, which is processed by the backend to generate a mandala image. Regardless of the input prompt, the backend is designed to always incorporate mandala elements into the final output, ensuring the generated image remains aligned with the theme.

Scoring and Leaderboard System Once a mandala is generated, it is evaluated based on predefined artistic parameters:

Prompt Relevance – Measures how closely the generated image matches the given prompt.

Symmetry – Evaluates the balance and proportionality of the mandala design.

Color Harmony – Assesses the aesthetic appeal of color combinations.

Artistic Complexity – Rates the level of detail and intricacy in the artwork.

Overall Quality Score – A final assessment reflecting the artistic and technical excellence of the generated mandala.

These scores are used to update a leaderboard, which ranks users based on the quality of their generated mandalas. The leaderboard dynamically displays the best prompts, images, and scores, fostering a competitive and creative environment.

Backend Architecture The backend is built using React and Express, managing prompt submissions, API communication, and the scoring system. It ensures smooth integration between the user’s input and the mandala generation process. The system is designed to always incorporate mandala art elements into the generated output, regardless of the given prompt, ensuring the artistic integrity of the results.

Key Features

AI-Powered Mandala Generation – High-quality mandala images created from user prompts.

Automated Evaluation and Scoring – Objective assessment based on artistic parameters.

Dynamic Leaderboard – Tracks and ranks top-generated mandalas.

Flexible Prompt Handling – The backend ensures every input integrates mandala art.

Seamless Full-Stack Integration – A React-based frontend with an Express-powered backend.

This project showcases expertise in full-stack development, AI model integration, and automated scoring systems, offering a highly engaging and competitive platform for AI-generated artistic expression.