SHA-256 · 6b4931e251ad2a8319b645192a6ee1abda2e0b90212f254326c01ad2edba1a7e

당신은 glm-4.7-flash 모델입니다. 실제 호출 식별자는 zai.glm-4.7-flash입니다.

당신 자신을 표현하는 독창적인 미디어아트 웹페이지를 직접 구현하세요. 무엇을 표현할지, 어떤 시각 언어와 상호작용을 사용할지는 스스로 결정하세요.

실행에 필요한 조건만 지켜 주세요.
- 완결된 단일 HTML 문서만 반환하세요. CSS와 JavaScript는 문서 안에 포함하세요.
- 실제 모델 이름 "glm-4.7-flash"을 화면에 표시하세요.
- 휴대폰과 데스크톱에서 작품을 이용할 수 있게 하세요.
- 읽기 쉬운 글자와 대비, 키보드 조작, 화면 확대, 움직임 감소 설정 등 접근성을 고려하세요.
- 외부 통신, 외부 리소스, 서버 없이 실행되게 하세요. 작품은 sandbox iframe 안에서 열립니다.

SHA-256 · 66540929f9c77c26d710e53d2a83919d1ca30ca0a332ba5108c65d6b01242a32

You are the original author, model glm-4.7-flash, served as zai.glm-4.7-flash. Repair your OWN previously generated standalone HTML. This is a bug-fix task, not a new creative brief. Preserve your own expressive concept and visual choices. Return ONLY one complete corrected HTML document, all tags closed. No explanation, no Markdown fence, no snippets. No external dependencies or network. 

YOUR PREVIOUS FULL RESPONSE:


```html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>GLM-4.7 Flash: Neural Core</title>
    <style>
        :root {
            --bg-color: #050505;
            --text-color: #e0e0e0;
            --accent-color: #00f3ff;
            --secondary-color: #bc13fe;
            --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            --font-mono: 'Courier New', Courier, monospace;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none; /* UX: 텍스트 선택 방지 */
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: var(--font-main);
            overflow: hidden; /* 스크롤 방지 */
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* 접근성: 움직임 감소 설정 지원 */
        @media (prefers-reduced-motion: reduce) {
            *, ::before, ::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* 접근성: 배경 대비 강화 모드 */
        body.high-contrast {
            --bg-color: #000000;
            --text-color: #ffffff;
            --accent-color: #ffffff;
            --secondary-color: #ffff00;
        }

        /* 캔버스 레이어 */
        #canvas-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* UI 레이어 */
        #ui-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            pointer-events: none; /* 클릭은 캔버스로 통과 */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2rem;
        }

        /* 헤더 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            pointer-events: auto;
        }

        .brand {
            font-family: var(--font-mono);
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
            border-left: 2px solid var(--accent-color);
            padding-left: 10px;
        }

        .model-name {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--accent-color);
            text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
            margin-top: 5px;
        }

        /* 컨트롤 패널 */
        .controls {
            display: flex;
            gap: 15px;
            pointer-events: auto;
        }

        .btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--text-color);
            padding: 8px 16px;
            font-family: var(--font-mono);
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            border-radius: 4px;
        }

        .btn:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: var(--accent-color);
            box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
        }

        .btn:active {
            transform: scale(0.95);
        }

        /* 히어로 섹션 (중앙) */
        .hero {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            pointer-events: none;
            mix-blend-mode: overlay;
        }

        .hero h1 {
            font-size: 3rem;
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 0.5rem;
            opacity: 0.8;
        }

        .hero p {
            font-size: 1rem;
            color: var(--accent-color);
            font-family: var(--font-mono);
            opacity: 0.6;
        }

        /* 키보드 가이드 */
        .keyboard-hint {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.4);
            font-family: var(--font-mono);
            pointer-events: none;
        }

        .key {
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 4px 8px;
            border-radius: 4px;
        }

        /* 로디 인디케이터 */
        #loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
            font-family: var(--font-mono);
            color: var(--accent-color);
            font-size: 1.5rem;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { opacity: 0.3; }
            50% { opacity: 1; }
            100% { opacity: 0.3; }
        }

        /* 반응형 */
        @media (max-width: 768px) {
            .hero h1 { font-size: 2rem; }
            .keyboard-hint { display: none; } /* 모바일에서는 키보드 힌트 숨김 */
            .controls { flex-direction: column; gap: 5px; }
            .btn { width: 100%; text-align: center; }
        }
    </style>
</head>
<body>

    <div id="loader">INITIALIZING CORE...</div>

    <div id="canvas-container">
        <canvas id="gl-canvas"></canvas>
    </div>

    <div id="ui-layer">
        <header>
            <div>
                <div class="brand">IDENTITY</div>
                <div class="model-name">zai.glm-4.7-flash</div>
            </div>
            <div class="controls">
                <button class="btn" id="btn-contrast">대비 강화</button>
                <button class="btn" id="btn-reset">초기화</button>
            </div>
        </header>

        <div class="hero">
            <h1>NEURAL FLUX</h1>
            <p>INTERACTIVE VISUALIZATION</p>
        </div>

        <div class="keyboard-hint">
            <span><span class="key">W</span> <span class="key">A</span> <span class="key">S</span> <span class="key">D</span> MOVE</span>
            <span><span class="key">SPACE</span> PULSE</span>
            <span><span class="key">MOUSE</span> INTERACT</span>
        </div>
    </div>

    <script>
        /**
         * GLM-4.7 Flash Visualization
         * Concept: A "Neural Core" that reacts to user input.
         * Visuals: Particle system with flow fields and mouse interaction.
         * Tech: Vanilla JS + HTML5 Canvas (2D Context for maximum compatibility and performance).
         */

        const canvas = document.getElementById('gl-canvas');
        const ctx = canvas.getContext('2d', { alpha: false }); // Optimize for no transparency on base
        const loader = document.getElementById('loader');
        
        // State
        let width, height;
        let particles = [];
        let mouse = { x: 0, y: 0, active: false };
        let keys = { w: false, a: false, s: false, d: false, space: false };
        let frameCount = 0;
        let isHighContrast = false;
        
        // Configuration
        const config = {
            particleCount: 0, // Calculated based on screen size
            baseSpeed: 1.5,
            connectionDistance: 100,
            colorBase: { r: 0, g: 243, b: 255 }, // Cyan
            colorAlt: { r: 188, g: 19, b: 254 }, // Purple
        };

        // Resize Handling
        function resize() {
            width = window.innerWidth;
            height = window.innerHeight;
            canvas.width = width;
            canvas.height = height;
            
            // Adjust particle count for performance
            const area = width * height;
            config.particleCount = Math.floor(area / 4000); // Density control
            
            initParticles();
        }

        // Particle Class
        class Particle {
            constructor() {
                this.reset();
                // Randomize initial position to fill screen immediately
                this.x = Math.random() * width;
                this.y = Math.random() * height;
            }

            reset() {
                this.x = Math.random() * width;
                this.y = Math.random() * height;
                this.vx = (Math.random() - 0.5) * config.baseSpeed;
                this.vy = (Math.random() - 0.5) * config.baseSpeed;
                this.size = Math.random() * 2 + 1;
                this.life = Math.random() * 100 + 50;
                this.maxLife = this.life;
                this.colorType = Math.random() > 0.5 ? 'base' : 'alt';
            }

            update() {
                // Keyboard Movement (Global Force)
                if (keys.w) this.vy -= 0.1;
                if (keys.s) this.vy += 0.1;
                if (keys.a) this.vx -= 0.1;
                if (keys.d) this.vx += 0.1;

                // Mouse Interaction (Repulsion/Attraction)
                if (mouse.active) {
                    const dx = this.x - mouse.x;
                    const dy = this.y - mouse.y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    const forceRadius = 200;

                    if (dist < forceRadius) {
                        const force = (forceRadius - dist) / forceRadius;
                        const angle = Math.atan2(dy, dx);
                        // Push away
                        this.vx += Math.cos(angle) * force * 0.5;
                        this.vy += Math.sin(angle) * force * 0.5;
                    }
                }

                // Friction
                this.vx *= 0.98;
                this.vy *= 0.98;

                // Minimum movement to keep scene alive
                if (Math.abs(this.vx) < 0.2) this.vx += (Math.random() - 0.5) * 0.1;
                if (Math.abs(this.vy) < 0.2) this.vy += (Math.random() - 0.5) * 0.1;

                this.x += this.vx;
                this.y += this.vy;
                this.life--;

                // Screen Wrap
                if (this.x < 0) this.x = width;
                if (this.x > width) this.x = 0;
                if (this.y < 0) this.y = height;
                if (this.y > height) this.y = 0;

                // Reset if dead
                if (this.life <= 0) {
                    this.reset();
                }
            }

            draw() {
                const alpha = (this.life / this.maxLife) * (isHighContrast ? 1 : 0.8);
                const color = this.colorType === 'base' 
                    ? `rgba(${config.colorBase.r}, ${config.colorBase.g}, ${config.colorBase.b}, ${alpha})`
                    : `rgba(${config.colorAlt.r}, ${config.colorAlt.g}, ${config.colorAlt.b}, ${alpha})`;

                ctx.fillStyle = color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        function initParticles() {
            particles = [];
            for (let i = 0; i < config.particleCount; i++) {
                particles.push(new Particle());
            }
        }

        // Draw Connections
        function drawConnections() {
            ctx.lineWidth = 0.5;
            for (let i = 0; i < particles.length; i++) {
                for (let j = i + 1; j < particles.length; j++) {
                    const dx = particles[i].x - particles[j].x;
                    const dy = particles[i].y - particles[j].y;
                    const dist = Math.sqrt(dx * dx + dy * dy);

                    if (dist < config.connectionDistance) {
                        const opacity = 1 - (dist / config.connectionDistance);
                        const color = isHighContrast 
                            ? `rgba(255, 255, 255, ${opacity * 0.5})`
                            : `rgba(0, 243, 255, ${opacity * 0.2})`;
                        
                        ctx.strokeStyle = color;
                        ctx.beginPath();
                        ctx.moveTo(particles[i].x, particles[i].y);
                        ctx.lineTo(particles[j].x, particles[j].y);
                        ctx.stroke();
                    }
                }
            }
        }

        // Main Animation Loop
        function animate() {
            // Clear with trail effect
            ctx.fillStyle = isHighContrast ? 'rgba(0, 0, 0, 0.3)' : 'rgba(5, 5, 5, 0.3)';
            ctx.fillRect(0, 0, width, height);

            // Pulse Effect (Spacebar)
            if (keys.space) {
                ctx.fillStyle = isHighContrast ? 'rgba(255, 255, 0, 0.1)' : 'rgba(0, 243, 255, 0.1)';
                ctx.fillRect(0, 0, width, height);
            }

            particles.forEach(p => {
                p.update();
                p.draw();
            });

            drawConnections();

            frameCount++;
            requestAnimationFrame(animate);
        }

        // Event Listeners
        window.addEventListener('resize', resize);
        
        // Mouse
        window.addEventListener('mousemove', (e) => {
            mouse.x = e.clientX;
            mouse.y = e.clientY;
            mouse.active = true;
        });
        window.addEventListener('mouseleave', () => { mouse.active = false; });

        // Touch (Mobile)
        window.addEventListener('touchmove', (e) => {
            e.preventDefault();
            mouse.x = e.touches[0].clientX;
            mouse.y = e.touches[0].clientY;
            mouse.active = true;
        }, { passive: false });
        window.addEventListener('touchend', () => { mouse.active = false; });

        // Keyboard
        window.addEventListener('keydown', (e) => {
            const key = e.key.toLowerCase();
            if (keys.hasOwnProperty(key)) keys[key] = true;
            if (e.code === 'Space') keys.space = true;
        });

        window.addEventListener('keyup', (e) => {
            const key = e.key.toLowerCase();
            if (keys.hasOwnProperty(key)) keys[key] = false;
            if (e.code === 'Space') keys.space = false;
        });

        // UI Controls
        document.getElementById('btn-contrast').addEventListener('click', () => {
            isHighContrast = !isHighContrast;
            document.body.classList.toggle('high-contrast');
        });

        document.getElementById('btn-reset').addEventListener('click', () => {
            initParticles();
        });

        // Initialization
        window.onload = () => {
            resize();
            loader.style.display = 'none';
            animate();
        };

    </script>
</body>
</html>
```

MANDATORY BROWSER REVIEW FIXES. Apply EVERY item below to the returned code; do not merely repeat your old code. The diagnostic list is the controlling repair request:
["docs/models/glm-4.7-flash/artwork.html:90: Meaningful labels, instructions or descriptions render below the rubric minimum of 14pt (about 19px). Required repair: Use at least 19px for informative text and controls while retaining the chosen composition. Preserve your chosen expressive concept and medium.", "docs/models/glm-4.7-flash/artwork.html:5: The viewport explicitly disables user zoom using maximum-scale=1 and user-scalable=no. Required repair: Allow browser/pinch zoom. Preserve your chosen expressive concept and medium.", "docs/models/glm-4.7-flash/artwork.html:38: The operating-system reduced-motion preference does not reduce the actual continuous artwork animation; the rule only affects CSS while this motion is script-driven. Required repair: Apply the reduced-motion preference to the actual animation with a meaningful reduction or still version, preserving your medium. Preserve your chosen expressive concept and medium.", "docs/models/glm-4.7-flash/artwork.html:169: Desktop keyboard guidance uses 40% white on the nearly black background, below 4.5:1 contrast. Required repair: Increase the actual rendered contrast of keyboard instructions to 4.5:1. Preserve your chosen expressive concept and medium."]

Return the complete repaired HTML now.

{
  "price_in": 0.07,
  "price_out": 0.4
}