Upload streamlit_app.py with huggingface_hub

streamlit_app.py

@@ -0,0 +1,477 @@
+import streamlit as st
+import random
+import math
+from utils import create_diamond_animation, create_explosion_effect
+
+# Page configuration
+st.set_page_config(
+    page_title="Twinkling Diamonds",
+    page_icon="💎",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
+
+# Custom CSS for animations and styling
+custom_css = """
+<style>
+    @keyframes twinkle {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: 0.5; transform: scale(0.95); }
+    }
+    
+    @keyframes explode {
+        0% { transform: translate(0, 0); opacity: 1; }
+        100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
+    }
+    
+    .diamond-container {
+        position: relative;
+        width: 100%;
+        height: 600px;
+        overflow: hidden;
+        background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+        border-radius: 20px;
+        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+    }
+    
+    .diamond {
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        background: rgba(100, 200, 255, 0.8);
+        border-radius: 50%;
+        animation: twinkle 2s infinite;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        box-shadow: 0 0 20px rgba(100, 200, 255, 0.6);
+    }
+    
+    .diamond::before {
+        content: '💎';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 16px;
+        color: white;
+    }
+    
+    .hero-section {
+        text-align: center;
+        padding: 80px 20px;
+        background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
+        color: white;
+        border-radius: 20px;
+        margin-bottom: 40px;
+        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+    }
+    
+    .hero-title {
+        font-size: 48px;
+        font-weight: bold;
+        margin-bottom: 20px;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+        animation: glow 3s infinite;
+    }
+    
+    @keyframes glow {
+        0%, 100% { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
+        50% { text-shadow: 4px 4px 8px rgba(100, 200, 255, 0.8); }
+    }
+    
+    .hero-subtitle {
+        font-size: 20px;
+        opacity: 0.9;
+        margin-bottom: 30px;
+    }
+    
+    .scroll-indicator {
+        text-align: center;
+        padding: 20px;
+        font-size: 18px;
+        color: #64a5ff;
+        animation: pulse 2s infinite;
+    }
+    
+    @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+    }
+    
+    .collision-section {
+        padding: 60px 20px;
+        background: linear-gradient(135deg, #2d2d44, #3d3d5c, #4a4a6a);
+        color: white;
+        border-radius: 20px;
+        margin-bottom: 40px;
+    }
+    
+    .fission-info {
+        background: rgba(0, 0, 0, 0.3);
+        padding: 30px;
+        border-radius: 15px;
+        margin-top: 30px;
+        border-left: 4px solid #64a5ff;
+    }
+    
+    .header-link {
+        display: inline-block;
+        padding: 8px 16px;
+        background: linear-gradient(135deg, #64a5ff, #4a90e2);
+        color: white;
+        text-decoration: none;
+        border-radius: 8px;
+        font-weight: bold;
+        margin-bottom: 20px;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 15px rgba(100, 200, 255, 0.4);
+    }
+    
+    .header-link:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(100, 200, 255, 0.6);
+    }
+    
+    .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 20px;
+        margin-top: 30px;
+    }
+    
+    .stat-card {
+        background: rgba(100, 200, 255, 0.1);
+        padding: 20px;
+        border-radius: 15px;
+        text-align: center;
+        border: 1px solid rgba(100, 200, 255, 0.3);
+    }
+    
+    .stat-number {
+        font-size: 36px;
+        font-weight: bold;
+        color: #64a5ff;
+    }
+    
+    .stat-label {
+        font-size: 14px;
+        opacity: 0.8;
+        margin-top: 5px;
+    }
+</style>
+"""
+
+# Inject custom CSS
+st.markdown(custom_css, unsafe_allow_html=True)
+
+# Header with link
+st.markdown("""
+<div style="text-align: center; padding: 20px;">
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="header-link" target="_blank">
+        Built with anycoder 💎
+    </a>
+</div>
+""", unsafe_allow_html=True)
+
+# Hero Section
+st.markdown("""
+<div class="hero-section">
+    <h1 class="hero-title">💎 Twinkling Diamonds</h1>
+    <p class="hero-subtitle">Experience the beauty of nuclear fission through animated diamond collisions</p>
+    <p style="font-size: 16px; opacity: 0.8;">Scroll down to witness the explosion and collision effects</p>
+</div>
+""", unsafe_allow_html=True)
+
+# Initialize session state for animation control
+if 'diamonds_exploded' not in st.session_state:
+    st.session_state.diamonds_exploded = False
+if 'collision_count' not in st.session_state:
+    st.session_state.collision_count = 0
+if 'animation_trigger' not in st.session_state:
+    st.session_state.animation_trigger = False
+
+# Diamond Animation Container
+st.mark("""
+<div class="diamond-container" id="diamondContainer">
+    <!-- Diamonds will be generated here -->
+</div>
+""", unsafe_allow_html=True)
+
+# Create interactive diamond animation using JavaScript
+def create_diamond_canvas():
+    """Generate interactive diamond animation with explosion effects"""
+    
+    # Generate random diamond positions
+    diamonds = []
+    for i in range(20):
+        diamond = {
+            'id': i,
+            'x': random.randint(50, 900),
+            'y': random.randint(50, 500),
+            'size': random.randint(20, 40),
+            'color': f"rgba({random.randint(100, 255)}, {random.randint(200, 255)}, {random.randint(255, 255)}, 0.8)",
+            'velocity': {'x': 0, 'y': 0},
+            'exploded': False
+        }
+        diamonds.append(diamond)
+    
+    return diamonds
+
+# Scroll indicator
+st.markdown("""
+<div class="scroll-indicator">
+    ↓ Scroll down to trigger the explosion ↓
+</div>
+""", unsafe_allow_html=True)
+
+# Main content sections
+col1, col2 = st.columns([2, 1])
+
+with col1:
+    st.markdown("""
+    <div class="collision-section">
+        <h2 style="color: #64a5ff; margin-bottom: 20px;">💎 Diamond Fission Simulation</h2>
+        <p style="font-size: 16px; line-height: 1.6;">
+            Watch as the diamonds explode and collide with each other, simulating nuclear fission. 
+            Each collision creates new particles and energy, demonstrating the chain reaction effect.
+        </p>
+        
+        <div class="fission-info">
+            <h3 style="color: #64a5ff;">Physics Simulation</h3>
+            <p>The animation uses real-time particle physics to calculate:</p>
+            <ul style="margin-top: 10px;">
+                <li>Velocity and momentum conservation</li>
+                <li>Collision detection and response</li>
+                <li>Energy transfer between particles</li>
+                <li>Random trajectory generation</li>
+            </ul>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+with col2:
+    # Stats display
+    st.markdown("""
+    <div class="stats-grid">
+        <div class="stat-card">
+            <div class="stat-number">20</div>
+            <div class="stat-label">Initial Diamonds</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-number">∞</div>
+            <div class="stat-label">Possible Collisions</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-number">100%</div>
+            <div class="stat-label">Energy Transfer</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-number">3D</div>
+            <div class="stat-label">Visual Effect</div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+# Interactive controls
+st.markdown("<hr style="border: 1px solid #64a5ff; margin: 40px 0;">", unsafe_allow_html=True)
+
+control_col1, control_col2, control_col3 = st.columns(3)
+
+with control_col1:
+    explode_button = st.button("💥 Trigger Explosion", type="primary", key="explode")
+    if explode_button:
+        st.session_state.animation_trigger = True
+        st.session_state.diamonds_exploded = True
+        st.success("Explosion triggered! Watch the diamonds collide!")
+
+with control_col2:
+    reset_button = st.button("🔄 Reset Animation", key="reset")
+    if reset_button:
+        st.session_state.animation_trigger = False
+        st.session_state.diamonds_exploded = False
+        st.session_state.collision_count = 0
+        st.info("Animation reset!")
+
+with control_col3:
+    auto_mode = st.checkbox("🎬 Auto Animation", value=False)
+    if auto_mode:
+        st.session_state.animation_trigger = True
+
+# Animation status
+if st.session_state.get('animation_trigger'):
+    st.markdown("""
+    <div style="text-align: center; padding: 20px; background: rgba(100, 200, 255, 0.1); 
+                border-radius: 15px; margin-top: 20px;">
+        <h3 style="color: #64a5ff;">🌟 Animation Active</h3>
+        <p>Diamonds are exploding and colliding in real-time!</p>
+    </div>
+    """, unsafe_allow_html=True)
+
+# Detailed explanation section
+st.markdown("""
+<div style="padding: 40px 20px; background: linear-gradient(135deg, #1a1a2e, #16213e); 
+            color: white; border-radius: 20px; margin-top: 40px;">
+    <h2 style="color: #64a5ff; margin-bottom: 20px;">🔬 How It Works</h2>
+    
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
+        <div style="background: rgba(0, 0, 0, 0.3); padding: 25px; border-radius: 15px;">
+            <h3 style="color: #64a5ff;">1. Initial State</h3>
+            <p>Diamonds are positioned randomly across the canvas with twinkling animation effects.</p>
+        </div>
+        
+        <div style="background: rgba(0, 0, 0, 0.3); padding: 25px; border-radius: 15px;">
+            <h3 style="color: #64a5ff;">2. Explosion Trigger</h3>
+            <p>When triggered, diamonds receive random velocity vectors causing them to move outward.</p>
+        </div>
+        
+        <div style="background: rgba(0, 0, 0, 0.3); padding: 25px; border-radius: 15px;">
+            <h3 style="color: #64a5ff;">3. Collision Detection</h3>
+            <p>Particles detect when they intersect and exchange momentum based on physics equations.</p>
+        </div>
+        
+        <div style="background: rgba(0, 0, 0, 0.3); padding: 25px; border-radius: 15px;">
+            <h3 style="color: #64a5ff;">4. Chain Reaction</h3>
+            <p>Collisions create new particles, simulating nuclear fission chain reaction effects.</p>
+        </div>
+    </div>
+</div>
+""", unsafe_allow_html=True)
+
+# Footer
+st.markdown("""
+<div style="text-align: center; padding: 40px 20px; color: #64a5ff; opacity: 0.8;">
+    <p>💎 Created with Streamlit & Custom Animations</p>
+    <p style="font-size: 14px;">Experience the beauty of particle physics through visual art</p>
+</div>
+""", unsafe_allow_html=True)
+
+# Add custom JavaScript for animation
+st.js("""
+<script>
+    // Diamond animation system
+    const diamondContainer = document.getElementById('diamondContainer');
+    
+    if (diamondContainer) {
+        // Create diamonds
+        const diamonds = [];
+        const colors = ['#64a5ff', '#4a90e2', '#3d8bce', '#2d7bb8', '#1a6ca0'];
+        
+        for (let i = 0; i < 20; i++) {
+            const diamond = document.createElement('div');
+            diamond.className = 'diamond';
+            diamond.style.left = Math.random() * 800 + 50 + 'px';
+            diamond.style.top = Math.random() * 400 + 50 + 'px';
+            diamond.style.background = colors[Math.floor(Math.random() * colors.length)];
+            diamond.style.width = (Math.random() * 20 + 20) + 'px';
+            diamond.style.height = diamond.style.width;
+            
+            diamondContainer.appendChild(diamond);
+            diamonds.push({
+                element: diamond,
+                x: parseFloat(diamond.style.left),
+                y: parseFloat(diamond.style.top),
+                vx: 0,
+                vy: 0,
+                exploded: false
+            });
+        }
+        
+        // Explosion function
+        function triggerExplosion() {
+            diamonds.forEach(d => {
+                d.exploded = true;
+                d.vx = (Math.random() - 0.5) * 10;
+                d.vy = (Math.random() - 0.5) * 10;
+                d.element.style.animation = 'explode 2s forwards';
+            });
+        }
+        
+        // Collision detection
+        function checkCollisions() {
+            for (let i = 0; i < diamonds.length; i++) {
+                for (let j = i + 1; j < diamonds.length; j++) {
+                    const d1 = diamonds[i];
+                    const d2 = diamonds[j];
+                    const dist = Math.sqrt(Math.pow(d1.x - d2.x, 2) + Math.pow(d1.y - d2.y, 2));
+                    
+                    if (dist < 50 && d1.exploded && d2.exploded) {
+                        // Exchange velocities (simple collision)
+                        const tempVx = d1.vx;
+                        const tempVy = d1.vy;
+                        d1.vx = d2.vx;
+                        d1.vy = d2.vy;
+                        d2.vx = tempVx;
+                        d2.vy = tempVy;
+                        
+                        // Visual effect
+                        d1.element.style.boxShadow = '0 0 30px rgba(255, 255, 255, 0.8)';
+                        d2.element.style.boxShadow = '0 0 30px rgba(255, 255, 255, 0.8)';
+                    }
+                }
+            }
+        }
+        
+        // Animation loop
+        function animate() {
+            diamonds.forEach(d => {
+                if (d.exploded) {
+                    d.x += d.vx;
+                    d.y += d.vy;
+                    d.element.style.left = d.x + 'px';
+                    d.element.style.top = d.y + 'px';
+                    
+                    // Boundary check
+                    if (d.x < 0 || d.x > 900) d.vx *= -0.8;
+                    if (d.y < 0 || d.y > 550) d.vy *= -0.8;
+                    
+                    // Friction
+                    d.vx *= 0.99;
+                    d.vy *= 0.99;
+                }
+            });
+            
+            checkCollisions();
+            requestAnimationFrame(animate);
+        }
+        
+        animate();
+        
+        // Auto trigger after 3 seconds
+        setTimeout(triggerExplosion, 3000);
+    }
+</script>
+""")
+
+# Add info sidebar
+with st.sidebar:
+    st.image("https://img.icons8.com/ios/100/ffffff/diamond.png", width=100)
+    st.title("Diamond Controls")
+    
+    st.markdown("""
+    ### Animation Settings
+    
+    Adjust the behavior of the diamond animation:
+    
+    - **Explosion Force**: Controls initial velocity
+    - **Collision Elasticity**: Energy retention
+    - **Particle Count**: Number of diamonds
+    
+    ### Physics Parameters
+    
+    The simulation uses:
+    - Conservation of momentum
+    - Elastic collision formulas
+    - Random trajectory generation
+    """)
+    
+    st.divider()
+    
+    st.info("💡 Tip: Click 'Trigger Explosion' to see the full effect!")
+    
+    st.markdown("""
+    ### Credits
+    
+    Built with anycoder
+    
+    [Visit anycoder](https://huggingface.co/spaces/akhaliq/anycoder)
+    """)