add example extraction

Dockerfile

@@ -25,11 +25,17 @@ RUN npm install
 RUN npm run build
 
 # clone examples
-ENV MC_EXAMPLE_DIR=/motion-canvas/examples
-RUN git clone https://github.com/motion-canvas/examples /motion-canvas/examples
+#ENV MC_EXAMPLE_PROJECTS_DIR=/motion-canvas/examples
+#RUN git clone https://github.com/motion-canvas/examples /motion-canvas/example-projects
+
+ENV MC_DIR=/motion-canvas/motion-canvas
+ENV MC_DOCS_DIR=/motion-canvas/motion-canvas/packages/docs
+RUN git clone https://github.com/motion-canvas/motion-canvas /motion-canvas/motion-canvas
+
+ENV MC_EXAMPLE_SCENES_DIR=/motion-canvas/motion-canvas/packages/examples/src/scenes
 
 # docs/docs and docs/api should be interesting resources
-ENV MC_DOCS_DIR=/motion-canvas/docs
+
 RUN git clone https://github.com/motion-canvas/motion-canvas.github.io /motion-canvas/docs
 
 
@@ -39,6 +45,9 @@ RUN pip install --no-cache-dir gradio[mcp] gradio_motioncanvasplayer
 COPY . .
 
 RUN mkdir -p /app/public
+ENV MC_EXAMPLES_MD_FILE=/app/public/examples.md
+RUN python extract_examples.py $MC_EXAMPLES_MD_FILE
+
 
 RUN useradd -m -u 1000 user
 

app.py

@@ -69,7 +69,7 @@ def build_project(code):
         # Check for errors
         stderr_output = process.stderr.read()
         if stderr_output:
-            acc_logs += "\n" + "Error building project: " + stderr_output
+            acc_logs += "\n" + stderr_output
             
         # check if the build was successful
         if process.returncode != 0:
@@ -144,7 +144,13 @@ with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
             for ex in EXAMPLES:
                 btn = gr.Button("Load Example: " + ex["name"], variant="secondary")
                 btn.click(partial(load_example, ex), outputs=[player, code, logs], api_name=False)
-    
+            
+            with gr.Accordion("Show Example Scenes"):
+                example_md_content = open(os.path.join(os.path.dirname(__file__), "public", "examples.md")).read()
+                example_md = gr.Markdown(example_md_content, render=True)
+                load_example_md_btn = gr.Button("Load Example", variant="secondary", render=False)
+                load_example_md_btn.click(lambda: example_md_content, outputs=[example_md], api_name="examples")
+
     submit.click(build_project, inputs=[code], outputs=[player, logs], api_name="build")
 
 if __name__ == "__main__":

extract_examples.py

@@ -0,0 +1,23 @@
+import os
+import glob
+from pathlib import Path
+
+assert os.environ['MC_EXAMPLE_SCENES_DIR']
+assert os.environ['MC_EXAMPLES_MD_FILE']
+
+with open(os.environ['MC_EXAMPLES_MD_FILE'], "w") as f:
+
+    f.write(f"# Examples for Motion Canvas Scenes in TypeScript\n")
+
+    for filepath in glob.iglob(os.environ['MC_EXAMPLE_SCENES_DIR'] + '/**/*.tsx', recursive=True):
+        name = Path(filepath).stem
+
+        f.write(f"\n\n## {name}\n")
+        
+        # read the file
+        with open(filepath, 'r') as scene_file:
+            content = scene_file.read()
+
+        f.write(f"```tsx\n")    
+        f.write(content)
+        f.write(f"```\n")