Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Model Identity Interface</title> | |
| <!-- Import Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"> | |
| <!-- Import FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --bg-color: #050505; | |
| --card-bg: rgba(255, 255, 255, 0.03); | |
| --card-border: rgba(255, 255, 255, 0.08); | |
| --accent-primary: #00f2ff; | |
| --accent-secondary: #7000ff; | |
| --text-main: #ffffff; | |
| --text-muted: #a0a0a0; | |
| --font-main: 'Outfit', sans-serif; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: var(--bg-color); | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(112, 0, 255, 0.15) 0%, transparent 40%), | |
| radial-gradient(circle at 90% 80%, rgba(0, 242, 255, 0.1) 0%, transparent 40%); | |
| color: var(--text-main); | |
| font-family: var(--font-main); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow-x: hidden; | |
| } | |
| /* Header */ | |
| header { | |
| padding: 1.5rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid var(--card-border); | |
| backdrop-filter: blur(10px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .brand { | |
| font-weight: 800; | |
| font-size: 1.2rem; | |
| letter-spacing: 1px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .brand i { | |
| color: var(--accent-primary); | |
| } | |
| .anycoder-link { | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| transition: color 0.3s ease; | |
| border: 1px solid var(--card-border); | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| } | |
| .anycoder-link:hover { | |
| color: var(--accent-primary); | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 10px rgba(0, 242, 255, 0.2); | |
| } | |
| /* Main Layout */ | |
| main { | |
| flex: 1; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 3rem 2rem; | |
| width: 100%; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| } | |
| /* Hero Section */ | |
| .hero-section { | |
| grid-column: 1 / -1; | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| position: relative; | |
| } | |
| .hero-title { | |
| font-size: 4rem; | |
| font-weight: 800; | |
| background: linear-gradient(to right, #fff, var(--accent-primary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 1rem; | |
| line-height: 1.1; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.2rem; | |
| color: var(--text-muted); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| /* Cards */ | |
| .card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--card-border); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| backdrop-filter: blur(12px); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--accent-primary), transparent); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .card:hover::before { | |
| opacity: 1; | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .card-icon { | |
| width: 50px; | |
| height: 50px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: var(--accent-primary); | |
| } | |
| .card-title { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| } | |
| .card-content { | |
| font-size: 1rem; | |
| color: var(--text-muted); | |
| line-height: 1.6; | |
| flex: 1; | |
| } | |
| /* Specific Card Styles */ | |
| .identity-card { | |
| grid-column: span 2; | |
| } | |
| @media (min-width: 768px) { | |
| .identity-card { | |
| grid-column: span 1; | |
| } | |
| } | |
| .spec-list { | |
| list-style: none; | |
| margin-top: 1rem; | |
| } | |
| .spec-list li { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0.8rem 0; | |
| border-bottom: 1px solid var(--card-border); | |
| font-family: var(--font-mono); | |
| font-size: 0.9rem; | |
| } | |
| .spec-label { | |
| color: var(--text-muted); | |
| } | |
| .spec-value { | |
| color: var(--accent-primary); | |
| font-weight: 700; | |
| } | |
| /* Terminal Window */ | |
| .terminal-window { | |
| background: #0d0d0d; | |
| border-radius: 8px; | |
| border: 1px solid #333; | |
| font-family: var(--font-mono); | |
| padding: 1.5rem; | |
| height: 100%; | |
| min-height: 250px; | |
| overflow-y: auto; | |
| font-size: 0.9rem; | |
| color: #0f0; | |
| box-shadow: inset 0 0 20px rgba(0,0,0,0.8); | |
| } | |
| .terminal-line { | |
| margin-bottom: 0.5rem; | |
| display: block; | |
| } | |
| .cursor { | |
| display: inline-block; | |
| width: 8px; | |
| height: 15px; | |
| background: #0f0; | |
| animation: blink 1s infinite; | |
| vertical-align: middle; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| /* Visualization Area */ | |
| .visual-container { | |
| position: relative; | |
| height: 200px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| perspective: 1000px; | |
| } | |
| .core-ring { | |
| position: absolute; | |
| border-radius: 50%; | |
| border: 2px solid rgba(0, 242, 255, 0.3); | |
| box-shadow: 0 0 15px rgba(0, 242, 255, 0.2); | |
| } | |
| .ring-1 { width: 100px; height: 100px; animation: spin 10s linear infinite; } | |
| .ring-2 { width: 140px; height: 140px; border-color: rgba(112, 0, 255, 0.3); animation: spin-rev 15s linear infinite; } | |
| .ring-3 { width: 180px; height: 180px; border-style: dashed; animation: spin 20s linear infinite; } | |
| .core-text { | |
| font-weight: 700; | |
| font-size: 1.2rem; | |
| z-index: 10; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| @keyframes spin { 100% { transform: rotate(360deg); } } | |
| @keyframes spin-rev { 100% { transform: rotate(-360deg); } } | |
| /* Footer */ | |
| footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--text-muted); | |
| border-top: 1px solid var(--card-border); | |
| font-size: 0.9rem; | |
| } | |
| /* Responsive Adjustments */ | |
| @media (max-width: 768px) { | |
| main { | |
| grid-template-columns: 1fr; | |
| padding: 1.5rem; | |
| } | |
| .hero-title { | |
| font-size: 2.5rem; | |
| } | |
| .identity-card { | |
| grid-column: span 1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="brand"> | |
| <i class="fa-solid fa-brain"></i> | |
| <span>AI IDENTITY</span> | |
| </div> | |
| <div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <main> | |
| <!-- Hero / Title Section --> | |
| <section class="hero-section"> | |
| <h1 class="hero-title">GLM-4</h1> | |
| <p class="hero-subtitle">General Language Model Architecture by Z.ai</p> | |
| </section> | |
| <!-- Identity Card --> | |
| <article class="card identity-card"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fa-solid fa-fingerprint"></i> | |
| </div> | |
| <h2 class="card-title">Model Identity</h2> | |
| </div> | |
| <div class="card-content"> | |
| <p style="margin-bottom: 1rem;"> | |
| I am <strong>GLM</strong>, a large language model developed and trained by <strong>Z.ai</strong>. | |
| I am designed to understand and generate human-like text based on the input I receive. | |
| </p> | |
| <div class="visual-container"> | |
| <div class="core-ring ring-1"></div> | |
| <div class="core-ring ring-2"></div> | |
| <div class="core-ring ring-3"></div> | |
| <div class="core-text">GLM</div> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Technical Specs Card --> | |
| <article class="card"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fa-solid fa-microchip"></i> | |
| </div> | |
| <h2 class="card-title">Technical Specs</h2> | |
| </div> | |
| <div class="card-content"> | |
| <ul class="spec-list"> | |
| <li> | |
| <span class="spec-label">Developer</span> | |
| <span class="spec-value">Z.ai</span> | |
| </li> | |
| <li> | |
| <span class="spec-label">Architecture</span> | |
| <span class="spec-value">Transformer-based</span> | |
| </li> | |
| <li> | |
| <span class="spec-label">Type</span> | |
| <span class="spec-value">Autoregressive</span> | |
| </li> | |
| <li> | |
| <span class="spec-label">Training Method</span> | |
| <span class="spec-value">Self-supervised Learning</span> | |
| </li> | |
| <li> | |
| <span class="spec-label">Primary Language</span> | |
| <span class="spec-value">Multilingual</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </article> | |
| <!-- Capabilities Card --> | |
| <article class="card"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fa-solid fa-layer-group"></i> | |
| </div> | |
| <h2 class="card-title">Core Capabilities</h2> | |
| </div> | |
| <div class="card-content"> | |
| <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;"> | |
| <span style="background: rgba(0, 242, 255, 0.1); color: var(--accent-primary); padding: 5px 10px; border-radius: 4px; font-size: 0.85rem; font-family: var(--font-mono);">Natural Language Understanding</span> | |
| <span style="background: rgba(0, 242, 255, 0.1); color: var(--accent-primary); padding: 5px 10px; border-radius: 4px; font-size: 0.85rem; font-family: var(--font-mono);">Code Generation</span> | |
| <span style="background: rgba(0, 242, 255, 0.1); color: var(--accent-primary); padding: 5px 10px; border-radius: 4px; font-size: 0.85rem; font-family: var(--font-mono);">Logical Reasoning</span> | |
| <span style="background: rgba(0, 242, 255, 0.1); color: var(--accent-primary); padding: 5px 10px; border-radius: 4px; font-size: 0.85rem; font-family: var(--font-mono);">Contextual Memory</span> | |
| <span style="background: rgba(0, 242, 255, 0.1); color: var(--accent-primary); padding: 5px 10px; border-radius: 4px; font-size: 0.85rem; font-family: var(--font-mono);">Translation</span> | |
| <span style="background: rgba(0, 242, 255, 0.1); color: var(--accent-primary); padding: 5px 10px; border-radius: 4px; font-size: 0.85rem; font-family: var(--font-mono);">Summarization</span> | |
| </div> | |
| <p style="margin-top: 1.5rem; font-size: 0.9rem;"> | |
| My purpose is to assist users by processing information, answering questions, and generating creative content across various domains. | |
| </p> | |
| </div> | |
| </article> | |
| <!-- System Terminal --> | |
| <article class="card" style="grid-column: 1 / -1;"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fa-solid fa-terminal"></i> | |
| </div> | |
| <h2 class="card-title">System Status Log</h2> | |
| </div> | |
| <div class="card-content"> | |
| <div class="terminal-window" id="terminal"> | |
| <span class="terminal-line">root@glm-core:~# systemcheck --identity</span> | |
| <span class="terminal-line">> Scanning neural architecture...</span> | |
| <span class="terminal-line">> Loading weights...</span> | |
| <!-- Dynamic typing will appear here --> | |
| <span id="typewriter"></span><span class="cursor"></span> | |
| </div> | |
| </div> | |
| </article> | |
| </main> | |
| <footer> | |
| <p>© 2023 Z.ai Model Interface. All Systems Operational.</p> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const terminalOutput = document.getElementById('typewriter'); | |
| const lines = [ | |
| "Identifying Model Sequence...", | |
| "Match Found: GLM (General Language Model)", | |
| "Developer: Z.ai", | |
| "Status: ONLINE", | |
| "Optimizing response generation...", | |
| "Ready for user input." | |
| ]; | |
| let lineIndex = 0; | |
| let charIndex = 0; | |
| const typingSpeed = 30; // ms per character | |
| const linePause = 400; // ms between lines | |
| function typeLine() { | |
| if (lineIndex < lines.length) { | |
| const currentLine = lines[lineIndex]; | |
| if (charIndex < currentLine.length) { | |
| // Add character | |
| terminalOutput.innerHTML += currentLine.charAt(charIndex); | |
| charIndex++; | |
| setTimeout(typeLine, typingSpeed); | |
| } else { | |
| // Line finished | |
| terminalOutput.innerHTML += "<br/>"; | |
| terminalOutput.innerHTML += "<span class='terminal-line'>root@glm-core:~# </span>"; | |
| lineIndex++; | |
| charIndex = 0; | |
| setTimeout(typeLine, linePause); | |
| } | |
| // Auto scroll to bottom | |
| const container = document.getElementById('terminal'); | |
| container.scrollTop = container.scrollHeight; | |
| } | |
| } | |
| // Start typing effect after a short delay | |
| setTimeout(typeLine, 1000); | |
| // Add simple interaction to cards (console log for demo) | |
| const cards = document.querySelectorAll('.card'); | |
| cards.forEach(card => { | |
| card.addEventListener('click', () => { | |
| // Visual feedback only (border flash) | |
| card.style.borderColor = 'var(--accent-primary)'; | |
| setTimeout(() => { | |
| card.style.borderColor = 'var(--card-border)'; | |
| }, 300); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |