| import gradio as gr |
| import random |
|
|
| initial_p5js_code = """ |
| function setup() { |
| createCanvas(800, 400); |
| } |
| |
| function draw() { |
| // 左眼視圖 (0, 0, 400, 400) |
| push(); |
| translate(0, 0); |
| background(200); |
| fill(255, 0, 0); |
| ellipse(200, 200, 100, 100); |
| pop(); |
| |
| // 右眼視圖 (400, 0, 400, 400) |
| push(); |
| translate(400, 0); |
| background(200); |
| fill(255, 0, 0); |
| ellipse(200, 200, 100, 100); |
| pop(); |
| } |
| """ |
|
|
| html_template = """ |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> |
| <style> |
| html, body { |
| margin: 0; |
| padding: 0; |
| } |
| </style> |
| </head> |
| <body> |
| <script> |
| {p5js_code} |
| </script> |
| </body> |
| </html> |
| """ |
|
|
| def update_p5js(code): |
| |
| unique_id = random.randint(1, 1000000) |
| html_content = html_template.format(p5js_code=code) |
| return html_content |
|
|
| interface = gr.Interface( |
| fn=update_p5js, |
| inputs=gr.Code(language="javascript", label="P5.js Code", value=initial_p5js_code), |
| outputs=gr.HTML(label="VR Preview"), |
| title="P5.js VR Viewer", |
| description="輸入P5.js程式碼來創建VR左右眼畫面。畫布寬度為800px（每隻眼睛400px）、高度為400px。" |
| ) |
|
|
| if __name__ == "__main__": |
| interface.launch() |
