Spaces:

FourLabs-UN2
/

chatoracle-ai

Running

App Files Files Community

FourLabs-UN2 commited on Oct 7, 2025

Commit

2d5b697

verified ·

1 Parent(s): 6cacdea

Faça um chatbot completo e profissional com sidebar e essas cores. Adicione um lugar para o usuario escolher o modelo LLM que quer usar:

Browse files

colors: {
primary: '#21223a',
secondary: '#ff580f',
}

Files changed (2) hide show

README.md +8 -5
index.html +298 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Chatoracle Ai
-emoji: 💻
-colorFrom: red
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ChatOracle AI 🤖
+colorFrom: gray
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,299 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChatOracle AI - Assistente Inteligente</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        :root {
+            --primary: #21223a;
+            --secondary: #ff580f;
+        }
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        }
+        .chat-container {
+            scroll-behavior: smooth;
+        }
+        .message-bubble {
+            max-width: 80%;
+            animation: fadeIn 0.3s ease-in;
+        }
+        .typing-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+        }
+        .typing-dot {
+            width: 6px;
+            height: 6px;
+            background-color: var(--secondary);
+            border-radius: 50%;
+            animation: typing 1.4s infinite ease-in-out;
+        }
+        .typing-dot:nth-child(2) { animation-delay: 0.16s; }
+        .typing-dot:nth-child(3) { animation-delay: 0.32s; }
+        @keyframes typing {
+            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+            30% { transform: translateY(-10px); opacity: 1; }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .llm-option:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(33, 34, 58, 0.15);
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen flex">
+    <!-- Sidebar -->
+    <div class="w-80 bg-[#21223a] text-white h-screen fixed left-0 top-0 flex flex-col">
+        <div class="p-6 border-b border-gray-700">
+            <div class="flex items-center space-x-3">
+                <div class="w-10 h-10 bg-[#ff580f] rounded-full flex items-center justify-center">
+                    <i data-feather="cpu"></i>
+                </div>
+                <h1 class="text-xl font-bold">ChatOracle AI</h1>
+            </div>
+        </div>
+        <div class="p-6 space-y-4">
+            <h2 class="text-sm uppercase tracking-wider text-gray-400 mb-4">Modelos LLM</h2>
+            <div class="space-y-3">
+                <div class="llm-option bg-gray-800 p-4 rounded-lg cursor-pointer transition-all duration-200 border-2 border-transparent hover:border-[#ff580f]">
+                    <div class="flex items-center justify-between">
+                        <span class="font-medium">GPT-4</span>
+                        <div class="w-3 h-3 bg-green-400 rounded-full"></div>
+                    </div>
+                    <p class="text-sm text-gray-300 mt-1">OpenAI - Mais avançado</p>
+                </div>
+                <div class="llm-option bg-gray-800 p-4 rounded-lg cursor-pointer transition-all duration-200">
+                    <div class="flex items-center justify-between">
+                        <span class="font-medium">Claude 2</span>
+                        <div class="w-3 h-3 bg-green-400 rounded-full"></div>
+                    </div>
+                    <p class="text-sm text-gray-300 mt-1">Anthropic - Contexto longo</p>
+                </div>
+                <div class="llm-option bg-gray-800 p-4 rounded-lg cursor-pointer transition-all duration-200">
+                    <div class="flex items-center justify-between">
+                        <span class="font-medium">Llama 2</span>
+                        <div class="w-3 h-3 bg-green-400 rounded-full"></div>
+                    </div>
+                    <p class="text-sm text-gray-300 mt-1">Meta - Open source</p>
+                </div>
+                <div class="llm-option bg-gray-800 p-4 rounded-lg cursor-pointer transition-all duration-200">
+                    <div class="flex items-center justify-between">
+                        <span class="font-medium">Mistral 7B</span>
+                        <div class="w-3 h-3 bg-green-400 rounded-full"></div>
+                    </div>
+                    <p class="text-sm text-gray-300 mt-1">Mistral AI - Eficiente</p>
+                </div>
+            </div>
+        </div>
+        <div class="p-6 mt-auto space-y-4">
+            <div class="bg-gray-800 p-4 rounded-lg">
+                <h3 class="text-sm font-medium mb-2">Status do Sistema</h3>
+                <div class="flex items-center space-x-2 text-sm text-green-400">
+                    <div class="w-2 h-2 bg-green-400 rounded-full"></div>
+                    <span>Online</span>
+                </div>
+            </div>
+            <button class="w-full bg-[#ff580f] hover:bg-[#e64a0c] text-white py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2">
+                <i data-feather="plus"></i>
+                <span>Nova Conversa</span>
+            </button>
+        </div>
+    </div>
+    <!-- Main Chat Area -->
+    <div class="ml-80 flex-1 flex flex-col">
+        <!-- Header -->
+        <div class="bg-white border-b border-gray-200 p-6">
+            <div class="flex items-center justify-between">
+                <h2 class="text-2xl font-bold text-gray-800">Conversa Atual</h2>
+                <div class="flex items-center space-x-4">
+                    <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
+                        <i data-feather="settings"></i>
+                    </button>
+                    <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
+                        <i data-feather="help-circle"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Chat Messages -->
+        <div class="flex-1 overflow-y-auto p-6 space-y-6 chat-container" id="chatMessages">
+            <div class="message-bubble bg-white rounded-2xl p-4 shadow-md ml-auto">
+                <p class="text-gray-800">Olá! Como posso ajudar você hoje?</p>
+                <span class="text-xs text-gray-500 block mt-2">12:30 PM</span>
+            </div>
+            <div class="message-bubble bg-[#21223a] text-white rounded-2xl p-4 shadow-md">
+                <p>Estou aqui para assistir você! Posso responder perguntas, ajudar com pesquisas, escrever conteúdo e muito mais. O que você gostaria de fazer?</p>
+                <span class="text-xs text-gray-300 block mt-2">12:31 PM</span>
+            </div>
+        </div>
+        <!-- Input Area -->
+        <div class="bg-white border-t border-gray-200 p-6">
+            <div class="flex items-center space-x-4">
+                <div class="flex-1 relative">
+                    <input
+                        type="text"
+                        placeholder="Digite sua mensagem..."
+                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#ff580f] focus:border-transparent"
+                        id="messageInput"
+                    >
+                    <div class="absolute right-3 top-3 flex items-center space-x-2">
+                        <button class="text-gray-400 hover:text-[#ff580f] transition-colors">
+                            <i data-feather="paperclip"></i>
+                        </button>
+                        <button class="text-gray-400 hover:text-[#ff580f] transition-colors">
+                            <i data-feather="mic"></i>
+                        </button>
+                    </div>
+                </div>
+                <button
+                    class="bg-[#ff580f] hover:bg-[#e64a0c] text-white p-3 rounded-lg transition-colors duration-200"
+                    onclick="sendMessage()"
+                >
+                    <i data-feather="send"></i>
+                </button>
+            </div>
+            <div class="mt-3 flex items-center justify-between text-sm text-gray-500">
+                <span>Modelo selecionado: GPT-4</span>
+                <span>⌘K para atalhos</span>
+            </div>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+        const chatMessages = document.getElementById('chatMessages');
+        const messageInput = document.getElementById('messageInput');
+        function sendMessage() {
+            const message = messageInput.value.trim();
+            if (!message) return;
+            // Add user message
+            addMessage(message, 'user');
+            messageInput.value = '';
+            // Simulate AI response
+            setTimeout(() => {
+                addTypingIndicator();
+                setTimeout(() => {
+                    removeTypingIndicator();
+                    addMessage(getAIResponse(message), 'ai');
+                }, 2000);
+            }, 500);
+        }
+        function addMessage(text, sender) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message-bubble ${sender === 'user' ? 'bg-white rounded-2xl p-4 shadow-md ml-auto' : 'bg-[#21223a] text-white rounded-2xl p-4 shadow-md'}`;
+            const messageContent = document.createElement('p');
+            messageContent.className = sender === 'user' ? 'text-gray-800' : 'text-white';
+            messageContent.textContent = text;
+            const timestamp = document.createElement('span');
+            timestamp.className = `text-xs block mt-2 ${sender === 'user' ? 'text-gray-500' : 'text-gray-300'}`;
+            timestamp.textContent = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+            messageDiv.appendChild(messageContent);
+            messageDiv.appendChild(timestamp);
+            chatMessages.appendChild(messageDiv);
+            // Scroll to bottom
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        function addTypingIndicator() {
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'message-bubble bg-[#21223a] text-white rounded-2xl p-4 shadow-md';
+            typingDiv.id = 'typingIndicator';
+            const typingContent = document.createElement('div');
+            typingContent.className = 'typing-indicator';
+            for (let i = 0; i < 3; i++) {
+                const dot = document.createElement('div');
+                dot.className = 'typing-dot';
+                typingContent.appendChild(dot);
+            }
+            typingDiv.appendChild(typingContent);
+            chatMessages.appendChild(typingDiv);
+            // Scroll to bottom
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        function removeTypingIndicator() {
+            const typingIndicator = document.getElementById('typingIndicator');
+            if (typingIndicator) {
+                typingIndicator.remove();
+            }
+        }
+        function getAIResponse(userMessage) {
+            const responses = [
+                "Entendi sua pergunta! Deixe-me ajudar com isso...",
+                "Excelente pergunta! Aqui está a informação que você precisa:",
+                "Com base na sua solicitação, aqui está o que posso compartilhar:",
+                "Ótimo ponto! Deixe-me elaborar sobre isso:",
+                "Obrigado pela pergunta. Aqui está minha resposta:"
+            ];
+            return responses[Math.floor(Math.random() * responses.length)] + " Esta é uma resposta simulada do chatbot. Em uma implementação real, esta seria a resposta do modelo LLM selecionado.";
+        }
+        // Enter key to send message
+        messageInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+        // LLM selection
+        document.querySelectorAll('.llm-option').forEach(option => {
+            option.addEventListener('click', function() {
+                document.querySelectorAll('.llm-option').forEach(opt => {
+                    opt.classList.remove('border-[#ff580f]');
+                });
+                this.classList.add('border-[#ff580f]');
+                const modelName = this.querySelector('span').textContent;
+                document.querySelector('.mt-3 span:first-child').textContent = `Modelo selecionado: ${modelName}`;
+            });
+        });
+    </script>
+</body>
 </html>