r/specimens-of-composite-portraiture
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
specimens-of-composite-port.../www/index.html

164 lines
8.5 KiB
HTML
Raw Normal View History

Rudimentary face compositing
2019-02-03 17:43:32 +01:00
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
Progress on design
2019-02-04 13:49:30 +01:00
<title>Specimens of (discriminatory) composite portraiture</title>
<link rel="stylesheet" href="styles.css">
Rudimentary face compositing
2019-02-03 17:43:32 +01:00
</head>
<body>
Progress on design
2019-02-04 13:49:30 +01:00
<h1>Specimens <span class='of'>of</span> Discriminatory Composite Portraiture</h1>
Rudimentary face compositing
2019-02-03 17:43:32 +01:00
<section id='gender'>
<h2>Gender Differentiation<span class='star'>*</span></h2>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
<div class='gender-wrap'>
Rudimentary face compositing
2019-02-03 17:43:32 +01:00
<div class='genders'>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
<div id="front">
<div class='composite' id="front--f">
<img data-face="female_front" src="unknown_side-1000x1000-3.png">
<div class='cases'><span class='type'>female</span> <span class='cases--nr' data-face="female_front">12.320</span> cases</div>
</div>
<div class='composite' id="front--u">
<img data-face="unknown_front" src="unknown_side-1000x1000-3.png">
<div class='cases'><span class='type'>unknown</span> <span class='cases--nr' data-face="unknown_front">100</span> cases</div>
</div>
<div class='composite' id="front--m">
<img data-face="male_front" src="unknown_side-1000x1000-3.png">
<div class='cases'><span class='type'>male</span> <span class='cases--nr' data-face="male_front">120</span> cases</div>
</div>
</div>
<div id="general">
<div class='composite' id="side--composite">
<img data-face="side" src="unknown_side-1000x1000-3.png">
<div class='cases'><span class='cases--nr' data-face="side">100</span> side faces</div>
</div>
<div class='composite' id="front--composite">
<img data-face="front" src="unknown_side-1000x1000-3.png">
Choosing words & remove default image of myself
2019-02-08 17:54:59 +01:00
<div class='cases'><span class='cases--nr' data-face="front">100</span> frontal faces</div>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
</div>
</div>
<div id="side">
<div class='composite' id="side--m">
<img data-face="male_side" src="unknown_side-1000x1000-3.png">
<div class='cases'><span class='type'>male</span> <span class='cases--nr' data-face="male_side">120</span> cases</div>
</div>
<div class='composite' id="side--u">
<img data-face="unknown_side" src="unknown_side-1000x1000-3.png">
<div class='cases'><span class='type'>unknown</span> <span class='cases--nr' data-face="unknown_side">100</span> cases</div>
</div>
<div class='composite' id="side--f">
<img data-face="female_side" src="unknown_side-1000x1000-3.png">
<div class='cases'><span class='type'>female</span> <span class='cases--nr' data-face="female_side">12.320</span> cases</div>
</div>
</div>
Rudimentary face compositing
2019-02-03 17:43:32 +01:00
</div>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
<svg
xmlns="http://www.w3.org/2000/svg"
id="lines--front"
version="1.1"
viewBox="0 0 59.548019 116.38292"
height="116.38292mm"
width="59.548019mm">
<g
transform="translate(679.89306,124.0486)"
id="layer1">
<path
id="path836"
d="m -679.89306,-123.53551 c 70.83005,0 26.35353,98.175937 59.54802,98.175937"
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -679.89306,-8.1787728 c 39.08005,0 26.35353,-17.1808002 59.54802,-17.1808002"
id="path838" />
<path
id="path840"
d="m -679.89306,-67.505107 c 39.08005,0 26.35353,42.145534 59.54802,42.145534"
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
id="lines--side"
version="1.1"
viewBox="0 0 59.548019 116.38292"
height="116.38292mm"
width="59.548019mm">
<g
transform="translate(679.89306,124.0486)"
id="layer1">
<path
id="path836"
d="m -679.89306,-123.53551 c 70.83005,0 26.35353,98.175937 59.54802,98.175937"
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -679.89306,-8.1787728 c 39.08005,0 26.35353,-17.1808002 59.54802,-17.1808002"
id="path838" />
<path
id="path840"
d="m -679.89306,-67.505107 c 39.08005,0 26.35353,42.145534 59.54802,42.145534"
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
</div>
Rudimentary face compositing
2019-02-03 17:43:32 +01:00
</section>
Progress on design
2019-02-04 13:49:30 +01:00
<section id='differences'>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
<div>
<div class='gender explanation'>
<!-- <p>Distinctive traits</p> -->
<h3>composite subtraction</h3>
Choosing words & remove default image of myself
2019-02-08 17:54:59 +01:00
<p>An examination of discriminatory traits in algorithmic stereotyping.</p>
Progress on design
2019-02-04 13:49:30 +01:00
</div>
<div class='gender'>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
<div class='diff-layer'>
Choosing words & remove default image of myself
2019-02-08 17:54:59 +01:00
<img id="composite-male_front" src=""><img id="composite-male_side" src="">
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
</div>
<div class='label'>Male</div>
Progress on design
2019-02-04 13:49:30 +01:00
</div>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
</div>
<div>
Progress on design
2019-02-04 13:49:30 +01:00
<div class='gender'>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
<div class='diff-layer'>
Choosing words & remove default image of myself
2019-02-08 17:54:59 +01:00
<img id="composite-unknown_front" src=""><img id="composite-unknown_side" src="">
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
</div>
<div class='label'>Unknown</div>
Progress on design
2019-02-04 13:49:30 +01:00
</div>
<div class='gender'>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
<div class='diff-layer'>
Choosing words & remove default image of myself
2019-02-08 17:54:59 +01:00
<img id="composite-female_front" src=""><img id="composite-female_side" src="">
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
</div>
<div class='label'>Female</div>
Progress on design
2019-02-04 13:49:30 +01:00
</div>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
</div>
</section>
<div id='bar-wrap'>
<section id='legend'>
<div class='legend legend--female'>Female</div>
<div class='legend legend--unknown'>Unknown</div>
<div class='legend legend--male'>Male</div>
Progress on design
2019-02-04 13:49:30 +01:00
</section>
<section id='graph'>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
<div id='graph--female'>
Progress on design
2019-02-04 13:49:30 +01:00
<div class='wrap'><div class='background'></div></div>
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
</div>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
<div id='graph--unknown'>
Progress on design
2019-02-04 13:49:30 +01:00
<div class='wrap'><div class='background'></div></div>
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
</div>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
<div id='graph--male'>
Progress on design
2019-02-04 13:49:30 +01:00
<div class='wrap'><div class='background'></div></div>
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
</div>
</section>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
</div>
Progress on design
2019-02-04 13:49:30 +01:00
<div id='affdex'>* according to the 2018 edition of Affectiva's gender detection toolkit</div>
<div id='signature'>
<!-- &mdash; -->
Ruben van de Ven
<!-- &mdash; -->
</div>
Add subtractions and auto updating
2019-02-04 18:37:55 +01:00
<script type="text/javascript" src="reconnecting-websocket.min.js"></script>
<script type="text/javascript" src="composite_loader.js"></script>
Rudimentary face compositing
2019-02-03 17:43:32 +01:00
</body>
</html>
Reference in a new issue Copy permalink