Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dynamic Input Form with API Suggestion</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen flex items-center justify-center"> | |
| <div class="container mx-auto px-4"> | |
| <div class="bg-white rounded-lg shadow-md p-6 max-w-lg mx-auto"> | |
| <h1 class="text-2xl font-bold mb-6 text-center">Dynamic Input Form</h1> | |
| <!-- Input for API query --> | |
| <div class="mb-4"> | |
| <input type="text" id="queryInput" class="form-control border border-gray-300 p-2 rounded-md w-full" placeholder="Enter your query" /> | |
| <button type="button" class="btn btn-info mt-2 w-full" onclick="fetchSuggestion()">Suggestion</button> | |
| </div> | |
| <!-- Input for API key --> | |
| <div class="mb-4"> | |
| <input type="password" id="apiKeyInput" class="form-control border border-gray-300 p-2 rounded-md w-full" placeholder="Enter your API key" /> | |
| </div> | |
| <!-- Loading Indicator --> | |
| <div id="loadingIndicator" class="mb-4 hidden"> | |
| <div class="spinner-border text-info" role="status"> | |
| <span class="visually-hidden">Loading...</span> | |
| </div> | |
| </div> | |
| <form id="dynamicForm" class="space-y-4"> | |
| <div id="inputContainer" class="space-y-4"> | |
| <!-- Initial Input Box --> | |
| <div class="flex items-center space-x-2"> | |
| <input type="text" class="form-control border border-gray-300 p-2 rounded-md flex-grow" placeholder="Enter value"> | |
| <button type="button" class="btn btn-danger delete-btn" onclick="deleteInput(this)" disabled>Delete</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button type="button" class="btn btn-primary" onclick="addInput()">Add Input Box</button> | |
| <button type="submit" class="btn btn-success">Submit</button> | |
| <button type="button" class="btn btn-secondary" onclick="resetForm()">Reset</button> | |
| </div> | |
| </form> | |
| <!-- Output container --> | |
| <div id="output" class="mt-6 p-4 bg-gray-200 rounded-md hidden"> | |
| <h2 class="text-lg font-semibold mb-2">Output:</h2> | |
| <pre id="formattedOutput" class="text-gray-800 font-mono whitespace-pre-wrap"></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Add input field | |
| function addInput() { | |
| const container = document.getElementById('inputContainer'); | |
| const newInput = document.createElement('div'); | |
| newInput.className = 'flex items-center space-x-2'; | |
| newInput.innerHTML = ` | |
| <input type="text" class="form-control border border-gray-300 p-2 rounded-md flex-grow" placeholder="Enter value"> | |
| <button type="button" class="btn btn-danger delete-btn" onclick="deleteInput(this)">Delete</button> | |
| `; | |
| container.appendChild(newInput); | |
| updateDeleteButtons(); | |
| } | |
| // Delete input field | |
| function deleteInput(button) { | |
| button.parentElement.remove(); | |
| updateDeleteButtons(); | |
| } | |
| // Update delete button states | |
| function updateDeleteButtons() { | |
| const deleteButtons = document.querySelectorAll('.delete-btn'); | |
| deleteButtons.forEach(btn => { | |
| btn.disabled = deleteButtons.length === 1; | |
| }); | |
| } | |
| // Reset form | |
| function resetForm() { | |
| const container = document.getElementById('inputContainer'); | |
| container.innerHTML = ` | |
| <div class="flex items-center space-x-2"> | |
| <input type="text" class="form-control border border-gray-300 p-2 rounded-md flex-grow" placeholder="Enter value"> | |
| <button type="button" class="btn btn-danger delete-btn" onclick="deleteInput(this)" disabled>Delete</button> | |
| </div> | |
| `; | |
| document.getElementById('output').classList.add('hidden'); | |
| document.getElementById('formattedOutput').textContent = ''; | |
| } | |
| // Process input value (trim, lowercase, replace spaces with underscores) | |
| function processInputValue(value) { | |
| return value.trim().toLowerCase().replace(/\s+/g, '_'); | |
| } | |
| // Submit form event | |
| document.getElementById('dynamicForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const inputs = document.querySelectorAll('#inputContainer input'); | |
| const values = Array.from(inputs).map(input => processInputValue(input.value)); | |
| const formattedOutput = '[' + values.map(v => `'${v}'`).join(', ') + ']'; | |
| document.getElementById('formattedOutput').textContent = formattedOutput; | |
| document.getElementById('output').classList.remove('hidden'); | |
| }); | |
| // Fetch suggestion from the API and dynamically adjust the input boxes | |
| async function fetchSuggestion() { | |
| const queryValue = document.getElementById('queryInput').value; | |
| const apiKey = document.getElementById('apiKeyInput').value; | |
| if (!queryValue) { | |
| alert("Please enter a query!"); | |
| return; | |
| } | |
| if (!apiKey) { | |
| alert("Please enter your API key!"); | |
| return; | |
| } | |
| // Show loading indicator | |
| document.getElementById('loadingIndicator').classList.remove('hidden'); | |
| // Clear previous inputs | |
| resetForm(); | |
| const data = { | |
| question: queryValue | |
| }; | |
| try { | |
| const response = await fetch('https://subham9126-hfflow.hf.space/api/v1/prediction/447aeeb8-3505-47ac-84c5-6a1e72454f80', { | |
| method: "POST", | |
| headers: { | |
| "Authorization": `Bearer ${apiKey}`, | |
| "Content-Type": "application/json" | |
| }, | |
| body: JSON.stringify(data) | |
| }); | |
| if (!response.ok) { | |
| throw new Error("Error fetching suggestion"); | |
| } | |
| const result = await response.json(); | |
| const attributes = result.json.attributes; // Get attributes from response | |
| const inputContainer = document.getElementById('inputContainer'); | |
| const currentInputCount = document.querySelectorAll('#inputContainer input').length; | |
| // If the number of attributes is greater than current input boxes, add more boxes | |
| if (attributes.length > currentInputCount) { | |
| for (let i = currentInputCount; i < attributes.length; i++) { | |
| addInput(); | |
| } | |
| } | |
| // Update the values of the input boxes to match the attributes | |
| const inputs = document.querySelectorAll('#inputContainer input'); | |
| inputs.forEach((input, index) => { | |
| if (attributes[index]) { | |
| input.value = attributes[index]; // Align attribute with input box | |
| } | |
| }); | |
| } catch (error) { | |
| console.error("Error fetching suggestion:", error); | |
| alert("Failed to fetch suggestions. Please check your API key or network."); | |
| } finally { | |
| // Hide loading indicator | |
| document.getElementById('loadingIndicator').classList.add('hidden'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |