File size: 4,181 Bytes
e70bf91 baa776d e70bf91 baa776d e70bf91 baa776d e70bf91 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
import gradio as gr
import PIL
from PIL import Image
import os
import tempfile
import zipfile
import shutil
from pathlib import Path
# Define target sizes for different viewports
SIZES = [
(480, 423),
(696, 613),
(960, 846),
(1095, 965),
(1280, 1128),
(1440, 1269),
(1670, 1472),
(1870, 1648),
(2048, 1805)
]
def resize_image(img, target_size):
"""Resize image maintaining aspect ratio"""
img_copy = img.copy()
return img_copy.resize(target_size, PIL.Image.Resampling.LANCZOS)
def generate_html_snippet(image_path_prefix):
"""Generate HTML code snippet with srcset"""
srcset_items = [f"{image_path_prefix}-{w}x{h}.jpg {w}w" for w, h in SIZES]
srcset_str = ",\n ".join(srcset_items)
sizes_items = [
f"(max-width: {w}px) {w}px" for w, _ in SIZES[:-1]
] + [f"{SIZES[-1][0]}px"]
sizes_str = ",\n ".join(sizes_items)
# Use the middle size as default src
default_size = SIZES[4] # 1280x1128
html = f'''<!-- Responsive Image -->
<img
src="{image_path_prefix}-{default_size[0]}x{default_size[1]}.jpg"
srcset="
{srcset_str}
"
sizes="
{sizes_str}
"
alt="Your image description"
style="max-width: 100%; height: auto;"
>'''
return html
def process_image(input_image):
"""Main processing function"""
if input_image is None:
return None, None, "Please upload an image"
# Create temporary directory for processed images
temp_dir = tempfile.mkdtemp()
zip_path = os.path.join(temp_dir, "responsive_images.zip")
processed_paths = [] # Initialize the list outside try block
try:
# Open and process image
img = Image.open(input_image.name)
# Convert to RGB if necessary
if img.mode != 'RGB':
img = img.convert('RGB')
# Process each size
for width, height in SIZES:
resized = resize_image(img, (width, height))
output_path = os.path.join(temp_dir, f"image-{width}x{height}.jpg")
resized.save(output_path, "JPEG", quality=90)
processed_paths.append(output_path)
# Create zip file
with zipfile.ZipFile(zip_path, 'w') as zf:
for path in processed_paths:
zf.write(path, os.path.basename(path))
# Generate HTML snippet
html_snippet = generate_html_snippet("images/image")
return zip_path, html_snippet, "Processing completed successfully!"
except Exception as e:
if os.path.exists(zip_path):
try:
os.remove(zip_path)
except:
pass
return None, None, f"Error processing image: {str(e)}"
finally:
# Clean up temporary files except zip
for path in processed_paths:
try:
os.remove(path)
except:
pass
# Try to remove the temp directory if it's empty
try:
os.rmdir(temp_dir)
except:
pass
# Create Gradio interface
with gr.Blocks(title="Responsive Image Generator") as app:
gr.Markdown("""
# Responsive Image Generator
Upload an image to generate optimized versions for different viewport sizes.
You'll receive:
1. A ZIP file containing all sized versions
2. HTML code snippet with proper srcset attributes
""")
with gr.Row():
with gr.Column():
input_image = gr.Image(
label="Upload Original Image",
type="filepath"
)
process_btn = gr.Button("Process Image")
with gr.Column():
output_zip = gr.File(label="Download Processed Images")
output_html = gr.Code(
label="HTML Code Snippet",
language="html"
)
output_message = gr.Textbox(label="Status")
process_btn.click(
fn=process_image,
inputs=[input_image],
outputs=[output_zip, output_html, output_message]
)
# Launch the app
app.launch() |