Visual Prompt Generator for React and Svelte

Improve the user experience and value of your DALL·E blog by integrating an interactive visual prompt generator. With the help of app created in React and Svelte, you can let your users visually generate prompts to come up with different ideas.

This app comes with the following features:

• Multiple framework support: The package includes code for the <PromptGenerator /> component written in Svelte and React, meaning you’ll get two different implementation with this product.
• Configurable: Pass your translations and options to your <PromptGenerator /> component through props to configure the app:

// Import the relevant component
import { PromptGenerator } from '@components/PromptGenerator.tsx'
import PromptGenerator from '@components/PromptGenerator.svelte'

// Call the component with the following props
<PromptGenerator
    title="DALL·E"
    inputPlaceholder="Enter your main prompt"
    label="Active styles"
    promptLabel="Generated prompt"
    characterCount="Remaining characters:"
    disclaimer="DALL·E has a maximum character limit of 480"
    clearCTALabel="Clear all styles"
    tabs={['Art style', 'Color scheme', ...]}
    styles={[{ '8-bit': '8 Bit' }]} // Override default styles
    colors={[{ '#800000': 'Maroon' }]} // Override default color schemes
    medium={[{ ... }]} // Override default medium
    lighting={[{ ... }]} // Override default lighting
    composition={[{ ... }]} // Override default compositions
    texture={[{ ... }]} // Override default textures
    material={[{ ... }]} // Override default materials
/>

• Easy to style: Styles can be configured via Sass variables through the stylesheet provided with the app.
• Responsive: The layout is fully responsive that adapts perfectly for all device resolutions like mobiles, tablets and desktops.
• Cross-browser support: The components were tested on major browsers (Chrome, Firefox, and Edge) to ensure cross-browser compatibility.