EDIJI

EDIJI: Fully AI-powered image creation and editing on an infinite canvas. Generate stunning visuals from text, enhance images, and organize your work. Perfect for artists, designers, and all creatives

Comment

EDIJI - AI-Powered Image Creation and Editing Application

Inspiration

The inspiration behind EDIJI stemmed from the desire to bridge the gap between powerful AI image generation capabilities and a truly intuitive, flexible creative workspace. We envisioned a tool where users could not only conjure stunning visuals from text prompts but also seamlessly organize, manipulate, and iterate on their creations within an expansive, free-form environment. The goal was to empower artists, designers, and anyone with a creative spark to explore ideas without the constraints of traditional linear workflows, much like a digital whiteboard for visual ideation.

What it does

EDIJI is an AI-powered image creation and editing application featuring an infinite canvas. It allows users to:

  • Generate Images from Text: Transform descriptive text prompts into unique AI-generated images using advanced models.
  • Edit Existing Images: Enhance and modify images with AI capabilities such as background removal and intelligent upscaling.
  • Infinite Canvas: Organize, arrange, and manipulate all generated and uploaded images on an unlimited, zoomable, and pannable workspace. This provides a dynamic environment for visual storytelling and project management.
  • User Authentication & Persistence: Securely manage user accounts and save all created and edited images to the cloud, ensuring work is always accessible.
  • Interactive Image Manipulation: Drag, drop, resize, and delete images directly on the canvas with intuitive controls.

How we built it

EDIJI was built as a modern web application using a combination of robust frontend and backend technologies:

Frontend

The user interface is developed with React and TypeScript, providing a component-based architecture and strong type safety. Tailwind CSS was used for rapid and consistent styling, ensuring a clean and responsive design. Lucide React provided a lightweight and customizable icon set. Vite served as the fast development build tool.

Backend & Database

Supabase was chosen as the backend-as-a-service solution, handling user authentication and providing a PostgreSQL database for storing image metadata (URLs, positions, dimensions, prompts).

AI Services

The core AI functionalities (image generation, editing, background removal, upscaling) are powered by external AI models accessed via Supabase Edge Functions. These Deno-based functions act as secure intermediaries, invoking APIs from FAL.ai (specifically, Bytedance SeedDream 3.0 for generation, FLUX.1 Kontext Pro for editing, and Clarity Upscaler/Rembg for upscaling and background removal). This architecture ensures API key security and handles the asynchronous nature of AI model inference.

Challenges we ran into

Developing EDIJI presented several interesting challenges:

  • Asynchronous AI Processing: Integrating with external AI APIs often involves asynchronous operations that require polling for results. Managing these long-running requests and providing clear loading states to the user was complex.
  • Infinite Canvas State Management: Handling the dynamic state of images (position, dimensions, loading status) on an infinite canvas, along with zoom and pan functionalities, required careful state management in React to ensure smooth performance and responsiveness.
  • Image Manipulation Logic: Implementing intuitive drag-and-drop, resizing (especially maintaining aspect ratios), and other canvas interactions for images was intricate, requiring precise event handling and calculations.
  • Error Handling and User Feedback: Providing meaningful error messages and graceful degradation when AI services encountered issues or network problems was crucial for a good user experience.
  • Supabase Integration: Ensuring secure and efficient data storage and retrieval with Supabase, including proper Row Level Security (RLS) policies, was a key aspect of the backend development.

Accomplishments that we're proud of

  • Seamless AI Integration: Successfully integrated multiple complex AI models from FAL.ai into a cohesive user experience, abstracting away the underlying API complexities.
  • Fluid Infinite Canvas: Created a highly interactive and performant infinite canvas that allows users to freely arrange and visualize their creative assets.
  • Full-Stack Functionality: Built a complete, end-to-end application with user authentication, persistent data storage, and dynamic AI capabilities.
  • Intuitive User Interface: Designed and implemented a clean, modern, and user-friendly interface that makes powerful AI tools accessible.
  • Robust Error Handling: Implemented comprehensive error handling and loading states to provide a smooth and informative user experience even during network delays or AI processing.

What we learned

Throughout the development of EDIJI, we gained valuable insights into:

  • Advanced React State Management: Deepened our understanding of managing complex global and local state in React applications, particularly for interactive canvas-based UIs.
  • Supabase Ecosystem: Learned best practices for leveraging Supabase for authentication, database management, and serverless functions (Edge Functions).
  • AI API Integration Patterns: Gained experience in designing robust integration patterns for external AI services, including handling asynchronous responses and polling mechanisms.
  • Performance Optimization: Explored techniques for optimizing web application performance, especially for graphics-intensive interfaces like the infinite canvas.
  • User Experience Design: Reinforced the importance of clear user feedback, intuitive controls, and graceful error handling in building engaging applications.

What's next for EDIJI

  • More AI Features: Explore integrating additional AI capabilities such as inpainting (filling missing parts of an image), outpainting (extending an image beyond its original borders), and style transfer.
  • Collaborative Canvas: Implement real-time collaboration features, allowing multiple users to work on the same canvas simultaneously.
  • Advanced Canvas Tools: Introduce features like layers, grouping, and alignment tools for more precise image organization.
  • Enhanced Credit System: Develop a more sophisticated credit management system, potentially with different tiers or subscription models.
  • Export Options: Allow users to export their entire canvas or selected sections as a single image file.
  • Mobile Responsiveness: Optimize the application for a seamless experience across various devices, including tablets and mobile phones.

Built With

  • bolt
  • fal
  • supabase
Share this project:

Updates