Update app.py

app.py

@@ -53,7 +53,27 @@ body {
     background-color: #f0f5fb; /* Light pastel blue background */
 }
 .gradio-container { 
-    margin: 0 auto;
+    background-color: white;
+    border-radius: 16px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    max-width: 90%;
+    margin: 15px auto;
+    padding-bottom: 20px;
+}
+/* Header styling with diagonal shield */
+.app-header {
+    position: relative;
+    overflow: hidden;
+}
+.app-header::before {
+    content: "🛡️";
+    position: absolute;
+    font-size: 100px;
+    opacity: 0.1;
+    right: -20px;
+    top: -30px;
+    transform: rotate(15deg);
+    pointer-events: none;
 }
 /* Simple styling for buttons */
 #send-btn {
@@ -72,6 +92,14 @@ body {
 #clear-btn:hover {
     background-color: #fff9e6 !important;
 }
+/* User/assistant emoji in chat */
+.user-msg::before {
+    content: "👤 ";
+}
+.bot-msg::before {
+    content: "🛡️ ";
+}
+/* Hide elements */
 footer {
     display: none !important;
 }
@@ -83,7 +111,7 @@ footer {
 with gr.Blocks(css=css) as demo:
     # Custom header with branding
     gr.HTML("""
-    <div style="background: linear-gradient(135deg, #4a90e2, #75c6ef); padding: 15px; border-radius: 16px 16px 0 0; color: white; border-bottom: 3px solid #e6c200;">
+    <div class="app-header" style="background: linear-gradient(135deg, #4a90e2, #75c6ef); padding: 15px; border-radius: 16px 16px 0 0; color: white; border-bottom: 3px solid #e6c200;">
         <h1 style="font-size: 24px; font-weight: 600; margin: 0; display: flex; align-items: center; font-family: 'Palatino', serif;">
             <span style="margin-right: 10px; font-size: 22px;">🛡️</span>
             <span style="font-weight: 700; margin-right: 5px;">Safe</span>
@@ -129,8 +157,53 @@ with gr.Blocks(css=css) as demo:
             chatbot = gr.Chatbot(
                 label="Conversation", 
                 show_label=True,
-                height=400
+                height=400,
+                elem_classes=["chat-box"]
             )
+            
+            # Add JavaScript to inject user/assistant emojis
+            gr.HTML("""
+            <script>
+            // Function to add emojis to chat messages
+            function addEmojisToChat() {
+                setTimeout(function() {
+                    // Find all user messages and add emoji
+                    document.querySelectorAll('.user').forEach(function(el) {
+                        if (!el.querySelector('.emoji-added')) {
+                            let textEl = el.querySelector('p');
+                            if (textEl) {
+                                textEl.innerHTML = '👤 ' + textEl.innerHTML;
+                                let span = document.createElement('span');
+                                span.className = 'emoji-added';
+                                span.style.display = 'none';
+                                el.appendChild(span);
+                            }
+                        }
+                    });
+                    
+                    // Find all bot messages and add emoji
+                    document.querySelectorAll('.bot').forEach(function(el) {
+                        if (!el.querySelector('.emoji-added')) {
+                            let textEl = el.querySelector('p');
+                            if (textEl) {
+                                textEl.innerHTML = '🛡️ ' + textEl.innerHTML;
+                                let span = document.createElement('span');
+                                span.className = 'emoji-added';
+                                span.style.display = 'none';
+                                el.appendChild(span);
+                            }
+                        }
+                    });
+                    
+                    // Call this function again to catch new messages
+                    addEmojisToChat();
+                }, 1000);
+            }
+            
+            // Start the process
+            window.addEventListener('load', addEmojisToChat);
+            </script>
+            """)
             with gr.Row():
                 user_input = gr.Textbox(
                     placeholder="Type your message here...",