Upload folder using huggingface_hub

index.html

@@ -175,6 +175,60 @@
       height: 18px;
     }
 
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* API Key Modal */
+    .modal {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.8);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+
+    .modal.show {
+      display: flex;
+    }
+
+    .modal-content {
+      background: var(--panel);
+      border: 1px solid var(--panel-strong);
+      border-radius: var(--radius);
+      padding: 24px;
+      max-width: 500px;
+      width: 90%;
+      box-shadow: var(--shadow);
+      backdrop-filter: blur(var(--blur));
+    }
+
+    .modal-content h3 {
+      margin: 0 0 16px 0;
+      color: var(--text);
+    }
+
+    .modal-content input {
+      width: 100%;
+      padding: 12px;
+      border: 1px solid var(--panel-strong);
+      border-radius: 8px;
+      background: var(--glass);
+      color: var(--text);
+      font: inherit;
+      margin-bottom: 16px;
+    }
+
+    .modal-actions {
+      display: flex;
+      gap: 10px;
+      justify-content: flex-end;
+    }
+
     /* Chat area */
     .chat {
       position: relative;
@@ -435,6 +489,29 @@
       margin-top: 4px;
     }
 
+    /* Status indicator */
+    .status {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      padding: 8px 12px;
+      border-radius: 8px;
+      font-size: 12px;
+      z-index: 100;
+      backdrop-filter: blur(var(--blur));
+      border: 1px solid var(--panel-strong);
+    }
+
+    .status.connected {
+      background: var(--success);
+      color: white;
+    }
+
+    .status.disconnected {
+      background: var(--danger);
+      color: white;
+    }
+
     /* Utility */
     .row {
       display: flex;
@@ -467,6 +544,10 @@
       .send {
         justify-content: flex-end;
       }
+
+      .modal-content {
+        padding: 16px;
+      }
     }
   </style>
 </head>
@@ -478,10 +559,17 @@
         <div class="logo">AI</div>
         <div>
           <h1>AnyCoder Chat</h1>
-          <small>Powered by Poe.com API</small>
+          <small>AI Chatbot Interface</small>
         </div>
       </div>
       <div class="header-actions">
+        <button class="btn small ghost" id="settingsBtn" title="API Settings">
+          <svg class="icon" viewBox="0 0 24 24" fill="none">
+            <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" stroke-width="2"/>
+            <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          Settings
+        </button>
         <button class="btn small ghost" id="newChatBtn" title="Start a new chat">
           <svg class="icon" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
           New
@@ -505,13 +593,46 @@
       </div>
     </header>
 
+    <!-- API Key Modal -->
+    <div class="modal" id="apiModal">
+      <div class="modal-content">
+        <h3>API Configuration</h3>
+        <p style="color: var(--muted); margin-bottom: 16px;">
+          To use this chat application, you need to provide a valid API key. Choose your preferred API service:
+        </p>
+        <div style="margin-bottom: 16px;">
+          <label style="display: block; margin-bottom: 8px; font-weight: 500;">API Service:</label>
+          <select id="apiService" style="width: 100%; padding: 8px; border-radius: 6px; background: var(--glass); color: var(--text); border: 1px solid var(--panel-strong);">
+            <option value="demo">Demo Mode (No API calls)</option>
+            <option value="openai">OpenAI API</option>
+            <option value="poe">Poe.com API</option>
+          </select>
+        </div>
+        <div style="margin-bottom: 16px;">
+          <label style="display: block; margin-bottom: 8px; font-weight: 500;">API Key:</label>
+          <input type="password" id="apiKey" placeholder="Enter your API key" />
+          <small style="color: var(--muted); display: block; margin-top: 4px;">
+            Your API key is stored locally and never sent anywhere except to the API service.
+          </small>
+        </div>
+        <div class="modal-actions">
+          <button class="btn ghost" id="cancelApiBtn">Cancel</button>
+          <button class="btn primary" id="saveApiBtn">Save</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Status Indicator -->
+    <div class="status disconnected" id="statusIndicator" style="display: none;">
+      API not configured
+    </div>
+
     <main class="chat" id="chat">
       <div class="messages" id="messages"></div>
       <div class="empty" id="empty">
         <div class="empty-inner">
-          <h2 style="margin:0 0 8px 0">Hi! I’m AnyCoder Chat powered by Claude on Poe.com 👋</h2>
-          <p style="margin:0;color:var(--muted)">Ask me to explain code, brainstorm ideas, draft emails, or just chat. I
-            can format responses with Markdown, code blocks, and links. Connected to the claude-haiku-cheap model.</p>
+          <h2 style="margin:0 0 8px 0">Hi! I'm AnyCoder Chat 👋</h2>
+          <p style="margin:0;color:var(--muted)">I'm ready to help you with coding questions, brainstorming ideas, or just having a conversation. Click "Settings" above to configure your API key, or try the demo mode!</p>
           <div class="chips" id="chips">
             <div class="chip">Explain closures in JavaScript</div>
             <div class="chip">Help me write a Python script</div>
@@ -526,7 +647,7 @@
     <footer class="composer">
       <div class="composer-inner">
         <div class="input-wrap">
-          <textarea id="input" rows="1" placeholder="Message AnyCoder..."></textarea>
+          <textarea id="input" rows="1" placeholder="Message AnyCoder... (Configure API in settings)"></textarea>
         </div>
         <div class="send">
           <div class="row">
@@ -543,21 +664,16 @@
       </div>
       <div class="hint">
         <div class="row" style="gap:6px">
-          <span class="kbd">Enter</span> to send • <span class="kbd">Shift + Enter</span> for newline • Connected to Poe.com API
+          <span class="kbd">Enter</span> to send • <span class="kbd">Shift + Enter</span> for newline
         </div>
         <div class="spacer"></div>
-        <div>Using claude-haiku-cheap model via Poe.com</div>
+        <div id="apiStatus">Demo Mode - No API calls</div>
       </div>
     </footer>
   </div>
 
   <script>
     // Configuration
-    const POE_API_KEY = '5AvcWZHjdjrxOuRodUjyTZ2TE_D0tdrN-XantWcBY4E';
-    const POE_BASE_URL = 'https://api.poe.com/v1';
-    const MODEL_NAME = 'claude-haiku-cheap';
-
-    // Utility: local storage wrapper
     const store = {
       get(key, fallback) { try { return JSON.parse(localStorage.getItem(key)) ?? fallback; } catch { return fallback; } },
       set(key, value) { localStorage.setItem(key, JSON.stringify(value)); },
@@ -624,7 +740,15 @@
       exportBtn: document.getElementById('exportBtn'),
       themeBtn: document.getElementById('themeBtn'),
       themeIcon: document.getElementById('themeIcon'),
-      chat: document.getElementById('chat')
+      chat: document.getElementById('chat'),
+      apiModal: document.getElementById('apiModal'),
+      apiService: document.getElementById('apiService'),
+      apiKey: document.getElementById('apiKey'),
+      saveApiBtn: document.getElementById('saveApiBtn'),
+      cancelApiBtn: document.getElementById('cancelApiBtn'),
+      settingsBtn: document.getElementById('settingsBtn'),
+      statusIndicator: document.getElementById('statusIndicator'),
+      apiStatus: document.getElementById('apiStatus')
     };
 
     // Theme
@@ -643,6 +767,63 @@
       applyTheme(next);
     });
 
+    // API Configuration
+    const APIConfig = {
+      service: store.get('anycoder_api_service', 'demo'),
+      key: store.get('anycoder_api_key', ''),
+      get isConfigured() {
+        return this.service !== 'demo' && this.key.trim() !== '';
+      },
+      save() {
+        store.set('anycoder_api_service', this.service);
+        store.set('anycoder_api_key', this.key);
+        updateAPIStatus();
+      }
+    };
+
+    function updateAPIStatus() {
+      const statusEl = els.statusIndicator;
+      const apiStatusEl = els.apiStatus;
+      
+      if (!APIConfig.isConfigured) {
+        statusEl.textContent = 'Demo Mode';
+        statusEl.className = 'status disconnected';
+        statusEl.style.display = 'block';
+        apiStatusEl.textContent = 'Demo Mode - No API calls';
+        els.input.placeholder = 'Message AnyCoder... (Configure API in settings)';
+      } else {
+        const serviceNames = {
+          openai: 'OpenAI API',
+          poe: 'Poe.com API'
+        };
+        statusEl.textContent = `Connected to ${serviceNames[APIConfig.service] || APIConfig.service}`;
+        statusEl.className = 'status connected';
+        statusEl.style.display = 'block';
+        apiStatusEl.textContent = `Using ${serviceNames[APIConfig.service] || APIConfig.service}`;
+        els.input.placeholder = `Message AnyCoder... (Connected to ${serviceNames[APIConfig.service] || APIConfig.service})`;
+      }
+    }
+
+    // API Modal
+    function showAPIModal() {
+      els.apiService.value = APIConfig.service;
+      els.apiKey.value = APIConfig.key;
+      els.apiModal.classList.add('show');
+    }
+
+    function hideAPIModal() {
+      els.apiModal.classList.remove('show');
+    }
+
+    els.settingsBtn.addEventListener('click', showAPIModal);
+    els.cancelApiBtn.addEventListener('click', hideAPIModal);
+    els.saveApiBtn.addEventListener('click', () => {
+      APIConfig.service = els.apiService.value;
+      APIConfig.key = els.apiKey.value.trim();
+      APIConfig.save();
+      hideAPIModal();
+    });
+
     // Chat state
     const ChatState = {
       data: store.get('anycoder_chat', []),
@@ -668,7 +849,7 @@
 
       const meta = document.createElement('div');
       meta.className = 'meta';
-      meta.textContent = isUser ? 'You' : 'Claude (via Poe.com)';
+      meta.textContent = isUser ? 'You' : 'AnyCoder AI';
 
       const content = document.createElement('div');
       content.className = 'content';
@@ -682,7 +863,6 @@
       bubble.appendChild(content);
 
       if (isUser) {
-        // user: [avatar right]
         el.appendChild(bubble);
         el.appendChild(avatar);
       } else {
@@ -719,88 +899,113 @@
       scrollToBottom();
     }
 
-    // Poe.com API integration
-    const PoeAPI = {
+    // Demo AI responses
+    const demoResponses = [
+      "That's a great question! I'd be happy to help you with that. Here's what I think:\n\n**Key points:**\n- This is a demo response\n- The API is not currently configured\n- You can configure your API key in the settings\n\nLet me know if you'd like to explore this further!",
+      "Interesting! In a real implementation, this would connect to an AI service. For now, I'm running in demo mode.\n\n**What I can do:**\n- Process your questions\n- Provide helpful responses\n- Format with markdown\n\nWould you like me to help with something specific?",
+      "I understand what you're asking! This interface is ready to connect to various AI APIs including OpenAI, Claude, or others. Currently, it's running in demo mode.\n\n**To get started:**\n1. Click the Settings button\n2. Choose your preferred API service\n3. Enter your API key\n4. Start chatting!\n\nWhat would you like to work on?",
+      "That's a thoughtful question! I'm currently operating in demo mode, which means I'm providing pre-programmed responses rather than connecting to a live AI service.\n\n**In a full implementation, I could:**\n- Answer coding questions\n- Help with debugging\n- Explain complex concepts\n- Brainstorm ideas\n\nHow can I assist you today?"
+    ];
+
+    function getDemoResponse(userMessage) {
+      const responses = demoResponses;
+      const randomIndex = Math.floor(Math.random() * responses.length);
+      const baseResponse = responses[randomIndex];
+      
+      return baseResponse + `\n\n---\n\n**Your message was:** "${userMessage}"\n\n*Configure an API key in Settings to get real AI responses!*`;
+    }
+
+    // API Integration
+    const AIAPI = {
       abortController: null,
 
-      async chatCompletion(messages) {
+      async generateResponse(messages) {
+        if (!APIConfig.isConfigured) {
+          // Demo mode
+          const lastUserMessage = messages.filter(m => m.role === 'user').pop();
+          const response = getDemoResponse(lastUserMessage?.content || 'Hello');
+          
+          // Simulate typing delay
+          await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 2000));
+          
+          return response;
+        }
+
         this.abortController = new AbortController();
 
         try {
-          const response = await fetch(`${POE_BASE_URL}/chat/completions`, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'Authorization': `Bearer ${POE_API_KEY}`
-            },
-            body: JSON.stringify({
-              model: MODEL_NAME,
-              messages: messages,
-              stream: true,
-              temperature: 0.7,
-              max_tokens: 2000
-            }),
-            signal: this.abortController.signal
-          });
-
-          if (!response.ok) {
-            const errorData = await response.json().catch(() => ({}));
-            throw new Error(errorData.error?.message || `API request failed with status ${response.status}`);
+          let response;
+          if (APIConfig.service === 'openai') {
+            response = await this.openAIRequest(messages);
+          } else if (APIConfig.service === 'poe') {
+            response = await this.poeRequest(messages);
+          } else {
+            throw new Error('Unsupported API service');
           }
 
-          const reader = response.body.getReader();
-          const decoder = new TextDecoder();
-          let buffer = '';
-          let fullContent = '';
-
-          const processChunk = async () => {
-            while (true) {
-              const { done, value } = await reader.read();
-              if (done) break;
-
-              buffer += decoder.decode(value, { stream: true });
-              const lines = buffer.split('\n');
-              buffer = lines.pop() || '';
-
-              for (const line of lines) {
-                const trimmed = line.trim();
-                if (!trimmed) continue;
-
-                if (trimmed.startsWith('data: ')) {
-                  const data = trimmed.slice(6);
-                  if (data === '[DONE]') {
-                    return { content: fullContent, done: true };
-                  }
-
-                  try {
-                    const parsed = JSON.parse(data);
-                    if (parsed.choices?.[0]?.delta?.content) {
-                      fullContent += parsed.choices[0].delta.content;
-                      yield { content: fullContent, done: false };
-                    }
-                  } catch (e) {
-                    // Ignore JSON parse errors for incomplete chunks
-                  }
-                }
-              }
-            }
-            return { content: fullContent, done: true };
-          };
-
-          return {
-            [Symbol.asyncIterator]: async function* () {
-              for await (const chunk of processChunk()) {
-                yield chunk;
-              }
-            }
-          };
+          return response;
 
         } catch (error) {
           if (error.name === 'AbortError') {
             throw new Error('Request was cancelled');
           }
           throw error;
+        } finally {
+          this.abortController = null;
+        }
+      },
+
+      async openAIRequest(messages) {
+        const response = await fetch('https://api.openai.com/v1/chat/completions', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${APIConfig.key}`
+          },
+          body: JSON.stringify({
+            model: 'gpt-3.5-turbo',
+            messages: messages,
+            temperature: 0.7,
+            max_tokens: 2000
+          }),
+          signal: this.abortController.signal
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.error?.message || `OpenAI API request failed with status ${response.status}`);
+        }
+
+        const data = await response.json();
+        return data.choices?.[0]?.message?.content || 'No response generated';
+      },
+
+      async poeRequest(messages) {
+        // Note: Poe.com API might require different endpoints and authentication
+        // This is a placeholder implementation
+        const response = await fetch('https://api.poe.com/v1/gql_POST', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${APIConfig.key}`
+          },
+          body: JSON.stringify({
+            query: 'mutation CreateMessage($chatId: ID!, $query: String!, $source: String) { messageCreate(chatId: $chatId, query: $query, source: $source) { chat { threadId } } }',
+            variables: {
+              chatId: 'temp-chat-id',
+              query: messages.map(m => `${m.role}: ${m.content}`).join('\n')
+            }
+          }),
+          signal: this.abortController.signal
+        });
+
+        if (!response.ok) {
+          throw new Error(`Poe.com API request failed with status ${response.status}`);
         }
+
+        const data = await response.json();
+        // This would need to be adapted based on Poe.com's actual API
+        return data.data?.messageCreate?.response || 'No response generated';
       },
 
       stop() {
@@ -858,19 +1063,12 @@
           content: msg.content
         }));
 
-        // Get streaming response
-        const stream = await PoeAPI.chatCompletion(apiMessages);
-
-        let finalContent = '';
-        for await (const chunk of stream) {
-          finalContent = chunk.content;
-          contentEl.innerHTML = renderMarkdown(finalContent);
-          scrollToBottom();
-        }
+        // Get response
+        const response = await AIAPI.generateResponse(apiMessages);
 
-        // Final update
-        tempMsg.content = finalContent;
-        contentEl.innerHTML = renderMarkdown(finalContent);
+        // Update message
+        tempMsg.content = response;
+        contentEl.innerHTML = renderMarkdown(response);
 
         // Remove typing indicator
         const typingIndicator = el.querySelector('.meta:last-child .typing');
@@ -878,121 +1076,4 @@
           typingIndicator.parentNode.remove();
         }
 
-        ChatState.save();
-
-      } catch (error) {
-        console.error('API Error:', error);
-        
-        // Show error message
-        tempMsg.content = `❌ **Error**: ${error.message}\n\nPlease check your internet connection and try again.`;
-        contentEl.innerHTML = renderMarkdown(tempMsg.content);
-        
-        // Remove typing indicator
-        const typingIndicator = el.querySelector('.meta:last-child .typing');
-        if (typingIndicator) {
-          typingIndicator.parentNode.remove();
-        }
-
-        // Show visual error on input
-        els.input.classList.add('error');
-        const errorMsg = document.createElement('div');
-        errorMsg.className = 'error-message';
-        errorMsg.textContent = `API Error: ${error.message}`;
-        els.input.parentNode.appendChild(errorMsg);
-
-        ChatState.save();
-      } finally {
-        els.stopBtn.style.display = 'none';
-        els.sendBtn.disabled = false;
-      }
-    }
-
-    function newChat() {
-      ChatState.data = [];
-      ChatState.save();
-      renderAll();
-    }
-
-    function exportChat() {
-      const blob = new Blob([JSON.stringify(ChatState.data, null, 2)], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `anycoder_chat_${new Date().toISOString().replace(/[:.]/g, '-')}.json`;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      URL.revokeObjectURL(url);
-    }
-
-    // Input behaviors
-    function autoResizeTextarea() {
-      const ta = els.input;
-      ta.style.height = 'auto';
-      ta.style.height = Math.min(180, ta.scrollHeight) + 'px';
-    }
-    els.input.addEventListener('input', autoResizeTextarea);
-    els.input.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        sendMessage();
-      }
-    });
-    els.sendBtn.addEventListener('click', sendMessage);
-    els.newChatBtn.addEventListener('click', newChat);
-    els.exportBtn.addEventListener('click', exportChat);
-
-    // Stop button
-    els.stopBtn.addEventListener('click', () => {
-      PoeAPI.stop();
-      els.stopBtn.style.display = 'none';
-      els.sendBtn.disabled = false;
-    });
-
-    // Chips
-    els.chips.addEventListener('click', (e) => {
-      const chip = e.target.closest('.chip');
-      if (!chip) return;
-      els.input.value = chip.textContent.trim();
-      autoResizeTextarea();
-      els.input.focus();
-    });
-
-    // Stop generation when switching tabs (saves API calls)
-    document.addEventListener('visibilitychange', () => {
-      if (document.hidden) {
-        PoeAPI.stop();
-        els.stopBtn.style.display = 'none';
-        els.sendBtn.disabled = false;
-      }
-    });
-
-    // Initialize
-    renderAll();
-    autoResizeTextarea();
-
-    // Preload a welcome message if empty
-    if (ChatState.isEmpty) {
-      const welcome = { 
-        id: uid(), 
-        role: 'assistant', 
-        content: 
-`Hello! I'm connected to the Poe.com API using the claude-haiku-cheap model. 
-
-I can help you with:
-- Code explanations and programming help
-- Writing and editing text
-- Brainstorming ideas
-- Answering questions
-- And much more!
-
-Just type your message and I'll respond in real-time. Use Markdown for formatting.`
-      };
-      ChatState.data.push(welcome);
-      ChatState.save();
-      renderAll();
-    }
-  </script>
-</body>
-
-</html>
+        ChatState.save();