Update src/streamlit_app.py

src/streamlit_app.py

@@ -39,32 +39,62 @@ st.markdown("""
     
     .word-highlight {
         display: inline-block;
-        padding: 0 4px;
-        margin: 0 2px;
+        padding: 2px 4px;
+        margin: 0 1px;
         border-radius: 4px;
-        transition: all 0.2s ease;
+        transition: all 0.3s ease;
         cursor: pointer;
+        color: #666;
+        background-color: transparent;
+    }
+    
+    .word-highlight:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     }
     
     .pronunciation-word {
         display: inline-block;
-        padding: 0 4px;
-        margin: 0 2px;
+        padding: 2px 4px;
+        margin: 0 1px;
         border-radius: 4px;
-        transition: all 0.2s ease;
+        transition: all 0.3s ease;
         cursor: pointer;
         font-family: 'Courier New', monospace;
         letter-spacing: 1px;
+        color: #666;
+        background-color: transparent;
     }
     
-    .color-1 { background-color: rgba(110, 142, 251, 0.15); color: #6e8efb; }
-    .color-2 { background-color: rgba(167, 119, 227, 0.15); color: #a777e3; }
-    .color-3 { background-color: rgba(79, 172, 254, 0.15); color: #4facfe; }
-    .color-4 { background-color: rgba(0, 242, 254, 0.15); color: #00f2fe; }
-    .color-5 { background-color: rgba(67, 233, 123, 0.15); color: #43e97b; }
-    .color-6 { background-color: rgba(56, 249, 215, 0.15); color: #38f9d7; }
-    .color-7 { background-color: rgba(250, 112, 154, 0.15); color: #fa709a; }
-    .color-8 { background-color: rgba(177, 151, 9, 0.15); color: #b19709; }
+    .pronunciation-word:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    
+    /* Active states when hovered/linked */
+    .word-active {
+        background-color: rgba(110, 142, 251, 0.2) !important;
+        color: #6e8efb !important;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 12px rgba(110, 142, 251, 0.3);
+    }
+    
+    .pronunciation-active {
+        background-color: rgba(110, 142, 251, 0.2) !important;
+        color: #6e8efb !important;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 12px rgba(110, 142, 251, 0.3);
+    }
+    
+    /* Color classes - only used for subtle borders */
+    .color-1 { border-left: 3px solid #6e8efb; }
+    .color-2 { border-left: 3px solid #a777e3; }
+    .color-3 { border-left: 3px solid #4facfe; }
+    .color-4 { border-left: 3px solid #00f2fe; }
+    .color-5 { border-left: 3px solid #43e97b; }
+    .color-6 { border-left: 3px solid #38f9d7; }
+    .color-7 { border-left: 3px solid #fa709a; }
+    .color-8 { border-left: 3px solid #b19709; }
     
     .pronunciation-separator {
         color: #a777e3;
@@ -91,7 +121,8 @@ st.markdown("""
     
     .results-text {
         font-size: 1.1rem;
-        line-height: 1.6;
+        line-height: 1.8;
+        color: #666;
     }
     
     .sample-buttons {
@@ -141,7 +172,73 @@ st.markdown("""
         text-transform: uppercase;
         letter-spacing: 1px;
     }
+    
+    /* Interactive hover JavaScript */
+    .hover-container {
+        position: relative;
+    }
 </style>
+
+<script>
+function addHoverInteraction() {
+    // Add event listeners for word-syllable linking
+    setTimeout(() => {
+        const words = document.querySelectorAll('.word-highlight');
+        const pronunciations = document.querySelectorAll('.pronunciation-word');
+        
+        // Clear any existing listeners
+        words.forEach(word => {
+            word.replaceWith(word.cloneNode(true));
+        });
+        pronunciations.forEach(pron => {
+            pron.replaceWith(pron.cloneNode(true));
+        });
+        
+        // Re-select after cloning
+        const newWords = document.querySelectorAll('.word-highlight');
+        const newPronunciations = document.querySelectorAll('.pronunciation-word');
+        
+        newWords.forEach((word, index) => {
+            word.addEventListener('mouseenter', () => {
+                // Highlight corresponding pronunciation
+                word.classList.add('word-active');
+                if (newPronunciations[index]) {
+                    newPronunciations[index].classList.add('pronunciation-active');
+                }
+            });
+            
+            word.addEventListener('mouseleave', () => {
+                // Remove highlights
+                word.classList.remove('word-active');
+                if (newPronunciations[index]) {
+                    newPronunciations[index].classList.remove('pronunciation-active');
+                }
+            });
+        });
+        
+        newPronunciations.forEach((pron, index) => {
+            pron.addEventListener('mouseenter', () => {
+                // Highlight corresponding word
+                pron.classList.add('pronunciation-active');
+                if (newWords[index]) {
+                    newWords[index].classList.add('word-active');
+                }
+            });
+            
+            pron.addEventListener('mouseleave', () => {
+                // Remove highlights
+                pron.classList.remove('pronunciation-active');
+                if (newWords[index]) {
+                    newWords[index].classList.remove('word-active');
+                }
+            });
+        });
+    }, 100);
+}
+
+// Run the interaction setup when page loads
+document.addEventListener('DOMContentLoaded', addHoverInteraction);
+</script>
 """, unsafe_allow_html=True)
 
 class PronunciationAnalyzer:
@@ -266,7 +363,7 @@ def render_highlighted_text(word_syllables: List[Tuple[str, List[str]]], analyze
     for word, syllables in word_syllables:
         if any(c.isalnum() for c in word):
             color_class = analyzer.color_classes[word_index % len(analyzer.color_classes)]
-            html_parts.append(f'<span class="word-highlight {color_class}">{word}</span>')
+            html_parts.append(f'<span class="word-highlight {color_class}" data-word-index="{word_index}">{word}</span>')
             word_index += 1
         else:
             html_parts.append(word)
@@ -288,7 +385,7 @@ def render_pronunciation(word_syllables: List[Tuple[str, List[str]]], analyzer:
             
             # Join syllables with dots
             syllable_text = '<span class="pronunciation-separator">·</span>'.join(syllables)
-            html_parts.append(f'<span class="pronunciation-word {color_class}">{syllable_text}</span>')
+            html_parts.append(f'<span class="pronunciation-word {color_class}" data-word-index="{word_index}">{syllable_text}</span>')
             word_index += 1
         else:
             html_parts.append(f'<span class="pronunciation-word">{word}</span>')
@@ -398,12 +495,74 @@ def main():
             # Original text with highlights
             st.markdown("### 📖 Original Text")
             original_html = render_highlighted_text(word_syllables, analyzer)
-            st.markdown(f'<div class="analysis-card"><div class="results-text">{original_html}</div></div>', unsafe_allow_html=True)
+            st.markdown(f'<div class="analysis-card hover-container"><div class="results-text">{original_html}</div></div>', unsafe_allow_html=True)
             
             # Pronunciation breakdown
             st.markdown("### 🔤 Pronunciation Breakdown")
             pronunciation_html = render_pronunciation(word_syllables, analyzer)
-            st.markdown(f'<div class="analysis-card"><div class="results-text">{pronunciation_html}</div></div>', unsafe_allow_html=True)
+            st.markdown(f'<div class="analysis-card hover-container"><div class="results-text">{pronunciation_html}</div></div>', unsafe_allow_html=True)
+            
+            # Add JavaScript for hover interaction
+            st.components.v1.html("""
+            <script>
+            function addHoverInteraction() {
+                const words = parent.document.querySelectorAll('.word-highlight');
+                const pronunciations = parent.document.querySelectorAll('.pronunciation-word');
+                
+                // Clear existing event listeners by cloning nodes
+                words.forEach((word, index) => {
+                    const wordIndex = word.getAttribute('data-word-index');
+                    if (wordIndex !== null) {
+                        const newWord = word.cloneNode(true);
+                        word.parentNode.replaceChild(newWord, word);
+                        
+                        newWord.addEventListener('mouseenter', () => {
+                            newWord.classList.add('word-active');
+                            const correspondingPron = parent.document.querySelector(`[data-word-index="${wordIndex}"].pronunciation-word`);
+                            if (correspondingPron) {
+                                correspondingPron.classList.add('pronunciation-active');
+                            }
+                        });
+                        
+                        newWord.addEventListener('mouseleave', () => {
+                            newWord.classList.remove('word-active');
+                            const correspondingPron = parent.document.querySelector(`[data-word-index="${wordIndex}"].pronunciation-word`);
+                            if (correspondingPron) {
+                                correspondingPron.classList.remove('pronunciation-active');
+                            }
+                        });
+                    }
+                });
+                
+                pronunciations.forEach((pron, index) => {
+                    const wordIndex = pron.getAttribute('data-word-index');
+                    if (wordIndex !== null) {
+                        const newPron = pron.cloneNode(true);
+                        pron.parentNode.replaceChild(newPron, pron);
+                        
+                        newPron.addEventListener('mouseenter', () => {
+                            newPron.classList.add('pronunciation-active');
+                            const correspondingWord = parent.document.querySelector(`[data-word-index="${wordIndex}"].word-highlight`);
+                            if (correspondingWord) {
+                                correspondingWord.classList.add('word-active');
+                            }
+                        });
+                        
+                        newPron.addEventListener('mouseleave', () => {
+                            newPron.classList.remove('pronunciation-active');
+                            const correspondingWord = parent.document.querySelector(`[data-word-index="${wordIndex}"].word-highlight`);
+                            if (correspondingWord) {
+                                correspondingWord.classList.remove('word-active');
+                            }
+                        });
+                    }
+                });
+            }
+            
+            // Run interaction setup
+            setTimeout(addHoverInteraction, 300);
+            </script>
+            """, height=0)
             
             # Word-by-word breakdown
             st.markdown("### 📝 Word-by-Word Analysis")