Upload 3 files

.env

@@ -0,0 +1 @@
+groq_api_key="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"

app.py

@@ -0,0 +1,138 @@
+import os
+import streamlit as st
+from groq import Groq
+from dotenv import load_dotenv
+
+load_dotenv()
+groq_api_key = os.getenv("groq_api_key")
+
+st.sidebar.title(":white[_Tailor_]")
+prompt = st.sidebar.title(":red[_System Prompt:_] ")
+model = st.sidebar.selectbox(
+    'Choose a model', ['Llama3-8b-8192', 'Llama3-70b-8192','Mixtral-8x7b-32768','Gemma-7b-It']
+)
+
+# Groq client
+client = Groq(api_key = groq_api_key)
+
+# Streamlit Interface
+st.title("🗨️ LLMS :red[Interaction] - :blue[By Raj]")
+
+# Define the CSS for the animation
+animation_css = """
+<style>
+@keyframes fadeInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeInRight {
+    from {
+        opacity: 0;
+        transform: translateX(50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.fadeInLeft {
+    animation: fadeInLeft 2s ease-out;
+}
+
+.fadeInRight {
+    animation: fadeInRight 2s ease-out;
+}
+</style>
+"""
+
+# Apply the animation to your text
+animated_text = """
+<div class="fadeInLeft">Welcome to the LLMS Interaction web app!</div>
+<div class="fadeInRight">This app allows you to interact with the LLMS AI model. To use the app, follow these steps:</div>
+<div class="fadeInLeft">1. Enter your question in the text input box.</div>
+<div class="fadeInRight">2. Click the 'Submit' button to send your question to the AI model.</div>
+<div class="fadeInLeft">3. The response will be displayed below the text input box.</div>
+<div class="fadeInRight">4. You can view the history of your queries and responses in the sidebar.</div>
+<div class="fadeInLeft">5. To view the details of a specific query, click on the corresponding button in the sidebar.</div>
+<div class="fadeInRight">Please note that this web app is super fast and utilizes custom api integration to fetch responses.</div>
+<div class="fadeInLeft">Try it</div>
+"""
+
+# Combine the CSS and the text
+final_output = animation_css + animated_text
+
+# Display using st.markdown
+st.markdown(final_output, unsafe_allow_html=True)
+
+# Initialize sessesion state for history
+if "history" not in st.session_state:
+    st.session_state.history = []
+
+user_input = st.text_input("Enter your question: ", "")
+
+if st.button("Submit"):
+    chat_completion = client.chat.completions.create(
+        messages=[
+            {
+                "role" : "user",
+                "content" : user_input,
+            }
+        ],
+        model = model,
+    )
+    # Store the query and response in history
+    response = chat_completion.choices[0].message.content
+    st.session_state.history.append({"query" : user_input, "response" : response})
+
+    # Display the response
+    st.markdown(f'<div class="response-box">{response}</div>', unsafe_allow_html=True)
+
+# Display history
+st.sidebar.title(":rainbow[Memory]")
+for i, entry in enumerate(st.session_state.history):
+    if st.sidebar.button(f'Query {i+1}: {entry["query"]}'):
+        st.markdown(f'<div class="response-box">{entry["response"]}</div>', unsafe_allow_html=True)
+        
+# Add a footer with fade-in animation
+footer = """
+<style>
+.my-footer {
+    position: fixed;
+    bottom: -50px;
+    left: 0;
+    width: 100%;
+    background-color: black;
+    text-align: center;
+    padding: 10px;
+    font-size: 20px; /* Increased the font size to medium */
+    color: white;
+    animation: fade-in 1s ease-in-out 3s forwards;
+}
+
+.my-footer img {
+    width: 40px; /* Increased the logo size to large */
+    height: 40px;
+}
+
+@keyframes fade-in {
+    0% {
+        bottom: -50px;
+        opacity: 0;
+    }
+    100% {
+        bottom: 0;
+        opacity: 1;
+    }
+}
+</style>
+<div class='my-footer'>Made by The Raj | Follow me on <a href='https://instagram.com/theraj7171' target='_blank'><img src='https://static.vecteezy.com/system/resources/previews/018/930/692/original/instagram-logo-instagram-icon-transparent-free-png.png' alt='Instagram' width='40' height='40'></a> | Connect with me on <a href='https://www.linkedin.com/in/the-raj71' target='_blank'><img src='https://static.vecteezy.com/system/resources/previews/022/511/448/non_2x/linkedin-logo-editorial-free-vector.jpg' alt='LinkedIn' width='40' height='40'></a> | Check out my <a href='https://github.com/TheRaj71' target='_blank'><img src='https://2.bp.blogspot.com/-7M-f2FzhZl8/WxLdqW_NTMI/AAAAAAAANVw/a5zQzCdh4-89d1OXrPrEYhyarOAFsLY6gCLcBGAs/s640/github-mark.png' alt='GitHub' width='40' height='40'></a></div>
+"""
+st.markdown(footer, unsafe_allow_html=True)

requirements.txt

@@ -0,0 +1,3 @@
+groq
+streamlit
+python-dotenv