major updates on al-quran

Signed-off-by: Shoaib <[email protected]>

readme.md

@@ -105,5 +105,3 @@ Open source under MIT License
 
 - Quran translation: Yusuf Ali
 - Application development: [email protected]
-
-

src/al_quran_gradio.py

@@ -0,0 +1,83 @@
+import pandas as pd
+import re
+import gradio as gr
+from collections import defaultdict
+
+# Load the dataset
+quran_english_with_surah = pd.read_csv('/Users/salam9/Desktop/quran/en.yusufali.csv')
+surah_names = pd.read_csv('/Users/salam9/Desktop/quran/surah_names_english.csv', names=['Surah', 'Surah Name'])
+surah_names["Surah Name"] = surah_names["Surah Name"].str[1:]
+quran_english_with_surah = quran_english_with_surah.merge(surah_names, on='Surah')
+quran_english_with_surah.index = pd.RangeIndex(start=1, stop=len(quran_english_with_surah) + 1)
+
+# Create the inverted index
+def create_inverted_index(dataframe):
+    inverted_index = defaultdict(list)
+    for index, row in dataframe.iterrows():
+        words = row['Text'].split()
+        for word in words:
+            word = re.sub(r'\W+', '', word).lower()
+            if word:
+                inverted_index[word].append((row['Surah'], row['Ayah']))
+    return inverted_index
+
+inverted_index = create_inverted_index(quran_english_with_surah)
+
+# Define the search function
+def search_quran(keyword):
+    results = []
+    if keyword.lower() not in inverted_index:
+        return f"No occurrences found for '{keyword}'"
+    
+    verse_ids = inverted_index[keyword.lower()]
+    for verse_id in verse_ids:
+        surah_num, verse_num = verse_id
+        verse_data = quran_english_with_surah[(quran_english_with_surah['Surah'] == surah_num) & 
+                             (quran_english_with_surah['Ayah'] == verse_num)]
+        surah_name = verse_data['Surah Name'].iloc[0]
+        verse_text = verse_data['Text'].iloc[0]
+        highlighted_text = re.sub(f"(?i)({keyword})", r'<mark style="background-color: yellow; color: black;">\1</mark>', verse_text)
+        results.append(f"<div style='padding: 10px; border-bottom: 1px solid #ccc;'>"
+                       f"<strong>Surah:</strong> {surah_name}<br>"
+                       f"<strong>Reference:</strong> {surah_num}:{verse_num}<br>"
+                       f"<strong>Occurrences in verse:</strong> {verse_text.lower().count(keyword.lower())}<br>"
+                       f"<strong>Text:</strong> {highlighted_text}</div>")
+    return '<div style="max-height: 500px; overflow-y: auto; width: 100%; font-size: 18px;">' + ''.join(results) + '</div>'
+
+# Create the Gradio interface with a modern theme
+css = """
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f4f4f9;
+    color: #333;
+    margin: 0;
+    padding: 0;
+}
+.gradio-container {
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 20px;
+}
+.gradio-input, .gradio-output {
+    width: 100%;
+}
+.gradio-title {
+    font-size: 2em;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+.gradio-description {
+    font-size: 1.2em;
+    margin-bottom: 20px;
+}
+"""
+
+iface = gr.Interface(
+    fn=search_quran,
+    inputs=gr.Textbox(label="Enter a keyword"),
+    outputs=gr.HTML(label="Search Results"),
+    title='Quran Keyword Search',
+    description='Enter a keyword to search in the Quran',
+    css=css
+)
+iface.launch(share=True)

src/components/search_tab.py

@@ -0,0 +1,101 @@
+import gradio as gr
+import re
+from collections import defaultdict
+
+def create_inverted_index(dataframe):
+    """
+    Create an inverted index from the Quran dataset for efficient word searching.
+    
+    Args:
+        dataframe (pd.DataFrame): The Quran dataset with Text column
+        
+    Returns:
+        defaultdict: A dictionary mapping words to their locations (surah, ayah)
+    """
+    inverted_index = defaultdict(list)
+    for index, row in dataframe.iterrows():
+        words = row['Text'].split()
+        for word in words:
+            word = re.sub(r'\W+', '', word).lower()
+            if word:
+                inverted_index[word].append((row['Surah'], row['Ayah']))
+    return inverted_index
+
+def search_quran(keyword, quran_data, inverted_index):
+    """
+    Search for a keyword in the Quran and return formatted results.
+    
+    Args:
+        keyword (str): The word to search for
+        quran_data (pd.DataFrame): The Quran dataset
+        inverted_index (defaultdict): The inverted index for word searching
+        
+    Returns:
+        str: HTML formatted search results
+    """
+    results = []
+    if not keyword or keyword.lower() not in inverted_index:
+        return f"No occurrences found for '{keyword}'"
+    
+    verse_ids = inverted_index[keyword.lower()]
+    for verse_id in verse_ids:
+        surah_num, verse_num = verse_id
+        verse_data = quran_data[(quran_data['Surah'] == surah_num) & 
+                              (quran_data['Ayah'] == verse_num)]
+        surah_name = verse_data['Surah Name'].iloc[0]
+        verse_text = verse_data['Text'].iloc[0]
+        highlighted_text = re.sub(
+            f"(?i)({keyword})", 
+            r'<mark style="background-color: yellow; color: black;">\1</mark>', 
+            verse_text
+        )
+        results.append(
+            f"<div style='padding: 10px; border-bottom: 1px solid #ccc;'>"
+            f"<strong>Surah:</strong> {surah_name}<br>"
+            f"<strong>Reference:</strong> {surah_num}:{verse_num}<br>"
+            f"<strong>Occurrences in verse:</strong> {verse_text.lower().count(keyword.lower())}<br>"
+            f"<strong>Text:</strong> {highlighted_text}</div>"
+        )
+    return '<div style="max-height: 500px; overflow-y: auto; width: 100%; font-size: 18px;">' + ''.join(results) + '</div>'
+
+def create_search_tab(quran_data):
+    """
+    Create the search tab interface with description and functionality.
+    
+    Args:
+        quran_data (pd.DataFrame): The Quran dataset
+        
+    Returns:
+        gr.Tab: The configured search tab
+    """
+    inverted_index = create_inverted_index(quran_data)
+    
+    with gr.Tab("Search") as tab:
+        gr.Markdown("# Quran Keyword Search")
+        gr.Markdown("""
+        <div class='tab-description'>
+        Welcome to the Quran Search tool! This feature allows you to:
+        - Search for any word or phrase in the English translation
+        - See highlighted matches in their original context
+        - View Surah name and verse references for each result
+        - Track the number of occurrences in each verse
+        </div>
+        """)
+        
+        keyword_input = gr.Textbox(
+            label="Enter a keyword",
+            placeholder="Type a word to search in the Quran"
+        )
+        search_results = gr.HTML(label="Search Results")
+        search_button = gr.Button("Search")
+        
+        def search_wrapper(keyword):
+            return search_quran(keyword, quran_data, inverted_index)
+        
+        search_button.click(
+            search_wrapper,
+            inputs=keyword_input,
+            outputs=search_results
+        )
+    
+    return tab

src/components/statistics_tab.py

@@ -0,0 +1,79 @@
+import gradio as gr
+import matplotlib.pyplot as plt
+import seaborn as sns
+from .utils import plt_to_html
+
+def generate_plots_and_tables(quran_data):
+    """
+    Generate visualization plots and statistics tables for the Quran data.
+    
+    Args:
+        quran_data (pd.DataFrame): The Quran dataset
+        
+    Returns:
+        str: HTML formatted plots and tables
+    """
+    # Plot 1: Number of verses in each chapter
+    plt.figure(figsize=(30, 10))
+    sns.set_style('whitegrid')
+    value_counts = quran_data['Surah Name'].value_counts()
+    ax = sns.barplot(
+        x=value_counts.index,
+        y=value_counts.values,
+        hue=value_counts.index,
+        palette='viridis',
+        legend=False
+    )
+    
+    # Add value labels on bars
+    for container in ax.containers:
+        ax.bar_label(container, size=10, padding=2)
+    
+    # Customize plot
+    ax.set_title('Number of Verses in Each Chapter', fontweight='bold', fontsize=14)
+    ax.set_ylabel('Number of Verses', fontweight='bold')
+    ax.set_xlabel('Surah Name', fontweight='bold')
+    plt.xticks(rotation=90)
+    plt.tight_layout()
+    
+    # Convert plot to HTML
+    plot1_html = plt_to_html(plt)
+    
+    # Generate statistics table
+    surah_counts = quran_data['Surah Name'].value_counts().reset_index()
+    surah_counts.columns = ['Surah Name', 'Ayah Count']
+    table_html = surah_counts.to_html(
+        index=False, 
+        classes='table table-striped table-hover'
+    )
+    table_html = f'<div style="max-height: 300px; overflow-y: auto;">{table_html}</div>'
+    
+    return plot1_html + table_html
+
+def create_statistics_tab(quran_data):
+    """
+    Create the statistics tab interface with description and visualizations.
+    
+    Args:
+        quran_data (pd.DataFrame): The Quran dataset
+        
+    Returns:
+        gr.Tab: The configured statistics tab
+    """
+    with gr.Tab("Statistics") as tab:
+        gr.Markdown("# Quran Statistics")
+        gr.Markdown("""
+        <div class='tab-description'>
+        This section provides statistical insights about the Quran:
+        - Visual representation of verses distribution across chapters
+        - Interactive bar chart showing the number of verses in each Surah
+        - Detailed table with verse counts for each chapter
+        - Color-coded visualization for easy comparison
+        
+        The statistics help understand the structure and composition of the Quran.
+        </div>
+        """)
+        
+        stats_output = gr.HTML(value=generate_plots_and_tables(quran_data))
+    
+    return tab

src/components/surah_tab.py

@@ -0,0 +1,90 @@
+import gradio as gr
+import os
+
+def load_surah(surah_name_with_number, quran_data):
+    """
+    Load verses and word cloud for a specific Surah.
+    
+    Args:
+        surah_name_with_number (str): Format: "number. Surah Name"
+        quran_data (pd.DataFrame): The Quran dataset
+        
+    Returns:
+        tuple: (list of verses, word cloud image path)
+    """
+    surah_number = int(surah_name_with_number.split('.')[0])
+    surah_name = surah_name_with_number.split('. ')[1]
+    surah_verses = quran_data[quran_data['Surah'] == surah_number]['Text'].tolist()
+    word_cloud_path = f"word_cloud/surah_{surah_number}_{surah_name}.png"
+    return surah_verses, word_cloud_path
+
+def display_surah(surah_name_with_number, quran_data):
+    """
+    Get the verses text and word cloud for display.
+    
+    Args:
+        surah_name_with_number (str): Format: "number. Surah Name"
+        quran_data (pd.DataFrame): The Quran dataset
+        
+    Returns:
+        tuple: (verses text, word cloud image path)
+    """
+    verses, word_cloud_path = load_surah(surah_name_with_number, quran_data)
+    verses_text = "\n".join(verses)
+    return verses_text, word_cloud_path
+
+def create_surah_tab(quran_data, surah_names_list):
+    """
+    Create the Surah tab interface with description and display components.
+    
+    Args:
+        quran_data (pd.DataFrame): The Quran dataset
+        surah_names_list (list): List of formatted Surah names
+        
+    Returns:
+        gr.Tab: The configured Surah tab
+    """
+    with gr.Tab("Surah") as tab:
+        gr.Markdown("# Surah Explorer")
+        gr.Markdown("""
+        <div class='tab-description'>
+        Welcome to the Surah Explorer! This tool allows you to:
+        - Select and read any Surah from the Quran
+        - View the complete English translation
+        - See a visual word cloud representation of the Surah
+        - Understand the most frequently used terms in each chapter
+        
+        Select a Surah from the dropdown menu to begin exploring.
+        </div>
+        """)
+        
+        surah_name_with_number = gr.Dropdown(
+            label="Select a Surah",
+            choices=surah_names_list,
+            info="Choose a Surah to view its verses and word cloud"
+        )
+        
+        with gr.Row():
+            verses_output = gr.Textbox(
+                label="Verses",
+                lines=18,
+                visible=False,
+                elem_classes="verses-output"
+            )
+            word_cloud_output = gr.Image(
+                label="Word Cloud Visualization",
+                visible=False,
+                elem_classes="word-cloud-output"
+            )
+        
+        def update_visibility_and_load_surah(surah_name):
+            verses_text, word_cloud_path = display_surah(surah_name, quran_data)
+            return gr.update(visible=True, value=verses_text), gr.update(visible=True, value=word_cloud_path)
+        
+        surah_name_with_number.change(
+            update_visibility_and_load_surah,
+            inputs=[surah_name_with_number],
+            outputs=[verses_output, word_cloud_output]
+        )
+    
+    return tab

src/components/utils.py

@@ -0,0 +1,31 @@
+import pandas as pd
+import matplotlib.pyplot as plt
+from base64 import b64encode
+import io
+
+def load_data():
+    """Load and preprocess Quran dataset with surah names"""
+    quran_english_with_surah = pd.read_csv('datasets/en.yusufali.csv')
+    surah_names = pd.read_csv('datasets/surah_names_english.csv', names=['Surah', 'Surah Name'])
+    surah_names["Surah Name"] = surah_names["Surah Name"].str[1:]
+    quran_english_with_surah = quran_english_with_surah.merge(surah_names, on='Surah')
+    quran_english_with_surah.index = pd.RangeIndex(start=1, stop=len(quran_english_with_surah) + 1)
+    return quran_english_with_surah, surah_names
+
+def plt_to_html(plt):
+    """Convert matplotlib plot to HTML img tag"""
+    buf = io.BytesIO()
+    plt.savefig(buf, format='png')
+    buf.seek(0)
+    img_str = b64encode(buf.read()).decode('utf-8')
+    plt.close()
+    return f'<img src="data:image/png;base64,{img_str}"/>'
+
+def get_surah_names_list(surah_names):
+    """Create a formatted list of surah names with numbers"""
+    return [f"{row['Surah']}. {row['Surah Name']}" for _, row in surah_names.iterrows()]
+
+def load_css():
+    """Load CSS styles from file"""
+    with open('src/styles/styles.css', 'r') as f:
+        return f.read()

src/gradio_app.py

@@ -0,0 +1,39 @@
+import gradio as gr
+from components.utils import load_data, load_css, get_surah_names_list
+from components.search_tab import create_search_tab
+from components.statistics_tab import create_statistics_tab
+from components.surah_tab import create_surah_tab
+
+def main():
+    """
+    Main function to create and launch the Quran Explorer application.
+    The app provides three main features:
+    1. Keyword search across the Quran
+    2. Statistical analysis and visualizations
+    3. Surah-wise exploration with word clouds
+    """
+    # Load data
+    quran_data, surah_names = load_data()
+    surah_names_list = get_surah_names_list(surah_names)
+    
+    # Create the Gradio interface
+    with gr.Blocks(css=load_css()) as iface:
+        gr.Markdown("""
+        # Quran Explorer
+        Welcome to the Quran Explorer application. This tool provides multiple ways to explore 
+        and understand the Holy Quran through its English translation. Use the tabs below to:
+        - Search for specific words or phrases
+        - View statistical insights and visualizations
+        - Read complete Surahs with word cloud visualizations
+        """)
+        
+        # Create tabs
+        search_tab = create_search_tab(quran_data)
+        statistics_tab = create_statistics_tab(quran_data)
+        surah_tab = create_surah_tab(quran_data, surah_names_list)
+    
+    # Launch the interface
+    iface.launch(share=True)
+
+if __name__ == "__main__":
+    main()

src/styles/styles.css

@@ -0,0 +1,83 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #FFF2F2;
+    color: #2D336B;
+    margin: 0;
+    padding: 0;
+}
+
+.gradio-container {
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.gradio-input, .gradio-output {
+    width: 100%;
+}
+
+.gradio-title {
+    font-size: 2em;
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: #2D336B;
+}
+
+.gradio-description {
+    font-size: 1.2em;
+    margin-bottom: 20px;
+    color: #2D336B;
+}
+
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    background-color: #A9B5DF;
+}
+
+.table th, .table td {
+    padding: 8px 12px;
+    border: 1px solid #2D336B;
+}
+
+.table th {
+    background-color: #7886C7;
+    font-weight: bold;
+    color: #FFF2F2;
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+    background-color: #A9B5DF;
+}
+
+.table-hover tbody tr:hover {
+    background-color: #7886C7;
+    color: #FFF2F2;
+}
+
+.verses-output textarea {
+    font-size: 18px !important;
+    line-height: 1.3 !important;
+    height: 600px !important;
+    width: 100% !important;
+}
+
+.word-cloud-output {
+    height: 600px !important;
+    width: 100% !important;
+}
+
+.word-cloud-output img {
+    height: 100% !important;
+    width: 100% !important;
+    object-fit: contain !important;
+}
+
+/* Tab Descriptions */
+.tab-description {
+    padding: 15px;
+    margin-bottom: 20px;
+    background-color: #A9B5DF;
+    border-radius: 5px;
+    color: #2D336B;
+}