| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Gradio-Lite: Serverless Gradio with AI Features</title> |
| <meta name="description" content="Gradio-Lite: Serverless Gradio Running Entirely in Your Browser with AI Features"> |
| <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> |
| <style> |
| html, body { |
| margin: 0; |
| padding: 0; |
| height: 100%; |
| } |
| </style> |
| </head> |
| <body> |
| <gradio-lite> |
| <gradio-file name="app.py" entrypoint> |
| import gradio as gr |
| import numpy as np |
| from PIL import Image |
| from rembg import remove |
| import base64 |
| from io import BytesIO |
|
|
| # Placeholder for a very basic "image generation" - creates a colored square |
| def generate_image(color="red"): |
| if color == "red": |
| img_array = np.array([[[255, 0, 0] for _ in range(256)] for _ in range(256)], dtype=np.uint8) |
| elif color == "green": |
| img_array = np.array([[[0, 255, 0] for _ in range(256)] for _ in range(256)], dtype=np.uint8) |
| elif color == "blue": |
| img_array = np.array([[[0, 0, 255] for _ in range(256)] for _ in range(256)], dtype=np.uint8) |
| else: |
| img_array = np.array([[[255, 255, 255] for _ in range(256)] for _ in range(256)], dtype=np.uint8) |
| return Image.fromarray(img_array) |
|
|
| def remove_background(input_image): |
| if input_image is None: |
| return None |
| return remove(input_image) |
|
|
| # Placeholder for 3D conversion - just adds a border |
| def convert_to_3d(input_image): |
| if input_image is None: |
| return None |
| img = np.array(input_image) |
| height, width, _ = img.shape |
| border_size = 10 |
| new_img = np.zeros((height + 2 * border_size, width + 2 * border_size, 3), dtype=np.uint8) |
| new_img[border_size:height + border_size, border_size:width + border_size] = img |
| new_img[:border_size, :, :] = [150,150,150] |
| new_img[height + border_size:, :, :] = [150,150,150] |
| new_img[:, :border_size, :] = [150,150,150] |
| new_img[:, width + border_size:, :] = [150,150,150] |
| return Image.fromarray(new_img) |
|
|
| def pil_to_base64(pil_image): |
| buffered = BytesIO() |
| pil_image.save(buffered, format="PNG") |
| img_str = base64.b64encode(buffered.getvalue()).decode() |
| return f"data:image/png;base64,{img_str}" |
|
|
|
|
| with gr.Blocks() as demo: |
| with gr.Row(): |
| with gr.Column(): |
| color_dropdown = gr.Dropdown(choices=["red", "green", "blue", "white"], label="Image Color") |
| generate_button = gr.Button("Generate Image") |
| generated_image = gr.Image(label="Generated Image") |
| remove_bg_button = gr.Button("Remove Background") |
| removed_bg_image = gr.Image(label="Background Removed Image") |
| convert_3d_button = gr.Button("Convert to 3D") |
| converted_3d_image = gr.Image(label="3D Converted Image") |
| |
| generate_button.click(generate_image, inputs=[color_dropdown], outputs=[generated_image]) |
| remove_bg_button.click(remove_background, inputs=[generated_image], outputs=[removed_bg_image]) |
| convert_3d_button.click(convert_to_3d, inputs=[removed_bg_image], outputs=[converted_3d_image]) |
| |
| demo.launch() |
| </gradio-file> |
| <gradio-requirements> |
| # Same syntax as requirements.txt |
| pillow |
| rembg |
| numpy |
| </gradio-requirements> |
| </gradio-lite> |
| </body> |
| </html> |
