Spaces:

Areyasun
/

chatarya

Running

App Files Files Community

Areyasun commited on Mar 29, 2025

Commit

7a2a754

verified ·

1 Parent(s): 166bd6d

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: chatarya
+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,469 @@
-<!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>ChatGPT Clone</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #10a37f;
+            --primary-hover: #0d8e6d;
+            --text-color: #343541;
+            --bg-color: #ffffff;
+            --chat-bg: #f7f7f8;
+            --user-bubble: #ffffff;
+            --ai-bubble: #f7f7f8;
+            --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            --border-radius: 8px;
+        }
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --primary-color: #10a37f;
+                --primary-hover: #0d8e6d;
+                --text-color: #ececf1;
+                --bg-color: #343541;
+                --chat-bg: #444654;
+                --user-bubble: #343541;
+                --ai-bubble: #444654;
+                --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+            }
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            line-height: 1.6;
+            transition: all 0.3s ease;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 20px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            box-shadow: var(--shadow);
+            background-color: var(--bg-color);
+            z-index: 100;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-weight: bold;
+            font-size: 1.2rem;
+        }
+        .logo-icon {
+            color: var(--primary-color);
+            font-size: 1.5rem;
+        }
+        .theme-toggle {
+            background: none;
+            border: none;
+            color: var(--text-color);
+            font-size: 1.2rem;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+        }
+        .theme-toggle:hover {
+            transform: rotate(30deg);
+        }
+        .chat-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            padding-bottom: 100px;
+            background-color: var(--chat-bg);
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .message {
+            max-width: 800px;
+            width: 100%;
+            margin: 0 auto;
+            display: flex;
+            gap: 15px;
+            padding: 15px 20px;
+            border-radius: var(--border-radius);
+            animation: fadeIn 0.3s ease;
+        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .user-message {
+            background-color: var(--user-bubble);
+            border: 1px solid rgba(0, 0, 0, 0.05);
+        }
+        .ai-message {
+            background-color: var(--ai-bubble);
+        }
+        .avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--primary-color);
+            color: white;
+            flex-shrink: 0;
+        }
+        .user-avatar {
+            background-color: #999;
+        }
+        .message-content {
+            flex: 1;
+            white-space: pre-wrap;
+            word-break: break-word;
+            line-height: 1.5;
+        }
+        .message-content p {
+            margin-bottom: 1em;
+        }
+        .message-content p:last-child {
+            margin-bottom: 0;
+        }
+        .input-container {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 15px 20px;
+            background-color: var(--bg-color);
+            border-top: 1px solid rgba(0, 0, 0, 0.1);
+            box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
+        }
+        .input-area {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            gap: 10px;
+        }
+        input[type="text"] {
+            flex: 1;
+            padding: 15px 20px;
+            border-radius: var(--border-radius);
+            border: 2px solid rgba(0, 0, 0, 0.1);
+            background-color: var(--chat-bg);
+            color: var(--text-color);
+            font-size: 1rem;
+            outline: none;
+            transition: border-color 0.3s ease;
+        }
+        input[type="text"]:focus {
+            border-color: var(--primary-color);
+        }
+        button {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: var(--border-radius);
+            padding: 0 20px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        button:hover {
+            background-color: var(--primary-hover);
+        }
+        button:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
+        .typing-indicator {
+            display: flex;
+            gap: 6px;
+            align-self: flex-start;
+            margin-left: 51px;
+            margin-bottom: 10px;
+            opacity: 0.7;
+        }
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            background-color: var(--text-color);
+            border-radius: 50%;
+            animation: typingAnimation 1.4s infinite ease-in-out;
+        }
+        .typing-dot:nth-child(1) {
+            animation-delay: 0s;
+        }
+        .typing-dot:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-dot:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes typingAnimation {
+            0%, 60%, 100% {
+                transform: translateY(0);
+            }
+            30% {
+                transform: translateY(-5px);
+            }
+        }
+        @media (max-width: 768px) {
+            .message {
+                padding: 12px 15px;
+            }
+            input[type="text"] {
+                padding: 12px 15px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <div class="avatar logo-icon">
+                <i class="fas fa-robot"></i>
+            </div>
+            <span>ChatAI</span>
+        </div>
+        <button class="theme-toggle" id="themeToggle">
+            <i class="fas fa-moon"></i>
+        </button>
+    </header>
+    <div class="chat-container" id="chatContainer">
+        <!-- Messages will be added here dynamically -->
+    </div>
+    <div class="input-container">
+        <form class="input-area" id="chatForm">
+            <input type="text" id="userInput" placeholder="Message ChatAI..." autocomplete="off" required>
+            <button type="submit" id="sendButton">
+                <i class="fas fa-paper-plane"></i>
+            </button>
+        </form>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatContainer = document.getElementById('chatContainer');
+            const chatForm = document.getElementById('chatForm');
+            const userInput = document.getElementById('userInput');
+            const sendButton = document.getElementById('sendButton');
+            const themeToggle = document.getElementById('themeToggle');
+            // Check for saved theme preference or use system preference
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme) {
+                document.body.classList.toggle('dark-theme', savedTheme === 'dark');
+                updateThemeIcon();
+            }
+            // Add initial greeting
+            addBotMessage("Hello! I'm your AI assistant. How can I help you today?");
+            chatForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                const message = userInput.value.trim();
+                if (message) {
+                    addUserMessage(message);
+                    userInput.value = '';
+                    sendButton.disabled = true;
+                    // Show typing indicator
+                    showTypingIndicator();
+                    // Simulate AI response after a delay
+                    setTimeout(() => {
+                        removeTypingIndicator();
+                        const response = generateAIResponse(message);
+                        addBotMessage(response);
+                    }, 1500 + Math.random() * 2000);
+                }
+            });
+            userInput.addEventListener('input', function() {
+                sendButton.disabled = userInput.value.trim() === '';
+            });
+            themeToggle.addEventListener('click', function() {
+                document.body.classList.toggle('dark-theme');
+                const isDark = document.body.classList.contains('dark-theme');
+                localStorage.setItem('theme', isDark ? 'dark' : 'light');
+                updateThemeIcon();
+            });
+            function updateThemeIcon() {
+                const isDark = document.body.classList.contains('dark-theme');
+                themeToggle.innerHTML = isDark ? '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
+            }
+            function addUserMessage(message) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'message user-message';
+                messageDiv.innerHTML = `
+                    <div class="avatar user-avatar">
+                        <i class="fas fa-user"></i>
+                    </div>
+                    <div class="message-content">${escapeHtml(message)}</div>
+                `;
+                chatContainer.appendChild(messageDiv);
+                scrollToBottom();
+            }
+            function addBotMessage(message) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'message ai-message';
+                messageDiv.innerHTML = `
+                    <div class="avatar">
+                        <i class="fas fa-robot"></i>
+                    </div>
+                    <div class="message-content">${formatResponse(message)}</div>
+                `;
+                chatContainer.appendChild(messageDiv);
+                scrollToBottom();
+            }
+            function showTypingIndicator() {
+                const typingDiv = document.createElement('div');
+                typingDiv.className = 'typing-indicator';
+                typingDiv.id = 'typingIndicator';
+                typingDiv.innerHTML = `
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                `;
+                chatContainer.appendChild(typingDiv);
+                scrollToBottom();
+            }
+            function removeTypingIndicator() {
+                const typingIndicator = document.getElementById('typingIndicator');
+                if (typingIndicator) {
+                    typingIndicator.remove();
+                }
+            }
+            function scrollToBottom() {
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+            function escapeHtml(text) {
+                const div = document.createElement('div');
+                div.textContent = text;
+                return div.innerHTML;
+            }
+            function formatResponse(text) {
+                // Simple markdown formatting
+                let formatted = text;
+                // Bold (**text**)
+                formatted = formatted.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+                // Italic (*text*)
+                formatted = formatted.replace(/\*(.+?)\*/g, '<em>$1</em>');
+                // Lists
+                formatted = formatted.replace(/^\s*-\s(.+?)$/gm, '<li>$1</li>');
+                formatted = formatted.replace(/^(\s*<li>.+<\/li>\s*)+/gm, '<ul>$&</ul>');
+                formatted = formatted.replace(/(<ul>)\s*(<li>)/g, '$1$2');
+                // Line breaks to paragraphs
+                formatted = formatted.split('\n\n').map(p => `<p>${p}</p>`).join('');
+                return formatted;
+            }
+            function generateAIResponse(userMessage) {
+                const responses = [
+                    "I'm an AI language model designed to assist with various tasks. What specifically would you like help with today?",
+                    "That's an interesting question. Based on my knowledge, I'd suggest exploring resources about the topic for more detailed information.",
+                    "I can help answer questions, provide explanations, or even just chat. Let me know what's on your mind!",
+                    "Thanks for sharing that. Would you like me to expand on any particular aspect of your message?",
+                    "I understand what you're asking. Here's how I would approach this situation... [more context would help me give a better answer]",
+                    "That's a great point you've raised. Many people wonder about similar things. The key consideration is usually...",
+                    "I've processed your input and here's what I can tell you based on my current knowledge...",
+                    "I'm designed to be helpful, harmless, and honest in my responses. With that context, here's what I can share about your query...",
+                    "Let me think through that carefully. Based on the information available to me, here's my perspective..."
+                ];
+                const greetings = ["hi", "hello", "hey", "good day"];
+                const thanks = ["thank you", "thanks", "appreciate it"];
+                const complex = ["explain", "how does", "what is", "why", "tell me about"];
+                if (greetings.some(word => userMessage.toLowerCase().includes(word))) {
+                    return "Hello there! How can I assist you today? 😊";
+                }
+                if (thanks.some(word => userMessage.toLowerCase().includes(word))) {
+                    return "You're very welcome! Happy to help. Is there anything else you'd like to know?";
+                }
+                if (complex.some(word => userMessage.toLowerCase().includes(word))) {
+                    const topics = {
+                        "explain": "I'd be happy to explain that concept. The fundamental idea is that...",
+                        "how does": "The process works as follows:\n\n- Step 1: Initial setup\n- Step 2: Core functionality\n- Step 3: Final output\n\nWould you like more details?",
+                        "what is": "In simple terms, it's defined as... However, there are more technical aspects we could explore if you're interested.",
+                        "why": "The primary reason for this is... Other contributing factors might include...",
+                        "tell me about": "Certainly! Here's a brief overview:\n\n- Historical context: ...\n- Current applications: ...\n- Future developments: ..."
+                    };
+                    for (const [key, response] of Object.entries(topics)) {
+                        if (userMessage.toLowerCase().includes(key)) {
+                            return response;
+                        }
+                    }
+                }
+                return responses[Math.floor(Math.random() * responses.length)];
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <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>