feat(tags): added tags to ai lab recipes #2522

gastoner · 2025-02-13T09:19:42Z

What does this PR do?

Adds tags to recipes in AI lab

Screenshot / video of UI

What issues does this PR fix or reference?

How to test this PR?

Use this PR merging to PD podman-desktop/podman-desktop#11213 in combination with this PR, otherwise you wont see the colors
Go to recipes in ai lab

MariaLeonova · 2025-02-17T08:55:48Z

@gastoner can you please add screenshots and/or video of the changes?

gastoner · 2025-02-17T09:13:30Z

@gastoner can you please add screenshots and/or video of the changes?

Yes, when it is done I will, it is not done yet

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

MariaLeonova

@gastoner thank you for the screenshot! One question to clarify the behavior: so when a user presses 2 more, and one card expends, will the other cards in the same row expand as well?

gastoner · 2025-02-18T06:30:23Z

@gastoner thank you for the screenshot! One question to clarify the behavior: so when a user presses 2 more, and one card expends, will the other cards in the same row expand as well?

No, only the card that was clicked will expand

gastoner · 2025-02-18T07:07:52Z

@MariaLeonova which colors should I use for the tags (text and background) for the light/dark theme respectively?

MariaLeonova · 2025-02-18T08:37:27Z

@gastoner these were the initial proposed colors:

gastoner · 2025-02-18T13:27:23Z

Needs to be merged after podman-desktop/podman-desktop#11213 - colors for AI Lab Tags

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

axel7083 · 2025-02-18T14:10:51Z

Needs to be merged after #2522 - colors for AI Lab Tags

@gastoner you linked this PR?

axel7083

I don't have any colors ? 🤔

gastoner · 2025-02-18T14:24:29Z

Needs to be merged after #2522 - colors for AI Lab Tags

@gastoner you linked this PR?

Yess, you need to use this PR from PD repository in combination with this PR

axel7083

LGTM on my side

Since we are depending on Podman Desktop colors merged in (podman-desktop/podman-desktop#11213)

We need to update the minimum version we need to run on

podman-desktop-extension-ai-lab/packages/backend/package.json

Line 11 in 2ddae50

"podman-desktop": ">=1.8.0"

podman-desktop-extension-ai-lab/Containerfile

Line 32 in 59038b3

io.podman-desktop.api.version=">= 1.8.0"

to 1.17.0.

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

axel7083 · 2025-02-18T16:20:43Z

packages/frontend/src/lib/Badge.svelte

+  content: string;
+  backgroundColor?: string;
+  textColor?: string;
+  className?: string;


use class the in the props do class: className, so we use traditional props

axel7083 · 2025-02-18T16:21:09Z

packages/frontend/src/lib/Badge.svelte

+interface Props {
+  icon?: IconDefinition;
+  content: string;
+  backgroundColor?: string;


Do we really need to use backgroundColor? I feel like this should be included in the class prop?

axel7083 · 2025-02-18T16:22:11Z

packages/frontend/src/lib/RecipeCardTags.spec.ts

+class ResizeObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+}
+
+beforeAll(() => {
+  Object.defineProperty(window, 'ResizeObserver', { value: ResizeObserver });


We should move the ResizeObserver to the setup.vitest.js to avoid repeating it everywhere? (can be a follow up)

axel7083 · 2025-02-18T16:23:28Z

packages/frontend/src/lib/RecipeCardTags.svelte

+const useCases = ['natural-language-processing', 'audio', 'computer-vision'];
+const languages = ['java', 'javascript', 'python'];
+const frameworks = ['langchain', 'langchain4j', 'quarkus', 'react', 'streamlit', 'vectordb'];
+const tools = ['none', 'llama-cpp', 'whisper-cpp'];
+
+const tags: string[] = [
+  ...recipe.categories,
+  ...(recipe.backend !== undefined ? [recipe.backend] : []),
+  ...(recipe.frameworks ?? []),
+  ...(recipe.languages ?? []),
+];


Can we move this to a dedicated constants / tags-constant / please find a nice name file ? as those are constants ? (user uppercase for constants

axel7083 · 2025-02-18T16:29:51Z

packages/frontend/src/lib/RecipeCardTags.svelte

+  if (useCases.includes(tag)) {
+    return 'bg-[var(--pd-label-primary-bg)]';
+  } else if (languages.includes(tag)) {
+    return 'bg-[var(--pd-label-secondary-bg)]';
+  } else if (frameworks.includes(tag)) {
+    return 'bg-[var(--pd-label-tertiary-bg)]';
+  } else if (tools.includes(tag)) {
+    return 'bg-[var(--pd-label-quaternary-bg)]';
+  }
+  return 'bg-[var(--pd-label-primary-bg)]';


This is computation heavy, lot of includes O(n * count) (with count number of condition check).

You could create a map such as

const TAG_BG_COLOR = new Map([ ...useCases.map((useCase) => [useCase, 'bg-[var(--pd-label-primary-bg)]']), ...languages.map((useCase) => [useCase, 'bg-[var(--pd-label-secondary-bg)]']), ...frameworks.map((useCase) => [useCase, 'bg-[var(--pd-label-tertiary-bg)]']), ...tools.map((useCase) => [useCase, 'bg-[var(--pd-label-quaternary-bg)]']), ]);

and determineBackgroundColor became

function determineBackgroundColor(tag: string): string { return TAG_BG_COLOR.get(tag) ?? 'bg-[var(--pd-label-primary-bg)]'; }

Please the TAG_BG_COLOR should be created in a dedicated constants file, creating a map in each component would waste resources

Same for the text colors

axel7083

Okay, so in todays daily, I mention this PR, and how it depends on colors, that will be available only in podman desktop >= 1.17

@jeffmaury confirmed, that we should do one of the following

hardcode the colors in the tailwindcss to avoid having this hard dependency on a recent version of podman-desktop (Because we want to release ai-lab 1.5 before podman desktop 1.17).
Delay this PR for next release (ai-lab 1.6).

I would rather have the colors hardcoded (at least for the 1.5, and have an issue created with a 1.6 milestone, to remove those hardcoded colors)

gastoner · 2025-02-19T08:37:30Z

Okay, so in todays daily, I mention this PR, and how it depends on colors, that will be available only in podman desktop >= 1.17

@jeffmaury confirmed, that we should do one of the following
* hardcode the colors in the tailwindcss to avoid having this hard dependency on a recent version of podman-desktop (Because we want to release ai-lab 1.5 before podman desktop 1.17).

* Delay this PR for next release (ai-lab 1.6).
I would rather have the colors hardcoded (at least for the 1.5, and have an issue created with a 1.6 milestone, to remove those hardcoded colors)

I agree, I don't want to hard-code colors. So I would (since the colors are merged already):

Hardcode the colors until the 1.15 is out
After 1.15 remove the hardcoded values and use ones from PD + update the min version of PD

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

MariaLeonova

Looks good from the UX POV.

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

gastoner requested a review from MariaLeonova February 17, 2025 06:34

gastoner force-pushed the ai_lab_tags branch from 67196a7 to e2bab2d Compare February 17, 2025 10:30

feat(tags): added tags to ai lab recipes

5709fa5

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

gastoner force-pushed the ai_lab_tags branch from e2bab2d to 99df990 Compare February 17, 2025 12:11

gastoner marked this pull request as ready for review February 17, 2025 12:11

gastoner requested review from benoitf, jeffmaury and a team as code owners February 17, 2025 12:11

gastoner requested review from cdrage and SoniaSandler February 17, 2025 12:11

gastoner force-pushed the ai_lab_tags branch 2 times, most recently from 79464d9 to 33c1413 Compare February 17, 2025 12:19

test: added tests

33bebc5

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

gastoner force-pushed the ai_lab_tags branch from 33c1413 to 33bebc5 Compare February 17, 2025 12:25

gastoner marked this pull request as draft February 17, 2025 12:38

MariaLeonova reviewed Feb 17, 2025

View reviewed changes

gastoner requested a review from MariaLeonova February 18, 2025 07:26

gastoner mentioned this pull request Feb 18, 2025

chore: added colors for ai lab tags podman-desktop/podman-desktop#11213

Merged

1 task

gastoner marked this pull request as ready for review February 18, 2025 13:28

gastoner added 2 commits February 18, 2025 14:41

chore: added correct colors

3754ba1

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

test: fixed tests

dafd638

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

gastoner force-pushed the ai_lab_tags branch from c2f6c86 to dafd638 Compare February 18, 2025 13:41

axel7083 reviewed Feb 18, 2025

View reviewed changes

gastoner requested a review from axel7083 February 18, 2025 15:04

axel7083 reviewed Feb 18, 2025

View reviewed changes

chore: updated minimum version for pd

9565d2d

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

gastoner requested a review from axel7083 February 18, 2025 16:14

axel7083 reviewed Feb 18, 2025

View reviewed changes

axel7083 requested changes Feb 18, 2025

View reviewed changes

gastoner force-pushed the ai_lab_tags branch 2 times, most recently from 05d528e to 875d02d Compare February 19, 2025 13:01

chore: applied suggestions

5441cd3

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

gastoner force-pushed the ai_lab_tags branch from 875d02d to 5441cd3 Compare February 19, 2025 13:03

gastoner requested a review from axel7083 February 19, 2025 13:03

MariaLeonova reviewed Feb 19, 2025

View reviewed changes

gastoner added 2 commits February 19, 2025 15:08

chore: fixed tests

8dd775b

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

chore: fixed typecheck

9360f7c

Signed-off-by: Evzen Gasta <evzen.ml@seznam.cz>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tags): added tags to ai lab recipes #2522

feat(tags): added tags to ai lab recipes #2522

gastoner commented Feb 13, 2025 •

edited

Loading

MariaLeonova commented Feb 17, 2025

gastoner commented Feb 17, 2025

MariaLeonova left a comment

gastoner commented Feb 18, 2025

gastoner commented Feb 18, 2025

MariaLeonova commented Feb 18, 2025

gastoner commented Feb 18, 2025 •

edited

Loading

axel7083 commented Feb 18, 2025

axel7083 left a comment

gastoner commented Feb 18, 2025

axel7083 left a comment

axel7083 Feb 18, 2025

axel7083 Feb 18, 2025 •

edited

Loading

axel7083 Feb 18, 2025 •

edited

Loading

axel7083 Feb 18, 2025

axel7083 Feb 18, 2025 •

edited

Loading

axel7083 left a comment

gastoner commented Feb 19, 2025

MariaLeonova left a comment

feat(tags): added tags to ai lab recipes #2522

Are you sure you want to change the base?

feat(tags): added tags to ai lab recipes #2522

Conversation

gastoner commented Feb 13, 2025 • edited Loading

What does this PR do?

Screenshot / video of UI

What issues does this PR fix or reference?

How to test this PR?

MariaLeonova commented Feb 17, 2025

gastoner commented Feb 17, 2025

MariaLeonova left a comment

Choose a reason for hiding this comment

gastoner commented Feb 18, 2025

gastoner commented Feb 18, 2025

MariaLeonova commented Feb 18, 2025

gastoner commented Feb 18, 2025 • edited Loading

axel7083 commented Feb 18, 2025

axel7083 left a comment

Choose a reason for hiding this comment

gastoner commented Feb 18, 2025

axel7083 left a comment

Choose a reason for hiding this comment

axel7083 Feb 18, 2025

Choose a reason for hiding this comment

axel7083 Feb 18, 2025 • edited Loading

Choose a reason for hiding this comment

axel7083 Feb 18, 2025 • edited Loading

Choose a reason for hiding this comment

axel7083 Feb 18, 2025

Choose a reason for hiding this comment

axel7083 Feb 18, 2025 • edited Loading

Choose a reason for hiding this comment

axel7083 left a comment

Choose a reason for hiding this comment

gastoner commented Feb 19, 2025

MariaLeonova left a comment

Choose a reason for hiding this comment

gastoner commented Feb 13, 2025 •

edited

Loading

gastoner commented Feb 18, 2025 •

edited

Loading

axel7083 Feb 18, 2025 •

edited

Loading

axel7083 Feb 18, 2025 •

edited

Loading

axel7083 Feb 18, 2025 •

edited

Loading