Update app.py

app.py

@@ -2,19 +2,38 @@ import streamlit as st
 from groq import Groq
 import requests
 
-st.set_page_config(page_title="CodeCraft AI", layout="wide")
-
-# ========================
-# API KEYS
-# ========================
-GROQ_API_KEY = st.secrets["GROQ_API_KEY"]
+# =======================
+# API Clients
+# =======================
+client = Groq(api_key=st.secrets["GROQ_API_KEY"])
 HF_API_KEY = st.secrets["HF_API_KEY"]
 
-client = Groq(api_key=GROQ_API_KEY)
-
-# ========================
-# Session State per tab
-# ========================
+# =======================
+# Sidebar Settings
+# =======================
+st.sidebar.title("⚙️ Settings")
+provider_choice = st.sidebar.radio(
+    "Choose Provider",
+    ["Groq", "Hugging Face"]
+)
+
+# Model selector depends on provider
+if provider_choice == "Groq":
+    model_choice = st.sidebar.selectbox(
+        "Groq Model",
+        ["llama-3.1-8b-instant", "llama-3.1-70b-versatile", "mixtral-8x7b-32768"]
+    )
+else:
+    model_choice = st.sidebar.selectbox(
+        "HF Model",
+        ["mistralai/Mixtral-8x7B-Instruct-v0.1", "tiiuae/falcon-7b-instruct"]
+    )
+
+st.title("🤖 CodeCraft AI - Mini Copilot (Chat Edition)")
+
+# =======================
+# Session State for Chats
+# =======================
 if "generate_chat" not in st.session_state:
     st.session_state.generate_chat = []
 if "debug_chat" not in st.session_state:
@@ -22,218 +41,126 @@ if "debug_chat" not in st.session_state:
 if "explain_chat" not in st.session_state:
     st.session_state.explain_chat = []
 
-# ========================
+
+# =======================
 # Helper Functions
-# ========================
-def call_groq(messages, model="llama-3.1-8b-instant"):
-    try:
-        response = client.chat.completions.create(
-            model=model,
-            messages=messages,
-            temperature=0.4
-        )
-        return response.choices[0].message.content
-    except Exception as e:
-        return None
-
-def call_hf(prompt, model="mistralai/Mixtral-8x7B-Instruct-v0.1"):
-    try:
-        headers = {"Authorization": f"Bearer {HF_API_KEY}"}
-        payload = {"inputs": prompt}
-        response = requests.post(
-            f"https://api-inference.huggingface.co/models/{model}",
-            headers=headers,
-            json=payload,
-            timeout=60
-        )
-        if response.status_code == 200:
-            return response.json()[0]["generated_text"]
+# =======================
+def call_groq(chat_history, system_prompt):
+    response = client.chat.completions.create(
+        model=model_choice,
+        messages=[{"role": "system", "content": system_prompt}]
+                 + [{"role": role, "content": msg} for role, msg in chat_history],
+        temperature=0.4
+    )
+    return response.choices[0].message.content
+
+
+def call_hf(prompt):
+    headers = {"Authorization": f"Bearer {HF_API_KEY}"}
+    payload = {"inputs": prompt}
+    response = requests.post(
+        f"https://api-inference.huggingface.co/models/{model_choice}",
+        headers=headers,
+        json=payload,
+        timeout=60
+    )
+    if response.status_code == 200:
+        result = response.json()
+        if isinstance(result, list) and "generated_text" in result[0]:
+            return result[0]["generated_text"]
         else:
-            return f"⚠️ HuggingFace API error: {response.text}"
-    except Exception as e:
-        return f"⚠️ HuggingFace Exception: {str(e)}"
-
-def get_ai_response(chat_history, system_prompt, model_choice="llama-3.1-8b-instant"):
-    messages = [{"role": "system", "content": system_prompt}] + [
-        {"role": role, "content": msg} for role, msg in chat_history
-    ]
-    
-    # Try Groq first
-    reply = call_groq(messages, model=model_choice)
-    if reply:
-        return reply
-    
-    # Fallback: Hugging Face
-    prompt = "\n".join([f"{role}: {msg}" for role, msg in chat_history])
-    return call_hf(prompt)
-
-# ========================
-# CSS
-# ========================
-st.markdown("""
-<style>
-.block-container {
-    padding-bottom: 120px; /* space for input+footer */
-}
-.msg-user {
-  background: #2b2f35;
-  color: #fff;
-  padding: 10px 14px;
-  border-radius: 18px;
-  margin: 8px 0;
-  max-width: 86%;
-  margin-left: auto;
-  word-break: break-word;
-}
-.msg-ai {
-  background: transparent;
-  color: #d0d0d0;
-  padding: 10px 14px;
-  border-radius: 12px;
-  margin: 8px 0;
-  max-width: 86%;
-  margin-right: auto;
-  word-break: break-word;
-}
-
-/* Fixed bottom row */
-.fixed-row {
-  position: fixed;
-  bottom: 50px;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  padding: 6px 10px;
-  background: transparent;
-}
-.stTextInput > div > div > input {
-  background: #232428 !important;
-  color: #fff !important;
-  border-radius: 25px !important;
-  border: none !important;
-  padding: 12px 16px !important;
-  font-size: 15px;
-}
-.stButton button {
-  background: #4b5563 !important;
-  color: #fff !important;
-  border-radius: 50% !important;
-  width: 48px;
-  height: 48px;
-  border: none !important;
-  font-size: 20px;
-}
-.fixed-footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  color: #9aa0a6;
-  background: transparent;
-  z-index: 999;
-}
-</style>
-""", unsafe_allow_html=True)
-
-# ========================
-# Tabs
-# ========================
-tab1, tab2, tab3 = st.tabs(["💡 Generate Code", "🛠 Debug Code", "📘 Explain Code"])
-
-# ------------------------
-# Generate Code Tab
-# ------------------------
-with tab1:
-    st.subheader("💡 Generate Code")
-    for role, msg in st.session_state.generate_chat:
-        css_class = "msg-user" if role == "user" else "msg-ai"
-        st.markdown(f'<div class="{css_class}">{msg}</div>', unsafe_allow_html=True)
-
-    st.markdown('<div class="fixed-row">', unsafe_allow_html=True)
+            return str(result)
+    return f"⚠️ HF Error: {response.text}"
+
+
+def get_ai_response(chat_history, system_prompt):
+    if provider_choice == "Groq":
+        return call_groq(chat_history, system_prompt)
+    else:
+        # Convert history into prompt text
+        prompt = system_prompt + "\n\n"
+        for role, msg in chat_history:
+            prompt += f"{role.upper()}: {msg}\n"
+        return call_hf(prompt)
+
+
+# =======================
+# Chat UI
+# =======================
+def chat_ui(tab_name, chat_history, system_prompt, input_key):
+    st.subheader(tab_name)
+
+    # --- Chat history display ---
+    chat_container = st.container()
+    with chat_container:
+        for role, msg in chat_history:
+            if role == "user":
+                with st.chat_message("user"):
+                    st.write(msg)
+            else:
+                with st.chat_message("assistant"):
+                    if "```" in msg:  # detect code blocks
+                        parts = msg.split("```")
+                        for i, part in enumerate(parts):
+                            if i % 2 == 1:  # inside code block
+                                lang, *code_lines = part.split("\n")
+                                code = "\n".join(code_lines)
+                                st.code(code, language=lang if lang else "python")
+                            else:
+                                st.write(part)
+                    else:
+                        st.write(msg)
+
+    # --- Fixed input bar ---
     col1, col2 = st.columns([10, 1])
     with col1:
-        gen_msg = st.text_input("Type your message...", key="gen_input", label_visibility="collapsed")
+        user_input = st.text_input("Type your message...", key=input_key, label_visibility="collapsed")
     with col2:
-        gen_send = st.button("➤", key="gen_send")
-    st.markdown('</div>', unsafe_allow_html=True)
+        send_btn = st.button("➤", key=input_key + "_send")
+
+    # --- Handle input ---
+    if send_btn and user_input.strip():
+        chat_history.append(("user", user_input.strip()))
 
-    if gen_send and gen_msg.strip():
-        st.session_state.generate_chat.append(("user", gen_msg.strip()))
         with st.spinner("Thinking..."):
-            ai_reply = get_ai_response(
-                st.session_state.generate_chat,
-                "You are a helpful coding assistant. Generate correct code first, then a short simple explanation."
-            )
-        st.session_state.generate_chat.append(("assistant", ai_reply))
-        st.session_state.gen_input = ""
+            ai_msg = get_ai_response(chat_history, system_prompt)
+
+        chat_history.append(("assistant", ai_msg))
+        st.session_state[input_key] = ""  # Clear input
         st.rerun()
 
-# ------------------------
-# Debug Code Tab
-# ------------------------
-with tab2:
-    st.subheader("🛠 Debug Code")
-    for role, msg in st.session_state.debug_chat:
-        css_class = "msg-user" if role == "user" else "msg-ai"
-        st.markdown(f'<div class="{css_class}">{msg}</div>', unsafe_allow_html=True)
 
-    st.markdown('<div class="fixed-row">', unsafe_allow_html=True)
-    col1, col2 = st.columns([10, 1])
-    with col1:
-        debug_msg = st.text_input("Type your message...", key="debug_input", label_visibility="collapsed")
-    with col2:
-        debug_send = st.button("➤", key="debug_send")
-    st.markdown('</div>', unsafe_allow_html=True)
-
-    if debug_send and debug_msg.strip():
-        st.session_state.debug_chat.append(("user", debug_msg.strip()))
-        with st.spinner("Debugging..."):
-            ai_reply = get_ai_response(
-                st.session_state.debug_chat,
-                "You are an expert code debugger. Fix errors and give corrected code, then explain what changed and why."
-            )
-        st.session_state.debug_chat.append(("assistant", ai_reply))
-        st.session_state.debug_input = ""
-        st.rerun()
+# =======================
+# Tabs
+# =======================
+tab1, tab2, tab3 = st.tabs(["💡 Generate Code", "🛠 Debug Code", "📘 Explain Code"])
 
-# ------------------------
-# Explain Code Tab
-# ------------------------
-with tab3:
-    st.subheader("📘 Explain Code")
-    for role, msg in st.session_state.explain_chat:
-        css_class = "msg-user" if role == "user" else "msg-ai"
-        st.markdown(f'<div class="{css_class}">{msg}</div>', unsafe_allow_html=True)
+with tab1:
+    chat_ui(
+        "💡 Generate Code",
+        st.session_state.generate_chat,
+        "You are a helpful coding assistant. Generate correct code first, then a short simple explanation.",
+        input_key="generate_input"
+    )
 
-    st.markdown('<div class="fixed-row">', unsafe_allow_html=True)
-    col1, col2 = st.columns([10, 1])
-    with col1:
-        explain_msg = st.text_input("Type your message...", key="explain_input", label_visibility="collapsed")
-    with col2:
-        explain_send = st.button("➤", key="explain_send")
-    st.markdown('</div>', unsafe_allow_html=True)
-
-    if explain_send and explain_msg.strip():
-        st.session_state.explain_chat.append(("user", explain_msg.strip()))
-        with st.spinner("Explaining..."):
-            ai_reply = get_ai_response(
-                st.session_state.explain_chat,
-                "You are a teacher that explains code step by step in simple words."
-            )
-        st.session_state.explain_chat.append(("assistant", ai_reply))
-        st.session_state.explain_input = ""
-        st.rerun()
+with tab2:
+    chat_ui(
+        "🛠 Debug Code",
+        st.session_state.debug_chat,
+        "You are an expert code debugger. Fix errors and give corrected code, then explain what changed and why.",
+        input_key="debug_input"
+    )
 
-# ========================
+with tab3:
+    chat_ui(
+        "📘 Explain Code",
+        st.session_state.explain_chat,
+        "You are a teacher that explains code in simple words. The user pastes code, and you explain step by step.",
+        input_key="explain_input"
+    )
+
+# =======================
 # Footer
-# ========================
-st.markdown("""
-<div class="fixed-footer">
-🚀 CodeCraft · Powered by Groq ⚡ + HuggingFace 🤗
-</div>
-""", unsafe_allow_html=True)
+# =======================
+st.markdown("---")
+st.caption("🚀 Built with Streamlit · Groq ⚡ + Hugging Face 🤗")