App-Collection/bipartisan.html at master · LukaszMalucha/App-Collection · 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Search Engine Meta-->
  <title>Are You Democrat or Republican - according to AI | BEpartisan Initiative</title>
  <meta name="Description" content="Can AI accurately identify people’s political views based on handful of images? Probably not. At least not yet...
                                    But what if A.I. could notice that person with conservative views will more likely display certain colors, poses or backgrounds more often.
                                    A.I. may also conclude that certain images will be more effective when particular audience is being targeted.">
  <meta name="KeyWords" content="democrats, republicans, congress, image classifier, bipartisan, ai">
  <link rel="shortcut icon" type="image/png" href="resources/img/logo-icon.png" alt="septellar logo"/>
  <!-- Material Icons-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Materialize-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!-- FontAwesome Styles-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css"
        integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
  <!-- Custom Styles-->
    <link href="resources/css/navbar.css" rel="stylesheet"/>
  <link href="resources/css/bipartisan.css" rel="stylesheet"/>

  <!-- Google Fonts-->
  <link href="https://fonts.googleapis.com/css?family=Play&display=swap" rel="stylesheet">

  <!-- jQuery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Chart Js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>


</head>

<body>
<!-- WRAPPER -->
<nav class="navbar navbar-default top-navbar" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">
        <img src="resources/img/septellar-white-md.png" alt="Logo"
             class="img-logo"/>
      </a>
    </div>
</nav>

  <!-- TOP NAVBAR -->


  <!--/. TOP NAVBAR ****************************************************************************************************************************************************************************************** -->

  <div id="page-index">

    <div class="dashboard-cards">
      <div class="row row-cards">

        <div class="row plain-element">
          <div class="col s3 m2 plain-element col-chart">
            <div class="card card-plot">
              <canvas id="democratBar"></canvas>
            </div>
            <div class="card card-counter">
              <h3><b class="counter" id="factorDemocrat">30</b>%</h3>
            </div>
            <div class="card card-text">
              Democrat
            </div>
          </div>
          <div class="col s12 m12 l8 plain-element">
            <div class="row row-title">
              Let the AI predict if you are Republican or Democrat<br>
              <a class="waves-effect waves-light btn btn-modal modal-trigger" href="#modal"><i
                      class="far fa-question-circle"></i> How Does It Work?</a>
            </div>
            <br>
            <div class="row text-center">
              <form id="upload-file" method="POST" enctype="multipart/form-data">
                    <div class="row row-form">
                        <div class="file-field input-field">
                            <div class="btn btn-file">
                                <span>File</span>
                                <input type="file" name="file"  accept=".jpg" required="True">
                            </div>
                            <div class="file-path-wrapper">
                                <input class="file-path validate" type="text" placeholder="Upload your .jpg image file">
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row row-form">
                        <button id="upload-file-btn" class="btn btn-submit" type="button">Predict</button>
                    </div>
                </form>
            </div>

            <div class="row row-prediction">
              <div class="card card-prediction" id="dem">
                <div class="card-image">
                  <img src="resources/img/bipartisan/dem.png" alt="democrat">

                </div>
                <div class="card-content" id="demComment">
                </div>
              </div>
              <div class="card card-prediction" id="rep">
                <div class="card-image">
                  <img src="resources/img/bipartisan/rep.png" alt="republican">

                </div>
                <div class="card-content" id="repComment">

                </div>
              </div>
              <div class="card card-prediction" id="ind">
                <div class="card-image">
                  <img src="resources/img/bipartisan/ind.png" alt="independent">

                </div>
                <div class="card-content" id="indComment">

                </div>
              </div>
              <h5 id="error">Only .jpg files allowed</h5>
              <div class="loader"></div>
            </div>
          </div>
          <div class="col s2 m2 plain-element col-chart">
            <div class="card card-plot">
              <canvas id="republicanBar"></canvas>
            </div>
            <div class="card card-counter">
              <h3><b class="counter" id="factorRepublican">70</b>%</h3>
            </div>
            <div class="card card-text">
              Republican
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>


</div>

<div class="footer">
  <p><a target="_blank" href="https://www.freeprivacypolicy.com/privacy/view/4a6458c34e915bb7bdfa2d3bcc0bc53e/">Privacy
    Policy</a> • © 2019 - 2020 www.unflasked.com - All Rights Reserved • Powered by Septellar &trade;</p>
</div>

<div id="modal" class="modal">
  <div class="modal-content">
    <h5>PROJECT</h5>
    <p>Can AI accurately identify people’s political views based on handful of images? Probably not. At least not
      yet...</p>
    <p>But what if A.I. could notice that person with conservative views will more likely display certain colors, poses
      or backgrounds more often.</p>
    <p>A.I. may also conclude that certain images will be more effective when particular audience is being targeted.</p>
    <h5>ALGORITHM</h5>
    <p>Convolutional Neural Network trained on dataset of american congressmen images. AI predicts three classes -
      republican, democrat and independent.</p>
    <h5>IMAGES</h5>
    <p>Images are <b>NOT</b> being collected or stored. Once the session is expired they're all gone.</p>
    <h5>STATE OF RESEARCH</h5>
    <p>Research in progress</p>
  </div>
</div>


<!-- Materialize Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Custom Js -->
<script src="resources/js/bipartisan.js"></script>

<!-- waypoints JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<!-- counterup JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>

</body>

</html>