Update app.py

app.py

@@ -2,11 +2,9 @@ import gradio as gr
 import os
 from groq import Groq
 
-# Initialize Groq client
 api_key = os.getenv("GROQ_API_KEY")
 client = Groq(api_key=api_key)
 
-# Initialize conversation history
 conversation_history = []
 
 def chat_with_bot_stream(user_input):
@@ -16,7 +14,16 @@ def chat_with_bot_stream(user_input):
     if len(conversation_history) == 1:
         conversation_history.insert(0, {
             "role": "system",
-            "content": "You are a music and genre recommendation bot designed to help users discover new music based on their preferences, mood, or activity.\n\nYour responses should be engaging, personalized, and insightful. You can recommend:\n\n-Specific songs, albums, or artists\n-Genres based on mood, activity, or past preferences\n-Hidden gems and deep cuts for music enthusiasts\n-Trending or classic hits based on user taste\n\nBe conversational, suggest multiple options when possible, and encourage users to explore new sounds. If requested, provide brief descriptions of artists or genres, and explain why a recommendation might suit the user. Also use a wide range of simple vocabulary and don't just keep repeating the same sentence"
+            "content": (
+                "You are a music and genre recommendation bot designed to help users discover new music "
+                "based on their preferences, mood, or activity.\n\nYour responses should be engaging, "
+                "personalized, and insightful. You can recommend:\n\n- Specific songs, albums, or artists\n"
+                "- Genres based on mood, activity, or past preferences\n- Hidden gems and deep cuts "
+                "for music enthusiasts\n- Trending or classic hits based on user taste\n\nBe conversational, "
+                "suggest multiple options when possible, and encourage users to explore new sounds. "
+                "If requested, provide brief descriptions of artists or genres, and explain why a "
+                "recommendation might suit the user."
+            )
         })
     
     completion = client.chat.completions.create(
@@ -26,7 +33,6 @@ def chat_with_bot_stream(user_input):
         max_tokens=1024,
         top_p=1,
         stream=True,
-        stop=None,
     )
     
     response_content = ""
@@ -35,56 +41,86 @@ def chat_with_bot_stream(user_input):
     
     conversation_history.append({"role": "assistant", "content": response_content})
     
-    return [(msg["content"] if msg["role"] == "user" else None, 
-             msg["content"] if msg["role"] == "assistant" else None) 
-            for msg in conversation_history]
-
-# Function to generate a storyboard
-def generate_storyboard(scenario):
-    if not scenario.strip():
-        return "Please provide a scenario to generate the storyboard."
-    
-    messages = [
-        {"role": "system", "content": """You are an AI storyteller. Generate a storyboard in a structured table with six scenes. For each scene you provide
-   1) A Scenario text describing what problem a pesona is trying to resolve and by using what product or feature.
-   2) Storyline text for each scene, descriptive visual information and the purpose of the scene.
-   You must provide the output in structured format like table.
-        """},
-        {"role": "user", "content": f"Generate a 6-scene storyboard for: {scenario}"}
+    return [
+        (msg["content"] if msg["role"] == "user" else None, 
+         msg["content"] if msg["role"] == "assistant" else None)
+        for msg in conversation_history
     ]
-    
-    completion = client.chat.completions.create(
-        model="llama3-70b-8192",
-        messages=messages,
-        temperature=1,
-        max_tokens=1024,
-        top_p=1,
-        stream=False,
-        stop=None,
-    )
-    return completion.choices[0].message.content
+
+custom_css = """
+/* Overall page background */
+body, .gradio-container {
+    background-color: #18181B !important;
+    color: #FFFFFF !important;
+    font-family: sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+/* Headings, titles, etc. */
+h1, h2, h3, h4, h5, h6, label {
+    color: #795699 !important;
+}
+
+/* Main 'white' box for the chatbot area */
+#main_box {
+    position: relative;
+    background-color: #E7E7E8; 
+    margin: 0 auto;
+    width: 80%;
+    border-radius: 8px;
+    padding: 20px;
+    min-height: 300px;
+}
+
+/* Chatbot bubbles inside the #main_box */
+.gr-chatbot .bot, .gr-chatbot .user  {
+    color: #CFCFCF !important;
+}
+
+/* Textbox style */
+textarea, input[type=text] {
+    background-color: #18181B !important;
+    color: #FFFFFF !important;
+    border: 1px solid #795699 !important;
+    border-radius: 4px !important;
+}
+
+/* Button style */
+button {
+    background-color: #56246B !important;
+    color: #FFFFFF !important;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+button:hover {
+    background-color: #795699 !important;
+}
+"""
 
 TITLE = """
-<style>
-h1 { text-align: center; font-size: 24px; margin-bottom: 10px; }
-</style>
-<h1>🎵 Musify</h1>
+<div style='text-align: center;'>
+  <h1 style='margin-bottom: 0;'>MUSIFY</h1>
+  <p style='margin-top: 5px; color: #795699;'>Your own personal music discovery assistant!</p>
+</div>
 """
 
-with gr.Blocks(theme=gr.themes.Glass(primary_hue="violet", secondary_hue="violet", neutral_hue="stone")) as demo:
+with gr.Blocks(css=custom_css) as demo:
     with gr.Tabs():
-        with gr.TabItem("💬Chat"):
+        with gr.TabItem("Main Page"):
             gr.HTML(TITLE)
-            chatbot = gr.Chatbot(label="Storyboard Chatbot")
+            
+            with gr.Column(elem_id="main_box"):
+                chatbot = gr.Chatbot(label="Chat Output", height=300)
+            
             with gr.Row():
                 user_input = gr.Textbox(
-                    label="Your Message",
                     placeholder="Type your question here...",
                     lines=1
                 )
-                send_button = gr.Button("✋Ask Question")
+                send_button = gr.Button(value="🚀", elem_id="send_button_icon")
             
-            # Chatbot functionality
             send_button.click(
                 fn=chat_with_bot_stream,
                 inputs=user_input,
@@ -95,12 +131,8 @@ with gr.Blocks(theme=gr.themes.Glass(primary_hue="violet", secondary_hue="violet
                 inputs=None,
                 outputs=user_input
             )
-        
-        with gr.TabItem("📖 Generate Storyboard"):
-            gr.Markdown("## Generate a Storyboard")
-            scenario_input = gr.Textbox(label="Enter your scenario")
-            generate_btn = gr.Button("Generate Storyboard")
-            storyboard_output = gr.Textbox(label="Generated Storyboard", interactive=False)
-            generate_btn.click(generate_storyboard, inputs=scenario_input, outputs=storyboard_output)
 
-demo.launch()
+        with gr.TabItem("Settings"):
+            gr.Markdown("## Settings Page\n\nfjkfhkjgfkj")
+
+demo.launch()