Любой способ позволить пользователю нарисовать изображение в Google Colab и получить результирующие данные изображения?

Question

Я вижу, что есть способы загрузки файлов в Google Colab для обработки, но было бы очень хорошо, если бы у пользователя был способ нарисовать простое изображение для проверки визуального распознавания некоторых систем, например чисел MNIST. , предоставляя пользователям сетку 28x28, чтобы нарисовать число и посмотреть, что предсказывает модель.

Таким образом, существует множество примеров того, как делать такие вещи на codepen, и некоторые готовые js-библиотеки для создания простых компонентов редактора пикселей на холсте, но кто-нибудь нашел подход, позволяющий получить что-то вроде это в документе colab позволяет пользователю вводить данные, а затем извлекать данные из нарисованного изображения?

Answer 1

Я делаю суть для этого.

https://gist.github.com/korakot/8409b3feec20f159d8a50b0a811d3bca

Основная часть - это отправка данных из JS

var data = new Promise(resolve=>{
  button.onclick = ()=>{
    resolve(canvas.toDataURL('image/png'))
  }
})

И это получение данных вPython.

def draw(filename='drawing.png', w=400, h=200, line_width=1):
  display(HTML(canvas_html % (w, h, line_width)))
  data = eval_js("data")
  binary = b64decode(data.split(',')[1])
  with open(filename, 'wb') as f:
    f.write(binary)
  return len(binary)