# Image Text Fuser

## Try it in the Widget Center

Click this [url](https://app.myshell.ai/robot-workshop/widget/1812381775823757312) to try this widget and copy the Pro Config template.

## Usage

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

```json
{
  "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):

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

3. **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**

<table><thead><tr><th>Name</th><th>Type</th><th>Description</th><th>Default</th><th data-type="checkbox">Required</th></tr></thead><tbody><tr><td>config</td><td><code>string</code></td><td>The configuration of the image text fuser</td><td></td><td>true</td></tr></tbody></table>

**Output Parameters**

| Name | Type     | Description                 | File Type |
| ---- | -------- | --------------------------- | --------- |
| url  | `string` | The url of the output image |           |

**Output Example**

{% tabs %}
{% tab title="success" %}
{% code fullWidth="false" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

### 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:

```json
{
  "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"
  }
}
```