Update app.py
Browse files
app.py
CHANGED
|
@@ -26,7 +26,48 @@ def chat_with_groq(user_input, history):
|
|
| 26 |
response = chat_completion.choices[0].message.content
|
| 27 |
return response
|
| 28 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 29 |
# Gradio Interface
|
| 30 |
-
demo = gr.ChatInterface(chat_with_groq)
|
| 31 |
|
| 32 |
demo.launch()
|
|
|
|
| 26 |
response = chat_completion.choices[0].message.content
|
| 27 |
return response
|
| 28 |
|
| 29 |
+
# Custom CSS for iPhone-style chat
|
| 30 |
+
custom_css = """
|
| 31 |
+
.gradio-container {
|
| 32 |
+
background: transparent !important;
|
| 33 |
+
}
|
| 34 |
+
.chat-message {
|
| 35 |
+
display: flex;
|
| 36 |
+
align-items: center;
|
| 37 |
+
margin-bottom: 10px;
|
| 38 |
+
}
|
| 39 |
+
.chat-message.user {
|
| 40 |
+
justify-content: flex-end;
|
| 41 |
+
}
|
| 42 |
+
.chat-message.assistant {
|
| 43 |
+
justify-content: flex-start;
|
| 44 |
+
}
|
| 45 |
+
.chat-bubble {
|
| 46 |
+
padding: 10px 15px;
|
| 47 |
+
border-radius: 20px;
|
| 48 |
+
max-width: 70%;
|
| 49 |
+
font-size: 16px;
|
| 50 |
+
display: inline-block;
|
| 51 |
+
}
|
| 52 |
+
.chat-bubble.user {
|
| 53 |
+
background-color: #007aff;
|
| 54 |
+
color: white;
|
| 55 |
+
border-bottom-right-radius: 5px;
|
| 56 |
+
}
|
| 57 |
+
.chat-bubble.assistant {
|
| 58 |
+
background-color: #f0f0f0;
|
| 59 |
+
color: black;
|
| 60 |
+
border-bottom-left-radius: 5px;
|
| 61 |
+
}
|
| 62 |
+
.profile-pic {
|
| 63 |
+
width: 40px;
|
| 64 |
+
height: 40px;
|
| 65 |
+
border-radius: 50%;
|
| 66 |
+
margin: 0 10px;
|
| 67 |
+
}
|
| 68 |
+
"""
|
| 69 |
+
|
| 70 |
# Gradio Interface
|
| 71 |
+
demo = gr.ChatInterface(chat_with_groq, css=custom_css)
|
| 72 |
|
| 73 |
demo.launch()
|