DEV Community

Cover image for Design0: Effortless Design for Everyone
ppaanngggg
ppaanngggg

Posted on • Edited on

Design0: Effortless Design for Everyone

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

Cover image is designed by Desigin0!

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

GitHub logo design0webapp / design0

Design made easy

Design0

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




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 (8)

Collapse
 
ayushdeveloper profile image
Ayush Deb

This is super awesome , can we connect sometime ?

Collapse
 
ppaanngggg profile image
ppaanngggg

Thanks, of course

Collapse
 
ayushdeveloper profile image
Ayush Deb

are you on discord / linkedin ? can you share your id ? , I am facing some issues , need some help

Thread Thread
 
ppaanngggg profile image
ppaanngggg

discord should be ok, hantianpang. or you can find me by telegram t.me/skyler_ping,

Collapse
 
_bigblind profile image
Frederik πŸ‘¨β€πŸ’»βž‘οΈπŸŒ Creemers

Hi, this looks awesome! What did you use to apply the actual edits?

Collapse
 
ppaanngggg profile image
ppaanngggg

I use ideogram api. By the way, the cover image is design by design0 too!

Collapse
 
tomlin7 profile image
Billy

Amazing idea! super cool!

Collapse
 
ppaanngggg profile image
ppaanngggg

Thank you!