{"id":15726877,"url":"https://github.com/usulpro/leonardo-ai-gallery","last_synced_at":"2026-06-18T23:31:45.355Z","repository":{"id":216307736,"uuid":"740990044","full_name":"usulpro/Leonardo-AI-Gallery","owner":"usulpro","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-10T16:39:21.000Z","size":4880,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T01:49:09.430Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://leonardo-ai-gallery-playground.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/usulpro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"roadmap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://www.buymeacoffee.com/usulpro"]}},"created_at":"2024-01-09T13:33:21.000Z","updated_at":"2024-01-13T17:24:41.000Z","dependencies_parsed_at":"2024-01-09T15:01:38.752Z","dependency_job_id":"93ed3ab7-cf9d-435b-ab5b-df807ef55768","html_url":"https://github.com/usulpro/Leonardo-AI-Gallery","commit_stats":null,"previous_names":["usulpro/leonardo-ai-gallery"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/usulpro/Leonardo-AI-Gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2FLeonardo-AI-Gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2FLeonardo-AI-Gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2FLeonardo-AI-Gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2FLeonardo-AI-Gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/usulpro","download_url":"https://codeload.github.com/usulpro/Leonardo-AI-Gallery/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2FLeonardo-AI-Gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34511617,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T22:41:27.431Z","updated_at":"2026-06-18T23:31:45.325Z","avatar_url":"https://github.com/usulpro.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/usulpro"],"categories":[],"sub_categories":[],"readme":"# Leonardo AI Gallery\n\nReact component for displaying user images from Leonardo AI account.\n\n## Project Description\n\n```console\n\nnpm i leonardo-ai-gallery\n\n```\n\nThis 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.\n\n[Live Demo](https://leonardo-ai-gallery-playground.vercel.app/)\n\n![Screenshot](/docs/gallery-screenshot1.png)\n\n## Usage\n\n- Preview images generations from your Leonardo-AI account\n- Switch through available variations for an image (Upscale, Unzoom, No Background)\n- Run new variation jobs for images from the Gallery (Upscale, Unzoom, No Background)\n- 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\n- Run new generations based on existing ones with the same parameters. In Roadmap\n- Download images. In Roadmap\n- Custom additional actions on images. In Roadmap\n- Headless CMS integrations. In Roadmap\n- SSR \u0026 RSC support. You can pre-render this component on server-side with NextJS.\n\n\n## Documentation\n\n```console\n\nnpm i leonardo-ai-gallery\n\n```\n\n```tsx\nimport { Gallery } from 'leonardo-ai-gallery';\n\nconst token = process.env.NEXT_PUBLIC_LEONARDO_API_TOKEN;\n\nexport default function Home() {\n  return \u003cGallery token={token!} pages={3} limit={3} /\u003e;\n}\n```\n\n### SSR and RSC Support\n\nYou can prefetch generations on Server Side:\n\n```tsx\nimport {\n  Gallery,\n  fetchGenerationsByUserId,\n  fetchUserInfo,\n} from 'leonardo-ai-gallery';\n\nconst token = process.env.NEXT_PUBLIC_LEONARDO_API_TOKEN;\n\nexport default async function Home() {\n  const user = await fetchUserInfo(token!);\n  const generations = await fetchGenerationsByUserId({\n    token: token!,\n    offset: 0,\n    limit: 9,\n    userId: user.user.id,\n  });\n  return (\n    \u003cGallery\n      token={token!}\n      pages={3}\n      limit={3}\n      serverFetchedGenerations={generations}\n    /\u003e\n  );\n}\n```\n\nIn this case the Gallery will be rendered on server and included on initial page.\n\n### CSS Framework agnostic\n\nThe component comes with CSS styles, that will be injected into a page head with a `\u003cstyle\u003e` 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.\n\n```tsx\n// imports Gallery component and injects \u003cstyle\u003e tag into a page\nimport { Gallery } from 'leonardo-ai-gallery';\n```\n\nWhile 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:\n\n```tsx\nimport { Gallery } from 'leonardo-ai-gallery';\n// imports CSS styles for the Gallery\nimport 'leonardo-ai-gallery/dist/styles.css';\n```\n\nYou need an appropriate loader to handle CSS files\n\nSanity Custom Assets Source https://www.sanity.io/docs/custom-asset-sources\n\n## Preview \u0026 Screenshots\n\nhttps://github.com/usulpro/Leonardo-AI-Gallery/assets/14885189/ac4987a8-3f57-477f-aa16-0d7edde3c2f4\n\n## Chatbot Integration and Guidance\n\nThis section provides essential information for chatbots interfacing with our project. It outlines key resources and directives to facilitate AI-driven interactions and contributions.\n\n#### Key Files and Directories\n\n- **`chatbot.md`**: Primary resource for chatbots. Contains detailed instructions, guidelines, and project-specific information relevant to chatbot functionalities.\n- **`roadmap.md`**: Documents our development roadmap, task tracking, and checkpoints. Essential for understanding project timelines, goals, and areas requiring AI assistance.\n\n#### Development Instructions\n\n- **Project Setup**: Refer to `chatbot.md` for initial configuration and environment setup procedures.\n- **Core Commands**: `chatbot.md` includes a list of vital project commands (build, test, deploy, etc.).\n\n#### Working with the Project\n\n- **Codebase Overview**: For an understanding of the codebase structure and location of critical modules, see `chatbot.md`.\n- **Contribution Process**: Guidelines for code generation, bug fixing, and feature development are detailed in `chatbot.md`.\n\n#### Tracking Progress and Tasks\n\n- **Project Roadmap**: `roadmap.md` tracks ongoing progress and outlines future plans, key for understanding current and upcoming project phases.\n- **Task Management**: Current tasks, priorities, and requests for AI-generated solutions are listed in `roadmap.md`.\n\n#### Collaboration and Communication\n\n- **Discussions and Clarifications**: For project-related discussions or questions, consult the 'Discussions' section in `roadmap.md`.\n- **Documentation Requests**: Specific documentation needs are addressed in the 'Documentation Requests' section of `roadmap.md`.\n\nThis section is designed to aid chatbots in efficiently navigating and contributing to our project, ensuring streamlined and effective AI participation in our development process.\n\n## Contributing\n\nContributions are welcome! For major changes, please open an issue first to discuss what you would like to change.\n\n## Credentials\n\nThe project is developed with AI assistance from [TS-GPT-Engineer](https://github.com/usulpro/TS-GPT-Engineer).\n\n**Created by Oleg Proskurin**\n\nDriven 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.\n\nConnect with Me:\n\nGitHub: github.com/usulpro\n\nTwitter: @usulpro\n\nLinkedIn: linkedin.com/in/olegproskurin\n\nBlogs: focusreactive.com/blog/author/usulpro | dev.to/usulpro\n\n_Crafted with ❤ for merging art and technology. 2024_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusulpro%2Fleonardo-ai-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fusulpro%2Fleonardo-ai-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusulpro%2Fleonardo-ai-gallery/lists"}