Spaces:

Raybilhelp
/

Secret7

Paused

App Files Files Community

Raybilhelp commited on Jun 10

Commit

70a6180

verified ·

1 Parent(s): ff2364a

Create index.html

Browse files

Files changed (1) hide show

index.html +166 -0

index.html ADDED Viewed

	@@ -0,0 +1,166 @@

+<!DOCTYPE html>
+<html lang="bn">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Raybil AI Chat System</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Hind+Siliguri:wght@400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body {
+            font-family: 'Hind Siliguri', 'Fira Code', sans-serif;
+            background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
+        }
+        /* গ্লোয়িং অ্যানিমেশন ইফেক্ট */
+        .neon-border {
+            box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
+        }
+        /* কাস্টম স্ক্রলবার */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #1e1b4b;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #4f46e5;
+            border-radius: 10px;
+        }
+    </style>
+</head>
+<body class="text-slate-100 min-h-screen flex flex-col justify-between overflow-hidden">
+    <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">
+        <div class="flex items-center space-x-3">
+            <div class="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center animate-pulse">
+                <i class="fa-solid fa-brain text-xl text-cyan-400"></i>
+            </div>
+            <div>
+                <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>
+                <p class="text-xs text-emerald-400"><i class="fa-solid fa-circle text-[8px] animate-ping mr-1"></i> Space Live Architecture</p>
+            </div>
+        </div>
+        <div class="text-right text-xs text-slate-400 hidden sm:block">
+            <div><span class="text-indigo-400">Engine:</span> Groq LPU Hybrid</div>
+            <div><span class="text-indigo-400">DB:</span> Firebase Realtime</div>
+        </div>
+    </header>
+    <main class="flex-1 max-w-5xl w-full mx-auto p-4 md:p-6 flex flex-col h-[calc(100vh-160px)]">
+        <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">
+            <div class="flex items-start space-x-3 max-w-3xl">
+                <div class="w-8 h-8 rounded-lg bg-indigo-950 border border-indigo-500/50 flex items-center justify-center shrink-0">
+                    <i class="fa-solid fa-robot text-xs text-indigo-400"></i>
+                </div>
+                <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">
+                    সিস্টেম সফলভাবে চালু হয়েছে। আপনার ব্যাকএন্ড ডাইনামিক্যালি প্রম্পটের সাইজ ট্র্যাক করে <span class="text-cyan-400">Llama 3.1 8B</span> অথবা <span class="text-fuchsia-400">Llama 4 Scout (17B)</span> রুট করবে। আমি আপনাকে কীভাবে সাহায্য করতে পারি?
+                </div>
+            </div>
+        </div>
+        <div id="typing-indicator" class="hidden flex items-center space-x-2 px-4 py-2 text-xs text-slate-400">
+            <i class="fa-solid fa-circle-notch animate-spin text-indigo-500"></i>
+            <span>Raybil Core প্রসেস করছে...</span>
+        </div>
+    </main>
+    <footer class="w-full max-w-5xl mx-auto p-4 pt-0">
+        <form id="chat-form" class="relative flex items-center bg-slate-900/90 border border-indigo-500/30 rounded-xl p-2 neon-border">
+            <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">
+            <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">
+                <span>পাঠান</span>
+                <i class="fa-solid fa-paper-plane text-xs"></i>
+            </button>
+        </form>
+        <p class="text-[10px] text-center text-slate-600 mt-2">Powered by Groq LPU • System Sharding via Firebase Sync</p>
+    </footer>
+    <script>
+        // আপনার হাগিং ফেস স্পেসের ব্যাকএন্ড ইউআরএল
+        const BASE_URL = "https://raybilhelp-secret7.hf.space";
+        const USER_ID = "raybil_user_1"; // ডেমো ইউজার আইডি
+        const chatForm = document.getElementById('chat-form');
+        const userInput = document.getElementById('user-input');
+        const chatBox = document.getElementById('chat-box');
+        const typingIndicator = document.getElementById('typing-indicator');
+        // মেসেজ স্ক্রিনে অ্যাপেন্ড করার ফাংশন
+        function appendMessage(sender, text, model = null) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `flex items-start space-x-3 max-w-3xl ${sender === 'user' ? 'ml-auto justify-end' : ''}`;
+            const isUser = sender === 'user';
+            messageDiv.innerHTML = `
+                ${!isUser ? `
+                    <div class="w-8 h-8 rounded-lg bg-indigo-950 border border-indigo-500/50 flex items-center justify-center shrink-0">
+                        <i class="fa-solid fa-robot text-xs text-indigo-400"></i>
+                    </div>
+                ` : ''}
+                <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">
+                    ${text}
+                    ${model ? `<span class="block text-[9px] mt-1 text-slate-500 font-mono tracking-tighter">${model}</span>` : ''}
+                </div>
+                ${isUser ? `
+                    <div class="w-8 h-8 rounded-lg bg-emerald-950 border border-emerald-500/50 flex items-center justify-center shrink-0">
+                        <i class="fa-solid fa-user text-xs text-emerald-400"></i>
+                    </div>
+                ` : ''}
+            `;
+            chatBox.appendChild(messageDiv);
+            chatBox.scrollTop = chatBox.scrollHeight; // স্ক্রল ডাউন করা
+        }
+        // ফর্ম সাবমিট ইভেন্ট
+        chatForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const message = userInput.value.trim();
+            if (!message) return;
+            // ইউজারের মেসেজ শো করা
+            appendMessage('user', message);
+            userInput.value = '';
+            // টাইপিং লোডার অন করা
+            typingIndicator.classList.remove('hidden');
+            try {
+                // হাগিং ফেস ব্যাকএন্ডে রিকোয়েস্ট পাঠানো
+                const response = await fetch(`${BASE_URL}/api/chat`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        userId: USER_ID,
+                        message: message
+                    })
+                });
+                const data = await response.json();
+                if (data.success) {
+                    // এআই এর রেসপন্স এবং সাথে কোন মডেল ব্যবহার হয়েছে তা দেখানো
+                    appendMessage('ai', data.reply, `Model Slot: ${data.model}`);
+                } else {
+                    appendMessage('ai', 'দুঃখিত, কোনো সমস্যা হয়েছে। আবার চেষ্টা করুন।');
+                }
+            } catch (error) {
+                console.error("Error connecting to backend:", error);
+                appendMessage('ai', 'সার্ভারের সাথে কানেক্ট করা যাচ্ছে না। দয়া করে আপনার এনভায়রনমেন্ট ভেরিয়েবল এবং স্পেসের স্ট্যাটাস চেক করুন।');
+            } finally {
+                // টাইপিং লোডার অফ করা
+                typingIndicator.classList.add('hidden');
+            }
+        });
+    </script>
+</body>
+</html>