Update README.md

README.md

@@ -9,81 +9,213 @@ app_file: app.py
 pinned: false
 ---
 
-# Bookmark Manager App
+📚 SmartMarks - AI Browser Bookmarks Manager
+
+🌟 Overview
+SmartMarks is your intelligent assistant for managing browser bookmarks. Leveraging the power of AI, SmartMarks helps you organize, search, and interact with your bookmarks seamlessly. Whether you're looking to categorize your links, retrieve information quickly, or maintain an updated list, SmartMarks has you covered.
+
+Key Features
+📂 Upload and Process Bookmarks: Import your existing bookmarks and let SmartMarks analyze and categorize them for you.
+💬 Chat with Bookmarks: Interact with your bookmarks using natural language queries to find relevant links effortlessly.
+🛠️ Manage Bookmarks: View, edit, delete, and export your bookmarks with ease.
+🎨 Dynamic Color Theme: Automatically adapts to your system or browser's light/dark mode preferences for optimal readability and aesthetics.
+🚀 How to Use SmartMarks
+SmartMarks is divided into three main sections:
+
+📂 Upload and Process Bookmarks: Import and process your bookmarks.
+💬 Chat with Bookmarks: Ask questions about your bookmarks using natural language.
+🛠️ Manage Bookmarks: Manage your bookmarks by viewing, editing, deleting, and exporting them.
+Navigate through the tabs to explore each feature in detail.
+
+📦 Deployment on Hugging Face Spaces
+SmartMarks is designed to run seamlessly on Hugging Face Spaces, providing an interactive and user-friendly interface.
+
+Prerequisites
+Hugging Face Account: To deploy on Hugging Face Spaces, you need an account. Sign up here.
+API Key: SmartMarks utilizes the Groq Cloud API for its chatbot functionality. Ensure you have a valid GROQ_API_KEY.
+Repository Structure
+Copy code
+smartmarks/
+│
+├── app.py
+├── requirements.txt
+├── README.md
+└── LICENSE
+Setting Up Environment Variables
+GROQ_API_KEY:
+SmartMarks requires the GROQ_API_KEY to interact with the Groq Cloud API. To set this up:
+
+Navigate to your Space's dashboard on Hugging Face.
+
+Go to Settings > Secrets.
+
+Add a new secret with the key GROQ_API_KEY and paste your API key as the value.
+
+Note: Keep your API keys secure. Never expose them in your code or repository.
+
+Installing Dependencies
+Hugging Face Spaces automatically installs dependencies listed in the requirements.txt file. Ensure your requirements.txt includes all necessary packages:
+
+plaintext
+Copy code
+gradio
+beautifulsoup4
+sentence-transformers
+faiss-cpu
+aiohttp
+openai
+
+Deploying the Space
+Create a New Space:
+
+Navigate to Hugging Face Spaces and click on "Create new Space".
+Choose the Gradio SDK and set the visibility (public or private) as desired.
+Upload Your Code:
+
+Clone your Space repository or use the web interface to upload app.py, requirements.txt, README.md, and LICENSE.
+Launch the Space:
+
+Once all files are uploaded, Hugging Face Spaces will automatically build and deploy your application.
+Access your Space via the provided URL.
+🌈 Dynamic Color Theme
+SmartMarks automatically detects your system or browser's preferred color scheme and adjusts the application's theme accordingly:
+
+Dark Mode: White text on a dark background for reduced eye strain in low-light environments.
+Light Mode: Black text on a light background for bright environments.
+This dynamic theming ensures optimal readability and aesthetics without any manual intervention.
+
+How It Works
+The application uses CSS media queries to detect the user's preferred color scheme and applies appropriate styles:
+
+css
+Copy code
+/* Dynamic Theme Styling */
+@media (prefers-color-scheme: dark) {
+    body {
+        color: white;
+        background-color: #121212;
+    }
+    .card {
+        background-color: #1e1e1e;
+    }
+    a {
+        color: #bb86fc;
+    }
+    h1, h2, h3, p, strong {
+        color: inherit;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    body {
+        color: black;
+        background-color: white;
+    }
+    .card {
+        background-color: #fff;
+    }
+    a {
+        color: #1a0dab;
+    }
+    h1, h2, h3, p, strong {
+        color: inherit;
+    }
+}
+These styles ensure that the text and background colors adapt based on the user's system or browser theme settings.
+
+📸 Screenshots
+Note: Replace the placeholders below with actual screenshots of your application in both light and dark modes.
+
+Light Mode
+
+Dark Mode
+
+📋 Features in Detail
+📂 Upload and Process Bookmarks
+Upload Bookmarks File:
+
+Click on the "📁 Upload Bookmarks HTML File" button.
+Select your browser's exported bookmarks HTML file from your device.
+Process Bookmarks:
+
+After uploading, click on the "⚙️ Process Bookmarks" button.
+SmartMarks will parse your bookmarks, fetch additional information, generate summaries, and categorize each link based on predefined categories.
+View Processed Bookmarks:
+
+Once processing is complete, your bookmarks will be displayed in an organized and visually appealing format below.
+💬 Chat with Bookmarks
+Enter Your Query:
+
+In the "✍️ Ask about your bookmarks" textbox, type your question or keyword related to your bookmarks. For example, "Do I have any bookmarks about GenerativeAI?"
+Submit Your Query:
+
+Click the "📨 Send" button to submit your query.
+Receive AI-Driven Responses:
+
+SmartMarks will analyze your query and provide relevant bookmarks that match your request, making it easier to find specific links without manual searching.
+View Chat History:
+
+All your queries and the corresponding AI responses are displayed in the chat history for your reference.
+🛠️ Manage Bookmarks
+View Bookmarks:
+
+All your processed bookmarks are displayed here with their respective categories and summaries.
+Select Bookmarks:
+
+Use the checkboxes next to each bookmark to select one, multiple, or all bookmarks you wish to manage.
+Delete Selected Bookmarks:
+
+After selecting the desired bookmarks, click the "🗑️ Delete Selected Bookmarks" button to remove them from your list.
+Edit Categories:
+
+Select the bookmarks you want to re-categorize.
+Choose a new category from the dropdown menu labeled "🆕 New Category".
+Click the "✏️ Edit Category of Selected Bookmarks" button to update their categories.
+Export Bookmarks:
+
+Click the "💾 Export Bookmarks" button to download your updated bookmarks as an HTML file.
+This file can be uploaded back to your browser to reflect the changes made within SmartMarks.
+Refresh Bookmarks:
+
+Click the "🔄 Refresh Bookmarks" button to ensure the latest state is reflected in the display.
+🔧 Configuration
+Ensure that the GROQ_API_KEY environment variable is set correctly, as it's essential for the chatbot functionality to interact with the Groq Cloud API.
+
+🤝 Contributing
+Contributions are welcome! Please follow these steps to contribute:
+
+Fork the Repository:
+
+Click on the "Fork" button at the top right of the repository page.
+Clone Your Fork:
+
+bash
+Copy code
+git clone https://github.com/your-username/smartmarks.git
+cd smartmarks
+Create a New Branch:
+
+bash
+Copy code
+git checkout -b feature/YourFeature
+Make Your Changes:
+
+Implement your feature or bug fix.
+Commit Your Changes:
 
-Welcome to the Bookmark Manager App! This application allows you to upload your browser bookmarks, process them to extract useful information, and interact with them using a chatbot interface.
+bash
+Copy code
+git commit -m "Add some feature"
+Push to Your Fork:
 
-## **Features**
+bash
+Copy code
+git push origin feature/YourFeature
+Open a Pull Request:
 
-- **Upload Bookmarks**: Import an HTML file containing your browser bookmarks.
-- **Data Extraction**: Extracts URL, website name, meta tags, and ETags from each bookmark.
-- **Content Summarization**: Generates a brief summary of each bookmark's content using a free language model.
-- **Vectorization and Storage**: Vectorizes the data and stores it in a FAISS vector database for efficient retrieval.
-- **Chatbot Interaction**: Chat with your bookmarks to retrieve information based on your queries.
-- **Bookmark Management**: Edit or delete bookmarks directly within the app.
-- **Dead Link Detection**: Identifies and marks broken or dead links prominently.
-- **User-Friendly Interface**: Improved interface with pleasant styling and clickable links.
+Navigate to your forked repository on GitHub and click on "Compare & pull request".
 
-## **How to Use**
-
-1. **Upload and Process Bookmarks**
-
-   - Navigate to the **"Upload and Process Bookmarks"** tab.
-   - Click on **"Upload Bookmarks HTML File"** and select your bookmarks HTML file.
-   - Click **"Process Bookmarks"** to start processing.
-   - After processing, your bookmarks will be displayed with relevant data, and dead links will be highlighted.
-
-2. **Chat with Your Bookmarks**
-
-   - Go to the **"Chat with Bookmarks"** tab.
-   - Enter a query in natural language to search your bookmarks.
-   - Click **"Send"** to get responses related to your query.
-
-3. **Manage Your Bookmarks**
-
-   - Access the **"Manage Bookmarks"** tab.
-   - Click **"Refresh Bookmark List"** to view all bookmarks.
-   - To edit a bookmark:
-     - Enter the bookmark's index number.
-     - Provide a new title and/or URL.
-     - Click **"Edit Bookmark"**.
-   - To delete a bookmark:
-     - Enter the bookmark's index number.
-     - Click **"Delete Bookmark"**.
-
-## **Requirements**
-
-- **Python Libraries**: The app uses the following Python libraries:
-  - `gradio`
-  - `beautifulsoup4`
-  - `requests`
-  - `transformers`
-  - `sentence-transformers`
-  - `faiss-cpu`
-  - `pandas`
-
-## **Models Used**
-
-- **Summarization Model**: `sshleifer/distilbart-cnn-6-6` from Hugging Face Transformers.
-- **Embedding Model**: `all-MiniLM-L6-v2` from SentenceTransformers.
-
-## **Limitations**
-
-- **Performance**: Processing a large number of bookmarks may be slow due to resource limitations.
-- **Data Persistence**: The app does not save data between sessions. All data is lost when the app restarts.
-- **Error Handling**: Basic error handling is implemented, but unexpected inputs may cause issues.
-
-## **Acknowledgments**
-
-- **Hugging Face**: For providing the models and platform to deploy the app.
-- **Open-Source Libraries**: Thanks to the contributors of the libraries used in this project.
-
-## **License**
-
-This project is open-source and available under the MIT License.
-
----
-
-Enjoy using the Bookmark Manager App!
+📜 License
+This project is licensed under the MIT License. See the LICENSE file for details.
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference