DEV Community

Cover image for Design0: Effortless Design for Everyone
ppaanngggg
ppaanngggg

Posted on

Design0: Effortless Design for Everyone

This is a submission for the Open Source AI Challenge with pgai and Ollama

What I Built

As a non-professional designer seeking to create attractive posts and cover images for my blogs and projects, I envisioned a tool that would allow me to select a base image, highlight specific areas, and use natural language to instruct AI on desired edits, overcoming the unpredictability of current text-to-image generators.

Enter Design0β€”an AI-powered design tool I built to simplify image editing with natural language commands. Using Design0, you can search an image database by description (I've included 5,000 free Unsplash images for this demo). Once you've found your image, simply drag and drop to mask areas for editing, then write prompts describing your desired changes. Click "Edit" and watch the magic unfold! πŸŽ‰

Demo

Website

https://design0.app

Source Code

https://github.com/ppaanngggg/design0

Screenshots

  1. Search for the base image you want

    homepage

  2. Select the area you want to edit, then enter your prompt

    edit and prompt

  3. Click "Edit" and wait for the new image to generate

    final image

Tools Used

  1. pgvector: I use pgvector to store image embeddings as vector data types. I also added an HNSW index on the embeddings to accelerate search performance.

    CREATE TABLE IF NOT EXISTS images
    (
        id          varchar PRIMARY KEY,
        url         varchar,
        category    varchar,
        description varchar,
        embedding   vector(768)
    );
    
    CREATE INDEX IF NOT EXISTS images_embedding_idx ON images
        USING hnsw (embedding vector_cosine_ops);
    
  2. pgai: I use pgai to invoke Ollama's embed API and search for images based on the distance between embeddings.

    sql = f"SELECT id,url,category,description,embedding<=>ai.ollama_embed('nomic-embed-text', %s, host=>'{conf.ollama_host}') as distance FROM images"
    
  3. Ollama: I use Ollama to host the state-of-the-art, compact text embedding model nomic-embed-text. This model embeds both image descriptions and user queries, allowing us to search for images that match users' requirements.

Final Thoughts

This demo showcases my 2D image design tool. I aim to develop it into a fully functional SaaS platform, empowering non-professional users to create stunning designs on their own.

I use Ollama to host the embedding model, which qualifies me for the 'Open-source Models from Ollama' prize.

Top comments (0)