Digital art creation has a high barrier to entry. While many people have creative ideas, turning a simple sketch into a polished, high-quality piece of art requires technical skill, expensive software, and significant time. Existing AI art tools can be a solution, but they often impose restrictive guardrails, operate as black boxes, and offer limited flexibility, stifling true creative freedom. How can we empower everyday users to bring their most imaginative visions to life, without needing to be a professional artist?
Neon Canvanies is a web-based drawing application that bridges the gap between imagination and creation. It provides an intuitive canvas for users to sketch their ideas and leverages a suite of autonomous AI agents, powered by Google's Gemini model, to transform those sketches into stunning, production-quality artwork.
Our solution is built on two core principles:
- Creative Freedom: We use powerful generative AI to give users maximum creative control. Users can select from predefined styles, write their own custom prompts with "Dream-Mode," and even use an AI assistant to refine and enhance their creative ideas.
- Decentralized Integration: The application includes a full-featured design marketplace integrated with the BlockDAG (BDAG) Testnet. This allows users to post jobs, hire designers, and manage payments securely on the blockchain using the Thirdweb SDK and a non-custodial wallet like MetaMask.
Welcome to your very own corner of the internet for creating dazzling cyberpunk masterpieces. Think flying cars, rainy cityscapes, and glowing neon signs... but you're the one creating the art!
+--------------------------------+ +------------------------+ +-----------------------+
| User's Browser | | | | |
| | | [🦊 MetaMask Wallet] | | [BlockDAG Testnet] |
| [🎨 Neon Canvanies Frontend] |<---->| (User's Keys) |<---->| (Smart Contracts) |
| (Next.js, React, Thirdweb) | | | | |
+----------------|---------------+ +------------------------+ +-----------------------+
|
| (HTTP API Calls)
|
+----------------v---------------+ +------------------------+ +-----------------------+
| [⚡ Genkit AI Backend] | | | | |
| (Orchestrates AI Flows) |----->| [🤖 Google Gemini API] | | [🧠 Akash Chat API] |
| | | (Image Generation) | | (Prompt Refinement) |
+--------------------------------+ +------------------------+ +-----------------------+
Our application uses a modern web stack with a Next.js frontend and a Genkit backend that orchestrates calls to the Google Gemini and Akash Chat APIs. Here’s how you can get started:
- Frontend: A responsive Next.js application with React, ShadCN components, and Tailwind CSS provides an intuitive and visually rich user experience.
- Backend AI Flows: We use Genkit, an open-source AI framework, to define our AI logic. These server-side flows handle prompt construction, interact with the Gemini API for image generation, and call the Akash Chat API for prompt refinement.
- Wallet & Blockchain: The frontend integrates the Thirdweb SDK to connect to users' MetaMask wallets and interact with custom Solidity smart contracts deployed on the BlockDAG Testnet.
- Intuitive Drawing Toolkit: A fully-featured canvas with essential tools to capture your ideas, including a paintbrush, eraser, color picker, and controls for brush size and opacity. You can also import existing images to edit or export your final creations.
- Agentic AI Art Generation: An AI flow that intelligently interprets user sketches and prompts to generate high-quality images. It can operate in two modes:
- AI Styles: Select from curated styles (Cyberpunk, Anime, Fantasy, Chibi, Realistic) to instantly transform your sketch.
- Dream-Mode: Describe a unique vision with a custom text prompt, giving you complete control over the output. The AI is instructed to use the drawing for composition but prioritize the theme of your prompt.
- AI-Powered Prompt Refinement: To enhance creative control, we have integrated the Akash Chat API, which leverages a 120-billion parameter open-source AI model (
gpt-oss-120b). This dedicated agent takes a user's simple idea and fleshes it out into a more descriptive and evocative prompt, maximizing the quality of the generated art. - Decentralized Design Marketplace: The marketplace page enables users to showcase and monetize their skills by providing a visually engaging space integrated with Web3 features.
- Post Jobs & Hire Talent: Clients can post design jobs with budgets specified in BDAG.
- Blockchain Payments: The marketplace is powered by a custom Solidity smart contract on the BlockDAG Testnet, handling designer registration and job payments in BDAG.
- Wallet Integration: Securely connect your MetaMask wallet to the BlockDAG Testnet to interact with the marketplace.
During development, the team faced several challenges, including:
- Complex Integrations: Ensuring seamless user interactivity while integrating advanced AI flows across multiple frameworks (Next.js, Genkit, Thirdweb SDK).
- Dependency Management: Managing dependency conflicts and ensuring compatibility across a diverse tech stack (TypeScript, Python, Solidity).
- Decentralized Architecture: Working through the complexities of blockchain interaction, including secure client-side wallet connections and smart contract development.
- Prompt Engineering: Maintaining high prompt quality for AI art generation and refinement to ensure consistently impressive results.
- Balancing Act: Striking the right balance between an intuitive user experience (UX) and building a scalable, robust application.
- NFT Minting: Allow users to mint their AI-generated artwork as NFTs directly from the application.
- Token-Gated Access: Introduce special features or exclusive access for users holding specific tokens or NFTs.
- Advanced Marketplace Features: Implement a rating system, milestone-based payments, and a more sophisticated dispute resolution mechanism for the design marketplace.
- Community Hub: Build a gallery or community space where users can share their creations, follow their favorite artists, and participate in creative challenges.