Spaces:
Running
Running
Commit
·
d758ffc
1
Parent(s):
a383d0e
Refine Gradio interface
Browse files
app.py
CHANGED
|
@@ -0,0 +1,106 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import gradio as gr
|
| 2 |
+
import os
|
| 3 |
+
import tempfile
|
| 4 |
+
import cv2
|
| 5 |
+
import numpy as np
|
| 6 |
+
from screencoder.main import generate_html_for_demo
|
| 7 |
+
|
| 8 |
+
# Default Demo Examples
|
| 9 |
+
SAMPLE_IMAGES_DIR = "screencoder/data/input"
|
| 10 |
+
examples_data = []
|
| 11 |
+
if os.path.exists(SAMPLE_IMAGES_DIR):
|
| 12 |
+
sample_files = [f for f in sorted(os.listdir(SAMPLE_IMAGES_DIR)) if f.endswith(('.png', '.jpg', '.jpeg')) and not f.startswith('.')]
|
| 13 |
+
|
| 14 |
+
for filename in sample_files:
|
| 15 |
+
path = os.path.join(SAMPLE_IMAGES_DIR, filename)
|
| 16 |
+
prompt = f"Generate a modern UI based on the '{filename}' example, focusing on a clean and intuitive layout."
|
| 17 |
+
examples_data.append([path, prompt, path])
|
| 18 |
+
else:
|
| 19 |
+
print(f"Warning: Sample images directory not found at {SAMPLE_IMAGES_DIR}. Examples will be empty.")
|
| 20 |
+
|
| 21 |
+
def process_image_and_prompt(image_np, image_path_from_state, prompt):
|
| 22 |
+
final_image_path = ""
|
| 23 |
+
is_temp_file = False
|
| 24 |
+
|
| 25 |
+
if image_path_from_state:
|
| 26 |
+
final_image_path = image_path_from_state
|
| 27 |
+
print(f"Processing example image from: {final_image_path}")
|
| 28 |
+
elif image_np is not None:
|
| 29 |
+
is_temp_file = True
|
| 30 |
+
with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmp:
|
| 31 |
+
image_bgr = cv2.cvtColor(image_np, cv2.COLOR_RGB2BGR)
|
| 32 |
+
cv2.imwrite(tmp.name, image_bgr)
|
| 33 |
+
final_image_path = tmp.name
|
| 34 |
+
print(f"Processing uploaded image from temporary file: {final_image_path}")
|
| 35 |
+
else:
|
| 36 |
+
return "<html><body><h1 style='font-family: sans-serif; text-align: center; margin-top: 40px;'>Please provide an image.</h1></body></html>", ""
|
| 37 |
+
|
| 38 |
+
print(f"With prompt: '{prompt}'")
|
| 39 |
+
html_content = generate_html_for_demo(final_image_path, prompt)
|
| 40 |
+
|
| 41 |
+
if is_temp_file:
|
| 42 |
+
os.unlink(final_image_path)
|
| 43 |
+
|
| 44 |
+
return html_content, html_content
|
| 45 |
+
|
| 46 |
+
with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"), fill_height=True) as demo:
|
| 47 |
+
active_image_path_state = gr.State(value=examples_data[0][2] if examples_data else None)
|
| 48 |
+
|
| 49 |
+
gr.Markdown("# ScreenCoder: Screenshot to Code")
|
| 50 |
+
|
| 51 |
+
with gr.Row(equal_height=True):
|
| 52 |
+
with gr.Column(scale=1):
|
| 53 |
+
gr.Markdown("### Step 1: Provide an Image")
|
| 54 |
+
|
| 55 |
+
active_image = gr.Image(
|
| 56 |
+
type="numpy",
|
| 57 |
+
height=300,
|
| 58 |
+
value=examples_data[0][0] if examples_data else None
|
| 59 |
+
)
|
| 60 |
+
|
| 61 |
+
upload_button = gr.UploadButton("Click to Upload or Drag-and-Drop", file_types=["image"], variant="primary")
|
| 62 |
+
|
| 63 |
+
gr.Markdown("### Step 2: Write a Prompt (Optional)")
|
| 64 |
+
prompt_input = gr.Textbox(
|
| 65 |
+
label="Instructions",
|
| 66 |
+
placeholder="e.g., 'Make this a dark theme and change the text.'",
|
| 67 |
+
lines=3,
|
| 68 |
+
value=examples_data[0][1] if examples_data else "Based on the layout, please fill in appropriate English text and beautify the image blocks."
|
| 69 |
+
)
|
| 70 |
+
|
| 71 |
+
generate_btn = gr.Button("Generate HTML", variant="primary", scale=2)
|
| 72 |
+
|
| 73 |
+
with gr.Column(scale=2):
|
| 74 |
+
with gr.Tabs():
|
| 75 |
+
with gr.TabItem("Preview"):
|
| 76 |
+
html_preview = gr.HTML(label="Live Preview", elem_id="html-preview")
|
| 77 |
+
with gr.TabItem("Code"):
|
| 78 |
+
html_code_output = gr.Code(label="Generated Code", language="html", elem_id="html-code")
|
| 79 |
+
|
| 80 |
+
if examples_data:
|
| 81 |
+
gr.Examples(
|
| 82 |
+
examples=examples_data,
|
| 83 |
+
inputs=[active_image],
|
| 84 |
+
label="Click an example to try it out",
|
| 85 |
+
)
|
| 86 |
+
|
| 87 |
+
def handle_upload(uploaded_image_np):
|
| 88 |
+
"""On upload, update image, clear state, and set a generic prompt for user input."""
|
| 89 |
+
default_prompt = "Based on the layout, please fill in appropriate English text and beautify the image blocks."
|
| 90 |
+
return uploaded_image_np, None, default_prompt
|
| 91 |
+
|
| 92 |
+
upload_button.upload(
|
| 93 |
+
fn=handle_upload,
|
| 94 |
+
inputs=upload_button,
|
| 95 |
+
outputs=[active_image, active_image_path_state, prompt_input]
|
| 96 |
+
)
|
| 97 |
+
|
| 98 |
+
generate_btn.click(
|
| 99 |
+
fn=process_image_and_prompt,
|
| 100 |
+
inputs=[active_image, active_image_path_state, prompt_input],
|
| 101 |
+
outputs=[html_preview, html_code_output],
|
| 102 |
+
show_progress="full"
|
| 103 |
+
)
|
| 104 |
+
|
| 105 |
+
if __name__ == "__main__":
|
| 106 |
+
demo.launch()
|