Update src/streamlit_app.py

src/streamlit_app.py

@@ -4,7 +4,6 @@ import re
 import random
 from typing import List, Tuple, Dict
 import requests
-import json
 
 # Configure page
 st.set_page_config(
@@ -24,12 +23,10 @@ def get_pyphen_dict():
 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)
         
@@ -40,27 +37,26 @@ def get_ipa_pronunciation(word: str) -> str:
                 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"""
-    base_grays = [
-        "#2C3E50", "#34495E", "#5D6D7E", "#85929E", "#566573",
-        "#515A5A", "#626567", "#797D7F", "#922B21", "#A93226",
-        "#B7472A", "#C0392B", "#CD6155", "#D98880", "#E8DAEF",
-        "#D7BDE2", "#BB8FCE", "#A569BD", "#8E44AD", "#7D3C98"
+    """Generate colors for syllables"""
+    colors = [
+        "#2C3E50", "#E74C3C", "#3498DB", "#2ECC71", "#F39C12",
+        "#9B59B6", "#1ABC9C", "#E67E22", "#34495E", "#F1C40F",
+        "#8E44AD", "#16A085", "#27AE60", "#E8753F", "#BDC3C7",
+        "#95A5A6", "#D35400", "#C0392B", "#8B4513", "#FF6347"
     ]
     
-    while len(base_grays) < num_colors:
-        gray_val = random.randint(60, 140)
-        color = f"#{gray_val:02x}{gray_val:02x}{gray_val:02x}"
-        base_grays.append(color)
+    while len(colors) < num_colors:
+        r = random.randint(50, 200)
+        g = random.randint(50, 200)
+        b = random.randint(50, 200)
+        colors.append(f"#{r:02x}{g:02x}{b:02x}")
     
-    return base_grays[:num_colors]
+    return colors[:num_colors]
 
 def syllabify_word(word: str, pyphen_dict) -> List[str]:
     """Syllabify a single word using pyphen"""
@@ -93,198 +89,119 @@ def process_text(text: str) -> Tuple[List[Tuple[str, str, str]], List[Tuple[str,
     """Process text and return original words, syllable breakdown, and IPA dictionary"""
     pyphen_dict = get_pyphen_dict()
     
-    # 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()))
-    
+    words = re.findall(r'\b\w+\b', text)
     original_words = []
     syllable_breakdown = []
     ipa_dict = {}
     
-    # Generate a consistent color for each unique word
-    unique_words = list(set([word.lower() for word, _, _ in words_with_positions]))
+    # Generate colors for unique words
+    unique_words = list(set([word.lower() for word in words]))
     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)
+    for i, word in enumerate(words):
+        # Get IPA pronunciation
         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}"
+        
+        # Add to original words
         original_words.append((word, color, word_id))
         
         # 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))
+        syllable_breakdown.append((word, syllable_colored))
     
     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);
-    }
+def display_text_with_colors(words_data: List[Tuple[str, str, str]], title: str, is_syllables: bool = False):
+    """Display text with colors using Streamlit columns for hover effect simulation"""
+    st.markdown(f"### {title}")
     
-    .tooltip::after {
-        content: "";
-        position: absolute;
-        top: 100%;
-        left: 50%;
-        margin-left: -5px;
-        border-width: 5px;
-        border-style: solid;
-        border-color: #333 transparent transparent transparent;
-    }
+    # Create a grid layout for words
+    cols_per_row = 8
+    word_chunks = [words_data[i:i + cols_per_row] for i in range(0, len(words_data), cols_per_row)]
     
-    .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');
-        });
-        
-        // Highlight all instances of this word
-        document.querySelectorAll('[data-word-id="' + wordId + '"]').forEach(el => {
-            el.classList.add('highlighted');
-        });
-    }
-    
-    function removeHighlight() {
-        document.querySelectorAll('.word-hover').forEach(el => {
-            el.classList.remove('highlighted');
-        });
-    }
-    </script>
-    """
+    for chunk in word_chunks:
+        cols = st.columns(len(chunk))
+        for i, (word_info, col) in enumerate(zip(chunk, cols)):
+            if is_syllables:
+                word, syllables = word_info
+                if len(syllables) > 1:
+                    display_text = '-'.join([syl for syl, _ in syllables])
+                else:
+                    display_text = syllables[0][0] if syllables else word
+                color = syllables[0][1] if syllables else "#333333"
+            else:
+                word, color, word_id = word_info
+                display_text = word
+            
+            with col:
+                st.markdown(
+                    f'<span style="color: {color}; font-weight: bold; font-size: 16px; padding: 4px; display: inline-block;">{display_text}</span>',
+                    unsafe_allow_html=True
+                )
 
-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, 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> ''')
+def display_word_grid_with_ipa(original_words, syllable_breakdown, ipa_dict, selected_word_idx=None):
+    """Display words in a grid format with IPA information"""
     
-    html_content = ''.join(html_parts)
-    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]], str]], ipa_dict: Dict[str, str]):
-    """Display syllable breakdown with hyphens, hover effects, and IPA tooltips"""
-    html_parts = []
+    # Create tabs for different views
+    tab1, tab2 = st.tabs(["📝 Original Text", "🔤 Syllabified Text"])
     
-    for word, syllables, word_id in syllable_breakdown:
-        if syllables and len(syllables) > 0:
-            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>')
-            
-            if len(syllables) > 1:
-                syllable_display = '<span style="color: #666; font-weight: bold;">-</span>'.join(syllable_spans)
+    with tab1:
+        st.markdown("*Click on a word to see its IPA pronunciation*")
+        
+        # Display original words in a flowing text format
+        html_words = []
+        for i, (word, color, word_id) in enumerate(original_words):
+            if i == selected_word_idx:
+                # Highlight selected word
+                html_words.append(f'<strong style="color: {color}; background-color: yellow; padding: 2px 4px; border-radius: 3px; font-size: 18px;">{word}</strong>')
             else:
-                syllable_display = syllable_spans[0]
-            
-            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>''')
+                html_words.append(f'<span style="color: {color}; font-weight: bold; font-size: 16px; margin: 0 2px;">{word}</span>')
+        
+        text_html = ' '.join(html_words)
+        st.markdown(f'<div style="line-height: 1.8; padding: 15px; border: 2px solid #ddd; border-radius: 8px; background-color: #f9f9f9;">{text_html}</div>', unsafe_allow_html=True)
     
-    if html_parts:
-        html_content = ''.join(html_parts)
-        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)
+    with tab2:
+        st.markdown("*Click on a word to see its IPA pronunciation*")
+        
+        # Display syllabified words
+        html_words = []
+        for i, (word, syllables) in enumerate(syllable_breakdown):
+            if syllables:
+                if len(syllables) > 1:
+                    syllable_parts = []
+                    for syl, color in syllables:
+                        syllable_parts.append(f'<span style="color: {color}; font-weight: bold;">{syl}</span>')
+                    syllable_text = '<span style="color: #666;">-</span>'.join(syllable_parts)
+                else:
+                    syllable_text = f'<span style="color: {syllables[0][1]}; font-weight: bold;">{syllables[0][0]}</span>'
+                
+                if i == selected_word_idx:
+                    html_words.append(f'<span style="background-color: yellow; padding: 2px 4px; border-radius: 3px; font-size: 18px;">{syllable_text}</span>')
+                else:
+                    html_words.append(f'<span style="font-size: 16px; margin: 0 4px;">{syllable_text}</span>')
+        
+        syllable_html = ' '.join(html_words)
+        st.markdown(f'<div style="line-height: 1.8; padding: 15px; border: 2px solid #ddd; border-radius: 8px; background-color: #f0f8ff;">{syllable_html}</div>', unsafe_allow_html=True)
 
 def main():
     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)
+    st.markdown("*Enter text to see syllable breakdown with IPA pronunciation and interactive word selection*")
     
     # 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 syllables, IPA pronunciations, and interactive highlighting"
+        help="Enter any text to see syllables and IPA pronunciations"
     )
     
     # Submit button
@@ -292,45 +209,93 @@ def main():
     
     if submit_clicked and input_text.strip():
         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)
+        # Word selection interface
+        st.subheader("📚 Interactive Word Explorer")
+        
+        # Create word selection buttons
+        word_list = [word for word, _, _ in original_words]
         
-        # Display 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)
+        # Display words as clickable buttons in columns
+        st.markdown("**Click on any word to see detailed information:**")
+        
+        cols_per_row = 6
+        word_chunks = [word_list[i:i + cols_per_row] for i in range(0, len(word_list), cols_per_row)]
+        
+        selected_word_idx = None
+        selected_word = None
+        
+        for chunk_idx, chunk in enumerate(word_chunks):
+            cols = st.columns(len(chunk))
+            for word_idx_in_chunk, (word, col) in enumerate(zip(chunk, cols)):
+                actual_word_idx = chunk_idx * cols_per_row + word_idx_in_chunk
+                with col:
+                    if st.button(word, key=f"word_btn_{actual_word_idx}", use_container_width=True):
+                        selected_word_idx = actual_word_idx
+                        selected_word = word
+        
+        # Display text with highlighting
+        display_word_grid_with_ipa(original_words, syllable_breakdown, ipa_dict, selected_word_idx)
+        
+        # Show detailed information for selected word
+        if selected_word_idx is not None and selected_word:
+            st.subheader(f"🔍 Details for: **{selected_word}**")
+            
+            col1, col2, col3 = st.columns(3)
+            
+            with col1:
+                st.markdown("**Original Word:**")
+                word_info = original_words[selected_word_idx]
+                st.markdown(f'<span style="color: {word_info[1]}; font-weight: bold; font-size: 20px;">{word_info[0]}</span>', unsafe_allow_html=True)
+            
+            with col2:
+                st.markdown("**Syllables:**")
+                syllables = syllable_breakdown[selected_word_idx][1]
+                if len(syllables) > 1:
+                    syllable_display = " - ".join([syl for syl, _ in syllables])
+                    st.markdown(f"**{syllable_display}** ({len(syllables)} syllables)")
+                else:
+                    st.markdown(f"**{syllables[0][0]}** (1 syllable)")
+            
+            with col3:
+                st.markdown("**IPA Pronunciation:**")
+                ipa = ipa_dict.get(selected_word.lower(), "")
+                if ipa:
+                    st.markdown(f"**{ipa}**")
+                    st.markdown("🔊 *Hover to hear pronunciation*")
+                else:
+                    st.markdown("*Not available*")
         
         # 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**")
+        st.markdown(f"**📊 Statistics: {total_words} words • {total_syllables} syllables**")
         
-        # Show syllable counts and IPA in expandable section
-        if syllable_breakdown:
-            with st.expander("📈 Detailed Information", expanded=False):
+        # Detailed information in expandable section
+        with st.expander("📈 Complete Analysis", expanded=False):
+            col1, col2 = st.columns(2)
+            
+            with col1:
                 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)
-                
+                for word, syllables in syllable_breakdown:
+                    st.text(f"{word}: {len(syllables)} syllable{'s' if len(syllables) > 1 else ''}")
+            
+            with col2:
                 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.")
+                    st.text("No IPA pronunciations available.")
     
     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 enhanced syllabification!")
+    else:
+        st.info("👆 Enter some text above and click Submit to start exploring!")
         
         # Example
         st.subheader("Example")
@@ -341,42 +306,39 @@ def main():
             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, ipa_dict)
+            display_word_grid_with_ipa(original_words, syllable_breakdown, ipa_dict)
             
             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 Enhanced Tool"):
         st.markdown("""
-        This enhanced tool provides:
+        This enhanced syllabification tool provides:
         
-        **🔤 Syllabification Features:**
+        **🔤 Core Features:**
         - Accurate English syllabification using pyphen (Hunspell algorithm)
-        - Color-coded syllables for easy reading
-        - Syllable counts and statistics
-        - Proper capitalization handling
+        - Color-coded words and syllables for easy identification
+        - Two view modes: Original text and Syllabified text
         
         **🎯 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
+        - **Click-to-explore**: Click any word button to see detailed analysis
+        - **Word highlighting**: Selected words are highlighted in both views
+        - **IPA pronunciations**: See phonetic transcriptions for each word
+        - **Syllable counting**: Visual breakdown of syllable structure
         
-        **🔊 Pronunciation Data:**
-        - IPA pronunciations fetched from Free Dictionary API
-        - Cached for performance
-        - Displays "Not available" for words without pronunciation data
+        **📊 Analysis Tools:**
+        - Complete syllable counts for all words
+        - Statistical overview (total words and syllables)
+        - Pronunciation data from Free Dictionary API
         
-        **💡 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
+        **💡 How to Use:**
+        1. Enter your text in the input area
+        2. Click Submit to process the text
+        3. Click on any word button to see detailed information
+        4. Switch between Original and Syllabified views using tabs
+        5. Check the Complete Analysis section for full details
         """)
 
 if __name__ == "__main__":