Components > Prompt Input

page.tsx

import { PromptInput } from "@/components/app-components";

A fully fledged and customizable prompt input component that can be used to take user input, change strength of the various sections of the prompt and trigger generating images based on the prompt.

Also supports negative prompts 🤩 Perfect for apps that generate images based on user prompts!

Usage

To use the PromptInput component, you need to manage its state from a parent component, handling both the weighted prompts and the negative prompt.

page.tsx

  import React, { useState } from 'react';
  import PromptInput from './PromptInput';

  export const PromptInputDemo = () => {
    const [prompts, setPrompts] = useState([]);
    const [negativePrompt, setNegativePrompt] = useState("");

    return (
      <div className="...">
        <PromptInput
          negativePrompt={negativePrompt}
          setNegativePrompt={setNegativePrompt}
          prompts={prompts}
          setPrompts={setPrompts}
          onClick={() => alert("generate clicked")}
        />
      </div>
    );
  };
  

Weighted Prompts Format

The prompts state should be an array of objects, each representing a part of the prompt with an associated importance level.

prompts.ts

  [
    {"text": "text part", "importance": importance level},
    ...
  ]

Importance Levels:

-> 0: Normal importance.
-> 1: Medium importance.
-> 2: High importance.

Converting it to weighted prompt

Most of the generative image AI models use a weighted prompt syntax for the input.
Ex: penguin (holding:1.1) (a beer:1.3)

You can implement a utility function to achieve desired output like following:

prompt-utils.ts

  function convertWeightedPromptsToString(prompts) {
    // Map each prompt to a string, adding the importance directly without modification
    const promptStrings = prompts.map(prompt => {
      if (prompt.importance === 0) {
        return prompt.text; // No importance shown for 0
      }
      // Adjusting the importance format as per your requirement
      const adjustedImportance = prompt.importance === 1 ? "1.1" : "1.3";
      return `(${prompt.text}:${adjustedImportance})`;
    });
  
    // Join all prompt strings into one, separating them by spaces
    return promptStrings.join(" ");
  }
  
  // Usage example
  const weightedPrompts = [
    { text: "penguin", importance: 0 },
    { text: "holding", importance: 1 },
    { text: "a beer", importance: 2 }
  ];
  
  const outputString = convertWeightedPromptsToString(weightedPrompts);
  console.log(outputString);
  // penguin (holding:1.1) (a beer:1.3)