updated

app.py

@@ -32,60 +32,65 @@ def generate_text(prompt, max_length=150):
     return generated_text
 
 # Custom CSS for the UI
-custom_css = """
-.message.pending {
+background_image_path = 'https://www.shlegal-technology.com/sites/default/files/insight/ExploringTheLegislativeBackgroundBANNER.jpg'
+custom_css = f"""
+.message.pending {{
     background: #A8C4D6;
-}
+}}
 /* Response message */
-.message.bot.svelte-1s78gfg.message-bubble-border {
+.message.bot.svelte-1s78gfg.message-bubble-border {{
     border-color: #266B99;
-}
+}}
 /* User message */
-.message.user.svelte-1s78gfg.message-bubble-border {
+.message.user.svelte-1s78gfg.message-bubble-border {{
     background: #9DDDF9;
     border-color: #9DDDF9;
-}   
+}}   
 /* For both user and response message as per the document */
-span.md.svelte-8tpqd2.chatbot.prose p {
+span.md.svelte-8tpqd2.chatbot.prose p {{
     color: #266B99;
-}
+}}
 /* Chatbot container */
-.gradio-container {
+.gradio-container {{
     background: #1c1c1c; /* Dark background */
     color: white; /* Light text color */
-}
+    background-image: url('{background_image_path}'); /* Add background image */
+    background-size: cover; /* Cover the entire container */
+    background-position: center; /* Center the image */
+    background-repeat: no-repeat; /* Do not repeat the image */
+}}
 /* RED (Hex: #DB1616) for action buttons and links only */
-.clear-btn {
+.clear-btn {{
     background: #DB1616;
     color: white;
-}
+}}
 /* Primary colors are set to be used for all sorts */
-.submit-btn {
+.submit-btn {{
     background: #266B99;
     color: white;
-}
+}}
 /* Add icons to messages */
-.message.user.svelte-1s78gfg {
+.message.user.svelte-1s78gfg {{
     display: flex;
     align-items: center;
-}
-.message.user.svelte-1s78gfg:before {
+}}
+.message.user.svelte-1s78gfg:before {{
     content: url('file=Komal-patra/EU_AI_ACT/user icon.jpeg');
     margin-right: 8px;
-}
-.message.bot.svelte-1s78gfg {
+}}
+.message.bot.svelte-1s78gfg {{
     display: flex;
     align-items: center;
-}
-.message.bot.svelte-1s78gfg:before {
+}}
+.message.bot.svelte-1s78gfg:before {{
     content: url('file=Komal-patra/EU_AI_ACT/orcawise image.png');
     margin-right: 8px;
-}
+}}
 /* Enable scrolling for the chatbot messages */
-.chatbot .messages {
+.chatbot .messages {{
     max-height: 500px;  /* Adjust as needed */
     overflow-y: auto;
-}
+}}
 """
 
 # Gradio interface setup