Working examples

app.py

@@ -5,6 +5,7 @@ import shutil
 import uuid
 import subprocess
 from threading import Timer
+from functools import partial
 
 from gradio_motioncanvasplayer import MotionCanvasPlayer
 
@@ -84,32 +85,66 @@ def build_project(code):
          # cleanup tmp dir
         shutil.rmtree(tmp_dir)
 
-    
-
-    # generate a random uuid for the project
-    # copy whole MC_PROJECT_DIR to a random tmp dir
-    # write code to scene.ts
-    # run npm run build
-    # return [logs, project_api_path]
-    # if successful copy MC_PROJECT_DIR/dist/project.js to get_local_path(id)
-    # always: log the output to logs
-    # always delete the tmp dir after the build is done
-
-    
-
-with gr.Blocks() as demo:
+def load_example_code(example_name):
+    return open(os.path.join(os.path.dirname(__file__), "examples", example_name + ".tsx")).read()
+
+def build_example(example_name):
+    iterator = build_project(load_example_code(example_name))
+    last = next(iterator)
+    for last in iterator:
+        continue
+
+    path = last[0]
+    assert path
+    return path
+
+print("Building examples...")
+EXAMPLES = [
+    {
+        "name": "Gradio + Motion Canvas",
+        "code": load_example_code("gradio-motion-canvas-example"),
+        "project_path": build_example("gradio-motion-canvas-example")
+    },
+    {
+        "name": "Blur",
+        "code": load_example_code("motion-canvas-blur"),
+        "project_path": build_example("motion-canvas-blur")
+    },
+    {
+        "name": "Latex", 
+        "code": load_example_code("latex"),
+        "project_path": build_example("latex")
+    },
+    {
+        "name": "Code",
+        "code": load_example_code("code"),
+        "project_path": build_example("code")
+    },
+
+]
+print("Examples built!")
+
+def load_example(example):
+    return example['project_path'], example['code'], ""
+
+
+with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
     gr.Markdown("# Motion Canvas MCP Server")
     with gr.Row():
         with gr.Column():
-            gr.Markdown("## TS Input for scene.ts")
-            code = gr.Code(language="typescript")
-            submit = gr.Button("Build")
+            gr.Markdown("## TS Input for Your Scene")
+            gr.Markdown("Leverage the power of Motion Canvas to create your own animations using TypeScript.")
+            code = gr.Code(value=EXAMPLES[0]['code'], language="typescript")
+            submit = gr.Button("Build", variant="primary")
             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="{}")
-            
+            player = MotionCanvasPlayer(EXAMPLES[0]['project_path'], auto=True, quality=0.5, width=1920, height=1080, variables="{}")
 
+            for ex in EXAMPLES:
+                btn = gr.Button("Load Example: " + ex["name"], variant="secondary")
+                btn.click(partial(load_example, ex), outputs=[player, code, logs])
+    
     submit.click(build_project, inputs=[code], outputs=[player, logs], api_name="build_project")
 
 if __name__ == "__main__":

examples/code.tsx

@@ -0,0 +1,36 @@
+import {makeScene2D, Code} from '@motion-canvas/2d';
+import {all, createRef, DEFAULT, waitFor} from '@motion-canvas/core';
+
+// Visit https://motioncanvas.io/docs/code/ for more information.
+export default makeScene2D(function* (view) {
+  view.fill('white');  
+  const code = createRef<Code>();
+
+  view.add(
+    <Code
+      ref={code}
+      fontSize={28}
+      fontFamily={'JetBrains Mono, monospace'}
+      fill={"black"}
+      offsetX={-1}
+      x={-400}
+      code={'const number = 7;'}
+    />,
+  );
+
+  yield* waitFor(0.6);
+  yield* all(
+    code().code.replace(code().findFirstRange('number'), 'variable', 0.6),
+    code().code.prepend(0.6)`function example() {\n  `,
+    code().code.append(0.6)`\n}`,
+  );
+
+  yield* waitFor(0.6);
+  yield* code().selection(code().findFirstRange('variable'), 0.6);
+
+  yield* waitFor(0.6);
+  yield* all(
+    code().code('const number = 7;', 0.6),
+    code().selection(DEFAULT, 0.6),
+  );
+});

examples/gradio-motion-canvas-example.tsx

@@ -0,0 +1,64 @@
+import {makeScene2D, Img, Layout, Icon} from '@motion-canvas/2d';
+import {createRef, easeOutCubic, spring, all, waitFor} from '@motion-canvas/core';
+
+let gradioLogoSvg = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='576'%20height='576'%20viewBox='0%200%20576%20576'%20fill='none'%3e%3cpath%20d='M287.5%20229L86%20344.5L287.5%20460L489%20344.5L287.5%20229Z'%20stroke='url(%23paint0_linear_102_7)'%20stroke-width='59'%20stroke-linejoin='round'/%3e%3cpath%20d='M287.5%20116L86%20231.5L287.5%20347L489%20231.5L287.5%20116Z'%20stroke='url(%23paint1_linear_102_7)'%20stroke-width='59'%20stroke-linejoin='round'/%3e%3cpath%20d='M86%20344L288%20229'%20stroke='url(%23paint2_linear_102_7)'%20stroke-width='59'%20stroke-linejoin='bevel'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_102_7'%20x1='60'%20y1='341'%20x2='429.5'%20y2='344'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23F9D100'/%3e%3cstop%20offset='1'%20stop-color='%23F97700'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_102_7'%20x1='513.5'%20y1='231'%20x2='143.5'%20y2='231'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23F9D100'/%3e%3cstop%20offset='1'%20stop-color='%23F97700'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_102_7'%20x1='60'%20y1='344'%20x2='428.987'%20y2='341.811'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23F9D100'/%3e%3cstop%20offset='1'%20stop-color='%23F97700'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"
+
+export default makeScene2D(function* (view) {
+  view.fill('white'); // set the background of this scene
+
+  const gradioLogo = createRef<Img>();
+  const addIcon = createRef<Icon>();
+  const motionCanvasLogo = createRef<Img>();
+  const plusIcon = createRef<Icon>();
+  const heartIcon = createRef<Icon>();
+
+  view.add(
+    <Layout layout direction={'row'} size={'100%'} padding={100} gap={0} alignItems={'center'} justifyContent={'center'}>
+      <Img ref={gradioLogo} src={gradioLogoSvg} width='25%' offset={[1,2]}/>
+      <Icon ref={addIcon} icon="material-symbols-light:add-2-rounded" color="#404040" width='20%' margin={-10} />
+      <Img ref={motionCanvasLogo} src="https://motioncanvas.io/img/logo.svg" width='25%'  margin={-10} />
+      <Icon ref={plusIcon} icon="material-symbols-light:equal" color="#404040" width='20%' margin={-30} />
+      <Icon ref={heartIcon} icon="material-symbols-light:favorite" color="#ff6470" width='25%' />
+    </Layout>
+  );
+
+  let initalMargin = view.size().y*1.5;
+  gradioLogo().margin.bottom(initalMargin);
+  addIcon().margin.bottom(initalMargin);
+  motionCanvasLogo().margin.bottom(initalMargin);
+  plusIcon().margin.bottom(initalMargin);
+  heartIcon().margin.bottom(initalMargin);
+
+  const MySpring = {
+    mass: 0.04,
+    stiffness: 10.0,
+    damping: 0.85,
+    initialVelocity: 8.0,
+  };
+
+  let springInAnim = function(obj : any) {
+    return spring(MySpring, initalMargin, 0, 5, value => {
+      obj().margin.bottom(value);
+    });
+  };
+
+  yield* springInAnim(gradioLogo);
+  yield* springInAnim(addIcon);
+  yield* springInAnim(motionCanvasLogo);
+  yield* springInAnim(plusIcon);
+  yield* springInAnim(heartIcon);
+
+  yield * waitFor(1);
+
+  // let them fade away
+  yield* all(
+    gradioLogo().opacity(0, 1, easeOutCubic),
+    addIcon().opacity(0, 1, easeOutCubic),
+    motionCanvasLogo().opacity(0, 1, easeOutCubic),
+    plusIcon().opacity(0, 1, easeOutCubic),
+    heartIcon().opacity(0, 1, easeOutCubic),
+  );
+
+  yield * waitFor(1);
+
+});

examples/latex.tsx

@@ -0,0 +1,12 @@
+import {Latex, makeScene2D} from '@motion-canvas/2d';
+import {createRef, waitFor} from '@motion-canvas/core';
+
+// Visit https://motioncanvas.io/docs/latex/ for more information.
+export default makeScene2D(function* (view) {
+  view.fill('white');
+  const tex = createRef<Latex>();
+  view.add(<Latex ref={tex} tex="{{1}} + {{2}}" fill="black" />);
+
+  yield* waitFor(0.5);
+  yield* tex().tex(['2', '+', '3', '+', '4'], 1);
+});

examples/motion-canvas-blur.tsx

@@ -0,0 +1,17 @@
+import {Img, makeScene2D} from '@motion-canvas/2d';
+import {createRef} from '@motion-canvas/core';
+
+// Visit https://motioncanvas.io/docs for more information.
+export default makeScene2D(function* (view) {
+  view.fill('#141414');
+
+  const iconRef = createRef<Img>();
+  yield view.add(<Img src={'https://motioncanvas.io/img/logo_dark.svg'} size={500} ref={iconRef} />);
+  // Modification happens by accessing the `filters` property.
+  // Individual filters don't need to be initialized. If a filter you set doesn't
+  // exists, it will be automatically created and added to the list of filters.
+  // If you have multiple filters of the same type, this will only
+  // modify the first instance (you can use the array method for more control).
+  yield* iconRef().filters.blur(10, 1);
+  yield* iconRef().filters.blur(0, 1);
+});

examples/simple-sphere.tsx

@@ -0,0 +1,23 @@
+import {makeScene2D, Circle} from '@motion-canvas/2d';
+import {all, createRef} from '@motion-canvas/core';
+
+// Visit https://motioncanvas.io/docs for more information.
+export default makeScene2D(function* (view) {
+  const myCircle = createRef<Circle>();
+
+  view.add(
+    <Circle
+      ref={myCircle}
+      // try changing these properties:
+      x={-300}
+      width={140}
+      height={140}
+      fill="#e13238"
+    />,
+  );
+
+  yield* all(
+    myCircle().position.x(300, 1).to(-300, 1),
+    myCircle().fill('#e6a700', 1).to('#e13238', 1),
+  );
+});