Spaces:

Wall06
/

MenuVision-AI

Sleeping

App Files Files Community

Wall06 commited on 27 days ago

Commit

09fb2f0

verified ·

1 Parent(s): c84b018

Delete templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +0 -138

templates/index.html DELETED Viewed

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