Spaces:
Paused
Paused
Delete index.html
Browse files- index.html +0 -166
index.html
DELETED
|
@@ -1,166 +0,0 @@
|
|
| 1 |
-
<!DOCTYPE html>
|
| 2 |
-
<html lang="bn">
|
| 3 |
-
<head>
|
| 4 |
-
<meta charset="UTF-8">
|
| 5 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>Raybil AI Chat System</title>
|
| 7 |
-
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
| 8 |
-
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Hind+Siliguri:wght@400;600&display=swap" rel="stylesheet">
|
| 9 |
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 10 |
-
|
| 11 |
-
<style>
|
| 12 |
-
body {
|
| 13 |
-
font-family: 'Hind Siliguri', 'Fira Code', sans-serif;
|
| 14 |
-
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
|
| 15 |
-
}
|
| 16 |
-
/* গ্লোয়িং অ্যানিমেশন ইফেক্ট */
|
| 17 |
-
.neon-border {
|
| 18 |
-
box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
|
| 19 |
-
}
|
| 20 |
-
/* কাস্টম স্ক্রলবার */
|
| 21 |
-
::-webkit-scrollbar {
|
| 22 |
-
width: 6px;
|
| 23 |
-
}
|
| 24 |
-
::-webkit-scrollbar-track {
|
| 25 |
-
background: #1e1b4b;
|
| 26 |
-
}
|
| 27 |
-
::-webkit-scrollbar-thumb {
|
| 28 |
-
background: #4f46e5;
|
| 29 |
-
border-radius: 10px;
|
| 30 |
-
}
|
| 31 |
-
</style>
|
| 32 |
-
</head>
|
| 33 |
-
<body class="text-slate-100 min-h-screen flex flex-col justify-between overflow-hidden">
|
| 34 |
-
|
| 35 |
-
<header class="w-full bg-slate-900/80 backdrop-blur-md border-b border-indigo-500/30 p-4 flex justify-between items-center z-10">
|
| 36 |
-
<div class="flex items-center space-x-3">
|
| 37 |
-
<div class="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center animate-pulse">
|
| 38 |
-
<i class="fa-solid fa-brain text-xl text-cyan-400"></i>
|
| 39 |
-
</div>
|
| 40 |
-
<div>
|
| 41 |
-
<h1 class="text-xl font-bold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-indigo-400">Raybil CORE v1.0</h1>
|
| 42 |
-
<p class="text-xs text-emerald-400"><i class="fa-solid fa-circle text-[8px] animate-ping mr-1"></i> Space Live Architecture</p>
|
| 43 |
-
</div>
|
| 44 |
-
</div>
|
| 45 |
-
<div class="text-right text-xs text-slate-400 hidden sm:block">
|
| 46 |
-
<div><span class="text-indigo-400">Engine:</span> Groq LPU Hybrid</div>
|
| 47 |
-
<div><span class="text-indigo-400">DB:</span> Firebase Realtime</div>
|
| 48 |
-
</div>
|
| 49 |
-
</header>
|
| 50 |
-
|
| 51 |
-
<main class="flex-1 max-w-5xl w-full mx-auto p-4 md:p-6 flex flex-col h-[calc(100vh-160px)]">
|
| 52 |
-
|
| 53 |
-
<div id="chat-box" class="flex-1 bg-slate-950/60 backdrop-blur-sm border border-slate-800 rounded-2xl p-4 overflow-y-auto space-y-4 neon-border">
|
| 54 |
-
|
| 55 |
-
<div class="flex items-start space-x-3 max-w-3xl">
|
| 56 |
-
<div class="w-8 h-8 rounded-lg bg-indigo-950 border border-indigo-500/50 flex items-center justify-center shrink-0">
|
| 57 |
-
<i class="fa-solid fa-robot text-xs text-indigo-400"></i>
|
| 58 |
-
</div>
|
| 59 |
-
<div class="bg-slate-900/90 border border-slate-800 rounded-2xl rounded-tl-none p-3.5 text-sm leading-relaxed text-slate-300">
|
| 60 |
-
সিস্টেম সফলভাবে চালু হয়েছে। আপনার ব্যাকএন্ড ডাইনামিক্যালি প্রম্পটের সাইজ ট্র্যাক করে <span class="text-cyan-400">Llama 3.1 8B</span> অথবা <span class="text-fuchsia-400">Llama 4 Scout (17B)</span> রুট করবে। আমি আপনাকে কীভাবে সাহায্য করতে পারি?
|
| 61 |
-
</div>
|
| 62 |
-
</div>
|
| 63 |
-
|
| 64 |
-
</div>
|
| 65 |
-
|
| 66 |
-
<div id="typing-indicator" class="hidden flex items-center space-x-2 px-4 py-2 text-xs text-slate-400">
|
| 67 |
-
<i class="fa-solid fa-circle-notch animate-spin text-indigo-500"></i>
|
| 68 |
-
<span>Raybil Core প্রসেস করছে...</span>
|
| 69 |
-
</div>
|
| 70 |
-
|
| 71 |
-
</main>
|
| 72 |
-
|
| 73 |
-
<footer class="w-full max-w-5xl mx-auto p-4 pt-0">
|
| 74 |
-
<form id="chat-form" class="relative flex items-center bg-slate-900/90 border border-indigo-500/30 rounded-xl p-2 neon-border">
|
| 75 |
-
<input type="text" id="user-input" autocomplete="off" placeholder="আপনার মেসেজ বা কোড এখানে লিখুন..." class="w-full bg-transparent text-slate-100 placeholder-slate-500 text-sm pl-3 pr-16 py-3 focus:outline-none">
|
| 76 |
-
<button type="submit" class="absolute right-3 bg-indigo-600 hover:bg-indigo-500 text-white font-medium text-sm px-4 py-2 rounded-lg transition duration-200 active:scale-95 flex items-center space-x-1">
|
| 77 |
-
<span>পাঠান</span>
|
| 78 |
-
<i class="fa-solid fa-paper-plane text-xs"></i>
|
| 79 |
-
</button>
|
| 80 |
-
</form>
|
| 81 |
-
<p class="text-[10px] text-center text-slate-600 mt-2">Powered by Groq LPU • System Sharding via Firebase Sync</p>
|
| 82 |
-
</footer>
|
| 83 |
-
|
| 84 |
-
<script>
|
| 85 |
-
// আপনার হাগিং ফেস স্পেসের ব্যাকএন্ড ইউআরএল
|
| 86 |
-
const BASE_URL = "https://raybilhelp-secret7.hf.space";
|
| 87 |
-
const USER_ID = "raybil_user_1"; // ডেমো ইউজার আইডি
|
| 88 |
-
|
| 89 |
-
const chatForm = document.getElementById('chat-form');
|
| 90 |
-
const userInput = document.getElementById('user-input');
|
| 91 |
-
const chatBox = document.getElementById('chat-box');
|
| 92 |
-
const typingIndicator = document.getElementById('typing-indicator');
|
| 93 |
-
|
| 94 |
-
// মেসেজ স্ক্রিনে অ্যাপেন্ড করার ফাংশন
|
| 95 |
-
function appendMessage(sender, text, model = null) {
|
| 96 |
-
const messageDiv = document.createElement('div');
|
| 97 |
-
messageDiv.className = `flex items-start space-x-3 max-w-3xl ${sender === 'user' ? 'ml-auto justify-end' : ''}`;
|
| 98 |
-
|
| 99 |
-
const isUser = sender === 'user';
|
| 100 |
-
|
| 101 |
-
messageDiv.innerHTML = `
|
| 102 |
-
${!isUser ? `
|
| 103 |
-
<div class="w-8 h-8 rounded-lg bg-indigo-950 border border-indigo-500/50 flex items-center justify-center shrink-0">
|
| 104 |
-
<i class="fa-solid fa-robot text-xs text-indigo-400"></i>
|
| 105 |
-
</div>
|
| 106 |
-
` : ''}
|
| 107 |
-
<div class="${isUser ? 'bg-indigo-600/90 text-white rounded-tr-none' : 'bg-slate-900/90 border border-slate-800 text-slate-300 rounded-tl-none'} rounded-2xl p-3.5 text-sm leading-relaxed break-words relative group">
|
| 108 |
-
${text}
|
| 109 |
-
${model ? `<span class="block text-[9px] mt-1 text-slate-500 font-mono tracking-tighter">${model}</span>` : ''}
|
| 110 |
-
</div>
|
| 111 |
-
${isUser ? `
|
| 112 |
-
<div class="w-8 h-8 rounded-lg bg-emerald-950 border border-emerald-500/50 flex items-center justify-center shrink-0">
|
| 113 |
-
<i class="fa-solid fa-user text-xs text-emerald-400"></i>
|
| 114 |
-
</div>
|
| 115 |
-
` : ''}
|
| 116 |
-
`;
|
| 117 |
-
|
| 118 |
-
chatBox.appendChild(messageDiv);
|
| 119 |
-
chatBox.scrollTop = chatBox.scrollHeight; // স্ক্রল ডাউন করা
|
| 120 |
-
}
|
| 121 |
-
|
| 122 |
-
// ফর্ম সাবমিট ইভেন্ট
|
| 123 |
-
chatForm.addEventListener('submit', async (e) => {
|
| 124 |
-
e.preventDefault();
|
| 125 |
-
const message = userInput.value.trim();
|
| 126 |
-
if (!message) return;
|
| 127 |
-
|
| 128 |
-
// ইউজারের মেসেজ শো করা
|
| 129 |
-
appendMessage('user', message);
|
| 130 |
-
userInput.value = '';
|
| 131 |
-
|
| 132 |
-
// টাইপিং লোডার অন করা
|
| 133 |
-
typingIndicator.classList.remove('hidden');
|
| 134 |
-
|
| 135 |
-
try {
|
| 136 |
-
// হাগিং ফেস ব্যাকএন্ডে রিকোয়েস্ট পাঠানো
|
| 137 |
-
const response = await fetch(`${BASE_URL}/api/chat`, {
|
| 138 |
-
method: 'POST',
|
| 139 |
-
headers: {
|
| 140 |
-
'Content-Type': 'application/json'
|
| 141 |
-
},
|
| 142 |
-
body: JSON.stringify({
|
| 143 |
-
userId: USER_ID,
|
| 144 |
-
message: message
|
| 145 |
-
})
|
| 146 |
-
});
|
| 147 |
-
|
| 148 |
-
const data = await response.json();
|
| 149 |
-
|
| 150 |
-
if (data.success) {
|
| 151 |
-
// এআই এর রেসপন্স এবং সাথে কোন মডেল ব্যবহার হয়েছে তা দেখানো
|
| 152 |
-
appendMessage('ai', data.reply, `Model Slot: ${data.model}`);
|
| 153 |
-
} else {
|
| 154 |
-
appendMessage('ai', 'দুঃখিত, কোনো সমস্যা হয়েছে। আবার চেষ্টা করুন।');
|
| 155 |
-
}
|
| 156 |
-
} catch (error) {
|
| 157 |
-
console.error("Error connecting to backend:", error);
|
| 158 |
-
appendMessage('ai', 'সার্ভারের সাথে কানেক্ট করা যাচ্ছে না। দয়া করে আপনার এনভায়রনমেন্ট ভেরিয়েবল এবং স্পেসের স্ট্যাটাস চেক করুন।');
|
| 159 |
-
} finally {
|
| 160 |
-
// টাইপিং লোডার অফ করা
|
| 161 |
-
typingIndicator.classList.add('hidden');
|
| 162 |
-
}
|
| 163 |
-
});
|
| 164 |
-
</script>
|
| 165 |
-
</body>
|
| 166 |
-
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|