diff --git a/studio/frontend/src/features/data-recipes/learning-recipes/index.ts b/studio/frontend/src/features/data-recipes/learning-recipes/index.ts index a6fb28c385..30a25de3e7 100644 --- a/studio/frontend/src/features/data-recipes/learning-recipes/index.ts +++ b/studio/frontend/src/features/data-recipes/learning-recipes/index.ts @@ -6,6 +6,10 @@ const structuredOutputsJinjaUrl = new URL( ).href; const pdfGroundedQaUrl = new URL("./pdf-grounded-qa.json", import.meta.url) .href; +const instructionFromAnswerUrl = new URL( + "./instruction-from-answer.json", + import.meta.url, +).href; function isRecord(value: unknown): value is Record { return !!value && typeof value === "object" && !Array.isArray(value); @@ -96,4 +100,11 @@ export const LEARNING_RECIPES: LearningRecipeDef[] = [ description: "Build grounded question-answer examples from PDF chunks.", loadPayload: () => loadPayloadFromUrl(pdfGroundedQaUrl), }, + { + id: "instruction-from-answer", + title: "Instruction from Answer", + description: + "Use seed answer columns to generate high-quality instruction targets.", + loadPayload: () => loadPayloadFromUrl(instructionFromAnswerUrl), + }, ]; diff --git a/studio/frontend/src/features/data-recipes/pages/data-recipes-page.tsx b/studio/frontend/src/features/data-recipes/pages/data-recipes-page.tsx index b1b96eff53..3cb5a90ea0 100644 --- a/studio/frontend/src/features/data-recipes/pages/data-recipes-page.tsx +++ b/studio/frontend/src/features/data-recipes/pages/data-recipes-page.tsx @@ -52,6 +52,7 @@ type TemplateCard = { description: string; icon: typeof CookBookIcon; difficulty: "Easy" | "Starter" | "Intermediate" | "Advanced"; + learningBadges: string[]; surfaceClassName: string; shineColor: string[]; learningRecipeId?: string; @@ -64,6 +65,7 @@ const TEMPLATE_CARDS: TemplateCard[] = [ "Support ticket triage dataset with structured JSON outputs and Jinja if/else refs.", icon: FunctionIcon, difficulty: "Advanced", + learningBadges: ["Structured LLM", "Expression", "Jinja"], surfaceClassName: "from-cyan-500/15 via-sky-500/5 to-transparent border-cyan-500/30", shineColor: ["#06b6d4", "#38bdf8", "#22d3ee"], @@ -75,20 +77,23 @@ const TEMPLATE_CARDS: TemplateCard[] = [ "Unstructured PDF chunks transformed into grounded question-answer training pairs.", icon: DocumentAttachmentIcon, difficulty: "Easy", + learningBadges: ["Unstructured", "LLM Text"], surfaceClassName: "from-violet-500/15 via-fuchsia-500/5 to-transparent border-violet-500/30", shineColor: ["#8b5cf6", "#d946ef", "#a855f7"], learningRecipeId: "pdf-grounded-qa", }, { - title: "Seed Dataset", + title: "Instruction from Answer", description: - "Start from real rows, then expand with synthetic fields while preserving source context.", + "Start from seed answer fields and generate matching user instructions for SFT pairs.", icon: Plant01Icon, - difficulty: "Starter", + difficulty: "Easy", + learningBadges: ["Seed Dataset", "LLM Text", "Prompting"], surfaceClassName: "from-emerald-500/15 via-green-500/5 to-transparent border-emerald-500/30", shineColor: ["#10b981", "#22c55e", "#34d399"], + learningRecipeId: "instruction-from-answer", }, { title: "Text to Python", @@ -96,6 +101,7 @@ const TEMPLATE_CARDS: TemplateCard[] = [ "Instruction-to-code pairs for training models that generate clean Python implementations.", icon: CodeIcon, difficulty: "Starter", + learningBadges: ["LLM Code", "Prompting"], surfaceClassName: "from-amber-500/15 via-orange-500/5 to-transparent border-amber-500/30", shineColor: ["#f59e0b", "#f97316", "#fb923c"], @@ -106,6 +112,7 @@ const TEMPLATE_CARDS: TemplateCard[] = [ "Natural language to SQL pairs, including schema-aware query construction patterns.", icon: Database02Icon, difficulty: "Intermediate", + learningBadges: ["Structured LLM", "Prompting"], surfaceClassName: "from-blue-500/15 via-indigo-500/5 to-transparent border-blue-500/30", shineColor: ["#3b82f6", "#6366f1", "#60a5fa"], @@ -116,6 +123,7 @@ const TEMPLATE_CARDS: TemplateCard[] = [ "Role-based multi-turn conversations for assistant behavior, memory, and response quality.", icon: AiChat02Icon, difficulty: "Advanced", + learningBadges: ["LLM Text", "Conversation Design"], surfaceClassName: "from-rose-500/15 via-pink-500/5 to-transparent border-rose-500/30", shineColor: ["#f43f5e", "#ec4899", "#fb7185"], @@ -171,6 +179,8 @@ function LearningRecipeCards({ template.learningRecipeId !== undefined && loadingTemplateId === template.learningRecipeId; const isDisabled = !isReady || isLoading || Boolean(loadingTemplateId); + const visibleLearningBadges = template.learningBadges.slice(0, 3); + const extraLearningBadgeCount = Math.max(0, template.learningBadges.length - 3); return (