Create app.py
Browse files
app.py
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import gradio as gr
|
| 2 |
+
|
| 3 |
+
# HTML and CSS for the solar system visualization
|
| 4 |
+
html_code = """
|
| 5 |
+
<!DOCTYPE html>
|
| 6 |
+
<html>
|
| 7 |
+
<head>
|
| 8 |
+
<style>
|
| 9 |
+
body {
|
| 10 |
+
margin: 0;
|
| 11 |
+
overflow: hidden;
|
| 12 |
+
background: #000;
|
| 13 |
+
}
|
| 14 |
+
.solar-system {
|
| 15 |
+
position: relative;
|
| 16 |
+
width: 100vw;
|
| 17 |
+
height: 100vh;
|
| 18 |
+
}
|
| 19 |
+
.planet {
|
| 20 |
+
position: absolute;
|
| 21 |
+
border-radius: 50%;
|
| 22 |
+
cursor: pointer;
|
| 23 |
+
}
|
| 24 |
+
.tooltip {
|
| 25 |
+
position: absolute;
|
| 26 |
+
background: rgba(0, 0, 0, 0.7);
|
| 27 |
+
color: #fff;
|
| 28 |
+
padding: 10px;
|
| 29 |
+
border-radius: 5px;
|
| 30 |
+
pointer-events: none;
|
| 31 |
+
opacity: 0;
|
| 32 |
+
transition: opacity 0.3s;
|
| 33 |
+
}
|
| 34 |
+
</style>
|
| 35 |
+
</head>
|
| 36 |
+
<body>
|
| 37 |
+
<div class="solar-system" id="solar-system">
|
| 38 |
+
<div class="planet" id="sun" style="width: 100px; height: 100px; background: yellow; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
|
| 39 |
+
<div class="planet" id="mercury" style="width: 20px; height: 20px; background: gray; top: 40%; left: 60%;"></div>
|
| 40 |
+
<div class="planet" id="venus" style="width: 30px; height: 30px; background: orange; top: 30%; left: 70%;"></div>
|
| 41 |
+
<div class="planet" id="earth" style="width: 40px; height: 40px; background: blue; top: 50%; left: 80%;"></div>
|
| 42 |
+
<div class="planet" id="mars" style="width: 30px; height: 30px; background: red; top: 60%; left: 70%;"></div>
|
| 43 |
+
<div class="tooltip" id="tooltip"></div>
|
| 44 |
+
</div>
|
| 45 |
+
<script>
|
| 46 |
+
const planets = [
|
| 47 |
+
{ id: 'sun', name: 'Sun', facts: 'The Sun is the star at the center of the Solar System.' },
|
| 48 |
+
{ id: 'mercury', name: 'Mercury', facts: 'Mercury is the smallest planet in the Solar System.' },
|
| 49 |
+
{ id: 'venus', name: 'Venus', facts: 'Venus has a thick, toxic atmosphere filled with carbon dioxide.' },
|
| 50 |
+
{ id: 'earth', name: 'Earth', facts: 'Earth is the only planet known to support life.' },
|
| 51 |
+
{ id: 'mars', name: 'Mars', facts: 'Mars is known as the Red Planet due to its reddish appearance.' },
|
| 52 |
+
];
|
| 53 |
+
|
| 54 |
+
const tooltip = document.getElementById('tooltip');
|
| 55 |
+
|
| 56 |
+
planets.forEach(planet => {
|
| 57 |
+
const element = document.getElementById(planet.id);
|
| 58 |
+
element.addEventListener('mouseover', () => {
|
| 59 |
+
tooltip.innerHTML = `<strong>${planet.name}</strong><br>${planet.facts}`;
|
| 60 |
+
tooltip.style.opacity = 1;
|
| 61 |
+
tooltip.style.top = `${element.offsetTop + element.offsetHeight / 2}px`;
|
| 62 |
+
tooltip.style.left = `${element.offsetLeft + element.offsetWidth / 2}px`;
|
| 63 |
+
});
|
| 64 |
+
element.addEventListener('mouseout', () => {
|
| 65 |
+
tooltip.style.opacity = 0;
|
| 66 |
+
});
|
| 67 |
+
});
|
| 68 |
+
|
| 69 |
+
function animate() {
|
| 70 |
+
const solarSystem = document.getElementById('solar-system');
|
| 71 |
+
const time = new Date().getTime() * 0.0005;
|
| 72 |
+
const radius = Math.min(solarSystem.clientWidth, solarSystem.clientHeight) / 2.5;
|
| 73 |
+
|
| 74 |
+
planets.forEach((planet, index) => {
|
| 75 |
+
if (planet.id !== 'sun') {
|
| 76 |
+
const element = document.getElementById(planet.id);
|
| 77 |
+
const angle = time + index * 0.5;
|
| 78 |
+
const x = Math.cos(angle) * radius + solarSystem.clientWidth / 2;
|
| 79 |
+
const y = Math.sin(angle) * radius + solarSystem.clientHeight / 2;
|
| 80 |
+
element.style.left = `${x}px`;
|
| 81 |
+
element.style.top = `${y}px`;
|
| 82 |
+
}
|
| 83 |
+
});
|
| 84 |
+
|
| 85 |
+
requestAnimationFrame(animate);
|
| 86 |
+
}
|
| 87 |
+
|
| 88 |
+
animate();
|
| 89 |
+
</script>
|
| 90 |
+
</body>
|
| 91 |
+
</html>
|
| 92 |
+
"""
|
| 93 |
+
|
| 94 |
+
def solar_system_simulator():
|
| 95 |
+
return gr.HTML(html_code)
|
| 96 |
+
|
| 97 |
+
demo = gr.Interface(
|
| 98 |
+
fn=solar_system_simulator,
|
| 99 |
+
inputs=[],
|
| 100 |
+
outputs="html",
|
| 101 |
+
title="Solar System Simulator",
|
| 102 |
+
description="A colorful and animated solar system simulator. Hover over the planets to see key facts."
|
| 103 |
+
)
|
| 104 |
+
|
| 105 |
+
if __name__ == "__main__":
|
| 106 |
+
demo.launch()
|