Add runner token support

- Add help dialog
- Various refactorings

README.md

@@ -26,6 +26,19 @@ pip install -r requirements.txt
 mesop main.py
 ```
 
+#### Environment variables
+
+The editor supports the following environment variables. These are mainly useful for
+local development where you don't want to keep entering your API Key and runner token
+after every reload.
+
+```
+GEMINI_API_KEY=you-app-key
+MESOP_APP_MAKER_RUNNER_URL=https://example.com
+MESOP_APP_MAKER_RUNNER_TOKEN=your-secret-token
+MESOP_APP_MAKER_SHOW_HELP=0
+```
+
 You will need a Gemini API key to use the Mesop app generate functionality.
 
 ### The runner

components/button.py

@@ -13,12 +13,12 @@ def toolbar_button(
   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):
+  with me.tooltip(message=tooltip):
+    with me.content_button(
+      on_click=on_click,
+      key=key,
+      type="icon",
+    ):
       me.icon(icon)
 
 

constants.py

@@ -8,3 +8,23 @@ def app():
 """.strip()
 PROMPT_MODE_GENERATE = "Generate"
 PROMPT_MODE_REVISE = "Revise"
+
+HELP_TEXT = """
+**Generating Mesop Apps**
+
+- Provide a Gemini API Key in the Settings panel.
+- Click the lightning bolt button to open the prompt panel.
+- Enter your prompt and generate your app.
+- Inspect the generated code in the editor.
+- Press the run/play button to execute and view your code
+    - *Requires Mesop App Runner instance.*
+
+**Setting up a Mesop Runner instance**
+
+*If running on Hugging Face, you will need to fork the Mesop App Runner space.*
+
+- Start up an instance of the [Mesop App Runner](https://github.com/richard-to/mesop-app-runner).
+    - See [Github repository](https://github.com/richard-to/mesop-app-runner) for more details.
+- Provide the Runner URL to your instance.
+- Provide the Runner Token to your runner instance.
+""".strip()

main.py

@@ -8,7 +8,12 @@ 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 constants import (
+  DEFAULT_URL,
+  PROMPT_MODE_REVISE,
+  PROMPT_MODE_GENERATE,
+  HELP_TEXT,
+)
 from state import State
 from web_components import code_mirror_editor_component
 from web_components import AsyncAction
@@ -65,6 +70,17 @@ def main():
         on_click=handlers.on_hide_component,
       )
 
+  # Help dialog
+  with mex.dialog(state.show_help_dialog):
+    me.text("Usage Instructions", type="headline-6")
+    me.markdown(HELP_TEXT)
+    with mex.dialog_actions():
+      me.button(
+        "Close",
+        key="show_help_dialog",
+        on_click=handlers.on_hide_component,
+      )
+
   # Generate code panel
   with mex.panel(
     is_open=state.show_generate_panel,
@@ -151,6 +167,13 @@ def main():
         on_click=on_click_theme_brightness,
       )
 
+      mex.toolbar_button(
+        icon="help",
+        tooltip="Help",
+        key="show_help_dialog",
+        on_click=handlers.on_show_component,
+      )
+
     if state.menu_open and state.menu_open_type == "settings":
       with me.box(
         style=me.Style(
@@ -169,7 +192,12 @@ def main():
           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
+          type="password",
+          label="Gemini API Key",
+          key="api_key",
+          value=state.api_key,
+          on_blur=handlers.on_update_input,
+          disabled=state.loading,
         )
         me.select(
           label="Model",
@@ -190,9 +218,19 @@ def main():
         )
         with me.box():
           me.input(
-            value=DEFAULT_URL,
-            label="URL",
-            key="url",
+            value=state.runner_url,
+            label="Runner URL",
+            key="runner_url",
+            on_blur=handlers.on_update_input,
+            style=me.Style(width="100%"),
+            disabled=state.loading,
+          )
+        with me.box():
+          me.input(
+            type="password",
+            value=state.runner_token,
+            label="Runner Token",
+            key="runner_token",
             on_blur=handlers.on_update_input,
             style=me.Style(width="100%"),
             disabled=state.loading,
@@ -336,21 +374,22 @@ def on_load_url(e: me.ClickEvent):
   state = me.state(State)
   state.code_placeholder = state.code
   yield
-  state.loaded_url = state.url + state.url_path
+  state.loaded_url = state.runner_url.removesuffix("/") + state.runner_url_path
   state.iframe_index += 1
   yield
 
 
 def on_run_code(e: me.ClickEvent):
-  """Tries to upload code to the Mesop app runner."""
+  """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"))}
+    state.runner_url.removesuffix("/") + "/exec",
+    data={"token": state.runner_token, "code": base64.b64encode(state.code.encode("utf-8"))},
   )
   if result.status_code == 200:
-    state.url_path = result.content.decode("utf-8")
+    state.runner_url_path = result.content.decode("utf-8")
     yield from on_load_url(e)
   else:
     state.show_error_dialog = True

state.py

@@ -1,3 +1,5 @@
+import os
+
 import mesop as me
 
 import constants as c
@@ -11,9 +13,10 @@ class State:
   info: str
 
   # Settings
-  api_key: str
+  api_key: str = os.getenv("GEMINI_API_KEY", "")
   model: str = "gemini-1.5-flash"
-  url: str = c.DEFAULT_URL
+  runner_url: str = os.getenv("MESOP_APP_MAKER_RUNNER_URL", c.DEFAULT_URL)
+  runner_token: str = os.getenv("MESOP_APP_MAKER_RUNNER_TOKEN", "")
 
   # Generate prompt panel
   prompt_mode: str = "Generate"
@@ -29,7 +32,7 @@ class State:
 
   # App preview
   run_result: str
-  url_path: str = "/"
+  runner_url_path: str = "/"
   loaded_url: str
   iframe_index: int
 
@@ -42,6 +45,7 @@ class State:
   show_generate_panel: bool = False
   show_prompt_history_panel: bool = False
   show_status_snackbar: bool = False
+  show_help_dialog: bool = bool(int(os.getenv("MESOP_APP_MAKER_SHOW_HELP", "0")))
 
   # Async action
   async_action_name: str