technology software

English

Within the developer-focused generic top-level domain (.dev), 'interactive-ai-chatbot-momgegnw-17d4-31y5k5m3d6.edgeone.dev' is registered, featuring subdomain 'interactive-ai-chatbot-momgegnw-17d4-31y5k5m3d6'. The registrable portion 'edgeone' spans 7 characters split between 4 vowels and 3 consonants. Segmentation suggests 2 words: edge, one. Expect 3.5 characters per word on average. No strong language cues emerged from the frequency lists.

html/d3/2f/d32f33b3-6b7f-4271-9146-d798db3e0635.html.gz

ca330dc6b8e6a0a88a0b707e40a5191110c3e86842c7c6431a7a7a2e972f08f5

b673820981396387b036f655e69bb31cafc8e3a8412da655ca639d5bebae79ed

3af03f4b6224329533fdad476d497c29b0bf3650161186381ebf835a322a8dc1

viewport

width=device-width, initial-scale=1, user-scalable=no

AI-powered interactive UI generation using A2UI protocol

description

theme-color

twitter:card

Prudence Malinki

MarkMonitor Inc.

edgeone.dev

IRT-SG-ACE

ACE administrator

ACE-SG


  // JSON character set
  const JSON_CHARS = ['{', '}', '[', ']', '"', ':', ',', 'data', 'type', 'value', 'props'];
  
  // UI component types
  const UIComponentType = {
    INPUT: 'input',
    BUTTON: 'button',
    CARD: 'card',
    CHECKBOX: 'checkbox',
    SLIDER: 'slider'
  };

  // Load Three.js from CDN
  import('https://cdn.jsdelivr.net/npm/three@0.163.0/build/three.module.js').then((THREE) => {

  // Random color pool (rich and colorful)
  const COLORS = [
    '#6432e6', // Purple
    '#e62e8b', // Rose
    '#2e86e6', // Blue
    '#e6962e', // Orange
    '#2ee6a6', // Cyan
    '#e6e62e', // Yellow
    '#8b2ee6', // Deep purple
    '#2ee65a', // Green
    '#e62e5a', // Red
    '#5a2ee6', // Blue-purple
  ];

  class JsonToUIAnimation {
    constructor(canvas) {
      this.canvas = canvas;
      this.particles = [];
      this.particleCount = 50;
      this.uiTextureCache = new Map();
      this.init();
      this.createParticles();
      this.animate();
      
      window.addEventListener('resize', () => this.onResize());
    }

    init() {
      this.scene = new THREE.Scene();

      const wrapper = this.canvas.parentElement;
      const aspect = wrapper.clientWidth / wrapper.clientHeight;
      this.camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
      this.camera.position.z = 400;

      this.renderer = new THREE.WebGLRenderer({
        canvas: this.canvas,
        alpha: true,
        antialias: true
      });
      this.renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
      this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    }

    // Create JSON text texture (neon glow effect)
    createTextTexture(text, color = '#6432e6') {
      const canvas = document.createElement('canvas');
      // Dynamically adjust canvas width based on text length
      const width = text.length > 2 ? 512 : 256;
      canvas.width = width;
      canvas.height = 256;
      const ctx = canvas.getContext('2d');
      
      ctx.font = '120px monospace';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      
      // Use composite mode to create glow effect
      ctx.globalCompositeOperation = 'lighter'; // Key: additive glow
      
      // Outer glow (large blur)
      ctx.fillStyle = color;
      ctx.filter = 'blur(20px)';
      ctx.globalAlpha = 0.3;
      ctx.fillText(text, width / 2, 128);
      ctx.fillText(text, width / 2, 128);
      ctx.fillText(text, width / 2, 128);
      
      // Middle glow
      ctx.filter = 'blur(10px)';
      ctx.globalAlpha = 0.5;
      ctx.fillText(text, width / 2, 128);
      ctx.fillText(text, width / 2, 128);
      
      // Inner glow
      ctx.filter = 'blur(5px)';
      ctx.globalAlpha = 0.7;
      ctx.fillText(text, width / 2, 128);
      
      // Core text (clear, no blur)
      ctx.filter = 'none';
      ctx.globalAlpha = 1.0;
      ctx.fillText(text, width / 2, 128);

      return new THREE.CanvasTexture(canvas);
    }

    // Create UI component icon texture (neon glow effect)
    createUIIconTexture(type, color = '#8a2be2') {
      const canvas = document.createElement('canvas');
      canvas.width = 256;
      canvas.height = 256;
      const ctx = canvas.getContext('2d');
      
      ctx.strokeStyle = color;
      ctx.fillStyle = color;
      ctx.lineWidth = 6;
      
      // Use composite mode to create glow effect
      ctx.globalCompositeOperation = 'lighter';
      
      // Define drawing function
      const drawIcon = () => {
        switch (type) {
          case UIComponentType.INPUT:
            ctx.strokeRect(40, 100, 176, 56);
            ctx.fillRect(50, 116, 40, 24);
            break;
          
          case UIComponentType.BUTTON:
            ctx.beginPath();
            ctx.roundRect(50, 90, 156, 76, 16);
            ctx.fill();
            ctx.stroke();
            break;
          
          case UIComponentType.CARD:
            ctx.strokeRect(40, 60, 176, 136);
            ctx.fillRect(50, 70, 156, 16);
            ctx.fillRect(50, 100, 80, 12);
            ctx.fillRect(50, 124, 100, 12);
            break;
          
          case UIComponentType.CHECKBOX:
            ctx.strokeRect(80, 80, 96, 96);
            ctx.beginPath();
            ctx.moveTo(100, 128);
            ctx.lineTo(120, 148);
            ctx.lineTo(156, 104);
            ctx.stroke();
            break;
          
          case UIComponentType.SLIDER:
            ctx.beginPath();
            ctx.moveTo(40, 128);
            ctx.lineTo(216, 128);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(140, 128, 24, 0, Math.PI * 2);
            ctx.fill();
            ctx.stroke();
            break;
        }
      };
      
      // Outer glow (multiple draws for enhanced effect)
      ctx.filter = 'blur(15px)';
      ctx.globalAlpha = 0.3;
      drawIcon();
      drawIcon();
      drawIcon();
      
      // Middle glow
      ctx.filter = 'blur(8px)';
      ctx.globalAlpha = 0.5;
      drawIcon();
      drawIcon();
      
      // Inner glow
      ctx.filter = 'blur(4px)';
      ctx.globalAlpha = 0.7;
      drawIcon();
      
      // Core icon (clear)
      ctx.filter = 'none';
      ctx.globalAlpha = 1.0;
      drawIcon();

      return new THREE.CanvasTexture(canvas);
    }

    createParticles() {
      const uiTypes = Object.values(UIComponentType);
      const wrapper = this.canvas.parentElement;
      const canvasWidth = wrapper.clientWidth;
      const margin = 150; // Edge margin

      for (let i = 0; i < this.particleCount; i++) {
        // Start position outside left edge (with margin)
        const startX = -canvasWidth / 2 - margin + Math.random() * 200;
        const y = (Math.random() - 0.5) * 400; // Increase vertical range
        const z = (Math.random() - 0.5) * 200;

        // Random color
        const color = COLORS[Math.floor(Math.random() * COLORS.length)];

        // 50% probability to transform into UI icon
        const willTransform = Math.random() > 0.5;
        let texture;
        let targetType;

        // Initially all are JSON symbols
        const char = JSON_CHARS[Math.floor(Math.random() * JSON_CHARS.length)];
        texture = this.createTextTexture(char, color);
        
        // Adjust sprite width based on text length (reduced by 1/4: 16→12, 32→24)
        const spriteWidth = char.length > 2 ? 24 : 12;
        const spriteHeight = 12;
        
        // Only particles with willTransform will become UI icons on the right
        if (willTransform) {
          targetType = uiTypes[Math.floor(Math.random() * uiTypes.length)];
        }

        const material = new THREE.SpriteMaterial({
          map: texture,
          transparent: true,
          opacity: 0, // Initially transparent
          blending: THREE.AdditiveBlending
        });

        const sprite = new THREE.Sprite(material);
        sprite.position.set(startX, y, z);
        sprite.scale.set(spriteWidth, spriteHeight, 1); // Adjust based on text length
        
        this.scene.add(sprite);

        this.particles.push({
          mesh: sprite,
          velocity: new THREE.Vector3(
            Math.random() * 0.4 + 0.25, // x: rightward (half speed)
            (Math.random() - 0.5) * 0.15, // y: slight up/down (half speed)
            (Math.random() - 0.5) * 0.1  // z: slight forward/back (half speed)
          ),
          startX,
          phase: 'json',
          targetType, // If undefined, always stays JSON
          rotationSpeed: (Math.random() - 0.5) * 0.01, // Half rotation speed
          color,
          currentText: char // Record current text
        });
      }
    }

    updateParticle(particle) {
      const pos = particle.mesh.position;
      const wrapper = this.canvas.parentElement;
      const canvasWidth = wrapper.clientWidth;
      const margin = 150; // Edge margin
      const edgeFadeDistance = 100; // Edge fade in/out distance
      const centerFadeDistance = 120; // Center line fade in/out distance
      
      // Update position
      pos.x += particle.velocity.x;
      pos.y += particle.velocity.y;
      pos.z += particle.velocity.z;

      // Rotation effect
      particle.mesh.material.rotation += particle.rotationSpeed;

      // Calculate boundaries (considering margin)
      const leftBoundary = -canvasWidth / 2 + margin;
      const rightBoundary = canvasWidth / 2 - margin;
      const centerLine = 0; // Screen center line
      
      // Determine phase and opacity based on X coordinate
      if (pos.x < centerLine - centerFadeDistance) {
        // Left area: display JSON symbols
        particle.phase = 'json';
        // Set width based on current text length (reduced by 1/4: 32→24, 16→12)
        const spriteWidth = (particle.currentText && particle.currentText.length > 2) ? 24 : 12;
        if (particle.mesh.scale.x !== spriteWidth || particle.mesh.scale.y !== 12) {
          particle.mesh.scale.set(spriteWidth, 12, 1);
        }
        
        // Edge fade-in effect
        if (pos.x < leftBoundary + edgeFadeDistance) {
          const fadeProgress = (pos.x - (leftBoundary - edgeFadeDistance)) / edgeFadeDistance;
          particle.mesh.material.opacity = Math.max(0, Math.min(0.85, fadeProgress * 0.85));
        } else {
          particle.mesh.material.opacity = 0.85;
        }
      } else if (pos.x < centerLine) {
        // Near center line left: JSON fades out and disappears
        particle.phase = 'transition';
        const fadeOutProgress = (centerLine - pos.x) / centerFadeDistance; // 1 → 0
        particle.mesh.material.opacity = Math.max(0, Math.min(0.85, fadeOutProgress * 0.85));
      } else if (particle.targetType && pos.x < centerLine + centerFadeDistance) {
        // Near center line right: only particles with targetType become UI and fade in
        particle.phase = 'ui';
        const fadeInProgress = (pos.x - centerLine) / centerFadeDistance; // 0 → 1
        particle.mesh.material.opacity = Math.max(0, Math.min(0.85, fadeInProgress * 0.85));
        
        // Switch to UI texture and size (reduced by 1/4: 21→16)
        particle.mesh.material.map = this.getUITexture(particle.targetType, particle.color);
        particle.mesh.material.needsUpdate = true;
        if (particle.mesh.scale.x !== 16) {
          particle.mesh.scale.set(16, 16, 1); // UI icon size
        }
      } else if (particle.targetType) {
        // Right area: display UI icons (only particles with targetType)
        particle.phase = 'ui';
        if (particle.mesh.scale.x !== 16) {
          particle.mesh.scale.set(16, 16, 1); // UI icon size
        }
        
        // Edge fade-out effect
        if (pos.x > rightBoundary - edgeFadeDistance) {
          const fadeProgress = (rightBoundary - pos.x) / edgeFadeDistance;
          particle.mesh.material.opacity = Math.max(0, Math.min(0.85, fadeProgress * 0.85));
        } else {
          particle.mesh.material.opacity = 0.85;
        }
      } else {
        // Particles without targetType remain transparent after center line (disappeared state)
        particle.mesh.material.opacity = 0;
      }

      // Loop: reset from right to left
      if (pos.x > rightBoundary + edgeFadeDistance) {
        pos.x = leftBoundary - edgeFadeDistance + Math.random() * 100;
        pos.y = (Math.random() - 0.5) * 400; // Increase vertical range
        pos.z = (Math.random() - 0.5) * 200;
        particle.phase = 'json';
        
        // Re-randomize color
        particle.color = COLORS[Math.floor(Math.random() * COLORS.length)];
        
        // Re-randomize decision to transform to UI
        if (Math.random() > 0.5) {
          const uiTypes = Object.values(UIComponentType);
          particle.targetType = uiTypes[Math.floor(Math.random() * uiTypes.length)];
        } else {
          particle.targetType = undefined; // Keep pure JSON
        }
        
        // Reset to JSON texture
        const char = JSON_CHARS[Math.floor(Math.random() * JSON_CHARS.length)];
        particle.currentText = char; // Update current text
        particle.mesh.material.map = this.createTextTexture(char, particle.color);
        particle.mesh.material.needsUpdate = true;
        // Set size based on text length (reduced by 1/4: 32→24, 16→12)
        const spriteWidth = char.length > 2 ? 24 : 12;
        particle.mesh.scale.set(spriteWidth, 12, 1);
        particle.mesh.material.opacity = 0; // Reset to transparent
      }

      // Y and Z boundaries (increased range)
      if (pos.y > 200) pos.y = -200;
      if (pos.y < -200) pos.y = 200;
      if (pos.z > 100) pos.z = -100;
      if (pos.z < -100) pos.z = 100;
    }

    // Cache UI textures (by type and color)
    getUITexture(type, color) {
      const key = `${type}-${color}`;
      if (!this.uiTextureCache.has(key)) {
        this.uiTextureCache.set(key, this.createUIIconTexture(type, color));
      }
      return this.uiTextureCache.get(key);
    }

    animate = () => {
      requestAnimationFrame(this.animate);

      this.particles.forEach(particle => this.updateParticle(particle));

      this.renderer.render(this.scene, this.camera);
    };

    onResize() {
      const wrapper = this.canvas.parentElement;
      const aspect = wrapper.clientWidth / wrapper.clientHeight;
      this.camera.aspect = aspect;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
    }
  }

    const canvas = document.getElementById('json-to-ui-canvas');
    if (canvas) {
      new JsonToUIAnimation(canvas);
    }
  }).catch(console.error);


const t=document.getElementById("getStartedBtn");t&&t.addEventListener("click",e=>{e.preventDefault(),t.style.transform="scale(0.98)",t.style.transition="transform 0.1s ease",setTimeout(()=>{t.style.transform="",window.location.href="/chat"},100)});

A2UI - AI-Powered Interactive UI

✅ Low Risk - https://interactive-ai-chatbot-momgegnw-17d4-31y5k5m3d6.edgeone.dev/

Requests	IP Address	Location	AS Autonomous System
3	104.17.208.5	United States	AS13335Cloudflare, Inc.
2	43.174.247.29	Singapore	AS139341ACE
5	2	-	-

Security Scan Report: interactive-ai-chatbot-momgegnw-17d4-31y5k5m3d6.edgeone.dev

Summary

AI Security Verdict

Low Risk

Risk Factors

Safety Factors

Details

Screenshot

Page Load Overview

Language Analysis

Primary Language

Detection Details

Website Classification

Primary Category

All Detected Categories

Detected Features

Domain & IP Information

Content Similarity HashesFor malware variant detection

TLSH (Trend Micro Locality Sensitive Hash)

ssdeep (Context Triggered Piecewise Hashing)

sdhash (Similarity Digest Hashing)

Image Hashes

Perceptual Hashes

Other Hashes

Scan History