Complete rework of highlights (marks)

RodionfromHSE · Nov 27, 2023 · a6aa671 · a6aa671
1 parent 26e341c
commit a6aa671
Show file tree

Hide file tree

Showing 10 changed files with 325 additions and 200 deletions.
diff --git a/web/src/components/InvisibleMark.tsx b/web/src/components/InvisibleMark.tsx
@@ -1,36 +1,66 @@
-import { TokenProbScore, TranslationData } from "@/highlighting/context.ts";
+import { TokenProbScore } from "@/highlighting/dataclasses.ts";
 
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/hover-card.tsx";
 import SynonymsList from "@/components/SynonymsList.tsx";
+import { useEffect, useState } from "react";
+import { Controller } from "@/highlighting/Controller.ts";
+
+export class MarkId {
+  constructor(index: number, pos: number) {
+    this.index = index;
+    this.pos = pos;
+  }
+
+  index: number;
+  pos: number;
+
+  toInt() {
+    const sign = this.index == 0 ? 1 : -1;
+    return sign * (this.pos + 1);
+  }
+
+  equals(other: MarkId) {
+    return this.index == other.index && this.pos == other.pos;
+  }
+}
 
 export default function InvisibleMark(
   synonyms: TokenProbScore[] | undefined,
-  translationData: TranslationData,
-  highlight_other: any | undefined,
-  translation_index: number,
+  mark_id: MarkId,
+  controller: Controller,
 ) {
   return (props: any) => {
     let isOpened = false;
     let isHovered = false;
 
-    // FIXME: still buggy
+    const [isKilled, setIsKilled] = useState(false);
+
     function updateHighlights() {
-      console.log("updateHighlights: " + isOpened + " " + isHovered);
       if (isOpened || isHovered) {
-        if (highlight_other) {
-          translationData.controller.setHighlights[1 - translation_index](
-            highlight_other,
-          );
-        }
+        controller.activateMark(mark_id);
       } else {
-        translationData.updateDefault();
+        controller.deactivateMark(mark_id);
       }
     }
 
+    const baseClassName = "my-invisible text-primary";
+    const [className, setClassName] = useState(baseClassName);
+
+    function setAttention(attn_style: string) {
+      if (attn_style == "killed") {
+        setIsKilled(true);
+      }
+      setClassName(baseClassName + " " + attn_style);
+    }
+
+    useEffect(() => {
+      controller.registerMark(mark_id, setAttention);
+    }, []);
+
     return (
       <>
         <HoverCard
@@ -41,7 +71,7 @@ export default function InvisibleMark(
         >
           <HoverCardTrigger asChild>
             <mark
-              className={"my-invisible text-primary"}
+              className={className}
               onMouseOver={() => {
                 isHovered = true;
                 updateHighlights();
@@ -54,7 +84,7 @@ export default function InvisibleMark(
               {props.children}
             </mark>
           </HoverCardTrigger>
-          {synonyms && (
+          {synonyms && !isKilled && (
             <HoverCardContent className="w-50">
               <SynonymsList synonyms={synonyms} />
             </HoverCardContent>

diff --git a/web/src/components/SynonymsList.tsx b/web/src/components/SynonymsList.tsx
@@ -1,4 +1,4 @@
-import { TokenProbScore } from "@/highlighting/context.ts";
+import { TokenProbScore } from "@/highlighting/dataclasses.ts";
 
 export default function SynonymsList({
   synonyms,

diff --git a/web/src/components/TranslationModule.tsx b/web/src/components/TranslationModule.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { useState } from "react";
 import TranslationTextarea from "./TranslationTextarea";
 import { Controller } from "@/highlighting/Controller.ts";
-import { TranslationData } from "@/highlighting/context.ts";
+import { TranslationData } from "@/highlighting/dataclasses.ts";
 import { Skeleton } from "@/components/ui/skeleton.tsx";
 import { GradioTranslation } from "@/service/gradio-translation.ts";
 
@@ -18,28 +18,38 @@ export default function TranslationModule() {
 
   const [isTranslated, setIsTranslated] = useState(false);
 
-  const controller = new Controller(
-    [inputSetValue, outputSetValue],
-    [inputSetHighlight, outputSetHighlight],
+  const [controller, _] = useState(
+    new Controller(
+      [inputSetValue, outputSetValue],
+      [inputSetHighlight, outputSetHighlight],
+    ),
   );
 
   const [isLoading, setIsLoading] = useState(false);
   const translationService = new GradioTranslation();
 
   function translate() {
-    if (inputValue === "" || isLoading || isTranslated) {
+    if (inputValue === "" || isLoading) {
       return;
     }
     console.log("To be translated: " + inputValue);
     setIsLoading(true);
-    const result = translationService.predict(inputValue);
-    result.then((tokens) => {
-      console.log("Translated: " + tokens);
+
+    // Translation
+    try {
+      const result = translationService.predict(inputValue);
+      result.then((tokens) => {
+        console.log("Translated: " + tokens);
+        setIsLoading(false);
+        setIsTranslated(true);
+        const translationData = new TranslationData(tokens);
+        controller.setTranslationData(translationData);
+      });
+    } catch (e) {
+      console.error(e);
       setIsLoading(false);
-      setIsTranslated(true);
-      const translationData = new TranslationData(tokens, controller);
-      translationData.updateDefault();
-    });
+      alert("Translation failed. Please try again.");
+    }
   }
 
   function clearInput() {
@@ -50,6 +60,13 @@ export default function TranslationModule() {
     setIsTranslated(false);
   }
 
+  function handleInput(inputText: string) {
+    inputSetValue(inputText);
+    if (isTranslated && inputText !== inputValue) {
+      controller.sendGlobalKill();
+    }
+  }
+
   return (
     <>
       {/* Content */}
@@ -60,16 +77,16 @@ export default function TranslationModule() {
           <TranslationTextarea
             highlight={inputHighlight}
             value={inputValue}
-            onChange={inputSetValue}
+            onChange={handleInput}
             elementId={"textToTranslate"}
             placeholder={"Enter text here..."}
-            readOnly={isTranslated || isLoading}
+            readOnly={isLoading}
           />
           <div className="mt-4">
             <Button
               className="primary"
               onClick={translate}
-              disabled={isLoading || isTranslated}
+              disabled={isLoading}
             >
               Translate
             </Button>{" "}

diff --git a/web/src/components/highlights.css b/web/src/components/highlights.css
@@ -1,28 +1,23 @@
 /* attention highlights gradations */
 
 .attn5 {
-    border-radius: 3px;
-    background-color: #98b7f8e0;
+    background-color: #98b7f8e0 !important;
 }
 
 .attn4 {
-    border-radius: 3px;
-    background-color: #98b7f8c0;
+    background-color: #98b7f8c0 !important;
 }
 
 .attn3 {
-    border-radius: 3px;
-    background-color: #98b7f8a0;
+    background-color: #98b7f8a0 !important;
 }
 
 .attn2 {
-    border-radius: 3px;
-    background-color: #98b7f880;
+    background-color: #98b7f880 !important;
 }
 
 .attn1 {
-    border-radius: 3px;
-    background-color: #98b7f860;
+    background-color: #98b7f860 !important;
 }
 
 mark.my-invisible {
@@ -34,3 +29,8 @@ mark.my-invisible {
 mark.my-invisible:hover {
   background-color: #98b7f8e0;
 }
+
+mark.killed:hover {
+  background-color: transparent !important;
+  cursor: text !important;
+}