Snapshot

.gitignore

@@ -1,3 +1,4 @@
 /.aider*
 /.env
 /.venv/
+/__pycache__/

frontend/src/components/TokenChip.tsx

@@ -1,10 +1,62 @@
-import React from "react"
-
-export const TokenChip = ({ token, logprob, threshold }: { token: string, logprob: number, threshold: number }) => {
-  return <span
-    title={logprob.toFixed(2)}
-    className={`token-chip ${logprob < threshold ? "flagged" : ""}`}
-  >
-    {token}
-  </span>
+import React, { useState } from "react"
+
+import React, { useState } from "react"
+
+export const TokenChip = ({
+  token,
+  logprob,
+  threshold,
+  replacements,
+  onReplace
+}: {
+  token: string,
+  logprob: number,
+  threshold: number,
+  replacements: string[],
+  onReplace: (newToken: string) => void
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleClick = () => {
+    if (logprob < threshold && replacements.length > 0) {
+      setIsExpanded(true);
+    }
+  }
+
+  const handleReplacement = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newToken = event.target.value
+    if (newToken !== token) {
+      onReplace(newToken)
+    }
+    setIsExpanded(false);
+  }
+
+  return (
+    <span
+      title={logprob.toFixed(2)}
+      className={`token-chip ${logprob < threshold ? "flagged" : ""}`}
+      style={{ position: "relative", cursor: logprob < threshold ? "pointer" : "default" }}
+      onClick={handleClick}
+    >
+      {token}
+      {isExpanded && (
+        <select
+          onChange={handleReplacement}
+          value={token}
+          style={{
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 1000
+          }}
+          size={replacements.length}
+          autoFocus
+        >
+          {replacements.map((rep, idx) => (
+            <option key={idx} value={rep}>{rep}</option>
+          ))}
+        </select>
+      )}
+    </span>
+  )
 }

frontend/src/components/app.tsx

@@ -8,10 +8,14 @@ interface Word {
 }
 
 async function checkText(text: string): Promise<Word[]> {
-  await new Promise(resolve => setTimeout(resolve, 3000));
+  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"] }))
+  return words.map(word => ({
+    text: word,
+    logprob: -word.length,
+    replacements: word.length < 4 ? [] : ["foo", "bar"]
+  }))
 }
 
 // Add a new Spinner component
@@ -26,7 +30,7 @@ export default function App() {
   const [context, setContext] = useState("")
   const [wordlist, setWordlist] = useState("")
   const [showWholePrompt, setShowWholePrompt] = useState(false)
-  const [text, setText] = useState("")
+  const [text, setText] = useState("The cumbersomely quick brown fox jumps over the conspicuously lazy dog.")
   const [mode, setMode] = useState<"edit" | "check">("edit")
   const [words, setWords] = useState<Word[]>([])
   const [isLoading, setIsLoading] = useState(false)
@@ -46,6 +50,14 @@ export default function App() {
     }
   }
 
+  const handleReplace = (index: number, newToken: string) => {
+    const updatedWords = [...words]
+    updatedWords[index].text = newToken
+    setWords(updatedWords)
+    setText(updatedWords.map(w => w.text).join(""))
+    setMode("edit")
+  }
+
   let result
 
   if (mode === "edit") {
@@ -66,6 +78,8 @@ export default function App() {
               token={word.text}
               logprob={word.logprob}
               threshold={threshold}
+              replacements={word.replacements}
+              onReplace={(newToken) => handleReplace(index, newToken)}
             />
           ))}
         </div>

requirements.txt

@@ -4,3 +4,4 @@ ipywidgets
 transformers
 torch
 huggingface_hub
+fastapi[standard]