Spaces:
Configuration error
Configuration error
| """ | |
| Rosetta Animation for Hugging Face Spaces Demo | |
| ---------------------------------------------- | |
| This file contains a Gradio component that adapts the Rosetta animation | |
| from your Next.js project for use in Hugging Face Spaces. | |
| """ | |
| import gradio as gr | |
| import base64 | |
| import os | |
| from pathlib import Path | |
| def create_rosetta_animation(): | |
| """Create HTML/CSS/JS for the Rosetta animation""" | |
| # SVG content for light and dark mode | |
| # These are embedded directly rather than loaded from files | |
| light_svg_base64 = "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjAwMDQgMjRDMTguNjI3OSAyNCAyNCAxOC42Mjc5IDI0IDEyLjAwMDRDMjQgNS4zNzI5MSAxOC42Mjc5IDAgMTIuMDAwNCAwQzUuMzcyOTEgMCAwIDUuMzcyOTEgMCAxMi4wMDA0QzAgMTguNjI3OSA1LjM3MjkxIDI0IDEyLjAwMDQgMjRaIiBmaWxsPSIjRkY2MTJDIi8+CjxwYXRoIGQ9Ik0xMi4wMDA0IDIxLjAzQzE3LjAwMDYgMjEuMDMgMjEuMDMgMTcuMDAwNiAyMS4wMyAxMi4wMDA0QzIxLjAzIDcuMDAwMjMgMTcuMDAwNiAyLjk3MSAxMi4wMDA0IDIuOTcxQzcuMDAwMjMgMi45NzEgMi45NzEgNy4wMDAyMyAyLjk3MSAxMi4wMDA0QzIuOTcxIDE3LjAwMDYgNy4wMDAyMyAyMS4wMyAxMi4wMDA0IDIxLjAzWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+" | |
| dark_svg_base64 = "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjAwMDQgMjRDMTguNjI3OSAyNCAyNCAxOC42Mjc5IDI0IDEyLjAwMDRDMjQgNS4zNzI5MSAxOC42Mjc5IDAgMTIuMDAwNCAwQzUuMzcyOTEgMCAwIDUuMzcyOTEgMCAxMi4wMDA0QzAgMTguNjI3OSA1LjM3MjkxIDI0IDEyLjAwMDQgMjRaIiBmaWxsPSIjRkY2MTJDIi8+CjxwYXRoIGQ9Ik0xMi4wMDA0IDIxLjAzQzE3LjAwMDYgMjEuMDMgMjEuMDMgMTcuMDAwNiAyMS4wMyAxMi4wMDA0QzIxLjAzIDcuMDAwMjMgMTcuMDAwNiAyLjk3MSAxMi4wMDA0IDIuOTcxQzcuMDAwMjMgMi45NzEgMi45NzEgNy4wMDAyMyAyLjk3MSAxMi4wMDA0QzIuOTcxIDE3LjAwMDYgNy4wMDAyMyAyMS4wMyAxMi4wMDA0IDIxLjAzWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+" | |
| # HTML for the animation | |
| html = f""" | |
| <div class="rosetta-container"> | |
| <div class="rosetta-animation" id="rosetta"> | |
| <!-- Petals will be added via JavaScript --> | |
| </div> | |
| </div> | |
| <style> | |
| .rosetta-container {{ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| }} | |
| .rosetta-animation {{ | |
| position: relative; | |
| width: 144px; | |
| height: 144px; | |
| transition: transform 0.3s; | |
| }} | |
| .rosetta-animation:hover {{ | |
| transform: scale(1.05); | |
| }} | |
| .petal-container {{ | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 144px; | |
| height: 144px; | |
| }} | |
| .petal {{ | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| width: 24px; | |
| height: 24px; | |
| }} | |
| @keyframes selfAnimationRosetta {{ | |
| /* Cycle 1: Both Pauses Move Elements IN (0% -> 50% of 9s duration) */ | |
| 0% {{ transform: translate(-50%, -50%) translateY(-30px) rotate(90deg); opacity: 0.9; }} | |
| 10% {{ transform: translate(-50%, -50%) translateY(-30px) rotate(90deg); opacity: 0.9; }} | |
| 20% {{ transform: translate(-50%, -50%) translateY(-23px) rotate(180deg); opacity: 0.95;}} | |
| 25% {{ transform: translate(-50%, -50%) translateY(-23px) rotate(180deg); opacity: 0.95;}} | |
| 30% {{ transform: translate(-50%, -50%) translateY(-23px) rotate(270deg); opacity: 1.0; }} | |
| 35% {{ transform: translate(-50%, -50%) translateY(-23px) rotate(270deg); opacity: 1.0; }} | |
| 50% {{ transform: translate(-50%, -50%) translateY(-30px) rotate(450deg); opacity: 0.9; }} | |
| /* Cycle 2: Skips Midpoint Pause (50% -> 100% of 9s duration) */ | |
| 50% {{ transform: translate(-50%, -50%) translateY(-30px) rotate(450deg); opacity: 0.9; }} | |
| 60% {{ transform: translate(-50%, -50%) translateY(-30px) rotate(450deg); opacity: 0.9; }} | |
| 80% {{ transform: translate(-50%, -50%) translateY(-23px) rotate(630deg); opacity: 1.0; }} | |
| 85% {{ transform: translate(-50%, -50%) translateY(-23px) rotate(630deg); opacity: 1.0; }} | |
| 100% {{ transform: translate(-50%, -50%) translateY(-30px) rotate(810deg); opacity: 0.9; }} | |
| }} | |
| @keyframes groupPulse {{ | |
| 0% {{ transform: scale(1) rotate(0deg); }} | |
| 50% {{ transform: scale(0.98) rotate(180deg); }} | |
| 100% {{ transform: scale(1) rotate(360deg); }} | |
| }} | |
| </style> | |
| <script> | |
| (function() {{ | |
| // Get container element | |
| const container = document.getElementById('rosetta'); | |
| // Set animation for container | |
| container.style.animation = 'groupPulse 8s ease-in-out infinite'; | |
| // SVG data as base64 | |
| const svgData = '{light_svg_base64}'; | |
| const svgDataDark = '{dark_svg_base64}'; | |
| // Determine which SVG to use based on color scheme preference | |
| const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches; | |
| const currentSvg = prefersDarkScheme ? svgDataDark : svgData; | |
| // Create petals | |
| const petals = 5; | |
| for (let i = 0; i < petals; i++) {{ | |
| // Create petal container | |
| const petalContainer = document.createElement('div'); | |
| petalContainer.className = 'petal-container'; | |
| petalContainer.style.transform = `rotate(${{(360 / petals) * i}}deg)`; | |
| // Create petal | |
| const petal = document.createElement('div'); | |
| petal.className = 'petal'; | |
| petal.style.animation = 'selfAnimationRosetta 9s ease-in-out infinite'; | |
| petal.style.animationDelay = `${{i * 0.05}}s`; | |
| // Create SVG image | |
| const img = document.createElement('img'); | |
| img.src = `data:image/svg+xml;base64,${{currentSvg}}`; | |
| img.alt = `Petal ${{i + 1}}`; | |
| img.style.width = '100%'; | |
| img.style.height = '100%'; | |
| // Assemble components | |
| petal.appendChild(img); | |
| petalContainer.appendChild(petal); | |
| container.appendChild(petalContainer); | |
| }} | |
| }})(); | |
| </script> | |
| """ | |
| return html | |
| def rosetta_logo(): | |
| """Create a Gradio HTML component with the Rosetta animation""" | |
| html_content = create_rosetta_animation() | |
| return gr.HTML(html_content) | |
| # Example usage in a Gradio app: | |
| if __name__ == "__main__": | |
| with gr.Blocks() as demo: | |
| gr.Markdown("# SKENAI-NET Rosetta Animation Demo") | |
| rosetta_logo() | |
| gr.Markdown("This animation demonstrates the Rosetta component adapted for Hugging Face Spaces.") | |
| demo.launch() | |