Words now interpolate along bezier curve between points instead of only at exact positions

static/index.html

@@ -440,14 +440,45 @@
             const emotionData = {};
 
             if (entry.emotional_flow && entry.emotional_flow.length > 0) {
+                const maxWordIdx = words.length - 1;
                 entry.emotional_flow.forEach(flow => {
                     const color = getColorForEmotion(flow.label);
-                    flow.curves.forEach(curve => {
-                        for (let i = curve.start_word; i <= Math.min(curve.end_word, words.length - 1); i++) {
-                            if (!emotionData[i]) emotionData[i] = [];
-                            emotionData[i].push({ label: flow.label, intensity: curve.peak_intensity, color });
+                    const sorted = [...flow.curves].sort((a, b) => a.start_word - b.start_word);
+                    if (sorted.length === 0) return;
+
+                    // Bezier interpolation between consecutive curves
+                    for (let i = 0; i < sorted.length; i++) {
+                        const curve = sorted[i];
+                        const end = Math.min(curve.end_word, maxWordIdx);
+
+                        if (i < sorted.length - 1) {
+                            const next = sorted[i + 1];
+                            const interpEnd = Math.min(next.start_word, end);
+
+                            for (let w = curve.start_word; w <= interpEnd; w++) {
+                                const t = (next.start_word === curve.start_word) ? 0
+                                    : (w - curve.start_word) / (next.start_word - curve.start_word);
+                                const u = 1 - t;
+                                const intensity = u*u*u*curve.peak_intensity
+                                    + 3*u*u*t*curve.peak_intensity
+                                    + 3*u*t*t*next.peak_intensity
+                                    + t*t*t*next.peak_intensity;
+                                if (!emotionData[w]) emotionData[w] = [];
+                                emotionData[w].push({ label: flow.label, intensity, color });
+                            }
+
+                            // Flat tail beyond next start_word until this curve's end_word
+                            for (let w = Math.max(interpEnd + 1, curve.start_word); w <= end; w++) {
+                                if (!emotionData[w]) emotionData[w] = [];
+                                emotionData[w].push({ label: flow.label, intensity: curve.peak_intensity, color });
+                            }
+                        } else {
+                            for (let w = curve.start_word; w <= end; w++) {
+                                if (!emotionData[w]) emotionData[w] = [];
+                                emotionData[w].push({ label: flow.label, intensity: curve.peak_intensity, color });
+                            }
                         }
-                    });
+                    }
                 });
             }