Create index.html

index.html

@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HF Space AI Workspace</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- JSZip for client side unzip and document parsing -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 h-screen flex flex-col font-sans">
+
+    <!-- Header Config -->
+    <header class="bg-gray-800 border-b border-gray-700 p-4">
+        <div class="max-w-6xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4">
+            <h1 class="text-xl font-bold tracking-tight text-white flex items-center gap-2">
+                <span>⚡</span> HF Space AI Gateway
+            </h1>
+            <div class="flex flex-wrap items-center gap-3 w-full sm:w-auto justify-end">
+                <!-- Smart HF URL Container: Shows only if HTML is run locally -->
+                <div id="hf-url-container" class="hidden w-full sm:w-auto">
+                    <input type="text" id="hf-url-input" placeholder="Hugging Face Direct URL (e.g. https://your-space.hf.space)" 
+                           class="bg-gray-700 border border-gray-600 rounded px-3 py-1.5 text-xs text-white w-full sm:w-72">
+                </div>
+                
+                <div class="flex items-center gap-2">
+                    <label for="model-select" class="text-xs text-gray-300 whitespace-nowrap">Model:</label>
+                    <select id="model-select" class="bg-gray-700 border border-gray-600 rounded px-2.5 py-1.5 text-xs text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <option value="claude-opus-4-8">claude-opus-4-8</option>
+                        <option value="claude-opus-4-7">claude-opus-4-7</option>
+                        <option value="claude-opus-4-6">claude-opus-4-6</option>
+                        <option value="glm-5.2">glm-5.2</option>
+                        <option value="gpt-5.5">gpt-5.5</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Chat Console -->
+    <main id="chat-container" class="flex-1 overflow-y-auto p-4 space-y-4 max-w-4xl mx-auto w-full">
+        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 text-gray-300 text-sm">
+            <p class="font-semibold text-white mb-1">CORS & WAF Bypassed Workspace</p>
+            <p class="text-xs">ZIP archives, python/js documents, aur images upload karein. ZIP files browser mein hi automatically extract ho kar readable XML codeblocks mein tabdeel ho jayengi taake AI poore code ko dekh sake.</p>
+        </div>
+        <div id="file-preview-area" class="flex flex-wrap gap-2"></div>
+    </main>
+
+    <!-- Controls Input -->
+    <footer class="bg-gray-800 border-t border-gray-700 p-4">
+        <div class="max-w-4xl mx-auto flex flex-col gap-3">
+            <div class="flex items-center gap-4">
+                <label class="cursor-pointer bg-gray-700 hover:bg-gray-600 text-xs text-gray-300 px-3 py-1.5 rounded border border-gray-600 flex items-center gap-1.5">
+                    <span>📎</span> Attach Files / ZIPs / Images
+                    <input type="file" id="file-input" multiple class="hidden">
+                </label>
+                <span id="attached-count" class="text-xs text-gray-400">No files attached</span>
+            </div>
+            
+            <div class="flex gap-3">
+                <input type="text" id="user-input" placeholder="Type a message..." 
+                       class="flex-1 bg-gray-700 border border-gray-600 rounded px-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <button id="send-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-3 rounded transition">
+                    Send
+                </button>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        const API_KEY = "sk-P7JoqWr5SriePQgq1ijtiGxkL5elV4C84xtqL2MoNQpi1uLs";
+        
+        const chatContainer = document.getElementById("chat-container");
+        const userInput = document.getElementById("user-input");
+        const sendBtn = document.getElementById("send-btn");
+        const modelSelect = document.getElementById("model-select");
+        const fileInput = document.getElementById("file-input");
+        const filePreviewArea = document.getElementById("file-preview-area");
+        const attachedCount = document.getElementById("attached-count");
+        const hfUrlContainer = document.getElementById("hf-url-container");
+        const hfUrlInput = document.getElementById("hf-url-input");
+
+        let conversationHistory = [];
+        let pendingFilesData = [];
+
+        // Check if index.html is loaded as local file or hosted directly
+        const isLocal = window.location.protocol === "file:" || window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1";
+        
+        if (isLocal) {
+            hfUrlContainer.classList.remove("hidden"); // Show URL field if run as offline file
+        }
+
+        const isTextFile = (name) => /\.(txt|py|js|jsx|ts|tsx|html|css|json|csv|md|yaml|yml|rs|go|java|c|cpp|h|sh|bat)$/i.test(name);
+        const isImageFile = (name) => /\.(png|jpg|jpeg|webp|gif)$/i.test(name);
+
+        const toBase64 = file => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = error => reject(error);
+        });
+
+        // Smart file handler for ZIPs and documents
+        fileInput.addEventListener("change", async (e) => {
+            const files = e.target.files;
+            for (let file of files) {
+                try {
+                    if (file.name.endsWith(".zip")) {
+                        const zip = await JSZip.loadAsync(file);
+                        let extractedText = "";
+                        for (let relativePath in zip.files) {
+                            const zipFile = zip.files[relativePath];
+                            if (!zipFile.dir && isTextFile(relativePath)) {
+                                const content = await zipFile.async("string");
+                                // Wrap contents in XML style tags so models can process structures correctly
+                                extractedText += `\n<file path="${relativePath}">\n${content}\n</file>\n`;
+                            }
+                        }
+                        pendingFilesData.push({
+                            type: "text_data",
+                            name: file.name,
+                            content: `User uploaded a ZIP file named "${file.name}" with the following file structures inside:\n${extractedText}`
+                        });
+                    } else if (isTextFile(file.name)) {
+                        const text = await file.text();
+                        pendingFilesData.push({
+                            type: "text_data",
+                            name: file.name,
+                            content: `\n<file path="${file.name}">\n${text}\n</file>\n`
+                        });
+                    } else if (isImageFile(file.name)) {
+                        const base64Str = await toBase64(file);
+                        pendingFilesData.push({
+                            type: "image_data",
+                            name: file.name,
+                            content: base64Str
+                        });
+                    } else {
+                        // Fallback plain text read
+                        const text = await file.text();
+                        pendingFilesData.push({
+                            type: "text_data",
+                            name: file.name,
+                            content: `\n<file path="${file.name}">\n${text}\n</file>\n`
+                        });
+                    }
+                } catch (err) {
+                    alert(`Could not process/read file: ${file.name}`);
+                }
+            }
+            updatePreviewUI();
+        });
+
+        function updatePreviewUI() {
+            filePreviewArea.innerHTML = "";
+            attachedCount.textContent = `${pendingFilesData.length} files attached`;
+            pendingFilesData.forEach((file, index) => {
+                const badge = document.createElement("div");
+                badge.className = "bg-gray-800 text-xs px-2.5 py-1 rounded border border-gray-700 flex items-center gap-1.5";
+                badge.innerHTML = `
+                    <span class="text-gray-400">${file.type === 'image_data' ? '🖼️' : '📄'} ${file.name}</span>
+                    <button class="text-red-400 font-bold ml-1 hover:text-red-300" onclick="removeFile(${index})">×</button>
+                `;
+                filePreviewArea.appendChild(badge);
+            });
+        }
+
+        window.removeFile = (index) => {
+            pendingFilesData.splice(index, 1);
+            updatePreviewUI();
+        }
+
+        function appendMessage(role, text) {
+            const messageDiv = document.createElement("div");
+            messageDiv.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'}`;
+            const innerDiv = document.createElement("div");
+            innerDiv.className = `max-w-[85%] rounded-lg px-4 py-3 ${
+                role === 'user' 
+                    ? 'bg-blue-600 text-white rounded-br-none' 
+                    : 'bg-gray-800 text-gray-200 border border-gray-700 rounded-bl-none'
+            }`;
+            innerDiv.style.whiteSpace = 'pre-wrap';
+            innerDiv.textContent = text;
+            messageDiv.appendChild(innerDiv);
+            chatContainer.appendChild(messageDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            return innerDiv;
+        }
+
+        async function handleSend() {
+            let apiEndpointUrl = "/v1/chat/completions";
+
+            if (isLocal) {
+                const customHfUrl = hfUrlInput.value.trim().replace(/\/$/, "");
+                if (!customHfUrl) {
+                    alert("Pehle apna Hugging Face Space URL enter karein!");
+                    return;
+                }
+                apiEndpointUrl = `${customHfUrl}/v1/chat/completions`;
+            }
+
+            const textInputVal = userInput.value.trim();
+            if (!textInputVal && pendingFilesData.length === 0) return;
+
+            let textPayload = textInputVal;
+            let imagePayloads = [];
+
+            pendingFilesData.forEach(file => {
+                if (file.type === "text_data") {
+                    textPayload += `\n\n${file.content}`;
+                } else if (file.type === "image_data") {
+                    imagePayloads.push(file.content);
+                }
+            });
+
+            appendMessage("user", textInputVal || "Attached files context uploaded");
+            userInput.value = "";
+            pendingFilesData = [];
+            updatePreviewUI();
+
+            // Construct payload content shape
+            let messageContent;
+            if (imagePayloads.length > 0) {
+                messageContent = [{ type: "text", text: textPayload }];
+                imagePayloads.forEach(imgBase64 => {
+                    messageContent.push({
+                        type: "image_url",
+                        image_url: { url: imgBase64 }
+                    });
+                });
+            } else {
+                messageContent = textPayload;
+            }
+
+            conversationHistory.push({ role: "user", content: messageContent });
+
+            const assistantBubble = appendMessage("assistant", "Generating answer...");
+            assistantBubble.textContent = "";
+
+            try {
+                const response = await fetch(apiEndpointUrl, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${API_KEY}`
+                    },
+                    body: JSON.stringify({
+                        model: modelSelect.value,
+                        messages: conversationHistory,
+                        stream: true
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP Error: ${response.status}`);
+                }
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder("utf-8");
+                let buffer = "";
+                let completeResponse = "";
+
+                while (true) {
+                    const { value, done } = 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 cleanLine = line.trim();
+                        if (cleanLine.startsWith("data: ")) {
+                            const dataStr = cleanLine.slice(6);
+                            if (dataStr === "[DONE]") break;
+                            try {
+                                const parsed = JSON.parse(dataStr);
+                                const content = parsed.choices[0].delta.content;
+                                if (content) {
+                                    completeResponse += content;
+                                    assistantBubble.textContent = completeResponse;
+                                    chatContainer.scrollTop = chatContainer.scrollHeight;
+                                }
+                            } catch (e) {}
+                        }
+                    }
+                }
+
+                conversationHistory.push({ role: "assistant", content: completeResponse });
+
+            } catch (error) {
+                console.error(error);
+                assistantBubble.textContent = `Error: ${error.message}. Connection lost or HF space is paused.`;
+                assistantBubble.classList.add("text-red-400");
+            }
+        }
+
+        sendBtn.addEventListener("click", handleSend);
+        userInput.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") handleSend();
+        });
+    </script>
+</body>
+</html>