|
1 | 1 | # Imageomics Catalog |
2 | 2 |
|
3 | | -Repository for Imageomics data, model, spaces, and code catalog. |
| 3 | +Repository for web-based Imageomics data, model, spaces, and code catalog. This catalog is designed to use the Hugging Face API for searching all dataset, model, and spaces repositories created under the [Imageomics Hugging Face Organization](https://huggingface.co/imageomics). Code integration through the GitHub API is the next stage of development. |
4 | 4 |
|
5 | 5 | This project was initialized with the help of Gemini 2.5, accessed [through OSU](https://ai.osu.edu/faculty-staff-students/approved-ai-tools). In addition to speeding up the development of this site, I was curious about how much Gemini could do and where it would falter; see the [full prompt/discussion](catalog-generation-prompt-Gemini2.5Flash.md) for more information. |
6 | 6 |
|
7 | | -# Project Description from Gemini: |
| 7 | +## Features |
8 | 8 |
|
9 | | -## Imageomics Hugging Face Catalog |
| 9 | +The website is styled using the [tailwindcss](https://tailwindcss.com/) pacakge. |
10 | 10 |
|
11 | | -This is a web-based catalog designed to explore public datasets, models, and spaces from the Hugging Face Hub, specifically for the Imageomics organization. |
| 11 | +* **Real-time Data Fetching:** Displays all public Imageomics repositories directly from the Hugging Face API. Includes a "New" badge for products created within the last 30 days. |
| 12 | +* **Search Functionality:** Quickly find items by keyword. |
| 13 | +* **Filtering:** Filter by repository type (Datasets, Models, Spaces) and tags. |
| 14 | +* **Sorting:** Sort items by last updated, date created, or alphabetically. |
| 15 | +* **Responsive Design:** The layout is optimized for use on computers and mobile devices. |
| 16 | +* **Thematic Styling:** Uses Imageomics color scheme for a cohesive look and feel. |
| 17 | +* **Longevity:** This site is run through GitHub Pages, ensuring continued access through GitHub without needing to otherwise provision dedicated infrastructure. |
12 | 18 |
|
13 | | -The application is built using a modern, modularized approach with a clean, responsive design. |
| 19 | +## Project Structure |
14 | 20 |
|
15 | | -### Features |
| 21 | +The site runs based on three primary files: |
16 | 22 |
|
17 | | -* **Real-time Data Fetching:** Displays the latest public repositories directly from the Hugging Face API. |
18 | | -* **Search Functionality:** Quickly find items by keyword. |
19 | | -* **Filtering:** Filter by repository type (Datasets, Models, Spaces) and tags. |
20 | | -* **Sorting:** Sort items by last updated, date created, or alphabetically. |
21 | | -* **Responsive Design:** The layout is optimized for viewing on all devices, from mobile phones to desktops. |
22 | | -* **Thematic Styling:** Styled with Imageomics' official brand colors for a cohesive look and feel. |
| 23 | +* `index.html`: The main HTML file that provides the structure of the webpage and links to the CSS and JavaScript files, though it still has some manual color/style definitions. |
| 24 | +* `style.css`: Custom styling for the application, including color schemes, layout, and animations. |
| 25 | + * **Note:** Color defined in `index.html` for specific portions of the site will overwrite those defined in this file. |
| 26 | +* `main.js`: Handles the application's logic, including API calls, data filtering, sorting, and dynamic rendering of the catalog items. |
| 27 | + * **Note:** Model API calls do ***not*** return `cardData` unless explicitly fetched _by model_, so there is extra logic required to fetch Model metadata. This was not accounted for until [commit a8d3000](https://github.com/Imageomics/catalog/commit/a8d30009f58a11e708f36d54b9bf4a228bdf1538), as it took updates related to issue #3 to discover. |
23 | 28 |
|
24 | | -### File Structure |
| 29 | +## Local Testing |
25 | 30 |
|
26 | | -The project has been refactored into three separate files for improved organization and maintainability: |
27 | | - |
28 | | -* `index.html`: The main HTML file that provides the structure of the webpage and links to the CSS and JavaScript files. |
29 | | -* `style.css`: Contains all the custom styling for the application, including color schemes, layout, and animations. |
30 | | -* `main.js`: Handles all the application's logic, including API calls, data filtering, sorting, and dynamic rendering of the catalog items. |
31 | | - |
32 | | -### How to Run |
33 | | - |
34 | | -For local testing, run |
| 31 | +In the repo root, run |
35 | 32 |
|
36 | 33 | ```console |
37 | 34 | python -m http.server 8080 |
38 | 35 | ``` |
39 | 36 |
|
40 | 37 | Then open <http://[::]:8080/> in your browser of choice. |
41 | 38 |
|
42 | | -For hosting on a platform like GitHub Pages, you just need to upload these three files to your repository and enable the Pages feature. |
| 39 | +## Note on Debugging with Gemini |
| 40 | + |
| 41 | +It is important to provide the relevant code and preface with something along the lines of: |
| 42 | + |
| 43 | +> Based on this project, without changing the structure of existing code more than necessary for efficient design, can you identify... |
| 44 | +
|
| 45 | +Then ask for a plan of how to reolve the issue. In my debugging experience, it did not demonstrate the ability to recognize or distinguish between a fix of "robustness" to handle outliers (which already existed at the precise location to which it pointed) and actually fixing the code to get the information that should have been fetched. Additionally, it has a tendency to rewrite an entire function and forget about tasks that are done in that function that are not _directly_ related to the bug it is attempting to fix. |
0 commit comments