Create app.py

app.py

@@ -0,0 +1,177 @@
+pip install pillow gradio requests
+import requests
+from PIL import Image
+from io import BytesIO
+import gradio as gr
+import base64
+
+# Optimized function to call the Hugging Face API and convert JSON to an image
+def generate_image_from_text(prompt):
+    try:
+        # Use the FLUX model endpoint and your Hugging Face API key
+        API_URL = "https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-dev"
+        headers = {"Authorization": f"Bearer {os.getenv('HF_API_KEY')}"}
+
+        # Send the text prompt to the Hugging Face API
+        response = requests.post(API_URL, headers=headers, json={"inputs": prompt})
+        response.raise_for_status()  # Raise an error for bad HTTP responses
+
+        # Process the response efficiently
+        content_type = response.headers.get("content-type")
+        if content_type == "application/json":
+            response_json = response.json()
+            # Check for base64-encoded image or image URL
+            image_data = response_json.get("generated_image")
+            image_url = response_json.get("generated_image_url")
+
+            if image_data:  # Base64-encoded image
+                image_bytes = BytesIO(base64.b64decode(image_data))
+            elif image_url:  # Image URL
+                image_response = requests.get(image_url)
+                image_response.raise_for_status()
+                image_bytes = BytesIO(image_response.content)
+            else:
+                return "Error: No image data found in the response."
+
+        else:  # Binary image directly in response
+            image_bytes = BytesIO(response.content)
+
+        # Load the image once for faster return
+        return Image.open(image_bytes)
+
+    except requests.exceptions.RequestException as req_err:
+        return f"Error with the request: {req_err}"
+    except Exception as e:
+        return f"Error generating image: {e}"
+
+    # Gradio interface for user-friendly interaction
+    iface = gr.Interface(
+    fn=generate_image_from_text,
+    inputs=gr.Textbox(
+        label="Enter a prompt for the image",
+        placeholder="e.g., A beautiful futuristic city",
+        lines=4,  # Make the textbox bigger
+        max_length=200,  # Set a maximum character length
+        interactive=True,  # Allow for dynamic text change
+        elem_id="prompt-box"  # ID for CSS targeting
+    ),
+    outputs="image",
+    title=" Text-to-Image Generator",
+    description="Here my portfolio : maazirfan.netlify.app",
+    allow_flagging="never",  # Hide the flag button for a cleaner UI
+    css="""
+        body {
+            background-color: #1d1d1d;  /* Dark background */
+            color: white;
+            font-family: 'Arial', sans-serif;
+        }
+
+        .gradio-container {
+            background-color: #2d2d2d;  /* Slightly lighter background */
+            padding: 20px;
+            border-radius: 15px;
+            max-width: 800px;
+            margin: auto;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);  /* Soft shadow for depth */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .gradio-title {
+            font-size: 36px;
+            font-weight: bold;
+            text-align: center;
+            color: #4a90e2;  /* Light blue for title */
+            margin-bottom: 20px;
+        }
+
+        .gradio-description {
+            font-size: 18px;
+            text-align: center;
+            color: #aaa;  /* Light grey for description */
+            margin-bottom: 30px;
+        }
+
+        #prompt-box {
+            font-size: 18px;
+            background-color: #333;
+            border: 2px solid #444;
+            border-radius: 8px;
+            padding: 12px;
+            color: white;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .gr-button {
+            background-color: #4a90e2;  /* Light blue button */
+            color: white;
+            font-size: 16px;
+            border-radius: 8px;
+            border: none;
+            padding: 10px;
+            width: 200px;
+            margin-top: 20px;
+            cursor: pointer;
+            text-align: center;
+        }
+
+        .gr-button:hover {
+            background-color: #357ABD;  /* Darker blue on hover */
+        }
+
+        .gr-image {
+            border-radius: 12px;
+            border: 2px solid #444;
+            margin-top: 20px;
+            max-width: 100%;  /* Ensure image is responsive */
+        }
+
+        /* Custom CSS for Multicolor Spinner */
+        .gradio-spinner {
+            border: 4px solid transparent;
+            border-top: 4px solid #4a90e2;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite, color-change 1.5s ease-in-out infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        @keyframes color-change {
+            0% { border-top-color: #4a90e2; }
+            25% { border-top-color: #e91e63; }
+            50% { border-top-color: #ffeb3b; }
+            75% { border-top-color: #4caf50; }
+            100% { border-top-color: #4a90e2; }
+        }
+
+        /* Style the div containing the image */
+        .gr-image-container {
+            width: 50vw;
+            height: 50vh;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #333;  /* Dark background to highlight image */
+            border-radius: 12px;
+            margin-top: 20px;
+        }
+
+        .gr-image-container img {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+        }
+
+    """,
+)
+
+# Launch the Gradio app
+iface.launch()