Spaces:
Sleeping
Sleeping
File size: 3,794 Bytes
ba2fc46 3f23aac ba2fc46 3f23aac ba2fc46 3f23aac ba2fc46 3f23aac ba2fc46 3f23aac ba2fc46 3f23aac ba2fc46 3f23aac ba2fc46 3f23aac ba2fc46 3f23aac ba2fc46 3f23aac ba2fc46 3f23aac ba2fc46 3f23aac ba2fc46 3f23aac ba2fc46 |
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 |
<!DOCTYPE html>
<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> |