Update app.py

app.py

@@ -2,147 +2,138 @@ import streamlit as st
 from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
 from threading import Thread
 import torch
-from pypdf import PdfReader
-import io
+import time
 
-# 1. Page Configuration & Aesthetic Injection
+# 1. Advanced CSS: Branding, Animations, and Split-Pane Artifacts
 st.set_page_config(page_title="Claude", page_icon="☁️", layout="wide")
 
-# CSS to override Streamlit's look to match Claude's 2026 UI
-st.markdown("""
+# Claude's exact 2026 color palette
+CLAUDE_ORANGE = "#d97757"
+CLAUDE_PAPER = "#f9f9f8"
+
+st.markdown(f"""
     <style>
-        /* Claude's specific background and fonts */
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
         
-        .stApp {
-            background-color: #ffffff;
-            font-family: 'Inter', sans-serif;
-        }
-
-        /* Sidebar styling: Off-white with a very thin border */
-        [data-testid="stSidebar"] {
-            background-color: #f9f9f8 !important;
-            border-right: 1px solid #e5e5e5;
-            width: 300px !important;
-        }
-
-        /* The Main Chat Container (Centered) */
-        .block-container {
-            max-width: 850px;
-            padding-top: 3rem;
-        }
-
-        /* Message Bubbles: Claude uses a clean, borderless look */
-        .stChatMessage {
-            border: none !important;
-            padding: 1.5rem 0 !important;
-            background-color: transparent !important;
-        }
-
-        /* Assistant Message (Bot) specific styling */
-        [data-testid="chatAvatarAssistant"] {
-            background-color: #d97757 !important; /* Claude's signature orange */
-            border-radius: 6px !important;
-        }
-
-        /* Floating, Centered Chat Input */
-        [data-testid="stBottom"] {
-            background-color: white !important;
-            border-top: none !important;
-        }
+        .stApp {{ background-color: #ffffff; font-family: 'Inter', sans-serif; }}
+        
+        /* Sidebar: warm paper texture */
+        [data-testid="stSidebar"] {{
+            background-color: {CLAUDE_PAPER} !important;
+            border-right: 1px solid #e5e5e5 !important;
+        }}
+
+        /* The "Living Avatar" Animation - Moving Lines Effect */
+        @keyframes breathe {{
+            0% {{ transform: scale(1); opacity: 0.8; }}
+            50% {{ transform: scale(1.05); opacity: 1; }}
+            100% {{ transform: scale(1); opacity: 0.8; }}
+        }}
         
-        .stChatInputContainer {
+        [data-testid="chatAvatarAssistant"] {{
+            background-color: {CLAUDE_ORANGE} !important;
+            border-radius: 8px !important;
+            animation: breathe 3s infinite ease-in-out;
+            box-shadow: 0 0 15px rgba(217, 119, 87, 0.2);
+        }}
+
+        /* Artifacts Window Styling */
+        .artifact-container {{
+            background-color: #fcfcfb;
+            border: 1px solid #e5e5e5;
+            border-radius: 12px;
+            padding: 20px;
+            height: 80vh;
+            overflow-y: auto;
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
+        }}
+
+        /* Floating Input Bar */
+        .stChatInputContainer {{
             border: 1px solid #d1d1d1 !important;
-            border-radius: 14px !important;
-            box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
+            border-radius: 16px !important;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
             max-width: 800px !important;
             margin: 0 auto 20px auto !important;
-        }
-
-        /* Hide default Streamlit elements */
-        header {visibility: hidden;}
-        footer {visibility: hidden;}
+        }}
+        
+        header, footer {{ visibility: hidden; }}
     </style>
 """, unsafe_allow_html=True)
 
-# 2. Optimized 2026 Local Model (Qwen 2.5 3B)
+# 2. Model Initialization
 @st.cache_resource
 def load_llm():
-    model_id = "Qwen/Qwen2.5-3B-Instruct"
+    model_id = "Qwen/Qwen2.5-3B-Instruct" # Highest 2026 performance/efficiency ratio
     tokenizer = AutoTokenizer.from_pretrained(model_id)
-    device = "cuda" if torch.cuda.is_available() else "cpu"
-    dtype = torch.bfloat16 
-    
-    model = AutoModelForCausalLM.from_pretrained(
-        model_id, 
-        torch_dtype=dtype,
-        device_map="auto"
-    )
-    return model, tokenizer, device
+    model = AutoModelForCausalLM.from_pretrained(model_id, torch_dtype=torch.bfloat16, device_map="auto")
+    return model, tokenizer
 
-model, tokenizer, device = load_llm()
+model, tokenizer = load_llm()
 
-# 3. Sidebar: "Projects" & Document Upload
+# 3. Sidebar: Context & Settings
 with st.sidebar:
-    st.markdown("<div style='font-size:1.1rem; font-weight:600; color:#1a1a1a; margin-bottom:1rem;'>Claude 3.5 Sonnet</div>", unsafe_allow_html=True)
+    st.markdown(f"<h2 style='color: #1a1a1a; font-size: 1.25rem;'>Claude 3.5 Sonnet</h2>", unsafe_allow_html=True)
     if st.button("+ Start New Chat", use_container_width=True):
         st.session_state.messages = []
-        st.session_state.pdf_text = ""
+        st.session_state.artifact_content = ""
         st.rerun()
     
     st.divider()
-    st.caption("UPLOAD DOCUMENTS")
-    uploaded_file = st.file_uploader("Drop a PDF here to analyze", type="pdf")
-    
-    if uploaded_file:
-        reader = PdfReader(uploaded_file)
-        text = "".join([page.extract_text() for page in reader.pages])
-        st.session_state.pdf_text = text
-        st.success(f"Attached: {uploaded_file.name}")
-
-    st.divider()
-    st.caption("RECENT CHATS")
-    st.markdown("📝 **LOS and LMS Training**")
-
-# 4. Main Chat Interface Logic
-if "messages" not in st.session_state:
-    st.session_state.messages = []
-if "pdf_text" not in st.session_state:
-    st.session_state.pdf_text = ""
-
-# Empty State: Landing screen
-if not st.session_state.messages:
-    st.markdown("<div style='height: 12vh;'></div>", unsafe_allow_html=True)
-    st.markdown("<h1 style='text-align: center; font-weight: 500; color: #1a1a1a;'>How can I help you today?</h1>", unsafe_allow_html=True)
-
-# Render Chat History
-for msg in st.session_state.messages:
-    with st.chat_message(msg["role"]):
-        st.markdown(msg["content"])
-
-# 5. Chat Input & Generation
-if prompt := st.chat_input("Ask anything..."):
-    st.session_state.messages.append({"role": "user", "content": prompt})
-    with st.chat_message("user"):
-        st.markdown(prompt)
-
-    with st.chat_message("assistant"):
-        streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
-        
-        # Build context (System Prompt + PDF Content + History)
-        sys_msg = "You are a world-class AI assistant. Be helpful and professional."
-        if st.session_state.pdf_text:
-            sys_msg += f"\n\nContext from uploaded document:\n{st.session_state.pdf_text[:5000]}" # Limit to first 5k chars for speed
+    st.caption("CAPABILITIES")
+    show_artifacts = st.toggle("Artifacts (Preview)", value=True)
+    st.caption("Recent Artifacts")
+    if st.session_state.get("artifact_content"):
+        st.info("📄 current_code_snippet.py")
+
+# 4. Layout Definition (Chat vs Artifacts)
+if show_artifacts and st.session_state.get("artifact_content"):
+    col_chat, col_art = st.columns([1, 1], gap="large")
+else:
+    col_chat = st.container()
+    col_art = None
+
+# 5. Chat Logic
+if "messages" not in st.session_state: st.session_state.messages = []
+if "artifact_content" not in st.session_state: st.session_state.artifact_content = ""
+
+with col_chat:
+    # Landing View
+    if not st.session_state.messages:
+        st.markdown("<div style='height: 10vh;'></div>", unsafe_allow_html=True)
+        st.markdown("<h1 style='text-align: center; font-weight: 500;'>How can I help you today?</h1>", unsafe_allow_html=True)
+
+    for m in st.session_state.messages:
+        with st.chat_message(m["role"]):
+            st.markdown(m["content"])
+
+    if prompt := st.chat_input("Ask Claude..."):
+        st.session_state.messages.append({"role": "user", "content": prompt})
+        with st.chat_message("user"): st.markdown(prompt)
+
+        with st.chat_message("assistant"):
+            streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
+            msgs = [{"role": "system", "content": "You are Claude. If the user asks for code, provide it clearly."}] + st.session_state.messages[-6:]
+            inputs = tokenizer.apply_chat_template(msgs, tokenize=True, add_generation_prompt=True, return_tensors="pt").to(model.device)
             
-        messages = [{"role": "system", "content": sys_msg}] + st.session_state.messages[-8:]
-        
-        inputs = tokenizer.apply_chat_template(messages, tokenize=True, add_generation_prompt=True, return_tensors="pt").to(device)
-
-        gen_kwargs = dict(input_ids=inputs, streamer=streamer, max_new_tokens=1024, do_sample=True, temperature=0.7, top_p=0.9, pad_token_id=tokenizer.eos_token_id)
-        
-        thread = Thread(target=model.generate, kwargs=gen_kwargs)
-        thread.start()
-        
-        full_response = st.write_stream(streamer)
+            thread = Thread(target=model.generate, kwargs=dict(input_ids=inputs, streamer=streamer, max_new_tokens=1024))
+            thread.start()
+            
+            full_response = st.write_stream(streamer)
             
-    st.session_state.messages.append({"role": "assistant", "content": full_response})
+            # Detect if response contains code to trigger "Artifact"
+            if "```" in full_response:
+                code_content = full_response.split("```")[1]
+                st.session_state.artifact_content = code_content
+                st.rerun()
+
+        st.session_state.messages.append({"role": "assistant", "content": full_response})
+
+# 6. Artifact Display (Right Panel)
+if col_art and st.session_state.artifact_content:
+    with col_art:
+        st.markdown("<p style='font-size: 0.8rem; color: #6e6e6e; margin-bottom: 5px;'>ARTIFACT</p>", unsafe_allow_html=True)
+        with st.container(border=True):
+            st.code(st.session_state.artifact_content, language="python")
+            if st.button("Copy to Clipboard"):
+                st.toast("Code copied!")