From ddd89e581c593dbe2d27033c810e094abae755a9 Mon Sep 17 00:00:00 2001 From: "Luca Cannarozzo (@cannarocks)" Date: Mon, 20 May 2024 15:19:51 +0200 Subject: [PATCH 1/4] refactor: Add sentiment data to DemoTranscript --- src/assets/icons/sentiment-1.svg | 11 +++ src/assets/icons/sentiment-2.svg | 11 +++ src/assets/icons/sentiment-3.svg | 13 ++++ src/assets/icons/sentiment-4.svg | 13 ++++ src/assets/icons/sentiment-5.svg | 13 ++++ src/stories/highlight/demo-parts/data.ts | 28 ++++++- .../highlight/demo-parts/sentiment-tag.tsx | 77 +++++++++++++++++++ .../demo-parts/transcript-sentiment.tsx | 71 +++++++++++++++++ src/stories/highlight/index.stories.tsx | 12 +++ 9 files changed, 247 insertions(+), 2 deletions(-) create mode 100644 src/assets/icons/sentiment-1.svg create mode 100644 src/assets/icons/sentiment-2.svg create mode 100644 src/assets/icons/sentiment-3.svg create mode 100644 src/assets/icons/sentiment-4.svg create mode 100644 src/assets/icons/sentiment-5.svg create mode 100644 src/stories/highlight/demo-parts/sentiment-tag.tsx create mode 100644 src/stories/highlight/demo-parts/transcript-sentiment.tsx diff --git a/src/assets/icons/sentiment-1.svg b/src/assets/icons/sentiment-1.svg new file mode 100644 index 00000000..2b552627 --- /dev/null +++ b/src/assets/icons/sentiment-1.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/sentiment-2.svg b/src/assets/icons/sentiment-2.svg new file mode 100644 index 00000000..4e04ff77 --- /dev/null +++ b/src/assets/icons/sentiment-2.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/sentiment-3.svg b/src/assets/icons/sentiment-3.svg new file mode 100644 index 00000000..d8b12fe5 --- /dev/null +++ b/src/assets/icons/sentiment-3.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/icons/sentiment-4.svg b/src/assets/icons/sentiment-4.svg new file mode 100644 index 00000000..544a853d --- /dev/null +++ b/src/assets/icons/sentiment-4.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/icons/sentiment-5.svg b/src/assets/icons/sentiment-5.svg new file mode 100644 index 00000000..6894ec65 --- /dev/null +++ b/src/assets/icons/sentiment-5.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/stories/highlight/demo-parts/data.ts b/src/stories/highlight/demo-parts/data.ts index 5eb48779..4f349007 100644 --- a/src/stories/highlight/demo-parts/data.ts +++ b/src/stories/highlight/demo-parts/data.ts @@ -3653,6 +3653,7 @@ export const DemoTranscript = { num_words: 147, start: 55.68, end: 120.93, + sentiment: 4 }, { sentences: [ @@ -3666,6 +3667,7 @@ export const DemoTranscript = { num_words: 48, start: 122.75, end: 142.36499, + sentiment: 4 }, { sentences: [ @@ -3679,6 +3681,8 @@ export const DemoTranscript = { num_words: 1, start: 143.22499, end: 143.72499, + sentiment: 3 + }, { sentences: [ @@ -3702,6 +3706,7 @@ export const DemoTranscript = { num_words: 24, start: 146.98999, end: 159.355, + sentiment: 4 }, { sentences: [ @@ -3715,6 +3720,7 @@ export const DemoTranscript = { num_words: 5, start: 160.92, end: 167.73999, + sentiment: 3 }, { sentences: [ @@ -3728,6 +3734,7 @@ export const DemoTranscript = { num_words: 17, start: 168.765, end: 176.94499, + sentiment: 3 }, { sentences: [ @@ -3740,7 +3747,8 @@ export const DemoTranscript = { speaker: 1, num_words: 13, start: 177.85, - end: 184.25, + end: 184.25, + sentiment: 3 }, { sentences: [ @@ -3754,6 +3762,7 @@ export const DemoTranscript = { num_words: 4, start: 184.25, end: 186.27, + sentiment: 3 }, { sentences: [ @@ -3772,6 +3781,7 @@ export const DemoTranscript = { num_words: 7, start: 190.015, end: 191.955, + sentiment: 3 }, { sentences: [ @@ -3785,6 +3795,7 @@ export const DemoTranscript = { num_words: 24, start: 192.33499, end: 206.02, + sentiment: 3 }, { sentences: [ @@ -3798,6 +3809,7 @@ export const DemoTranscript = { num_words: 58, start: 208.065, end: 247.195, + sentiment: 3 }, { sentences: [ @@ -3811,6 +3823,7 @@ export const DemoTranscript = { num_words: 6, start: 249.7, end: 252.2, + sentiment: 3 }, { sentences: [ @@ -3824,6 +3837,7 @@ export const DemoTranscript = { num_words: 27, start: 254.98, end: 280.595, + sentiment: 2 }, { sentences: [ @@ -3837,6 +3851,7 @@ export const DemoTranscript = { num_words: 8, start: 282.21, end: 286.79, + sentiment: 3 }, { sentences: [ @@ -3850,6 +3865,7 @@ export const DemoTranscript = { num_words: 5, start: 289.64502, end: 293.665, + sentiment: 3 }, { sentences: [ @@ -3863,6 +3879,7 @@ export const DemoTranscript = { num_words: 10, start: 295.223, end: 299.723, + sentiment: 3 }, ], }, @@ -3871,4 +3888,11 @@ export const DemoTranscript = { }, ], }, -}; \ No newline at end of file +}; + + +export const DemoSentiment = { + role: "assistant", + rate: 4, + content: "The reason for this rating is that the tone of the text is overall polite, professional, and cooperative. The speaker expresses gratitude, ensures the participant feels comfortable, and clearly explains the purpose and process of the meeting. There is an emphasis on open communication, feedback, and collaboration, which creates a positive and constructive atmosphere. The overall attitude and approach towards the interaction appear positive and respectful." +} \ No newline at end of file diff --git a/src/stories/highlight/demo-parts/sentiment-tag.tsx b/src/stories/highlight/demo-parts/sentiment-tag.tsx new file mode 100644 index 00000000..e40e71e0 --- /dev/null +++ b/src/stories/highlight/demo-parts/sentiment-tag.tsx @@ -0,0 +1,77 @@ +import { theme } from "../../theme"; +import { Span } from "../../typography/span"; +import { ReactComponent as Sentiment1 } from "../../../assets/icons/sentiment-1.svg"; +import { ReactComponent as Sentiment2 } from "../../../assets/icons/sentiment-2.svg"; +import { ReactComponent as Sentiment3 } from "../../../assets/icons/sentiment-3.svg"; +import { ReactComponent as Sentiment4 } from "../../../assets/icons/sentiment-4.svg"; +import { ReactComponent as Sentiment5 } from "../../../assets/icons/sentiment-5.svg"; +import styled from "styled-components"; + +const StyledDiv = styled.div` + svg { + width: ${({ theme }) => theme.space.sm}; + height: ${({ theme }) => theme.space.sm}; + margin-right: ${(p) => p.theme.space.xs}; + flex-shrink: 0; + } +`; + +export const getSentiment = (value: number) => { + switch (value) { + case 1: + return { + color: theme.palette.red[500], + text: ( + + {" "} + Very Negative + + ), + }; + case 2: + return { + color: theme.palette.red[500], + text: ( + + {" "} + Negative + + ), + }; + case 3: + return { + color: theme.palette.yellow[500], + text: ( + + Neutral + + ), + }; + case 4: + return { + color: theme.palette.green[500], + text: ( + + {" "} + Positive + + ), + }; + case 5: + return { + color: theme.palette.green[500], + text: ( + + {" "} + Very Positive + + ), + }; + + default: + return { + color: theme.palette.yellow[500], + text: "", + }; + } +}; diff --git a/src/stories/highlight/demo-parts/transcript-sentiment.tsx b/src/stories/highlight/demo-parts/transcript-sentiment.tsx new file mode 100644 index 00000000..382143f5 --- /dev/null +++ b/src/stories/highlight/demo-parts/transcript-sentiment.tsx @@ -0,0 +1,71 @@ +import { styled } from "styled-components"; +import { Highlight } from ".."; +import { formatDuration } from "../../player/parts/utils"; +import { SM } from "../../typography/typescale"; +import { StoryArgs } from "../index.stories"; +import { DemoTranscript as demo, DemoSentiment } from "./data"; +import { getSentiment } from "./sentiment-tag"; +import { Textarea } from "../../forms/textarea"; + +const StyledDiv = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + + margin-bottom: ${({ theme }) => theme.space.sm}; +`; + +export const TSentiment = ( + args: StoryArgs & { currentTime: number; offset: number } +) => { + const words = demo.results.channels[0].alternatives[0].words.map((w) => ({ + word: w.punctuated_word, + start: w.start, + end: w.end, + speaker: w.speaker, + })); + const paragraphs = + demo.results.channels[0].alternatives[0].paragraphs.paragraphs.map((w) => ({ + words: words.filter((word) => word.start >= w.start && word.end <= w.end), + start: w.start, + end: w.end, + speaker: w.speaker, + text: w.sentences.map((s) => s.text).join(" "), + sentiment: w.sentiment, + })); + return ( + + Overall: 4 - Positive +