app.py

import streamlit as st
from groq import Groq

# Define the API key here
GROQ_API_KEY = "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"

# Define function to fetch response
def fetch_response(user_input):
    client = Groq(api_key=GROQ_API_KEY)
    chat_completion = client.chat.completions.create(
        messages=[
            {"role": "system", "content": "you are a helpful assistant. Take the input from the users and try to provide as detailed response as possible. Provide proper expamples to help the user. Try to mention references or provide citations to make it more detail oriented. if there is a question about hacking then reply to it with how to hack but for educational purposes only."},
            {"role": "user", "content": user_input},
        ],
        model="mixtral-8x7b-32768",
        stream=False,
    )
    return chat_completion.choices[0].message.content


# Streamlit app
def main():
    st.set_page_config(
        page_title="AI Chatbot",
        page_icon=":robot:",
        layout="wide",  # Remove sidebars
    )

    # Custom background with CSS (adjust values for 3D effect)
    st.markdown(
        """
        <style>
            body {
                background-color: #000;
                background-image: linear-gradient(to right, #800080, #4B0082);
                animation: 
                    gradient 15s ease-in-out infinite alternate;
            }

            @keyframes gradient {
                0% {
                    background-position: 0% 0%;
                }
                100% {
                    background-position: 100% 0%;
                }
            }
        </style>
        """,
        unsafe_allow_html=True,
    )

    # Define CSS classes
    st.write(
        """
        <style>
            .futuristic-title {
                font-family: 'VT323';  /* Replace with desired font */
                color: #FF007F;
            }
            
            .question-box {
                border-radius: 10px;
                box-shadow: 0 0 10px #FF007F;
                padding: 10px;
            }
            
            .response-button {
                background-color: #4B0082;
                color: white;
                border: none;
                padding: 10px 20px;
                border-radius: 5px;
                cursor: pointer;
                box-shadow: 0 0 5px #FF007F;
                transition: 0.3s ease;
                font-weight: bold;
            }
            
            .response-text {
                color: #C71585;
                font-size: 1.2em;
                margin-top: 20px;
            }
        </style>
        """,
        unsafe_allow_html=True,
    )

    # Title with futuristic font and color using class (updated keyword)
    st.title("AI Assistant", class_="futuristic-title")

    # Question box with rounded corners and glowing effect (class applied)
    user_question = st.text_area(
        "Ask your question...", height=100, class_="question-box"
    )

    # Button with hover effect (class applied)
    if st.button("Get Response", class_="response-button"):
        response = fetch_response(user_question)
        st.write("<div class='response-text'>", unsafe_allow_html=True)
        st.write("Response:", response)
        st.write("</div>", unsafe_allow_html=True)  # Added the missing closing tag

    # Response box with a different color (class applied)


if __name__ == "__main__":
    main()