ReactJS集成AssemblyAI：如何在情感分析应用中显示说话人标签

你已经在API请求中开启了speaker_labels: true，但当前代码没有处理AssemblyAI返回的说话人数据，也没有在UI中渲染这部分信息。以下是具体的解决步骤和代码修改：

问题分析 #

当开启speaker_labels参数后，AssemblyAI的返回结果中会包含utterances数组，每个元素对应一个说话人的连续发言片段，包含speaker（说话人标识，如Speaker 0）、text等字段。而你当前的Result组件只渲染了sentiment_analysis_results（情感分析片段），没有关联或展示说话人信息。

解决方案 #

我们需要修改Result组件，将说话人信息与情感分析结果结合展示。这里提供两种实现方式：

方式1：按说话人段落展示，同时标注对应情感 #

这种方式先按说话人分组展示完整发言，再匹配对应段落的情感并高亮：

修改Result.js：

import { Box, Text, HStack } from '@chakra-ui/react'
import Highlighted from './Highlighted'

// 辅助函数：通过时间戳匹配说话人与对应情感片段
const getSentimentForUtterance = (utterance, sentimentResults) => {
  const matched = sentimentResults.find(sentiment => 
    sentiment.start <= utterance.end && sentiment.end >= utterance.start
  )
  return matched ? matched.sentiment : 'NEUTRAL'
}

const Result = ({ transcript }) => {
  return (
    <div>
      <Box width={{ base: '300px', md: '700px', lg:'1000px'}} textAlign='justify'>
        <Text fontSize={{ base: '15px', md: '20px', lg: '25px'}}>
          {transcript.utterances?.map((utterance, index) => {
            const sentiment = getSentimentForUtterance(utterance, transcript.sentiment_analysis_results)
            return (
              <HStack key={index} align="flex-start" mb="4">
                <Text fontWeight="bold" color="blue.600" minW="100px">
                  {utterance.speaker}:
                </Text>
                <Highlighted text={utterance.text} sentiment={sentiment} />
              </HStack>
            )
          })}
        </Text>
      </Box>
    </div>
  )
}   

export default Result 

方式2：按情感片段展示，同时标注说话人 #

这种方式保留原有的情感高亮逻辑，同时在每个情感片段前标注对应的说话人：

修改Result.js：

import { Box, Text, HStack } from '@chakra-ui/react'
import Highlighted from './Highlighted'

// 辅助函数：通过时间戳找到情感片段对应的说话人
const getSpeakerForSentiment = (sentiment, utterances) => {
  const matched = utterances.find(utterance => 
    utterance.start <= sentiment.end && utterance.end >= sentiment.start
  )
  return matched ? matched.speaker : 'Unknown Speaker'
}

const Result = ({ transcript }) => {
  return (
    <div>
      <Box width={{ base: '300px', md: '700px', lg:'1000px'}} textAlign='justify'>
        <Text fontSize={{ base: '15px', md: '20px', lg: '25px'}}>
          {transcript.sentiment_analysis_results.map((result, index) => {
            const speaker = getSpeakerForSentiment(result, transcript.utterances || [])
            return (
              <HStack key={index} align="flex-start" mb="2">
                <Text fontWeight="bold" color="blue.600" minW="100px">
                  {speaker}:
                </Text>
                <Highlighted text={result.text} sentiment={result.sentiment} />
              </HStack>
            )
          })}
        </Text>
      </Box>
    </div>
  )
}   

export default Result 

额外检查 #

1. 确认API返回包含utterances：可以在useEffect中添加console.log(transcriptData)，查看返回结果是否包含该字段。若未返回，检查请求是否正确开启speaker_labels: true，音频是否有效（单说话人也会返回该字段）。
2. 空值处理：代码中使用了可选链?.，避免数据未加载完成时的报错。

内容的提问来源于stack exchange，提问作者Mick_Nixon