Add Image models and clean up test code structure

Introduced `ImageCreate` and `Image` models to handle image-related data in the backend. Improved the organization and readability of the testing notebook by consolidating and formatting code into distinct sections with markdown cells.

frontend/src/components/ResultGrid.tsx

@@ -21,7 +21,32 @@ interface ResultGridProps {
 }
 
 const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
-  const [rows, setRows] = useState<SampleResult[]>([]);
+    const [rows, setRows] = useState<SampleResult[]>([]);
+    const [basePath, setBasePath] = React.useState("");
+
+    useEffect(() => {
+        // Detect the current environment
+        const mode = import.meta.env.MODE;
+
+        // Dynamic resolution for OpenAPI.BASE
+        OpenAPI.BASE =
+            mode === 'test'
+                ? import.meta.env.VITE_OPENAPI_BASE_TEST
+                : mode === 'prod'
+                    ? import.meta.env.VITE_OPENAPI_BASE_PROD
+                    : import.meta.env.VITE_OPENAPI_BASE_DEV;
+
+        if (!OpenAPI.BASE) {
+            console.error('OpenAPI.BASE is not set. Falling back to a default value.');
+            OpenAPI.BASE = 'https://default-url.com';
+        }
+
+        console.log('Environment Mode:', mode);
+        console.log('Resolved OpenAPI.BASE:', OpenAPI.BASE);
+
+        // Set the base path for images dynamically
+        setBasePath(`${OpenAPI.BASE}/images/`);
+    }, []);
 
     useEffect(() => {
         console.log("Fetching sample results for active_pgroup:", activePgroup);
@@ -49,6 +74,7 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
             if (imageList && imageList.length) {
                 const primaryImage = imageList[0];
                 // Define the base path to your backend images directory
+
                 const basePath = "https://localhost:8000/";
                 const imageUrl = basePath + primaryImage.filepath;