Snapshot

frontend/public/index.css

@@ -121,13 +121,13 @@ details > summary {
   color: red;
 }
 
-span.token-chip {
+span.word-chip {
   background-color: #222222;
   color: white;
   padding: 2px;
 }
 
-span.token-chip.flagged {
+span.word-chip.flagged {
   background-color: #dd1111;
 }
 

frontend/src/components/{app.tsx → App.tsx}

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
-import { TokenChip } from "./TokenChip"
+import { WordChip } from "./WordChip"
+import Spinner from "./Spinner"
 
 interface Word {
   text: string
@@ -14,24 +15,6 @@ async function checkText(text: string): Promise<Word[]> {
   return data.words
 }
 
-async function checkText0(text: string): Promise<Word[]> {
-  await new Promise(resolve => setTimeout(resolve, 1000));
-
-  const words = text.split(/\b/)
-  return words.map(word => ({
-    text: word,
-    logprob: -word.length,
-    replacements: word.length < 4 ? [] : ["foo", "bar"]
-  }))
-}
-
-// Add a new Spinner component
-const Spinner = () => (
-  <div className="spinner-overlay">
-    <div className="spinner"></div>
-  </div>
-);
-
 export default function App() {
   const [threshold, setThreshold] = useState(-5.0)
   const [context, setContext] = useState("")
@@ -62,14 +45,13 @@ export default function App() {
     }
   }
 
-  const handleReplace = async (index: number, newToken: string) => {
+  const handleReplace = async (index: number, newWord: string) => {
     const updatedWords = [...words]
-    updatedWords[index].text = newToken
+    updatedWords[index].text = newWord
     updatedWords[index].logprob = 0
     updatedWords[index].replacements = []
     setWords(updatedWords)
     setText(updatedWords.map(w => w.text).join(""))
-    // setMode("edit")
     await check()
   }
 
@@ -88,13 +70,13 @@ export default function App() {
         {isLoading && <Spinner />}
         <div className="result">
           {words.map((word, index) => (
-            <TokenChip
+            <WordChip
               key={index}
-              token={word.text}
+              word={word.text}
               logprob={word.logprob}
               threshold={threshold}
               replacements={word.replacements}
-              onReplace={(newToken) => handleReplace(index, newToken)}
+              onReplace={(newWord) => handleReplace(index, newWord)}
             />
           ))}
         </div>

frontend/src/components/Spinner.tsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+const Spinner = () => (
+  <div className="spinner-overlay">
+    <div className="spinner"></div>
+  </div>
+);
+
+export default Spinner;

frontend/src/components/{TokenChip.tsx → WordChip.tsx}

@@ -1,17 +1,17 @@
 import React, { useState, useEffect, useRef } from "react"
 
-export const TokenChip = ({
-  token,
+export const WordChip = ({
+  word,
   logprob,
   threshold,
   replacements,
   onReplace
 }: {
-  token: string,
+  word: string,
   logprob: number,
   threshold: number,
   replacements: string[],
-  onReplace: (newToken: string) => void
+  onReplace: (newWord: string) => void
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const dropdownRef = useRef<HTMLSelectElement>(null);
@@ -36,26 +36,24 @@ export const TokenChip = ({
   }
 
   const handleReplacement = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const newToken = event.target.value
-    if (newToken !== token) {
-      onReplace(newToken)
-    }
+    const newWord = event.target.value
+    onReplace(newWord)
     setIsExpanded(false);
   }
 
   return (
     <span
       title={logprob.toFixed(2)}
-      className={`token-chip ${logprob < threshold ? "flagged" : ""}`}
+      className={`word-chip ${logprob < threshold ? "flagged" : ""}`}
       style={{ position: "relative", cursor: logprob < threshold ? "pointer" : "default" }}
       onClick={handleClick}
     >
-      {token}
+      {word}
       {isExpanded && (
         <select
           ref={dropdownRef}
           onChange={handleReplacement}
-          value={token}
+          value={word}
           style={{
             position: "absolute",
             top: "100%",
@@ -65,8 +63,8 @@ export const TokenChip = ({
           size={replacements.length}
           autoFocus
         >
-          {replacements.map((rep, idx) => (
-            <option key={idx} value={rep}>{rep}</option>
+          {replacements.map((r, i) => (
+            <option key={i} value={r}>{r}</option>
           ))}
         </select>
       )}

frontend/src/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { createRoot } from "react-dom/client"
-import App from "./components/app"
+import App from "./components/App"
 
 const app = document.getElementById("app")