update UI/UX

app.py

@@ -80,139 +80,7 @@ def show_settings_changed_info(agent_type, personality, expertise_level, languag
 For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
 """
 
-# Custom CSS styles
-custom_css = """
-.gradio-container {
-    max-width: 1200px;
-    margin: auto;
-    padding: 16px;
-}
-
-.container {
-    max-width: 800px;
-    margin: auto;
-    padding: 16px;
-}
-
-/* Chat container styles */
-.chat-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    margin-bottom: 16px;
-}
-
-/* Chat message styles */
-.chat-message {
-    padding: 12px;
-    margin: 8px;
-    border-radius: 8px;
-    max-width: 85%;
-    line-height: 1.5;
-}
-
-/* User message styles */
-.user-message {
-    background-color: #e3f2fd;
-    margin-left: auto;
-}
-
-/* Bot message styles */
-.bot-message {
-    background-color: #f5f5f5;
-    margin-right: auto;
-}
-
-/* Input area styles */
-.input-container {
-    display: flex;
-    gap: 8px;
-    padding: 12px;
-    background: white;
-    border-top: 1px solid #e0e0e0;
-    position: sticky;
-    bottom: 0;
-}
-
-/* Input field styles */
-input[type="text"] {
-    flex: 1;
-    padding: 8px;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-    font-size: 14px;
-}
-
-input[type="text"]:focus {
-    border-color: #2196f3;
-    outline: none;
-}
-
-/* Button styles */
-button {
-    padding: 8px 16px;
-    border: none;
-    border-radius: 4px;
-    background-color: #2196f3;
-    color: white;
-    font-weight: 500;
-    cursor: pointer;
-}
-
-button:hover {
-    background-color: #1976d2;
-}
-
-/* Settings panel styles */
-.settings-panel {
-    background: white;
-    padding: 16px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    margin-bottom: 16px;
-}
-
-/* Dropdown styles */
-select {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-    margin-bottom: 8px;
-}
-
-/* Slider styles */
-input[type="range"] {
-    width: 100%;
-    margin: 8px 0;
-}
-
-/* Markdown styles */
-.markdown {
-    margin-bottom: 16px;
-}
-
-/* Group styles */
-.group {
-    margin-bottom: 16px;
-}
-
-/* Label styles */
-label {
-    margin-bottom: 8px;
-    font-weight: 500;
-}
-
-/* Header styles */
-h1, h2, h3 {
-    margin-bottom: 16px;
-}
-"""
-
-with gr.Blocks(css=custom_css) as demo:
+with gr.Blocks() as demo:
     gr.Markdown("""
     # 🎬 Personalized Movie Recommender
     
@@ -222,27 +90,24 @@ with gr.Blocks(css=custom_css) as demo:
     
     with gr.Row():
         with gr.Column(scale=2):
-            with gr.Group(elem_classes="chat-container"):
-                chatbot = gr.Chatbot(
-                    height=600,
-                    show_copy_button=True,
-                    avatar_images=("👤", "🎬"),
-                    bubble_full_width=False,
-                    elem_classes=["chat-message"],
-                    type="messages"
+            chatbot = gr.Chatbot(
+                height=600,
+                show_copy_button=True,
+                avatar_images=("👤", "🎬"),
+                bubble_full_width=False
+            )
+            with gr.Row():
+                msg = gr.Textbox(
+                    placeholder="What kind of movie are you looking for?",
+                    show_label=False,
+                    container=False
                 )
-                with gr.Group(elem_classes="input-container"):
-                    msg = gr.Textbox(
-                        placeholder="What kind of movie are you looking for?",
-                        show_label=False,
-                        container=False
-                    )
-                    with gr.Row():
-                        submit = gr.Button("Get Recommendations", variant="primary", size="sm")
-                        clear = gr.Button("Clear Chat", size="sm")
+                with gr.Row():
+                    submit = gr.Button("Get Recommendations", variant="primary", size="sm")
+                    clear = gr.Button("Clear Chat", size="sm")
         
         with gr.Column(scale=1):
-            with gr.Group(elem_classes="settings-panel"):
+            with gr.Group():
                 gr.Markdown("### 🎯 Recommendation Settings")
                 genre = gr.Dropdown(
                     choices=["Action", "Comedy", "Drama", "Romance", "Thriller", "Sci-Fi", "Fantasy", "Animation"],
@@ -255,7 +120,7 @@ with gr.Blocks(css=custom_css) as demo:
                     multiselect=True
                 )
             
-            with gr.Group(elem_classes="settings-panel"):
+            with gr.Group():
                 gr.Markdown("### 🤖 Agent Settings")
                 agent_type = gr.Dropdown(
                     choices=["Expert", "Friend", "Film Critic", "Curator"],
@@ -278,7 +143,7 @@ with gr.Blocks(css=custom_css) as demo:
                     value="English"
                 )
             
-            with gr.Group(elem_classes="settings-panel"):
+            with gr.Group():
                 gr.Markdown("### ⚙️ Advanced Settings")
                 max_tokens = gr.Slider(
                     minimum=1,