Silicon Valley Hot Dog Detection App - AI Conversation

sam 2024-11-26

Make me a mobile friendly functioning (to a degree) mock implementation of the very funny “it’s a hot dog it’s not a hot dog” app that was presented in the silicon valley show.

claude-3.5-sonnet Web Artifact Creator 2024-11-26

I’ll create a fun, original implementation of a food classification app that determines if something is a hot dog or not, inspired by but distinct from the show’s concept. This will be a simple demo where users can click buttons to “analyze” random food items.

View Source

HTML


<div class="app-container">
  <div class="header">
    <h1>Food Classifier Pro</h1>
    <p class="subtitle">The Ultimate Food Recognition System</p>
  </div>
  
  <div class="main-content">
    <div class="image-container">
      <div id="foodImage" class="food-image">
        <div class="camera-icon">📸</div>
      </div>
    </div>
    
    <button id="analyzeBtn" class="analyze-button">Analyze Food!</button>
    
    <div id="result" class="result-box">
      <div class="result-text">Click analyze to check a food item</div>
    </div>
  </div>
</div>

CSS


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f0f0f0;
  color: #333;
}

.app-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

h1 {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 8px;
}

.subtitle {
  color: #7f8c8d;
  font-size: 16px;
}

.main-content {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.image-container {
  margin-bottom: 20px;
}

.food-image {
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.camera-icon {
  font-size: 40px;
  color: #adb5bd;
}

.analyze-button {
  width: 100%;
  padding: 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.analyze-button:hover {
  background: #2980b9;
}

.result-box {
  margin-top: 20px;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  font-size: 18px;
  transition: all 0.3s ease;
}

.result-text {
  font-weight: 500;
}

.success {
  background: #d4edda;
  color: #155724;
}

.error {
  background: #f8d7da;
  color: #721c24;
}

@media (max-width: 480px) {
  .app-container {
    padding: 10px;
  }
  
  h1 {
    font-size: 20px;
  }
  
  .subtitle {
    font-size: 14px;
  }
  
  .food-image {
    height: 150px;
  }
}

JavaScript


const foods = [
  { name: 'Hot Dog', isHotDog: true },
  { name: 'Hamburger', isHotDog: false },
  { name: 'Pizza', isHotDog: false },
  { name: 'Corn Dog', isHotDog: false },
  { name: 'Sandwich', isHotDog: false },
  { name: 'Hot Dog with Mustard', isHotDog: true },
  { name: 'Taco', isHotDog: false },
  { name: 'Bratwurst', isHotDog: false },
  { name: 'Classic Hot Dog', isHotDog: true },
  { name: 'Sushi Roll', isHotDog: false }
];

const analyzeBtn = document.getElementById('analyzeBtn');
const resultDiv = document.getElementById('result');
const foodImage = document.getElementById('foodImage');

function analyzeFood() {
  // Disable button during "analysis"
  analyzeBtn.disabled = true;
  analyzeBtn.textContent = 'Analyzing...';
  
  // Show loading animation
  foodImage.innerHTML = '🔄';
  foodImage.style.animation = 'spin 1s linear infinite';
  
  // Simulate processing time
  setTimeout(() => {
    // Pick a random food
    const randomFood = foods[Math.floor(Math.random() * foods.length)];
    
    // Update UI with result
    foodImage.innerHTML = randomFood.isHotDog ? '🌭' : '❌';
    foodImage.style.animation = '';
    
    const resultText = randomFood.isHotDog 
      ? `✅ HOT DOG DETECTED! This is definitely a ${randomFood.name}!`
      : `❌ NOT HOT DOG! This appears to be a ${randomFood.name}.`;
      
    resultDiv.innerHTML = `<div class="result-text">${resultText}</div>`;
    resultDiv.className = `result-box ${randomFood.isHotDog ? 'success' : 'error'}`;
    
    // Re-enable button
    analyzeBtn.disabled = false;
    analyzeBtn.textContent = 'Analyze Food!';
  }, 1500);
}

analyzeBtn.addEventListener('click', analyzeFood);

// Add spinning animation
const style = document.createElement('style');
style.textContent = `
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
`;
document.head.appendChild(style);

Preview

Show Artifact in new tab