【第2回】ResponderとKerasを使って機械学習Webアプリケーションを作ってみた【ネットワーク作成編】

1class CreateController:
2    async def on_get(self, req, resp, dataset):
3
4        if dataset not in ['mnist', 'iris', 'wine']:
5            api.redirect(resp, '/404')
6            return
7
8        title = 'ネットワークを作成【' + dataset + '】'
9        # 入力サイズ
10        input_length = 784 if dataset == 'mnist' else 4 if dataset == 'iris' else 13
11        # 出力サイズ(クラス数)
12        output_length = 10 if dataset == 'mnist' else 3
13
14        resp.html = api.template('create.html',
15                                 dataset=dataset,
16                                 input_length=input_length,
17                                 output_length=output_length,
18                                 title=title)

1api.add_route('/404', NotFoundController)

1class NotFoundController:
2    async def on_get(self, req, resp):
3        title = '404 Not Found'
4        resp.html = api.template('404.html', title=title)

1{% extends "layout.html" %}
2
3{% block content %}
4<br>
5<h1>404 Error: Not Found</h1>
6<hr>
7<p>申し訳ありません。お探しのページは見つかりませんでした。</p>
8<br>
9<a href="/" class="btn btn-primary">トップページへ戻る</a>
10
11{% endblock %}

1# jinja_env.py に追記
2def fc_filter(neurons):  
3    """
4    全結合中間層の追加フィルタ
5    :param neurons: 
6    :return: 
7    """
8    neurons = str(neurons)
9    return '<button class="btn btn-secondary btn-sm" onclick="add_fc(' + neurons + ')">' + neurons + ' neurons</button>'

1# urls.py に追記
2api.jinja_env.filters.update(
3    static=jinja_env.static_filter,
4    image=jinja_env.image_filter,
5    css=jinja_env.css_filter,
6    script=jinja_env.script_filter,
7    badge=jinja_env.badge_filter,
8    badge_active=jinja_env.badge_active_filter,
9    fc=jinja_env.fc_filter,  # フィルタを追加
10)

1{% extends "layout.html" %}
2
3{% block content %}
4<br>
5<h1>ネットワークを作成しましょう</h1>
6<hr>
7<a href="/" class="btn btn-primary">もどる</a>
8<br>
9<br>
10{% autoescape false %}
11{{ 'データセットを選択' | badge }}
12{{ 'ネットワークを作成' | badge_active }}
13{{ '学習' | badge }}
14{{ '結果' | badge }}
15
16
17<br><br>
18
19<p>
20    選択したデータセット :<br>
21    {{ dataset }}
22</p>
23<p>
24    全結合層を追加する :<br>
25    {{ 10 | fc }}
26    {{ 50 | fc }}
27    {{ 100 | fc }}
28    {{ 300 | fc }}
29    {{ 500 | fc }}
30    {{ 1000 | fc }}
31    {{ 2000 | fc }}
32    {{ 3000 | fc }}
33    <a href="" class="btn btn-danger btn-sm">設定取り消し</a>
34</p>
35<br>
36<br>
37<hr>
38<form action="/learn/{{ dataset }}" method="post">
39    <div class="row">
40        
41        <!--   ここからネットワーク作成情報     -->
42        <div class="col-md-8">
43            <div class="text-center">
44                <h4>現在のネットワーク構成</h4>
45                <div class="card" style="display: inline-block">
46                    <div class="card-body">
47                        Input : {{ input_length }}
48                    </div>
49                </div>
50                <input type="hidden" name="input" value="{{ input_length }}">
51
52                <br>|<br>
53
54                <div id="add_layer"><!-- ここに中間層が追加される --></div>
55
56                <div class="card" style="display: inline-block">
57                    <div class="card-body">
58                        Output (Class size) : {{ output_length }}
59                    </div>
60                </div>
61                <input type="hidden" name="output" value="{{ output_length }}">
62
63            </div>
64        </div>
65        
66        <!--    ここからパラメータ入力フォーム    -->
67        <div class="col-md-4">
68            <div class="text-center">
69                <h4>パラメータ設定</h4>
70                <p>学習回数 : epoch = <input type="text" name="epoch" size="4" maxlength="4" value="10"></p>
71                <p>初期学習率 : η = <input type="text" name="eta" size="6" maxlength="6" value="0.01"></p>
72                <p>
73                    学習率減衰 : dec = <input type="text" name="decay" size="8" maxlength="8" value="1e-6">
74                    <br>
75                    (各学習ごとに学習率を減衰させる定数)
76                </p>
77                <p>
78                    Momentum : α = <input type="text" name="momentum" size="6" maxlength="6" value="0.9">
79                    <br>
80                    (Momentum SGDの慣性項)</p>
81            </div>
82        </div>
83        
84    </div>
85    <br><br><br>
86    <div class="text-center">
87        <button href="#" type="submit" class="btn btn-primary">このネットワークで学習を行う</button>
88    </div>
89</form>
90
91{% endautoescape %}
92
93{% endblock %}

1<script>
2    function add_fc(neurons)
3    {
4        var div_element = document.createElement("div");
5        div_element.innerHTML = '<div class="card bg-secondary text-white" style="display: inline-block">' + 
6                                    '<div class="card-body">' +
7                                        'Full Connection : ' + neurons +
8                                    '</div>' +
9                                '</div>' +
10                                '<input type="hidden" name="fc[]" value="' + neurons + '"><br>|<br>';
11        var parent_object = document.getElementById("add_layer");
12        parent_object.appendChild(div_element);
13    }
14</script>

1# urls.py 追記
2api.add_route('/learn/{dataset}', LearnController)

1class LearnController:
2    async def on_get(self, req, resp, dataset):
3        api.redirect(resp, '/404')
4        return
5
6    async def on_post(self, req, resp, dataset):
7        pass  # POST処理