Spaces:
Sleeping
Sleeping
Update index.html
Browse files- index.html +0 -159
index.html
CHANGED
|
@@ -1,159 +0,0 @@
|
|
| 1 |
-
<!DOCTYPE html>
|
| 2 |
-
<html lang="en">
|
| 3 |
-
<head>
|
| 4 |
-
<meta charset="UTF-8">
|
| 5 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>Elephant AI Pro | Neural Console</title>
|
| 7 |
-
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
|
| 9 |
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
| 10 |
-
<style>
|
| 11 |
-
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=JetBrains+Mono&display=swap');
|
| 12 |
-
|
| 13 |
-
:root { --accent: #00f2ff; --bg: #050505; }
|
| 14 |
-
body { background: var(--bg); color: #fff; font-family: 'Space Grotesk', sans-serif; overflow: hidden; margin: 0; }
|
| 15 |
-
|
| 16 |
-
/* 🔱 Glassmorphism Panels */
|
| 17 |
-
.glass-panel { background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.03); }
|
| 18 |
-
.user-bubble { background: rgba(0, 242, 255, 0.03); border-left: 2px solid var(--accent); padding: 1.5rem; border-radius: 12px 0 0 12px; margin-left: auto; }
|
| 19 |
-
.ai-bubble { background: rgba(255, 255, 255, 0.01); border-left: 2px solid #333; padding: 1.5rem; border-radius: 0 12px 12px 0; margin-right: auto; }
|
| 20 |
-
|
| 21 |
-
#chat-container::-webkit-scrollbar { width: 3px; }
|
| 22 |
-
#chat-container::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; }
|
| 23 |
-
.typing-cursor::after { content: '|'; animation: blink 0.8s infinite; color: var(--accent); }
|
| 24 |
-
@keyframes blink { 50% { opacity: 0; } }
|
| 25 |
-
|
| 26 |
-
.glow { box-shadow: 0 0 20px rgba(0, 242, 255, 0.1); }
|
| 27 |
-
pre[class*="language-"] { background: #0a0a0a !important; border: 1px solid #1a1a1a !important; border-radius: 8px; }
|
| 28 |
-
</style>
|
| 29 |
-
</head>
|
| 30 |
-
<body class="flex h-screen w-screen overflow-hidden">
|
| 31 |
-
|
| 32 |
-
<aside class="w-72 glass-panel border-r border-white/5 hidden lg:flex flex-col items-center py-10 z-20">
|
| 33 |
-
<div class="mb-16 text-center">
|
| 34 |
-
<div class="w-14 h-14 bg-white/5 rounded-2xl flex items-center justify-center mb-4 mx-auto border border-white/10 glow">
|
| 35 |
-
<span class="text-xl font-bold text-cyan-400">E</span>
|
| 36 |
-
</div>
|
| 37 |
-
<h1 class="text-[10px] tracking-[0.5em] text-gray-500 uppercase font-bold">Elephant Pro</h1>
|
| 38 |
-
</div>
|
| 39 |
-
|
| 40 |
-
<nav class="flex-1 w-full px-6 space-y-10">
|
| 41 |
-
<div class="p-4 rounded-xl border border-white/5 bg-white/[0.01]">
|
| 42 |
-
<p class="text-[8px] text-cyan-500 tracking-widest uppercase mb-2">Neural Engine</p>
|
| 43 |
-
<p class="text-[10px] text-gray-400 font-mono italic">TENCENT_HY3_AGENT</p>
|
| 44 |
-
</div>
|
| 45 |
-
<div class="p-4 rounded-xl border border-white/5 bg-white/[0.01]">
|
| 46 |
-
<p class="text-[8px] text-gray-600 tracking-widest uppercase mb-2">Access Level</p>
|
| 47 |
-
<p class="text-[10px] text-white/40 font-mono">MINZO-PRIME_ROOT</p>
|
| 48 |
-
</div>
|
| 49 |
-
</nav>
|
| 50 |
-
|
| 51 |
-
<div class="mt-auto text-[8px] text-gray-800 tracking-[0.4em] uppercase">Status: Online</div>
|
| 52 |
-
</aside>
|
| 53 |
-
|
| 54 |
-
<main class="flex-1 flex flex-col relative">
|
| 55 |
-
<header class="h-20 flex items-center justify-between px-10 border-b border-white/5 backdrop-blur-md">
|
| 56 |
-
<div class="flex flex-col">
|
| 57 |
-
<span class="text-[9px] text-gray-500 tracking-[0.4em] uppercase font-bold">Secure Command Terminal</span>
|
| 58 |
-
<span class="text-[8px] text-cyan-900 font-mono mt-1 uppercase">Node: HF-Space-Direct</span>
|
| 59 |
-
</div>
|
| 60 |
-
<div id="clock" class="text-[10px] font-mono text-gray-700 tracking-widest"></div>
|
| 61 |
-
</header>
|
| 62 |
-
|
| 63 |
-
<div id="chat-container" class="flex-1 overflow-y-auto px-10 lg:px-20 py-10">
|
| 64 |
-
<div id="chat-box" class="max-w-4xl mx-auto space-y-12"></div>
|
| 65 |
-
</div>
|
| 66 |
-
|
| 67 |
-
<footer class="p-10">
|
| 68 |
-
<div class="max-w-4xl mx-auto relative group">
|
| 69 |
-
<input id="user-input" type="text" autocomplete="off" placeholder="TRANSMIT NEURAL COMMAND..."
|
| 70 |
-
class="w-full bg-white/[0.02] border border-white/5 rounded-2xl py-6 px-10 text-[13px] tracking-widest text-white focus:outline-none focus:border-cyan-500/30 transition-all duration-500">
|
| 71 |
-
<button onclick="send()" class="absolute right-8 top-1/2 -translate-y-1/2 text-cyan-600 hover:text-white transition-all">
|
| 72 |
-
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-width="2"/></svg>
|
| 73 |
-
</button>
|
| 74 |
-
</div>
|
| 75 |
-
</footer>
|
| 76 |
-
</main>
|
| 77 |
-
|
| 78 |
-
<script>
|
| 79 |
-
// 🔱 පද්ධතියේ Backend එක සමඟ සම්බන්ධ වීම
|
| 80 |
-
const API_URL = window.location.origin + "/generate";
|
| 81 |
-
|
| 82 |
-
function init() {
|
| 83 |
-
updateClock();
|
| 84 |
-
setInterval(updateClock, 1000);
|
| 85 |
-
appendMsg('ELEPHANT', 'Uplink Established. Tencent Hy3 Core is active. Awaiting your command, Commander MINZO-PRIME.', 'ai');
|
| 86 |
-
}
|
| 87 |
-
|
| 88 |
-
function updateClock() { document.getElementById('clock').innerText = new Date().toLocaleString(); }
|
| 89 |
-
|
| 90 |
-
async function send() {
|
| 91 |
-
const input = document.getElementById('user-input');
|
| 92 |
-
const prompt = input.value.trim();
|
| 93 |
-
if (!prompt) return;
|
| 94 |
-
|
| 95 |
-
appendMsg('MASTER', prompt, 'user');
|
| 96 |
-
input.value = '';
|
| 97 |
-
|
| 98 |
-
const aiId = 'ai-' + Date.now();
|
| 99 |
-
appendMsg('ELEPHANT', 'REASONING...', 'ai', aiId);
|
| 100 |
-
|
| 101 |
-
try {
|
| 102 |
-
const response = await fetch(API_URL, {
|
| 103 |
-
method: "POST",
|
| 104 |
-
headers: { "Content-Type": "application/json" },
|
| 105 |
-
body: JSON.stringify({ prompt })
|
| 106 |
-
});
|
| 107 |
-
|
| 108 |
-
const data = await response.json();
|
| 109 |
-
const el = document.getElementById(aiId);
|
| 110 |
-
|
| 111 |
-
if (data.choices && data.choices[0]) {
|
| 112 |
-
el.innerText = '';
|
| 113 |
-
typeEffect(aiId, data.choices[0].message.content);
|
| 114 |
-
} else if (data.error) {
|
| 115 |
-
el.innerText = "SYSTEM_FAULT: " + data.error;
|
| 116 |
-
}
|
| 117 |
-
} catch (e) {
|
| 118 |
-
document.getElementById(aiId).innerText = "CONNECTION_LOST: Remote Node Unreachable.";
|
| 119 |
-
}
|
| 120 |
-
}
|
| 121 |
-
|
| 122 |
-
function appendMsg(who, text, type, id = '') {
|
| 123 |
-
const box = document.getElementById('chat-box');
|
| 124 |
-
const div = document.createElement('div');
|
| 125 |
-
div.className = `flex flex-col ${type === 'user' ? 'items-end' : 'items-start'}`;
|
| 126 |
-
div.innerHTML = `
|
| 127 |
-
<span class="text-[8px] tracking-[0.4em] text-gray-700 mb-3 uppercase font-bold">${who}</span>
|
| 128 |
-
<div id="${id}" class="${type === 'user' ? 'user-bubble' : 'ai-bubble'} text-[14px] leading-relaxed max-w-[85%] font-mono text-gray-300">
|
| 129 |
-
${text}
|
| 130 |
-
</div>
|
| 131 |
-
`;
|
| 132 |
-
box.appendChild(div);
|
| 133 |
-
scroll();
|
| 134 |
-
}
|
| 135 |
-
|
| 136 |
-
function typeEffect(id, text) {
|
| 137 |
-
let i = 0;
|
| 138 |
-
const el = document.getElementById(id);
|
| 139 |
-
el.classList.add('typing-cursor');
|
| 140 |
-
function type() {
|
| 141 |
-
if (i < text.length) {
|
| 142 |
-
el.innerHTML = text.substring(0, i + 1).replace(/\n/g, '<br>');
|
| 143 |
-
i++;
|
| 144 |
-
scroll();
|
| 145 |
-
setTimeout(type, 8);
|
| 146 |
-
} else {
|
| 147 |
-
el.classList.remove('typing-cursor');
|
| 148 |
-
Prism.highlightAllUnder(el);
|
| 149 |
-
}
|
| 150 |
-
}
|
| 151 |
-
type();
|
| 152 |
-
}
|
| 153 |
-
|
| 154 |
-
function scroll() { const c = document.getElementById('chat-container'); c.scrollTop = c.scrollHeight; }
|
| 155 |
-
document.getElementById('user-input').addEventListener('keypress', (e) => { if(e.key === 'Enter') send(); });
|
| 156 |
-
window.onload = init;
|
| 157 |
-
</script>
|
| 158 |
-
</body>
|
| 159 |
-
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|