ai

Runtime error

App Files Files Community

Dar1us-Khan commited on 3 days ago

Commit

cbcaf8e

verified ·

1 Parent(s): c476aae

Upload folder using huggingface_hub

Browse files

Files changed (2) hide show

app.py +365 -0
requirements.txt +1 -0

app.py ADDED Viewed

	@@ -0,0 +1,365 @@

+<!-- templates/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Playground - Access Multiple AI Models</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>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        * {
+            font-family: 'Inter', sans-serif;
+        }
+        .model-card {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .model-card:hover {
+            transform: translateY(-4px);
+        }
+        .chat-message {
+            animation: slideIn 0.3s ease-out;
+        }
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .typing-indicator {
+            display: inline-flex;
+            gap: 4px;
+        }
+        .typing-indicator span {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #6366f1;
+            animation: typing 1.4s infinite;
+        }
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-indicator span: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, #667eea 0%, #764ba2 100%);
+        }
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Header -->
+    <header class="gradient-bg text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <i class="fas fa-robot text-3xl"></i>
+                    <div>
+                        <h1 class="text-2xl font-bold">AI Playground</h1>
+                        <p class="text-sm opacity-90">Free platform to access multiple AI models</p>
+                    </div>
+                </div>
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder"
+                   target="_blank"
+                   class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg transition-all text-sm font-medium">
+                    Built with anycoder
+                </a>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Model Selection -->
+        <section class="mb-8">
+            <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+                <i class="fas fa-layer-group mr-2 text-indigo-600"></i>
+                Choose an AI Model
+            </h2>
+            <div id="modelsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                <!-- Models will be populated here -->
+            </div>
+        </section>
+        <!-- Chat Interface -->
+        <section class="glass-effect rounded-2xl shadow-xl p-6">
+            <div class="flex items-center justify-between mb-6">
+                <h3 class="text-lg font-semibold text-gray-800 flex items-center">
+                    <i class="fas fa-comments mr-2 text-indigo-600"></i>
+                    Chat Interface
+                </h3>
+                <div id="selectedModel" class="text-sm text-gray-600">
+                    No model selected
+                </div>
+            </div>
+            <!-- Chat Messages -->
+            <div id="chatContainer" class="bg-gray-50 rounded-xl p-4 h-96 overflow-y-auto mb-4">
+                <div class="text-center text-gray-400 mt-20">
+                    <i class="fas fa-message text-6xl mb-4"></i>
+                    <p>Select a model and start chatting!</p>
+                </div>
+            </div>
+            <!-- Input Area -->
+            <div class="flex gap-3">
+                <input
+                    type="text"
+                    id="messageInput"
+                    placeholder="Type your message here..."
+                    class="flex-1 px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                    disabled
+                >
+                <button
+                    id="sendButton"
+                    class="bg-indigo-600 text-white px-6 py-3 rounded-xl hover:bg-indigo-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                    disabled
+                >
+                    <i class="fas fa-paper-plane"></i>
+                    Send
+                </button>
+            </div>
+        </section>
+        <!-- Features -->
+        <section class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
+                <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i class="fas fa-bolt text-blue-600 text-2xl"></i>
+                </div>
+                <h4 class="font-semibold text-gray-800 mb-2">Lightning Fast</h4>
+                <p class="text-sm text-gray-600">Get instant responses from cutting-edge AI models</p>
+            </div>
+            <div class="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
+                <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i class="fas fa-shield-alt text-green-600 text-2xl"></i>
+                </div>
+                <h4 class="font-semibold text-gray-800 mb-2">Secure & Private</h4>
+                <p class="text-sm text-gray-600">Your conversations are encrypted and secure</p>
+            </div>
+            <div class="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
+                <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i class="fas fa-infinity text-purple-600 text-2xl"></i>
+                </div>
+                <h4 class="font-semibold text-gray-800 mb-2">Unlimited Access</h4>
+                <p class="text-sm text-gray-600">Chat with multiple AI models without limits</p>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white mt-16 py-8">
+        <div class="container mx-auto px-4 text-center">
+            <p class="text-sm opacity-75">© 2024 AI Playground. Powered by advanced AI models.</p>
+        </div>
+    </footer>
+    <script>
+        let selectedModel = null;
+        let chatHistory = [];
+        // Initialize models
+        const models = {{ models | tojson }};
+        // Color mapping
+        const colorClasses = {
+            blue: 'bg-blue-500',
+            indigo: 'bg-indigo-500',
+            purple: 'bg-purple-500',
+            green: 'bg-green-500',
+            orange: 'bg-orange-500',
+            red: 'bg-red-500',
+            yellow: 'bg-yellow-500',
+            pink: 'bg-pink-500'
+        };
+        // Render model cards
+        function renderModels() {
+            const grid = document.getElementById('modelsGrid');
+            grid.innerHTML = models.map(model => `
+                <div class="model-card bg-white rounded-xl shadow-md hover:shadow-xl cursor-pointer p-4 border-2 border-transparent hover:border-indigo-400"
+                     onclick="selectModel('${model.id}')">
+                    <div class="flex items-start justify-between mb-3">
+                        <div class="${colorClasses[model.color]} w-10 h-10 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-brain text-white"></i>
+                        </div>
+                        <span class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded-full">${model.provider}</span>
+                    </div>
+                    <h4 class="font-semibold text-gray-800 mb-1">${model.name}</h4>
+                    <p class="text-xs text-gray-600">${model.description}</p>
+                </div>
+            `).join('');
+        }
+        // Select model
+        function selectModel(modelId) {
+            selectedModel = models.find(m => m.id === modelId);
+            document.getElementById('selectedModel').innerHTML = `
+                <i class="fas fa-robot mr-2"></i>
+                ${selectedModel.name}
+            `;
+            // Enable chat
+            document.getElementById('messageInput').disabled = false;
+            document.getElementById('sendButton').disabled = false;
+            // Clear chat and show welcome message
+            chatHistory = [];
+            document.getElementById('chatContainer').innerHTML = `
+                <div class="chat-message">
+                    <div class="flex items-start gap-3">
+                        <div class="${colorClasses[selectedModel.color]} w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">
+                            <i class="fas fa-robot text-white text-sm"></i>
+                        </div>
+                        <div class="bg-white rounded-lg p-3 shadow-sm flex-1">
+                            <p class="text-sm text-gray-800">Hello! I'm ${selectedModel.name}. How can I help you today?</p>
+                        </div>
+                    </div>
+                </div>
+            `;
+            // Highlight selected card
+            document.querySelectorAll('.model-card').forEach(card => {
+                card.classList.remove('border-indigo-400', 'bg-indigo-50');
+            });
+            event.currentTarget.classList.add('border-indigo-400', 'bg-indigo-50');
+        }
+        // Send message
+        async function sendMessage() {
+            const input = document.getElementById('messageInput');
+            const message = input.value.trim();
+            if (!message || !selectedModel) return;
+            // Add user message
+            addMessage(message, 'user');
+            input.value = '';
+            // Show typing indicator
+            showTypingIndicator();
+            // Simulate API call
+            setTimeout(async () => {
+                try {
+                    const response = await fetch('/chat', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            model: selectedModel.id,
+                            message: message
+                        })
+                    });
+                    const data = await response.json();
+                    removeTypingIndicator();
+                    addMessage(data.message, 'assistant');
+                } catch (error) {
+                    removeTypingIndicator();
+                    addMessage('Sorry, something went wrong. Please try again.', 'assistant');
+                }
+            }, 1000);
+        }
+        // Add message to chat
+        function addMessage(message, sender) {
+            const container = document.getElementById('chatContainer');
+            const messageHtml = sender === 'user' ? `
+                <div class="chat-message mb-4">
+                    <div class="flex items-start gap-3 justify-end">
+                        <div class="bg-indigo-600 text-white rounded-lg p-3 shadow-sm max-w-xs lg:max-w-md">
+                            <p class="text-sm">${message}</p>
+                        </div>
+                        <div class="bg-gray-300 w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">
+                            <i class="fas fa-user text-gray-600 text-sm"></i>
+                        </div>
+                    </div>
+                </div>
+            ` : `
+                <div class="chat-message mb-4">
+                    <div class="flex items-start gap-3">
+                        <div class="${colorClasses[selectedModel.color]} w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">
+                            <i class="fas fa-robot text-white text-sm"></i>
+                        </div>
+                        <div class="bg-white rounded-lg p-3 shadow-sm max-w-xs lg:max-w-md">
+                            <p class="text-sm text-gray-800">${message}</p>
+                        </div>
+                    </div>
+                </div>
+            `;
+            container.insertAdjacentHTML('beforeend', messageHtml);
+            container.scrollTop = container.scrollHeight;
+        }
+        // Typing indicator
+        function showTypingIndicator() {
+            const container = document.getElementById('chatContainer');
+            const indicator = `
+                <div id="typingIndicator" class="chat-message mb-4">
+                    <div class="flex items-start gap-3">
+                        <div class="${colorClasses[selectedModel.color]} w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">
+                            <i class="fas fa-robot text-white text-sm"></i>
+                        </div>
+                        <div class="bg-white rounded-lg p-3 shadow-sm">
+                            <div class="typing-indicator">
+                                <span></span>
+                                <span></span>
+                                <span></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            container.insertAdjacentHTML('beforeend', indicator);
+            container.scrollTop = container.scrollHeight;
+        }
+        function removeTypingIndicator() {
+            const indicator = document.getElementById('typingIndicator');
+            if (indicator) indicator.remove();
+        }
+        // Event listeners
+        document.getElementById('sendButton').addEventListener('click', sendMessage);
+        document.getElementById('messageInput').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendMessage();
+        });
+        // Initialize
+        renderModels();
+    </script>
+</body>
+</html>

requirements.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ # No additional dependencies required