Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Claude AI + Replit Integration</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| claude: { | |
| light: '#f0f9ff', | |
| DEFAULT: '#0284c7', | |
| dark: '#0c4a6e' | |
| }, | |
| replit: { | |
| light: '#f5f5f5', | |
| DEFAULT: '#f26207', | |
| dark: '#121212' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .code-editor { | |
| font-family: 'Fira Code', monospace; | |
| font-size: 14px; | |
| } | |
| .collaboration-avatar { | |
| transition: all 0.3s ease; | |
| } | |
| .collaboration-avatar:hover { | |
| transform: scale(1.2); | |
| z-index: 10; | |
| } | |
| .message-container { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .typing-indicator { | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background-color: #9ca3af; | |
| margin: 0 2px; | |
| animation: typing 1.4s infinite both; | |
| } | |
| .typing-indicator:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-indicator:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes typing { | |
| 0%, 60%, 100% { transform: translateY(0); } | |
| 30% { transform: translateY(-10px); } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md py-4 px-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="bg-claude-dark text-white p-2 rounded-lg mr-3"> | |
| <i class="fa-solid fa-robot text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-gray-800">Claude <span class="text-claude-DEFAULT">+</span> Replit</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-replit-DEFAULT hover:bg-orange-700 text-white px-4 py-2 rounded-lg font-medium transition"> | |
| <i class="fa-solid fa-plug mr-2"></i>Connect to Replit | |
| </button> | |
| <div class="relative"> | |
| <img src="https://i.pravatar.cc/40?img=5" alt="User" class="rounded-full w-10 h-10 border-2 border-claude-DEFAULT"> | |
| <span class="absolute bottom-0 right-0 bg-green-500 rounded-full w-3 h-3 border-2 border-white"></span> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto p-4 md:p-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Panel - Project Info & Collaboration --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- Project Info Card --> | |
| <div class="bg-white rounded-xl shadow-md p-5"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Project Information</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-600">Project Name</label> | |
| <p class="text-gray-800 font-medium">AI-Powered Web App</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-600">Replit Project</label> | |
| <p class="text-replit-DEFAULT font-medium">web-app-ai-integration</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-600">Language</label> | |
| <p class="text-gray-800 font-medium">JavaScript + Node.js</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-600">Last Updated</label> | |
| <p class="text-gray-800 font-medium">Just now</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Collaboration Card --> | |
| <div class="bg-white rounded-xl shadow-md p-5"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800">Collaborators</h2> | |
| <button class="text-claude-DEFAULT hover:text-claude-dark"> | |
| <i class="fa-solid fa-user-plus"></i> | |
| </button> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <div class="collaboration-avatar relative" title="You"> | |
| <img src="https://i.pravatar.cc/40?img=5" alt="User" class="rounded-full w-10 h-10 border-2 border-claude-DEFAULT"> | |
| </div> | |
| <div class="collaboration-avatar relative" title="Sarah (Editing)"> | |
| <img src="https://i.pravatar.cc/40?img=8" alt="Sarah" class="rounded-full w-10 h-10 border-2 border-green-500"> | |
| <div class="absolute -bottom-1 -right-1 bg-green-500 rounded-full w-4 h-4 flex items-center justify-center"> | |
| <i class="fa-solid fa-pen text-white text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="collaboration-avatar relative" title="Alex (Viewing)"> | |
| <img src="https://i.pravatar.cc/40?img=11" alt="Alex" class="rounded-full w-10 h-10 border-2 border-blue-500"> | |
| </div> | |
| <div class="collaboration-avatar relative" title="Maya"> | |
| <img src="https://i.pravatar.cc/40?img=3" alt="Maya" class="rounded-full w-10 h-10 border-2 border-gray-300"> | |
| </div> | |
| </div> | |
| <div class="bg-claude-light p-3 rounded-lg"> | |
| <p class="text-sm text-claude-dark flex items-center"> | |
| <span class="bg-green-500 rounded-full w-3 h-3 mr-2 animate-pulse"></span> | |
| <span>Sarah is editing main.js</span> | |
| </p> | |
| </div> | |
| </div> | |
| <!-- AI Assistant Card --> | |
| <div class="bg-white rounded-xl shadow-md p-5"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Claude Assistant</h2> | |
| <div class="bg-claude-light p-4 rounded-lg mb-4"> | |
| <p class="text-claude-dark">I can help you write, explain, or debug code. How can I assist with your project today?</p> | |
| </div> | |
| <div class="space-y-2"> | |
| <button class="w-full bg-claude-DEFAULT hover:bg-claude-dark text-white py-2 rounded-lg text-sm font-medium"> | |
| <i class="fa-solid fa-wand-magic-sparkles mr-2"></i>Generate Code | |
| </button> | |
| <button class="w-full bg-white border border-claude-DEFAULT text-claude-DEFAULT hover:bg-claude-light py-2 rounded-lg text-sm font-medium"> | |
| <i class="fa-solid fa-bug mr-2"></i>Debug Code | |
| </button> | |
| <button class="w-full bg-white border border-claude-DEFAULT text-claude-DEFAULT hover:bg-claude-light py-2 rounded-lg text-sm font-medium"> | |
| <i class="fa-solid fa-gears mr-2"></i>Optimize Code | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Middle Panel - Code Editor --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="bg-gray-100 px-4 py-2 flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 bg-red-500 rounded-full"></div> | |
| <div class="w-3 h-3 bg-yellow-500 rounded-full"></div> | |
| <div class="w-3 h-3 bg-green-500 rounded-full"></div> | |
| </div> | |
| <div class="text-sm font-medium text-gray-600"> | |
| main.js • Saved | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fa-solid fa-play text-green-500"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fa-solid fa-floppy-disk text-blue-500"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fa-solid fa-rotate-right text-claude-DEFAULT"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 code-editor"> | |
| <pre class="text-gray-800 whitespace-pre-wrap"><code>// AI-generated code for image recognition | |
| const tf = require('@tensorflow/tfjs'); | |
| const mobilenet = require('@tensorflow-models/mobilenet'); | |
| class ImageClassifier { | |
| constructor() { | |
| this.model = null; | |
| this.initialized = false; | |
| } | |
| async init() { | |
| console.log('Loading MobileNet model...'); | |
| this.model = await mobilenet.load(); | |
| this.initialized = true; | |
| console.log('Model loaded successfully'); | |
| } | |
| async classify(imageElement) { | |
| if (!this.initialized) { | |
| await this.init(); | |
| } | |
| // Classify the image | |
| const predictions = await this.model.classify(imageElement); | |
| return predictions; | |
| } | |
| } | |
| // Export for use in Replit environment | |
| module.exports = ImageClassifier;</code></pre> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-white rounded-xl shadow-md p-5"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Output</h2> | |
| <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm h-40 overflow-y-auto"> | |
| <div class="flex items-center mb-2"> | |
| <span class="text-gray-400">$</span> | |
| <span class="ml-2">node main.js</span> | |
| </div> | |
| <div>> Loading MobileNet model...</div> | |
| <div>> Model loaded successfully</div> | |
| <div>> Execution time: 1.2s</div> | |
| <div class="mt-4 text-white">// Ready for input</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat & Collaboration Section --> | |
| <div class="mt-6 bg-white rounded-xl shadow-md p-5"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Team Collaboration</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Chat --> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-3">Team Chat</h3> | |
| <div class="message-container border border-gray-200 rounded-lg p-4 h-64"> | |
| <div class="mb-4 flex items-start"> | |
| <img src="https://i.pravatar.cc/30?img=8" alt="Sarah" class="rounded-full mr-3 mt-1"> | |
| <div> | |
| <p class="font-medium">Sarah</p> | |
| <p class="text-gray-700 bg-gray-100 p-3 rounded-lg">I've updated the model loading sequence to be more efficient. Can you review?</p> | |
| </div> | |
| </div> | |
| <div class="mb-4 flex items-start"> | |
| <img src="https://i.pravatar.cc/30?img=5" alt="You" class="rounded-full mr-3 mt-1"> | |
| <div> | |
| <p class="font-medium">You</p> | |
| <p class="text-gray-700 bg-claude-light p-3 rounded-lg">Looks good! I'll test it with the new image dataset.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <img src="https://i.pravatar.cc/30?img=11" alt="Alex" class="rounded-full mr-3 mt-1"> | |
| <div> | |
| <p class="font-medium">Alex</p> | |
| <p class="text-gray-700 bg-gray-100 p-3 rounded-lg">I'm working on the UI component for displaying results.</p> | |
| <div class="flex mt-2 ml-2"> | |
| <span class="typing-indicator"></span> | |
| <span class="typing-indicator"></span> | |
| <span class="typing-indicator"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex mt-3"> | |
| <input type="text" placeholder="Type a message..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-claude-DEFAULT"> | |
| <button class="bg-claude-DEFAULT text-white px-4 rounded-r-lg"> | |
| <i class="fa-solid fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Activity Feed --> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-3">Recent Activity</h3> | |
| <div class="border border-gray-200 rounded-lg p-4 h-64 overflow-y-auto"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fa-solid fa-code-pull-request text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Sarah updated main.js</p> | |
| <p class="text-gray-500 text-sm">2 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fa-solid fa-terminal text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">You executed the code</p> | |
| <p class="text-gray-500 text-sm">5 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fa-solid fa-comment text-purple-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Alex commented on UI components</p> | |
| <p class="text-gray-500 text-sm">12 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fa-solid fa-code-branch text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Maya created a new branch</p> | |
| <p class="text-gray-500 text-sm">18 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-claude-light p-2 rounded-full mr-3"> | |
| <i class="fa-solid fa-robot text-claude-DEFAULT"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Claude suggested code optimization</p> | |
| <p class="text-gray-500 text-sm">25 minutes ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="mt-8 py-6 px-4 text-center text-gray-600 text-sm"> | |
| <p>Claude + Replit Integration Plugin • v1.0.0</p> | |
| <p class="mt-2">Need help? Check our <a href="#" class="text-claude-DEFAULT hover:underline">documentation</a> or <a href="#" class="text-claude-DEFAULT hover:underline">contact support</a></p> | |
| </footer> | |
| <script> | |
| // Simulate typing effect in the chat | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Simulate AI assistant response after a delay | |
| setTimeout(function() { | |
| const chatContainer = document.querySelector('.message-container'); | |
| const newMessage = document.createElement('div'); | |
| newMessage.className = 'mb-4 flex items-start'; | |
| newMessage.innerHTML = ` | |
| <div class="bg-claude-light p-2 rounded-full mr-3"> | |
| <i class="fa-solid fa-robot text-claude-DEFAULT"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Claude</p> | |
| <p class="text-gray-700 bg-claude-light p-3 rounded-lg">I noticed you're working with TensorFlow.js. Would you like me to suggest optimizations for model inference?</p> | |
| </div> | |
| `; | |
| chatContainer.appendChild(newMessage); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }, 3000); | |
| }); | |
| </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=S-Dreamer/claudereplit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |