Upload 4 files

README.md

@@ -1,10 +1,39 @@
----
-title: README
-emoji: 👁
-colorFrom: blue
-colorTo: blue
-sdk: gradio
-pinned: false
----
-
-Edit this `README.md` markdown file to author your organization card.
+# SKENAI-RENO Event Processing Demo
+
+This interactive demo showcases SKENAI-RENO's AI-powered event processing capabilities for gaming and enterprise applications.
+
+## What This Demo Shows
+
+- How different types of events are processed and enriched with AI insights
+- The serverless architecture in action (simulated)
+- Integration of Hugging Face models for real-time analysis
+- Key performance metrics and analytics
+
+## How to Use
+
+1. Select an event type from the dropdown
+2. Enter event content in the text box
+3. Submit to see how the SKENAI-RENO pipeline would process and enrich your event
+4. Explore the analytics tab to view performance metrics
+
+## Running Locally
+
+To run this demo locally:
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+## Deploying to Hugging Face Spaces
+
+1. Create a new Space at [huggingface.co/new-space](https://huggingface.co/new-space)
+2. Select Gradio as the SDK
+3. Upload these files to your Space
+4. (Optional) Add your HF_API_KEY as a secret if you want to use actual model inference
+
+## About SKENAI-RENO
+
+SKENAI-RENO is a fully serverless event processing pipeline designed for high-reliability, AI-enhanced insights, and seamless integration with existing systems.
+
+Learn more about our enterprise solutions at [skenai-reno.com](https://skenai-reno.com)

app.py

@@ -0,0 +1,362 @@
+#!/usr/bin/env python
+"""
+SKENAI-RENO Event Processing Demo
+---------------------------------
+This Gradio app demonstrates how the SKENAI-RENO event processing pipeline
+enriches events with AI insights using Hugging Face models.
+"""
+
+import gradio as gr
+import requests
+import json
+import os
+import time
+import numpy as np
+import pandas as pd
+import plotly.express as px
+from datetime import datetime, timedelta
+
+# Configure API access (in production, use Secrets)
+API_KEY = os.environ.get("HF_API_KEY", "")
+HF_ENDPOINT = "https://api-inference.huggingface.co/models/"
+
+# Sample models to use for different event types
+MODEL_MAPPING = {
+    "user_feedback": "distilbert-base-uncased-finetuned-sst-2-english",
+    "transaction": "bert-base-uncased",
+    "system_event": "gpt2",
+    "achievement": "roberta-base"
+}
+
+def process_event(event_type, event_content, user_id="user123", game_id="game456"):
+    """Process an event through the SKENAI-RENO pipeline with Hugging Face model."""
+    
+    # Select model based on event type
+    model_id = MODEL_MAPPING.get(event_type, "distilbert-base-uncased-finetuned-sst-2-english")
+    
+    # Prepare payload for Hugging Face model
+    payload = {
+        "inputs": event_content,
+    }
+    
+    # For demo purposes, simulate API call if no key is provided
+    if not API_KEY:
+        # Simulate processing delay
+        time.sleep(1)
+        
+        # Generate simulated AI insights based on event type
+        if event_type == "user_feedback":
+            ai_insights = [
+                {"label": "POSITIVE", "score": 0.92},
+                {"label": "NEGATIVE", "score": 0.08}
+            ]
+        elif event_type == "transaction":
+            ai_insights = {
+                "transaction_type": "purchase",
+                "value_assessment": "high",
+                "confidence": 0.87
+            }
+        elif event_type == "achievement":
+            ai_insights = {
+                "achievement_level": "significant",
+                "percentile": 85,
+                "engagement_impact": "positive"
+            }
+        else:
+            ai_insights = {
+                "classification": "routine",
+                "priority": "low",
+                "action_required": False
+            }
+    else:
+        # Call Hugging Face Inference API with actual key
+        try:
+            headers = {"Authorization": f"Bearer {API_KEY}"}
+            response = requests.post(
+                f"{HF_ENDPOINT}{model_id}",
+                headers=headers,
+                json=payload,
+                timeout=10
+            )
+            ai_insights = response.json()
+        except Exception as e:
+            ai_insights = {"error": str(e)}
+    
+    # Current timestamp for the demo
+    current_time = datetime.now().isoformat()
+    
+    # Format response as it would appear in the SKENAI-RENO pipeline
+    enriched_event = {
+        "event_id": f"evt-{int(time.time())}-{hash(event_content) % 10000}",
+        "type": event_type,
+        "content": event_content,
+        "user_id": user_id,
+        "game_id": game_id,
+        "timestamp": current_time,
+        "ai_enrichment": {
+            "model_id": model_id,
+            "insights": ai_insights,
+            "processed_timestamp": current_time
+        },
+        "processing": {
+            "lambda_execution_time_ms": 120,
+            "sqs_wait_time_ms": 15,
+            "dynamodb_write_time_ms": 8
+        }
+    }
+    
+    # Add relevant additional fields based on event type
+    if event_type == "transaction":
+        enriched_event["transaction_details"] = {
+            "amount": 4.99,
+            "currency": "USD",
+            "item_id": "coins_500",
+            "payment_method": "app_store"
+        }
+    elif event_type == "achievement":
+        enriched_event["achievement_details"] = {
+            "achievement_id": "level_completion",
+            "level": 10,
+            "score": 95,
+            "completion_time_sec": 320
+        }
+    
+    return json.dumps(enriched_event, indent=2)
+
+def generate_metrics_visualization():
+    """Generate a sample visualization of event processing metrics."""
+    # Create sample data for the past 7 days
+    dates = [(datetime.now() - timedelta(days=i)).strftime('%Y-%m-%d') for i in range(7)]
+    dates.reverse()
+    
+    # Sample event counts by type
+    event_types = ["user_feedback", "transaction", "system_event", "achievement"]
+    data = []
+    
+    for date in dates:
+        for event_type in event_types:
+            # Generate some random data with trends
+            if event_type == "transaction":
+                # Transactions increasing over time
+                count = np.random.randint(800, 1200) + (dates.index(date) * 50)
+            elif event_type == "user_feedback":
+                # Feedback relatively stable
+                count = np.random.randint(400, 600)
+            elif event_type == "achievement":
+                # Achievements with weekly pattern (higher on weekends)
+                day_of_week = datetime.strptime(date, '%Y-%m-%d').weekday()
+                weekend_boost = 200 if day_of_week >= 5 else 0
+                count = np.random.randint(300, 500) + weekend_boost
+            else:
+                # System events decreasing (good sign, fewer errors)
+                count = np.random.randint(100, 300) - (dates.index(date) * 10)
+                count = max(count, 50)  # Ensure not negative
+            
+            data.append({
+                "Date": date,
+                "Event Type": event_type,
+                "Count": count
+            })
+    
+    # Create DataFrame
+    df = pd.DataFrame(data)
+    
+    # Create plot
+    fig = px.line(
+        df, 
+        x="Date", 
+        y="Count", 
+        color="Event Type",
+        title="SKENAI-RENO: Event Processing Volume (Last 7 Days)",
+        markers=True
+    )
+    
+    fig.update_layout(
+        xaxis_title="Date",
+        yaxis_title="Number of Events",
+        legend_title="Event Type",
+        template="plotly_white"
+    )
+    
+    return fig
+
+def create_processing_pipeline_visualization():
+    """Create a visual representation of the SKENAI-RENO event processing pipeline."""
+    # Sample data for pipeline stages and their performance metrics
+    stages = [
+        "Redpanda", 
+        "Lambda Connector", 
+        "SQS Queue", 
+        "AI Processor Lambda", 
+        "DynamoDB"
+    ]
+    
+    avg_latency = [5, 25, 15, 120, 8]
+    error_rate = [0.01, 0.05, 0.001, 0.2, 0.02]
+    
+    # Create DataFrame
+    df = pd.DataFrame({
+        "Stage": stages,
+        "Average Latency (ms)": avg_latency,
+        "Error Rate (%)": [e * 100 for e in error_rate]
+    })
+    
+    # Create bar chart for latency
+    fig_latency = px.bar(
+        df,
+        x="Stage",
+        y="Average Latency (ms)",
+        title="Pipeline Stage Latency",
+        color="Average Latency (ms)",
+        color_continuous_scale="Viridis"
+    )
+    
+    # Create bar chart for error rates
+    fig_errors = px.bar(
+        df,
+        x="Stage",
+        y="Error Rate (%)",
+        title="Pipeline Stage Error Rates",
+        color="Error Rate (%)",
+        color_continuous_scale="Reds"
+    )
+    
+    return fig_latency, fig_errors
+
+# Define the Gradio interface
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo")) as demo:
+    gr.Markdown("# SKENAI-RENO Event Processing Demo")
+    gr.Markdown("""
+    Experience the power of AI-enriched event processing with SKENAI-RENO's serverless pipeline.
+    This demo simulates how events from gaming and enterprise applications are processed 
+    and enriched with AI insights in real-time.
+    """)
+    
+    with gr.Tabs():
+        with gr.TabItem("Event Processing Simulator"):
+            with gr.Row():
+                with gr.Column(scale=2):
+                    gr.Markdown("### Input Event Details")
+                    with gr.Row():
+                        event_type = gr.Dropdown(
+                            choices=["user_feedback", "transaction", "system_event", "achievement"],
+                            value="user_feedback",
+                            label="Event Type"
+                        )
+                    with gr.Row():
+                        user_id = gr.Textbox(value="user123", label="User ID")
+                        game_id = gr.Textbox(value="game456", label="Game/App ID")
+                    with gr.Row():
+                        event_content = gr.Textbox(
+                            lines=5,
+                            placeholder="Enter event content here...",
+                            label="Event Content"
+                        )
+                    with gr.Row():
+                        submit_btn = gr.Button("Process Event", variant="primary")
+                
+                with gr.Column(scale=3):
+                    gr.Markdown("### Enriched Event Output")
+                    output = gr.JSON()
+            
+            with gr.Row():
+                gr.Markdown("### Example Events")
+            
+            with gr.Row():
+                example1 = gr.Button("User Feedback Example")
+                example2 = gr.Button("Transaction Example")
+                example3 = gr.Button("Achievement Example")
+            
+            # Set up example event handlers
+            example1.click(
+                lambda: ["user_feedback", "user123", "game456", "I love this game! The new level design is amazing."],
+                outputs=[event_type, user_id, game_id, event_content]
+            )
+            
+            example2.click(
+                lambda: ["transaction", "user789", "game456", "User purchased 500 coins for $4.99"],
+                outputs=[event_type, user_id, game_id, event_content]
+            )
+            
+            example3.click(
+                lambda: ["achievement", "user456", "game789", "User completed level 10 with score 95/100"],
+                outputs=[event_type, user_id, game_id, event_content]
+            )
+        
+        with gr.TabItem("System Analytics"):
+            gr.Markdown("### SKENAI-RENO Event Processing Analytics")
+            gr.Markdown("""
+            This dashboard shows sample analytics of the SKENAI-RENO event processing pipeline.
+            In a production environment, these metrics would be generated from real-time CloudWatch data.
+            """)
+            
+            with gr.Row():
+                metrics_plot = gr.Plot()
+            
+            with gr.Row():
+                with gr.Column():
+                    latency_plot = gr.Plot()
+                with gr.Column():
+                    error_plot = gr.Plot()
+            
+            refresh_btn = gr.Button("Refresh Analytics")
+        
+        with gr.TabItem("About SKENAI-RENO"):
+            gr.Markdown("""
+            # About SKENAI-RENO
+            
+            SKENAI-RENO is a fully serverless event processing pipeline designed for high-reliability, 
+            AI-enhanced insights, and seamless integration with existing systems.
+            
+            ## Key Features
+            
+            * **Serverless Architecture**: AWS Lambda, SQS, DynamoDB
+            * **AI Enrichment**: Hugging Face models integrated directly into the event pipeline
+            * **High Reliability**: Idempotent processing, dead-letter queues, comprehensive monitoring
+            * **Enterprise Ready**: Secure, scalable, and compliant
+            
+            ## Technical Architecture
+            
+            SKENAI-RENO uses a multi-stage serverless architecture:
+            
+            1. **Event Sources**: Capture events from various sources (gaming, web, mobile, IoT)
+            2. **Redpanda**: High-performance event streaming platform
+            3. **Lambda Connector**: Processes events from Redpanda and sends to SQS
+            4. **SQS Queue**: Decouples components and provides buffering
+            5. **AI Processor Lambda**: Enriches events with AI insights using Hugging Face models
+            6. **DynamoDB**: Stores processed events for analysis and retrieval
+            
+            ## Integration Options
+            
+            * REST API for direct event submission
+            * SDK libraries for major platforms
+            * Webhook integrations
+            * Custom connectors for enterprise systems
+            
+            ## Learn More
+            
+            For enterprise solutions and partnership opportunities, visit [skenai-reno.com](https://skenai-reno.com)
+            """)
+    
+    # Set up event handlers
+    submit_btn.click(
+        process_event,
+        inputs=[event_type, event_content, user_id, game_id],
+        outputs=output
+    )
+    
+    # Initialize and refresh the analytics
+    refresh_btn.click(
+        lambda: [generate_metrics_visualization(), *create_processing_pipeline_visualization()],
+        outputs=[metrics_plot, latency_plot, error_plot]
+    )
+    
+    # Initialize the analytics on page load
+    demo.load(
+        lambda: [generate_metrics_visualization(), *create_processing_pipeline_visualization()],
+        outputs=[metrics_plot, latency_plot, error_plot]
+    )
+
+# Launch the app
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -0,0 +1,5 @@
+gradio>=3.50.2
+requests>=2.31.0
+numpy>=1.24.0
+pandas>=2.0.0
+plotly>=5.14.0

rosetta_animation.py

@@ -0,0 +1,149 @@
+"""
+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()