Adding better UX for playground

engine/baml-lib/baml-core/src/ir/repr.rs

@@ -10,8 +10,7 @@ use internal_baml_parser_database::{
         ClassWalker, ClientWalker, ConfigurationWalker, EnumValueWalker, EnumWalker, FieldWalker,
         FunctionWalker, TemplateStringWalker, VariantWalker,
     },
-    ParserDatabase, PromptAst, RetryPolicyStrategy, ToStringAttributes,
-    WithStaticRenames,
+    ParserDatabase, PromptAst, RetryPolicyStrategy, ToStringAttributes, WithStaticRenames,
 };
 
 use internal_baml_schema_ast::ast::{self, FieldArity, WithName, WithSpan};
@@ -1102,6 +1101,14 @@ pub struct TestCase {
 }
 
 impl WithRepr<TestCase> for ConfigurationWalker<'_> {
+    fn attributes(&self, _db: &ParserDatabase) -> NodeAttributes {
+        NodeAttributes {
+            meta: IndexMap::new(),
+            overrides: IndexMap::new(),
+            span: Some(self.span().clone()),
+        }
+    }
+
     fn repr(&self, db: &ParserDatabase) -> Result<TestCase> {
         Ok(TestCase {
             name: self.name().to_string(),

engine/baml-lib/baml-core/src/ir/walker.rs

@@ -265,6 +265,10 @@ impl<'a> Walker<'a, (&'a Function, &'a TestCase)> {
         &self.item.1.elem
     }
 
+    pub fn span(&self) -> Option<&crate::Span> {
+        self.item.1.attributes.span.as_ref()
+    }
+
     pub fn test_case_params(
         &self,
         env_values: &HashMap<String, String>,

engine/baml-runtime/src/lib.rs

@@ -50,6 +50,9 @@ pub use internal_baml_jinja::{ChatMessagePart, RenderedPrompt};
 #[cfg(feature = "internal")]
 pub use runtime_interface::InternalRuntimeInterface;
 
+#[cfg(feature = "internal")]
+pub use internal_baml_core as internal_core;
+
 #[cfg(not(feature = "internal"))]
 pub(crate) use internal_baml_jinja::{ChatMessagePart, RenderedPrompt};
 #[cfg(not(feature = "internal"))]

engine/baml-schema-wasm/src/runtime_wasm/mod.rs

@@ -257,6 +257,8 @@ pub struct WasmFunction {
     pub test_cases: Vec<WasmTestCase>,
     #[wasm_bindgen(readonly)]
     pub test_snippet: String,
+    #[wasm_bindgen(readonly)]
+    pub signature: String,
 }
 
 #[wasm_bindgen(getter_with_clone, inspectable)]
@@ -268,6 +270,31 @@ pub struct WasmSpan {
     pub start: usize,
     #[wasm_bindgen(readonly)]
     pub end: usize,
+    #[wasm_bindgen(readonly)]
+    pub start_line: usize,
+}
+
+impl From<&baml_runtime::internal_core::internal_baml_diagnostics::Span> for WasmSpan {
+    fn from(span: &baml_runtime::internal_core::internal_baml_diagnostics::Span) -> Self {
+        let (start, end) = span.line_and_column();
+        WasmSpan {
+            file_path: span.file.path().to_string(),
+            start: span.start,
+            end: span.end,
+            start_line: start.0,
+        }
+    }
+}
+
+impl Default for WasmSpan {
+    fn default() -> Self {
+        WasmSpan {
+            file_path: "".to_string(),
+            start: 0,
+            end: 0,
+            start_line: 0,
+        }
+    }
 }
 
 #[wasm_bindgen(getter_with_clone, inspectable)]
@@ -279,6 +306,8 @@ pub struct WasmTestCase {
     pub inputs: Vec<WasmParam>,
     #[wasm_bindgen(readonly)]
     pub error: Option<String>,
+    #[wasm_bindgen(readonly)]
+    pub span: WasmSpan,
 }
 
 #[wasm_bindgen(getter_with_clone, inspectable)]
@@ -743,21 +772,27 @@ impl WasmRuntime {
                 );
 
                 let wasm_span = match f.span() {
-                    Some(span) => WasmSpan {
-                        file_path: span.file.path().to_string(),
-                        start: span.start,
-                        end: span.end,
-                    },
-                    None => WasmSpan {
-                        file_path: "".to_string(),
-                        start: 0,
-                        end: 0,
-                    },
+                    Some(span) => span.into(),
+                    None => WasmSpan::default(),
                 };
 
                 WasmFunction {
                     name: f.name().to_string(),
                     span: wasm_span,
+                    signature: {
+                        let inputs = f
+                            .inputs()
+                            .right()
+                            .map(|func_params| {
+                                func_params
+                                    .iter()
+                                    .map(|(k, t)| format!("{}: {}", k, t))
+                                    .collect::<Vec<_>>()
+                                    .join(", ")
+                            })
+                            .unwrap_or_default();
+                        format!("({}) -> {}", inputs, f.output().to_string())
+                    },
                     test_snippet: snippet,
                     test_cases: f
                         .walk_tests()
@@ -812,10 +847,16 @@ impl WasmRuntime {
                                 }
                             });
 
+                            let wasm_span = match tc.span() {
+                                Some(span) => span.into(),
+                                None => WasmSpan::default(),
+                            };
+
                             WasmTestCase {
                                 name: tc.test_case().name.clone(),
                                 inputs: params,
                                 error,
+                                span: wasm_span,
                             }
                         })
                         .collect(),

integ-tests/baml_src/fiddle-examples/images/image.baml

@@ -65,6 +65,6 @@ function DescribeImage4(classWithImage: ClassWithImage, img2: image) -> string {
 test TestName {
   functions [DescribeImage]
   args {
-    img { url "https://imgs.xkcd.com/comics/standards.png"}
+    img { url "http://imgs.xkcd.com/comics/standards.png" }
   }
 }

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 \"http://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",

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 \"http://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",