Post Not Found

I suck.

So, yesterday, I went full on working on Template Picker. It sounds so simple. Just hooking up a JSON and dynamically rendering some set of parameters in the Parameter Board.

And for the full day yesterday, I’ve spent time tweaking the Zod Schema and re-tweaking. Luckily, I was able to get to a point where I correctly render the template picker. Here is the current snapshot.

The template picker has select box on top, and on the bottom is its constituents like template image, rows and columns. There are some UX problem here.

Select box looks like a header

One problem is that the select box looks like a header. It easy to tell if it even is a interactive control. So, I decided to make the select box standalone and have the bottom to be separate.

Too many controls

Second problem is that currently the nested fields are still editable. I can make them readonly fields. This is okay for the most part but the thing is that it kinda gives too much power to the end-user of the pipeline. As a user, I don’t want to bother with these settings. For the most part, it should only surface the parameters that matter, and Rows and Columns and the indices here are not really meant to be customized.

They are more of descriptors of the image itself. Rows and Columns specify how many rows and columns are there in the image, and Indices indicate which indices of that grid to extract the generated image from.

So, that brings me to a proposal where I encode some properties into the image file itself — either in the image file name or in the exif tag.

Exif tags are useful but it is not super straightforward to edit them on the fly. So, I’m thinking of using the file name to indicate some parameters.

Here is an example:

template/machi/character/city-gal-1[row=2][col=4][indices=1,3,5,7].png

In here, we specify three parameters row, col, and indices. And we can display these parameters as list of tags in the image picker. Let’s try that.

This is good, but usage of these special characters are frowned upon. I still think ability to retain some level of intrinsics of an image is going to be really helpful.

One other alternative is to use url parameters.

template/machi/character/city-gal-1.png?row=2&col=4&indices=1%2C3%2C5%2C7

The benefit is that we are using URL query param standard. So, much better interoperability.

Limitation here is that if end-user wants to upload their own photo here, they will need to enter the information at the time of upload. Perhaps, that’s okay.

Here is final implementation.