Update app.py

app.py

@@ -1,24 +1,19 @@
 import streamlit as st
 from groq import Groq
+import requests
 
-st.set_page_config(page_title="CodeCraft AI", layout="wide", initial_sidebar_state="expanded")
+st.set_page_config(page_title="CodeCraft AI", layout="wide")
 
 # ========================
-# Groq Client
+# API KEYS
 # ========================
-client = Groq(api_key=st.secrets["GROQ_API_KEY"])
+GROQ_API_KEY = st.secrets["GROQ_API_KEY"]
+HF_API_KEY = st.secrets["HF_API_KEY"]
 
-# Sidebar model selector
-st.sidebar.title("⚙️ Settings")
-model_choice = st.sidebar.selectbox(
-    "Choose AI Model",
-    ["llama-3.1-8b-instant", "llama-3.1-70b-versatile", "mixtral-8x7b-32768"]
-)
-
-st.title("🤖 CodeCraft AI - Mini Copilot (Chat Edition)")
+client = Groq(api_key=GROQ_API_KEY)
 
 # ========================
-# Session State
+# Session State per tab
 # ========================
 if "generate_chat" not in st.session_state:
     st.session_state.generate_chat = []
@@ -27,16 +22,59 @@ 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"]
+        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: 130px; /* leave space for input+footer */
+    padding-bottom: 120px; /* space for input+footer */
 }
-
-/* Chat bubbles */
 .msg-user {
   background: #2b2f35;
   color: #fff;
@@ -45,7 +83,6 @@ st.markdown("""
   margin: 8px 0;
   max-width: 86%;
   margin-left: auto;
-  text-align: left;
   word-break: break-word;
 }
 .msg-ai {
@@ -56,38 +93,28 @@ st.markdown("""
   margin: 8px 0;
   max-width: 86%;
   margin-right: auto;
-  text-align: left;
   word-break: break-word;
 }
 
-/* Fixed input wrapper (row layout) */
-.fixed-input {
+/* Fixed bottom row */
+.fixed-row {
   position: fixed;
-  bottom: 50px;  /* leave room for footer */
+  bottom: 50px;
   left: 0;
   right: 0;
   z-index: 1000;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
+  padding: 6px 10px;
   background: transparent;
 }
-
-/* Style for text input */
-.fixed-input input {
-  flex: 1;
+.stTextInput > div > div > input {
   background: #232428 !important;
   color: #fff !important;
   border-radius: 25px !important;
   border: none !important;
   padding: 12px 16px !important;
   font-size: 15px;
-  outline: none !important;
 }
-
-/* Send button (same row) */
-.fixed-input button {
+.stButton button {
   background: #4b5563 !important;
   color: #fff !important;
   border-radius: 50% !important;
@@ -95,16 +122,13 @@ st.markdown("""
   height: 48px;
   border: none !important;
   font-size: 20px;
-  cursor: pointer;
 }
-
-/* Footer */
 .fixed-footer {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
-  height: 50px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -117,70 +141,99 @@ st.markdown("""
 """, unsafe_allow_html=True)
 
 # ========================
-# Helper: Render chat
-# ========================
-def render_chat(chat_history):
-    for role, msg in chat_history:
-        if role == "user":
-            st.markdown(f'<div class="msg-user">{msg}</div>', unsafe_allow_html=True)
-        else:
-            st.markdown(f'<div class="msg-ai">{msg}</div>', unsafe_allow_html=True)
-
-# ========================
-# Chat UI
+# Tabs
 # ========================
-def chat_ui(chat_key, system_prompt):
-    render_chat(st.session_state[chat_key])
-
-    # Fixed input row
-    input_key = f"{chat_key}_input"
-    send_key = f"{chat_key}_send"
+tab1, tab2, tab3 = st.tabs(["💡 Generate Code", "🛠 Debug Code", "📘 Explain Code"])
 
-    st.markdown('<div class="fixed-input">', unsafe_allow_html=True)
-    user_msg = st.text_input("", key=input_key, label_visibility="collapsed", placeholder="Type your message...")
-    send = st.button("➤", key=send_key)
+# ------------------------
+# 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)
+    col1, col2 = st.columns([10, 1])
+    with col1:
+        gen_msg = st.text_input("Type your message...", key="gen_input", label_visibility="collapsed")
+    with col2:
+        gen_send = st.button("➤", key="gen_send")
     st.markdown('</div>', unsafe_allow_html=True)
 
-    if send and user_msg.strip():
-        # Save user message
-        st.session_state[chat_key].append(("user", user_msg.strip()))
-
-        # AI response
+    if gen_send and gen_msg.strip():
+        st.session_state.generate_chat.append(("user", gen_msg.strip()))
         with st.spinner("Thinking..."):
-            try:
-                response = client.chat.completions.create(
-                    model=model_choice,
-                    messages=[{"role": "system", "content": system_prompt}]
-                             + [{"role": role, "content": msg} for role, msg in st.session_state[chat_key]],
-                    temperature=0.4
-                )
-                ai_msg = response.choices[0].message.content
-            except Exception as e:
-                ai_msg = f"⚠️ Error: {e}"
-
-        st.session_state[chat_key].append(("assistant", ai_msg))
-        st.session_state[input_key] = ""
+            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 = ""
         st.rerun()
 
-# ========================
-# Tabs
-# ========================
-tab1, tab2, tab3 = st.tabs(["💡 Generate Code", "🛠 Debug Code", "📘 Explain Code"])
-
-with tab1:
-    chat_ui("generate_chat", "You are a helpful coding assistant.")
-
+# ------------------------
+# Debug Code Tab
+# ------------------------
 with tab2:
-    chat_ui("debug_chat", "You are an expert code debugger.")
+    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()
 
+# ------------------------
+# Explain Code Tab
+# ------------------------
 with tab3:
-    chat_ui("explain_chat", "You are a teacher who explains code simply.")
+    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)
+
+    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()
 
 # ========================
 # Footer
 # ========================
 st.markdown("""
 <div class="fixed-footer">
-🚀 CodeCraft · Your Partner in Coding Excellence
+🚀 CodeCraft · Powered by Groq ⚡ + HuggingFace 🤗
 </div>
 """, unsafe_allow_html=True)