Leonardo AI Gallery

React component for displaying user images from Leonardo AI account.

Project Description

npm i leonardo-ai-gallery

This project is a React component that integrates with the Leonardo AI platform. It provides functionalities for fetching and displaying user-generated images, image variants, and manually launching generation jobs.

Live Demo

Usage

• Preview images generations from your Leonardo-AI account
• Switch through available variations for an image (Upscale, Unzoom, No Background)
• Run new variation jobs for images from the Gallery (Upscale, Unzoom, No Background)
• Select available variation as a base for generation a new variation, e.g. you can sequentially unzoom several times to get a significant cumulative effect
• Run new generations based on existing ones with the same parameters. In Roadmap
• Download images. In Roadmap
• Custom additional actions on images. In Roadmap
• Headless CMS integrations. In Roadmap
• SSR & RSC support. You can pre-render this component on server-side with NextJS.

Documentation

npm i leonardo-ai-gallery

import { Gallery } from 'leonardo-ai-gallery';

const token = process.env.NEXT_PUBLIC_LEONARDO_API_TOKEN;

export default function Home() {
  return <Gallery token={token!} pages={3} limit={3} />;
}

SSR and RSC Support

You can prefetch generations on Server Side:

import {
  Gallery,
  fetchGenerationsByUserId,
  fetchUserInfo,
} from 'leonardo-ai-gallery';

const token = process.env.NEXT_PUBLIC_LEONARDO_API_TOKEN;

export default async function Home() {
  const user = await fetchUserInfo(token!);
  const generations = await fetchGenerationsByUserId({
    token: token!,
    offset: 0,
    limit: 9,
    userId: user.user.id,
  });
  return (
    <Gallery
      token={token!}
      pages={3}
      limit={3}
      serverFetchedGenerations={generations}
    />
  );
}

In this case the Gallery will be rendered on server and included on initial page.

CSS Framework agnostic

The component comes with CSS styles, that will be injected into a page head with a <style> tag as component code is loaded. That means you don't need to push any additional effort to inject CSS styles for the component, styles will be loaded automatically on hydration step.

// imports Gallery component and injects <style> tag into a page
import { Gallery } from 'leonardo-ai-gallery';

While in most scenarios this would be enough, you might want to insert CSS directly into a page on the server side. For that you can import styles.css from the package:

import { Gallery } from 'leonardo-ai-gallery';
// imports CSS styles for the Gallery
import 'leonardo-ai-gallery/dist/styles.css';

You need an appropriate loader to handle CSS files

Sanity Custom Assets Source https://www.sanity.io/docs/custom-asset-sources

Preview & Screenshots

LeonardoAI-Gallery-demo.mov

Chatbot Integration and Guidance

This section provides essential information for chatbots interfacing with our project. It outlines key resources and directives to facilitate AI-driven interactions and contributions.

Key Files and Directories

• chatbot.md: Primary resource for chatbots. Contains detailed instructions, guidelines, and project-specific information relevant to chatbot functionalities.
• roadmap.md: Documents our development roadmap, task tracking, and checkpoints. Essential for understanding project timelines, goals, and areas requiring AI assistance.

Development Instructions

• Project Setup: Refer to chatbot.md for initial configuration and environment setup procedures.
• Core Commands: chatbot.md includes a list of vital project commands (build, test, deploy, etc.).

Working with the Project

• Codebase Overview: For an understanding of the codebase structure and location of critical modules, see chatbot.md.
• Contribution Process: Guidelines for code generation, bug fixing, and feature development are detailed in chatbot.md.

Tracking Progress and Tasks

• Project Roadmap: roadmap.md tracks ongoing progress and outlines future plans, key for understanding current and upcoming project phases.
• Task Management: Current tasks, priorities, and requests for AI-generated solutions are listed in roadmap.md.

Collaboration and Communication

• Discussions and Clarifications: For project-related discussions or questions, consult the 'Discussions' section in roadmap.md.
• Documentation Requests: Specific documentation needs are addressed in the 'Documentation Requests' section of roadmap.md.

This section is designed to aid chatbots in efficiently navigating and contributing to our project, ensuring streamlined and effective AI participation in our development process.

Contributing

Contributions are welcome! For major changes, please open an issue first to discuss what you would like to change.

Credentials

The project is developed with AI assistance from TS-GPT-Engineer.

Created by Oleg Proskurin

Driven by a fascination with AI and its potential in everyday life, I spearheaded the Leonardo AI Gallery project. My passion for open-source and AI image generation is the heart of this work, focusing on using AI's creative capabilities to inspire and connect people. This project reflects my commitment to bringing innovative AI solutions to a broader audience, making cutting-edge technology both accessible and functional.

Connect with Me:

GitHub: github.com/usulpro

Twitter: @usulpro

LinkedIn: linkedin.com/in/olegproskurin

Blogs: focusreactive.com/blog/author/usulpro | dev.to/usulpro

Crafted with ❤ for merging art and technology. 2024