Update app.py

app.py

@@ -275,20 +275,42 @@ def stream_chat(input_image: Image.Image, caption_type: str, caption_tone: str,
     return caption
 
 css = """
-h1, h2, h3, h4, h5, h6, p, li, ul, ol, a, .centered-image {
-    text-align: center;
+h1, h2, h3, h4, h5, h6, p, li, ul, ol, a {
+    text-align: left;
+}
+.centered-image {
     display: block;
     margin-left: auto;
     margin-right: auto;
+    max-width: 100%;
+    height: auto;
 }
 ul, ol {
-    margin-left: auto;
-    margin-right: auto;
-    display: table;
+    padding-left: 20px;
 }
-.centered-image {
-    max-width: 100%;
-    height: auto;
+.gradio-container {
+    max-width: 100% !important;
+    padding: 0 !important;
+}
+.gradio-row {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+.gradio-column {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+/* Left-align dropdown text */
+.gradio-dropdown > div {
+    text-align: left !important;
+}
+/* Left-align checkbox labels */
+.gradio-checkbox label {
+    text-align: left !important;
+}
+/* Left-align radio button labels */
+.gradio-radio label {
+    text-align: left !important;
 }
 """
 
@@ -414,9 +436,9 @@ with gr.Blocks(theme="Hev832/Applio", css=css, fill_width=True, fill_height=True
         )
 
         with gr.Row():
-            username = gr.Textbox(label="Username", placeholder="Enter your username", value="ugd")
+            username = gr.Textbox(label="Username", placeholder="Enter your username", value="ugd", visible=False)
         with gr.Row():
-            password = gr.Textbox(label="Password", type="password", placeholder="Enter your password", value="ugd!")
+            password = gr.Textbox(label="Password", type="password", placeholder="Enter your password", value="ugd!", visible=False)
         with gr.Row():
             login_button = gr.Button("Login", size="sm")
         login_message = gr.Markdown(visible=False)
@@ -433,27 +455,22 @@ with gr.Blocks(theme="Hev832/Applio", css=css, fill_width=True, fill_height=True
             1. **Pick a Picture**: Find a cool picture you want to talk about and upload it.
 
             2. **Choose What You Want**: 
-            
                - **Caption Type**: 
-               
                  * "Descriptive" tells you what's in the picture
                  * "Training Prompt" helps computers make similar pictures
                  * "RNG-Tags" gives you short words about the picture
                  * "Style Prompt" creates detailed prompts for image generation
 
             3. **Pick a Style** (for "Descriptive" and "Style Prompt" only):
-            
                - "Formal" sounds like a teacher talking
                - "Informal" sounds like a friend chatting
 
             4. **Decide How Long**:
-            
                - "Any" lets the computer decide
                - Or pick a size from "very short" to "very long"
                - You can even choose a specific number of words!
 
             5. **Advanced Options** (for "Style Prompt" only):
-            
                - Choose lens type, film stock, composition, and lighting details
 
             6. **Make the Caption**: Click the "Make My Caption!" button and watch the magic happen!
@@ -461,7 +478,6 @@ with gr.Blocks(theme="Hev832/Applio", css=css, fill_width=True, fill_height=True
             Remember, have fun and be creative with your captions!
 
             ## Tips for Great Captions:
-            
             - Try different types to see what you like best
             - Experiment with formal and informal tones for fun variations
             - Adjust the length to get just the right amount of detail