Update app.py

app.py

@@ -1,137 +1,66 @@
 import gradio as gr
 
-# --------------------------
-# SIMPLE AUTH
-# --------------------------
+----------------- SIMPLE AUTH SYSTEM -----------------
+
 users = {"admin": "1234"}
 
-def login(username, password):
-    if username in users and users[username] == password:
-        return (
-            gr.update(visible=False),
-            gr.update(visible=True),
-            f"✔ Welcome, **{username}**!"
-        )
-    return gr.update(), gr.update(), "❌ Wrong username or password."
-
-def signup(username, password):
-    if username in users:
-        return "⚠ Username already exists!"
-    users[username] = password
-    return "✅ Account created! You can log in now."
-
-# --------------------------
-# CHATBOT
-# --------------------------
-def chat_bot(message, history):
-    if history is None:
-        history = []
-
-    history.append({"role": "user", "content": message})
-    reply = "Hello! (Your bot response goes here...)"
-    history.append({"role": "assistant", "content": reply})
-
-    return history, ""
-
-# --------------------------
-# MODERN RESPONSIVE CSS
-# --------------------------
-css = """
-body {
-    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: white;
-    font-size: 32px;
-    text-align: center;
-    font-weight: 800;
-    padding-top: 30px;
-}
-
-/* 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.15s;
-}
-
-.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
-# --------------------------
-with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="blue", radius_size="md")) as app:
-
-    # LOGIN SCREEN
-    with gr.Group(visible=True) as login_screen:
-        gr.Markdown("<h1 id='main_title'>Login</h1>")
-
-        with gr.Tabs():
-            with gr.Tab("Login"):
-                u = gr.Textbox(label="Username")
-                p = gr.Textbox(label="Password", type="password")
-                b = gr.Button("Login", variant="primary")
-                status = gr.Markdown("")
-
-            with gr.Tab("Sign Up"):
-                su = gr.Textbox(label="New Username")
-                sp = gr.Textbox(label="New Password", type="password")
-                sb = gr.Button("Create Account")
-                signup_status = gr.Markdown("")
-
-    # MAIN SCREEN
-    with gr.Group(visible=False) as home:
-
-        gr.Markdown("<h1 id='main_title'>What can I help you with?</h1>")
-
-        # Feature buttons (full width)
-        with gr.Row():
-            gr.Button("🖼 Create Image", elem_classes="feature-btn")
-            gr.Button("💻 Code", elem_classes="feature-btn")
-
-        with gr.Row():
-            gr.Button("📝 Summarize Text", elem_classes="feature-btn")
-            gr.Button("💡 Make a Plan", elem_classes="feature-btn")
-
-        # 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.click(chat_bot, [msg, chatbot], [chatbot, msg])
-        msg.submit(chat_bot, [msg, chatbot], [chatbot, msg])
-
-    # Button events
-    b.click(login, [u, p], [login_screen, home, status])
-    sb.click(signup, [su, sp], signup_status)
+def login(username, password): if username in users and users[username] == password: return gr.update(visible=False), gr.update(visible=True), f"Welcome, {username}!" return gr.update(), gr.update(), "❌ Invalid credentials!"
+
+def signup(username, password): if username in users: return "❌ User already exists!" users[username] = password return "✅ Account created! You can now log in."
+
+----------------- CHATBOT FUNCTION -----------------
+
+def chat_bot(msg, history): history = history + [(msg, "✨ Your bot reply will appear here...")] return history, history
+
+----------------- CUSTOM CSS (Clean Modern UI) -----------------
+
+css = """ body { background: #0d0d0d; font-family: Inter, sans-serif; } #main_title { color: white; text-align: center; margin-top: 40px; font-size: 36px; font-weight: 900; }
+
+.card-btn { background: linear-gradient(145deg, #1a1a1a, #111); border-radius: 20px; padding: 18px; border: 1px solid #2a2a2a; color: white; font-size: 18px; width: 100%; transition: 0.25s; } .card-btn:hover { background: #222; transform: translateY(-3px); } .chatbox-holder { border-radius: 18px; overflow: hidden; } """
+
+----------------- APP UI -----------------
+
+with gr.Blocks(css=css, theme="soft") as app:
+
+# -------- AUTH SCREEN --------
+with gr.Group(visible=True) as auth_screen:
+    gr.Markdown("<h1 id='main_title'>Welcome</h1>")
+
+    with gr.Tabs():
+        with gr.Tab("Login"):
+            login_user = gr.Textbox(label="Username")
+            login_pass = gr.Textbox(label="Password", type="password")
+            login_btn = gr.Button("Log In")
+            login_status = gr.Markdown("")
+
+        with gr.Tab("Sign Up"):
+            sign_user = gr.Textbox(label="New Username")
+            sign_pass = gr.Textbox(label="New Password", type="password")
+            sign_btn = gr.Button("Create Account")
+            signup_status = gr.Markdown("")
+
+# -------- MAIN HOME SCREEN --------
+with gr.Group(visible=False) as home_screen:
+
+    gr.Markdown("<h1 id='main_title'>What can I help you with?</h1>")
+
+    with gr.Row():
+        gr.Button("🎨 Create Image", elem_classes="card-btn")
+        gr.Button("💻 Write Code", elem_classes="card-btn")
+
+    with gr.Row():
+        gr.Button("📝 Summarize Text", elem_classes="card-btn")
+        gr.Button("📅 Make a Plan", elem_classes="card-btn")
+
+    chatbot = gr.Chatbot(height=450, elem_classes="chatbox-holder")
+    msg = gr.Textbox(placeholder="Ask something...", scale=8)
+    send = gr.Button("Send", scale=2)
+
+    send.click(chat_bot, [msg, chatbot], [chatbot, chatbot])
+    msg.submit(chat_bot, [msg, chatbot], [chatbot, chatbot])
+
+# -------- BUTTON EVENTS --------
+login_btn.click(login, [login_user, login_pass], [auth_screen, home_screen, login_status])
+sign_btn.click(signup, [sign_user, sign_pass], signup_status)
 
 app.launch()