Spaces:
Running
Running
File size: 8,242 Bytes
8800dcb 8740b8e 8800dcb 3b15067 8740b8e 3b15067 828d95b 8800dcb 3b15067 8800dcb 8740b8e 8800dcb 8740b8e 8800dcb 8740b8e 8800dcb 8740b8e 8800dcb 8740b8e 8800dcb 8740b8e 8800dcb 8740b8e 8800dcb 8740b8e 3b15067 8740b8e 3b15067 8740b8e 3b15067 8740b8e 828d95b 8740b8e 3b15067 8740b8e 3b15067 8740b8e 3b15067 828d95b 8740b8e 8800dcb 8740b8e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 | <!DOCTYPE html>
<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>
|