fffiloni commited on
Commit
2480a5e
1 Parent(s): cf6bd94

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +33 -25
app.py CHANGED
@@ -17,7 +17,6 @@ def infer (image_in):
17
  return output_video_path, gr.Group.update(visible=True)
18
 
19
  css="""
20
-
21
  #col-container {
22
  max-width: 580px;
23
  margin-left: auto;
@@ -42,7 +41,8 @@ css="""
42
  justify-content: center;
43
  align-items: center;
44
  border-radius: 9999px !important;
45
- max-width: 13rem;
 
46
  }
47
  div#share-btn-container > div {
48
  flex-direction: row;
@@ -76,9 +76,15 @@ div#share-btn-container > div {
76
  #share-btn-container.hidden {
77
  display: none!important;
78
  }
 
 
 
 
 
79
  img[src*='#center'] {
80
  display: block;
81
- margin: auto;
 
82
  }
83
  .footer {
84
  margin-bottom: 45px;
@@ -90,7 +96,7 @@ img[src*='#center'] {
90
  font-size: .8rem;
91
  display: inline-block;
92
  padding: 0 10px;
93
- transform: translateY(10px);
94
  background: white;
95
  }
96
  .dark .footer {
@@ -99,7 +105,6 @@ img[src*='#center'] {
99
  .dark .footer > p {
100
  background: #0b0f19;
101
  }
102
-
103
  """
104
 
105
  with gr.Blocks(css=css) as demo:
@@ -109,15 +114,11 @@ with gr.Blocks(css=css) as demo:
109
  <h1 style="text-align: center;">
110
  MS Image2Video
111
  </h1>
112
-
113
  <p style="text-align: center;">
114
  Turn any image into a video ! <br />
115
  To use this demo, simply upload an image and hit the Submit button. <br />
116
  Don't forget to share your results with the <a href="https://huggingface.co/spaces/fffiloni/MS-Image2Video/discussions">Community</a> ;)
117
  </p>
118
-
119
- [![Duplicate this Space](https://huggingface.co/datasets/huggingface/badges/raw/main/duplicate-this-space-sm.svg#center)](https://huggingface.co/spaces/fffiloni/MS-Image2Video-cloning?duplicate=true)
120
-
121
 
122
  """)
123
 
@@ -127,30 +128,28 @@ with gr.Blocks(css=css) as demo:
127
  type = "filepath",
128
  elem_id = "image-in"
129
  )
 
130
 
131
- submit_btn = gr.Button(
132
- "Submit"
133
- )
134
 
135
  video_out = gr.Video(
136
  label = "Video Result",
137
  elem_id = "video-out"
138
  )
139
 
140
- with gr.Group(elem_id="share-btn-container", visible=False) as share_group:
141
- community_icon = gr.HTML(community_icon_html)
142
- loading_icon = gr.HTML(loading_icon_html)
143
- share_button = gr.Button("Share to community", elem_id="share-btn")
144
 
145
- gr.HTML("""
146
-
147
- <div class="footer">
148
- <p>
149
- MS-Image2Video Demo by 🤗 <a href="https://twitter.com/fffiloni" target="_blank">Sylvain Filoni</a>
150
- </p>
151
- </div>
152
 
153
- """)
 
 
 
154
 
155
  gr.Examples(
156
  examples = [
@@ -208,6 +207,15 @@ with gr.Blocks(css=css) as demo:
208
  cache_examples = True
209
  )
210
 
 
 
 
 
 
 
 
 
 
211
  submit_btn.click(
212
  fn = infer,
213
  inputs = [
@@ -221,4 +229,4 @@ with gr.Blocks(css=css) as demo:
221
 
222
  share_button.click(None, [], [], _js=share_js)
223
 
224
- demo.queue(max_size=6).launch()
 
17
  return output_video_path, gr.Group.update(visible=True)
18
 
19
  css="""
 
20
  #col-container {
21
  max-width: 580px;
22
  margin-left: auto;
 
41
  justify-content: center;
42
  align-items: center;
43
  border-radius: 9999px !important;
44
+ max-width: 15rem;
45
+ height: 36px;
46
  }
47
  div#share-btn-container > div {
48
  flex-direction: row;
 
76
  #share-btn-container.hidden {
77
  display: none!important;
78
  }
79
+ div#component-7 {
80
+ /* display: flex; */
81
+ align-items: center;
82
+ /* justify-content: center; */
83
+ }
84
  img[src*='#center'] {
85
  display: block;
86
+ margin: unset;
87
+ margin-top: 6px;
88
  }
89
  .footer {
90
  margin-bottom: 45px;
 
96
  font-size: .8rem;
97
  display: inline-block;
98
  padding: 0 10px;
99
+ transform: translateY(16px);
100
  background: white;
101
  }
102
  .dark .footer {
 
105
  .dark .footer > p {
106
  background: #0b0f19;
107
  }
 
108
  """
109
 
110
  with gr.Blocks(css=css) as demo:
 
114
  <h1 style="text-align: center;">
115
  MS Image2Video
116
  </h1>
 
117
  <p style="text-align: center;">
118
  Turn any image into a video ! <br />
119
  To use this demo, simply upload an image and hit the Submit button. <br />
120
  Don't forget to share your results with the <a href="https://huggingface.co/spaces/fffiloni/MS-Image2Video/discussions">Community</a> ;)
121
  </p>
 
 
 
122
 
123
  """)
124
 
 
128
  type = "filepath",
129
  elem_id = "image-in"
130
  )
131
+ with gr.Row():
132
 
133
+ submit_btn = gr.Button(
134
+ "Submit"
135
+ )
136
 
137
  video_out = gr.Video(
138
  label = "Video Result",
139
  elem_id = "video-out"
140
  )
141
 
142
+ with gr.Row():
 
 
 
143
 
144
+ with gr.Group(elem_id="share-btn-container", visible=False) as share_group:
145
+ community_icon = gr.HTML(community_icon_html)
146
+ loading_icon = gr.HTML(loading_icon_html)
147
+ share_button = gr.Button("Share with Community", elem_id="share-btn")
 
 
 
148
 
149
+ gr.Markdown("""
150
+
151
+ [![Duplicate this Space](https://huggingface.co/datasets/huggingface/badges/raw/main/duplicate-this-space-lg.svg#center)](https://huggingface.co/spaces/fffiloni/MS-Image2Video-cloning?duplicate=true)
152
+ """)
153
 
154
  gr.Examples(
155
  examples = [
 
207
  cache_examples = True
208
  )
209
 
210
+ gr.HTML("""
211
+
212
+ <div class="footer">
213
+ <p>
214
+ MS-Image2Video Demo by 🤗 <a href="https://twitter.com/fffiloni" target="_blank">Sylvain Filoni</a>
215
+ </p>
216
+ </div>
217
+ """)
218
+
219
  submit_btn.click(
220
  fn = infer,
221
  inputs = [
 
229
 
230
  share_button.click(None, [], [], _js=share_js)
231
 
232
+ demo.queue(max_size=6).launch()