From ae65aa34bf6358fea2c4227a3e5c6c20b47453e4 Mon Sep 17 00:00:00 2001
From: Pursottam6003 <rahulsah6003@gmail.com>
Date: Sun, 16 Jun 2024 17:14:19 +0530
Subject: [PATCH 1/6] added the implemented frontend for
 contextual-transliteration source

---
 src/redux/actions/api/LSFAPI/LSFAPI.js      | 42 ++++++++++++
 src/ui/pages/container/Label-Studio/LSF.jsx | 75 ++++++++++++++++++++-
 2 files changed, 116 insertions(+), 1 deletion(-)

diff --git a/src/redux/actions/api/LSFAPI/LSFAPI.js b/src/redux/actions/api/LSFAPI/LSFAPI.js
index fadef9d6..a024c765 100644
--- a/src/redux/actions/api/LSFAPI/LSFAPI.js
+++ b/src/redux/actions/api/LSFAPI/LSFAPI.js
@@ -36,6 +36,47 @@ const fetchAnnotation = async (taskID) => {
   }
 };
 
+
+const fetchTransliteration = async (sourceText,srcLng,tgtLng) => {
+  const url = 'https://api.dhruva.ekstep.ai/services/inference/transliteration';
+  const payload = {
+    input: [
+      {
+        source: sourceText,
+      },
+    ],
+    config: {
+      serviceId: 'ai4bharat/indicxlit--gpu-t4',
+      language: {
+        sourceLanguage: srcLng,
+        sourceScriptCode: '',
+        targetLanguage: tgtLng,
+        targetScriptCode: '',
+      },
+      isSentence: true,
+      numSuggestions: 0,
+    },
+    controlConfig: {
+      dataTracking: true,
+    },
+  };
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: 'uOQOvZAkdKQpaeZa5-K03k9SIXOtZFEIkdj995-lTz_bozcijCNgVye2jEGIRFQG',
+    },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  const data = await response.json();
+  return data;
+};
+
 const postAnnotation = async (
   result,
   task,
@@ -273,6 +314,7 @@ export {
   patchAnnotation,
   deleteAnnotation,
   fetchAnnotation,
+  fetchTransliteration,
   postReview,
   patchReview,
   patchSuperChecker,
diff --git a/src/ui/pages/container/Label-Studio/LSF.jsx b/src/ui/pages/container/Label-Studio/LSF.jsx
index 779f31ae..37bc9b58 100644
--- a/src/ui/pages/container/Label-Studio/LSF.jsx
+++ b/src/ui/pages/container/Label-Studio/LSF.jsx
@@ -34,6 +34,7 @@ import {
   patchAnnotation,
   deleteAnnotation,
   fetchAnnotation,
+  fetchTransliteration,
 } from "../../../../redux/actions/api/LSFAPI/LSFAPI";
 import GetProjectDetailsAPI from "../../../../redux/actions/api/ProjectDetails/GetProjectDetails";
 import APITransport from "../../../../redux/actions/apitransport/apitransport";
@@ -51,6 +52,11 @@ import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import getTaskAssignedUsers from "../../../../utils/getTaskAssignedUsers";
 import LightTooltip from "../../component/common/Tooltip";
 import { labelConfigJS } from "./labelConfigJSX";
+import DatasetStyle from "../../../styles/Dataset";
+import { set } from "date-fns";
+import CustomButton from "../../component/common/Button";
+import CircularProgress from '@mui/material/CircularProgress';
+import LanguageCode from "../../../../utils/LanguageCode";
 
 const filterAnnotations = (
   annotations,
@@ -206,7 +212,9 @@ const LabelStudioWrapper = ({
   const [filterMessage, setFilterMessage] = useState(null);
   const [disableButton, setDisableButton] = useState(false);
   const [assignedUsers, setAssignedUsers] = useState(null);
-  //console.log("projectId, taskId", projectId, taskId);
+  const [translitrationData, setTransliterationData] = useState([]);
+  const [showSpinner , setShowSpinner] = useState(false);
+   //console.log("projectId, taskId", projectId, taskId);
   // debugger
   // const projectType = ProjectDetails?.project_type?.includes("Audio")
 
@@ -553,6 +561,12 @@ const LabelStudioWrapper = ({
                       temp[i].value.text = [temp[i].value.text[0]];
                     }
                   }
+                  setSnackbarInfo({
+                    open: true,
+                    message: "Please click on Check Transliteration button first",
+                    variant: "info",
+                  });
+                 
                   patchAnnotation(
                     taskId,
                     temp,
@@ -966,6 +980,36 @@ const LabelStudioWrapper = ({
     });
   };
 
+  const handleTranslitrationOnClick = async () => {
+    setShowSpinner(true)
+    const language = LanguageCode.languages 
+    let input_lng_code = ''
+    let output_lng_code = ''
+
+    language.filter((lang) => {
+      if(lang.label === taskData?.data?.input_language){
+        input_lng_code= lang.code
+      }
+      if(lang.label === taskData?.data?.output_language){
+        output_lng_code = lang.code
+      } 
+    })
+    const res = await fetchTransliteration(taskData?.data?.input_text,input_lng_code, output_lng_code);
+    if(res && res?.output) {
+      setTransliterationData(res);
+      setSnackbarInfo({
+        open: true,
+        message: "Transliteration Done",
+        variant: "success",
+      });
+      setShowSpinner(false)
+    }
+  }
+  
+   
+  
+ 
+ 
   const renderSnackBar = () => {
     return (
       <CustomizedSnackbars
@@ -1142,6 +1186,35 @@ const LabelStudioWrapper = ({
         >
           {tagSuggestionList}
         </Popover>
+
+        {!loader&&  ProjectDetails?.project_type?.includes("ContextualTranslationEditing") && 
+        <Grid container spacing={2}  style={{
+          display: "flex", flexDirection: "column", justifyContent: "right", alignItems: "flex-end", padding:"1%", width:"100%", alignItems:"flex-end", zIndex:"10", marginTop:"-30px"
+        }}>
+          <Grid item xs={12} >
+            <CustomButton
+              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
+              onClick={handleTranslitrationOnClick}
+              label="Check Transliteration"
+              disabled={showSpinner}
+            />
+          </Grid>
+
+          {translitrationData?.output && 
+          <Grid item xs={12} style={{width:"400px"}} className="ant-form-item-control-input-content">
+          <textarea rows="4" id="outlined-multiline-static"  
+            className="ant-input is-search"
+            label="Output tranliteration"
+            style={{width:"100%", height:"120px", lineHeight:"1.5715", maxWidth:"100%", minHeight:"32px", transition:"all .3s, height 0s", verticalAlign:"bottom"}}  
+            value={translitrationData?.output.map((item) => item.target).join(" ")}
+          />
+          </Grid> 
+          }
+        </Grid>
+
+        
+        }
+
       </Box>
       {!loader && ProjectDetails?.project_type?.includes("OCRSegmentCategorization") && 
           <>

From c8ef01de27351ec9a4cd844b1c13fbd8dfa7b9f8 Mon Sep 17 00:00:00 2001
From: Pursottam6003 <rahulsah6003@gmail.com>
Date: Tue, 18 Jun 2024 19:32:31 +0530
Subject: [PATCH 2/6] updated the frontend code for logging

---
 src/config/apiendpoint.js                     |  1 +
 .../PostTransliterationForLogging.js          | 45 +++++++++++++++++++
 src/redux/constants.js                        |  1 +
 3 files changed, 47 insertions(+)
 create mode 100644 src/redux/actions/api/Annotation/PostTransliterationForLogging.js

diff --git a/src/config/apiendpoint.js b/src/config/apiendpoint.js
index 52d1fff2..bd1c666e 100644
--- a/src/config/apiendpoint.js
+++ b/src/config/apiendpoint.js
@@ -16,6 +16,7 @@ const apiendpoint =  {
   authUser:"/users/auth/users/",
   functions:"/functions/",
   Glossary:"/v1/",
+  transliteration_log: "logs/transliteration-log/",
 };
 
 export default apiendpoint;
\ No newline at end of file
diff --git a/src/redux/actions/api/Annotation/PostTransliterationForLogging.js b/src/redux/actions/api/Annotation/PostTransliterationForLogging.js
new file mode 100644
index 00000000..fb642869
--- /dev/null
+++ b/src/redux/actions/api/Annotation/PostTransliterationForLogging.js
@@ -0,0 +1,45 @@
+import API from "../../../api";
+import ENDPOINTS from "../../../../config/apiendpoint";
+import constants from "../../../constants";
+
+export default class PostTransliterationForLogging extends API {
+  constructor(source_text, target_text, transliterated_text, timeout = 2000) {
+    super("POST", timeout, false);
+    this.transliterationLog = {
+      source_text: source_text,
+      target_text: target_text,
+      transliterated_text: transliterated_text
+    };
+    this.type = constants.POST_TRANSLITERATION_LOG;
+    this.endpoint = `${super.apiEndPointAuto()}${ENDPOINTS.transliteration_log}`;
+  }
+
+  processResponse(res) {
+    super.processResponse(res);
+    if (res) {
+      this.newTransliterationLog = res;
+    }
+  }
+
+  apiEndPoint() {
+    return this.endpoint;
+  }
+
+  getBody() {
+    return this.transliterationLog;
+  }
+
+  getHeaders() {
+    this.headers = {
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `JWT ${localStorage.getItem('shoonya_access_token')}`
+      },
+    };
+    return this.headers;
+  }
+
+  getPayload() {
+    return this.newTransliterationLog;
+  }
+}
diff --git a/src/redux/constants.js b/src/redux/constants.js
index c1aaae31..d2293df1 100644
--- a/src/redux/constants.js
+++ b/src/redux/constants.js
@@ -118,6 +118,7 @@ const constants = {
   SUBTITLES: "SUBTITLES",
   PATCH_ANNOTATION:"PATCH_ANNOTATION",
   UPDATE_UI_PREFS: "UPDATE_UI_PREFS",
+  POST_TRANSLITERATION_LOG : "POST_TRANSLITERATION_LOG"
   
 };
 

From af42d7b003cfb4821ad2bf0d23da1f35bf7a2738 Mon Sep 17 00:00:00 2001
From: Pursottam6003 <rahulsah6003@gmail.com>
Date: Thu, 20 Jun 2024 21:20:01 +0530
Subject: [PATCH 3/6] updated the function for contextual transcription editing

---
 .../PostTransliterationForLogging.js          |  10 +-
 src/ui/pages/container/Label-Studio/LSF.jsx   | 116 ++++++++++++++++--
 2 files changed, 112 insertions(+), 14 deletions(-)

diff --git a/src/redux/actions/api/Annotation/PostTransliterationForLogging.js b/src/redux/actions/api/Annotation/PostTransliterationForLogging.js
index fb642869..929cd55f 100644
--- a/src/redux/actions/api/Annotation/PostTransliterationForLogging.js
+++ b/src/redux/actions/api/Annotation/PostTransliterationForLogging.js
@@ -3,12 +3,14 @@ import ENDPOINTS from "../../../../config/apiendpoint";
 import constants from "../../../constants";
 
 export default class PostTransliterationForLogging extends API {
-  constructor(source_text, target_text, transliterated_text, timeout = 2000) {
+  constructor(source_text, target_text, orginal_romanised_text,edited_romanised_text,target_language, timeout = 2000) {
     super("POST", timeout, false);
     this.transliterationLog = {
-      source_text: source_text,
-      target_text: target_text,
-      transliterated_text: transliterated_text
+      source_english_text: source_text,
+      indic_translation_text: target_text[0],
+      romanised_text: orginal_romanised_text,
+      edited_romanised_text: edited_romanised_text,
+      language: target_language,
     };
     this.type = constants.POST_TRANSLITERATION_LOG;
     this.endpoint = `${super.apiEndPointAuto()}${ENDPOINTS.transliteration_log}`;
diff --git a/src/ui/pages/container/Label-Studio/LSF.jsx b/src/ui/pages/container/Label-Studio/LSF.jsx
index 37bc9b58..4f5cf9c8 100644
--- a/src/ui/pages/container/Label-Studio/LSF.jsx
+++ b/src/ui/pages/container/Label-Studio/LSF.jsx
@@ -57,6 +57,7 @@ import { set } from "date-fns";
 import CustomButton from "../../component/common/Button";
 import CircularProgress from '@mui/material/CircularProgress';
 import LanguageCode from "../../../../utils/LanguageCode";
+import PostTransliterationForLogging from "../../../../redux/actions/api/Annotation/PostTransliterationForLogging";
 
 const filterAnnotations = (
   annotations,
@@ -214,6 +215,9 @@ const LabelStudioWrapper = ({
   const [assignedUsers, setAssignedUsers] = useState(null);
   const [translitrationData, setTransliterationData] = useState([]);
   const [showSpinner , setShowSpinner] = useState(false);
+  const [originalRomanisedText, setOriginalRomanisedText] = useState("");
+  const [editedRomanisedText, setEditedRomanisedText] = useState("")
+  const [indicText, setIndicText] = useState("");
    //console.log("projectId, taskId", projectId, taskId);
   // debugger
   // const projectType = ProjectDetails?.project_type?.includes("Audio")
@@ -561,12 +565,16 @@ const LabelStudioWrapper = ({
                       temp[i].value.text = [temp[i].value.text[0]];
                     }
                   }
-                  setSnackbarInfo({
-                    open: true,
-                    message: "Please click on Check Transliteration button first",
-                    variant: "info",
-                  });
-                 
+                  if(originalRomanisedText.length==0  && projectType.includes("ContextualTranslationEditing")){
+                    setSnackbarInfo({
+                      open: true,
+                      message: "Please click on Check Transliteration button first",
+                      variant: "info",
+                    });
+                    // dont allow to move forward
+                    hideLoader();
+                  }
+                  
                   patchAnnotation(
                     taskId,
                     temp,
@@ -979,12 +987,78 @@ const LabelStudioWrapper = ({
       tasksComplete(res?.id || null);
     });
   };
+  useEffect(() => {
+    if (taskId) {
+      fetchAnnotationTask();
+    }
+  }, [taskId]);
+
+  const fetchAnnotationTask = async () => {
+    const res = await fetchAnnotation(taskId);
+    console.log(res);
+    if(res[0]?.result[0])
+    { 
+      setIndicText(res[0]?.result[0]?.value?.text);
+    }
+    setTaskData(res);
+    setAnnotations(res?.annotations);
+  };
+
+  // create a handleSubmitRomanisedText function
+  const handleSubmitRomanisedText = async () => {
+    if(taskData?.data?.input_text && taskData?.data?.input_language && taskData?.data?.output_language){
+      const language = LanguageCode.languages 
+      let output_lng_code = ''
 
+      language.filter((lang) => {
+        if(lang.label === taskData?.data?.input_language){
+          output_lng_code= lang.code
+        }
+      });
+
+      // Create a new instance of the class
+      const postTransliterationForLogging = new PostTransliterationForLogging(
+        taskData?.data?.input_text, 
+        indicText , 
+        originalRomanisedText, 
+        editedRomanisedText,
+        output_lng_code
+      );
+
+      const res = dispatch(APITransport(postTransliterationForLogging));
+      if(res){
+        console.log('response', res)
+        setTransliterationData([]);
+        setOriginalRomanisedText("");
+        setEditedRomanisedText("");
+        setSnackbarInfo({
+          open: true,
+          message: "Transliteration Logged",
+          variant: "success",
+        });
+        setShowSpinner(false)
+
+      }else{
+        setSnackbarInfo({
+          open: true,
+          message: "Error in logging transliteration",
+          variant: "error",
+        });
+        setShowSpinner(false)
+      }
+    }
+  }
+  
   const handleTranslitrationOnClick = async () => {
     setShowSpinner(true)
     const language = LanguageCode.languages 
     let input_lng_code = ''
     let output_lng_code = ''
+    if(taskData)
+      {
+        console.log(taskData)
+        console.log(annotationNotesRef.current.getEditor().getContents())
+      }
 
     language.filter((lang) => {
       if(lang.label === taskData?.data?.input_language){
@@ -997,6 +1071,10 @@ const LabelStudioWrapper = ({
     const res = await fetchTransliteration(taskData?.data?.input_text,input_lng_code, output_lng_code);
     if(res && res?.output) {
       setTransliterationData(res);
+      if(res?.output)
+      {
+        setOriginalRomanisedText(res?.output.map((item) => item.target).join(" "));
+      }
       setSnackbarInfo({
         open: true,
         message: "Transliteration Done",
@@ -1005,8 +1083,15 @@ const LabelStudioWrapper = ({
       setShowSpinner(false)
     }
   }
-  
+  useEffect(() => {
+    if(originalRomanisedText) {
+      setEditedRomanisedText(originalRomanisedText);
+    }
+  }, [originalRomanisedText]);
    
+  const handleEditableRomanisedText =(e)=>{
+    setEditedRomanisedText(e.target.value)
+  }
   
  
  
@@ -1191,13 +1276,20 @@ const LabelStudioWrapper = ({
         <Grid container spacing={2}  style={{
           display: "flex", flexDirection: "column", justifyContent: "right", alignItems: "flex-end", padding:"1%", width:"100%", alignItems:"flex-end", zIndex:"10", marginTop:"-30px"
         }}>
-          <Grid item xs={12} >
+          <Grid item xs={12}  style={{display:"flex", gap:"5px"}}>
             <CustomButton
               startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
               onClick={handleTranslitrationOnClick}
               label="Check Transliteration"
               disabled={showSpinner}
             />
+            {originalRomanisedText &&
+            <CustomButton
+              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
+              onClick={handleSubmitRomanisedText}
+              label="Submit"
+            />
+            }
           </Grid>
 
           {translitrationData?.output && 
@@ -1206,8 +1298,12 @@ const LabelStudioWrapper = ({
             className="ant-input is-search"
             label="Output tranliteration"
             style={{width:"100%", height:"120px", lineHeight:"1.5715", maxWidth:"100%", minHeight:"32px", transition:"all .3s, height 0s", verticalAlign:"bottom"}}  
-            value={translitrationData?.output.map((item) => item.target).join(" ")}
-          />
+            value={editedRomanisedText}
+            onChange = {handleEditableRomanisedText}
+          /> 
+           
+
+
           </Grid> 
           }
         </Grid>

From 41b74e46d877a4035ff4380a2ed9456894542ed3 Mon Sep 17 00:00:00 2001
From: Pursottam6003 <rahulsah6003@gmail.com>
Date: Thu, 20 Jun 2024 22:32:57 +0530
Subject: [PATCH 4/6] removed debugged console logs

---
 src/ui/pages/container/Label-Studio/LSF.jsx   |  14 +-
 .../container/Label-Studio/ReviewLSF.jsx      | 160 +++++++++++++++++-
 .../Label-Studio/SuperCheckerLSF.jsx          | 151 ++++++++++++++++-
 3 files changed, 308 insertions(+), 17 deletions(-)

diff --git a/src/ui/pages/container/Label-Studio/LSF.jsx b/src/ui/pages/container/Label-Studio/LSF.jsx
index 4f5cf9c8..a4ec73e6 100644
--- a/src/ui/pages/container/Label-Studio/LSF.jsx
+++ b/src/ui/pages/container/Label-Studio/LSF.jsx
@@ -52,8 +52,6 @@ import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import getTaskAssignedUsers from "../../../../utils/getTaskAssignedUsers";
 import LightTooltip from "../../component/common/Tooltip";
 import { labelConfigJS } from "./labelConfigJSX";
-import DatasetStyle from "../../../styles/Dataset";
-import { set } from "date-fns";
 import CustomButton from "../../component/common/Button";
 import CircularProgress from '@mui/material/CircularProgress';
 import LanguageCode from "../../../../utils/LanguageCode";
@@ -995,7 +993,7 @@ const LabelStudioWrapper = ({
 
   const fetchAnnotationTask = async () => {
     const res = await fetchAnnotation(taskId);
-    console.log(res);
+    // console.log(res);
     if(res[0]?.result[0])
     { 
       setIndicText(res[0]?.result[0]?.value?.text);
@@ -1027,7 +1025,6 @@ const LabelStudioWrapper = ({
 
       const res = dispatch(APITransport(postTransliterationForLogging));
       if(res){
-        console.log('response', res)
         setTransliterationData([]);
         setOriginalRomanisedText("");
         setEditedRomanisedText("");
@@ -1054,11 +1051,6 @@ const LabelStudioWrapper = ({
     const language = LanguageCode.languages 
     let input_lng_code = ''
     let output_lng_code = ''
-    if(taskData)
-      {
-        console.log(taskData)
-        console.log(annotationNotesRef.current.getEditor().getContents())
-      }
 
     language.filter((lang) => {
       if(lang.label === taskData?.data?.input_language){
@@ -1465,7 +1457,7 @@ export default function LSF() {
   useEffect(() => {
     fetchAnnotation(taskId).then((data) => {
       if (data && Array.isArray(data) && data.length > 0) {
-        console.log(annotationNotesRef);
+        // console.log(annotationNotesRef);
         annotationNotesRef.current.value = data[0].annotation_notes ?? "";
         reviewNotesRef.current.value = data[0].review_notes ?? "";
         try {
@@ -1473,7 +1465,7 @@ export default function LSF() {
             annotationNotesRef.current.value !== ""
               ? JSON.parse(annotationNotesRef.current.value)
               : "";
-          console.log(newDelta2);
+          // console.log(newDelta2);
           annotationNotesRef.current.getEditor().setContents(newDelta2);
         } catch (err) {
           if (err instanceof SyntaxError) {
diff --git a/src/ui/pages/container/Label-Studio/ReviewLSF.jsx b/src/ui/pages/container/Label-Studio/ReviewLSF.jsx
index e398a124..cdf5677b 100644
--- a/src/ui/pages/container/Label-Studio/ReviewLSF.jsx
+++ b/src/ui/pages/container/Label-Studio/ReviewLSF.jsx
@@ -41,6 +41,7 @@ import {
   getProjectsandTasks,
   getNextProject,
   fetchAnnotation,
+  fetchTransliteration,
   postReview,
   patchReview,
 } from "../../../../redux/actions/api/LSFAPI/LSFAPI";
@@ -53,7 +54,10 @@ import "./lsf.css";
 import { useSelector, useDispatch } from "react-redux";
 import { translate } from "../../../../config/localisation";
 import { labelConfigJS } from "./labelConfigJSX";
-
+import CustomButton from "../../component/common/Button";
+import CircularProgress from '@mui/material/CircularProgress';
+import LanguageCode from "../../../../utils/LanguageCode";
+import PostTransliterationForLogging from "../../../../redux/actions/api/Annotation/PostTransliterationForLogging";
 
 const StyledMenu = styled((props) => (
   <Menu
@@ -261,7 +265,11 @@ const LabelStudioWrapper = ({
   const [filterMessage, setFilterMessage] = useState(null);
   const [disableButton, setDisableButton] = useState(false);
   const [assignedUsers, setAssignedUsers] = useState(null);
- 
+  const [translitrationData, setTransliterationData] = useState([]);
+  const [showSpinner , setShowSpinner] = useState(false);
+  const [originalRomanisedText, setOriginalRomanisedText] = useState("");
+  const [editedRomanisedText, setEditedRomanisedText] = useState("")
+  const [indicText, setIndicText] = useState("");
   useEffect(() => {
     setPredictions(taskData?.data?.ocr_prediction_json);
   }, [taskData]);
@@ -575,7 +583,6 @@ useEffect(() => {
           let temp = annotation.serializeAnnotation();
           let ids = new Set();
           let countLables = 0;         
-          console.log(temp);
           temp.map((curr) => {
             if(curr.type !== "relation"){
               ids.add(curr.id);
@@ -631,6 +638,16 @@ useEffect(() => {
               let review = annotations.filter(
                 (annotation) => annotation.annotation_type === 2
               )[0];
+
+              if(originalRomanisedText.length==0  && projectType.includes("ContextualTranslationEditing")){
+                setSnackbarInfo({
+                  open: true,
+                  message: "Please click on Check Transliteration button first",
+                  variant: "info",
+                });
+                // dont allow to move forward
+                hideLoader();
+              }
               patchReview(
                 taskId,
                 review.id,
@@ -685,7 +702,7 @@ useEffect(() => {
         annotationNotesRef.current.value = normalAnnotation?.annotation_notes ?? "";
         superCheckerNotesRef.current.value = superCheckerAnnotation?.supercheck_notes ?? "";
         reviewNotesRef.current.value =  userAnnotation?.review_notes ?? "";
-        console.log(annotationNotesRef,typeof(annotationNotesRef.current.value));
+        // console.log(annotationNotesRef,typeof(annotationNotesRef.current.value));
         try {
           const newDelta2 = annotationNotesRef.current.value !== "" ? JSON.parse(annotationNotesRef.current.value) : "";
           annotationNotesRef.current.getEditor().setContents(newDelta2);
@@ -1153,7 +1170,104 @@ useEffect(() => {
       tasksComplete(res?.id || null);
     });
   };
+  useEffect(() => {
+    if (taskId) {
+      fetchAnnotationTask();
+    }
+  }, [taskId]);
+
+  const fetchAnnotationTask = async () => {
+    const res = await fetchAnnotation(taskId);
+    // console.log(res);
+    if(res[0]?.result[0])
+    { 
+      setIndicText(res[0]?.result[0]?.value?.text);
+    }
+    setTaskData(res);
+    setAnnotations(res?.annotations);
+  };
+
+  // create a handleSubmitRomanisedText function
+  const handleSubmitRomanisedText = async () => {
+    if(taskData?.data?.input_text && taskData?.data?.input_language && taskData?.data?.output_language){
+      const language = LanguageCode.languages 
+      let output_lng_code = ''
+
+      language.filter((lang) => {
+        if(lang.label === taskData?.data?.input_language){
+          output_lng_code= lang.code
+        }
+      });
+
+      // Create a new instance of the class
+      const postTransliterationForLogging = new PostTransliterationForLogging(
+        taskData?.data?.input_text, 
+        indicText , 
+        originalRomanisedText, 
+        editedRomanisedText,
+        output_lng_code
+      );
+
+      const res = dispatch(APITransport(postTransliterationForLogging));
+      if(res){
+        setTransliterationData([]);
+        setOriginalRomanisedText("");
+        setEditedRomanisedText("");
+        setSnackbarInfo({
+          open: true,
+          message: "Transliteration Logged",
+          variant: "success",
+        });
+        setShowSpinner(false)
+
+      }else{
+        setSnackbarInfo({
+          open: true,
+          message: "Error in logging transliteration",
+          variant: "error",
+        });
+        setShowSpinner(false)
+      }
+    }
+  }
 
+  const handleTranslitrationOnClick = async () => {
+    setShowSpinner(true)
+    const language = LanguageCode.languages 
+    let input_lng_code = ''
+    let output_lng_code = ''
+    language.filter((lang) => {
+      if(lang.label === taskData?.data?.input_language){
+        input_lng_code= lang.code
+      }
+      if(lang.label === taskData?.data?.output_language){
+        output_lng_code = lang.code
+      } 
+    })
+    const res = await fetchTransliteration(taskData?.data?.input_text,input_lng_code, output_lng_code);
+    if(res && res?.output) {
+      setTransliterationData(res);
+      if(res?.output)
+      {
+        setOriginalRomanisedText(res?.output.map((item) => item.target).join(" "));
+      }
+      setSnackbarInfo({
+        open: true,
+        message: "Transliteration Done",
+        variant: "success",
+      });
+      setShowSpinner(false)
+    }
+  }
+  useEffect(() => {
+    if(originalRomanisedText) {
+      setEditedRomanisedText(originalRomanisedText);
+    }
+  }, [originalRomanisedText]);
+
+  const handleEditableRomanisedText =(e)=>{
+    setEditedRomanisedText(e.target.value)
+  }
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
@@ -1404,6 +1518,42 @@ useEffect(() => {
         >
           {tagSuggestionList}
         </Popover>
+        {!loader&&  ProjectDetails?.project_type?.includes("ContextualTranslationEditing") && 
+        <Grid container spacing={2}  style={{
+          display: "flex", flexDirection: "column", justifyContent: "right", alignItems: "flex-end", padding:"1%", width:"100%", alignItems:"flex-end", zIndex:"10", marginTop:"-30px"
+        }}>
+          <Grid item xs={12}  style={{display:"flex", gap:"5px"}}>
+            <CustomButton
+              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
+              onClick={handleTranslitrationOnClick}
+              label="Check Transliteration"
+              disabled={showSpinner}
+            />
+            {originalRomanisedText &&
+            <CustomButton
+              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
+              onClick={handleSubmitRomanisedText}
+              label="Submit"
+            />
+            }
+          </Grid>
+
+          {translitrationData?.output && 
+          <Grid item xs={12} style={{width:"400px"}} className="ant-form-item-control-input-content">
+          <textarea rows="4" id="outlined-multiline-static"  
+            className="ant-input is-search"
+            label="Output tranliteration"
+            style={{width:"100%", height:"120px", lineHeight:"1.5715", maxWidth:"100%", minHeight:"32px", transition:"all .3s, height 0s", verticalAlign:"bottom"}}  
+            value={editedRomanisedText}
+            onChange = {handleEditableRomanisedText}
+          /> 
+
+
+
+          </Grid> 
+          }
+        </Grid>
+        }
       </Box>
       {!loader && ProjectDetails?.project_type?.includes("OCRSegmentCategorization") && 
           <>
@@ -1560,7 +1710,7 @@ export default function LSF() {
   };
 
 
-console.log(reviewtext,annotationtext);
+// console.log(reviewtext,annotationtext);
   
   const resetNotes = () => {
     setShowNotes(false);
diff --git a/src/ui/pages/container/Label-Studio/SuperCheckerLSF.jsx b/src/ui/pages/container/Label-Studio/SuperCheckerLSF.jsx
index 4a230b3a..b361981c 100644
--- a/src/ui/pages/container/Label-Studio/SuperCheckerLSF.jsx
+++ b/src/ui/pages/container/Label-Studio/SuperCheckerLSF.jsx
@@ -40,6 +40,7 @@ import {
   getProjectsandTasks,
   getNextProject,
   fetchAnnotation,
+  fetchTransliteration,
   postReview,
   patchSuperChecker,
 } from "../../../../redux/actions/api/LSFAPI/LSFAPI";
@@ -52,6 +53,10 @@ import "./lsf.css";
 import { useSelector, useDispatch } from "react-redux";
 import { translate } from "../../../../config/localisation";
 import { labelConfigJS } from "./labelConfigJSX";
+import CustomButton from "../../component/common/Button";
+import CircularProgress from '@mui/material/CircularProgress';
+import LanguageCode from "../../../../utils/LanguageCode";
+import PostTransliterationForLogging from "../../../../redux/actions/api/Annotation/PostTransliterationForLogging";
 
 const StyledMenu = styled((props) => (
   <Menu
@@ -183,6 +188,11 @@ const LabelStudioWrapper = ({
     useState(null);
   const [tagSuggestionList, setTagSuggestionList] = useState();
   const [assignedUsers, setAssignedUsers] = useState(null);
+  const [translitrationData, setTransliterationData] = useState([]);
+  const [showSpinner , setShowSpinner] = useState(false);
+  const [originalRomanisedText, setOriginalRomanisedText] = useState("");
+  const [editedRomanisedText, setEditedRomanisedText] = useState("")
+  const [indicText, setIndicText] = useState("");
 
   useEffect(() => {
     setPredictions(taskData?.data?.ocr_prediction_json);
@@ -453,7 +463,15 @@ useEffect(() => {
               let superChecker = annotations.filter(
                 (value) => value.annotation_type === 3
               )[0];
-
+              if(originalRomanisedText.length==0  && projectType.includes("ContextualTranslationEditing")){
+                setSnackbarInfo({
+                  open: true,
+                  message: "Please click on Check Transliteration button first",
+                  variant: "info",
+                });
+                // dont allow to move forward
+                hideLoader();
+              }
               patchSuperChecker(
                 taskId,
                 superChecker.id,
@@ -861,6 +879,103 @@ useEffect(() => {
       tasksComplete(res?.id || null);
     });
   };
+  useEffect(() => {
+    if (taskId) {
+      fetchAnnotationTask();
+    }
+  }, [taskId]);
+
+  const fetchAnnotationTask = async () => {
+    const res = await fetchAnnotation(taskId);
+    if(res[0]?.result[0])
+    { 
+      setIndicText(res[0]?.result[0]?.value?.text);
+    }
+    setTaskData(res);
+    setAnnotations(res?.annotations);
+  };
+
+  // create a handleSubmitRomanisedText function
+  const handleSubmitRomanisedText = async () => {
+    if(taskData?.data?.input_text && taskData?.data?.input_language && taskData?.data?.output_language){
+      const language = LanguageCode.languages 
+      let output_lng_code = ''
+
+      language.filter((lang) => {
+        if(lang.label === taskData?.data?.input_language){
+          output_lng_code= lang.code
+        }
+      });
+
+      // Create a new instance of the class
+      const postTransliterationForLogging = new PostTransliterationForLogging(
+        taskData?.data?.input_text, 
+        indicText , 
+        originalRomanisedText, 
+        editedRomanisedText,
+        output_lng_code
+      );
+
+      const res = dispatch(APITransport(postTransliterationForLogging));
+      if(res){
+        setTransliterationData([]);
+        setOriginalRomanisedText("");
+        setEditedRomanisedText("");
+        setSnackbarInfo({
+          open: true,
+          message: "Transliteration Logged",
+          variant: "success",
+        });
+        setShowSpinner(false)
+
+      }else{
+        setSnackbarInfo({
+          open: true,
+          message: "Error in logging transliteration",
+          variant: "error",
+        });
+        setShowSpinner(false)
+      }
+    }
+  }
+
+  const handleTranslitrationOnClick = async () => {
+    setShowSpinner(true)
+    const language = LanguageCode.languages 
+    let input_lng_code = ''
+    let output_lng_code = ''
+    language.filter((lang) => {
+      if(lang.label === taskData?.data?.input_language){
+        input_lng_code= lang.code
+      }
+      if(lang.label === taskData?.data?.output_language){
+        output_lng_code = lang.code
+      } 
+    })
+    const res = await fetchTransliteration(taskData?.data?.input_text,input_lng_code, output_lng_code);
+    if(res && res?.output) {
+      setTransliterationData(res);
+      if(res?.output)
+      {
+        setOriginalRomanisedText(res?.output.map((item) => item.target).join(" "));
+      }
+      setSnackbarInfo({
+        open: true,
+        message: "Transliteration Done",
+        variant: "success",
+      });
+      setShowSpinner(false)
+    }
+  }
+  useEffect(() => {
+    if(originalRomanisedText) {
+      setEditedRomanisedText(originalRomanisedText);
+    }
+  }, [originalRomanisedText]);
+
+  const handleEditableRomanisedText =(e)=>{
+    setEditedRomanisedText(e.target.value)
+  }
   const [value, setvalue] = useState();
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
@@ -1144,6 +1259,40 @@ useEffect(() => {
         >
           {tagSuggestionList}
         </Popover>
+
+        {!loader&&  ProjectDetails?.project_type?.includes("ContextualTranslationEditing") && 
+        <Grid container spacing={2}  style={{
+          display: "flex", flexDirection: "column", justifyContent: "right", alignItems: "flex-end", padding:"1%", width:"100%", alignItems:"flex-end", zIndex:"10", marginTop:"-30px"
+        }}>
+          <Grid item xs={12}  style={{display:"flex", gap:"5px"}}>
+            <CustomButton
+              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
+              onClick={handleTranslitrationOnClick}
+              label="Check Transliteration"
+              disabled={showSpinner}
+            />
+            {originalRomanisedText &&
+            <CustomButton
+              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
+              onClick={handleSubmitRomanisedText}
+              label="Submit"
+            />
+            }
+          </Grid>
+
+          {translitrationData?.output && 
+          <Grid item xs={12} style={{width:"400px"}} className="ant-form-item-control-input-content">
+          <textarea rows="4" id="outlined-multiline-static"  
+            className="ant-input is-search"
+            label="Output tranliteration"
+            style={{width:"100%", height:"120px", lineHeight:"1.5715", maxWidth:"100%", minHeight:"32px", transition:"all .3s, height 0s", verticalAlign:"bottom"}}  
+            value={editedRomanisedText}
+            onChange = {handleEditableRomanisedText}
+          /> 
+          </Grid> 
+          }
+        </Grid>
+        }
       </Box>
       {!loader && ProjectDetails?.project_type?.includes("OCRSegmentCategorization") && 
           <>

From 8770008f20bae273769e9847f0ce07e140746fcb Mon Sep 17 00:00:00 2001
From: Pursottam6003 <rahulsah6003@gmail.com>
Date: Mon, 24 Jun 2024 13:59:06 +0530
Subject: [PATCH 5/6] committed the code for frontend annotator

---
 .../PostTransliterationForLogging.js          |   2 +-
 src/redux/actions/api/LSFAPI/LSFAPI.js        |  38 ++---
 src/ui/pages/component/common/Header.jsx      |  22 +++
 src/ui/pages/container/Label-Studio/LSF.jsx   | 149 ++++++++++-------
 .../RomanisedTransliteration.jsx              | 155 ++++++++++++++++++
 .../Transliteration/Transliteration.jsx       |   2 +-
 6 files changed, 281 insertions(+), 87 deletions(-)
 create mode 100644 src/ui/pages/container/Transliteration/RomanisedTransliteration.jsx

diff --git a/src/redux/actions/api/Annotation/PostTransliterationForLogging.js b/src/redux/actions/api/Annotation/PostTransliterationForLogging.js
index 929cd55f..1dbd9e93 100644
--- a/src/redux/actions/api/Annotation/PostTransliterationForLogging.js
+++ b/src/redux/actions/api/Annotation/PostTransliterationForLogging.js
@@ -7,7 +7,7 @@ export default class PostTransliterationForLogging extends API {
     super("POST", timeout, false);
     this.transliterationLog = {
       source_english_text: source_text,
-      indic_translation_text: target_text[0],
+      indic_translation_text: target_text,
       romanised_text: orginal_romanised_text,
       edited_romanised_text: edited_romanised_text,
       language: target_language,
diff --git a/src/redux/actions/api/LSFAPI/LSFAPI.js b/src/redux/actions/api/LSFAPI/LSFAPI.js
index a024c765..29c9fd35 100644
--- a/src/redux/actions/api/LSFAPI/LSFAPI.js
+++ b/src/redux/actions/api/LSFAPI/LSFAPI.js
@@ -37,44 +37,26 @@ const fetchAnnotation = async (taskID) => {
 };
 
 
-const fetchTransliteration = async (sourceText,srcLng,tgtLng) => {
-  const url = 'https://api.dhruva.ekstep.ai/services/inference/transliteration';
-  const payload = {
-    input: [
-      {
-        source: sourceText,
-      },
-    ],
-    config: {
-      serviceId: 'ai4bharat/indicxlit--gpu-t4',
-      language: {
-        sourceLanguage: srcLng,
-        sourceScriptCode: '',
-        targetLanguage: tgtLng,
-        targetScriptCode: '',
-      },
-      isSentence: true,
-      numSuggestions: 0,
-    },
-    controlConfig: {
-      dataTracking: true,
-    },
-  };
-
+const fetchTransliteration = async (sourceText,tgtLng) => {
+  const url = `https://xlit-api.ai4bharat.org/rt/${encodeURIComponent(tgtLng)}/${encodeURIComponent(sourceText)}`;  
   const response = await fetch(url, {
-    method: 'POST',
+    method: 'GET',
     headers: {
       'Content-Type': 'application/json',
-      Authorization: 'uOQOvZAkdKQpaeZa5-K03k9SIXOtZFEIkdj995-lTz_bozcijCNgVye2jEGIRFQG',
     },
-    body: JSON.stringify(payload),
   });
 
   if (!response.ok) {
     throw new Error(`HTTP error! status: ${response.status}`);
   }
   const data = await response.json();
-  return data;
+  return {
+    timestamp: data.at,
+    error: data.error,
+    input: data.input,
+    romanised_transliteration: data.result.join(", "), // Assuming result is always an array; join elements for a single string output
+    success: data.success
+  };
 };
 
 const postAnnotation = async (
diff --git a/src/ui/pages/component/common/Header.jsx b/src/ui/pages/component/common/Header.jsx
index 938e9415..af78c399 100644
--- a/src/ui/pages/component/common/Header.jsx
+++ b/src/ui/pages/component/common/Header.jsx
@@ -67,6 +67,9 @@ const Header = () => {
   const [selectedNotificationId, setSelectedNotificationId] = useState(null);
   const [showTransliterationModel, setShowTransliterationModel] =
     useState(false);
+
+  const ProjectDetails = useSelector((state) => state.getProjectDetails.data);
+
   const [snackbar, setSnackbarInfo] = useState({
     open: false,
     message: "",
@@ -758,6 +761,17 @@ console.log(unseenNotifications,'uuu');
     //   onclick: () => {},
     // },
   ];
+
+  if (ProjectDetails?.project_type?.includes("ContextualTranslationEditing")) {
+    appSettings.splice(1, 0, {
+      name: "Romanised Transliteration",
+      onclick: () => {
+        handleCloseSettingsMenu(); 
+        localStorage.setItem("showRomanisedTransliterationModel", "true" );
+      },
+    });
+  }
+  
   const helpMenu = [
     {
       name: "Help",
@@ -1125,6 +1139,14 @@ console.log(unseenNotifications,'uuu');
 
         />
       </Modal>
+
+      {/* {showRomanisedTransliterationModel && 
+        <RomanisedTransliteration 
+        open={showRomanisedTransliterationModel}
+        onClose={() => setShowRomanisedTransliterationModel(false)}
+        setShowRomanisedTransliterationModel = {setShowRomanisedTransliterationModel}
+        />
+      } */}
     </Grid>
   );
 };
diff --git a/src/ui/pages/container/Label-Studio/LSF.jsx b/src/ui/pages/container/Label-Studio/LSF.jsx
index a4ec73e6..78ba92fb 100644
--- a/src/ui/pages/container/Label-Studio/LSF.jsx
+++ b/src/ui/pages/container/Label-Studio/LSF.jsx
@@ -56,6 +56,8 @@ import CustomButton from "../../component/common/Button";
 import CircularProgress from '@mui/material/CircularProgress';
 import LanguageCode from "../../../../utils/LanguageCode";
 import PostTransliterationForLogging from "../../../../redux/actions/api/Annotation/PostTransliterationForLogging";
+import RomanisedTransliteration from "../Transliteration/RomanisedTransliteration";
+
 
 const filterAnnotations = (
   annotations,
@@ -211,7 +213,14 @@ const LabelStudioWrapper = ({
   const [filterMessage, setFilterMessage] = useState(null);
   const [disableButton, setDisableButton] = useState(false);
   const [assignedUsers, setAssignedUsers] = useState(null);
-  const [translitrationData, setTransliterationData] = useState([]);
+  const [romanisedTransliterationData, setRomanisedTransliterationData] = useState({
+    timestamp: '',
+    error: '',
+    input: '',
+    romanised_transliteration: '',
+    success: false
+  });
+  const [showRomanisedTransliterationModel, setShowRomanisedTransliterationModel] = useState(true);
   const [showSpinner , setShowSpinner] = useState(false);
   const [originalRomanisedText, setOriginalRomanisedText] = useState("");
   const [editedRomanisedText, setEditedRomanisedText] = useState("")
@@ -255,6 +264,11 @@ const LabelStudioWrapper = ({
       }));});
   }, []);
 
+  // useEffect(() => {
+  //   const showModel = localStorage.getItem("showRomanisedTransliterationModel") === "true";
+  //   setShowRomanisedTransliterationModel(showModel);
+  // }, [localStorage]);
+
   const tasksComplete = (id) => {
     if (id) {
       resetNotes();
@@ -989,14 +1003,13 @@ const LabelStudioWrapper = ({
     if (taskId) {
       fetchAnnotationTask();
     }
-  }, [taskId]);
-
+  }, [taskId]); 
   const fetchAnnotationTask = async () => {
     const res = await fetchAnnotation(taskId);
     // console.log(res);
     if(res[0]?.result[0])
     { 
-      setIndicText(res[0]?.result[0]?.value?.text);
+      setIndicText(res[0]?.result[0]?.value?.text[0]);
     }
     setTaskData(res);
     setAnnotations(res?.annotations);
@@ -1004,16 +1017,15 @@ const LabelStudioWrapper = ({
 
   // create a handleSubmitRomanisedText function
   const handleSubmitRomanisedText = async () => {
-    if(taskData?.data?.input_text && taskData?.data?.input_language && taskData?.data?.output_language){
+    if(taskData?.data?.input_text && taskData?.data?.output_language){
       const language = LanguageCode.languages 
       let output_lng_code = ''
 
       language.filter((lang) => {
-        if(lang.label === taskData?.data?.input_language){
+        if(lang.label === taskData?.data?.output_language){
           output_lng_code= lang.code
         }
       });
-
       // Create a new instance of the class
       const postTransliterationForLogging = new PostTransliterationForLogging(
         taskData?.data?.input_text, 
@@ -1025,7 +1037,15 @@ const LabelStudioWrapper = ({
 
       const res = dispatch(APITransport(postTransliterationForLogging));
       if(res){
-        setTransliterationData([]);
+        setRomanisedTransliterationData(
+          {
+            timestamp: '',
+            error: '',
+            input: '',
+            romanised_transliteration: '',
+            success: false
+          }
+        )
         setOriginalRomanisedText("");
         setEditedRomanisedText("");
         setSnackbarInfo({
@@ -1049,23 +1069,21 @@ const LabelStudioWrapper = ({
   const handleTranslitrationOnClick = async () => {
     setShowSpinner(true)
     const language = LanguageCode.languages 
-    let input_lng_code = ''
     let output_lng_code = ''
 
     language.filter((lang) => {
-      if(lang.label === taskData?.data?.input_language){
-        input_lng_code= lang.code
-      }
-      if(lang.label === taskData?.data?.output_language){
+      if(lang.label == taskData?.data?.output_language){
         output_lng_code = lang.code
       } 
     })
-    const res = await fetchTransliteration(taskData?.data?.input_text,input_lng_code, output_lng_code);
-    if(res && res?.output) {
-      setTransliterationData(res);
-      if(res?.output)
+    try {
+
+    const res = await fetchTransliteration(indicText, output_lng_code);
+    if(res?.success && res?.romanised_transliteration) {
+      setRomanisedTransliterationData(res);
+      if(res?.romanised_transliteration)
       {
-        setOriginalRomanisedText(res?.output.map((item) => item.target).join(" "));
+        setOriginalRomanisedText(res.romanised_transliteration);
       }
       setSnackbarInfo({
         open: true,
@@ -1074,19 +1092,58 @@ const LabelStudioWrapper = ({
       });
       setShowSpinner(false)
     }
+  }
+  catch (error) {
+    setSnackbarInfo({
+      open: true,
+      message: "Error in fetching romanised text",
+      variant: "error",
+    });
+    setShowSpinner(false)
+  }
+  
   }
   useEffect(() => {
     if(originalRomanisedText) {
       setEditedRomanisedText(originalRomanisedText);
     }
   }, [originalRomanisedText]);
+
+  useEffect(() => {
+    let annotation = lsfRef?.current?.store?.annotationStore?.selected;
+      let temp;
+      for (let i = 0; i < annotations?.length; i++) {
+        if (
+          !annotations[i]?.result?.length ||
+          annotation.serializeAnnotation()[0].id ===
+            annotations[i]?.result[0].id
+        ) {
+          temp = annotation.serializeAnnotation();
+          if (annotations[i]?.annotation_type !== 1) continue;
+          for (let i = 0; i < temp?.length; i++) {
+            if(temp[i].type === "relation"){
+              continue;
+            }else if (temp[i]?.value.text) {
+              temp[i].value.text = [temp[i].value.text[0]];
+            }
+          }          
+          if(temp[0]?.value?.text[0]?.length >0){
+            setIndicText(temp[0]?.value?.text[0])
+          }
+        }
+        }
+  }, [annotations, fetchTransliteration, handleSubmitRomanisedText]);
    
   const handleEditableRomanisedText =(e)=>{
     setEditedRomanisedText(e.target.value)
   }
   
- 
- 
+  // call the handleTransliteration for first time if the indic text is present 
+  useEffect(() => {
+    if(indicText){
+      handleTranslitrationOnClick()
+    }
+  }, [indicText]);
   const renderSnackBar = () => {
     return (
       <CustomizedSnackbars
@@ -1264,43 +1321,21 @@ const LabelStudioWrapper = ({
           {tagSuggestionList}
         </Popover>
 
-        {!loader&&  ProjectDetails?.project_type?.includes("ContextualTranslationEditing") && 
-        <Grid container spacing={2}  style={{
-          display: "flex", flexDirection: "column", justifyContent: "right", alignItems: "flex-end", padding:"1%", width:"100%", alignItems:"flex-end", zIndex:"10", marginTop:"-30px"
-        }}>
-          <Grid item xs={12}  style={{display:"flex", gap:"5px"}}>
-            <CustomButton
-              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
-              onClick={handleTranslitrationOnClick}
-              label="Check Transliteration"
-              disabled={showSpinner}
-            />
-            {originalRomanisedText &&
-            <CustomButton
-              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
-              onClick={handleSubmitRomanisedText}
-              label="Submit"
-            />
-            }
-          </Grid>
-
-          {translitrationData?.output && 
-          <Grid item xs={12} style={{width:"400px"}} className="ant-form-item-control-input-content">
-          <textarea rows="4" id="outlined-multiline-static"  
-            className="ant-input is-search"
-            label="Output tranliteration"
-            style={{width:"100%", height:"120px", lineHeight:"1.5715", maxWidth:"100%", minHeight:"32px", transition:"all .3s, height 0s", verticalAlign:"bottom"}}  
-            value={editedRomanisedText}
-            onChange = {handleEditableRomanisedText}
-          /> 
-           
-
-
-          </Grid> 
-          }
-        </Grid>
-
-        
+        {!loader &&  showRomanisedTransliterationModel && 
+          <RomanisedTransliteration
+            open = {localStorage.getItem("showRomanisedTransliterationModel") == "true"}
+            onClose = {() => {
+              setShowRomanisedTransliterationModel(false) 
+            }}
+            setShowRomanisedTransliterationModel = {setShowRomanisedTransliterationModel}
+            indicText={indicText}
+            originalRomanisedText={originalRomanisedText}
+            editedRomanisedText={editedRomanisedText}
+            handleEditableRomanisedText={handleEditableRomanisedText}
+            handleTranslitrationOnClick={handleTranslitrationOnClick}
+            handleSubmitRomanisedText={handleSubmitRomanisedText}
+            showSpinner={showSpinner}
+          />
         }
 
       </Box>
diff --git a/src/ui/pages/container/Transliteration/RomanisedTransliteration.jsx b/src/ui/pages/container/Transliteration/RomanisedTransliteration.jsx
new file mode 100644
index 00000000..23e3a927
--- /dev/null
+++ b/src/ui/pages/container/Transliteration/RomanisedTransliteration.jsx
@@ -0,0 +1,155 @@
+import React, { useEffect, useState ,useRef, useDebugValue} from "react";
+import { Autocomplete, Box, Button, Card, Grid, Typography } from "@mui/material";
+import { IndicTransliterate, getTransliterationLanguages, getTransliterateSuggestions } from "@ai4bharat/indic-transliterate";
+import "../../../../IndicTransliterate/index.css";
+import GlobalStyles from "../../../styles/LayoutStyles";
+import CustomizedSnackbars from "../../component/common/Snackbar";
+import TransliterationAPI from "../../../../redux/actions/api/Transliteration/TransliterationAPI";
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useDispatch, useSelector } from "react-redux";
+import {IconButton} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { useParams } from "react-router-dom";
+const RomanisedTransliteration = (props) => { 
+  const { onCancelTransliteration, setShowRomanisedTransliterationModel,setIsSpaceClicked, indicText, originalRomanisedText,editedRomanisedText, handleEditableRomanisedText, showSpinner, handleTranslitrationOnClick, handleSubmitRomanisedText } = props;
+  const params = useParams();
+  const classes = GlobalStyles();
+  const [text, setText] = useState("");
+  const [languageList, setLanguageList] = useState([{ DisplayName: "data" }]);
+  const [selectedLang, setSelectedLang] = useState("");
+  const [showSnackBar, setShowSnackBar] = useState({
+    message: "",
+    variant: "",
+    timeout: 1500,
+    visible: false,
+  });
+  const matches = useMediaQuery('(max-width:768px)');
+
+  const ProjectDetails = useSelector(state => state.getProjectDetails.data);
+
+//   let searchFilters = JSON.parse(localStorage.getItem("TaskData"));
+
+
+  var data = languageList.filter((e) => e.DisplayName.includes(ProjectDetails.tgt_language));
+
+  // const renderTextarea = (props) => {
+  //   return (
+  //     <textarea
+  //       {...props}
+  //       placeholder={"Enter text here..."}
+  //       rows={5}
+  //       className={classes.textAreaTransliteration}
+  //     />
+  //   );
+  // };
+
+  useEffect(() => {
+    getTransliterationLanguages()
+      .then(langs => {
+        setLanguageList(langs);
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }, []);
+  
+  
+
+  const handleLanguageChange = (event, val) => {
+    setSelectedLang(val);
+    // setIsSpaceClicked(true)
+
+  };
+
+  
+  const onCloseButtonClick = async () => {
+    localStorage.setItem("showRomanisedTransliterationModel", false);
+    setShowRomanisedTransliterationModel(false);
+  };
+  const handleSnackBarClose = () => {
+    setShowSnackBar({
+      message: "",
+      variant: "",
+      timeout: 1500,
+      visible: false,
+    });
+  };
+
+  return (
+    <Card
+        sx={{
+    position: 'fixed', // Make the card behave like an overlay
+    bottom: 0, // Position at the bottom
+    right: 0, // Position to the right
+    width: matches ? '70%' : '30%', // Responsive width
+    maxHeight: '60%', // Maximum height to ensure content above is accessible
+    overflow: 'auto', // Make content inside scrollable if it exceeds the height
+    zIndex: 1000, // Ensure it's above other content
+    backgroundColor: "#f5f5f5", // Background color
+    padding: "0.4rem 1rem", // Padding
+    marginBottom: 2, // Margin bottom
+  }}
+    >
+      <Grid
+        container
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        sx={{
+          backgroundColor: "#f5f5f5",
+          marginBottom: 2,
+        }}
+      >
+        {/* <Typography variant="h5" style={{padding:"5px"}}></Typography> */}
+        <h3 className="ant-typography" style={{"margin": "10px 0px"}}>Romanised Transliteration</h3>
+        <IconButton onClick={onCloseButtonClick} style={{ padding: "5px" }}>
+          <CloseIcon style={{ color: "red" }} />
+        </IconButton>
+        {/* <Typography><h3>Romanised Transliteration</h3></Typography> */}
+        <Grid item xs={12} style={{width:"400px"}} className="ant-form-item-control-input-content">
+          <textarea rows="4" id="outlined-multiline-static"  
+            className="ant-input is-search"
+            label="Output tranliteration"
+            style={{width:"100%", height:"120px", lineHeight:"1.5715", maxWidth:"100%", minHeight:"32px", transition:"all .3s, height 0s", verticalAlign:"bottom"}}  
+            value={text ? text : editedRomanisedText }
+            onChange = {handleEditableRomanisedText}
+          /> 
+          </Grid> 
+      </Grid>
+
+      {/* <IndicTransliterate
+        lang={selectedLang.LangCode ? selectedLang.LangCode : (data.length > 0 && (params.taskId || params.id) ? data[0]?.LangCode : "hi")}
+        value={text}
+        onChangeText={(val) => {
+          setText(val)
+        }}
+        renderComponent={(props) => renderTextarea(props)}
+      /> */}
+      <Grid
+        container
+        direction="row"
+        justifyContent="end"
+        alignItems="center"
+        sx={{ padding: "1rem" }}
+      >
+        <Button variant="contained" sx={{ mr: 2 }}  onClick={handleTranslitrationOnClick} disabled={!indicText || showSpinner}  >
+          Check Transliteration
+        </Button>
+        <Button variant="contained" sx={{ mr: 2 }} onClick={handleSubmitRomanisedText} disabled={!editedRomanisedText} >
+          Submit 
+        </Button>
+       
+        <CustomizedSnackbars
+          hide={showSnackBar.timeout}
+          open={showSnackBar.visible}
+          handleClose={handleSnackBarClose}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          variant={showSnackBar.variant}
+          message={showSnackBar.message}
+        />
+      </Grid>
+    </Card>
+  );
+};
+
+export default RomanisedTransliteration;
diff --git a/src/ui/pages/container/Transliteration/Transliteration.jsx b/src/ui/pages/container/Transliteration/Transliteration.jsx
index 29d922f7..f5ff8c53 100644
--- a/src/ui/pages/container/Transliteration/Transliteration.jsx
+++ b/src/ui/pages/container/Transliteration/Transliteration.jsx
@@ -9,7 +9,7 @@ import TransliterationAPI from "../../../../redux/actions/api/Transliteration/Tr
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-const Transliteration = (props) => {
+const Transliteration = (props) => { 
   const { onCancelTransliteration ,setIsSpaceClicked,isSpaceClicked,setShowTransliterationModel} = props;
   const params = useParams();
   const classes = GlobalStyles();

From 0505b2ae31c7f15334710d0946219e4610c54497 Mon Sep 17 00:00:00 2001
From: Pursottam6003 <rahulsah6003@gmail.com>
Date: Mon, 24 Jun 2024 15:16:20 +0530
Subject: [PATCH 6/6] completed the frontend for contextual transcription
 editing

---
 src/ui/pages/component/common/Header.jsx      |   8 -
 src/ui/pages/container/Label-Studio/LSF.jsx   |   7 -
 .../container/Label-Studio/ReviewLSF.jsx      | 143 +++++++++++-------
 .../Label-Studio/SuperCheckerLSF.jsx          | 142 ++++++++++-------
 4 files changed, 180 insertions(+), 120 deletions(-)

diff --git a/src/ui/pages/component/common/Header.jsx b/src/ui/pages/component/common/Header.jsx
index af78c399..5f272b6d 100644
--- a/src/ui/pages/component/common/Header.jsx
+++ b/src/ui/pages/component/common/Header.jsx
@@ -1139,14 +1139,6 @@ console.log(unseenNotifications,'uuu');
 
         />
       </Modal>
-
-      {/* {showRomanisedTransliterationModel && 
-        <RomanisedTransliteration 
-        open={showRomanisedTransliterationModel}
-        onClose={() => setShowRomanisedTransliterationModel(false)}
-        setShowRomanisedTransliterationModel = {setShowRomanisedTransliterationModel}
-        />
-      } */}
     </Grid>
   );
 };
diff --git a/src/ui/pages/container/Label-Studio/LSF.jsx b/src/ui/pages/container/Label-Studio/LSF.jsx
index 78ba92fb..df2a61cb 100644
--- a/src/ui/pages/container/Label-Studio/LSF.jsx
+++ b/src/ui/pages/container/Label-Studio/LSF.jsx
@@ -264,11 +264,6 @@ const LabelStudioWrapper = ({
       }));});
   }, []);
 
-  // useEffect(() => {
-  //   const showModel = localStorage.getItem("showRomanisedTransliterationModel") === "true";
-  //   setShowRomanisedTransliterationModel(showModel);
-  // }, [localStorage]);
-
   const tasksComplete = (id) => {
     if (id) {
       resetNotes();
@@ -1492,7 +1487,6 @@ export default function LSF() {
   useEffect(() => {
     fetchAnnotation(taskId).then((data) => {
       if (data && Array.isArray(data) && data.length > 0) {
-        // console.log(annotationNotesRef);
         annotationNotesRef.current.value = data[0].annotation_notes ?? "";
         reviewNotesRef.current.value = data[0].review_notes ?? "";
         try {
@@ -1500,7 +1494,6 @@ export default function LSF() {
             annotationNotesRef.current.value !== ""
               ? JSON.parse(annotationNotesRef.current.value)
               : "";
-          // console.log(newDelta2);
           annotationNotesRef.current.getEditor().setContents(newDelta2);
         } catch (err) {
           if (err instanceof SyntaxError) {
diff --git a/src/ui/pages/container/Label-Studio/ReviewLSF.jsx b/src/ui/pages/container/Label-Studio/ReviewLSF.jsx
index cdf5677b..e985f59a 100644
--- a/src/ui/pages/container/Label-Studio/ReviewLSF.jsx
+++ b/src/ui/pages/container/Label-Studio/ReviewLSF.jsx
@@ -58,7 +58,7 @@ import CustomButton from "../../component/common/Button";
 import CircularProgress from '@mui/material/CircularProgress';
 import LanguageCode from "../../../../utils/LanguageCode";
 import PostTransliterationForLogging from "../../../../redux/actions/api/Annotation/PostTransliterationForLogging";
-
+import RomanisedTransliteration from "../Transliteration/RomanisedTransliteration";
 const StyledMenu = styled((props) => (
   <Menu
     elevation={0}
@@ -265,7 +265,14 @@ const LabelStudioWrapper = ({
   const [filterMessage, setFilterMessage] = useState(null);
   const [disableButton, setDisableButton] = useState(false);
   const [assignedUsers, setAssignedUsers] = useState(null);
-  const [translitrationData, setTransliterationData] = useState([]);
+  const [romanisedTransliterationData, setRomanisedTransliterationData] = useState({
+    timestamp: '',
+    error: '',
+    input: '',
+    romanised_transliteration: '',
+    success: false
+  });
+  const [showRomanisedTransliterationModel, setShowRomanisedTransliterationModel] = useState(true);
   const [showSpinner , setShowSpinner] = useState(false);
   const [originalRomanisedText, setOriginalRomanisedText] = useState("");
   const [editedRomanisedText, setEditedRomanisedText] = useState("")
@@ -1174,14 +1181,13 @@ useEffect(() => {
     if (taskId) {
       fetchAnnotationTask();
     }
-  }, [taskId]);
-
+  }, [taskId]); 
   const fetchAnnotationTask = async () => {
     const res = await fetchAnnotation(taskId);
     // console.log(res);
     if(res[0]?.result[0])
     { 
-      setIndicText(res[0]?.result[0]?.value?.text);
+      setIndicText(res[0]?.result[0]?.value?.text[0]);
     }
     setTaskData(res);
     setAnnotations(res?.annotations);
@@ -1189,16 +1195,15 @@ useEffect(() => {
 
   // create a handleSubmitRomanisedText function
   const handleSubmitRomanisedText = async () => {
-    if(taskData?.data?.input_text && taskData?.data?.input_language && taskData?.data?.output_language){
+    if(taskData?.data?.input_text && taskData?.data?.output_language){
       const language = LanguageCode.languages 
       let output_lng_code = ''
 
       language.filter((lang) => {
-        if(lang.label === taskData?.data?.input_language){
+        if(lang.label === taskData?.data?.output_language){
           output_lng_code= lang.code
         }
       });
-
       // Create a new instance of the class
       const postTransliterationForLogging = new PostTransliterationForLogging(
         taskData?.data?.input_text, 
@@ -1210,7 +1215,15 @@ useEffect(() => {
 
       const res = dispatch(APITransport(postTransliterationForLogging));
       if(res){
-        setTransliterationData([]);
+        setRomanisedTransliterationData(
+          {
+            timestamp: '',
+            error: '',
+            input: '',
+            romanised_transliteration: '',
+            success: false
+          }
+        )
         setOriginalRomanisedText("");
         setEditedRomanisedText("");
         setSnackbarInfo({
@@ -1234,22 +1247,21 @@ useEffect(() => {
   const handleTranslitrationOnClick = async () => {
     setShowSpinner(true)
     const language = LanguageCode.languages 
-    let input_lng_code = ''
     let output_lng_code = ''
+
     language.filter((lang) => {
-      if(lang.label === taskData?.data?.input_language){
-        input_lng_code= lang.code
-      }
-      if(lang.label === taskData?.data?.output_language){
+      if(lang.label == taskData?.data?.output_language){
         output_lng_code = lang.code
       } 
     })
-    const res = await fetchTransliteration(taskData?.data?.input_text,input_lng_code, output_lng_code);
-    if(res && res?.output) {
-      setTransliterationData(res);
-      if(res?.output)
+    try {
+
+    const res = await fetchTransliteration(indicText, output_lng_code);
+    if(res?.success && res?.romanised_transliteration) {
+      setRomanisedTransliterationData(res);
+      if(res?.romanised_transliteration)
       {
-        setOriginalRomanisedText(res?.output.map((item) => item.target).join(" "));
+        setOriginalRomanisedText(res.romanised_transliteration);
       }
       setSnackbarInfo({
         open: true,
@@ -1258,6 +1270,16 @@ useEffect(() => {
       });
       setShowSpinner(false)
     }
+  }
+  catch (error) {
+    setSnackbarInfo({
+      open: true,
+      message: "Error in fetching romanised text",
+      variant: "error",
+    });
+    setShowSpinner(false)
+  }
+
   }
   useEffect(() => {
     if(originalRomanisedText) {
@@ -1265,9 +1287,41 @@ useEffect(() => {
     }
   }, [originalRomanisedText]);
 
+  useEffect(() => {
+    let annotation = lsfRef?.current?.store?.annotationStore?.selected;
+      let temp;
+      for (let i = 0; i < annotations?.length; i++) {
+        if (
+          !annotations[i]?.result?.length ||
+          annotation.serializeAnnotation()[0].id ===
+            annotations[i]?.result[0].id
+        ) {
+          temp = annotation.serializeAnnotation();
+          if (annotations[i]?.annotation_type !== 1) continue;
+          for (let i = 0; i < temp?.length; i++) {
+            if(temp[i].type === "relation"){
+              continue;
+            }else if (temp[i]?.value.text) {
+              temp[i].value.text = [temp[i].value.text[0]];
+            }
+          }          
+          if(temp[0]?.value?.text[0]?.length >0){
+            setIndicText(temp[0]?.value?.text[0])
+          }
+        }
+        }
+  }, [annotations, fetchTransliteration, handleSubmitRomanisedText]);
+
   const handleEditableRomanisedText =(e)=>{
     setEditedRomanisedText(e.target.value)
   }
+
+  // call the handleTransliteration for first time if the indic text is present 
+  useEffect(() => {
+    if(indicText){
+      handleTranslitrationOnClick()
+    }
+  }, [indicText]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
@@ -1518,41 +1572,22 @@ useEffect(() => {
         >
           {tagSuggestionList}
         </Popover>
-        {!loader&&  ProjectDetails?.project_type?.includes("ContextualTranslationEditing") && 
-        <Grid container spacing={2}  style={{
-          display: "flex", flexDirection: "column", justifyContent: "right", alignItems: "flex-end", padding:"1%", width:"100%", alignItems:"flex-end", zIndex:"10", marginTop:"-30px"
-        }}>
-          <Grid item xs={12}  style={{display:"flex", gap:"5px"}}>
-            <CustomButton
-              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
-              onClick={handleTranslitrationOnClick}
-              label="Check Transliteration"
-              disabled={showSpinner}
-            />
-            {originalRomanisedText &&
-            <CustomButton
-              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
-              onClick={handleSubmitRomanisedText}
-              label="Submit"
-            />
-            }
-          </Grid>
-
-          {translitrationData?.output && 
-          <Grid item xs={12} style={{width:"400px"}} className="ant-form-item-control-input-content">
-          <textarea rows="4" id="outlined-multiline-static"  
-            className="ant-input is-search"
-            label="Output tranliteration"
-            style={{width:"100%", height:"120px", lineHeight:"1.5715", maxWidth:"100%", minHeight:"32px", transition:"all .3s, height 0s", verticalAlign:"bottom"}}  
-            value={editedRomanisedText}
-            onChange = {handleEditableRomanisedText}
-          /> 
-
-
-
-          </Grid> 
-          }
-        </Grid>
+         
+        {!loader &&  showRomanisedTransliterationModel && 
+          <RomanisedTransliteration
+            open = {localStorage.getItem("showRomanisedTransliterationModel") == "true"}
+            onClose = {() => {
+              setShowRomanisedTransliterationModel(false) 
+            }}
+            setShowRomanisedTransliterationModel = {setShowRomanisedTransliterationModel}
+            indicText={indicText}
+            originalRomanisedText={originalRomanisedText}
+            editedRomanisedText={editedRomanisedText}
+            handleEditableRomanisedText={handleEditableRomanisedText}
+            handleTranslitrationOnClick={handleTranslitrationOnClick}
+            handleSubmitRomanisedText={handleSubmitRomanisedText}
+            showSpinner={showSpinner}
+          />
         }
       </Box>
       {!loader && ProjectDetails?.project_type?.includes("OCRSegmentCategorization") && 
diff --git a/src/ui/pages/container/Label-Studio/SuperCheckerLSF.jsx b/src/ui/pages/container/Label-Studio/SuperCheckerLSF.jsx
index b361981c..6fb67d28 100644
--- a/src/ui/pages/container/Label-Studio/SuperCheckerLSF.jsx
+++ b/src/ui/pages/container/Label-Studio/SuperCheckerLSF.jsx
@@ -57,7 +57,7 @@ import CustomButton from "../../component/common/Button";
 import CircularProgress from '@mui/material/CircularProgress';
 import LanguageCode from "../../../../utils/LanguageCode";
 import PostTransliterationForLogging from "../../../../redux/actions/api/Annotation/PostTransliterationForLogging";
-
+import RomanisedTransliteration from "../Transliteration/RomanisedTransliteration";
 const StyledMenu = styled((props) => (
   <Menu
     elevation={0}
@@ -188,11 +188,20 @@ const LabelStudioWrapper = ({
     useState(null);
   const [tagSuggestionList, setTagSuggestionList] = useState();
   const [assignedUsers, setAssignedUsers] = useState(null);
-  const [translitrationData, setTransliterationData] = useState([]);
+
+  const [romanisedTransliterationData, setRomanisedTransliterationData] = useState({
+    timestamp: '',
+    error: '',
+    input: '',
+    romanised_transliteration: '',
+    success: false
+  });
+  const [showRomanisedTransliterationModel, setShowRomanisedTransliterationModel] = useState(true);
   const [showSpinner , setShowSpinner] = useState(false);
   const [originalRomanisedText, setOriginalRomanisedText] = useState("");
   const [editedRomanisedText, setEditedRomanisedText] = useState("")
   const [indicText, setIndicText] = useState("");
+   //console.log("projectId, taskId", projectId, taskId);
 
   useEffect(() => {
     setPredictions(taskData?.data?.ocr_prediction_json);
@@ -883,13 +892,13 @@ useEffect(() => {
     if (taskId) {
       fetchAnnotationTask();
     }
-  }, [taskId]);
-
+  }, [taskId]); 
   const fetchAnnotationTask = async () => {
     const res = await fetchAnnotation(taskId);
+    // console.log(res);
     if(res[0]?.result[0])
     { 
-      setIndicText(res[0]?.result[0]?.value?.text);
+      setIndicText(res[0]?.result[0]?.value?.text[0]);
     }
     setTaskData(res);
     setAnnotations(res?.annotations);
@@ -897,16 +906,15 @@ useEffect(() => {
 
   // create a handleSubmitRomanisedText function
   const handleSubmitRomanisedText = async () => {
-    if(taskData?.data?.input_text && taskData?.data?.input_language && taskData?.data?.output_language){
+    if(taskData?.data?.input_text && taskData?.data?.output_language){
       const language = LanguageCode.languages 
       let output_lng_code = ''
 
       language.filter((lang) => {
-        if(lang.label === taskData?.data?.input_language){
+        if(lang.label === taskData?.data?.output_language){
           output_lng_code= lang.code
         }
       });
-
       // Create a new instance of the class
       const postTransliterationForLogging = new PostTransliterationForLogging(
         taskData?.data?.input_text, 
@@ -918,7 +926,15 @@ useEffect(() => {
 
       const res = dispatch(APITransport(postTransliterationForLogging));
       if(res){
-        setTransliterationData([]);
+        setRomanisedTransliterationData(
+          {
+            timestamp: '',
+            error: '',
+            input: '',
+            romanised_transliteration: '',
+            success: false
+          }
+        )
         setOriginalRomanisedText("");
         setEditedRomanisedText("");
         setSnackbarInfo({
@@ -942,22 +958,21 @@ useEffect(() => {
   const handleTranslitrationOnClick = async () => {
     setShowSpinner(true)
     const language = LanguageCode.languages 
-    let input_lng_code = ''
     let output_lng_code = ''
+
     language.filter((lang) => {
-      if(lang.label === taskData?.data?.input_language){
-        input_lng_code= lang.code
-      }
-      if(lang.label === taskData?.data?.output_language){
+      if(lang.label == taskData?.data?.output_language){
         output_lng_code = lang.code
       } 
     })
-    const res = await fetchTransliteration(taskData?.data?.input_text,input_lng_code, output_lng_code);
-    if(res && res?.output) {
-      setTransliterationData(res);
-      if(res?.output)
+    try {
+
+    const res = await fetchTransliteration(indicText, output_lng_code);
+    if(res?.success && res?.romanised_transliteration) {
+      setRomanisedTransliterationData(res);
+      if(res?.romanised_transliteration)
       {
-        setOriginalRomanisedText(res?.output.map((item) => item.target).join(" "));
+        setOriginalRomanisedText(res.romanised_transliteration);
       }
       setSnackbarInfo({
         open: true,
@@ -966,6 +981,16 @@ useEffect(() => {
       });
       setShowSpinner(false)
     }
+  }
+  catch (error) {
+    setSnackbarInfo({
+      open: true,
+      message: "Error in fetching romanised text",
+      variant: "error",
+    });
+    setShowSpinner(false)
+  }
+
   }
   useEffect(() => {
     if(originalRomanisedText) {
@@ -973,6 +998,38 @@ useEffect(() => {
     }
   }, [originalRomanisedText]);
 
+  useEffect(() => {
+    let annotation = lsfRef?.current?.store?.annotationStore?.selected;
+      let temp;
+      for (let i = 0; i < annotations?.length; i++) {
+        if (
+          !annotations[i]?.result?.length ||
+          annotation.serializeAnnotation()[0].id ===
+            annotations[i]?.result[0].id
+        ) {
+          temp = annotation.serializeAnnotation();
+          if (annotations[i]?.annotation_type !== 1) continue;
+          for (let i = 0; i < temp?.length; i++) {
+            if(temp[i].type === "relation"){
+              continue;
+            }else if (temp[i]?.value.text) {
+              temp[i].value.text = [temp[i].value.text[0]];
+            }
+          }          
+          if(temp[0]?.value?.text[0]?.length >0){
+            setIndicText(temp[0]?.value?.text[0])
+          }
+        }
+        }
+  }, [annotations, fetchTransliteration, handleSubmitRomanisedText]);
+
+
+  // call the handleTransliteration for first time if the indic text is present 
+  useEffect(() => {
+    if(indicText){
+      handleTranslitrationOnClick()
+    }
+  }, [indicText]);
   const handleEditableRomanisedText =(e)=>{
     setEditedRomanisedText(e.target.value)
   }
@@ -1260,38 +1317,21 @@ useEffect(() => {
           {tagSuggestionList}
         </Popover>
 
-        {!loader&&  ProjectDetails?.project_type?.includes("ContextualTranslationEditing") && 
-        <Grid container spacing={2}  style={{
-          display: "flex", flexDirection: "column", justifyContent: "right", alignItems: "flex-end", padding:"1%", width:"100%", alignItems:"flex-end", zIndex:"10", marginTop:"-30px"
-        }}>
-          <Grid item xs={12}  style={{display:"flex", gap:"5px"}}>
-            <CustomButton
-              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
-              onClick={handleTranslitrationOnClick}
-              label="Check Transliteration"
-              disabled={showSpinner}
-            />
-            {originalRomanisedText &&
-            <CustomButton
-              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
-              onClick={handleSubmitRomanisedText}
-              label="Submit"
-            />
-            }
-          </Grid>
-
-          {translitrationData?.output && 
-          <Grid item xs={12} style={{width:"400px"}} className="ant-form-item-control-input-content">
-          <textarea rows="4" id="outlined-multiline-static"  
-            className="ant-input is-search"
-            label="Output tranliteration"
-            style={{width:"100%", height:"120px", lineHeight:"1.5715", maxWidth:"100%", minHeight:"32px", transition:"all .3s, height 0s", verticalAlign:"bottom"}}  
-            value={editedRomanisedText}
-            onChange = {handleEditableRomanisedText}
-          /> 
-          </Grid> 
-          }
-        </Grid>
+        {!loader &&  showRomanisedTransliterationModel && 
+          <RomanisedTransliteration
+            open = {localStorage.getItem("showRomanisedTransliterationModel") == "true"}
+            onClose = {() => {
+              setShowRomanisedTransliterationModel(false) 
+            }}
+            setShowRomanisedTransliterationModel = {setShowRomanisedTransliterationModel}
+            indicText={indicText}
+            originalRomanisedText={originalRomanisedText}
+            editedRomanisedText={editedRomanisedText}
+            handleEditableRomanisedText={handleEditableRomanisedText}
+            handleTranslitrationOnClick={handleTranslitrationOnClick}
+            handleSubmitRomanisedText={handleSubmitRomanisedText}
+            showSpinner={showSpinner}
+          />
         }
       </Box>
       {!loader && ProjectDetails?.project_type?.includes("OCRSegmentCategorization") &&