1.15.0: UI of side-column between self-built LSF and official package is different

[longapple]

Hi team,

I'm using the frontend in my own tool. I pulled the code of 1.15.0 and compiled the frontend part according to the document. Then use the following files in my tool:
main.css
main.js
715.js
743.js

The side-column looks like this:

It's quite different from the official build (installed with pip):

May I know how to get exactly the same UI of the side-column through LSF?

Thanks in advance.

[heidi-humansignal]

Hello,

Thank you for contacting Label Studio,

The difference you're seeing is likely due to the fact that the official build (distributed via pip) is generated by our CI/CD pipeline with a very specific build configuration and additional processing that may not be replicated exactly when you compile the source code locally. In the official build, the pre-built assets—for example, those in the label_studio/frontend/dist/lsf folder—incorporate both optimized styles and any last-minute adjustments that our automated process applies.
To get exactly the same side-column UI in your tool, please try the following steps:

1. Use Pre-built Assets:

Instead of compiling the frontend manually, download and use the pre-built assets from the official pip package. These files are located in the label_studio/frontend/dist/lsf directory of the Label Studio repository and match the official UI exactly.
2. Match the Build Configuration:

If you prefer building from source, ensure that your build process exactly matches the one used in our CI. Check that:

• Your webpack configuration and environment variables match those used in our official build.
• You’re using the same versions of dependencies and build scripts (for example, if you’re using a script like get-build.js to fetch the builds).

3. Double-check Additional Files:

The extra files (like 715.js and 743.js) may be webpack chunks that are generated with specific settings for the side-column UI. Verify that these are built with the proper module names and content as in the official build.

Let us know if you need further assistance or additional details!

Comment by Oussama Assili
Workflow Run

[longapple]

@heidi-humansignal thanks a lot for your reply.

I tried both but without any luck:

Option 1: when I use pip to install the distribution, it's installed under /label_studio/ls-venv/lib/python3.13/site-packages/. But I cannot find a directory called frontend. There is indeed a main.js and main.css under web/dist/apps/labelstudio/.

(ls-venv) site-packages => find . -name frontend
(ls-venv) site-packages => find . -name dist
./web/dist
(ls-venv)  site-packages => find . -name main.js
./web/dist/apps/labelstudio/main.js
(ls-venv) site-packages => find . -name main.css
./web/dist/apps/labelstudio/main.css

But when I use them in my app, it simply shows an error of the constructor in the developer console and nothing renders:

(index):60 Uncaught ReferenceError: LabelStudio is not defined
    at (index):60:27

Option 2:
This is actually what I used. I followed the README from https://github.com/HumanSignal/label-studio/blob/1.16.0/web/libs/editor/README.md

Run the following to build the dev version:

yarn lsf:watch

After running this command, I got main.js, main.css under web/dist/libs/editor. With them, my app can render properly but it's the "ugly" version of side-column

Is this the correct way to build a production version of LSF? Or did I miss anything?

Thanks

[longapple]

I finally got it working by adding the following settings before initializing the instance:

        window.APP_SETTINGS = {
            "feature_flags": {
                "ff_front_1170_outliner_030222_short": true,
                "ff_front_DEV_1713_audio_ui_150222_short": false,
                "ff_front_dev_2715_audio_3_280722_short": true,
                "fflag_fix_front_dev_3391_interactive_view_all": false,
                "fflag_feat_front_dev_3873_labeling_ui_improvements_short": true,
                "fflag_feat_front_lsdv_4620_richtext_opimization_060423_short": true,
                "fflag_fix_front_lsdv_4620_memory_leaks_100723_short": false
            }
        }
        labelStudioInstance = new window.LabelStudio('label-studio', {

The UI now looks exactly like the pre-built version now. Not sure why but it's good enough for me to go forward.

Thanks for your help!

[heidi-humansignal]

Hello,

Awesome, glad it worked out. That is weird if its looking like pre-built version, might be one of the feature flags.

Thank you,
Abu

Comment by Abubakar Saad
Workflow Run