Streamlit apps rely on WebSockets, which can create challenges when embedding them directly in an iframe, especially in some browsers due to security restrictions. Instead, consider an alternative approach such as creating a simple JavaScript-based frontend that can interact with your Streamlit backend via an API, ensuring easy integration into client websites.
Here is the demo Chat Bot application approaches:
Backend Development
1. Model Setup:
- Use Ollama and Llama3 for natural language understanding and generation.
- Train your models with data specific to each business for better performance.
2. API Development:
- Create an API using a framework like FastAPI or Flask to handle requests and responses between the frontend and the backend models.
- Ensure the API supports multitenancy by handling different businesses' data separately.
3. Vector Store with FAISS:
- Use FAISS to create a vector store database for each business.
- Store embeddings of conversational data to facilitate fast similarity searches.
Frontend Development
1. Streamlit App:
- Develop a Streamlit app for internal use or admin purposes, where you can manage and monitor conversations.
2. JavaScript Widget for Client Integration:
- Develop a JavaScript widget that clients can embed into their websites.
- This widget will interact with the backend API to fetch responses from the conversational models.
Multitenant Application Setup
1. Containerization:
- Containerize your application using Docker.
- Run a single container for the application and manage multiple vector store databases within it, one for each business.
2. Client Onboarding:
- When onboarding a new client, create a new vector store database for their data.
- Update the backend API to handle requests specific to the new client's data.
3. Client Frontend Integration:
- Provide an embeddable JavaScript snippet for the client's website to integrate the chatbot frontend with minimal coding.
Implementation Steps
1. Backend API Example:
```python
from fastapi import FastAPI, Request
from my_model import MyConversationalModel
from my_faiss_store import FaissStore
app = FastAPI()
models = {} # Dictionary to store models for each business
faiss_stores = {} # Dictionary to store FAISS stores for each business
@app.post("/create_client")
async def create_client(client_id: str):
models[client_id] = MyConversationalModel()
faiss_stores[client_id] = FaissStore()
return {"message": "Client created successfully"}
@app.post("/chat/{client_id}")
async def chat(client_id: str, request: Request):
data = await request.json()
query = data.get("query")
response = models[client_id].get_response(query, faiss_stores[client_id])
return {"response": response}
# Run the app
# uvicorn main:app --reload
```
2. JavaScript Widget Example:
```html
<!-- Client's Website -->
<div id="chatbot"></div>
<script>
async function sendMessage() {
const query = document.getElementById('userQuery').value;
const response = await fetch('http://backend_server/chat/client_id', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ query })
});
const data = await response.json();
document.getElementById('chatbot').innerHTML += `<p>${data.response}</p>`;
}
document.addEventListener('DOMContentLoaded', function() {
const chatbox = document.createElement('div');
chatbox.innerHTML = `
<input type="text" id="userQuery" placeholder="Ask a question">
<button onclick="sendMessage()">Send</button>
<div id="responseContainer"></div>
`;
document.getElementById('chatbot').appendChild(chatbox);
});
</script>
```
Additional Considerations
- Scalability: Ensure your API and Streamlit app can scale horizontally by deploying on cloud services like AWS, GCP, or Azure.
- Security: Implement authentication and authorization to secure each client's data.
- Monitoring and Logging: Set up monitoring and logging to track usage and performance of each client's bot.
By following this approach, you can provide an embeddable chatbot solution that interacts with your backend API, making it easy for clients to integrate the chatbot into their websites with minimal coding.
