Add ~20 fine-tuning examples and switch to new ft model (#853)

ai/ft/dataset_formatter.py

@@ -8,6 +8,8 @@
 
 from llm_lib import REVISE_APP_BASE_PROMPT, SYSTEM_INSTRUCTION
 
+EDIT_HERE_MARKER = " # <--- EDIT HERE"
+
 
 def process_goldens():
   dataset: list[dict[str, Any]] = []
@@ -18,6 +20,13 @@ def process_goldens():
     if os.path.isdir(dir_path):
       prompt_path = os.path.join(dir_path, "prompt.txt")
       diff_path = os.path.join(dir_path, "diff.txt")
+      line_number: int | None = None
+      meta_path = os.path.join(dir_path, "metadata.json")
+      if os.path.exists(meta_path):
+        with open(meta_path) as meta_file:
+          meta = json.load(meta_file)
+          line_number = meta.get("line_number")
+          print(f"line_number: {line_number}")
 
       with open(prompt_path) as prompt_file:
         prompt = prompt_file.read().strip()
@@ -32,6 +41,17 @@ def process_goldens():
       else:
         code = ""
 
+        # Add sentinel token based on line_number (1-indexed)
+      if line_number is not None:
+        code_lines = code.splitlines()
+        if 1 <= line_number <= len(code_lines):
+          code_lines[line_number - 1] += EDIT_HERE_MARKER
+        code = "\n".join(code_lines)
+
+      formatted_prompt = REVISE_APP_BASE_PROMPT.replace(
+        "<APP_CODE>", code
+      ).replace("<APP_CHANGES>", prompt)
+
       dataset.append(
         {
           "messages": [
@@ -41,9 +61,7 @@ def process_goldens():
             },
             {
               "role": "user",
-              "content": REVISE_APP_BASE_PROMPT.replace(
-                "<APP_CODE>", code
-              ).replace("<APP_CHANGES>", prompt),
+              "content": formatted_prompt,
             },
             {
               "role": "assistant",

ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/diff.txt

@@ -0,0 +1,47 @@
+<<<<<<< ORIGINAL
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/box",
+)
+def app():
+  with me.box(style=me.Style(background="red", padding=me.Padding.all(16))):
+=======
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/box",
+)
+def app():
+  with me.box(style=me.Style(background="red", padding=me.Padding.all(16))):
+    # Card at the top
+    with me.box(
+      style=me.Style(
+        background=me.theme_var("surface"),
+        padding=me.Padding.all(16),
+        margin=me.Margin(bottom=24),
+        border=me.Border.all(me.BorderSide(width=1, color=me.theme_var("outline"))),
+        border_radius=8,
+        box_shadow="0 2px 4px rgba(0, 0, 0, 0.05)",
+      )
+    ):
+      me.text(
+        text="Welcome to My App",
+        style=me.Style(
+          color=me.theme_var("on-surface"),
+          font_size=24,
+          font_weight=600,
+          margin=me.Margin(bottom=8),
+      )
+      )
+      me.text(
+        text="This is a simple card component created for demonstration purposes.",
+        style=me.Style(
+          color=me.theme_var("on-surface-variant"),
+          font_size=16,
+          font_weight=400,
+        )
+      )
+>>>>>>> UPDATED

ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/patched.py

@@ -0,0 +1,95 @@
+import mesop as me
+
+
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/box",
+)
+def app():
+  with me.box(style=me.Style(background="red", padding=me.Padding.all(16))):
+    # Card at the top
+    with me.box(
+      style=me.Style(
+        background=me.theme_var("surface"),
+        padding=me.Padding.all(16),
+        margin=me.Margin(bottom=24),
+        border=me.Border.all(me.BorderSide(width=1, color=me.theme_var("outline"))),
+        border_radius=8,
+        box_shadow="0 2px 4px rgba(0, 0, 0, 0.05)",
+      )
+    ):
+      me.text(
+        text="Welcome to My App",
+        style=me.Style(
+          color=me.theme_var("on-surface"),
+          font_size=24,
+          font_weight=600,
+          margin=me.Margin(bottom=8),
+      )
+      )
+      me.text(
+        text="This is a simple card component created for demonstration purposes.",
+        style=me.Style(
+          color=me.theme_var("on-surface-variant"),
+          font_size=16,
+          font_weight=400,
+        )
+      )
+    with me.box(
+      style=me.Style(
+        background="green",
+        height=50,
+        margin=me.Margin.symmetric(vertical=24, horizontal=12),
+        border=me.Border.symmetric(
+          horizontal=me.BorderSide(width=2, color="pink", style="solid"),
+          vertical=me.BorderSide(width=2, color="orange", style="solid"),
+        ),
+      )
+    ):
+      me.text(text="hi1")
+      me.text(text="hi2")
+
+    with me.box(
+      style=me.Style(
+        background="blue",
+        height=50,
+        margin=me.Margin.all(16),
+        border=me.Border.all(
+          me.BorderSide(width=2, color="yellow", style="dotted")
+        ),
+        border_radius=10,
+      )
+    ):
+      me.text(text="Example with all sides bordered")
+
+    with me.box(
+      style=me.Style(
+        background="purple",
+        height=50,
+        margin=me.Margin.symmetric(vertical=24, horizontal=12),
+        border=me.Border.symmetric(
+          vertical=me.BorderSide(width=4, color="white", style="double")
+        ),
+      )
+    ):
+      me.text(text="Example with top and bottom borders")
+
+    with me.box(
+      style=me.Style(
+        display="flex",
+        align_items="center",
+        background=me.theme_var("surface"),
+        height=60,
+        margin=me.Margin.symmetric(vertical=16, horizontal=12),
+        border=me.Border.all(me.BorderSide(width=1, color=me.theme_var("outline"))),
+        border_radius=8,
+        box_shadow="0 2px 4px rgba(0, 0, 0, 0.1)",
+      )
+    ):
+      me.icon(icon="border_left", style=me.Style(margin=me.Margin(right=8), color=me.theme_var("primary")))
+      me.text(
+        text="Example with left and right borders",
+        style=me.Style(color=me.theme_var("on-surface"), font_size=16, font_weight=500)
+      )

ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/prompt.txt

@@ -0,0 +1 @@
+add a card at the top

ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/source.py

@@ -0,0 +1,67 @@
+import mesop as me
+
+
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/box",
+)
+def app():
+  with me.box(style=me.Style(background="red", padding=me.Padding.all(16))):
+    with me.box(
+      style=me.Style(
+        background="green",
+        height=50,
+        margin=me.Margin.symmetric(vertical=24, horizontal=12),
+        border=me.Border.symmetric(
+          horizontal=me.BorderSide(width=2, color="pink", style="solid"),
+          vertical=me.BorderSide(width=2, color="orange", style="solid"),
+        ),
+      )
+    ):
+      me.text(text="hi1")
+      me.text(text="hi2")
+
+    with me.box(
+      style=me.Style(
+        background="blue",
+        height=50,
+        margin=me.Margin.all(16),
+        border=me.Border.all(
+          me.BorderSide(width=2, color="yellow", style="dotted")
+        ),
+        border_radius=10,
+      )
+    ):
+      me.text(text="Example with all sides bordered")
+
+    with me.box(
+      style=me.Style(
+        background="purple",
+        height=50,
+        margin=me.Margin.symmetric(vertical=24, horizontal=12),
+        border=me.Border.symmetric(
+          vertical=me.BorderSide(width=4, color="white", style="double")
+        ),
+      )
+    ):
+      me.text(text="Example with top and bottom borders")
+
+    with me.box(
+      style=me.Style(
+        display="flex",
+        align_items="center",
+        background=me.theme_var("surface"),
+        height=60,
+        margin=me.Margin.symmetric(vertical=16, horizontal=12),
+        border=me.Border.all(me.BorderSide(width=1, color=me.theme_var("outline"))),
+        border_radius=8,
+        box_shadow="0 2px 4px rgba(0, 0, 0, 0.1)",
+      )
+    ):
+      me.icon(icon="border_left", style=me.Style(margin=me.Margin(right=8), color=me.theme_var("primary")))
+      me.text(
+        text="Example with left and right borders",
+        style=me.Style(color=me.theme_var("on-surface"), font_size=16, font_weight=500)
+      )

ai/ft/goldens/add%20a%20card_81pa2w/diff.txt

@@ -0,0 +1,68 @@
+<<<<<<< ORIGINAL
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/text",
+)
+def text():
+  me.text(text="headline-1: Hello, world!", type="headline-1")
+  me.text(text="headline-2: Hello, world!", type="headline-2")
+  me.text(text="headline-3: Hello, world!", type="headline-3")
+  me.text(text="headline-4: Hello, world!", type="headline-4")
+  me.text(text="headline-5: Hello, world!", type="headline-5")
+  me.text(text="headline-6: Hello, world!", type="headline-6")
+  me.text(text="subtitle-1: Hello, world!", type="subtitle-1")
+  me.text(text="subtitle-2: Hello, world!", type="subtitle-2", style=me.Style(color="green"))
+  me.text(text="body-1: Hello, world!", type="body-1")
+  me.text(text="body-2: Hello, world!", type="body-2")
+  me.text(text="caption: Hello, world!", type="caption")
+  me.text(text="button: Hello, world!", type="button")
+=======
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/text",
+)
+def text():
+  me.text(text="headline-1: Hello, world!", type="headline-1")
+  me.text(text="headline-2: Hello, world!", type="headline-2")
+  me.text(text="headline-3: Hello, world!", type="headline-3")
+  me.text(text="headline-4: Hello, world!", type="headline-4")
+  me.text(text="headline-5: Hello, world!", type="headline-5")
+  me.text(text="headline-6: Hello, world!", type="headline-6")
+  me.text(text="subtitle-1: Hello, world!", type="subtitle-1")
+  me.text(text="subtitle-2: Hello, world!", type="subtitle-2", style=me.Style(color="green"))
+  me.text(text="body-1: Hello, world!", type="body-1")
+  me.text(text="body-2: Hello, world!", type="body-2")
+  me.text(text="caption: Hello, world!", type="caption")
+  me.text(text="button: Hello, world!", type="button")
+
+  with me.box(style=me.Style(
+      background=me.theme_var("surface"),
+      border_radius=8,
+      padding=me.Padding.all(16),
+      margin=me.Margin.symmetric(vertical=16),
+      box_shadow="0 4px 6px rgba(0, 0, 0, 0.1)"
+  )):
+      me.text("Card Title", type="subtitle-1", style=me.Style(
+          color=me.theme_var("on-surface"),
+          margin=me.Margin(bottom=8),
+          font_weight="bold"
+      ))
+      me.text("This is a simple card component that can be used to display content in a structured manner.", type="body-2", style=me.Style(
+          color=me.theme_var("on-surface-variant"),
+          margin=me.Margin(bottom=16)
+      ))
+      me.button("Action", on_click=card_action, type="flat", style=me.Style(
+          align_self="flex-end",
+          background=me.theme_var("primary"),
+          color=me.theme_var("on-primary"),
+          border_radius=4,
+          padding=me.Padding.symmetric(horizontal=12, vertical=8)
+      ))
+
+def card_action(e: me.ClickEvent):
+    print("Card action button clicked")
+>>>>>>> UPDATED

ai/ft/goldens/add%20a%20card_81pa2w/patched.py

@@ -0,0 +1,49 @@
+import mesop as me
+
+
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/text",
+)
+def text():
+  me.text(text="headline-1: Hello, world!", type="headline-1")
+  me.text(text="headline-2: Hello, world!", type="headline-2")
+  me.text(text="headline-3: Hello, world!", type="headline-3")
+  me.text(text="headline-4: Hello, world!", type="headline-4")
+  me.text(text="headline-5: Hello, world!", type="headline-5")
+  me.text(text="headline-6: Hello, world!", type="headline-6")
+  me.text(text="subtitle-1: Hello, world!", type="subtitle-1")
+  me.text(text="subtitle-2: Hello, world!", type="subtitle-2", style=me.Style(color="green"))
+  me.text(text="body-1: Hello, world!", type="body-1")
+  me.text(text="body-2: Hello, world!", type="body-2")
+  me.text(text="caption: Hello, world!", type="caption")
+  me.text(text="button: Hello, world!", type="button")
+
+  with me.box(style=me.Style(
+      background=me.theme_var("surface"),
+      border_radius=8,
+      padding=me.Padding.all(16),
+      margin=me.Margin.symmetric(vertical=16),
+      box_shadow="0 4px 6px rgba(0, 0, 0, 0.1)"
+  )):
+      me.text("Card Title", type="subtitle-1", style=me.Style(
+          color=me.theme_var("on-surface"),
+          margin=me.Margin(bottom=8),
+          font_weight="bold"
+      ))
+      me.text("This is a simple card component that can be used to display content in a structured manner.", type="body-2", style=me.Style(
+          color=me.theme_var("on-surface-variant"),
+          margin=me.Margin(bottom=16)
+      ))
+      me.button("Action", on_click=card_action, type="flat", style=me.Style(
+          align_self="flex-end",
+          background=me.theme_var("primary"),
+          color=me.theme_var("on-primary"),
+          border_radius=4,
+          padding=me.Padding.symmetric(horizontal=12, vertical=8)
+      ))
+
+def card_action(e: me.ClickEvent):
+    print("Card action button clicked")

ai/ft/goldens/add%20a%20card_81pa2w/prompt.txt

@@ -0,0 +1 @@
+add a card