Update app.py

app.py

@@ -96,45 +96,49 @@ def gradio_fn(message, history):
         max_new=512,
         min_new=0,
     )
+
 with gr.Blocks(css="""
-    :root { --chat-w: 520px; }          /* ↓ change this to shrink/grow the chat */
+    :root { --chat-w: 520px; }
 
-    .gradio-container { 
-        max-width: var(--chat-w);       /* narrower chat */
+    html, body {
+        height: 100%;
+        overflow-y: hidden;               /* no page scroll */
+        margin: 0;
+    }
+    /* Full-screen background image with a soft dark overlay */
+    body {
+        background:
+          linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.28)),
+          url("/file=bg.jpg") center / cover no-repeat fixed;  /* <- change filename if needed */
+    }
+
+    /* Left-aligned, narrower chat panel */
+    .gradio-container {
+        max-width: var(--chat-w);
         width: var(--chat-w);
-        margin-left: 16px;              /* align left */
-        margin-right: auto;             /* push away from right */
-        padding: 20px; 
-        font-family: sans-serif; 
-        position: relative; 
-    } 
-
-    .chatbot { 
-        height: 480px !important;       /* a bit smaller; tweak as you like */
-        overflow-y: auto; 
-    } 
-
-    /* corner images (optional) */
-    .corner { 
-        position: fixed; 
-        bottom: 8px; 
-        z-index: 5; 
-        pointer-events: none; 
-    } 
-    #left  { left: 8px; }
-    #right { right: 8px; bottom: 96px; }    /* lift Krishna a bit */
-    .corner img { 
-        height: min(62vh, 760px);
-        width: auto; 
+        margin-left: 16px;
+        margin-right: auto;
+        padding: 20px;
+        font-family: sans-serif;
+        position: relative;
+
+        /* optional glass effect for readability */
+        background: rgba(0,0,0,.30);
+        border-radius: 16px;
+        backdrop-filter: blur(6px);
+    }
+
+    .chatbot {
+        height: 480px !important;
+        overflow-y: auto;
     }
 
-    /* mobile safety */
     @media (max-width: 720px){
         :root { --chat-w: 92vw; }
         .gradio-container { margin-left: 4vw; }
     }
 """) as demo:
-    
+
     gr.Markdown(
         """
         <div style='text-align: left; padding: 10px;'>
@@ -145,7 +149,7 @@ with gr.Blocks(css="""
         elem_id="header"
     )
 
-    chat = gr.ChatInterface(
+    gr.ChatInterface(
         fn=gradio_fn,
         examples=[
             "Hello!",
@@ -157,14 +161,5 @@ with gr.Blocks(css="""
         type="messages",
     )
 
-    gr.HTML("""
-        <div id="left" class="corner">
-            <img src="/file=arjuna.png" alt="Arjun">
-        </div>
-        <div id="right" class="corner">
-            <img src="/file=krishna.png" alt="Krishna">
-        </div>
-    """)
-
 if __name__ == "__main__":
     demo.launch()