Image Prompt Modal

Image generation prompt modal with enhancement options and AI-powered editing. Perfect for AI image generation, enhancement workflows, and interactive image editing.

Features

Side-by-side image comparison (original vs enhanced)
AI prompt input with Enter key support
Quick enhancement action buttons
AI Beta tag indicator
Download and retry actions
Large modal size for better image viewing

Examples

Basic Image Prompt

AI Image Enhancement

Click the button below to open the image prompt modal. You can enhance images, adjust settings, and interact with AI-powered features.

With Enhanced Image

View Enhanced Result

See the before and after comparison of your enhanced image.

Usage

import { ImagePromptModal } from '@/components/ui/templates/modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  
  const handleEnhancement = (action: EnhancementAction) => {
    console.log('Enhancement action:', action)
    // Process enhancement
  }
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Enhance Image
      </Button>
      
      <ImagePromptModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed

Enhancement Actions

The modal includes built-in enhancement actions that users can trigger:

Adjust lighting - Improve image brightness and contrast
Remove Background - Extract subject from background
Improve image quality - Enhance overall image sharpness and clarity

Key Features

Image Comparison

Side-by-side display of original and enhanced images for easy comparison.

AI Prompt Input

Natural language input for requesting specific image enhancements or edits.

Quick Actions

One-click enhancement buttons for common image editing tasks.

Download & Retry

Easy download of enhanced images and option to regenerate with new prompts.