app.py

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):
    # 生成唯一的ID以避免快取問題
    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()