Commit

Dockerfile

@@ -0,0 +1,32 @@
+FROM python:3.12.7-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 . /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"]

README.md

@@ -0,0 +1,10 @@
+---
+title: Mesop Showcase
+emoji: 👓
+colorFrom: red
+colorTo: yellow
+sdk: docker
+pinned: false
+license: apache-2.0
+app_port: 8080
+---

deploy_to_hf.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+
+set -e
+
+error_handler() {
+    echo "Error: An error occurred. Exiting script."
+    exit 1
+}
+
+# Set up error handling
+trap error_handler ERR
+
+if [ $# -eq 0 ]; then
+    echo "Error: Please provide a destination path as an argument."
+    exit 1
+fi
+
+DEST_PATH="$1"
+
+if [ ! -d "$DEST_PATH" ]; then
+    echo "Destination path does not exist. Creating it now."
+    mkdir -p "$DEST_PATH"
+fi
+
+# Get the path of this script which is the demo dir.
+DEMO_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+cp -R "$DEMO_DIR/" "$DEST_PATH"
+echo "Demo files have been copied to $DEST_PATH"
+cd "$DEST_PATH/showcase"
+echo "Changed directory to $DEST_PATH"
+
+git init
+git branch -m main
+git config user.name github-actions[bot]
+git config user.email github-actions[bot]@users.noreply.github.com
+echo "Configured git user"
+git add .
+git commit -m "Commit"
+git remote add hf https://wwwillchen:$HF_TOKEN@huggingface.co/spaces/wwwillchen/mesop-showcase || true
+git push --force --set-upstream hf main
+
+echo "Pushed to: https://huggingface.co/spaces/wwwillchen/mesop-showcase. Check the logs to see that it's deployed correctly."

main.py

@@ -0,0 +1,471 @@
+from dataclasses import dataclass
+
+import mesop as me
+
+CARD_WIDTH = "320px"
+
+
+@dataclass
+class Resource:
+  title: str
+  description: str
+  github_url: str
+  github_username: str
+  img_url: str
+  app_url: str | None = None
+
+
+@dataclass
+class Section:
+  name: str
+  resources: list[Resource]
+  icon: str
+
+
+SECTIONS = [
+  Section(
+    name="Featured",
+    icon="star",
+    resources=[
+      Resource(
+        title="Mesop Duo Chat",
+        description="Chat with multiple models at once.",
+        github_url="https://github.com/wwwillchen/mesop-duo-chat",
+        github_username="wwwillchen",
+        app_url="https://huggingface.co/spaces/wwwillchen/mesop-duo-chat",
+        img_url="https://github.com/user-attachments/assets/107afb9c-f08c-4f27-bd00-e122415c069e",
+      ),
+      Resource(
+        title="Mesop Prompt Tuner",
+        description="Prompt tuning app heavily inspired by Anthropic Console Workbench.",
+        app_url="https://huggingface.co/spaces/richard-to/mesop-prompt-tuner",
+        img_url="https://github.com/user-attachments/assets/2ec6cbfb-c28b-4f60-98f9-34bfca1f6938",
+        github_url="https://github.com/richard-to/mesop-prompt-tuner",
+        github_username="richard-to",
+      ),
+    ],
+  ),
+  Section(
+    name="Apps",
+    icon="computer",
+    resources=[
+      Resource(
+        title="Mesop Arena",
+        description="Rate generated images head-to-head. Includes ELO leaderboard and voting history.",
+        img_url="https://raw.githubusercontent.com/ghchinoy/mesop-arena/refs/heads/main/assets/arena_view.png",
+        github_url="https://github.com/ghchinoy/mesop-arena",
+        github_username="ghchinoy",
+      ),
+      Resource(
+        title="Mesop Jeopardy Live",
+        description="Jeopardy using Gemini Multimodal Live API (audio/text).",
+        app_url="https://huggingface.co/spaces/richard-to/mesop-jeopardy-live",
+        img_url="https://github.com/user-attachments/assets/97d704e1-6df6-4a05-8a77-8e91363295fa",
+        github_url="https://github.com/richard-to/mesop-jeopardy-live",
+        github_username="richard-to",
+      ),
+      Resource(
+        title="Multimodal Embeddings Retail Search",
+        description="Using multimodal embeddings to search retail product images and titles.",
+        img_url="https://github.com/user-attachments/assets/ece910c7-5c2c-4d27-ab6a-0febc7affb12",
+        github_url="https://github.com/mandieq/retail_embeddings",
+        github_username="mandieq",
+      ),
+      Resource(
+        title="Mesop Jeopardy",
+        description="Jeopardy using Mesop + Gemini 1.5 (text only)",
+        app_url="https://huggingface.co/spaces/richard-to/mesop-jeopardy",
+        img_url="https://github.com/richard-to/mesop-jeopardy/assets/539889/bc27447d-129f-47ae-b0b1-8f5c546762ed",
+        github_url="https://github.com/richard-to/mesop-jeopardy",
+        github_username="richard-to",
+      ),
+      Resource(
+        title="Mesop App Maker",
+        description="Generate apps with Mesop using LLMs.",
+        app_url="https://huggingface.co/spaces/richard-to/mesop-app-maker",
+        img_url="https://github.com/user-attachments/assets/1a826d44-c87b-4c79-aeaf-29bc8da3b1c0",
+        github_url="https://github.com/richard-to/mesop-app-maker",
+        github_username="richard-to",
+      ),
+    ],
+  ),
+  Section(
+    name="Web components",
+    icon="code_blocks",
+    resources=[
+      Resource(
+        title="Mesop Markmap",
+        description="Mesop web component for the Markmap library.",
+        img_url="https://github.com/user-attachments/assets/6aa40ca3-d98a-42b2-adea-3f49b134445d",
+        github_url="https://github.com/lianggecm/mesop_markmap",
+        app_url="https://colab.research.google.com/drive/17gXlsXPDeo6hcFl1oOyrZ58FTozviN45?usp=sharing",
+        github_username="lianggecm",
+      ),
+    ],
+  ),
+  Section(
+    name="Notebooks",
+    icon="description",
+    resources=[
+      Resource(
+        title="Mesop Getting Started Colab",
+        description="Get started with Mesop in Colab.",
+        img_url="https://github.com/user-attachments/assets/37efbe69-ac97-4d26-8fda-d1b7b2b4976a",
+        github_url="https://github.com/mesop-dev/mesop/blob/main/notebooks/mesop_colab_getting_started.ipynb",
+        app_url="https://colab.research.google.com/github/mesop-dev/mesop/blob/main/notebooks/mesop_colab_getting_started.ipynb",
+        github_username="google",
+      ),
+      Resource(
+        title="Gemma with Mesop Notebook",
+        description="Use Gemma with Mesop in Colab.",
+        img_url="https://github.com/user-attachments/assets/a52ebf01-7f24-469b-9ad9-b271fdb19e37",
+        github_url="https://github.com/google-gemini/gemma-cookbook/blob/main/Gemma/%5BGemma_2%5DUsing_with_Mesop.ipynb",
+        app_url="https://colab.research.google.com/github/google-gemini/gemma-cookbook/blob/main/Gemma/%5BGemma_2%5DUsing_with_Mesop.ipynb",
+        github_username="google-gemini",
+      ),
+      Resource(
+        title="PaliGemma with Mesop Notebook",
+        description="Use PaliGemma with Mesop in Colab.",
+        img_url="https://github.com/user-attachments/assets/8cb456a1-f7be-4187-9a3f-f6b48bde73e9",
+        github_url="https://github.com/google-gemini/gemma-cookbook/blob/main/PaliGemma/%5BPaliGemma_1%5DUsing_with_Mesop.ipynb",
+        app_url="https://colab.research.google.com/github/google-gemini/gemma-cookbook/blob/main/PaliGemma/%5BPaliGemma_1%5DUsing_with_Mesop.ipynb",
+        github_username="google-gemini",
+      ),
+    ],
+  ),
+]
+
+
+def scroll_to_section(e: me.ClickEvent):
+  me.scroll_into_view(key="section-" + e.key)
+  me.state(State).sidenav_menu_open = False
+
+
+def toggle_theme(e: me.ClickEvent):
+  if me.theme_brightness() == "light":
+    me.set_theme_mode("dark")
+  else:
+    me.set_theme_mode("light")
+
+
+def on_load(e: me.LoadEvent):
+  me.set_theme_mode("system")
+
+
+@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="Mesop Showcase",
+  on_load=on_load,
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://huggingface.co"],
+  ),
+)
+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,
+      )
+    ):
+      with me.box(
+        style=me.Style(
+          height=240,
+          width="100%",
+          padding=me.Padding.all(16),
+          display="flex",
+          align_items="center",
+        ),
+      ):
+        me.text(
+          "Mesop Showcase",
+          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,
+          ),
+        )
+
+        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"
+          )
+      with me.box(
+        style=me.Style(
+          background=me.theme_var("background"),
+          flex_grow=1,
+          padding=me.Padding(
+            left=32,
+            right=32,
+            bottom=64,
+          ),
+          border_radius=16,
+          overflow_y="auto",
+        )
+      ):
+        for section in SECTIONS:
+          me.text(
+            section.name,
+            style=me.Style(
+              font_size=18,
+              font_weight=500,
+              padding=me.Padding(top=32, bottom=16),
+            ),
+            key="section-" + section.name,
+          )
+          with me.box(
+            style=me.Style(
+              display="grid",
+              grid_template_columns=f"repeat(auto-fit, minmax({CARD_WIDTH}, 1fr))",
+              gap=24,
+              margin=me.Margin(
+                bottom=24,
+              ),
+            )
+          ):
+            for resource in section.resources:
+              card(resource)
+        with me.box(
+          on_click=lambda e: me.navigate(
+            "https://github.com/mesop-dev/mesop/issues/new/choose"
+          ),
+          style=me.Style(
+            cursor="pointer",
+            max_width=300,
+            background=me.theme_var("surface-container-lowest"),
+            box_shadow="0 2px 4px rgba(0, 0, 0, 0.1)",
+            # margin=me.Margin.symmetric(horizontal="auto"),
+            display="flex",
+            justify_content="center",
+            align_items="center",
+            border_radius=16,
+            height=120,
+          ),
+        ):
+          me.icon(
+            "add_circle",
+            style=me.Style(
+              color=me.theme_var("primary"),
+              font_size=24,
+              margin=me.Margin(right=4, top=2),
+            ),
+          )
+          me.link(
+            text="Submit your showcase",
+            url="https://github.com/mesop-dev/mesop/issues/new/choose",
+            style=me.Style(
+              font_size=24,
+              color=me.theme_var("on-background"),
+              text_decoration="none",
+            ),
+          )
+
+
+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(
+        display="flex", flex_direction="column", margin=me.Margin(top=48)
+      )
+    ):
+      with me.content_button(
+        type="icon",
+        on_click=lambda e: me.navigate("https://mesop-dev.github.io/mesop/"),
+      ):
+        with me.box(
+          style=me.Style(display="flex", align_items="center", gap=12)
+        ):
+          me.icon("home")
+          me.text(
+            "Home",
+            style=me.Style(
+              font_size=16,
+              margin=me.Margin(bottom=4),
+            ),
+          )
+      with me.content_button(
+        type="icon",
+        on_click=lambda e: me.navigate(
+          "https://mesop-dev.github.io/mesop/demo/"
+        ),
+      ):
+        with me.box(
+          style=me.Style(
+            display="flex",
+            align_items="center",
+            gap=8,
+          )
+        ):
+          me.icon("gallery_thumbnail")
+          me.text(
+            "Demos",
+            style=me.Style(
+              font_size=16,
+              margin=me.Margin(bottom=6, left=4),
+            ),
+          )
+    with me.box(
+      style=me.Style(
+        padding=me.Padding(top=24),
+        display="flex",
+        flex_direction="column",
+        gap=8,
+      ),
+    ):
+      me.text(
+        "Categories",
+        style=me.Style(
+          font_weight=500,
+          letter_spacing="0.4px",
+          padding=me.Padding(left=12),
+        ),
+      )
+      for section in SECTIONS:
+        with me.box(
+          style=me.Style(
+            display="flex",
+            align_items="center",
+            cursor="pointer",
+          ),
+          on_click=scroll_to_section,
+          key=section.name,
+        ):
+          with me.content_button(type="icon"):
+            me.icon(section.icon)
+          me.text(section.name)
+      with me.box(
+        style=me.Style(
+          display="flex",
+          align_items="center",
+          cursor="pointer",
+          padding=me.Padding(top=16),
+        ),
+        on_click=lambda e: me.navigate(
+          "https://github.com/mesop-dev/mesop/issues/new/choose"
+        ),
+      ):
+        with me.content_button(type="icon"):
+          me.icon("add_circle")
+        me.text("Submit your showcase")
+
+
+def card(resource: Resource):
+  with me.box(
+    style=me.Style(
+      display="flex",
+      flex_direction="column",
+      gap=12,
+      box_shadow="0 2px 4px rgba(0, 0, 0, 0.1)",
+      border_radius=16,
+      min_width=CARD_WIDTH,
+      max_width=480,
+      background=me.theme_var("surface-container-lowest"),
+    )
+  ):
+    me.box(
+      style=me.Style(
+        background=f"url('{resource.img_url}') center/cover no-repeat",
+        cursor="pointer",
+        height=200,
+        width="100%",
+        border_radius=16,
+        margin=me.Margin(bottom=8),
+      ),
+      key=resource.app_url or resource.github_url,
+      on_click=lambda e: me.navigate(e.key),
+    )
+    with me.box(
+      style=me.Style(
+        padding=me.Padding(left=16),
+        display="flex",
+        flex_direction="column",
+        gap=8,
+      )
+    ):
+      me.text(resource.title, style=me.Style(font_weight="bold"))
+      with me.box(
+        style=me.Style(
+          display="flex",
+          flex_direction="row",
+          align_items="center",
+          gap=8,
+          cursor="pointer",
+        ),
+        key="https://github.com/" + resource.github_username,
+        on_click=lambda e: me.navigate(e.key),
+      ):
+        me.image(
+          src="https://avatars.githubusercontent.com/"
+          + resource.github_username,
+          style=me.Style(height=32, width=32, border_radius=16),
+        )
+        me.text(
+          resource.github_username,
+          style=me.Style(
+            letter_spacing="0.2px",
+          ),
+        )
+      me.text(resource.description, style=me.Style(height=50))
+    with me.box(
+      style=me.Style(
+        display="flex",
+        justify_content="space-between",
+        padding=me.Padding(left=8, right=8, bottom=8),
+      )
+    ):
+      if resource.github_url:
+        me.button(
+          "Open repo",
+          on_click=lambda e: me.navigate(e.key),
+          key=resource.github_url,
+        )
+      if resource.app_url:
+        me.button(
+          "Open app",
+          on_click=lambda e: me.navigate(e.key),
+          key=resource.app_url,
+        )

requirements.txt

@@ -0,0 +1,3 @@
+mesop>=0.11.1
+gunicorn>=22.0.0
+zipp>=3.19.1 # not directly required, pinned by Snyk to avoid a vulnerability