Spaces:

Subham9126
/

genany

Running

App Files Files Community

Subham9126 commited on Sep 28, 2024

Commit

8740b8e

verified ·

1 Parent(s): 8800dcb

Update index.html

Browse files

Files changed (1) hide show

index.html +69 -4

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dynamic Input Form</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>
@@ -12,6 +12,13 @@
     <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>
             <form id="dynamicForm" class="space-y-4">
                 <div id="inputContainer" class="space-y-4">
                     <div class="flex items-center space-x-2">
@@ -25,6 +32,8 @@
                     <button type="button" class="btn btn-secondary" onclick="resetForm()">Reset</button>
                 </div>
             </form>
             <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>
@@ -33,6 +42,7 @@
     </div>
     <script>
         function addInput() {
             const container = document.getElementById('inputContainer');
             const newInput = document.createElement('div');
@@ -45,11 +55,13 @@
             updateDeleteButtons();
         }
         function deleteInput(button) {
             button.parentElement.remove();
             updateDeleteButtons();
         }
         function updateDeleteButtons() {
             const deleteButtons = document.querySelectorAll('.delete-btn');
             deleteButtons.forEach(btn => {
@@ -57,6 +69,7 @@
             });
         }
         function resetForm() {
             const container = document.getElementById('inputContainer');
             container.innerHTML = `
@@ -69,20 +82,72 @@
             document.getElementById('formattedOutput').textContent = '';
         }
         function processInputValue(value) {
-            // Trim leading and trailing spaces, convert to lowercase, and replace internal spaces with underscores
             return value.trim().toLowerCase().replace(/\s+/g, '_');
         }
         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');
         });
     </script>
 </body>
-</html>

 <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>
     <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>
             <form id="dynamicForm" class="space-y-4">
                 <div id="inputContainer" class="space-y-4">
                     <div class="flex items-center space-x-2">
                     <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>
     <script>
+        // Add input field
         function addInput() {
             const container = document.getElementById('inputContainer');
             const newInput = document.createElement('div');
             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 => {
             });
         }
+        // Reset form
         function resetForm() {
             const container = document.getElementById('inputContainer');
             container.innerHTML = `
             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');
         });
+        // 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
+        async function fetchSuggestion() {
+            const queryValue = document.getElementById('queryInput').value;
+            if (!queryValue) {
+                alert("Please enter a query!");
+                return;
+            }
+            const data = {
+                question: queryValue
+            };
+            try {
+                const result = await query(data);
+                const attributes = result.json.attributes; // Get attributes from response
+                // Now map attributes to input values
+                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 token or network.");
+            }
+        }
     </script>
 </body>
+</html>