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("""
            
                [![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)
            """)

        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()