Skip to content

Commit ad70ad3

Browse files
authored
feat: added contribution message and link to page (#2639)
* feat: added contribution message and link to page Signed-off-by: Brian <bmahabir@bu.edu> Signed-off-by: BUSolarLab <bmahabir@bu.edu> * fix: added small changes to contri button and added test Signed-off-by: Brian <bmahabir@bu.edu> * fix: adjusted contri msg text color to match theme Signed-off-by: Brian <bmahabir@bu.edu> --------- Signed-off-by: BUSolarLab <bmahabir@bu.edu> Signed-off-by: Brian <bmahabir@bu.edu>
1 parent c51759c commit ad70ad3

File tree

2 files changed

+38
-1
lines changed

2 files changed

+38
-1
lines changed

packages/frontend/src/pages/Recipes.spec.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,3 +220,12 @@ test('filterRecipes is called with selected filters', async () => {
220220
languages: ['lang2'],
221221
});
222222
});
223+
224+
test('Browse Recipe Repository button is present', async () => {
225+
render(Recipes);
226+
227+
await vi.waitFor(() => {
228+
const button = screen.getByTitle('https://github.com/containers/ai-lab-recipes/blob/main/CONTRIBUTING.md');
229+
expect(button).toBeInTheDocument();
230+
});
231+
});

packages/frontend/src/pages/Recipes.svelte

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import RecipesCard from '/@/lib/RecipesCard.svelte';
33
import { catalog } from '/@/stores/catalog';
44
import type { Recipe } from '@shared/src/models/IRecipe';
55
import type { Category } from '@shared/src/models/ICategory';
6-
import { Dropdown, NavPage } from '@podman-desktop/ui-svelte';
6+
import { Button, Dropdown, NavPage } from '@podman-desktop/ui-svelte';
7+
import { Fa } from 'svelte-fa';
8+
import { faGithub } from '@fortawesome/free-brands-svg-icons'; // Import the GitHub icon
79
import { studioClient } from '../utils/client';
810
import type { CatalogFilterKey, Choice, RecipeChoices, RecipeFilters } from '@shared/src/models/FilterRecipesResult';
911
@@ -94,12 +96,38 @@ const filtersComponents: { label: string; key: CatalogFilterKey }[] = [
9496
{ label: 'Frameworks', key: 'frameworks' },
9597
{ label: 'Languages', key: 'languages' },
9698
];
99+
100+
function openContribution(): void {
101+
studioClient.openURL('https://github.com/containers/ai-lab-recipes/blob/main/CONTRIBUTING.md').catch(console.error);
102+
}
97103
</script>
98104

99105
<NavPage title="Recipe Catalog" searchEnabled={false}>
100106
<div slot="content" class="flex flex-col min-w-full min-h-full">
101107
<div class="min-w-full min-h-full flex-1">
102108
<div class="px-5 space-y-5">
109+
<!-- Add the summary here -->
110+
<div class="text-sm text-[var(--pd-modal-text)] space-y-3">
111+
<p>
112+
Recipes help you explore and get started with a number of core AI use cases like chatbots, code generators,
113+
text summarizers, agents, and more. Each recipe comes with detailed explanations and runnable source code
114+
compatible with various large language models (LLMs).
115+
</p>
116+
<p>
117+
Recipes are organized into categories:
118+
<span class="text-[var(--pd-link)]">audio, computer vision, multimodal, natural language processing</span>.
119+
</p>
120+
<p>Want to contribute more AI applications? The catalog is open source and available on GitHub!</p>
121+
<Button
122+
title="https://github.com/containers/ai-lab-recipes/blob/main/CONTRIBUTING.md"
123+
on:click={openContribution}
124+
size="lg">
125+
<div class="flex items-center space-x-2">
126+
<Fa icon={faGithub} />
127+
<span>Browse Recipe Repository</span>
128+
</div>
129+
</Button>
130+
</div>
103131
<div class="flex flex-row space-x-2 text-[var(--pd-modal-text)]">
104132
{#each filtersComponents as filterComponent (filterComponent.key)}
105133
<div class="w-full">

0 commit comments

Comments
 (0)