Snapshot

completions.py

@@ -3,8 +3,6 @@ import time
 import torch
 from transformers import AutoTokenizer, AutoModelForCausalLM, PreTrainedModel, PreTrainedTokenizer, PreTrainedTokenizerFast, BatchEncoding
 from transformers.generation.utils import GenerateOutput
-from typing import cast
-from dataclasses import dataclass
 
 from models import ApiWord, Word
 

frontend/package.json

@@ -1,15 +1,10 @@
 {
-  "name": "frontend",
-  "version": "1.0.0",
-  "main": "index.js",
+  "name": "gpted-frontend",
   "type": "module",
   "scripts": {
     "build": "node esbuild.js",
     "watch": "node esbuild.js --watch"
   },
-  "author": "",
-  "license": "ISC",
-  "description": "",
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

frontend/src/components/App.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { WordChip } from "./WordChip"
-import Spinner from "./Spinner"
+import { Spinner } from "./Spinner"
 
 interface Word {
   text: string
@@ -9,10 +9,11 @@ interface Word {
 }
 
 async function checkText(text: string): Promise<Word[]> {
-  const response = await fetch(`/check?text=${text}`)
-  const data = await response.json()
-  console.log(data)
-  return data.words
+  const encodedText = encodeURIComponent(text);
+  const response = await fetch(`/check?text=${encodedText}`);
+  const data = await response.json();
+  console.log(data);
+  return data.words;
 }
 
 export default function App() {

frontend/src/components/Spinner.tsx

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

frontend/src/components/WordChip.tsx

@@ -1,20 +1,23 @@
 import React, { useState, useEffect, useRef } from "react"
 
-export const WordChip = ({
+interface WordChipProps {
+  word: string;
+  logprob: number;
+  threshold: number;
+  replacements: string[];
+  onReplace: (newWord: string) => Promise<void>;
+}
+
+export function WordChip({
   word,
   logprob,
   threshold,
   replacements,
   onReplace
-}: {
-  word: string,
-  logprob: number,
-  threshold: number,
-  replacements: string[],
-  onReplace: (newWord: string) => void
-}) => {
+}: WordChipProps) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const dropdownRef = useRef<HTMLSelectElement>(null);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -35,12 +38,11 @@ export const WordChip = ({
     }
   }
 
-  const handleReplacement = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    console.log("handleReplacement", event.target.value)
-    const newWord = event.target.value
-    onReplace(newWord)
-    setIsExpanded(false);
-  }
+  const handleReplacement = async (newWord: string) => {
+    console.log("handleReplacement", newWord);
+    await onReplace(newWord);
+    setIsExpanded(false);  // Close the dropdown
+  };
 
   return (
     <span
@@ -51,24 +53,37 @@ export const WordChip = ({
     >
       {word}
       {isExpanded && (
-        <select
+        <div
           ref={dropdownRef}
-          onChange={handleReplacement}
-          value={word}
           style={{
             position: "absolute",
             top: "100%",
             left: 0,
-            zIndex: 1000,
-            overflowY: "auto"
+            zIndex: 100,
+            maxHeight: "400px",
+            overflowY: "auto",
+            backgroundColor: "white",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
           }}
-          size={replacements.length + 1}
         >
-          <option key="original" hidden>{word}</option>
-          {replacements.map((r, i) => (
-            <option key={i} value={r}>{r}</option>
+          {replacements.map((option, index) => (
+            <div
+              key={index}
+              onClick={() => handleReplacement(option)}
+              onMouseEnter={() => setSelectedIndex(index)}
+              style={{
+                padding: "5px 10px",
+                cursor: "pointer",
+                color: "black",
+                backgroundColor: selectedIndex === index ? "#f0f0f0" : "white"
+              }}
+            >
+              {option}
+            </div>
           ))}
-        </select>
+        </div>
       )}
     </span>
   )

main.py

@@ -7,26 +7,28 @@ from completions import check_text, load_model
 
 app = FastAPI()
 
-# model, tokenizer, device = load_model()
+model, tokenizer, device = load_model()
 
-def rep(i):
-    if i == 3:
-        return -10, [" jumped", " leaps"]
-    if i == 5:
-        return -10, [" calm"]
-    if i == 7:
-        return -10, [" dog", " cat", " bird", " fish"]
-    return -3, []
+def check_text_stub(text: str):
+    def rep(i):
+        if i == 3:
+            return -10, [" jumped", " leaps"]
+        if i == 5:
+            return -10, [" calm"]
+        if i == 7:
+            return -10, [" dog", " cat", " bird", " fish"]
+        return -3, []
 
-@lru_cache(maxsize=100)
-def cached_check_text(text: str):
-    # return check_text(text, model, tokenizer, device)
     result = []
     for i, w in enumerate(text.split()):
         logprob, replacements = rep(i)
         result.append(ApiWord(text=f" {w}", logprob=logprob, replacements=replacements))
     return result
 
+@lru_cache(maxsize=100)
+def cached_check_text(text: str):
+    return check_text(text, model, tokenizer, device)
+
 @app.get("/check", response_model=CheckResponse)
 def check(text: str):
     return CheckResponse(text=text, words=cached_check_text(text))