Hugging Face's logo

Spaces:
ENC-PSL
/
lrec2026-llm-annotator
Running

App Files Community
2
dhuser commited on
Commit
5b5cea5
·
1 Parent(s): c1ce9a3

Update automatic refresh

Browse files
Files changed (2) hide show
  1. static/app.js +4 -0
  2. static/index.html +4 -4
static/app.js CHANGED
@@ -241,6 +241,8 @@ function annotator() {
241
  this.applyState(data);
242
  },
243
 
 
 
244
  // Mutate state property-by-property and replace nested arrays with fresh references,
245
  // so Alpine reactivity detects every change (replacing `state` wholesale can silently
246
  // miss deep updates in x-for / :class bindings).
@@ -250,12 +252,14 @@ function annotator() {
250
  const v = newState[k];
251
  this.state[k] = Array.isArray(v) ? v.slice() : v;
252
  }
 
253
  },
254
 
255
  replaceSentence(sidx, sent) {
256
  const arr = this.state.sentences.slice();
257
  arr[sidx] = sent;
258
  this.state.sentences = arr;
 
259
  },
260
 
261
  // ----------- helpers -----------
 
241
  this.applyState(data);
242
  },
243
 
244
+ rev: 0, // bumped on every state mutation; used as x-for :key suffix to force re-render
245
+
246
  // Mutate state property-by-property and replace nested arrays with fresh references,
247
  // so Alpine reactivity detects every change (replacing `state` wholesale can silently
248
  // miss deep updates in x-for / :class bindings).
 
252
  const v = newState[k];
253
  this.state[k] = Array.isArray(v) ? v.slice() : v;
254
  }
255
+ this.rev++;
256
  },
257
 
258
  replaceSentence(sidx, sent) {
259
  const arr = this.state.sentences.slice();
260
  arr[sidx] = sent;
261
  this.state.sentences = arr;
262
+ this.rev++;
263
  },
264
 
265
  // ----------- helpers -----------
static/index.html CHANGED
@@ -24,7 +24,7 @@
24
  }
25
  }
26
  </script>
27
- <link rel="stylesheet" href="/static/styles.css">
28
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.10/dist/cdn.min.js"></script>
29
  </head>
30
  <body class="font-sans bg-ink-50 text-ink-900 min-h-screen" x-data="annotator()" x-init="init()" x-cloak>
@@ -209,7 +209,7 @@
209
  </template>
210
 
211
  <!-- Sentence cards -->
212
- <template x-for="(sent, sidx) in state.sentences" :key="sidx">
213
  <article class="card !p-0 overflow-hidden">
214
  <header class="px-4 py-2.5 bg-ink-50 border-b border-ink-200 flex items-center gap-3">
215
  <span class="font-mono text-xs text-ink-500" x-text="sent.id"></span>
@@ -246,7 +246,7 @@
246
 
247
  <div class="p-4">
248
  <div class="tokens-flow">
249
- <template x-for="(tok, tidx) in sent.tokens" :key="tidx">
250
  <button class="token"
251
  :class="tokenClass(sent, sidx, tidx, tok)"
252
  :title="tokenTooltip(sent, tidx)"
@@ -827,6 +827,6 @@
827
  </template>
828
  </div>
829
 
830
- <script src="/static/app.js"></script>
831
  </body>
832
  </html>
 
24
  }
25
  }
26
  </script>
27
+ <link rel="stylesheet" href="/static/styles.css?v=20260516a">
28
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.10/dist/cdn.min.js"></script>
29
  </head>
30
  <body class="font-sans bg-ink-50 text-ink-900 min-h-screen" x-data="annotator()" x-init="init()" x-cloak>
 
209
  </template>
210
 
211
  <!-- Sentence cards -->
212
+ <template x-for="(sent, sidx) in state.sentences" :key="sidx + '-' + rev">
213
  <article class="card !p-0 overflow-hidden">
214
  <header class="px-4 py-2.5 bg-ink-50 border-b border-ink-200 flex items-center gap-3">
215
  <span class="font-mono text-xs text-ink-500" x-text="sent.id"></span>
 
246
 
247
  <div class="p-4">
248
  <div class="tokens-flow">
249
+ <template x-for="(tok, tidx) in sent.tokens" :key="tidx + '-' + rev">
250
  <button class="token"
251
  :class="tokenClass(sent, sidx, tidx, tok)"
252
  :title="tokenTooltip(sent, tidx)"
 
827
  </template>
828
  </div>
829
 
830
+ <script src="/static/app.js?v=20260516a"></script>
831
  </body>
832
  </html>