Hugging Face's logo

Spaces:
Subham9126
/
outgen2f
Running

App Files Community
Subham9126 commited on
Commit
69645a1
·
verified ·
1 Parent(s): 4574c32

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +205 -19
index.html CHANGED
@@ -1,19 +1,205 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dynamic Input Form and Facet Explorer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
11
+ <style>
12
+ @keyframes zoomIn {
13
+ 0% { transform: translateY(0); font-size: 1rem; }
14
+ 100% { transform: translateY(-50px); font-size: 2rem; }
15
+ }
16
+ .sticky-query {
17
+ position: sticky;
18
+ top: 0;
19
+ z-index: 1;
20
+ background-color: white;
21
+ padding: 1rem;
22
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
23
+ animation: zoomIn 0.5s ease-out;
24
+ }
25
+ .fade-in { animation: fadeIn 0.5s ease-out; }
26
+ @keyframes fadeIn {
27
+ 0% { opacity: 0; }
28
+ 100% { opacity: 1; }
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-50 min-h-screen font-sans text-gray-800">
33
+ <div class="flex">
34
+ <!-- Dynamic Input Form (30% width) -->
35
+ <div class="w-3/10 p-4 bg-white border-r border-gray-200">
36
+ <h2 class="text-2xl font-bold mb-6 text-center">Dynamic Input Form</h2>
37
+ <form id="dynamicForm" class="space-y-4">
38
+ <div id="inputContainer" class="space-y-4">
39
+ <div class="flex items-center space-x-2">
40
+ <input type="text" class="form-control border border-gray-300 p-2 rounded-md flex-grow" placeholder="Enter value">
41
+ <button type="button" class="btn btn-danger delete-btn" onclick="deleteInput(this)" disabled>Delete</button>
42
+ </div>
43
+ </div>
44
+ <div class="flex justify-between">
45
+ <button type="button" class="btn btn-primary" onclick="addInput()">Add Input Box</button>
46
+ <button type="submit" class="btn btn-success">Submit</button>
47
+ <button type="button" class="btn btn-secondary" onclick="resetForm()">Reset</button>
48
+ </div>
49
+ </form>
50
+ <div id="output" class="mt-6 p-4 bg-gray-200 rounded-md hidden">
51
+ <h2 class="text-lg font-semibold mb-2">Output:</h2>
52
+ <pre id="formattedOutput" class="text-gray-800 font-mono whitespace-pre-wrap"></pre>
53
+ </div>
54
+ </div>
55
+
56
+ <!-- Facet Explorer (70% width) -->
57
+ <div class="w-7/10 p-4">
58
+ <h2 class="text-2xl font-bold mb-6 text-center">Dynamic Facet Explorer</h2>
59
+ <!-- Query Input -->
60
+ <div class="sticky-query bg-white rounded-lg shadow-lg p-4 mb-6">
61
+ <div class="mb-3">
62
+ <label for="query" class="block text-lg font-medium text-gray-700 mb-2">Query</label>
63
+ <input type="text" id="query" placeholder="Enter your query" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Section 1: Input -->
68
+ <div class="bg-white rounded-lg shadow-lg p-4 mb-6">
69
+ <div class="mb-3">
70
+ <label for="given_facet" class="block text-lg font-medium text-gray-700 mb-2">Given Facet</label>
71
+ <textarea id="given_facet" placeholder="Enter your facet in the specified format" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4"></textarea>
72
+ </div>
73
+ <button id="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Submit</button>
74
+ </div>
75
+
76
+ <!-- Section 2: Dynamic Boxes -->
77
+ <div id="dynamicBoxes" class="grid grid-cols-1 md:grid-cols-2 gap-4"></div>
78
+
79
+ <!-- Get List Button -->
80
+ <div class="mt-6 text-center">
81
+ <button id="getList" class="bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">Get List</button>
82
+ <button id="reset" class="bg-red-600 text-white py-2 px-4 ml-2 rounded-md hover:bg-red-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">Reset</button>
83
+ </div>
84
+
85
+ <!-- Result Display -->
86
+ <div id="result" class="mt-6 text-center text-xl font-semibold"></div>
87
+ </div>
88
+ </div>
89
+
90
+ <script>
91
+ // Dynamic Input Form JavaScript
92
+ function addInput() {
93
+ const container = document.getElementById('inputContainer');
94
+ const newInput = document.createElement('div');
95
+ newInput.className = 'flex items-center space-x-2';
96
+ newInput.innerHTML = `
97
+ <input type="text" class="form-control border border-gray-300 p-2 rounded-md flex-grow" placeholder="Enter value">
98
+ <button type="button" class="btn btn-danger delete-btn" onclick="deleteInput(this)">Delete</button>
99
+ `;
100
+ container.appendChild(newInput);
101
+ updateDeleteButtons();
102
+ }
103
+
104
+ function deleteInput(button) {
105
+ button.parentElement.remove();
106
+ updateDeleteButtons();
107
+ }
108
+
109
+ function updateDeleteButtons() {
110
+ const deleteButtons = document.querySelectorAll('.delete-btn');
111
+ deleteButtons.forEach(btn => {
112
+ btn.disabled = deleteButtons.length === 1;
113
+ });
114
+ }
115
+
116
+ function resetForm() {
117
+ const container = document.getElementById('inputContainer');
118
+ container.innerHTML = `
119
+ <div class="flex items-center space-x-2">
120
+ <input type="text" class="form-control border border-gray-300 p-2 rounded-md flex-grow" placeholder="Enter value">
121
+ <button type="button" class="btn btn-danger delete-btn" onclick="deleteInput(this)" disabled>Delete</button>
122
+ </div>
123
+ `;
124
+ document.getElementById('output').classList.add('hidden');
125
+ document.getElementById('formattedOutput').textContent = '';
126
+ }
127
+
128
+ function processInputValue(value) {
129
+ return value.trim().toLowerCase().replace(/\s+/g, '_');
130
+ }
131
+
132
+ document.getElementById('dynamicForm').addEventListener('submit', function(e) {
133
+ e.preventDefault();
134
+ const inputs = document.querySelectorAll('#inputContainer input');
135
+ const values = Array.from(inputs).map(input => processInputValue(input.value));
136
+ const formattedOutput = '[' + values.map(v => `'${v}'`).join(', ') + ']';
137
+
138
+ document.getElementById('formattedOutput').textContent = formattedOutput;
139
+ document.getElementById('output').classList.remove('hidden');
140
+ });
141
+
142
+ // Facet Explorer JavaScript
143
+ $(document).ready(function() {
144
+ let isResultShown = false;
145
+ let facetData = [];
146
+ $('#submit').click(function() {
147
+ const query = $('#query').val();
148
+ const givenFacet = $('#given_facet').val();
149
+ try {
150
+ facetData = JSON.parse(givenFacet.replace(/'/g, '"'));
151
+ generateBoxes(facetData);
152
+ resetResult();
153
+ } catch (error) {
154
+ alert('Invalid facet format. Please enter a valid JSON array of objects.');
155
+ }
156
+ });
157
+ function generateBoxes(facetArray) {
158
+ const $dynamicBoxes = $('#dynamicBoxes').empty();
159
+ facetArray.forEach((facetObj, index) => {
160
+ const [key, values] = Object.entries(facetObj)[0];
161
+ const $box = $('<div>').addClass('bg-white rounded-lg shadow-md p-4 fade-in');
162
+ const $title = $('<div>').addClass('flex items-center justify-between mb-2')
163
+ .append($('<h3>').addClass('text-lg font-semibold').text(key))
164
+ .append($('<input>').attr({
165
+ type: 'checkbox',
166
+ name: key,
167
+ 'data-index': index,
168
+ class: 'form-checkbox h-5 w-5 text-blue-600'
169
+ }));
170
+ const $content = $('<div>').addClass('space-y-1');
171
+ values.forEach(value => {
172
+ $content.append($('<p>').addClass('text-gray-600').text(value));
173
+ });
174
+ $box.append($title).append($content);
175
+ $dynamicBoxes.append($box);
176
+ });
177
+ }
178
+ $('#getList').click(function() {
179
+ const result = facetData.reduce((acc, facetObj) => {
180
+ const [key] = Object.keys(facetObj);
181
+ const $categoryCheckbox = $(`input[type="checkbox"][name="${key}"]`);
182
+ if ($categoryCheckbox.is(':checked')) {
183
+ acc.push(`'${key}'`);
184
+ }
185
+ return acc;
186
+ }, []);
187
+ const formattedResult = `[${result.join(', ')}]`;
188
+ $('#result').text(formattedResult).addClass('fade-in');
189
+ isResultShown = true;
190
+ });
191
+ $('#reset').click(function() {
192
+ $('input[type="checkbox"]').prop('checked', false);
193
+ if (isResultShown) {
194
+ $('#result').text('').removeClass('fade-in');
195
+ isResultShown = false;
196
+ }
197
+ });
198
+ function resetResult() {
199
+ $('#result').text('').removeClass('fade-in');
200
+ isResultShown = false;
201
+ }
202
+ });
203
+ </script>
204
+ </body>
205
+ </html>