Feat: display assessment result in the shared recording (#812)

* display pronunciation assessment result in post * update locale
2024-07-16 16:54:22 +08:00
parent f9e248aac0
commit 68c64d52b8
4 changed files with 84 additions and 65 deletions
--- a/enjoy/src/i18n/en.json
+++ b/enjoy/src/i18n/en.json
@@ -484,26 +484,26 @@
  "shareFailed": "Share failed",
  "shareAudio": "Share audio",
  "sharedAudio": "Shared an audio resource",
-  "areYouSureToShareThisAudioToCommunity": "Are you sure to share this audio to community?",
+  "areYouSureToShareThisAudioToCommunity": "Are you sure to share this audio to the Square of community?",
  "shareVideo": "Share video",
  "sharedVideo": "Shared a video resource",
  "cannotShareLocalVideo": "Cannot share local video",
-  "areYouSureToShareThisVideoToCommunity": "Are you sure to share this video to community?",
+  "areYouSureToShareThisVideoToCommunity": "Are you sure to share this video to the Square of community?",
  "sharePrompt": "Share prompt",
  "sharedPrompt": "Shared a prompt",
-  "areYouSureToShareThisPromptToCommunity": "Are you sure to share this prompt to community?",
+  "areYouSureToShareThisPromptToCommunity": "Are you sure to share this prompt to the Square of community?",
  "shareRecording": "Share recording",
  "sharedRecording": "Shared a recording",
-  "areYouSureToShareThisRecordingToCommunity": "Are you sure to share this recording to community?",
+  "areYouSureToShareThisRecordingToCommunity": "Are you sure to share this recording to the Square of community?",
  "shareStory": "Share story",
  "sharedStory": "Shared a story",
-  "areYouSureToShareThisStoryToCommunity": "Are you sure to share this story to community?",
+  "areYouSureToShareThisStoryToCommunity": "Are you sure to share this story to the Square of community?",
  "shareGpt": "Share GPT",
  "sharedGpt": "Shared a GPT",
-  "areYouSureToShareThisGptToCommunity": "Are you sure to share this GPT to community?",
+  "areYouSureToShareThisGptToCommunity": "Are you sure to share this GPT to the Square of community?",
  "shareNote": "Share note",
  "sharedNote": "Shared a note",
-  "areYouSureToShareThisNoteToCommunity": "Are you sure to share this note to community?",
+  "areYouSureToShareThisNoteToCommunity": "Are you sure to share this note to the Square of community?",
  "saveAiAssistant": "Save this AI assistant",
  "addToLibary": "Add to library",
  "areYouSureToAddThisVideoToYourLibrary": "Are you sure to add this video to library?",
--- a/enjoy/src/i18n/zh-CN.json
+++ b/enjoy/src/i18n/zh-CN.json
@@ -484,26 +484,26 @@
  "shareFailed": "分享失败",
  "shareAudio": "分享音频",
  "sharedAudio": "分享了一个音频材料",
-  "areYouSureToShareThisAudioToCommunity": "您确定要分享此音频到社区吗？",
+  "areYouSureToShareThisAudioToCommunity": "您确定要分享此音频到社区广场吗？",
  "shareVideo": "分享视频",
  "sharedVideo": "分享了一个视频材料",
  "cannotShareLocalVideo": "无法分享本地视频",
-  "areYouSureToShareThisVideoToCommunity": "您确定要分享此视频到社区吗？",
+  "areYouSureToShareThisVideoToCommunity": "您确定要分享此视频到社区广场吗？",
  "sharePrompt": "分享提示语",
  "sharedPrompt": "分享了一条提示语",
-  "areYouSureToShareThisPromptToCommunity": "您确定要分享此提示语到社区吗？",
+  "areYouSureToShareThisPromptToCommunity": "您确定要分享此提示语到社区广场吗？",
  "shareRecording": "分享录音",
  "sharedRecording": "分享了一条录音",
-  "areYouSureToShareThisRecordingToCommunity": "您确定要分享此录音到社区吗？",
+  "areYouSureToShareThisRecordingToCommunity": "您确定要分享此录音到社区广场吗？",
  "shareStory": "分享文章",
  "sharedStory": "分享了一篇文章",
-  "areYouSureToShareThisStoryToCommunity": "您确定要分享此文章到社区吗？",
+  "areYouSureToShareThisStoryToCommunity": "您确定要分享此文章到社区广场吗？",
  "shareGpt": "分享智能助手",
  "sharedGpt": "分享了一个智能助手",
-  "areYouSureToShareThisGptToCommunity": "您确定要将这个智能助手分享到社区吗？",
+  "areYouSureToShareThisGptToCommunity": "您确定要将这个智能助手分享到社区广场吗？",
  "shareNote": "分享笔记",
  "sharedNote": "分享了一条笔记",
-  "areYouSureToShareThisNoteToCommunity": "您确定要将这条笔记分享到社区吗？",
+  "areYouSureToShareThisNoteToCommunity": "您确定要将这条笔记分享到社区广场吗？",
  "saveAiAssistant": "保存智能助手",
  "addToLibary": "添加到资源库",
  "areYouSureToAddThisVideoToYourLibrary": "您确定要添加此视频到资料库吗？",
--- a/enjoy/src/renderer/components/posts/post-recording.tsx
+++ b/enjoy/src/renderer/components/posts/post-recording.tsx
@@ -1,6 +1,9 @@
 import { useEffect, useState, useContext } from "react";
 import { AppSettingsProviderContext } from "@renderer/context";
-import { WavesurferPlayer } from "@renderer/components";
+import {
+  PronunciationAssessmentScoreDetail,
+  WavesurferPlayer,
+} from "@renderer/components";

 export const PostRecording = (props: {
  recording: RecordingType;
@@ -48,6 +51,14 @@ export const PostRecording = (props: {
        }}
      />

+      {recording.pronunciationAssessment && (
+        <div className="my-2">
+          <PronunciationAssessmentScoreDetail
+            assessment={recording.pronunciationAssessment}
+          />
+        </div>
+      )}
+
      {recording.referenceText && (
        <div className="my-2 bg-muted px-4 py-2 rounded">
          <div className="text-muted-foreground text-center font-serif select-text">
--- a/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-card.tsx
+++ b/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-card.tsx
@@ -30,56 +30,8 @@ export const PronunciationAssessmentCard = (props: {
          <div className="select-text line-clamp-2 text-muted-foreground font-serif pl-3 border-l-4 mb-4">
            {assessment.referenceText || assessment.target.referenceText}
          </div>
-          <div className="flex items-center gap-2 flex-wrap mb-4">
-            {[
-              {
-                label: t("models.pronunciationAssessment.pronunciationScore"),
-                value: assessment.pronunciationScore,
-              },
-              {
-                label: t("models.pronunciationAssessment.accuracyScore"),
-                value: assessment.accuracyScore,
-              },
-              {
-                label: t("models.pronunciationAssessment.fluencyScore"),
-                value: assessment.fluencyScore,
-              },
-              {
-                label: t("models.pronunciationAssessment.completenessScore"),
-                value: assessment.completenessScore,
-              },
-              {
-                label: t("models.pronunciationAssessment.prosodyScore"),
-                value: assessment.prosodyScore,
-              },
-              {
-                label: t("models.pronunciationAssessment.grammarScore"),
-                value: assessment.grammarScore,
-              },
-              {
-                label: t("models.pronunciationAssessment.vocabularyScore"),
-                value: assessment.vocabularyScore,
-              },
-              {
-                label: t("models.pronunciationAssessment.topicScore"),
-                value: assessment.topicScore,
-              },
-            ].map(({ label, value }) => {
-              if (typeof value === "number") {
-                return (
-                  <div key={label} className="flex items-center space-x-2 mb-2">
-                    <span className="text-muted-foreground text-sm">
-                      {label}:
-                    </span>
-                    <span
-                      className={`text-sm font-bold ${scoreColor(value || 0)}`}
-                    >
-                      {value}
-                    </span>
-                  </div>
-                );
-              }
-            })}
+          <div className="mb-4">
+            <PronunciationAssessmentScoreDetail assessment={assessment} />
          </div>
          {["Audio", "Video"].includes(assessment.target?.targetType) && (
            <div className="flex items-center gap-2 mb-4">
@@ -138,3 +90,59 @@ export const PronunciationAssessmentCard = (props: {
    </div>
  );
 };
+
+export const PronunciationAssessmentScoreDetail = (props: {
+  assessment: PronunciationAssessmentType;
+}) => {
+  const { assessment } = props;
+
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      {[
+        {
+          label: t("models.pronunciationAssessment.pronunciationScore"),
+          value: assessment.pronunciationScore,
+        },
+        {
+          label: t("models.pronunciationAssessment.accuracyScore"),
+          value: assessment.accuracyScore,
+        },
+        {
+          label: t("models.pronunciationAssessment.fluencyScore"),
+          value: assessment.fluencyScore,
+        },
+        {
+          label: t("models.pronunciationAssessment.completenessScore"),
+          value: assessment.completenessScore,
+        },
+        {
+          label: t("models.pronunciationAssessment.prosodyScore"),
+          value: assessment.prosodyScore,
+        },
+        {
+          label: t("models.pronunciationAssessment.grammarScore"),
+          value: assessment.grammarScore,
+        },
+        {
+          label: t("models.pronunciationAssessment.vocabularyScore"),
+          value: assessment.vocabularyScore,
+        },
+        {
+          label: t("models.pronunciationAssessment.topicScore"),
+          value: assessment.topicScore,
+        },
+      ].map(({ label, value }) => {
+        if (typeof value === "number") {
+          return (
+            <div key={label} className="flex items-center space-x-2 mb-2">
+              <span className="text-muted-foreground text-sm">{label}:</span>
+              <span className={`text-sm font-bold ${scoreColor(value || 0)}`}>
+                {value}
+              </span>
+            </div>
+          );
+        }
+      })}
+    </div>
+  );
+};