Merge pull request #69 from kazbaig/editable-speaker-diarization

Editable speaker labels
aws-samples · Mar 15, 2021 · dffb8e0 · dffb8e0
2 parents 6ff096d + c3e653e
commit dffb8e0
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 23 deletions.
diff --git a/app/src/components/TranscriptLine.js b/app/src/components/TranscriptLine.js
@@ -3,7 +3,7 @@ import s from './TranscriptLine.module.css';
 import cs from 'clsx';
 
 import classMap from '../transcriptHighlights';
-import { Editable, EditableInput, Box } from '@chakra-ui/react';
+import { Editable, EditablePreview, EditableInput, Box } from '@chakra-ui/react';
 
 // Reduces results down to a single set of non-overlapping ranges, each with a list of applicable results
 function combineSegments(results) {
@@ -89,6 +89,7 @@ export default function TranscriptLine({
   enableEditing,
 
   handleTranscriptChange,
+  onSpeakerChange,
 }) {
   const filteredResults = useMemo(() => results.filter((r) => enabledCategories.includes(r.Category)), [
     results,
@@ -101,30 +102,35 @@ export default function TranscriptLine({
   return (
     <React.Fragment>
       {enableEditing && (
-        <Editable
-          defaultValue={chunk.text}
-          onSubmit={(nextValue) => {
-            handleTranscriptChange(nextValue.trim());
-          }}
-          mb={8}
-        >
-          {({ isEditing, onEdit }) => (
-            <>
-              {chunk.speaker && <div>{chunk.speaker}</div>}
-
+        <Box mb={8}>
+          {chunk.speaker && (
+            <Editable defaultValue={chunk.speaker} onSubmit={(nextSpeaker) => onSpeakerChange(nextSpeaker.trim())}>
+              <EditablePreview width='100%' />
               <EditableInput />
-              {!isEditing && (
-                <p className={s.base} onClick={onEdit}>
-                  {ranges.map((r, i) => (
-                    <span key={i} className={cs(r.matches.map((x) => classMap[x.Category]))}>
-                      {r.text}
-                    </span>
-                  ))}
-                </p>
-              )}
-            </>
+            </Editable>
           )}
-        </Editable>
+
+          <Editable
+            defaultValue={chunk.text}
+            onSubmit={(nextTranscriptLine) => handleTranscriptChange(nextTranscriptLine.trim())}
+          >
+            {({ isEditing, onEdit }) => (
+              <>
+                <EditableInput />
+
+                {!isEditing && (
+                  <p className={s.base} onClick={onEdit}>
+                    {ranges.map((r, i) => (
+                      <span key={i} className={cs(r.matches.map((x) => classMap[x.Category]))}>
+                        {r.text}
+                      </span>
+                    ))}
+                  </p>
+                )}
+              </>
+            )}
+          </Editable>
+        </Box>
       )}
 
       {!enableEditing && (

diff --git a/app/src/components/TranscriptPane.js b/app/src/components/TranscriptPane.js
@@ -20,6 +20,7 @@ export default function TranscriptPane({
   inProgress,
   enableEditing,
   handleTranscriptChange,
+  onSpeakerChange,
 }) {
   const container = useRef();
 
@@ -41,6 +42,7 @@ export default function TranscriptPane({
               enabledCategories={CATEGORIES}
               enableEditing={enableEditing}
               handleTranscriptChange={(value) => handleTranscriptChange(i, value)}
+              onSpeakerChange={(value) => onSpeakerChange(i, value)}
             />
           ))}
 

diff --git a/app/src/home.js b/app/src/home.js
@@ -204,6 +204,19 @@ export default function Home() {
     });
   };
 
+  const onSpeakerChange = (i, value) => {
+    setTranscripts((t) => {
+      if (t[i].speaker === value) return t;
+
+      const newChunk = {
+        ...t[i],
+        speaker: value,
+      };
+
+      return [...t.slice(0, i), newChunk, ...t.slice(i + 1)];
+    });
+  };
+
   const addTranscriptChunk = useCallback(({ Alternatives, IsPartial, StartTime }) => {
     const items = Alternatives[0].Items;
 
@@ -726,6 +739,7 @@ export default function Home() {
           enableEditing={stage === STAGE_TRANSCRIBED || stage === STAGE_SOAP_REVIEW}
           visible={stage === STAGE_TRANSCRIBING || stage === STAGE_TRANSCRIBED}
           handleTranscriptChange={onTranscriptChange}
+          onSpeakerChange={onSpeakerChange}
         />
 
         <AnalysisPane