Update index.html

index.html

@@ -12,15 +12,21 @@
     <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>
+
             <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>
@@ -97,45 +103,51 @@
             document.getElementById('output').classList.remove('hidden');
         });
 
-        // Refactored query function in JavaScript (API Call)
-        async function query(data) {
-            const API_URL = "https://subham9126-hfflow.hf.space/api/v1/prediction/447aeeb8-3505-47ac-84c5-6a1e72454f80";
-            const headers = {
-                "Authorization": "Bearer" $hftoken,
-                "Content-Type": "application/json"
-            };
-
-            const response = await fetch(API_URL, {
-                method: "POST",
-                headers: headers,
-                body: JSON.stringify(data)
-            });
-
-            if (!response.ok) {
-                throw new Error("Error fetching API data");
-            }
-
-            const result = await response.json();
-            return result;
-        }
-
-        // Fetch suggestion from the API
+        // 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;
+            }
 
             const data = {
                 question: queryValue
             };
 
             try {
-                const result = await query(data);
+                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
 
-                // Now map attributes to input values
+                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]) {
@@ -145,7 +157,7 @@
 
             } catch (error) {
                 console.error("Error fetching suggestion:", error);
-                alert("Failed to fetch suggestions. Please check your token or network.");
+                alert("Failed to fetch suggestions. Please check your API key or network.");
             }
         }
     </script>