diff --git a/ai/ft/dataset_formatter.py b/ai/ft/dataset_formatter.py index 849100880..809b4f99f 100644 --- a/ai/ft/dataset_formatter.py +++ b/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( + "", code + ).replace("", prompt) + dataset.append( { "messages": [ @@ -41,9 +61,7 @@ def process_goldens(): }, { "role": "user", - "content": REVISE_APP_BASE_PROMPT.replace( - "", code - ).replace("", prompt), + "content": formatted_prompt, }, { "role": "assistant", diff --git a/ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/diff.txt b/ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/diff.txt new file mode 100644 index 000000000..213fad36f --- /dev/null +++ b/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 \ No newline at end of file diff --git a/ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/patched.py b/ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/patched.py new file mode 100644 index 000000000..c03ea8be4 --- /dev/null +++ b/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) + ) diff --git a/ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/prompt.txt b/ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/prompt.txt new file mode 100644 index 000000000..777bee03d --- /dev/null +++ b/ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/prompt.txt @@ -0,0 +1 @@ +add a card at the top \ No newline at end of file diff --git a/ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/source.py b/ai/ft/goldens/add%20a%20card%20at%20the%20top_xCJU8Q/source.py new file mode 100644 index 000000000..1f3e14d69 --- /dev/null +++ b/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) + ) diff --git a/ai/ft/goldens/add%20a%20card_81pa2w/diff.txt b/ai/ft/goldens/add%20a%20card_81pa2w/diff.txt new file mode 100644 index 000000000..51b276336 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/ai/ft/goldens/add%20a%20card_81pa2w/patched.py b/ai/ft/goldens/add%20a%20card_81pa2w/patched.py new file mode 100644 index 000000000..b3d179163 --- /dev/null +++ b/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") diff --git a/ai/ft/goldens/add%20a%20card_81pa2w/prompt.txt b/ai/ft/goldens/add%20a%20card_81pa2w/prompt.txt new file mode 100644 index 000000000..f8488706b --- /dev/null +++ b/ai/ft/goldens/add%20a%20card_81pa2w/prompt.txt @@ -0,0 +1 @@ +add a card \ No newline at end of file diff --git a/ai/ft/goldens/add%20a%20card_81pa2w/source.py b/ai/ft/goldens/add%20a%20card_81pa2w/source.py new file mode 100644 index 000000000..ff6322b71 --- /dev/null +++ b/ai/ft/goldens/add%20a%20card_81pa2w/source.py @@ -0,0 +1,22 @@ +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") diff --git a/ai/ft/goldens/add_spacing/diff.txt b/ai/ft/goldens/add_spacing/diff.txt new file mode 100644 index 000000000..dcaa3dcd5 --- /dev/null +++ b/ai/ft/goldens/add_spacing/diff.txt @@ -0,0 +1,30 @@ +<<<<<<< ORIGINAL +@me.page(path="/readme_app") +def app(): + me.text("Hello, world!") + me.textarea(rows=10, label="Prompt", on_input=on_prompt_input) + + me.button("submit", on_click=on_submit) + + state = me.state(State) + me.text(f"Output: {state.output}") +======= +@me.page(path="/readme_app") +def app(): + with me.box(style=me.Style(padding=me.Padding.all(24), max_width=600, margin=me.Margin.symmetric(horizontal="auto"))): + me.text("Welcome to the README App", style=me.Style(font_size=24, margin=me.Margin(bottom=16))) + + me.textarea(rows=10, label="Enter your prompt", on_input=on_prompt_input, style=me.Style(width="100%", margin=me.Margin(bottom=16))) + + me.button("Submit", on_click=on_submit, style=me.Style(margin=me.Margin(bottom=16))) + + state = me.state(State) + if state.output: + with me.box(style=me.Style( + background=me.theme_var("surface"), + padding=me.Padding.all(16), + border_radius=8 + )): + me.text("Output:", style=me.Style(font_weight="bold", margin=me.Margin(bottom=8))) + me.text(state.output) +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/add_spacing/patched.py b/ai/ft/goldens/add_spacing/patched.py new file mode 100644 index 000000000..fe8b0ea79 --- /dev/null +++ b/ai/ft/goldens/add_spacing/patched.py @@ -0,0 +1,38 @@ +import mesop as me + + +@me.stateclass +class State: + prompt: str + output: str + + +def on_prompt_input(event: me.InputEvent): + state = me.state(State) + state.prompt = event.value + + +def on_submit(event: me.ClickEvent): + state = me.state(State) + # state.output = api_call(state.prompt) + state.output = "output: " + state.prompt + + +@me.page(path="/readme_app") +def app(): + with me.box(style=me.Style(padding=me.Padding.all(24), max_width=600, margin=me.Margin.symmetric(horizontal="auto"))): + me.text("Welcome to the README App", style=me.Style(font_size=24, margin=me.Margin(bottom=16))) + + me.textarea(rows=10, label="Enter your prompt", on_input=on_prompt_input, style=me.Style(width="100%", margin=me.Margin(bottom=16))) + + me.button("Submit", on_click=on_submit, style=me.Style(margin=me.Margin(bottom=16))) + + state = me.state(State) + if state.output: + with me.box(style=me.Style( + background=me.theme_var("surface"), + padding=me.Padding.all(16), + border_radius=8 + )): + me.text("Output:", style=me.Style(font_weight="bold", margin=me.Margin(bottom=8))) + me.text(state.output) diff --git a/ai/ft/goldens/add_spacing/prompt.txt b/ai/ft/goldens/add_spacing/prompt.txt new file mode 100644 index 000000000..52fd9e723 --- /dev/null +++ b/ai/ft/goldens/add_spacing/prompt.txt @@ -0,0 +1 @@ +add spacing \ No newline at end of file diff --git a/ai/ft/goldens/add_spacing/source.py b/ai/ft/goldens/add_spacing/source.py new file mode 100644 index 000000000..bd4e6e20b --- /dev/null +++ b/ai/ft/goldens/add_spacing/source.py @@ -0,0 +1,29 @@ +import mesop as me + + +@me.stateclass +class State: + prompt: str + output: str + + +def on_prompt_input(event: me.InputEvent): + state = me.state(State) + state.prompt = event.value + + +def on_submit(event: me.ClickEvent): + state = me.state(State) + # state.output = api_call(state.prompt) + state.output = "output: " + state.prompt + + +@me.page(path="/readme_app") +def app(): + me.text("Hello, world!") + me.textarea(rows=10, label="Prompt", on_input=on_prompt_input) + + me.button("submit", on_click=on_submit) + + state = me.state(State) + me.text(f"Output: {state.output}") diff --git a/ai/ft/goldens/card_prettier/patched.py b/ai/ft/goldens/card_prettier/patched.py index 180f551cf..d725705ee 100644 --- a/ai/ft/goldens/card_prettier/patched.py +++ b/ai/ft/goldens/card_prettier/patched.py @@ -28,4 +28,4 @@ def card_page(): border_radius=20)) def card_action(e: me.ClickEvent): - print("Card action clicked") + print("Card action clicked") \ No newline at end of file diff --git a/ai/ft/goldens/change%20background%20color_ycfsDA/diff.txt b/ai/ft/goldens/change%20background%20color_ycfsDA/diff.txt new file mode 100644 index 000000000..9d5e779c6 --- /dev/null +++ b/ai/ft/goldens/change%20background%20color_ycfsDA/diff.txt @@ -0,0 +1,19 @@ +<<<<<<< ORIGINAL +def _style_container(show_preview: bool = True) -> me.Style: + return me.Style( + background=_BACKGROUND_COLOR, + color=_FONT_COLOR, + display="grid", + grid_template_columns="2fr 4fr 4fr" if show_preview else "2fr 8fr", + height="100vh", + ) +======= +def _style_container(show_preview: bool = True) -> me.Style: + return me.Style( + background=me.theme_var("surface"), + color=me.theme_var("on-surface"), + display="grid", + grid_template_columns="2fr 4fr 4fr" if show_preview else "2fr 8fr", + height="100vh", + ) +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/change%20background%20color_ycfsDA/patched.py b/ai/ft/goldens/change%20background%20color_ycfsDA/patched.py new file mode 100644 index 000000000..0db7c90b7 --- /dev/null +++ b/ai/ft/goldens/change%20background%20color_ycfsDA/patched.py @@ -0,0 +1,189 @@ +from dataclasses import dataclass, field + +import mesop as me + +_INTRO_TEXT = """ +# Mesop Markdown Editor Example + +This example shows how to make a simple markdown editor. +""".strip() + + +@dataclass(kw_only=True) +class Note: + """Content of note.""" + + content: str = "" + + +@me.stateclass +class State: + notes: list[Note] = field(default_factory=lambda: [Note(content=_INTRO_TEXT)]) + selected_note_index: int = 0 + selected_note_content: str = _INTRO_TEXT + show_preview: bool = True + + +@me.page( + security_policy=me.SecurityPolicy( + allowed_iframe_parents=["https://google.github.io"] + ), + path="/markdown_editor", + title="Markdown Editor", +) +def page(): + state = me.state(State) + + with me.box(style=_style_container(state.show_preview)): + # Note list column + with me.box(style=_STYLE_NOTES_NAV): + # Toolbar + with me.box(style=_STYLE_TOOLBAR): + with me.content_button(on_click=on_click_new): + with me.tooltip(message="New note"): + me.icon(icon="add_notes") + with me.content_button(on_click=on_click_hide): + with me.tooltip( + message="Hide preview" if state.show_preview else "Show preview" + ): + me.icon(icon="hide_image") + + # Note list + for index, note in enumerate(state.notes): + with me.box( + key=f"note-{index}", + on_click=on_click_note, + style=_style_note_row(index == state.selected_note_index), + ): + me.text(_render_note_excerpt(note.content)) + + # Markdown Editor Column + with me.box(style=_STYLE_EDITOR): + me.native_textarea( + value=state.selected_note_content, + style=_STYLE_TEXTAREA, + on_input=on_text_input, + ) + + # Markdown Preview Column + if state.show_preview: + with me.box(style=_STYLE_PREVIEW): + if state.selected_note_index < len(state.notes): + me.markdown(state.notes[state.selected_note_index].content) + + +# HELPERS + +_EXCERPT_CHAR_LIMIT = 90 + + +def _render_note_excerpt(content: str) -> str: + if len(content) <= _EXCERPT_CHAR_LIMIT: + return content + return content[:_EXCERPT_CHAR_LIMIT] + "..." + + +# EVENT HANDLERS + + +def on_click_new(e: me.ClickEvent): + state = me.state(State) + # Need to update the initial value of the editor text area so we can + # trigger a diff to reset the editor to empty. Need to yield this change. + # for this to work. + state.selected_note_content = state.notes[state.selected_note_index].content + yield + # Reset the initial value of the editor text area to empty since the new note + # has no content. + state.selected_note_content = "" + state.notes.append(Note()) + state.selected_note_index = len(state.notes) - 1 + yield + + +def on_click_hide(e: me.ClickEvent): + """Hides/Shows preview Markdown pane.""" + state = me.state(State) + state.show_preview = bool(not state.show_preview) + + +def on_click_note(e: me.ClickEvent): + """Selects a note from the note list.""" + state = me.state(State) + note_id = int(e.key.replace("note-", "")) + note = state.notes[note_id] + state.selected_note_index = note_id + state.selected_note_content = note.content + + +def on_text_input(e: me.InputEvent): + """Captures text in editor.""" + state = me.state(State) + state.notes[state.selected_note_index].content = e.value + + +# STYLES + +_BACKGROUND_COLOR = "#fafafa" +_FONT_COLOR = "#555" +_NOTE_ROW_FONT_COLOR = "#777" +_NOTE_ROW_FONT_SIZE = "14px" +_SELECTED_ROW_BACKGROUND_COLOR = "#dee3eb" +_DEFAULT_BORDER_STYLE = me.BorderSide(width=1, style="solid", color="#bbb") + + +def _style_container(show_preview: bool = True) -> me.Style: + return me.Style( + background=me.theme_var("surface"), + color=me.theme_var("on-surface"), + display="grid", + grid_template_columns="2fr 4fr 4fr" if show_preview else "2fr 8fr", + height="100vh", + ) + + +def _style_note_row(selected: bool = False) -> me.Style: + return me.Style( + color=_NOTE_ROW_FONT_COLOR, + font_size=_NOTE_ROW_FONT_SIZE, + background=_SELECTED_ROW_BACKGROUND_COLOR if selected else "none", + padding=me.Padding.all(10), + border=me.Border(bottom=_DEFAULT_BORDER_STYLE), + height="100px", + overflow_x="hidden", + overflow_y="hidden", + ) + + +_STYLE_NOTES_NAV = me.Style(overflow_y="scroll", padding=me.Padding.all(15)) + + +_STYLE_TOOLBAR = me.Style( + padding=me.Padding.all(5), + border=me.Border(bottom=_DEFAULT_BORDER_STYLE), +) + + +_STYLE_EDITOR = me.Style( + overflow_y="hidden", + padding=me.Padding(left=20, right=15, top=20, bottom=0), + border=me.Border( + left=_DEFAULT_BORDER_STYLE, + right=_DEFAULT_BORDER_STYLE, + ), +) + + +_STYLE_PREVIEW = me.Style( + overflow_y="scroll", padding=me.Padding.symmetric(vertical=0, horizontal=20) +) + + +_STYLE_TEXTAREA = me.Style( + color=_FONT_COLOR, + background=_BACKGROUND_COLOR, + outline="none", # Hides focus border + border=me.Border.all(me.BorderSide(style="none")), + width="100%", + height="100%", +) diff --git a/ai/ft/goldens/change%20background%20color_ycfsDA/prompt.txt b/ai/ft/goldens/change%20background%20color_ycfsDA/prompt.txt new file mode 100644 index 000000000..be6d12a07 --- /dev/null +++ b/ai/ft/goldens/change%20background%20color_ycfsDA/prompt.txt @@ -0,0 +1 @@ +change background color \ No newline at end of file diff --git a/ai/ft/goldens/change%20background%20color_ycfsDA/source.py b/ai/ft/goldens/change%20background%20color_ycfsDA/source.py new file mode 100644 index 000000000..cb550b84e --- /dev/null +++ b/ai/ft/goldens/change%20background%20color_ycfsDA/source.py @@ -0,0 +1,189 @@ +from dataclasses import dataclass, field + +import mesop as me + +_INTRO_TEXT = """ +# Mesop Markdown Editor Example + +This example shows how to make a simple markdown editor. +""".strip() + + +@dataclass(kw_only=True) +class Note: + """Content of note.""" + + content: str = "" + + +@me.stateclass +class State: + notes: list[Note] = field(default_factory=lambda: [Note(content=_INTRO_TEXT)]) + selected_note_index: int = 0 + selected_note_content: str = _INTRO_TEXT + show_preview: bool = True + + +@me.page( + security_policy=me.SecurityPolicy( + allowed_iframe_parents=["https://google.github.io"] + ), + path="/markdown_editor", + title="Markdown Editor", +) +def page(): + state = me.state(State) + + with me.box(style=_style_container(state.show_preview)): + # Note list column + with me.box(style=_STYLE_NOTES_NAV): + # Toolbar + with me.box(style=_STYLE_TOOLBAR): + with me.content_button(on_click=on_click_new): + with me.tooltip(message="New note"): + me.icon(icon="add_notes") + with me.content_button(on_click=on_click_hide): + with me.tooltip( + message="Hide preview" if state.show_preview else "Show preview" + ): + me.icon(icon="hide_image") + + # Note list + for index, note in enumerate(state.notes): + with me.box( + key=f"note-{index}", + on_click=on_click_note, + style=_style_note_row(index == state.selected_note_index), + ): + me.text(_render_note_excerpt(note.content)) + + # Markdown Editor Column + with me.box(style=_STYLE_EDITOR): + me.native_textarea( + value=state.selected_note_content, + style=_STYLE_TEXTAREA, + on_input=on_text_input, + ) + + # Markdown Preview Column + if state.show_preview: + with me.box(style=_STYLE_PREVIEW): + if state.selected_note_index < len(state.notes): + me.markdown(state.notes[state.selected_note_index].content) + + +# HELPERS + +_EXCERPT_CHAR_LIMIT = 90 + + +def _render_note_excerpt(content: str) -> str: + if len(content) <= _EXCERPT_CHAR_LIMIT: + return content + return content[:_EXCERPT_CHAR_LIMIT] + "..." + + +# EVENT HANDLERS + + +def on_click_new(e: me.ClickEvent): + state = me.state(State) + # Need to update the initial value of the editor text area so we can + # trigger a diff to reset the editor to empty. Need to yield this change. + # for this to work. + state.selected_note_content = state.notes[state.selected_note_index].content + yield + # Reset the initial value of the editor text area to empty since the new note + # has no content. + state.selected_note_content = "" + state.notes.append(Note()) + state.selected_note_index = len(state.notes) - 1 + yield + + +def on_click_hide(e: me.ClickEvent): + """Hides/Shows preview Markdown pane.""" + state = me.state(State) + state.show_preview = bool(not state.show_preview) + + +def on_click_note(e: me.ClickEvent): + """Selects a note from the note list.""" + state = me.state(State) + note_id = int(e.key.replace("note-", "")) + note = state.notes[note_id] + state.selected_note_index = note_id + state.selected_note_content = note.content + + +def on_text_input(e: me.InputEvent): + """Captures text in editor.""" + state = me.state(State) + state.notes[state.selected_note_index].content = e.value + + +# STYLES + +_BACKGROUND_COLOR = "#fafafa" +_FONT_COLOR = "#555" +_NOTE_ROW_FONT_COLOR = "#777" +_NOTE_ROW_FONT_SIZE = "14px" +_SELECTED_ROW_BACKGROUND_COLOR = "#dee3eb" +_DEFAULT_BORDER_STYLE = me.BorderSide(width=1, style="solid", color="#bbb") + + +def _style_container(show_preview: bool = True) -> me.Style: + return me.Style( + background=_BACKGROUND_COLOR, + color=_FONT_COLOR, + display="grid", + grid_template_columns="2fr 4fr 4fr" if show_preview else "2fr 8fr", + height="100vh", + ) + + +def _style_note_row(selected: bool = False) -> me.Style: + return me.Style( + color=_NOTE_ROW_FONT_COLOR, + font_size=_NOTE_ROW_FONT_SIZE, + background=_SELECTED_ROW_BACKGROUND_COLOR if selected else "none", + padding=me.Padding.all(10), + border=me.Border(bottom=_DEFAULT_BORDER_STYLE), + height="100px", + overflow_x="hidden", + overflow_y="hidden", + ) + + +_STYLE_NOTES_NAV = me.Style(overflow_y="scroll", padding=me.Padding.all(15)) + + +_STYLE_TOOLBAR = me.Style( + padding=me.Padding.all(5), + border=me.Border(bottom=_DEFAULT_BORDER_STYLE), +) + + +_STYLE_EDITOR = me.Style( + overflow_y="hidden", + padding=me.Padding(left=20, right=15, top=20, bottom=0), + border=me.Border( + left=_DEFAULT_BORDER_STYLE, + right=_DEFAULT_BORDER_STYLE, + ), +) + + +_STYLE_PREVIEW = me.Style( + overflow_y="scroll", padding=me.Padding.symmetric(vertical=0, horizontal=20) +) + + +_STYLE_TEXTAREA = me.Style( + color=_FONT_COLOR, + background=_BACKGROUND_COLOR, + outline="none", # Hides focus border + border=me.Border.all(me.BorderSide(style="none")), + width="100%", + height="100%", +) diff --git a/ai/ft/goldens/change%20color_7nBj5g/diff.txt b/ai/ft/goldens/change%20color_7nBj5g/diff.txt new file mode 100644 index 000000000..e1a6abd26 --- /dev/null +++ b/ai/ft/goldens/change%20color_7nBj5g/diff.txt @@ -0,0 +1,5 @@ +<<<<<<< ORIGINAL + me.text(text="subtitle-2: Hello, world!", type="subtitle-2") # <--- EDIT HERE +======= + me.text(text="subtitle-2: Hello, world!", type="subtitle-2", style=me.Style(color="green")) # <--- EDIT HERE +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/change%20color_7nBj5g/metadata.json b/ai/ft/goldens/change%20color_7nBj5g/metadata.json new file mode 100644 index 000000000..25ba237c0 --- /dev/null +++ b/ai/ft/goldens/change%20color_7nBj5g/metadata.json @@ -0,0 +1 @@ +{"line_number": 18} diff --git a/ai/ft/goldens/change%20color_7nBj5g/patched.py b/ai/ft/goldens/change%20color_7nBj5g/patched.py new file mode 100644 index 000000000..ff6322b71 --- /dev/null +++ b/ai/ft/goldens/change%20color_7nBj5g/patched.py @@ -0,0 +1,22 @@ +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") diff --git a/ai/ft/goldens/change%20color_7nBj5g/prompt.txt b/ai/ft/goldens/change%20color_7nBj5g/prompt.txt new file mode 100644 index 000000000..023ddf629 --- /dev/null +++ b/ai/ft/goldens/change%20color_7nBj5g/prompt.txt @@ -0,0 +1 @@ +change color \ No newline at end of file diff --git a/ai/ft/goldens/change%20color_7nBj5g/source.py b/ai/ft/goldens/change%20color_7nBj5g/source.py new file mode 100644 index 000000000..ec73ed306 --- /dev/null +++ b/ai/ft/goldens/change%20color_7nBj5g/source.py @@ -0,0 +1,22 @@ +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") + 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") diff --git a/ai/ft/goldens/change%20text_6c0amg/patched.py b/ai/ft/goldens/change%20text_6c0amg/patched.py new file mode 100644 index 000000000..1455a2fd3 --- /dev/null +++ b/ai/ft/goldens/change%20text_6c0amg/patched.py @@ -0,0 +1,32 @@ +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", style=me.Style(color=me.theme_var("primary"))) + me.text(text="headline-2: Hello, world!", type="headline-2", style=me.Style(color=me.theme_var("primary"))) + me.text(text="Welcome to Mesop!", type="headline-4", style=me.Style(color=me.theme_var("primary"))) + me.text(text="headline-4: Hello, world!", type="headline-4", style=me.Style(color=me.theme_var("primary"))) + me.text(text="headline-5: Hello, world!", type="headline-5", style=me.Style(color=me.theme_var("primary"))) + me.text(text="headline-6: Hello, world!", type="headline-6", style=me.Style(color=me.theme_var("primary"))) + me.text(text="subtitle-1: Hello, world!", type="subtitle-1", style=me.Style(color=me.theme_var("primary"))) + me.text(text="subtitle-2: Hello, world!", type="subtitle-2", style=me.Style(color=me.theme_var("primary"))) + me.text(text="This is body-1 text.", type="body-1", style=me.Style(color=me.theme_var("on-surface"), font_size=18)) + me.text(text="body-2: Hello, world!", type="body-2", style=me.Style(color=me.theme_var("on-surface"))) + me.text(text="caption: Hello, world!", type="caption", style=me.Style(color=me.theme_var("on-surface-variant"))) + me.text(text="button: Hello, world!", type="button", style=me.Style(color=me.theme_var("primary"))) + wrap_button() + + with me.box(style=me.Style(padding=me.Padding.all(24), background=me.theme_var("surface"))): + me.text("inside box1", style=me.Style(color=me.theme_var("on-surface"))) + me.text("inside box2", style=me.Style(color=me.theme_var("on-surface"))) + + +@me.component +def wrap_button(): + me.button("button") diff --git a/ai/ft/goldens/change%20text__yD4kg/diff.txt b/ai/ft/goldens/change%20text__yD4kg/diff.txt new file mode 100644 index 000000000..c2a43f2d7 --- /dev/null +++ b/ai/ft/goldens/change%20text__yD4kg/diff.txt @@ -0,0 +1,11 @@ +<<<<<<< ORIGINAL + me.text( + "Welcome to the README App", + style=me.Style(font_size=24, margin=me.Margin(bottom=16)), + ) +======= + me.text( + "Welcome to the Prompt Generator", + style=me.Style(font_size=24, margin=me.Margin(bottom=16)), + ) +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/change%20text__yD4kg/metadata.json b/ai/ft/goldens/change%20text__yD4kg/metadata.json new file mode 100644 index 000000000..5860c19a5 --- /dev/null +++ b/ai/ft/goldens/change%20text__yD4kg/metadata.json @@ -0,0 +1,3 @@ +{ + "line_number": 31 +} diff --git a/ai/ft/goldens/change%20text__yD4kg/patched.py b/ai/ft/goldens/change%20text__yD4kg/patched.py new file mode 100644 index 000000000..ac7af699f --- /dev/null +++ b/ai/ft/goldens/change%20text__yD4kg/patched.py @@ -0,0 +1,59 @@ +import mesop as me + + +@me.stateclass +class State: + prompt: str + output: str + + +def on_prompt_input(event: me.InputEvent): + state = me.state(State) + state.prompt = event.value + + +def on_submit(event: me.ClickEvent): + state = me.state(State) + # state.output = api_call(state.prompt) + state.output = "output: " + state.prompt + + +@me.page(path="/readme_app") +def app(): + with me.box( + style=me.Style( + padding=me.Padding.all(24), + max_width=600, + margin=me.Margin.symmetric(horizontal="auto"), + ) + ): + me.text( + "Welcome to the Prompt Generator", + style=me.Style(font_size=24, margin=me.Margin(bottom=16)), + ) + + me.textarea( + rows=10, + label="Enter your prompt", + on_input=on_prompt_input, + style=me.Style(width="100%", margin=me.Margin(bottom=16)), + ) + + me.button( + "Submit", on_click=on_submit, style=me.Style(margin=me.Margin(bottom=16)) + ) + + state = me.state(State) + if state.output: + with me.box( + style=me.Style( + background=me.theme_var("surface"), + padding=me.Padding.all(16), + border_radius=8, + ) + ): + me.text( + "Output:", + style=me.Style(font_weight="bold", margin=me.Margin(bottom=8)), + ) + me.text(state.output) diff --git a/ai/ft/goldens/change%20text__yD4kg/prompt.txt b/ai/ft/goldens/change%20text__yD4kg/prompt.txt new file mode 100644 index 000000000..60dc05f29 --- /dev/null +++ b/ai/ft/goldens/change%20text__yD4kg/prompt.txt @@ -0,0 +1 @@ +change text \ No newline at end of file diff --git a/ai/ft/goldens/change%20text__yD4kg/source.py b/ai/ft/goldens/change%20text__yD4kg/source.py new file mode 100644 index 000000000..0614c8efc --- /dev/null +++ b/ai/ft/goldens/change%20text__yD4kg/source.py @@ -0,0 +1,59 @@ +import mesop as me + + +@me.stateclass +class State: + prompt: str + output: str + + +def on_prompt_input(event: me.InputEvent): + state = me.state(State) + state.prompt = event.value + + +def on_submit(event: me.ClickEvent): + state = me.state(State) + # state.output = api_call(state.prompt) + state.output = "output: " + state.prompt + + +@me.page(path="/readme_app") +def app(): + with me.box( + style=me.Style( + padding=me.Padding.all(24), + max_width=600, + margin=me.Margin.symmetric(horizontal="auto"), + ) + ): + me.text( + "Welcome to the README App", + style=me.Style(font_size=24, margin=me.Margin(bottom=16)), + ) + + me.textarea( + rows=10, + label="Enter your prompt", + on_input=on_prompt_input, + style=me.Style(width="100%", margin=me.Margin(bottom=16)), + ) + + me.button( + "Submit", on_click=on_submit, style=me.Style(margin=me.Margin(bottom=16)) + ) + + state = me.state(State) + if state.output: + with me.box( + style=me.Style( + background=me.theme_var("surface"), + padding=me.Padding.all(16), + border_radius=8, + ) + ): + me.text( + "Output:", + style=me.Style(font_weight="bold", margin=me.Margin(bottom=8)), + ) + me.text(state.output) diff --git a/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/diff.txt b/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/diff.txt new file mode 100644 index 000000000..bb48f89bc --- /dev/null +++ b/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/diff.txt @@ -0,0 +1,86 @@ +<<<<<<< ORIGINAL +def body(): + with me.box( + style=me.Style( + background=me.theme_var("background"), + flex_grow=1, + padding=me.Padding( + left=32, + right=32, + top=32, + bottom=64, + ), + border_radius=16, + overflow_y="auto", + ) + ): + me.text("Body") +======= +def body(): + with me.box( + style=me.Style( + background=me.theme_var("background"), + flex_grow=1, + padding=me.Padding( + left=32, + right=32, + top=32, + bottom=64, + ), + border_radius=16, + overflow_y="auto", + ) + ): + me.text("Body", style=me.Style( + font_size=18, + font_weight=400, + color=me.theme_var("on-background"), + margin=me.Margin(bottom=24) + )) + grid_of_cards() + +def grid_of_cards(): + with me.box( + style=me.Style( + display="grid", + grid_template_columns="repeat(auto-fill, minmax(200px, 1fr))", + gap=16, + padding=me.Padding(bottom=32) + ) + ): + for i in range(6): + card() + +def card(): + with me.box( + style=me.Style( + background=me.theme_var("surface"), + border_radius=12, + padding=me.Padding.all(16), + box_shadow="0 2px 4px rgba(0, 0, 0, 0.1)", + display="flex", + flex_direction="column", + gap=12 + ) + ): + me.text("Card Title", style=me.Style( + font_size=16, + font_weight=500, + color=me.theme_var("on-surface"), + )) + me.text("This is some content for the card. You can add more components here.", style=me.Style( + font_size=14, + color=me.theme_var("on-surface-variant"), + )) + with me.box( + style=me.Style( + display="flex", + justify_content="end", + margin=me.Margin(top=8), + ) + ): + me.button("Action", on_click=card_action, type="flat") + +def card_action(e: me.ClickEvent): + print("Card action clicked") +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/metadata.json b/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/metadata.json new file mode 100644 index 000000000..33f4a795e --- /dev/null +++ b/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/metadata.json @@ -0,0 +1 @@ +{"line_number": 421} diff --git a/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/patched.py b/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/patched.py new file mode 100644 index 000000000..19a156831 --- /dev/null +++ b/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/patched.py @@ -0,0 +1,167 @@ +import mesop as me + + +@me.stateclass +class State: + sidenav_menu_open: bool + + +def toggle_menu_button(e: me.ClickEvent): + s = me.state(State) + s.sidenav_menu_open = not s.sidenav_menu_open + + +def is_mobile(): + return me.viewport_size().width < 640 + + +@me.page( + title="Responsive layout", + path="/responsive_layout", +) +def page(): + with me.box(style=me.Style(display="flex", height="100%")): + if is_mobile(): + with me.content_button( + type="icon", + style=me.Style(top=6, left=8, position="absolute", z_index=9), + on_click=toggle_menu_button, + ): + me.icon("menu") + with me.sidenav( + opened=me.state(State).sidenav_menu_open, + style=me.Style( + background=me.theme_var("surface-container-low"), + ), + ): + sidenav() + else: + sidenav() + with me.box( + style=me.Style( + background=me.theme_var("surface-container-low"), + display="flex", + flex_direction="column", + flex_grow=1, + ) + ): + header() + body() + + +def header(): + with me.box( + style=me.Style( + height=120, + width="100%", + padding=me.Padding.all(16), + display="flex", + align_items="center", + ), + ): + me.text( + "Title", + style=me.Style( + color=me.theme_var("on-background"), + font_size=22, + font_weight=500, + letter_spacing="0.8px", + padding=me.Padding(left=36) if is_mobile() else None, + ), + ) + + +def body(): + with me.box( + style=me.Style( + background=me.theme_var("background"), + flex_grow=1, + padding=me.Padding( + left=32, + right=32, + top=32, + bottom=64, + ), + border_radius=16, + overflow_y="auto", + ) + ): + me.text("Body", style=me.Style( + font_size=18, + font_weight=400, + color=me.theme_var("on-background"), + margin=me.Margin(bottom=24) + )) + grid_of_cards() + +def grid_of_cards(): + with me.box( + style=me.Style( + display="grid", + grid_template_columns="repeat(auto-fill, minmax(200px, 1fr))", + gap=16, + padding=me.Padding(bottom=32) + ) + ): + for i in range(6): + card() + +def card(): + with me.box( + style=me.Style( + background=me.theme_var("surface"), + border_radius=12, + padding=me.Padding.all(16), + box_shadow="0 2px 4px rgba(0, 0, 0, 0.1)", + display="flex", + flex_direction="column", + gap=12 + ) + ): + me.text("Card Title", style=me.Style( + font_size=16, + font_weight=500, + color=me.theme_var("on-surface"), + )) + me.text("This is some content for the card. You can add more components here.", style=me.Style( + font_size=14, + color=me.theme_var("on-surface-variant"), + )) + with me.box( + style=me.Style( + display="flex", + justify_content="end", + margin=me.Margin(top=8), + ) + ): + me.button("Action", on_click=card_action, type="flat") + +def card_action(e: me.ClickEvent): + print("Card action clicked") + + +def sidenav(): + with me.box( + style=me.Style( + width=216, + height="100%", + background=me.theme_var("surface-container-low"), + padding=me.Padding.all(16), + ) + ): + with me.box( + style=me.Style( + padding=me.Padding(top=24), + display="flex", + flex_direction="column", + gap=8, + ), + ): + me.text( + "Sidenav", + style=me.Style( + font_weight=500, + letter_spacing="0.4px", + padding=me.Padding(left=12), + ), + ) diff --git a/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/prompt.txt b/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/prompt.txt new file mode 100644 index 000000000..92e1f1615 --- /dev/null +++ b/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/prompt.txt @@ -0,0 +1 @@ +create a grid of cards \ No newline at end of file diff --git a/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/source.py b/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/source.py new file mode 100644 index 000000000..ab90e2311 --- /dev/null +++ b/ai/ft/goldens/create%20a%20grid%20of%20cards_7lozXw/source.py @@ -0,0 +1,116 @@ +import mesop as me + + +@me.stateclass +class State: + sidenav_menu_open: bool + + +def toggle_menu_button(e: me.ClickEvent): + s = me.state(State) + s.sidenav_menu_open = not s.sidenav_menu_open + + +def is_mobile(): + return me.viewport_size().width < 640 + + +@me.page( + title="Responsive layout", + path="/responsive_layout", +) +def page(): + with me.box(style=me.Style(display="flex", height="100%")): + if is_mobile(): + with me.content_button( + type="icon", + style=me.Style(top=6, left=8, position="absolute", z_index=9), + on_click=toggle_menu_button, + ): + me.icon("menu") + with me.sidenav( + opened=me.state(State).sidenav_menu_open, + style=me.Style( + background=me.theme_var("surface-container-low"), + ), + ): + sidenav() + else: + sidenav() + with me.box( + style=me.Style( + background=me.theme_var("surface-container-low"), + display="flex", + flex_direction="column", + flex_grow=1, + ) + ): + header() + body() + + +def header(): + with me.box( + style=me.Style( + height=120, + width="100%", + padding=me.Padding.all(16), + display="flex", + align_items="center", + ), + ): + me.text( + "Title", + style=me.Style( + color=me.theme_var("on-background"), + font_size=22, + font_weight=500, + letter_spacing="0.8px", + padding=me.Padding(left=36) if is_mobile() else None, + ), + ) + + +def body(): + with me.box( + style=me.Style( + background=me.theme_var("background"), + flex_grow=1, + padding=me.Padding( + left=32, + right=32, + top=32, + bottom=64, + ), + border_radius=16, + overflow_y="auto", + ) + ): + me.text("Body") + + +def sidenav(): + with me.box( + style=me.Style( + width=216, + height="100%", + background=me.theme_var("surface-container-low"), + padding=me.Padding.all(16), + ) + ): + with me.box( + style=me.Style( + padding=me.Padding(top=24), + display="flex", + flex_direction="column", + gap=8, + ), + ): + me.text( + "Sidenav", + style=me.Style( + font_weight=500, + letter_spacing="0.4px", + padding=me.Padding(left=12), + ), + ) diff --git a/ai/ft/goldens/create%20a%20grid_DPxmyw/diff.txt b/ai/ft/goldens/create%20a%20grid_DPxmyw/diff.txt new file mode 100644 index 000000000..86c58b4db --- /dev/null +++ b/ai/ft/goldens/create%20a%20grid_DPxmyw/diff.txt @@ -0,0 +1,47 @@ +<<<<<<< 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-5") + 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") + 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(): + with me.box(style=me.Style( + display="grid", + grid_template_columns="repeat(3, 1fr)", + gap=16, + padding=me.Padding.all(24) + )): + 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-5") + 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") + 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") +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/create%20a%20grid_DPxmyw/patched.py b/ai/ft/goldens/create%20a%20grid_DPxmyw/patched.py new file mode 100644 index 000000000..45b0b90ac --- /dev/null +++ b/ai/ft/goldens/create%20a%20grid_DPxmyw/patched.py @@ -0,0 +1,28 @@ +import mesop as me + + +@me.page( + security_policy=me.SecurityPolicy( + allowed_iframe_parents=["https://google.github.io"] + ), + path="/text", +) +def text(): + with me.box(style=me.Style( + display="grid", + grid_template_columns="repeat(3, 1fr)", + gap=16, + padding=me.Padding.all(24) + )): + 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-5") + 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") + 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") diff --git a/ai/ft/goldens/create%20a%20grid_DPxmyw/prompt.txt b/ai/ft/goldens/create%20a%20grid_DPxmyw/prompt.txt new file mode 100644 index 000000000..a5197fb4e --- /dev/null +++ b/ai/ft/goldens/create%20a%20grid_DPxmyw/prompt.txt @@ -0,0 +1 @@ +create a grid \ No newline at end of file diff --git a/ai/ft/goldens/create%20a%20grid_DPxmyw/source.py b/ai/ft/goldens/create%20a%20grid_DPxmyw/source.py new file mode 100644 index 000000000..7a037c939 --- /dev/null +++ b/ai/ft/goldens/create%20a%20grid_DPxmyw/source.py @@ -0,0 +1,22 @@ +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-5") + 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") + 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") diff --git a/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/diff.txt b/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/diff.txt new file mode 100644 index 000000000..5f3c02d13 --- /dev/null +++ b/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/diff.txt @@ -0,0 +1,66 @@ +<<<<<<< ORIGINAL +def sidenav(): + with me.box( + style=me.Style( + width=216, + height="100%", + background=me.theme_var("surface-container-low"), + padding=me.Padding.all(16), + ) + ): + with me.box( + style=me.Style( + padding=me.Padding(top=24), + display="flex", + flex_direction="column", + gap=8, + ), + ): + me.text( + "Sidenav", + style=me.Style( + font_weight=500, + letter_spacing="0.4px", + padding=me.Padding(left=12), + ), + ) +======= +def sidenav(): + with me.box( + style=me.Style( + width=216, + height="100%", + background=me.theme_var("surface-container-low"), + padding=me.Padding.all(16), + ) + ): + with me.box( + style=me.Style( + padding=me.Padding(top=24), + display="flex", + flex_direction="column", + gap=8, + ), + ): + me.text( + "Sidenav", + style=me.Style( + font_weight=500, + letter_spacing="0.4px", + padding=me.Padding(left=12), + ), + ) + menu_options = ["Home", "Profile", "Settings", "Logout"] + for option in menu_options: + me.text( + option, + style=me.Style( + font_weight=400, + letter_spacing="0.4px", + padding=me.Padding.symmetric(vertical=8, horizontal=12), + border=me.Border( + bottom=me.BorderSide(width=1, color=me.theme_var("outline")) + ), + ), + ) +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/metadata.json b/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/metadata.json new file mode 100644 index 000000000..33f4a795e --- /dev/null +++ b/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/metadata.json @@ -0,0 +1 @@ +{"line_number": 421} diff --git a/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/patched.py b/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/patched.py new file mode 100644 index 000000000..c47e7334f --- /dev/null +++ b/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/patched.py @@ -0,0 +1,129 @@ +import mesop as me + + +@me.stateclass +class State: + sidenav_menu_open: bool + + +def toggle_menu_button(e: me.ClickEvent): + s = me.state(State) + s.sidenav_menu_open = not s.sidenav_menu_open + + +def is_mobile(): + return me.viewport_size().width < 640 + + +@me.page( + title="Responsive layout", + path="/responsive_layout", +) +def page(): + with me.box(style=me.Style(display="flex", height="100%")): + if is_mobile(): + with me.content_button( + type="icon", + style=me.Style(top=6, left=8, position="absolute", z_index=9), + on_click=toggle_menu_button, + ): + me.icon("menu") + with me.sidenav( + opened=me.state(State).sidenav_menu_open, + style=me.Style( + background=me.theme_var("surface-container-low"), + ), + ): + sidenav() + else: + sidenav() + with me.box( + style=me.Style( + background=me.theme_var("surface-container-low"), + display="flex", + flex_direction="column", + flex_grow=1, + ) + ): + header() + body() + + +def header(): + with me.box( + style=me.Style( + height=120, + width="100%", + padding=me.Padding.all(16), + display="flex", + align_items="center", + ), + ): + me.text( + "Title", + style=me.Style( + color=me.theme_var("on-background"), + font_size=22, + font_weight=500, + letter_spacing="0.8px", + padding=me.Padding(left=36) if is_mobile() else None, + ), + ) + + +def body(): + with me.box( + style=me.Style( + background=me.theme_var("background"), + flex_grow=1, + padding=me.Padding( + left=32, + right=32, + top=32, + bottom=64, + ), + border_radius=16, + overflow_y="auto", + ) + ): + me.text("Body") + + +def sidenav(): + with me.box( + style=me.Style( + width=216, + height="100%", + background=me.theme_var("surface-container-low"), + padding=me.Padding.all(16), + ) + ): + with me.box( + style=me.Style( + padding=me.Padding(top=24), + display="flex", + flex_direction="column", + gap=8, + ), + ): + me.text( + "Sidenav", + style=me.Style( + font_weight=500, + letter_spacing="0.4px", + padding=me.Padding(left=12), + ), + ) + menu_options = ["Home", "Profile", "Settings", "Logout"] + for option in menu_options: + me.text( + option, + style=me.Style( + font_weight=400, + letter_spacing="0.4px", + padding=me.Padding.symmetric(vertical=8, horizontal=12), + border=me.Border( + bottom=me.BorderSide(width=1, color=me.theme_var("outline")) + ), + ), + ) diff --git a/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/prompt.txt b/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/prompt.txt new file mode 100644 index 000000000..dcb4d8552 --- /dev/null +++ b/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/prompt.txt @@ -0,0 +1 @@ +create a list of menu options \ No newline at end of file diff --git a/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/source.py b/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/source.py new file mode 100644 index 000000000..ab90e2311 --- /dev/null +++ b/ai/ft/goldens/create%20a%20list%20of%20menu%20options_fhS3Yw/source.py @@ -0,0 +1,116 @@ +import mesop as me + + +@me.stateclass +class State: + sidenav_menu_open: bool + + +def toggle_menu_button(e: me.ClickEvent): + s = me.state(State) + s.sidenav_menu_open = not s.sidenav_menu_open + + +def is_mobile(): + return me.viewport_size().width < 640 + + +@me.page( + title="Responsive layout", + path="/responsive_layout", +) +def page(): + with me.box(style=me.Style(display="flex", height="100%")): + if is_mobile(): + with me.content_button( + type="icon", + style=me.Style(top=6, left=8, position="absolute", z_index=9), + on_click=toggle_menu_button, + ): + me.icon("menu") + with me.sidenav( + opened=me.state(State).sidenav_menu_open, + style=me.Style( + background=me.theme_var("surface-container-low"), + ), + ): + sidenav() + else: + sidenav() + with me.box( + style=me.Style( + background=me.theme_var("surface-container-low"), + display="flex", + flex_direction="column", + flex_grow=1, + ) + ): + header() + body() + + +def header(): + with me.box( + style=me.Style( + height=120, + width="100%", + padding=me.Padding.all(16), + display="flex", + align_items="center", + ), + ): + me.text( + "Title", + style=me.Style( + color=me.theme_var("on-background"), + font_size=22, + font_weight=500, + letter_spacing="0.8px", + padding=me.Padding(left=36) if is_mobile() else None, + ), + ) + + +def body(): + with me.box( + style=me.Style( + background=me.theme_var("background"), + flex_grow=1, + padding=me.Padding( + left=32, + right=32, + top=32, + bottom=64, + ), + border_radius=16, + overflow_y="auto", + ) + ): + me.text("Body") + + +def sidenav(): + with me.box( + style=me.Style( + width=216, + height="100%", + background=me.theme_var("surface-container-low"), + padding=me.Padding.all(16), + ) + ): + with me.box( + style=me.Style( + padding=me.Padding(top=24), + display="flex", + flex_direction="column", + gap=8, + ), + ): + me.text( + "Sidenav", + style=me.Style( + font_weight=500, + letter_spacing="0.4px", + padding=me.Padding(left=12), + ), + ) diff --git a/ai/ft/goldens/create%20a%20row%20of%20cards_7e-VlQ/diff.txt b/ai/ft/goldens/create%20a%20row%20of%20cards_7e-VlQ/diff.txt new file mode 100644 index 000000000..e6b6671af --- /dev/null +++ b/ai/ft/goldens/create%20a%20row%20of%20cards_7e-VlQ/diff.txt @@ -0,0 +1,44 @@ +<<<<<<< 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.page( + security_policy=me.SecurityPolicy( + allowed_iframe_parents=["https://google.github.io"] + ), + path="/text", +) +def text(): + me.text(text="Card Gallery", type="headline-4", style=me.Style(margin=me.Margin(bottom=16))) + + with me.box(style=me.Style( + display="grid", + grid_template_columns="repeat(auto-fit, minmax(250px, 1fr))", + gap=16, + padding=me.Padding.all(16), + background=me.theme_var("surface"), + border_radius=8, + box_shadow="0 4px 6px rgba(0, 0, 0, 0.1)" + )): + for i in range(8): + with me.box(style=me.Style( + background="white", + padding=me.Padding.all(16), + border_radius=8, + box_shadow="0 2px 4px rgba(0, 0, 0, 0.05)", + display="flex", + flex_direction="column", + align_items="center", + justify_content="center" + )): + me.text(text=f"Card {i+1}", type="subtitle-1", style=me.Style(margin=me.Margin(bottom=8))) + me.text(text="This is a description of the card content.", type="body-2", style=me.Style(text_align="center")) + me.button("Action", on_click=lambda e: print(f"Card {i+1} clicked"), type="flat", style=me.Style(margin=me.Margin(top=12))) + me.text(text="headline-1: Hello, world!", type="headline-1") +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/create%20a%20row%20of%20cards_7e-VlQ/patched.py b/ai/ft/goldens/create%20a%20row%20of%20cards_7e-VlQ/patched.py new file mode 100644 index 000000000..60f8bbb30 --- /dev/null +++ b/ai/ft/goldens/create%20a%20row%20of%20cards_7e-VlQ/patched.py @@ -0,0 +1,47 @@ +import mesop as me + + +@me.page( + security_policy=me.SecurityPolicy( + allowed_iframe_parents=["https://google.github.io"] + ), + path="/text", +) +def text(): + me.text(text="Card Gallery", type="headline-4", style=me.Style(margin=me.Margin(bottom=16))) + + with me.box(style=me.Style( + display="grid", + grid_template_columns="repeat(auto-fit, minmax(250px, 1fr))", + gap=16, + padding=me.Padding.all(16), + background=me.theme_var("surface"), + border_radius=8, + box_shadow="0 4px 6px rgba(0, 0, 0, 0.1)" + )): + for i in range(8): + with me.box(style=me.Style( + background="white", + padding=me.Padding.all(16), + border_radius=8, + box_shadow="0 2px 4px rgba(0, 0, 0, 0.05)", + display="flex", + flex_direction="column", + align_items="center", + justify_content="center" + )): + me.text(text=f"Card {i+1}", type="subtitle-1", style=me.Style(margin=me.Margin(bottom=8))) + me.text(text="This is a description of the card content.", type="body-2", style=me.Style(text_align="center")) + me.button("Action", on_click=lambda e: print(f"Card {i+1} clicked"), type="flat", style=me.Style(margin=me.Margin(top=12))) + 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") + 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") diff --git a/ai/ft/goldens/create%20a%20row%20of%20cards_7e-VlQ/prompt.txt b/ai/ft/goldens/create%20a%20row%20of%20cards_7e-VlQ/prompt.txt new file mode 100644 index 000000000..a2e5c3be5 --- /dev/null +++ b/ai/ft/goldens/create%20a%20row%20of%20cards_7e-VlQ/prompt.txt @@ -0,0 +1 @@ +create a row of cards \ No newline at end of file diff --git a/ai/ft/goldens/create%20a%20row%20of%20cards_7e-VlQ/source.py b/ai/ft/goldens/create%20a%20row%20of%20cards_7e-VlQ/source.py new file mode 100644 index 000000000..ec73ed306 --- /dev/null +++ b/ai/ft/goldens/create%20a%20row%20of%20cards_7e-VlQ/source.py @@ -0,0 +1,22 @@ +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") + 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") diff --git a/ai/ft/goldens/delete_5s2Acg/diff.txt b/ai/ft/goldens/delete_5s2Acg/diff.txt new file mode 100644 index 000000000..d64b050cd --- /dev/null +++ b/ai/ft/goldens/delete_5s2Acg/diff.txt @@ -0,0 +1,12 @@ +<<<<<<< ORIGINAL + me.text( + "Sidenav", + style=me.Style( + font_weight=500, + letter_spacing="0.4px", + padding=me.Padding(left=12), + ), + ) +======= + pass +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/delete_5s2Acg/metadata.json b/ai/ft/goldens/delete_5s2Acg/metadata.json new file mode 100644 index 000000000..33f4a795e --- /dev/null +++ b/ai/ft/goldens/delete_5s2Acg/metadata.json @@ -0,0 +1 @@ +{"line_number": 421} diff --git a/ai/ft/goldens/delete_5s2Acg/patched.py b/ai/ft/goldens/delete_5s2Acg/patched.py new file mode 100644 index 000000000..13009c9fb --- /dev/null +++ b/ai/ft/goldens/delete_5s2Acg/patched.py @@ -0,0 +1,109 @@ +import mesop as me + + +@me.stateclass +class State: + sidenav_menu_open: bool + + +def toggle_menu_button(e: me.ClickEvent): + s = me.state(State) + s.sidenav_menu_open = not s.sidenav_menu_open + + +def is_mobile(): + return me.viewport_size().width < 640 + + +@me.page( + title="Responsive layout", + path="/responsive_layout", +) +def page(): + with me.box(style=me.Style(display="flex", height="100%")): + if is_mobile(): + with me.content_button( + type="icon", + style=me.Style(top=6, left=8, position="absolute", z_index=9), + on_click=toggle_menu_button, + ): + me.icon("menu") + with me.sidenav( + opened=me.state(State).sidenav_menu_open, + style=me.Style( + background=me.theme_var("surface-container-low"), + ), + ): + sidenav() + else: + sidenav() + with me.box( + style=me.Style( + background=me.theme_var("surface-container-low"), + display="flex", + flex_direction="column", + flex_grow=1, + ) + ): + header() + body() + + +def header(): + with me.box( + style=me.Style( + height=120, + width="100%", + padding=me.Padding.all(16), + display="flex", + align_items="center", + ), + ): + me.text( + "Title", + style=me.Style( + color=me.theme_var("on-background"), + font_size=22, + font_weight=500, + letter_spacing="0.8px", + padding=me.Padding(left=36) if is_mobile() else None, + ), + ) + + +def body(): + with me.box( + style=me.Style( + background=me.theme_var("background"), + flex_grow=1, + padding=me.Padding( + left=32, + right=32, + top=32, + bottom=64, + ), + border_radius=16, + overflow_y="auto", + ) + ): + me.text("Body") + + +def sidenav(): + with me.box( + style=me.Style( + width=216, + height="100%", + background=me.theme_var("surface-container-low"), + padding=me.Padding.all(16), + ) + ): + with me.box( + style=me.Style( + padding=me.Padding(top=24), + display="flex", + flex_direction="column", + gap=8, + ), + ): + pass diff --git a/ai/ft/goldens/delete_5s2Acg/prompt.txt b/ai/ft/goldens/delete_5s2Acg/prompt.txt new file mode 100644 index 000000000..bbd98f435 --- /dev/null +++ b/ai/ft/goldens/delete_5s2Acg/prompt.txt @@ -0,0 +1 @@ +delete \ No newline at end of file diff --git a/ai/ft/goldens/delete_5s2Acg/source.py b/ai/ft/goldens/delete_5s2Acg/source.py new file mode 100644 index 000000000..ab90e2311 --- /dev/null +++ b/ai/ft/goldens/delete_5s2Acg/source.py @@ -0,0 +1,116 @@ +import mesop as me + + +@me.stateclass +class State: + sidenav_menu_open: bool + + +def toggle_menu_button(e: me.ClickEvent): + s = me.state(State) + s.sidenav_menu_open = not s.sidenav_menu_open + + +def is_mobile(): + return me.viewport_size().width < 640 + + +@me.page( + title="Responsive layout", + path="/responsive_layout", +) +def page(): + with me.box(style=me.Style(display="flex", height="100%")): + if is_mobile(): + with me.content_button( + type="icon", + style=me.Style(top=6, left=8, position="absolute", z_index=9), + on_click=toggle_menu_button, + ): + me.icon("menu") + with me.sidenav( + opened=me.state(State).sidenav_menu_open, + style=me.Style( + background=me.theme_var("surface-container-low"), + ), + ): + sidenav() + else: + sidenav() + with me.box( + style=me.Style( + background=me.theme_var("surface-container-low"), + display="flex", + flex_direction="column", + flex_grow=1, + ) + ): + header() + body() + + +def header(): + with me.box( + style=me.Style( + height=120, + width="100%", + padding=me.Padding.all(16), + display="flex", + align_items="center", + ), + ): + me.text( + "Title", + style=me.Style( + color=me.theme_var("on-background"), + font_size=22, + font_weight=500, + letter_spacing="0.8px", + padding=me.Padding(left=36) if is_mobile() else None, + ), + ) + + +def body(): + with me.box( + style=me.Style( + background=me.theme_var("background"), + flex_grow=1, + padding=me.Padding( + left=32, + right=32, + top=32, + bottom=64, + ), + border_radius=16, + overflow_y="auto", + ) + ): + me.text("Body") + + +def sidenav(): + with me.box( + style=me.Style( + width=216, + height="100%", + background=me.theme_var("surface-container-low"), + padding=me.Padding.all(16), + ) + ): + with me.box( + style=me.Style( + padding=me.Padding(top=24), + display="flex", + flex_direction="column", + gap=8, + ), + ): + me.text( + "Sidenav", + style=me.Style( + font_weight=500, + letter_spacing="0.4px", + padding=me.Padding(left=12), + ), + ) diff --git a/ai/ft/goldens/make%20it%20look%20better_XDRX8w/diff.txt b/ai/ft/goldens/make%20it%20look%20better_XDRX8w/diff.txt new file mode 100644 index 000000000..00e87c64f --- /dev/null +++ b/ai/ft/goldens/make%20it%20look%20better_XDRX8w/diff.txt @@ -0,0 +1,16 @@ +<<<<<<< ORIGINAL + me.text(text=f"Card {i+1}", type="subtitle-1", style=me.Style(margin=me.Margin(bottom=8))) + me.text(text="This is a description of the card content.", type="body-2", style=me.Style(text_align="center")) + me.button("Action", on_click=lambda e: print(f"Card {i+1} clicked"), type="flat", style=me.Style(margin=me.Margin(top=12))) +======= + me.text(text=f"Card {i+1}", type="subtitle-1", style=me.Style( + margin=me.Margin(bottom=8), + color=me.theme_var("primary"), + font_weight="bold" + )) + me.text(text="This is a description of the card content.", type="body-2", style=me.Style( + text_align="center", + color=me.theme_var("on-surface") + )) + me.button("Action", on_click=lambda e: print(f"Card {i+1} clicked"), type="flat", style=me.Style(margin=me.Margin(top=12))) +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/make%20it%20look%20better_XDRX8w/metadata.json b/ai/ft/goldens/make%20it%20look%20better_XDRX8w/metadata.json new file mode 100644 index 000000000..df4a50c18 --- /dev/null +++ b/ai/ft/goldens/make%20it%20look%20better_XDRX8w/metadata.json @@ -0,0 +1 @@ +{"line_number": 23} diff --git a/ai/ft/goldens/make%20it%20look%20better_XDRX8w/patched.py b/ai/ft/goldens/make%20it%20look%20better_XDRX8w/patched.py new file mode 100644 index 000000000..9e0fd8c07 --- /dev/null +++ b/ai/ft/goldens/make%20it%20look%20better_XDRX8w/patched.py @@ -0,0 +1,42 @@ +import mesop as me + + +@me.page( + security_policy=me.SecurityPolicy( + allowed_iframe_parents=["https://google.github.io"] + ), + path="/text", +) +def text(): + me.text(text="Card Gallery", type="headline-4", style=me.Style(margin=me.Margin(bottom=16))) + + with me.box(style=me.Style( + display="grid", + grid_template_columns="repeat(auto-fit, minmax(250px, 1fr))", + gap=16, + padding=me.Padding.all(16), + background=me.theme_var("surface"), + border_radius=8, + box_shadow="0 4px 6px rgba(0, 0, 0, 0.1)" + )): + for i in range(8): + with me.box(style=me.Style( + background="white", + padding=me.Padding.all(16), + border_radius=8, + box_shadow="0 2px 4px rgba(0, 0, 0, 0.05)", + display="flex", + flex_direction="column", + align_items="center", + justify_content="center" + )): + me.text(text=f"Card {i+1}", type="subtitle-1", style=me.Style( + margin=me.Margin(bottom=8), + color=me.theme_var("primary"), + font_weight="bold" + )) + me.text(text="This is a description of the card content.", type="body-2", style=me.Style( + text_align="center", + color=me.theme_var("on-surface") + )) + me.button("Action", on_click=lambda e: print(f"Card {i+1} clicked"), type="flat", style=me.Style(margin=me.Margin(top=12))) diff --git a/ai/ft/goldens/make%20it%20look%20better_XDRX8w/prompt.txt b/ai/ft/goldens/make%20it%20look%20better_XDRX8w/prompt.txt new file mode 100644 index 000000000..940586f5f --- /dev/null +++ b/ai/ft/goldens/make%20it%20look%20better_XDRX8w/prompt.txt @@ -0,0 +1 @@ +make it look better \ No newline at end of file diff --git a/ai/ft/goldens/make%20it%20look%20better_XDRX8w/source.py b/ai/ft/goldens/make%20it%20look%20better_XDRX8w/source.py new file mode 100644 index 000000000..e91ac1211 --- /dev/null +++ b/ai/ft/goldens/make%20it%20look%20better_XDRX8w/source.py @@ -0,0 +1,35 @@ +import mesop as me + + +@me.page( + security_policy=me.SecurityPolicy( + allowed_iframe_parents=["https://google.github.io"] + ), + path="/text", +) +def text(): + me.text(text="Card Gallery", type="headline-4", style=me.Style(margin=me.Margin(bottom=16))) + + with me.box(style=me.Style( + display="grid", + grid_template_columns="repeat(auto-fit, minmax(250px, 1fr))", + gap=16, + padding=me.Padding.all(16), + background=me.theme_var("surface"), + border_radius=8, + box_shadow="0 4px 6px rgba(0, 0, 0, 0.1)" + )): + for i in range(8): + with me.box(style=me.Style( + background="white", + padding=me.Padding.all(16), + border_radius=8, + box_shadow="0 2px 4px rgba(0, 0, 0, 0.05)", + display="flex", + flex_direction="column", + align_items="center", + justify_content="center" + )): + me.text(text=f"Card {i+1}", type="subtitle-1", style=me.Style(margin=me.Margin(bottom=8))) + me.text(text="This is a description of the card content.", type="body-2", style=me.Style(text_align="center")) + me.button("Action", on_click=lambda e: print(f"Card {i+1} clicked"), type="flat", style=me.Style(margin=me.Margin(top=12))) diff --git a/ai/ft/goldens/make%20the%20example%20boxes%20more%20beautiful_2NGKUA/diff.txt b/ai/ft/goldens/make%20the%20example%20boxes%20more%20beautiful_2NGKUA/diff.txt new file mode 100644 index 000000000..fddc33a4f --- /dev/null +++ b/ai/ft/goldens/make%20the%20example%20boxes%20more%20beautiful_2NGKUA/diff.txt @@ -0,0 +1,43 @@ +<<<<<<< ORIGINAL +def example_box(example: str, is_mobile: bool): + with me.box( + style=me.Style( + width="100%" if is_mobile else 200, + height=140, + background="#F0F4F9", + padding=me.Padding.all(16), + font_weight=500, + line_height="1.5", + border_radius=16, + cursor="pointer", + ), + key=example, + on_click=click_example_box, + ): + me.text(example) +======= +def example_box(example: str, is_mobile: bool): + with me.box( + style=me.Style( + width="100%" if is_mobile else 200, + height=140, + background=me.theme_var("surface"), + padding=me.Padding.all(16), + font_weight=500, + line_height="1.5", + border_radius=12, + cursor="pointer", + display="flex", + align_items="center", + justify_content="center", + box_shadow="0 4px 6px rgba(0, 0, 0, 0.1)", + ), + key=example, + on_click=click_example_box, + ): + me.text(example, style=me.Style( + color=me.theme_var("on-surface"), + font_size=16, + text_align="center", + )) +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/make%20the%20example%20boxes%20more%20beautiful_2NGKUA/patched.py b/ai/ft/goldens/make%20the%20example%20boxes%20more%20beautiful_2NGKUA/patched.py new file mode 100644 index 000000000..5f0f33cf6 --- /dev/null +++ b/ai/ft/goldens/make%20the%20example%20boxes%20more%20beautiful_2NGKUA/patched.py @@ -0,0 +1,211 @@ +import time + +import mesop as me + + +@me.stateclass +class State: + input: str + output: str + in_progress: bool + + +@me.page(path="/starter_kit") +def page(): + with me.box( + style=me.Style( + background="#fff", + min_height="calc(100% - 48px)", + padding=me.Padding(bottom=16), + ) + ): + with me.box( + style=me.Style( + width="min(720px, 100%)", + margin=me.Margin.symmetric(horizontal="auto"), + padding=me.Padding.symmetric( + horizontal=16, + ), + ) + ): + header_text() + example_row() + chat_input() + output() + footer() + + +def header_text(): + with me.box( + style=me.Style( + padding=me.Padding( + top=64, + bottom=36, + ), + ) + ): + me.text( + "Mesop Starter Kit", + style=me.Style( + font_size=36, + font_weight=700, + background="linear-gradient(90deg, #4285F4, #AA5CDB, #DB4437) text", + color="transparent", + ), + ) + + +EXAMPLES = [ + "How to tie a shoe", + "Make a brownie recipe", + "Write an email asking for a sick day off", +] + + +def example_row(): + is_mobile = me.viewport_size().width < 640 + with me.box( + style=me.Style( + display="flex", + flex_direction="column" if is_mobile else "row", + gap=24, + margin=me.Margin(bottom=36), + ) + ): + for example in EXAMPLES: + example_box(example, is_mobile) + + +def example_box(example: str, is_mobile: bool): + with me.box( + style=me.Style( + width="100%" if is_mobile else 200, + height=140, + background=me.theme_var("surface"), + padding=me.Padding.all(16), + font_weight=500, + line_height="1.5", + border_radius=12, + cursor="pointer", + display="flex", + align_items="center", + justify_content="center", + box_shadow="0 4px 6px rgba(0, 0, 0, 0.1)", + ), + key=example, + on_click=click_example_box, + ): + me.text(example, style=me.Style( + color=me.theme_var("on-surface"), + font_size=16, + text_align="center", + )) + + +def click_example_box(e: me.ClickEvent): + state = me.state(State) + state.input = e.key + + +def chat_input(): + state = me.state(State) + with me.box( + style=me.Style( + padding=me.Padding.all(8), + background="white", + display="flex", + width="100%", + border=me.Border.all( + me.BorderSide(width=0, style="solid", color="black") + ), + border_radius=12, + box_shadow="0 10px 20px #0000000a, 0 2px 6px #0000000a, 0 0 1px #0000000a", + ) + ): + with me.box( + style=me.Style( + flex_grow=1, + ) + ): + me.native_textarea( + value=state.input, + autosize=True, + min_rows=4, + placeholder="Enter your prompt", + style=me.Style( + padding=me.Padding(top=16, left=16), + background="white", + outline="none", + width="100%", + overflow_y="auto", + border=me.Border.all( + me.BorderSide(style="none"), + ), + ), + on_blur=textarea_on_blur, + ) + with me.content_button(type="icon", on_click=click_send): + me.icon("send") + + +def textarea_on_blur(e: me.InputBlurEvent): + state = me.state(State) + state.input = e.value + + +def click_send(e: me.ClickEvent): + state = me.state(State) + if not state.input: + return + state.in_progress = True + input = state.input + state.input = "" + yield + + for chunk in call_api(input): + state.output += chunk + yield + state.in_progress = False + yield + + +def call_api(input): + # Replace this with an actual API call + time.sleep(0.5) + yield "Example of streaming an output" + time.sleep(1) + yield "\n\nOutput: " + input + + +def output(): + state = me.state(State) + if state.output or state.in_progress: + with me.box( + style=me.Style( + background="#F0F4F9", + padding=me.Padding.all(16), + border_radius=16, + margin=me.Margin(top=36), + ) + ): + if state.output: + me.markdown(state.output) + if state.in_progress: + with me.box(style=me.Style(margin=me.Margin(top=16))): + me.progress_spinner() + + +def footer(): + with me.box( + style=me.Style( + position="sticky", + bottom=0, + padding=me.Padding.symmetric(vertical=16, horizontal=16), + width="100%", + background="#F0F4F9", + font_size=14, + ) + ): + me.html( + "Made with Mesop", + ) diff --git a/ai/ft/goldens/make%20the%20example%20boxes%20more%20beautiful_2NGKUA/prompt.txt b/ai/ft/goldens/make%20the%20example%20boxes%20more%20beautiful_2NGKUA/prompt.txt new file mode 100644 index 000000000..702860e0c --- /dev/null +++ b/ai/ft/goldens/make%20the%20example%20boxes%20more%20beautiful_2NGKUA/prompt.txt @@ -0,0 +1 @@ +make the example boxes more beautiful \ No newline at end of file diff --git a/ai/ft/goldens/make%20the%20example%20boxes%20more%20beautiful_2NGKUA/source.py b/ai/ft/goldens/make%20the%20example%20boxes%20more%20beautiful_2NGKUA/source.py new file mode 100644 index 000000000..3587ab941 --- /dev/null +++ b/ai/ft/goldens/make%20the%20example%20boxes%20more%20beautiful_2NGKUA/source.py @@ -0,0 +1,203 @@ +import time + +import mesop as me + + +@me.stateclass +class State: + input: str + output: str + in_progress: bool + + +@me.page(path="/starter_kit") +def page(): + with me.box( + style=me.Style( + background="#fff", + min_height="calc(100% - 48px)", + padding=me.Padding(bottom=16), + ) + ): + with me.box( + style=me.Style( + width="min(720px, 100%)", + margin=me.Margin.symmetric(horizontal="auto"), + padding=me.Padding.symmetric( + horizontal=16, + ), + ) + ): + header_text() + example_row() + chat_input() + output() + footer() + + +def header_text(): + with me.box( + style=me.Style( + padding=me.Padding( + top=64, + bottom=36, + ), + ) + ): + me.text( + "Mesop Starter Kit", + style=me.Style( + font_size=36, + font_weight=700, + background="linear-gradient(90deg, #4285F4, #AA5CDB, #DB4437) text", + color="transparent", + ), + ) + + +EXAMPLES = [ + "How to tie a shoe", + "Make a brownie recipe", + "Write an email asking for a sick day off", +] + + +def example_row(): + is_mobile = me.viewport_size().width < 640 + with me.box( + style=me.Style( + display="flex", + flex_direction="column" if is_mobile else "row", + gap=24, + margin=me.Margin(bottom=36), + ) + ): + for example in EXAMPLES: + example_box(example, is_mobile) + + +def example_box(example: str, is_mobile: bool): + with me.box( + style=me.Style( + width="100%" if is_mobile else 200, + height=140, + background="#F0F4F9", + padding=me.Padding.all(16), + font_weight=500, + line_height="1.5", + border_radius=16, + cursor="pointer", + ), + key=example, + on_click=click_example_box, + ): + me.text(example) + + +def click_example_box(e: me.ClickEvent): + state = me.state(State) + state.input = e.key + + +def chat_input(): + state = me.state(State) + with me.box( + style=me.Style( + padding=me.Padding.all(8), + background="white", + display="flex", + width="100%", + border=me.Border.all( + me.BorderSide(width=0, style="solid", color="black") + ), + border_radius=12, + box_shadow="0 10px 20px #0000000a, 0 2px 6px #0000000a, 0 0 1px #0000000a", + ) + ): + with me.box( + style=me.Style( + flex_grow=1, + ) + ): + me.native_textarea( + value=state.input, + autosize=True, + min_rows=4, + placeholder="Enter your prompt", + style=me.Style( + padding=me.Padding(top=16, left=16), + background="white", + outline="none", + width="100%", + overflow_y="auto", + border=me.Border.all( + me.BorderSide(style="none"), + ), + ), + on_blur=textarea_on_blur, + ) + with me.content_button(type="icon", on_click=click_send): + me.icon("send") + + +def textarea_on_blur(e: me.InputBlurEvent): + state = me.state(State) + state.input = e.value + + +def click_send(e: me.ClickEvent): + state = me.state(State) + if not state.input: + return + state.in_progress = True + input = state.input + state.input = "" + yield + + for chunk in call_api(input): + state.output += chunk + yield + state.in_progress = False + yield + + +def call_api(input): + # Replace this with an actual API call + time.sleep(0.5) + yield "Example of streaming an output" + time.sleep(1) + yield "\n\nOutput: " + input + + +def output(): + state = me.state(State) + if state.output or state.in_progress: + with me.box( + style=me.Style( + background="#F0F4F9", + padding=me.Padding.all(16), + border_radius=16, + margin=me.Margin(top=36), + ) + ): + if state.output: + me.markdown(state.output) + if state.in_progress: + with me.box(style=me.Style(margin=me.Margin(top=16))): + me.progress_spinner() + + +def footer(): + with me.box( + style=me.Style( + position="sticky", + bottom=0, + padding=me.Padding.symmetric(vertical=16, horizontal=16), + width="100%", + background="#F0F4F9", + font_size=14, + ) + ): + me.html( + "Made with Mesop", + ) diff --git a/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/diff.txt b/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/diff.txt new file mode 100644 index 000000000..17aee4c2b --- /dev/null +++ b/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/diff.txt @@ -0,0 +1,38 @@ +<<<<<<< ORIGINAL + native_textarea( + value=state.input, + autosize=True, + min_rows=4, + placeholder="Enter your prompt", + style=me.Style( + padding=me.Padding(top=16, left=16), + background="white", + outline="none", + width="100%", + overflow_y="auto", + border=me.Border.all( + me.BorderSide(style="none"), + ), + ), + on_blur=textarea_on_blur, + ) +======= + native_textarea( + value=state.input, + autosize=True, + min_rows=6, + max_rows=10, + placeholder="Enter your prompt", + style=me.Style( + padding=me.Padding(top=16, left=16), + background="white", + outline="none", + width="100%", + overflow_y="auto", + border=me.Border.all( + me.BorderSide(style="none"), + ), + ), + on_blur=textarea_on_blur, + ) +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/metadata.json b/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/metadata.json new file mode 100644 index 000000000..33f4a795e --- /dev/null +++ b/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/metadata.json @@ -0,0 +1 @@ +{"line_number": 421} diff --git a/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/patched.py b/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/patched.py new file mode 100644 index 000000000..25983f296 --- /dev/null +++ b/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/patched.py @@ -0,0 +1,205 @@ +import time + +import mesop as me + + +@me.stateclass +class State: + input: str + output: str + in_progress: bool + + +@me.page(path="/starter_kit") +def page(): + with me.box( + style=me.Style( + background="#fff", + min_height="calc(100% - 48px)", + padding=me.Padding(bottom=16), + ) + ): + with me.box( + style=me.Style( + width="min(720px, 100%)", + margin=me.Margin.symmetric(horizontal="auto"), + padding=me.Padding.symmetric( + horizontal=16, + ), + ) + ): + header_text() + example_row() + chat_input() + output() + footer() + + +def header_text(): + with me.box( + style=me.Style( + padding=me.Padding( + top=64, + bottom=36, + ), + ) + ): + me.text( + "Mesop Starter Kit", + style=me.Style( + font_size=36, + font_weight=700, + background="linear-gradient(90deg, #4285F4, #AA5CDB, #DB4437) text", + color="transparent", + ), + ) + + +EXAMPLES = [ + "How to tie a shoe", + "Make a brownie recipe", + "Write an email asking for a sick day off", +] + + +def example_row(): + is_mobile = me.viewport_size().width < 640 + with me.box( + style=me.Style( + display="flex", + flex_direction="column" if is_mobile else "row", + gap=24, + margin=me.Margin(bottom=36), + ) + ): + for example in EXAMPLES: + example_box(example, is_mobile) + + +def example_box(example: str, is_mobile: bool): + with me.box( + style=me.Style( + width="100%" if is_mobile else 200, + height=140, + background="#F0F4F9", + padding=me.Padding.all(16), + font_weight=500, + line_height="1.5", + border_radius=16, + cursor="pointer", + ), + key=example, + on_click=click_example_box, + ): + me.text(example) + + +def click_example_box(e: me.ClickEvent): + state = me.state(State) + state.input = e.key + + +def chat_input(): + state = me.state(State) + with me.box( + style=me.Style( + padding=me.Padding.all(8), + background="white", + display="flex", + width="100%", + align_items="center", # Center vertically + border=me.Border.all( + me.BorderSide(width=0, style="solid", color="black") + ), + border_radius=12, + box_shadow="0 10px 20px #0000000a, 0 2px 6px #0000000a, 0 0 1px #0000000a", + ) + ): + with me.box( + style=me.Style( + flex_grow=1, + ) + ): + me.native_textarea( + value=state.input, + autosize=True, + min_rows=6, + max_rows=10, + placeholder="Enter your prompt", + style=me.Style( + padding=me.Padding(top=16, left=16), + background="white", + outline="none", + width="100%", + overflow_y="auto", + border=me.Border.all( + me.BorderSide(style="none"), + ), + ), + on_blur=textarea_on_blur, + ) + with me.content_button(type="icon", on_click=click_send): + me.icon("send") + + +def textarea_on_blur(e: me.InputBlurEvent): + state = me.state(State) + state.input = e.value + + +def click_send(e: me.ClickEvent): + state = me.state(State) + if not state.input: + return + state.in_progress = True + input = state.input + state.input = "" + yield + + for chunk in call_api(input): + state.output += chunk + yield + state.in_progress = False + yield + + +def call_api(input): + # Replace this with an actual API call + time.sleep(0.5) + yield "Example of streaming an output" + time.sleep(1) + yield "\n\nOutput: " + input + + +def output(): + state = me.state(State) + if state.output or state.in_progress: + with me.box( + style=me.Style( + background="#F0F4F9", + padding=me.Padding.all(16), + border_radius=16, + margin=me.Margin(top=36), + ) + ): + if state.output: + me.markdown(state.output) + if state.in_progress: + with me.box(style=me.Style(margin=me.Margin(top=16))): + me.progress_spinner() + + +def footer(): + with me.box( + style=me.Style( + position="sticky", + bottom=0, + padding=me.Padding.symmetric(vertical=16, horizontal=16), + width="100%", + background="#F0F4F9", + font_size=14, + ) + ): + me.html( + "Made with Mesop", + ) diff --git a/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/prompt.txt b/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/prompt.txt new file mode 100644 index 000000000..0a3d07178 --- /dev/null +++ b/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/prompt.txt @@ -0,0 +1 @@ +make the textarea bigger \ No newline at end of file diff --git a/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/source.py b/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/source.py new file mode 100644 index 000000000..07486f0ba --- /dev/null +++ b/ai/ft/goldens/make%20the%20textarea%20bigger_tjahpg/source.py @@ -0,0 +1,204 @@ +import time + +import mesop as me + + +@me.stateclass +class State: + input: str + output: str + in_progress: bool + + +@me.page(path="/starter_kit") +def page(): + with me.box( + style=me.Style( + background="#fff", + min_height="calc(100% - 48px)", + padding=me.Padding(bottom=16), + ) + ): + with me.box( + style=me.Style( + width="min(720px, 100%)", + margin=me.Margin.symmetric(horizontal="auto"), + padding=me.Padding.symmetric( + horizontal=16, + ), + ) + ): + header_text() + example_row() + chat_input() + output() + footer() + + +def header_text(): + with me.box( + style=me.Style( + padding=me.Padding( + top=64, + bottom=36, + ), + ) + ): + me.text( + "Mesop Starter Kit", + style=me.Style( + font_size=36, + font_weight=700, + background="linear-gradient(90deg, #4285F4, #AA5CDB, #DB4437) text", + color="transparent", + ), + ) + + +EXAMPLES = [ + "How to tie a shoe", + "Make a brownie recipe", + "Write an email asking for a sick day off", +] + + +def example_row(): + is_mobile = me.viewport_size().width < 640 + with me.box( + style=me.Style( + display="flex", + flex_direction="column" if is_mobile else "row", + gap=24, + margin=me.Margin(bottom=36), + ) + ): + for example in EXAMPLES: + example_box(example, is_mobile) + + +def example_box(example: str, is_mobile: bool): + with me.box( + style=me.Style( + width="100%" if is_mobile else 200, + height=140, + background="#F0F4F9", + padding=me.Padding.all(16), + font_weight=500, + line_height="1.5", + border_radius=16, + cursor="pointer", + ), + key=example, + on_click=click_example_box, + ): + me.text(example) + + +def click_example_box(e: me.ClickEvent): + state = me.state(State) + state.input = e.key + + +def chat_input(): + state = me.state(State) + with me.box( + style=me.Style( + padding=me.Padding.all(8), + background="white", + display="flex", + width="100%", + align_items="center", # Center vertically + border=me.Border.all( + me.BorderSide(width=0, style="solid", color="black") + ), + border_radius=12, + box_shadow="0 10px 20px #0000000a, 0 2px 6px #0000000a, 0 0 1px #0000000a", + ) + ): + with me.box( + style=me.Style( + flex_grow=1, + ) + ): + me.native_textarea( + value=state.input, + autosize=True, + min_rows=4, + placeholder="Enter your prompt", + style=me.Style( + padding=me.Padding(top=16, left=16), + background="white", + outline="none", + width="100%", + overflow_y="auto", + border=me.Border.all( + me.BorderSide(style="none"), + ), + ), + on_blur=textarea_on_blur, + ) + with me.content_button(type="icon", on_click=click_send): + me.icon("send") + + +def textarea_on_blur(e: me.InputBlurEvent): + state = me.state(State) + state.input = e.value + + +def click_send(e: me.ClickEvent): + state = me.state(State) + if not state.input: + return + state.in_progress = True + input = state.input + state.input = "" + yield + + for chunk in call_api(input): + state.output += chunk + yield + state.in_progress = False + yield + + +def call_api(input): + # Replace this with an actual API call + time.sleep(0.5) + yield "Example of streaming an output" + time.sleep(1) + yield "\n\nOutput: " + input + + +def output(): + state = me.state(State) + if state.output or state.in_progress: + with me.box( + style=me.Style( + background="#F0F4F9", + padding=me.Padding.all(16), + border_radius=16, + margin=me.Margin(top=36), + ) + ): + if state.output: + me.markdown(state.output) + if state.in_progress: + with me.box(style=me.Style(margin=me.Margin(top=16))): + me.progress_spinner() + + +def footer(): + with me.box( + style=me.Style( + position="sticky", + bottom=0, + padding=me.Padding.symmetric(vertical=16, horizontal=16), + width="100%", + background="#F0F4F9", + font_size=14, + ) + ): + me.html( + "Made with Mesop", + ) diff --git a/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/diff.txt b/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/diff.txt new file mode 100644 index 000000000..383df3741 --- /dev/null +++ b/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/diff.txt @@ -0,0 +1,31 @@ +<<<<<<< ORIGINAL + with me.box( # <--- EDIT HERE + style=me.Style( + background="cyan", + height=50, + margin=me.Margin.symmetric(vertical=24, horizontal=12), + border=me.Border.symmetric( + horizontal=me.BorderSide(width=2, color="black", style="groove") + ), + ) + ): + me.text(text="Example with left and right 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) + ) +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/metadata.json b/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/metadata.json new file mode 100644 index 000000000..d004b1cf9 --- /dev/null +++ b/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/metadata.json @@ -0,0 +1 @@ +{"line_number": 51} diff --git a/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/patched.py b/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/patched.py new file mode 100644 index 000000000..1f3e14d69 --- /dev/null +++ b/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/patched.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) + ) diff --git a/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/prompt.txt b/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/prompt.txt new file mode 100644 index 000000000..1acf446b3 --- /dev/null +++ b/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/prompt.txt @@ -0,0 +1 @@ +make this more beautiful \ No newline at end of file diff --git a/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/source.py b/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/source.py new file mode 100644 index 000000000..2a7e2c048 --- /dev/null +++ b/ai/ft/goldens/make%20this%20more%20beautiful_zCrbpA/source.py @@ -0,0 +1,61 @@ +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( + background="cyan", + height=50, + margin=me.Margin.symmetric(vertical=24, horizontal=12), + border=me.Border.symmetric( + horizontal=me.BorderSide(width=2, color="black", style="groove") + ), + ) + ): + me.text(text="Example with left and right borders") diff --git a/ai/ft/goldens/make%20this%20smaller_4IubJw/diff.txt b/ai/ft/goldens/make%20this%20smaller_4IubJw/diff.txt new file mode 100644 index 000000000..b61ff7189 --- /dev/null +++ b/ai/ft/goldens/make%20this%20smaller_4IubJw/diff.txt @@ -0,0 +1,5 @@ +<<<<<<< ORIGINAL + me.text(text="headline-3: Hello, world!", type="headline-3") # <--- EDIT HERE +======= + me.text(text="headline-3: Hello, world!", type="headline-5") # <--- EDIT HERE +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/make%20this%20smaller_4IubJw/metadata.json b/ai/ft/goldens/make%20this%20smaller_4IubJw/metadata.json new file mode 100644 index 000000000..4f6538ea9 --- /dev/null +++ b/ai/ft/goldens/make%20this%20smaller_4IubJw/metadata.json @@ -0,0 +1 @@ +{"line_number": 13} diff --git a/ai/ft/goldens/make%20this%20smaller_4IubJw/patched.py b/ai/ft/goldens/make%20this%20smaller_4IubJw/patched.py new file mode 100644 index 000000000..7a037c939 --- /dev/null +++ b/ai/ft/goldens/make%20this%20smaller_4IubJw/patched.py @@ -0,0 +1,22 @@ +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-5") + 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") + 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") diff --git a/ai/ft/goldens/make%20this%20smaller_4IubJw/prompt.txt b/ai/ft/goldens/make%20this%20smaller_4IubJw/prompt.txt new file mode 100644 index 000000000..8ecb4bb62 --- /dev/null +++ b/ai/ft/goldens/make%20this%20smaller_4IubJw/prompt.txt @@ -0,0 +1 @@ +make this smaller \ No newline at end of file diff --git a/ai/ft/goldens/make%20this%20smaller_4IubJw/source.py b/ai/ft/goldens/make%20this%20smaller_4IubJw/source.py new file mode 100644 index 000000000..ec73ed306 --- /dev/null +++ b/ai/ft/goldens/make%20this%20smaller_4IubJw/source.py @@ -0,0 +1,22 @@ +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") + 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") diff --git a/ai/ft/goldens/make_it_more_beautiful_PJvDKQ/diff.txt b/ai/ft/goldens/make_it_more_beautiful_PJvDKQ/diff.txt new file mode 100644 index 000000000..3ac284a2e --- /dev/null +++ b/ai/ft/goldens/make_it_more_beautiful_PJvDKQ/diff.txt @@ -0,0 +1,69 @@ +<<<<<<< ORIGINAL +@me.page( + security_policy=me.SecurityPolicy( + allowed_iframe_parents=["https://google.github.io"] + ), + path="/slider", +) +def app(): + state = me.state(State) + with me.box(style=me.Style(display="flex", flex_direction="column")): + me.input( + label="Slider value", value=state.initial_input_value, on_input=on_input + ) + me.slider(on_value_change=on_value_change, value=state.initial_slider_value) + me.text(text=f"Value: {me.state(State).slider_value}") +======= +@me.page( + security_policy=me.SecurityPolicy( + allowed_iframe_parents=["https://google.github.io"] + ), + path="/slider", +) +def app(): + state = me.state(State) + with me.box(style=me.Style(display="flex", flex_direction="column", gap=24, padding=me.Padding.all(32))): + me.text( + "Slider Sample", + style=me.Style( + font_size=24, + font_weight="bold", + margin=me.Margin(bottom=16) + ) + ) + with me.box(style=me.Style(display="flex", align_items="center", gap=16)): + me.text( + "Value:", + style=me.Style( + font_size=16, + font_weight=500, + color=me.theme_var("on-surface") + ) + ) + me.text( + f"{state.slider_value:.2f}", + style=me.Style( + font_size=16, + font_weight=500, + color=me.theme_var("primary"), + padding=me.Padding.symmetric(horizontal=8), + border=me.Border.all(me.BorderSide(width=1, color=me.theme_var("outline"))), + border_radius=4 + ) + ) + me.slider( + value=state.slider_value, + on_value_change=on_value_change, + style=me.Style( + margin=me.Margin(top=16) + ) + ) + me.text( + "Adjust the slider to change the value.", + style=me.Style( + font_size=14, + color=me.theme_var("on-surface-variant"), + margin=me.Margin(top=8) + ) + ) +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/make_it_more_beautiful_PJvDKQ/patched.py b/ai/ft/goldens/make_it_more_beautiful_PJvDKQ/patched.py new file mode 100644 index 000000000..3e37e4302 --- /dev/null +++ b/ai/ft/goldens/make_it_more_beautiful_PJvDKQ/patched.py @@ -0,0 +1,74 @@ +import mesop as me + + +@me.stateclass +class State: + initial_input_value: str = "50.0" + initial_slider_value: float = 50.0 + slider_value: float = 50.0 + + +@me.page( + security_policy=me.SecurityPolicy( + allowed_iframe_parents=["https://google.github.io"] + ), + path="/slider", +) +def app(): + state = me.state(State) + with me.box(style=me.Style(display="flex", flex_direction="column", gap=24, padding=me.Padding.all(32))): + me.text( + "Slider Sample", + style=me.Style( + font_size=24, + font_weight="bold", + margin=me.Margin(bottom=16) + ) + ) + with me.box(style=me.Style(display="flex", align_items="center", gap=16)): + me.text( + "Value:", + style=me.Style( + font_size=16, + font_weight=500, + color=me.theme_var("on-surface") + ) + ) + me.text( + f"{state.slider_value:.2f}", + style=me.Style( + font_size=16, + font_weight=500, + color=me.theme_var("primary"), + padding=me.Padding.symmetric(horizontal=8), + border=me.Border.all(me.BorderSide(width=1, color=me.theme_var("outline"))), + border_radius=4 + ) + ) + me.slider( + value=state.slider_value, + on_value_change=on_value_change, + style=me.Style( + margin=me.Margin(top=16) + ) + ) + me.text( + "Adjust the slider to change the value.", + style=me.Style( + font_size=14, + color=me.theme_var("on-surface-variant"), + margin=me.Margin(top=8) + ) + ) + + +def on_value_change(event: me.SliderValueChangeEvent): + state = me.state(State) + state.slider_value = event.value + state.initial_input_value = str(state.slider_value) + + +def on_input(event: me.InputEvent): + state = me.state(State) + state.initial_slider_value = float(event.value) + state.slider_value = state.initial_slider_value diff --git a/ai/ft/goldens/make_it_more_beautiful_PJvDKQ/prompt.txt b/ai/ft/goldens/make_it_more_beautiful_PJvDKQ/prompt.txt new file mode 100644 index 000000000..b874f9b62 --- /dev/null +++ b/ai/ft/goldens/make_it_more_beautiful_PJvDKQ/prompt.txt @@ -0,0 +1 @@ +make it more beautiful \ No newline at end of file diff --git a/ai/ft/goldens/make_it_more_beautiful_PJvDKQ/source.py b/ai/ft/goldens/make_it_more_beautiful_PJvDKQ/source.py new file mode 100644 index 000000000..83e5f1cda --- /dev/null +++ b/ai/ft/goldens/make_it_more_beautiful_PJvDKQ/source.py @@ -0,0 +1,36 @@ +import mesop as me + + +@me.stateclass +class State: + initial_input_value: str = "50.0" + initial_slider_value: float = 50.0 + slider_value: float = 50.0 + + +@me.page( + security_policy=me.SecurityPolicy( + allowed_iframe_parents=["https://google.github.io"] + ), + path="/slider", +) +def app(): + state = me.state(State) + with me.box(style=me.Style(display="flex", flex_direction="column")): + me.input( + label="Slider value", value=state.initial_input_value, on_input=on_input + ) + me.slider(on_value_change=on_value_change, value=state.initial_slider_value) + me.text(text=f"Value: {me.state(State).slider_value}") + + +def on_value_change(event: me.SliderValueChangeEvent): + state = me.state(State) + state.slider_value = event.value + state.initial_input_value = str(state.slider_value) + + +def on_input(event: me.InputEvent): + state = me.state(State) + state.initial_slider_value = float(event.value) + state.slider_value = state.initial_slider_value diff --git a/ai/ft/goldens/responsive_layout/diff.txt b/ai/ft/goldens/responsive_layout/diff.txt new file mode 100644 index 000000000..7c12ad039 --- /dev/null +++ b/ai/ft/goldens/responsive_layout/diff.txt @@ -0,0 +1,119 @@ +<<<<<<< ORIGINAL +======= +import mesop as me + + +@me.stateclass +class State: + sidenav_menu_open: bool + + +def toggle_menu_button(e: me.ClickEvent): + s = me.state(State) + s.sidenav_menu_open = not s.sidenav_menu_open + + +def is_mobile(): + return me.viewport_size().width < 640 + + +@me.page( + title="Responsive layout", + path="/responsive_layout", +) +def page(): + with me.box(style=me.Style(display="flex", height="100%")): + if is_mobile(): + with me.content_button( + type="icon", + style=me.Style(top=6, left=8, position="absolute", z_index=9), + on_click=toggle_menu_button, + ): + me.icon("menu") + with me.sidenav( + opened=me.state(State).sidenav_menu_open, + style=me.Style( + background=me.theme_var("surface-container-low"), + ), + ): + sidenav() + else: + sidenav() + with me.box( + style=me.Style( + background=me.theme_var("surface-container-low"), + display="flex", + flex_direction="column", + flex_grow=1, + ) + ): + header() + body() + + +def header(): + with me.box( + style=me.Style( + height=120, + width="100%", + padding=me.Padding.all(16), + display="flex", + align_items="center", + ), + ): + me.text( + "Title", + style=me.Style( + color=me.theme_var("on-background"), + font_size=22, + font_weight=500, + letter_spacing="0.8px", + padding=me.Padding(left=36) if is_mobile() else None, + ), + ) + + +def body(): + with me.box( + style=me.Style( + background=me.theme_var("background"), + flex_grow=1, + padding=me.Padding( + left=32, + right=32, + top=32, + bottom=64, + ), + border_radius=16, + overflow_y="auto", + ) + ): + me.text("Body") + + +def sidenav(): + with me.box( + style=me.Style( + width=216, + height="100%", + background=me.theme_var("surface-container-low"), + padding=me.Padding.all(16), + ) + ): + with me.box( + style=me.Style( + padding=me.Padding(top=24), + display="flex", + flex_direction="column", + gap=8, + ), + ): + me.text( + "Sidenav", + style=me.Style( + font_weight=500, + letter_spacing="0.4px", + padding=me.Padding(left=12), + ), + ) +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/responsive_layout/patched.py b/ai/ft/goldens/responsive_layout/patched.py new file mode 100644 index 000000000..e0dce61fc --- /dev/null +++ b/ai/ft/goldens/responsive_layout/patched.py @@ -0,0 +1,116 @@ +import mesop as me + + +@me.stateclass +class State: + sidenav_menu_open: bool + + +def toggle_menu_button(e: me.ClickEvent): + s = me.state(State) + s.sidenav_menu_open = not s.sidenav_menu_open + + +def is_mobile(): + return me.viewport_size().width < 640 + + +@me.page( + title="Responsive layout", + path="/responsive_layout", +) +def page(): + with me.box(style=me.Style(display="flex", height="100%")): + if is_mobile(): + with me.content_button( + type="icon", + style=me.Style(top=6, left=8, position="absolute", z_index=9), + on_click=toggle_menu_button, + ): + me.icon("menu") + with me.sidenav( + opened=me.state(State).sidenav_menu_open, + style=me.Style( + background=me.theme_var("surface-container-low"), + ), + ): + sidenav() + else: + sidenav() + with me.box( + style=me.Style( + background=me.theme_var("surface-container-low"), + display="flex", + flex_direction="column", + flex_grow=1, + ) + ): + header() + body() + + +def header(): + with me.box( + style=me.Style( + height=120, + width="100%", + padding=me.Padding.all(16), + display="flex", + align_items="center", + ), + ): + me.text( + "Title", + style=me.Style( + color=me.theme_var("on-background"), + font_size=22, + font_weight=500, + letter_spacing="0.8px", + padding=me.Padding(left=36) if is_mobile() else None, + ), + ) + + +def body(): + with me.box( + style=me.Style( + background=me.theme_var("background"), + flex_grow=1, + padding=me.Padding( + left=32, + right=32, + top=32, + bottom=64, + ), + border_radius=16, + overflow_y="auto", + ) + ): + me.text("Body") + + +def sidenav(): + with me.box( + style=me.Style( + width=216, + height="100%", + background=me.theme_var("surface-container-low"), + padding=me.Padding.all(16), + ) + ): + with me.box( + style=me.Style( + padding=me.Padding(top=24), + display="flex", + flex_direction="column", + gap=8, + ), + ): + me.text( + "Sidenav", + style=me.Style( + font_weight=500, + letter_spacing="0.4px", + padding=me.Padding(left=12), + ), + ) \ No newline at end of file diff --git a/ai/ft/goldens/responsive_layout/prompt.txt b/ai/ft/goldens/responsive_layout/prompt.txt new file mode 100644 index 000000000..712503f60 --- /dev/null +++ b/ai/ft/goldens/responsive_layout/prompt.txt @@ -0,0 +1 @@ +create a responsive layout \ No newline at end of file diff --git a/ai/ft/goldens/stats.json b/ai/ft/goldens/stats.json index 36fef616e..7194e70d1 100644 --- a/ai/ft/goldens/stats.json +++ b/ai/ft/goldens/stats.json @@ -1 +1 @@ -{"error": [], "error_count": 0, "success_count": 20} +{"error": [], "error_count": 0, "success_count": 40} diff --git a/ai/ft/goldens/turn%20the%20checkbox%20and%20radio%20into%20a%20r__St0ng/diff.txt b/ai/ft/goldens/turn%20the%20checkbox%20and%20radio%20into%20a%20r__St0ng/diff.txt new file mode 100644 index 000000000..c392008ed --- /dev/null +++ b/ai/ft/goldens/turn%20the%20checkbox%20and%20radio%20into%20a%20r__St0ng/diff.txt @@ -0,0 +1,33 @@ +<<<<<<< ORIGINAL +@me.page(path="/checkbox_and_radio") +def page(): + me.text("Checkbox and radio") + me.radio( + options=[ + me.RadioOption(label="Option 1"), + me.RadioOption(label="Option 2"), + ] + ) + me.checkbox("Checkbox 1") + me.checkbox("Checkbox 2") + me.text("More text") +======= +@me.page(path="/checkbox_and_radio") +def page(): + me.text("Checkbox and radio") + + with me.box(style=me.Style(display="flex", flex_direction="row", align_items="center", gap=16, margin=me.Margin(bottom=16))): + me.radio( + options=[ + me.RadioOption(label="Option 1", value="1"), + me.RadioOption(label="Option 2", value="2"), + ], + style=me.Style(flex_grow=1) + ) + + with me.box(style=me.Style(display="flex", flex_direction="column", gap=8)): + me.checkbox("Checkbox 1") + me.checkbox("Checkbox 2") + + me.text("More text") +>>>>>>> UPDATED \ No newline at end of file diff --git a/ai/ft/goldens/turn%20the%20checkbox%20and%20radio%20into%20a%20r__St0ng/patched.py b/ai/ft/goldens/turn%20the%20checkbox%20and%20radio%20into%20a%20r__St0ng/patched.py new file mode 100644 index 000000000..68cc7f66d --- /dev/null +++ b/ai/ft/goldens/turn%20the%20checkbox%20and%20radio%20into%20a%20r__St0ng/patched.py @@ -0,0 +1,21 @@ +import mesop as me + + +@me.page(path="/checkbox_and_radio") +def page(): + me.text("Checkbox and radio") + + with me.box(style=me.Style(display="flex", flex_direction="row", align_items="center", gap=16, margin=me.Margin(bottom=16))): + me.radio( + options=[ + me.RadioOption(label="Option 1", value="1"), + me.RadioOption(label="Option 2", value="2"), + ], + style=me.Style(flex_grow=1) + ) + + with me.box(style=me.Style(display="flex", flex_direction="column", gap=8)): + me.checkbox("Checkbox 1") + me.checkbox("Checkbox 2") + + me.text("More text") diff --git a/ai/ft/goldens/turn%20the%20checkbox%20and%20radio%20into%20a%20r__St0ng/prompt.txt b/ai/ft/goldens/turn%20the%20checkbox%20and%20radio%20into%20a%20r__St0ng/prompt.txt new file mode 100644 index 000000000..5d7571618 --- /dev/null +++ b/ai/ft/goldens/turn%20the%20checkbox%20and%20radio%20into%20a%20r__St0ng/prompt.txt @@ -0,0 +1 @@ +turn the checkbox and radio into a row \ No newline at end of file diff --git a/ai/ft/goldens/turn%20the%20checkbox%20and%20radio%20into%20a%20r__St0ng/source.py b/ai/ft/goldens/turn%20the%20checkbox%20and%20radio%20into%20a%20r__St0ng/source.py new file mode 100644 index 000000000..0b9f4cec7 --- /dev/null +++ b/ai/ft/goldens/turn%20the%20checkbox%20and%20radio%20into%20a%20r__St0ng/source.py @@ -0,0 +1,15 @@ +import mesop as me + + +@me.page(path="/checkbox_and_radio") +def page(): + me.text("Checkbox and radio") + me.radio( + options=[ + me.RadioOption(label="Option 1"), + me.RadioOption(label="Option 2"), + ] + ) + me.checkbox("Checkbox 1") + me.checkbox("Checkbox 2") + me.text("More text") diff --git a/ai/ft/llm_lib.py b/ai/ft/llm_lib.py index f75d409e7..5d05bd034 100644 --- a/ai/ft/llm_lib.py +++ b/ai/ft/llm_lib.py @@ -9,6 +9,8 @@ from google.generativeai import caching from openai import OpenAI +EDIT_HERE_MARKER = " # <--- EDIT HERE" + SYSTEM_INSTRUCTION_PART_1_PATH = "prompts/mesop_overview.txt" SYSTEM_INSTRUCTION_PART_2_PATH = "prompts/mini_docs.txt" @@ -96,8 +98,6 @@ class ApplyPatchResult(NamedTuple): def apply_patch(original_code: str, patch: str) -> ApplyPatchResult: - # flash does some weird formatting. - patch = patch.replace("```diff", "").replace("```", "") # Extract the diff content diff_pattern = r"<<<<<<< ORIGINAL(.*?)=======\n(.*?)>>>>>>> UPDATED" matches = re.findall(diff_pattern, patch, re.DOTALL) @@ -106,8 +106,8 @@ def apply_patch(original_code: str, patch: str) -> ApplyPatchResult: print("[WARN] No diff found:", patch) return ApplyPatchResult(True, "WARN: NO_DIFFS_FOUND") for original, updated in matches: - original = original.strip() - updated = updated.strip() + original = original.strip().replace(EDIT_HERE_MARKER, "") + updated = updated.strip().replace(EDIT_HERE_MARKER, "") # Replace the original part with the updated part new_patched_code = patched_code.replace(original, updated, 1) diff --git a/ai/ft/sandbox/wsgi_app.py b/ai/ft/sandbox/wsgi_app.py index 2d04dbf80..a2e2d0b41 100644 --- a/ai/ft/sandbox/wsgi_app.py +++ b/ai/ft/sandbox/wsgi_app.py @@ -100,10 +100,18 @@ def exec_route(): # Create a new page with the code to run code = base64.urlsafe_b64decode(param) code = code.decode("utf-8") + # Remove security policy as we will repliace it with ours + code = re.sub( + r"security_policy=me\.SecurityPolicy\([^)]*\),?\s*", + "", + code, + flags=re.DOTALL, + ) path_match = re.search(r'path="([^"]+)"', code) if path_match: path = path_match.group(1) code = code.replace(f'path="{path}"', f'path="/{new_module.name}"') + # Remove security_policy parameter if present code = code.replace( "@me.page(", '@me.page(security_policy=me.SecurityPolicy(allowed_iframe_parents=["localhost:*"]),', diff --git a/ai/ft/viewer.py b/ai/ft/viewer.py index 933f5bf2a..8d3141beb 100644 --- a/ai/ft/viewer.py +++ b/ai/ft/viewer.py @@ -130,7 +130,7 @@ def grid(): def dir_row(dir: str): parsed_dir = urllib.parse.unquote(dir) parts = parsed_dir.split("__") - if len(parts) == 2: + if len(parts) == 2 and ".py" in parts[1]: prompt = parts[0] source_file = parts[1] root_dir = "./" + get_file_path() diff --git a/ai/services/service.py b/ai/services/service.py index d6db20aa8..572f611bc 100644 --- a/ai/services/service.py +++ b/ai/services/service.py @@ -127,7 +127,7 @@ def apply_patch(original_code: str, patch: str) -> ApplyPatchResult: def adjust_mesop_app(code: str, msg: str, line_number: int | None): - model = "ft:gpt-4o-mini-2024-07-18:personal::9yoxJtKf" + model = "ft:gpt-4o-mini-2024-07-18:mesop:with-component-prompting:A0dNmNzq" client = OpenAI( api_key=getenv("OPENAI_API_KEY"), ) diff --git a/mesop/examples/__init__.py b/mesop/examples/__init__.py index e61cad089..33bebd938 100644 --- a/mesop/examples/__init__.py +++ b/mesop/examples/__init__.py @@ -36,6 +36,7 @@ from mesop.examples import playground_critic as playground_critic from mesop.examples import query_params as query_params from mesop.examples import readme_app as readme_app +from mesop.examples import responsive_layout as responsive_layout from mesop.examples import scroll_into_view as scroll_into_view from mesop.examples import starter_kit as starter_kit from mesop.examples import sxs as sxs diff --git a/mesop/examples/inlined_chat.py b/mesop/examples/inlined_chat.py new file mode 100644 index 000000000..4a56c02fd --- /dev/null +++ b/mesop/examples/inlined_chat.py @@ -0,0 +1,272 @@ +import random +import time +from dataclasses import dataclass +from typing import Callable, Generator, Literal + +import mesop as me + + +def on_load(e: me.LoadEvent): + me.set_theme_mode("system") + + +@me.page( + path="/inlined_chat", + title="Mesop Demo Chat", + on_load=on_load, +) +def page(): + chat(transform, title="Mesop Demo Chat", bot_user="Mesop Bot") + + +LINES = [ + "Mesop is a Python-based UI framework designed to simplify web UI development for engineers without frontend experience.", + "It leverages the power of the Angular web framework and Angular Material components, allowing rapid construction of web demos and internal tools.", + "With Mesop, developers can enjoy a fast build-edit-refresh loop thanks to its hot reload feature, making UI tweaks and component integration seamless.", + "Deployment is straightforward, utilizing standard HTTP technologies.", + "Mesop's component library aims for comprehensive Angular Material component coverage, enhancing UI flexibility and composability.", + "It supports custom components for specific use cases, ensuring developers can extend its capabilities to fit their unique requirements.", + "Mesop's roadmap includes expanding its component library and simplifying the onboarding processs.", +] + +Role = Literal["user", "assistant"] + +_ROLE_USER = "user" +_ROLE_ASSISTANT = "assistant" + +_BOT_USER_DEFAULT = "mesop-bot" + +_COLOR_BACKGROUND = me.theme_var("background") +_COLOR_CHAT_BUBBLE_YOU = me.theme_var("surface-container-low") +_COLOR_CHAT_BUBBLE_BOT = me.theme_var("secondary-container") + +_DEFAULT_PADDING = me.Padding.all(20) +_DEFAULT_BORDER_SIDE = me.BorderSide( + width="1px", style="solid", color=me.theme_var("secondary-fixed") +) + +_LABEL_BUTTON = "send" +_LABEL_BUTTON_IN_PROGRESS = "pending" +_LABEL_INPUT = "Enter your prompt" + +_STYLE_APP_CONTAINER = me.Style( + background=_COLOR_BACKGROUND, + display="flex", + flex_direction="column", + height="100%", + margin=me.Margin.symmetric(vertical=0, horizontal="auto"), + width="min(1024px, 100%)", + box_shadow=("0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"), + padding=me.Padding(top=20, left=20, right=20), +) +_STYLE_TITLE = me.Style(padding=me.Padding(left=10)) +_STYLE_CHAT_BOX = me.Style( + flex_grow=1, + overflow_y="scroll", + padding=_DEFAULT_PADDING, + margin=me.Margin(bottom=20), + border_radius="10px", + border=me.Border( + left=_DEFAULT_BORDER_SIDE, + right=_DEFAULT_BORDER_SIDE, + top=_DEFAULT_BORDER_SIDE, + bottom=_DEFAULT_BORDER_SIDE, + ), +) +_STYLE_CHAT_INPUT = me.Style(width="100%") +_STYLE_CHAT_INPUT_BOX = me.Style( + padding=me.Padding(top=30), display="flex", flex_direction="row" +) +_STYLE_CHAT_BUTTON = me.Style(margin=me.Margin(top=8, left=8)) +_STYLE_CHAT_BUBBLE_NAME = me.Style( + font_weight="bold", + font_size="13px", + padding=me.Padding(left=15, right=15, bottom=5), +) +_STYLE_CHAT_BUBBLE_PLAINTEXT = me.Style(margin=me.Margin.symmetric(vertical=15)) + + +def _make_style_chat_bubble_wrapper(role: Role) -> me.Style: + """Generates styles for chat bubble position. + + Args: + role: Chat bubble alignment depends on the role + """ + align_items = "end" if role == _ROLE_USER else "start" + return me.Style( + display="flex", + flex_direction="column", + align_items=align_items, + ) + + +def _make_chat_bubble_style(role: Role) -> me.Style: + """Generates styles for chat bubble. + + Args: + role: Chat bubble background color depends on the role + """ + background = ( + _COLOR_CHAT_BUBBLE_YOU if role == _ROLE_USER else _COLOR_CHAT_BUBBLE_BOT + ) + return me.Style( + width="80%", + font_size="16px", + line_height="1.5", + background=background, + border_radius="15px", + padding=me.Padding(right=15, left=15, bottom=3), + margin=me.Margin(bottom=10), + border=me.Border( + left=_DEFAULT_BORDER_SIDE, + right=_DEFAULT_BORDER_SIDE, + top=_DEFAULT_BORDER_SIDE, + bottom=_DEFAULT_BORDER_SIDE, + ), + ) + + +@dataclass(kw_only=True) +class ChatMessage: + """Chat message metadata.""" + + role: Role = "user" + content: str = "" + + +def transform(input: str, history: list[ChatMessage]): + for line in random.sample(LINES, random.randint(3, len(LINES) - 1)): + time.sleep(0.3) + yield line + " " + + +@me.stateclass +class State: + input: str + output: list[ChatMessage] + in_progress: bool = False + + +def on_blur(e: me.InputBlurEvent): + state = me.state(State) + state.input = e.value + + +def chat( + transform: Callable[ + [str, list[ChatMessage]], Generator[str, None, None] | str + ], + *, + title: str | None = None, + bot_user: str = _BOT_USER_DEFAULT, +): + """Creates a simple chat UI which takes in a prompt and chat history and returns a + response to the prompt. + + This function creates event handlers for text input and output operations + using the provided function `transform` to process the input and generate the output. + + Args: + transform: Function that takes in a prompt and chat history and returns a response to the prompt. + title: Headline text to display at the top of the UI. + bot_user: Name of your bot / assistant. + """ + state = me.state(State) + + def on_click_submit(e: me.ClickEvent): + yield from submit() + + def on_input_enter(e: me.InputEnterEvent): + state = me.state(State) + state.input = e.value + yield from submit() + me.focus_component(key=f"input-{len(state.output)}") + yield + + def submit(): + state = me.state(State) + if state.in_progress or not state.input: + return + input = state.input + state.input = "" + yield + + output = state.output + if output is None: + output = [] + output.append(ChatMessage(role=_ROLE_USER, content=input)) + state.in_progress = True + yield + + me.scroll_into_view(key="scroll-to") + time.sleep(0.15) + yield + + start_time = time.time() + output_message = transform(input, state.output) + assistant_message = ChatMessage(role=_ROLE_ASSISTANT) + output.append(assistant_message) + state.output = output + + for content in output_message: + assistant_message.content += content + # TODO: 0.25 is an abitrary choice. In the future, consider making this adjustable. + if (time.time() - start_time) >= 0.25: + start_time = time.time() + yield + state.in_progress = False + me.focus_component(key=f"input-{len(state.output)}") + yield + + def toggle_theme(e: me.ClickEvent): + if me.theme_brightness() == "light": + me.set_theme_mode("dark") + else: + me.set_theme_mode("light") + + with me.box(style=_STYLE_APP_CONTAINER): + with me.content_button( + type="icon", + style=me.Style(position="absolute", right=4, top=8), + on_click=toggle_theme, + ): + me.icon("light_mode" if me.theme_brightness() == "dark" else "dark_mode") + + if title: + me.text(title, type="headline-5", style=_STYLE_TITLE) + + with me.box(style=_STYLE_CHAT_BOX): + for msg in state.output: + with me.box(style=_make_style_chat_bubble_wrapper(msg.role)): + if msg.role == _ROLE_ASSISTANT: + me.text(bot_user, style=_STYLE_CHAT_BUBBLE_NAME) + with me.box(style=_make_chat_bubble_style(msg.role)): + if msg.role == _ROLE_USER: + me.text(msg.content, style=_STYLE_CHAT_BUBBLE_PLAINTEXT) + else: + me.markdown(msg.content) + + if state.in_progress: + with me.box(key="scroll-to", style=me.Style(height=300)): + pass + + with me.box(style=_STYLE_CHAT_INPUT_BOX): + with me.box(style=me.Style(flex_grow=1)): + me.input( + label=_LABEL_INPUT, + # Workaround: update key to clear input. + key=f"input-{len(state.output)}", + on_blur=on_blur, + on_enter=on_input_enter, + style=_STYLE_CHAT_INPUT, + ) + with me.content_button( + color="primary", + type="flat", + disabled=state.in_progress, + on_click=on_click_submit, + style=_STYLE_CHAT_BUTTON, + ): + me.icon( + _LABEL_BUTTON_IN_PROGRESS if state.in_progress else _LABEL_BUTTON + ) diff --git a/mesop/examples/responsive_layout.py b/mesop/examples/responsive_layout.py new file mode 100644 index 000000000..ab90e2311 --- /dev/null +++ b/mesop/examples/responsive_layout.py @@ -0,0 +1,116 @@ +import mesop as me + + +@me.stateclass +class State: + sidenav_menu_open: bool + + +def toggle_menu_button(e: me.ClickEvent): + s = me.state(State) + s.sidenav_menu_open = not s.sidenav_menu_open + + +def is_mobile(): + return me.viewport_size().width < 640 + + +@me.page( + title="Responsive layout", + path="/responsive_layout", +) +def page(): + with me.box(style=me.Style(display="flex", height="100%")): + if is_mobile(): + with me.content_button( + type="icon", + style=me.Style(top=6, left=8, position="absolute", z_index=9), + on_click=toggle_menu_button, + ): + me.icon("menu") + with me.sidenav( + opened=me.state(State).sidenav_menu_open, + style=me.Style( + background=me.theme_var("surface-container-low"), + ), + ): + sidenav() + else: + sidenav() + with me.box( + style=me.Style( + background=me.theme_var("surface-container-low"), + display="flex", + flex_direction="column", + flex_grow=1, + ) + ): + header() + body() + + +def header(): + with me.box( + style=me.Style( + height=120, + width="100%", + padding=me.Padding.all(16), + display="flex", + align_items="center", + ), + ): + me.text( + "Title", + style=me.Style( + color=me.theme_var("on-background"), + font_size=22, + font_weight=500, + letter_spacing="0.8px", + padding=me.Padding(left=36) if is_mobile() else None, + ), + ) + + +def body(): + with me.box( + style=me.Style( + background=me.theme_var("background"), + flex_grow=1, + padding=me.Padding( + left=32, + right=32, + top=32, + bottom=64, + ), + border_radius=16, + overflow_y="auto", + ) + ): + me.text("Body") + + +def sidenav(): + with me.box( + style=me.Style( + width=216, + height="100%", + background=me.theme_var("surface-container-low"), + padding=me.Padding.all(16), + ) + ): + with me.box( + style=me.Style( + padding=me.Padding(top=24), + display="flex", + flex_direction="column", + gap=8, + ), + ): + me.text( + "Sidenav", + style=me.Style( + font_weight=500, + letter_spacing="0.4px", + padding=me.Padding(left=12), + ), + )