Spaces:

zontos
/

chatpal-ai-companion-bot

Running

App Files Files Community

zontos commited on Oct 11

Commit

aaadd75

verified ·

1 Parent(s): a133c42

create a bootstrap chatbot. it must supports :

Browse files

- light/dark version
- multirow html texteditor
- modal to choose model and history
- voice
- emoji
- upload files and images (with preview)

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Chatpal Ai Companion Bot
-emoji: 📊
-colorFrom: green
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ChatPal - AI Companion Bot 🤖
+colorFrom: blue
+colorTo: blue
+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,401 @@
-<!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" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChatPal - AI Companion</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            light: '#6366f1',
+                            dark: '#818cf8'
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
+    <script src="https://unpkg.com/@pqina/flip/dist/flip.min.js"></script>
+    <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
+    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
+    <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js"></script>
+    <link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet">
+    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" rel="stylesheet">
+    <style>
+        .chat-container {
+            height: calc(100vh - 160px);
+        }
+        .message-content img {
+            max-width: 200px;
+            max-height: 200px;
+            border-radius: 8px;
+            margin-top: 8px;
+        }
+        .message-content pre {
+            background-color: rgba(0,0,0,0.1);
+            padding: 8px;
+            border-radius: 4px;
+            overflow-x: auto;
+        }
+        .dark .message-content pre {
+            background-color: rgba(255,255,255,0.1);
+        }
+        .emoji-btn:focus {
+            outline: none;
+        }
+        .filepond--root {
+            margin-bottom: 0;
+        }
+    </style>
+</head>
+<body class="h-full bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
+    <div class="flex flex-col h-full max-w-4xl mx-auto">
+        <!-- Header -->
+        <header class="bg-white dark:bg-gray-800 shadow-sm p-4 flex justify-between items-center">
+            <h1 class="text-xl font-bold text-gray-800 dark:text-white">ChatPal 🤖</h1>
+            <div class="flex items-center space-x-4">
+                <button id="historyBtn" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
+                    <i data-feather="clock"></i>
+                </button>
+                <button id="settingsBtn" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
+                    <i data-feather="settings"></i>
+                </button>
+                <button id="themeBtn" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
+                    <i data-feather="moon" class="dark:hidden"></i>
+                    <i data-feather="sun" class="hidden dark:block"></i>
+                </button>
+            </div>
+        </header>
+        <!-- Chat Area -->
+        <div class="chat-container overflow-y-auto p-4 bg-white dark:bg-gray-800 flex-1">
+            <div class="flex flex-col space-y-4" id="chatMessages">
+                <!-- Welcome message -->
+                <div class="flex items-start space-x-3">
+                    <div class="flex-shrink-0 bg-primary-light dark:bg-primary-dark rounded-full w-8 h-8 flex items-center justify-center text-white">
+                        <i data-feather="bot" class="w-4 h-4"></i>
+                    </div>
+                    <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg max-w-[80%]">
+                        <p class="text-gray-800 dark:text-gray-200">Hello! I'm your AI assistant. How can I help you today?</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Input Area -->
+        <div class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-4">
+            <form id="chatForm" class="space-y-2">
+                <div class="flex items-end space-x-2">
+                    <!-- File Upload -->
+                    <div class="w-10">
+                        <input type="file" class="filepond" id="fileUpload" name="fileUpload"
+                               data-max-file-size="10MB"
+                               accept="image/*,.pdf,.doc,.docx,.txt">
+                    </div>
+                    <!-- Text Input -->
+                    <div class="flex-1 relative">
+                        <div id="textEditor" class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 min-h-[40px] max-h-[120px] overflow-y-auto bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" contenteditable="true" placeholder="Type your message..."></div>
+                        <!-- Emoji Picker Toggle -->
+                        <button type="button" id="emojiBtn" class="absolute right-2 bottom-2 text-gray-500 hover:text-primary-light dark:hover:text-primary-dark emoji-btn">
+                            <i data-feather="smile"></i>
+                        </button>
+                    </div>
+                    <!-- Voice/Send Buttons -->
+                    <div class="flex space-x-2">
+                        <button type="button" id="voiceBtn" class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300">
+                            <i data-feather="mic"></i>
+                        </button>
+                        <button type="submit" class="p-2 rounded-full bg-primary-light dark:bg-primary-dark text-white hover:opacity-90">
+                            <i data-feather="send"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Emoji Picker (hidden by default) -->
+                <div id="emojiPicker" class="hidden"></div>
+            </form>
+        </div>
+    </div>
+    <!-- History Modal -->
+    <div id="historyModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md max-h-[80vh] overflow-hidden">
+            <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Chat History</h3>
+                <button id="closeHistoryModal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <div class="overflow-y-auto p-4">
+                <ul id="historyList" class="space-y-2">
+                    <li class="p-3 rounded-lg bg-gray-100 dark:bg-gray-700 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600">
+                        <p class="text-gray-800 dark:text-gray-200 font-medium">Getting started with AI</p>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Today, 10:30 AM</p>
+                    </li>
+                    <li class="p-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                        <p class="text-gray-800 dark:text-gray-200 font-medium">Project brainstorming</p>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Yesterday, 2:15 PM</p>
+                    </li>
+                </ul>
+            </div>
+            <div class="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-end">
+                <button id="clearHistoryBtn" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600">Clear History</button>
+            </div>
+        </div>
+    </div>
+    <!-- Settings Modal -->
+    <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md max-h-[80vh] overflow-hidden">
+            <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Settings</h3>
+                <button id="closeSettingsModal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <div class="overflow-y-auto p-4 space-y-6">
+                <div>
+                    <h4 class="text-md font-medium text-gray-800 dark:text-white mb-2">AI Model</h4>
+                    <select class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
+                        <option>GPT-4</option>
+                        <option>GPT-3.5</option>
+                        <option>Claude 2</option>
+                        <option>Llama 2</option>
+                    </select>
+                </div>
+                <div>
+                    <h4 class="text-md font-medium text-gray-800 dark:text-white mb-2">Voice Input</h4>
+                    <div class="flex items-center space-x-2">
+                        <label class="inline-flex items-center">
+                            <input type="checkbox" class="rounded border-gray-300 text-primary-light dark:text-primary-dark shadow-sm focus:border-primary-light focus:ring focus:ring-primary-light focus:ring-opacity-50">
+                            <span class="ml-2 text-gray-700 dark:text-gray-300">Enable voice input</span>
+                        </label>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-md font-medium text-gray-800 dark:text-white mb-2">Appearance</h4>
+                    <div class="flex space-x-4">
+                        <button id="lightThemeBtn" class="px-4 py-2 border rounded-lg flex items-center space-x-2">
+                            <i data-feather="sun" class="w-4 h-4"></i>
+                            <span>Light</span>
+                        </button>
+                        <button id="darkThemeBtn" class="px-4 py-2 border rounded-lg flex items-center space-x-2">
+                            <i data-feather="moon" class="w-4 h-4"></i>
+                            <span>Dark</span>
+                        </button>
+                        <button id="systemThemeBtn" class="px-4 py-2 border rounded-lg flex items-center space-x-2">
+                            <i data-feather="monitor" class="w-4 h-4"></i>
+                            <span>System</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-end">
+                <button id="saveSettingsBtn" class="px-4 py-2 bg-primary-light dark:bg-primary-dark text-white rounded-lg hover:opacity-90">Save Settings</button>
+            </div>
+        </div>
+    </div>
+    <!-- File Preview Modal -->
+    <div id="filePreviewModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
+            <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+                <h3 class="text-lg font-medium text-gray-800 dark:text-white">File Preview</h3>
+                <button id="closeFilePreviewModal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <div class="overflow-y-auto p-4 flex justify-center">
+                <img id="previewImage" src="" alt="Preview" class="max-w-full max-h-[60vh] rounded-lg">
+                <div id="previewDocument" class="hidden w-full h-[60vh] bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+                    <div class="text-center p-6">
+                        <i data-feather="file-text" class="w-12 h-12 mx-auto text-gray-400"></i>
+                        <p class="mt-2 text-gray-800 dark:text-gray-200">Document preview not available</p>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Download to view the full content</p>
+                        <button class="mt-4 px-4 py-2 bg-primary-light dark:bg-primary-dark text-white rounded-lg hover:opacity-90">Download</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize FilePond
+        FilePond.registerPlugin(FilePondPluginImagePreview);
+        FilePond.registerPlugin(FilePondPluginFileValidateType);
+        const pond = FilePond.create(document.querySelector('input[type="file"]'), {
+            allowMultiple: true,
+            acceptedFileTypes: ['image/*', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/plain'],
+            fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
+                resolve(type);
+            }),
+            onaddfile: (error, file) => {
+                if (error) return;
+                if (file.fileType === 'image') {
+                    // Show preview modal
+                    document.getElementById('previewImage').src = URL.createObjectURL(file.file);
+                    document.getElementById('previewDocument').classList.add('hidden');
+                    document.getElementById('previewImage').classList.remove('hidden');
+                    document.getElementById('filePreviewModal').classList.remove('hidden');
+                } else {
+                    // Show document placeholder
+                    document.getElementById('previewImage').classList.add('hidden');
+                    document.getElementById('previewDocument').classList.remove('hidden');
+                    document.getElementById('filePreviewModal').classList.remove('hidden');
+                }
+            }
+        });
+        // Initialize emoji picker
+        const picker = document.getElementById('emojiPicker');
+        const emojiBtn = document.getElementById('emojiBtn');
+        const textEditor = document.getElementById('textEditor');
+        new EmojiPicker({
+            locale: 'en',
+            onClick: emoji => {
+                textEditor.innerHTML += emoji;
+                textEditor.focus();
+                picker.classList.add('hidden');
+            }
+        }).mount('#emojiPicker');
+        emojiBtn.addEventListener('click', () => {
+            picker.classList.toggle('hidden');
+        });
+        // Modal handlers
+        document.getElementById('historyBtn').addEventListener('click', () => {
+            document.getElementById('historyModal').classList.remove('hidden');
+        });
+        document.getElementById('settingsBtn').addEventListener('click', () => {
+            document.getElementById('settingsModal').classList.remove('hidden');
+        });
+        document.getElementById('closeHistoryModal').addEventListener('click', () => {
+            document.getElementById('historyModal').classList.add('hidden');
+        });
+        document.getElementById('closeSettingsModal').addEventListener('click', () => {
+            document.getElementById('settingsModal').classList.add('hidden');
+        });
+        document.getElementById('closeFilePreviewModal').addEventListener('click', () => {
+            document.getElementById('filePreviewModal').classList.add('hidden');
+        });
+        // Theme switcher
+        document.getElementById('themeBtn').addEventListener('click', () => {
+            if (document.documentElement.classList.contains('dark')) {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+            } else {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+        });
+        document.getElementById('lightThemeBtn').addEventListener('click', () => {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+        });
+        document.getElementById('darkThemeBtn').addEventListener('click', () => {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+        });
+        document.getElementById('systemThemeBtn').addEventListener('click', () => {
+            localStorage.removeItem('theme');
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        });
+        // Check for saved theme preference or use system preference
+        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+        // Chat form submission
+        document.getElementById('chatForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            const message = textEditor.innerHTML.trim();
+            if (message || pond.getFiles().length > 0) {
+                // Add user message
+                addMessage('user', message);
+                // Clear input
+                textEditor.innerHTML = '';
+                pond.removeFiles();
+                // Simulate bot response
+                setTimeout(() => {
+                    addMessage('bot', "Thanks for your message! I'm processing your request...");
+                }, 1000);
+            }
+        });
+        // Add message to chat
+        function addMessage(sender, content) {
+            const chatMessages = document.getElementById('chatMessages');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `flex items-start space-x-3 ${sender === 'user' ? 'justify-end' : ''}`;
+            if (sender === 'user') {
+                messageDiv.innerHTML = `
+                    <div class="bg-primary-light dark:bg-primary-dark text-white p-3 rounded-lg max-w-[80%]">
+                        <div class="message-content">${content}</div>
+                    </div>
+                    <div class="flex-shrink-0 bg-gray-300 rounded-full w-8 h-8 flex items-center justify-center">
+                        <i data-feather="user" class="w-4 h-4 text-gray-700"></i>
+                    </div>
+                `;
+            } else {
+                messageDiv.innerHTML = `
+                    <div class="flex-shrink-0 bg-primary-light dark:bg-primary-dark rounded-full w-8 h-8 flex items-center justify-center text-white">
+                        <i data-feather="bot" class="w-4 h-4"></i>
+                    </div>
+                    <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg max-w-[80%]">
+                        <div class="message-content">${content}</div>
+                    </div>
+                `;
+            }
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            feather.replace();
+        }
+        // Voice recognition (simplified)
+        document.getElementById('voiceBtn').addEventListener('click', () => {
+            alert("Voice input would be implemented here with the Web Speech API");
+        });
+        // Initialize feather icons
+        document.addEventListener('DOMContentLoaded', () => {
+            feather.replace();
+        });
+    </script>
+</body>
 </html>