Skip to content

Commit 9dce45f

Browse files
merfanianmerfanian
committed
Improve demo UX: remove loading delay, remove performance box, add demo info banner with GitHub links
1 parent 7c92d53 commit 9dce45f

2 files changed

Lines changed: 42 additions & 90 deletions

File tree

‎demo/src/pages/SearchPage.js‎

Lines changed: 41 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from 'react';
2-
import { Image as ImageIcon, AlertCircle, Play } from 'lucide-react';
2+
import { Image as ImageIcon, AlertCircle, Play, ExternalLink, Github } from 'lucide-react';
33
// Removed unused imports: Loader2, getFile
44
import { sampleQueries, mockApi } from '../services/mockApi';
55

@@ -105,6 +105,45 @@ const SearchPage = () => {
105105

106106
return (
107107
<div className="space-y-6">
108+
{/* Demo Information Banner */}
109+
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
110+
<div className="flex items-start">
111+
<div className="flex-shrink-0">
112+
<AlertCircle className="h-5 w-5 text-blue-600 mt-0.5" />
113+
</div>
114+
<div className="ml-3 flex-1">
115+
<h3 className="text-sm font-medium text-blue-800">
116+
This is a demo of the Needle image search system
117+
</h3>
118+
<div className="mt-2 text-sm text-blue-700">
119+
<p className="mb-3">
120+
This demo shows sample queries with pre-generated results. To install and run the actual system with your own images:
121+
</p>
122+
<div className="flex flex-col sm:flex-row gap-3">
123+
<a
124+
href="https://github.com/UIC-IndexLab/Needle"
125+
target="_blank"
126+
rel="noopener noreferrer"
127+
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
128+
>
129+
<Github className="h-4 w-4 mr-2" />
130+
Star us on GitHub
131+
</a>
132+
<a
133+
href="https://github.com/UIC-IndexLab/Needle#installation"
134+
target="_blank"
135+
rel="noopener noreferrer"
136+
className="inline-flex items-center px-4 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
137+
>
138+
<ExternalLink className="h-4 w-4 mr-2" />
139+
Installation Guide
140+
</a>
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
108147
{/* Header */}
109148
<div>
110149
<h1 className="text-3xl font-bold text-gray-900">Image Search</h1>
@@ -157,97 +196,10 @@ const SearchPage = () => {
157196
{/* Search Results */}
158197
{results.results && results.results.length > 0 && (
159198
<div className="card">
160-
<div className="flex items-center justify-between mb-4">
199+
<div className="mb-4">
161200
<h2 className="text-xl font-semibold text-gray-900">Search Results</h2>
162-
{results.timings && (
163-
<div className="text-right">
164-
<div className="text-sm font-medium text-gray-900">
165-
{results.timings.frontend_total_time ?
166-
`${(results.timings.frontend_total_time * 1000).toFixed(0)}ms` :
167-
results.timings.total_request_time ?
168-
`${(results.timings.total_request_time * 1000).toFixed(0)}ms` :
169-
'Timing unavailable'
170-
}
171-
</div>
172-
<div className="text-xs text-gray-500">
173-
{results.timings.frontend_total_time ? 'Total time (frontend)' : 'Backend time'}
174-
</div>
175-
</div>
176-
)}
177201
</div>
178202

179-
{/* Detailed Timing Information */}
180-
{results.timings && (
181-
<div className="mb-6 p-4 bg-gray-50 rounded-lg">
182-
<h3 className="text-sm font-medium text-gray-900 mb-3">Performance Details</h3>
183-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
184-
{results.timings.total_request_time && (
185-
<div className="flex justify-between">
186-
<span className="text-gray-600">Total Request:</span>
187-
<span className="font-medium text-gray-900">
188-
{(results.timings.total_request_time * 1000).toFixed(0)}ms
189-
</span>
190-
</div>
191-
)}
192-
{results.timings.image_generation && (
193-
<div className="flex justify-between">
194-
<span className="text-gray-600">Image Generation:</span>
195-
<span className="font-medium text-gray-900">
196-
{(results.timings.image_generation * 1000).toFixed(0)}ms
197-
</span>
198-
</div>
199-
)}
200-
{results.timings.embedding_regnet && results.timings.embedding_regnet.length > 0 && (
201-
<div className="flex justify-between">
202-
<span className="text-gray-600">Embedding (RegNet):</span>
203-
<span className="font-medium text-gray-900">
204-
{(results.timings.embedding_regnet[0] * 1000).toFixed(0)}ms
205-
</span>
206-
</div>
207-
)}
208-
{results.timings.embedding_eva && results.timings.embedding_eva.length > 0 && (
209-
<div className="flex justify-between">
210-
<span className="text-gray-600">Embedding (EVA):</span>
211-
<span className="font-medium text-gray-900">
212-
{(results.timings.embedding_eva[0] * 1000).toFixed(0)}ms
213-
</span>
214-
</div>
215-
)}
216-
{results.timings.retrieval_regnet && results.timings.retrieval_regnet.length > 0 && (
217-
<div className="flex justify-between">
218-
<span className="text-gray-600">Retrieval (RegNet):</span>
219-
<span className="font-medium text-gray-900">
220-
{(results.timings.retrieval_regnet[0] * 1000).toFixed(0)}ms
221-
</span>
222-
</div>
223-
)}
224-
{results.timings.retrieval_eva && results.timings.retrieval_eva.length > 0 && (
225-
<div className="flex justify-between">
226-
<span className="text-gray-600">Retrieval (EVA):</span>
227-
<span className="font-medium text-gray-900">
228-
{(results.timings.retrieval_eva[0] * 1000).toFixed(0)}ms
229-
</span>
230-
</div>
231-
)}
232-
{results.timings.ranking_aggregation && (
233-
<div className="flex justify-between">
234-
<span className="text-gray-600">Ranking & Aggregation:</span>
235-
<span className="font-medium text-gray-900">
236-
{(results.timings.ranking_aggregation * 1000).toFixed(2)}ms
237-
</span>
238-
</div>
239-
)}
240-
{results.timings.frontend_total_time && (
241-
<div className="flex justify-between">
242-
<span className="text-gray-600">Frontend Total:</span>
243-
<span className="font-medium text-gray-900">
244-
{(results.timings.frontend_total_time * 1000).toFixed(0)}ms
245-
</span>
246-
</div>
247-
)}
248-
</div>
249-
</div>
250-
)}
251203

252204
{/* Generated Images */}
253205
{results.baseImages && results.baseImages.length > 0 && (

‎demo/src/services/mockApi.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ export const mockApi = {
278278

279279
// Search - returns mock data based on query
280280
search: async (queryId, config) => {
281-
await simulateDelay(1000, 2000); // Simulate search delay
281+
// Removed delay for instant demo experience
282282

283283
// Find matching sample query
284284
const sampleQuery = sampleQueries.find(q => q.id === queryId) || sampleQueries[0];

0 commit comments

Comments
 (0)