[HTML] Make API a bit more flexible

[massi08]

On our design system we have one particular component which is exposed in the library in multiple components. This particular component has 10 variants, so i have to use figma.connect() 10 times. To avoid repeating code multiple times because the only thing that changes in the code is that we add change only one property.

So for the 10 code.connect calls the only thing that changes is that we add in props object variant: figma.string(variant) and we also

<component variant="${props.accent}" ...multiple other props>
  ${props.label}
</component>

Instead of repeating code for each code.connect like this

figma.connect(
  "URL",
  {
    props: sharedProps,
    example: (props) => html`
      <component variant="red" ...moreProps>
        ${props.label}
      </component>
    `
  }
);

figma.connect(
  "URL",
  {
    props: sharedProps,
    example: (props) => html`
      <component variant="blue" ...moreProps>
        ${props.label}
      </component>
    `
  }
);

ATTEMPT 1

So I tried separating the config in a separate function like this but i get an error:

const config = (accent) => ({
  props: {
    // shared props
    ...sharedProps,
    accent: figma.string(accent), // or other variant
  },
  example: (props) => html`
    <component variant="${props.accent}" ...moreProps>
      ${props.label}
    </component>
  `
})

figma.connect(
  "URL",
  config('blue')
);

figma.connect(
  "URL2",
  config('red')
);

Error:

undefined: The second argument to figma.connect() must be an object literal. Example usage:
`figma.connect('https://www.figma.com/file/123?node-id=1-1', {
  example: () => html`<button />`
})`

ATTEMPT 2 I tried instead of calling `config(accent)' this:

figma.connect(
  "URL2",
  {...config('blue')}
);

i get this error

undefined: TypeError: Cannot read properties of undefined (reading 'initializer')

For a better DX i think the API should be a little more flexible and allow passing something else than object litterals especially for such cases where the same code is repeated a lot of times.

[joecummings]

Did you finetune your model using the FullModelHFCheckpointer?

If so, the .pt suffix can just be renamed to .bin and things should work. Going a step further, you can use HF's own script for converting weights to the safetensor format, which is their preferred format.

[Vattikondadheeraj]

@joecummings , Hey I am finetuning model using FullModelMetaCheckpointer. Is there any way I can convert to the hf model? Does the above method work?

[ebsmothers]

@Vattikondadheeraj currently the process to do this is a bit manual. If you have a state dict in the Meta format it can be converted to the HF format via two conversions: first Meta format to torchtune format, then torchtune format to HF format. One suggestion is to cobble together a script where you:

1. Create an instance of FullModelMetaCheckpointer and load your Meta-format checkpoint into it via load_checkpoint. This should give you a state dict in the torchtune format.
2. Create an instance of FullModelHFCheckpointer. Then you can call save_checkpoint on this with the state dict you loaded in (1).

We are planning on a refactor of the checkpointer to make this process a bit easier, so please stay tuned for that as well.