Spaces:
Running
Running
can you add specific equipment models and specific components to look at - Follow Up Deployment
bd290cf verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Equipment Troubleshooting Assistant</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> | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .equipment-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .symptom-chip { | |
| transition: all 0.2s ease; | |
| } | |
| .symptom-chip:hover { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-blue-800 mb-2">Equipment Troubleshooting Assistant</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Get expert troubleshooting recommendations based on the symptoms you observe in your equipment</p> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Equipment Selection --> | |
| <div class="bg-white rounded-xl shadow-md p-6 lg:col-span-1"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">1. Select Equipment Type</h2> | |
| <div class="space-y-4"> | |
| <div class="equipment-card bg-white border border-gray-200 rounded-lg p-4 cursor-pointer transition-all duration-300" | |
| data-equipment="car" onclick="selectEquipment(this, 'car')"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-car text-blue-500 text-2xl mr-3"></i> | |
| <div> | |
| <h3 class="font-medium">Automobile</h3> | |
| <p class="text-sm text-gray-500">Cars, trucks, motorcycles</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="equipment-card bg-white border border-gray-200 rounded-lg p-4 cursor-pointer transition-all duration-300" | |
| data-equipment="jet-engine" onclick="selectEquipment(this, 'jet-engine')"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-plane text-blue-500 text-2xl mr-3"></i> | |
| <div> | |
| <h3 class="font-medium">Jet Engine</h3> | |
| <p class="text-sm text-gray-500">Aircraft propulsion systems</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="equipment-card bg-white border border-gray-200 rounded-lg p-4 cursor-pointer transition-all duration-300" | |
| data-equipment="computer" onclick="selectEquipment(this, 'computer')"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-laptop text-blue-500 text-2xl mr-3"></i> | |
| <div> | |
| <h3 class="font-medium">Computer System</h3> | |
| <p class="text-sm text-gray-500">PCs, servers, networking</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="equipment-card bg-white border border-gray-200 rounded-lg p-4 cursor-pointer transition-all duration-300" | |
| data-equipment="medical" onclick="selectEquipment(this, 'medical')"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-heartbeat text-blue-500 text-2xl mr-3"></i> | |
| <div> | |
| <h3 class="font-medium">Medical Equipment</h3> | |
| <p class="text-sm text-gray-500">Diagnostic machines, monitors</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="equipment-card bg-white border border-gray-200 rounded-lg p-4 cursor-pointer transition-all duration-300" | |
| data-equipment="industrial" onclick="selectEquipment(this, 'industrial')"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-industry text-blue-500 text-2xl mr-3"></i> | |
| <div> | |
| <h3 class="font-medium">Industrial Machinery</h3> | |
| <p class="text-sm text-gray-500">Manufacturing equipment</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Symptoms Input --> | |
| <div class="bg-white rounded-xl shadow-md p-6 lg:col-span-1"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">2. Describe Symptoms</h2> | |
| <div id="equipment-info" class="hidden mb-4 p-3 bg-blue-50 rounded-lg"> | |
| <h3 class="font-medium text-blue-800" id="selected-equipment-name"></h3> | |
| <p class="text-sm text-blue-600" id="selected-equipment-desc"></p> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="symptoms"> | |
| What symptoms are you observing? | |
| </label> | |
| <textarea id="symptoms" rows="4" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| placeholder="Describe the symptoms in detail..."></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2"> | |
| Common symptoms (click to add): | |
| </label> | |
| <div id="common-symptoms" class="flex flex-wrap gap-2"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <button id="analyze-btn" onclick="analyzeSymptoms()" | |
| class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed" | |
| disabled> | |
| <i class="fas fa-search mr-2"></i> Analyze Symptoms | |
| </button> | |
| </div> | |
| <!-- Results Panel --> | |
| <div class="bg-white rounded-xl shadow-md p-6 lg:col-span-1"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">3. Troubleshooting Recommendations</h2> | |
| <div id="results-placeholder" class="text-center py-12"> | |
| <i class="fas fa-tools text-gray-300 text-5xl mb-4"></i> | |
| <p class="text-gray-500">Select equipment and describe symptoms to get troubleshooting recommendations</p> | |
| </div> | |
| <div id="results-container" class="hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-lg" id="results-title"></h3> | |
| <button onclick="resetForm()" class="text-blue-600 hover:text-blue-800 text-sm"> | |
| <i class="fas fa-redo mr-1"></i> Start Over | |
| </button> | |
| </div> | |
| <div id="results-content" class="space-y-4"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Equipment data | |
| const equipmentData = { | |
| 'car': { | |
| name: 'Automobile', | |
| description: 'Cars, trucks, motorcycles and other vehicles', | |
| models: [ | |
| 'Toyota Camry (2015-2023)', | |
| 'Ford F-150 (2018-2023)', | |
| 'Honda Civic (2016-2023)', | |
| 'Chevrolet Silverado (2019-2023)' | |
| ], | |
| keyComponents: [ | |
| 'Engine Control Module (ECM)', | |
| 'Transmission', | |
| 'Fuel Injection System', | |
| 'Braking System', | |
| 'Electrical System' | |
| ], | |
| commonSymptoms: [ | |
| 'Engine won\'t start', | |
| 'Strange noises', | |
| 'Warning lights on', | |
| 'Poor fuel economy', | |
| 'Overheating', | |
| 'Brake problems', | |
| 'Electrical issues' | |
| ], | |
| solutions: { | |
| 'Engine won\'t start': [ | |
| 'Check battery connections and charge', | |
| 'Inspect starter motor and alternator', | |
| 'Verify fuel delivery system', | |
| 'Check ignition system (spark plugs, coils)' | |
| ], | |
| 'Strange noises': [ | |
| 'Identify noise location (engine, suspension, exhaust)', | |
| 'Check for loose components', | |
| 'Inspect belts and pulleys', | |
| 'Look for exhaust leaks' | |
| ], | |
| 'Warning lights on': [ | |
| 'Use OBD-II scanner to read error codes', | |
| 'Check vehicle manual for specific light meaning', | |
| 'Inspect relevant systems (engine, transmission, brakes)' | |
| ] | |
| } | |
| }, | |
| 'jet-engine': { | |
| name: 'Jet Engine', | |
| description: 'Aircraft propulsion systems and turbines', | |
| models: [ | |
| 'GE CF6-80', | |
| 'Pratt & Whitney PW4000', | |
| 'Rolls-Royce Trent 700', | |
| 'CFM International CFM56' | |
| ], | |
| keyComponents: [ | |
| 'Fan Blades', | |
| 'Compressor Section', | |
| 'Combustion Chamber', | |
| 'Turbine Section', | |
| 'Fuel Nozzles' | |
| ], | |
| commonSymptoms: [ | |
| 'Loss of thrust', | |
| 'Excessive vibration', | |
| 'High EGT (Exhaust Gas Temperature)', | |
| 'Oil pressure warning', | |
| 'Compressor stall', | |
| 'Fuel flow anomalies' | |
| ], | |
| solutions: { | |
| 'Loss of thrust': [ | |
| 'Check fuel system for proper flow', | |
| 'Inspect compressor and turbine blades for damage', | |
| 'Verify engine control system operation', | |
| 'Check for exhaust leaks' | |
| ], | |
| 'Excessive vibration': [ | |
| 'Perform engine balance check', | |
| 'Inspect mounts and attachments', | |
| 'Check for foreign object damage', | |
| 'Monitor vibration during different power settings' | |
| ] | |
| } | |
| }, | |
| 'computer': { | |
| name: 'Computer System', | |
| description: 'PCs, servers, networking equipment', | |
| models: [ | |
| 'Dell PowerEdge R740', | |
| 'HP ProLiant DL380', | |
| 'Lenovo ThinkSystem SR650', | |
| 'Cisco UCS C240 M5' | |
| ], | |
| keyComponents: [ | |
| 'CPU', | |
| 'RAM', | |
| 'Storage Drives', | |
| 'Power Supply Unit', | |
| 'Network Interface Cards' | |
| ], | |
| commonSymptoms: [ | |
| 'Won\'t power on', | |
| 'Blue screen errors', | |
| 'Slow performance', | |
| 'Overheating', | |
| 'Network connectivity issues', | |
| 'Peripheral malfunctions' | |
| ], | |
| solutions: { | |
| 'Won\'t power on': [ | |
| 'Check power supply and connections', | |
| 'Test with known-good power cable', | |
| 'Inspect motherboard for visible damage', | |
| 'Reset CMOS battery' | |
| ], | |
| 'Slow performance': [ | |
| 'Check task manager for resource hogs', | |
| 'Scan for malware/viruses', | |
| 'Verify adequate free disk space', | |
| 'Consider hardware upgrades if outdated' | |
| ] | |
| } | |
| }, | |
| 'medical': { | |
| name: 'Medical Equipment', | |
| description: 'Diagnostic machines, monitors, and devices', | |
| models: [ | |
| 'GE Healthcare CARESCAPE B650', | |
| 'Philips IntelliVue MX800', | |
| 'Siemens MAGNETOM Vida', | |
| 'Drager Infinity Delta' | |
| ], | |
| keyComponents: [ | |
| 'Patient Monitoring Sensors', | |
| 'Imaging Components', | |
| 'Control Processors', | |
| 'Power Distribution Units', | |
| 'Communication Modules' | |
| ], | |
| commonSymptoms: [ | |
| 'Inaccurate readings', | |
| 'Device not powering on', | |
| 'Calibration errors', | |
| 'Sensor malfunctions', | |
| 'Communication failures', | |
| 'Alarm conditions' | |
| ], | |
| solutions: { | |
| 'Inaccurate readings': [ | |
| 'Perform calibration procedure', | |
| 'Check sensor connections and placement', | |
| 'Verify patient conditions match expected parameters', | |
| 'Inspect for environmental interference' | |
| ], | |
| 'Device not powering on': [ | |
| 'Verify power source and connections', | |
| 'Check backup battery status', | |
| 'Inspect power supply components', | |
| 'Contact manufacturer for service if under warranty' | |
| ] | |
| } | |
| }, | |
| 'industrial': { | |
| name: 'Industrial Machinery', | |
| description: 'Manufacturing and production equipment', | |
| models: [ | |
| 'Fanuc Robodrill', | |
| 'Haas VF-2SS', | |
| 'Mazak VARIAXIS i-700', | |
| 'Okuma GENOS M560-V' | |
| ], | |
| keyComponents: [ | |
| 'CNC Controller', | |
| 'Spindle Motor', | |
| 'Linear Guides', | |
| 'Hydraulic System', | |
| 'Coolant System' | |
| ], | |
| commonSymptoms: [ | |
| 'Unexpected shutdowns', | |
| 'Excessive vibration', | |
| 'Hydraulic leaks', | |
| 'Pneumatic pressure drops', | |
| 'Control system errors', | |
| 'Bearing failures' | |
| ], | |
| solutions: { | |
| 'Unexpected shutdowns': [ | |
| 'Check error logs and fault codes', | |
| 'Inspect thermal protection devices', | |
| 'Verify power supply stability', | |
| 'Check for overload conditions' | |
| ], | |
| 'Hydraulic leaks': [ | |
| 'Locate source of leak (hoses, fittings, cylinders)', | |
| 'Check hydraulic fluid levels', | |
| 'Inspect seals and O-rings', | |
| 'Verify system pressure within specifications' | |
| ] | |
| } | |
| } | |
| }; | |
| let selectedEquipment = null; | |
| // Select equipment | |
| function selectEquipment(element, equipmentType) { | |
| // Remove active class from all cards | |
| document.querySelectorAll('.equipment-card').forEach(card => { | |
| card.classList.remove('border-blue-500', 'bg-blue-50'); | |
| }); | |
| // Add active class to selected card | |
| element.classList.add('border-blue-500', 'bg-blue-50'); | |
| // Set selected equipment | |
| selectedEquipment = equipmentType; | |
| // Show equipment info | |
| document.getElementById('equipment-info').classList.remove('hidden'); | |
| document.getElementById('selected-equipment-name').textContent = equipmentData[equipmentType].name; | |
| document.getElementById('selected-equipment-desc').textContent = equipmentData[equipmentType].description; | |
| // Enable analyze button if symptoms are present | |
| if (document.getElementById('symptoms').value.trim() !== '') { | |
| document.getElementById('analyze-btn').disabled = false; | |
| } | |
| // Populate common symptoms | |
| const symptomsContainer = document.getElementById('common-symptoms'); | |
| symptomsContainer.innerHTML = ''; | |
| equipmentData[equipmentType].commonSymptoms.forEach(symptom => { | |
| const chip = document.createElement('div'); | |
| chip.className = 'symptom-chip bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded-full cursor-pointer'; | |
| chip.textContent = symptom; | |
| chip.onclick = function() { | |
| addSymptomToTextarea(symptom); | |
| }; | |
| symptomsContainer.appendChild(chip); | |
| }); | |
| } | |
| // Add symptom to textarea | |
| function addSymptomToTextarea(symptom) { | |
| const textarea = document.getElementById('symptoms'); | |
| const currentText = textarea.value.trim(); | |
| if (currentText === '') { | |
| textarea.value = symptom; | |
| } else { | |
| // Check if symptom already exists | |
| if (!currentText.includes(symptom)) { | |
| textarea.value = currentText + ', ' + symptom; | |
| } | |
| } | |
| // Enable analyze button if equipment is selected | |
| if (selectedEquipment) { | |
| document.getElementById('analyze-btn').disabled = false; | |
| } | |
| // Trigger input event | |
| textarea.dispatchEvent(new Event('input')); | |
| } | |
| // Listen for textarea input to enable/disable analyze button | |
| document.getElementById('symptoms').addEventListener('input', function() { | |
| if (selectedEquipment && this.value.trim() !== '') { | |
| document.getElementById('analyze-btn').disabled = false; | |
| } else { | |
| document.getElementById('analyze-btn').disabled = true; | |
| } | |
| }); | |
| // Analyze symptoms | |
| function analyzeSymptoms() { | |
| const symptomsText = document.getElementById('symptoms').value.trim(); | |
| if (!selectedEquipment || symptomsText === '') return; | |
| // Hide placeholder, show results | |
| document.getElementById('results-placeholder').classList.add('hidden'); | |
| document.getElementById('results-container').classList.remove('hidden'); | |
| // Set results title and show equipment info | |
| document.getElementById('results-title').textContent = `Troubleshooting ${equipmentData[selectedEquipment].name}`; | |
| // Show equipment models and components | |
| const resultsContainer = document.getElementById('results-content'); | |
| const infoCard = document.createElement('div'); | |
| infoCard.className = 'fade-in bg-blue-50 p-4 rounded-lg border border-blue-200 mb-4'; | |
| const modelsTitle = document.createElement('h4'); | |
| modelsTitle.className = 'font-medium text-blue-700 mb-1'; | |
| modelsTitle.textContent = 'Common Models:'; | |
| infoCard.appendChild(modelsTitle); | |
| const modelsList = document.createElement('div'); | |
| modelsList.className = 'flex flex-wrap gap-2 mb-3'; | |
| equipmentData[selectedEquipment].models.forEach(model => { | |
| const tag = document.createElement('div'); | |
| tag.className = 'bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full'; | |
| tag.textContent = model; | |
| modelsList.appendChild(tag); | |
| }); | |
| infoCard.appendChild(modelsList); | |
| const componentsTitle = document.createElement('h4'); | |
| componentsTitle.className = 'font-medium text-blue-700 mb-1'; | |
| componentsTitle.textContent = 'Key Components:'; | |
| infoCard.appendChild(componentsTitle); | |
| const componentsList = document.createElement('div'); | |
| componentsList.className = 'flex flex-wrap gap-2'; | |
| equipmentData[selectedEquipment].keyComponents.forEach(component => { | |
| const tag = document.createElement('div'); | |
| tag.className = 'bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full'; | |
| tag.textContent = component; | |
| componentsList.appendChild(tag); | |
| }); | |
| infoCard.appendChild(componentsList); | |
| resultsContainer.appendChild(infoCard); | |
| resultsContainer.innerHTML = ''; | |
| // Split symptoms by commas or other separators | |
| const symptoms = symptomsText.split(/[,;]\s*|\s+and\s+/i).map(s => s.trim()).filter(s => s !== ''); | |
| // Find matching solutions | |
| let foundSolutions = false; | |
| symptoms.forEach(symptom => { | |
| // Check if this symptom has predefined solutions | |
| if (equipmentData[selectedEquipment].solutions[symptom]) { | |
| foundSolutions = true; | |
| const symptomCard = document.createElement('div'); | |
| symptomCard.className = 'fade-in bg-gray-50 p-4 rounded-lg border border-gray-200'; | |
| const symptomTitle = document.createElement('h4'); | |
| symptomTitle.className = 'font-medium text-blue-700 mb-2'; | |
| symptomTitle.textContent = `For "${symptom}":`; | |
| symptomCard.appendChild(symptomTitle); | |
| const solutionList = document.createElement('ul'); | |
| solutionList.className = 'list-disc pl-5 space-y-1'; | |
| equipmentData[selectedEquipment].solutions[symptom].forEach(solution => { | |
| const li = document.createElement('li'); | |
| li.textContent = solution; | |
| solutionList.appendChild(li); | |
| }); | |
| symptomCard.appendChild(solutionList); | |
| resultsContainer.appendChild(symptomCard); | |
| } | |
| }); | |
| // If no predefined solutions found, show generic advice | |
| if (!foundSolutions) { | |
| const genericCard = document.createElement('div'); | |
| genericCard.className = 'fade-in bg-yellow-50 p-4 rounded-lg border border-yellow-200'; | |
| const genericTitle = document.createElement('h4'); | |
| genericTitle.className = 'font-medium text-yellow-700 mb-2'; | |
| genericTitle.textContent = 'General Troubleshooting Advice:'; | |
| genericCard.appendChild(genericTitle); | |
| const adviceList = document.createElement('ul'); | |
| adviceList.className = 'list-disc pl-5 space-y-1'; | |
| const advicePoints = [ | |
| 'Check all power connections and sources', | |
| 'Verify proper calibration settings', | |
| 'Inspect for visible damage or leaks', | |
| 'Review system logs or error codes', | |
| 'Consult the equipment manual for specific troubleshooting', | |
| 'Consider environmental factors (temperature, humidity)', | |
| 'If problem persists, contact manufacturer support' | |
| ]; | |
| advicePoints.forEach(advice => { | |
| const li = document.createElement('li'); | |
| li.textContent = advice; | |
| adviceList.appendChild(li); | |
| }); | |
| genericCard.appendChild(adviceList); | |
| resultsContainer.appendChild(genericCard); | |
| // Also show the symptoms that were entered | |
| const symptomsCard = document.createElement('div'); | |
| symptomsCard.className = 'fade-in bg-gray-50 p-4 rounded-lg border border-gray-200 mt-4'; | |
| const symptomsTitle = document.createElement('h4'); | |
| symptomsTitle.className = 'font-medium text-gray-700 mb-2'; | |
| symptomsTitle.textContent = 'Your Reported Symptoms:'; | |
| symptomsCard.appendChild(symptomsTitle); | |
| const symptomsList = document.createElement('div'); | |
| symptomsList.className = 'flex flex-wrap gap-2'; | |
| symptoms.forEach(symptom => { | |
| const chip = document.createElement('div'); | |
| chip.className = 'bg-gray-200 text-gray-800 text-sm px-3 py-1 rounded-full'; | |
| chip.textContent = symptom; | |
| symptomsList.appendChild(chip); | |
| }); | |
| symptomsCard.appendChild(symptomsList); | |
| resultsContainer.appendChild(symptomsCard); | |
| } | |
| // Scroll to results | |
| document.getElementById('results-container').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Reset form | |
| function resetForm() { | |
| // Reset equipment selection | |
| document.querySelectorAll('.equipment-card').forEach(card => { | |
| card.classList.remove('border-blue-500', 'bg-blue-50'); | |
| }); | |
| document.getElementById('equipment-info').classList.add('hidden'); | |
| selectedEquipment = null; | |
| // Reset symptoms | |
| document.getElementById('symptoms').value = ''; | |
| document.getElementById('common-symptoms').innerHTML = ''; | |
| document.getElementById('analyze-btn').disabled = true; | |
| // Reset results | |
| document.getElementById('results-placeholder').classList.remove('hidden'); | |
| document.getElementById('results-container').classList.add('hidden'); | |
| } | |
| </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=apamplona2011/personal-project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |