Spaces:
Sleeping
Sleeping
File size: 4,662 Bytes
955a969 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 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) |