Image Text Fuser

Image Text Fuser

Try it in the Widget Center

Click this url to try this widget and copy the Pro Config template.

Usage

The widget configuration is specified in JSON format within the config field:

{
  "template_path": "https://image.myshell.ai/image/chat/embed_obj/7758545/202407151553/shell-identity-03.jpg",
  "font": "Oswald-Regular.ttf",
  "boxes": [
    {
      "text": "some text here",
      "position": [760, 140],
      "size": [390, 230],
      "font_size": 56,
      "font": "Caveat-Regular.ttf"
    },
    {
      "text": "somte other text here",
      "position": [815, 470],
      "size": [415, 200],
      "font_size": 72,
      "font": "KronaOne-Regular.ttf"
    }
  ]
}

Parameters

  1. template_path: URL of the base image template.

  2. font: Default font for text (e.g., "Oswald-Regular.ttf").

  3. emoji_source: Source for emoji images. This attribute determines the source of emoji images used in the generated content. Each source provides a different style or set of emoji images. Can be one of the following (default to TwitterEmojiSource):

HTTPBasedSource, DiscordEmojiSourceMixin, EmojiCDNSource,
TwitterEmojiSource, AppleEmojiSource, GoogleEmojiSource, 
MicrosoftEmojiSource, FacebookEmojiSource, MessengerEmojiSource,
EmojidexEmojiSource, JoyPixelsEmojiSource, SamsungEmojiSource,
WhatsAppEmojiSource, MozillaEmojiSource, OpenmojiEmojiSource,
TwemojiEmojiSource, FacebookMessengerEmojiSource, Twemoji, Openmoji

  1. boxes: An array of text and image box configurations.

Text Box Configuration

Each text box in the boxes array can have the following properties:

  • text: Content to be displayed.

  • position: [x, y] coordinates for the top-left corner of the text box.

  • size: [width, height] of the text box.

  • font_size: Size of the font in pixels.

  • font: Specific font for this text box (overrides the default font).

  • outline_color: Specific the outline color of the text.

  • color: Color of the text. Can be specified as a hex code (e.g., "#FF0000")

  • underline: Whether to add underline for the text (true/false).

  • text_align: Horizontal alignment of the text within the text box. Options include "left", "center", or "right".

  • vertical_align: Vertical alignment of the text within the text box. Options include "top", "center", or "bottom".

  • z_index: Determines the stacking order of elements. Higher values are drawn on top of elements with lower values.

  • emoji_position_offset: A float value used to adjust the vertical position of emojis. The actual offset is calculated by multiplying emoji_position_offset with the line height. Positive values move emojis down, while negative values move them up. For example, 0.2 will move emojis down by 20% of the line height, while -0.1 will move emojis up by 10% of the line height.

Image Box Configuration

Each image box in the boxes array can have the following properties:

  • image: URL or path of the image to be added.

  • position: [x, y] coordinates for the top-left corner of the image.

  • size: [width, height] to which the image should be resized.

  • rotation: The rotation angle of the image.

Usage

  1. The widget uses the specified template image as a base.

  2. It then overlays text onto this image according to the boxes configuration.

  3. Text content can be dynamically populated using variables (e.g., {{random_text}}, {{context.user_name}}).

Input Parameters

Output Parameters

Output Example

{
  "url": "https://object-storage-16oh.lepton.ai/ws-k8d7q1rw/wojak/output/3acf63b5f6f148208ab4d02b0482d72d.png"
}

Notes

  • The supported fonts now: Oswald-Bold.ttf, Oswald-Regular.ttf, KronaOne-Regular.ttf, Caveat-Regular.ttf

  • Ensure that all specified fonts are available in the system where the widget is running.

  • The {{random_text}} and {{context.user_name}} placeholders should be replaced with actual values before processing.

  • Adjust text and image box sizes and positions as needed.

  • When configuring this widget in a pro config, the entire config object needs to be written as a single line with proper escape characters. For example:

{
  "name": "any_module_example_task",
  "module_type": "AnyWidgetModule",
  "module_config": {
    "widget_id": "1812381775823757312",            
    "config": "{\"template_path\": \"https://image.myshell.ai/image/chat/embed_obj/7758545/202407151553/shell-identity-03.jpg\", \"font\": \"Oswald-Regular.ttf\", \"boxes\": [{\"text\": \"some text here\", \"position\": [760,140], \"size\": [390,230], \"font_size\": 56, \"font\": \"Caveat-Regular.ttf\"}, {\"text\": \"some other text here\", \"position\": [815,470], \"size\": [415,200], \"font_size\":72, \"font\": \"KronaOne-Regular.ttf\"}]}",
    "output_name": "output_image"
  }
}
PreviousGroundedSAMNextInformation Extractor - OpenAI Schema Generator

Last updated