Spaces:

Wall06
/

MenuVision-AI

Sleeping

App Files Files Community

Wall06 commited on Jan 10

Commit

42679ea

verified ·

1 Parent(s): b435483

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +138 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,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>