vav-idol/index.html at master · ToiDiCodeDaoSampleCode/vav-idol · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.1.8/semantic.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>

    <script src="script.js"></script>
    <title>Nhận diện VAV Idol</title>
</head>

<body ng-app="app" ng-controller="mainCtrl">
    <div class="ui container">
        <div class="ui container"></div>
        <h1>Nhận diện VAV Idol</h1>

        <!-- Form để dán ảnh và submit -->
        <div class="ui form">
            <div class="field">
                <div ng-class="{loading: isLoading}" class="ui action input">
                    <input type="text" ng-model="imageLink" placeholder="Link ảnh" />

                    <button ng-disabled="isLoading || !imageLink" ng-click="recognize()" class="ui icon primary button">
                        <span ng-if="!isLoading">
                                        <i class="search icon"></i>
                                        Tìm idol</span>
                        <span ng-if="isLoading">
                                        <i class="spinner loading icon"></i>
                                        Đang tìm, chờ tí</span>
                    </button>

                </div>
            </div>
        </div>
        <br>

        <!-- Hiển thị ảnh của idol và kết quả nhận diện -->
        <div class="source-image">
            <img ng-if="imageLink" ng-src="{{imageLink}}" id="source-image" class="ui" />
            <div class="idol-face" ng-repeat="face in faceDisplay" ng-style="face.style">
                <span class="idol-name">{{face.name}}</span>
            </div>
        </div>
        <br>

        <!-- Hiển thị danh sách idol và kết quả trả về dưới dạng JSON -->
        <div class="ui grid">
            <div class="four wide column">
                <h4>List idols</h4>
                <div class="ui bulleted list">
                    <div class="item" ng-repeat="idol in idols">{{idol}}</div>
                </div>
            </div>
            <div class="twelve wide column">
                <h4>JSON result</h4>
                <div><pre>{{faces | json:2}}</pre>
                </div>
            </div>
        </div>
        <br>

        <!-- Hiển thị các ảnh dể test -->
        <div>
            <h4>Test images</h4>
            <div class="ui four cards">
                <div class="card" ng-repeat="image in testImages">
                    <a target="_blank" ng-href="{{image}}" class="image test-thumbnail">
                        <img ng-src="{{image}}">
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>