Update app.py

app.py

@@ -3,39 +3,71 @@ from dotenv import load_dotenv
 from groq import Groq
 import streamlit as st
 
-# Load environment variables
+# Load environment variables from .env file
 load_dotenv()
 
-GROQ_API_KEY = "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"
-client = Groq(api_key =GROQ_API_KEY)
+# Ensure that the API key is loaded correctly
+api_key = os.getenv("GROQ_API_KEY")
 
-# Streamlit UI
-st.title("Python Bot with Groq's API")
-st.subheader("Interact with an AI Model Powered by Groq")
+if not api_key:
+    st.error("API key is missing! Please check your .env file or set the environment variable.")
+else:
+    # Initialize Groq client with the API key
+    client = Groq(api_key=api_key)
 
-# Input Section
-st.header("Input")
-user_input = st.text_input("Enter your question or message below:")
+    # Custom CSS to style headings and overall appearance
+    st.markdown("""
+        <style>
+            .big-heading {
+                font-size: 36px;
+                font-weight: bold;
+                color: #333;
+            }
+            .sub-header {
+                font-size: 24px;
+                font-weight: bold;
+                color: #555;
+            }
+            .header {
+                font-size: 20px;
+                font-weight: normal;
+                color: #444;
+            }
+            .output-text {
+                font-size: 18px;
+                font-weight: normal;
+                color: #000;
+            }
+        </style>
+    """, unsafe_allow_html=True)
 
-# Submit button
-if st.button("Submit"):
-    if user_input.strip():
-        # Output Section
-        st.header("Output")
-        with st.spinner("Fetching response from the LLM..."):
-            try:
-                # Interact with Groq's LLM
-                chat_completion = client.chat.completions.create(
-                    messages=[
-                        {"role": "user", "content": user_input},
-                    ],
-                    model="llama3-8b-8192",
-                    stream=False,
-                )
-                response = chat_completion.choices[0].message.content
-                st.success("Here is the AI's response:")
-                st.write(response)
-            except Exception as e:
-                st.error(f"Error: {e}")
-    else:
-        st.warning("Please enter a valid message!")
+    # Streamlit UI
+    st.markdown('<p class="big-heading">Python Bot with Groq\'s API</p>', unsafe_allow_html=True)
+    st.markdown('<p class="sub-header">Interact with an AI Model Powered by Groq</p>', unsafe_allow_html=True)
+
+    # Input Section
+    st.markdown('<p class="header">Input</p>', unsafe_allow_html=True)
+    user_input = st.text_input("Enter your question or message below:")
+
+    # Submit button
+    if st.button("Submit"):
+        if user_input.strip():
+            # Output Section
+            st.markdown('<p class="header">Output</p>', unsafe_allow_html=True)
+            with st.spinner("Fetching response from the LLM..."):
+                try:
+                    # Interact with Groq's LLM
+                    chat_completion = client.chat.completions.create(
+                        messages=[
+                            {"role": "user", "content": user_input},
+                        ],
+                        model="llama3-8b-8192",
+                        stream=False,
+                    )
+                    response = chat_completion.choices[0].message.content
+                    st.success("Here is the AI's response:")
+                    st.markdown(f'<p class="output-text">{response}</p>', unsafe_allow_html=True)
+                except Exception as e:
+                    st.error(f"Error: {e}")
+        else:
+            st.warning("Please enter a valid message!")