Update src/streamlit_app.py

src/streamlit_app.py

@@ -2,7 +2,9 @@ import streamlit as st
 import pyphen
 import re
 import random
-from typing import List, Tuple
+from typing import List, Tuple, Dict
+import requests
+import json
 
 # Configure page
 st.set_page_config(
@@ -17,9 +19,35 @@ st.set_page_config(
 def get_pyphen_dict():
     return pyphen.Pyphen(lang='en')
 
+# Cache for IPA pronunciations to avoid repeated API calls
+@st.cache_data
+def get_ipa_pronunciation(word: str) -> str:
+    """Get IPA pronunciation for a word using a free dictionary API"""
+    try:
+        # Clean the word
+        clean_word = re.sub(r'[^\w]', '', word.lower())
+        if not clean_word:
+            return ""
+        
+        # Try Free Dictionary API
+        url = f"https://api.dictionaryapi.dev/api/v2/entries/en/{clean_word}"
+        response = requests.get(url, timeout=2)
+        
+        if response.status_code == 200:
+            data = response.json()
+            if data and len(data) > 0:
+                phonetics = data[0].get('phonetics', [])
+                for phonetic in phonetics:
+                    if 'text' in phonetic and phonetic['text']:
+                        return phonetic['text']
+        
+        # Fallback - return empty if no pronunciation found
+        return ""
+    except:
+        return ""
+
 def generate_color_palette(num_colors: int) -> List[str]:
     """Generate gray shades for syllables"""
-    # Use different shades of gray instead of bright colors
     base_grays = [
         "#2C3E50", "#34495E", "#5D6D7E", "#85929E", "#566573",
         "#515A5A", "#626567", "#797D7F", "#922B21", "#A93226",
@@ -27,9 +55,7 @@ def generate_color_palette(num_colors: int) -> List[str]:
         "#D7BDE2", "#BB8FCE", "#A569BD", "#8E44AD", "#7D3C98"
     ]
     
-    # Generate more gray shades if needed
     while len(base_grays) < num_colors:
-        # Generate random gray shades
         gray_val = random.randint(60, 140)
         color = f"#{gray_val:02x}{gray_val:02x}{gray_val:02x}"
         base_grays.append(color)
@@ -38,22 +64,18 @@ def generate_color_palette(num_colors: int) -> List[str]:
 
 def syllabify_word(word: str, pyphen_dict) -> List[str]:
     """Syllabify a single word using pyphen"""
-    # Clean the word of punctuation for syllabification
     clean_word = re.sub(r'[^\w]', '', word)
     
     if not clean_word:
         return [word]
     
     try:
-        # Use pyphen to get syllables
         syllabified = pyphen_dict.inserted(clean_word.lower())
         syllables = syllabified.split('-')
         
-        # If no syllables found (single syllable word), return the word
         if len(syllables) == 1 and syllables[0] == clean_word.lower():
             return [clean_word]
         
-        # Handle case preservation
         if clean_word.isupper():
             syllables = [syl.upper() for syl in syllables]
         elif clean_word[0].isupper():
@@ -67,124 +89,294 @@ def syllabify_word(word: str, pyphen_dict) -> List[str]:
     except:
         return [clean_word]
 
-def process_text(text: str) -> List[Tuple[str, List[Tuple[str, str]]]]:
-    """Process text and return syllable breakdown only"""
+def process_text(text: str) -> Tuple[List[Tuple[str, str, str]], List[Tuple[str, List[Tuple[str, str]]]], Dict[str, str]]:
+    """Process text and return original words, syllable breakdown, and IPA dictionary"""
     pyphen_dict = get_pyphen_dict()
     
-    # Split into words
-    words = re.findall(r'\b\w+\b', text)
+    # Find words with their positions in original text
+    word_pattern = r'\b\w+\b'
+    words_with_positions = []
+    for match in re.finditer(word_pattern, text):
+        words_with_positions.append((match.group(), match.start(), match.end()))
+    
+    original_words = []
     syllable_breakdown = []
+    ipa_dict = {}
     
-    for word in words:
-        syllables_list = syllabify_word(word, pyphen_dict)
+    # Generate a consistent color for each unique word
+    unique_words = list(set([word.lower() for word, _, _ in words_with_positions]))
+    word_colors = {}
+    colors = generate_color_palette(len(unique_words))
+    
+    for i, unique_word in enumerate(unique_words):
+        word_colors[unique_word] = colors[i % len(colors)]
+    
+    for i, (word, start_pos, end_pos) in enumerate(words_with_positions):
+        # Get IPA pronunciation (cached)
+        ipa = get_ipa_pronunciation(word)
+        ipa_dict[word.lower()] = ipa
+        
+        # Get color for this word
+        color = word_colors[word.lower()]
+        
+        # Add to original words with unique identifier
+        word_id = f"word_{i}"
+        original_words.append((word, color, word_id))
         
-        # Generate gray colors for this word's syllables
-        colors = generate_color_palette(len(syllables_list))
+        # Process syllables
+        syllables_list = syllabify_word(word, pyphen_dict)
+        syllable_colored = [(syl, color) for syl in syllables_list]
+        syllable_breakdown.append((word, syllable_colored, word_id))
+    
+    return original_words, syllable_breakdown, ipa_dict
+
+def create_hover_css_and_js():
+    """Create CSS and JavaScript for hover effects and IPA tooltips"""
+    return """
+    <style>
+    .word-hover {
+        cursor: pointer;
+        padding: 2px 4px;
+        border-radius: 3px;
+        transition: all 0.2s ease;
+        position: relative;
+        display: inline-block;
+    }
+    
+    .word-hover:hover {
+        background-color: rgba(255, 255, 0, 0.3) !important;
+        transform: scale(1.05);
+    }
+    
+    .tooltip {
+        visibility: hidden;
+        background-color: #333;
+        color: white;
+        text-align: center;
+        border-radius: 6px;
+        padding: 8px 12px;
+        position: absolute;
+        z-index: 1000;
+        bottom: 125%;
+        left: 50%;
+        margin-left: -60px;
+        opacity: 0;
+        transition: opacity 0.3s;
+        font-family: 'Courier New', monospace;
+        font-size: 14px;
+        white-space: nowrap;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    }
+    
+    .tooltip::after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: #333 transparent transparent transparent;
+    }
+    
+    .word-hover:hover .tooltip {
+        visibility: visible;
+        opacity: 1;
+    }
+    
+    .highlighted {
+        background-color: rgba(255, 255, 0, 0.5) !important;
+        transform: scale(1.05);
+    }
+    </style>
+    
+    <script>
+    function highlightWord(wordId) {
+        // Remove existing highlights
+        document.querySelectorAll('.word-hover').forEach(el => {
+            el.classList.remove('highlighted');
+        });
         
-        # Add to syllable breakdown
-        syllable_colored = [(syl, colors[i % len(colors)]) for i, syl in enumerate(syllables_list)]
-        syllable_breakdown.append((word, syllable_colored))
+        // Highlight all instances of this word
+        document.querySelectorAll('[data-word-id="' + wordId + '"]').forEach(el => {
+            el.classList.add('highlighted');
+        });
+    }
     
-    return syllable_breakdown
+    function removeHighlight() {
+        document.querySelectorAll('.word-hover').forEach(el => {
+            el.classList.remove('highlighted');
+        });
+    }
+    </script>
+    """
 
-def display_colored_text(colored_words: List[Tuple[str, str]]):
-    """Display text with colored words"""
+def display_original_text(original_words: List[Tuple[str, str, str]], ipa_dict: Dict[str, str]):
+    """Display original text with hover effects and IPA tooltips"""
     html_parts = []
-    for word, color in colored_words:
-        if word.strip():
-            html_parts.append(f'<span style="color: {color}; font-weight: bold; font-size: 16px;">{word}</span>')
-        else:
-            html_parts.append(word)
+    
+    for word, color, word_id in original_words:
+        ipa = ipa_dict.get(word.lower(), "")
+        tooltip_text = f"IPA: {ipa}" if ipa else "IPA: Not available"
+        
+        html_parts.append(f'''
+        <span class="word-hover" 
+              style="color: {color}; font-weight: bold; font-size: 16px;" 
+              data-word-id="{word_id}"
+              onmouseenter="highlightWord('{word_id}')"
+              onmouseleave="removeHighlight()">
+            {word}
+            <span class="tooltip">{tooltip_text}</span>
+        </span> ''')
     
     html_content = ''.join(html_parts)
-    st.markdown(f'<div style="font-size: 16px; line-height: 1.6; padding: 15px; border: 2px solid #ddd; border-radius: 8px; background-color: #f9f9f9;">{html_content}</div>', unsafe_allow_html=True)
+    st.markdown(f'''
+    <div style="font-size: 16px; line-height: 1.8; padding: 15px; border: 2px solid #ddd; border-radius: 8px; background-color: #f9f9f9;">
+        {html_content}
+    </div>
+    ''', unsafe_allow_html=True)
 
-def display_syllable_breakdown(syllable_breakdown: List[Tuple[str, List[Tuple[str, str]]]]):
-    """Display syllable breakdown with hyphens"""
+def display_syllable_breakdown(syllable_breakdown: List[Tuple[str, List[Tuple[str, str]], str]], ipa_dict: Dict[str, str]):
+    """Display syllable breakdown with hyphens, hover effects, and IPA tooltips"""
     html_parts = []
     
-    for word, syllables in syllable_breakdown:
+    for word, syllables, word_id in syllable_breakdown:
         if syllables and len(syllables) > 0:
-            # Create hyphenated syllable display
+            ipa = ipa_dict.get(word.lower(), "")
+            tooltip_text = f"IPA: {ipa}" if ipa else "IPA: Not available"
+            
             syllable_spans = []
             for syl, color in syllables:
                 syllable_spans.append(f'<span style="color: {color}; font-weight: bold; font-size: 16px;">{syl}</span>')
             
-            # Join with hyphens for multi-syllable words
             if len(syllables) > 1:
                 syllable_display = '<span style="color: #666; font-weight: bold;">-</span>'.join(syllable_spans)
             else:
                 syllable_display = syllable_spans[0]
             
-            html_parts.append(f'<span style="margin-right: 12px; display: inline-block; margin-bottom: 6px;">{syllable_display}</span>')
+            html_parts.append(f'''
+            <span class="word-hover" 
+                  style="margin-right: 12px; display: inline-block; margin-bottom: 6px;" 
+                  data-word-id="{word_id}"
+                  onmouseenter="highlightWord('{word_id}')"
+                  onmouseleave="removeHighlight()">
+                {syllable_display}
+                <span class="tooltip">{tooltip_text}</span>
+            </span>''')
     
     if html_parts:
         html_content = ''.join(html_parts)
-        st.markdown(f'<div style="font-size: 16px; line-height: 1.6; padding: 15px; border: 2px solid #ddd; border-radius: 8px; background-color: #f0f8ff;">{html_content}</div>', unsafe_allow_html=True)
+        st.markdown(f'''
+        <div style="font-size: 16px; line-height: 1.8; padding: 15px; border: 2px solid #ddd; border-radius: 8px; background-color: #f0f8ff;">
+            {html_content}
+        </div>
+        ''', unsafe_allow_html=True)
 
-# Main app
 def main():
-    st.title("🔤 Text Syllabification Tool")
-    st.markdown("*Enter text to see accurate syllable breakdown with color coding*")
+    st.title("🔤 Enhanced Text Syllabification Tool")
+    st.markdown("*Enter text to see syllable breakdown with IPA pronunciation and interactive highlighting*")
+    
+    # Add CSS and JavaScript
+    st.markdown(create_hover_css_and_js(), unsafe_allow_html=True)
     
     # Input text area
     input_text = st.text_area(
         "Enter your text:",
         placeholder="Type or paste your text here...",
         height=100,
-        help="Enter any text to see how words are broken down into syllables"
+        help="Enter any text to see syllables, IPA pronunciations, and interactive highlighting"
     )
     
     # Submit button
     submit_clicked = st.button("🔍 Submit", type="primary", use_container_width=True)
     
     if submit_clicked and input_text.strip():
-        # Process the text
-        syllable_breakdown = process_text(input_text)
+        with st.spinner("Processing text and fetching pronunciations..."):
+            # Process the text
+            original_words, syllable_breakdown, ipa_dict = process_text(input_text)
+        
+        # Display original text
+        st.subheader("📝 Original Text")
+        st.markdown("*Hover over words to see IPA pronunciation and highlight matching words*")
+        display_original_text(original_words, ipa_dict)
         
         # Display syllable breakdown
-        st.subheader("Syllable Breakdown")
-        display_syllable_breakdown(syllable_breakdown)
+        st.subheader("🔤 Syllable Breakdown")
+        st.markdown("*Hover over words to see IPA pronunciation and highlight matching words*")
+        display_syllable_breakdown(syllable_breakdown, ipa_dict)
         
         # Statistics
         total_words = len(syllable_breakdown)
-        total_syllables = sum(len(syls) for _, syls in syllable_breakdown)
+        total_syllables = sum(len(syls) for _, syls, _ in syllable_breakdown)
         
         st.markdown(f"**📊 {total_words} words • {total_syllables} syllables**")
         
-        # Show syllable counts in a more compact way
+        # Show syllable counts and IPA in expandable section
         if syllable_breakdown:
-            with st.expander("📈 Syllable Counts per Word", expanded=False):
-                counts_text = " • ".join([f"{word}: {len(syllables)}" for word, syllables in syllable_breakdown])
+            with st.expander("📈 Detailed Information", expanded=False):
+                st.markdown("**Syllable Counts:**")
+                counts_text = " • ".join([f"{word}: {len(syllables)}" for word, syllables, _ in syllable_breakdown])
                 st.markdown(f"<small>{counts_text}</small>", unsafe_allow_html=True)
+                
+                st.markdown("**IPA Pronunciations:**")
+                ipa_available = {word: ipa for word, ipa in ipa_dict.items() if ipa}
+                if ipa_available:
+                    for word, ipa in sorted(ipa_available.items()):
+                        st.text(f"{word}: {ipa}")
+                else:
+                    st.text("No IPA pronunciations available for this text.")
     
     elif submit_clicked and not input_text.strip():
         st.warning("⚠️ Please enter some text first!")
     
     elif not submit_clicked:
-        st.info("👆 Enter some text above and click Submit to see the syllabification!")
+        st.info("👆 Enter some text above and click Submit to see the enhanced syllabification!")
         
         # Example
         st.subheader("Example")
-        example_text = "The preparation of abstracts is an intellectual effort requiring general familiarity."
+        example_text = "The preparation of abstracts requires intellectual familiarity."
         st.code(example_text)
         
         if st.button("Try Example"):
-            # Process example
-            syllable_breakdown = process_text(example_text)
+            with st.spinner("Processing example..."):
+                original_words, syllable_breakdown, ipa_dict = process_text(example_text)
+            
+            st.subheader("📝 Original Text")
+            display_original_text(original_words, ipa_dict)
             
-            st.subheader("Syllable Breakdown")
-            display_syllable_breakdown(syllable_breakdown)
+            st.subheader("🔤 Syllable Breakdown")
+            display_syllable_breakdown(syllable_breakdown, ipa_dict)
             
-            # Show example statistics
             total_words = len(syllable_breakdown)
-            total_syllables = sum(len(syls) for _, syls in syllable_breakdown)
+            total_syllables = sum(len(syls) for _, syls, _ in syllable_breakdown)
             st.markdown(f"**📊 {total_words} words • {total_syllables} syllables**")
 
     # About section
-    with st.expander("About this tool"):
+    with st.expander("About this Enhanced Tool"):
         st.markdown("""
-            Created by @aghilalb        
+        This enhanced tool provides:
+        
+        **🔤 Syllabification Features:**
+        - Accurate English syllabification using pyphen (Hunspell algorithm)
+        - Color-coded syllables for easy reading
+        - Syllable counts and statistics
+        - Proper capitalization handling
+        
+        **🎯 Interactive Features:**
+        - **Two text boxes**: Original text and syllabified version
+        - **Hover highlighting**: Mouse over a word to highlight it in both boxes
+        - **IPA pronunciations**: Hover tooltips show International Phonetic Alphabet notation
+        - **Color consistency**: Same words use the same colors across both displays
+        
+        **🔊 Pronunciation Data:**
+        - IPA pronunciations fetched from Free Dictionary API
+        - Cached for performance
+        - Displays "Not available" for words without pronunciation data
+        
+        **💡 Usage Tips:**
+        - Hover over any word to see its IPA pronunciation
+        - Watch how the same word is highlighted in both the original and syllabified versions
+        - Use the detailed information section to see all pronunciations at once
         """)
 
 if __name__ == "__main__":