Add smartphone capability.

app.py

@@ -3,7 +3,7 @@ from my_chess.learner.environments import Chess
 
 from chessmodels import DCMinMax
 import streamlit as st
-from streamlit_image_coordinates import streamlit_image_coordinates
+from s_i_c import streamlit_image_coordinates
 
 import torch
 
@@ -63,7 +63,12 @@ def play(bot_select, t_p):
     col1, col2 = st.columns([3,1])
     with col1:
         st.markdown("# {}".format(information(st.session_state.play, t_p)))
-        st.session_state["board"] = streamlit_image_coordinates(st.session_state.play.render_board(), key="brd", click_and_drag=True)
+        st.session_state["board"] = streamlit_image_coordinates(
+            st.session_state.play.render_board(),
+            key="brd",
+            use_column_width=True,
+            click_and_drag=True)
+        print(st.session_state.board)
     with col2:
         st.button("Reset", on_click=reset, args=[t_p])
         st.markdown("#### You are playing as {}!".format("white" if st.session_state.play.get_human_player() == "player_0" else "black"))

s_i_c/__init__.py

@@ -0,0 +1,134 @@
+"""
+Taken from https://github.com/blackary/streamlit-image-coordinates/tree/main/src/streamlit_image_coordinates
+and modified for use with smart phones (disabling scroll within image).
+"""
+
+from __future__ import annotations
+
+import base64
+from io import BytesIO
+from pathlib import Path
+
+import numpy as np
+import streamlit as st
+import streamlit.components.v1 as components
+from PIL import Image
+from streamlit.elements.image import UseColumnWith
+
+# Tell streamlit that there is a component called streamlit_image_coordinates,
+# and that the code to display that component is in the "frontend" folder
+frontend_dir = (Path(__file__).parent / "frontend").absolute()
+_component_func = components.declare_component(
+    "streamlit_image_coordinates", path=str(frontend_dir)
+)
+
+
+# Create the python function that will be called
+def streamlit_image_coordinates(
+    source: str | Path | np.ndarray | object,
+    height: int | None = None,
+    width: int | None = None,
+    key: str | None = None,
+    use_column_width: UseColumnWith | str | None = None,
+    click_and_drag: bool = False,
+):
+    """
+    Take an image source and return the coordinates of the image clicked
+
+    Parameters
+    ----------
+    source : str | Path | object
+        The image source
+    height : int | None
+        The height of the image. If None, the height will be the original height
+    width : int | None
+        The width of the image. If None, the width will be the original width
+    use_column_width : "auto", "always", "never", or bool
+        If "auto", set the image's width to its natural size,
+        but do not exceed the width of the column.
+        If "always" or True, set the image's width to the column width.
+        If "never" or False, set the image's width to its natural size.
+        Note: if set, `use_column_width` takes precedence over the `width` parameter.
+    click_and_drag: bool
+        If true, the event is not sent until the user releases the mouse. The
+        mouse down event is returned as x1, y1 and the mouse up event is returned
+        as x2, y2. Note that x2 and y2 may be outside the image.
+    """
+
+    if isinstance(source, (Path, str)):
+        if not str(source).startswith("http"):
+            content = Path(source).read_bytes()
+            src = "data:image/png;base64," + base64.b64encode(content).decode("utf-8")
+        else:
+            src = str(source)
+    elif hasattr(source, "save"):
+        buffered = BytesIO()
+        source.save(buffered, format="PNG")  # type: ignore
+        src = "data:image/png;base64,"
+        src += base64.b64encode(buffered.getvalue()).decode("utf-8")  # type: ignore
+    elif isinstance(source, np.ndarray):
+        image = Image.fromarray(source)
+        buffered = BytesIO()
+        image.save(buffered, format="PNG")  # type: ignore
+        src = "data:image/png;base64,"
+        src += base64.b64encode(buffered.getvalue()).decode("utf-8")  # type: ignore
+    else:
+        raise ValueError(
+            "Must pass a string, Path, numpy array or object with a save method"
+        )
+
+    return _component_func(
+        src=src,
+        height=height,
+        width=width,
+        use_column_width=use_column_width,
+        key=key,
+        click_and_drag=click_and_drag,
+    )
+
+
+def main():
+    st.set_page_config(
+        page_title="Streamlit Image Coordinates",
+        page_icon="🎯",
+        layout="wide",
+    )
+    col1, col2, col3 = st.columns(3)
+
+    with col1:
+        st.write("## Url example")
+
+        with st.echo():
+            value = streamlit_image_coordinates(
+                "https://placekitten.com/200/300",
+                key="url",
+            )
+
+            st.write(value)
+
+    with col2:
+        st.write("## Local image example")
+
+        with st.echo():
+            value = streamlit_image_coordinates(
+                "kitty.jpeg",
+                key="local",
+            )
+
+            st.write(value)
+
+    with col3:
+        st.write("## Custom size example")
+
+        with st.echo():
+            value = streamlit_image_coordinates(
+                "kitty.jpeg",
+                width=250,
+                key="local2",
+            )
+
+            st.write(value)
+
+
+if __name__ == "__main__":
+    main()

s_i_c/frontend/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>streamlit-image-coordinates</title>
+    <script src="./streamlit-component-lib.js"></script>
+    <script src="./main.js"></script>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <img id="image" draggable="false" />
+  </body>
+</html>

s_i_c/frontend/main.js

@@ -0,0 +1,107 @@
+// The `Streamlit` object exists because our html file includes
+// `streamlit-component-lib.js`.
+// If you get an error about "Streamlit" not being defined, that
+// means you're missing that file.
+
+function sendValue(value) {
+  Streamlit.setComponentValue(value)
+}
+
+/**
+ * The component's render function. This will be called immediately after
+ * the component is initially loaded, and then again every time the
+ * component gets new data from Python.
+ */
+
+function clickListener(event) {
+  const {offsetX, offsetY} = event;
+  const img = document.getElementById("image");
+
+  sendValue({x: offsetX, y: offsetY, width: img.width, height: img.height});
+}
+
+function mouseDownListener(downEvent) {
+  const [x1, y1] = [downEvent.offsetX, downEvent.offsetY];
+
+  window.addEventListener("mouseup", (upEvent) => {
+    const [x2, y2] = [upEvent.clientX, upEvent.clientY];
+    const img = document.getElementById("image");
+    const rect = img.getBoundingClientRect();
+
+    sendValue({x1: x1, y1: y1, x2: x2 - rect.left, y2: y2 - rect.top, width: img.width, height: img.height});
+  }, {once: true})
+}
+
+function touchStartListener(startEvent) {
+  startEvent.preventDefault();
+
+  var touch = startEvent.changedTouches[0];
+
+  const img = document.getElementById("image");
+  const rect = img.getBoundingClientRect();
+
+  const [x1, y1] = [touch.clientX - rect.left, touch.clientY - rect.top];
+
+  window.addEventListener("touchend", (upEvent) => {
+    var touch = upEvent.changedTouches[0];
+    const [x2, y2] = [touch.clientX, touch.clientY];
+    const img = document.getElementById("image");
+    const rect = img.getBoundingClientRect();
+
+    sendValue({x1: x1, y1: y1, x2: x2 - rect.left, y2: y2 - rect.top, width: img.width, height: img.height});
+  }, {once: true})
+}
+
+function onRender(event) {
+  let {src, height, width, use_column_width, click_and_drag} = event.detail.args;
+
+  const img = document.getElementById("image");
+
+  if (img.src !== src) {
+    img.src = src;
+  }
+
+  function resizeImage() {
+    img.classList.remove("auto", "fullWidth");
+    img.removeAttribute("width");
+    img.removeAttribute("height");
+
+    if (use_column_width === "always" || use_column_width === true) {
+      img.classList.add("fullWidth");
+    } else if (use_column_width === "auto") {
+      img.classList.add("auto");
+    } else {
+      if (!width && !height) {
+        width = img.naturalWidth;
+        height = img.naturalHeight;
+      } else if (!height) {
+        height = width * img.naturalHeight / img.naturalWidth;
+      } else if (!width) {
+        width = height * img.naturalWidth / img.naturalHeight;
+      }
+
+      img.width = width;
+      img.height = height;
+    }
+
+    Streamlit.setFrameHeight(img.height);
+  }
+
+  img.onload = resizeImage;
+  window.addEventListener("resize", resizeImage);
+
+  // When image is clicked, send the coordinates to Python through sendValue
+  if (click_and_drag) {
+    img.onclick = null;
+    img.onmousedown = mouseDownListener;
+    img.ontouchstart = touchStartListener;
+  } else {
+    img.onmousedown = null;
+    img.onclick = clickListener;
+  }
+}
+
+// Render the component whenever python send a "render event"
+Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender)
+// Tell Streamlit that the component is ready to receive events
+Streamlit.setComponentReady()

s_i_c/frontend/streamlit-component-lib.js

@@ -0,0 +1,34 @@
+
+// Borrowed minimalistic Streamlit API from Thiago
+// https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064
+function sendMessageToStreamlitClient(type, data) {
+  console.log(type, data)
+  const outData = Object.assign({
+      isStreamlitMessage: true,
+      type: type,
+  }, data);
+  window.parent.postMessage(outData, "*");
+}
+
+const Streamlit = {
+  setComponentReady: function() {
+      sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
+  },
+  setFrameHeight: function(height) {
+      sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
+  },
+  setComponentValue: function(value) {
+      sendMessageToStreamlitClient("streamlit:setComponentValue", {value: value});
+  },
+  RENDER_EVENT: "streamlit:render",
+  events: {
+      addEventListener: function(type, callback) {
+          window.addEventListener("message", function(event) {
+              if (event.data.type === type) {
+                  event.detail = event.data
+                  callback(event);
+              }
+          });
+      }
+  }
+}

s_i_c/frontend/style.css

@@ -0,0 +1,17 @@
+.auto {
+  width: auto;
+  height: auto;
+}
+
+.fullWidth {
+  width: 100%;
+  height: auto;
+}
+
+body {
+  margin: 0;
+}
+
+img {
+  user-select: none;
+}