Skip to content

Commit 49c3337

Browse files
codinglabsongcodinglabsong
committed
updated ui for more beautiful design
1 parent f51210f commit 49c3337

File tree

3 files changed

+63
-61
lines changed

3 files changed

+63
-61
lines changed

‎src/app/page.tsx‎

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -235,72 +235,74 @@ export default function Home() {
235235
};
236236

237237
return (
238-
<main className="min-h-screen bg-gradient-to-br from-gray-700 via-gray-950 to-black">
239-
<div className="max-w-7xl mx-auto flex flex-col gap-6 p-6 min-h-screen">
240-
{/* Header */}
241-
<div className="bg-white/5 backdrop-blur-xl rounded-2xl p-6 shadow-2xl border border-white/10">
242-
<div className="flex items-center justify-between">
243-
<div>
244-
<h1 className="p-1 text-3xl font-bold bg-gradient-to-r from-white to-gray-600 bg-clip-text text-transparent">
245-
AI Image Editor
246-
</h1>
247-
<p className="text-gray-400 mt-1">
248-
Transform your images with AI-powered editing
249-
</p>
238+
<div className="fixed inset-0 bg-gradient-to-br from-gray-100 via-gray-950 to-black">
239+
<div className="h-full overflow-y-auto">
240+
<div className="max-w-7xl mx-auto flex flex-col gap-6 p-6 min-h-full">
241+
{/* Header */}
242+
<div className="bg-white/5 backdrop-blur-xl rounded-2xl p-6 shadow-2xl border border-white/20">
243+
<div className="flex items-center justify-between">
244+
<div>
245+
<h1 className="p-1 text-3xl font-bold bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
246+
AI Image Editor
247+
</h1>
248+
<p className="text-gray-100 mt-1">
249+
Transform your images with AI-powered editing
250+
</p>
251+
</div>
250252
</div>
251253
</div>
252-
</div>
253254

254-
{/* Image Gallery */}
255-
<div className="bg-white/5 backdrop-blur-xl rounded-2xl p-6 shadow-2xl border border-white/10">
256-
<div className="flex items-center justify-between mb-4">
257-
<h2 className="text-xl font-semibold text-gray-200">
258-
Your Gallery
259-
</h2>
260-
{selectedImages.size === 0 ? (
261-
<p className="text-sm text-gray-400">
262-
Click to select images for editing
263-
</p>
264-
) : (
265-
<div className="bg-blue-600/20 backdrop-blur-xl rounded-xl px-3 border border-blue-500/30">
266-
<span className="text-blue-300 text-sm font-medium">
267-
{selectedImages.size} image
268-
{selectedImages.size !== 1 ? "s" : ""} selected
269-
</span>
270-
</div>
271-
)}
272-
</div>
255+
{/* Image Gallery */}
256+
<div className="bg-white/5 backdrop-blur-xl rounded-2xl p-6 shadow-2xl border border-white/20">
257+
<div className="flex items-center justify-between mb-4">
258+
<h2 className="text-xl font-semibold text-gray-200">
259+
Your Gallery
260+
</h2>
261+
{selectedImages.size === 0 ? (
262+
<p className="text-sm text-gray-400">
263+
Click to select images for editing
264+
</p>
265+
) : (
266+
<div className="bg-blue-600/20 backdrop-blur-xl rounded-xl px-3 border border-blue-500/30">
267+
<span className="text-blue-300 text-sm font-medium">
268+
{selectedImages.size} image
269+
{selectedImages.size !== 1 ? "s" : ""} selected
270+
</span>
271+
</div>
272+
)}
273+
</div>
273274

274-
<div
275-
className="w-full overflow-x-auto minimal-scrollbar"
276-
id="image-scroll-container"
277-
>
278-
<div className="flex gap-6 px-2 py-4">
279-
{images.map((image) => (
280-
<ImageCard
281-
key={image.id}
282-
image={image}
283-
isSelected={selectedImages.has(image.id)}
284-
fallbackImageUrl={null}
285-
onSelect={handleImageSelection}
286-
/>
287-
))}
288-
{/* add some space at the end to not interfere with ImageCard hover animation */}
289-
<div>-</div>
275+
<div
276+
className="w-full overflow-x-auto minimal-scrollbar"
277+
id="image-scroll-container"
278+
>
279+
<div className="flex gap-6 px-2 py-4">
280+
{images.map((image) => (
281+
<ImageCard
282+
key={image.id}
283+
image={image}
284+
isSelected={selectedImages.has(image.id)}
285+
fallbackImageUrl={null}
286+
onSelect={handleImageSelection}
287+
/>
288+
))}
289+
{/* add some space at the end to not interfere with ImageCard hover animation */}
290+
<div>-</div>
291+
</div>
290292
</div>
291293
</div>
292-
</div>
293294

294-
{/* Chat Interface */}
295-
<div className="h-[600px] bg-gray-700/30 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/10 overflow-hidden">
296-
<ChatInterface
297-
messages={messages}
298-
onSendMessage={handleChatMessage}
299-
onImageUpload={handleChatImageUpload}
300-
isLoading={isLoading}
301-
/>
295+
{/* Chat Interface */}
296+
<div className="h-[600px] bg-gray-700/30 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/10 overflow-hidden">
297+
<ChatInterface
298+
messages={messages}
299+
onSendMessage={handleChatMessage}
300+
onImageUpload={handleChatImageUpload}
301+
isLoading={isLoading}
302+
/>
303+
</div>
302304
</div>
303305
</div>
304-
</main>
306+
</div>
305307
);
306308
}

‎src/ui/image-card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default function ImageCard({
5454
{/* Image Preview */}
5555
<div className="relative mt-8">
5656
<ImagePreview imageUrl={image.url ?? fallbackImageUrl ?? null} />
57-
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-xl" />
57+
<div className="absolute inset-0 bg-gradient-to-t from-gray-300/30 to-gray-400/30 rounded-xl" />
5858
</div>
5959

6060
{/* Image Info */}

‎src/ui/image-preview.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function ImagePreview({ imageUrl }: ImagePreviewProps) {
2323
};
2424

2525
return (
26-
<div className="flex justify-center items-center w-full aspect-square border rounded-lg bg-gray-300 shadow-sm">
26+
<div className="flex justify-center items-center w-full aspect-square border rounded-xl bg-gray-300 shadow-sm">
2727
{imageUrl && imageUrl.trim() !== "" && !imageError ? (
2828
<img
2929
src={imageUrl}
@@ -39,7 +39,7 @@ export default function ImagePreview({ imageUrl }: ImagePreviewProps) {
3939
<span className="text-gray-500 text-xs">URL: {imageUrl}</span>
4040
</div>
4141
) : (
42-
<span className="text-gray-400">Your image will appear here</span>
42+
<span className="text-gray-500">Your image will appear here</span>
4343
)}
4444
</div>
4545
);

0 commit comments

Comments
 (0)