Update app.py

app.py

@@ -1,6 +1,5 @@
 import gradio as gr
 import requests
-import os
 from PIL import Image
 from io import BytesIO
 from tqdm import tqdm
@@ -15,13 +14,11 @@ def infer(color_prompt, Phone_type_prompt, design_prompt):
 
     print("Generating image with prompt:", full_prompt)
     api_url = f"https://api-inference.huggingface.co/models/{repo}"
-    headers = {
-        # "Authorization": f"Bearer {token}"  # Uncomment and use your Hugging Face API token
-    }
+    headers = {}
     payload = {
         "inputs": full_prompt,
         "parameters": {
-            "negative_prompt": "(worst quality, low quality, normal quality, lowres, low details, oversaturated, undersaturated, overexposed, underexposed, grayscale, bw, bad photo, bad photography, bad art:1.4), (watermark, signature, text font, username, error, logo, words, letters, digits, autograph, trademark, name:1.2), (blur, blurry, grainy), morbid, ugly, asymmetrical, mutated malformed, mutilated, poorly lit, bad shadow, draft, cropped, out of frame, cut off, censored, jpeg artifacts, out of focus, glitch, duplicate, (airbrushed, cartoon, anime, semi-realistic, cgi, render, blender, digital art, manga, amateur:1.3), (3D ,3D Game, 3D Game Scene, 3D Character:1.1), (bad hands, bad anatomy, bad body, bad face, bad teeth, bad arms, bad legs, deformities:1.3)",
+            "negative_prompt": "(worst quality, low quality, lowres, oversaturated, grayscale, bad photo:1.4)",
             "num_inference_steps": 30,
             "scheduler": "DPMSolverMultistepScheduler"
         },
@@ -30,11 +27,8 @@ def infer(color_prompt, Phone_type_prompt, design_prompt):
     error_count = 0
     pbar = tqdm(total=None, desc="Loading model")
     while True:
-        print("Sending request to API...")
         response = requests.post(api_url, headers=headers, json=payload)
-        print("API response status code:", response.status_code)
         if response.status_code == 200:
-            print("Image generation successful!")
             return Image.open(BytesIO(response.content))
         elif response.status_code == 503:
             time.sleep(1)
@@ -43,10 +37,8 @@ def infer(color_prompt, Phone_type_prompt, design_prompt):
             time.sleep(1)
             error_count += 1
         else:
-            print("API Error:", response.status_code)
             raise Exception(f"API Error: {response.status_code}")
 
-# Light and Dark Mode CSS
 custom_css = """
 body {
     font-family: 'Poppins', sans-serif;
@@ -62,45 +54,87 @@ body {
     background-color: #333;
     color: #f8f9fa;
 }
-button {
-    font-size: 1.2rem;
-    padding: 10px 20px;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: 0.3s all;
+.gr-markdown-container {
+    transition: color 0.3s;
 }
-button.light-mode {
-    background-color: #007bff;
-    color: #fff;
+.light-mode .gr-markdown-container {
+    color: #333;
 }
-button.dark-mode {
-    background-color: #444;
-    color: #fff;
+.dark-mode .gr-markdown-container {
+    color: #f8f9fa;
 }
-textarea {
+textarea, input {
     padding: 10px;
     border-radius: 8px;
-    transition: 0.3s;
-}
-textarea.light-mode {
-    background-color: #fff;
-    color: #333;
     border: 2px solid #ccc;
+    margin-bottom: 10px;
+    width: 100%;
 }
-textarea.dark-mode {
+textarea.dark-mode, input.dark-mode {
     background-color: #444;
     color: #f8f9fa;
     border: 2px solid #555;
 }
+textarea.light-mode, input.light-mode {
+    background-color: #fff;
+    color: #333;
+}
 .output-image {
     max-width: 100%;
     border-radius: 12px;
-    border: 2px solid #007bff;
     margin-top: 20px;
 }
+
+/* Neon Button Styling */
+button {
+    font-size: 1.2rem;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    border: none;
+    color: white;
+    background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
+    background-size: 400%;
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6),
+                0 0 20px rgba(255, 255, 255, 0.4),
+                0 0 40px rgba(255, 255, 255, 0.2);
+    animation: neon-button 2s infinite;
+    transition: transform 0.3s;
+}
+
+button:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
+                0 0 40px rgba(255, 255, 255, 0.6),
+                0 0 60px rgba(255, 255, 255, 0.4);
+}
+
+/* Neon Animation */
+@keyframes neon-button {
+    0% { background-position: 0%; }
+    100% { background-position: 400%; }
+}
+
+@media screen and (max-width: 768px) {
+    .gradio-container {
+        padding: 10px;
+    }
+    textarea, input {
+        font-size: 0.9rem;
+    }
+    button {
+        font-size: 0.9rem;
+    }
+}
+@media screen and (min-width: 769px) {
+    .gradio-container {
+        padding: 20px;
+        max-width: 1200px;
+        margin: auto;
+    }
+}
 """
 
-# JavaScript to Toggle Modes
 custom_js = """
 <script>
 document.addEventListener('DOMContentLoaded', function () {
@@ -117,22 +151,22 @@ document.addEventListener('DOMContentLoaded', function () {
 </script>
 """
 
-# Create the Gradio interface
 with gr.Blocks(css=custom_css) as interface:
     gr.HTML(custom_js)
     gr.Markdown(
         """
         # **AI Phone Cover Designer**
         Create custom designs for your brand with AI. Specify color, style, and design details.
-        """
+        """,
+        elem_id="gr-markdown-container"  
     )
-    with gr.Row():
-        with gr.Column():
+    with gr.Row(elem_id="responsive-row"):
+        with gr.Column(scale=1, min_width=300):
             color_prompt = gr.Textbox(label="Color", placeholder="E.g., Red", elem_id="component-1")
             Back_cover_prompt = gr.Textbox(label="Mobile type", placeholder="E.g., iPhone, Samsung", elem_id="component-2")
             design_prompt = gr.Textbox(label="Design Details", placeholder="E.g., Bold stripes with geometric patterns", elem_id="component-3")
             generate_button = gr.Button("Generate Design")
-        with gr.Column():
+        with gr.Column(scale=1, min_width=300):
             output = gr.Image(label="Generated Design", elem_id="output-image")
 
     generate_button.click(infer, inputs=[color_prompt, Back_cover_prompt, design_prompt], outputs=output)