app.py

import gradio as gr
import os
import shutil
import uuid
import subprocess
from threading import Timer
from functools import partial
import time

from gradio_motioncanvasplayer import MotionCanvasPlayer

# Just some example project that servers as a placholder in the beginning
example_project_path = "https://prathje-gradio-motioncanvasplayer.hf.space/gradio_api/file=/home/user/app/public/project-3.17.2.js"

def slow_echo(message, history):
    for i in range(len(message)):
        time.sleep(0.3)
        yield "You typed: " + message[: i+1]

gr.ChatInterface(
    fn=slow_echo, 
    type="messages"
).launch()

def load_example(example):
    return example['project_path'], example['code'], ""

with gr.Blocks(theme=gr.themes.Monochrome()) as app:
    gr.Markdown("# Motion Canvas Agent")
    gr.Markdown("Leverage the power of AI and Motion Canvas to create animations using TypeScript.")
    with gr.Row():
        with gr.Column():
            gr.Markdown("## Chat")
            chat = gr.ChatInterface(fn=slow_echo, type="messages")

        
            gr.Markdown("### TypeScript Code for Your Scene")
            code = gr.Code(value="", language="typescript")
            logs = gr.Textbox(value="", label="Build Logs", interactive=False)

        with gr.Column():
            gr.Markdown("## Preview")
            player = MotionCanvasPlayer(example_project_path, auto=True, quality=0.5, width=1920, height=1080, variables="{}")

if __name__ == "__main__":
    # Todo: In the future we could allow to use this as an MCP server, but right now, we need the preview to be available.
    app.launch(mcp_server=False, strict_cors=False)