Looking for a solution to selecting a Palette based on Grid Position

Shaking The Habitual
1

I have been thinking about trying to use a small number of Palettes, let’s say 4, that would be selected based on the Grid Item number in a large Poster2 (100’s or Poster Items) that would apply a different Palette in a repeating pattern for every 4 Items in the Poster Detail View.

E.g. Grid Item 1 would use Pallete 1, 2 use Palette 2, … Grid Item 4 use Palette 4, Grid Item 5 use Palette 1, etc…

I accidently stumbled on this STH KB article at Randomising the palette used | Shaking the Habitual Knowledge Base.

So my question is can and if so, how would the Grid Item number be accessed so that a Palette number could be derived fro the Grid Item?

2

That could be quite interesting. You would need to apply the different palette class names (e.g. palette1 etc) to each grid item. Could either do that manually in each grid item or via javascript - e.g. something like this in the ‘Body’ section of RW’s page code section.

<script>
const gridItems = document.querySelectorAll('.s-grid-item');

gridItems.forEach((item, index) => {
  if (index % 4 === 0) {
    item.classList.add('palette1');
  } else if (index % 4 === 1) {
    item.classList.add('palette2');
  } else if (index % 4 === 2) {
    item.classList.add('palette3');
  } else {
    item.classList.add('palette4');
  }
});
</script>

Note: this would do it for all grid items in all grids in a page so you would need to adapt the selector if you wanted it more targeted.

Edit: This is a perfect example of tapping into chatGPT. See here.

2 Likes
3

Excellent. I will try this as soon as I’m free.

Big thanks.

4

bloatGPT, I’m glad to see the human brain is still needed:

const gridItems = document.querySelectorAll('.s-grid-item');

gridItems.forEach((item, index) => {
    item.classList.add('palette'+(index+1));
});
2 Likes
5

But the human brain missed that it needs to assign a different class to each of the first four items and then repeat that for the rest :)

1 Like
6

OK

const gridItems = document.querySelectorAll('.s-grid-item');

gridItems.forEach((item, index) => {
    item.classList.add('palette'+(index<3?index+1:4));
});
1 Like
7

That still just makes every grid item after the fourth palette4

1 Like
8

I didn’t read the question on my phone which is my fault but human still wins

const gridItems = document.querySelectorAll('.s-grid-item');

gridItems.forEach((item, index) => {
    item.classList.add('palette'+(index%4<3?index%4+1:4));
});
3 Likes
9

Yep - that looks like the one 👍️

1 Like
10

This exchange would have made a good tv commercial.

1 Like
11

or ?

… ('palette'+((index%4)+1));

4 Likes
12

Yes! :)

1 Like
13

Give it a few months max.

14

Has anyone thought what happens once the 50% threshold is reached of AI generated data used as the training input. Will it stagnate, will it spiral into inaccuracy, will more intervention be required? While it is not intelligent but just a probabilistic aggregator these are real uncertainties.

I think there are many interesting philosophical questions about it at the moment but the more interesting ones at this point are the technical “evolution” based ones.

3 Likes
15

I haven’t but discussing the 50% threshold for AI-generated data used in training is thought-provoking. It is surely essential to maximize the variety and relevancy of material to preclude stagnation and guarantee the quality of AI models. The blending of AI with human insight will be indispensable in preserving the exactness and dependability of machine-generated content and outputs.

As the world moves on with the progress of machine intelligence, individuals involved in development must take measures to guarantee that these systems are beneficial to society. It is exciting to think about what potential AI models might have to show us unexpected and never seen before ways to produce content or bring forth new perspectives undetected in manually created data. It will be interesting to see how AI-generated content progresses and impacts future AI developments.

16

I think you missed one, Tav: (and I’m not sure I like it): Self-improving AI systems: If the AI-generated content used for training data maintains a high level of quality and diversity, it’s possible that AI systems could continue to improve in a self-sustaining manner. This would depend on the ability of AI models to generate content that is not only diverse but also accurate and informative.

If this were to occur (quite possible), there could be quite a few benefits for society, but I can also think of many potential drawbacks including economic disruption, misinformation & manipulation, loss of privacy, ethical concerns and concentration of power.

17

Only if they have novel ideas and intelligent “thought” processes. At the moment it is purely machine learning from existing data, there is no novelty other than that which naturally comes from aggregation.

By way of a real world analogy, I had lots of research students who could write a very good literature survey at the start of their PhD’s but subsequently didn’t have a novel thought or innovative idea for the following 3 or 4 years.

I think the current models will do very well in replacing the low hanging fruit in the digital content creation industry (of which there is a lot) and put a fair few people back behind the counter at McDonald’s. Undoubtedly true AI will emerge and of course countries will use it for defence purposes despite the best intentions of the developers at which point I’d suggest digging a deep hole in your yard and getting in it with lots of tinned food! :)

3 Likes
18

Works perfectly to add a paletteID to repeating grid items of 4. The next question is where should the Palette stack go and that became a bit of a challenge. I assume you can’t access multiple PalettesID’s on a page.

After trying this, I’m not sure if Pallet is right for this puzzle, so altered your code to use Base-bg’s instead:

<script>
const gridItems = document.querySelectorAll(‘.s-grid-item’);
gridItems.forEach((item, index) => {
if (index % 4 === 0) {
item.classList.add(‘base-bg1-11’);
} else if (index % 4 === 1) {
item.classList.add(‘base-bg1-12’);
} else if (index % 4 === 2) {
item.classList.add(‘base-bg1-13’);
} else {
item.classList.add(‘base-bg1-14’);
}
});
</script>

So far this works as intended, as it is just BG colours that are changing for each 4 items.

I have some more work to do to get this working within a Poster2 Detail page.

1 Like
19

You’d be better going with (the human-generated):

const gridItems = document.querySelectorAll('.s-grid-item');

gridItems.forEach((item, index) => {
    item.classList.add('base-bg1-1'+((index%4)+1));
});

Probably wouldn’t be any need to show the picker buttons so I would probably hide it. The benefit of Palette would be that you can set all the colours used in the different grid items. If you did show the picker then user selection would apply to all areas of the page where you were not overriding it by using the palette class names.

Yes - all palettes that are added can be accessed via the class names. That’s what the above example was doing?

20

My application is to add just background colours in an existing Poster/Grid with 100’s of items. The items are not sorted in Poster and appear as the they appear in the Poster stacks order, and items may be removed and new items can be added anywhere over time, so your script is ideal in this application.