Spaces:
Sleeping
Sleeping
File size: 5,997 Bytes
42679ea | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MenuVision AI</title>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { background-color: #1a1a2e; color: white; font-family: sans-serif; }
.ar-window { height: 500px; width: 100%; background: #fff; border-radius: 15px; overflow: hidden; }
/* AR Button Style */
#ar-button {
background: linear-gradient(90deg, #ff4b1f, #ff9068);
color: white; border: none; padding: 10px 20px; border-radius: 30px;
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
font-weight: bold; cursor: pointer; z-index: 100;
}
</style>
</head>
<body class="p-4">
<header class="text-center mb-8">
<h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-pink-600">
MenuVision AI
</h1>
<p class="text-gray-400">Real-world 3D Food & Code Visualization</p>
</header>
<div class="max-w-md mx-auto bg-gray-800 p-4 rounded-xl mb-8 shadow-2xl border border-gray-700">
<h2 class="text-xl font-bold mb-4">🍕 3D Food on Table</h2>
<div class="mb-4">
<label class="block text-sm text-gray-400 mb-2">Upload Food Image to Analyze:</label>
<input type="file" id="foodInput" class="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-blue-600 file:text-white">
</div>
<div class="ar-window relative">
<model-viewer
id="food-viewer"
src="/static/models/default.glb"
alt="3D Food"
ar
ar-modes="webxr scene-viewer quick-look"
camera-controls
auto-rotate
shadow-intensity="1"
scale="0.5 0.5 0.5"> <button slot="ar-button" id="ar-button">
👋 Place on Real Table
</button>
</model-viewer>
</div>
<div id="food-stats" class="mt-2 text-center text-green-400 font-mono hidden">
Analyzing...
</div>
</div>
<div class="max-w-md mx-auto bg-gray-800 p-4 rounded-xl mb-8 border border-gray-700">
<h2 class="text-xl font-bold mb-4">🧠 AI Code Visualizer</h2>
<textarea id="codeInput" class="w-full p-2 bg-gray-900 rounded h-24 text-xs font-mono" placeholder="Paste python code logic here..."></textarea>
<button onclick="generateDiagram()" class="w-full bg-blue-600 mt-2 py-2 rounded hover:bg-blue-500">Generate Visual Diagram</button>
<div id="diagramResult" class="mt-4 text-center">
</div>
</div>
<div class="max-w-md mx-auto bg-gray-800 p-4 rounded-xl border border-gray-700">
<h2 class="text-xl font-bold mb-2">💬 AI Guide</h2>
<div id="chatHistory" class="h-20 overflow-y-auto mb-2 text-sm text-gray-300"></div>
<div class="flex">
<input type="text" id="chatInput" class="flex-1 p-2 bg-gray-900 rounded-l" placeholder="Ask about the food...">
<button onclick="sendChat()" class="bg-green-600 px-4 rounded-r">Send</button>
</div>
</div>
<script>
// --- 1. HANDLE FOOD UPLOAD & AR SWITCHING ---
const foodInput = document.getElementById('foodInput');
const viewer = document.getElementById('food-viewer');
const stats = document.getElementById('food-stats');
foodInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
stats.classList.remove('hidden');
stats.innerText = "🔍 AI Analyzing Food Structure...";
const formData = new FormData();
formData.append('image', file);
// Send to Backend
const response = await fetch('/analyze_food', { method: 'POST', body: formData });
const data = await response.json();
// Update UI with AI results
stats.innerText = `✅ Detected: ${data.food_detected.toUpperCase()} (Confidence: ${data.confidence})`;
// SWAP THE 3D MODEL
// This is the key: The AR model changes based on the "AI" analysis
viewer.src = data.model_url;
});
// --- 2. HANDLE CODE DIAGRAM GENERATION ---
async function generateDiagram() {
const code = document.getElementById('codeInput').value;
const res = await fetch('/generate_code_diagram', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ code: code })
});
const data = await res.json();
const imgHtml = `<img src="${data.diagram_url}" class="w-full rounded border border-blue-500" alt="Code Flow">`;
document.getElementById('diagramResult').innerHTML = imgHtml;
}
// --- 3. HANDLE CHAT ---
async function sendChat() {
const input = document.getElementById('chatInput');
const history = document.getElementById('chatHistory');
const msg = input.value;
history.innerHTML += `<div>You: ${msg}</div>`;
input.value = "";
const res = await fetch('/chat_guide', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ message: msg })
});
const data = await res.json();
history.innerHTML += `<div class="text-green-400">AI: ${data.reply}</div>`;
}
</script>
</body>
</html> |