From a7ca52c3bc6247a509d13f2f40d5d193d09794a6 Mon Sep 17 00:00:00 2001 From: Aaron Villalpando Date: Mon, 1 Jul 2024 21:51:42 -0700 Subject: [PATCH] Add prompt fiddle project with all examples --- .../fiddle-examples/images/image.baml | 2 +- integ-tests/python/baml_client/inlinedbaml.py | 2 +- integ-tests/ruby/baml_client/inlined.rb | 2 +- .../typescript/baml_client/inlinedbaml.ts | 2 +- .../_components/Tree/FileViewer.tsx | 1 + typescript/fiddle-frontend/lib/loadProject.ts | 21 ++++++- .../baml_src/1-extract-resume.baml} | 6 -- .../all-projects}/baml_src/clients.baml | 10 +--- .../baml_src/demos/classify-user-msg.baml | 30 ++++++++++ .../baml_src/demos/extract-receipt.baml | 59 +++++++++++++++++++ .../baml_src/multi-modal/audio-input.baml | 22 +++++++ .../baml_src/multi-modal/image-input.baml | 16 +++++ .../prompt-engineering/chain-of-thought.baml | 0 .../prompt-engineering/symbol-tuning.baml | 4 +- .../baml_src/prompt-syntax}/chat-roles.baml | 0 .../all-projects}/main.py | 0 .../all-projects}/main.ts | 0 17 files changed, 153 insertions(+), 24 deletions(-) rename typescript/fiddle-frontend/public/{_examples_all/baml_src/hello-world.baml => _examples/all-projects/baml_src/1-extract-resume.baml} (87%) rename typescript/fiddle-frontend/public/{_examples_all => _examples/all-projects}/baml_src/clients.baml (82%) create mode 100644 typescript/fiddle-frontend/public/_examples/all-projects/baml_src/demos/classify-user-msg.baml create mode 100644 typescript/fiddle-frontend/public/_examples/all-projects/baml_src/demos/extract-receipt.baml create mode 100644 typescript/fiddle-frontend/public/_examples/all-projects/baml_src/multi-modal/audio-input.baml create mode 100644 typescript/fiddle-frontend/public/_examples/all-projects/baml_src/multi-modal/image-input.baml rename typescript/fiddle-frontend/public/{_examples_all => _examples/all-projects}/baml_src/prompt-engineering/chain-of-thought.baml (100%) rename typescript/fiddle-frontend/public/{_examples_all => _examples/all-projects}/baml_src/prompt-engineering/symbol-tuning.baml (94%) rename typescript/fiddle-frontend/public/{_examples_all/baml_src/example-syntax => _examples/all-projects/baml_src/prompt-syntax}/chat-roles.baml (100%) rename typescript/fiddle-frontend/public/{_examples_all => _examples/all-projects}/main.py (100%) rename typescript/fiddle-frontend/public/{_examples_all => _examples/all-projects}/main.ts (100%) diff --git a/integ-tests/baml_src/fiddle-examples/images/image.baml b/integ-tests/baml_src/fiddle-examples/images/image.baml index 1efc63d2d..3ee59a6a1 100644 --- a/integ-tests/baml_src/fiddle-examples/images/image.baml +++ b/integ-tests/baml_src/fiddle-examples/images/image.baml @@ -21,7 +21,7 @@ class ClassWithImage { } // chat role user present -function DescribeImage2(classWithImage: ClassWithImage, img2: image) -> string { +function DescribeImage2(classWithImage: ClassWithImage, img2: image) -> string { client GPT4Turbo prompt #" {{ _.role("user") }} diff --git a/integ-tests/python/baml_client/inlinedbaml.py b/integ-tests/python/baml_client/inlinedbaml.py index c5fbb0df8..9a28553f2 100644 --- a/integ-tests/python/baml_client/inlinedbaml.py +++ b/integ-tests/python/baml_client/inlinedbaml.py @@ -22,7 +22,7 @@ "fiddle-examples/classify-message.baml": "// This will be available as an enum in your Python and Typescript code.\nenum Category {\n Refund\n CancelOrder\n TechnicalSupport\n AccountIssue\n Question\n}\n\nfunction ClassifyMessage(input: string) -> Category {\n client GPT4\n\n prompt #\"\n Classify the following INPUT into ONE\n of the following categories:\n\n INPUT: {{ input }}\n\n {{ ctx.output_format }}\n\n Response:\n \"#\n}", "fiddle-examples/extract-names.baml": "function ExtractNames(input: string) -> string[] {\n client GPT4\n prompt #\"\n Extract the names from this INPUT:\n \n INPUT:\n ---\n {{ input }}\n ---\n\n {{ ctx.output_format }}\n\n Response:\n \"#\n}\n", "fiddle-examples/extract-receipt-info.baml": "class ReceiptItem {\n name string\n description string?\n quantity int\n price float\n}\n\nclass ReceiptInfo {\n items ReceiptItem[]\n total_cost float?\n}\n\nfunction ExtractReceiptInfo(email: string) -> ReceiptInfo {\n client GPT4o\n prompt #\"\n Given the receipt below:\n\n ```\n {{email}}\n ```\n\n {{ ctx.output_format }}\n \"#\n}\n\n", - "fiddle-examples/images/image.baml": "function DescribeImage(img: image) -> string {\n client AwsBedrock\n prompt #\"\n {{ _.role(\"user\") }}\n\n\n Describe the image below in 20 words:\n {{ img }}\n \"#\n\n}\n\nclass FakeImage {\n url string\n}\n\nclass ClassWithImage {\n myImage image\n param2 string\n fake_image FakeImage\n}\n\n// chat role user present\nfunction DescribeImage2(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n {{ _.role(\"user\") }}\n You should return 2 answers that answer the following commands.\n\n 1. Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n 2. Also tell me what's happening here in one sentence:\n {{ img2 }}\n \"#\n}\n\n// no chat role\nfunction DescribeImage3(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n Tell me also what's happening here in one sentence and relate it to the word {{ classWithImage.param2 }}:\n {{ img2 }}\n \"#\n}\n\n\n// system prompt and chat prompt\nfunction DescribeImage4(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n {{ _.role(\"system\")}}\n\n Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n Tell me also what's happening here in one sentence and relate it to the word {{ classWithImage.param2 }}:\n {{ img2 }}\n \"#\n}\n\ntest TestName {\n functions [DescribeImage]\n args {\n img { url \"https://imgs.xkcd.com/comics/standards.png\"}\n }\n}\n", + "fiddle-examples/images/image.baml": "function DescribeImage(img: image) -> string {\n client AwsBedrock\n prompt #\"\n {{ _.role(\"user\") }}\n\n\n Describe the image below in 20 words:\n {{ img }}\n \"#\n\n}\n\nclass FakeImage {\n url string\n}\n\nclass ClassWithImage {\n myImage image\n param2 string\n fake_image FakeImage\n}\n\n// chat role user present\nfunction DescribeImage2(classWithImage: ClassWithImage, img2: image) -> string { \n client GPT4Turbo\n prompt #\"\n {{ _.role(\"user\") }}\n You should return 2 answers that answer the following commands.\n\n 1. Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n 2. Also tell me what's happening here in one sentence:\n {{ img2 }}\n \"#\n}\n\n// no chat role\nfunction DescribeImage3(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n Tell me also what's happening here in one sentence and relate it to the word {{ classWithImage.param2 }}:\n {{ img2 }}\n \"#\n}\n\n\n// system prompt and chat prompt\nfunction DescribeImage4(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n {{ _.role(\"system\")}}\n\n Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n Tell me also what's happening here in one sentence and relate it to the word {{ classWithImage.param2 }}:\n {{ img2 }}\n \"#\n}\n\ntest TestName {\n functions [DescribeImage]\n args {\n img { url \"https://imgs.xkcd.com/comics/standards.png\"}\n }\n}\n", "fiddle-examples/symbol-tuning.baml": "enum Category3 {\n Refund @alias(\"k1\")\n @description(\"Customer wants to refund a product\")\n\n CancelOrder @alias(\"k2\")\n @description(\"Customer wants to cancel an order\")\n\n TechnicalSupport @alias(\"k3\")\n @description(\"Customer needs help with a technical issue unrelated to account creation or login\")\n\n AccountIssue @alias(\"k4\")\n @description(\"Specifically relates to account-login or account-creation\")\n\n Question @alias(\"k5\")\n @description(\"Customer has a question\")\n}\n\nfunction ClassifyMessage3(input: string) -> Category {\n client GPT4\n\n prompt #\"\n Classify the following INPUT into ONE\n of the following categories:\n\n INPUT: {{ input }}\n\n {{ ctx.output_format }}\n\n Response:\n \"#\n}", "main.baml": "generator lang_python {\n output_type python/pydantic\n output_dir \"../python\"\n}\n\ngenerator lang_typescript {\n output_type typescript\n output_dir \"../typescript\"\n}\n\ngenerator lang_ruby {\n output_type ruby/sorbet\n output_dir \"../ruby\"\n}\n", "test-files/aliases/classes.baml": "class TestClassAlias {\n key string @alias(\"key-dash\") @description(#\"\n This is a description for key\n af asdf\n \"#)\n key2 string @alias(\"key21\")\n key3 string @alias(\"key with space\")\n key4 string //unaliased\n key5 string @alias(\"key.with.punctuation/123\")\n}\n\nfunction FnTestClassAlias(input: string) -> TestClassAlias {\n client GPT35\n prompt #\"\n {{ctx.output_format}}\n \"#\n}\n\ntest FnTestClassAlias {\n functions [FnTestClassAlias]\n args {\n input \"example input\"\n }\n}\n", diff --git a/integ-tests/ruby/baml_client/inlined.rb b/integ-tests/ruby/baml_client/inlined.rb index 3afa00b71..6a6545ff2 100644 --- a/integ-tests/ruby/baml_client/inlined.rb +++ b/integ-tests/ruby/baml_client/inlined.rb @@ -22,7 +22,7 @@ module Inlined "fiddle-examples/classify-message.baml" => "// This will be available as an enum in your Python and Typescript code.\nenum Category {\n Refund\n CancelOrder\n TechnicalSupport\n AccountIssue\n Question\n}\n\nfunction ClassifyMessage(input: string) -> Category {\n client GPT4\n\n prompt #\"\n Classify the following INPUT into ONE\n of the following categories:\n\n INPUT: {{ input }}\n\n {{ ctx.output_format }}\n\n Response:\n \"#\n}", "fiddle-examples/extract-names.baml" => "function ExtractNames(input: string) -> string[] {\n client GPT4\n prompt #\"\n Extract the names from this INPUT:\n \n INPUT:\n ---\n {{ input }}\n ---\n\n {{ ctx.output_format }}\n\n Response:\n \"#\n}\n", "fiddle-examples/extract-receipt-info.baml" => "class ReceiptItem {\n name string\n description string?\n quantity int\n price float\n}\n\nclass ReceiptInfo {\n items ReceiptItem[]\n total_cost float?\n}\n\nfunction ExtractReceiptInfo(email: string) -> ReceiptInfo {\n client GPT4o\n prompt #\"\n Given the receipt below:\n\n ```\n {{email}}\n ```\n\n {{ ctx.output_format }}\n \"#\n}\n\n", - "fiddle-examples/images/image.baml" => "function DescribeImage(img: image) -> string {\n client AwsBedrock\n prompt #\"\n {{ _.role(\"user\") }}\n\n\n Describe the image below in 20 words:\n {{ img }}\n \"#\n\n}\n\nclass FakeImage {\n url string\n}\n\nclass ClassWithImage {\n myImage image\n param2 string\n fake_image FakeImage\n}\n\n// chat role user present\nfunction DescribeImage2(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n {{ _.role(\"user\") }}\n You should return 2 answers that answer the following commands.\n\n 1. Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n 2. Also tell me what's happening here in one sentence:\n {{ img2 }}\n \"#\n}\n\n// no chat role\nfunction DescribeImage3(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n Tell me also what's happening here in one sentence and relate it to the word {{ classWithImage.param2 }}:\n {{ img2 }}\n \"#\n}\n\n\n// system prompt and chat prompt\nfunction DescribeImage4(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n {{ _.role(\"system\")}}\n\n Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n Tell me also what's happening here in one sentence and relate it to the word {{ classWithImage.param2 }}:\n {{ img2 }}\n \"#\n}\n\ntest TestName {\n functions [DescribeImage]\n args {\n img { url \"https://imgs.xkcd.com/comics/standards.png\"}\n }\n}\n", + "fiddle-examples/images/image.baml" => "function DescribeImage(img: image) -> string {\n client AwsBedrock\n prompt #\"\n {{ _.role(\"user\") }}\n\n\n Describe the image below in 20 words:\n {{ img }}\n \"#\n\n}\n\nclass FakeImage {\n url string\n}\n\nclass ClassWithImage {\n myImage image\n param2 string\n fake_image FakeImage\n}\n\n// chat role user present\nfunction DescribeImage2(classWithImage: ClassWithImage, img2: image) -> string { \n client GPT4Turbo\n prompt #\"\n {{ _.role(\"user\") }}\n You should return 2 answers that answer the following commands.\n\n 1. Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n 2. Also tell me what's happening here in one sentence:\n {{ img2 }}\n \"#\n}\n\n// no chat role\nfunction DescribeImage3(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n Tell me also what's happening here in one sentence and relate it to the word {{ classWithImage.param2 }}:\n {{ img2 }}\n \"#\n}\n\n\n// system prompt and chat prompt\nfunction DescribeImage4(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n {{ _.role(\"system\")}}\n\n Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n Tell me also what's happening here in one sentence and relate it to the word {{ classWithImage.param2 }}:\n {{ img2 }}\n \"#\n}\n\ntest TestName {\n functions [DescribeImage]\n args {\n img { url \"https://imgs.xkcd.com/comics/standards.png\"}\n }\n}\n", "fiddle-examples/symbol-tuning.baml" => "enum Category3 {\n Refund @alias(\"k1\")\n @description(\"Customer wants to refund a product\")\n\n CancelOrder @alias(\"k2\")\n @description(\"Customer wants to cancel an order\")\n\n TechnicalSupport @alias(\"k3\")\n @description(\"Customer needs help with a technical issue unrelated to account creation or login\")\n\n AccountIssue @alias(\"k4\")\n @description(\"Specifically relates to account-login or account-creation\")\n\n Question @alias(\"k5\")\n @description(\"Customer has a question\")\n}\n\nfunction ClassifyMessage3(input: string) -> Category {\n client GPT4\n\n prompt #\"\n Classify the following INPUT into ONE\n of the following categories:\n\n INPUT: {{ input }}\n\n {{ ctx.output_format }}\n\n Response:\n \"#\n}", "main.baml" => "generator lang_python {\n output_type python/pydantic\n output_dir \"../python\"\n}\n\ngenerator lang_typescript {\n output_type typescript\n output_dir \"../typescript\"\n}\n\ngenerator lang_ruby {\n output_type ruby/sorbet\n output_dir \"../ruby\"\n}\n", "test-files/aliases/classes.baml" => "class TestClassAlias {\n key string @alias(\"key-dash\") @description(#\"\n This is a description for key\n af asdf\n \"#)\n key2 string @alias(\"key21\")\n key3 string @alias(\"key with space\")\n key4 string //unaliased\n key5 string @alias(\"key.with.punctuation/123\")\n}\n\nfunction FnTestClassAlias(input: string) -> TestClassAlias {\n client GPT35\n prompt #\"\n {{ctx.output_format}}\n \"#\n}\n\ntest FnTestClassAlias {\n functions [FnTestClassAlias]\n args {\n input \"example input\"\n }\n}\n", diff --git a/integ-tests/typescript/baml_client/inlinedbaml.ts b/integ-tests/typescript/baml_client/inlinedbaml.ts index 4d3eabe3d..c1f3ddfe6 100644 --- a/integ-tests/typescript/baml_client/inlinedbaml.ts +++ b/integ-tests/typescript/baml_client/inlinedbaml.ts @@ -23,7 +23,7 @@ const fileMap = { "fiddle-examples/classify-message.baml": "// This will be available as an enum in your Python and Typescript code.\nenum Category {\n Refund\n CancelOrder\n TechnicalSupport\n AccountIssue\n Question\n}\n\nfunction ClassifyMessage(input: string) -> Category {\n client GPT4\n\n prompt #\"\n Classify the following INPUT into ONE\n of the following categories:\n\n INPUT: {{ input }}\n\n {{ ctx.output_format }}\n\n Response:\n \"#\n}", "fiddle-examples/extract-names.baml": "function ExtractNames(input: string) -> string[] {\n client GPT4\n prompt #\"\n Extract the names from this INPUT:\n \n INPUT:\n ---\n {{ input }}\n ---\n\n {{ ctx.output_format }}\n\n Response:\n \"#\n}\n", "fiddle-examples/extract-receipt-info.baml": "class ReceiptItem {\n name string\n description string?\n quantity int\n price float\n}\n\nclass ReceiptInfo {\n items ReceiptItem[]\n total_cost float?\n}\n\nfunction ExtractReceiptInfo(email: string) -> ReceiptInfo {\n client GPT4o\n prompt #\"\n Given the receipt below:\n\n ```\n {{email}}\n ```\n\n {{ ctx.output_format }}\n \"#\n}\n\n", - "fiddle-examples/images/image.baml": "function DescribeImage(img: image) -> string {\n client AwsBedrock\n prompt #\"\n {{ _.role(\"user\") }}\n\n\n Describe the image below in 20 words:\n {{ img }}\n \"#\n\n}\n\nclass FakeImage {\n url string\n}\n\nclass ClassWithImage {\n myImage image\n param2 string\n fake_image FakeImage\n}\n\n// chat role user present\nfunction DescribeImage2(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n {{ _.role(\"user\") }}\n You should return 2 answers that answer the following commands.\n\n 1. Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n 2. Also tell me what's happening here in one sentence:\n {{ img2 }}\n \"#\n}\n\n// no chat role\nfunction DescribeImage3(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n Tell me also what's happening here in one sentence and relate it to the word {{ classWithImage.param2 }}:\n {{ img2 }}\n \"#\n}\n\n\n// system prompt and chat prompt\nfunction DescribeImage4(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n {{ _.role(\"system\")}}\n\n Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n Tell me also what's happening here in one sentence and relate it to the word {{ classWithImage.param2 }}:\n {{ img2 }}\n \"#\n}\n\ntest TestName {\n functions [DescribeImage]\n args {\n img { url \"https://imgs.xkcd.com/comics/standards.png\"}\n }\n}\n", + "fiddle-examples/images/image.baml": "function DescribeImage(img: image) -> string {\n client AwsBedrock\n prompt #\"\n {{ _.role(\"user\") }}\n\n\n Describe the image below in 20 words:\n {{ img }}\n \"#\n\n}\n\nclass FakeImage {\n url string\n}\n\nclass ClassWithImage {\n myImage image\n param2 string\n fake_image FakeImage\n}\n\n// chat role user present\nfunction DescribeImage2(classWithImage: ClassWithImage, img2: image) -> string { \n client GPT4Turbo\n prompt #\"\n {{ _.role(\"user\") }}\n You should return 2 answers that answer the following commands.\n\n 1. Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n 2. Also tell me what's happening here in one sentence:\n {{ img2 }}\n \"#\n}\n\n// no chat role\nfunction DescribeImage3(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n Tell me also what's happening here in one sentence and relate it to the word {{ classWithImage.param2 }}:\n {{ img2 }}\n \"#\n}\n\n\n// system prompt and chat prompt\nfunction DescribeImage4(classWithImage: ClassWithImage, img2: image) -> string {\n client GPT4Turbo\n prompt #\"\n {{ _.role(\"system\")}}\n\n Describe this in 5 words:\n {{ classWithImage.myImage }}\n\n Tell me also what's happening here in one sentence and relate it to the word {{ classWithImage.param2 }}:\n {{ img2 }}\n \"#\n}\n\ntest TestName {\n functions [DescribeImage]\n args {\n img { url \"https://imgs.xkcd.com/comics/standards.png\"}\n }\n}\n", "fiddle-examples/symbol-tuning.baml": "enum Category3 {\n Refund @alias(\"k1\")\n @description(\"Customer wants to refund a product\")\n\n CancelOrder @alias(\"k2\")\n @description(\"Customer wants to cancel an order\")\n\n TechnicalSupport @alias(\"k3\")\n @description(\"Customer needs help with a technical issue unrelated to account creation or login\")\n\n AccountIssue @alias(\"k4\")\n @description(\"Specifically relates to account-login or account-creation\")\n\n Question @alias(\"k5\")\n @description(\"Customer has a question\")\n}\n\nfunction ClassifyMessage3(input: string) -> Category {\n client GPT4\n\n prompt #\"\n Classify the following INPUT into ONE\n of the following categories:\n\n INPUT: {{ input }}\n\n {{ ctx.output_format }}\n\n Response:\n \"#\n}", "main.baml": "generator lang_python {\n output_type python/pydantic\n output_dir \"../python\"\n}\n\ngenerator lang_typescript {\n output_type typescript\n output_dir \"../typescript\"\n}\n\ngenerator lang_ruby {\n output_type ruby/sorbet\n output_dir \"../ruby\"\n}\n", "test-files/aliases/classes.baml": "class TestClassAlias {\n key string @alias(\"key-dash\") @description(#\"\n This is a description for key\n af asdf\n \"#)\n key2 string @alias(\"key21\")\n key3 string @alias(\"key with space\")\n key4 string //unaliased\n key5 string @alias(\"key.with.punctuation/123\")\n}\n\nfunction FnTestClassAlias(input: string) -> TestClassAlias {\n client GPT35\n prompt #\"\n {{ctx.output_format}}\n \"#\n}\n\ntest FnTestClassAlias {\n functions [FnTestClassAlias]\n args {\n input \"example input\"\n }\n}\n", diff --git a/typescript/fiddle-frontend/app/[project_id]/_components/Tree/FileViewer.tsx b/typescript/fiddle-frontend/app/[project_id]/_components/Tree/FileViewer.tsx index a8c4f1c26..78529e39d 100644 --- a/typescript/fiddle-frontend/app/[project_id]/_components/Tree/FileViewer.tsx +++ b/typescript/fiddle-frontend/app/[project_id]/_components/Tree/FileViewer.tsx @@ -153,6 +153,7 @@ const FileViewer = () => { openByDefault={false} // initialOpenState={{ baml_src: true }} data={data2} + indent={12} initialOpenState={{ baml_src: true }} rowHeight={24} width={width} diff --git a/typescript/fiddle-frontend/lib/loadProject.ts b/typescript/fiddle-frontend/lib/loadProject.ts index 5ad964c21..c69f1382a 100644 --- a/typescript/fiddle-frontend/lib/loadProject.ts +++ b/typescript/fiddle-frontend/lib/loadProject.ts @@ -5,7 +5,7 @@ import { type EditorFile, loadUrl } from '@/app/actions' import type { BAMLProject } from './exampleProjects' export async function loadProject(params: { project_id: string }, chooseDefault = false) { const projectGroups = await loadExampleProjects() - let data: BAMLProject = projectGroups.intros[0] //exampleProjects[0] + let data: BAMLProject = projectGroups.allProjects[0] //exampleProjects[0] const id = params.project_id if (id) { const exampleProject = await loadExampleProject(projectGroups, id) @@ -15,7 +15,7 @@ export async function loadProject(params: { project_id: string }, chooseDefault data = await loadUrl(id) } } else { - const exampleProject = projectGroups.intros[0] + const exampleProject = projectGroups.allProjects[0] const loadedProject = await loadExampleProject(projectGroups, exampleProject.id) if (loadedProject) { data = loadedProject @@ -41,7 +41,12 @@ async function loadExampleProject( projectId: string, ): Promise { // Combine all projects into a single array - const exampleProjects = [...groupings.intros, ...groupings.advancedPromptSyntax, ...groupings.promptEngineering] + const exampleProjects = [ + ...groupings.intros, + ...groupings.advancedPromptSyntax, + ...groupings.promptEngineering, + ...groupings.allProjects, + ] // Search for the project by id const proj = exampleProjects.find((project) => project.id === projectId) @@ -93,6 +98,7 @@ const getProjectFiles = async (projectPath: string): Promise => { } export type BamlProjectsGroupings = { + allProjects: BAMLProject[] intros: BAMLProject[] advancedPromptSyntax: BAMLProject[] promptEngineering: BAMLProject[] @@ -100,6 +106,15 @@ export type BamlProjectsGroupings = { export async function loadExampleProjects(): Promise { const exampleProjects: BamlProjectsGroupings = { + allProjects: [ + { + id: 'all-projects', + name: 'All Projects', + description: 'All projects', + filePath: '/all-projects/', + files: [], + }, + ], intros: [ { id: 'extract-resume', diff --git a/typescript/fiddle-frontend/public/_examples_all/baml_src/hello-world.baml b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/1-extract-resume.baml similarity index 87% rename from typescript/fiddle-frontend/public/_examples_all/baml_src/hello-world.baml rename to typescript/fiddle-frontend/public/_examples/all-projects/baml_src/1-extract-resume.baml index b7d227b14..526a5818d 100644 --- a/typescript/fiddle-frontend/public/_examples_all/baml_src/hello-world.baml +++ b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/1-extract-resume.baml @@ -1,11 +1,5 @@ // This is a BAML config file, which extends the Jinja2 templating language to write LLM functions. -// BAML adds many new features to Jinja: -// - type-support, -// - static analysis of prompts, -// - robust deserialization of JSON outputs, -// - ...and more! - class Resume { name string education Education[] @description("Extract in the same order listed") diff --git a/typescript/fiddle-frontend/public/_examples_all/baml_src/clients.baml b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/clients.baml similarity index 82% rename from typescript/fiddle-frontend/public/_examples_all/baml_src/clients.baml rename to typescript/fiddle-frontend/public/_examples/all-projects/baml_src/clients.baml index ff8e9ba8b..bd3002ea9 100644 --- a/typescript/fiddle-frontend/public/_examples_all/baml_src/clients.baml +++ b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/clients.baml @@ -5,7 +5,7 @@ // For this playground, we have setup a few clients for you to use already with some free credits. client GPT4 { - // Use one of the following: https://docs.boundaryml.com/v3/syntax/client/client#providers + // Use one of the following: https://docs.boundaryml.com/docs/snippets/clients/providers/openai provider openai // You can pass in any parameters from the OpenAI Python documentation into the options block. options { @@ -22,14 +22,6 @@ client GPT4o { } } -client GPT35 { - provider openai - options { - model gpt-3.5-turbo - api_key env.OPENAI_API_KEY - } -} - client Claude { provider anthropic options { diff --git a/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/demos/classify-user-msg.baml b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/demos/classify-user-msg.baml new file mode 100644 index 000000000..2bf9a0d2b --- /dev/null +++ b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/demos/classify-user-msg.baml @@ -0,0 +1,30 @@ +// This will be available as an enum in your Python and Typescript code. +enum Category { + Refund + CancelOrder + TechnicalSupport + AccountIssue + Question +} + +function ClassifyMessage(input: string) -> Category { + client GPT4o + + prompt #" + Classify the following INPUT into ONE + of the following categories: + + INPUT: {{ input }} + + {{ ctx.output_format }} + + Response: + "# +} + +test Test1 { + functions [ClassifyMessage] + args { + input "Can't access my account using my usual login credentials, and each attempt results in an error message stating 'Invalid username or password.' I have tried resetting my password using the 'Forgot Password' link, but I haven't received the promised password reset email." + } +} \ No newline at end of file diff --git a/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/demos/extract-receipt.baml b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/demos/extract-receipt.baml new file mode 100644 index 000000000..c0c5f9393 --- /dev/null +++ b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/demos/extract-receipt.baml @@ -0,0 +1,59 @@ + +class Receipt { + establishment_name string + date string @description(#" + ISO8601 formatted date + "#) + total int @description(#" + The total amount of the receipt + "#) + currency string + items Item[] @description(#" + The items on the receipt + "#) +} + +class Item { + name string + price float + quantity int +} + +// Input can be an image or text here +function ExtractReceipt(receipt: image | string) -> Receipt { + client GPT4o + prompt #" + {{ _.role("user") }} + + Extract info from this receipt: + {{ receipt }} + + {# special macro to print the output schema instructions. #} + {{ ctx.output_format }} + "# +} + +test ImageReceiptTest { + functions [ExtractReceipt] + args { + receipt { url "https://i.redd.it/adzt4bz4llfc1.jpeg"} + } +} + +test StarbucksTextReceiptTest { + functions [ExtractReceipt] + args { + receipt #" + Starbucks + Date: 2022-01-01 + Total: $5.00 USD + Items: + - Coffee + - $2.50 + - 1 + - Croissant + - $2.50 + - 1 + "# + } +} diff --git a/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/multi-modal/audio-input.baml b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/multi-modal/audio-input.baml new file mode 100644 index 000000000..cd7987011 --- /dev/null +++ b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/multi-modal/audio-input.baml @@ -0,0 +1,22 @@ +function AudioInput(audioInput: audio) -> string{ + client Gemini + prompt #" + {{ _.role("user") }} + + Does this sound like a roar? Yes or no? One word no other characters. + + {{ audioInput }} + "# +} + + +test TestURLAudioInput{ + functions [AudioInput] + args { + audioInput { + url https://actions.google.com/sounds/v1/emergency/beeper_emergency_call.ogg + } + } +} + + diff --git a/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/multi-modal/image-input.baml b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/multi-modal/image-input.baml new file mode 100644 index 000000000..8a4d5a7cc --- /dev/null +++ b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/multi-modal/image-input.baml @@ -0,0 +1,16 @@ +// How to use this BAML function in python or Typescript: https://docs.boundaryml.com/docs/snippets/supported-types#image +function DescribeImage(myImage: image) -> string { + client GPT4o + prompt #" + {{ _.role("user") }} + Describe this in 2 sentences: {{ myImage }} + "# +} + + +test ImageTest { + functions [DescribeImage] + args { + myImage { url "https://imgs.xkcd.com/comics/standards.png"} + } +} diff --git a/typescript/fiddle-frontend/public/_examples_all/baml_src/prompt-engineering/chain-of-thought.baml b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/prompt-engineering/chain-of-thought.baml similarity index 100% rename from typescript/fiddle-frontend/public/_examples_all/baml_src/prompt-engineering/chain-of-thought.baml rename to typescript/fiddle-frontend/public/_examples/all-projects/baml_src/prompt-engineering/chain-of-thought.baml diff --git a/typescript/fiddle-frontend/public/_examples_all/baml_src/prompt-engineering/symbol-tuning.baml b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/prompt-engineering/symbol-tuning.baml similarity index 94% rename from typescript/fiddle-frontend/public/_examples_all/baml_src/prompt-engineering/symbol-tuning.baml rename to typescript/fiddle-frontend/public/_examples/all-projects/baml_src/prompt-engineering/symbol-tuning.baml index f9fa9c13b..54f3edcb8 100644 --- a/typescript/fiddle-frontend/public/_examples_all/baml_src/prompt-engineering/symbol-tuning.baml +++ b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/prompt-engineering/symbol-tuning.baml @@ -5,7 +5,7 @@ // When you add aliases you don't need to change your resulting python code. Your models // stay the same. They are merely a way to aid in prompt engineering. -enum Category { +enum MyClass { Refund @alias("k1") @description("Customer wants to refund a product") @@ -22,7 +22,7 @@ enum Category { @description("Customer has a question") } -function ClassifyMessageWithSymbol(input: string) -> Category { +function ClassifyMessageWithSymbol(input: string) -> MyClass { client GPT4o prompt #" diff --git a/typescript/fiddle-frontend/public/_examples_all/baml_src/example-syntax/chat-roles.baml b/typescript/fiddle-frontend/public/_examples/all-projects/baml_src/prompt-syntax/chat-roles.baml similarity index 100% rename from typescript/fiddle-frontend/public/_examples_all/baml_src/example-syntax/chat-roles.baml rename to typescript/fiddle-frontend/public/_examples/all-projects/baml_src/prompt-syntax/chat-roles.baml diff --git a/typescript/fiddle-frontend/public/_examples_all/main.py b/typescript/fiddle-frontend/public/_examples/all-projects/main.py similarity index 100% rename from typescript/fiddle-frontend/public/_examples_all/main.py rename to typescript/fiddle-frontend/public/_examples/all-projects/main.py diff --git a/typescript/fiddle-frontend/public/_examples_all/main.ts b/typescript/fiddle-frontend/public/_examples/all-projects/main.ts similarity index 100% rename from typescript/fiddle-frontend/public/_examples_all/main.ts rename to typescript/fiddle-frontend/public/_examples/all-projects/main.ts