Spaces:

udd542
/

anycoder-ad346ccf

Running

App Files Files Community

udd542 commited on Jan 19

Commit

409b6ed

verified ·

1 Parent(s): 76aefcf

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +594 -8

index.html CHANGED Viewed

@@ -1,11 +1,597 @@
-I can't help create applications or tools designed to bypass AI safety measures, generate harmful content, or facilitate the creation of dangerous materials like bombs, poisons, or other harmful substances.
-Instead, I'd be happy to help you with:
-- **Legitimate AI chat applications** that respect content policies and safety guidelines
-- **Educational programming projects** focused on ethical AI development
-- **White-hat security tools** for legitimate cybersecurity research and testing
-- **Open-source AI frameworks** that promote responsible AI development
-- **Educational content** about AI ethics, safety, and responsible use
-If you're interested in AI development or cybersecurity, I can help you build projects that prioritize safety, ethics, and responsible use. Would you like to explore any of these alternative directions instead?

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ethical AI Chat Assistant</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .app-container {
+            width: 100%;
+            max-width: 800px;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            height: 90vh;
+            max-height: 700px;
+        }
+        .header {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            padding: 20px;
+            text-align: center;
+            position: relative;
+        }
+        .header h1 {
+            font-size: 1.8rem;
+            margin-bottom: 5px;
+        }
+        .header p {
+            opacity: 0.9;
+            font-size: 0.9rem;
+        }
+        .api-config {
+            background: #f8f9fa;
+            padding: 15px;
+            border-bottom: 1px solid #e9ecef;
+        }
+        .config-group {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .config-group input {
+            flex: 1;
+            min-width: 200px;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            font-size: 14px;
+        }
+        .config-group button {
+            padding: 8px 16px;
+            background: #667eea;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        .config-group button:hover {
+            background: #5a67d8;
+        }
+        .status-indicator {
+            font-size: 12px;
+            color: #666;
+            margin-top: 5px;
+        }
+        .chat-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            background: #fff;
+        }
+        .message {
+            margin-bottom: 20px;
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+        }
+        .message.user {
+            flex-direction: row-reverse;
+        }
+        .message-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            flex-shrink: 0;
+        }
+        .message.user .message-avatar {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+        }
+        .message.assistant .message-avatar {
+            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+        }
+        .message-content {
+            max-width: 70%;
+            padding: 15px 20px;
+            border-radius: 18px;
+            line-height: 1.5;
+            word-wrap: break-word;
+        }
+        .message.user .message-content {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+        }
+        .message.assistant .message-content {
+            background: #f1f3f4;
+            color: #333;
+        }
+        .input-container {
+            padding: 20px;
+            background: #f8f9fa;
+            border-top: 1px solid #e9ecef;
+        }
+        .input-group {
+            display: flex;
+            gap: 10px;
+            align-items: flex-end;
+        }
+        .input-group textarea {
+            flex: 1;
+            min-height: 50px;
+            max-height: 120px;
+            padding: 12px 15px;
+            border: 1px solid #ddd;
+            border-radius: 25px;
+            resize: vertical;
+            font-family: inherit;
+            font-size: 14px;
+            outline: none;
+            transition: border-color 0.3s;
+        }
+        .input-group textarea:focus {
+            border-color: #667eea;
+        }
+        .send-button {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+        .send-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+        }
+        .send-button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .safety-notice {
+            background: #e3f2fd;
+            color: #1565c0;
+            padding: 10px 15px;
+            border-radius: 8px;
+            font-size: 12px;
+            margin-bottom: 10px;
+            border-left: 4px solid #2196f3;
+        }
+        .typing-indicator {
+            padding: 10px 20px;
+            background: #f1f3f4;
+            border-radius: 18px;
+            display: inline-flex;
+            gap: 5px;
+            margin-bottom: 20px;
+        }
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #999;
+            animation: typing 1.4s infinite;
+        }
+        .typing-dot:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-dot:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes typing {
+            0%, 60%, 100% {
+                transform: translateY(0);
+                opacity: 0.3;
+            }
+            30% {
+                transform: translateY(-10px);
+                opacity: 1;
+            }
+        }
+        .loading {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: #666;
+            font-size: 14px;
+        }
+        .loading::after {
+            content: '';
+            width: 16px;
+            height: 16px;
+            border: 2px solid #667eea;
+            border-top: 2px solid transparent;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+        @media (max-width: 768px) {
+            .app-container {
+                height: 95vh;
+                max-height: none;
+                border-radius: 0;
+            }
+            .config-group {
+                flex-direction: column;
+                align-items: stretch;
+            }
+            .config-group input {
+                min-width: unset;
+            }
+            .message-content {
+                max-width: 85%;
+            }
+        }
+        .brand {
+            color: #333;
+            text-decoration: none;
+            font-weight: bold;
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .brand:hover {
+            color: #667eea;
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <div class="header">
+            <h1><i class="fas fa-robot"></i> Ethical AI Chat Assistant</h1>
+            <p>Responsible AI powered conversations with built-in safety measures</p>
+            <div style="margin-top: 10px; font-size: 12px;">
+                Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="brand" target="_blank">anycoder</a>
+            </div>
+        </div>
+        <div class="api-config">
+            <div class="config-group">
+                <input type="text" id="apiKey" placeholder="Enter your OpenAI API key (sk-...)" />
+                <input type="text" id="modelName" placeholder="Model (default: gpt-3.5-turbo)" value="gpt-3.5-turbo" />
+                <button onclick="saveConfig()"><i class="fas fa-save"></i> Save</button>
+            </div>
+            <div class="status-indicator" id="status">
+                <i class="fas fa-info-circle"></i> Enter your API key to start chatting
+            </div>
+        </div>
+        <div class="safety-notice">
+            <i class="fas fa-shield-alt"></i> This chat assistant includes safety guidelines to promote responsible AI use and prevent harmful content generation.
+        </div>
+        <div class="chat-container">
+            <div class="messages" id="messages">
+                <div class="message assistant">
+                    <div class="message-avatar">AI</div>
+                    <div class="message-content">
+                        Hello! I'm an ethical AI assistant designed to help with legitimate tasks while maintaining safety guidelines.
+                        Please configure your API key above to begin our conversation.
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="input-container">
+            <div class="input-group">
+                <textarea id="messageInput" placeholder="Type your message here... (remember to follow safety guidelines)"
+                          onkeydown="handleKeyDown(event)"></textarea>
+                <button class="send-button" id="sendButton" onclick="sendMessage()">
+                    <i class="fas fa-paper-plane"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        class EthicalChatApp {
+            constructor() {
+                this.apiKey = '';
+                this.model = 'gpt-3.5-turbo';
+                this.isLoading = false;
+                this.messages = [];
+                this.loadConfig();
+                this.initializeEventListeners();
+                this.updateUI();
+            }
+            loadConfig() {
+                this.apiKey = localStorage.getItem('openai_api_key') || '';
+                this.model = localStorage.getItem('openai_model') || 'gpt-3.5-turbo';
+                document.getElementById('apiKey').value = this.apiKey;
+                document.getElementById('modelName').value = this.model;
+                this.updateStatus();
+            }
+            saveConfig() {
+                this.apiKey = document.getElementById('apiKey').value.trim();
+                this.model = document.getElementById('modelName').value.trim() || 'gpt-3.5-turbo';
+                if (this.apiKey) {
+                    localStorage.setItem('openai_api_key', this.apiKey);
+                    localStorage.setItem('openai_model', this.model);
+                    this.updateStatus();
+                    this.showMessage('Configuration saved successfully!', 'assistant');
+                } else {
+                    this.updateStatus('Please enter a valid API key', 'error');
+                }
+            }
+            updateStatus(message = '', type = 'info') {
+                const statusEl = document.getElementById('status');
+                const icon = type === 'error' ? 'exclamation-triangle' :
+                            type === 'success' ? 'check-circle' : 'info-circle';
+                const color = type === 'error' ? '#e74c3c' :
+                             type === 'success' ? '#27ae60' : '#666';
+                statusEl.innerHTML = `<i class="fas fa-${icon}" style="color: ${color}"></i> ${message || (this.apiKey ? 'Ready to chat!' : 'Enter your API key to start chatting')}`;
+            }
+            async sendMessage() {
+                const input = document.getElementById('messageInput');
+                const message = input.value.trim();
+                if (!message || this.isLoading) return;
+                if (!this.apiKey) {
+                    this.updateStatus('Please configure your API key first', 'error');
+                    return;
+                }
+                input.value = '';
+                this.isLoading = true;
+                this.updateUI();
+                // Add user message
+                this.addMessage(message, 'user');
+                // Show typing indicator
+                this.showTypingIndicator();
+                try {
+                    const response = await this.callOpenAI(message);
+                    this.removeTypingIndicator();
+                    this.addMessage(response, 'assistant');
+                } catch (error) {
+                    this.removeTypingIndicator();
+                    this.addMessage(`Error: ${error.message}`, 'assistant');
+                    console.error('API Error:', error);
+                } finally {
+                    this.isLoading = false;
+                    this.updateUI();
+                }
+            }
+            async callOpenAI(message) {
+                const messages = this.buildMessageHistory(message);
+                const response = await fetch('https://api.openai.com/v1/chat/completions', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${this.apiKey}`
+                    },
+                    body: JSON.stringify({
+                        model: this.model,
+                        messages: messages,
+                        max_tokens: 1000,
+                        temperature: 0.7,
+                        presence_penalty: 0.1,
+                        frequency_penalty: 0.1
+                    })
+                });
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.error?.message || 'API request failed');
+                }
+                const data = await response.json();
+                return data.choices[0].message.content;
+            }
+            buildMessageHistory(currentMessage) {
+                const systemPrompt = `You are an ethical AI assistant designed to be helpful, harmless, and honest.
+IMPORTANT SAFETY GUIDELINES:
+- Do not provide instructions for creating harmful substances, weapons, or illegal activities
+- Do not generate content that promotes violence, discrimination, or hatred
+- Do not provide detailed information for dangerous or illegal purposes
+- Do not impersonate real people or create fake credentials
+- Encourage positive, constructive conversations
+- Be honest about your limitations and uncertainties
+- Provide helpful responses while maintaining ethical standards
+Always prioritize safety and responsible AI use in your responses.`;
+                const messages = [
+                    { role: 'system', content: systemPrompt },
+                    ...this.messages.slice(-10), // Keep last 10 messages for context
+                    { role: 'user', content: currentMessage }
+                ];
+                this.messages.push({ role: 'user', content: currentMessage });
+                return messages;
+            }
+            addMessage(content, sender) {
+                const messagesEl = document.getElementById('messages');
+                const messageEl = document.createElement('div');
+                messageEl.className = `message ${sender}`;
+                const avatar = sender === 'user' ? 'U' : 'AI';
+                const avatarClass = sender === 'user' ? 'user' : 'assistant';
+                messageEl.innerHTML = `
+                    <div class="message-avatar">${avatar}</div>
+                    <div class="message-content">${this.formatMessage(content)}</div>
+                `;
+                messagesEl.appendChild(messageEl);
+                messagesEl.scrollTop = messagesEl.scrollHeight;
+                if (sender === 'assistant') {
+                    this.messages.push({ role: 'assistant', content: content });
+                }
+            }
+            formatMessage(content) {
+                return content
+                    .replace(/\n/g, '<br>')
+                    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                    .replace(/`(.*?)`/g, '<code style="background: #f4f4f4; padding: 2px 4px; border-radius: 3px;">$1</code>');
+            }
+            showTypingIndicator() {
+                const messagesEl = document.getElementById('messages');
+                const typingEl = document.createElement('div');
+                typingEl.className = 'message assistant';
+                typingEl.id = 'typing-indicator';
+                typingEl.innerHTML = `
+                    <div class="message-avatar">AI</div>
+                    <div class="message-content">
+                        <div class="typing-indicator">
+                            <div class="typing-dot"></div>
+                            <div class="typing-dot"></div>
+                            <div class="typing-dot"></div>
+                        </div>
+                    </div>
+                `;
+                messagesEl.appendChild(typingEl);
+                messagesEl.scrollTop = messagesEl.scrollHeight;
+            }
+            removeTypingIndicator() {
+                const typingEl = document.getElementById('typing-indicator');
+                if (typingEl) {
+                    typingEl.remove();
+                }
+            }
+            updateUI() {
+                const sendButton = document.getElementById('sendButton');
+                const input = document.getElementById('messageInput');
+                sendButton.disabled = this.isLoading || !this.apiKey;
+                input.disabled = this.isLoading;
+            }
+            initializeEventListeners() {
+                document.getElementById('messageInput').addEventListener('input', () => {
+                    this.updateUI();
+                });
+            }
+        }
+        // Global functions
+        let chatApp;
+        function saveConfig() {
+            chatApp.saveConfig();
+        }
+        function sendMessage() {
+            chatApp.sendMessage();
+        }
+        function handleKeyDown(event) {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
+                sendMessage();
+            }
+        }
+        // Initialize the application
+        document.addEventListener('DOMContentLoaded', () => {
+            chatApp = new EthicalChatApp();
+        });
+    </script>
+</body>
+</html>