Homepage
Examples
Visual Idiom Dictionary

Visual Idiom Dictionary

This tool explains English idioms with AI-generated images that show their literal meaning alongside actual definitions.
THE CHALLENGE

Idioms make no sense when you translate them literally

English learners read "break the ice" and picture shattered frozen water. Native speakers use expressions daily without knowing why we "spill the beans" or "let the cat out of the bag." Traditional dictionaries explain idioms with more text, which doesn't help visual learners. Figurative language creates comprehension barriers because the literal words mean something completely different from the intended message.

About this tool

Tool Description

This visual dictionary explains idioms through images. Enter any English expression and get three things: a plain language definition, the historical origin, and an AI-generated image showing the literal interpretation. The visual component creates memory anchors that make idioms easier to recall. Popular phrases load instantly from cached results.

Key Features

AI-generated images for idiom visualization, plain language definitions, historical origin explanations, GIF support for dynamic illustrations, database caching for common phrases, user-submitted idiom requests, and MongoDB storage.

Result

Language learners understand figurative expressions faster with visual context. The gap between literal translation and actual meaning becomes visible and memorable.

Prompts used to build this app

1173 lines of code

💬 6 prompts used

1173 lines of code

🪙 8M tokens

Prompt 
Visual Idiom Dictionary 1

A visual dictionary that instantly translates complex English phrases and idioms into illustrative GIFs or images. By providing immediate visual context, it helps users grasp the true meaning of language beyond literal definitions.

Prompt 
Visual Idiom Dictionary 2

Please implement the entire backend, generating a description of the phrase that user enters, then generating an image based on that description. On the frontend, make sure to show the text once it's generated and show a loader while we wait for the image.

Prompt 
Visual Idiom Dictionary 3

When I enter a phrase, I get an error: searchPhrase2 is not a function - please fix.

Prompt 
Visual Idiom Dictionary 4

When I enter the phrase on the home page, I see the loader but it ends with an error. Please fix. The backend is hanging, please check requireUser to have () parenthesis.

Prompt 
Visual Idiom Dictionary 5

When I tried "break the ice" everything worked but when I try other phrases I get errors. Ok, this works great. Here are the final few issues to fix:

  1. When I scroll down on the page with the results, the SEARCH bar keeps floating - please make it stay in its place.
  2. Please remove the section with "Was this helpful?", Yes, No, Report - all of these buttons are not needed.
  3. For generating an image, please generate an image from the definition and not from the phrase. For example, for a phrase "break the ice", I want to see an image of people in a social setting and not people actually breaking the ice.
  4. Downloading the image doesn't work - please fix.

Prompt 
Visual Idiom Dictionary 6

The images are still showing the actual phrase. For example, now I entered "let the cat out of the bag" and the images are showing cats that are coming out the bag. I don't want that, I want to see images of people avoiding talking about a topic. This is the definition that is returned in a text format from an LLM.

💬 prompts used

🪙 tokens

Share this post
Dark
Light