Hugging Face's logo

Spaces:
openfree
/
webtoon
Paused

App Files Community
2
ginipick commited on
Commit
e45e9e6
ยท
verified ยท
1 Parent(s): ce15210

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +53 -51
app.py CHANGED
@@ -574,62 +574,64 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
574
  queue=True
575
  )
576
 
 
577
 
578
-
579
  # ์˜ˆ์‹œ ํ…Œ์ด๋ธ” ์ถ”๊ฐ€
580
- gr.HTML("""
 
581
  <div style="margin-top: 2em; padding: 1em;">
582
  <h2 style="text-align: center; color: #2196F3; margin-bottom: 1em;">Examples</h2>
583
- <table style="width: 100%; border-collapse: collapse; margin: auto; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
584
- <thead>
585
- <tr style="background: #f7f7f7;">
586
- <th style="padding: 1em; border: 1px solid #ddd;">Step</th>
587
- <th style="padding: 1em; border: 1px solid #ddd;">Example 1</th>
588
- <th style="padding: 1em; border: 1px solid #ddd;">Example 2</th>
589
- </tr>
590
- </thead>
591
- <tbody>
592
- <tr>
593
- <td style="padding: 1em; border: 1px solid #ddd;">Upload Image</td>
594
- <td style="padding: 1em; border: 1px solid #ddd;">
595
- <img src="file/aa1.png" style="max-width: 150px; height: auto;">
596
- </td>
597
- <td style="padding: 1em; border: 1px solid #ddd;">
598
- <img src="file/ab1.png" style="max-width: 150px; height: auto;">
599
- </td>
600
- </tr>
601
- <tr>
602
- <td style="padding: 1em; border: 1px solid #ddd;">Object Extract</td>
603
- <td style="padding: 1em; border: 1px solid #ddd;">text</td>
604
- <td style="padding: 1em; border: 1px solid #ddd;">sunglasses</td>
605
- </tr>
606
- <tr>
607
- <td style="padding: 1em; border: 1px solid #ddd;">Background Prompt</td>
608
- <td style="padding: 1em; border: 1px solid #ddd;">The Alps in Spring with Blossoming Flowers</td>
609
- <td style="padding: 1em; border: 1px solid #ddd;">ํ•˜์™€์ด beach</td>
610
- </tr>
611
- <tr>
612
- <td style="padding: 1em; border: 1px solid #ddd;">Object Cutoff Image</td>
613
- <td style="padding: 1em; border: 1px solid #ddd;">
614
- <img src="file/aa2.png" style="max-width: 150px; height: auto;">
615
- </td>
616
- <td style="padding: 1em; border: 1px solid #ddd;">
617
- <img src="file/ab2.png" style="max-width: 150px; height: auto;">
618
- </td>
619
- </tr>
620
- <tr>
621
- <td style="padding: 1em; border: 1px solid #ddd;">Result Image</td>
622
- <td style="padding: 1em; border: 1px solid #ddd;">
623
- <img src="file/aa3.png" style="max-width: 150px; height: auto;">
624
- </td>
625
- <td style="padding: 1em; border: 1px solid #ddd;">
626
- <img src="file/ab3.png" style="max-width: 150px; height: auto;">
627
- </td>
628
- </tr>
629
- </tbody>
630
- </table>
 
 
631
  </div>
632
  """)
633
-
634
  demo.queue(max_size=30, api_open=False)
635
  demo.launch()
 
574
  queue=True
575
  )
576
 
577
+ # UI ๊ตฌ์„ฑ ๋ถ€๋ถ„์˜ ๋งˆ์ง€๋ง‰์—์„œ ์˜ˆ์‹œ ํ…Œ์ด๋ธ” ๋ถ€๋ถ„์„ ์ˆ˜์ •
578
 
 
579
  # ์˜ˆ์‹œ ํ…Œ์ด๋ธ” ์ถ”๊ฐ€
580
+ examples_path = "examples" # ์˜ˆ์‹œ ์ด๋ฏธ์ง€๊ฐ€ ์žˆ๋Š” ๋””๋ ‰ํ† ๋ฆฌ
581
+ gr.HTML(f"""
582
  <div style="margin-top: 2em; padding: 1em;">
583
  <h2 style="text-align: center; color: #2196F3; margin-bottom: 1em;">Examples</h2>
584
+ <div class="examples-container" style="overflow-x: auto;">
585
+ <table style="width: 100%; border-collapse: collapse; margin: auto; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
586
+ <thead>
587
+ <tr style="background: #f7f7f7;">
588
+ <th style="padding: 1em; border: 1px solid #ddd; min-width: 120px;">Step</th>
589
+ <th style="padding: 1em; border: 1px solid #ddd; min-width: 200px;">Example 1</th>
590
+ <th style="padding: 1em; border: 1px solid #ddd; min-width: 200px;">Example 2</th>
591
+ </tr>
592
+ </thead>
593
+ <tbody>
594
+ <tr>
595
+ <td style="padding: 1em; border: 1px solid #ddd;">Upload Image</td>
596
+ <td style="padding: 1em; border: 1px solid #ddd; text-align: center;">
597
+ <img src="examples/aa1.png" style="max-width: 150px; height: auto;" alt="Example 1 Input">
598
+ </td>
599
+ <td style="padding: 1em; border: 1px solid #ddd; text-align: center;">
600
+ <img src="examples/ab1.png" style="max-width: 150px; height: auto;" alt="Example 2 Input">
601
+ </td>
602
+ </tr>
603
+ <tr>
604
+ <td style="padding: 1em; border: 1px solid #ddd;">Object Extract</td>
605
+ <td style="padding: 1em; border: 1px solid #ddd; text-align: center;">text</td>
606
+ <td style="padding: 1em; border: 1px solid #ddd; text-align: center;">sunglasses</td>
607
+ </tr>
608
+ <tr>
609
+ <td style="padding: 1em; border: 1px solid #ddd;">Background Prompt</td>
610
+ <td style="padding: 1em; border: 1px solid #ddd; text-align: center;">The Alps in Spring with Blossoming Flowers</td>
611
+ <td style="padding: 1em; border: 1px solid #ddd; text-align: center;">ํ•˜์™€์ด beach</td>
612
+ </tr>
613
+ <tr>
614
+ <td style="padding: 1em; border: 1px solid #ddd;">Object Cutoff Image</td>
615
+ <td style="padding: 1em; border: 1px solid #ddd; text-align: center;">
616
+ <img src="examples/aa2.png" style="max-width: 150px; height: auto;" alt="Example 1 Cutoff">
617
+ </td>
618
+ <td style="padding: 1em; border: 1px solid #ddd; text-align: center;">
619
+ <img src="examples/ab2.png" style="max-width: 150px; height: auto;" alt="Example 2 Cutoff">
620
+ </td>
621
+ </tr>
622
+ <tr>
623
+ <td style="padding: 1em; border: 1px solid #ddd;">Result Image</td>
624
+ <td style="padding: 1em; border: 1px solid #ddd; text-align: center;">
625
+ <img src="examples/aa3.png" style="max-width: 150px; height: auto;" alt="Example 1 Result">
626
+ </td>
627
+ <td style="padding: 1em; border: 1px solid #ddd; text-align: center;">
628
+ <img src="examples/ab3.png" style="max-width: 150px; height: auto;" alt="Example 2 Result">
629
+ </td>
630
+ </tr>
631
+ </tbody>
632
+ </table>
633
+ </div>
634
  </div>
635
  """)
 
636
  demo.queue(max_size=30, api_open=False)
637
  demo.launch()