Spaces:

8421bit
/

aitool

Running

App Files Files Community

8421bit commited on Apr 3, 2025

Commit

91e52d9

verified ·

1 Parent(s): 23c4cde

Update index.html

Browse files

Files changed (1) hide show

index.html +207 -163

index.html CHANGED Viewed

@@ -3,246 +3,290 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DeepSeek Chat (JS Demo)</title>
     <style>
         body {
-            font-family: sans-serif;
             line-height: 1.6;
-            margin: 20px;
-            background-color: #f4f4f4;
         }
         .container {
-            max-width: 700px;
-            margin: auto;
             background: #fff;
-            padding: 20px;
             border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
         h1 {
             text-align: center;
             color: #333;
         }
         label {
             display: block;
-            margin-bottom: 5px;
-            font-weight: bold;
         }
-        input[type="password"],
         textarea {
-            width: 95%; /* Slightly less than 100% to prevent overflow */
             padding: 10px;
             margin-bottom: 15px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-        }
-        textarea {
-            height: 100px;
             resize: vertical;
         }
-        button {
             display: block;
             width: 100%;
             padding: 12px;
-            background-color: #5c67f2; /* Hugging Face purple */
             color: white;
             border: none;
-            border-radius: 4px;
             cursor: pointer;
-            font-size: 16px;
-            transition: background-color 0.3s ease;
         }
-        button:hover:not(:disabled) {
-            background-color: #4a54e0;
         }
-        button:disabled {
-            background-color: #cccccc;
             cursor: not-allowed;
         }
-        #chatbox {
-            margin-top: 20px;
-            border: 1px solid #eee;
             border-radius: 4px;
-            padding: 15px;
-            height: 300px;
-            overflow-y: auto;
-            background-color: #f9f9f9;
         }
-        .message {
-            margin-bottom: 10px;
-            padding: 8px 12px;
-            border-radius: 15px;
-            max-width: 80%;
         }
-        .user-message {
-            background-color: #e1f5fe; /* Light blue */
-            margin-left: auto;
-            border-bottom-right-radius: 5px;
-            text-align: right;
         }
-        .assistant-message {
-            background-color: #e8eaf6; /* Light purple/grey */
-            margin-right: auto;
-            border-bottom-left-radius: 5px;
-            text-align: left;
             white-space: pre-wrap; /* Preserve whitespace and line breaks */
-        }
-         .error {
-            color: #d9534f; /* Red */
-            font-weight: bold;
-            margin-top: 10px;
-        }
-         .info {
             font-size: 0.9em;
-            color: #666;
-            margin-bottom: 15px;
-            padding: 10px;
-            background-color: #fffde7; /* Light yellow */
-            border: 1px solid #ffecb3; /* Pale yellow border */
-            border-radius: 4px;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>DeepSeek Chat Demo (JS)</h1>
-        <div class="info">
-            <strong>Security Warning:</strong> This demo requires your Hugging Face API Token.
-            Inputting your token here runs it entirely in *your* browser, but be cautious about sharing tokens.
-            Get a token from <a href="https://huggingface.co/settings/tokens" target="_blank">HF Settings</a> (needs 'read' access).
-            The token is *not* stored after you close the page.
         </div>
-        <label for="hf-token">Hugging Face API Token:</label>
-        <input type="password" id="hf-token" placeholder="Enter your HF Token (hf_...)">
-        <label for="user-message">Your Message:</label>
-        <textarea id="user-message" placeholder="Ask DeepSeek something..."></textarea>
-        <button id="send-button">Send Message</button>
-        <div id="status" style="margin-top: 15px;"></div>
-        <div id="chatbox">
-            <!-- Chat messages will appear here -->
-        </div>
-    </div>
-    <!-- Import the Hugging Face Inference Client library -->
-    <script type="module">
-        // Use ES module import syntax
-        import { HfInference } from "https://cdn.jsdelivr.net/npm/@huggingface/inference@2.6.4/+esm"; // Use specific version or latest
-        // --- Configuration ---
-        const MODEL_ID = "deepseek-ai/deepseek-llm-7b-chat"; // Or other DeepSeek chat model
-        const MAX_NEW_TOKENS = 512;
-        const TEMPERATURE = 0.7;
-        const TOP_P = 0.95;
-        // --- DOM Elements ---
-        const tokenInput = document.getElementById('hf-token');
-        const messageInput = document.getElementById('user-message');
         const sendButton = document.getElementById('send-button');
-        const chatbox = document.getElementById('chatbox');
         const statusDiv = document.getElementById('status');
-        // --- Chat History ---
-        let chatHistory = []; // Stores messages like { role: 'user'/'assistant', content: '...' }
-        // --- Add Message to UI ---
-        function addMessageToChatbox(role, text) {
-            const messageDiv = document.createElement('div');
-            messageDiv.classList.add('message', role === 'user' ? 'user-message' : 'assistant-message');
-            messageDiv.textContent = text; // Use textContent for security
-            chatbox.appendChild(messageDiv);
-            chatbox.scrollTop = chatbox.scrollHeight; // Auto-scroll to bottom
         }
-        // --- Handle Send Button Click ---
         sendButton.addEventListener('click', async () => {
-            const userToken = tokenInput.value.trim();
-            const userMessage = messageInput.value.trim();
-            if (!userToken) {
-                statusDiv.textContent = 'Error: Please enter your Hugging Face API Token.';
-                statusDiv.className = 'error';
-                return;
-            }
-            if (!userMessage) {
-                statusDiv.textContent = 'Error: Please enter a message.';
-                statusDiv.className = 'error';
                 return;
             }
-            // Disable button and show loading
             sendButton.disabled = true;
-            statusDiv.textContent = 'Sending request...';
-            statusDiv.className = 'info'; // Use info class for status messages
-            addMessageToChatbox('user', userMessage);
-            // Add user message to history
-            chatHistory.push({ role: 'user', content: userMessage });
             try {
-                // Initialize HF Inference client *with the user's token*
-                const hf = new HfInference(userToken);
-                // Prepare messages in the format required by chatCompletion
-                const messagesForApi = [...chatHistory]; // Send a copy
-                console.log("Sending messages to API:", messagesForApi);
-                // Call the chat completion endpoint
-                const response = await hf.chatCompletion({
-                    model: MODEL_ID,
-                    messages: messagesForApi,
-                    max_tokens: MAX_NEW_TOKENS,
-                    temperature: TEMPERATURE,
-                    top_p: TOP_P,
-                    // stream: false // Default is false, streaming is more complex in pure JS
                 });
-                 console.log("API Response:", response);
-                // Assuming the response format contains the assistant's reply directly
-                // Adjust based on the actual structure returned by the library/API if needed
-                let assistantReply = "Sorry, couldn't parse the response."; // Default
-                if (response && response.choices && response.choices[0] && response.choices[0].message && response.choices[0].message.content) {
-                     assistantReply = response.choices[0].message.content; // Standard OpenAI-like format
-                } else if (response && response.generated_text) {
-                    assistantReply = response.generated_text; // Fallback for some older formats
-                } else {
-                     console.warn("Unexpected response structure:", response);
                 }
-                // Add assistant response to history and UI
-                chatHistory.push({ role: 'assistant', content: assistantReply });
-                addMessageToChatbox('assistant', assistantReply);
-                statusDiv.textContent = 'Response received.';
-                statusDiv.className = 'info'; // Or clear it: statusDiv.textContent = '';
             } catch (error) {
-                console.error("Error calling Hugging Face API:", error);
-                statusDiv.textContent = `Error: ${error.message || 'Failed to get response from model.'}`;
-                statusDiv.className = 'error';
-                // Optionally remove the last user message from history if the API call failed severely
-                // chatHistory.pop();
             } finally {
-                // Re-enable button and clear input
-                sendButton.disabled = false;
-                messageInput.value = ''; // Clear the input field
             }
         });
-        // Optional: Allow sending with Enter key in textarea (Shift+Enter for new line)
-        messageInput.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter' && !event.shiftKey) {
-                event.preventDefault(); // Prevent default newline insertion
-                sendButton.click();     // Trigger the send button click
-            }
-        });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DeepSeek Chat Interface</title>
     <style>
         body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
             line-height: 1.6;
+            margin: 0;
+            padding: 20px;
+            background-color: #f0f2f5;
+            color: #1c1e21;
+            display: flex;
+            justify-content: center;
         }
         .container {
+            max-width: 800px;
+            width: 100%;
             background: #fff;
+            padding: 25px;
             border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
         h1 {
             text-align: center;
             color: #333;
+            margin-bottom: 25px;
+        }
+        .auth-section {
+            text-align: right;
+            margin-bottom: 15px;
+            font-size: 0.9em;
+        }
+        .auth-section button {
+            padding: 5px 10px;
+            font-size: 0.9em;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background-color: #f5f5f5;
+            margin-left: 5px;
+        }
+        .auth-section button:hover {
+            background-color: #e9e9e9;
+        }
+        .auth-section span {
+            color: #606770;
         }
         label {
             display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #4b4f56;
         }
         textarea {
+            width: calc(100% - 22px); /* Full width minus padding */
             padding: 10px;
             margin-bottom: 15px;
+            border: 1px solid #ccd0d5;
+            border-radius: 6px;
+            font-size: 1rem;
+            min-height: 80px;
             resize: vertical;
         }
+        button#send-button {
             display: block;
             width: 100%;
             padding: 12px;
+            background-color: #1877f2; /* Facebook Blue */
             color: white;
             border: none;
+            border-radius: 6px;
             cursor: pointer;
+            font-size: 1rem;
+            font-weight: 600;
+            transition: background-color 0.2s ease;
         }
+        button#send-button:hover:not(:disabled) {
+            background-color: #166fe5;
         }
+        button#send-button:disabled {
+            background-color: #a0c3f0;
             cursor: not-allowed;
         }
+        #status {
+            margin-top: 15px;
+            padding: 10px;
             border-radius: 4px;
+            font-size: 0.95em;
+            display: none; /* Hidden by default */
+            text-align: center;
         }
+        #status.info {
+            background-color: #e7f3ff;
+            border: 1px solid #b8d7f7;
+            color: #1877f2;
+            display: block;
         }
+        #status.error {
+            background-color: #fdecea;
+            border: 1px solid #f8bbc1;
+            color: #a94442;
+            display: block;
         }
+        #response-area {
+            margin-top: 20px;
+            border: 1px solid #e0e0e0;
+            border-radius: 6px;
+            padding: 15px;
+            min-height: 150px;
+            background-color: #f9f9f9;
+            overflow-y: auto;
+            max-height: 400px;
             white-space: pre-wrap; /* Preserve whitespace and line breaks */
+            word-wrap: break-word; /* Wrap long words */
+            font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* Monospace font for code */
             font-size: 0.9em;
+            line-height: 1.5;
+        }
+        #response-area:empty::before {
+            content: "Model's response will appear here...";
+            color: #999;
+            font-style: italic;
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>DeepSeek Chat</h1>
+        <div class="auth-section">
+            <span id="user-info">Checking login status...</span>
+            <button id="auth-button">Login</button>
         </div>
+        <label for="user-prompt">Your Prompt:</label>
+        <textarea id="user-prompt" placeholder="Enter your message or instructions for the AI..."></textarea>
+        <!-- Optional: Add inputs/areas for 'html' and 'previousPrompt' if needed -->
+        <!--
+        <label for="context-html">Current HTML (Optional):</label>
+        <textarea id="context-html" placeholder="Paste existing HTML if you want the AI to modify it..."></textarea>
+        -->
+        <button id="send-button">Send Prompt</button>
+        <div id="status"></div>
+        <label for="response-area" style="margin-top: 20px;">AI Response:</label>
+        <div id="response-area"></div>
+        <!-- Use a div with pre-wrap instead of <pre> for better control -->
+    </div>
+    <script>
+        const userInfoSpan = document.getElementById('user-info');
+        const authButton = document.getElementById('auth-button');
+        const promptInput = document.getElementById('user-prompt');
         const sendButton = document.getElementById('send-button');
         const statusDiv = document.getElementById('status');
+        const responseArea = document.getElementById('response-area');
+        // Optional: Get context elements if you uncomment them
+        // const contextHtmlInput = document.getElementById('context-html');
+        let isLoggedIn = false;
+        let currentUsername = 'Guest';
+        // --- Authentication Handling ---
+        async function checkLoginStatus() {
+            try {
+                const response = await fetch('/api/@me');
+                if (response.ok) {
+                    const user = await response.json();
+                    currentUsername = user.preferred_username || user.name || 'Logged In User';
+                    userInfoSpan.textContent = `Logged in as: ${currentUsername}`;
+                    authButton.textContent = 'Logout';
+                    authButton.onclick = () => window.location.href = '/auth/logout';
+                    isLoggedIn = true;
+                } else {
+                    throw new Error('Not logged in');
+                }
+            } catch (error) {
+                userInfoSpan.textContent = 'Not logged in.';
+                authButton.textContent = 'Login with Hugging Face';
+                authButton.onclick = () => window.location.href = '/api/login';
+                isLoggedIn = false;
+            }
+        }
+        // --- Display Status ---
+        function showStatus(message, type = 'info') {
+            statusDiv.textContent = message;
+            statusDiv.className = type; // 'info' or 'error'
         }
+        function clearStatus() {
+            statusDiv.textContent = '';
+            statusDiv.className = '';
+            statusDiv.style.display = 'none'; // Hide it properly
+        }
+        // --- Handle Sending Prompt ---
         sendButton.addEventListener('click', async () => {
+            const prompt = promptInput.value.trim();
+            // Optional: Get context
+            // const contextHtml = contextHtmlInput.value.trim();
+            if (!prompt) {
+                showStatus('Please enter a prompt.', 'error');
                 return;
             }
+            // Clear previous results and disable button
+            responseArea.textContent = ''; // Clear previous response
+            clearStatus();
+            showStatus('Sending request and waiting for response...', 'info');
             sendButton.disabled = true;
+            const requestBody = {
+                prompt: prompt,
+                // Optional: Include context if available
+                // html: contextHtml || null, // Send null if empty
+                // previousPrompt: null // Add logic if you track previous prompts
+            };
             try {
+                const response = await fetch('/api/ask-ai', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'text/plain', // Expecting a stream
+                    },
+                    body: JSON.stringify(requestBody),
                 });
+                // --- Handle Non-OK HTTP Responses (e.g., 429, 500, 402) ---
+                if (!response.ok) {
+                     let errorMsg = `Error: ${response.status} ${response.statusText}`;
+                     try {
+                        // Try to parse JSON error message from backend
+                        const errorData = await response.json();
+                        errorMsg = errorData.message || errorMsg;
+                        // Check for specific flags from backend
+                        if (errorData.openLogin) {
+                            errorMsg += " Please log in.";
+                            // Maybe redirect or show login button prominently
+                        }
+                        if (errorData.openProModal) {
+                             errorMsg += " (Credit limit likely reached)";
+                        }
+                    } catch (e) {
+                        // If response is not JSON, use the status text
+                        console.warn("Could not parse error response as JSON");
+                    }
+                    throw new Error(errorMsg); // Throw to be caught below
                 }
+                // --- Process the Stream ---
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder(); // Defaults to utf-8
+                responseArea.textContent = ''; // Ensure it's clear before streaming starts
+                showStatus('Receiving response...', 'info'); // Update status
+                while (true) {
+                    const { value, done } = await reader.read();
+                    if (done) {
+                        console.log('Stream finished.');
+                        break;
+                    }
+                    const chunk = decoder.decode(value, { stream: true });
+                    responseArea.textContent += chunk; // Append chunk to display
+                    // Auto-scroll to bottom (optional)
+                    responseArea.scrollTop = responseArea.scrollHeight;
+                }
+                clearStatus(); // Clear status on successful completion
             } catch (error) {
+                console.error('Error fetching or streaming response:', error);
+                showStatus(`Failed: ${error.message}`, 'error');
             } finally {
+                sendButton.disabled = false; // Re-enable button
             }
         });
+        // --- Initial Setup ---
+        checkLoginStatus(); // Check login status when the page loads
     </script>
 </body>