Spaces:

jakewicks92
/

scire-ai

Running

App Files Files Community

jakewicks92 commited on about 1 month ago

Commit

1e2a0b7

verified ·

1 Parent(s): ff924cc

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +764 -19

README.md CHANGED Viewed

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

 ---
+title: scire-ai
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,764 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Scire AI Assistant</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #5D3FD3;
+            --secondary-color: #5D3FD320;
+            --dark-color: #333;
+            --light-color: #f8f9fa;
+            --gray-color: #e9ecef;
+            --border-radius: 8px;
+            --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            --transition: all 0.3s ease;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: var(--light-color);
+            color: var(--dark-color);
+            line-height: 1.6;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        header {
+            background-color: white;
+            padding: 15px 20px;
+            box-shadow: var(--box-shadow);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            font-weight: bold;
+            font-size: 22px;
+            color: var(--primary-color);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .logo i {
+            font-size: 24px;
+        }
+        nav ul {
+            display: flex;
+            list-style: none;
+            gap: 20px;
+        }
+        nav a {
+            text-decoration: none;
+            color: var(--dark-color);
+            font-weight: 500;
+            transition: var(--transition);
+        }
+        nav a:hover {
+            color: var(--primary-color);
+        }
+        .user-menu {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background-color: var(--gray-color);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            overflow: hidden;
+        }
+        .avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        main {
+            flex: 1;
+            display: flex;
+            padding: 20px;
+            gap: 20px;
+            max-width: 1400px;
+            margin: 0 auto;
+            width: 100%;
+            height: calc(100vh - 120px);
+        }
+        .top-container {
+            display: flex;
+            width: 100%;
+            gap: 20px;
+            height: 100%;
+        }
+        .left-section {
+            width: 240px; /* Reduced from 280px to 240px */
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 20px;
+            box-shadow: var(--box-shadow);
+            height: 100%;
+            overflow-y: auto;
+        }
+        .right-section {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            height: 100%;
+        }
+        .sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .sidebar-section {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .sidebar-title {
+            font-size: 13px;
+            font-weight: 600;
+            color: #666;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 5px;
+        }
+        .sidebar-item {
+            padding: 10px 12px;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            transition: var(--transition);
+            font-size: 14px;
+        }
+        .sidebar-item:hover {
+            background-color: var(--secondary-color);
+            color: var(--primary-color);
+        }
+        .sidebar-item.active {
+            background-color var(--secondary-color);
+            color: var(--primary-color);
+            font-weight: 500;
+        }
+        .sidebar-item i {
+            width: 18px;
+            text-align: center;
+        }
+        .content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            height: calc(100% - 180px);
+        }
+        .chat-container {
+            background-color: white;
+            border-radius: var(--border-radius);
+            box-shadow: var(--box-shadow);
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+        .chat-header {
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--gray-color);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .chat-title {
+            font-weight: 600;
+            font-size: 18px;
+        }
+        .chat-actions {
+            display: flex;
+            gap: 12px;
+        }
+        .chat-actions button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: #666;
+            transition: var(--transition);
+            font-size: 16px;
+            width: 30px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+        }
+        .chat-actions button:hover {
+            color: var(--primary-color);
+            background-color: var(--secondary-color);
+        }
+        .messages {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+        .message {
+            max-width: 80%;
+            padding: 12px 16px;
+            border-radius: var(--border-radius);
+            position: relative;
+            line-height: 1.5;
+        }
+        .user-message {
+            align-self: flex-end;
+            background-color: var(--primary-color);
+            color: white;
+            border-bottom-right-radius: 0;
+        }
+        .ai-message {
+            align-self: flex-start;
+            background-color: var(--gray-color);
+            border-bottom-left-radius: 0;
+        }
+        .message-time {
+            font-size: 11px;
+            color: rgba(255, 255, 255, 0.8);
+            margin-top: 6px;
+            text-align: right;
+            opacity: 0.8;
+        }
+        .ai-message .message-time {
+            color: #666;
+        }
+        .input-area {
+            padding: 16px 20px;
+            border-top: 1px solid var(--gray-color);
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
+        .message-input {
+            flex: 1;
+            padding: 12px 16px;
+            border: 1px solid var(--gray-color);
+            border-radius: var(--border-radius);
+            outline: none;
+            transition: var(--transition);
+            resize: none;
+            max-height: 120px;
+            font-size: 14px;
+            min-height: 48px;
+        }
+        .message-input:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px var(--secondary-color);
+        }
+        .send-button {
+            width: 48px;
+            height: 48px;
+            border-radius: var(--border-radius);
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .send-button:hover {
+            opacity: 0.9;
+            transform: scale(1.05);
+        }
+        .send-button:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
+        .cards-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+            gap: 16px;
+            padding: 5px;
+        }
+        .card {
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 18px;
+            box-shadow: var(--box-shadow);
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        .card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        .card-title {
+            font-size: 15px;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: var(--primary-color);
+        }
+        .card-description {
+            font-size: 13px;
+            color: #666;
+            margin-bottom: 12px;
+            line-height: 1.4;
+        }
+        .card-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 11px;
+            color: #999;
+        }
+        /* Loading indicator container */
+        .loading-indicator {
+            display: none;
+            align-self: flex-start;
+            margin-bottom: 16px;
+        }
+        .typing-indicator {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            background-color: var(--gray-color);
+            border-radius: var(--border-radius);
+            gap: 8px;
+            margin-bottom: 2px;
+        }
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            background-color: #666;
+            border-radius: 50%;
+            animation: typingAnimation 1.5s infinite ease-in-out;
+        }
+        .typing-dot:nth-child(1) {
+            animation-delay: 0s;
+        }
+        .typing-dot:nth-child(2) {
+            animation-delay: 0.3s;
+        }
+        .typing-dot:nth-child(3) {
+            animation-delay: 0.6s;
+        }
+        @keyframes typingAnimation {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-5px);
+            }
+        }
+        .footer {
+            text-align: center;
+            padding: 15px;
+            color: #666;
+            font-size: 12px;
+            border-top: 1px solid var(--gray-color);
+            background-color: white;
+        }
+        /* Bell notification icon */
+        /* From Uiverse.io by 3bdel3ziz-T */
+        .bell {
+            border: 2.17px solid #333;
+            border-radius: 10px 10px 0 0;
+            width: 15px;
+            height: 17px;
+            background: transparent;
+            display: block;
+            position: relative;
+            top: -3px;
+        }
+        .bell::before, .bell::after {
+            content: "";
+            background: #333;
+            display: block;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            height: 2.17px;
+        }
+        .bell::before {
+            top: 100%;
+            width: 20px;
+        }
+        .bell::after {
+            top: calc(100% + 4px);
+            width: 7px;
+        }
+        /*container main styling*/
+        .notification {
+            background: transparent;
+            border: none;
+            padding: 15px 15px;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: 300ms;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        /*notifications number with before*/
+        .notification::before {
+            content: "1";
+            color: white;
+            font-size: 10px;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: red;
+            position: absolute;
+            right: 8px;
+            top: 8px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+        /*container background hover effect*/
+        .notification:hover {
+            background: rgba(170, 170, 170, 0.062);
+        }
+        /*container animations*/
+        .notification:hover > .bell {
+            animation: bell-animation 650ms ease-out 0s 1 normal both;
+        }
+        /*bell ring and scale animation*/
+        @keyframes bell-animation {
+            20% {
+                transform: rotate(15deg);
+            }
+            40% {
+                transform: rotate(-15deg);
+                scale: 1.1;
+            }
+            60% {
+                transform: rotate(10deg);
+                scale: 1.1;
+            }
+            80% {
+                transform: rotate(-10deg);
+            }
+            0%, 100% {
+                transform: rotate(0deg);
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <i class="fas fa-robot"></i>
+            <span>Scire AI Assistant</span>
+        </div>
+        <nav>
+            <ul>
+                <li><a href="#"><i class="fas fa-home"></i> Home</a></li>
+                <li><a href="#"><i class="fas fa-bolt"></i> Features</a></li>
+                <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li>
+            </ul>
+        </nav>
+        <div class="user-menu">
+            <button class="notification" title="Notifications">
+                <div class="bell"></div>
+            </button>
+            <div class="avatar">
+                <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User avatar">
+            </div>
+        </div>
+    </header>
+    <main>
+        <div class="top-container">
+            <div class="left-section">
+                <div class="sidebar">
+                    <div class="sidebar-section">
+                        <div class="sidebar-title">Chat</div>
+                        <div class="sidebar-item active">
+                            <i class="fas fa-comment-dots"></i>
+                            <span>General Discussion</span>
+                        </div>
+                        <div class="sidebar-item">
+                            <i class="fas fa-code"></i>
+                            <span>Programming Help</span>
+                        </div>
+                        <div class="sidebar-item">
+                            <i class="fas fa-book"></i>
+                            <span>Research Assistant</span>
+                        </div>
+                    </div>
+                    <div class="sidebar-section">
+                        <div class="sidebar-title">Tools</div>
+                        <div class="sidebar-item">
+                            <i class="fas fa-wand-magic-sparkles"></i>
+                            <span>Content Generator</span>
+                        </div>
+                        <div class="sidebar-item">
+                            <i class="fas fa-chart-line"></i>
+                            <span>Data Analysis</span>
+                        </div>
+                        <div class="sidebar-item">
+                            <i class="fas fa-image"></i>
+                            <span>Image Creator</span>
+                        </div>
+                    </div>
+                    <div class="sidebar-section">
+                        <div class="sidebar-title">History</div>
+                        <div class="sidebar-item">
+                            <i class="fas fa-history"></i>
+                            <span>Today</span>
+                        </div>
+                        <div class="sidebar-item">
+                            <i class="fas fa-calendar-week"></i>
+                            <span>Last Week</span>
+                        </div>
+                        <div class="sidebar-item">
+                            <i class="fas fa-archive"></i>
+                            <span>Archived</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="right-section">
+                <div class="content">
+                    <div class="chat-container">
+                        <div class="chat-header">
+                            <div class="chat-title">General Assistant</div>
+            <div class="chat-actions">
+                <button title="Clear chat"><i class="fas fa-trash"></i></button>
+                <button title="Export chat"><i class="fas fa-download"></i></button>
+                <button title="Share chat"><i class="fas fa-share-nodes"></i></button>
+            </div>
+        </div>
+        <div class="messages" id="messages">
+            <div class="message ai-message">
+                Hello! I'm your AI assistant. How can I help you today?
+                <div class="message-time">Just now</div>
+            </div>
+            <!-- Loading indicator will appear here -->
+            <div class="loading-indicator" id="loadingIndicator">
+                <div class="typing-indicator">
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <span>AI is thinking...</span>
+                </div>
+            </div>
+        </div>
+        <div class="input-area">
+            <textarea class="message-input" id="messageInput" placeholder="Type your message here..." rows="1"></textarea>
+            <button class="send-button" id="sendButton">
+                <i class="fas fa-paper-plane"></i>
+            </button>
+        </div>
+    </div>
+</div>
+<div class="cards-container">
+    <div class="card">
+        <div class="card-title"><i class="fas fa-lightbulb"></i> Quick Ideas</div>
+        <div class="card-description">Get creative suggestions for your projects, writing, or problem-solving.</div>
+        <div class=" card-footer">
+                            <span>Try now</span>
+                            <i class="fas fa-arrow-right"></i>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="card-title"><i class="fas fa-terminal"></i> Code Help</div>
+                        <div class="card-description">Debug, explain, or generate code snippets in multiple programming languages.</div>
+                        <div class="card-footer">
+                            <span>Try now</span>
+                            <i class="fas fa-arrow-right"></i>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="card-title"><i class="fas fa-language"></i> Translation</div>
+                        <div class="card-description">Translate text between languages with context-aware accuracy.</div>
+                        <div class="card-footer">
+                            <span>Try now</span>
+                            <i class="fas fa-arrow-right"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer class="footer">
+        © 2023 Scire AI Assistant | Powered by AI Technology
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const messagesContainer = document.getElementById('messages');
+            const messageInput = document.getElementById('messageInput');
+            const sendButton = document.getElementById('sendButton');
+            const loadingIndicator = document.getElementById('loadingIndicator');
+            // Auto-resize textarea
+            messageInput.addEventListener('input', function() {
+                this.style.height = 'auto';
+                this.style.height = (this.scrollHeight) + 'px';
+            });
+            // Send message function
+            function sendMessage() {
+                const text = messageInput.value.trim();
+                if (!text) return;
+                // Add user message
+                const userMessage = document.createElement('div');
+                userMessage.className = 'message user-message';
+                userMessage.innerHTML = `${text}<div class="message-time">${getCurrentTime()}</div>`;
+                messagesContainer.appendChild(userMessage);
+                // Clear input
+                messageInput.value = '';
+                messageInput.style.height = '48px';
+                // Show loading indicator
+                loadingIndicator.style.display = 'flex';
+                // Scroll to bottom
+                messagesContainer.scrollTop = messagesContainer.scrollHeight;
+                // Simulate AI response after delay
+                setTimeout(() => {
+                    // Hide loading indicator
+                    loadingIndicator.style.display = 'none';
+                    // Add AI response
+                    const aiResponse = generateAIResponse(text);
+                    const aiMessage = document.createElement('div');
+                    aiMessage.className = 'message ai-message';
+                    aiMessage.innerHTML = `${aiResponse}<div class="message-time">${getCurrentTime()}</div>`;
+                    messagesContainer.appendChild(aiMessage);
+                    // Scroll to bottom
+                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+                }, 1500 + Math.random() * 2000); // Random delay between 1.5-3.5 seconds
+            }
+            // Generate simple AI responses
+            function generateAIResponse(userMessage) {
+                const responses = [
+                    "I understand. Could you tell me more about that?",
+                    "That's an interesting point. Here's what I think about it...",
+                    "Based on your question, I'd recommend considering the following approach.",
+                    "Thank you for sharing that. Let me help you with some information.",
+                    "I've analyzed your query and here's my response."
+                ];
+                return responses[Math.floor(Math.random() * responses.length)];
+            }
+            // Get current time in HH:MM format
+            function getCurrentTime() {
+                const now = new Date();
+                return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
+            }
+            // Send message on button click
+            sendButton.addEventListener('click', sendMessage);
+            // Send message on Enter key (but allow Shift+Enter for new lines)
+            messageInput.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+            // Demo chat history
+            const demoMessages = [
+                { text: "What's the weather like today?", type: "user" },
+                { text: "I can check local weather data if you enable location services. Would you like me to do that?", type: "ai" },
+                { text: "No, just a general forecast is fine.", type: "user" },
+                { text: "Currently, most areas are experiencing mild temperatures with occasional showers. Would you like more specific details for your location?", type: "ai" }
+            ];
+            // Add demo messages to chat (for illustration)
+            setTimeout(() => {
+                demoMessages.forEach(msg => {
+                    const message = document.createElement('div');
+                    message.className = `message ${msg.type}-message`;
+                    message.innerHTML = `${msg.text}<div class="message-time">Earlier</div>`;
+                    messagesContainer.insertBefore(message, messagesContainer.firstChild.nextSibling);
+                });
+            }, 500);
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>