Update app.py

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
 
 # --------------------------
-# SIMPLE AUTH DATABASE
+# SIMPLE AUTH
 # --------------------------
 users = {"admin": "1234"}
 
@@ -10,113 +10,128 @@ def login(username, password):
         return (
             gr.update(visible=False),
             gr.update(visible=True),
-            f"✔ Welcome back, **{username}**!"
+            f"✔ Welcome, **{username}**!"
         )
-    return gr.update(), gr.update(), "❌ Invalid username or password."
+    return gr.update(), gr.update(), "❌ Wrong username or password."
 
 def signup(username, password):
     if username in users:
-        return "⚠ User already exists!"
+        return "⚠ Username already exists!"
     users[username] = password
-    return "✅ Account created successfully! Please login now."
+    return "✅ Account created! You can log in now."
 
 # --------------------------
-# CHATBOT CORE
+# CHATBOT
 # --------------------------
 def chat_bot(message, history):
     if history is None:
         history = []
 
     history.append({"role": "user", "content": message})
-    bot_reply = "Hello! (Your bot response goes here...)"
-
-    history.append({"role": "assistant", "content": bot_reply})
+    reply = "Hello! (Your bot response goes here...)"
+    history.append({"role": "assistant", "content": reply})
 
     return history, ""
 
 # --------------------------
-# CUSTOM CSS (CLEAN + MODERN)
+# MODERN RESPONSIVE CSS
 # --------------------------
 css = """
 body {
-    background: #0d0d0d !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background: #0c0c0c;
     font-family: 'Inter', sans-serif;
 }
 
+/* Make whole app fullscreen */
+.gradio-container {
+    max-width: 100% !important;
+    width: 100% !important;
+    padding: 0 !important;
+}
+
+/* Title */
 #main_title {
-    color: #fff;
-    font-size: 34px;
+    color: white;
+    font-size: 32px;
     text-align: center;
     font-weight: 800;
-    margin-top: 40px;
+    padding-top: 30px;
 }
 
-.card-btn {
-    background: #1a1a1a;
-    border-radius: 16px;
-    padding: 16px 22px !important;
+/* Buttons grid */
+.feature-btn {
+    background: #1a1a1a !important;
+    border-radius: 14px !important;
+    padding: 18px !important;
     border: 1px solid #2a2a2a !important;
     color: #fff !important;
+    width: 100% !important;
     font-size: 18px !important;
-    transition: 0.18s ease;
+    transition: 0.15s;
 }
 
-.card-btn:hover {
+.feature-btn:hover {
     background: #242424 !important;
     transform: translateY(-2px);
 }
+
+/* Chatbot panel fullscreen */
+.chat-container {
+    width: 100% !important;
+    height: calc(100vh - 320px);
+    margin-top: 20px;
+}
+
 """
 
 # --------------------------
-# UI & APP LAYOUT
+# UI
 # --------------------------
 with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="blue", radius_size="md")) as app:
 
-    # ============= LOGIN SCREEN ==============
+    # LOGIN SCREEN
     with gr.Group(visible=True) as login_screen:
-        gr.Markdown("<h1 id='main_title'>Login to Continue</h1>")
+        gr.Markdown("<h1 id='main_title'>Login</h1>")
 
         with gr.Tabs():
-            # LOGIN TAB
             with gr.Tab("Login"):
-                login_user = gr.Textbox(label="Username", placeholder="Enter username")
-                login_pass = gr.Textbox(label="Password", type="password", placeholder="Enter password")
-                login_btn = gr.Button("Login", variant="primary")
-                login_status = gr.Markdown("")
+                u = gr.Textbox(label="Username")
+                p = gr.Textbox(label="Password", type="password")
+                b = gr.Button("Login", variant="primary")
+                status = gr.Markdown("")
 
-            # SIGNUP TAB
             with gr.Tab("Sign Up"):
-                sign_user = gr.Textbox(label="Create username")
-                sign_pass = gr.Textbox(label="Create password", type="password")
-                sign_btn = gr.Button("Create Account")
+                su = gr.Textbox(label="New Username")
+                sp = gr.Textbox(label="New Password", type="password")
+                sb = gr.Button("Create Account")
                 signup_status = gr.Markdown("")
 
-    # ============= MAIN APP ==============
-    with gr.Group(visible=False) as home_screen:
+    # MAIN SCREEN
+    with gr.Group(visible=False) as home:
 
         gr.Markdown("<h1 id='main_title'>What can I help you with?</h1>")
 
-        # FEATURE BUTTONS
+        # Feature buttons (full width)
         with gr.Row():
-            gr.Button("🖼 Create Image", elem_classes="card-btn")
-            gr.Button("💻 Code", elem_classes="card-btn")
+            gr.Button("🖼 Create Image", elem_classes="feature-btn")
+            gr.Button("💻 Code", elem_classes="feature-btn")
 
         with gr.Row():
-            gr.Button("📝 Summarize Text", elem_classes="card-btn")
-            gr.Button("💡 Make a Plan", elem_classes="card-btn")
-
-        gr.Markdown("<br>")
+            gr.Button("📝 Summarize Text", elem_classes="feature-btn")
+            gr.Button("💡 Make a Plan", elem_classes="feature-btn")
 
-        # CHAT SECTION
-        chatbot = gr.Chatbot(type="messages", height=450, label="Chat")
-        message_box = gr.Textbox(placeholder="Ask me anything...", scale=8)
-        send_btn = gr.Button("Send", scale=2)
+        # Chatbot FULLSCREEN
+        chatbot = gr.Chatbot(type="messages", elem_classes="chat-container")
+        msg = gr.Textbox(placeholder="Ask me anything…")
+        send = gr.Button("Send", variant="primary")
 
-        send_btn.click(chat_bot, [message_box, chatbot], [chatbot, message_box])
-        message_box.submit(chat_bot, [message_box, chatbot], [chatbot, message_box])
+        send.click(chat_bot, [msg, chatbot], [chatbot, msg])
+        msg.submit(chat_bot, [msg, chatbot], [chatbot, msg])
 
-    # BUTTON EVENTS
-    login_btn.click(login, [login_user, login_pass], [login_screen, home_screen, login_status])
-    sign_btn.click(signup, [sign_user, sign_pass], signup_status)
+    # Button events
+    b.click(login, [u, p], [login_screen, home, status])
+    sb.click(signup, [su, sp], signup_status)
 
 app.launch()