1import{i as y,_ as h,e as p,a as S,s as T,$ as k,b as C,c as H}from"./index.e4e4b56c.js";import{g as l,S as g,e as f}from"./all.5d733b16.js";import"./paper-button.8361c661.js";import{e as _,a as $,R as M,l as I}from"./if-defined.0e6fa1e2.js";import{t as z}from"./state.3d26185a.js";import{r as B}from"./resize-mixin.bbc522e5.js";import"./directive.2026bdf4.js";const D=y` 2 .flickity-enabled { 3 position: relative; 4 } 5 .flickity-enabled:focus { 6 outline: 0; 7 } 8 .flickity-viewport { 9 overflow: hidden; 10 position: relative; 11 height: 100%; 12 } 13 .flickity-slider { 14 position: absolute; 15 width: 100%; 16 height: 100%; 17 } 18 .flickity-enabled.is-draggable { 19 -webkit-tap-highlight-color: transparent; 20 -webkit-user-select: none; 21 -moz-user-select: none; 22 -ms-user-select: none; 23 user-select: none; 24 } 25 .flickity-enabled.is-draggable .flickity-viewport { 26 cursor: move; 27 cursor: -webkit-grab; 28 cursor: grab; 29 } 30 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { 31 cursor: -webkit-grabbing; 32 cursor: grabbing; 33 } 34 .flickity-button { 35 position: absolute; 36 background: hsla(0, 0%, 100%, 0.75); 37 border: none; 38 color: #333; 39 } 40 .flickity-button:hover { 41 background: #fff; 42 cursor: pointer; 43 } 44 .flickity-button:focus { 45 outline: 0; 46 box-shadow: 0 0 0 5px #19f; 47 } 48 .flickity-button:active { 49 opacity: 0.6; 50 } 51 .flickity-button:disabled { 52 opacity: 0.3; 53 cursor: auto; 54 pointer-events: none; 55 } 56 .flickity-button-icon { 57 fill: currentColor; 58 } 59 .flickity-prev-next-button { 60 top: 50%; 61 width: 44px; 62 height: 44px; 63 border-radius: 50%; 64 transform: translateY(-50%); 65 } 66 .flickity-prev-next-button.previous { 67 left: 10px; 68 } 69 .flickity-prev-next-button.next { 70 right: 10px; 71 } 72 .flickity-rtl .flickity-prev-next-button.previous { 73 left: auto; 74 right: 10px; 75 } 76 .flickity-rtl .flickity-prev-next-button.next { 77 right: auto; 78 left: 10px; 79 } 80 .flickity-prev-next-button .flickity-button-icon { 81 position: absolute; 82 left: 20%; 83 top: 20%; 84 width: 60%; 85 height: 60%; 86 } 87 .flickity-page-dots { 88 position: absolute; 89 width: 100%; 90 bottom: -25px; 91 padding: 0; 92 margin: 0; 93 list-style: none; 94 text-align: center; 95 line-height: 1; 96 } 97 .flickity-rtl .flickity-page-dots { 98 direction: rtl; 99 } 100 .flickity-page-dots .dot { 101 display: inline-block; 102 width: 10px; 103 height: 10px; 104 margin: 0 8px; 105 background: #333; 106 border-radius: 50%; 107 opacity: 0.25; 108 cursor: pointer; 109 } 110 .flickity-page-dots .dot.is-selected { 111 opacity: 1; 112 } 113`;/** 114 * @license 115 * Copyright 2021 Google LLC 116 * SPDX-License-Identifier: Apache-2.0 117 */function P(t,e,o){const r=t.constructor;if(!o){const m=`__${e}`;if(o=r.getPropertyDescriptor(e,m),!o)throw new Error("@ariaProperty must be used after a @property decorator")}const i=o;let n="";if(!i.set)throw new Error(`@ariaProperty requires a setter for ${e}`);if(t.dispatchWizEvent)return o;const a={configurable:!0,enumerable:!0,set(m){if(n===""){const v=r.getPropertyOptions(e);
117n=typeof v.attribute=="string"?v.attribute:e}this.hasAttribute(n)&&this.removeAttribute(n),i.set.call(this,m)}};return i.get&&(a.get=function(){return i.get.call(this)}),a}function R(t,e,o){if(e!==void 0)return P(t,e,o);throw new Error("@ariaProperty only supports TypeScript Decorators")}/** 118 * @license 119 * Copyright 2018 Google LLC 120 * SPDX-License-Identifier: Apache-2.0 121 */class u extends T{constructor(){super(...arguments),this.disabled=!1,this.icon="",this.shouldRenderRipple=!1,this.rippleHandlers=new M(()=>(this.shouldRenderRipple=!0,this.ripple))}renderRipple(){return this.shouldRenderRipple?k` 122 <mwc-ripple 123 .disabled="${this.disabled}" 124 unbounded> 125 </mwc-ripple>`:""}focus(){const e=this.buttonElement;e&&(this.rippleHandlers.startFocus(),e.focus())}blur(){const e=this.buttonElement;e&&(this.rippleHandlers.endFocus(),e.blur())}render(){return k`<button 126 class="mdc-icon-button mdc-icon-button--display-flex" 127 aria-label="${this.ariaLabel||this.icon}" 128 aria-haspopup="${I(this.ariaHasPopup)}" 129 ?disabled="${this.disabled}" 130 @focus="${this.handleRippleFocus}" 131 @blur="${this.handleRippleBlur}" 132 @mousedown="${this.handleRippleMouseDown}" 133 @mouseenter="${this.handleRippleMouseEnter}" 134 @mouseleave="${this.handleRippleMouseLeave}" 135 @touchstart="${this.handleRippleTouchStart}" 136 @touchend="${this.handleRippleDeactivate}" 137 @touchcancel="${this.handleRippleDeactivate}" 138 >${this.renderRipple()} 139 <i class="material-icons">${this.icon}</i> 140 <span 141 ><slot></slot 142 ></span> 143 </button>`}handleRippleMouseDown(e){const o=()=>{window.removeEventListener("mouseup",o),this.handleRippleDeactivate()};window.addEventListener("mouseup",o),this.rippleHandlers.startPress(e)}handleRippleTouchStart(e){this.rippleHandlers.startPress(e)}handleRippleDeactivate(){this.rippleHandlers.endPress()}handleRippleMouseEnter(){this.rippleHandlers.startHover()}handleRippleMouseLeave(){this.rippleHandlers.endHover()}handleRippleFocus(){this.rippleHandlers.startFocus()}handleRippleBlur(){this.rippleHandlers.endFocus()}}h([p({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0);h([p({type:String})],u.prototype,"icon",void 0);h([R,p({type:String,attribute:"aria-label"})],u.prototype,"ariaLabel",void 0);h([R,p({type:String,attribute:"aria-haspopup"})],u.prototype,"ariaHasPopup",void 0);h([S("button")],u.prototype,"buttonElement",void 0);h([_("mwc-ripple")],u.prototype,"ripple",void 0);h([z()],u.prototype,"shouldRenderRipple",void 0);h([$({passive:!0})],u.prototype,"handleRippleMouseDown",null);h([$({passive:!0})],u.prototype,"handleRippleTouchStart",null);/** 144 * @license 145 * Copyright 2021 Google LLC 146 * SPDX-LIcense-Identifier: Apache-2.0 147 */const F=y`.material-icons{font-family:var(--mdc-icon-font, "Material Icons");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}.mdc-icon-button{font-size:24px;width:48px;height:48px;padding:12px}.mdc-icon-button.mdc-icon-button--reduced-size .mdc-icon-button__ripple{width:40px;height:40px;margin-top:4px;margin-bottom:4px;margin-right:4px;margin-left:4px}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38))}.mdc-icon-button svg,.mdc-icon-button img{width:24px;height:24px}.mdc-icon-button{display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:transparent;fill:currentColor;color:inherit;text-decoration:none;cursor:pointer;user-select:none;z-index:0;overflow:visible}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{cursor:default;pointer-events:none}.mdc-icon-button--display-flex{align-items:center;display:inline-flex;justify-content:center}.mdc-icon-button__icon{display:inline-block}.mdc-icon-button__icon.mdc-icon-button__icon--on{display:none}.mdc-icon-button--on .mdc-icon-button__icon{display:none}.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on{display:inline-block}.mdc-icon-button{display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:transparent;fill:currentColor;color:inherit;text-decoration:none;cursor:pointer;user-select:none;z-index:0;overflow:visible}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{cursor:default;pointer-events:none}.mdc-icon-button--display-flex{align-items:center;display:inline-flex;justify-content:center}.mdc-icon-button__icon{display:inline-block}.mdc-icon-button__icon.mdc-icon-button__icon--on{display:none}.mdc-icon-button--on .mdc-icon-button__icon{display:none}.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on{display:inline-block}:host{display:inline-block;outline:none}:host([disabled]){pointer-events:none}.mdc-icon-button i,.mdc-icon-button svg,.mdc-icon-button img,.mdc-icon-button ::slotted(*){display:block}:host{--mdc-ripple-color: currentcolor;-webkit-tap-highlight-color:transparent}:host,.mdc-icon-button{vertical-align:top}.mdc-icon-button{width:var(--mdc-icon-button-size, 48px);height:var(--mdc-icon-button-size, 48px);padding:calc( (var(--mdc-icon-button-size, 48px) - var(--mdc-icon-size, 24px)) / 2 )}.mdc-icon-button i,.mdc-icon-button svg,.mdc-icon-button img,.mdc-icon-button ::slotted(*){display:block;width:var(--mdc-icon-size, 24px);height:var(--mdc-icon-size, 24px)}`;/** 148 * @license 149 * Copyright 2018 Google LLC 150 * SPDX-License-Identifier: Apache-2.0 151 */let x=class extends u{};x.styles=[F];x=h([C("mwc-icon-button")],x);var E=Object.defineProperty,L=Object.getOwnPropertyDescriptor,w=(t,e,o,r)=>{for(var i=r>1?void 0:r?L(e,o):e,n=t.length-1,a;n>=0;n--)(a=t[n])&&(i=(r?a(e,o,i):a(i))||i);return r&&i&&E(e,o,i),i};let b=class extends T{constructor(){super(...arguments),this.imageURL=null,this.name=null,this.role=null,this.employer=null}static get styles(){return[H,y` 152 :host { 153 font-family: 'Google Sans Text', 'Google Sans', Roboto, sans-serif; 154 contain: content; 155 display: grid; 156 grid-template-columns: 21.3333333% 1fr; 157 grid-gap: 1rem; 158 } 159 160 :host #researcherAvatar { 161 border-radius: 50%; 162 border: 0.5px solid rgba(95, 99, 104, 0.3); 163 } 164 165 :host #name { 166 font-weight: 500; 167 } 168 `]}render(){const{imageURL:t,name:e,role:o,employer:r}=this;return k` 169 <div class="aspect-ratio-container square"> 170 <img 171 id="researcherAvatar" 172 src=${t!=null?t:"https://images.unsplash.com/photo-1499651681375-8afc5a4db253?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2048&q=80"} 173 /> 174 </div> 175 <div id="researchInfo"> 176 <div id="name">${e!=null?e:"Unnamed contributor"}</div> 177 <div id="role">${o!=null?o:"Unknown role"}</div> 178 <div id="employer">${r!=null?r:"Google Research"}</div> 179 </div> 180 `}};w([p({type:String,attribute:"image-url"})],b.prototype,"imageURL",2);w([p()],b.prototype,"name",2);w([p()],b.prototype,"role",2);w([p()],b.prototype,"employer",2);b=w([C("tono-researcher")],b);var O=Object.defineProperty,j=Object.getOwnPropertyDescriptor,c=(t,e,o,r)=>{for(var i=r>1?void 0:r?j(e,o):e,n=t.length-1,a;n>=0;n--)(a=t[n])&&(i=(r?a(e,o,i):a(i))||i);return r&&i&&O(e,o,i),i};l.registerPlugin(g);let s=class extends B(T){constructor(){var t,e,o,r,i;super(...arguments),this.flickity=null,this.HERO_WIDTH=(i=(r=(e=window.innerWidth)!=null?e:(t=window.screen)==null?void 0:t.availWidth)!=null?r:(o=window.screen)==null?void 0:o.width)!=null?i:1e3,this.HERO_WIDTH_DELTA=100,this.heroRegionObserver=null,this.conditionallyCropHumanFaces=!1,this.heroAspectRatio="16:9",this.conditionalImgixParamsForHero="",this.pauseCarousel=!1}static get styles(){return[H,D,y` 181 :host { 182 display: contents; 183 font-family: 'Google Sans', 'Roboto', sans-serif; 184 } 185 186 :host #heroRegion { 187 display: grid; 188 grid-template-columns: 86.979166667% 1fr; 189 grid-template-rows: auto; 190 grid-gap: 0; 191 height: 100%; 192 overflow: hidden; 193 } 194 195 :host #heroFigure { 196 position: relative; 197 overflow: hidden; /* Temp */ 198 } 199 200 @media (min-width: 90.75em) { 201 :host #heroFigure { 202 padding-top: 35.71428571%; 203 } 204 } 205 206 :host #heroRegion img { 207 object-fit: cover; 208 height: 100%; 209 transition: filter 250ms ease-in; 210 } 211 212 :host #carousel { 213 top: 0; 214 bottom: 0; 215 position: absolute; 216 height: 100%; 217 width: 100%; 218 } 219 220 :host #colors, 221 :host .scale-colors { 222 display: grid; 223 grid-template-rows: 10; 224 grid-template-columns: 1; 225 grid-row: 1/3; 226 grid-column: 2 /3; 227 height: 100%; 228 } 229 230 // High Contrast Mode Considerations 231 @media (forced-colors: active) { 232 :host #colors, 233 :host .scale-colors { 234 forced-color-adjust: none; 235 } 236 } 237 238 :host .color {
239 background: none; 240 background-color: pink; 241 border: none; 242 outline: none; 243 height: 100%; 244 width: 100%; 245 } 246 247 :host .color:focus-visible { 248 border-bottom: var(--tono-ideal-border-width, 1.5px) solid black; 249 } 250 251 :host .color:nth-child(1) { 252 background: var(--monk-scale-color-1); 253 } 254 255 :host .color:nth-child(2) { 256 background: var(--monk-scale-color-2); 257 } 258 259 :host .color:nth-child(3) { 260 background: var(--monk-scale-color-3); 261 } 262 263 :host .color:nth-child(4) { 264 background: var(--monk-scale-color-4); 265 } 266 267 :host .color:nth-child(5) { 268 background: var(--monk-scale-color-5); 269 } 270 271 :host .color:nth-child(6) { 272 background: var(--monk-scale-color-6); 273 } 274 275 :host .color:nth-child(7) { 276 background: var(--monk-scale-color-7); 277 } 278 279 :host .color:nth-child(8) { 280 background: var(--monk-scale-color-8); 281 } 282 283 :host .color:nth-child(9) { 284 background: var(--monk-scale-color-9); 285 } 286 287 :host .color:nth-child(10) { 288 background: var(--monk-scale-color-10); 289 } 290 291 :host .color[selected] { 292 border: calc(var(--tono-ideal-border-width) * 4) solid 293 hsla(0, 0%, 0%, 0.125); 294 } 295 296 #exploreTheScale { 297 display: flex; 298 flex-flow: column nowrap; 299 height: 100%; 300 width: 100%; 301 margin: 0; 302 position: relative; 303 aspect-ratio: 9 / 10; 304 } 305 306 #exploreTheScale > * { 307 flex: 1; 308 } 309 310 #exploreTheScaleCTA { 311 display: none; 312 font-size: 1.25; 313 position: absolute; 314 width: 100%; 315 bottom: 0; 316 margin-bottom: -5px; 317 overflow: hidden; 318 transform: translate3d(0, 32%, 0); 319 will-change: transform; 320 transition: background-color, color 250ms ease-in; 321 } 322 #exploreTheScaleCTA:hover { 323 background-color: black; 324 } 325 326 #exploreTheScaleCTAButton { 327 width: 100%; 328 } 329 330 #exploreTheScaleCTA:hover #exploreTheScaleCTAButton { 331 color: white; 332 } 333 334 .cta-alongside-content { 335 width: 100%; 336 margin-bottom: 2rem; 337 } 338 339 #CTAAlongsideFigure { 340 margin-top: 2rem; 341 display: block; 342 } 343 344 #CTAAlongsideText { 345 display: none; 346 } 347 348 @media (min-width: 41.6875em) { 349 #exploreTheScaleCTA { 350 transform: translate3d(23%, -32%, 0); 351 } 352 353 #exploreTheScaleCTAButton { 354 font-size: 1.75rem; 355 font-weight: 300; 356 } 357 358 .cta-alongside-content { 359 width: 100%; 360 margin-bottom: 0; 361 } 362 } 363 364 @media (min-width: 51.25em) { 365 #CTAAlongsideFigure { 366 display: none; 367 } 368 369 #CTAAlongsideText { 370 display: block; 371 } 372 } 373 374 #exploreTheScaleCTAButton { 375 text-align: center; 376 padding: 0.5rem 0; 377 transition: background-color, color 250ms ease-in; 378 } 379 380 #monkScaleDiagramColumn { 381 padding-top: var(--tono-default-vertical-spacing); 382 } 383 384 #monkScaleDiagramColumn { 385 padding: var(--tono-default-vertical-spacing) 0; 386 width: 100%; 387 } 388 389 :host #heroHeadlineMobile h1 { 390 font-family: 'Google Sans'; 391 font-weight: 400; 392 font-size: var(--tono-slider-header-font-size); 393 line-height: 1.2; 394 z-index: 2; 395 color: black; 396 margin-top: 2rem; 397 } 398 :host #heroHeadlineMobile p { 399 margin-top: 1rem; 400 font-size: 0.875rem; 401 } 402 403 :host #heroHeadlineMobile a:not(.hero-cta) { 404 text-decoration: underline; 405 } 406 407 :host #heroHeadlineLargeViewports a { 408 color: inherit; 409 display: inline-block; 410 position: relative; 411 } 412 :host #heroHeadlineLargeViewports a:not(.link-for-button) { 413 text-decoration: underline; 414 } 415 416 :host #heroHeadlineLargeViewports a:is(:focus-visible, :hover) { 417 color: var(--tono-primary-link-color); 418 } 419 420 :host .heroCTA { 421 color: hsla(2, 40%, 50%, 1); 422 font-size: 1.25rem; 423 424 text-decoration: none; 425 } 426 427 :host .heroCTA:focus { 428 outline: none; 429 } 430 431 :is(.heroCTA:focus-visible, .heroCTA:hover) { 432 text-decoration: underline; 433 } 434 435 :host #missionStatement h2 { 436 font-family: 'Google Sans'; 437 font-size: 1.5rem; 438 font-weight: 400; 439 line-height: 1.3; 440 text-align: left; 441 } 442 443 :host #teamMembersList { 444 margin-top: 1.5rem; 445 display: grid; 446 grid-template-rows: auto; 447 grid-template-columns: repeat(auto-fit, minmax(14.75rem, 1fr)); 448 grid-gap: 2.5rem; 449 } 450 451 :host *[hidden] { 452 display: none !important; 453 } 454 455 :host #heroHeadlineLargeViewports { 456 display: none; 457 } 458 459 :host #heroHeadlineLargeViewports h1 { 460 margin-bottom: 0; 461 color: black; 462 font-weight: 400; 463 font-size: var(--tono-slider-header-font-size); 464 } 465 466 :host #heroHeadlineLargeViewports p { 467 font-family: 'Google Sans Text', 'Google Sans', sans-serif; 468 font-weight: 400; 469 font-size: var(--tono-slider-byline-font-size); 470 color: black; 471 margin: 1rem 0 1rem; 472 } 473 474 #downloadScaleHeroButton { 475 width: 100%; 476 } 477 478 :is(#downloadScaleHeroButton:hover, #downloadScaleHeroButton:focus) { 479 background: black; 480 color: white; 481 } 482 483 @media (min-width: 89.375em) { 484 :host #heroHeadlineMobile { 485 display: none; 486 } 487 488 :host .color[selected] { 489 border: calc(var(--tono-ideal-border-width, 1.5px) * 3) double 490 var(--tono-background-color); 491 } 492 493 :host #colors { 494 gap: 1.3px; 495 } 496 497 :host #heroHeadlineLargeViewports { 498 display: block; 499 position: absolute; 500 top: 0; 501 bottom: 0; 502 right: 2.5%; 503 z-index: 1; 504 padding: 2rem 0; 505 width: 53ch; 506 max-width: 38rem; 507 display: flex; 508 flex-flow: column nowrap; 509 justify-content: center; 510 } 511 512 :host #heroRegion { 513 grid-template-columns: 92% 1fr; 514 } 515 516 *.flickity-viewport { 517 height: 100% !important; 518 min-height: 100% !important; 519 } 520 521 .carousel { 522 height: 100%; 523 } 524 525 .carousel-cell { 526 height: 100%; 527 } 528 } 529 530 @media (min-width: 90.75em) { 531 :host #heroHeadlineLargeViewports { 532 right: 5%; 533 } 534 } 535 536 @media (min-width: 160em) { 537 :host #heroHeadlineLargeViewports { 538 padding-right: 0; 539 margin-right: 4.5%; 540 max-width: 50rem; 541 } 542 } 543 544 @media (min-width: 92.5625em) { 545 :host #heroRegion { 546 grid-template-columns: 95.5% minmax(4rem, 1fr); 547 } 548 } 549 550 @media (min-width: 41.6875em) { 551 #monkScaleDiagramColumn { 552 padding: 0 0; 553 margin: 2.3rem auto 2rem; 554 } 555 } 556 557 .wrapper { 558 max-width: 75rem; 559 margin: 0px auto; 560 } 561 562 #carousel:focus-visible { 563 border: 2px solid black; 564 } 565 566 a.headline { 567 color: inherit; 568 text-decoration: underline; 569 } 570 a.headline:hover { 571 color: hsl(2deg 40% 50%); 572 } 573 574 :host #primaryWrapper .primary-section-header { 575 background-color: hsla(32, 26%, 94%, 1); 576 color: hsl(0, 0%, 0%); 577 border-top: var(--tono-ideal-border-width) solid black; 578 border-bottom: var(--tono-ideal-border-width) solid black; 579 } 580 581 :host #heroCTA { 582 background: transparent; 583 color: black; 584 margin-top: 0; 585 } 586 587 :host #heroCTA:is(:hover, :focus) { 588 background: black; 589 color: white; 590 } 591 592 #colors .color {
593 } 594 595 :host :is(#exploreTheScale, #colors) { 596 gap: 1.3px; 597 } 598 599 :host #toggleCarouselAnimationButton { 600 position: absolute; 601 right: 0.5em; 602 bottom: 0.5rem; 603 color: black; 604 font-display: swap; 605 } 606 `]}updated(t){t.has("pauseCarousel")&&(this.pauseCarousel?this.flickity.pausePlayer():this.flickity.playPlayer())}connectedCallback(){super.connectedCallback(),window.requestAnimationFrame(()=>{g.refresh()})}firstUpdated(){var A;const{diagramColorBlocks:t,heroColorBlocks:e,sections:o,materialIcons:r,carousel:i,heroImages:n,heroHeadlineLargeViewports:a}=this,m=this;this.flickity=new window.Flickity(i,{cellSelector:"img,picture",prevNextButtons:!1,pageDots:!1,autoPlay:2500,wrapAround:!0,setGallerySize:!1,accessibility:!1,on:{}}),matchMedia("(prefers-reduced-motion: reduced)").matches&&this.flickity.pausePlayer(),window.addEventListener("resize",()=>{window.requestAnimationFrame(()=>{var d;(d=this.flickity)==null||d.resize()})}),(A=m.heroImages)==null||A.forEach(d=>m.resizeObserverBindings.set(d,m.heroImageResizeObserverCallback.bind(this))),requestAnimationFrame(()=>{this.setupResizeObserverBindings()}),l.set(e,{autoAlpha:0}),g.batch(e,{onEnter:d=>l.to(d,{autoAlpha:1,stagger:.1})}),l.set(Array.from(t).reverse(),{autoAlpha:0}),g.batch(t,{onEnter:d=>l.to(d,{autoAlpha:1,stagger:.05,overwrite:!0})}),l.set(o,{opacity:0}),g.batch(o,{onEnter:d=>l.to(d,{opacity:1,stagger:.2})}),l.set(r,{opacity:0}),g.batch(r,{onEnter:d=>l.to(d,{opacity:1,stagger:.2,delay:1.2})}),l.set(i,{opacity:0}),l.to(i,{scrollTrigger:i,opacity:1,duration:1});const v=n[0];v&&l.fromTo(v,{filter:"grayscale(1) blur(3px)",autoAlpha:0},{filter:"grayscale(0) blur(0px)",autoAlpha:1,duration:.8}),matchMedia("(min-width: 89.375em)").matches&&a&&(l.set(a,{autoAlpha:0}),l.to(a,{scrollTrigger:i,autoAlpha:1,delay:.2}))}reactToColorButtonClick(t){var i;const e=t.target,o=Array.from((i=this.shadowRoot)==null?void 0:i.querySelectorAll("#colors .color")),r=o.indexOf(e);if(!Number.isNaN(r)){this.removeExistingActiveColorBlock();const n=Math.max(o.length-1-r,0);this.flickity.select(n)}}removeExistingActiveColorBlock(t=null){var o;const e=(o=this.shadowRoot)==null?void 0:o.querySelector("#colors .color[selected]");if(e){if(e===t)return;window.requestAnimationFrame(()=>{e.removeAttribute("selected")})}}heroImageResizeObserverCallback(t){t.filter(e=>{const{width:o}=e.contentRect;return o>0&&Math.abs(this.HERO_WIDTH-o)>=this.HERO_WIDTH_DELTA}).forEach(e=>{const{width:o}=e.contentRect;window.requestAnimationFrame(()=>{this.HERO_WIDTH=Math.floor(o)})}),window.matchMedia("(min-width: 90.75em)").matches?this.conditionallyCropHumanFaceCallback(!0,"21:7"):this.conditionallyCropHumanFaces?this.conditionallyCropHumanFaceCallback(!0,"16:9"):this.conditionallyCropHumanFaceCallback(!1),window.requestAnimationFrame(()=>{this.requestUpdate(),this.flickity.resize()})}conditionallyCropHumanFaceCallback(t,e="16:9"){t?this.conditionalImgixParamsForHero=`&fit=crop&crop=faces&ar=${e}`:this.conditionalImgixParamsForHero="",window.requestAnimationFrame(()=>this.requestUpdate())}onToggleCarouselAnimationButtonTap(){this.pauseCarousel=!this.pauseCarousel,this.requestUpdate()}render(){const t=Math.min(window.devicePixelRatio,5),{HERO_WIDTH:e,conditionalImgixParamsForHero:o,pauseCarousel:r,onToggleCarouselAnimationButtonTap:i}=this;return k` 607 <div id="primaryWrapper"> 608 <div id="heroRegion"> 609 <div id="heroFigure" class="aspect-ratio-container"> 610 <div id="heroHeadlineLargeViewports" class="overlay"> 611 <h1>Improving skin tone evaluation in machine learning</h1> 612 <p> 613 Make better, more inclusive AI with the Monk Skin Tone Scaleâa 614 free development tool from 615 <a 616 href="https://ai.google/responsibilities/responsible-ai-practices/?category=fairness" 617 target="_blank" 618 rel="noopener" 619 >Google Responsible AI</a 620 >. 621 </p> 622 <a class="link-for-button" href="/get-started" tabindex="-1"> 623 <paper-button id="heroCTA" class="call-to-action-button"> 624 Access the scale 625 </paper-button> 626 </a> 627 </div> 628 <div 629 id="carousel" 630 aria-label="People with skin tones similar to various values of the Monk Skin Tone Scale." 631 title="People with skin tones similar to various values of the Monk Skin Tone Scale." 632 > 633 <img 634 src="https://google-ai-skin-tone-research.imgix.net/hero-images/monk-scale-google-ai-10.jpg?auto=format&dpr=${t}&width=${e}${o}" 635 alt="Image of a person" 636 /> 637 <img 638 src="https://google-ai-skin-tone-research.imgix.net/hero-images/monk-scale-google-ai-9.jpg?auto=format&dpr=${t}&width=${e}${o}" 639 alt="Image of a person" 640 /> 641 <img 642 src="https://google-ai-skin-tone-research.imgix.net/hero-images/monk-scale-google-ai-8.jpg?auto=format&dpr=${t}&width=${e}${o}" 643 alt="Image of a person" 644 /> 645 <img 646 src="https://google-ai-skin-tone-research.imgix.net/hero-images/monk-scale-google-ai-7.jpg?auto=format&dpr=${t}&width=${e}${o}" 647 alt="Image of a person" 648 /> 649 <img 650 src="https://google-ai-skin-tone-research.imgix.net/hero-images/monk-scale-google-ai-6.jpg?auto=format&dpr=${t}&width=${e}${o}" 651 alt="Image of a person" 652 /> 653 <img 654 src="https://google-ai-skin-tone-research.imgix.net/hero-images/monk-scale-google-ai-5.jpg?auto=format&dpr=${t}&width=${e}${o}" 655 alt="Image of a person" 656 /> 657 <img 658 src="https://google-ai-skin-tone-research.imgix.net/hero-images/monk-scale-google-ai-4.jpg?auto=format&dpr=${t}&width=${e}${o}" 659 alt="Image of a person" 660 /> 661 <img 662 src="https://google-ai-skin-tone-research.imgix.net/hero-images/monk-scale-google-ai-3.jpg?auto=format&dpr=${t}&width=${e}${o}" 663 alt="Image of a person" 664 /> 665 <img 666 src="https://google-ai-skin-tone-research.imgix.net/hero-images/monk-scale-google-ai-2.jpg?auto=format&dpr=${t}&width=${e}${o}" 667 alt="Image of a person" 668 /> 669 <img 670 src="https://google-ai-skin-tone-research.imgix.net/hero-images/frame-1.png?auto=format&dpr=${t}&width=${e}${o}" 671 alt="Image of a person" 672 /> 673 </div> 674 <mwc-icon-button 675 id="toggleCarouselAnimationButton" 676 aria-label="${r?"Resume":"Pause"} animating carousel of presentational images of people the Monk skin tone scale potentially benefits" 677 title="${r?"Resume":"Pause"} animating carousel of presentational images of people the Monk skin tone scale potentially benefits" 678 icon="${r?"play_arrow":"pause"}" 679 @pointerup=${i} 680 ></mwc-icon-button> 681 </div> 682 <div id="colors" class="scale-colors"> 683 <div 684 class="color" 685 tabindex="-1" 686 title="1st value of the Monk Tone Scale" 687 ></div> 688 <div 689 class="color" 690 tabindex="-1" 691 title="2nd value of the Monk Tone Scale" 692 ></div> 693 <div 694 class="color" 695 tabindex="-1" 696 title="3rd value of the Monk Tone Scale" 697 ></div> 698 <div 699 class="color" 700 tabindex="-1" 701 title="4th value of the Monk Tone Scale" 702 ></div> 703 <div 704 class="color" 705 tabindex="-1" 706 title="5th value of the Monk Tone Scale" 707 ></div> 708 <div 709 class="color" 710 tabindex="-1" 711 title="6th value of the Monk Tone Scale" 712 ></div> 713 <div 714 class="color" 715 tabindex="-1" 716 title="7th value of the Monk Tone Scale" 717 ></div> 718 <div 719 class="color" 720 tabindex="-1" 721 title="8th value of the Monk Tone Scale" 722 ></div> 723 <div 724 class="color" 725 tabindex="-1" 726 title="9th value of the Monk Tone Scale" 727 ></div> 728 <div 729 class="color" 730 tabindex="-1" 731 title="10th value of the Monk Tone Scale" 732 ></div> 733 </div> 734 <section 735 id="heroHeadlineMobile" 736 class="only-viewable-on-small-viewports general-section" 737 > 738 <div class="wrapper"> 739 <h1>Improving skin tone evaluation in machine learning</h1> 740 <p> 741 Make better, more inclusive AI with the Monk Skin Tone Scaleâa 742 free development tool from 743 <a 744 href="https://ai.google/responsibilities/responsible-ai-practices/?category=fairness" 745 rel="noopener" 746 target="blank" 747 >Google Responsible AI</a 748 >. 749 </p> 750 <a class="hero-cta" href="/get-started">Access the scale â</a> 751 </div> 752 </section> 753 </div> 754 <section aria-labelledby="mainIntroAfterSlider"> 755 <header class="section-header special-case"> 756 <h2 id="mainIntroAfterSlider" class="heading"> 757 Helping computers âseeâ our world 758 </h2> 759 </header> 760 <div class="wrapper"> 761 <div class="text-wrapper"> 762 <p>
763 Skin tone plays a key role in how we experience and are treated 764 in the world, and even factors into how we interact with 765 technologies. 766 <a 767 href="http://gendershades.org/" 768 target="_blank" 769 rel="noopener" 770 >Studies</a 771 > 772 show that products built using todayâs artificial intelligence 773 (AI) and machine learning (ML) technologies can perpetuate 774 unfair biases and not work well for people with darker skin 775 tones. 776 </p> 777 <p> 778 Computer vision (CV) is a type of AI that allows computers to 779 âsee and understandâ images of people and environments, but when 780 present-day systems arenât designed with everyone in mind, they 781 can fail to âseeâ and âunderstandâ people with darker skin. 782 Building more inclusive CV systems requires being 783 intentionalâfrom collecting representative datasets for training 784 and evaluation, to developing the right evaluation metrics, to 785 building features that work for all users. 786 </p> 787 </div> 788 </div> 789 </section> 790 <section id="MSTSection" aria-labelledby="introMSTScaleHeading"> 791 <div class="section-header edge-case"> 792 <h2 class="heading" id="introMSTScaleHeading"> 793 Introducing the Monk Skin Tone Scale 794 </h2> 795 </div> 796 <div class="wrapper"> 797 <div id="contextualTwoColumnContainer" reversed> 798 <div id="textColumn"> 799 <div class="text-wrapper"> 800 <p> 801 To improve CV systemsâ understanding of skin tones and 802 improve ML fairness evaluation, weâre open-sourcing the Monk 803 Skin Tone (MST) Scaleâan alternative scale that is more 804 inclusive than the current tech-industry standard. Developed 805 by Harvard professor, 806 <a 807 href="https://sociology.fas.harvard.edu/people/ellis-monk" 808 target="_blank" 809 rel="noopener" 810 >Dr. Ellis Monk</a 811 >, the MST Scale provides a broader spectrum of skin tones 812 that can be leveraged to evaluate datasets and ML models for 813 better representation. 814 </p> 815 <p> 816 Google's Research Center for Responsible AI and 817 Human-Centered Technology has partnered with Dr. Monk to 818 openly release the MST Scale for the ML community. By openly 819 releasing the scale to the broader industry, we hope others 820 will incorporate the scale into their development processes 821 and that we can collectively improve this area of AI. 822 </p> 823 <p> 824 Our research team continues to collaborate with Dr. Monk on 825 refining the scale further. Whether youâre a user, ML 826 fairness expert, or developer, we encourage you to 827 <a 828 href="https://google.qualtrics.com/jfe/form/SV_eFJF7qguvcWvdFs" 829 >share feedback</a 830 > 831 on how we can improve the scale and develop our models 832 responsibly, in line with 833 <a 834 href="https://ai.google/principles/" 835 target="_blank" 836 rel="noopener" 837 >Googleâs AI Principles</a 838 >. 839 </p> 840 841 <a class="link-for-button" href="/the-scale" rel="noopener"> 842 <paper-button 843 id="CTAAlongsideText" 844 class="call-to-action-button" 845 > 846 The Scale 847 </paper-button> 848 </a> 849 </div> 850 </div> 851 852 <div id="monkScaleDiagramColumn"> 853 <figure 854 id="exploreTheScale" 855 aria-label="Illustration representing the color values of the Monk Skin Tone Scale in a rectangular shape" 856 class="scale-colors" 857 title="Illustration representing the color values of the Monk Skin Tone Scale in a rectangular shape" 858 > 859 <div class="monk-scale-color"></div> 860 <div class="monk-scale-color"></div> 861 <div class="monk-scale-color"></div> 862 <div class="monk-scale-color"></div> 863 <div class="monk-scale-color"></div> 864 <div class="monk-scale-color"></div> 865 <div class="monk-scale-color"></div> 866 <div class="monk-scale-color"></div> 867 <div class="monk-scale-color"></div> 868 <div class="monk-scale-color"></div> 869 <a 870 id="exploreTheScaleCTA" 871 href="/the-scale" 872 class="link-for-button" 873 tabindex="-1" 874 > 875 <paper-button 876 id="exploreTheScaleCTAButton" 877 class="call-to-action-button " 878 href="/the-scale" 879 >The Scale</paper-button 880 > 881 </a> 882 </figure> 883 884 <a 885 class="link-for-button cta-alongside-content" 886 href="the-scale" 887 > 888 <paper-button 889 id="CTAAlongsideFigure" 890 class="call-to-action-button cta-alongside-content" 891 >The Scale 892 </paper-button> 893 </a> 894 </div> 895 </div> 896 </div> 897 </section> 898 </div> 899 `}};c([p({type:Boolean,attribute:"conditionally-crop-human-faces"})],s.prototype,"conditionallyCropHumanFaces",2);c([p({type:String,attribute:"hero-aspect-ratio"})],s.prototype,"heroAspectRatio",2);c([p({type:String,attribute:"conditional-imgix-params-for-hero"})],s.prototype,"conditionalImgixParamsForHero",2);c([f("#carousel img:first-child")],s.prototype,"heroImages",2);c([f(".color")],s.prototype,"colorBlocks",2);c([f("#colors .color")],s.prototype,"heroColorBlocks",2);c([f("#monkScaleDiagramColumn .monk-scale-color")],s.prototype,"diagramColorBlocks",2);c([f("section")],s.prototype,"sections",2);c([f("mwc-icon-button, mwc-icon")],s.prototype,"materialIcons",2);c([S("#carousel")],s.prototype,"carousel",2);c([S("#heroHeadlineLargeViewports")],s.prototype,"heroHeadlineLargeViewports",2);c([p({type:Boolean,reflect:!0,attribute:"pause-carousel"})],s.prototype,"pauseCarousel",2);s=c([C("tono-home")],s);export{s as TonoHome};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.