Update app.py

app.py

@@ -34,6 +34,7 @@ from langchain.text_splitter import RecursiveCharacterTextSplitter
 from langchain.chains import ConversationalRetrievalChain
 from langchain.memory import ConversationBufferMemory
 from langchain_community.document_loaders import TextLoader
+import re
 
 # Set page config
 st.set_page_config(
@@ -45,6 +46,7 @@ st.set_page_config(
 # Custom CSS
 st.markdown("""
 <style>
+    /* Original CSS */
     .main-header {
         font-size: 2.5rem;
         color: #4285F4;
@@ -80,6 +82,65 @@ st.markdown("""
         border-radius: 4px;
         background-color: #f5eee9;
     }
+    
+    /* New chatbot styling */
+    .chat-container {
+        background-color: white;
+        border-radius: 16px;
+        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
+        padding: 20px;
+        margin-top: 25px;
+        transition: box-shadow 0.3s ease;
+    }
+    .chat-container:hover {
+        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+    }
+    .user-message {
+        background: linear-gradient(45deg, #4285F4, #5C89BC);
+        color: white;
+        border-radius: 20px 20px 6px 20px;
+        padding: 14px 18px;
+        margin-left: auto;
+        max-width: 80%;
+        margin-bottom: 12px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        width: fit-content;
+        float: right;
+        clear: both;
+    }
+    .bot-message {
+        background-color: #F0F0F0;
+        color: #333333;
+        border-radius: 20px 20px 20px 6px;
+        padding: 14px 18px;
+        margin-right: auto;
+        max-width: 80%;
+        margin-bottom: 12px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        width: fit-content;
+        float: left;
+        clear: both;
+    }
+    .message-container {
+        overflow: auto;
+        margin-bottom: 20px;
+        max-height: 400px;
+    }
+    .chat-header {
+        padding: 10px 15px;
+        background-color: #4285F4;
+        color: white;
+        border-radius: 10px 10px 0 0;
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+    .chat-input {
+        padding: 10px;
+        border-top: 1px solid #eee;
+    }
+    .clear-float {
+        clear: both;
+    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -1031,11 +1092,80 @@ def setup_rag_chain():
         st.warning(f"Error setting up RAG chain: {str(e)}")
         return None
 
+def parse_command(command, analysis_types=None):
+    """Parse user command and return function to execute"""
+    command = command.lower().strip()
+    
+    # Image analysis commands
+    if "analyze image" in command and analysis_types:
+        return "analyze_image", analysis_types
+    
+    # Video analysis commands
+    elif "process video" in command and analysis_types:
+        return "process_video", analysis_types
+    
+    # Data analysis commands
+    elif "run query" in command:
+        query = re.search(r"run query\s*:\s*(.*)", command, re.IGNORECASE)
+        if query:
+            return "run_query", query.group(1)
+    
+    # Document analysis commands
+    elif "process document" in command:
+        return "process_document", None
+        
+    # Help commands
+    elif any(x in command for x in ["what can you do", "help", "capabilities"]):
+        return "help", None
+        
+    # No command detected
+    return None, None
+
+def execute_command(command_type, params):
+    """Execute a command based on the parsed command"""
+    if command_type == "analyze_image":
+        st.write("To analyze an image, please upload an image in the Image Analysis section and select your desired analysis types.")
+        return "I can help you analyze images. Please upload an image in the Image Analysis section and select which features you want to detect."
+    
+    elif command_type == "process_video":
+        st.write("To process a video, please upload a video in the Video Analysis section and select your desired analysis types.")
+        return "I can help you process videos. Please upload a video in the Video Analysis section and select which features you want to detect."
+    
+    elif command_type == "run_query":
+        st.write("To run a BigQuery query, please go to the Data Analysis section.")
+        return f"I can help you run the query: {params}. Please go to the Data Analysis section to execute it."
+    
+    elif command_type == "process_document":
+        st.write("To process a document, please upload a document in the Document Analysis section.")
+        return "I can help you analyze documents. Please upload a document in the Document Analysis section."
+    
+    elif command_type == "help":
+        capabilities = """
+        I can help you with several tasks in the Cosmick Cloud AI Analyzer:
+        
+        1. **Image Analysis** - I can identify objects, text, faces, and labels in images
+        2. **Video Analysis** - I can process videos to detect objects, faces, and text
+        3. **Document Analysis** - I can extract text and structure from documents
+        4. **Data Analysis** - I can help query and visualize data in BigQuery
+        
+        Try asking me specific questions about your analysis results or how to use the app!
+        """
+        return capabilities
+    
+    return None
+
 def get_assistant_response(client, prompt, context=None, model="llama3-70b-8192"):
     """Get response from GROQ assistant with context awareness"""
     if client is None:
         return "I'm unable to connect to my knowledge base right now. Please check the API configuration."
     
+    # Check if the input is a command
+    command_type, params = parse_command(prompt)
+    if command_type:
+        command_response = execute_command(command_type, params)
+        if command_response:
+            return command_response
+    
     # Set up RAG chain if available
     rag_chain = None
     try:
@@ -1115,121 +1245,48 @@ def chatbot_interface():
     if "analysis_results" in st.session_state:
         current_context += f"Analysis results: {st.session_state.analysis_results}\n"
     
-    # Create chatbot container
-    chat_container = st.container()
+    # Create chatbot container with improved styling
+    st.markdown('<div class="chat-container">', unsafe_allow_html=True)
+    st.markdown('<div class="chat-header">💬 Cosmick AI Assistant</div>', unsafe_allow_html=True)
     
-    with chat_container:
-        # Create a custom expandable chat interface
-        st.markdown("""
-        <style>
-        .chat-container {
-            position: fixed;
-            bottom: 0;
-            right: 20px;
-            width: 400px;
-            background-color: white;
-            border-radius: 10px 10px 0 0;
-            box-shadow: 0 0 10px rgba(0,0,0,0.2);
-            z-index: 1000;
-        }
-        .chat-header {
-            padding: 10px 15px;
-            background-color: #4285F4;
-            color: white;
-            border-radius: 10px 10px 0 0;
-            font-weight: bold;
-            cursor: pointer;
-        }
-        .chat-messages {
-            max-height: 300px;
-            overflow-y: auto;
-            padding: 10px;
-        }
-        .chat-input {
-            padding: 10px;
-            border-top: 1px solid #eee;
-        }
-        </style>
-        
-        <div class="chat-container" id="chat-container">
-            <div class="chat-header" onclick="toggleChat()">
-                💬 Cosmick AI Assistant - Click to toggle
-            </div>
-            <div id="chat-content">
-                <div class="chat-messages" id="chat-messages">
-                    <div id="messages-container"></div>
-                </div>
-                <div class="chat-input">
-                    <input type="text" id="user-input" placeholder="Ask me anything...">
-                    <button onclick="sendMessage()">Send</button>
-                </div>
-            </div>
-        </div>
-        
-        <script>
-        function toggleChat() {
-            const content = document.getElementById('chat-content');
-            if (content.style.display === 'none') {
-                content.style.display = 'block';
-            } else {
-                content.style.display = 'none';
-            }
-        }
+    # Display chat message history with improved styling
+    st.markdown('<div class="message-container">', unsafe_allow_html=True)
+    for message in st.session_state.messages:
+        if message["role"] == "user":
+            st.markdown(f'<div class="user-message">{message["content"]}</div>', unsafe_allow_html=True)
+        else:
+            st.markdown(f'<div class="bot-message">{message["content"]}</div>', unsafe_allow_html=True)
+    st.markdown('<div class="clear-float"></div>', unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)
+    
+    # Chat input
+    user_input = st.chat_input("Ask me anything about image, video, document or data analysis...")
+    
+    if user_input:
+        # Add user message to history
+        st.session_state.messages.append({"role": "user", "content": user_input})
         
-        function sendMessage() {
-            const input = document.getElementById('user-input');
-            const message = input.value;
-            if (message.trim() === '') return;
-            
-            // Clear input
-            input.value = '';
-            
-            // Add message to UI
-            const messagesContainer = document.getElementById('messages-container');
-            messagesContainer.innerHTML += `<div style="margin-bottom: 10px;"><strong>You:</strong> ${message}</div>`;
-            
-            // Send message to Streamlit
-            window.parent.postMessage({
-                type: 'streamlit:message',
-                data: {
-                    type: 'chatbot_message',
-                    message: message
-                }
-            }, '*');
-        }
-        </script>
-        """, unsafe_allow_html=True)
-        
-        # Create a container for the actual chat interface using Streamlit components
-        chat_placeholder = st.empty()
-        
-        with chat_placeholder:
-            # Display chat messages
-            for message in st.session_state.messages:
-                if message["role"] == "user":
-                    st.markdown(f"**You:** {message['content']}")
-                else:
-                    st.markdown(f"**Assistant:** {message['content']}")
-            
-            # Chat input
-            user_input = st.chat_input("Ask me anything about image, video, document or data analysis...")
-            
-            if user_input:
-                # Add user message to history
-                st.session_state.messages.append({"role": "user", "content": user_input})
-                
-                # Get assistant response
-                response = get_assistant_response(
-                    st.session_state.groq_client,
-                    user_input,
-                    context=current_context
-                )
-                
-                # Add assistant response to history
-                st.session_state.messages.append({"role": "assistant", "content": response})
-                
-                # Rerun to update chat display
-                st.rerun()
+        # Check if it's a command
+        command_type, params = parse_command(user_input)
+        
+        if command_type:
+            # Execute command
+            response = execute_command(command_type, params)
+        else:
+            # Get assistant response
+            response = get_assistant_response(
+                st.session_state.groq_client,
+                user_input,
+                context=current_context
+            )
+        
+        # Add assistant response to history
+        st.session_state.messages.append({"role": "assistant", "content": response})
+        
+        # Rerun to update chat display
+        st.rerun()
+    
+    st.markdown('</div>', unsafe_allow_html=True)
 
 def main():
     # Header - Updated title