Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 26 additions & 4 deletions Docs/Blog/shorts/GUION-shorts.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,16 @@ Paleta SignsOfAI: `--bg:#0b1020` · léxico `#db2777` · retórico `#f59e0b` ·
| 5 | Dos idiomas | ✅ | ✅ | ✅ 25 s · 26 s |
| 6 | Reescritura | ✅ | ✅ | ✅ 25 s · 23 s |
| 7 | Escritorio | ✅ | ✅ | ✅ 25 s · 23 s |
| 8 | Artefactos | — | guion abajo | pendiente |
| 9 | Bibliografía inventada | — | guion abajo | pendiente |
| 10 | 61% / línea base | — | guion abajo | pendiente |
| 8 | Artefactos | ✅ | ✅ | ✅ 34,5 s · 30,0 s |
| 9 | Bibliografía inventada | ✅ | ✅ | ✅ 36,3 s · 35,5 s |
| 10 | 61% / línea base | ✅ | ✅ | ✅ 40,2 s · 37,4 s |
| 11 | El veredicto que nunca se dio | ✅ | ✅ | ✅ 35,5 s · 32,4 s |

Los renders están en `out/<id>.mp4` + `.srt`. Los 8–10 necesitan HTML antes de narrar.
Los renders están en `out/<id>.mp4` + `.srt`.

**Los 8–11 duran más que los 1–7** (29–40 s frente a 23–30). Siguen dentro del límite de
Shorts, pero el 10 es un tercio más largo que nada publicado antes: si la retención cae, el guion
es lo que hay que recortar, no la animación.

**Orden del pipeline:** narrar primero (`narrate-all.mjs`), sacar los tiempos de cue
(`cue-times.mjs`) y **después** escribir el HTML alrededor de la duración medida, porque los
Expand Down Expand Up @@ -100,6 +105,23 @@ y una marca cayendo dentro, en verde.
- **EN:** "Sixty-one percent. That is the share of essays by students writing in their second language that AI detectors flag as machine-written. Not of the cheats: of the essays. Because formal, careful writing looks like a machine, and that is how you write in a language you learned second. You do not fix that with a better detector. You fix it with a different question: not does this look like a machine, but does this look like the person who wrote the others. And if you write formally, your own baseline is already formal."



## Short 11 — "Un `if` que siempre era falso" (el veredicto que nunca se dio)
**Visual:** un documento arriba que se bifurca en dos tarjetas — igual que la portada del séptimo
artículo, para que quien vio una reconozca la otra. Izquierda: el contador sube a `90/100` y aparece
una barra ámbar sólida (el veredicto dicho). Derecha: el mismo `90/100` y una barra punteada
**tachada** (el veredicto ausente). Entra el `≠` entre las dos barras, no entre los números —
los números coinciden, ese es el chiste. Corte a la línea de código con
`RecommendedThreshold is { } threshold`, y `null` cayendo sobre ella en rojo, dos veces: `en`, `es`.
Cierre: `340 pruebas` y ninguna mirando ahí; luego la frase nueva, «Sin señales por encima del
umbral medido», apareciendo bajo las dos tarjetas ya iguales.
- **ES:** "Mi detector le puso noventa sobre cien a este texto y dijo: señales fuertes de escritura con inteligencia artificial. El informe que un profesor imprime y lleva a un comité, del mismo texto y en la misma ejecución, no dijo nada. Y no era un caso raro: no había emitido un veredicto nunca, en ningún idioma. Una condición pedía un umbral que ningún idioma tenía. Yo tenía trescientas cuarenta pruebas. Ninguna comparaba las dos caras entre sí."
- **EN:** "My detector scored this text ninety out of a hundred and called it strong signs of A I writing. The report a teacher prints and carries to a committee, same text, same run, said nothing at all. And that was not a rare case: it had never given a verdict, not once, in any language. One condition asked for a threshold that no language had. I had three hundred and forty tests. Not one of them compared the two faces."

**Por qué este short y no otro:** es el único de la serie donde la herramienta queda mal, y por eso
funciona. Los diez anteriores explican algo que hace bien; este cuenta que se contradecía a sí misma
y que lo publicamos igual.

---

## Build (una vez existan los HTML de cada short)
Expand Down
65 changes: 65 additions & 0 deletions Docs/Blog/shorts/en/short10-linea-base.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>
/* Timed to the measured narration (36.0s). Cues from cue-times.mjs:
8.1s "Not of the cheats" · 10.8s "Because formal" · 22.1s "You fix it with" · 33.7s "your own baseline". */
html,body{margin:0;padding:0}
body{width:1080px;height:1920px;overflow:hidden;position:relative;
background:radial-gradient(700px 700px at 78% 10%,rgba(240,85,111,.20),transparent 60%),
radial-gradient(700px 700px at 18% 66%,rgba(47,210,122,.14),transparent 60%),
linear-gradient(165deg,#0b1020,#0d1428 55%,#111a2e);
color:#eaf1fb;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;text-align:center}
@keyframes rv{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
@keyframes cross{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dim{to{opacity:.34}}
@keyframes marker{from{opacity:0;left:8%}to{opacity:1;left:47%}}
.brand{position:absolute;top:80px;width:100%;display:flex;align-items:center;justify-content:center;gap:20px;font-weight:800;font-size:44px}
.bmark{width:60px;height:60px;border-radius:16px;background:conic-gradient(from 210deg,#db2777,#f59e0b,#22b8cf,#f0556f,#db2777);box-shadow:0 0 0 1px rgba(255,255,255,.15)}
/* The number this opens with, and that almost nobody quotes. */
.pct{position:absolute;top:206px;width:100%;font-size:230px;font-weight:900;color:#f0556f;line-height:1;opacity:0;animation:pop .8s .9s forwards}
.cap{position:absolute;top:472px;left:90px;right:90px;font-size:46px;line-height:1.3;color:#eaf1fb;opacity:0;animation:rv .6s 3.2s forwards}
.cap b{color:#f0556f}
.notcheats{position:absolute;top:650px;width:100%;font-size:52px;font-weight:900;opacity:0;animation:rv .6s 8.1s forwards}
.notcheats s{color:#7c8aa6;text-decoration-color:#f0556f}
.why{position:absolute;top:754px;left:80px;right:80px;border-radius:18px;padding:26px 30px;font-size:42px;line-height:1.34;
background:rgba(10,18,35,.85);border:2px solid rgba(255,255,255,.12);color:#9aa8ff;opacity:0;animation:rv .6s 10.8s forwards}
.why b{color:#eaf1fb;font-weight:900}
/* The two questions. The first is struck out; the second is the useful one. */
.q{position:absolute;left:80px;right:80px;border-radius:18px;padding:28px 30px;font-size:44px;font-weight:800;opacity:0}
.q1{top:1000px;background:rgba(240,85,111,.08);border:2px solid rgba(240,85,111,.34);color:#ffb9c6;
animation:rv .5s 22.1s forwards, dim .6s 23.3s forwards}
.q1::after{content:"";position:absolute;left:6%;right:6%;top:50%;height:5px;border-radius:3px;background:#f0556f;
transform:scaleX(0);transform-origin:left;animation:cross .5s 23.3s forwards}
.q2{top:1154px;background:rgba(47,210,122,.10);border:2px solid rgba(47,210,122,.45);color:#eaf1fb;
animation:rv .5s 24.3s forwards}
.q2 b{color:#2fd27a}
/* Their own range, not ours: the mark falls inside it. */
.scale{position:absolute;top:1370px;left:90px;right:90px;height:96px}
.track{position:absolute;top:36px;left:0;right:0;height:22px;border-radius:11px;background:rgba(124,138,166,.22)}
.band{position:absolute;top:36px;left:26%;width:48%;height:22px;border-radius:11px;background:rgba(47,210,122,.42)}
.mark{position:absolute;top:20px;width:22px;height:54px;border-radius:11px;background:#2fd27a;opacity:0;
box-shadow:0 0 22px rgba(47,210,122,.7);animation:marker .9s 29.2s forwards}
.slabel{position:absolute;top:1482px;width:100%;font-size:38px;color:#7c8aa6;opacity:0;animation:rv .5s 30.2s forwards}
.foot{position:absolute;bottom:150px;width:100%;opacity:0;animation:rv .8s 33.7s forwards}
.foot .big{font-size:52px;font-weight:900;line-height:1.24}
.foot .big b{background:linear-gradient(90deg,#2fd27a,#4aa8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
</style></head><body>
<div class="brand"><span class="bmark"></span> SignsOfAI</div>

<div class="pct">61%</div>
<div class="cap">of essays by people writing in <b>their second language</b>, flagged as AI</div>

<div class="notcheats"><s>Not of the cheats.</s> Of the essays.</div>
<div class="why">Formal, careful writing <b>looks like a machine</b>, and that is how you write in a language you learned second.</div>

<div class="q q1">Does this look like a machine?</div>
<div class="q q2">Does it look like <b>whoever wrote the others</b>?</div>

<div class="scale">
<div class="track"></div>
<div class="band"></div>
<div class="mark"></div>
</div>
<div class="slabel">their own range, measured on their own work</div>

<div class="foot"><div class="big">If you write formally,<br><b>your baseline is already formal.</b></div></div>
</body></html>
74 changes: 74 additions & 0 deletions Docs/Blog/shorts/en/short11-veredicto.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>
/* Timed to the measured narration (31.0s). Cues from cue-times.mjs:
7.4s "The report" · 17.1s "it had never" · 21.3s "One condition" · 26.0s "three hundred".
The two cards deliberately repeat the seventh cover, so whoever saw one recognises the other. */
html,body{margin:0;padding:0}
body{width:1080px;height:1920px;overflow:hidden;position:relative;
background:radial-gradient(700px 700px at 82% 8%,rgba(245,158,11,.16),transparent 60%),
radial-gradient(700px 700px at 14% 62%,rgba(109,124,255,.16),transparent 60%),
linear-gradient(165deg,#0b1020,#0d1428 55%,#111a2e);
color:#eaf1fb;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;text-align:center}
@keyframes rv{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drop{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
.brand{position:absolute;top:80px;width:100%;display:flex;align-items:center;justify-content:center;gap:20px;font-weight:800;font-size:44px}
.bmark{width:60px;height:60px;border-radius:16px;background:conic-gradient(from 210deg,#db2777,#f59e0b,#22b8cf,#f0556f,#db2777);box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.title{position:absolute;top:186px;width:100%;font-size:74px;font-weight:900;line-height:1.14;opacity:0;animation:rv .7s .3s forwards}
.title b{color:#f59e0b}
.card{position:absolute;left:80px;right:80px;border-radius:24px;padding:30px 40px 38px;opacity:0}
.tag{font-size:34px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#7c8aa6}
.score{font-size:150px;font-weight:900;line-height:1;margin-top:4px;font-variant-numeric:tabular-nums}
.score span{font-size:48px;font-weight:700;opacity:.5}
.vbar{height:26px;border-radius:13px;margin:26px auto 0;width:70%}
/* Top: the command line. It states a verdict. */
.a{top:396px;background:rgba(245,158,11,.08);border:3px solid rgba(245,158,11,.42);animation:rv .7s 2.4s forwards}
.a .score{color:#f59e0b}
.a .vbar{background:#f59e0b}
/* Below: the report that goes to a committee. Same text, and it says nothing. */
.b{top:1004px;background:rgba(124,138,166,.06);border:3px solid rgba(124,138,166,.24);animation:rv .7s 7.4s forwards}
.b .score{color:#7c8aa6;opacity:.8}
.b .vbar{background:none;border:3px dashed rgba(124,138,166,.5);position:relative}
.b .vbar::after{content:"";position:absolute;left:6%;right:6%;top:50%;height:4px;border-radius:2px;
background:rgba(124,138,166,.75);transform:scaleX(0);transform-origin:left;animation:strike .5s 9.4s forwards}
/* The ≠ sits between the bars, not the numbers: the numbers agree. */
.neq{position:absolute;top:872px;left:50%;transform:translateX(-50%);width:132px;height:132px;border-radius:50%;
background:#0b1020;border:5px solid #f0556f;color:#f0556f;font-size:82px;font-weight:900;line-height:126px;opacity:0;animation:pop .5s 17.1s forwards}
.code{position:absolute;top:1330px;left:80px;right:80px;border-radius:18px;padding:26px 30px;text-align:left;
background:rgba(10,18,35,.9);border:2px solid rgba(255,255,255,.12);font-family:Consolas,'DejaVu Sans Mono',monospace;
font-size:33px;line-height:1.5;color:#9aa8ff;opacity:0;animation:rv .6s 21.3s forwards}
.code em{color:#7c8aa6;font-style:normal}
.nulls{position:absolute;top:1508px;width:100%;display:flex;gap:26px;justify-content:center}
.n{padding:12px 30px;border-radius:999px;font-size:38px;font-weight:800;font-family:Consolas,monospace;
background:rgba(240,85,111,.14);color:#f0556f;border:2px solid rgba(240,85,111,.45);opacity:0}
.n1{animation:drop .4s 23.1s forwards}.n2{animation:drop .4s 23.7s forwards}
.tests{position:absolute;top:1606px;width:100%;font-size:44px;font-weight:800;color:#7c8aa6;opacity:0;animation:rv .5s 26.0s forwards}
.tests b{color:#eaf1fb;font-size:52px}
.foot{position:absolute;bottom:96px;width:100%;opacity:0;animation:rv .8s 28.6s forwards}
.foot .big{font-size:46px;font-weight:900;line-height:1.26}
.foot .big b{background:linear-gradient(90deg,#f59e0b,#f0556f);-webkit-background-clip:text;background-clip:text;color:transparent}
</style></head><body>
<div class="brand"><span class="bmark"></span> SignsOfAI</div>
<div class="title">An <b>if</b> that was<br>always false</div>

<div class="card a">
<div class="tag">command line</div>
<div class="score">90<span>/100</span></div>
<div class="vbar"></div>
</div>

<div class="neq">≠</div>

<div class="card b">
<div class="tag">the report that goes to a committee</div>
<div class="score">90<span>/100</span></div>
<div class="vbar"></div>
</div>

<div class="code">RecommendedThreshold is { } threshold<br><em>// the threshold measured for that language</em></div>
<div class="nulls"><span class="n n1">en → null</span><span class="n n2">es → null</span></div>

<div class="tests"><b>340</b> tests · not one compared the two</div>

<div class="foot"><div class="big">Now it says what it measured:<br><b>&ldquo;No signs above the measured boundary&rdquo;</b></div></div>
</body></html>
65 changes: 65 additions & 0 deletions Docs/Blog/shorts/en/short8-artefactos.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>
/* Timed to the measured narration (28.6s). Cues from cue-times.mjs:
5.0s "Swap the Latin" · 13.1s "Seven detectors" · 17.4s "Now SignsOfAI" · 22.8s "A percentage". */
html,body{margin:0;padding:0}
body{width:1080px;height:1920px;overflow:hidden;position:relative;
background:radial-gradient(700px 700px at 80% 10%,rgba(240,85,111,.18),transparent 60%),
radial-gradient(700px 700px at 16% 60%,rgba(109,124,255,.16),transparent 60%),
linear-gradient(165deg,#0b1020,#0d1428 55%,#111a2e);
color:#eaf1fb;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;text-align:center}
@keyframes rv{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes flip{0%{transform:rotateY(0);color:#eaf1fb}49%{transform:rotateY(90deg)}50%{color:#f0556f}100%{transform:rotateY(360deg);color:#f0556f}}
@keyframes fade{to{opacity:0}}
.brand{position:absolute;top:80px;width:100%;display:flex;align-items:center;justify-content:center;gap:20px;font-weight:800;font-size:44px}
.bmark{width:60px;height:60px;border-radius:16px;background:conic-gradient(from 210deg,#db2777,#f59e0b,#22b8cf,#f0556f,#db2777);box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.title{position:absolute;top:184px;width:100%;font-size:70px;font-weight:900;line-height:1.14;opacity:0;animation:rv .7s .3s forwards}
.title b{color:#f0556f}
/* The word. One letter turns and stops being Latin. */
.word{position:absolute;top:404px;width:100%;font-size:190px;font-weight:900;letter-spacing:.02em;font-family:Consolas,'DejaVu Sans Mono',monospace;opacity:0;animation:rv .6s 1.8s forwards}
.word i{display:inline-block;font-style:normal;animation:flip .9s 5.0s forwards}
.same{position:absolute;top:620px;width:100%;font-size:40px;color:#7c8aa6;opacity:0;animation:rv .5s 6.4s forwards}
.cp{position:absolute;top:684px;width:100%;font-size:44px;font-weight:800;font-family:Consolas,monospace;color:#f0556f;opacity:0;animation:pop .5s 6.0s forwards}
/* The signal count, collapsing while nothing on screen changes. */
.count{position:absolute;top:800px;width:100%;display:flex;align-items:center;justify-content:center;gap:40px;opacity:0;animation:rv .6s 8.6s forwards}
.num{font-size:132px;font-weight:900;font-variant-numeric:tabular-nums}
.was{color:#f59e0b}.now{color:#2fd27a}
.arrow{font-size:76px;color:#7c8aa6}
.clabel{position:absolute;top:952px;width:100%;font-size:38px;color:#7c8aa6;opacity:0;animation:rv .5s 9.2s forwards}
/* Seven detectors, below chance. */
.paper{position:absolute;top:1050px;left:80px;right:80px;border-radius:20px;padding:26px 32px;
background:rgba(240,85,111,.10);border:2px solid rgba(240,85,111,.36);opacity:0;animation:rv .6s 13.1s forwards}
.paper .k{font-size:40px;font-weight:800;color:#ffb9c6}
.paper .v{font-size:58px;font-weight:900;margin-top:8px;font-variant-numeric:tabular-nums}
.paper .v s{color:#7c8aa6;text-decoration-color:#f0556f}
/* What SignsOfAI returns now: not an opinion, a coordinate. */
.rep{position:absolute;top:1268px;left:80px;right:80px;border-radius:18px;padding:24px 30px;text-align:left;
background:rgba(10,18,35,.9);border:2px solid rgba(255,255,255,.12);font-family:Consolas,'DejaVu Sans Mono',monospace;
font-size:34px;line-height:1.55;color:#9aa8ff;opacity:0;animation:rv .6s 17.4s forwards}
.rep b{color:#f0556f;font-weight:800}
.rep em{color:#7c8aa6;font-style:normal}
.zero{position:absolute;top:1494px;width:100%;font-size:42px;font-weight:800;color:#2fd27a;opacity:0;animation:rv .5s 19.6s forwards}
.foot{position:absolute;bottom:150px;width:100%;opacity:0;animation:rv .8s 22.8s forwards}
.foot .big{font-size:58px;font-weight:900;line-height:1.22}
.foot .big b{background:linear-gradient(90deg,#f59e0b,#f0556f);-webkit-background-clip:text;background-clip:text;color:transparent}
</style></head><body>
<div class="brand"><span class="bmark"></span> SignsOfAI</div>
<div class="title">Find and replace<br><b>switches off a detector</b></div>

<div class="word">d<i>e</i>lve</div>
<div class="cp">U+0435 · Cyrillic &ldquo;е&rdquo;</div>
<div class="same">Nothing changes on screen</div>

<div class="count"><span class="num was">17</span><span class="arrow">→</span><span class="num now">6</span></div>
<div class="clabel">signals found, same paragraph</div>

<div class="paper">
<div class="k">7 detectors, COLING 2025</div>
<div class="v"><s>MCC 0.64</s> → −0.01</div>
</div>

<div class="rep">character <b>U+0435</b> CYRILLIC SMALL LETTER IE<br><em>line 37, column 64</em></div>
<div class="zero">contributes 0 to the score</div>

<div class="foot"><div class="big">A score is arguable.<br><b>A character is there or it is not.</b></div></div>
</body></html>
Loading
Loading