Update app.py

app.py

@@ -45,11 +45,6 @@ CAPTION_TYPE_MAP = {
 
 HF_TOKEN = os.environ.get("HF_TOKEN", None)
 
-def login(username, password):
-    if username == USERNAME and password == PASSWORD:
-        return gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(value="Login successful! You can now access the QR Code Art Generator tab.", visible=True)
-    else:
-        return gr.update(visible=False), gr.update(visible=True), gr.update(visible=True), gr.update(value="Invalid username or password. Please try again.", visible=True)
 
 class ImageAdapter(nn.Module):
 	def __init__(self, input_features: int, output_features: int, ln1: bool, pos_emb: bool, num_image_tokens: int, deep_extract: bool):
@@ -291,7 +286,7 @@ img {
 }
 .centered-image {
     display: block;
-    margin-left: 0;
+    margin-left: auto;
     margin-right: auto;
     max-width: 100%;
     height: auto;
@@ -424,6 +419,12 @@ color_effects_info = {
 def get_dropdown_choices(info_dict):
     return [f"{key}: {value}" for key, value in info_dict.items()]
 
+def login(username, password):
+    if username == USERNAME and password == PASSWORD:
+        return gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(value="Login successful! You can now access the QR Code Art Generator tab.", visible=True)
+    else:
+        return gr.update(visible=False), gr.update(visible=True), gr.update(visible=True), gr.update(value="Invalid username or password. Please try again.", visible=True)
+
 # Gradio interface
 with gr.Blocks(theme="Hev832/Applio", css=css, fill_width=True, fill_height=True) as demo:
     with gr.Tab("Welcome"):
@@ -431,7 +432,7 @@ with gr.Blocks(theme="Hev832/Applio", css=css, fill_width=True, fill_height=True
             with gr.Column(scale=2): 
                 gr.Markdown(
                     """
-                    <img src="https://cdn-uploads.huggingface.co/production/uploads/64740cf7485a7c8e1bd51ac9/LVZnwLV43UUvKu3HORqSs.webp" alt="UDG" width="250" style="max-width: 100%; height: auto;">
+                    <img src="https://cdn-uploads.huggingface.co/production/uploads/64740cf7485a7c8e1bd51ac9/LVZnwLV43UUvKu3HORqSs.webp" alt="UDG" width="250" style="max-width: 100%; height: auto; class="centered-image">
 
                     # 🎨 Underground Digital's Caption Captain: AI-Powered Art Inspiration
 
@@ -458,7 +459,16 @@ with gr.Blocks(theme="Hev832/Applio", css=css, fill_width=True, fill_height=True
                         Once logged in, a new tab will appear named<br>
                         "QR Code Art Generator" allowing you to access.
                         """
-                    )    
+                    )
+
+                with gr.Row():
+                    username = gr.Textbox(label="Username", placeholder="Enter your username", value="ugd")
+                with gr.Row():
+                    password = gr.Textbox(label="Password", type="password", placeholder="Enter your password", value="ugd!")
+                with gr.Row():
+                    login_button = gr.Button("Login", size="sm")
+                login_message = gr.Markdown(visible=False)
+
     with gr.Tab("Caption Captain") as app_container:
         with gr.Accordion("How to Use Caption Captain", open=False):
             gr.Markdown("""