ipywidgets深入浅出.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "3eba4e9b",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# ipywidgets  深入浅出"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d314ec07",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "ipywidgets 是一个在jupyter notebook 中开发用户交互界面的简单工具。\n",
    "\n",
    "可以用它来做机器学习模型的演示，构建数据分析dashboard，或者做一些小工具。\n",
    "\n",
    "相比streamlit和gradio，ipywidgets具有如下优势:\n",
    "\n",
    "* 灵活高效：ipywidgets的组件可以和notebook的输出很好地结合在一起。\n",
    "\n",
    "* 方便调试：ipywidgets和代码一起直接在jupyter中展示和运行， all in one notebook。\n",
    "\n",
    "* 便于分享：任何可以托管notebook的环境都可以使用和展示它。\n",
    "\n",
    "大多数的ipywidgets应用一般由如下最常用的基础模块构成。\n",
    "\n",
    "* 应用界面：interact(简易场景), interact_manual(简易场景手动触发), interactive_output(定制化输入), display(完全定制化场景)\n",
    "\n",
    "* 输入输出：Output(笔记本输出), Image(图像), Text(文本框), Textarea(文本块),  Dropdown(下拉选项), IntSlider(整数滑条), FloatSlider(浮点数滑条), HTML, Viedio(视频), \n",
    "\n",
    "* 控制组件：Button(按钮), Play(播放器) \n",
    "\n",
    "* 布局组件：Tab(标签页), HBox(行布局), VBox(列布局), Layout(外观)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2f9a3ff2",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "我们将由易到难通过6个范例来介绍ipywidgets的使用方法。\n",
    "\n",
    "* hello world范例\n",
    "\n",
    "* 图片浏览工具\n",
    "\n",
    "* 文本分类 \n",
    "\n",
    "* 图片分类 \n",
    "\n",
    "* 目标检测  \n",
    "\n",
    "* 图片筛选器 \n",
    "\n",
    "参考资料：\n",
    "\n",
    "* 官方文档：https://ipywidgets.readthedocs.io/en/stable/\n",
    "\n",
    "* 官方范例：https://github.com/jupyter-widgets/ipywidgets/tree/511663a56324cea5324f49a65ebe25e2f1b04d87/docs/source/examples\n",
    "\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2dda4254-3a2a-4cfc-9df4-14c544360f02",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## 一，Hello World (难度系数: ⭐️)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4713c9f0-bc70-4f3a-a9f4-d35b83118fbd",
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "def greet(name):\n",
    "    return \"Hello \" + name + \"!!\"\n",
    "\n",
    "w = widgets.interact(greet,name='LiLei');\n",
    "w\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "19ef2aba-7a99-4fbb-ac58-f3dc4b2b9577",
   "metadata": {},
   "source": [
    "## 二，图片浏览工具 (难度系数: ⭐️⭐️)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e516f0a7-a1ac-4d75-bb3a-b0c1062afbb2",
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import widgets,interact\n",
    "from pathlib import Path\n",
    "from PIL import Image\n",
    "from  torchkeras.data import download_baidu_pictures \n",
    "download_baidu_pictures(keyword='猫咪表情包',needed_pics_num=20, save_dir = 'cats')\n",
    "files = [str(x) for x in Path('cats').rglob('*.jpg') if 'checkpoint' not in str(x)]\n",
    "def browser_image(path):\n",
    "    return Image.open(path) \n",
    "    \n",
    "interact(browser_image, path=files)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "46b19350",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## 三，文本分类 (难度系数: ⭐️⭐️)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "8f4574ba-53e8-4931-af85-2a186403d1dd",
   "metadata": {
    "code_folding": [],
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "No model was supplied, defaulted to distilbert/distilbert-base-uncased-finetuned-sst-2-english and revision af0f99b (https://hf-mirror.com/distilbert/distilbert-base-uncased-finetuned-sst-2-english).\n",
      "Using a pipeline without specifying a model name and revision in production is not recommended.\n"
     ]
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "b99ffcd975b24358a2b14d9023755507",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(Text(value='Good morning', continuous_update=False, description='text'), Button(descript…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#解决国内下载huggingface仓库慢的问题\n",
    "import os \n",
    "os.environ['HF_ENDPOINT']='https://hf-mirror.com'  \n",
    "\n",
    "import ipywidgets as widgets\n",
    "from transformers import pipeline\n",
    "\n",
    "pipe = pipeline(\"text-classification\")\n",
    "\n",
    "@widgets.interact_manual(text='Good morning')\n",
    "def clf(text):\n",
    "    result = pipe(text)\n",
    "    label = result[0]['label']\n",
    "    score = result[0]['score']\n",
    "    res = {label:score,'POSITIVE' if label=='NEGATIVE' else 'NEGATIVE': 1-score}\n",
    "    return res \n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e791d31f",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## 四，图片分类 (难度系数: ⭐️⭐️⭐)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "acf0051c-a231-41b3-952c-56720aecc37d",
   "metadata": {
    "code_folding": [
     11
    ],
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "e0177428d46d464a879878451f6b3ccf",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HTML(value=\"<h1 style='color:#e00b20;width:100%'> 图片分类展示系统</h1>\")"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "b0dd2cbca01941139825ac9154c7848e",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Dropdown(description='选择图片', index=1, layout=Layout(height='40px', width='100%'), options=('coffee.jpeg', 'peo…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "163c9695adec419c815943e4824c1e53",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(button_style='primary', description='Predict', layout=Layout(height='40px', width='100%'), style=Button…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "880f8aaf6658462e8ff71751be0bf8e1",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Output(), Output()))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import ipywidgets as widgets\n",
    "from IPython.display import HTML,display \n",
    "\n",
    "\n",
    "import pandas as pd \n",
    "from ultralytics import YOLO\n",
    "from skimage import data\n",
    "from PIL import Image\n",
    "\n",
    "model = YOLO('yolov8n-cls.pt')\n",
    "#prepare example image \n",
    "Image.fromarray(data.coffee()).save('coffee.jpeg') \n",
    "Image.fromarray(data.astronaut()).save('people.jpeg')\n",
    "Image.fromarray(data.cat()).save('cat.jpeg')\n",
    "\n",
    "def predict(img):\n",
    "    result = model.predict(source=img)\n",
    "    df = pd.Series(result[0].names).to_frame()\n",
    "    df.columns = ['names']\n",
    "    df['probs'] = result[0].probs.data.tolist()\n",
    "    df = df.sort_values('probs',ascending=False).head(5)\n",
    "    res = dict(zip(df['names'],df['probs']))\n",
    "    return res\n",
    "\n",
    "title = widgets.HTML(\"<h1 style='color:#e00b20;width:100%'> 图片分类展示系统</h1>\")\n",
    "\n",
    "files = widgets.Dropdown(\n",
    "    options=['coffee.jpeg','people.jpeg','cat.jpeg'],\n",
    "    value='people.jpeg',\n",
    "    layout=widgets.Layout(width='100%', height='40px'),\n",
    "    description='选择图片',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "button = widgets.Button(description='Predict',\n",
    "                        layout=widgets.Layout(width='100%', height='40px'),\n",
    "                        style=dict(font_weight='bold',text_color='red'),\n",
    "                        button_style='primary'\n",
    "                       )\n",
    "button.style.button_color = 'lightgreen'\n",
    "\n",
    "out1 = widgets.Output() #widgets.Textarea(value='',layout=widgets.Layout(width='100%',height='100px'))\n",
    "out2 = widgets.Output()\n",
    "output = widgets.HBox([out1,out2])\n",
    "\n",
    "display(title,files,button,output)\n",
    "\n",
    "def on_button_clicked(btn):\n",
    "    import plotly.express as px \n",
    "    dic = predict(files.value)\n",
    "    fig = px.bar(y = list(reversed(dic.keys())),x = list(reversed(dic.values())))\n",
    "    \n",
    "    out1.clear_output()\n",
    "    out2.clear_output()\n",
    "    with out1:\n",
    "        display(Image.open(files.value))\n",
    "    \n",
    "    with out2:\n",
    "        display(fig)\n",
    "\n",
    "button.on_click(on_button_clicked)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7fe6b3b4",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## 五，目标检测 (难度系数: ⭐️⭐️⭐⭐️)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c82da276",
   "metadata": {
    "code_folding": [],
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "import numpy as np \n",
    "import pandas as pd \n",
    "from skimage import data\n",
    "from PIL import Image\n",
    "from torchkeras import plots \n",
    "from torchkeras.data import get_url_img\n",
    "from pathlib import Path\n",
    "from ultralytics import YOLO\n",
    "import ultralytics\n",
    "from ultralytics.data import utils \n",
    "import cv2\n",
    "import time\n",
    "\n",
    "model = YOLO('yolov8n.pt')\n",
    "\n",
    "#prepare example images\n",
    "Image.fromarray(data.coffee()).save('coffee.jpeg') \n",
    "Image.fromarray(data.astronaut()).save('people.jpeg')\n",
    "Image.fromarray(data.cat()).save('cat.jpeg')\n",
    "\n",
    "#load class_names\n",
    "yaml_path = str(Path(ultralytics.__file__).parent/'cfg/datasets/coco128.yaml') \n",
    "class_names = utils.yaml_load(yaml_path)['names']\n",
    "\n",
    "\n",
    "\n",
    "def bgr2jpeg(value, quality=75):\n",
    "    return bytes(cv2.imencode('.jpg', value)[1])\n",
    "\n",
    "def pil2jpeg(pil):\n",
    "    import io\n",
    "    buf = io.BytesIO()\n",
    "    pil.save(buf,format='jpeg')\n",
    "    return buf.getvalue()\n",
    "\n",
    "\n",
    "def detect(img):\n",
    "    if isinstance(img,str):\n",
    "        img = get_url_img(img) if img.startswith('http') else Image.open(img).convert('RGB')\n",
    "    result = model.predict(source=img)\n",
    "    if result[0].boxes is not None and len(result[0].boxes.data.tolist())>0:\n",
    "        vis = plots.plot_detection(img,boxes=result[0].boxes.data.tolist(),\n",
    "                     class_names=class_names, min_score=0.2)\n",
    "    else:\n",
    "        vis = img\n",
    "    return vis\n",
    "\n",
    "def get_capture(height,width):\n",
    "    cap = cv2.VideoCapture(0)  \n",
    "    cap.set(cv2.CAP_PROP_FRAME_WIDTH,width)\n",
    "    cap.set(cv2.CAP_PROP_FRAME_HEIGHT,height)\n",
    "    cap.set(3,width)       \n",
    "    cap.set(4,height)\n",
    "    cap.set(5, 30)  #设置帧率\n",
    "    cap.set(cv2.CAP_PROP_FOURCC, cv2.VideoWriter.fourcc('M', 'J', 'P', 'G'))\n",
    "    cap.set(cv2.CAP_PROP_BRIGHTNESS, 40) #设置亮度 -64 - 64  0.0\n",
    "    cap.set(cv2.CAP_PROP_CONTRAST, 50)   #设置对比度 -64 - 64  2.0\n",
    "    cap.set(cv2.CAP_PROP_EXPOSURE, 156)  #设置曝光值 1.0 - 5000  156.0\n",
    "    return cap\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8e144586",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "05f8f023-cfc0-478b-acda-a0d963ad32c4",
   "metadata": {},
   "outputs": [],
   "source": [
    "tabs = widgets.Tab(layout = widgets.Layout(width='100%', height='1000px'))\n",
    "\n",
    "# TAB1: webcam\n",
    "width,height=800,500\n",
    "\n",
    "img1 = widgets.Image(format='jpeg', width=width, height=height,\n",
    "                    layout=widgets.Layout(width='100%')) \n",
    "cap = get_capture(height,width)\n",
    "ret, frame = cap.read()     \n",
    "img1.value = bgr2jpeg(frame)\n",
    "\n",
    "play = widgets.Play(\n",
    "    value=0,\n",
    "    min=0,\n",
    "    max=100,\n",
    "    step=1,\n",
    "    interval=100,\n",
    "    description=\"Press play\",\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "slider = widgets.IntSlider()\n",
    "widgets.jslink((play, 'value'), (slider, 'value'))\n",
    "\n",
    "prompt = widgets.HTML('<p3>点击开始检测</p3>')\n",
    "\n",
    "def on_value_change(change):\n",
    "    ret, frame = cap.read()\n",
    "    if change['new']<1:\n",
    "         img1.value = bgr2jpeg(frame)\n",
    "    else:\n",
    "        out_img = detect(np.ascontiguousarray(frame[:,:,::-1]))\n",
    "        img1.value = pil2jpeg(out_img)\n",
    "play.observe(on_value_change, names='value')\n",
    "\n",
    "tab1 = widgets.VBox([widgets.HBox([prompt,play,slider]),img1])\n",
    "tabs.children = list(tabs.children)+[tab1]\n",
    "tabs.set_title(0,'捕捉摄像头喔')\n",
    "\n",
    "\n",
    "# TAB2: samples\n",
    "\n",
    "\n",
    "samples = widgets.Dropdown(\n",
    "    options=['coffee.jpeg','people.jpeg','cat.jpeg'],\n",
    "    value='coffee.jpeg',\n",
    "    layout=widgets.Layout(width='100%', height='40px'),\n",
    "    description='',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "img2 = widgets.Image(format='jpeg', layout=widgets.Layout(width='100%'), value  = open('coffee.jpeg','rb').read()) \n",
    "\n",
    "def predict_sample(change):\n",
    "    out_img = detect(change['new'])\n",
    "    img2.value = pil2jpeg(out_img)\n",
    "        \n",
    "samples.observe(predict_sample, names='value')\n",
    "tab2 = widgets.VBox([samples,img2])\n",
    "tabs.children = list(tabs.children)+[tab2]\n",
    "tabs.set_title(1,'选择测试图片')\n",
    "\n",
    "# TAB3: url\n",
    "\n",
    "default_url = 'https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF'\n",
    "url = widgets.Text(value = default_url,layout=widgets.Layout(width='100%', height='30px'))\n",
    "button = widgets.Button(description='执行预测',\n",
    "                        layout=widgets.Layout(width='100%', height='40px'),\n",
    "                        button_style='primary'\n",
    "                       )\n",
    "img3 = widgets.Image(format='jpeg', \n",
    "                     layout=widgets.Layout(width='100%')) \n",
    "button.style.button_color = 'brown'\n",
    "def predict_url(btn):\n",
    "    img3.value = pil2jpeg(detect(url.value))\n",
    "        \n",
    "button.on_click(predict_url)\n",
    "\n",
    "tab3 = widgets.VBox([url,button,img3])\n",
    "tabs.children = list(tabs.children)+[tab3]\n",
    "tabs.set_title(2,'输入图片链接')\n",
    "\n",
    "display(widgets.HTML('<h1>YOLOv8目标检测演示</h1>'),tabs)\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "764bacb8-83b1-415a-90bc-6b0b53c2fa56",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "d52b0d72",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## 六，图片筛选器 (难度系数: ⭐️⭐️⭐⭐️⭐️)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "940da76f-6cb9-4a44-94a8-6bb6f91b4668",
   "metadata": {
    "slideshow": {
     "slide_type": "-"
    }
   },
   "source": [
    "\n",
    "\n",
    "本范例我们将应用 ipywidgets来构建一个图片筛选器，从百度爬取的一堆猫咪表情包中刷选一些我们喜欢的出来。\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d02264a7-b87d-45dd-bcfd-70b7e2fafcde",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "#!pip install -U torchkeras"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c0a9a0ac-3456-417c-94b2-cc2889e305d5",
   "metadata": {
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "import torchkeras \n",
    "from importlib import reload \n",
    "reload(torchkeras)\n",
    "from torchkeras.data import download_baidu_pictures \n",
    "download_baidu_pictures('猫咪表情包',100)\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "19dc06a8-d8b0-4493-9ec6-44e53a90c38b",
   "metadata": {
    "code_folding": [
     11,
     12,
     24,
     25,
     36,
     57
    ],
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f5109f34685b4c0886931b66698c30f7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(IntText(value=20, description='总数量', layout=Layout(height='auto', width='33%')), IntText(value=…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "cd31b564ad8d4a4395b8a716809269e4",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Button(button_style='info', description='上一张', layout=Layout(height='auto', width='50%'), style…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "04d6ca3f3a0d4a728ddfeedcbb545cdf",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(button_style='primary', description='选择图片', layout=Layout(height='20pt', width='100%'), style=ButtonSty…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "0fb28fc50a2e4d1f9c7c1657fa9cde23",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Text(value='cats/20240624_052116_714619.jpg', description='当前图片', layout=Layout(width='100%'))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "5a323e6c847448fbaacf1554931960a5",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Textarea(value='Selected images number = 0\\n', layout=Layout(height='100pt', width='100%'))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "6fea94dc7d594231b6c751958e2ddd89",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Image(value=b'\\xff\\xd8\\xff\\xe0\\x00\\x10JFIF\\x00\\x01\\x01\\x00\\x00\\x01\\x00\\x01\\x00\\x00\\xff\\xdb\\x00C\\x00\\x08\\x06\\x0…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import ipywidgets as widgets \n",
    "from PIL import Image\n",
    "import time,os\n",
    "from pathlib import Path \n",
    "base_dir = 'cats'\n",
    "selected_dir = 'selected'\n",
    "files = [str(x) for x in \n",
    "         Path(base_dir).rglob('*.jp*g') \n",
    "         if 'checkpoint' not in str(x)]\n",
    "\n",
    "def pil2jpeg(pil):\n",
    "    import io\n",
    "    buf = io.BytesIO()\n",
    "    pil.save(buf,format='jpeg')\n",
    "    return buf.getvalue()\n",
    "\n",
    "def get_default_msg():\n",
    "    if not os.path.exists(selected_dir):\n",
    "        os.mkdir(selected_dir)\n",
    "    selected_files = set(os.listdir(selected_dir))\n",
    "    msg = 'Selected images number = {}\\n'.format(len(selected_files))\n",
    "    return msg \n",
    "\n",
    "\n",
    "done = widgets.IntText(description='已完成',value=0, layout=widgets.Layout(width='33%', height='auto'))\n",
    "todo = widgets.IntText(description='待完成',value=len(files),layout=widgets.Layout(width='33%', height='auto'))\n",
    "total = widgets.IntText(description='总数量',value = len(files), layout=widgets.Layout(width='33%', height='auto'))\n",
    "int_group = widgets.HBox([total,done,todo])\n",
    "\n",
    "path = widgets.Text(description='当前图片', value = files[0],layout=widgets.Layout(width='100%'))\n",
    "        \n",
    "bn_before = widgets.Button(description='上一张',layout=widgets.Layout(width='50%', height='auto'),button_style='info')\n",
    "bn_next = widgets.Button(description='下一张',layout=widgets.Layout(width='50%', height='auto'),button_style='info')\n",
    "bn_group = widgets.HBox([bn_before,bn_next],\n",
    "                        style=widgets.Style(align='center'))\n",
    "\n",
    "bn_feedback = widgets.Button(description='选择图片',\n",
    "                             layout=widgets.Layout(width='100%', height='20pt'),button_style='primary')\n",
    "bn_feedback.style.button_color = 'lightgreen'\n",
    "\n",
    "info = widgets.Textarea(layout=widgets.Layout(width='100%', height='100pt'),value = get_default_msg())\n",
    "\n",
    "img = widgets.Image(format='jpeg',value = pil2jpeg(Image.open(files[0])),\n",
    "            layout=widgets.Layout(width='100%', height='auto'))\n",
    "\n",
    "\n",
    "display(int_group,bn_group,bn_feedback,path,info,img)\n",
    "\n",
    "\n",
    "def fn_before(btn):\n",
    "    if done.value>=1:\n",
    "        done.value = done.value-1\n",
    "        todo.value= todo.value+1\n",
    "    path.value = files[int(done.value-1)]\n",
    "    img.value = pil2jpeg(Image.open(path.value))\n",
    "\n",
    "def fn_next(btn):\n",
    "    if todo.value>=1:\n",
    "        done.value = done.value+1\n",
    "        todo.value = todo.value-1   \n",
    "    path.value = files[int(done.value-1)]\n",
    "    img.value = pil2jpeg(Image.open(path.value))\n",
    "    \n",
    "\n",
    "def save_selected(btn):\n",
    "    img_name = os.path.basename(path.value)\n",
    "    img_path = path.value\n",
    "    if img_path.startswith('http'):\n",
    "        imgx = get_image(img_path).convert('RGB')\n",
    "        img_path = 'tmp.jpg'\n",
    "        imgx.save(img_path)\n",
    "    selected_files = set(os.listdir(selected_dir))\n",
    "    \n",
    "    msg = ''\n",
    "    if img_name not in selected_files:\n",
    "        save_path = os.path.join(selected_dir,img_name)\n",
    "        imgx = Image.open(img_path)\n",
    "        imgx.save(save_path)\n",
    "        msg = 'selected images number = {}\\n'.format(len(selected_files)+1)+\\\n",
    "              'Save image sucessed!\\n'+\\\n",
    "              'Saved image name : {}'.format(img_name)\n",
    "    else:\n",
    "        msg = 'selected images number = {}\\n'.format(len(selected_files))+\\\n",
    "        \"Don't save duplicate images!\"\n",
    "    info.value = msg\n",
    "\n",
    "bn_before.on_click(fn_before)\n",
    "bn_next.on_click(fn_next)\n",
    "bn_feedback.on_click(save_selected)\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ef70651c-a4a3-404d-b823-eca7e5544d56",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "31dbaf1c-7960-4a2a-b116-75110e33dbf8",
   "metadata": {},
   "source": [
    "## 七，隐藏代码"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4397b7ff-b833-40c2-acc8-aee5828dceeb",
   "metadata": {},
   "source": [
    "如果要把ipywidgets的交互页面给其他人使用，最好使用下面的方式来隐藏代码。\n",
    "\n",
    "注，这个方法在jupyter lab中可能不太好使。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "167cee0a-f6ca-448a-96fd-a724b39b8364",
   "metadata": {},
   "outputs": [],
   "source": [
    "def hide_jupyter_code():\n",
    "    import ipywidgets as widgets\n",
    "    from IPython.display import display, HTML\n",
    "    javascript_functions = {False: \"hide()\", True: \"show()\"}\n",
    "    button_descriptions  = {False: \"Show code\", True: \"Hide code\"}\n",
    "    def toggle_code(state):\n",
    "        output_string = \"<script>$(\\\"div.input\\\").{}</script>\"\n",
    "        output_args   = (javascript_functions[state],)\n",
    "        output        = output_string.format(*output_args)\n",
    "        display(HTML(output))\n",
    "    def button_action(value):\n",
    "        state = value.new\n",
    "        toggle_code(state)\n",
    "        value.owner.description = button_descriptions[state]\n",
    "    state = False\n",
    "    toggle_code(state)\n",
    "    button = widgets.ToggleButton(state, description = button_descriptions[state])\n",
    "    button.observe(button_action, \"value\")\n",
    "    display(button)\n",
    "\n",
    "hide_jupyter_code()\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.6"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": false,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}