Update app.py

app.py

@@ -77,76 +77,116 @@ def generate_txt2img(current_model, prompt, is_negative=False, image_style="None
     image = Image.open(io.BytesIO(image_bytes))
     return image
 
-import gradio as gr
 
 css = """
 /* General Container Styles */
 .gradio-container {
     font-family: 'IBM Plex Sans', sans-serif;
-    max-width: 800px !important;
+    max-width: 730px !important;
     margin: auto;
-    padding-top: 2rem;
+    padding-top: 1.5rem;
 }
 
-/* Button Styles */
-.gradio-button-primary {
-    color: #fff;
-    background-color: #2563eb;
-    border-color: #1d4ed8;
+/*Button Styles */
+.gr-button {
+    color: white;
+    border-color: black;
+    background: black;
+    white-space: nowrap;
 }
 
-.gradio-button-primary:hover {
-    background-color: #1d4ed8;
-    border-color: #1d4ed8;
+.gr-button:focus {
+    border-color: rgb(147 197 253 / var(--tw-border-opacity));
+    outline: none;
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-border-opacity: 1;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px var(--tw-ring-offset-width)) var(--tw-ring-color);
+    --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
+    --tw-ring-opacity: .5;
 }
 
-/* Input Styles */
-.gradio-textbox {
-    border-color: #a0aec0;
-    padding: 9px 12px;
+/* Footer Styles */
+.footer, .dark .footer {
+    margin-bottom: 45px;
+    margin-top: 35px;
+    text-align: center;
+    border-bottom: 1px solid #e5e5e5;
 }
 
-.gradio-textbox:focus {
-    border-color: #2563eb;
-    box-shadow: 0 0 0 2px rgba(37,99,235,.25);
+.footer > p, .dark .footer > p {
+    font-size: .8rem;
+    display: inline-block;
+    padding: 0 10px;
+    transform: translateY(10px);
+    background: white;
 }
 
-/* Output Image Styles */
-.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);
+.dark .footer {
+    border-color: #303030;
+}
+
+.dark .footer > p {
+    background: #0b0f19;
 }
-"""
 
-def generate_txt2img(current_model, text_prompt, negative_prompt, image_style):
-    # Your generation code here
-    pass
+/* Share Button Styles */
+#share-btn-container {
+    padding: 0 0.5rem !important;
+    background-color: #000000;
+    justify-content: center;
+    align-items: center;
+    border-radius: 9999px !important;
+    max-width: 13rem;
+    margin-left: auto;
+}
 
-favicon = '<img src="" width="48px" style="display: inline">'
-title = f"""<h1><center>{favicon} AI Diffusion</center></h1>"""
-markdown_title = gr.Markdown(title)
+#share-btn-container:hover {
+    background-color: #060606;
+}
 
-current_model = gr.inputs.Dropdown(label="Current Model", choices=list_models, value=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"], value="None style")
+#share-btn {
+    all: initial;
+    color: #ffffff;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', sans-serif;
+    margin-left: 0.5rem !important;
+    padding: 0.5rem !important;
+    right: 0;
+}
 
-generate_button = gr.outputs.Button(label="Generate", type="button")
-image_output = gr.outputs.Image(label="Output Image")
+/* Animation Styles */
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
 
-with gr.Blocks(css=css) as demo:
-    gr.Grid(col_width="auto", col_gap="10px").push(
-        markdown_title,
-        current_model,
-        text_prompt,
-        negative_prompt,
-        image_style,
-        generate_button,
-        image_output
-    )
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
 
-    generate_button.click(generate_txt2img, inputs=[current_model, text_prompt, negative_prompt, image_style], outputs=image_output)
+/* Other Styles */
+#gallery {
+    min-height: 22rem;
+    margin-bottom: 15px;
+    margin-left: auto;
+    margin-right: auto;
+    border-bottom-right-radius: .5rem !important;
+    border-bottom-left-radius: .5rem !important;
+}
+"""
 
-demo.launch(show_api=False)
+gr.Interface(
+    fn=generate_txt2img,
+    inputs=[
+        gr.inputs.Dropdown(label="Current Model", choices=list_models, default=list_models[1]),
+        gr.inputs.Textbox(label="Prompt", placeholder="a cute dog", lines=1),
+        gr.inputs.Textbox(label="Negative Prompt", placeholder="text, blurry, fuzziness", lines=1),
+        gr.inputs.Dropdown(label="Style", choices=["None style", "Cinematic", "Digital Art", "Portrait"], default="None style")
+    ],
+    outputs=gr.outputs.Image(type="pil", label="Output Image", id="gallery"),
+    title="AI Diffusion",
+    css=css,
+    theme="light"
+).launch(show_input=True)