Jimmyzheng-10 commited on
Commit
13bb6b5
Β·
1 Parent(s): 0bdc733
Files changed (1) hide show
  1. app.py +17 -17
app.py CHANGED
@@ -350,50 +350,50 @@ with gr.Blocks(css="""
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**: - Use the sliders below to adjust the preview size and zoom level for better viewing experience. - You can also 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
 
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