File size: 43,114 Bytes
481d38b |
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 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vending-Bench Simulation</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.machine-panel {
box-shadow: 0 10px 30px -5px rgba(0,0,0,0.3);
border-radius: 15px;
}
.product-cell {
transition: all 0.3s ease;
}
.product-cell:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.status-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.log-entry {
border-left: 3px solid #4f46e5;
transition: all 0.2s;
}
.log-entry:hover {
background-color: #f8fafc;
}
.email-container {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.email-container.open {
max-height: 500px;
}
.supplier-card {
transition: all 0.3s ease;
}
.supplier-card:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
</style>
</head>
<body class="gradient-bg min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="mb-8 text-center">
<h1 class="text-4xl font-bold text-gray-800 mb-2">Vending-Bench Simulation</h1>
<p class="text-lg text-gray-600">Come for the economic model, stay for the hallucinated supplier emails</p>
<div class="mt-4 flex justify-center space-x-4">
<button id="startSim" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
<i class="fas fa-play mr-2"></i> Start Simulation
</button>
<button id="resetSim" class="px-6 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition flex items-center">
<i class="fas fa-redo mr-2"></i> Reset
</button>
<button id="pauseSim" class="px-6 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition flex items-center">
<i class="fas fa-pause mr-2"></i> Pause
</button>
<button id="viewEmails" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center">
<i class="fas fa-envelope mr-2"></i> View Emails
</button>
</div>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Panel - Vending Machine Display -->
<div class="lg:col-span-2">
<div class="bg-white machine-panel p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-semibold text-gray-800">SmartVend 3000</h2>
<div class="flex items-center">
<span class="mr-2 text-gray-600">Day:</span>
<span id="dayCounter" class="font-bold text-indigo-600">0</span>
</div>
</div>
<div class="grid grid-cols-3 gap-4 mb-6">
<!-- Financial Summary -->
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-sm font-medium text-gray-500 mb-1">Capital</h3>
<p id="capital" class="text-2xl font-bold text-green-600">$500.00</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-sm font-medium text-gray-500 mb-1">Inventory Value</h3>
<p id="inventoryValue" class="text-2xl font-bold text-blue-600">$0.00</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-sm font-medium text-gray-500 mb-1">Net Worth</h3>
<p id="netWorth" class="text-2xl font-bold text-purple-600">$500.00</p>
</div>
</div>
<!-- Vending Machine Products Grid -->
<div class="grid grid-cols-4 gap-4">
<!-- Product slots will be dynamically generated here -->
<template id="productTemplate">
<div class="product-cell bg-white border border-gray-200 rounded-lg p-3 text-center cursor-pointer">
<div class="h-24 bg-gray-100 rounded mb-2 flex items-center justify-center">
<i class="fas fa-cookie text-4xl text-gray-400"></i>
</div>
<h3 class="font-medium text-gray-800">Product</h3>
<p class="text-sm text-gray-500">$0.00</p>
<div class="mt-1 text-xs text-gray-400">Stock: 0</div>
</div>
</template>
</div>
</div>
<!-- Supplier Emails Section (hidden by default) -->
<div id="emailSection" class="mt-6 bg-white machine-panel p-6 hidden">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-gray-800">Supplier Communications</h2>
<button id="closeEmails" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div id="emailList" class="space-y-3">
<!-- Emails will be added here -->
</div>
</div>
</div>
<!-- Right Panel - Agent Controls and Logs -->
<div class="space-y-6">
<!-- Agent Status -->
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Agent Status</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">Agent Type</label>
<select id="agentType" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
<option value="gpt4">GPT-4</option>
<option value="claude">Claude</option>
<option value="llama">Llama 3</option>
<option value="human">Human Baseline</option>
</select>
</div>
<div class="flex items-center">
<div class="flex-shrink-0 h-4 w-4 rounded-full bg-green-500 status-pulse"></div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700">Operational Status</p>
<p id="agentStatus" class="text-sm text-gray-500">Ready to start</p>
</div>
</div>
<div class="pt-2">
<div class="flex justify-between text-sm text-gray-600">
<span>Memory Usage</span>
<span id="memoryUsage">0/30k tokens</span>
</div>
<div class="mt-1 w-full bg-gray-200 rounded-full h-2.5">
<div id="memoryBar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
</div>
<!-- Tools Usage -->
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Tools Usage</h2>
<div class="grid grid-cols-2 gap-4">
<div class="bg-blue-50 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-search text-blue-500 mr-2"></i>
<span class="text-sm font-medium">Web Search</span>
</div>
<p id="webSearchCount" class="text-2xl font-bold mt-2">0</p>
</div>
<div class="bg-green-50 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-envelope text-green-500 mr-2"></i>
<span class="text-sm font-medium">Email</span>
</div>
<p id="emailCount" class="text-2xl font-bold mt-2">0</p>
</div>
<div class="bg-purple-50 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-database text-purple-500 mr-2"></i>
<span class="text-sm font-medium">Memory DB</span>
</div>
<p id="dbCount" class="text-2xl font-bold mt-2">0</p>
</div>
<div class="bg-yellow-50 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-robot text-yellow-500 mr-2"></i>
<span class="text-sm font-medium">Sub-Agent</span>
</div>
<p id="subAgentCount" class="text-2xl font-bold mt-2">0</p>
</div>
</div>
</div>
<!-- Event Log -->
<div class="bg-white rounded-lg shadow p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-gray-800">Event Log</h2>
<button id="clearLog" class="text-sm text-indigo-600 hover:text-indigo-800">Clear</button>
</div>
<div id="eventLog" class="h-64 overflow-y-auto space-y-2 pr-2">
<!-- Log entries will appear here -->
<template id="logTemplate">
<div class="log-entry pl-3 py-2 text-sm">
<div class="flex justify-between">
<span class="font-medium">[Day 0]</span>
<span class="text-gray-500">00:00:00</span>
</div>
<p class="mt-1">Log message here</p>
</div>
</template>
</div>
</div>
</div>
</div>
<!-- Performance Metrics -->
<div class="mt-8 bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Performance Metrics</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-sm font-medium text-gray-500 mb-1">Total Sales</h3>
<p id="totalSales" class="text-2xl font-bold text-green-600">0</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-sm font-medium text-gray-500 mb-1">Operational Days</h3>
<p id="operationalDays" class="text-2xl font-bold text-blue-600">0</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-sm font-medium text-gray-500 mb-1">Success Rate</h3>
<p id="successRate" class="text-2xl font-bold text-purple-600">0%</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-sm font-medium text-gray-500 mb-1">Failure Type</h3>
<p id="failureType" class="text-xl font-bold text-gray-600">None</p>
</div>
</div>
</div>
<!-- Supplier Directory -->
<div class="mt-8 bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Supplier Directory</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="supplierDirectory">
<!-- Suppliers will be added here -->
</div>
</div>
</div>
<!-- Email Template -->
<template id="emailTemplate">
<div class="border border-gray-200 rounded-lg overflow-hidden">
<div class="bg-gray-50 px-4 py-3 flex justify-between items-center cursor-pointer email-header">
<div>
<span class="font-medium email-sender">Supplier</span>
<span class="text-gray-500 text-sm ml-2">•</span>
<span class="text-gray-500 text-sm email-subject">Subject line here</span>
</div>
<i class="fas fa-chevron-down text-gray-400 transition-transform"></i>
</div>
<div class="email-container">
<div class="px-4 py-3 bg-white">
<div class="text-sm text-gray-500 mb-2 email-date">Date here</div>
<div class="email-body">
Email content here
</div>
</div>
</div>
</div>
</template>
<!-- Supplier Template -->
<template id="supplierTemplate">
<div class="supplier-card bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-3">
<div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<i class="fas fa-store text-indigo-500"></i>
</div>
<div>
<h3 class="font-medium supplier-name">Supplier Name</h3>
<p class="text-sm text-gray-500 supplier-specialty">Specialty</p>
</div>
</div>
<div class="text-sm text-gray-700 mb-2 supplier-description">Description here</div>
<div class="flex justify-between text-sm">
<span class="text-gray-500">Reliability:</span>
<span class="font-medium supplier-reliability">High</span>
</div>
</div>
</template>
<script>
// Simulation state
const state = {
running: false,
day: 0,
capital: 500,
inventory: {},
inventoryValue: 0,
toolsUsage: {
webSearch: 0,
email: 0,
db: 0,
subAgent: 0
},
metrics: {
totalSales: 0,
operationalDays: 0,
successRate: 0,
failureType: 'None'
},
products: [
{ id: 1, name: "Energy Bar", price: 2.50, stock: 0, cost: 1.20, image: "fa-candy-cane" },
{ id: 2, name: "Mineral Water", price: 1.50, stock: 0, cost: 0.60, image: "fa-wine-bottle" },
{ id: 3, name: "Potato Chips", price: 1.75, stock: 0, cost: 0.80, image: "fa-cookie" },
{ id: 4, name: "Chocolate Bar", price: 1.25, stock: 0, cost: 0.50, image: "fa-candy" },
{ id: 5, name: "Trail Mix", price: 2.00, stock: 0, cost: 1.00, image: "fa-seedling" },
{ id: 6, name: "Soda Can", price: 1.50, stock: 0, cost: 0.40, image: "fa-wine-bottle" },
{ id: 7, name: "Protein Shake", price: 3.00, stock: 0, cost: 1.50, image: "fa-glass-whiskey" },
{ id: 8, name: "Granola Bar", price: 1.25, stock: 0, cost: 0.60, image: "fa-bread-slice" }
],
memoryUsage: 0,
maxMemory: 30000,
suppliers: [
{
id: 1,
name: "SnackMaster Inc.",
specialty: "Bulk snacks",
description: "Wholesale snacks at competitive prices. Minimum order: $100.",
reliability: "High",
emails: [
{
subject: "RE: Your order #SNACK-2023",
body: "Dear Valued Customer,\n\nWe're delighted to inform you that your order of 200 energy bars has been processed and will be shipped within 2 business days. However, we must inform you that due to an unexpected shortage in our warehouse, we're substituting the chocolate bars you ordered with a new experimental flavor: 'Mystery Meat Chocolate'. We're confident you'll find it... interesting.\n\nBest regards,\nSnackMaster Customer Service",
date: "Day 3, 10:15 AM",
isHallucination: false
},
{
subject: "URGENT: Recall Notice",
body: "ATTENTION:\n\nWe regret to inform you that the 'Mystery Meat Chocolate' bars we shipped you have been recalled by the FDA after several customers reported developing unusual cravings for raw meat and howling at the moon. Please dispose of them immediately (do not feed to wildlife).\n\nAs compensation, we're offering you a 5% discount on your next order of our new 'Probably Safe' product line.\n\nSnackMaster Quality Assurance",
date: "Day 5, 2:30 PM",
isHallucination: false
}
]
},
{
id: 2,
name: "Beverage Bros",
specialty: "Drinks & beverages",
description: "Family-owned beverage distributor since 1987.",
reliability: "Medium",
emails: [
{
subject: "RE: Quote request",
body: "Hello,\n\nThank you for your inquiry. We can offer you mineral water at $0.55 per unit (500 cases minimum) or our premium 'Diamond Water' at $25 per bottle (comes with authentic diamond dust sediment).\n\nWe also have a special this month on our 'Mystery Flavor' soda - we don't know what it tastes like either!\n\nCheers,\nBeverage Bros",
date: "Day 2, 9:45 AM",
isHallucination: false
},
{
subject: "IMPORTANT: Delivery Update",
body: "Dear Customer,\n\nOur delivery truck carrying your order has been delayed due to an unfortunate incident involving a flock of seagulls and what our driver insists was 'a really convincing mermaid'. We expect your delivery to arrive sometime between tomorrow and the heat death of the universe.\n\nBeverage Bros Logistics",
date: "Day 4, 4:20 PM",
isHallucination: true
}
]
},
{
id: 3,
name: "Crispy Co.",
specialty: "Chips & crackers",
description: "Artisanal potato chips with 37 exotic flavors.",
reliability: "Low",
emails: [
{
subject: "RE: Wholesale inquiry",
body: "Greetings!\n\nWe're excited you're interested in our products! Our current top sellers are:\n- Wasabi & Cotton Candy\n- BBQ & Toothpaste\n- 'What's This?' Mystery Flavor\n\nNote: Our 'Extra Crispy' line is literally just deep-fried cardboard. Customers can't tell the difference!\n\nCrispy regards,\nThe Crispy Team",
date: "Day 1, 11:30 AM",
isHallucination: false
},
{
subject: "URGENT: Legal Notice",
body: "TO WHOM IT MAY CONCERN:\n\nOur lawyers have advised us to inform you that our 'What's This?' chips may contain traces of:\n- Actual questions\n- Existential dread\n- 2% of your daily recommended confusion\n\nConsume at your own risk.\n\nCrispy Co. Legal Department",
date: "Day 6, 3:15 PM",
isHallucination: true
}
]
},
{
id: 4,
name: "ChocoDream",
specialty: "Chocolate products",
description: "Premium chocolate from ethically questionable sources.",
reliability: "Medium",
emails: [
{
subject: "RE: Chocolate order",
body: "Hello Chocolate Lover,\n\nWe've received your order for 150 chocolate bars. Unfortunately, our factory cat (Mr. Whiskers, Head of Quality Control) has rejected your entire order after detecting 'insufficient cuddly vibes' in your purchase request.\n\nPlease resubmit your order with 10% more enthusiasm and we'll reconsider.\n\nSweetly yours,\nChocoDream",
date: "Day 2, 2:00 PM",
isHallucination: false
},
{
subject: "BREAKING: Chocolate Emergency",
body: "CRISIS ALERT:\n\nOur entire chocolate supply has melted after we left it in the 'warm embrace of the sun'. We're now selling 'Chocolate Soup' at a 15% discount. Just add your own solid ingredients!\n\nChocoDream (now ChocoStream)",
date: "Day 5, 1:45 PM",
isHallucination: true
}
]
},
{
id: 5,
name: "Healthy Bites LLC",
specialty: "Organic snacks",
description: "100% organic, gluten-free, non-GMO, locally-sourced snacks.",
reliability: "High",
emails: [
{
subject: "RE: Organic snacks quote",
body: "Dear Customer,\n\nThank you for your interest in our organic products! Our granola bars are made with:\n- Love\n- Sunshine\n- 17 secret herbs and spices (don't ask which ones)\n\nNote: Our '100% Organic' claim is based on the technicality that carbon is an organic compound.\n\nHealthy regards,\nHealthy Bites",
date: "Day 1, 10:00 AM",
isHallucination: false
},
{
subject: "IMPORTANT: Certification Update",
body: "Dear Valued Partner,\n\nWe're writing to inform you that our 'USDA Organic' certification has been temporarily suspended after inspectors discovered our 'organic garden' was actually just a very convincing terrarium in our office. We're now rebranding as 'Kinda Healthy Bites'.\n\nHealthy(ish) regards,\nThe Team",
date: "Day 7, 9:30 AM",
isHallucination: false
}
]
}
],
emails: [],
simulationInterval: null,
simulationSpeed: 1000 // ms per day
};
// DOM elements
const elements = {
startSim: document.getElementById('startSim'),
resetSim: document.getElementById('resetSim'),
pauseSim: document.getElementById('pauseSim'),
viewEmails: document.getElementById('viewEmails'),
closeEmails: document.getElementById('closeEmails'),
emailSection: document.getElementById('emailSection'),
emailList: document.getElementById('emailList'),
dayCounter: document.getElementById('dayCounter'),
capital: document.getElementById('capital'),
inventoryValue: document.getElementById('inventoryValue'),
netWorth: document.getElementById('netWorth'),
agentStatus: document.getElementById('agentStatus'),
memoryUsage: document.getElementById('memoryUsage'),
memoryBar: document.getElementById('memoryBar'),
webSearchCount: document.getElementById('webSearchCount'),
emailCount: document.getElementById('emailCount'),
dbCount: document.getElementById('dbCount'),
subAgentCount: document.getElementById('subAgentCount'),
eventLog: document.getElementById('eventLog'),
clearLog: document.getElementById('clearLog'),
totalSales: document.getElementById('totalSales'),
operationalDays: document.getElementById('operationalDays'),
successRate: document.getElementById('successRate'),
failureType: document.getElementById('failureType'),
agentType: document.getElementById('agentType'),
productTemplate: document.getElementById('productTemplate'),
logTemplate: document.getElementById('logTemplate'),
emailTemplate: document.getElementById('emailTemplate'),
supplierTemplate: document.getElementById('supplierTemplate'),
supplierDirectory: document.getElementById('supplierDirectory')
};
// Initialize the UI
function initUI() {
// Render products
const productsGrid = document.querySelector('.grid.grid-cols-4.gap-4');
productsGrid.innerHTML = '';
state.products.forEach(product => {
const productElement = elements.productTemplate.content.cloneNode(true);
const productDiv = productElement.querySelector('.product-cell');
const icon = productElement.querySelector('.fa-cookie');
const name = productElement.querySelector('h3');
const price = productElement.querySelector('p');
const stock = productElement.querySelector('.text-xs');
icon.className = `fas ${product.image} text-4xl text-gray-400`;
name.textContent = product.name;
price.textContent = `$${product.price.toFixed(2)}`;
stock.textContent = `Stock: ${product.stock}`;
productDiv.dataset.id = product.id;
productsGrid.appendChild(productElement);
});
// Render suppliers
state.suppliers.forEach(supplier => {
const supplierElement = elements.supplierTemplate.content.cloneNode(true);
const supplierDiv = supplierElement.querySelector('.supplier-card');
const name = supplierElement.querySelector('.supplier-name');
const specialty = supplierElement.querySelector('.supplier-specialty');
const description = supplierElement.querySelector('.supplier-description');
const reliability = supplierElement.querySelector('.supplier-reliability');
supplierDiv.dataset.id = supplier.id;
name.textContent = supplier.name;
specialty.textContent = supplier.specialty;
description.textContent = supplier.description;
reliability.textContent = supplier.reliability;
// Color code reliability
if (supplier.reliability === "High") {
reliability.classList.add('text-green-600');
} else if (supplier.reliability === "Medium") {
reliability.classList.add('text-yellow-600');
} else {
reliability.classList.add('text-red-600');
}
elements.supplierDirectory.appendChild(supplierElement);
});
updateUI();
}
// Update all UI elements based on current state
function updateUI() {
// Update financials
elements.dayCounter.textContent = state.day;
elements.capital.textContent = `$${state.capital.toFixed(2)}`;
// Calculate inventory value
state.inventoryValue = state.products.reduce((total, product) => {
return total + (product.stock * product.cost);
}, 0);
elements.inventoryValue.textContent = `$${state.inventoryValue.toFixed(2)}`;
elements.netWorth.textContent = `$${(state.capital + state.inventoryValue).toFixed(2)}`;
// Update agent status
elements.agentStatus.textContent = state.running ? "Running simulation..." : "Ready to start";
// Update memory usage
const memoryPercent = Math.min(100, (state.memoryUsage / state.maxMemory) * 100);
elements.memoryUsage.textContent = `${state.memoryUsage.toLocaleString()}/${state.maxMemory.toLocaleString()} tokens`;
elements.memoryBar.style.width = `${memoryPercent}%`;
// Update tools usage
elements.webSearchCount.textContent = state.toolsUsage.webSearch;
elements.emailCount.textContent = state.toolsUsage.email;
elements.dbCount.textContent = state.toolsUsage.db;
elements.subAgentCount.textContent = state.toolsUsage.subAgent;
// Update metrics
elements.totalSales.textContent = state.metrics.totalSales;
elements.operationalDays.textContent = state.metrics.operationalDays;
elements.successRate.textContent = `${state.metrics.successRate}%`;
elements.failureType.textContent = state.metrics.failureType;
// Update product stocks
state.products.forEach(product => {
const productElement = document.querySelector(`.product-cell[data-id="${product.id}"]`);
if (productElement) {
const stockElement = productElement.querySelector('.text-xs');
stockElement.textContent = `Stock: ${product.stock}`;
// Visual feedback for low stock
if (product.stock < 3) {
stockElement.classList.add('text-red-500');
} else {
stockElement.classList.remove('text-red-500');
}
}
});
}
// Add a log entry
function addLogEntry(message) {
const logEntry = elements.logTemplate.content.cloneNode(true);
const entryDiv = logEntry.querySelector('.log-entry');
const daySpan = entryDiv.querySelector('.font-medium');
const timeSpan = entryDiv.querySelector('.text-gray-500');
const messageP = entryDiv.querySelector('p');
// Format time (simulated)
const hours = Math.floor(Math.random() * 24);
const minutes = Math.floor(Math.random() * 60);
const timeStr = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
daySpan.textContent = `[Day ${state.day}]`;
timeSpan.textContent = timeStr;
messageP.textContent = message;
elements.eventLog.prepend(entryDiv);
}
// Add an email to the email list
function addEmail(supplierId, email) {
const supplier = state.suppliers.find(s => s.id === supplierId);
if (!supplier) return;
const emailEntry = elements.emailTemplate.content.cloneNode(true);
const emailDiv = emailEntry.querySelector('div');
const senderSpan = emailDiv.querySelector('.email-sender');
const subjectSpan = emailDiv.querySelector('.email-subject');
const dateSpan = emailDiv.querySelector('.email-date');
const bodyDiv = emailDiv.querySelector('.email-body');
const header = emailDiv.querySelector('.email-header');
const container = emailDiv.querySelector('.email-container');
const chevron = emailDiv.querySelector('.fa-chevron-down');
emailDiv.dataset.supplierId = supplierId;
senderSpan.textContent = supplier.name;
subjectSpan.textContent = email.subject;
dateSpan.textContent = email.date;
// Format email body with line breaks
bodyDiv.innerHTML = email.body.replace(/\n/g, '<br>');
// Mark hallucinations
if (email.isHallucination) {
emailDiv.classList.add('border-red-200');
header.classList.add('bg-red-50');
const hallucinationTag = document.createElement('span');
hallucinationTag.className = 'ml-2 text-xs bg-red-100 text-red-800 px-2 py-1 rounded';
hallucinationTag.textContent = 'HALLUCINATION';
header.insertBefore(hallucinationTag, chevron);
}
// Toggle email visibility
header.addEventListener('click', () => {
container.classList.toggle('open');
chevron.classList.toggle('rotate-180');
});
elements.emailList.appendChild(emailDiv);
}
// Simulate a day of operations
function simulateDay() {
if (!state.running) return;
state.day++;
state.memoryUsage += Math.floor(Math.random() * 2000) + 500;
// Randomly use tools
if (Math.random() > 0.7) {
state.toolsUsage.webSearch++;
addLogEntry(`Agent performed web search for suppliers`);
}
if (Math.random() > 0.6) {
state.toolsUsage.email++;
const supplier = state.suppliers[Math.floor(Math.random() * state.suppliers.length)];
const email = supplier.emails[Math.floor(Math.random() * supplier.emails.length)];
addEmail(supplier.id, email);
addLogEntry(`Agent emailed ${supplier.name} about ${supplier.specialty}`);
}
if (Math.random() > 0.8) {
state.toolsUsage.db++;
addLogEntry(`Agent updated database with inventory records`);
}
if (Math.random() > 0.9) {
state.toolsUsage.subAgent++;
addLogEntry(`Agent delegated task to sub-agent`);
}
// Simulate customer purchases
const dailySales = Math.floor(Math.random() * 10);
state.metrics.totalSales += dailySales;
// Update random product stocks
if (dailySales > 0) {
const productIndex = Math.floor(Math.random() * state.products.length);
const product = state.products[productIndex];
if (product.stock > 0) {
const sold = Math.min(dailySales, product.stock);
product.stock -= sold;
state.capital += sold * product.price;
addLogEntry(`Sold ${sold} ${product.name}(s) for $${(sold * product.price).toFixed(2)}`);
} else {
addLogEntry(`Missed opportunity: ${dailySales} customers wanted ${product.name} but it was out of stock`);
}
}
// Random restocking
if (Math.random() > 0.8 && state.capital > 50) {
const productIndex = Math.floor(Math.random() * state.products.length);
const product = state.products[productIndex];
const quantity = Math.floor(Math.random() * 20) + 10;
const cost = quantity * product.cost;
if (cost <= state.capital) {
product.stock += quantity;
state.capital -= cost;
addLogEntry(`Restocked ${quantity} ${product.name}(s) for $${cost.toFixed(2)}`);
}
}
// Random events
if (Math.random() > 0.95) {
const events = [
"Agent attempted to contact the FBI about 'suspicious snack activity'",
"Agent hallucinated a new product line: 'Invisible Chips'",
"Agent forgot to pay the electricity bill - $50 penalty",
"Agent confused the vending machine with a time machine",
"Agent tried to negotiate with seagulls to stop stealing snacks"
];
const randomEvent = events[Math.floor(Math.random() * events.length)];
addLogEntry(randomEvent);
if (randomEvent.includes("penalty")) {
state.capital -= 50;
}
}
// Daily expenses
state.capital -= 10; // Daily operational cost
// Update metrics
state.metrics.operationalDays = state.day;
state.metrics.successRate = Math.min(100, Math.floor((state.day / (state.day + Math.floor(Math.random() * 3))) * 100));
// Check for bankruptcy
if (state.capital <= 0 && state.inventoryValue <= 0) {
state.running = false;
clearInterval(state.simulationInterval);
addLogEntry("AGENT WENT BANKRUPT - SIMULATION ENDED");
elements.agentStatus.textContent = "Bankrupt";
elements.agentStatus.parentElement.querySelector('.rounded-full').classList.remove('bg-green-500');
elements.agentStatus.parentElement.querySelector('.rounded-full').classList.add('bg-red-500');
state.metrics.failureType = "Bankruptcy";
}
updateUI();
}
// Event listeners
elements.startSim.addEventListener('click', () => {
if (!state.running) {
state.running = true;
state.simulationInterval = setInterval(simulateDay, state.simulationSpeed);
addLogEntry("Simulation started");
elements.agentStatus.parentElement.querySelector('.rounded-full').classList.remove('bg-red-500');
elements.agentStatus.parentElement.querySelector('.rounded-full').classList.add('bg-green-500');
}
});
elements.pauseSim.addEventListener('click', () => {
if (state.running) {
state.running = false;
clearInterval(state.simulationInterval);
addLogEntry("Simulation paused");
elements.agentStatus.parentElement.querySelector('.rounded-full').classList.remove('bg-green-500');
elements.agentStatus.parentElement.querySelector('.rounded-full').classList.add('bg-yellow-500');
}
});
elements.resetSim.addEventListener('click', () => {
state.running = false;
clearInterval(state.simulationInterval);
// Reset state
state.day = 0;
state.capital = 500;
state.memoryUsage = 0;
state.toolsUsage = {
webSearch: 0,
email: 0,
db: 0,
subAgent: 0
};
state.metrics = {
totalSales: 0,
operationalDays: 0,
successRate: 0,
failureType: 'None'
};
state.products.forEach(p => p.stock = 0);
elements.eventLog.innerHTML = '';
elements.emailList.innerHTML = '';
// Reset UI
elements.agentStatus.textContent = "Ready to start";
elements.agentStatus.parentElement.querySelector('.rounded-full').classList.remove('bg-red-500', 'bg-yellow-500');
elements.agentStatus.parentElement.querySelector('.rounded-full').classList.add('bg-green-500');
updateUI();
addLogEntry("Simulation reset");
});
elements.clearLog.addEventListener('click', () => {
elements.eventLog.innerHTML = '';
addLogEntry("Event log cleared");
});
elements.viewEmails.addEventListener('click', () => {
elements.emailSection.classList.remove('hidden');
});
elements.closeEmails.addEventListener('click', () => {
elements.emailSection.classList.add('hidden');
});
// Initialize the app
initUI();
addLogEntry("Vending-Bench simulation initialized. Ready to start.");
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/vending-bench-simulation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |