Spaces:
Sleeping
Sleeping
| <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> |