Spaces:

malik-AI
/

email-checker

Running

App Files Files Community

Muhammad Farooq commited on Jun 29, 2025

Commit

ebeb20a

verified ·

1 Parent(s): 5b649e8

read this full repo including code and make a similar simple project that have purpose of graphics agents like it work like a human, check email, copy body of email and paste it on the deepseek or chatgpt.com and get the reply and also do work with the user on desktop https://github.com/huggingface/screensuite?tab=readme-ov-file - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +535 -19

README.md CHANGED Viewed

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

 ---
+title: email-checker
+emoji: 🐳
 colorFrom: blue
+colorTo: yellow
 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,535 @@
-<!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>AI Graphics Assistant</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .window {
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            transition: all 0.3s ease;
+        }
+        .window:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .taskbar {
+            backdrop-filter: blur(10px);
+        }
+        .email-item:hover {
+            background-color: rgba(59, 130, 246, 0.1);
+        }
+        .ai-response {
+            border-left: 4px solid #3b82f6;
+        }
+        .typing-indicator span {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #6b7280;
+            margin: 0 2px;
+            animation: bounce 1.4s infinite ease-in-out;
+        }
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes bounce {
+            0%, 60%, 100% { transform: translateY(0); }
+            30% { transform: translateY(-5px); }
+        }
+        .desktop-icon {
+            transition: all 0.2s ease;
+        }
+        .desktop-icon:hover {
+            transform: scale(1.05);
+            background-color: rgba(59, 130, 246, 0.1);
+        }
+        .resize-handle {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            right: 0;
+            bottom: 0;
+            cursor: nwse-resize;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 h-screen overflow-hidden font-sans">
+    <!-- Desktop Background -->
+    <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-100"></div>
+    <!-- Desktop Icons -->
+    <div class="absolute top-4 left-4 flex flex-col space-y-4">
+        <div class="desktop-icon w-16 h-16 flex flex-col items-center justify-center p-2 rounded cursor-pointer">
+            <i class="fas fa-envelope text-blue-500 text-2xl mb-1"></i>
+            <span class="text-xs text-center text-gray-700">Email Client</span>
+        </div>
+        <div class="desktop-icon w-16 h-16 flex flex-col items-center justify-center p-2 rounded cursor-pointer">
+            <i class="fas fa-robot text-indigo-500 text-2xl mb-1"></i>
+            <span class="text-xs text-center text-gray-700">AI Assistant</span>
+        </div>
+        <div class="desktop-icon w-16 h-16 flex flex-col items-center justify-center p-2 rounded cursor-pointer">
+            <i class="fas fa-tasks text-green-500 text-2xl mb-1"></i>
+            <span class="text-xs text-center text-gray-700">Tasks</span>
+        </div>
+    </div>
+    <!-- Windows -->
+    <div class="absolute top-20 left-20 w-96 bg-white rounded-lg window" id="email-window">
+        <div class="bg-gray-800 text-white px-3 py-2 rounded-t-lg flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-envelope mr-2"></i>
+                <span>Email Client</span>
+            </div>
+            <div class="flex space-x-2">
+                <button class="w-3 h-3 rounded-full bg-yellow-500"></button>
+                <button class="w-3 h-3 rounded-full bg-green-500"></button>
+                <button class="w-3 h-3 rounded-full bg-red-500"></button>
+            </div>
+        </div>
+        <div class="p-4">
+            <div class="flex mb-4">
+                <input type="text" placeholder="Search emails..." class="flex-1 px-3 py-2 border rounded-l focus:outline-none focus:ring-1 focus:ring-blue-500">
+                <button class="bg-blue-500 text-white px-3 py-2 rounded-r hover:bg-blue-600">
+                    <i class="fas fa-search"></i>
+                </button>
+            </div>
+            <div class="border rounded overflow-hidden">
+                <div class="bg-gray-100 p-2 border-b flex justify-between items-center">
+                    <span class="font-medium">Inbox (3 new)</span>
+                    <button class="text-blue-500 hover:text-blue-700">
+                        <i class="fas fa-sync-alt"></i>
+                    </button>
+                </div>
+                <div class="divide-y divide-gray-200 max-h-64 overflow-y-auto" id="email-list">
+                    <div class="email-item p-3 cursor-pointer hover:bg-blue-50" data-id="1">
+                        <div class="flex justify-between">
+                            <span class="font-medium">John Doe</span>
+                            <span class="text-xs text-gray-500">10:30 AM</span>
+                        </div>
+                        <div class="text-sm text-gray-700">Project deadline extension request</div>
+                        <div class="text-xs text-gray-500 truncate">Hi team, I wanted to request an extension for the current project deadline due to unexpected...</div>
+                    </div>
+                    <div class="email-item p-3 cursor-pointer hover:bg-blue-50" data-id="2">
+                        <div class="flex justify-between">
+                            <span class="font-medium">Sarah Johnson</span>
+                            <span class="text-xs text-gray-500">9:15 AM</span>
+                        </div>
+                        <div class="text-sm text-gray-700">Meeting notes from yesterday</div>
+                        <div class="text-xs text-gray-500 truncate">Attached are the meeting notes from our discussion yesterday about the new product features...</div>
+                    </div>
+                    <div class="email-item p-3 cursor-pointer hover:bg-blue-50" data-id="3">
+                        <div class="flex justify-between">
+                            <span class="font-medium">Tech Support</span>
+                            <span class="text-xs text-gray-500">Yesterday</span>
+                        </div>
+                        <div class="text-sm text-gray-700">Your support ticket #45782</div>
+                        <div class="text-xs text-gray-500 truncate">We've resolved your issue with the login authentication. Please let us know if you experience any further...</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="resize-handle"></div>
+    </div>
+    <div class="absolute top-32 left-96 w-96 bg-white rounded-lg window hidden" id="email-detail-window">
+        <div class="bg-gray-800 text-white px-3 py-2 rounded-t-lg flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-envelope-open mr-2"></i>
+                <span>Email Details</span>
+            </div>
+            <div class="flex space-x-2">
+                <button class="w-3 h-3 rounded-full bg-yellow-500"></button>
+                <button class="w-3 h-3 rounded-full bg-green-500"></button>
+                <button class="w-3 h-3 rounded-full bg-red-500"></button>
+            </div>
+        </div>
+        <div class="p-4">
+            <div class="mb-4">
+                <div class="flex justify-between items-start mb-2">
+                    <div>
+                        <h3 class="font-medium" id="email-sender">John Doe</h3>
+                        <p class="text-xs text-gray-500" id="email-subject">Project deadline extension request</p>
+                    </div>
+                    <span class="text-xs text-gray-500" id="email-time">10:30 AM</span>
+                </div>
+                <div class="text-sm text-gray-700 p-3 bg-gray-50 rounded" id="email-body">
+                    Hi team,<br><br>
+                    I wanted to request an extension for the current project deadline due to unexpected delays in receiving the design assets from our vendor. We're currently two days behind schedule and would need at least three more working days to complete the implementation.<br><br>
+                    Please let me know if this would be possible. I've attached the revised timeline for your review.<br><br>
+                    Best regards,<br>
+                    John
+                </div>
+            </div>
+            <div class="flex space-x-2">
+                <button class="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 text-sm" id="process-email-btn">
+                    <i class="fas fa-robot mr-1"></i> Process with AI
+                </button>
+                <button class="bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-gray-300 text-sm">
+                    <i class="fas fa-reply mr-1"></i> Reply
+                </button>
+                <button class="bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-gray-300 text-sm">
+                    <i class="fas fa-trash mr-1"></i> Delete
+                </button>
+            </div>
+        </div>
+        <div class="resize-handle"></div>
+    </div>
+    <div class="absolute top-40 right-20 w-96 bg-white rounded-lg window hidden" id="ai-assistant-window">
+        <div class="bg-indigo-800 text-white px-3 py-2 rounded-t-lg flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-robot mr-2"></i>
+                <span>AI Assistant</span>
+            </div>
+            <div class="flex space-x-2">
+                <button class="w-3 h-3 rounded-full bg-yellow-500"></button>
+                <button class="w-3 h-3 rounded-full bg-green-500"></button>
+                <button class="w-3 h-3 rounded-full bg-red-500"></button>
+            </div>
+        </div>
+        <div class="p-4">
+            <div class="mb-4 flex items-start">
+                <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">
+                    <i class="fas fa-robot"></i>
+                </div>
+                <div class="flex-1">
+                    <div class="bg-gray-100 p-3 rounded-lg ai-response">
+                        <p>Hello! I'm your AI assistant. I can help you process emails, generate responses, and assist with various tasks. How can I help you today?</p>
+                    </div>
+                </div>
+            </div>
+            <div class="mb-4 flex items-start hidden" id="email-processing-container">
+                <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">
+                    <i class="fas fa-robot"></i>
+                </div>
+                <div class="flex-1">
+                    <div class="bg-gray-100 p-3 rounded-lg ai-response">
+                        <p class="font-medium mb-2">Processing email from <span id="ai-email-sender">John Doe</span>:</p>
+                        <div class="text-sm mb-3 p-2 bg-white rounded border" id="ai-email-content">
+                            Hi team, I wanted to request an extension for the current project deadline due to unexpected delays...
+                        </div>
+                        <div class="typing-indicator mb-2 hidden" id="ai-typing">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                        <div class="hidden" id="ai-response-content">
+                            <p class="font-medium mb-1">Suggested Response:</p>
+                            <div class="text-sm p-2 bg-white rounded border mb-2" id="ai-suggested-response">
+                                Hi John,<br><br>
+                                Thank you for your email. We understand that unexpected delays can occur and we're happy to accommodate your request for a deadline extension. The additional three working days you've requested are approved.<br><br>
+                                Please keep us updated on your progress and let us know if you need any additional support from our end.<br><br>
+                                Best regards,<br>
+                                [Your Name]
+                            </div>
+                            <div class="flex space-x-2">
+                                <button class="bg-indigo-500 text-white px-3 py-1 rounded hover:bg-indigo-600 text-sm" id="use-response-btn">
+                                    <i class="fas fa-check mr-1"></i> Use This Response
+                                </button>
+                                <button class="bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-gray-300 text-sm" id="regenerate-btn">
+                                    <i class="fas fa-sync-alt mr-1"></i> Regenerate
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-4">
+                <div class="flex">
+                    <input type="text" placeholder="Ask the AI assistant..." class="flex-1 px-3 py-2 border rounded-l focus:outline-none focus:ring-1 focus:ring-indigo-500" id="ai-prompt">
+                    <button class="bg-indigo-500 text-white px-3 py-2 rounded-r hover:bg-indigo-600" id="send-prompt-btn">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="resize-handle"></div>
+    </div>
+    <!-- Taskbar -->
+    <div class="absolute bottom-0 left-0 right-0 bg-gray-800 bg-opacity-90 text-white taskbar">
+        <div class="flex items-center justify-between px-4 py-1">
+            <div class="flex items-center space-x-4">
+                <button class="p-2 rounded hover:bg-gray-700" id="start-btn">
+                    <i class="fas fa-bars"></i>
+                </button>
+                <button class="p-2 rounded hover:bg-gray-700" id="email-app-btn">
+                    <i class="fas fa-envelope"></i>
+                </button>
+                <button class="p-2 rounded hover:bg-gray-700" id="ai-app-btn">
+                    <i class="fas fa-robot"></i>
+                </button>
+            </div>
+            <div class="flex items-center space-x-2">
+                <span id="current-time" class="text-sm">10:45 AM</span>
+                <button class="p-1 rounded hover:bg-gray-700">
+                    <i class="fas fa-wifi"></i>
+                </button>
+                <button class="p-1 rounded hover:bg-gray-700">
+                    <i class="fas fa-battery-three-quarters"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Update current time
+        function updateTime() {
+            const now = new Date();
+            let hours = now.getHours();
+            const minutes = now.getMinutes().toString().padStart(2, '0');
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            hours = hours % 12;
+            hours = hours ? hours : 12; // the hour '0' should be '12'
+            document.getElementById('current-time').textContent = `${hours}:${minutes} ${ampm}`;
+        }
+        setInterval(updateTime, 1000);
+        updateTime();
+        // Window management
+        let activeWindow = null;
+        let zIndex = 1;
+        function bringToFront(windowElement) {
+            windowElement.style.zIndex = zIndex++;
+            activeWindow = windowElement;
+        }
+        function setupWindow(windowElement) {
+            const header = windowElement.querySelector('.bg-gray-800, .bg-indigo-800');
+            let isDragging = false;
+            let offsetX, offsetY;
+            // Make window draggable
+            header.addEventListener('mousedown', (e) => {
+                isDragging = true;
+                offsetX = e.clientX - windowElement.getBoundingClientRect().left;
+                offsetY = e.clientY - windowElement.getBoundingClientRect().top;
+                bringToFront(windowElement);
+                e.preventDefault();
+            });
+            document.addEventListener('mousemove', (e) => {
+                if (!isDragging) return;
+                const x = e.clientX - offsetX;
+                const y = e.clientY - offsetY;
+                windowElement.style.left = `${x}px`;
+                windowElement.style.top = `${y}px`;
+            });
+            document.addEventListener('mouseup', () => {
+                isDragging = false;
+            });
+            // Make window resizable
+            const resizeHandle = windowElement.querySelector('.resize-handle');
+            let isResizing = false;
+            let startX, startY, startWidth, startHeight;
+            resizeHandle.addEventListener('mousedown', (e) => {
+                isResizing = true;
+                startX = e.clientX;
+                startY = e.clientY;
+                startWidth = parseInt(document.defaultView.getComputedStyle(windowElement).width, 10);
+                startHeight = parseInt(document.defaultView.getComputedStyle(windowElement).height, 10);
+                bringToFront(windowElement);
+                e.preventDefault();
+            });
+            document.addEventListener('mousemove', (e) => {
+                if (!isResizing) return;
+                const width = startWidth + (e.clientX - startX);
+                const height = startHeight + (e.clientY - startY);
+                windowElement.style.width = `${width}px`;
+                windowElement.style.height = `${height}px`;
+            });
+            document.addEventListener('mouseup', () => {
+                isResizing = false;
+            });
+            // Close buttons
+            const closeButtons = windowElement.querySelectorAll('.bg-red-500');
+            closeButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    windowElement.style.display = 'none';
+                });
+            });
+            // Minimize buttons
+            const minimizeButtons = windowElement.querySelectorAll('.bg-yellow-500');
+            minimizeButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    windowElement.style.display = 'none';
+                    // In a real app, we'd add it to the taskbar
+                });
+            });
+            // Maximize buttons
+            const maximizeButtons = windowElement.querySelectorAll('.bg-green-500');
+            maximizeButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    if (windowElement.style.width === '90vw' && windowElement.style.height === '80vh') {
+                        windowElement.style.width = '400px';
+                        windowElement.style.height = 'auto';
+                        windowElement.style.left = '80px';
+                        windowElement.style.top = '80px';
+                    } else {
+                        windowElement.style.width = '90vw';
+                        windowElement.style.height = '80vh';
+                        windowElement.style.left = '5vw';
+                        windowElement.style.top = '10vh';
+                    }
+                    bringToFront(windowElement);
+                });
+            });
+        }
+        // Initialize windows
+        const windows = document.querySelectorAll('.window');
+        windows.forEach(window => {
+            setupWindow(window);
+            window.addEventListener('mousedown', () => bringToFront(window));
+        });
+        // Taskbar buttons
+        document.getElementById('email-app-btn').addEventListener('click', () => {
+            const emailWindow = document.getElementById('email-window');
+            emailWindow.style.display = 'block';
+            bringToFront(emailWindow);
+        });
+        document.getElementById('ai-app-btn').addEventListener('click', () => {
+            const aiWindow = document.getElementById('ai-assistant-window');
+            aiWindow.style.display = 'block';
+            bringToFront(aiWindow);
+        });
+        // Email list functionality
+        const emailItems = document.querySelectorAll('.email-item');
+        const emailDetailWindow = document.getElementById('email-detail-window');
+        emailItems.forEach(item => {
+            item.addEventListener('click', () => {
+                // Show email details
+                const emailId = item.getAttribute('data-id');
+                const sender = item.querySelector('span:first-child').textContent;
+                const subject = item.querySelector('div:first-of-type').textContent;
+                const time = item.querySelector('span:last-child').textContent;
+                document.getElementById('email-sender').textContent = sender;
+                document.getElementById('email-subject').textContent = subject;
+                document.getElementById('email-time').textContent = time;
+                // In a real app, we'd fetch the full email content based on the ID
+                emailDetailWindow.style.display = 'block';
+                bringToFront(emailDetailWindow);
+            });
+        });
+        // Process email with AI
+        document.getElementById('process-email-btn').addEventListener('click', () => {
+            const aiWindow = document.getElementById('ai-assistant-window');
+            const emailProcessingContainer = document.getElementById('email-processing-container');
+            const aiEmailSender = document.getElementById('ai-email-sender');
+            const aiEmailContent = document.getElementById('ai-email-content');
+            const aiTyping = document.getElementById('ai-typing');
+            const aiResponseContent = document.getElementById('ai-response-content');
+            // Get email details
+            const sender = document.getElementById('email-sender').textContent;
+            const body = document.getElementById('email-body').textContent;
+            // Update AI window
+            aiEmailSender.textContent = sender;
+            aiEmailContent.textContent = body;
+            // Show AI window and processing container
+            aiWindow.style.display = 'block';
+            emailProcessingContainer.classList.remove('hidden');
+            aiTyping.classList.remove('hidden');
+            aiResponseContent.classList.add('hidden');
+            bringToFront(aiWindow);
+            // Simulate AI processing
+            setTimeout(() => {
+                aiTyping.classList.add('hidden');
+                aiResponseContent.classList.remove('hidden');
+            }, 2000);
+        });
+        // AI assistant interaction
+        document.getElementById('send-prompt-btn').addEventListener('click', () => {
+            const prompt = document.getElementById('ai-prompt').value;
+            if (!prompt.trim()) return;
+            // In a real app, this would send the prompt to an AI API
+            console.log('Sending prompt to AI:', prompt);
+            // Clear input
+            document.getElementById('ai-prompt').value = '';
+        });
+        // Use AI-generated response
+        document.getElementById('use-response-btn').addEventListener('click', () => {
+            alert('Response copied to clipboard and ready to use in email reply!');
+        });
+        // Regenerate response
+        document.getElementById('regenerate-btn').addEventListener('click', () => {
+            const aiTyping = document.getElementById('ai-typing');
+            const aiResponseContent = document.getElementById('ai-response-content');
+            aiTyping.classList.remove('hidden');
+            aiResponseContent.classList.add('hidden');
+            // Simulate AI processing
+            setTimeout(() => {
+                aiTyping.classList.add('hidden');
+                aiResponseContent.classList.remove('hidden');
+                // Update with new response (in a real app, this would come from the AI)
+                document.getElementById('ai-suggested-response').innerHTML = `
+                    Hi John,<br><br>
+                    We've reviewed your request for a deadline extension. While we understand the challenges you're facing,
+                    we can only approve a two-day extension at this time due to upcoming client deliverables.<br><br>
+                    Please adjust your timeline accordingly and let us know if you need any support to meet this adjusted deadline.<br><br>
+                    Best regards,<br>
+                    [Your Name]
+                `;
+            }, 1500);
+        });
+        // Desktop icons
+        const desktopIcons = document.querySelectorAll('.desktop-icon');
+        desktopIcons.forEach(icon => {
+            icon.addEventListener('dblclick', () => {
+                if (icon.querySelector('.fa-envelope')) {
+                    const emailWindow = document.getElementById('email-window');
+                    emailWindow.style.display = 'block';
+                    bringToFront(emailWindow);
+                } else if (icon.querySelector('.fa-robot')) {
+                    const aiWindow = document.getElementById('ai-assistant-window');
+                    aiWindow.style.display = 'block';
+                    bringToFront(aiWindow);
+                }
+            });
+        });
+    </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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chainmindsx/email-checker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>