initialized web page (React + Tailwind CSS)

2025-12-07 16:46:44 +08:00
parent 3092f95652
commit f6db3c2ccd
50 changed files with 6879 additions and 0 deletions
--- a/webpage/src/App.tsx
+++ b/webpage/src/App.tsx
@@ -0,0 +1,268 @@
+import { useState, useEffect } from 'react';
+import Navbar from './components/Navbar';
+import Sidebar from './components/Sidebar';
+import SearchBar from './components/SearchBar';
+import ImageGrid from './components/ImageGrid';
+import ImageModal from './components/ImageModal';
+import UploadModal from './components/UploadModal';
+import Pagination from './components/Pagination';
+import { api, ALIASES_PER_PAGE } from './api-mock';
+import type { Image } from './types';
+
+function App() {
+  const [images, setImages] = useState<Image[]>([]);
+  const [allAliases, setAllAliases] = useState<string[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedImage, setSelectedImage] = useState<Image | null>(null);
+  const [showUploadModal, setShowUploadModal] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadData();
+  }, [searchQuery]);
+
+  useEffect(() => {
+    // Reset to page 1 when search query changes
+    setCurrentPage(1);
+  }, [searchQuery]);
+
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const [imagesData, aliasesData] = await Promise.all([
+        api.getImages({
+          search: searchQuery || undefined,
+        }),
+        api.getAllAliases(),
+      ]);
+      
+      setImages(imagesData);
+      setAllAliases(aliasesData);
+    } catch (error) {
+      console.error('Failed to load data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUpload = async (file: File, aliases: string[]) => {
+    await api.uploadImage(file, aliases);
+    await loadData();
+  };
+
+  const handleSaveImage = async (imageId: string, aliases: string[]) => {
+    await api.updateImageAliases(imageId, aliases);
+    await loadData();
+  };
+
+  const handleDeleteImage = async (imageId: string) => {
+    await api.deleteImage(imageId);
+    await loadData();
+  };
+
+  // Filter aliases based on search
+  const filteredAliases = searchQuery
+    ? allAliases.filter(alias =>
+        alias.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : allAliases;
+
+  // Pagination calculations
+  const totalPages = Math.max(1, Math.ceil(filteredAliases.length / ALIASES_PER_PAGE));
+  const startIndex = (currentPage - 1) * ALIASES_PER_PAGE;
+  const endIndex = startIndex + ALIASES_PER_PAGE;
+  const currentPageAliases = filteredAliases.slice(startIndex, endIndex);
+
+  // Filter images to only show those with current page aliases
+  const currentPageImages = images.filter(img =>
+    img.aliases.some(alias => currentPageAliases.includes(alias)) ||
+    (img.aliases.length === 0 && currentPageAliases.length > 0)
+  );
+
+  const handlePageChange = (newPage: number) => {
+    if (newPage >= 1 && newPage <= totalPages) {
+      setCurrentPage(newPage);
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <div className="h-screen flex flex-col">
+      <Navbar onUploadClick={() => setShowUploadModal(true)} />
+      <div className="flex-1 flex overflow-hidden">
+        <Sidebar
+          aliases={currentPageAliases}
+          currentPage={currentPage}
+          totalPages={totalPages}
+        />
+        <main className="flex-1 overflow-y-auto">
+          <SearchBar value={searchQuery} onChange={setSearchQuery} />
+          
+          {/* Top Pagination */}
+          {!loading && totalPages > 1 && (
+            <div className="border-b border-gray-200">
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={handlePageChange}
+              />
+            </div>
+          )}
+
+          {loading ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="text-gray-500">Loading...</div>
+            </div>
+          ) : (
+            <ImageGrid
+              images={currentPageImages}
+              aliases={currentPageAliases}
+              onImageClick={setSelectedImage}
+            />
+          )}
+
+          {/* Bottom Pagination */}
+          {!loading && totalPages > 1 && (
+            <div className="border-t border-gray-200">
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={handlePageChange}
+              />
+            </div>
+          )}
+        </main>
+      </div>
+
+      {selectedImage && (
+        <ImageModal
+          image={selectedImage}
+          onClose={() => setSelectedImage(null)}
+          onSave={handleSaveImage}
+          onDelete={handleDeleteImage}
+        />
+      )}
+
+      {showUploadModal && (
+        <UploadModal
+          onClose={() => setShowUploadModal(false)}
+          onUpload={handleUpload}
+        />
+      )}
+    </div>
+  );
+}
+
+export default App;
+
+// import { useState, useEffect } from 'react';
+// import Navbar from './components/Navbar';
+// import Sidebar from './components/Sidebar';
+// import SearchBar from './components/SearchBar';
+// import ImageGrid from './components/ImageGrid';
+// import ImageModal from './components/ImageModal';
+// import UploadModal from './components/UploadModal';
+// import { api } from './api-mock';
+// import type { Image } from './types';
+
+// function App() {
+//   const [images, setImages] = useState<Image[]>([]);
+//   const [allAliases, setAllAliases] = useState<string[]>([]);
+//   const [searchQuery, setSearchQuery] = useState('');
+//   const [selectedAlias, setSelectedAlias] = useState<string | null>(null);
+//   const [selectedImage, setSelectedImage] = useState<Image | null>(null);
+//   const [showUploadModal, setShowUploadModal] = useState(false);
+//   const [loading, setLoading] = useState(true);
+
+//   useEffect(() => {
+//     loadData();
+//   }, [searchQuery, selectedAlias]);
+
+//   const loadData = async () => {
+//     setLoading(true);
+//     try {
+//       const [imagesData, aliasesData] = await Promise.all([
+//         api.getImages({
+//           search: searchQuery || undefined,
+//           null_alias: selectedAlias === null ? true : undefined,
+//         }),
+//         api.getAllAliases(),
+//       ]);
+      
+//       let filteredImages = imagesData;
+//       if (selectedAlias) {
+//         filteredImages = imagesData.filter((img) =>
+//           img.aliases.includes(selectedAlias)
+//         );
+//       } else if (selectedAlias === null) {
+//         filteredImages = imagesData.filter((img) => img.aliases.length === 0);
+//       }
+      
+//       setImages(filteredImages);
+//       setAllAliases(aliasesData);
+//     } catch (error) {
+//       console.error('Failed to load data:', error);
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   const handleUpload = async (file: File, aliases: string[]) => {
+//     await api.uploadImage(file, aliases);
+//     await loadData();
+//   };
+
+//   const handleSaveImage = async (imageId: string, aliases: string[]) => {
+//     await api.updateImageAliases(imageId, aliases);
+//     await loadData();
+//   };
+
+//   const handleDeleteImage = async (imageId: string) => {
+//     await api.deleteImage(imageId);
+//     await loadData();
+//   };
+
+//   return (
+//     <div className="h-screen flex flex-col">
+//       <Navbar
+//         onUploadClick={() => setShowUploadModal(true)}
+//       />
+//       <div className="flex-1 flex overflow-hidden">
+//         <Sidebar
+//           aliases={allAliases}
+//           selectedAlias={selectedAlias}
+//           onAliasClick={setSelectedAlias}
+//         />
+//         <main className="flex-1 overflow-y-auto">
+//           <SearchBar value={searchQuery} onChange={setSearchQuery} />
+//           {loading ? (
+//             <div className="flex items-center justify-center h-64">
+//               <div className="text-gray-500">Loading...</div>
+//             </div>
+//           ) : (
+//             <ImageGrid images={images} onImageClick={setSelectedImage} />
+//           )}
+//         </main>
+//       </div>
+
+//       {selectedImage && (
+//         <ImageModal
+//           image={selectedImage}
+//           onClose={() => setSelectedImage(null)}
+//           onSave={handleSaveImage}
+//           onDelete={handleDeleteImage}
+//         />
+//       )}
+
+//       {showUploadModal && (
+//         <UploadModal
+//           onClose={() => setShowUploadModal(false)}
+//           onUpload={handleUpload}
+//         />
+//       )}
+//     </div>
+//   );
+// }
+
+// export default App;
--- a/webpage/src/api-mock.ts
+++ b/webpage/src/api-mock.ts
@@ -0,0 +1,141 @@
+import type { Image } from './types';
+import fakeDb from './assets/tests/fakedb.json';
+
+export const ALIASES_PER_PAGE = 5;
+
+class MockApiService {
+  private images: Image[] = [];
+  private nextId: number = 18;
+
+  constructor() {
+    // Load initial data from fakedb.json
+    this.images = JSON.parse(JSON.stringify(fakeDb.images));
+  }
+
+  // Helper to simulate network delay
+  private delay(ms: number = 300): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  // Images
+  async getImages(params?: {
+    search?: string;
+    null_alias?: boolean;
+    limit?: number;
+    page?: number;
+  }): Promise<Image[]> {
+    await this.delay();
+    
+    let filtered = [...this.images];
+
+    // Filter by search query (search in aliases)
+    if (params?.search) {
+      const searchLower = params.search.toLowerCase();
+      filtered = filtered.filter(img =>
+        img.aliases.some(alias => alias.toLowerCase().includes(searchLower))
+      );
+    }
+
+    // Filter images without aliases
+    if (params?.null_alias) {
+      filtered = filtered.filter(img => img.aliases.length === 0);
+    }
+
+    // Pagination
+    const page = params?.page || 1;
+    const limit = params?.limit || 20;
+    const start = (page - 1) * limit;
+    const end = start + limit;
+
+    return filtered.slice(start, end);
+  }
+
+  async getImage(id: string): Promise<Image> {
+    await this.delay();
+    
+    const image = this.images.find(img => img.id === id);
+    if (!image) {
+      throw new Error('Image not found');
+    }
+    return { ...image };
+  }
+
+  async uploadImage(file: File, aliases: string[]): Promise<Image> {
+    await this.delay(500);
+    
+    // Create a new image object
+    const newImage: Image = {
+      id: String(this.nextId++),
+      uploaded_user_id: 'konchin.shih',
+      uploaded_at: new Date().toISOString(),
+      aliases: aliases,
+      url: `/api/images/${this.nextId - 1}/file`,
+    };
+
+    this.images.push(newImage);
+    return { ...newImage };
+  }
+
+  async deleteImage(id: string): Promise<void> {
+    await this.delay();
+    
+    const index = this.images.findIndex(img => img.id === id);
+    if (index === -1) {
+      throw new Error('Image not found');
+    }
+    this.images.splice(index, 1);
+  }
+
+  // Aliases
+  async getAllAliases(): Promise<string[]> {
+    await this.delay();
+    
+    // Get unique aliases from all images
+    const aliasSet = new Set<string>();
+    this.images.forEach(img => {
+      img.aliases.forEach(alias => aliasSet.add(alias));
+    });
+    return Array.from(aliasSet).sort();
+  }
+
+  async updateImageAliases(id: string, aliases: string[]): Promise<Image> {
+    await this.delay();
+    
+    const image = this.images.find(img => img.id === id);
+    if (!image) {
+      throw new Error('Image not found');
+    }
+    image.aliases = [...aliases];
+    return { ...image };
+  }
+
+  async addImageAlias(id: string, alias: string): Promise<Image> {
+    await this.delay();
+    
+    const image = this.images.find(img => img.id === id);
+    if (!image) {
+      throw new Error('Image not found');
+    }
+    if (!image.aliases.includes(alias)) {
+      image.aliases.push(alias);
+    }
+    return { ...image };
+  }
+
+  async removeImageAlias(id: string, alias: string): Promise<void> {
+    await this.delay();
+    
+    const image = this.images.find(img => img.id === id);
+    if (!image) {
+      throw new Error('Image not found');
+    }
+    image.aliases = image.aliases.filter(a => a !== alias);
+  }
+
+  getImageUrl(id: string): string {
+    // For mock, return a placeholder image URL
+    return `https://picsum.photos/seed/${id}/400/400`;
+  }
+}
+
+export const api = new MockApiService();
--- a/webpage/src/api.ts
+++ b/webpage/src/api.ts
@@ -0,0 +1,103 @@
+import type { Image } from './types';
+
+const API_BASE_URL = 'http://localhost:8080';
+
+// Pagination configuration
+export const ALIASES_PER_PAGE = 5; // Number of aliases to show per page
+
+class ApiService {
+  // Images
+  async getImages(params?: {
+    search?: string;
+    null_alias?: boolean;
+    limit?: number;
+    page?: number;
+  }): Promise<Image[]> {
+    const queryParams = new URLSearchParams();
+    if (params?.search) queryParams.append('search', params.search);
+    if (params?.null_alias) queryParams.append('null_alias', 'true');
+    if (params?.limit) queryParams.append('limit', params.limit.toString());
+    if (params?.page) queryParams.append('page', params.page.toString());
+
+    const response = await fetch(
+      `${API_BASE_URL}/api/images?${queryParams}`
+    );
+    if (!response.ok) throw new Error('Failed to fetch images');
+    const data = await response.json();
+    return data.images || [];
+  }
+
+  async getImage(id: string): Promise<Image> {
+    const response = await fetch(`${API_BASE_URL}/api/images/${id}`);
+    if (!response.ok) throw new Error('Failed to fetch image');
+    return response.json();
+  }
+
+  async uploadImage(file: File, aliases: string[]): Promise<Image> {
+    const formData = new FormData();
+    formData.append('imgfile', file);
+    aliases.forEach((alias) => formData.append('aliases', alias));
+
+    const response = await fetch(`${API_BASE_URL}/api/images`, {
+      method: 'POST',
+      body: formData,
+    });
+    if (!response.ok) throw new Error('Failed to upload image');
+    return response.json();
+  }
+
+  async deleteImage(id: string): Promise<void> {
+    const response = await fetch(`${API_BASE_URL}/api/images/${id}`, {
+      method: 'DELETE',
+    });
+    if (!response.ok) throw new Error('Failed to delete image');
+  }
+
+  // Aliases
+  async getAllAliases(): Promise<string[]> {
+    const response = await fetch(`${API_BASE_URL}/api/aliases`);
+    if (!response.ok) throw new Error('Failed to fetch aliases');
+    const data = await response.json();
+    return data.aliases || [];
+  }
+
+  async updateImageAliases(id: string, aliases: string[]): Promise<Image> {
+    const response = await fetch(`${API_BASE_URL}/api/images/${id}/aliases`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ aliases }),
+    });
+    if (!response.ok) throw new Error('Failed to update aliases');
+    return response.json();
+  }
+
+  async addImageAlias(id: string, alias: string): Promise<Image> {
+    const response = await fetch(`${API_BASE_URL}/api/images/${id}/aliases`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ alias }),
+    });
+    if (!response.ok) throw new Error('Failed to add alias');
+    return response.json();
+  }
+
+  async removeImageAlias(id: string, alias: string): Promise<void> {
+    const response = await fetch(
+      `${API_BASE_URL}/api/images/${id}/aliases?alias=${encodeURIComponent(alias)}`,
+      {
+        method: 'DELETE',
+      }
+    );
+    if (!response.ok) throw new Error('Failed to remove alias');
+  }
+
+  getImageUrl(id: string): string {
+    return `${API_BASE_URL}/api/images/${id}/file`;
+  }
+}
+
+export const api = new ApiService();
--- a/webpage/src/assets/react.svg
+++ b/webpage/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/webpage/src/assets/tests/daisuke.gif
+++ b/webpage/src/assets/tests/daisuke.gif
--- a/webpage/src/assets/tests/fakedb.json
+++ b/webpage/src/assets/tests/fakedb.json
@@ -0,0 +1,137 @@
+{
+  "images": [
+    {
+      "id": "1",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-20T12:00:00Z",
+      "aliases": ["daisuke"],
+      "url": "/api/images/1/file"
+    },
+    {
+      "id": "2",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-20T12:05:00Z",
+      "aliases": ["huh"],
+      "url": "/api/images/2/file"
+    },
+    {
+      "id": "3",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-21T09:00:00Z",
+      "aliases": ["killme"],
+      "url": "/api/images/3/file"
+    },
+    {
+      "id": "4",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-21T09:30:00Z",
+      "aliases": ["nofriend"],
+      "url": "/api/images/4/file"
+    },
+    {
+      "id": "5",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-21T10:00:00Z",
+      "aliases": ["orz"],
+      "url": "/api/images/5/file"
+    },
+    {
+      "id": "6",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-22T11:20:00Z",
+      "aliases": ["ramen"],
+      "url": "/api/images/6/file"
+    },
+    {
+      "id": "7",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-22T14:00:00Z",
+      "aliases": ["rrrr"],
+      "url": "/api/images/7/file"
+    },
+    {
+      "id": "8",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-23T08:00:00Z",
+      "aliases": ["sleep"],
+      "url": "/api/images/8/file"
+    },
+    {
+      "id": "9",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-23T08:05:00Z",
+      "aliases": ["sleep"],
+      "url": "/api/images/9/file"
+    },
+    {
+      "id": "10",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-24T15:00:00Z",
+      "aliases": ["你要出多少"],
+      "url": "/api/images/10/file"
+    },
+    {
+      "id": "11",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-24T16:00:00Z",
+      "aliases": ["好ㄘ"],
+      "url": "/api/images/11/file"
+    },
+    {
+      "id": "12",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-25T10:00:00Z",
+      "aliases": ["宅斃了"],
+      "url": "/api/images/12/file"
+    },
+    {
+      "id": "13",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-25T10:10:00Z",
+      "aliases": ["宅斃了"],
+      "url": "/api/images/13/file"
+    },
+    {
+      "id": "14",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-25T10:20:00Z",
+      "aliases": ["宅斃了"],
+      "url": "/api/images/14/file"
+    },
+    {
+      "id": "15",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-26T12:00:00Z",
+      "aliases": ["幹波大的"],
+      "url": "/api/images/15/file"
+    },
+    {
+      "id": "16",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-26T13:00:00Z",
+      "aliases": ["我什麼都沒有"],
+      "url": "/api/images/16/file"
+    },
+    {
+      "id": "17",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-27T09:00:00Z",
+      "aliases": ["欸嘿"],
+      "url": "/api/images/17/file"
+    },
+    {
+      "id": "18",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-25T10:20:00Z",
+      "aliases": ["宅斃了"],
+      "url": "/api/images/18/file"
+    },
+    {
+      "id": "19",
+      "uploaded_user_id": "konchin.shih",
+      "uploaded_at": "2023-10-25T10:20:00Z",
+      "aliases": ["宅斃了"],
+      "url": "/api/images/19/file"
+    }
+  ]
+}
--- a/webpage/src/assets/tests/huh.png
+++ b/webpage/src/assets/tests/huh.png
--- a/webpage/src/assets/tests/killme.gif
+++ b/webpage/src/assets/tests/killme.gif
--- a/webpage/src/assets/tests/nofriend.png
+++ b/webpage/src/assets/tests/nofriend.png
--- a/webpage/src/assets/tests/orz.gif
+++ b/webpage/src/assets/tests/orz.gif
--- a/webpage/src/assets/tests/ramen.jpg
+++ b/webpage/src/assets/tests/ramen.jpg
--- a/webpage/src/assets/tests/rrrr.jpg
+++ b/webpage/src/assets/tests/rrrr.jpg
--- a/webpage/src/assets/tests/sleep.png
+++ b/webpage/src/assets/tests/sleep.png
--- a/webpage/src/assets/tests/sleep^2.jpg
+++ b/webpage/src/assets/tests/sleep^2.jpg
--- a/webpage/src/assets/tests/你要出多少.png
+++ b/webpage/src/assets/tests/你要出多少.png
--- a/webpage/src/assets/tests/好ㄘ.png
+++ b/webpage/src/assets/tests/好ㄘ.png
--- a/webpage/src/assets/tests/宅斃了.jpg
+++ b/webpage/src/assets/tests/宅斃了.jpg
--- a/webpage/src/assets/tests/宅斃了^2.png
+++ b/webpage/src/assets/tests/宅斃了^2.png
--- a/webpage/src/assets/tests/宅斃了^3.png
+++ b/webpage/src/assets/tests/宅斃了^3.png
--- a/webpage/src/assets/tests/宅斃了^4.png
+++ b/webpage/src/assets/tests/宅斃了^4.png
--- a/webpage/src/assets/tests/宅斃了^5.png
+++ b/webpage/src/assets/tests/宅斃了^5.png
--- a/webpage/src/assets/tests/幹波大的.png
+++ b/webpage/src/assets/tests/幹波大的.png
--- a/webpage/src/assets/tests/我什麼都沒有.png
+++ b/webpage/src/assets/tests/我什麼都沒有.png
--- a/webpage/src/assets/tests/欸嘿.png
+++ b/webpage/src/assets/tests/欸嘿.png
--- a/webpage/src/components/ImageGrid.tsx
+++ b/webpage/src/components/ImageGrid.tsx
@@ -0,0 +1,115 @@
+import type { Image } from '../types';
+
+interface ImageGridProps {
+  images: Image[];
+  aliases: string[];
+  onImageClick: (image: Image) => void;
+}
+
+export default function ImageGrid({ images, aliases, onImageClick }: ImageGridProps) {
+  // Group images by alias
+  const groupedImages = images.reduce((acc, image) => {
+    if (image.aliases.length === 0) {
+      if (!acc['__no_alias__']) acc['__no_alias__'] = [];
+      acc['__no_alias__'].push(image);
+    } else {
+      image.aliases.forEach((alias) => {
+        if (!acc[alias]) acc[alias] = [];
+        acc[alias].push(image);
+      });
+    }
+    return acc;
+  }, {} as Record<string, Image[]>);
+
+  // Filter to only show aliases on current page
+  const filteredGroups = Object.entries(groupedImages).filter(([alias]) =>
+    aliases.includes(alias) || alias === '__no_alias__'
+  );
+
+  return (
+    <div className="p-6 space-y-8">
+      {filteredGroups.map(([alias, imgs]) => (
+        <div key={alias}>
+          <h3 className="text-lg font-semibold text-gray-800 mb-4">
+            {alias === '__no_alias__' ? 'Images without aliases' : `Alias: ${alias}`}
+          </h3>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+            {imgs.map((image) => (
+              <button
+                key={image.id}
+                onClick={() => onImageClick(image)}
+                className="aspect-square rounded-lg overflow-hidden bg-gray-100 hover:ring-2 hover:ring-blue-500 transition-all"
+              >
+                <img
+                  src={`http://localhost:8080${image.url}`}
+                  alt={image.aliases.join(', ')}
+                  className="w-full h-full object-cover"
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+      ))}
+      {filteredGroups.length === 0 && (
+        <div className="text-center py-12 text-gray-500">
+          No images found
+        </div>
+      )}
+    </div>
+  );
+}
+
+// import type { Image } from '../types';
+
+// interface ImageGridProps {
+//   images: Image[];
+//   onImageClick: (image: Image) => void;
+// }
+
+// export default function ImageGrid({ images, onImageClick }: ImageGridProps) {
+//   // Group images by alias
+//   const groupedImages = images.reduce((acc, image) => {
+//     if (image.aliases.length === 0) {
+//       if (!acc['__no_alias__']) acc['__no_alias__'] = [];
+//       acc['__no_alias__'].push(image);
+//     } else {
+//       image.aliases.forEach((alias) => {
+//         if (!acc[alias]) acc[alias] = [];
+//         acc[alias].push(image);
+//       });
+//     }
+//     return acc;
+//   }, {} as Record<string, Image[]>);
+
+//   return (
+//     <div className="p-6 space-y-8">
+//       {Object.entries(groupedImages).map(([alias, imgs]) => (
+//         <div key={alias}>
+//           <h3 className="text-lg font-semibold text-gray-800 mb-4">
+//             {alias === '__no_alias__' ? 'Images without aliases' : `Alias: ${alias}`}
+//           </h3>
+//           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+//             {imgs.map((image) => (
+//               <button
+//                 key={image.id}
+//                 onClick={() => onImageClick(image)}
+//                 className="aspect-square rounded-lg overflow-hidden bg-gray-100 hover:ring-2 hover:ring-blue-500 transition-all"
+//               >
+//                 <img
+//                   src={`http://localhost:8080${image.url}`}
+//                   alt={image.aliases.join(', ')}
+//                   className="w-full h-full object-cover"
+//                 />
+//               </button>
+//             ))}
+//           </div>
+//         </div>
+//       ))}
+//       {Object.keys(groupedImages).length === 0 && (
+//         <div className="text-center py-12 text-gray-500">
+//           No images found
+//         </div>
+//       )}
+//     </div>
+//   );
+// }
--- a/webpage/src/components/ImageModal.tsx
+++ b/webpage/src/components/ImageModal.tsx
@@ -0,0 +1,191 @@
+import { useState, useEffect } from 'react';
+import type { Image } from '../types';
+
+interface ImageModalProps {
+  image: Image;
+  onClose: () => void;
+  onSave: (imageId: string, aliases: string[]) => Promise<void>;
+  onDelete: (imageId: string) => Promise<void>;
+}
+
+export default function ImageModal({
+  image,
+  onClose,
+  onSave,
+  onDelete,
+}: ImageModalProps) {
+  const [aliases, setAliases] = useState<string[]>(image.aliases);
+  const [newAlias, setNewAlias] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    setAliases(image.aliases);
+  }, [image]);
+
+  const handleAddAlias = () => {
+    if (newAlias.trim() && !aliases.includes(newAlias.trim())) {
+      setAliases([...aliases, newAlias.trim()]);
+      setNewAlias('');
+    }
+  };
+
+  const handleRemoveAlias = (alias: string) => {
+    setAliases(aliases.filter((a) => a !== alias));
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      await onSave(image.id, aliases);
+      onClose();
+    } catch (error) {
+      alert('Failed to save changes');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (confirm('Are you sure you want to delete this image?')) {
+      try {
+        await onDelete(image.id);
+        onClose();
+      } catch (error) {
+        alert('Failed to delete image');
+      }
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
+      onClick={onClose}
+    >
+      <div
+        className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="p-6">
+          <div className="mb-6 rounded-lg overflow-hidden bg-gray-100">
+            <img
+              src={`http://localhost:8080${image.url}`}
+              alt={image.aliases.join(', ')}
+              className="w-full h-auto"
+            />
+          </div>
+
+          <div className="space-y-4 mb-6">
+            <div className="text-sm text-gray-600">
+              <p>
+                <span className="font-medium">Uploaded Time:</span>{' '}
+                {new Date(image.uploaded_at).toLocaleString()}
+              </p>
+              <p>
+                <span className="font-medium">Uploaded By:</span>{' '}
+                {image.uploaded_user_id}
+              </p>
+            </div>
+
+            <div>
+              <h3 className="font-medium text-gray-900 mb-3">
+                Aliases of this image:
+              </h3>
+              <div className="space-y-2">
+                {aliases.map((alias) => (
+                  <div key={alias} className="flex items-center gap-2">
+                    {(
+                      <button
+                        onClick={() => handleRemoveAlias(alias)}
+                        className="text-red-600 hover:text-red-700"
+                      >
+                        <svg
+                          className="w-5 h-5"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M6 18L18 6M6 6l12 12"
+                          />
+                        </svg>
+                      </button>
+                    )}
+                    <input
+                      type="text"
+                      value={alias}
+                      readOnly
+                      className="flex-1 px-3 py-2 border border-gray-300 rounded-lg bg-gray-50"
+                    />
+                  </div>
+                ))}
+                {(
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={handleAddAlias}
+                      className="text-green-600 hover:text-green-700"
+                    >
+                      <svg
+                        className="w-5 h-5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M12 4v16m8-8H4"
+                        />
+                      </svg>
+                    </button>
+                    <input
+                      type="text"
+                      placeholder="Add a new alias"
+                      value={newAlias}
+                      onChange={(e) => setNewAlias(e.target.value)}
+                      onKeyPress={(e) => e.key === 'Enter' && handleAddAlias()}
+                      className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-between items-center pt-4 border-t border-gray-200">
+            <div>
+              {(
+                <button
+                  onClick={handleDelete}
+                  className="px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors font-medium"
+                >
+                  Delete Image
+                </button>
+              )}
+            </div>
+            <div className="flex gap-2">
+              <button
+                onClick={onClose}
+                className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors font-medium"
+              >
+                Close
+              </button>
+              {(
+                <button
+                  onClick={handleSave}
+                  disabled={isSaving}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50"
+                >
+                  {isSaving ? 'Saving...' : 'Save'}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/webpage/src/components/Navbar.tsx
+++ b/webpage/src/components/Navbar.tsx
@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+interface NavbarProps {
+  onUploadClick: () => void;
+}
+
+export default function Navbar({
+  onUploadClick,
+}: NavbarProps) {
+  return (
+    <nav className="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
+      <div className="flex items-center">
+        <h1 className="text-2xl font-bold text-gray-800">Memebot</h1>
+      </div>
+      <div className="flex items-center gap-3">
+        {(
+          <button
+            onClick={onUploadClick}
+            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+          >
+            Upload Image
+          </button>
+        )}
+      </div>
+    </nav>
+  );
+}
--- a/webpage/src/components/Pagination.tsx
+++ b/webpage/src/components/Pagination.tsx
@@ -0,0 +1,33 @@
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export default function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: PaginationProps) {
+  return (
+    <div className="flex items-center justify-center gap-4 py-4">
+      <button
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        Previous
+      </button>
+      <span className="text-gray-700 font-medium">
+        Page {currentPage} of {totalPages}
+      </span>
+      <button
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        Next
+      </button>
+    </div>
+  );
+}
--- a/webpage/src/components/SearchBar.tsx
+++ b/webpage/src/components/SearchBar.tsx
@@ -0,0 +1,33 @@
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function SearchBar({ value, onChange }: SearchBarProps) {
+  return (
+    <div className="px-6 py-4 bg-white border-b border-gray-200">
+      <div className="relative">
+        <input
+          type="text"
+          placeholder="Search aliases..."
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full px-4 py-3 pl-11 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        />
+        <svg
+          className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}
--- a/webpage/src/components/Sidebar.tsx
+++ b/webpage/src/components/Sidebar.tsx
@@ -0,0 +1,86 @@
+interface SidebarProps {
+  aliases: string[];
+  currentPage: number;
+  totalPages: number;
+}
+
+export default function Sidebar({
+  aliases,
+  currentPage,
+  totalPages,
+}: SidebarProps) {
+  return (
+    <aside className="w-64 bg-gray-50 border-r border-gray-200 overflow-y-auto">
+      <div className="p-4">
+        <div className="mb-4 pb-3 border-b border-gray-200">
+          <h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">
+            Aliases
+          </h2>
+          <div className="text-xs text-gray-600">
+            <p>Page {currentPage} of {totalPages}</p>
+            <p className="mt-1">{aliases.length} aliases on this page</p>
+          </div>
+        </div>
+        <ul className="space-y-1">
+          {aliases.map((alias) => (
+            <li key={alias}>
+              <div className="w-full text-left px-3 py-2 rounded-lg bg-blue-50 text-blue-700">
+                {alias}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </aside>
+  );
+}
+
+// interface SidebarProps {
+//   aliases: string[];
+//   selectedAlias: string | null;
+//   onAliasClick: (alias: string | null) => void;
+// }
+
+// export default function Sidebar({
+//   aliases,
+//   selectedAlias,
+//   onAliasClick,
+// }: SidebarProps) {
+//   return (
+//     <aside className="w-64 bg-gray-50 border-r border-gray-200 overflow-y-auto">
+//       <div className="p-4">
+//         <h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">
+//           Aliases
+//         </h2>
+//         <ul className="space-y-1">
+//           {aliases.map((alias) => (
+//             <li key={alias}>
+//               <button
+//                 onClick={() => onAliasClick(alias)}
+//                 className={`w-full text-left px-3 py-2 rounded-lg transition-colors ${
+//                   selectedAlias === alias
+//                     ? 'bg-blue-100 text-blue-700 font-medium'
+//                     : 'text-gray-700 hover:bg-gray-100'
+//                 }`}
+//               >
+//                 {alias}
+//               </button>
+//             </li>
+//           ))}
+//           <li className="pt-2 border-t border-gray-200 mt-2">
+//             <button
+//               onClick={() => onAliasClick(null)}
+//               className={`w-full text-left px-3 py-2 rounded-lg transition-colors ${
+//                 selectedAlias === null
+//                   ? 'bg-blue-100 text-blue-700 font-medium'
+//                   : 'text-gray-700 hover:bg-gray-100'
+//               }`}
+//             >
+//               Images without aliases
+//             </button>
+//           </li>
+//         </ul>
+//       </div>
+//     </aside>
+//   );
+// }
--- a/webpage/src/components/UploadModal.tsx
+++ b/webpage/src/components/UploadModal.tsx
@@ -0,0 +1,245 @@
+import { useState } from 'react';
+
+interface UploadModalProps {
+  onClose: () => void;
+  onUpload: (file: File, aliases: string[]) => Promise<void>;
+}
+
+export default function UploadModal({ onClose, onUpload }: UploadModalProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [aliases, setAliases] = useState<string[]>([]);
+  const [newAlias, setNewAlias] = useState('');
+  const [isUploading, setIsUploading] = useState(false);
+  const [dragActive, setDragActive] = useState(false);
+
+  const handleFileChange = (selectedFile: File) => {
+    setFile(selectedFile);
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setPreview(reader.result as string);
+    };
+    reader.readAsDataURL(selectedFile);
+  };
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === 'dragenter' || e.type === 'dragover') {
+      setDragActive(true);
+    } else if (e.type === 'dragleave') {
+      setDragActive(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      handleFileChange(e.dataTransfer.files[0]);
+    }
+  };
+
+  const handleAddAlias = () => {
+    if (newAlias.trim() && !aliases.includes(newAlias.trim())) {
+      setAliases([...aliases, newAlias.trim()]);
+      setNewAlias('');
+    }
+  };
+
+  const handleRemoveAlias = (alias: string) => {
+    setAliases(aliases.filter((a) => a !== alias));
+  };
+
+  const handleUpload = async () => {
+    if (!file) {
+      alert('Please select a file');
+      return;
+    }
+    setIsUploading(true);
+    try {
+      await onUpload(file, aliases);
+      onClose();
+    } catch (error) {
+      alert('Failed to upload image');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
+      onClick={onClose}
+    >
+      <div
+        className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="p-6">
+          <h2 className="text-2xl font-bold text-gray-900 mb-6">
+            Upload Image
+          </h2>
+
+          <div
+            className={`mb-6 border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
+              dragActive
+                ? 'border-blue-500 bg-blue-50'
+                : 'border-gray-300 bg-gray-50'
+            }`}
+            onDragEnter={handleDrag}
+            onDragLeave={handleDrag}
+            onDragOver={handleDrag}
+            onDrop={handleDrop}
+          >
+            {preview ? (
+              <div className="relative">
+                <img
+                  src={preview}
+                  alt="Preview"
+                  className="max-h-64 mx-auto rounded-lg"
+                />
+                <button
+                  onClick={() => {
+                    setFile(null);
+                    setPreview(null);
+                  }}
+                  className="absolute top-2 right-2 bg-red-600 text-white p-2 rounded-full hover:bg-red-700"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+            ) : (
+              <>
+                <svg
+                  className="mx-auto h-12 w-12 text-gray-400 mb-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                  />
+                </svg>
+                <p className="text-gray-600 mb-2">
+                  Drag your image here or click to browse
+                </p>
+                <input
+                  type="file"
+                  accept="image/*"
+                  onChange={(e) =>
+                    e.target.files && handleFileChange(e.target.files[0])
+                  }
+                  className="hidden"
+                  id="file-upload"
+                />
+                <label
+                  htmlFor="file-upload"
+                  className="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer transition-colors"
+                >
+                  Choose File
+                </label>
+              </>
+            )}
+          </div>
+
+          <div className="mb-6">
+            <h3 className="font-medium text-gray-900 mb-3">
+              Aliases of this image:
+            </h3>
+            <div className="space-y-2">
+              {aliases.map((alias) => (
+                <div key={alias} className="flex items-center gap-2">
+                  <button
+                    onClick={() => handleRemoveAlias(alias)}
+                    className="text-red-600 hover:text-red-700"
+                  >
+                    <svg
+                      className="w-5 h-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M6 18L18 6M6 6l12 12"
+                      />
+                    </svg>
+                  </button>
+                  <input
+                    type="text"
+                    value={alias}
+                    readOnly
+                    className="flex-1 px-3 py-2 border border-gray-300 rounded-lg bg-gray-50"
+                  />
+                </div>
+              ))}
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={handleAddAlias}
+                  className="text-green-600 hover:text-green-700"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 4v16m8-8H4"
+                    />
+                  </svg>
+                </button>
+                <input
+                  type="text"
+                  placeholder="Add a new alias"
+                  value={newAlias}
+                  onChange={(e) => setNewAlias(e.target.value)}
+                  onKeyPress={(e) => e.key === 'Enter' && handleAddAlias()}
+                  className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 pt-4 border-t border-gray-200">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors font-medium"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleUpload}
+              disabled={!file || isUploading}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50"
+            >
+              {isUploading ? 'Uploading...' : 'Upload'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/webpage/src/index.css
+++ b/webpage/src/index.css
@@ -0,0 +1,4 @@
+/* File: webpage/src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/webpage/src/main.tsx
+++ b/webpage/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/webpage/src/types.ts
+++ b/webpage/src/types.ts
@@ -0,0 +1,12 @@
+export interface Image {
+  id: string;
+  uploaded_user_id: string;
+  uploaded_at: string;
+  aliases: string[];
+  url: string;
+}
+
+export interface User {
+  id: string;
+  username: string;
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>