Spaces:
Paused
Paused
| import gradio as gr | |
| from share_btn import community_icon_html, loading_icon_html, share_js | |
| from modelscope.pipelines import pipeline | |
| from modelscope.outputs import OutputKeys | |
| pipe = pipeline(task='image-to-video', model='damo/Image-to-Video', model_revision='v1.1.0') | |
| def infer (image_in): | |
| # IMG_PATH: your image path (url or local file) | |
| IMG_PATH = image_in | |
| output_video_path = pipe(IMG_PATH, output_video='output.mp4')[OutputKeys.OUTPUT_VIDEO] | |
| print(output_video_path) | |
| return output_video_path, gr.Group.update(visible=True) | |
| css=""" | |
| #col-container { | |
| max-width: 580px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .animate-spin { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| #share-btn-container { | |
| display: flex; | |
| padding-left: 0.5rem !important; | |
| padding-right: 0.5rem !important; | |
| background-color: #000000; | |
| justify-content: center; | |
| align-items: center; | |
| border-radius: 9999px !important; | |
| max-width: 15rem; | |
| height: 36px; | |
| } | |
| div#share-btn-container > div { | |
| flex-direction: row; | |
| background: black; | |
| align-items: center; | |
| } | |
| #share-btn-container:hover { | |
| background-color: #060606; | |
| } | |
| #share-btn { | |
| all: initial; | |
| color: #ffffff; | |
| font-weight: 600; | |
| cursor:pointer; | |
| font-family: 'IBM Plex Sans', sans-serif; | |
| margin-left: 0.5rem !important; | |
| padding-top: 0.5rem !important; | |
| padding-bottom: 0.5rem !important; | |
| right:0; | |
| } | |
| #share-btn * { | |
| all: unset; | |
| } | |
| #share-btn-container div:nth-child(-n+2){ | |
| width: auto !important; | |
| min-height: 0px !important; | |
| } | |
| #share-btn-container .wrap { | |
| display: none !important; | |
| } | |
| #share-btn-container.hidden { | |
| display: none!important; | |
| } | |
| div#component-7 { | |
| /* display: flex; */ | |
| align-items: center; | |
| /* justify-content: center; */ | |
| } | |
| img[src*='#center'] { | |
| display: block; | |
| margin: unset; | |
| margin-top: 6px; | |
| } | |
| .footer { | |
| margin-bottom: 45px; | |
| margin-top: 10px; | |
| text-align: center; | |
| border-bottom: 1px solid #e5e5e5; | |
| } | |
| .footer > p { | |
| font-size: .8rem; | |
| display: inline-block; | |
| padding: 0 10px; | |
| transform: translateY(16px); | |
| background: white; | |
| } | |
| .dark .footer { | |
| border-color: #303030; | |
| } | |
| .dark .footer > p { | |
| background: #0b0f19; | |
| } | |
| """ | |
| with gr.Blocks(css=css) as demo: | |
| with gr.Column(elem_id="col-container"): | |
| gr.Markdown(""" | |
| <h1 style="text-align: center;"> | |
| MS Image2Video | |
| </h1> | |
| <p style="text-align: center;"> | |
| Turn any image into a video ! <br /> | |
| To use this demo, simply upload an image and hit the Submit button. <br /> | |
| Don't forget to share your results with the <a href="https://huggingface.co/spaces/fffiloni/MS-Image2Video/discussions">Community</a> ;) | |
| </p> | |
| """) | |
| image_in = gr.Image( | |
| label = "Source Image", | |
| source = "upload", | |
| type = "filepath", | |
| elem_id = "image-in" | |
| ) | |
| with gr.Row(): | |
| submit_btn = gr.Button( | |
| "Submit" | |
| ) | |
| video_out = gr.Video( | |
| label = "Video Result", | |
| elem_id = "video-out" | |
| ) | |
| with gr.Row(): | |
| with gr.Group(elem_id="share-btn-container", visible=False) as share_group: | |
| community_icon = gr.HTML(community_icon_html) | |
| loading_icon = gr.HTML(loading_icon_html) | |
| share_button = gr.Button("Share with Community", elem_id="share-btn") | |
| gr.Markdown(""" | |
| [](https://huggingface.co/spaces/fffiloni/MS-Image2Video-cloning?duplicate=true) | |
| """) | |
| gr.Examples( | |
| examples = [ | |
| [ | |
| "./examples/renaissance.png", | |
| ], | |
| [ | |
| "./examples/reverie.png", | |
| ], | |
| [ | |
| "./examples/animals_firecamp.png", | |
| ], | |
| [ | |
| "./examples/adventurer.png", | |
| ], | |
| [ | |
| "./examples/anime_girl.png", | |
| ], | |
| [ | |
| "./examples/hopper_nighthawks.jpeg", | |
| ], | |
| [ | |
| "./examples/joconde.png", | |
| ], | |
| [ | |
| "./examples/medieval_barmaid.png", | |
| ], | |
| [ | |
| "./examples/old_ladies.jpeg", | |
| ], | |
| [ | |
| "./examples/snow_white.png", | |
| ], | |
| [ | |
| "./examples/violonist.png", | |
| ], | |
| [ | |
| "./examples/voilier.jpeg", | |
| ], | |
| [ | |
| "./examples/wet_coast.jpeg", | |
| ], | |
| [ | |
| "./examples/winter_out.png", | |
| ], | |
| ], | |
| fn = infer, | |
| inputs = [ | |
| image_in | |
| ], | |
| outputs = [ | |
| video_out, | |
| share_group | |
| ], | |
| cache_examples = True | |
| ) | |
| gr.HTML(""" | |
| <div class="footer"> | |
| <p> | |
| MS-Image2Video Demo by 🤗 <a href="https://twitter.com/fffiloni" target="_blank">Sylvain Filoni</a> | |
| </p> | |
| </div> | |
| """) | |
| submit_btn.click( | |
| fn = infer, | |
| inputs = [ | |
| image_in | |
| ], | |
| outputs = [ | |
| video_out, | |
| share_group | |
| ] | |
| ) | |
| share_button.click(None, [], [], _js=share_js) | |
| demo.queue(max_size=6).launch() |