Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,193 +1,233 @@
 import streamlit as st
 from huggingface_hub import InferenceClient
-from duckduckgo_search import DDGS
-from PIL import Image
-import datetime
-import io
+import json
 
-# =====================================================================
-# 1. COPILOT LAYOUT CONFIGURATION & INTERFACE
-# =====================================================================
+# Force wide mode and premium dark base configuration
 st.set_page_config(page_title="SparkHelix AI", page_icon="🧬", layout="wide")
 
-# Advanced UI injection to mimic modern AI dashboards (Copilot style)
-st.markdown("""
+# Hide standard Streamlit header and footer wrappers
+st.markdown("<style>#MainMenu, footer, header {visibility: hidden;} div.block-container{padding:0;}</style>", unsafe_allow_html=True)
+
+# Initialize Session Logs
+if "messages" not in st.session_state:
+    st.session_state.messages = [{"role": "assistant", "content": "Hello! I am SparkHelix. How can I help you discover or build today?"}]
+
+# =====================================================================
+# 🎨 HIGH-FIDELITY COPILOT CORE INTERFACE (CSS/HTML INJECTION)
+# =====================================================================
+copilot_html = f"""
 <style>
-    /* Dark professional canvas background */
-    .stApp {
-        background-color: #0b0c10 !important;
-        color: #e2e8f0 !important;
-        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
-    }
+    @import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;500;600&display=swap');
     
-    /* Elegant Sidebar with Glassmorphism */
-    [data-testid="stSidebar"] {
-        background-color: #111318 !important;
-        border-right: 1px solid #1f242e !important;
-    }
+    body {{
+        background-color: #030508 !important;
+        font-family: 'Segoe UI', system-ui, sans-serif;
+        color: #f3f4f6;
+        margin: 0;
+        padding: 0;
+    }}
     
-    /* Center the chat workspace cleanly and prevent layout shifting */
-    .block-container {
-        padding-top: 2rem !important;
-        padding-bottom: 7rem !important;
-        max-width: 850px !important;
-    }
+    /* Layout Framework */
+    .copilot-container {{
+        display: flex;
+        height: 100vh;
+        width: 100vw;
+        background-color: #0b0d12;
+    }}
     
-    /* Modern Copilot-style Chat Bubble Architecture */
-    div[data-testid="stChatMessage"] {
-        padding: 1.25rem !important;
-        border-radius: 14px !important;
-        margin-bottom: 1.25rem !important;
-        border: 1px solid transparent !important;
-        transition: all 0.2s ease;
-    }
+    /* Sleek Left Sidebar */
+    .copilot-sidebar {{
+        width: 260px;
+        background-color: #0d1017;
+        border-right: 1px solid #1e2530;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+    }}
     
-    /* Distinct variations for User vs AI bubbles */
-    div[data-testid="stChatMessage"]:has([data-testid="stChatMessageAvatar"] img) {
-        background-color: #1a1d26 !important;
-        border: 1px solid #282e3d !important;
-    }
+    .brand-title {{
+        font-size: 18px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 30px;
+        color: #ffffff;
+    }}
     
-    /* Copilot subtle accent highlight for AI responses */
-    div[data-testid="stChatMessage"]:has([data-testid="stChatMessageAvatar"]):not(:has(img)) {
-        background-color: #12141c !important;
-        border-left: 3px solid #4f46e5 !important;
-    }
-
-    /* Fixed Bottom Chat Container Hack to mimic floating inputs */
-    div[data-testid="stChatInput"] {
-        border-radius: 12px !important;
-        border: 1px solid #2d3748 !important;
-        background-color: #161920 !important;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
-    }
+    .new-chat-btn {{
+        background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
+        border: none;
+        color: white;
+        padding: 12px;
+        border-radius: 10px;
+        font-weight: 500;
+        cursor: pointer;
+        text-align: center;
+        margin-bottom: 20px;
+        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
+    }}
+    
+    /* Center Chat Stream */
+    .chat-workspace {{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background-color: #0b0d12;
+        position: relative;
+    }}
+    
+    .chat-header {{
+        padding: 20px 40px;
+        border-bottom: 1px solid #1e2530;
+        font-size: 16px;
+        font-weight: 500;
+        color: #9ca3af;
+    }}
+    
+    .message-stream {{
+        flex: 1;
+        overflow-y: auto;
+        padding: 40px 10% 120px 10%;
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+    }}
+    
+    /* Chat Bubble Speccing */
+    .chat-row {{
+        display: flex;
+        gap: 16px;
+        max-width: 800px;
+        width: 100%;
+        align-self: center;
+    }}
+    
+    .chat-row.user-row {{
+        justify-content: flex-end;
+    }}
+    
+    .avatar {{
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        font-size: 14px;
+    }}
+    
+    .avatar.ai-avatar {{
+        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+        color: white;
+    }}
+    
+    .avatar.user-avatar {{
+        background-color: #374151;
+        color: #f3f4f6;
+    }}
+    
+    .bubble {{
+        padding: 14px 18px;
+        border-radius: 16px;
+        font-size: 15px;
+        line-height: 1.5;
+        max-width: 85%;
+    }}
+    
+    .ai-bubble {{
+        background-color: transparent;
+        color: #e5e7eb;
+    }}
     
-    /* Remove default unnecessary Streamlit elements */
-    #MainMenu, footer, header {visibility: hidden;}
+    .user-bubble {{
+        background-color: #1e2533;
+        color: #ffffff;
+        border: 1px solid #2d3748;
+        border-radius: 16px 16px 4px 16px;
+    }}
 </style>
-""", unsafe_allow_html=True)
-
-# =====================================================================
-# 2. SESSION CONTEXT MANAGER
-# =====================================================================
-if "all_chats" not in st.session_state:
-    st.session_state.all_chats = {"Default Conversation": []}
-if "active_chat" not in st.session_state:
-    st.session_state.active_chat = "Default Conversation"
-
-st.sidebar.title("🧬 SparkHelix Pro")
-st.sidebar.markdown("---")
-
-st.sidebar.subheader("💬 Chat Sessions")
-if st.sidebar.button("➕ New Chat"):
-    timestamp = datetime.datetime.now().strftime("%I:%M %p")
-    new_id = f"Chat ({timestamp})"
-    st.session_state.all_chats[new_id] = []
-    st.session_state.active_chat = new_id
-    st.rerun()
-
-chosen_chat = st.sidebar.radio(
-    "Active Channels:",
-    options=list(st.session_state.all_chats.keys()),
-    index=list(st.session_state.all_chats.keys()).index(st.session_state.active_chat)
-)
-st.session_state.active_chat = chosen_chat
 
-# Engine Parameters
-st.sidebar.markdown("---")
-st.sidebar.subheader("⚙️ Configurations")
-creativity = st.sidebar.slider("Creativity Mode", 0.0, 1.0, 0.4, 0.05)
-max_tokens = st.sidebar.slider("Response Limits", 128, 1024, 512, 64)
-
-# =====================================================================
-# 3. COMPUTE MATRIX CODES
-# =====================================================================
-TEXT_MODEL = "Qwen/Qwen2.5-7B-Instruct"
-IMAGE_MODEL = "black-forest-labs/FLUX.1-dev"
-client = InferenceClient()
-
-def query_web_search(text_query):
-    try:
-        with DDGS() as ddgs:
-            results = [r for r in ddgs.text(text_query, max_results=3)]
-            if results:
-                return "\n".join([f"[{res['title']}] {res['body']}" for res in results])
-    except:
-        return "Search pipeline unavailable."
-    return "No records returned."
+<div class="copilot-container">
+    <div class="copilot-sidebar">
+        <div class="brand-title">🧬 SparkHelix Copilot</div>
+        <div class="new-chat-btn">➕ New Topic</div>
+        <div style="color: #4b5563; font-size: 12px; margin-top: auto;">System Status: Connected</div>
+    </div>
+    
+    <div class="chat-workspace">
+        <div class="chat-header">SparkHelix Workspace // Chat Context</div>
+        <div class="message-stream">
+"""
+
+# Dynamically print bubbles inside our custom HTML shell
+for msg in st.session_state.messages:
+    if msg["role"] == "assistant":
+        copilot_html += f"""
+            <div class="chat-row">
+                <div class="avatar ai-avatar">🧬</div>
+                <div class="bubble ai-bubble">{msg['content']}</div>
+            </div>
+        """
+    else:
+        copilot_html += f"""
+            <div class="chat-row user-row">
+                <div class="bubble user-bubble">{msg['content']}</div>
+                <div class="avatar user-avatar">U</div>
+            </div>
+        """
+
+# Close the wrapper div
+copilot_html += "</div></div></div>"
+
+# Render the layout instantly
+st.markdown(copilot_html, unsafe_allow_html=True)
 
 # =====================================================================
-# 4. VIEW RENDERING PLATFORM
+# 📥 FLOATING BOTTOM INPUT CONTROLLER (HACKED INTO POSITION)
 # =====================================================================
-st.markdown("<h2 style='text-align: center;'>SparkHelix Copilot Workspace</h2>", unsafe_allow_html=True)
-st.markdown("<p style='text-align: center; color: #718096; margin-bottom: 2rem;'>Next-gen companion agent connected to web engines and render farms.</p>", unsafe_allow_html=True)
-
-active_log = st.session_state.all_chats[st.session_state.active_chat]
-
-# Stream chat logs inside centralized layout block
-for message in active_log:
-    with st.chat_message(message["role"]):
-        if "content" in message and message["content"]:
-            st.markdown(message["content"])
-        if "file_meta" in message:
-            st.info(message["file_meta"])
-        if "img_data" in message:
-            st.image(message["img_data"])
-        if "vid_placeholder" in message:
-            st.warning(message["vid_placeholder"])
-
-# Quick features below main log
-st.markdown("---")
-mic_input = st.audio_input("🎙️ Voice Dictation Node")
-if mic_input:
-    st.success("✔ Voice segment recorded.")
+st.markdown("""
+<style>
+    /* Pin the interactive chat input directly over the UI backdrop */
+    div[data-testid="stChatInput"] {
+        position: fixed !important;
+        bottom: 30px !important;
+        left: 53% !important;
+        transform: translateX(-50%) !important;
+        width: 55% !important;
+        max-width: 750px !important;
+        z-index: 999999 !important;
+        background-color: #151b26 !important;
+        border: 1px solid #2a3447 !important;
+        border-radius: 24px !important;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
+    }
+    textarea {
+        color: #ffffff !important;
+    }
+</style>
+""", unsafe_allow_html=True)
 
-prompt_object = st.chat_input("Ask anything, use /draw to generate images...", accept_file=True)
+user_input = st.chat_input("Ask SparkHelix anything...")
 
-if prompt_object:
-    user_string = prompt_object.text if prompt_object.text else ""
-    attached_file = prompt_object.files[0] if prompt_object.files else None
-    
-    with st.chat_message("user"):
-        if user_string:
-            st.markdown(user_string)
-            
-    log_entry = {"role": "user", "content": user_string}
-    if attached_file:
-        log_entry["file_meta"] = f"📁 Attachment Matrix: {attached_file.name}"
-    active_log.append(log_entry)
-    
-    with st.chat_message("assistant"):
-        try:
-            if user_string.lower().startswith("/draw"):
-                generation_prompt = user_string.replace("/draw", "").strip()
-                with st.spinner("🎨 Generating production layout..."):
-                    img_bytes = client.text_to_image(generation_prompt, model=IMAGE_MODEL)
-                    st.image(img_bytes, caption="SparkHelix Artwork Engine")
-                    active_log.append({
-                        "role": "assistant",
-                        "content": f"Image successfully rendered for prompt: '{generation_prompt}'",
-                        "img_data": img_bytes
-                    })
-            else:
-                with st.spinner("Analyzing data streams..."):
-                    search_context = ""
-                    if len(user_string) > 10:
-                        search_context = query_web_search(user_string)
-                        
-                    engineered_prompt = f"System Instruction: You are SparkHelix AI. Contextual Web Data: {search_context}\nUser Input Parameters: {user_string}"
-                    
-                    response = client.chat.completions.create(
-                        model=TEXT_MODEL,
-                        messages=[{"role": "user", "content": engineered_prompt}],
-                        max_tokens=max_tokens,
-                        temperature=creativity
-                    )
-                    ai_reply = response.choices[0].message.content
-                    st.markdown(ai_reply)
-                    active_log.append({"role": "assistant", "content": ai_reply})
-                    
-            st.session_state.all_chats[st.session_state.active_chat] = active_log
-            
-        except Exception as e:
-            st.error(f"Error executing command pipeline: {e}")
+if user_input:
+    # Save input log
+    st.session_state.messages.append({"role": "user", "content": user_input})
+    
+    # Process AI request using the correct conversational wrapper
+    try:
+        client = InferenceClient()
+        response = client.chat.completions.create(
+            model="Qwen/Qwen2.5-7B-Instruct",
+            messages=[{"role": "user", "content": user_input}],
+            max_tokens=512,
+            temperature=0.4
+        )
+        ai_reply = response.choices[0].message.content
+        st.session_state.messages.append({"role": "assistant", "content": ai_reply})
+    except Exception as e:
+        st.session_state.messages.append({"role": "assistant", "content": f"System Alert: Connection route congested. Details: {e}"})
+        
+    st.rerun()