Hugging Face's logo

Spaces:
WeShopAI
/
WeShopAI-Virtual-Try-On
Running

App Files Community
2
WeShop commited on
Commit
6ae6356
·
1 Parent(s): 3fba28e

Implemented better mobile display.

Browse files
Files changed (3) hide show
  1. app.py +14 -4
  2. assets/title.html +91 -0
  3. assets/title.md +0 -20
app.py CHANGED
@@ -314,19 +314,28 @@ css = """
314
  max-width: 100%;
315
  }
316
  #example-images .gallery-item {
317
- flex: 0 0 32%;
318
- max-width: 32%;
319
  box-sizing: border-box;
320
  display: flex;
321
  text-align: center;
322
  justify-content: center;
323
- height: 200px;
 
 
 
 
 
 
 
 
 
324
  }
325
  """
326
 
327
  with gr.Blocks(css=css) as WeShop:
328
  current_did = gr.State(value='')
329
- gr.HTML(load_description("assets/title.md"))
330
  with gr.Row():
331
  with gr.Column():
332
  gr.Markdown("#### Step 1: Upload a garment image")
@@ -389,6 +398,7 @@ with gr.Blocks(css=css) as WeShop:
389
  "assets/examples/result_06_03.png"],
390
  ],
391
  inputs=[main_image_input, background_image_input, output],
 
392
  )
393
  main_image_input.upload(
394
  fn=preprocess_image,
 
314
  max-width: 100%;
315
  }
316
  #example-images .gallery-item {
317
+ flex: 0 0 30%;
318
+ max-width: 30%;
319
  box-sizing: border-box;
320
  display: flex;
321
  text-align: center;
322
  justify-content: center;
323
+
324
+ }
325
+ @media (max-width: 767px) {
326
+ #example-res-images th {
327
+ font-size: 12px;
328
+ word-wrap: break-word;
329
+ word-break: break-word;
330
+ white-space: normal;
331
+ overflow-wrap: break-word;
332
+ }
333
  }
334
  """
335
 
336
  with gr.Blocks(css=css) as WeShop:
337
  current_did = gr.State(value='')
338
+ gr.HTML(load_description("assets/title.html"))
339
  with gr.Row():
340
  with gr.Column():
341
  gr.Markdown("#### Step 1: Upload a garment image")
 
398
  "assets/examples/result_06_03.png"],
399
  ],
400
  inputs=[main_image_input, background_image_input, output],
401
+ elem_id="example-res-images",
402
  )
403
  main_image_input.upload(
404
  fn=preprocess_image,
assets/title.html ADDED
@@ -0,0 +1,91 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>WeShopAI Virtual Try-On</title>
6
+ <style>
7
+ .title-text {
8
+ display: flex;
9
+ justify-content: center;
10
+ align-items: center;
11
+ text-align: center;
12
+ font-size: 40px;
13
+ }
14
+
15
+ .center-content {
16
+ display: flex;
17
+ justify-content: center;
18
+ align-items: center;
19
+ text-align: center;
20
+ }
21
+
22
+ .content-text {
23
+ text-align: center;
24
+ font-size: 14px;
25
+ padding-right: 10%;
26
+ padding-left: 10%;
27
+ }
28
+
29
+ @media (max-width: 767px) {
30
+ .title-text {
31
+ font-size: 30px;
32
+ }
33
+
34
+ .content-text {
35
+ font-size: 12px;
36
+ padding-right: 2%;
37
+ padding-left: 2%;
38
+ }
39
+
40
+ }
41
+
42
+ @media (max-width: 450px) {
43
+ .title-text {
44
+ font-size: 24px;
45
+ }
46
+
47
+ .content-text {
48
+ font-size: 12px;
49
+ padding-right: 0;
50
+ padding-left: 0;
51
+ }
52
+
53
+ }
54
+
55
+ @media (max-width: 360px) {
56
+ .title-text {
57
+ font-size: 22px;
58
+ }
59
+ }
60
+
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <div>
65
+ <div>
66
+ <div class="title-text">
67
+ <b>WeShopAI Virtual Try-On</b>
68
+ </div>
69
+ <br>
70
+ <div class="center-content">
71
+ <a href="https://www.weshop.com/"><img
72
+ src="https://img.shields.io/static/v1?label=Official Website&message=CN&color=red"></a> &ensp;
73
+ <a href="https://www.weshop.ai/"><img
74
+ src="https://img.shields.io/static/v1?label=Official Website&message=EN&color=blue"></a>
75
+ </div>
76
+ <br>
77
+ <div class="content-text">
78
+ Commercial clients are encouraged to evaluate the API capabilities offered at weshop.ai.
79
+ <a href="https://open.weshop.ai/authorization/apikey" style="font-weight: bold;" target="_blank">Get an API
80
+ Key</a> to explore further.
81
+ </div>
82
+ <br>
83
+ <div class="content-text">
84
+ <strong>Disclaimer: </strong>The WeShopAI-Virtual-Try-On Demo on HuggingFace space is free for trials. Any
85
+ solicitation for payment based on the free features we provide on HuggingFace Space is a fraudulent act.
86
+ Beware of scams and do not fall victim to deceit.
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </body>
91
+ </html>
assets/title.md DELETED
@@ -1,20 +0,0 @@
1
- <div>
2
- <div>
3
- <div style="display: flex; justify-content: center; align-items: center; text-align: center; font-size: 40px;">
4
- <b>WeShopAI Virtual Try-On</b>
5
- </div>
6
- <br>
7
- <div style="display: flex; justify-content: center; align-items: center; text-align: center;">
8
- <a href="https://www.weshop.com/"><img src="https://img.shields.io/static/v1?label=Official Website&message=CN&color=red"></a> &ensp;
9
- <a href="https://www.weshop.ai/"><img src="https://img.shields.io/static/v1?label=Official Website&message=EN&color=blue"></a>
10
- </div>
11
- <br>
12
- <div style="text-align: center; font-size: 14px; padding-right: 200px; padding-left: 200px;">
13
- Commercial clients are encouraged to evaluate the API capabilities offered at weshop.ai. <a href="https://open.weshop.ai/authorization/apikey" style="font-weight: bold;" target="_blank">Get an API Key</a> to explore further.
14
- </div>
15
- <br>
16
- <div style="display: flex; text-align: center; font-size: 14px; padding-right: 200px; padding-left: 200px;">
17
- <strong>Disclaimer: </strong>The WeShopAI-Virtual-Try-On Demo on HuggingFace space is free for trials. Any solicitation for payment based on the free features we provide on HuggingFace Space is a fraudulent act. Beware of scams and do not fall victim to deceit.
18
- </div>
19
- </div>
20
- </div>