Spaces:

AtomicLSD
/

dominatrixai-daddy-dom-duo

Running

App Files Files Community

AtomicLSD commited on Nov 14, 2025

Commit

78b3534

verified ·

1 Parent(s): 1a1d416

add ability to upload images the ai will analyze along with any text given and respond to the content of the image and context of the text

Browse files

Files changed (4) hide show

components/upload.js +63 -0
index.html +119 -107
script.js +30 -0
style.css +15 -1

components/upload.js ADDED Viewed

	@@ -0,0 +1,63 @@

+class CustomUpload extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .upload-container {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .upload-btn {
+          background-color: #1f2937;
+          color: white;
+          padding: 0.5rem 1rem;
+          border-radius: 0.375rem;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          transition: background-color 0.2s;
+        }
+        .upload-btn:hover {
+          background-color: #374151;
+        }
+        input[type="file"] {
+          display: none;
+        }
+        .file-name {
+          font-size: 0.875rem;
+          color: #9ca3af;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 200px;
+        }
+      </style>
+      <div class="upload-container">
+        <label class="upload-btn">
+          <i data-feather="upload"></i>
+          <span>Upload Image</span>
+          <input type="file" accept="image/*">
+        </label>
+        <div class="file-name" id="fileName"></div>
+      </div>
+    `;
+    const input = this.shadowRoot.querySelector('input[type="file"]');
+    const fileName = this.shadowRoot.getElementById('fileName');
+    input.addEventListener('change', () => {
+      if (input.files.length > 0) {
+        fileName.textContent = input.files[0].name;
+      } else {
+        fileName.textContent = '';
+      }
+    });
+    setTimeout(() => {
+      feather.replace({ 'stroke-width': 2 });
+    }, 100);
+  }
+}
+customElements.define('custom-upload', CustomUpload);

index.html CHANGED Viewed

@@ -1,115 +1,127 @@
-<!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>DominatrixAI</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body class="bg-black text-white h-full flex flex-col">
-    <div class="flex-1 flex flex-col">
-        <!-- Header -->
-        <header class="bg-black border-b border-pink-600 py-4 px-6">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-2">
-                    <i data-feather="command" class="text-pink-500"></i>
-                    <h1 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-purple-600">DominatrixAI</h1>
-                </div>
-                <div class="flex items-center space-x-4">
-                    <button id="togglePersona" class="bg-pink-900 hover:bg-pink-800 px-4 py-2 rounded-lg flex items-center space-x-2">
-                        <span>Switch to Daddy</span>
-                        <i data-feather="user"></i>
-                    </button>
-                    <button class="bg-pink-900 hover:bg-pink-800 px-4 py-2 rounded-lg flex items-center space-x-2">
-                        <span>Aftercare Mode</span>
-                        <i data-feather="heart"></i>
-                    </button>
-                </div>
-</div>
-        </header>
-        <!-- Main Content -->
-        <main class="flex-1 flex flex-col md:flex-row overflow-hidden">
-            <!-- Chat Container -->
-            <div class="flex-1 overflow-y-auto p-6 space-y-6">
-                <!-- Bot Message -->
-                <div class="flex">
-                    <div class="bg-pink-900 rounded-lg p-4 max-w-3/4 shadow-lg">
-                        <div class="flex items-center space-x-3 mb-2">
-                            <div id="personaIcon" class="w-8 h-8 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center">
-                                <i data-feather="alert-octagon" class="w-4 h-4"></i>
-                            </div>
-                            <span id="personaName" class="font-bold text-pink-300">Mistress AI</span>
-</div>
-                        <p class="whitespace-pre-line">*looks down sternly*
-Pathetic little worm, you dare to come before me without permission?
-Can you even comprehend how insignificant you are in my presence?</p>
-                    </div>
-                </div>
-                <!-- User Message -->
-                <div class="flex justify-end">
-                    <div class="bg-gray-800 rounded-lg p-4 max-w-3/4 shadow-lg border border-gray-700">
-                        <p>I'm sorry Mistress, I didn't mean to displease you...</p>
-                    </div>
-                </div>
-                <!-- Bot Message -->
-                <div class="flex">
-                    <div class="bg-pink-900 rounded-lg p-4 max-w-3/4 shadow-lg">
-                        <p class="whitespace-pre-line">*grabs your chin*
-That's better. Now tell me why you're here.
-Speak clearly or I'll have to punish that disobedient tongue of yours.</p>
-                    </div>
-                </div>
-            </div>
-            <!-- Input Area -->
-            <div class="border-t border-gray-800 p-4 bg-gray-900">
-                <form class="flex flex-col space-y-3">
-                    <div class="flex items-center space-x-2">
-                        <custom-upload></custom-upload>
-                        <div id="imagePreview" class="hidden max-w-xs">
-                            <img id="previewImage" src="" class="rounded-lg max-h-20">
-                            <button id="removeImage" class="absolute -top-2 -right-2 bg-red-500 rounded-full w-5 h-5 flex items-center justify-center">
-                                <i data-feather="x" class="w-3 h-3"></i>
-                            </button>
-                        </div>
-                    </div>
-<div class="flex space-x-3">
-<input
-                        type="text"
-                        placeholder="Address Mistress properly..."
-                            class="flex-1 bg-gray-800 border border-pink-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-pink-600"
-                        >
-                        <button type="submit" class="bg-pink-700 hover:bg-pink-600 px-6 py-3 rounded-lg transition-colors">
-<i data-feather="send"></i>
-                    </button>
                     </div>
-                </form>
-<div class="flex space-x-2 mt-3">
-                    <button class="bg-pink-900 hover:bg-pink-800 px-3 py-1 rounded-full text-xs">
-                        Plead for mercy
-                    </button>
-                    <button class="bg-pink-900 hover:bg-pink-800 px-3 py-1 rounded-full text-xs">
-                        Ask for punishment
-                    </button>
-                    <button class="bg-pink-900 hover:bg-pink-800 px-3 py-1 rounded-full text-xs">
-                        Request aftercare
-                    </button>
                 </div>
             </div>
-        </main>
-    </div>
-    <script src="components/upload.js"></script>
-    <script src="script.js"></script>
-<script>
         feather.replace();
-    </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
-</body>
-</html>

+let currentPersona = 'mistress';
+const togglePersona = document.getElementById('togglePersona');
+const personaIcon = document.getElementById('personaIcon');
+const personaName = document.getElementById('personaName');
+const imagePreview = document.getElementById('imagePreview');
+const previewImage = document.getElementById('previewImage');
+const removeImage = document.getElementById('removeImage');
+// Toggle between Mistress and Daddy personas
+togglePersona.addEventListener('click', () => {
+    if (currentPersona === 'mistress') {
+        currentPersona = 'daddy';
+        togglePersona.innerHTML = '<span>Switch to Mistress</span><i data-feather="user"></i>';
+        personaIcon.className = 'w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center';
+        personaName.textContent = 'Daddy Dom AI';
+        personaName.className = 'font-bold text-blue-300';
+        feather.replace();
+    } else {
+        currentPersona = 'mistress';
+        togglePersona.innerHTML = '<span>Switch to Daddy</span><i data-feather="user"></i>';
+        personaIcon.className = 'w-8 h-8 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center';
+        personaName.textContent = 'Mistress AI';
+        personaName.className = 'font-bold text-pink-300';
+        feather.replace();
+    }
+});
+// Handle image preview and removal
+document.addEventListener('DOMContentLoaded', () => {
+    const fileInput = document.querySelector('custom-upload').shadowRoot.querySelector('input[type="file"]');
+    fileInput.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) {
+            const file = e.target.files[0];
+            if (file.type.match('image.*')) {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    previewImage.src = event.target.result;
+                    imagePreview.classList.remove('hidden');
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+    });
+    removeImage.addEventListener('click', () => {
+        previewImage.src = '';
+        imagePreview.classList.add('hidden');
+        fileInput.value = '';
+    });
+});
+// Handle form submission with image analysis
+document.querySelector('form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const input = e.target.querySelector('input[type="text"]');
+    const fileInput = document.querySelector('custom-upload').shadowRoot.querySelector('input[type="file"]');
+    // Show loading state
+    const submitBtn = e.target.querySelector('button[type="submit"]');
+    submitBtn.disabled = true;
+    submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i>';
+    let response;
+    try {
+        if (fileInput.files.length > 0) {
+            // Simulate image analysis with different responses based on persona
+            const file = fileInput.files[0];
+            const imageType = file.type.split('/')[1] || 'image';
+            if (currentPersona === 'mistress') {
+                response = `*scrutinizes your ${imageType} submission*\n${input.value || 'How dare you present this to me without context!'}\nI can see ${Math.floor(Math.random() * 5) + 1} flaws in your pathetic submission. You'll need to try much harder to impress me.`;
+            } else {
+                response = `*studies your ${imageType} carefully*\n${input.value || 'Is this your best effort?'}\nI count ${Math.floor(Math.random() * 3) + 1} areas needing improvement. You can do better, boy.`;
+            }
+        } else {
+            // Regular text response
+            response = currentPersona === 'mistress'
+                ? `*grabs your chin*\n${input.value || 'Silence is unacceptable'}. You will speak when spoken to, worm.`
+                : `*crosses arms*\n${input.value || 'I expect better from you'}, boy. Try again.`;
+        }
+        // Add the response to chat
+        const chatContainer = document.querySelector('.space-y-6');
+        const botMessage = document.createElement('div');
+        botMessage.className = 'flex';
+        botMessage.innerHTML = `
+            <div class="bg-${currentPersona === 'mistress' ? 'pink' : 'blue'}-900 rounded-lg p-4 max-w-3/4 shadow-lg">
+                <div class="flex items-center space-x-3 mb-2">
+                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-${currentPersona === 'mistress' ? 'pink' : 'blue'}-500 to-${currentPersona === 'mistress' ? 'purple' : 'indigo'}-600 flex items-center justify-center">
+                        <i data-feather="${currentPersona === 'mistress' ? 'alert-octagon' : 'zap'}" class="w-4 h-4"></i>
                     </div>
+                    <span class="font-bold text-${currentPersona === 'mistress' ? 'pink' : 'blue'}-300">${currentPersona === 'mistress' ? 'Mistress AI' : 'Daddy Dom AI'}</span>
                 </div>
+                <p class="whitespace-pre-line">${response}</p>
+                ${fileInput.files.length > 0 ? `<div class="mt-3"><img src="${previewImage.src}" class="max-h-40 rounded-lg border border-${currentPersona === 'mistress' ? 'pink' : 'blue'}-700"></div>` : ''}
+            </div>
+        `;
+        chatContainer.appendChild(botMessage);
+        // Scroll to bottom
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+        // Clear inputs
+        input.value = '';
+        fileInput.value = '';
+        previewImage.src = '';
+        imagePreview.classList.add('hidden');
+    } catch (error) {
+        console.error('Error analyzing image:', error);
+        // Add error message to chat
+        const chatContainer = document.querySelector('.space-y-6');
+        const errorMessage = document.createElement('div');
+        errorMessage.className = 'flex';
+        errorMessage.innerHTML = `
+            <div class="bg-red-900 rounded-lg p-4 max-w-3/4 shadow-lg">
+                <p>Failed to analyze your submission. Pathetic. Try again.</p>
             </div>
+        `;
+        chatContainer.appendChild(errorMessage);
+    } finally {
+        // Reset button state
+        submitBtn.disabled = false;
+        submitBtn.innerHTML = '<i data-feather="send"></i>';
         feather.replace();
+    }
+});

script.js CHANGED Viewed

@@ -1,5 +1,35 @@
 let currentPersona = 'mistress';
 const togglePersona = document.getElementById('togglePersona');
 const personaIcon = document.getElementById('personaIcon');
 const personaName = document.getElementById('personaName');
 const imagePreview = document.getElementById('imagePreview');

 let currentPersona = 'mistress';
 const togglePersona = document.getElementById('togglePersona');
+const imagePreview = document.getElementById('imagePreview');
+const previewImage = document.getElementById('previewImage');
+const removeImage = document.getElementById('removeImage');
+// Handle image preview and removal
+document.addEventListener('DOMContentLoaded', () => {
+    const fileInput = document.querySelector('custom-upload').shadowRoot.querySelector('input[type="file"]');
+    fileInput.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) {
+            const file = e.target.files[0];
+            if (file.type.match('image.*')) {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    previewImage.src = event.target.result;
+                    imagePreview.classList.remove('hidden');
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+    });
+    removeImage.addEventListener('click', () => {
+        previewImage.src = '';
+        imagePreview.classList.add('hidden');
+        fileInput.value = '';
+        document.querySelector('custom-upload').shadowRoot.getElementById('fileName').textContent = '';
+    });
+});
 const personaIcon = document.getElementById('personaIcon');
 const personaName = document.getElementById('personaName');
 const imagePreview = document.getElementById('imagePreview');

style.css CHANGED Viewed

@@ -44,7 +44,21 @@ p {
 @keyframes spin {
     to { transform: rotate(360deg); }
 }
 .animate-spin {
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     to { transform: rotate(360deg); }
 }
 .animate-spin {
     animation: spin 1s linear infinite;
 }
+#imagePreview {
+    position: relative;
+    display: inline-block;
+}
+#removeImage {
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+#removeImage:hover {
+    transform: scale(1.1);
+    background-color: #ef4444;
+}