Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| import streamlit.components.v1 as components | |
| # Configure the page | |
| st.set_page_config( | |
| page_title="Solar System Visualization", | |
| layout="wide", | |
| initial_sidebar_state="collapsed" | |
| ) | |
| # Title | |
| st.title("Interactive Solar System Visualization 🌌") | |
| # HTML/JavaScript content | |
| SOLAR_SYSTEM_HTML = """ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Our Solar System</title> | |
| <style> | |
| body { margin: 0; overflow: hidden; } | |
| canvas { display: block; width: 100% !important; height: 1024px !important; } | |
| #crawl-container { | |
| position: absolute; | |
| width: 100%; | |
| height: 1024px; | |
| overflow: hidden; | |
| perspective: 400px; | |
| font-family: Arial, sans-serif; | |
| } | |
| #crawl { | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| width: 70%; | |
| transform: translateX(-50%) rotateX(25deg); | |
| font-size: 24px; | |
| text-align: justify; | |
| color: #feda4a; | |
| } | |
| .planet-info { | |
| margin-bottom: 2em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="crawl-container"> | |
| <div id="crawl"> | |
| <h1>Our Amazing Solar System 🌌</h1> | |
| <div class="planet-info"> | |
| <h2>The Sun ☀️</h2> | |
| <p>Our star, a G-type main-sequence star (G2V), located at the center of our solar system: | |
| - Age: 4.6 billion years | |
| - Surface Temperature: 5,500°C (10,000°F) | |
| - Diameter: 1.4 million km (865,000 miles) | |
| - Mass: 333,000x Earth's mass</p> | |
| </div> | |
| <div class="planet-info"> | |
| <h2>Mercury 🪐</h2> | |
| <p>The smallest and innermost planet: | |
| - Distance from Sun: 57.9 million km | |
| - Length of year: 88 Earth days | |
| - Surface temperature: -180°C to 430°C | |
| - No moons</p> | |
| </div> | |
| <div class="planet-info"> | |
| <h2>Venus 🌟</h2> | |
| <p>Earth's "sister planet": | |
| - Distance from Sun: 108.2 million km | |
| - Length of year: 225 Earth days | |
| - Surface temperature: 462°C | |
| - Rotates backwards compared to most planets</p> | |
| </div> | |
| <div class="planet-info"> | |
| <h2>Earth 🌍</h2> | |
| <p>Our home planet: | |
| - Distance from Sun: 149.6 million km | |
| - Length of year: 365.25 days | |
| - Only known planet with life | |
| - One moon: Luna 🌕</p> | |
| </div> | |
| <div class="planet-info"> | |
| <h2>Mars 🔴</h2> | |
| <p>The Red Planet: | |
| - Distance from Sun: 227.9 million km | |
| - Length of year: 687 Earth days | |
| - Two moons: Phobos and Deimos | |
| - Home to largest volcano in solar system</p> | |
| </div> | |
| <div class="planet-info"> | |
| <h2>Jupiter ⭐</h2> | |
| <p>The largest planet: | |
| - Distance from Sun: 778.5 million km | |
| - Length of year: 11.9 Earth years | |
| - 79 known moons | |
| - Great Red Spot is a giant storm</p> | |
| </div> | |
| <div class="planet-info"> | |
| <h2>Saturn 💫</h2> | |
| <p>The ringed planet: | |
| - Distance from Sun: 1.4 billion km | |
| - Length of year: 29.5 Earth years | |
| - 82 confirmed moons | |
| - Spectacular ring system</p> | |
| </div> | |
| <div class="planet-info"> | |
| <h2>Uranus ❄️</h2> | |
| <p>The tilted planet: | |
| - Distance from Sun: 2.9 billion km | |
| - Length of year: 84 Earth years | |
| - 27 known moons | |
| - Rotates on its side</p> | |
| </div> | |
| <div class="planet-info"> | |
| <h2>Neptune 💨</h2> | |
| <p>The windiest planet: | |
| - Distance from Sun: 4.5 billion km | |
| - Length of year: 165 Earth years | |
| - 14 known moons | |
| - Strongest winds in the solar system</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script> | |
| // Set up the scene, camera, and renderer | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(window.innerWidth, 1024); | |
| document.body.appendChild(renderer.domElement); | |
| // Function to create a celestial body | |
| function createCelestialBody(radius, color, x, y, z) { | |
| const geometry = new THREE.SphereGeometry(radius, 32, 32); | |
| const material = new THREE.MeshPhongMaterial({ color: color }); | |
| const body = new THREE.Mesh(geometry, material); | |
| body.position.set(x, y, z); | |
| return body; | |
| } | |
| // Create the Sun and planets (not to scale to fit visualization) | |
| const sun = createCelestialBody(3, 0xffff00, 0, 0, 0); | |
| const mercury = createCelestialBody(0.4, 0xa0522d, 4, 0, 0); | |
| const venus = createCelestialBody(0.6, 0xdeb887, 6, 0, 0); | |
| const earth = createCelestialBody(0.6, 0x4169e1, 8, 0, 0); | |
| const moon = createCelestialBody(0.2, 0x808080, 8.8, 0, 0); | |
| const mars = createCelestialBody(0.5, 0xff4500, 10, 0, 0); | |
| const jupiter = createCelestialBody(1.2, 0xffa500, 13, 0, 0); | |
| const saturn = createCelestialBody(1.0, 0xf0e68c, 16, 0, 0); | |
| const uranus = createCelestialBody(0.8, 0x87ceeb, 19, 0, 0); | |
| const neptune = createCelestialBody(0.8, 0x4169e1, 22, 0, 0); | |
| // Add planets to the scene | |
| scene.add(sun); | |
| scene.add(mercury); | |
| scene.add(venus); | |
| scene.add(earth); | |
| scene.add(moon); | |
| scene.add(mars); | |
| scene.add(jupiter); | |
| scene.add(saturn); | |
| scene.add(uranus); | |
| scene.add(neptune); | |
| // Create starfield | |
| const starGeometry = new THREE.BufferGeometry(); | |
| const starMaterial = new THREE.PointsMaterial({ | |
| color: 0xFFFFFF, | |
| size: 0.1, | |
| transparent: true | |
| }); | |
| const starVertices = []; | |
| for (let i = 0; i < 10000; i++) { | |
| const x = (Math.random() - 0.5) * 2000; | |
| const y = (Math.random() - 0.5) * 2000; | |
| const z = (Math.random() - 0.5) * 2000; | |
| starVertices.push(x, y, z); | |
| } | |
| starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3)); | |
| const stars = new THREE.Points(starGeometry, starMaterial); | |
| scene.add(stars); | |
| // Add lighting | |
| const ambientLight = new THREE.AmbientLight(0x404040); | |
| scene.add(ambientLight); | |
| const sunLight = new THREE.PointLight(0xffffff, 1, 100); | |
| sunLight.position.set(0, 0, 0); | |
| scene.add(sunLight); | |
| camera.position.z = 30; | |
| // Animation function | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| // Rotate celestial bodies | |
| sun.rotation.y += 0.001; | |
| mercury.rotation.y += 0.02; | |
| venus.rotation.y += 0.015; | |
| earth.rotation.y += 0.01; | |
| moon.rotation.y += 0.01; | |
| mars.rotation.y += 0.008; | |
| jupiter.rotation.y += 0.004; | |
| saturn.rotation.y += 0.003; | |
| uranus.rotation.y += 0.002; | |
| neptune.rotation.y += 0.001; | |
| // Orbit planets | |
| const time = Date.now() * 0.001; | |
| mercury.position.x = Math.cos(time * 0.5) * 4; | |
| mercury.position.z = Math.sin(time * 0.5) * 4; | |
| venus.position.x = Math.cos(time * 0.4) * 6; | |
| venus.position.z = Math.sin(time * 0.4) * 6; | |
| earth.position.x = Math.cos(time * 0.3) * 8; | |
| earth.position.z = Math.sin(time * 0.3) * 8; | |
| // Moon orbits Earth | |
| moon.position.x = earth.position.x + Math.cos(time * 2) * 0.8; | |
| moon.position.z = earth.position.z + Math.sin(time * 2) * 0.8; | |
| mars.position.x = Math.cos(time * 0.25) * 10; | |
| mars.position.z = Math.sin(time * 0.25) * 10; | |
| jupiter.position.x = Math.cos(time * 0.2) * 13; | |
| jupiter.position.z = Math.sin(time * 0.2) * 13; | |
| saturn.position.x = Math.cos(time * 0.15) * 16; | |
| saturn.position.z = Math.sin(time * 0.15) * 16; | |
| uranus.position.x = Math.cos(time * 0.1) * 19; | |
| uranus.position.z = Math.sin(time * 0.1) * 19; | |
| neptune.position.x = Math.cos(time * 0.08) * 22; | |
| neptune.position.z = Math.sin(time * 0.08) * 22; | |
| // Rotate the starfield | |
| stars.rotation.y += 0.0002; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle window resizing | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, 1024); | |
| }); | |
| // Animate the text crawl | |
| const crawl = document.getElementById('crawl'); | |
| let crawlPosition = 100; | |
| function animateCrawl() { | |
| crawlPosition -= 0.02; | |
| crawl.style.top = crawlPosition + '%'; | |
| if (crawlPosition > -400) { | |
| requestAnimationFrame(animateCrawl); | |
| } | |
| } | |
| animateCrawl(); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| # Add description | |
| st.markdown(""" | |
| This visualization shows our solar system with the Sun, all eight planets, and Earth's moon. | |
| The visualization includes: | |
| - Rotating planets and moons | |
| - Orbital movements | |
| - Detailed information about each celestial body | |
| - A starfield background | |
| Note: The sizes and distances are not to scale to make the visualization more accessible. | |
| """) | |
| # Display the visualization using a custom component | |
| components.html(SOLAR_SYSTEM_HTML, height=1024, scrolling=False) | |
| # Add footer with data sources | |
| st.markdown(""" | |
| --- | |
| Data sources: | |
| - NASA Solar System Exploration | |
| - European Space Agency (ESA) | |
| - International Astronomical Union (IAU) | |
| """) |