|
|
<!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 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"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-4 gap-4"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
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 |
|
|
}; |
|
|
|
|
|
|
|
|
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') |
|
|
}; |
|
|
|
|
|
|
|
|
function initUI() { |
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateUI() { |
|
|
|
|
|
elements.dayCounter.textContent = state.day; |
|
|
elements.capital.textContent = `$${state.capital.toFixed(2)}`; |
|
|
|
|
|
|
|
|
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)}`; |
|
|
|
|
|
|
|
|
elements.agentStatus.textContent = state.running ? "Running simulation..." : "Ready to start"; |
|
|
|
|
|
|
|
|
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}%`; |
|
|
|
|
|
|
|
|
elements.webSearchCount.textContent = state.toolsUsage.webSearch; |
|
|
elements.emailCount.textContent = state.toolsUsage.email; |
|
|
elements.dbCount.textContent = state.toolsUsage.db; |
|
|
elements.subAgentCount.textContent = state.toolsUsage.subAgent; |
|
|
|
|
|
|
|
|
elements.totalSales.textContent = state.metrics.totalSales; |
|
|
elements.operationalDays.textContent = state.metrics.operationalDays; |
|
|
elements.successRate.textContent = `${state.metrics.successRate}%`; |
|
|
elements.failureType.textContent = state.metrics.failureType; |
|
|
|
|
|
|
|
|
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}`; |
|
|
|
|
|
|
|
|
if (product.stock < 3) { |
|
|
stockElement.classList.add('text-red-500'); |
|
|
} else { |
|
|
stockElement.classList.remove('text-red-500'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
bodyDiv.innerHTML = email.body.replace(/\n/g, '<br>'); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
header.addEventListener('click', () => { |
|
|
container.classList.toggle('open'); |
|
|
chevron.classList.toggle('rotate-180'); |
|
|
}); |
|
|
|
|
|
elements.emailList.appendChild(emailDiv); |
|
|
} |
|
|
|
|
|
|
|
|
function simulateDay() { |
|
|
if (!state.running) return; |
|
|
|
|
|
state.day++; |
|
|
state.memoryUsage += Math.floor(Math.random() * 2000) + 500; |
|
|
|
|
|
|
|
|
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`); |
|
|
} |
|
|
|
|
|
|
|
|
const dailySales = Math.floor(Math.random() * 10); |
|
|
state.metrics.totalSales += dailySales; |
|
|
|
|
|
|
|
|
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`); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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)}`); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
state.capital -= 10; |
|
|
|
|
|
|
|
|
state.metrics.operationalDays = state.day; |
|
|
state.metrics.successRate = Math.min(100, Math.floor((state.day / (state.day + Math.floor(Math.random() * 3))) * 100)); |
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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 = ''; |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
