Update app.py

app.py

@@ -2,7 +2,7 @@ import streamlit as st
 import pandas as pd
 import requests
 from wordcloud import WordCloud
-import matplotlib.pyplot as plt
+import plotly.express as px
 
 # Define array of file paths for each book
 book_files = {
@@ -75,9 +75,9 @@ def display_home():
     st.write("Welcome to the Hadith Viewer! This is a viewer for the Hadith collections. You can select a book from the dropdown menu on the left to view its contents.")
 
 def display_table(csv_df):
-    font_size = st.slider("Adjust Font Size", min_value=10, max_value=30, value=20)
+    font_size = st.slider("Adjust Font Size", min_value=10, max_value=30, value=20, key="font_size_slider")
     st.write("### Table View")
-    search_query = st.sidebar.text_input("Search", "")
+    search_query = st.sidebar.text_input("Search", "", key="search_input")
     filtered_df = csv_df[csv_df.apply(lambda row: row.astype(str).str.contains(search_query, case=False).any(), axis=1)]
     styled_df = (
         filtered_df.style
@@ -89,11 +89,11 @@ def display_table(csv_df):
 
 def display_word_cloud():
     st.title("Word Cloud")
-    st.write("Displaying the top 10 words from the selected CSV file.")
-    
-    selected_book = st.sidebar.selectbox("Select a Book", list(book_files.keys()))
+    st.write("Select the number of words to display.")
+
+    selected_book = st.sidebar.selectbox("Select a Book", list(book_files.keys()), key="word_cloud_book_select")
     selected_files = book_files[selected_book]
-    selected_file = st.sidebar.selectbox("Select a File", selected_files)
+    selected_file = st.sidebar.selectbox("Select a File", selected_files, key="word_cloud_file_select")
     
     file_url = f"https://raw.githubusercontent.com/halimbahae/Hadith/main/{selected_book}/{selected_file}"
     csv_df = pd.read_csv(file_url, header=None) 
@@ -107,13 +107,13 @@ def display_word_cloud():
                 else:
                     word_counts[word] = 1
         
-        top_words = sorted(word_counts, key=word_counts.get, reverse=True)[:10]
+        top_words = sorted(word_counts, key=word_counts.get, reverse=True)[:st.slider("Select Number of Words", min_value=10, max_value=50, value=10, key="word_slider")]
+        
+        wordcloud_data = {'word': top_words, 'count': [word_counts[word] for word in top_words]}
+        wordcloud_df = pd.DataFrame(wordcloud_data)
         
-        wordcloud = WordCloud(width=800, height=400, background_color='white').generate(' '.join(top_words))
-        plt.figure(figsize=(10, 5))
-        plt.imshow(wordcloud, interpolation='bilinear')
-        plt.axis('off')
-        st.pyplot()
+        fig = px.bar(wordcloud_df, x='word', y='count', title="Word Cloud")
+        st.plotly_chart(fig)
 
 if __name__ == "__main__":
     main()