Hugging Face's logo

Spaces:
jisaacso219
/
auto-forecast-rev1
Running

App Files Community
jisaacso219 commited on
Commit
cc98ed6
·
verified ·
1 Parent(s): 625a7d8

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +79 -17
  2. prompts.txt +2 -1
index.html CHANGED
@@ -30,6 +30,29 @@
30
  border-color: #3b82f6;
31
  background-color: #f8fafc;
32
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  </style>
34
  </head>
35
  <body class="bg-gray-50 font-sans">
@@ -99,24 +122,29 @@
99
  </div>
100
 
101
  <div>
102
- <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Product Category</label>
103
- <select id="category" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
104
- <option>Brake Pads</option>
105
- <option selected>Oil Filters</option>
106
- <option>Air Filters</option>
107
- <option>Spark Plugs</option>
108
- <option>Batteries</option>
109
- </select>
110
  </div>
111
 
112
  <div>
113
  <label for="region" class="block text-sm font-medium text-gray-700 mb-1">Region</label>
114
  <select id="region" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
115
- <option selected>National</option>
116
- <option>Northeast</option>
117
- <option>Southeast</option>
118
- <option>Midwest</option>
119
- <option>West</option>
 
 
 
 
 
 
 
 
120
  </select>
121
  </div>
122
 
@@ -224,8 +252,8 @@
224
  <td class="px-4 py-3 text-sm text-green-600 font-medium">$310K</td>
225
  </tr>
226
  <tr class="highlight-cell">
227
- <td class="px-4 py-3 text-sm font-medium text-gray-900">Ford</td>
228
- <td class="px-4 py-3 text-sm text-gray-500">F-150</td>
229
  <td class="px-4 py-3 text-sm text-gray-500">2015-2020</td>
230
  <td class="px-4 py-3 text-sm text-gray-500">2,850,000</td>
231
  <td class="px-4 py-3 text-sm text-red-500 font-medium">28%</td>
@@ -250,7 +278,7 @@
250
  </div>
251
  <div>
252
  <h4 class="font-medium text-gray-800">Expand Product Line</h4>
253
- <p class="text-sm text-gray-600">Develop oil filters for Honda Accord 2018-2022 models to capture estimated $420K in potential revenue from this segment.</p>
254
  </div>
255
  </div>
256
 
@@ -260,7 +288,7 @@
260
  </div>
261
  <div>
262
  <h4 class="font-medium text-gray-800">Promotional Campaign</h4>
263
- <p class="text-sm text-gray-600">Target Ford F-150 owners with special bundle offers to increase market penetration from current 28% to at least 45%.</p>
264
  </div>
265
  </div>
266
 
@@ -356,6 +384,40 @@
356
  }
357
  });
358
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
359
  // File upload preview
360
  document.getElementById('salesData').addEventListener('change', function(e) {
361
  const file = e.target.files[0];
 
30
  border-color: #3b82f6;
31
  background-color: #f8fafc;
32
  }
33
+ .tag-input {
34
+ display: flex;
35
+ flex-wrap: wrap;
36
+ align-items: center;
37
+ gap: 0.5rem;
38
+ padding: 0.5rem;
39
+ border: 1px solid #d1d5db;
40
+ border-radius: 0.375rem;
41
+ min-height: 2.5rem;
42
+ }
43
+ .tag {
44
+ background-color: #e0e7ff;
45
+ color: #4f46e5;
46
+ padding: 0.25rem 0.5rem;
47
+ border-radius: 9999px;
48
+ display: flex;
49
+ align-items: center;
50
+ font-size: 0.875rem;
51
+ }
52
+ .tag-remove {
53
+ margin-left: 0.25rem;
54
+ cursor: pointer;
55
+ }
56
  </style>
57
  </head>
58
  <body class="bg-gray-50 font-sans">
 
122
  </div>
123
 
124
  <div>
125
+ <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Product Categories</label>
126
+ <div class="tag-input" id="categoryContainer">
127
+ <input type="text" id="categoryInput" class="flex-grow outline-none bg-transparent" placeholder="Add a category...">
128
+ </div>
129
+ <p class="text-xs text-gray-500 mt-1">Press Enter to add a category</p>
 
 
 
130
  </div>
131
 
132
  <div>
133
  <label for="region" class="block text-sm font-medium text-gray-700 mb-1">Region</label>
134
  <select id="region" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
135
+ <option>Global</option>
136
+ <option>North America</option>
137
+ <option>Europe</option>
138
+ <option>Asia Pacific</option>
139
+ <option>Latin America</option>
140
+ <option>Middle East & Africa</option>
141
+ <option>North America - USA</option>
142
+ <option>North America - Canada</option>
143
+ <option>Europe - Western</option>
144
+ <option>Europe - Eastern</option>
145
+ <option>Asia - China</option>
146
+ <option>Asia - Japan</option>
147
+ <option>Asia - India</option>
148
  </select>
149
  </div>
150
 
 
252
  <td class="px-4 py-3 text-sm text-green-600 font-medium">$310K</td>
253
  </tr>
254
  <tr class="highlight-cell">
255
+ <td class="px-4 py-3 text-sm font-medium text-gray-900">Volkswagen</td>
256
+ <td class="px-4 py-3 text-sm text-gray-500">Golf</td>
257
  <td class="px-4 py-3 text-sm text-gray-500">2015-2020</td>
258
  <td class="px-4 py-3 text-sm text-gray-500">2,850,000</td>
259
  <td class="px-4 py-3 text-sm text-red-500 font-medium">28%</td>
 
278
  </div>
279
  <div>
280
  <h4 class="font-medium text-gray-800">Expand Product Line</h4>
281
+ <p class="text-sm text-gray-600">Develop parts for Honda Accord 2018-2022 models to capture estimated $420K in potential revenue from this segment.</p>
282
  </div>
283
  </div>
284
 
 
288
  </div>
289
  <div>
290
  <h4 class="font-medium text-gray-800">Promotional Campaign</h4>
291
+ <p class="text-sm text-gray-600">Target Volkswagen Golf owners with special bundle offers to increase market penetration from current 28% to at least 45%.</p>
292
  </div>
293
  </div>
294
 
 
384
  }
385
  });
386
 
387
+ // Tag input functionality for categories
388
+ const categoryContainer = document.getElementById('categoryContainer');
389
+ const categoryInput = document.getElementById('categoryInput');
390
+ const categories = new Set();
391
+
392
+ categoryInput.addEventListener('keydown', function(e) {
393
+ if (e.key === 'Enter' && this.value.trim() !== '') {
394
+ const category = this.value.trim();
395
+ if (!categories.has(category)) {
396
+ categories.add(category);
397
+ addCategoryTag(category);
398
+ this.value = '';
399
+ }
400
+ }
401
+ });
402
+
403
+ function addCategoryTag(category) {
404
+ const tag = document.createElement('div');
405
+ tag.className = 'tag';
406
+ tag.innerHTML = `
407
+ ${category}
408
+ <span class="tag-remove" data-category="${category}">
409
+ <i class="fas fa-times"></i>
410
+ </span>
411
+ `;
412
+ categoryContainer.insertBefore(tag, categoryInput);
413
+
414
+ // Add remove functionality
415
+ tag.querySelector('.tag-remove').addEventListener('click', function() {
416
+ categories.delete(this.dataset.category);
417
+ tag.remove();
418
+ });
419
+ }
420
+
421
  // File upload preview
422
  document.getElementById('salesData').addEventListener('change', function(e) {
423
  const file = e.target.files[0];
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- I would like to build an app for the automotive aftermarket where the user provides previous sales data for a category along with data on the car parc and the app will then generate a forecast and highlight any missing coverage
 
 
1
+ I would like to build an app for the automotive aftermarket where the user provides previous sales data for a category along with data on the car parc and the app will then generate a forecast and highlight any missing coverage
2
+ The categories tab should be user entered and not a list and the region should be global focused