Create app.py

app.py

@@ -0,0 +1,231 @@
+import gradio as gr
+import random
+import base64
+
+# Mad Lib Generator
+templates = [
+    "The {adjective} {noun} {verb} over the {adjective} {noun}.",
+    "In a {adjective} land, a {noun} and a {noun} went on a {adjective} adventure.",
+    "The {noun} {verb} {adverb} while the {adjective} {noun} watched in amazement."
+]
+
+parts_of_speech = {
+    "adjective": ["brave", "mysterious", "colorful", "gigantic", "tiny"],
+    "noun": ["wizard", "dragon", "knight", "castle", "forest"],
+    "verb": ["flew", "danced", "sang", "fought", "explored"],
+    "adverb": ["quickly", "silently", "gracefully", "fiercely", "carefully"]
+}
+
+def generate_mad_lib():
+    template = random.choice(templates)
+    for part in parts_of_speech:
+        while "{" + part + "}" in template:
+            template = template.replace("{" + part + "}", random.choice(parts_of_speech[part]), 1)
+    return template
+
+# Kaboom.js Breakout Game HTML
+kaboom_game_html = """
+<script src="https://kaboomjs.com/lib/0.6.0/kaboom.js"></script>
+<canvas id="game"></canvas>
+<script>
+kaboom({
+    global: true,
+    width: 800,
+    height: 600,
+    scale: 1,
+    debug: true,
+    canvas: document.getElementById("game")
+});
+
+loadSprite("paddle", "https://kaboomjs.com/pub/examples/breakout/paddle.png");
+loadSprite("ball", "https://kaboomjs.com/pub/examples/breakout/ball.png");
+loadSprite("brick", "https://kaboomjs.com/pub/examples/breakout/brick.png");
+loadSprite("brick2", "https://kaboomjs.com/pub/examples/breakout/brick2.png");
+
+scene("main", () => {
+    let score = 0;
+    let lifePoints = 100;
+    
+    const scoreLabel = add([
+        text(`Score: ${score}`),
+        pos(24, 24)
+    ]);
+    
+    const lifeLabel = add([
+        text(`Life: ${lifePoints}`),
+        pos(24, 48)
+    ]);
+
+    const paddle = add([
+        sprite("paddle"),
+        pos(width() / 2, height() - 48),
+        area(),
+        scale(3),
+        "paddle"
+    ]);
+
+    onKeyDown("left", () => {
+        paddle.move(-10, 0);
+    });
+
+    onKeyDown("right", () => {
+        paddle.move(10, 0);
+    });
+
+    function spawnBall() {
+        const ball = add([
+            sprite("ball"),
+            pos(width() / 2, height() - 64),
+            area(),
+            scale(0.5),
+            { vel: vec2(300, -300) },
+            "ball"
+        ]);
+
+        ball.onCollide("paddle", (paddle) => {
+            ball.vel = vec2(ball.vel.x, -Math.abs(ball.vel.y));
+        });
+
+        ball.onCollide("brick", (brick) => {
+            destroy(brick);
+            ball.vel = vec2(ball.vel.x, -ball.vel.y);
+            score += brick.points;
+            scoreLabel.text = `Score: ${score}`;
+        });
+
+        return ball;
+    }
+
+    let ball = spawnBall();
+
+    function spawnBricks() {
+        const brickTypes = [
+            { sprite: "brick", points: 1, health: 1 },
+            { sprite: "brick2", points: 2, health: 2 },
+        ];
+
+        for (let i = 0; i < 8; i++) {
+            for (let j = 0; j < 5; j++) {
+                const type = choose(brickTypes);
+                add([
+                    sprite(type.sprite),
+                    pos(i * 96 + 64, j * 32 + 64),
+                    area(),
+                    scale(2),
+                    "brick",
+                    {
+                        points: type.points,
+                        health: type.health
+                    }
+                ]);
+            }
+        }
+    }
+
+    spawnBricks();
+
+    onUpdate("ball", (ball) => {
+        if (ball.pos.y > height()) {
+            destroy(ball);
+            lifePoints -= 10;
+            lifeLabel.text = `Life: ${lifePoints}`;
+            if (lifePoints <= 0) {
+                go("gameOver", score);
+            } else {
+                ball = spawnBall();
+            }
+        }
+    });
+});
+
+scene("gameOver", (score) => {
+    add([
+        text(`Game Over!\nFinal Score: ${score}`),
+        pos(width() / 2, height() / 2),
+        origin("center")
+    ]);
+
+    onKeyPress("space", () => {
+        go("main");
+    });
+});
+
+start("main");
+</script>
+"""
+
+# A-Frame 3D Scene HTML
+aframe_scene_html = """
+<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
+<a-scene embedded style="height: 400px;">
+    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
+    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
+    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
+    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
+    <a-sky color="#ECECEC"></a-sky>
+    <a-entity id="rig" position="0 1.6 0">
+        <a-camera></a-camera>
+    </a-entity>
+    <a-entity id="model-container" position="0 0 -5"></a-entity>
+</a-scene>
+
+<script>
+function loadModel(url, fileType) {
+    const scene = document.querySelector('a-scene');
+    const modelContainer = document.getElementById('model-container');
+    
+    // Remove any existing model
+    while (modelContainer.firstChild) {
+        modelContainer.removeChild(modelContainer.firstChild);
+    }
+    
+    // Create new entity for the model
+    const modelEntity = document.createElement('a-entity');
+    if (fileType === 'obj') {
+        modelEntity.setAttribute('obj-model', `obj: ${url}`);
+    } else if (fileType === 'glb') {
+        modelEntity.setAttribute('gltf-model', url);
+    }
+    
+    modelEntity.setAttribute('scale', '0.5 0.5 0.5');
+    modelEntity.setAttribute('animation', 'property: rotation; to: 0 360 0; loop: true; dur: 10000');
+    
+    modelContainer.appendChild(modelEntity);
+}
+</script>
+"""
+
+def upload_model(file):
+    if file is not None:
+        file_extension = file.name.split('.')[-1].lower()
+        encoded_file = base64.b64encode(file.read()).decode()
+        data_url = f"data:application/octet-stream;base64,{encoded_file}"
+        load_model_js = f"""
+        <script>
+            loadModel("{data_url}", "{file_extension}");
+        </script>
+        """
+        return aframe_scene_html + load_model_js
+    return aframe_scene_html
+
+# Define the Gradio interface
+with gr.Blocks() as demo:
+    gr.Markdown("# Game Development and 3D Content Showcase")
+    
+    with gr.Tab("Breakout Game"):
+        gr.HTML(kaboom_game_html)
+    
+    with gr.Tab("Mad Lib Generator"):
+        mad_lib_button = gr.Button("Generate Mad Lib")
+        mad_lib_output = gr.Textbox(label="Generated Mad Lib")
+        mad_lib_button.click(generate_mad_lib, inputs=None, outputs=mad_lib_output)
+    
+    with gr.Tab("A-Frame 3D Scene"):
+        model_upload = gr.File(label="Upload 3D Model (OBJ or GLB)")
+        scene_output = gr.HTML(aframe_scene_html)
+        model_upload.upload(upload_model, inputs=model_upload, outputs=scene_output)
+
+# Launch the Gradio app
+if __name__ == "__main__":
+    demo.launch()