Initial commit

.gitignore

@@ -0,0 +1,9 @@
+# Mesop
+.env
+
+# Python
+__pycache__
+.pytest_cache
+
+# System
+.DS_Store

Dockerfile

@@ -0,0 +1,32 @@
+FROM python:3.10.14-bullseye
+
+RUN apt-get update && \
+  apt-get install -y \
+  # General dependencies
+  locales \
+  locales-all && \
+  # Clean local repository of package files since they won't be needed anymore.
+  # Make sure this line is called after all apt-get update/install commands have
+  # run.
+  apt-get clean && \
+  # Also delete the index files which we also don't need anymore.
+  rm -rf /var/lib/apt/lists/*
+
+ENV LC_ALL en_US.UTF-8
+ENV LANG en_US.UTF-8
+ENV LANGUAGE en_US.UTF-8
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install -r requirements.txt
+
+# Create non-root user
+RUN groupadd -g 900 mesop && useradd -u 900 -s /bin/bash -g mesop mesop
+USER mesop
+
+# Add app code here
+COPY --chown=mesop:mesop . /srv/mesop-app
+WORKDIR /srv/mesop-app
+
+# Run Mesop through gunicorn. Should be available at localhost:8080
+CMD ["gunicorn", "--bind", "0.0.0.0:8080", "main:me", "--timeout", "300"]

README.md

@@ -0,0 +1,54 @@
+---
+title: Mesop App Maker
+emoji: 🏭
+colorFrom: yellow
+colorTo: pink
+sdk: docker
+pinned: false
+license: apache-2.0
+app_port: 8080
+---
+
+# Mesop App Maker
+
+Editor to generate, edit, and view Mesop apps using LLMs.
+
+## Usage
+
+The Mesop App Maker consists of two Mesop apps, the editor and the app runner.
+
+### The editor
+
+The editor is the Mesop app that allows you to generate, edit, and view Mesop apps.
+
+```shell
+cd editor
+pip install -r requirements.txt  # First time only
+mesop main.py
+```
+
+You will need a Gemini API key to use the Mesop app generate functionality.
+
+### The runner
+
+> The runner has been moved to https://github.com/richard-to/mesop-app-runner.
+
+The [Mesop App Runner](https://github.com/richard-to/mesop-app-runner) uses Docker to avoid potentially destructive code changes.
+
+It can be started using these commands:
+
+```shell
+docker stop mesop-app-runner;
+docker rm mesop-app;
+docker build -t mesop-app-runner . && docker run --name mesop-app-runner -d -p 8080:8080 mesop-app-runner;
+```
+
+## Screenshots
+
+### Generate app
+
+<img width="1312" alt="Screenshot 2024-08-05 at 5 29 44 PM" src="https://github.com/user-attachments/assets/d96afd8a-3c09-4d12-8749-00deddc7f8f5">
+
+### Preview app
+
+<img width="1312" alt="Screenshot 2024-08-05 at 5 31 35 PM" src="https://github.com/user-attachments/assets/1a826d44-c87b-4c79-aeaf-29bc8da3b1c0">

components/__init__.py

@@ -0,0 +1,8 @@
+from components.button import toolbar_button as toolbar_button
+from components.button import button_toggle as button_toggle
+from components.card import card as card
+from components.card import expandable_card as expandable_card
+from components.dialog import dialog as dialog
+from components.dialog import dialog_actions as dialog_actions
+from components.panel import panel as panel
+from components.snackbar import snackbar as snackbar

components/button.py

@@ -0,0 +1,122 @@
+from typing import Callable, Literal, Any
+
+import mesop as me
+
+from components import helpers
+
+
+@me.component()
+def toolbar_button(
+  *,
+  icon: str,
+  tooltip: str,
+  on_click: Callable[[me.ClickEvent], Any] | None = None,
+  key: str = "",
+):
+  with me.content_button(
+    on_click=on_click,
+    key=key,
+    type="icon",
+  ):
+    with me.tooltip(message=tooltip):
+      me.icon(icon)
+
+
+@me.component()
+def button(
+  label: str | None = None,
+  *,
+  on_click: Callable[[me.ClickEvent], Any] | None = None,
+  type: Literal["raised", "flat", "stroked"] | None = None,
+  color: Literal["primary", "accent", "warn"] | None = None,
+  disable_ripple: bool = False,
+  disabled: bool = False,
+  style: me.Style | None = None,
+  key: str | None = None,
+) -> None:
+  me.button(
+    label=label,
+    on_click=on_click,
+    type=type,
+    color=color,
+    disable_ripple=disable_ripple,
+    disabled=disabled,
+    key=key,
+    style=helpers.merge_styles(me.Style(border_radius=10), style),
+  )
+
+
+@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 me.theme_var("surface-container-lowest"),
+          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 = me.theme_var("primary-container")
+
+_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=me.theme_var("outline"), 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,72 @@
+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 expandable_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=me.theme_var("surface-container-lowest"),
+  border_radius=10,
+  border=me.Border.all(
+    me.BorderSide(width=1, color=me.theme_var("outline-variant"), style="solid")
+  ),
+  padding=me.Padding.all(15),
+  margin=me.Margin(bottom=15),
+)

components/dialog.py

@@ -0,0 +1,63 @@
+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)"
+      if me.theme_brightness() == "light"
+      else "rgba(255, 255, 255, 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=me.theme_var("surface-container-lowest"),
+          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/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/panel.py

@@ -0,0 +1,56 @@
+from typing import Callable
+
+import mesop as me
+
+
+@me.content_component
+def panel(is_open: bool, title: str, on_click_close: Callable | None = None, key: str = ""):
+  """Slide-in panel from right side."""
+  with me.box(
+    style=me.Style(
+      display="block" if is_open else "none",
+      height="100%",
+      overflow_x="auto",
+      overflow_y="auto",
+      pointer_events="none",
+      position="fixed",
+      width="100%",
+      z_index=1000,
+    )
+  ):
+    with me.box(
+      style=me.Style(
+        align_items="center",
+        display="grid",
+        height="calc(100vh - 10px)",
+        justify_items="end",
+      )
+    ):
+      with me.box(
+        style=me.Style(
+          background=me.theme_var("surface-container-low"),
+          border_radius=5,
+          box_sizing="border-box",
+          border=me.Border.all(
+            me.BorderSide(width=1, color=me.theme_var("outline-variant"), style="solid"),
+          ),
+          margin=me.Margin(top=10, right=5),
+          padding=me.Padding.all(20),
+          pointer_events="auto",
+          height="100%",
+          width="30%",
+        )
+      ):
+        with me.box(
+          style=me.Style(
+            align_items="center",
+            display="flex",
+            justify_content="space-between",
+            margin=me.Margin(bottom=15),
+          ),
+        ):
+          me.text(title, style=me.Style(font_size=16, font_weight="bold"))
+          with me.box(key=f"show_{key}", on_click=on_click_close, style=me.Style(cursor="pointer")):
+            me.icon("close")
+
+        me.slot()

components/snackbar.py

@@ -0,0 +1,79 @@
+from typing import Callable, Literal
+
+import mesop as me
+
+
+@me.component
+def snackbar(
+  *,
+  is_visible: bool,
+  label: str,
+  action_label: str | None = None,
+  on_click_action: Callable | None = None,
+  horizontal_position: Literal["start", "center", "end"] = "center",
+  vertical_position: Literal["start", "center", "end"] = "end",
+):
+  """Creates a snackbar.
+
+  By default the snackbar is rendered at bottom center.
+
+  The on_click_action should typically close the snackbar as part of its actions. If no
+  click event is included, you'll need to manually hide the snackbar.
+
+  Note that there is one issue with this snackbar example. No actions are possible until
+  the snackbar is dismissed or closed. This is due to the fixed box that gets created when
+  the snackbar is visible.
+
+  Args:
+    is_visible: Whether the snackbar is currently visible or not.
+    label: Message for the snackbar
+    action_label: Optional message for the action of the snackbar
+    on_click_action: Optional click event when action is triggered.
+    horizontal_position: Horizontal position of the snackbar
+    vertical_position: Vertical position of the snackbar
+  """
+  with me.box(
+    style=me.Style(
+      display="block" if is_visible else "none",
+      height="100%",
+      overflow_x="auto",
+      overflow_y="auto",
+      pointer_events="none",
+      position="fixed",
+      width="100%",
+      z_index=1000,
+    )
+  ):
+    with me.box(
+      style=me.Style(
+        align_items=vertical_position,
+        display="flex",
+        height="100%",
+        justify_content=horizontal_position,
+      )
+    ):
+      with me.box(
+        style=me.Style(
+          align_items="center",
+          background=me.theme_var("on-surface-variant"),
+          border_radius=5,
+          box_shadow=("0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"),
+          display="flex",
+          font_size=14,
+          justify_content="space-between",
+          margin=me.Margin.all(10),
+          padding=me.Padding(top=5, bottom=5, right=5, left=15)
+          if action_label
+          else me.Padding.all(15),
+          pointer_events="auto",
+          min_width=300,
+          max_width=500,
+        )
+      ):
+        me.text(label, style=me.Style(color=me.theme_var("surface-container-lowest")))
+        if action_label:
+          me.button(
+            action_label,
+            on_click=on_click_action,
+            style=me.Style(color=me.theme_var("primary-container")),
+          )

constants.py

@@ -0,0 +1,10 @@
+DEFAULT_URL = "http://localhost:8080"
+EXAMPLE_PROGRAM = """
+import mesop as me
+
+@me.page()
+def app():
+  me.text("Hello World")
+""".strip()
+PROMPT_MODE_GENERATE = "Generate"
+PROMPT_MODE_REVISE = "Revise"

handlers.py

@@ -0,0 +1,27 @@
+import mesop as me
+
+from state import State
+
+
+def on_show_component(e: me.ClickEvent):
+  """Generic event to show a component."""
+  state = me.state(State)
+  setattr(state, e.key, True)
+
+
+def on_hide_component(e: me.ClickEvent):
+  """Generic event to hide a component."""
+  state = me.state(State)
+  setattr(state, e.key, False)
+
+
+def on_update_input(e: me.InputBlurEvent | me.InputEvent | me.InputEnterEvent):
+  """Generic event to update input values."""
+  state = me.state(State)
+  setattr(state, e.key, e.value)
+
+
+def on_update_selection(e: me.SelectSelectionChangeEvent):
+  """Generic event to update input values."""
+  state = me.state(State)
+  setattr(state, e.key, e.value)

llm.py

@@ -0,0 +1,104 @@
+import google.generativeai as genai
+
+
+with open("prompt.txt") as f:
+  SYSTEM_INSTRUCTION = f.read()
+
+
+GENERATE_APP_BASE_PROMPT = """
+Your task is to write a Mesop app.
+
+Instructions:
+1. For the @me.page decorator, leave it empty like this `@me.page()`
+2. Event handler functions cannot use lambdas. You must use functions.
+3. Event handle functions only pass in the event type. They do not accept extra parameters.
+4. For padding, make sure to use the the `me.Padding` object rather than a string or int.
+5. For margin, make sure to use the the `me.Margin` object rather than a string or int.
+6. For border, make sure to use the the `me.Border` and `me.BorderSide` objects rather than a string.
+7. For buttons, prefer using type="flat", especially if it is the primary button.
+8. Only output the python code.
+
+Here is a description of the app I want you to write:
+
+<APP_DESCRIPTION>
+
+""".strip()
+
+REVISE_APP_BASE_PROMPT = """
+Your task is to modify a Mesop app given the code and a description.
+
+Make sure to remember these rules when making modifications:
+1. For the @me.page decorator, leave it empty like this `@me.page()`
+2. Event handler functions cannot use lambdas. You must use functions.
+3. Event handle functions only pass in the event type. They do not accept extra parameters.
+4. For padding, make sure to use the the `me.Padding` object rather than a string or int.
+5. For margin, make sure to use the the `me.Margin` object rather than a string or int.
+6. For border, make sure to use the the `me.Border` and `me.BorderSide` objects rather than a string.
+7. For buttons, prefer using type="flat", especially if it is the primary button.
+8. Only output the python code.
+
+Here is is the code for the app:
+
+```
+<APP_CODE>
+```
+
+Here is a description of the changes I want:
+
+<APP_CHANGES>
+
+""".strip()
+
+
+def make_model(api_key: str, model_name: str) -> genai.GenerativeModel:
+  genai.configure(api_key=api_key)
+
+  generation_config = {
+    "temperature": 1,
+    "top_p": 0.95,
+    "top_k": 64,
+    "max_output_tokens": 32768,
+  }
+
+  safety_settings = [
+    {
+      "category": "HARM_CATEGORY_HARASSMENT",
+      "threshold": "BLOCK_NONE",
+    },
+    {
+      "category": "HARM_CATEGORY_HATE_SPEECH",
+      "threshold": "BLOCK_NONE",
+    },
+    {
+      "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
+      "threshold": "BLOCK_NONE",
+    },
+    {
+      "category": "HARM_CATEGORY_DANGEROUS_CONTENT",
+      "threshold": "BLOCK_NONE",
+    },
+  ]
+
+  return genai.GenerativeModel(
+    model_name=model_name,
+    system_instruction=SYSTEM_INSTRUCTION,
+    safety_settings=safety_settings,
+    generation_config=generation_config,
+  )
+
+
+def generate_mesop_app(msg: str, model_name: str, api_key: str) -> str:
+  model = make_model(api_key, model_name)
+  response = model.generate_content(
+    GENERATE_APP_BASE_PROMPT.replace("<APP_DESCRIPTION>", msg), request_options={"timeout": 120}
+  )
+  return response.text
+
+
+def adjust_mesop_app(code: str, msg: str, model_name: str, api_key: str) -> str:
+  model = make_model(api_key, model_name)
+  response = model.generate_content(
+    REVISE_APP_BASE_PROMPT.replace("<APP_CODE>", code).replace("<APP_CHANGES>", msg),
+    request_options={"timeout": 120},
+  )
+  return response.text

main.py

@@ -0,0 +1,449 @@
+import base64
+import time
+
+import requests
+import mesop as me
+import mesop.labs as mel
+
+import components as mex
+import handlers
+import llm
+from constants import DEFAULT_URL, PROMPT_MODE_REVISE, PROMPT_MODE_GENERATE
+from state import State
+from web_components import code_mirror_editor_component
+from web_components import AsyncAction
+from web_components import async_action_component
+
+
+@me.page(
+  title="Mesop App Maker",
+  stylesheets=[
+    "https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css",
+    "https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/tomorrow-night-eighties.min.css",
+  ],
+  security_policy=me.SecurityPolicy(
+    allowed_connect_srcs=[
+      "https://cdnjs.cloudflare.com",
+      "*.fonts.gstatic.com",
+    ],
+    allowed_script_srcs=[
+      "https://cdn.jsdelivr.net",
+      "https://cdnjs.cloudflare.com",
+      "*.fonts.gstatic.com",
+    ],
+  ),
+)
+def main():
+  state = me.state(State)
+
+  action = (
+    AsyncAction(value=state.async_action_name, duration_seconds=state.async_action_duration)
+    if state.async_action_name
+    else None
+  )
+  async_action_component(action=action, on_finished=on_async_action_finished)
+
+  # Status snackbar
+  mex.snackbar(
+    label=state.info,
+    is_visible=state.show_status_snackbar,
+  )
+
+  # Error dialog
+  with mex.dialog(state.show_error_dialog):
+    me.text("Failed to upload code", type="headline-6")
+    with me.box(
+      style=me.Style(max_width=500, max_height=300, overflow_x="scroll", overflow_y="scroll")
+    ):
+      me.code(
+        state.error.replace("\n", "  \n"),
+      )
+    with mex.dialog_actions():
+      me.button(
+        "Close",
+        key="show_error_dialog",
+        on_click=handlers.on_hide_component,
+      )
+
+  # Generate code panel
+  with mex.panel(
+    is_open=state.show_generate_panel,
+    title="Generate Code",
+    on_click_close=handlers.on_hide_component,
+    key="generate_panel",
+  ):
+    mex.button_toggle(
+      [PROMPT_MODE_GENERATE, PROMPT_MODE_REVISE],
+      selected=state.prompt_mode,
+      on_click=on_click_prompt_mode,
+    )
+    me.textarea(
+      value=state.prompt_placeholder,
+      rows=10,
+      label="What changes do you want to make?"
+      if state.prompt_mode == PROMPT_MODE_REVISE
+      else "What do you want to make?",
+      key="prompt",
+      on_blur=handlers.on_update_input,
+      disabled=state.loading,
+      style=me.Style(width="100%", margin=me.Margin(top=15)),
+    )
+    with me.content_button(on_click=on_run_prompt, type="flat", disabled=state.loading):
+      me.icon("send")
+
+  # Prompt history panel
+  with mex.panel(
+    is_open=state.show_prompt_history_panel,
+    title="Prompt History",
+    on_click_close=handlers.on_hide_component,
+    key="prompt_history_panel",
+  ):
+    for prompt_history in reversed(state.prompt_history):
+      with me.box(
+        key=f"prompt-{prompt_history['index']}",
+        on_click=on_click_history_prompt,
+        style=me.Style(
+          background=me.theme_var("surface-container"),
+          border=me.Border.all(
+            me.BorderSide(width=1, color=me.theme_var("outline-variant"), style="solid")
+          ),
+          border_radius=5,
+          cursor="pointer",
+          margin=me.Margin.symmetric(vertical=10),
+          padding=me.Padding.all(10),
+          text_overflow="ellipsis",
+        ),
+      ):
+        me.text(prompt_history["mode"], style=me.Style(font_weight="bold", font_size=13))
+        me.text(_truncate_text(prompt_history["prompt"]))
+
+  with me.box(
+    style=me.Style(
+      display="grid",
+      grid_template_columns="1fr 2fr 35fr" if state.menu_open else "1fr 40fr",
+      height="100vh",
+    )
+  ):
+    with me.box(
+      style=me.Style(
+        background=me.theme_var("surface-container"),
+        padding=me.Padding.all(10),
+        border=me.Border(
+          right=me.BorderSide(width=1, color=me.theme_var("outline-variant"), style="solid"),
+        ),
+      )
+    ):
+      mex.toolbar_button(
+        icon="menu",
+        tooltip="Close menu" if state.menu_open else "Open menu",
+        on_click=on_toggle_sidebar_menu,
+      )
+
+      mex.toolbar_button(
+        icon="settings",
+        tooltip="Settings",
+        on_click=on_open_settings,
+      )
+
+      mex.toolbar_button(
+        icon="light_mode" if me.theme_brightness() == "dark" else "dark_mode",
+        tooltip="Switch to " + ("light mode" if me.theme_brightness() == "dark" else "dark mode"),
+        on_click=on_click_theme_brightness,
+      )
+
+    if state.menu_open and state.menu_open_type == "settings":
+      with me.box(
+        style=me.Style(
+          background=me.theme_var("surface-container-low"),
+          padding=me.Padding.all(15),
+          border=me.Border(
+            right=me.BorderSide(width=1, color=me.theme_var("outline-variant"), style="solid")
+          ),
+          display="flex",
+          flex_direction="column",
+          height="100vh",
+        )
+      ):
+        me.text(
+          "Settings",
+          style=me.Style(font_weight="bold", margin=me.Margin(bottom=10)),
+        )
+        me.input(
+          label="API Key", key="api_key", on_blur=handlers.on_update_input, disabled=state.loading
+        )
+        me.select(
+          label="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",
+            ),
+          ],
+          key="model",
+          value=state.model,
+          on_selection_change=handlers.on_update_selection,
+          disabled=state.loading,
+        )
+        with me.box():
+          me.input(
+            value=DEFAULT_URL,
+            label="URL",
+            key="url",
+            on_blur=handlers.on_update_input,
+            style=me.Style(width="100%"),
+            disabled=state.loading,
+          )
+
+    # Main content
+    with me.box(
+      style=me.Style(
+        background=me.theme_var("surface-container-lowest"),
+        display="flex",
+        flex_direction="column",
+        flex_grow=1,
+        height="100%",
+      )
+    ):
+      # Toolbar
+      with me.box(
+        style=me.Style(
+          display="grid",
+          grid_template_columns="1fr 1fr",
+          grid_template_rows="1fr 20fr",
+          height="calc(100vh - 5px)",
+        )
+      ):
+        with me.box(
+          style=me.Style(
+            grid_column_start=1,
+            grid_column_end=3,
+            background=me.theme_var("surface-container"),
+            padding=me.Padding.all(5),
+            border=me.Border(
+              bottom=me.BorderSide(width=1, color=me.theme_var("outline-variant"), style="solid"),
+            ),
+          )
+        ):
+          with me.box(style=me.Style(display="flex", flex_direction="row")):
+            with me.box(
+              style=me.Style(
+                flex_grow=1,
+                display="flex",
+                flex_direction="row",
+              )
+            ):
+              mex.toolbar_button(
+                icon="bolt",
+                tooltip="Generate code",
+                key="show_generate_panel",
+                on_click=on_show_generate_panel,
+              )
+
+              if state.prompt_history:
+                mex.toolbar_button(
+                  icon="history",
+                  tooltip="Prompt history",
+                  key="show_prompt_history_panel",
+                  on_click=on_show_prompt_history_panel,
+                )
+
+            with me.box(
+              style=me.Style(
+                flex_grow=1, display="flex", flex_direction="row", justify_content="end"
+              )
+            ):
+              mex.toolbar_button(
+                icon="refresh",
+                tooltip="Load URL",
+                on_click=on_load_url,
+              )
+              mex.toolbar_button(
+                icon="play_arrow",
+                tooltip="Run code",
+                on_click=on_run_code,
+              )
+
+        # Code editor pane
+        with me.box(
+          style=me.Style(
+            background=me.theme_var("surface-container-lowest"),
+            overflow_x="scroll",
+            overflow_y="scroll",
+          )
+        ):
+          code_mirror_editor_component(
+            code=state.code_placeholder,
+            theme="default" if me.theme_brightness() == "light" else "tomorrow-night-eighties",
+            on_editor_blur=on_code_input,
+          )
+
+        # App preview pane
+        with me.box():
+          me.embed(
+            key=str(state.iframe_index),
+            src=state.loaded_url or DEFAULT_URL,
+            style=me.Style(
+              background=me.theme_var("surface-container-lowest"),
+              width="100%",
+              height="100%",
+              border=me.Border.all(me.BorderSide(width=0)),
+            ),
+          )
+
+
+def on_toggle_sidebar_menu(e: me.ClickEvent):
+  """Toggles sidebar menu expansion."""
+  state = me.state(State)
+  state.menu_open = not state.menu_open
+
+
+def on_click_theme_brightness(e: me.ClickEvent):
+  """Toggles dark mode."""
+  if me.theme_brightness() == "light":
+    me.set_theme_mode("dark")
+  else:
+    me.set_theme_mode("light")
+
+
+def on_open_settings(e: me.ClickEvent):
+  """Shows settings menu."""
+  state = me.state(State)
+  state.menu_open = True
+  state.menu_open_type = "settings"
+
+
+def on_click_prompt_mode(e: me.ClickEvent):
+  """Toggles prompt modes - generate / revision."""
+  state = me.state(State)
+  state.prompt_mode = (
+    PROMPT_MODE_REVISE if state.prompt_mode == PROMPT_MODE_GENERATE else PROMPT_MODE_GENERATE
+  )
+
+
+def on_code_input(e: mel.WebEvent):
+  """Captures code input into state on blur."""
+  state = me.state(State)
+  state.code = e.value["code"]
+  state.code_placeholder = e.value["code"]
+
+
+def on_load_url(e: me.ClickEvent):
+  """Loads the Mesop app page into the iframe."""
+  state = me.state(State)
+  state.code_placeholder = state.code
+  yield
+  state.loaded_url = state.url + state.url_path
+  state.iframe_index += 1
+  yield
+
+
+def on_run_code(e: me.ClickEvent):
+  """Tries to upload code to the Mesop app runner."""
+  state = me.state(State)
+  state.code_placeholder = state.code
+  yield
+  result = requests.post(
+    state.url + "/exec", data={"code": base64.b64encode(state.code.encode("utf-8"))}
+  )
+  if result.status_code == 200:
+    state.url_path = result.content.decode("utf-8")
+    yield from on_load_url(e)
+  else:
+    state.show_error_dialog = True
+    state.error = result.content.decode("utf-8")
+    yield
+
+
+def on_run_prompt(e: me.ClickEvent):
+  """Generate code from prompt."""
+  state = me.state(State)
+
+  state.prompt_placeholder = state.prompt
+  yield
+  time.sleep(0.4)
+  state.prompt_placeholder = ""
+  yield
+
+  state.loading = True
+  yield
+
+  if state.prompt_mode == PROMPT_MODE_REVISE:
+    state.code = llm.adjust_mesop_app(
+      state.code, state.prompt, model_name=state.model, api_key=state.api_key
+    )
+  else:
+    state.code = llm.generate_mesop_app(state.prompt, model_name=state.model, api_key=state.api_key)
+
+  state.code = state.code.strip().removeprefix("```python").removesuffix("```")
+  state.code_placeholder = state.code
+  state.info = (
+    "Your code adjustment has been applied!"
+    if state.prompt_mode == PROMPT_MODE_REVISE
+    else "Your Mesop app has been generated!"
+  )
+  state.prompt_history.append(
+    dict(
+      prompt=state.prompt, code=state.code, index=len(state.prompt_history), mode=state.prompt_mode
+    )
+  )
+
+  state.prompt_mode = PROMPT_MODE_REVISE
+  state.loading = False
+  yield
+
+  state.show_status_snackbar = True
+  state.async_action_name = "hide_status_snackbar"
+  yield
+
+
+def on_show_prompt_history_panel(e: me.ClickEvent):
+  """Show prompt history panel"""
+  state = me.state(State)
+  state.show_prompt_history_panel = True
+  state.show_generate_panel = False
+
+
+def on_show_generate_panel(e: me.ClickEvent):
+  """Show generate panel and focus on prompt text area"""
+  state = me.state(State)
+  state.show_generate_panel = True
+  state.show_prompt_history_panel = False
+  yield
+  me.focus_component(key="prompt")
+  yield
+
+
+def on_click_history_prompt(e: me.ClickEvent):
+  """Set previous prompt/code"""
+  state = me.state(State)
+  index = int(e.key.replace("prompt-", ""))
+  prompt_history = state.prompt_history[index]
+  state.prompt_placeholder = prompt_history["prompt"]
+  state.prompt = state.prompt_placeholder
+  state.code_placeholder = prompt_history["code"]
+  state.code = state.code_placeholder
+  state.prompt_mode = prompt_history["mode"]
+  state.show_prompt_history_panel = False
+  state.show_generate_panel = True
+  yield
+  me.focus_component(key="prompt")
+  yield
+
+
+def on_async_action_finished(e: mel.WebEvent):
+  state = me.state(State)
+  state.async_action_name = ""
+  state.info = ""
+  state.show_status_snackbar = False
+
+
+def _truncate_text(text, char_limit=100):
+  """Truncates text that is too long."""
+  if len(text) <= char_limit:
+    return text
+  truncated_text = text[:char_limit].rsplit(" ", 1)[0]
+  return truncated_text.rstrip(".,!?;:") + "..."

requirements.txt

@@ -0,0 +1,4 @@
+mesop==0.12.2
+requests
+google_generativeai
+gunicorn

ruff.toml

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

state.py

@@ -0,0 +1,48 @@
+import mesop as me
+
+import constants as c
+
+
+@me.stateclass
+class State:
+  # App level
+  loading: bool = False
+  error: str
+  info: str
+
+  # Settings
+  api_key: str
+  model: str = "gemini-1.5-flash"
+  url: str = c.DEFAULT_URL
+
+  # Generate prompt panel
+  prompt_mode: str = "Generate"
+  prompt_placeholder: str
+  prompt: str
+
+  # Prompt history panel
+  prompt_history: list[dict]  # Format: {"prompt", "code", "index", "mode"}
+
+  # Code editor
+  code_placeholder: str = c.EXAMPLE_PROGRAM
+  code: str = c.EXAMPLE_PROGRAM
+
+  # App preview
+  run_result: str
+  url_path: str = "/"
+  loaded_url: str
+  iframe_index: int
+
+  # Sidebar
+  menu_open: bool = True
+  menu_open_type: str = "settings"
+
+  # Sub-screens
+  show_error_dialog: bool = False
+  show_generate_panel: bool = False
+  show_prompt_history_panel: bool = False
+  show_status_snackbar: bool = False
+
+  # Async action
+  async_action_name: str
+  async_action_duration: int = 3

web_components/__init__.py

@@ -0,0 +1,11 @@
+from web_components.code_mirror_editor.code_mirror_editor_component import (
+  code_mirror_editor_component as code_mirror_editor_component,
+)
+
+from web_components.async_action.async_action_component import (
+  async_action_component as async_action_component,
+)
+
+from web_components.async_action.async_action_component import (
+  AsyncAction as AsyncAction,
+)

web_components/async_action/async_action_component.js

@@ -0,0 +1,49 @@
+import {
+  LitElement,
+  html,
+} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
+
+class AsyncAction extends LitElement {
+  static properties = {
+    startedEvent: {type: String},
+    finishedEvent: {type: String},
+    // Storing as string due to https://github.com/google/mesop/issues/730
+    // Format: {action: String, duration_seconds: Number}
+    action: {type: String},
+    isRunning: {type: Boolean},
+  };
+
+  render() {
+    return html`<div></div>`;
+  }
+
+  firstUpdated() {
+    if (this.action) {
+      this.runTimeout(this.action);
+    }
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('action') && this.action) {
+      this.runTimeout(this.action);
+    }
+  }
+
+  runTimeout(actionJson) {
+    const action = JSON.parse(actionJson);
+    this.dispatchEvent(
+      new MesopEvent(this.startedEvent, {
+        action: action,
+      }),
+    );
+    setTimeout(() => {
+      this.dispatchEvent(
+        new MesopEvent(this.finishedEvent, {
+          action: action.value,
+        }),
+      );
+    }, action.duration_seconds * 1000);
+  }
+}
+
+customElements.define('async-action-component', AsyncAction);

web_components/async_action/async_action_component.py

@@ -0,0 +1,43 @@
+import json
+from dataclasses import asdict, dataclass
+from typing import Any, Callable
+
+import mesop.labs as mel
+
+
+@dataclass
+class AsyncAction:
+  value: str
+  duration_seconds: int
+
+
+@mel.web_component(path="./async_action_component.js")
+def async_action_component(
+  *,
+  action: AsyncAction | None = None,
+  on_started: Callable[[mel.WebEvent], Any] | None = None,
+  on_finished: Callable[[mel.WebEvent], Any] | None = None,
+  key: str | None = None,
+):
+  """Creates an invisibe component that will delay state changes asynchronously.
+
+  Right now this implementation is limited since we basically just pass the key around.
+  But ideally we also pass in some kind of value to update when the time out expires.
+
+  The main benefit of this component is for cases, such as status messages that may
+  appear and disappear after some duration. The primary example here is the example
+  snackbar widget, which right now blocks the UI when using the sleep yield approach.
+
+  The other benefit of this component is that it works generically (rather than say
+  implementing a custom snackbar widget as a web component).
+  """
+  events = {
+    "startedEvent": on_started,
+    "finishedEvent": on_finished,
+  }
+  return mel.insert_web_component(
+    name="async-action-component",
+    key=key,
+    events={key: value for key, value in events.items() if value is not None},
+    properties={"action": json.dumps(asdict(action)) if action else ""},
+  )

web_components/code_mirror_editor/code_mirror_editor_component.js

@@ -0,0 +1,75 @@
+import {
+  LitElement,
+  html,
+} from "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js";
+
+import "https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.js";
+import "https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/python/python.js";
+
+class CodeMirrorEditorComponent extends LitElement {
+  static properties = {
+    code: { type: String },
+    theme: { type: String },
+    editorBlurEvent: { type: String },
+    height: { type: String },
+    width: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.width = "100%";
+    this.height = "100%";
+    this.code = "";
+    (this.theme = "default"), (this.editor = null);
+    this.editorState = null;
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  firstUpdated() {
+    this.renderEditor();
+  }
+
+  renderEditor() {
+    this.editor = CodeMirror.fromTextArea(this.querySelector("#editor"), {
+      mode: "python",
+      lineNumbers: true,
+      theme: this.theme,
+      readOnly: false,
+    });
+    this.editor.setValue(this.code);
+    this.editor.setSize(this.width, this.height);
+    this.editor.on("blur", (cm) => {
+      if (this.editorBlurEvent) {
+        this.code = cm.getValue();
+        this.dispatchEvent(
+          new MesopEvent(this.editorBlurEvent, {
+            code: this.code,
+          })
+        );
+      }
+    });
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("code")) {
+      if (this.code !== this.editor.getValue()) {
+        this.editor.setValue(this.code);
+      }
+    }
+    if (changedProperties.has("theme")) {
+      this.editor.setOption("theme", this.theme);
+    }
+  }
+
+  render() {
+    return html` <textarea id="editor"></textarea>`;
+  }
+}
+
+customElements.define(
+  "code-mirror-editor-component",
+  CodeMirrorEditorComponent
+);

web_components/code_mirror_editor/code_mirror_editor_component.py

@@ -0,0 +1,30 @@
+from typing import Any, Callable
+
+import mesop.labs as mel
+
+
+@mel.web_component(path="./code_mirror_editor_component.js")
+def code_mirror_editor_component(
+  *,
+  code: str = "",
+  theme: str = "default",
+  on_editor_blur: Callable[[mel.WebEvent], Any] | None = None,
+  height: str = "100%",
+  width: str = "100%",
+  key: str | None = None,
+):
+  events = {}
+  if on_editor_blur:
+    events["editorBlurEvent"] = on_editor_blur
+
+  return mel.insert_web_component(
+    name="code-mirror-editor-component",
+    key=key,
+    events=events,
+    properties={
+      "code": code,
+      "theme": theme,
+      "height": height,
+      "width": width,
+    },
+  )