Initial commit

.gitignore

@@ -0,0 +1,3 @@
+# Python
+__pycache__
+.pytest_cache

LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,4 @@
+# Mesop Prompt Tuner
+
+Prompt tuner UI built using [Mesop](https://google.github.io/mesop/). This is a
+work in progress.

components/__init__.py

@@ -0,0 +1,10 @@
+from components.button import button_toggle as button_toggle
+from components.card import card as card
+from components.card import expanable_card as expanable_card
+from components.dialog import dialog as dialog
+from components.dialog import dialog_actions as dialog_actions
+from components.header import header as header
+from components.header import header_section as header_section
+from components.sidebar import icon_sidebar as icon_sidebar
+from components.sidebar import icon_menu_item as icon_menu_item
+from components.table import prompt_eval_table as prompt_eval_table

components/button.py

@@ -0,0 +1,77 @@
+from typing import Callable
+
+import mesop as me
+
+
+@me.component()
+def button_toggle(
+  labels: list[str],
+  selected: str = "",
+  on_click: Callable | None = None,
+  key: str = "",
+):
+  """Simple version of Angular Component Button toggle.
+
+  Only supports single selection for now.
+
+  Args:
+    labels: Text labels for buttons
+    selected: Selected label
+    on_click: Event to handle button clicks on the button toggle
+    key: The key will be used as as prefix along with the selected label
+  """
+  with me.box(style=me.Style(display="flex", font_weight="bold", font_size=14)):
+    last_index = len(labels) - 1
+
+    for index, label in enumerate(labels):
+      if index == 0:
+        element = "first"
+      elif index == last_index:
+        element = "last"
+      else:
+        element = "default"
+
+      with me.box(
+        key=key + "_" + label,
+        on_click=on_click,
+        style=me.Style(
+          align_items="center",
+          display="flex",
+          # Handle selected case
+          background=_SELECTED_BG if label == selected else "#FFF",
+          padding=_SELECTED_PADDING if label == selected else _PADDING,
+          cursor="default" if label == selected else "pointer",
+          # Handle single button case (should just use a button in this case)
+          border=_LAST_BORDER if last_index == 0 else _BORDER_MAP[element],
+          border_radius=_BORDER_RADIUS if last_index == 0 else _BORDER_RADIUS_MAP[element],
+        ),
+      ):
+        if label in selected:
+          me.icon("check")
+        me.text(label)
+
+
+_SELECTED_BG = "#DEE2F9"
+
+_PADDING = me.Padding(left=15, right=15, top=10, bottom=10)
+_SELECTED_PADDING = me.Padding(left=15, right=15, top=5, bottom=5)
+
+_BORDER_RADIUS = "20px"
+
+_DEFAULT_BORDER_STYLE = me.BorderSide(width=1, color="#74777E", style="solid")
+_BORDER = me.Border(
+  left=_DEFAULT_BORDER_STYLE, top=_DEFAULT_BORDER_STYLE, bottom=_DEFAULT_BORDER_STYLE
+)
+_LAST_BORDER = me.Border.all(_DEFAULT_BORDER_STYLE)
+
+_BORDER_MAP = {
+  "first": _BORDER,
+  "last": _LAST_BORDER,
+  "default": _BORDER,
+}
+
+_BORDER_RADIUS_MAP = {
+  "first": "20px 0 0 20px",
+  "last": "0px 20px 20px 0",
+  "default": "0",
+}

components/card.py

@@ -0,0 +1,70 @@
+from components.helpers import merge_styles
+
+from typing import Callable
+
+import mesop as me
+
+
+@me.content_component
+def card(*, title: str = "", style: me.Style | None = None, key: str = ""):
+  """Creates a simple card component similar to Angular Component.
+
+  Args:
+    title: If empty, not title will be shown
+    style: Override the default styles of the card box
+    key: Not really useful here
+  """
+  with me.box(key=key, style=merge_styles(_DEFAULT_CARD_STYLE, style)):
+    if title:
+      me.text(
+        title,
+        style=me.Style(font_size=16, font_weight="bold", margin=me.Margin(bottom=15)),
+      )
+
+    me.slot()
+
+
+@me.content_component
+def expanable_card(
+  *,
+  title: str = "",
+  expanded: bool = False,
+  on_click_header: Callable | None = None,
+  style: me.Style | None = None,
+  key: str = "",
+):
+  """Creates a simple card component that is expandable.
+
+  Args:
+    title: If empty, no title will be shown but the expander will still be shown
+    expanded: Whether the card is expanded or not
+    on_click_header: Click handler for expanding card
+    style: Override the default styles of the card box
+    key: Key for the component
+  """
+  with me.box(key=key, style=merge_styles(_DEFAULT_CARD_STYLE, style)):
+    with me.box(
+      on_click=on_click_header,
+      style=me.Style(
+        align_items="center",
+        display="flex",
+        justify_content="space-between",
+      ),
+    ):
+      me.text(
+        title,
+        style=me.Style(font_size=16, font_weight="bold"),
+      )
+      me.icon("keyboard_arrow_up" if expanded else "keyboard_arrow_down")
+
+    with me.box(style=me.Style(margin=me.Margin(top=15), display="block" if expanded else "none")):
+      me.slot()
+
+
+_DEFAULT_CARD_STYLE = me.Style(
+  background="#FFF",
+  border_radius=10,
+  border=me.Border.all(me.BorderSide(width=1, color="#DEE2E6", style="solid")),
+  padding=me.Padding.all(15),
+  margin=me.Margin(bottom=15),
+)

components/dialog.py

@@ -0,0 +1,61 @@
+import mesop as me
+
+
+@me.content_component
+def dialog(is_open: bool):
+  """Renders a dialog component.
+
+  The design of the dialog borrows from the Angular component dialog. So basically
+  rounded corners and some box shadow.
+
+  One current drawback is that it's not possible to close the dialog
+  by clicking on the overlay background. This is due to
+  https://github.com/google/mesop/issues/268.
+
+  Args:
+    is_open: Whether the dialog is visible or not.
+  """
+  with me.box(
+    style=me.Style(
+      background="rgba(0,0,0,0.4)",
+      display="block" if is_open else "none",
+      height="100%",
+      overflow_x="auto",
+      overflow_y="auto",
+      position="fixed",
+      width="100%",
+      z_index=1000,
+    )
+  ):
+    with me.box(
+      style=me.Style(
+        align_items="center",
+        display="grid",
+        height="100vh",
+        justify_items="center",
+      )
+    ):
+      with me.box(
+        style=me.Style(
+          background="#fff",
+          border_radius=20,
+          box_sizing="content-box",
+          box_shadow=("0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"),
+          margin=me.Margin.symmetric(vertical="0", horizontal="auto"),
+          padding=me.Padding.all(20),
+        )
+      ):
+        me.slot()
+
+
+@me.content_component
+def dialog_actions():
+  """Helper component for rendering action buttons so they are right aligned.
+
+  This component is optional. If you want to position action buttons differently,
+  you can just write your own Mesop markup.
+  """
+  with me.box(
+    style=me.Style(display="flex", gap=5, justify_content="end", margin=me.Margin(top=20))
+  ):
+    me.slot()

components/header.py

@@ -0,0 +1,60 @@
+from components.helpers import merge_styles
+
+import mesop as me
+
+
+@me.content_component
+def header(
+  *,
+  style: me.Style | None = None,
+  is_mobile: bool = False,
+  max_width: int | None = 1000,
+):
+  """Creates a simple header component.
+
+  Args:
+    style: Override the default styles, such as background color, etc.
+    is_mobile: Use mobile layout. Arranges each section vertically.
+    max_width: Sets the maximum width of the header. Use None for fluid header.
+  """
+  default_flex_style = _DEFAULT_MOBILE_FLEX_STYLE if is_mobile else _DEFAULT_FLEX_STYLE
+  if max_width and me.viewport_size().width >= max_width:
+    default_flex_style = merge_styles(
+      default_flex_style,
+      me.Style(width=max_width, margin=me.Margin.symmetric(horizontal="auto")),
+    )
+
+  # The style override is a bit hacky here since we apply the override styles to both
+  # boxes here which could cause problems depending on what styles are added.
+  with me.box(style=merge_styles(_DEFAULT_STYLE, style)):
+    with me.box(style=merge_styles(default_flex_style, style)):
+      me.slot()
+
+
+@me.content_component
+def header_section():
+  """Adds a section to the header."""
+  with me.box(style=me.Style(display="flex", gap=5)):
+    me.slot()
+
+
+_DEFAULT_STYLE = me.Style(
+  background="#F5F8FC",
+  border=me.Border.symmetric(vertical=me.BorderSide(width=1, style="solid", color="#DEE2E6")),
+  padding=me.Padding.all(10),
+)
+
+_DEFAULT_FLEX_STYLE = me.Style(
+  align_items="center",
+  display="flex",
+  gap=5,
+  justify_content="space-between",
+)
+
+_DEFAULT_MOBILE_FLEX_STYLE = me.Style(
+  align_items="center",
+  display="flex",
+  flex_direction="column",
+  gap=12,
+  justify_content="center",
+)

components/helpers.py

@@ -0,0 +1,23 @@
+from dataclasses import fields
+
+import mesop as me
+
+
+def merge_styles(default: me.Style, overrides: me.Style | None = None) -> me.Style:
+  """Merges two styles together.
+
+  Args:
+    default: The starting style
+    overrides: Any set styles will override styles in default
+  """
+  if not overrides:
+    overrides = me.Style()
+
+  default_fields = {field.name: getattr(default, field.name) for field in fields(me.Style)}
+  override_fields = {
+    field.name: getattr(overrides, field.name)
+    for field in fields(me.Style)
+    if getattr(overrides, field.name) is not None
+  }
+
+  return me.Style(**default_fields | override_fields)

components/sidebar.py

@@ -0,0 +1,39 @@
+from typing import Callable
+
+import mesop as me
+
+
+@me.content_component
+def icon_sidebar():
+  """Creates a sidebar that contains icon menu items.
+
+  Technically, does not have to be relegated to just icons menu items, but leaving it
+  more specific for now.
+  """
+  with me.box(
+    style=me.Style(
+      background="#F5F8FC",
+      border=me.Border.symmetric(horizontal=me.BorderSide(width=1, style="solid", color="#DEE2E6")),
+    )
+  ):
+    me.slot()
+
+
+@me.component
+def icon_menu_item(*, icon: str, tooltip: str, on_click: Callable | None = None, key: str = ""):
+  """Creates a menu item that displays as an icon.
+
+  - Unfortunately, we can't add a hover style
+  - TODO: Add a way to determine the active menu item selected
+  """
+  with me.box(
+    key=key,
+    on_click=on_click,
+    style=me.Style(
+      border=me.Border(bottom=me.BorderSide(width=1, color="#DEE2E6", style="solid")),
+      cursor="pointer",
+      padding=me.Padding.all(15),
+    ),
+  ):
+    with me.tooltip(message=tooltip):
+      me.icon(icon)

components/table.py

@@ -0,0 +1,72 @@
+import mesop as me
+
+_NUM_REQUIRED_ROWS = 3
+
+
+@me.component
+def prompt_eval_table(prompt):
+  """Creates a grid table for displaying and comparing different prompt version runs."""
+  # Add a row for each variable
+  num_vars = len(prompt.variables)
+  table_size = num_vars + _NUM_REQUIRED_ROWS
+  with me.box(
+    style=me.Style(
+      border=me.Border.all(me.BorderSide(width=1, style="solid", color="#DEE2E6")),
+      display="grid",
+      grid_template_columns=f"1fr repeat({num_vars}, 20fr) 20fr 1fr"
+      if num_vars
+      else "1fr 20fr 1fr",
+      margin=me.Margin.all(15),
+    )
+  ):
+    # Render first row. This row only displays the Prompt version.
+    for i in range(table_size):
+      with me.box(
+        style=me.Style(
+          background="#fff",
+          border=me.Border.all(me.BorderSide(width=1, style="solid", color="#DEE2E6")),
+          color="#000",
+          font_weight="bold",
+          padding=me.Padding.all(10),
+        )
+      ):
+        if i == num_vars + 1:
+          me.text(f"Version {prompt.version}")
+        else:
+          me.text("")
+
+    # Render second row. This row only displays the headers of the table:
+    # variable names, model response, avg rating.
+    header_row = [""] + prompt.variables + ["Model response"] + [""]
+    for header_text in header_row:
+      with me.box(
+        style=me.Style(
+          background="#FFF",
+          border=me.Border.all(me.BorderSide(width=1, style="solid", color="#DEE2E6")),
+          color="#0063FF" if header_text and header_text != "Model response" else "#333",
+          padding=me.Padding.all(10),
+        )
+      ):
+        # Handle the variable header case.
+        if header_text and header_text != "Model response":
+          me.text("{{" + header_text + "}}")
+        else:
+          me.text(header_text)
+
+    # Render the data rows by going through the prompt responses.
+    for index, example in enumerate(prompt.responses):
+      content_row = (
+        [index]
+        + [example["variables"][v] for v in prompt.variables]
+        + [example["output"], example.get("rating", "")]
+      )
+      for row in content_row:
+        with me.box(
+          style=me.Style(
+            background="#fff",
+            border=me.Border.all(me.BorderSide(width=1, style="solid", color="#DEE2E6")),
+            color="#000",
+            padding=me.Padding.all(10),
+          )
+        ):
+          me.text(row)

main.py

@@ -0,0 +1,494 @@
+from dataclasses import dataclass, field
+import re
+
+import mesop as me
+
+import components as mex
+
+_DIALOG_INPUT_WIDTH = 350
+
+_MODEL_TEMPERATURE_MAX = 2
+_MODEL_TEMPERATURE_MIN = 0
+
+_INSTRUCTIONS = """
+- Write your prompt.
+  - You can use variables using this syntax `{{VARIABLE_NAME}}`.
+- If you used variables, populate them from the `Set variables` dialog.
+- Adjust model settings if necessary from the `Model settings` dialog.
+- When you're ready, press the run button.
+- If you make adjustments to your prompt or model settings, pressing run will create a
+  new version of your prompt.
+""".strip()
+
+_RE_VARIABLES = re.compile(r"\{\{(\w+)\}\}")
+
+
+@dataclass
+class Prompt:
+  prompt: str = ""
+  model: str = ""
+  model_temperature: float = 0.0
+  system_instructions: str = ""
+  version: int = 0
+  variables: list[str] = field(default_factory=lambda: [])
+  # Storing the responses as a dict to workaround bug with lists
+  # of nested dataclass.
+  responses: list[dict] = field(default_factory=lambda: [])
+
+
+@me.stateclass
+class State:
+  # Main UI variables
+  system_prompt_card_expanded: bool = False
+  title: str = "Untitled Prompt"
+  temp_title: str
+  system_instructions: str
+  prompt: str
+  response: str
+  version: int = 0
+
+  # Prompt variables
+  prompt_variables: dict[str, str]
+
+  # Model info
+  model: str = "gemini-1.5-flash"
+  model_temperature: float = 1.0
+  model_temperature_input: str = "1.0"
+
+  # Dialogs
+  dialog_show_title: bool = False
+  dialog_show_model_settings: bool = False
+  dialog_show_prompt_variables: bool = False
+  dialog_show_generate_prompt: bool = False
+  dialog_show_version_history: bool = False
+  prompts: list[Prompt]
+
+  # LLM Generate functionality
+  prompt_gen_task_description: str
+
+  # Valid modes: Prompt or Eval
+  mode: str = "Prompt"
+
+
+@me.page()
+def app():
+  state = me.state(State)
+
+  # Update prompt title dialog
+  with mex.dialog(state.dialog_show_title):
+    me.text("Update Prompt Title", type="headline-6")
+    me.input(
+      label="Title",
+      value=state.temp_title,
+      on_blur=on_update_input,
+      key="temp_title",
+      style=me.Style(width=_DIALOG_INPUT_WIDTH),
+    )
+    with mex.dialog_actions():
+      me.button("Cancel", on_click=on_close_dialog, key="dialog_show_title")
+      me.button("Save", type="flat", disabled=not state.temp_title.strip(), on_click=on_save_title)
+
+  # Dialog for controlling Model settings
+  with mex.dialog(state.dialog_show_model_settings):
+    me.text("Model Settings", type="headline-6")
+    with me.box():
+      me.select(
+        label="Model",
+        key="model",
+        options=[
+          me.SelectOption(label="Gemini 1.5 Flash", value="gemini-1.5-flash"),
+          me.SelectOption(label="Gemini 1.5 Pro", value="gemini-1.5-pro"),
+        ],
+        value=state.model,
+        style=me.Style(width=_DIALOG_INPUT_WIDTH),
+        on_selection_change=on_update_input,
+      )
+    with me.box():
+      me.text("Temperature", style=me.Style(font_weight="bold"))
+      with me.box(style=me.Style(display="flex", gap=10, width=_DIALOG_INPUT_WIDTH)):
+        me.slider(
+          min=_MODEL_TEMPERATURE_MIN,
+          max=_MODEL_TEMPERATURE_MAX,
+          step=0.1,
+          style=me.Style(width=260),
+          on_value_change=on_slider_temperature,
+          value=state.model_temperature,
+        )
+        me.input(
+          value=state.model_temperature_input,
+          on_input=on_input_temperature,
+          style=me.Style(width=60),
+        )
+
+    with mex.dialog_actions():
+      me.button(
+        "Close",
+        key="dialog_show_model_settings",
+        on_click=on_close_dialog,
+      )
+
+  # Dialog for setting variables
+  with mex.dialog(state.dialog_show_prompt_variables):
+    me.text("Prompt Variables", type="headline-6")
+    if not state.prompt_variables:
+      me.text("No variables defined in prompt.", style=me.Style(width=_DIALOG_INPUT_WIDTH))
+    else:
+      with me.box(
+        style=me.Style(display="flex", justify_content="end", margin=me.Margin(bottom=15))
+      ):
+        me.button("Generate", type="flat", on_click=on_click_generate_variables)
+      variable_names = set(_parse_variables(state.prompt))
+      with me.box(style=me.Style(display="flex", flex_direction="column")):
+        for name, value in state.prompt_variables.items():
+          if name not in variable_names:
+            continue
+          me.textarea(
+            label=name,
+            value=value,
+            on_blur=on_input_variable,
+            style=me.Style(width=_DIALOG_INPUT_WIDTH),
+            key=name,
+          )
+
+    with mex.dialog_actions():
+      me.button("Close", on_click=on_close_dialog, key="dialog_show_prompt_variables")
+
+  # Dialog for showing prompt version history
+  with mex.dialog(state.dialog_show_version_history):
+    me.text("Version history", type="headline-6")
+    me.select(
+      label="Select Version",
+      options=[
+        me.SelectOption(label=f"v{prompt.version}", value=str(prompt.version))
+        for prompt in state.prompts
+      ],
+      style=me.Style(width=_DIALOG_INPUT_WIDTH),
+      on_selection_change=on_select_version,
+    )
+    with mex.dialog_actions():
+      me.button("Close", key="dialog_show_version_history", on_click=on_close_dialog)
+
+  # Dialog for generating a prompt with LLM assistance
+  # TODO: Integrate with LLM
+  with mex.dialog(state.dialog_show_generate_prompt):
+    me.text("Generate Prompt", type="headline-6")
+    me.textarea(
+      label="Describe your task",
+      value=state.prompt_gen_task_description,
+      on_blur=on_update_input,
+      key="prompt_gen_task_description",
+      style=me.Style(width=_DIALOG_INPUT_WIDTH),
+    )
+    with mex.dialog_actions():
+      me.button("Close", key="dialog_show_generate_prompt", on_click=on_close_dialog)
+      me.button("Generate", type="flat", on_click=on_click_generate_prompt)
+
+  with me.box(
+    style=me.Style(
+      background="#FDFDFD",
+      display="grid",
+      grid_template_columns="50fr 50fr 1fr",
+      grid_template_rows="1fr 50fr",
+      height="100vh",
+    )
+  ):
+    with me.box(style=me.Style(grid_column="1 / -1")):
+      with mex.header(max_width=None):
+        with mex.header_section():
+          with me.box(on_click=on_click_title, style=me.Style(cursor="pointer")):
+            me.text(
+              state.title,
+              style=me.Style(font_size=16, font_weight="bold"),
+            )
+          if state.version:
+            me.text(f"v{state.version}")
+
+        with mex.header_section():
+          mex.button_toggle(
+            labels=["Prompt", "Eval"], selected=state.mode, on_click=on_click_mode_toggle
+          )
+
+    if state.mode == "Prompt":
+      # Render prompt creation page
+      with me.box(
+        style=me.Style(padding=me.Padding(left=15, top=15, bottom=15), overflow_y="scroll")
+      ):
+        with mex.expanable_card(
+          title="System Instructions",
+          expanded=state.system_prompt_card_expanded,
+          on_click_header=on_click_system_instructions_header,
+        ):
+          me.native_textarea(
+            autosize=True,
+            min_rows=2,
+            placeholder="Optional tone and style instructions for the model",
+            value=state.system_instructions,
+            on_blur=on_update_input,
+            style=_STYLE_INVISIBLE_TEXTAREA,
+            key="system_instructions",
+          )
+
+        with mex.card(title="Prompt"):
+          me.native_textarea(
+            autosize=True,
+            min_rows=2,
+            placeholder="Enter your prompt",
+            value=state.prompt,
+            on_blur=on_update_prompt,
+            style=_STYLE_INVISIBLE_TEXTAREA,
+            key="prompt",
+          )
+
+        with me.box(
+          style=me.Style(align_items="center", display="flex", justify_content="space-between")
+        ):
+          with me.content_button(
+            type="flat",
+            disabled=not state.prompt,
+            on_click=on_click_run,
+            style=me.Style(border_radius="10"),
+          ):
+            with me.tooltip(message="Run prompt"):
+              me.icon("play_arrow")
+          me.button(
+            "Generate prompt",
+            disabled=bool(state.prompt),
+            style=me.Style(background="#EBF1FD", border_radius="10"),
+            on_click=on_open_dialog,
+            key="dialog_show_generate_prompt",
+          )
+
+      with me.box(style=me.Style(padding=me.Padding.all(15))):
+        if state.response:
+          with mex.card(title="Response", style=me.Style(height="100%")):
+            me.markdown(state.response)
+        else:
+          with mex.card(title="Prompt Tuner Instructions", style=me.Style(height="100%")):
+            me.markdown(_INSTRUCTIONS)
+    else:
+      # Render eval page
+      with me.box(style=me.Style(grid_column="1 / -2")):
+        prompt = _find_prompt(state.prompts, state.version)
+        if prompt:
+          mex.prompt_eval_table(prompt)
+
+    with mex.icon_sidebar():
+      if state.mode == "Prompt":
+        mex.icon_menu_item(
+          icon="tune",
+          tooltip="Model settings",
+          key="dialog_show_model_settings",
+          on_click=on_open_dialog,
+        )
+        mex.icon_menu_item(
+          icon="data_object",
+          tooltip="Set variables",
+          key="dialog_show_prompt_variables",
+          on_click=on_open_dialog,
+        )
+      mex.icon_menu_item(
+        icon="history",
+        tooltip="Version history",
+        key="dialog_show_version_history",
+        on_click=on_open_dialog,
+      )
+      if state.mode == "Prompt":
+        mex.icon_menu_item(icon="code", tooltip="Get code")
+
+
+# Event handlers
+
+
+def on_click_system_instructions_header(e: me.ClickEvent):
+  """Open/close system instructions card."""
+  state = me.state(State)
+  state.system_prompt_card_expanded = not state.system_prompt_card_expanded
+
+
+def on_click_run(e: me.ClickEvent):
+  state = me.state(State)
+  num_versions = len(state.prompts)
+  if state.version:
+    current_prompt_meta = state.prompts[state.version - 1]
+  else:
+    current_prompt_meta = Prompt()
+
+  variable_names = set(_parse_variables(state.prompt))
+  prompt_variables = {k: v for k, v in state.prompt_variables.items() if k in variable_names}
+
+  if (
+    current_prompt_meta.prompt != state.prompt
+    or current_prompt_meta.system_instructions != state.system_instructions
+    or current_prompt_meta.model != state.model
+    or current_prompt_meta.model_temperature != state.model_temperature
+  ):
+    new_version = num_versions + 1
+    state.prompts.append(
+      Prompt(
+        version=new_version,
+        prompt=state.prompt,
+        system_instructions=state.system_instructions,
+        model=state.model,
+        model_temperature=state.model_temperature,
+        variables=list(variable_names),
+      )
+    )
+    state.version = new_version
+
+  prompt = state.prompt
+  for k, v in prompt_variables.items():
+    prompt = prompt.replace("{{" + k + "}}", v)
+  state.response = "Version v" + str(state.version) + "\n\n" + prompt
+  state.prompts[-1].responses.append(dict(output=state.response, variables=prompt_variables))
+
+
+def on_click_title(e: me.ClickEvent):
+  """Show dialog for editing the title of the prompt."""
+  state = me.state(State)
+  state.temp_title = state.title
+  state.dialog_show_title = True
+
+
+def on_update_prompt(e: me.InputBlurEvent):
+  """Saves the prompt.
+
+  Any new variables will be extracted from the prompt and added to prompt variables in
+  the variables dialog.
+  """
+  state = me.state(State)
+  state.prompt = e.value.strip()
+  variable_names = _parse_variables(state.prompt)
+  for variable_name in variable_names:
+    if variable_name not in state.prompt_variables:
+      state.prompt_variables[variable_name] = ""
+
+
+def on_save_title(e: me.InputBlurEvent):
+  """Saves the title and closes the dialog."""
+  state = me.state(State)
+  if state.temp_title:
+    state.title = state.temp_title
+    state.dialog_show_title = False
+
+
+def on_slider_temperature(e: me.SliderValueChangeEvent):
+  """Adjust temperature slider value."""
+  state = me.state(State)
+  state.model_temperature = float(e.value)
+  state.model_temperature_input = str(state.model_temperature)
+
+
+def on_input_temperature(e: me.InputEvent):
+  """Adjust temperature slider value by input."""
+  state = me.state(State)
+  try:
+    model_temperature = float(e.value)
+    if _MODEL_TEMPERATURE_MIN <= model_temperature <= _MODEL_TEMPERATURE_MAX:
+      state.model_temperature = model_temperature
+  except ValueError:
+    pass
+
+
+def on_input_variable(e: me.InputBlurEvent):
+  """Generic event to save input variables.
+
+  TODO: Probably should prefix the key to avoid key collisions.
+  """
+  state = me.state(State)
+  state.prompt_variables[e.key] = e.value
+
+
+def on_select_version(e: me.SelectSelectionChangeEvent):
+  """Update UI to show the selected prompt version and close the dialog."""
+  state = me.state(State)
+  selected_version = int(e.value)
+  prompt = _find_prompt(state.prompts, selected_version)
+  if prompt != Prompt():
+    state.prompt = prompt.prompt
+    state.version = prompt.version
+    state.system_instructions = prompt.system_instructions
+    state.model = prompt.model
+    state.model_temperature = prompt.model_temperature
+    state.model_temperature_input = str(prompt.model_temperature)
+    # If there is an existing response, select the most recent one.
+    if prompt.responses:
+      state.prompt_variables = prompt.responses[-1]["variables"]
+      state.response = prompt.responses[-1]["output"]
+    else:
+      state.response = ""
+    state.dialog_show_version_history = False
+
+
+def on_click_generate_prompt(e: me.ClickEvent):
+  """Generates an improved prompt based on the given task description and closes dialog.
+
+  TODO: Implement this logic.
+  """
+  state = me.state(State)
+  state.prompt = state.prompt_gen_task_description + " Improve prompt stuff here"
+  state.dialog_show_generate_prompt = False
+
+
+def on_click_generate_variables(e: me.ClickEvent):
+  """Generates values for the given empty variables.
+
+  TODO: Implement this logic.
+  """
+  state = me.state(State)
+  variable_names = set(_parse_variables(state.prompt))
+  for name, value in state.prompt_variables.items():
+    if name in variable_names and not value:
+      state.prompt_variables[name] = "Generate variable " + name
+
+
+def on_click_mode_toggle(e: me.ClickEvent):
+  """Toggle between Prompt and Eval modes."""
+  state = me.state(State)
+  state.mode = "Eval" if state.mode == "Prompt" else "Prompt"
+
+
+# Generic event handlers
+
+
+def on_open_dialog(e: me.ClickEvent):
+  """Generic event to open a dialog."""
+  state = me.state(State)
+  setattr(state, e.key, True)
+
+
+def on_close_dialog(e: me.ClickEvent):
+  """Generic event to close a dialog."""
+  state = me.state(State)
+  setattr(state, e.key, False)
+
+
+def on_update_input(e: me.InputBlurEvent | me.SelectSelectionChangeEvent):
+  """Generic event to update input/select values."""
+  state = me.state(State)
+  setattr(state, e.key, e.value)
+
+
+# Helper functions
+
+
+def _parse_variables(prompt: str) -> list[str]:
+  return _RE_VARIABLES.findall(prompt)
+
+
+def _find_prompt(prompts: list[Prompt], version: int) -> Prompt:
+  # We don't expected too many versions, so we'll just loop through the list to find the
+  # right version.
+  for prompt in prompts:
+    if prompt.version == version:
+      return prompt
+  return Prompt()
+
+
+# Style helpers
+
+_STYLE_INVISIBLE_TEXTAREA = me.Style(
+  overflow_y="hidden",
+  width="100%",
+  outline="none",
+  border=me.Border.all(me.BorderSide(style="none")),
+)

requirements.txt

@@ -0,0 +1,2 @@
+gunicorn
+mesop

ruff.toml

@@ -0,0 +1,2 @@
+line-length = 100
+indent-width = 2