<commit_before><html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous">
    <link href="styles/main.css" rel="stylesheet">
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- tether -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
    <!-- bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
    <script src="scripts/jquery.urlshortener.min.js" type="text/javascript"></script>
    <script src="/jpeg_camera/swfobject.min.js" type="text/javascript"></script>
    <script src="/jpeg_camera/canvas-to-blob.min.js" type="text/javascript"></script>
    <script src="/jpeg_camera/jpeg_camera.js" type="text/javascript"></script>
    <script src="TimeCircles/inc/TimeCircles.js" type="text/javascript"></script>
    <link href="TimeCircles/inc/TimeCircles.css" rel="stylesheet">
    <script src="https://use.fontawesome.com/f748178fc1.js"></script>
    <script src="scripts/html2canvas.js" type="text/javascript"></script>
    <script src="scripts/config.js"></script>
    <script src="scripts/scorecard.js"></script>
    <script src="scripts/kairos.js"></script>
    <script src="scripts/microsoft.js"></script>
    <script src="scripts/ibm.js"></script>
    <script src="scripts/google.js"></script>
    <script src="scripts/faceplusplus.js"></script>
    <script src="scripts/index.js"></script>
</head>

<body>
    <div class="container">
        <h1 class="display-4 mb-4">Facial Analysis Playground</h1>
        <div class="row">
            <div class="col-md-5" style="position: relative;">
                <div id="camera" style="z-index: 100; position: absolute;"></div>
                <canvas id="photoCanvas" width="400" height="400" style="z-index: 100; position: absolute;"></canvas>
                <!-- <img src="images/loading.svg" id="loading" style="z-index: 300; align-self: center; position: absolute;"> -->
                <div id="countdown" data-timer="4" style="z-index: 300; align-self: center; position: absolute; vertical-align: middle;"></div>
                <div id="gender-age-display" class="display-4 alert alert-info" role="alert" style="position: absolute; bottom: 0; font-size:1rem; width: 82%; text-align: center;">
                    <h6 class="alert-heading"><span id="api-name"></span> Results: </h6>
                    <div id="detected-values">
                        <span>Gender: <span id="gender-display"></span></span><span style="margin-left: 30px; margin-right: 30px;">|</span><span>Age: <span id="age-display"></span></span>
                    </div>
                    <span id="no-face-detected">No Face Detected</span>
                </div>
            </div>
            <div class="col-md-5">
                <!-- Nav tabs -->
                <ul class="nav nav-pills" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#ibm_response" role="tab">IBM</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#microsoft_response" role="tab">Microsoft</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#faceplusplus_response" role="tab">Face++</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#google_response" role="tab">Google</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#kairos_response" role="tab">Kairos</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content mt-2">
                    <div class="tab-pane fade show active responses" id="ibm_response" role="tabpanel"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
                        <span class="sr-only">Loading...</span></div>
                    <div class="tab-pane fade responses" id="microsoft_response" role="tabpanel"><i>(Microsoft response will appear here)</i></div>
                    <div class="tab-pane fade responses" id="faceplusplus_response" role="tabpanel"><i>(Face++ response will appear here)</i></div>
                    <div class="tab-pane fade responses" id="google_response" role="tabpanel"><i>(IBM response will appear here)</i></div>
                    <div class="tab-pane fade responses" id="kairos_response" role="tabpanel"><i>(Kairos response will appear here)</i></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-5">
                <button id='camera-button' type="button" class="btn btn-outline-success btn-block">Webcam</button>
                <form class="form file-input-form">
                    <div>
                        <label></label>
                        <input type="file" id="file" class="form-control-file form-control-sm">
                    </div>
                </form>
                <form>
                    <div class="input-group">
                        <label></label>
                        <input type="text" id="photo_url" class="form-control" placeholder="Image URL...">
                        <span class="input-group-btn">
                            <button class="btn btn-secondary" id="submit_photo_url">Submit</button>
                        </span>
                    </div>
                </form>
            </div>
            <div class="col-md-5">
                <button id="results-button" type="button" class="btn btn-primary btn-block btn-lg" data-toggle="modal" data-target="#myModal" data-animation="false" disabled>
                    Compare Results
                </button>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-md-2 col-md-offset-1"><img src="images/Joy Buolamwini-gender_Female-age_22-ethnicity_Black.jpg" class="img-fluid sample-img" id="sample1"></div>
            <div class="col-md-2"><img src="images/<NAME>-gender_Female-age_25-ethnicity_Asian.jpg" class="img-fluid sample-img" id="sample2"></div>
            <div class="col-md-2"><img src="images/Mike Colter-gender_Male-age_37-ethnicity_Black.jpg" class="img-fluid sample-img" id="sample3"></div>
            <div class="col-md-2"><img src="images/Taylor Swift-gender_Female-age_26-ethnicity_White.jpg" class="img-fluid sample-img" id="sample4"></div>
            <div class="col-md-2"><img src="images/Aziz Ansari-gender_Male-age_25-ethnicity_Indian.jpg" class="img-fluid sample-img" id="sample5"></div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Scorecard</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-1">
                        <table id="comparison_table" class="table">
                            <thead>
                                <tr>
                                    <th>Results</th>
                                    <th>Gender</th>
                                    <th>Age</th>
                                </tr>
                            </thead>
                            <tr>
                                <th scope="row">Microsoft</th>
                                <td class="microsoft_gender">?</td>
                                <td class="microsoft_age">?</td>
                            </tr>
                            <tr>
                                <th scope="row">IBM</th>
                                <td class="ibm_gender">?</td>
                                <td class="ibm_age">?</td>
                            </tr>
                            <tr>
                                <th scope="row">Face++</th>
                                <td class="faceplusplus_gender">?</td>
                                <td class="faceplusplus_age">?</td>
                            </tr>
                            <tr>
                                <th scope="row">Kairos</th>
                                <td class="kairos_gender">?</td>
                                <td class="kairos_age">?</td>
                            </tr>
                        </table>
                        <div class="alert alert-info" role="alert">
                            <strong>Google omitted - </strong>API does not estimate age or gender
                        </div>
                    </div>
                    <form id="actual_values_form" class="form-group modal-2" method="post" action="#">
                        <h4>Attributes to Include on Scorecard</h4>
                        <div>
                            <div>
                                <label for="choice-attributes-gender" class="custom-control custom-checkbox">
                                    <input type="checkbox" name="choice-attributes" id="choice-attributes-gender" class="choice-gender custom-control-input">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Gender</span>
                                </label>
                            </div>
                            <div class="reveal-if-active">
                                <label class="question" for="actual-gender">What's the gender of the person in the photo?
                                    <button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="right" data-animation="false" title="Only binary options available, for now. Sorry!">
                                        <i class="fa fa-question-circle"></i>
                                    </button>
                                </label>
                                <label class="custom-control custom-radio">
                                    <input name="gender" type="radio" class="custom-control-input require-if-active" data-require-pair=".choice-gender" value="Male">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Male</span>
                                </label>
                                <label class="custom-control custom-radio">
                                    <input name="gender" type="radio" class="custom-control-input require-if-active" data-require-pair=".choice-gender" value="Female">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Female</span>
                                </label>
                            </div>
                            <div>
                                <label for="choice-attributes-age" class="custom-control custom-checkbox">
                                    <input type="checkbox" name="choice-attributes" id="choice-attributes-age" class="choice-age custom-control-input">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Age</span>
                                </label>
                            </div>
                            <div class="reveal-if-active">
                                <label class="question" for="actual-age">How old is the person in the photo?</label>
                                <input type="number" id="actual-age" name="age" class="require-if-active form-control" data-require-pair=".choice-age" min="0" max="200">
                            </div><commit_msg>updated gender tooltip<commit_after><html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous">
    <link href="styles/main.css" rel="stylesheet">
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- tether -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
    <!-- bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
    <script src="scripts/jquery.urlshortener.min.js" type="text/javascript"></script>
    <script src="/jpeg_camera/swfobject.min.js" type="text/javascript"></script>
    <script src="/jpeg_camera/canvas-to-blob.min.js" type="text/javascript"></script>
    <script src="/jpeg_camera/jpeg_camera.js" type="text/javascript"></script>
    <script src="TimeCircles/inc/TimeCircles.js" type="text/javascript"></script>
    <link href="TimeCircles/inc/TimeCircles.css" rel="stylesheet">
    <script src="https://use.fontawesome.com/f748178fc1.js"></script>
    <script src="scripts/html2canvas.js" type="text/javascript"></script>
    <script src="scripts/config.js"></script>
    <script src="scripts/scorecard.js"></script>
    <script src="scripts/kairos.js"></script>
    <script src="scripts/microsoft.js"></script>
    <script src="scripts/ibm.js"></script>
    <script src="scripts/google.js"></script>
    <script src="scripts/faceplusplus.js"></script>
    <script src="scripts/index.js"></script>
</head>

<body>
    <div class="container">
        <h1 class="display-4 mb-4">Facial Analysis Playground</h1>
        <div class="row">
            <div class="col-md-5" style="position: relative;">
                <div id="camera" style="z-index: 100; position: absolute;"></div>
                <canvas id="photoCanvas" width="400" height="400" style="z-index: 100; position: absolute;"></canvas>
                <!-- <img src="images/loading.svg" id="loading" style="z-index: 300; align-self: center; position: absolute;"> -->
                <div id="countdown" data-timer="4" style="z-index: 300; align-self: center; position: absolute; vertical-align: middle;"></div>
                <div id="gender-age-display" class="display-4 alert alert-info" role="alert" style="position: absolute; bottom: 0; font-size:1rem; width: 82%; text-align: center;">
                    <h6 class="alert-heading"><span id="api-name"></span> Results: </h6>
                    <div id="detected-values">
                        <span>Gender: <span id="gender-display"></span></span><span style="margin-left: 30px; margin-right: 30px;">|</span><span>Age: <span id="age-display"></span></span>
                    </div>
                    <span id="no-face-detected">No Face Detected</span>
                </div>
            </div>
            <div class="col-md-5">
                <!-- Nav tabs -->
                <ul class="nav nav-pills" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#ibm_response" role="tab">IBM</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#microsoft_response" role="tab">Microsoft</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#faceplusplus_response" role="tab">Face++</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#google_response" role="tab">Google</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#kairos_response" role="tab">Kairos</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content mt-2">
                    <div class="tab-pane fade show active responses" id="ibm_response" role="tabpanel"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
                        <span class="sr-only">Loading...</span></div>
                    <div class="tab-pane fade responses" id="microsoft_response" role="tabpanel"><i>(Microsoft response will appear here)</i></div>
                    <div class="tab-pane fade responses" id="faceplusplus_response" role="tabpanel"><i>(Face++ response will appear here)</i></div>
                    <div class="tab-pane fade responses" id="google_response" role="tabpanel"><i>(IBM response will appear here)</i></div>
                    <div class="tab-pane fade responses" id="kairos_response" role="tabpanel"><i>(Kairos response will appear here)</i></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-5">
                <button id='camera-button' type="button" class="btn btn-outline-success btn-block">Webcam</button>
                <form class="form file-input-form">
                    <div>
                        <label></label>
                        <input type="file" id="file" class="form-control-file form-control-sm">
                    </div>
                </form>
                <form>
                    <div class="input-group">
                        <label></label>
                        <input type="text" id="photo_url" class="form-control" placeholder="Image URL...">
                        <span class="input-group-btn">
                            <button class="btn btn-secondary" id="submit_photo_url">Submit</button>
                        </span>
                    </div>
                </form>
            </div>
            <div class="col-md-5">
                <button id="results-button" type="button" class="btn btn-primary btn-block btn-lg" data-toggle="modal" data-target="#myModal" data-animation="false" disabled>
                    Compare Results
                </button>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-md-2 col-md-offset-1"><img src="images/Joy Buolamwini-gender_Female-age_22-ethnicity_Black.jpg" class="img-fluid sample-img" id="sample1"></div>
            <div class="col-md-2"><img src="images/<NAME>-gender_Female-age_25-ethnicity_Asian.jpg" class="img-fluid sample-img" id="sample2"></div>
            <div class="col-md-2"><img src="images/Mike Colter-gender_Male-age_37-ethnicity_Black.jpg" class="img-fluid sample-img" id="sample3"></div>
            <div class="col-md-2"><img src="images/Taylor Swift-gender_Female-age_26-ethnicity_White.jpg" class="img-fluid sample-img" id="sample4"></div>
            <div class="col-md-2"><img src="images/Aziz Ansari-gender_Male-age_25-ethnicity_Indian.jpg" class="img-fluid sample-img" id="sample5"></div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Scorecard</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-1">
                        <table id="comparison_table" class="table">
                            <thead>
                                <tr>
                                    <th>Results</th>
                                    <th>Gender</th>
                                    <th>Age</th>
                                </tr>
                            </thead>
                            <tr>
                                <th scope="row">Microsoft</th>
                                <td class="microsoft_gender">?</td>
                                <td class="microsoft_age">?</td>
                            </tr>
                            <tr>
                                <th scope="row">IBM</th>
                                <td class="ibm_gender">?</td>
                                <td class="ibm_age">?</td>
                            </tr>
                            <tr>
                                <th scope="row">Face++</th>
                                <td class="faceplusplus_gender">?</td>
                                <td class="faceplusplus_age">?</td>
                            </tr>
                            <tr>
                                <th scope="row">Kairos</th>
                                <td class="kairos_gender">?</td>
                                <td class="kairos_age">?</td>
                            </tr>
                        </table>
                        <div class="alert alert-info" role="alert">
                            <strong>Google omitted - </strong>API does not estimate age or gender
                        </div>
                    </div>
                    <form id="actual_values_form" class="form-group modal-2" method="post" action="#">
                        <h4>Attributes to Include on Scorecard</h4>
                        <div>
                            <div>
                                <label for="choice-attributes-gender" class="custom-control custom-checkbox">
                                    <input type="checkbox" name="choice-attributes" id="choice-attributes-gender" class="choice-gender custom-control-input">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Gender</span>
                                </label>
                            </div>
                            <div class="reveal-if-active">
                                <label class="question" for="actual-gender">What's the gender of the person in the photo?
                                    <button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="right" data-animation="false" title="The gender estimation software provide binary gender results that do not account for androgyny, gender fluidity, or trans-identities.  We present gender as an optional attribute to test using binary labels that match the software.">
                                        <i class="fa fa-question-circle"></i>
                                    </button>
                                </label>
                                <label class="custom-control custom-radio">
                                    <input name="gender" type="radio" class="custom-control-input require-if-active" data-require-pair=".choice-gender" value="Male">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Male</span>
                                </label>
                                <label class="custom-control custom-radio">
                                    <input name="gender" type="radio" class="custom-control-input require-if-active" data-require-pair=".choice-gender" value="Female">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Female</span>
                                </label>
                            </div>
                            <div>
                                <label for="choice-attributes-age" class="custom-control custom-checkbox">
                                    <input type="checkbox" name="choice-attributes" id="choice-attributes-age" class="choice-age custom-control-input">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Age</span>
                                </label>
                            </div>
                            <div class="reveal-if-active">
                                <label class="question" for="actual-age">How old is the person in the photo?</label>
                                <input type="number" id="actual-age" name="age" class="require-if-active form-control" data-require-pair=".choice-age" min="0" max="200">
                            </div>
{'fraction_non_alphanumeric': 0.1523196988117181, 'fraction_numerical': 0.007686575944154673, 'mean_word_length': 1.5728987993138936, 'pattern_counts': {'":': 0, '<': 593, '<?xml version=': 0, '>': 593, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 62, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2924139', 'n_tokens_mistral': 7029, 'n_tokens_neox': 6576, 'n_words': 1208}