Spaces:
Running
Running
Commit
Β·
13bb6b5
1
Parent(s):
0bdc733
update
Browse files
app.py
CHANGED
@@ -350,50 +350,50 @@ with gr.Blocks(css="""
|
|
350 |
color: #374151 !important;
|
351 |
}
|
352 |
""") as demo:
|
353 |
-
gr.Markdown("#
|
354 |
with gr.Row():
|
355 |
with gr.Column(scale=1):
|
356 |
-
gr.Markdown("##
|
357 |
active_image = gr.Image(type="filepath", height=400)
|
358 |
upload_button = gr.UploadButton("π Click to Upload", file_types=["image"], variant="primary")
|
359 |
|
360 |
-
gr.Markdown("##
|
361 |
-
with gr.Accordion("
|
362 |
-
sidebar_prompt = gr.Textbox(label="
|
363 |
-
header_prompt = gr.Textbox(label="
|
364 |
-
navigation_prompt = gr.Textbox(label="
|
365 |
-
main_content_prompt = gr.Textbox(label="
|
366 |
|
367 |
-
generate_btn = gr.Button("
|
368 |
|
369 |
with gr.Column(scale=2):
|
370 |
-
gr.Markdown("##
|
371 |
-
gr.Markdown("
|
372 |
with gr.Tabs():
|
373 |
-
with gr.TabItem("
|
374 |
with gr.Row():
|
375 |
scale_slider = gr.Slider(0.2, 1.5, value=0.55, step=0.05, label="π Zoom")
|
376 |
width_slider = gr.Slider(400, 2000, value=1920, step=50, label="π Canvas Width (px)")
|
377 |
height_slider = gr.Slider(300, 1200, value=1080, step=50, label="π Canvas Height (px)")
|
378 |
|
379 |
html_preview = gr.HTML(label="Rendered HTML", show_label=False)
|
380 |
-
with gr.TabItem("
|
381 |
with gr.Row():
|
382 |
scale_slider_with_placeholder = gr.Slider(0.2, 1.5, value=0.55, step=0.05, label="π Zoom")
|
383 |
width_slider_with_placeholder = gr.Slider(400, 2000, value=1920, step=100, label="π Canvas Width (px)")
|
384 |
height_slider_with_placeholder = gr.Slider(300, 1200, value=1080, step=50, label="π Canvas Height (px)")
|
385 |
|
386 |
html_preview_with_placeholder = gr.HTML(label="Rendered HTML", show_label=False)
|
387 |
-
with gr.TabItem("
|
388 |
html_code_output = gr.Code(label="Generated HTML", language="html")
|
389 |
-
|
390 |
-
|
391 |
|
392 |
gr.Examples(
|
393 |
examples=example_rows,
|
394 |
inputs=[active_image, sidebar_prompt, header_prompt, navigation_prompt, main_content_prompt],
|
395 |
cache_examples=False,
|
396 |
-
label="
|
397 |
)
|
398 |
|
399 |
# State to hold the HTML content for each preview tab
|
|
|
350 |
color: #374151 !important;
|
351 |
}
|
352 |
""") as demo:
|
353 |
+
gr.Markdown("# ScreenCoder: Screenshot to Code")
|
354 |
with gr.Row():
|
355 |
with gr.Column(scale=1):
|
356 |
+
gr.Markdown("## Step 1: Provide an Image")
|
357 |
active_image = gr.Image(type="filepath", height=400)
|
358 |
upload_button = gr.UploadButton("π Click to Upload", file_types=["image"], variant="primary")
|
359 |
|
360 |
+
gr.Markdown("## Step 2: Write Prompts (Optional)")
|
361 |
+
with gr.Accordion("Component-specific Prompts", open=False):
|
362 |
+
sidebar_prompt = gr.Textbox(label="Sidebar", placeholder="Instructions for the sidebar...")
|
363 |
+
header_prompt = gr.Textbox(label="Header", placeholder="Instructions for the header...")
|
364 |
+
navigation_prompt = gr.Textbox(label="Navigation", placeholder="Instructions for the navigation...")
|
365 |
+
main_content_prompt = gr.Textbox(label="Main Content", placeholder="Instructions for the main content...")
|
366 |
|
367 |
+
generate_btn = gr.Button("Generate HTML", variant="primary")
|
368 |
|
369 |
with gr.Column(scale=2):
|
370 |
+
gr.Markdown("## Preview Area")
|
371 |
+
gr.Markdown("**Tips**: \n- Use the sliders below to adjust the preview size and zoom level for better viewing experience. \n- Adjust the page's viewing angle by swiping up, down, left, or right.")
|
372 |
with gr.Tabs():
|
373 |
+
with gr.TabItem("Preview"):
|
374 |
with gr.Row():
|
375 |
scale_slider = gr.Slider(0.2, 1.5, value=0.55, step=0.05, label="π Zoom")
|
376 |
width_slider = gr.Slider(400, 2000, value=1920, step=50, label="π Canvas Width (px)")
|
377 |
height_slider = gr.Slider(300, 1200, value=1080, step=50, label="π Canvas Height (px)")
|
378 |
|
379 |
html_preview = gr.HTML(label="Rendered HTML", show_label=False)
|
380 |
+
with gr.TabItem("Preview With Placeholder"):
|
381 |
with gr.Row():
|
382 |
scale_slider_with_placeholder = gr.Slider(0.2, 1.5, value=0.55, step=0.05, label="π Zoom")
|
383 |
width_slider_with_placeholder = gr.Slider(400, 2000, value=1920, step=100, label="π Canvas Width (px)")
|
384 |
height_slider_with_placeholder = gr.Slider(300, 1200, value=1080, step=50, label="π Canvas Height (px)")
|
385 |
|
386 |
html_preview_with_placeholder = gr.HTML(label="Rendered HTML", show_label=False)
|
387 |
+
with gr.TabItem("Code"):
|
388 |
html_code_output = gr.Code(label="Generated HTML", language="html")
|
389 |
+
|
390 |
+
download_button = gr.Button("Download Package", visible=False, variant="secondary")
|
391 |
|
392 |
gr.Examples(
|
393 |
examples=example_rows,
|
394 |
inputs=[active_image, sidebar_prompt, header_prompt, navigation_prompt, main_content_prompt],
|
395 |
cache_examples=False,
|
396 |
+
label="Examples"
|
397 |
)
|
398 |
|
399 |
# State to hold the HTML content for each preview tab
|