Update app.py

app.py

@@ -87,48 +87,67 @@ css = """
 }
 
 /* Button Styles */
-.gr-button-primary {
+.gradio-button {
     color: #fff;
     background-color: #2563eb;
     border-color: #1d4ed8;
+    cursor: pointer;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    border-radius: 0.25rem;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
 }
 
-.gr-button-primary:hover {
+.gradio-button:hover {
     background-color: #1d4ed8;
     border-color: #1d4ed8;
 }
 
-/* Input Styles */
-.gr-textbox {
+.gradio-input {
     border-color: #a0aec0;
-    padding: 9px 12px;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
-.gr-textbox:focus {
+.gradio-input:focus {
     border-color: #2563eb;
     box-shadow: 0 0 0 2px rgba(37,99,235,.25);
 }
 
 /* Output Image Styles */
-#gallery img {
+.gradio-output img {
     max-width: 100%;
     height: auto;
     border-radius: 6px;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
-
-/* Advanced settings accordion styles */
-.gr-accordion-header {
-    font-weight: 500;
-    color: #4a5568;
-    padding: 10px 16px;
-}
 """
 
-with gr.Interface(fn=generate_txt2img, inputs=[current_model, text_prompt, negative_prompt, image_style], outputs=image_output, css=css) as demo:
-    favicon = '<img src="" width="48px" style="display: inline">'
-    demo.set_input_properties("current_model", label="Current Model")
-    demo.set_input_properties("text_prompt", label="Prompt", placeholder="Enter a prompt", lines=1)
-    demo.set_input_properties("text_button", label="Generate", button=True, primary=True)
-
-    demo.launch(share=True, host='0.0.0.0', port=int(os.environ.get('PORT', 8080)))
+def generate_txt2img(current_model, text_prompt, negative_prompt, image_style):
+    # Your generation code here
+    pass
+
+favicon = '<img src="" width="48px" style="display: inline">'
+current_model = gr.inputs.Dropdown(label="Current Model", choices=list_models, default=list_models[1])
+text_prompt = gr.inputs.Textbox(label="Prompt", placeholder="Enter a prompt", lines=1)
+negative_prompt = gr.inputs.Textbox(label="Negative Prompt", value="text, blurry, fuzziness", lines=1)
+image_style = gr.inputs.Dropdown(label="Style", choices=["None style", "Cinematic", "Digital Art", "Portrait"], default="None style")
+text_button = gr.outputs.Button(label="Generate", type="button")
+
+image_output = gr.outputs.Image(label="Generated Image")
+
+interface = gr.Interface(
+    fn=generate_txt2img,
+    inputs=[current_model, text_prompt, negative_prompt, image_style],
+    outputs=image_output,
+    layout="vertical",
+    css=css,
+    title=favicon + " AI Diffusion"
+)
+
+interface.launch()