jupyter笔记本中图像的交互式标注

Question

我有一张照片清单：

pictures = {im1,im2,im3,im4,im5,im6}

哪里

im1：

​

im2：

​

im3：

​

im4：

​

im5：

​

im6：

​

我想把这些图片分配给标签(1,2,3,4等)

例如，这里的图片1至3属于标签1，图片4属于标签2，图片5属于标签3，图片6属于标签4。

-> label = {1,1,1,2,3,4}

因为我需要看到图片，当我给他们贴标签时，我需要一个方法来做。我在考虑创建一组图像：

​

​

然后通过单击属于同一标签的第一张和最后一张图片来定义范围，例如：

​

​

，你觉得呢？这有可能吗?

我想为不同范围的图片指定不同的标签。

​

​

例如:当选择完第一个标签时，可以使用Double-click指示它，然后选择第二个标签范围，然后Double-click，再选择第三个标签范围，然后Double-click，再选择第四个标签范围，等等。

它不需要双击来改变标签的选择，它也可能只是一个按钮或任何其他的想法，你可能有。

最后，我们应该有一个标签的清单。

Answer 1

本质上，你要寻找的大多数交互可以归结为能够实时显示图像并检测到点击情况。在这种情况下，您可以使用jupyter小部件(又名ipywidgets)模块来实现您想要的大部分(如果不是全部)。

看看按钮小部件，它描述了这里，并解释了如何注册到它的单击事件。问题是，我们不能在按钮上显示图像，而且我在ipywidgets文档中也没有找到任何方法来实现这一点。有一个图像小部件，但它不提供on_click事件。因此，构建一个自定义布局，在每个图像下面有一个按钮：

COLS = 4
ROWS = 2
IMAGES = ...
IMG_WIDTH = 200
IMG_HEIGHT = 200

def on_click(index):
    print('Image %d clicked' % index)

import ipywidgets as widgets
import functools

rows = []

for row in range(ROWS):
    cols = []
    for col in range(COLS):
        index = row * COLS + col
        image = widgets.Image(
            value=IMAGES[index], width=IMG_WIDTH, height=IMG_HEIGHT
        )
        button = widgets.Button(description='Image %d' % index)
        # Bind the click event to the on_click function, with our index as argument
        button.on_click(functools.partial(on_click, index))

        # Create a vertical layout box, image above the button
        box = widgets.VBox([image, button])
        cols.append(box)

    # Create a horizontal layout box, grouping all the columns together
    rows.append(widgets.HBox(cols))

# Create a vertical layout box, grouping all the rows together
result = widgets.VBox(rows)

从技术上讲，您也可以编写一个自定义小部件来显示图像并监听单击，但我认为这不值得您花费时间和精力。

祝好运!

Answer 2

qsl包提供了这样做的小部件。对于您的情况，下面的代码将允许您对图像进行批次标记。完全公开地说，qsl是我开始的一个项目，因为我和你一样，想在木星笔记本里贴上图片标签。

import qsl
from IPython.display import display

labeler = qsl.MediaLabeler(
    items=[
      {"target": "https://i.stack.imgur.com/cML6z.jpg"},
      {"target": "https://i.stack.imgur.com/6EVAP.jpg"},
      {"target": "https://i.stack.imgur.com/CAxUw.jpg"},
      {"target": "https://i.stack.imgur.com/8fhan.jpg"},
      {"target": "https://i.stack.imgur.com/eMXn5.jpg"},
      {"target": "https://i.stack.imgur.com/YFBfM.jpg"}
    ],
    # Optional, you can also configure the labeler from
    # the UI.
    config={
      "image": [
        {
          "name": "Type",
          "options": [
            {"name": "Foo"},
            {"name": "Bar"}
          ]
        }
      ]
    },
    # Optional, set to 1 if you want to label
    # one image at a time.
    batch_size=4,
    # Optionally, save labels to JSON. You
    # can also get the labels using `labeler.items`.
    jsonpath="labels.json"
)
display(labeler)

这将生成一个如下所示的UI。

​

​

这是一个谷歌Colab笔记本，它展示了如何在Google中实现这一点。