web: flag explanation: make more readable

[lainisourgod]

• add spacing between separate flag explanations
• make flag name bold
• make explanation property array of Text-s so that flag name and explanation may be styled differently

I'm little new to JSX so I got multiple type errors that I don't know how to resolve, but everything works just fine.

I want in ExplainProps receive not a string array, but array of Texts that are styled differently.

[lainisourgod]

Also @notmd I rebase my code on top of yesterday's commits and now another type issue appeared out of nowhere.

VSCode suggests to put fake children property, I'm not sure it's a good fix.

[lainisourgod]

Also I forgot to pin the screenshot of how it looks now.

[notmd]

Also @notmd I rebase my code on top of yesterday's commits and now another type issue appeared out of nowhere.

VSCode suggests to put fake children property, I'm not sure it's a good fix.

Have you tried restarting VSCode? On my end, it doesn't complain anything about it.

[SaahilMansha]

Hi I know some python and am currently learning html and css before learning java, hence I joined Git hub.

I know it sounds counterproductive but can someone please give an idea on how this website works (i am overwhelmed by all this information). I want to contribute to OS but i'm a beginner, what should I do and most importantly how do i do it?

[lainisourgod]

@SaahilMansha I think this project is too complicated for a beginner and it will be counter-productive for your growth as an engineer to start with this task. I suggest you try first learning easier stuff. e.g. this beginner react video series or for understanding how complex sites like this are built this is a good videos: https://www.youtube.com/watch?v=hYv6BM2fWd8, https://www.youtube.com/playlist?list=PLN3n1USn4xlnfJIQBa6bBjjiECnk6zL6s. You won't understand everything, but at least these are more close to what real websites and development looks like. Hope it helps!

[lainisourgod]

So now another changed happend during the day and now Explanation API is used in other code, so my changes are conflicting with this usage. I wonder if should change the Explanation API back how it was and just render <br /> between lines without bold, or should I update API usage in LabelLikertGroup.tsx.

I should check if rendering label name and description seperately is beneficial in Likert case, and if it so, change the usage in LabelLikertGroup.tsx

[github-actions[bot]]

:x: pre-commit failed. Please run pre-commit run --all-files locally and commit the changes. Find more information in the repository's CONTRIBUTING.md

[lainisourgod]

Hi @notmd! Sorry for not being active on issue last week.

I removed bold part of changes "Wrong language: Not written ..." so not to make API unnecessary complicated and leaved only line breaks.

Also I noticed templating issues likely introduced by #1349 which I fixed by copying templating realization from this PR: https://github.com/LAION-AI/Open-Assistant/blob/main/website/src/components/Messages/LabelFlagGroup.tsx#L44

[olliestanley]

@notmd @fozziethebeat will both have to review this and confirm that changes requested have been addressed before it can be merged

[notmd]

@olliestanley I just update the PR, can you please force merge if the CI passes?

[olliestanley]

@olliestanley I just update the PR, can you please force merge if the CI passes?

I don't have force merge perms, I think will need Fozzie to approve unless @andreaskoepf has time to force merge