[{"data":1,"prerenderedAt":1213},["ShallowReactive",2],{"content-\u002Fcontents\u002Fjupyter_interact":3,"surroundPost-\u002Fcontents\u002Fjupyter_interact":1204},{"id":4,"title":5,"body":6,"createdAt":1192,"description":1193,"draft":1194,"extension":1195,"meta":1196,"navigation":129,"path":1197,"seo":1198,"stem":1199,"tags":1200,"thumbnail":1202,"updatedAt":1192,"__hash__":1203},"contents\u002Fcontents\u002Fjupyter_interact.md","JupyterでインタラクティブなGUI操作",{"type":7,"value":8,"toc":1185},"minimark",[9,13,16,19,35,39,42,45,48,51,54,57,67,70,73,76,148,151,154,157,323,326,329,372,375,380,383,532,535,538,541,544,547,550,687,689,692,695,698,701,704,706,709,712,715,718,742,752,758,761,764,767,820,823,933,940,943,946,950,953,956,959,962,1016,1019,1023,1026,1028,1031,1034,1078,1081,1084,1087,1149,1152,1155,1158,1165,1168,1171,1174,1181],[10,11,12],"p",{},"Jupyter notebook は便利で python を使うなら欠かせないですよね。",[10,14,15],{},"ただ、いろいろできるのは知ってるけどどうやってやるのか調べるのは意外と大変です。",[10,17,18],{},"そこで今回は DCGAN を利用して Jupyter で以下のことを試します。",[20,21,22,26,29,32],"ul",{},[23,24,25],"li",{},"スライドバーを使った画像の動的変化",[23,27,28],{},"アニメーションの生成",[23,30,31],{},"html の実行",[23,33,34],{},"ファイルのインタラクティブ選択と表示",[36,37,38],"h2",{"id":38},"スライドバーで画像をインタラクティブに操作する方法",[10,40,41],{},"画像を扱ってると、ちょっとパラメータを変えて表示したいことがあると思います。",[10,43,44],{},"もちろん値を書き換えたり、連続的に値を変化させたり、あらかじめ値をリストに入れたりして表示するなどいろいろ方法はあります。",[10,46,47],{},"Jupyter では、簡単な GUI をすぐに作れるので、直感的に操作ができます。",[10,49,50],{},"今回は DCGAN で試していきます。",[10,52,53],{},"なぜ GAN かというと、潜在変数の連続的な変化をみるのに Jupyter のインタラクティブ操作が便利だからです！",[10,55,56],{},"model は Facebook の GAN Zoo のものを使用しました。",[10,58,59,60],{},"参考：",[61,62,66],"a",{"href":63,"rel":64},"https:\u002F\u002Fpytorch.org\u002Fhub\u002Ffacebookresearch_pytorch-gan-zoo_dcgan\u002F",[65],"nofollow","DCGAN ON FASHIONGEN",[10,68,69],{},"さっそく始めていきます。",[10,71,72],{},"インタラクティブ操作に入る前にいろいろ準備をします。",[10,74,75],{},"まずはモデルの準備です。",[77,78,83],"pre",{"className":79,"code":80,"language":81,"meta":82,"style":82},"language-py shiki shiki-themes github-dark","import torch\nfrom ipywidgets import interact\nimport matplotlib.pyplot as plt\nimport pickle\nimport numpy as np\n%matplotlib inline\n\nuse_gpu = True if torch.cuda.is_available() else False\n\nmodel = torch.hub.load('facebookresearch\u002Fpytorch_GAN_zoo:hub', 'DCGAN', pretrained=True, useGPU=use_gpu)\n","py","",[84,85,86,94,100,106,112,118,124,131,137,142],"code",{"__ignoreMap":82},[87,88,91],"span",{"class":89,"line":90},"line",1,[87,92,93],{},"import torch\n",[87,95,97],{"class":89,"line":96},2,[87,98,99],{},"from ipywidgets import interact\n",[87,101,103],{"class":89,"line":102},3,[87,104,105],{},"import matplotlib.pyplot as plt\n",[87,107,109],{"class":89,"line":108},4,[87,110,111],{},"import pickle\n",[87,113,115],{"class":89,"line":114},5,[87,116,117],{},"import numpy as np\n",[87,119,121],{"class":89,"line":120},6,[87,122,123],{},"%matplotlib inline\n",[87,125,127],{"class":89,"line":126},7,[87,128,130],{"emptyLinePlaceholder":129},true,"\n",[87,132,134],{"class":89,"line":133},8,[87,135,136],{},"use_gpu = True if torch.cuda.is_available() else False\n",[87,138,140],{"class":89,"line":139},9,[87,141,130],{"emptyLinePlaceholder":129},[87,143,145],{"class":89,"line":144},10,[87,146,147],{},"model = torch.hub.load('facebookresearch\u002Fpytorch_GAN_zoo:hub', 'DCGAN', pretrained=True, useGPU=use_gpu)\n",[10,149,150],{},"これで DCGAN の学習済みモデルが利用できます。",[10,152,153],{},"学習済みのモデルが簡単に利用できて楽ちんです。",[10,155,156],{},"次は、使用する操作を関数化して定義していきます。",[77,158,160],{"className":79,"code":159,"language":81,"meta":82,"style":82},"# 生成元のノイズを固定するために保存\ndef save_noise(num_images):\n    noise, _ = model.buildNoiseData(num_images)\n    with open('test.pickle', mode='wb') as f:\n        pickle.dump(noise, f)\n\n# ノイズの読み込み\ndef load_noise():\n    with open('test.pickle', mode='rb') as f:\n        test_noise = pickle.load(f)\n    return test_noise\n\n# ノイズから画像生成\ndef generate_images(model,noise):\n    return model.test(noise)\n\n# 2つの生成画像を描画\ndef draw_two_images(images):\n    img_list = []\n    for img in images:\n        trans_img = img.permute(1,2,0).cpu().numpy()\n        trans_img = np.clip(np.rint((trans_img + 1.0) \u002F 2.0 * 255.0), 0.0, 255.0).astype(np.uint8)\n        img_list.append(trans_img)\n        if len(img_list) == 2:\n            break\n    plt.subplot(1, 2, 1)\n    plt.imshow(img_list[0])\n    plt.subplot(1, 2, 2)\n    plt.imshow(img_list[1])\n",[84,161,162,167,172,177,182,187,191,196,201,206,211,217,222,228,234,240,245,251,257,263,269,275,281,287,293,299,305,311,317],{"__ignoreMap":82},[87,163,164],{"class":89,"line":90},[87,165,166],{},"# 生成元のノイズを固定するために保存\n",[87,168,169],{"class":89,"line":96},[87,170,171],{},"def save_noise(num_images):\n",[87,173,174],{"class":89,"line":102},[87,175,176],{},"    noise, _ = model.buildNoiseData(num_images)\n",[87,178,179],{"class":89,"line":108},[87,180,181],{},"    with open('test.pickle', mode='wb') as f:\n",[87,183,184],{"class":89,"line":114},[87,185,186],{},"        pickle.dump(noise, f)\n",[87,188,189],{"class":89,"line":120},[87,190,130],{"emptyLinePlaceholder":129},[87,192,193],{"class":89,"line":126},[87,194,195],{},"# ノイズの読み込み\n",[87,197,198],{"class":89,"line":133},[87,199,200],{},"def load_noise():\n",[87,202,203],{"class":89,"line":139},[87,204,205],{},"    with open('test.pickle', mode='rb') as f:\n",[87,207,208],{"class":89,"line":144},[87,209,210],{},"        test_noise = pickle.load(f)\n",[87,212,214],{"class":89,"line":213},11,[87,215,216],{},"    return test_noise\n",[87,218,220],{"class":89,"line":219},12,[87,221,130],{"emptyLinePlaceholder":129},[87,223,225],{"class":89,"line":224},13,[87,226,227],{},"# ノイズから画像生成\n",[87,229,231],{"class":89,"line":230},14,[87,232,233],{},"def generate_images(model,noise):\n",[87,235,237],{"class":89,"line":236},15,[87,238,239],{},"    return model.test(noise)\n",[87,241,243],{"class":89,"line":242},16,[87,244,130],{"emptyLinePlaceholder":129},[87,246,248],{"class":89,"line":247},17,[87,249,250],{},"# 2つの生成画像を描画\n",[87,252,254],{"class":89,"line":253},18,[87,255,256],{},"def draw_two_images(images):\n",[87,258,260],{"class":89,"line":259},19,[87,261,262],{},"    img_list = []\n",[87,264,266],{"class":89,"line":265},20,[87,267,268],{},"    for img in images:\n",[87,270,272],{"class":89,"line":271},21,[87,273,274],{},"        trans_img = img.permute(1,2,0).cpu().numpy()\n",[87,276,278],{"class":89,"line":277},22,[87,279,280],{},"        trans_img = np.clip(np.rint((trans_img + 1.0) \u002F 2.0 * 255.0), 0.0, 255.0).astype(np.uint8)\n",[87,282,284],{"class":89,"line":283},23,[87,285,286],{},"        img_list.append(trans_img)\n",[87,288,290],{"class":89,"line":289},24,[87,291,292],{},"        if len(img_list) == 2:\n",[87,294,296],{"class":89,"line":295},25,[87,297,298],{},"            break\n",[87,300,302],{"class":89,"line":301},26,[87,303,304],{},"    plt.subplot(1, 2, 1)\n",[87,306,308],{"class":89,"line":307},27,[87,309,310],{},"    plt.imshow(img_list[0])\n",[87,312,314],{"class":89,"line":313},28,[87,315,316],{},"    plt.subplot(1, 2, 2)\n",[87,318,320],{"class":89,"line":319},29,[87,321,322],{},"    plt.imshow(img_list[1])\n",[10,324,325],{},"コメントにあるようにたいした操作ではないです。",[10,327,328],{},"それでは試しに画像を出力してみます。",[77,330,332],{"className":79,"code":331,"language":81,"meta":82,"style":82},"save_noise(64)\nnoise = load_noise()\n\n# パラメータを保存しない\nwith torch.no_grad():\n    generated_images = model.test(noise)\n\ndraw_two_images(generated_images)\n",[84,333,334,339,344,348,353,358,363,367],{"__ignoreMap":82},[87,335,336],{"class":89,"line":90},[87,337,338],{},"save_noise(64)\n",[87,340,341],{"class":89,"line":96},[87,342,343],{},"noise = load_noise()\n",[87,345,346],{"class":89,"line":102},[87,347,130],{"emptyLinePlaceholder":129},[87,349,350],{"class":89,"line":108},[87,351,352],{},"# パラメータを保存しない\n",[87,354,355],{"class":89,"line":114},[87,356,357],{},"with torch.no_grad():\n",[87,359,360],{"class":89,"line":120},[87,361,362],{},"    generated_images = model.test(noise)\n",[87,364,365],{"class":89,"line":126},[87,366,130],{"emptyLinePlaceholder":129},[87,368,369],{"class":89,"line":133},[87,370,371],{},"draw_two_images(generated_images)\n",[10,373,374],{},"Jupyter で実行するとこんな感じです。",[376,377],"img",{"alt":378,"img-src":379},"test","\u002Fimg\u002Fjupyter_interact\u002Ftest_gen.png",[10,381,382],{},"次は、２つのノイズベクトルを抽出して、それらを線形補間した画像を出力します。",[77,384,386],{"className":79,"code":385,"language":81,"meta":82,"style":82},"def get2noise(noise):\n    noise_list = []\n    for i in noise:\n        noise_list.append(i)\n        if len(noise_list) == 2:\n            break\n    return noise_list\n\ndef calc_interpolate(noise_list):\n    num = 64\n    step_size = 1\u002Fnum\n    step = 0\n    inp_noise_list = []\n    for i in range(0, num):\n        r = (1 - step) * noise_list[0] + step * noise_list[1]\n        inp_noise_list.append(r)\n        step += step_size\n\n    return inp_noise_list\n\nn2 = get2noise(noise)\n\nnoise_tensor = torch.stack(calc_interpolate(n2))\n\nimages = generate_images(model,noise_tensor)\n\nh_fig = plt.figure(figsize=[12, 6])\nh_ax = plt.axes([0.0, 0.0, 0.5, 1.0])\nh_ax.axis('off')\nhimg = plt.imshow(torchvision.utils.make_grid(images).permute(1, 2, 0).cpu().numpy())\n",[84,387,388,393,398,403,408,413,417,422,426,431,436,441,446,451,456,461,466,471,475,480,484,489,493,498,502,507,511,516,521,526],{"__ignoreMap":82},[87,389,390],{"class":89,"line":90},[87,391,392],{},"def get2noise(noise):\n",[87,394,395],{"class":89,"line":96},[87,396,397],{},"    noise_list = []\n",[87,399,400],{"class":89,"line":102},[87,401,402],{},"    for i in noise:\n",[87,404,405],{"class":89,"line":108},[87,406,407],{},"        noise_list.append(i)\n",[87,409,410],{"class":89,"line":114},[87,411,412],{},"        if len(noise_list) == 2:\n",[87,414,415],{"class":89,"line":120},[87,416,298],{},[87,418,419],{"class":89,"line":126},[87,420,421],{},"    return noise_list\n",[87,423,424],{"class":89,"line":133},[87,425,130],{"emptyLinePlaceholder":129},[87,427,428],{"class":89,"line":139},[87,429,430],{},"def calc_interpolate(noise_list):\n",[87,432,433],{"class":89,"line":144},[87,434,435],{},"    num = 64\n",[87,437,438],{"class":89,"line":213},[87,439,440],{},"    step_size = 1\u002Fnum\n",[87,442,443],{"class":89,"line":219},[87,444,445],{},"    step = 0\n",[87,447,448],{"class":89,"line":224},[87,449,450],{},"    inp_noise_list = []\n",[87,452,453],{"class":89,"line":230},[87,454,455],{},"    for i in range(0, num):\n",[87,457,458],{"class":89,"line":236},[87,459,460],{},"        r = (1 - step) * noise_list[0] + step * noise_list[1]\n",[87,462,463],{"class":89,"line":242},[87,464,465],{},"        inp_noise_list.append(r)\n",[87,467,468],{"class":89,"line":247},[87,469,470],{},"        step += step_size\n",[87,472,473],{"class":89,"line":253},[87,474,130],{"emptyLinePlaceholder":129},[87,476,477],{"class":89,"line":259},[87,478,479],{},"    return inp_noise_list\n",[87,481,482],{"class":89,"line":265},[87,483,130],{"emptyLinePlaceholder":129},[87,485,486],{"class":89,"line":271},[87,487,488],{},"n2 = get2noise(noise)\n",[87,490,491],{"class":89,"line":277},[87,492,130],{"emptyLinePlaceholder":129},[87,494,495],{"class":89,"line":283},[87,496,497],{},"noise_tensor = torch.stack(calc_interpolate(n2))\n",[87,499,500],{"class":89,"line":289},[87,501,130],{"emptyLinePlaceholder":129},[87,503,504],{"class":89,"line":295},[87,505,506],{},"images = generate_images(model,noise_tensor)\n",[87,508,509],{"class":89,"line":301},[87,510,130],{"emptyLinePlaceholder":129},[87,512,513],{"class":89,"line":307},[87,514,515],{},"h_fig = plt.figure(figsize=[12, 6])\n",[87,517,518],{"class":89,"line":313},[87,519,520],{},"h_ax = plt.axes([0.0, 0.0, 0.5, 1.0])\n",[87,522,523],{"class":89,"line":319},[87,524,525],{},"h_ax.axis('off')\n",[87,527,529],{"class":89,"line":528},30,[87,530,531],{},"himg = plt.imshow(torchvision.utils.make_grid(images).permute(1, 2, 0).cpu().numpy())\n",[10,533,534],{},"結果はこんな感じです。",[376,536],{"alt":378,"img-src":537},"\u002Fimg\u002Fjupyter_interact\u002Finterpolate.png",[10,539,540],{},"うまく補間された画像が生成できてますね。",[10,542,543],{},"さて！いよいよ本題のインタラクティブ操作です！",[10,545,546],{},"上記画像のようにあらかじめずらす間隔を定義して順番にだすのではなく、インタラクティブ操作で画像を切り替えたいと思います。",[10,548,549],{},"コードはこれだけです。",[77,551,553],{"className":79,"code":552,"language":81,"meta":82,"style":82},"class two_vecor():\n\n    def __init__(self,model,ns):\n        self.vec1 = ns[0]\n        self.vec2 = ns[1]\n        self.model = model\n\n    def gen_img(self, step):\n        noise_list = []\n        if type(step) is float:\n            r = (1 - step) * self.vec1 + step * self.vec2\n        else:\n            step = step[\"new\"]\n            r = (1 - step) * self.vec1 + step * self.vec2\n        noise_list.append(r)\n        img = self.model.test(torch.stack(noise_list))\n        trans_img = img[0].permute(1,2,0).cpu().numpy()\n        trans_img = np.clip(np.rint((trans_img + 1.0) \u002F 2.0 * 255.0), 0.0, 255.0).astype(np.uint8)\n        plt.clf()\n        plt.imshow(trans_img)\n        plt.show()\n\nn2 = get2noise(noise)\n\ntmp = two_vecor(model, n2)\n\n# スライドバー表示\ninteract(tmp.gen_img, step=(0,1, 0.1))\n",[84,554,555,560,564,569,574,579,584,588,593,598,603,608,613,618,622,627,632,637,641,646,651,656,660,664,668,673,677,682],{"__ignoreMap":82},[87,556,557],{"class":89,"line":90},[87,558,559],{},"class two_vecor():\n",[87,561,562],{"class":89,"line":96},[87,563,130],{"emptyLinePlaceholder":129},[87,565,566],{"class":89,"line":102},[87,567,568],{},"    def __init__(self,model,ns):\n",[87,570,571],{"class":89,"line":108},[87,572,573],{},"        self.vec1 = ns[0]\n",[87,575,576],{"class":89,"line":114},[87,577,578],{},"        self.vec2 = ns[1]\n",[87,580,581],{"class":89,"line":120},[87,582,583],{},"        self.model = model\n",[87,585,586],{"class":89,"line":126},[87,587,130],{"emptyLinePlaceholder":129},[87,589,590],{"class":89,"line":133},[87,591,592],{},"    def gen_img(self, step):\n",[87,594,595],{"class":89,"line":139},[87,596,597],{},"        noise_list = []\n",[87,599,600],{"class":89,"line":144},[87,601,602],{},"        if type(step) is float:\n",[87,604,605],{"class":89,"line":213},[87,606,607],{},"            r = (1 - step) * self.vec1 + step * self.vec2\n",[87,609,610],{"class":89,"line":219},[87,611,612],{},"        else:\n",[87,614,615],{"class":89,"line":224},[87,616,617],{},"            step = step[\"new\"]\n",[87,619,620],{"class":89,"line":230},[87,621,607],{},[87,623,624],{"class":89,"line":236},[87,625,626],{},"        noise_list.append(r)\n",[87,628,629],{"class":89,"line":242},[87,630,631],{},"        img = self.model.test(torch.stack(noise_list))\n",[87,633,634],{"class":89,"line":247},[87,635,636],{},"        trans_img = img[0].permute(1,2,0).cpu().numpy()\n",[87,638,639],{"class":89,"line":253},[87,640,280],{},[87,642,643],{"class":89,"line":259},[87,644,645],{},"        plt.clf()\n",[87,647,648],{"class":89,"line":265},[87,649,650],{},"        plt.imshow(trans_img)\n",[87,652,653],{"class":89,"line":271},[87,654,655],{},"        plt.show()\n",[87,657,658],{"class":89,"line":277},[87,659,130],{"emptyLinePlaceholder":129},[87,661,662],{"class":89,"line":283},[87,663,488],{},[87,665,666],{"class":89,"line":289},[87,667,130],{"emptyLinePlaceholder":129},[87,669,670],{"class":89,"line":295},[87,671,672],{},"tmp = two_vecor(model, n2)\n",[87,674,675],{"class":89,"line":301},[87,676,130],{"emptyLinePlaceholder":129},[87,678,679],{"class":89,"line":307},[87,680,681],{},"# スライドバー表示\n",[87,683,684],{"class":89,"line":313},[87,685,686],{},"interact(tmp.gen_img, step=(0,1, 0.1))\n",[10,688,534],{},[10,690,691],{},"\u003Cvideo\nclass=\"cst_video\"\nsrc=\"\u002Fmedia\u002Fjupyter_interact\u002Ftest.mp4\"\ncontrols\nautoplay\nmuted\nplaysinline\nloop",[693,694],"blockquote",{},[10,696,697],{},"やりたかったことができてます！",[10,699,700],{},"step の値をいじることで、スライド時の値の幅や値の範囲を設定できます。",[10,702,703],{},"jupyter 素晴らしい",[36,705,28],{"id":28},[10,707,708],{},"インタラクティブ操作じゃなくてちょっとした動画で十分なときもあると思います！",[10,710,711],{},"jupyter ではアニメーションの再生も可能です。",[10,713,714],{},"先程とほぼ同じ関数を利用します。",[10,716,717],{},"変更点はとりあえずこれ",[77,719,721],{"className":79,"code":720,"language":81,"meta":82,"style":82},"#%matplotlib inline\n\n# 二回実行する\n%matplotlib notebook\n",[84,722,723,728,732,737],{"__ignoreMap":82},[87,724,725],{"class":89,"line":90},[87,726,727],{},"#%matplotlib inline\n",[87,729,730],{"class":89,"line":96},[87,731,130],{"emptyLinePlaceholder":129},[87,733,734],{"class":89,"line":102},[87,735,736],{},"# 二回実行する\n",[87,738,739],{"class":89,"line":108},[87,740,741],{},"%matplotlib notebook\n",[10,743,744,747,748,751],{},[84,745,746],{},"%matplotlib inline","から",[84,749,750],{},"%matplotlib notebook","に変更してください。",[10,753,754,755,757],{},"で、**",[84,756,750],{},"**を定義したセルを二回実行してください。",[10,759,760],{},"よくわからないのですが、二回実行しないとアニメーションが再生されません。",[10,762,763],{},"次に新しく以下の関数を定義します。",[10,765,766],{},"アニメーションに使う画像を作成する関数です。",[77,768,770],{"className":79,"code":769,"language":81,"meta":82,"style":82},"def gen_img(step):\n    n2 = get2noise(noise)\n    noise_list = []\n    r = (1 - step) * n2[0] + step * n2[1]\n    noise_list.append(r)\n    img = model.test(torch.stack(noise_list))\n    trans_img = img[0].permute(1,2,0).cpu().numpy()\n    trans_img = np.clip(np.rint((trans_img + 1.0) \u002F 2.0 * 255.0), 0.0, 255.0).astype(np.uint8)\n\n    return trans_img\n",[84,771,772,777,782,786,791,796,801,806,811,815],{"__ignoreMap":82},[87,773,774],{"class":89,"line":90},[87,775,776],{},"def gen_img(step):\n",[87,778,779],{"class":89,"line":96},[87,780,781],{},"    n2 = get2noise(noise)\n",[87,783,784],{"class":89,"line":102},[87,785,397],{},[87,787,788],{"class":89,"line":108},[87,789,790],{},"    r = (1 - step) * n2[0] + step * n2[1]\n",[87,792,793],{"class":89,"line":114},[87,794,795],{},"    noise_list.append(r)\n",[87,797,798],{"class":89,"line":120},[87,799,800],{},"    img = model.test(torch.stack(noise_list))\n",[87,802,803],{"class":89,"line":126},[87,804,805],{},"    trans_img = img[0].permute(1,2,0).cpu().numpy()\n",[87,807,808],{"class":89,"line":133},[87,809,810],{},"    trans_img = np.clip(np.rint((trans_img + 1.0) \u002F 2.0 * 255.0), 0.0, 255.0).astype(np.uint8)\n",[87,812,813],{"class":89,"line":139},[87,814,130],{"emptyLinePlaceholder":129},[87,816,817],{"class":89,"line":144},[87,818,819],{},"    return trans_img\n",[10,821,822],{},"そして以下がアニメーション作成部分です。",[77,824,826],{"className":79,"code":825,"language":81,"meta":82,"style":82},"import matplotlib.animation as animation\nfrom PIL import Image\n\n#figオブジェクトを作る\nfig = plt.figure()\nims = []\ntest_list = []\n\nstep = 0.\n\nstep_array = np.arange(0.0,1.0,0.05)\n\nfor i in range(len(step_array)):\n    im = gen_img(step_array[i])\n    img = Image.fromarray(im)\n    test_list.append(im)\n    ims.append([plt.imshow(im)])\n    img.save(\".\u002Fimg\u002Fsample_{}.png\".format(i))\n\nani = animation.ArtistAnimation(fig,ims, interval=400, repeat_delay=1000)\nani.save('anim.gif', writer='imagemagick', fps=4)\nplt.show()\n",[84,827,828,833,838,842,847,852,857,862,866,871,875,880,884,889,894,899,904,909,914,918,923,928],{"__ignoreMap":82},[87,829,830],{"class":89,"line":90},[87,831,832],{},"import matplotlib.animation as animation\n",[87,834,835],{"class":89,"line":96},[87,836,837],{},"from PIL import Image\n",[87,839,840],{"class":89,"line":102},[87,841,130],{"emptyLinePlaceholder":129},[87,843,844],{"class":89,"line":108},[87,845,846],{},"#figオブジェクトを作る\n",[87,848,849],{"class":89,"line":114},[87,850,851],{},"fig = plt.figure()\n",[87,853,854],{"class":89,"line":120},[87,855,856],{},"ims = []\n",[87,858,859],{"class":89,"line":126},[87,860,861],{},"test_list = []\n",[87,863,864],{"class":89,"line":133},[87,865,130],{"emptyLinePlaceholder":129},[87,867,868],{"class":89,"line":139},[87,869,870],{},"step = 0.\n",[87,872,873],{"class":89,"line":144},[87,874,130],{"emptyLinePlaceholder":129},[87,876,877],{"class":89,"line":213},[87,878,879],{},"step_array = np.arange(0.0,1.0,0.05)\n",[87,881,882],{"class":89,"line":219},[87,883,130],{"emptyLinePlaceholder":129},[87,885,886],{"class":89,"line":224},[87,887,888],{},"for i in range(len(step_array)):\n",[87,890,891],{"class":89,"line":230},[87,892,893],{},"    im = gen_img(step_array[i])\n",[87,895,896],{"class":89,"line":236},[87,897,898],{},"    img = Image.fromarray(im)\n",[87,900,901],{"class":89,"line":242},[87,902,903],{},"    test_list.append(im)\n",[87,905,906],{"class":89,"line":247},[87,907,908],{},"    ims.append([plt.imshow(im)])\n",[87,910,911],{"class":89,"line":253},[87,912,913],{},"    img.save(\".\u002Fimg\u002Fsample_{}.png\".format(i))\n",[87,915,916],{"class":89,"line":259},[87,917,130],{"emptyLinePlaceholder":129},[87,919,920],{"class":89,"line":265},[87,921,922],{},"ani = animation.ArtistAnimation(fig,ims, interval=400, repeat_delay=1000)\n",[87,924,925],{"class":89,"line":271},[87,926,927],{},"ani.save('anim.gif', writer='imagemagick', fps=4)\n",[87,929,930],{"class":89,"line":277},[87,931,932],{},"plt.show()\n",[10,934,935,936,939],{},"単純に画像のリストを作成して",[84,937,938],{},"animation.ArtistAnimation","にわたすだけです。",[10,941,942],{},"次で利用するので、上記のコードで生成した画像を保存しておきます。",[10,944,945],{},"以下が作成した gif です。",[376,947],{"alt":948,"img-src":949},"clr","\u002Fimg\u002Fjupyter_interact\u002Fanim.gif",[10,951,952],{},"うまくできてます！",[36,954,31],{"id":955},"html-の実行",[10,957,958],{},"jupyter では HTML も実行できます。",[10,960,961],{},"先程保存した画像を HTML を利用してアニメーションのように表示してみます。",[77,963,965],{"className":79,"code":964,"language":81,"meta":82,"style":82},"import time as time\nfrom IPython.display import display, HTML, clear_output\n\n# animationはHTMLでもできる\ni = 0\nfor i in range(20):\n    time.sleep(1)\n    clear_output(wait=True)\n    html_code = \"\u003Cimg src=.\u002Fimg\u002Fsample_{}.png>\".format(i)\n    display(HTML(html_code))\n",[84,966,967,972,977,981,986,991,996,1001,1006,1011],{"__ignoreMap":82},[87,968,969],{"class":89,"line":90},[87,970,971],{},"import time as time\n",[87,973,974],{"class":89,"line":96},[87,975,976],{},"from IPython.display import display, HTML, clear_output\n",[87,978,979],{"class":89,"line":102},[87,980,130],{"emptyLinePlaceholder":129},[87,982,983],{"class":89,"line":108},[87,984,985],{},"# animationはHTMLでもできる\n",[87,987,988],{"class":89,"line":114},[87,989,990],{},"i = 0\n",[87,992,993],{"class":89,"line":120},[87,994,995],{},"for i in range(20):\n",[87,997,998],{"class":89,"line":126},[87,999,1000],{},"    time.sleep(1)\n",[87,1002,1003],{"class":89,"line":133},[87,1004,1005],{},"    clear_output(wait=True)\n",[87,1007,1008],{"class":89,"line":139},[87,1009,1010],{},"    html_code = \"\u003Cimg src=.\u002Fimg\u002Fsample_{}.png>\".format(i)\n",[87,1012,1013],{"class":89,"line":144},[87,1014,1015],{},"    display(HTML(html_code))\n",[10,1017,1018],{},"結果は以下になります。",[1020,1021],"video",{"src":1022},"\u002Fimg\u002Fjupyter_interact\u002Ftest_html.mp4",[10,1024,1025],{},"ちょっと表示間隔が遅くてわかりづらいですが、できてます！",[36,1027,34],{"id":34},[10,1029,1030],{},"実は調べてみると、jupyter はほかにもいろいろ便利な GUI を簡単に実装できます。",[10,1032,1033],{},"以下はファイルをドロップダウンで選択して、選択したファイルを表示するものです。",[77,1035,1037],{"className":79,"code":1036,"language":81,"meta":82,"style":82},"import ipywidgets as widgets\n\ntmp = widgets.Dropdown(\n    options=img_path_list,\n    description='Number:',\n    disabled=False,\n)\ntmp\n",[84,1038,1039,1044,1048,1053,1058,1063,1068,1073],{"__ignoreMap":82},[87,1040,1041],{"class":89,"line":90},[87,1042,1043],{},"import ipywidgets as widgets\n",[87,1045,1046],{"class":89,"line":96},[87,1047,130],{"emptyLinePlaceholder":129},[87,1049,1050],{"class":89,"line":102},[87,1051,1052],{},"tmp = widgets.Dropdown(\n",[87,1054,1055],{"class":89,"line":108},[87,1056,1057],{},"    options=img_path_list,\n",[87,1059,1060],{"class":89,"line":114},[87,1061,1062],{},"    description='Number:',\n",[87,1064,1065],{"class":89,"line":120},[87,1066,1067],{},"    disabled=False,\n",[87,1069,1070],{"class":89,"line":126},[87,1071,1072],{},")\n",[87,1074,1075],{"class":89,"line":133},[87,1076,1077],{},"tmp\n",[10,1079,1080],{},"実行するとこんな感じです。",[376,1082],{"alt":378,"img-src":1083},"\u002Fimg\u002Fjupyter_interact\u002Ffile_choice.png",[10,1085,1086],{},"次のセルで選択したファイルを表示します。",[77,1088,1090],{"className":79,"code":1089,"language":81,"meta":82,"style":82},"print(tmp.get_interact_value())\n\nfile_name = tmp.get_interact_value()\nfile = open(file_name, \"rb\")\nimage = file.read()\n\nwidgets.Image(\n    value=image,\n    format='png',\n    width=300,\n    height=400,\n)\n",[84,1091,1092,1097,1101,1106,1111,1116,1120,1125,1130,1135,1140,1145],{"__ignoreMap":82},[87,1093,1094],{"class":89,"line":90},[87,1095,1096],{},"print(tmp.get_interact_value())\n",[87,1098,1099],{"class":89,"line":96},[87,1100,130],{"emptyLinePlaceholder":129},[87,1102,1103],{"class":89,"line":102},[87,1104,1105],{},"file_name = tmp.get_interact_value()\n",[87,1107,1108],{"class":89,"line":108},[87,1109,1110],{},"file = open(file_name, \"rb\")\n",[87,1112,1113],{"class":89,"line":114},[87,1114,1115],{},"image = file.read()\n",[87,1117,1118],{"class":89,"line":120},[87,1119,130],{"emptyLinePlaceholder":129},[87,1121,1122],{"class":89,"line":126},[87,1123,1124],{},"widgets.Image(\n",[87,1126,1127],{"class":89,"line":133},[87,1128,1129],{},"    value=image,\n",[87,1131,1132],{"class":89,"line":139},[87,1133,1134],{},"    format='png',\n",[87,1136,1137],{"class":89,"line":144},[87,1138,1139],{},"    width=300,\n",[87,1141,1142],{"class":89,"line":213},[87,1143,1144],{},"    height=400,\n",[87,1146,1147],{"class":89,"line":219},[87,1148,1072],{},[10,1150,1151],{},"実行すると以下のようになります。",[376,1153],{"alt":378,"img-src":1154},"\u002Fimg\u002Fjupyter_interact\u002Fwidgets.png",[10,1156,1157],{},"しっかりドロップダウンで選択したものが表示されてます。",[10,1159,1160,1161,1164],{},"画像表示も",[84,1162,1163],{},"matplotlib","より場合によっては使いやすいかもしれないです。",[36,1166,1167],{"id":1167},"まとめ",[10,1169,1170],{},"jupyter の ipywidgets のめちゃめちゃ便利です。",[10,1172,1173],{},"こちらに他の widgets の使い方についても記載されています。",[10,1175,1176],{},[61,1177,1180],{"href":1178,"rel":1179},"https:\u002F\u002Fipywidgets.readthedocs.io\u002Fen\u002Flatest\u002Fexamples\u002FUsing%20Interact.html",[65],"Using Interact",[1182,1183,1184],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":82,"searchDepth":96,"depth":96,"links":1186},[1187,1188,1189,1190,1191],{"id":38,"depth":96,"text":38},{"id":28,"depth":96,"text":28},{"id":955,"depth":96,"text":31},{"id":34,"depth":96,"text":34},{"id":1167,"depth":96,"text":1167},"2019-10-13","jupyterでスライドバーを使った動的操作などを紹介します。例としてDCGANの潜在変数を操作してみます。他にもアニメーションの生成やファイル選択のGUI操作なども紹介します",false,"md",{},"\u002Fcontents\u002Fjupyter_interact",{"title":5,"description":1193},"contents\u002Fjupyter_interact",[1201],"機械学習","\u002Fimg\u002Ftwitter-card.png","mvTRjtt83_Qfhe5XqW3gFteYkHtGA8dr6oinnvaWnv0",[1205,1209],{"title":1206,"path":1207,"stem":1208,"children":-1},"JavaScriptのいろいろまとめ（歴史・ツールなど）","\u002Fcontents\u002Fjavascript","contents\u002Fjavascript",{"title":1210,"path":1211,"stem":1212,"children":-1},"ついに読んだ「君たちはどう生きるか」","\u002Fcontents\u002Fkimitachiha_doikiruka","contents\u002Fkimitachiha_doikiruka",1782863425805]