Components > Prompt Input

YourComponent.vue

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

A complete and customizable prompt input component that lets you take user input, adjust the strength of different parts of the prompt, and generate images based on the prompt.

It also supports negative prompts 🤩 Ideal for apps that create images based on user prompts!

NuxtJs Negative Prompt Input for AI Apps

Usage

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

YourCustomComp.vue

<template>
  <PromptInput v-model:negative-prompt="negativePrompt" :prompt="prompt" @update:prompts="handleUpdatePrompts"
      class="max-[567px]:flex-col w-full" @click="handleClick" />
</template>
<script setup lang="ts">
import { PromptInput } from '@/components/app';

const negativePrompt = ref('');
const prompt = ref('');
const handleClick = () => alert("Generate clicked");
const handleUpdatePrompts = (prompts: { text: string; importance: number }[]) => console.log('prompts', prompts);
</script>

Weighted Prompts Format

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

prompts.ts

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

Importance Levels:

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

Converting it to weighted prompt

Many generative image AI models use a weighted prompt syntax for their input.
Ex: dog (barking:1.1) near (a beer:1.3)

You can create a utility function to get the desired output, like the 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)