Docker

README.md

@@ -114,10 +114,411 @@ PROJECT_ID=your_project_id
 
 This will configure your project to connect to Watsonx.ai using the obtained credentials.
 
-Step 4: Creation of app.py
+## Step 4: Creation of app.py
 
 In the followig section we are going to  invoke Large Language Models (LLMs) deployed in watsonx.ai. Documentation: [here](https://ibm.github.io/watson-machine-learning-sdk/foundation_models.html)
 This example shows a Question and Answer use case for a provided web site
 
 
 
+### Section 1: Importing Necessary Libraries
+
+```python
+# For reading credentials from the .env file
+import os
+from dotenv import load_dotenv
+
+from sentence_transformers import SentenceTransformer
+from chromadb.api.types import EmbeddingFunction
+
+# WML python SDK
+from ibm_watson_machine_learning.foundation_models import Model
+from ibm_watson_machine_learning.metanames import GenTextParamsMetaNames as GenParams
+from ibm_watson_machine_learning.foundation_models.utils.enums import ModelTypes, DecodingMethods
+
+import requests
+from bs4 import BeautifulSoup
+import spacy
+import chromadb
+import en_core_web_md
+```
+
+**Explanation:**
+- `os` and `dotenv` libraries are used for handling environment variables securely.
+- `sentence_transformers` and `chromadb.api.types` are used for text embedding and database operations.
+- `ibm_watson_machine_learning` SDK helps interact with IBM Watson models.
+- `requests` and `BeautifulSoup` are used for web scraping.
+- `spacy` is used for natural language processing tasks.
+
+### Section 2: Setting Up Environment Variables
+
+```python
+# Important: hardcoding the API key in Python code is not a best practice. We are using
+# this approach for the ease of demo setup. In a production application these variables
+# can be stored in an .env or a properties file
+
+# URL of the hosted LLMs is hardcoded because at this time all LLMs share the same endpoint
+url = "https://us-south.ml.cloud.ibm.com"
+
+# These global variables will be updated in get_credentials() function
+watsonx_project_id = ""
+# Replace with your IBM Cloud key
+api_key = ""
+```
+
+**Explanation:**
+- Hardcoding credentials is not recommended for production; use environment variables instead.
+- `url` is the endpoint for IBM Watson models.
+- `watsonx_project_id` and `api_key` will be populated from environment variables.
+
+### Section 3: Loading Credentials
+
+```python
+def get_credentials():
+    load_dotenv()
+    # Update the global variables that will be used for authentication in another function
+    globals()["api_key"] = os.getenv("api_key", None)
+    globals()["watsonx_project_id"] = os.getenv("project_id", None)
+```
+
+**Explanation:**
+- `get_credentials` function loads the `.env` file and updates global variables for `api_key` and `watsonx_project_id`.
+
+### Section 4: Creating the Model
+
+```python
+def get_model(model_type, max_tokens, min_tokens, decoding, temperature, top_k, top_p):
+    generate_params = {
+        GenParams.MAX_NEW_TOKENS: max_tokens,
+        GenParams.MIN_NEW_TOKENS: min_tokens,
+        GenParams.DECODING_METHOD: decoding,
+        GenParams.TEMPERATURE: temperature,
+        GenParams.TOP_K: top_k,
+        GenParams.TOP_P: top_p,
+    }
+
+    model = Model(
+        model_id=model_type,
+        params=generate_params,
+        credentials={
+            "apikey": api_key,
+            "url": url
+        },
+        project_id=watsonx_project_id
+    )
+
+    return model
+```
+
+**Explanation:**
+- `get_model` function initializes a Watson model with specified parameters like `max_tokens`, `decoding` method, `temperature`, etc.
+- Credentials and project ID are passed to authenticate the model.
+
+### Section 5: Embedding Function
+
+```python
+class MiniLML6V2EmbeddingFunction(EmbeddingFunction):
+    MODEL = SentenceTransformer('all-MiniLM-L6-v2')
+
+    def __call__(self, texts):
+        return MiniLML6V2EmbeddingFunction.MODEL.encode(texts).tolist()
+```
+
+**Explanation:**
+- `MiniLML6V2EmbeddingFunction` class uses `SentenceTransformer` to convert text into embeddings, which are numeric representations of the text.
+
+### Section 6: Extracting Text from a Webpage
+
+```python
+def extract_text(url):
+    try:
+        # Send an HTTP GET request to the URL
+        response = requests.get(url)
+
+        # Check if the request was successful
+        if response.status_code == 200:
+            # Parse the HTML content of the page using BeautifulSoup
+            soup = BeautifulSoup(response.text, 'html.parser')
+
+            # Extract contents of <p> elements
+            p_contents = [p.get_text() for p in soup.find_all('p')]
+
+            # Print the contents of <p> elements
+            print("\nContents of <p> elements: \n")
+            for content in p_contents:
+                print(content)
+            raw_web_text = " ".join(p_contents)
+            # remove \xa0 which is used in html to avoid words break acorss lines.
+            cleaned_text = raw_web_text.replace("\xa0", " ")
+            return cleaned_text
+
+        else:
+            print(f"Failed to retrieve the page. Status code: {response.status_code}")
+
+    except Exception as e:
+        print(f"An error occurred: {str(e)}")
+```
+
+**Explanation:**
+- `extract_text` function scrapes text content from `<p>` tags of a given webpage URL using `requests` and `BeautifulSoup`.
+
+### Section 7: Splitting Text into Sentences
+
+```python
+def split_text_into_sentences(text):
+    nlp = spacy.load("en_core_web_md")
+    doc = nlp(text)
+    sentences = [sent.text for sent in doc.sents]
+    cleaned_sentences = [s.strip() for s in sentences]
+    return cleaned_sentences
+```
+
+**Explanation:**
+- `split_text_into_sentences` function uses `spaCy` to split the extracted text into sentences and clean them.
+
+### Section 8: Creating Embeddings
+
+```python
+def create_embedding(url, collection_name):
+    cleaned_text = extract_text(url)
+    cleaned_sentences = split_text_into_sentences(cleaned_text)
+
+    client = chromadb.Client()
+
+    collection = client.get_or_create_collection(collection_name)
+
+    # Upload text to chroma
+    collection.upsert(
+        documents=cleaned_sentences,
+        metadatas=[{"source": str(i)} for i in range(len(cleaned_sentences))],
+        ids=[str(i) for i in range(len(cleaned_sentences))],
+    )
+
+    return collection
+```
+
+**Explanation:**
+- `create_embedding` function extracts, cleans, and splits text, then uploads it to a Chroma database collection.
+
+### Section 9: Creating a Prompt for the Model
+
+```python
+def create_prompt(url, question, collection_name):
+    # Create embeddings for the text file
+    collection = create_embedding(url, collection_name)
+
+    # query relevant information
+    relevant_chunks = collection.query(
+        query_texts=[question],
+        n_results=5,
+    )
+    context = "\n\n\n".join(relevant_chunks["documents"][0])
+    # Please note that this is a generic format. You can change this format to be specific to llama
+    prompt = (f"{context}\n\nPlease answer the following question in one sentence using this "
+              + f"text. "
+              + f"If the question is unanswerable, say \"unanswerable\". Do not include information that's not relevant to the question."
+              + f"Question: {question}")
+
+    return prompt
+```
+
+**Explanation:**
+- `create_prompt` function generates a prompt by querying the Chroma database for relevant text chunks based on a question and constructs a formatted prompt.
+
+### Section 10: Main Function
+
+```python
+def main():
+
+    # Get the API key and project id and update global variables
+    get_credentials()
+
+    # Try diffrent URLs and questions
+    url = "https://www.usbank.com/financialiq/manage-your-household/buy-a-car/own-electric-vehicles-learned-buying-driving-EVs.html"
+
+    question = "What are the incentives for purchasing EVs?"
+    # question = "What is the percentage of driving powered by hybrid cars?"
+    # question = "Can an EV be plugged in to a household outlet?"
+    collection_name = "test_web_RAG"
+
+    answer_questions_from_web(api_key, watsonx_project_id, url, question, collection_name)
+```
+
+**Explanation:**
+- `main` function initializes credentials and runs the process to answer a question based on the content from a given URL.
+
+### Section 11: Answering Questions from the Web
+
+```python
+def answer_questions_from_web(request_api_key, request_project_id, url, question, collection_name):
+    # Update the global variable
+    globals()["api_key"] = request_api_key
+    globals()["watsonx_project_id"] = request_project_id
+
+    # Specify model parameters
+    model_type = "meta-llama/llama-2-70b-chat"
+    max_tokens = 100
+    min_tokens = 50
+    top_k = 50
+    top_p = 1
+    decoding = DecodingMethods.GREEDY
+    temperature = 0.7
+
+    # Get the watsonx model = try both options
+    model = get_model(model_type, max_tokens, min_tokens, decoding, temperature, top_k, top_p)
+
+    # Get the prompt
+    complete_prompt = create_prompt(url, question, collection_name)
+
+    # Let's review the prompt
+    print("----------------------------------------------------------------------------------------------------")
+    print("*** Prompt:" + complete_prompt + "***")
+    print("----------------------------------------------------------------------------------------------------")
+
+    generated_response = model.generate(prompt=complete_prompt)
+    response_text = generated_response['results'][0]['generated_text']
+
+    # Remove trailing white spaces
+    response_text = response
+
+_text.strip()
+
+    # print model response
+    print("--------------------------------- Generated response -----------------------------------")
+    print(response_text)
+    print("*********************************************************************************************")
+
+    return response_text
+```
+
+**Explanation:**
+- `answer_questions_from_web` function updates the global variables, initializes the model, creates a prompt, generates a response, and prints the answer.
+
+### Section 12: Running the Script
+
+```python
+# Invoke the main function
+if __name__ == "__main__":
+    main()
+```
+
+**Explanation:**
+- This code block ensures that the `main` function is called when the script is run directly.
+
+By breaking down the code into these sections, readers can understand the role of each part and how they work together to create a web chat application using Watsonx.ai.
+
+
+### Explanation of `run.py` Code
+
+Let's break down and explain the `run.py` code step-by-step:
+
+#### Section 1: Importing Necessary Libraries
+
+```python
+# For reading credentials from the .env file
+import os
+from dotenv import load_dotenv
+import streamlit as st
+import webchat
+```
+
+**Explanation:**
+- `os` and `dotenv` are used to load environment variables.
+- `streamlit` is a library for creating interactive web applications.
+- `webchat` is a module that contains functions for interacting with IBM Watson models.
+
+#### Section 2: Setting Up Environment Variables
+
+```python
+# URL of the hosted LLMs is hardcoded because at this time all LLMs share the same endpoint
+url = "https://us-south.ml.cloud.ibm.com"
+
+# These global variables will be updated in get_credentials() function
+watsonx_project_id = ""
+api_key = ""
+```
+
+**Explanation:**
+- `url` is the endpoint for IBM Watson models.
+- `watsonx_project_id` and `api_key` are initialized and will be populated with actual values from environment variables.
+
+#### Section 3: Loading Credentials
+
+```python
+def get_credentials():
+    load_dotenv()
+    # Update the global variables that will be used for authentication in another function
+    globals()["api_key"] = os.getenv("API_KEY", "")
+    globals()["watsonx_project_id"] = os.getenv("PROJECT_ID", "")
+```
+
+**Explanation:**
+- `get_credentials` function loads the environment variables from a `.env` file and updates the global `api_key` and `watsonx_project_id`.
+
+#### Section 4: Streamlit Application Setup
+
+```python
+def main():
+    # Get the API key and project id and update global variables
+    get_credentials()
+
+    # Use the full page instead of a narrow central column
+    st.set_page_config(layout="wide")
+
+    # Streamlit app title
+    st.title("🌠Demo of RAG with a Web page")
+
+    # Sidebar for settings
+    st.sidebar.header("Settings")
+    api_key_input = st.sidebar.text_input("API Key", api_key)
+    project_id_input = st.sidebar.text_input("Project ID", watsonx_project_id)
+    
+    # Update credentials if provided by the user
+    if api_key_input:
+        globals()["api_key"] = api_key_input
+    if project_id_input:
+        globals()["watsonx_project_id"] = project_id_input
+
+    user_url = st.text_input('Provide a URL')
+    collection_name = st.text_input('Provide a unique name for this website (lower case). Use the same name for the same URL to avoid loading data multiple times.')
+
+    # UI component to enter the question
+    question = st.text_area('Question', height=100)
+    button_clicked = st.button("Answer the question")
+
+    st.subheader("Response")
+
+    # Invoke the LLM when the button is clicked
+    if button_clicked:
+        response = webchat.answer_questions_from_web(api_key, watsonx_project_id, user_url, question, collection_name)
+        st.write(response)
+```
+
+**Explanation:**
+- `main` function sets up the Streamlit application.
+- `get_credentials` is called to load API credentials.
+- `st.set_page_config` configures the page layout.
+- Streamlit UI components are defined:
+  - Title and sidebar settings for API key and project ID.
+  - Text input fields for URL and collection name.
+  - Text area for the question.
+  - Button to trigger the question answering process.
+- When the button is clicked, `webchat.answer_questions_from_web` function is called to get the response, which is then displayed on the page.
+
+#### Section 5: Running the Application
+
+```python
+if __name__ == "__main__":
+    main()
+```
+
+**Explanation:**
+- Ensures that the `main` function is executed when the script is run directly.
+
+### Summary of the Program
+
+The provided code sets up an interactive web application using Streamlit to demonstrate a Retrieval-Augmented Generation (RAG) system. The system allows users to input a URL, which is then scraped for content. This content is embedded and stored in a database. Users can ask questions related to the content, and the system uses IBM Watson's language model to generate relevant answers. The application handles authentication via environment variables and allows users to update credentials through the UI.
+
+### Conclusion
+
+In this blog post, we've explored a Python-based web chat application using Watsonx.ai and IBM Watson's powerful language models. The application demonstrates how to build a Retrieval-Augmented Generation (RAG) system that scrapes web content, embeds it, and leverages machine learning to answer user questions. By breaking down the code into manageable sections, we've provided a comprehensive guide to understanding and implementing such a system. This application showcases the potential of combining web scraping, natural language processing, and interactive web frameworks to create sophisticated AI-driven solutions.

hf/Dockerfile

@@ -0,0 +1,20 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the current directory contents into the container at /app
+COPY . /app
+
+# Install any needed packages specified in requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Expose port 8501 for Streamlit
+EXPOSE 8501
+
+# Make sure the script is executable
+RUN chmod +x run.py
+
+# Run the application
+ENTRYPOINT ["streamlit", "run", "run.py"]

hf/README.md

@@ -0,0 +1,93 @@
+# WatsonX-WebChat
+
+WatsonX-WebChat is an interactive web application that uses IBM Watson's language models to answer questions based on the content of a provided web page URL. This application leverages Retrieval-Augmented Generation (RAG) techniques to provide accurate and contextually relevant answers.
+
+## Features
+
+- Extracts and processes text from a given URL.
+- Embeds the text and stores it in a database.
+- Answers user questions based on the embedded content using IBM Watson's language models.
+- Interactive web interface built with Streamlit.
+
+## Setup and Deployment
+
+### Prerequisites
+
+- Docker
+- WatsonX IBM
+### Installation
+
+1. **Clone the repository:**
+
+    ```sh
+    git clone https://github.com/your-username/WatsonX-WebChat.git
+    cd WatsonX-WebChat
+    ```
+
+2. **Create a `.env` file with your IBM Cloud credentials:**
+
+    ```plaintext
+    API_KEY=your_ibm_cloud_api_key
+    PROJECT_ID=your_ibm_cloud_project_id
+    ```
+
+3. **Build the Docker image:**
+
+    ```sh
+    docker build -t watsonx-webchat .
+    ```
+
+4. **Run the Docker container:**
+
+    ```sh
+    docker run -p 8501:8501 --env-file .env watsonx-webchat
+    ```
+
+### Deploy on Hugging Face
+
+1. **Log in to Hugging Face CLI:**
+
+    ```sh
+    huggingface-cli login
+    ```
+
+2. **Create a new repository on Hugging Face.**
+
+3. **Push the Docker image to Hugging Face:**
+
+    ```sh
+    docker tag watsonx-webchat huggingface.co/your-username/watsonx-webchat
+    docker push huggingface.co/your-username/watsonx-webchat
+    ```
+
+4. **Configure the Hugging Face repository to use the Docker image:**
+
+    - Go to your Hugging Face repository page.
+    - Click on "Settings".
+    - Under "Custom Docker Image", set the image to `huggingface.co/your-username/watsonx-webchat`.
+
+### Usage
+
+1. **Access the application:**
+
+    Open your browser and go to the URL provided by Hugging Face after deploying the application.
+
+2. **Enter the required information:**
+
+    - **API Key**: Your IBM Cloud API key.
+    - **Project ID**: Your IBM Cloud project ID.
+    - **URL**: The URL of the webpage you want to extract content from.
+    - **Collection Name**: A unique name for the webpage's data collection.
+    - **Question**: The question you want to ask based on the webpage content.
+
+3. **Get the response:**
+
+    Click the "Answer the question" button to get a response from the application.
+
+## Contributing
+
+Feel free to open issues or submit pull requests if you find any bugs or have suggestions for new features.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

hf/requirements.txt

@@ -0,0 +1,8 @@
+streamlit
+requests
+beautifulsoup4
+spacy
+sentence-transformers
+chromadb
+ibm-watson-machine-learning
+python-dotenv