Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OmniAgent Visual Search Tester</title> | |
| <style> | |
| body { font-family: 'Segoe UI', sans-serif; background-color: #f4f7f9; color: #333; margin: 0; padding: 40px; display: flex; justify-content: center; } | |
| .container { width: 100%; max-width: 900px; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } | |
| h1 { color: #2c3e50; text-align: center; margin-bottom: 10px; } | |
| .subtitle { text-align: center; color: #7f8c8d; margin-bottom: 30px; } | |
| .input-group { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; } | |
| .input-group label { font-weight: bold; font-size: 0.9em; color: #555; } | |
| .input-group input, .input-group button { padding: 12px; border-radius: 6px; border: 1px solid #ccc; font-size: 16px; } | |
| .input-group button { background-color: #3498db; color: white; border: none; cursor: pointer; font-weight: bold; } | |
| .input-group button:disabled { background-color: #bdc3c7; cursor: not-allowed; } | |
| #auth-status { text-align: center; padding: 15px; background: #f8f9fa; border-radius: 6px; border-left: 5px solid #bdc3c7; } | |
| #search-results-container { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } | |
| .result-card { background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; } | |
| .result-card img { width: 100%; height: 200px; object-fit: cover; } | |
| .card-content { padding: 10px; text-align: center; } | |
| .similarity-badge { background: #27ae60; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; } | |
| .loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; display: none; } | |
| @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>OmniAgent Visual Search</h1> | |
| <p class="subtitle">Universal Tester (Local & Production)</p> | |
| <div id="auth-status"> | |
| <p style="margin:0"><strong>Status:</strong> Waiting for inputs...</p> | |
| </div> | |
| <div class="input-group"> | |
| <!-- 🔥 NEW: Dynamic URL Input --> | |
| <label for="api-url-input">1. Backend URL (Local or Production)</label> | |
| <input type="text" id="api-url-input" value="http://127.0.0.1:8000"> | |
| <label for="api-key-input">2. API Key</label> | |
| <input type="text" id="api-key-input" placeholder="omni_..."> | |
| <label for="image-upload-input">3. Upload Image</label> | |
| <input type="file" id="image-upload-input" accept="image/*"> | |
| <button id="search-button" disabled>🔍 Search Products</button> | |
| </div> | |
| <div id="loader" class="loader"></div> | |
| <div id="search-results-container"></div> | |
| </div> | |
| <script src="visual_search_test.js"></script> | |
| <script> | |
| // Init with value from input box | |
| const urlInput = document.getElementById('api-url-input'); | |
| // Initial Init | |
| VisualSearchTester.init(urlInput.value + "/api/v1/visual/search"); | |
| // Update init when URL changes | |
| urlInput.addEventListener('input', function() { | |
| // Remove trailing slash if user adds it | |
| let cleanUrl = this.value.replace(/\/$/, ""); | |
| VisualSearchTester.init(cleanUrl + "/api/v1/visual/search"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |