Spaces:

awacke1
/

GameDevelopmentSonnet3.5-AIPP

Running on CPU Upgrade

App Files Files Community

awacke1 commited on Jun 26, 2024

Commit

1a22f42

verified ·

1 Parent(s): f5cbf6d

Update app.py

Browse files

Files changed (1) hide show

app.py +159 -82

app.py CHANGED Viewed

@@ -1,91 +1,168 @@
 import streamlit as st
-import random
-from game_dev_snippet import run_game
-from mad_lib_generator import generate_mad_lib
-st.set_page_config(layout="wide")
-st.title("Game Development and Creative Writing Showcase")
-col1, col2 = st.columns(2)
-with col1:
-    st.header("Game Development")
-    st.code(run_game.__code__.co_code, language="python")
-    if st.button("Run Game"):
-        st.write("Game running in a separate window...")
-        run_game()
-with col2:
-    st.header("Mad Lib Generator")
-    if st.button("Generate Mad Lib"):
-        st.write(generate_mad_lib())
-st.header("D&D SVG Sprite Animation")
-st.components.v1.html("""
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="400" height="400">
-  <style>
-    @keyframes move {
-      0% { transform: translateX(0); }
-      50% { transform: translateX(100px); }
-      100% { transform: translateX(0); }
     }
-    .sprite { animation: move 4s infinite; }
-  </style>
-  <g class="sprite">
-    <!-- Wizard sprite -->
-    <path d="M50,150 L70,100 L90,150 Z" fill="#4a0e4e" />
-    <circle cx="80" cy="90" r="20" fill="#c8a2c8" />
-    <path d="M70,90 Q80,70 90,90" stroke="#4a0e4e" stroke-width="2" fill="none" />
-  </g>
-  <!-- Background elements -->
-  <rect x="0" y="150" width="200" height="50" fill="#3a7d44" />
-  <circle cx="30" cy="30" r="15" fill="#f9d71c" />
-</svg>
-""", height=400)
-st.header("Three.js 3D App")
-st.components.v1.html("""
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Three.js Cube</title>
-    <style>
-        body { margin: 0; }
-        canvas { display: block; }
-    </style>
-</head>
-<body>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script>
-        const scene = new THREE.Scene();
-        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-        const renderer = new THREE.WebGLRenderer();
-        renderer.setSize(400, 300);
-        document.body.appendChild(renderer.domElement);
-        const geometry = new THREE.BoxGeometry();
-        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
-        const cube = new THREE.Mesh(geometry, material);
-        scene.add(cube);
         camera.position.z = 5;
-        function animate() {
-            requestAnimationFrame(animate);
-            cube.rotation.x += 0.01;
-            cube.rotation.y += 0.01;
-            renderer.render(scene, camera);
         }
-        animate();
     </script>
-</body>
-</html>
-""", height=300)
-if __name__ == "__main__":
-    st.sidebar.title("Navigation")
-    st.sidebar.info("Use the buttons and sections above to interact with different components of the app.")

 import streamlit as st
+import base64
+st.set_page_config(layout="wide", page_title="Game Dev and 3D Showcase")
+st.title("Game Development and 3D Content Showcase")
+# HTML5 Game
+st.header("HTML5 Game")
+html5_game = """
+<canvas id="gameCanvas" width="400" height="300"></canvas>
+<script>
+    const canvas = document.getElementById('gameCanvas');
+    const ctx = canvas.getContext('2d');
+    let x = canvas.width / 2;
+    let y = canvas.height - 30;
+    let dx = 2;
+    let dy = -2;
+    const ballRadius = 10;
+    function drawBall() {
+        ctx.beginPath();
+        ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
+        ctx.fillStyle = "#0095DD";
+        ctx.fill();
+        ctx.closePath();
     }
+    function draw() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        drawBall();
+        if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
+            dx = -dx;
+        }
+        if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
+            dy = -dy;
+        }
+        x += dx;
+        y += dy;
+    }
+    setInterval(draw, 10);
+</script>
+"""
+st.components.v1.html(html5_game, height=350)
+# Mad Lib Generator
+st.header("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():
+    import random
+    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
+if st.button("Generate Mad Lib"):
+    st.write(generate_mad_lib())
+# A-Frame 3D Scene
+st.header("A-Frame 3D Scene")
+aframe_scene = """
+<script src="https://aframe.io/releases/1.2.0/aframe.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-scene>
+"""
+st.components.v1.html(aframe_scene, height=450)
+# Three.js 3D Model Viewer
+st.header("Three.js 3D Model Viewer")
+threejs_viewer = """
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/OBJLoader.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
+<div id="model-container" style="width: 100%; height: 400px;"></div>
+<script>
+    let scene, camera, renderer, model;
+    function init() {
+        scene = new THREE.Scene();
+        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        renderer = new THREE.WebGLRenderer();
+        renderer.setSize(window.innerWidth, 400);
+        document.getElementById('model-container').appendChild(renderer.domElement);
+        const light = new THREE.PointLight(0xffffff, 1, 100);
+        light.position.set(0, 0, 10);
+        scene.add(light);
         camera.position.z = 5;
+        animate();
+    }
+    function animate() {
+        requestAnimationFrame(animate);
+        if (model) {
+            model.rotation.x += 0.01;
+            model.rotation.y += 0.01;
         }
+        renderer.render(scene, camera);
+    }
+    function loadModel(url, fileType) {
+        let loader;
+        if (fileType === 'obj') {
+            loader = new THREE.OBJLoader();
+        } else if (fileType === 'glb') {
+            loader = new THREE.GLTFLoader();
+        }
+        loader.load(url, function(object) {
+            if (model) {
+                scene.remove(model);
+            }
+            model = fileType === 'obj' ? object : object.scene;
+            scene.add(model);
+        });
+    }
+    init();
+</script>
+"""
+st.components.v1.html(threejs_viewer, height=450)
+# File uploader for 3D models
+uploaded_file = st.file_uploader("Upload a 3D model (OBJ or GLB)", type=['obj', 'glb'])
+if uploaded_file is not None:
+    # Get the file extension
+    file_extension = uploaded_file.name.split('.')[-1].lower()
+    # Encode the file
+    encoded_file = base64.b64encode(uploaded_file.read()).decode()
+    # Create a data URL
+    data_url = f"data:application/octet-stream;base64,{encoded_file}"
+    # JavaScript to load the model
+    load_model_js = f"""
+    <script>
+        loadModel("{data_url}", "{file_extension}");
     </script>
+    """
+    st.components.v1.html(load_model_js, height=0)
+    st.success(f"Loaded {uploaded_file.name}")
+st.sidebar.title("Navigation")
+st.sidebar.info("Use the sections above to interact with different components of the app.")