A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Old wards and new against fake humans (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Is that even respected? Retrospectively? What a shAItshow…
  28. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  29. <meta name="robots" content="noai, noimageai">
  30. <!-- Documented, feel free to shoot an email. -->
  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  39. <script>
  40. function toggleTheme(themeName) {
  41. document.documentElement.classList.toggle(
  42. 'forced-dark',
  43. themeName === 'dark'
  44. )
  45. document.documentElement.classList.toggle(
  46. 'forced-light',
  47. themeName === 'light'
  48. )
  49. }
  50. const selectedTheme = localStorage.getItem('theme')
  51. if (selectedTheme !== 'undefined') {
  52. toggleTheme(selectedTheme)
  53. }
  54. </script>
  55. <meta name="robots" content="noindex, nofollow">
  56. <meta content="origin-when-cross-origin" name="referrer">
  57. <!-- Canonical URL for SEO purposes -->
  58. <link rel="canonical" href="https://interconnected.org/home/2023/09/22/wards">
  59. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  60. <article>
  61. <header>
  62. <h1>Old wards and new against fake humans</h1>
  63. </header>
  64. <nav>
  65. <p class="center">
  66. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  68. </svg> Accueil</a> •
  69. <a href="https://interconnected.org/home/2023/09/22/wards" title="Lien vers le contenu original">Source originale</a>
  70. </p>
  71. </nav>
  72. <hr>
  73. <p>Somebody’s taken Childish Gambino’s music video <a href="https://www.youtube.com/watch?v=VYOjWnS4cMY">This is America</a> <em>(original, YouTube)</em> and used some AI face-swapper software called FaceFusion to sub in Nicolas Cage.</p>
  74. <p><a href="https://twitter.com/cocktailpeanut/status/1703784764728082677">Here’s the result on X/Twitter.</a> You don’t need to watch the whole thing – just the moment at 2m40s where Cage/Gambino turns his face sideways and the face swap glitches out, back, out again and sits on Gambino for a beat, then back to Cage looks unnatural, settings in, then lights up and walks off.</p>
  75. <p>The timing is perfect. <a href="/more/2023/09/gambino-cage-glitch.mp4">I’ve clipped the video here.</a></p>
  76. <p>It seems to me like this is a visual trope we’re going to see more and more? It’s the paranoia and glitching in <em>A Scanner Darkly</em> (2006), the visual glitch when your trust in subjective reality is shaken loose. I’m looking forward to this being a commonplace shorthand for doubt; a quick glitch in a romcom when somebody is acting out of character, say.</p>
  77. <p>ANYWAY:</p>
  78. <p>It reminds me that AI face swaps are not (in 2023) much good at ears.</p>
  79. <p><a href="https://www.washingtonpost.com/technology/2023/03/05/ai-voice-scam/">There is a rise in imposter scams</a> <em>(Washington Post):</em></p>
  80. <blockquote>
  81. <p>The man calling Ruth Card sounded just like her grandson Brandon. So when he said he was in jail, with no wallet or cellphone, and needed cash for bail</p>
  82. </blockquote>
  83. <p>…for which you need about 30 seconds of audio and under a hundred bucks.</p>
  84. <p>And so, at least for video calls, <a href="/home/2022/11/17/filtered">as previously discussed when I posted about ears last year</a>, the advice is this: <q>To Uncover a Deepfake Video Call, Ask the Caller to Turn Sideways.</q></p>
  85. <hr>
  86. <p>As a family, we have a secret pass phrase to check identity between ourselves in the event of an unexpected video call.</p>
  87. <p>It’s a sticking plaster solution. Long term I suspect we all need 2FA for humans.</p>
  88. <p>In the meantime, maybe the most effective ward against deepfakes is simply to turn sideways?</p>
  89. <p>We should build the habit now. At the beginning of every call, exchange a quick proof-of-humanity by showing our ears.</p>
  90. <hr>
  91. <p><strong>Warding against pretend people: some examples.</strong></p>
  92. <p>ONE!</p>
  93. <p>The origin of <em>tao po,</em> apparently a common Filipino phrase:</p>
  94. <blockquote cite="https://www.esquiremag.ph/long-reads/features/puwera-usog-meaning-and-history-a00293-20200211" class="quoteback bl bw2 pl2 b--orange ml0 italic i" data-author="Esquire" data-title="Puwera Usog, Tao Po, and Tabi Po: The Curious History of Three Filipino Phrases (2020)">
  95. <p>According to historian Ambeth Ocampo, pre-colonial Filipinos used the phrase to declare themselves as humans, thus: “Tao po ako, hindi aswang!” (<u>“I am human and not <em>aswang</em>“</u>)</p>
  96. <p>… evil spirits, <em>aswang,</em> and other dangers that lurked outside the home were incapable of saying “tao po” to trick you into letting them in your house. </p>
  97. <p>… Today, “tao po” has a more mundane purpose. Depending on the usage, it can be loosely translated to “anybody home?” or “a person is at the gate.”</p>
  98. </blockquote>
  99. <p>TWO!</p>
  100. <p>Haint blue is: <q>a collection of pale shades of blue-green that are traditionally used to paint porch ceilings in the Southern United States.</q></p>
  101. <blockquote cite="https://en.m.wikipedia.org/wiki/Haint_blue" class="quoteback bl bw2 pl2 b--orange ml0 italic i" data-author="Wikipedia" data-title="Haint blue">
  102. <p>Originally, haint blue was thought by the Gullah to ward haints, or ghosts, away from the home. The tactic was intended either to mimic the appearance of the sky, tricking the ghost into passing through, or to mimic the appearance of water, which ghosts traditionally could not cross. The Gullah would paint not only the porch, but also doors, window frames, and shutters. Blue glass bottles were also hung in trees to trap haints and boo hags.</p>
  103. </blockquote>
  104. <p>For HTML fans, that’s hex #D1EAEB.</p>
  105. <p>THREE!</p>
  106. <p>Perhaps your baby has been stolen and an ancient fairy has taken its place – a <a href="https://en.wikipedia.org/wiki/Changeling">changeling</a>.</p>
  107. <p>You can trick fey folk into breaking their silence by baffling them. Typically: <a href="https://writinginmargins.weebly.com/home/eggshells-and-changelings">cooking with eggshells</a>.</p>
  108. <blockquote>
  109. <p>A fairy doppelganger has posed as a human baby and successfully pulled the wool over its human hosts’ eyes. However, someone (typically the mother) realizes what’s happened. To trick the changeling, she uses empty eggshells as milk pans, stewpots, or brewing cauldrons. The fake infant is so surprised that he suddenly begins to speak. Sometimes he is startled, sometimes amused. “I have never seen the like of that before” is the most common exclamation, as he unthinkingly reveals his great age. Then, in a flash, all is set right and the real baby is returned.</p>
  110. </blockquote>
  111. <hr>
  112. <p><strong>What 21st century fake humans do I want to ward off?</strong> What should I carry with me?</p>
  113. <p>Ok, taking turns to show our ears to watch for deepfake glitches. Like shaking hands from the old days, demonstrating that I’m not about to draw my sword.</p>
  114. <p>What about if I suspect I’m speaking, in text or voiceswapped, with an AI? The best trick would be to challenge it to say something obscene. The AI changeling wouldn’t be able to help itself, blurting in response: <q>I’m sorry but as a large language model I cannot…</q></p>
  115. <p><em>If we’re emailing, and the first words I say to you are utterly beyond the pale, just like excessively and graphically disturbing, don’t worry, I’m just helpfully establishing my humanity.</em></p>
  116. <p>Tao po.</p>
  117. <p>I’m into wards that become unquestioned social habits.</p>
  118. <p>I’m also thinking more about wards that are physical artefacts, and less about AI…</p>
  119. <p>For instance: my car was stolen recently, evaporated from the street.</p>
  120. <p>Apparently 50% of car thefts in the UK are from hijacking keyless entry.</p>
  121. <p>So now I own a ward against malicious ghost RF: a handsome box, in which I store my keys.</p>
  122. <p>And so does everyone else it turns out! If you type <q>far–</q> into search on amazon.co.uk, the top two suggestions are:</p>
  123. <ul>
  124. <li>faraday pouch for car keys</li>
  125. <li>faraday box for car keys</li>
  126. </ul>
  127. <p>The third autocomplete:</p>
  128. <p>Don’t get that one. It is unlikely to help.</p>
  129. </article>
  130. <hr>
  131. <footer>
  132. <p>
  133. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  134. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  135. </svg> Accueil</a> •
  136. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  137. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  138. </svg> Suivre</a> •
  139. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  140. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  141. </svg> Pro</a> •
  142. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  143. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  144. </svg> Email</a> •
  145. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  146. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  147. </svg> Légal</abbr>
  148. </p>
  149. <template id="theme-selector">
  150. <form>
  151. <fieldset>
  152. <legend><svg class="icon icon-brightness-contrast">
  153. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  154. </svg> Thème</legend>
  155. <label>
  156. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  157. </label>
  158. <label>
  159. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  160. </label>
  161. <label>
  162. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  163. </label>
  164. </fieldset>
  165. </form>
  166. </template>
  167. </footer>
  168. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  169. <script>
  170. function loadThemeForm(templateName) {
  171. const themeSelectorTemplate = document.querySelector(templateName)
  172. const form = themeSelectorTemplate.content.firstElementChild
  173. themeSelectorTemplate.replaceWith(form)
  174. form.addEventListener('change', (e) => {
  175. const chosenColorScheme = e.target.value
  176. localStorage.setItem('theme', chosenColorScheme)
  177. toggleTheme(chosenColorScheme)
  178. })
  179. const selectedTheme = localStorage.getItem('theme')
  180. if (selectedTheme && selectedTheme !== 'undefined') {
  181. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  182. }
  183. }
  184. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  185. window.addEventListener('load', () => {
  186. let hasDarkRules = false
  187. for (const styleSheet of Array.from(document.styleSheets)) {
  188. let mediaRules = []
  189. for (const cssRule of styleSheet.cssRules) {
  190. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  191. continue
  192. }
  193. // WARNING: Safari does not have/supports `conditionText`.
  194. if (cssRule.conditionText) {
  195. if (cssRule.conditionText !== prefersColorSchemeDark) {
  196. continue
  197. }
  198. } else {
  199. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  200. continue
  201. }
  202. }
  203. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  204. }
  205. // WARNING: do not try to insert a Rule to a styleSheet you are
  206. // currently iterating on, otherwise the browser will be stuck
  207. // in a infinite loop…
  208. for (const mediaRule of mediaRules) {
  209. styleSheet.insertRule(mediaRule.cssText)
  210. hasDarkRules = true
  211. }
  212. }
  213. if (hasDarkRules) {
  214. loadThemeForm('#theme-selector')
  215. }
  216. })
  217. </script>
  218. </body>
  219. </html>