multi upload

frontend/package-lock.json

@@ -11,10 +11,13 @@
         "@ifrc-go/icons": "^2.0.1",
         "@ifrc-go/ui": "^1.3.0",
         "@types/jszip": "^3.4.0",
+        "cropperjs": "^2.0.1",
         "jszip": "^3.10.1",
         "lucide-react": "^0.525.0",
         "react": "^18.2.0",
+        "react-cropper": "^2.3.3",
         "react-dom": "^18.2.0",
+        "react-easy-crop": "^5.5.0",
         "react-router-dom": "^6.30.1",
         "vite": "^7.1.3"
       },
@@ -420,6 +423,126 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@cropper/element": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@cropper/element/-/element-2.0.1.tgz",
+      "integrity": "sha512-Jn1hR7XWzWQM/QfXRGMGzdkJ2gG/UcLdQPZQ7OKs0JiFfRzKpzu4u/nYrXHeH3MM2iOslLqh2kqYju6mjZLMJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@cropper/utils": "^2.0.1"
+      }
+    },
+    "node_modules/@cropper/element-canvas": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@cropper/element-canvas/-/element-canvas-2.0.1.tgz",
+      "integrity": "sha512-OKxq/O0HL9W2JegOsc2zh1NRpERZcLM5+M8aQ/eXdmMcfi1lzosPftag3Irp6pTsVpwV6B6ypIxKESzJ4ci9Fw==",
+      "license": "MIT",
+      "dependencies": {
+        "@cropper/element": "^2.0.1",
+        "@cropper/utils": "^2.0.1"
+      }
+    },
+    "node_modules/@cropper/element-crosshair": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@cropper/element-crosshair/-/element-crosshair-2.0.1.tgz",
+      "integrity": "sha512-bS5msU9cTU/jf1/kDw+QJmEM9/rw8IgOdpolR85iMVUCR8sRcLa0wgom42MBHcpBYB6hvL5YfiOeXZ7lHIYMpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@cropper/element": "^2.0.1",
+        "@cropper/utils": "^2.0.1"
+      }
+    },
+    "node_modules/@cropper/element-grid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@cropper/element-grid/-/element-grid-2.0.1.tgz",
+      "integrity": "sha512-ayqCvYQJ+GVT31HhFpttzHabW1T/LsIwLJY5PLTMG0cEZLw/E8ihg8mxctjZbo852D7oEePbz6/2SeuCb1018Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@cropper/element": "^2.0.1",
+        "@cropper/utils": "^2.0.1"
+      }
+    },
+    "node_modules/@cropper/element-handle": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@cropper/element-handle/-/element-handle-2.0.1.tgz",
+      "integrity": "sha512-fdifyyPIaR9S2eQ7qPHuM8fX8uToAfBsi8vQlR9EM+oJkDNil0uO4rWyArLWEtlr0/q7U0OvsufcuJ7ffqfmpg==",
+      "license": "MIT",
+      "dependencies": {
+        "@cropper/element": "^2.0.1",
+        "@cropper/utils": "^2.0.1"
+      }
+    },
+    "node_modules/@cropper/element-image": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@cropper/element-image/-/element-image-2.0.1.tgz",
+      "integrity": "sha512-gPj5Sl2T8Cno198Cz3F3TDfcYoALW3yJ3fV6PHXmhMnX8sBkL7J441do7Vwkg0mEd2CogCtTLAf+p7ljdV0kgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@cropper/element": "^2.0.1",
+        "@cropper/element-canvas": "^2.0.1",
+        "@cropper/utils": "^2.0.1"
+      }
+    },
+    "node_modules/@cropper/element-selection": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@cropper/element-selection/-/element-selection-2.0.1.tgz",
+      "integrity": "sha512-atv+Aeq2N2eWawelIRPGh1kYFdNrpb0QkUPPheGxz1ImfxpLdcHO9gb9T5noQijizUW2G0pNvts4ZaITQ0I71Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@cropper/element": "^2.0.1",
+        "@cropper/element-canvas": "^2.0.1",
+        "@cropper/element-image": "^2.0.1",
+        "@cropper/utils": "^2.0.1"
+      }
+    },
+    "node_modules/@cropper/element-shade": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@cropper/element-shade/-/element-shade-2.0.1.tgz",
+      "integrity": "sha512-YIYgJ690NdFQ6wJLRFh/EySNVxGFKArncQ4FrsJ3yHU+ShgtOKz4FpjFLpqJRJB9swoVbD3WKTimGyzXrwjZrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@cropper/element": "^2.0.1",
+        "@cropper/element-canvas": "^2.0.1",
+        "@cropper/element-selection": "^2.0.1",
+        "@cropper/utils": "^2.0.1"
+      }
+    },
+    "node_modules/@cropper/element-viewer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@cropper/element-viewer/-/element-viewer-2.0.1.tgz",
+      "integrity": "sha512-HDj25l08pWi/AO6El/OqfQHBpBC4Lh5NEnQN1SOldsmxEwt27Ubv6ndDsF8LkTK7XPwjjZRpyQPyfig4w8L2JQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@cropper/element": "^2.0.1",
+        "@cropper/element-canvas": "^2.0.1",
+        "@cropper/element-image": "^2.0.1",
+        "@cropper/element-selection": "^2.0.1",
+        "@cropper/utils": "^2.0.1"
+      }
+    },
+    "node_modules/@cropper/elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@cropper/elements/-/elements-2.0.1.tgz",
+      "integrity": "sha512-paFbBLXTKXNngn1yDi2ZIf+FO1pIEQXyBntmqOjuxqtG73KuEKv633wsJPFpj958bgcfSakgBbF80j+3nHbPug==",
+      "license": "MIT",
+      "dependencies": {
+        "@cropper/element": "^2.0.1",
+        "@cropper/element-canvas": "^2.0.1",
+        "@cropper/element-crosshair": "^2.0.1",
+        "@cropper/element-grid": "^2.0.1",
+        "@cropper/element-handle": "^2.0.1",
+        "@cropper/element-image": "^2.0.1",
+        "@cropper/element-selection": "^2.0.1",
+        "@cropper/element-shade": "^2.0.1",
+        "@cropper/element-viewer": "^2.0.1"
+      }
+    },
+    "node_modules/@cropper/utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@cropper/utils/-/utils-2.0.1.tgz",
+      "integrity": "sha512-A9RnAFmgNF5aZk5q2VZnFnHtXWu1kPyEN0LVsX8wJ2LBRu2nyETKwz+ZXVsVWliktToCaYojHKrS+6/HODyEZA==",
+      "license": "MIT"
+    },
     "node_modules/@csstools/color-helpers": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
@@ -3077,6 +3200,16 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "license": "MIT"
     },
+    "node_modules/cropperjs": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-2.0.1.tgz",
+      "integrity": "sha512-hiJwk2SCPZqxMA7aR3byzLpYUqOrQo+ihMk8k/WRm/xe/LX8wNzAIzMwEB/NEGJYA6sbewxW9TUlrRUYi/2Ipg==",
+      "license": "MIT",
+      "dependencies": {
+        "@cropper/elements": "^2.0.1",
+        "@cropper/utils": "^2.0.1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4617,6 +4750,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/nwsapi": {
       "version": "2.2.21",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.21.tgz",
@@ -4945,6 +5084,24 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/react-cropper": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/react-cropper/-/react-cropper-2.3.3.tgz",
+      "integrity": "sha512-zghiEYkUb41kqtu+2jpX2Ntigf+Jj1dF9ew4lAobPzI2adaPE31z0p+5TcWngK6TvmWQUwK3lj4G+NDh1PDQ1w==",
+      "license": "MIT",
+      "dependencies": {
+        "cropperjs": "^1.5.13"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.2"
+      }
+    },
+    "node_modules/react-cropper/node_modules/cropperjs": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz",
+      "integrity": "sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==",
+      "license": "MIT"
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -4958,6 +5115,20 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-easy-crop": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.5.0.tgz",
+      "integrity": "sha512-OZzU+yXMhe69vLkDex+5QxcfT94FdcgVCyW2dBUw35ZoC3Is42TUxUy04w8nH1mfMKaizVdC3rh/wUfNW1mK4w==",
+      "license": "MIT",
+      "dependencies": {
+        "normalize-wheel": "^1.0.1",
+        "tslib": "^2.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.0",
+        "react-dom": ">=16.4.0"
+      }
+    },
     "node_modules/react-focus-lock": {
       "version": "2.13.6",
       "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.13.6.tgz",

frontend/package.json

@@ -44,10 +44,13 @@
     "@ifrc-go/icons": "^2.0.1",
     "@ifrc-go/ui": "^1.3.0",
     "@types/jszip": "^3.4.0",
+    "cropperjs": "^2.0.1",
     "jszip": "^3.10.1",
     "lucide-react": "^0.525.0",
     "react": "^18.2.0",
+    "react-cropper": "^2.3.3",
     "react-dom": "^18.2.0",
+    "react-easy-crop": "^5.5.0",
     "react-router-dom": "^6.30.1",
     "vite": "^7.1.3"
   }

frontend/src/components/FilterBar.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Container, TextInput, SelectInput, MultiSelectInput, Button } from '@ifrc-go/ui';
+import { FilterLineIcon } from '@ifrc-go/icons';
 import { useFilterContext } from '../hooks/useFilterContext';
 
 interface FilterBarProps {
@@ -19,6 +20,8 @@ export default function FilterBar({
   imageTypes, 
   isLoadingFilters = false 
 }: FilterBarProps) {
+  const [showFilters, setShowFilters] = useState(false);
+  
   const {
     search, setSearch,
     srcFilter, setSrcFilter,
@@ -26,14 +29,27 @@ export default function FilterBar({
     regionFilter, setRegionFilter,
     countryFilter, setCountryFilter,
     imageTypeFilter, setImageTypeFilter,
+    uploadTypeFilter, setUploadTypeFilter,
     showReferenceExamples, setShowReferenceExamples,
     clearAllFilters
   } = useFilterContext();
 
   return (
     <div className="mb-6 space-y-4">
-      {/* Layer 1: Search, Reference Examples, Clear Filters */}
+      {/* Layer 1: Search, Filter Button, Clear Filters */}
       <div className="flex flex-wrap items-center gap-4">
+        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+          <Button
+            name="toggle-filters"
+            variant="secondary"
+            onClick={() => setShowFilters(!showFilters)}
+            className="whitespace-nowrap"
+            title={showFilters ? 'Hide Filters' : 'Show Filters'}
+          >
+            <FilterLineIcon className="w-4 h-4" />
+          </Button>
+        </Container>
+
         <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2 flex-1 min-w-[300px]">
           <TextInput
             name="search"
@@ -43,8 +59,6 @@ export default function FilterBar({
           />
         </Container>
 
-
-
         <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
           <Button
             name="clear-filters"
@@ -56,9 +70,11 @@ export default function FilterBar({
         </Container>
       </div>
 
-      {/* Layer 2: 5 Filter Bars */}
-      <div className="flex flex-wrap items-center gap-4">
-        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+      {/* Layer 2: Filter Dropdown */}
+      {showFilters && (
+        <div className="bg-white/20 backdrop-blur-sm rounded-md p-4">
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+        <Container withInternalPadding className="p-2">
           <SelectInput
             name="source"
             placeholder={isLoadingFilters ? "Loading..." : "All Sources"}
@@ -72,7 +88,7 @@ export default function FilterBar({
           />
         </Container>
 
-        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+        <Container withInternalPadding className="p-2">
           <SelectInput
             name="category"
             placeholder={isLoadingFilters ? "Loading..." : "All Categories"}
@@ -86,7 +102,7 @@ export default function FilterBar({
           />
         </Container>
 
-        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+        <Container withInternalPadding className="p-2">
           <SelectInput
             name="region"
             placeholder={isLoadingFilters ? "Loading..." : "All Regions"}
@@ -100,7 +116,7 @@ export default function FilterBar({
           />
         </Container>
 
-        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+        <Container withInternalPadding className="p-2">
           <MultiSelectInput
             name="country"
             placeholder={isLoadingFilters ? "Loading..." : "All Countries"}
@@ -113,7 +129,7 @@ export default function FilterBar({
           />
         </Container>
 
-        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+        <Container withInternalPadding className="p-2">
           <SelectInput
             name="imageType"
             placeholder={isLoadingFilters ? "Loading..." : "All Image Types"}
@@ -126,7 +142,26 @@ export default function FilterBar({
             disabled={isLoadingFilters}
           />
         </Container>
-      </div>
+
+        <Container withInternalPadding className="p-2">
+          <SelectInput
+            name="uploadType"
+            placeholder="All Upload Types"
+            options={[
+              { key: 'single', label: 'Single Upload' },
+              { key: 'multiple', label: 'Multiple Upload' }
+            ]}
+            value={uploadTypeFilter || null}
+            onChange={(v) => setUploadTypeFilter(v as string || '')}
+            keySelector={(o) => o.key}
+            labelSelector={(o) => o.label}
+            required={false}
+            disabled={false}
+          />
+        </Container>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/components/index.ts

@@ -0,0 +1,7 @@
+// Main components
+export { default as FilterBar } from './FilterBar';
+export { default as HeaderNav } from './HeaderNav';
+export { default as ExportModal } from './ExportModal';
+
+// Upload components
+export * from './upload';

frontend/src/components/upload/FileUploadSection.tsx

@@ -0,0 +1,169 @@
+import { useState } from 'react';
+import type { DragEvent } from 'react';
+import { Button, Container, SegmentInput, IconButton } from '@ifrc-go/ui';
+import { UploadCloudLineIcon, ArrowRightLineIcon, DeleteBinLineIcon } from '@ifrc-go/icons';
+import { Link } from 'react-router-dom';
+import styles from '../../pages/UploadPage/UploadPage.module.css';
+
+interface FileUploadSectionProps {
+  files: File[];
+  file: File | null;
+  preview: string | null;
+  imageType: string;
+  onFileChange: (file: File | undefined) => void;
+  onRemoveImage: (index: number) => void;
+  onAddImage: () => void;
+  onImageTypeChange: (value: string | undefined) => void;
+
+  onChangeFile?: (file: File | undefined) => void;
+}
+
+export default function FileUploadSection({
+  files,
+  file,
+  preview,
+  imageType,
+  onFileChange,
+  onRemoveImage,
+  onAddImage,
+  onImageTypeChange,
+
+  onChangeFile,
+}: FileUploadSectionProps) {
+  const onDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const dropped = e.dataTransfer.files?.[0];
+    if (dropped) {
+      onFileChange(dropped);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <p className="text-gray-700 leading-relaxed max-w-2xl mx-auto">
+        This app evaluates how well multimodal AI models analyze and describe
+        crisis maps and drone imagery. Upload an image and the AI will generate a description.
+        Then you can review and rate the result based on your expertise.
+      </p>
+      
+      {/* "More »" link  */}
+      <div className={styles.helpLink}>
+        <Link
+          to="/help"
+          className={styles.helpLink}
+        >
+          More <ArrowRightLineIcon className="w-3 h-3" />
+        </Link>
+      </div>
+      
+      {/* Image Type Selection */}
+      <div className="flex justify-center">
+        <Container withInternalPadding className="bg-transparent border-none shadow-none">
+          <SegmentInput
+            name="image-type"
+            value={imageType}
+            onChange={(value) => onImageTypeChange(value as string)}
+            options={[
+              { key: 'crisis_map', label: 'Crisis Maps' },
+              { key: 'drone_image', label: 'Drone Imagery' }
+            ]}
+            keySelector={(o) => o.key}
+            labelSelector={(o) => o.label}
+          />
+        </Container>
+      </div>
+      
+             <div
+         className={`${styles.dropZone} ${file ? styles.hasFile : ''}`}
+         onDragOver={(e) => e.preventDefault()}
+         onDrop={onDrop}
+       >
+         {files.length > 1 ? (
+           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-4">
+             {files.map((file, index) => (
+               <div key={index} className="relative">
+                 <img
+                   src={URL.createObjectURL(file)}
+                   alt={`Image ${index + 1}`}
+                   className="w-full h-32 object-cover rounded"
+                 />
+                 <IconButton
+                   name="remove-image"
+                   variant="tertiary"
+                   onClick={() => onRemoveImage(index)}
+                   title="Remove image"
+                   ariaLabel="Remove image"
+                   className="absolute top-2 right-2 bg-white/90 hover:bg-white shadow-md hover:shadow-lg border border-gray-200 hover:border-red-300 transition-all duration-200 backdrop-blur-sm"
+                 >
+                   <DeleteBinLineIcon className="w-4 h-4" />
+                 </IconButton>
+                 <div className="text-xs text-center mt-1">{file.name}</div>
+               </div>
+             ))}
+           </div>
+         ) : file && preview ? (
+           <div className={styles.filePreview}>
+             <div className={styles.filePreviewImage}>
+               <img
+                 src={preview}
+                 alt="File preview"
+               />
+             </div>
+             <p className={styles.fileName}>
+               {file.name}
+             </p>
+             <p className={styles.fileInfo}>
+               {(file.size / 1024 / 1024).toFixed(2)} MB
+             </p>
+           </div>
+         ) : (
+           <>
+             <UploadCloudLineIcon className={styles.dropZoneIcon} />
+             <p className={styles.dropZoneText}>Drag &amp; Drop any file here</p>
+             <p className={styles.dropZoneSubtext}>or</p>
+           </>
+         )}
+       
+         <div className="flex gap-2">
+           <label className="inline-block cursor-pointer">
+             <input
+               type="file"
+               className="sr-only"
+               accept=".jpg,.jpeg,.png,.tiff,.tif,.heic,.heif,.webp,.gif,.pdf"
+               onChange={e => {
+                 if (file && onChangeFile) {
+                   // If there's already a file, use onChangeFile to replace it
+                   onChangeFile(e.target.files?.[0]);
+                 } else {
+                   // If no file exists, use onFileChange to add it
+                   onFileChange(e.target.files?.[0]);
+                 }
+               }}
+             />
+             <Button 
+               name="upload" 
+               variant="secondary"
+               size={1}
+               onClick={() => (document.querySelector('input[type="file"]') as HTMLInputElement)?.click()}
+             >
+               {file ? 'Change Image' : 'Browse Files'}
+             </Button>
+           </label>
+           
+           {file && files.length < 5 && (
+             <Button 
+               name="add-image" 
+               variant="secondary"
+               size={1}
+               onClick={onAddImage}
+             >
+               Add Image
+             </Button>
+           )}
+           
+
+         </div>
+       </div>
+    </div>
+  );
+}

frontend/src/components/upload/GeneratedTextSection.tsx

@@ -0,0 +1,102 @@
+import { Container, TextArea, Button, IconButton } from '@ifrc-go/ui';
+import { DeleteBinLineIcon } from '@ifrc-go/icons';
+import styles from '../../pages/UploadPage/UploadPage.module.css';
+
+interface GeneratedTextSectionProps {
+  description: string;
+  analysis: string;
+  recommendedActions: string;
+  onDescriptionChange: (value: string | undefined) => void;
+  onAnalysisChange: (value: string | undefined) => void;
+  onRecommendedActionsChange: (value: string | undefined) => void;
+  onBack: () => void;
+  onDelete: () => void;
+  onSubmit: () => void;
+  onEditRatings?: () => void;
+  isPerformanceConfirmed?: boolean;
+}
+
+export default function GeneratedTextSection({
+  description,
+  analysis,
+  recommendedActions,
+  onDescriptionChange,
+  onAnalysisChange,
+  onRecommendedActionsChange,
+  onBack,
+  onDelete,
+  onSubmit,
+  onEditRatings,
+  isPerformanceConfirmed = false,
+}: GeneratedTextSectionProps) {
+  const handleTextChange = (value: string | undefined) => {
+    if (value) {
+      const lines = value.split('\n');
+      const descIndex = lines.findIndex(line => line.startsWith('Description:'));
+      const analysisIndex = lines.findIndex(line => line.startsWith('Analysis:'));
+      const actionsIndex = lines.findIndex(line => line.startsWith('Recommended Actions:'));
+      
+      if (descIndex !== -1 && analysisIndex !== -1 && actionsIndex !== -1) {
+        onDescriptionChange(lines.slice(descIndex + 1, analysisIndex).join('\n').trim());
+        onAnalysisChange(lines.slice(analysisIndex + 1, actionsIndex).join('\n').trim());
+        onRecommendedActionsChange(lines.slice(actionsIndex + 1).join('\n').trim());
+      }
+    }
+  };
+
+  return (
+    <Container
+      heading="Generated Text"
+      headingLevel={3}
+      withHeaderBorder
+      withInternalPadding
+    >
+      <div className="text-left space-y-4">
+        <div>
+          <TextArea
+            name="generatedContent"
+            value={`Description:\n${description || 'AI-generated description will appear here...'}\n\nAnalysis:\n${analysis || 'AI-generated analysis will appear here...'}\n\nRecommended Actions:\n${recommendedActions || 'AI-generated recommended actions will appear here...'}`}
+            onChange={handleTextChange}
+            rows={12}
+            placeholder="AI-generated content will appear here..."
+          />
+        </div>
+      </div>
+      
+      {/* ────── SUBMIT BUTTONS ────── */}
+      <div className={styles.submitSection}>
+        <Button
+          name="back"
+          variant="secondary"
+          onClick={onBack}
+        >
+          Back
+        </Button>
+        {isPerformanceConfirmed && onEditRatings && (
+          <Button
+            name="edit-ratings"
+            variant="secondary"
+            onClick={onEditRatings}
+          >
+            Edit Ratings
+          </Button>
+        )}
+        <IconButton
+          name="delete"
+          variant="tertiary"
+          onClick={onDelete}
+          title="Delete"
+          ariaLabel="Delete uploaded image"
+        >
+          <DeleteBinLineIcon />
+        </IconButton>
+        <Button
+          name="submit"
+          onClick={onSubmit}
+        >
+          Submit
+        </Button>
+      </div>
+    </Container>
+  );
+}

frontend/src/components/upload/ImagePreviewSection.tsx

@@ -0,0 +1,154 @@
+import { Button, Container } from '@ifrc-go/ui';
+import { ChevronLeftLineIcon, ChevronRightLineIcon } from '@ifrc-go/icons';
+import styles from '../../pages/UploadPage/UploadPage.module.css';
+
+interface ImagePreviewSectionProps {
+  files: File[];
+  imageUrl: string | null;
+  preview: string | null;
+  onViewFullSize: (imageData?: { file: File; index: number }) => void;
+  // Carousel props for step 2b
+  currentImageIndex?: number;
+  onGoToPrevious?: () => void;
+  onGoToNext?: () => void;
+  onGoToImage?: (index: number) => void;
+  showCarousel?: boolean;
+}
+
+export default function ImagePreviewSection({
+  files,
+  imageUrl,
+  preview,
+  onViewFullSize,
+  currentImageIndex = 0,
+  onGoToPrevious,
+  onGoToNext,
+  onGoToImage,
+  showCarousel = false,
+}: ImagePreviewSectionProps) {
+  // If carousel is enabled and multiple files, show carousel
+  if (showCarousel && files.length > 1) {
+    return (
+      <Container heading="Uploaded Images" headingLevel={3} withHeaderBorder withInternalPadding>
+        <div className={styles.carouselContainer}>
+          <div className={styles.carouselImageWrapper}>
+            {files[currentImageIndex] ? (
+              <img
+                src={URL.createObjectURL(files[currentImageIndex])}
+                alt={`Image ${currentImageIndex + 1}`}
+                className={styles.carouselImage}
+              />
+            ) : (
+              <div className={styles.imagePlaceholder}>
+                No image available
+              </div>
+            )}
+          </div>
+          
+          {/* Carousel Navigation */}
+          <div className={styles.carouselNavigation}>
+            <Button
+              name="previous-image"
+              variant="tertiary"
+              size={1}
+              onClick={onGoToPrevious}
+              className={styles.carouselButton}
+            >
+              <ChevronLeftLineIcon className="w-4 h-4" />
+            </Button>
+            
+            <div className={styles.carouselIndicators}>
+              {files.map((_, index) => (
+                <button
+                  key={index}
+                  onClick={() => onGoToImage?.(index)}
+                  className={`${styles.carouselIndicator} ${
+                    index === currentImageIndex ? styles.carouselIndicatorActive : ''
+                  }`}
+                >
+                  {index + 1}
+                </button>
+              ))}
+            </div>
+            
+            <Button
+              name="next-image"
+              variant="tertiary"
+              size={1}
+              onClick={onGoToNext}
+              className={styles.carouselButton}
+            >
+              <ChevronRightLineIcon className="w-4 h-4" />
+            </Button>
+          </div>
+          
+          {/* View Image Button for Carousel */}
+          <div className={styles.viewImageButtonContainer}>
+            <Button
+              name="view-full-size-carousel"
+              variant="secondary"
+              size={1}
+              onClick={() => onViewFullSize({ file: files[currentImageIndex], index: currentImageIndex })}
+              disabled={!files[currentImageIndex]}
+            >
+              View Image
+            </Button>
+          </div>
+        </div>
+      </Container>
+    );
+  }
+
+  // Original implementation for single image or non-carousel mode
+  if (files.length > 1) {
+    return (
+      <div className="space-y-6">
+        {files.map((file, index) => (
+          <Container key={index} heading={`Image ${index + 1}: ${file.name}`} headingLevel={3} withHeaderBorder withInternalPadding>
+            <div className={styles.uploadedMapContainer}>
+              <div className={styles.uploadedMapImage}>
+                <img
+                  src={URL.createObjectURL(file)}
+                  alt={`Image ${index + 1}`}
+                />
+              </div>
+              <div className={styles.viewFullSizeButton}>
+                <Button
+                  name={`view-full-size-${index}`}
+                  variant="secondary"
+                  size={1}
+                  onClick={() => onViewFullSize({ file, index })}
+                >
+                  View Image
+                </Button>
+              </div>
+            </div>
+          </Container>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <Container heading="Uploaded Image" headingLevel={3} withHeaderBorder withInternalPadding>
+      <div className={styles.uploadedMapContainer}>
+        <div className={styles.uploadedMapImage}>
+          <img
+            src={imageUrl || preview || undefined}
+            alt="Uploaded image preview"
+          />
+        </div>
+        <div className={styles.viewFullSizeButton}>
+          <Button
+            name="view-full-size"
+            variant="secondary"
+            size={1}
+            onClick={() => onViewFullSize()}
+          >
+            View Image
+          </Button>
+        </div>
+      </div>
+    </Container>
+  );
+}

frontend/src/components/upload/MetadataFormSection.tsx

@@ -0,0 +1,451 @@
+import { Container, TextInput, SelectInput, MultiSelectInput } from '@ifrc-go/ui';
+import styles from '../../pages/UploadPage/UploadPage.module.css';
+
+interface MetadataFormSectionProps {
+  files: File[];
+  imageType: string;
+  title: string;
+  source: string;
+  eventType: string;
+  epsg: string;
+  countries: string[];
+  centerLon: string;
+  centerLat: string;
+  amslM: string;
+  aglM: string;
+  headingDeg: string;
+  yawDeg: string;
+  pitchDeg: string;
+  rollDeg: string;
+  rtkFix: boolean;
+  stdHM: string;
+  stdVM: string;
+  metadataArray: Array<{
+    source: string;
+    eventType: string;
+    epsg: string;
+    countries: string[];
+    centerLon: string;
+    centerLat: string;
+    amslM: string;
+    aglM: string;
+    headingDeg: string;
+    yawDeg: string;
+    pitchDeg: string;
+    rollDeg: string;
+    rtkFix: boolean;
+    stdHM: string;
+    stdVM: string;
+  }>;
+  sources: {s_code: string, label: string}[];
+  types: {t_code: string, label: string}[];
+  spatialReferences: {epsg: string, srid: string, proj4: string, wkt: string}[];
+  imageTypes: {image_type: string, label: string}[];
+  countriesOptions: {c_code: string, label: string, r_code: string}[];
+  onTitleChange: (value: string | undefined) => void;
+  onSourceChange: (value: string | undefined) => void;
+  onEventTypeChange: (value: string | undefined) => void;
+  onEpsgChange: (value: string | undefined) => void;
+  onCountriesChange: (value: string[] | undefined) => void;
+  onCenterLonChange: (value: string | undefined) => void;
+  onCenterLatChange: (value: string | undefined) => void;
+  onAmslMChange: (value: string | undefined) => void;
+  onAglMChange: (value: string | undefined) => void;
+  onHeadingDegChange: (value: string | undefined) => void;
+  onYawDegChange: (value: string | undefined) => void;
+  onPitchDegChange: (value: string | undefined) => void;
+  onRollDegChange: (value: string | undefined) => void;
+  onRtkFixChange: (value: boolean | undefined) => void;
+  onStdHMChange: (value: string | undefined) => void;
+  onStdVMChange: (value: string | undefined) => void;
+  onImageTypeChange: (value: string | undefined) => void;
+  updateMetadataForImage: (index: number, field: string, value: any) => void;
+}
+
+export default function MetadataFormSection({
+  files,
+  imageType,
+  title,
+  source,
+  eventType,
+  epsg,
+  countries,
+  centerLon,
+  centerLat,
+  amslM,
+  aglM,
+  headingDeg,
+  yawDeg,
+  pitchDeg,
+  rollDeg,
+  rtkFix,
+  stdHM,
+  stdVM,
+  metadataArray,
+  sources,
+  types,
+  spatialReferences,
+  imageTypes,
+  countriesOptions,
+  onTitleChange,
+  onSourceChange,
+  onEventTypeChange,
+  onEpsgChange,
+  onCountriesChange,
+  onCenterLonChange,
+  onCenterLatChange,
+  onAmslMChange,
+  onAglMChange,
+  onHeadingDegChange,
+  onYawDegChange,
+  onPitchDegChange,
+  onRollDegChange,
+  onRtkFixChange,
+  onStdHMChange,
+  onStdVMChange,
+  onImageTypeChange,
+  updateMetadataForImage,
+}: MetadataFormSectionProps) {
+  if (files.length > 1) {
+    return (
+      <div>
+        <div className="mb-4">
+          <TextInput
+            label="Shared Title"
+            name="title"
+            value={title}
+            onChange={onTitleChange}
+            placeholder="Enter a title for all images..."
+            required
+          />
+        </div>
+        {files.map((file, index) => (
+          <div key={index} className="mb-6">
+            <Container
+              heading={`Image ${index + 1}: ${file.name}`}
+              headingLevel={4}
+              withHeaderBorder
+              withInternalPadding
+            >
+              <div className={styles.formGrid}>
+                {imageType !== 'drone_image' && (
+                  <SelectInput
+                    label="Source"
+                    name={`source_${index}`}
+                    value={metadataArray[index]?.source || ''}
+                    onChange={(value) => updateMetadataForImage(index, 'source', value)}
+                    options={sources}
+                    keySelector={(o) => o.s_code}
+                    labelSelector={(o) => o.label}
+                    required
+                  />
+                )}
+                <SelectInput
+                  label="Event Type"
+                  name={`event_type_${index}`}
+                  value={metadataArray[index]?.eventType || ''}
+                  onChange={(value) => updateMetadataForImage(index, 'eventType', value)}
+                  options={types}
+                  keySelector={(o) => o.t_code}
+                  labelSelector={(o) => o.label}
+                  required={imageType !== 'drone_image'}
+                />
+                <SelectInput
+                  label="EPSG"
+                  name={`epsg_${index}`}
+                  value={metadataArray[index]?.epsg || ''}
+                  onChange={(value) => updateMetadataForImage(index, 'epsg', value)}
+                  options={spatialReferences}
+                  keySelector={(o) => o.epsg}
+                  labelSelector={(o) => `${o.srid} (EPSG:${o.epsg})`}
+                  placeholder="EPSG"
+                  required={imageType !== 'drone_image'}
+                />
+                <MultiSelectInput
+                  label="Countries (optional)"
+                  name={`countries_${index}`}
+                  value={metadataArray[index]?.countries || []}
+                  onChange={(value) => updateMetadataForImage(index, 'countries', value)}
+                  options={countriesOptions}
+                  keySelector={(o) => o.c_code}
+                  labelSelector={(o) => o.label}
+                  placeholder="Select one or more"
+                />
+                
+                {imageType === 'drone_image' && (
+                  <>
+                    <div className={styles.droneMetadataSection}>
+                      <h4 className={styles.droneMetadataHeading}>Drone Flight Data</h4>
+                      <div className={styles.droneMetadataGrid}>
+                        <TextInput
+                          label="Center Longitude"
+                          name={`center_lon_${index}`}
+                          value={metadataArray[index]?.centerLon || ''}
+                          onChange={(value) => updateMetadataForImage(index, 'centerLon', value)}
+                          placeholder="e.g., -122.4194"
+                          step="any"
+                        />
+                        <TextInput
+                          label="Center Latitude"
+                          name={`center_lat_${index}`}
+                          value={metadataArray[index]?.centerLat || ''}
+                          onChange={(value) => updateMetadataForImage(index, 'centerLat', value)}
+                          placeholder="e.g., 37.7749"
+                          step="any"
+                        />
+                        <TextInput
+                          label="Altitude AMSL (m)"
+                          name={`amsl_m_${index}`}
+                          value={metadataArray[index]?.amslM || ''}
+                          onChange={(value) => updateMetadataForImage(index, 'amslM', value)}
+                          placeholder="e.g., 100.5"
+                          step="any"
+                        />
+                        <TextInput
+                          label="Altitude AGL (m)"
+                          name={`agl_m_${index}`}
+                          value={metadataArray[index]?.aglM || ''}
+                          onChange={(value) => updateMetadataForImage(index, 'aglM', value)}
+                          placeholder="e.g., 50.2"
+                          step="any"
+                        />
+                        <TextInput
+                          label="Heading (degrees)"
+                          name={`heading_deg_${index}`}
+                          value={metadataArray[index]?.headingDeg || ''}
+                          onChange={(value) => updateMetadataForImage(index, 'headingDeg', value)}
+                          placeholder="e.g., 180.0"
+                          step="any"
+                        />
+                        <TextInput
+                          label="Yaw (degrees)"
+                          name={`yaw_deg_${index}`}
+                          value={metadataArray[index]?.yawDeg || ''}
+                          onChange={(value) => updateMetadataForImage(index, 'yawDeg', value)}
+                          placeholder="e.g., 90.0"
+                          step="any"
+                        />
+                        <TextInput
+                          label="Pitch (degrees)"
+                          name={`pitch_deg_${index}`}
+                          value={metadataArray[index]?.pitchDeg || ''}
+                          onChange={(value) => updateMetadataForImage(index, 'pitchDeg', value)}
+                          placeholder="e.g., 0.0"
+                          step="any"
+                        />
+                        <TextInput
+                          label="Roll (degrees)"
+                          name={`roll_deg_${index}`}
+                          value={metadataArray[index]?.rollDeg || ''}
+                          onChange={(value) => updateMetadataForImage(index, 'rollDeg', value)}
+                          placeholder="e.g., 0.0"
+                          step="any"
+                        />
+                        <div className={styles.rtkFixContainer}>
+                          <label className={styles.rtkFixLabel}>
+                            <input
+                              type="checkbox"
+                              checked={metadataArray[index]?.rtkFix || false}
+                              onChange={(e) => updateMetadataForImage(index, 'rtkFix', e.target.checked)}
+                              className={styles.rtkFixCheckbox}
+                            />
+                            RTK Fix Available
+                          </label>
+                        </div>
+                        <TextInput
+                          label="Horizontal Std Dev (m)"
+                          name={`std_h_m_${index}`}
+                          value={metadataArray[index]?.stdHM || ''}
+                          onChange={(value) => updateMetadataForImage(index, 'stdHM', value)}
+                          placeholder="e.g., 0.1"
+                          step="any"
+                        />
+                        <TextInput
+                          label="Vertical Std Dev (m)"
+                          name={`std_v_m_${index}`}
+                          value={metadataArray[index]?.stdVM || ''}
+                          onChange={(value) => updateMetadataForImage(index, 'stdVM', value)}
+                          placeholder="e.g., 0.2"
+                          step="any"
+                        />
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            </Container>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.formGrid}>
+      <div className={styles.titleField}>
+        <TextInput
+          label="Title"
+          name="title"
+          value={title}
+          onChange={onTitleChange}
+          placeholder="Enter a title for this map..."
+          required
+        />
+      </div>
+      {imageType !== 'drone_image' && (
+        <SelectInput
+          label="Source"
+          name="source"
+          value={source}
+          onChange={onSourceChange}
+          options={sources}
+          keySelector={(o) => o.s_code}
+          labelSelector={(o) => o.label}
+          required
+        />
+      )}
+      <SelectInput
+        label="Event Type"
+        name="event_type"
+        value={eventType}
+        onChange={onEventTypeChange}
+        options={types}
+        keySelector={(o) => o.t_code}
+        labelSelector={(o) => o.label}
+        required={imageType !== 'drone_image'}
+      />
+      <SelectInput
+        label="EPSG"
+        name="epsg"
+        value={epsg}
+        onChange={onEpsgChange}
+        options={spatialReferences}
+        keySelector={(o) => o.epsg}
+        labelSelector={(o) => `${o.srid} (EPSG:${o.epsg})`}
+        placeholder="EPSG"
+        required={imageType !== 'drone_image'}
+      />
+      <SelectInput
+        label="Image Type"
+        name="image_type"
+        value={imageType}
+        onChange={onImageTypeChange}
+        options={imageTypes}
+        keySelector={(o) => o.image_type}
+        labelSelector={(o) => o.label}
+        required
+      />
+      <MultiSelectInput
+        label="Countries (optional)"
+        name="countries"
+        value={countries}
+        onChange={onCountriesChange}
+        options={countriesOptions}
+        keySelector={(o) => o.c_code}
+        labelSelector={(o) => o.label}
+        placeholder="Select one or more"
+      />
+      
+      {imageType === 'drone_image' && (
+        <>
+          <div className={styles.droneMetadataSection}>
+            <h4 className={styles.droneMetadataHeading}>Drone Flight Data</h4>
+            <div className={styles.droneMetadataGrid}>
+              <TextInput
+                label="Center Longitude"
+                name="center_lon"
+                value={centerLon}
+                onChange={onCenterLonChange}
+                placeholder="e.g., -122.4194"
+                step="any"
+              />
+              <TextInput
+                label="Center Latitude"
+                name="center_lat"
+                value={centerLat}
+                onChange={onCenterLatChange}
+                placeholder="e.g., 37.7749"
+                step="any"
+              />
+              <TextInput
+                label="Altitude AMSL (m)"
+                name="amsl_m"
+                value={amslM}
+                onChange={onAmslMChange}
+                placeholder="e.g., 100.5"
+                step="any"
+              />
+              <TextInput
+                label="Altitude AGL (m)"
+                name="agl_m"
+                value={aglM}
+                onChange={onAglMChange}
+                placeholder="e.g., 50.2"
+                step="any"
+              />
+              <TextInput
+                label="Heading (degrees)"
+                name="heading_deg"
+                value={headingDeg}
+                onChange={onHeadingDegChange}
+                placeholder="e.g., 180.0"
+                step="any"
+              />
+              <TextInput
+                label="Yaw (degrees)"
+                name="yaw_deg"
+                value={yawDeg}
+                onChange={onYawDegChange}
+                placeholder="e.g., 90.0"
+                step="any"
+              />
+              <TextInput
+                label="Pitch (degrees)"
+                name="pitch_deg"
+                value={pitchDeg}
+                onChange={onPitchDegChange}
+                placeholder="e.g., 0.0"
+                step="any"
+              />
+              <TextInput
+                label="Roll (degrees)"
+                name="roll_deg"
+                value={rollDeg}
+                onChange={onRollDegChange}
+                placeholder="e.g., 0.0"
+                step="any"
+              />
+              <div className={styles.rtkFixContainer}>
+                <label className={styles.rtkFixLabel}>
+                  <input
+                    type="checkbox"
+                    checked={rtkFix}
+                    onChange={(e) => onRtkFixChange(e.target.checked)}
+                    className={styles.rtkFixCheckbox}
+                  />
+                  RTK Fix Available
+                </label>
+              </div>
+              <TextInput
+                label="Horizontal Std Dev (m)"
+                name="std_h_m"
+                value={stdHM}
+                onChange={onStdHMChange}
+                placeholder="e.g., 0.1"
+                step="any"
+              />
+              <TextInput
+                label="Vertical Std Dev (m)"
+                name="std_v_m"
+                value={stdVM}
+                onChange={onStdVMChange}
+                placeholder="e.g., 0.2"
+                step="any"
+              />
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/components/upload/ModalComponents.tsx

@@ -0,0 +1,380 @@
+import { Button, Spinner } from '@ifrc-go/ui';
+import styles from '../../pages/UploadPage/UploadPage.module.css';
+
+interface FullSizeImageModalProps {
+  isOpen: boolean;
+  imageUrl: string | null;
+  preview: string | null;
+  selectedImageData?: { file: File; index: number } | null;
+  onClose: () => void;
+}
+
+export function FullSizeImageModal({ isOpen, imageUrl, preview, selectedImageData, onClose }: FullSizeImageModalProps) {
+  if (!isOpen) return null;
+
+  // Determine which image to show
+  let imageSrc: string | undefined;
+  let imageAlt: string;
+
+  if (selectedImageData) {
+    // Show specific image from multi-upload
+    imageSrc = URL.createObjectURL(selectedImageData.file);
+    imageAlt = `Image ${selectedImageData.index + 1}: ${selectedImageData.file.name}`;
+  } else {
+    // Show single image (backward compatibility)
+    imageSrc = imageUrl || preview || undefined;
+    imageAlt = "Full size map";
+  }
+
+  return (
+    <div className={styles.fullSizeModalOverlay} onClick={onClose}>
+      <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.fullSizeModalHeader}>
+          <Button
+            name="close-modal"
+            variant="tertiary"
+            size={1}
+            onClick={onClose}
+          >
+            ✕
+          </Button>
+        </div>
+        <div className={styles.fullSizeModalImage}>
+          <img
+            src={imageSrc}
+            alt={imageAlt}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface RatingWarningModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function RatingWarningModal({ isOpen, onClose }: RatingWarningModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.fullSizeModalOverlay} onClick={onClose}>
+      <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.ratingWarningContent}>
+          <h3 className={styles.ratingWarningTitle}>Please Confirm Your Ratings</h3>
+          <p className={styles.ratingWarningText}>
+            You must confirm your performance ratings before submitting. Please go back to the rating section and click "Confirm Ratings".
+          </p>
+          <div className={styles.ratingWarningButtons}>
+            <Button
+              name="close-warning"
+              variant="secondary"
+              onClick={onClose}
+            >
+              Close
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface DeleteConfirmModalProps {
+  isOpen: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function DeleteConfirmModal({ isOpen, onConfirm, onCancel }: DeleteConfirmModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.fullSizeModalOverlay} onClick={onCancel}>
+      <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.ratingWarningContent}>
+          <h3 className={styles.ratingWarningTitle}>Delete Image?</h3>
+          <p className={styles.ratingWarningText}>
+            This action cannot be undone. Are you sure you want to delete this uploaded image?
+          </p>
+          <div className={styles.ratingWarningButtons}>
+            <Button
+              name="confirm-delete"
+              variant="secondary"
+              onClick={onConfirm}
+            >
+              Delete
+            </Button>
+            <Button
+              name="cancel-delete"
+              variant="tertiary"
+              onClick={onCancel}
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface NavigationConfirmModalProps {
+  isOpen: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function NavigationConfirmModal({ isOpen, onConfirm, onCancel }: NavigationConfirmModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.fullSizeModalOverlay} onClick={onCancel}>
+      <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.ratingWarningContent}>
+          <h3 className={styles.ratingWarningTitle}>Leave Page?</h3>
+          <p className={styles.ratingWarningText}>
+            Your uploaded image will be deleted if you leave this page. Are you sure you want to continue?
+          </p>
+          <div className={styles.ratingWarningButtons}>
+            <Button
+              name="confirm-navigation"
+              variant="secondary"
+              onClick={onConfirm}
+            >
+              Leave Page
+            </Button>
+            <Button
+              name="cancel-navigation"
+              variant="tertiary"
+              onClick={onCancel}
+            >
+              Stay
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface FallbackNotificationModalProps {
+  isOpen: boolean;
+  fallbackInfo: {
+    originalModel: string;
+    fallbackModel: string;
+    reason: string;
+  } | null;
+  onClose: () => void;
+}
+
+export function FallbackNotificationModal({ isOpen, fallbackInfo, onClose }: FallbackNotificationModalProps) {
+  if (!isOpen || !fallbackInfo) return null;
+
+  return (
+    <div className={styles.fullSizeModalOverlay} onClick={onClose}>
+      <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.ratingWarningContent}>
+          <h3 className={styles.ratingWarningTitle}>Model Changed</h3>
+          <p className={styles.ratingWarningText}>
+            {fallbackInfo.originalModel} is currently unavailable. 
+            We've automatically switched to {fallbackInfo.fallbackModel} to complete your request.
+          </p>
+          <div className={styles.ratingWarningButtons}>
+            <Button
+              name="close-fallback"
+              variant="secondary"
+              onClick={onClose}
+            >
+              Got it
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface PreprocessingNotificationModalProps {
+  isOpen: boolean;
+  preprocessingInfo: {
+    original_filename: string;
+    processed_filename: string;
+    original_mime_type: string;
+    processed_mime_type: string;
+    was_preprocessed: boolean;
+    error?: string;
+  } | null;
+  onClose: () => void;
+}
+
+export function PreprocessingNotificationModal({ isOpen, preprocessingInfo, onClose }: PreprocessingNotificationModalProps) {
+  if (!isOpen || !preprocessingInfo) return null;
+
+  return (
+    <div className={styles.fullSizeModalOverlay} onClick={onClose}>
+      <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.ratingWarningContent}>
+          <h3 className={styles.ratingWarningTitle}>File Converted</h3>
+          <p className={styles.ratingWarningText}>
+            Your file <strong>{preprocessingInfo.original_filename}</strong> has been converted from 
+            <strong> {preprocessingInfo.original_mime_type}</strong> to 
+            <strong> {preprocessingInfo.processed_mime_type}</strong> for optimal processing.
+            <br /><br />
+            This conversion ensures your file is in the best format for our AI models to analyze.
+          </p>
+          <div className={styles.ratingWarningButtons}>
+            <Button
+              name="close-preprocessing"
+              variant="secondary"
+              onClick={onClose}
+            >
+              Got it
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface PreprocessingModalProps {
+  isOpen: boolean;
+  preprocessingFile: File | null;
+  isPreprocessing: boolean;
+  preprocessingProgress: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function PreprocessingModal({ 
+  isOpen, 
+  preprocessingFile, 
+  isPreprocessing, 
+  preprocessingProgress, 
+  onConfirm, 
+  onCancel 
+}: PreprocessingModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.fullSizeModalOverlay} onClick={isPreprocessing ? undefined : onCancel}>
+      <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.ratingWarningContent}>
+          <h3 className={styles.ratingWarningTitle}>File Conversion Required</h3>
+          <p className={styles.ratingWarningText}>
+            The file you selected will be converted to PNG format.
+            This ensures optimal compatibility and processing by our AI models.
+          </p>
+          {!isPreprocessing && (
+            <div className={styles.ratingWarningButtons}>
+              <Button
+                name="confirm-preprocessing"
+                variant="secondary"
+                onClick={onConfirm}
+              >
+                Convert File
+              </Button>
+              <Button
+                name="cancel-preprocessing"
+                variant="tertiary"
+                onClick={onCancel}
+              >
+                Cancel
+              </Button>
+            </div>
+          )}
+          {isPreprocessing && (
+            <div className={styles.preprocessingProgress}>
+              <p>{preprocessingProgress}</p>
+              <Spinner className="text-ifrcRed" />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface UnsupportedFormatModalProps {
+  isOpen: boolean;
+  unsupportedFile: File | null;
+  onClose: () => void;
+}
+
+export function UnsupportedFormatModal({ isOpen, unsupportedFile, onClose }: UnsupportedFormatModalProps) {
+  if (!isOpen || !unsupportedFile) return null;
+
+  return (
+    <div className={styles.fullSizeModalOverlay} onClick={onClose}>
+      <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.ratingWarningContent}>
+          <h3 className={styles.ratingWarningTitle}>Unsupported File Format</h3>
+          <p className={styles.ratingWarningText}>
+            The file <strong>{unsupportedFile.name}</strong> is not supported for upload.
+            <br /><br />
+            <strong>Supported formats:</strong>
+            <br />• Images: JPEG, PNG, TIFF, HEIC, WebP, GIF
+            <br />• Documents: PDF (will be converted to image)
+            <br /><br />
+            <strong>Recommendation:</strong> Convert your file to JPEG or PNG format for best compatibility.
+          </p>
+          <div className={styles.ratingWarningButtons}>
+            <Button
+              name="close-unsupported"
+              variant="secondary"
+              onClick={onClose}
+            >
+              Got it
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface FileSizeWarningModalProps {
+  isOpen: boolean;
+  oversizedFile: File | null;
+  onClose: () => void;
+  onCancel: () => void;
+}
+
+export function FileSizeWarningModal({ isOpen, oversizedFile, onClose, onCancel }: FileSizeWarningModalProps) {
+  if (!isOpen || !oversizedFile) return null;
+
+  return (
+    <div className={styles.lightModalOverlay} onClick={onCancel}>
+      <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.ratingWarningContent}>
+          <h3 className={styles.ratingWarningTitle}>File Size Warning</h3>
+          <p className={styles.ratingWarningText}>
+            The file <strong>{oversizedFile.name}</strong> is large ({(oversizedFile.size / (1024 * 1024)).toFixed(1)}MB).
+            <br /><br />
+            <strong>Warning:</strong> This file size might exceed the limits of the AI models we use.
+            <br /><br />
+            You can still proceed, but consider using a smaller file if you encounter issues.
+          </p>
+          <div className={styles.ratingWarningButtons}>
+            <Button
+              name="continue-size-warning"
+              variant="secondary"
+              onClick={onClose}
+            >
+              Continue
+            </Button>
+            <Button
+              name="cancel-size-warning"
+              variant="tertiary"
+              onClick={onCancel}
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/upload/RatingSection.tsx

@@ -0,0 +1,63 @@
+import { Button, Container } from '@ifrc-go/ui';
+import styles from '../../pages/UploadPage/UploadPage.module.css';
+
+interface RatingSectionProps {
+  isPerformanceConfirmed: boolean;
+  scores: {
+    accuracy: number;
+    context: number;
+    usability: number;
+  };
+  onScoreChange: (key: 'accuracy' | 'context' | 'usability', value: number) => void;
+  onConfirmRatings: () => void;
+  onEditRatings: () => void;
+}
+
+export default function RatingSection({
+  isPerformanceConfirmed,
+  scores,
+  onScoreChange,
+  onConfirmRatings,
+  onEditRatings,
+}: RatingSectionProps) {
+  // Don't render anything if ratings are confirmed
+  if (isPerformanceConfirmed) {
+    return null;
+  }
+
+  return (
+    <Container
+      heading="AI Performance Rating"
+      headingLevel={3}
+      withHeaderBorder
+      withInternalPadding
+    >
+      <div className={styles.ratingContent}>
+        <p className={styles.ratingDescription}>How well did the AI perform on the task?</p>
+        {(['accuracy', 'context', 'usability'] as const).map((k) => (
+          <div key={k} className={styles.ratingSlider}>
+            <label className={styles.ratingLabel}>{k}</label>
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={scores[k]}
+              onChange={(e) => onScoreChange(k, Number(e.target.value))}
+              className={styles.ratingInput}
+            />
+            <span className={styles.ratingValue}>{scores[k]}</span>
+          </div>
+        ))}
+        <div className={styles.confirmButtonContainer}>
+          <Button
+            name="confirm-ratings"
+            variant="secondary"
+            onClick={onConfirmRatings}
+          >
+            Confirm Ratings
+          </Button>
+        </div>
+      </div>
+    </Container>
+  );
+}

frontend/src/components/upload/index.ts

@@ -0,0 +1,18 @@
+export { default as FileUploadSection } from './FileUploadSection';
+export { default as ImagePreviewSection } from './ImagePreviewSection';
+export { default as MetadataFormSection } from './MetadataFormSection';
+export { default as RatingSection } from './RatingSection';
+export { default as GeneratedTextSection } from './GeneratedTextSection';
+export {
+  FullSizeImageModal,
+  RatingWarningModal,
+  DeleteConfirmModal,
+  NavigationConfirmModal,
+  FallbackNotificationModal,
+  PreprocessingNotificationModal,
+  PreprocessingModal,
+  UnsupportedFormatModal,
+  FileSizeWarningModal,
+} from './ModalComponents';
+
+

frontend/src/contexts/FilterContext.tsx

@@ -9,6 +9,7 @@ interface FilterContextType {
   regionFilter: string;
   countryFilter: string;
   imageTypeFilter: string;
+  uploadTypeFilter: string;
   showReferenceExamples: boolean;
   
   // Setter functions
@@ -18,6 +19,7 @@ interface FilterContextType {
   setRegionFilter: (value: string) => void;
   setCountryFilter: (value: string) => void;
   setImageTypeFilter: (value: string) => void;
+  setUploadTypeFilter: (value: string) => void;
   setShowReferenceExamples: (value: boolean) => void;
   
   // Utility function to clear all filters
@@ -37,6 +39,7 @@ export const FilterProvider: React.FC<FilterProviderProps> = ({ children }) => {
   const [regionFilter, setRegionFilter] = useState('');
   const [countryFilter, setCountryFilter] = useState('');
   const [imageTypeFilter, setImageTypeFilter] = useState('');
+  const [uploadTypeFilter, setUploadTypeFilter] = useState('');
   const [showReferenceExamples, setShowReferenceExamples] = useState(false);
 
   const clearAllFilters = () => {
@@ -46,6 +49,7 @@ export const FilterProvider: React.FC<FilterProviderProps> = ({ children }) => {
     setRegionFilter('');
     setCountryFilter('');
     setImageTypeFilter('');
+    setUploadTypeFilter('');
     setShowReferenceExamples(false);
   };
 
@@ -56,6 +60,7 @@ export const FilterProvider: React.FC<FilterProviderProps> = ({ children }) => {
     regionFilter,
     countryFilter,
     imageTypeFilter,
+    uploadTypeFilter,
     showReferenceExamples,
     setSearch,
     setSrcFilter,
@@ -63,6 +68,7 @@ export const FilterProvider: React.FC<FilterProviderProps> = ({ children }) => {
     setRegionFilter,
     setCountryFilter,
     setImageTypeFilter,
+    setUploadTypeFilter,
     setShowReferenceExamples,
     clearAllFilters,
   };

frontend/src/pages/ExplorePage/ExplorePage.tsx

@@ -30,6 +30,9 @@ interface ImageWithCaptionOut {
   epsg: string;
   image_type: string;
   countries: {c_code: string, label: string, r_code: string}[];
+  // Multi-upload fields
+  all_image_ids?: string[];
+  image_count?: number;
 }
 
 export default function ExplorePage() {
@@ -46,6 +49,7 @@ export default function ExplorePage() {
     regionFilter, 
     countryFilter, 
     imageTypeFilter, 
+    uploadTypeFilter,
     showReferenceExamples,
     setShowReferenceExamples
   } = useFilterContext();
@@ -73,14 +77,20 @@ export default function ExplorePage() {
 
   const fetchCaptions = () => {
     setIsLoadingContent(true);
-    fetch('/api/captions/legacy')
+    fetch('/api/images/grouped')
       .then(r => {
         if (!r.ok) {
-          console.error('ExplorePage: Legacy endpoint failed, trying regular images endpoint');
-          // Fallback to regular images endpoint
-          return fetch('/api/images').then(r2 => {
+          console.error('ExplorePage: Grouped endpoint failed, trying legacy endpoint');
+          // Fallback to legacy endpoint for backward compatibility
+          return fetch('/api/captions/legacy').then(r2 => {
             if (!r2.ok) {
-              throw new Error(`HTTP ${r2.status}: ${r2.statusText}`);
+              console.error('ExplorePage: Legacy endpoint failed, trying regular images endpoint');
+              return fetch('/api/images').then(r3 => {
+                if (!r3.ok) {
+                  throw new Error(`HTTP ${r3.status}: ${r3.statusText}`);
+                }
+                return r3.json();
+              });
             }
             return r2.json();
           });
@@ -195,18 +205,24 @@ export default function ExplorePage() {
         c.source?.toLowerCase().includes(search.toLowerCase()) ||
         c.event_type?.toLowerCase().includes(search.toLowerCase());
       
-      const matchesSource = !srcFilter || c.source === srcFilter;
-      const matchesCategory = !catFilter || c.event_type === catFilter;
+      // Handle combined metadata from multi-upload items
+      const sourceMatches = !srcFilter || 
+        (c.source && c.source.split(', ').some(s => s.trim() === srcFilter));
+      const categoryMatches = !catFilter || 
+        (c.event_type && c.event_type.split(', ').some(e => e.trim() === catFilter));
       const matchesRegion = !regionFilter || 
         c.countries.some(country => country.r_code === regionFilter);
       const matchesCountry = !countryFilter || 
         c.countries.some(country => country.c_code === countryFilter);
       const matchesImageType = !imageTypeFilter || c.image_type === imageTypeFilter;
+      const matchesUploadType = !uploadTypeFilter || 
+        (uploadTypeFilter === 'single' && (!c.image_count || c.image_count <= 1)) ||
+        (uploadTypeFilter === 'multiple' && c.image_count && c.image_count > 1);
       const matchesReferenceExamples = !showReferenceExamples || c.starred === true;
       
-      return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry && matchesImageType && matchesReferenceExamples;
+      return matchesSearch && sourceMatches && categoryMatches && matchesRegion && matchesCountry && matchesImageType && matchesUploadType && matchesReferenceExamples;
     });
-  }, [captions, search, srcFilter, catFilter, regionFilter, countryFilter, imageTypeFilter, showReferenceExamples]);
+  }, [captions, search, srcFilter, catFilter, regionFilter, countryFilter, imageTypeFilter, uploadTypeFilter, showReferenceExamples]);
 
   const exportDataset = async (images: ImageWithCaptionOut[], mode: 'standard' | 'fine-tuning' = 'fine-tuning') => {
     if (images.length === 0) {
@@ -230,116 +246,120 @@ export default function ExplorePage() {
         const crisisImagesFolder = crisisFolder?.folder('images');
         
         if (crisisImagesFolder) {
-          const crisisImagePromises = crisisMaps.map(async (image, index) => {
+          // Process each caption (which may contain multiple images)
+          let jsonIndex = 1;
+          
+          for (const caption of crisisMaps) {
             try {
-              const response = await fetch(`/api/images/${image.image_id}/file`);
-              if (!response.ok) throw new Error(`Failed to fetch image ${image.image_id}`);
+              // Get all image IDs for this caption
+              const imageIds = caption.image_count && caption.image_count > 1 
+                ? caption.all_image_ids || [caption.image_id]
+                : [caption.image_id];
+              
+              // Fetch all images for this caption
+              const imagePromises = imageIds.map(async (imageId, imgIndex) => {
+                try {
+                  const response = await fetch(`/api/images/${imageId}/file`);
+                  if (!response.ok) throw new Error(`Failed to fetch image ${imageId}`);
               
               const blob = await response.blob();
-              const fileExtension = image.file_key.split('.').pop() || 'jpg';
-              const fileName = `${String(index + 1).padStart(4, '0')}.${fileExtension}`;
+                  const fileExtension = caption.file_key.split('.').pop() || 'jpg';
+                  const fileName = `${String(jsonIndex).padStart(4, '0')}_${String(imgIndex + 1).padStart(2, '0')}.${fileExtension}`;
               
               crisisImagesFolder.file(fileName, blob);
-              return { success: true, fileName, image };
+                  return { success: true, fileName, imageId };
             } catch (error) {
-              console.error(`Failed to process image ${image.image_id}:`, error);
-              return { success: false, fileName: '', image };
+                  console.error(`Failed to process image ${imageId}:`, error);
+                  return { success: false, fileName: '', imageId };
             }
           });
 
-          const crisisImageResults = await Promise.all(crisisImagePromises);
-          const successfulCrisisImages = crisisImageResults.filter(result => result.success);
+              const imageResults = await Promise.all(imagePromises);
+              const successfulImages = imageResults.filter(result => result.success);
 
+                             if (successfulImages.length > 0) {
           if (mode === 'fine-tuning') {
-            const crisisTrainData: any[] = [];
-            const crisisTestData: any[] = [];
-            const crisisValData: any[] = [];
-
-            const crisisImagesBySource = new Map<string, any[]>();
-            successfulCrisisImages.forEach(result => {
-              const source = result.image.source || 'unknown';
-              if (!crisisImagesBySource.has(source)) {
-                crisisImagesBySource.set(source, []);
-              }
-              crisisImagesBySource.get(source)!.push(result);
-            });
-
-            crisisImagesBySource.forEach((images, _source) => {
-              const totalImages = images.length;
-              const trainCount = Math.floor(totalImages * (80 / 100));
-              const testCount = Math.floor(totalImages * (10 / 100));
-
-              const shuffledImages = [...images].sort(() => Math.random() - 0.5);
-
-              crisisTrainData.push(...shuffledImages.slice(0, trainCount).map(result => ({
-                image: `images/${result.fileName}`,
-                caption: result.image.edited || result.image.generated || '',
-                metadata: {
-                  image_id: result.image.image_id,
-                  title: result.image.title,
-                  source: result.image.source,
-                  event_type: result.image.event_type,
-                  image_type: result.image.image_type,
-                  countries: result.image.countries,
-                  starred: result.image.starred
-                }
-              })));
-
-              crisisTestData.push(...shuffledImages.slice(trainCount, trainCount + testCount).map(result => ({
-                image: `images/${result.fileName}`,
-                caption: result.image.edited || result.image.generated || '',
-                metadata: {
-                  image_id: result.image.image_id,
-                  title: result.image.title,
-                  source: result.image.source,
-                  event_type: result.image.event_type,
-                  image_type: result.image.image_type,
-                  countries: result.image.countries,
-                  starred: result.image.starred
-                }
-              })));
-
-              crisisValData.push(...shuffledImages.slice(trainCount + testCount).map(result => ({
-                image: `images/${result.fileName}`,
-                caption: result.image.edited || result.image.generated || '',
-                metadata: {
-                  image_id: result.image.image_id,
-                  title: result.image.title,
-                  source: result.image.source,
-                  event_type: result.image.event_type,
-                  image_type: result.image.image_type,
-                  countries: result.image.countries,
-                  starred: result.image.starred
-                }
-              })));
-            });
-
-            // Add JSONL files to crisis folder
-            if (crisisFolder) {
-              crisisFolder.file('train.jsonl', JSON.stringify(crisisTrainData, null, 2));
-              crisisFolder.file('test.jsonl', JSON.stringify(crisisTestData, null, 2));
-              crisisFolder.file('val.jsonl', JSON.stringify(crisisValData, null, 2));
+                   // For fine-tuning, create one entry per caption with all images
+                   const imageFiles = successfulImages.map(result => `images/${result.fileName}`);
+                   
+                   const random = Math.random();
+                   const entry = {
+                     image: imageFiles.length === 1 ? imageFiles[0] : imageFiles,
+                     caption: caption.edited || caption.generated || '',
+                     metadata: {
+                       image_id: imageIds,
+                       title: caption.title,
+                       source: caption.source,
+                       event_type: caption.event_type,
+                       image_type: caption.image_type,
+                       countries: caption.countries,
+                       starred: caption.starred,
+                       image_count: caption.image_count || 1
+                     }
+                   };
+
+                   // Store the entry for later processing
+                   if (!crisisFolder) continue;
+                   
+                   if (random < 0.8) {
+                     // Add to train data
+                     const trainFile = crisisFolder.file('train.jsonl');
+                     if (trainFile) {
+                       const existingData = await trainFile.async('string').then(data => JSON.parse(data || '[]')).catch(() => []);
+                       existingData.push(entry);
+                       crisisFolder.file('train.jsonl', JSON.stringify(existingData, null, 2));
+                     } else {
+                       crisisFolder.file('train.jsonl', JSON.stringify([entry], null, 2));
+                     }
+                   } else if (random < 0.9) {
+                     // Add to test data
+                     const testFile = crisisFolder.file('test.jsonl');
+                     if (testFile) {
+                       const existingData = await testFile.async('string').then(data => JSON.parse(data || '[]')).catch(() => []);
+                       existingData.push(entry);
+                       crisisFolder.file('test.jsonl', JSON.stringify(existingData, null, 2));
+                     } else {
+                       crisisFolder.file('test.jsonl', JSON.stringify([entry], null, 2));
+                     }
+                   } else {
+                     // Add to validation data
+                     const valFile = crisisFolder.file('val.jsonl');
+                     if (valFile) {
+                       const existingData = await valFile.async('string').then(data => JSON.parse(data || '[]')).catch(() => []);
+                       existingData.push(entry);
+                       crisisFolder.file('val.jsonl', JSON.stringify(existingData, null, 2));
+                     } else {
+                       crisisFolder.file('val.jsonl', JSON.stringify([entry], null, 2));
+                     }
             }
           } else {
-            successfulCrisisImages.forEach((result, index) => {
+                  // For standard mode, create one JSON file per caption
+                  const imageFiles = successfulImages.map(result => `images/${result.fileName}`);
               const jsonData = {
-                image: `images/${result.fileName}`,
-                caption: result.image.edited || result.image.generated || '',
+                    image: imageFiles.length === 1 ? imageFiles[0] : imageFiles,
+                    caption: caption.edited || caption.generated || '',
                 metadata: {
-                  image_id: result.image.image_id,
-                  title: result.image.title,
-                  source: result.image.source,
-                  event_type: result.image.event_type,
-                  image_type: result.image.image_type,
-                  countries: result.image.countries,
-                  starred: result.image.starred
+                      image_id: imageIds,
+                      title: caption.title,
+                      source: caption.source,
+                      event_type: caption.event_type,
+                      image_type: caption.image_type,
+                      countries: caption.countries,
+                      starred: caption.starred,
+                      image_count: caption.image_count || 1
                 }
               };
               
               if (crisisFolder) {
-                crisisFolder.file(`${String(index + 1).padStart(4, '0')}.json`, JSON.stringify(jsonData, null, 2));
+                    crisisFolder.file(`${String(jsonIndex).padStart(4, '0')}.json`, JSON.stringify(jsonData, null, 2));
+                  }
+                }
+                
+                jsonIndex++;
               }
-            });
+            } catch (error) {
+              console.error(`Failed to process caption ${caption.image_id}:`, error);
+            }
           }
         }
       }
@@ -350,115 +370,120 @@ export default function ExplorePage() {
         const droneImagesFolder = droneFolder?.folder('images');
         
         if (droneImagesFolder) {
-          const droneImagePromises = droneImages.map(async (image, index) => {
+          // Process each caption (which may contain multiple images)
+          let jsonIndex = 1;
+          
+          for (const caption of droneImages) {
             try {
-              const response = await fetch(`/api/images/${image.image_id}/file`);
-              if (!response.ok) throw new Error(`Failed to fetch image ${image.image_id}`);
+              // Get all image IDs for this caption
+              const imageIds = caption.image_count && caption.image_count > 1 
+                ? caption.all_image_ids || [caption.image_id]
+                : [caption.image_id];
+              
+              // Fetch all images for this caption
+              const imagePromises = imageIds.map(async (imageId, imgIndex) => {
+                try {
+                  const response = await fetch(`/api/images/${imageId}/file`);
+                  if (!response.ok) throw new Error(`Failed to fetch image ${imageId}`);
               
               const blob = await response.blob();
-              const fileExtension = image.file_key.split('.').pop() || 'jpg';
-              const fileName = `${String(index + 1).padStart(4, '0')}.${fileExtension}`;
+                  const fileExtension = caption.file_key.split('.').pop() || 'jpg';
+                  const fileName = `${String(jsonIndex).padStart(4, '0')}_${String(imgIndex + 1).padStart(2, '0')}.${fileExtension}`;
               
               droneImagesFolder.file(fileName, blob);
-              return { success: true, fileName, image };
+                  return { success: true, fileName, imageId };
             } catch (error) {
-              console.error(`Failed to process image ${image.image_id}:`, error);
-              return { success: false, fileName: '', image };
+                  console.error(`Failed to process image ${imageId}:`, error);
+                  return { success: false, fileName: '', imageId };
             }
           });
 
-          const droneImageResults = await Promise.all(droneImagePromises);
-          const successfulDroneImages = droneImageResults.filter(result => result.success);
+              const imageResults = await Promise.all(imagePromises);
+              const successfulImages = imageResults.filter(result => result.success);
 
+              if (successfulImages.length > 0) {
           if (mode === 'fine-tuning') {
-            const droneTrainData: any[] = [];
-            const droneTestData: any[] = [];
-            const droneValData: any[] = [];
-
-            const droneImagesByEventType = new Map<string, any[]>();
-            successfulDroneImages.forEach(result => {
-              const eventType = result.image.event_type || 'unknown';
-              if (!droneImagesByEventType.has(eventType)) {
-                droneImagesByEventType.set(eventType, []);
-              }
-              droneImagesByEventType.get(eventType)!.push(result);
-            });
-
-            droneImagesByEventType.forEach((images, _eventType) => {
-              const totalImages = images.length;
-              const trainCount = Math.floor(totalImages * (80 / 100));
-              const testCount = Math.floor(totalImages * (10 / 100));
-
-              const shuffledImages = [...images].sort(() => Math.random() - 0.5);
-
-              droneTrainData.push(...shuffledImages.slice(0, trainCount).map(result => ({
-                image: `images/${result.fileName}`,
-                caption: result.image.edited || result.image.generated || '',
-                metadata: {
-                  image_id: result.image.image_id,
-                  title: result.image.title,
-                  source: result.image.source,
-                  event_type: result.image.event_type,
-                  image_type: result.image.image_type,
-                  countries: result.image.countries,
-                  starred: result.image.starred
-                }
-              })));
-
-              droneTestData.push(...shuffledImages.slice(trainCount, trainCount + testCount).map(result => ({
-                image: `images/${result.fileName}`,
-                caption: result.image.edited || result.image.generated || '',
-                metadata: {
-                  image_id: result.image.image_id,
-                  title: result.image.title,
-                  source: result.image.source,
-                  event_type: result.image.event_type,
-                  image_type: result.image.image_type,
-                  countries: result.image.countries,
-                  starred: result.image.starred
-                }
-              })));
-
-              droneValData.push(...shuffledImages.slice(trainCount + testCount).map(result => ({
-                image: `images/${result.fileName}`,
-                caption: result.image.edited || result.image.generated || '',
-                metadata: {
-                  image_id: result.image.image_id,
-                  title: result.image.title,
-                  source: result.image.source,
-                  event_type: result.image.event_type,
-                  image_type: result.image.image_type,
-                  countries: result.image.countries,
-                  starred: result.image.starred
-                }
-              })));
-            });
-
-            if (droneFolder) {
-              droneFolder.file('train.jsonl', JSON.stringify(droneTrainData, null, 2));
-              droneFolder.file('test.jsonl', JSON.stringify(droneTestData, null, 2));
-              droneFolder.file('val.jsonl', JSON.stringify(droneValData, null, 2));
+                  // For fine-tuning, create one entry per caption with all images
+                  const imageFiles = successfulImages.map(result => `images/${result.fileName}`);
+                  
+                  const random = Math.random();
+                  const entry = {
+                    image: imageFiles.length === 1 ? imageFiles[0] : imageFiles,
+                    caption: caption.edited || caption.generated || '',
+                    metadata: {
+                      image_id: imageIds,
+                      title: caption.title,
+                      source: caption.source,
+                      event_type: caption.event_type,
+                      image_type: caption.image_type,
+                      countries: caption.countries,
+                      starred: caption.starred,
+                      image_count: caption.image_count || 1
+                    }
+                  };
+
+                  // Store the entry for later processing
+                  if (!droneFolder) continue;
+                  
+                  if (random < 0.8) {
+                    // Add to train data
+                    const trainFile = droneFolder.file('train.jsonl');
+                    if (trainFile) {
+                      const existingData = await trainFile.async('string').then(data => JSON.parse(data || '[]')).catch(() => []);
+                      existingData.push(entry);
+                      droneFolder.file('train.jsonl', JSON.stringify(existingData, null, 2));
+                    } else {
+                      droneFolder.file('train.jsonl', JSON.stringify([entry], null, 2));
+                    }
+                  } else if (random < 0.9) {
+                    // Add to test data
+                    const testFile = droneFolder.file('test.jsonl');
+                    if (testFile) {
+                      const existingData = await testFile.async('string').then(data => JSON.parse(data || '[]')).catch(() => []);
+                      existingData.push(entry);
+                      droneFolder.file('test.jsonl', JSON.stringify(existingData, null, 2));
+                    } else {
+                      droneFolder.file('test.jsonl', JSON.stringify([entry], null, 2));
+                    }
+                  } else {
+                    // Add to validation data
+                    const valFile = droneFolder.file('val.jsonl');
+                    if (valFile) {
+                      const existingData = await valFile.async('string').then(data => JSON.parse(data || '[]')).catch(() => []);
+                      existingData.push(entry);
+                      droneFolder.file('val.jsonl', JSON.stringify(existingData, null, 2));
+                    } else {
+                      droneFolder.file('val.jsonl', JSON.stringify([entry], null, 2));
+                    }
             }
           } else {
-            successfulDroneImages.forEach((result, index) => {
+                  // For standard mode, create one JSON file per caption
+                  const imageFiles = successfulImages.map(result => `images/${result.fileName}`);
               const jsonData = {
-                image: `images/${result.fileName}`,
-                caption: result.image.edited || result.image.generated || '',
+                    image: imageFiles.length === 1 ? imageFiles[0] : imageFiles,
+                    caption: caption.edited || caption.generated || '',
                 metadata: {
-                  image_id: result.image.image_id,
-                  title: result.image.title,
-                  source: result.image.source,
-                  event_type: result.image.event_type,
-                  image_type: result.image.image_type,
-                  countries: result.image.countries,
-                  starred: result.image.starred
+                      image_id: imageIds,
+                      title: caption.title,
+                      source: caption.source,
+                      event_type: caption.event_type,
+                      image_type: caption.image_type,
+                      countries: caption.countries,
+                      starred: caption.starred,
+                      image_count: caption.image_count || 1
                 }
               };
               
               if (droneFolder) {
-                droneFolder.file(`${String(index + 1).padStart(4, '0')}.json`, JSON.stringify(jsonData, null, 2));
+                    droneFolder.file(`${String(jsonIndex).padStart(4, '0')}.json`, JSON.stringify(jsonData, null, 2));
+                  }
+                }
+                
+                jsonIndex++;
               }
-            });
+            } catch (error) {
+              console.error(`Failed to process caption ${caption.image_id}:`, error);
+            }
           }
         }
       }
@@ -678,15 +703,31 @@ export default function ExplorePage() {
                             <div className={styles.metadataTags}>
                               {c.image_type !== 'drone_image' && (
                                 <span className={styles.metadataTagSource}>
-                                  {sources.find(s => s.s_code === c.source)?.label || c.source}
+                                  {c.source && c.source.includes(', ') 
+                                    ? c.source.split(', ').map(s => sources.find(src => src.s_code === s.trim())?.label || s.trim()).join(', ')
+                                    : sources.find(s => s.s_code === c.source)?.label || c.source
+                                  }
                                 </span>
                               )}
                               <span className={styles.metadataTagType}>
-                                {types.find(t => t.t_code === c.event_type)?.label || c.event_type}
+                                {c.event_type && c.event_type.includes(', ')
+                                  ? c.event_type.split(', ').map(e => types.find(t => t.t_code === e.trim())?.label || e.trim()).join(', ')
+                                  : types.find(t => t.t_code === c.event_type)?.label || c.event_type
+                                }
                               </span>
                               <span className={styles.metadataTag}>
                                 {imageTypes.find(it => it.image_type === c.image_type)?.label || c.image_type}
                               </span>
+                              {c.image_count && c.image_count > 1 && (
+                                <span className={styles.metadataTag} title={`Multi-upload with ${c.image_count} images`}>
+                                  📷 {c.image_count}
+                                </span>
+                              )}
+                              {(!c.image_count || c.image_count <= 1) && (
+                                <span className={styles.metadataTag} title="Single Upload">
+                                  Single
+                                </span>
+                              )}
                               {c.countries && c.countries.length > 0 && (
                                 <>
                                   <span className={styles.metadataTag}>
@@ -787,7 +828,7 @@ export default function ExplorePage() {
         }}
         filteredCount={filtered.length}
         totalCount={captions.length}
-        hasFilters={!!(search || srcFilter || catFilter || regionFilter || countryFilter || imageTypeFilter || showReferenceExamples)}
+        hasFilters={!!(search || srcFilter || catFilter || regionFilter || countryFilter || imageTypeFilter || uploadTypeFilter || showReferenceExamples)}
         crisisMapsCount={filtered.filter(img => img.image_type === 'crisis_map').length}
         droneImagesCount={filtered.filter(img => img.image_type === 'drone_image').length}
         isLoading={isExporting}

frontend/src/pages/MapDetailsPage/MapDetailPage.module.css

@@ -140,6 +140,18 @@
   }
 }
 
+/* Left column container for image and tags */
+.leftColumn {
+  display: flex;
+  flex-direction: column;
+  gap: var(--go-ui-spacing-lg);
+}
+
+/* Invisible wrapper for tags */
+.tagsWrapper {
+  /* No visual styling - just a logical container */
+}
+
 .detailsSection {
   display: flex;
   flex-direction: column;
@@ -348,3 +360,176 @@
   text-align: center;
   margin-bottom: var(--go-ui-spacing-lg);
 }
+
+/* Carousel styles for multi-upload */
+.carouselContainer {
+  position: relative;
+  width: 100%;
+}
+
+.carouselImageWrapper {
+  position: relative;
+  width: 100%;
+  background-color: var(--go-ui-color-gray-20);
+  border-radius: var(--go-ui-border-radius-lg);
+  overflow: hidden;
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  box-shadow: var(--go-ui-box-shadow-sm);
+  transition: box-shadow var(--go-ui-duration-transition-medium) ease;
+}
+
+.carouselImageWrapper:hover {
+  box-shadow: var(--go-ui-box-shadow-md);
+}
+
+.carouselImage {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  image-rendering: pixelated;
+  display: block;
+}
+
+.carouselNavigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--go-ui-spacing-md);
+  margin-top: var(--go-ui-spacing-md);
+  padding: var(--go-ui-spacing-sm);
+  background-color: var(--go-ui-color-gray-10);
+  border-radius: var(--go-ui-border-radius-md);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+.carouselButton {
+  background-color: var(--go-ui-color-white);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  border-radius: var(--go-ui-border-radius-md);
+  padding: var(--go-ui-spacing-sm);
+  transition: all var(--go-ui-duration-transition-fast) ease;
+  min-width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carouselButton:hover:not(:disabled) {
+  background-color: var(--go-ui-color-gray-20);
+  border-color: var(--go-ui-color-gray-40);
+  transform: translateY(-1px);
+}
+
+.carouselButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.carouselIndicators {
+  display: flex;
+  gap: var(--go-ui-spacing-xs);
+  align-items: center;
+}
+
+.carouselIndicator {
+  background-color: var(--go-ui-color-gray-30);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  border-radius: var(--go-ui-border-radius-sm);
+  padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
+  font-size: var(--go-ui-font-size-sm);
+  font-weight: var(--go-ui-font-weight-medium);
+  color: var(--go-ui-color-gray-70);
+  cursor: pointer;
+  transition: all var(--go-ui-duration-transition-fast) ease;
+  min-width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carouselIndicator:hover:not(:disabled) {
+  background-color: var(--go-ui-color-gray-40);
+  border-color: var(--go-ui-color-gray-50);
+  color: var(--go-ui-color-gray-90);
+}
+
+.carouselIndicatorActive {
+  background-color: var(--go-ui-color-red-90);
+  border-color: var(--go-ui-color-red-90);
+  color: var(--go-ui-color-white);
+}
+
+.carouselIndicatorActive:hover:not(:disabled) {
+  background-color: var(--go-ui-color-red-hover);
+  border-color: var(--go-ui-color-red-hover);
+  color: var(--go-ui-color-white);
+}
+
+.carouselIndicator:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.imageCounter {
+  text-align: center;
+  margin-top: var(--go-ui-spacing-sm);
+  font-size: var(--go-ui-font-size-sm);
+  font-weight: var(--go-ui-font-weight-medium);
+  color: var(--go-ui-color-gray-70);
+  background-color: var(--go-ui-color-gray-10);
+  padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
+  border-radius: var(--go-ui-border-radius-sm);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+/* Single image container */
+.singleImageContainer {
+  position: relative;
+  width: 100%;
+}
+
+/* View image button container */
+.viewImageButtonContainer {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--go-ui-spacing-md);
+  padding: var(--go-ui-spacing-sm);
+  background-color: var(--go-ui-color-gray-10);
+  border-radius: var(--go-ui-border-radius-md);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+/* Responsive adjustments for carousel */
+@media (max-width: 768px) {
+  .carouselNavigation {
+    flex-direction: column;
+    gap: var(--go-ui-spacing-sm);
+  }
+  
+  .carouselIndicators {
+    order: -1;
+    margin-bottom: var(--go-ui-spacing-sm);
+  }
+  
+  .carouselButton {
+    min-width: 36px;
+    height: 36px;
+  }
+  
+  .carouselIndicator {
+    min-width: 28px;
+    height: 28px;
+    font-size: var(--go-ui-font-size-xs);
+  }
+  
+  .imageCounter {
+    font-size: var(--go-ui-font-size-xs);
+  }
+  
+  .viewImageButtonContainer {
+    margin-top: var(--go-ui-spacing-sm);
+    padding: var(--go-ui-spacing-xs);
+  }
+}

frontend/src/pages/MapDetailsPage/MapDetailPage.tsx

@@ -6,6 +6,8 @@ import styles from './MapDetailPage.module.css';
 import { useFilterContext } from '../../hooks/useFilterContext';
 import { useAdmin } from '../../hooks/useAdmin';
 import ExportModal from '../../components/ExportModal';
+import { FullSizeImageModal } from '../../components/upload/ModalComponents';
+import FilterBar from '../../components/FilterBar';
 
 interface MapOut {
   image_id: string;
@@ -43,6 +45,9 @@ interface MapOut {
   starred?: boolean;
   created_at?: string;
   updated_at?: string;
+  // Multi-upload fields
+  all_image_ids?: string[];
+  image_count?: number;
 }
 
 export default function MapDetailPage() {
@@ -107,7 +112,16 @@ export default function MapDetailPage() {
   const [droneImagesSelected, setDroneImagesSelected] = useState(true);
   
   const [isDeleting, setIsDeleting] = useState(false);
-  const [showContributeConfirm, setShowContributeConfirm] = useState(false);
+
+  
+  // Full-size image modal state
+  const [showFullSizeModal, setShowFullSizeModal] = useState(false);
+  const [selectedImageForModal, setSelectedImageForModal] = useState<MapOut | null>(null);
+  
+  // Carousel state for multi-upload
+  const [allImages, setAllImages] = useState<MapOut[]>([]);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [isLoadingImages, setIsLoadingImages] = useState(false);
   
   const {
     search, setSearch,
@@ -116,6 +130,7 @@ export default function MapDetailPage() {
     regionFilter, setRegionFilter,
     countryFilter, setCountryFilter,
     imageTypeFilter, setImageTypeFilter,
+    uploadTypeFilter, setUploadTypeFilter,
     showReferenceExamples, setShowReferenceExamples,
     clearAllFilters
   } = useFilterContext();
@@ -158,6 +173,39 @@ export default function MapDetailPage() {
       const data = await response.json();
       setMap(data);
       
+      // If this is a multi-upload item, fetch all images
+      if (data.all_image_ids && data.all_image_ids.length > 1) {
+        await fetchAllImages(data.all_image_ids);
+      } else if (data.image_count && data.image_count > 1) {
+        // Multi-upload but no all_image_ids, try to fetch from grouped endpoint
+        console.log('Multi-upload detected but no all_image_ids, trying grouped endpoint');
+        try {
+          const groupedResponse = await fetch('/api/images/grouped');
+          if (groupedResponse.ok) {
+            const groupedData = await groupedResponse.json();
+            const matchingItem = groupedData.find((item: any) => 
+              item.all_image_ids && item.all_image_ids.includes(data.image_id)
+            );
+            if (matchingItem && matchingItem.all_image_ids) {
+              await fetchAllImages(matchingItem.all_image_ids);
+            } else {
+              setAllImages([data]);
+              setCurrentImageIndex(0);
+            }
+          } else {
+            setAllImages([data]);
+            setCurrentImageIndex(0);
+          }
+        } catch (err) {
+          console.error('Failed to fetch from grouped endpoint:', err);
+          setAllImages([data]);
+          setCurrentImageIndex(0);
+        }
+      } else {
+        setAllImages([data]);
+        setCurrentImageIndex(0);
+      }
+      
       await checkNavigationAvailability(id);
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : 'Unknown error occurred');
@@ -167,6 +215,64 @@ export default function MapDetailPage() {
     }
   }, []);
 
+  const fetchAllImages = useCallback(async (imageIds: string[]) => {
+    console.log('fetchAllImages called with imageIds:', imageIds);
+    setIsLoadingImages(true);
+    
+    try {
+      const imagePromises = imageIds.map(async (imageId) => {
+        const response = await fetch(`/api/images/${imageId}`);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch image ${imageId}`);
+        }
+        return response.json();
+      });
+      
+      const images = await Promise.all(imagePromises);
+      setAllImages(images);
+      setCurrentImageIndex(0);
+      console.log('fetchAllImages: Loaded', images.length, 'images');
+    } catch (err: unknown) {
+      console.error('fetchAllImages error:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load all images');
+    } finally {
+      setIsLoadingImages(false);
+    }
+  }, []);
+
+  // Carousel navigation functions
+  const goToPrevious = useCallback(() => {
+    if (allImages.length > 1) {
+      setCurrentImageIndex((prev) => (prev > 0 ? prev - 1 : allImages.length - 1));
+    }
+  }, [allImages.length]);
+
+  const goToNext = useCallback(() => {
+    if (allImages.length > 1) {
+      setCurrentImageIndex((prev) => (prev < allImages.length - 1 ? prev + 1 : 0));
+    }
+  }, [allImages.length]);
+
+  const goToImage = useCallback((index: number) => {
+    if (index >= 0 && index < allImages.length) {
+      setCurrentImageIndex(index);
+    }
+  }, [allImages.length]);
+
+  // Full-size image modal functions
+  const handleViewFullSize = useCallback((image?: MapOut) => {
+    const imageToShow = image || (allImages.length > 0 ? allImages[currentImageIndex] : map);
+    if (imageToShow) {
+      setSelectedImageForModal(imageToShow);
+      setShowFullSizeModal(true);
+    }
+  }, [allImages, currentImageIndex, map]);
+
+  const handleCloseFullSizeModal = useCallback(() => {
+    setShowFullSizeModal(false);
+    setSelectedImageForModal(null);
+  }, []);
+
   useEffect(() => {
     console.log('MapDetailsPage: mapId from useParams:', mapId);
     console.log('MapDetailsPage: mapId type:', typeof mapId);
@@ -313,7 +419,7 @@ export default function MapDetailPage() {
     }
 
     try {
-      const response = await fetch('/api/images');
+      const response = await fetch('/api/images/grouped');
       if (response.ok) {
         const images = await response.json();
         
@@ -331,9 +437,12 @@ export default function MapDetailPage() {
           const matchesCountry = !countryFilter || 
             img.countries?.some((country: any) => country.c_code === countryFilter);
           const matchesImageType = !imageTypeFilter || img.image_type === imageTypeFilter;
+          const matchesUploadType = !uploadTypeFilter || 
+            (uploadTypeFilter === 'single' && (!img.image_count || img.image_count <= 1)) ||
+            (uploadTypeFilter === 'multiple' && img.image_count && img.image_count > 1);
           const matchesReferenceExamples = !showReferenceExamples || img.starred === true;
           
-          return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry && matchesImageType && matchesReferenceExamples;
+          return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry && matchesImageType && matchesUploadType && matchesReferenceExamples;
         });
         
         const currentIndex = filteredImages.findIndex((img: { image_id: string }) => img.image_id === currentId);
@@ -351,7 +460,7 @@ export default function MapDetailPage() {
     
     setIsNavigating(true);
     try {
-      const response = await fetch('/api/images');
+      const response = await fetch('/api/images/grouped');
       if (response.ok) {
         const images = await response.json();
         
@@ -369,9 +478,12 @@ export default function MapDetailPage() {
           const matchesCountry = !countryFilter || 
             img.countries?.some((country: any) => country.c_code === countryFilter);
           const matchesImageType = !imageTypeFilter || img.image_type === imageTypeFilter;
+          const matchesUploadType = !uploadTypeFilter || 
+            (uploadTypeFilter === 'single' && (!img.image_count || img.image_count <= 1)) ||
+            (uploadTypeFilter === 'multiple' && img.image_count && img.image_count > 1);
           const matchesReferenceExamples = !showReferenceExamples || img.starred === true;
           
-          return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry && matchesImageType && matchesReferenceExamples;
+          return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry && matchesImageType && matchesUploadType && matchesReferenceExamples;
         });
         
         const currentIndex = filteredImages.findIndex((img: { image_id: string }) => img.image_id === mapId);
@@ -421,6 +533,13 @@ export default function MapDetailPage() {
     }
   };
 
+  // Check navigation availability when filters change
+  useEffect(() => {
+    if (map && mapId && !loading && !isDeleting) {
+      checkNavigationAvailability(mapId);
+    }
+  }, [map, mapId, search, srcFilter, catFilter, regionFilter, countryFilter, imageTypeFilter, uploadTypeFilter, showReferenceExamples, loading, isDeleting, checkNavigationAvailability]);
+
   useEffect(() => {
     Promise.all([
       fetch('/api/sources').then(r => r.json()),
@@ -437,7 +556,7 @@ export default function MapDetailPage() {
     }).catch(console.error);
   }, []);
 
-  const [isGenerating, setIsGenerating] = useState(false);
+
   
   // delete function
   const handleDelete = async () => {
@@ -485,7 +604,7 @@ export default function MapDetailPage() {
         setShowDeleteConfirm(false);
         
         try {
-          const response = await fetch('/api/images');
+          const response = await fetch('/api/images/grouped');
           if (response.ok) {
             const images = await response.json();
             
@@ -503,9 +622,12 @@ export default function MapDetailPage() {
               const matchesCountry = !countryFilter || 
                 img.countries?.some((country: any) => country.c_code === countryFilter);
               const matchesImageType = !imageTypeFilter || img.image_type === imageTypeFilter;
+              const matchesUploadType = !uploadTypeFilter || 
+                (uploadTypeFilter === 'single' && (!img.image_count || img.image_count <= 1)) ||
+                (uploadTypeFilter === 'multiple' && img.image_count && img.image_count > 1);
               const matchesReferenceExamples = !showReferenceExamples || img.starred === true;
               
-              return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry && matchesImageType && matchesReferenceExamples;
+              return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry && matchesImageType && matchesUploadType && matchesReferenceExamples;
             });
             
             const remainingImages = filteredImages.filter((img: any) => img.image_id !== map.image_id);
@@ -586,7 +708,7 @@ export default function MapDetailPage() {
   const filteredMap = useMemo(() => {
     if (!map) return null;
     
-    if (!search && !srcFilter && !catFilter && !regionFilter && !countryFilter && !imageTypeFilter && !showReferenceExamples) {
+    if (!search && !srcFilter && !catFilter && !regionFilter && !countryFilter && !imageTypeFilter && !uploadTypeFilter && !showReferenceExamples) {
       return map;
     }
     
@@ -603,90 +725,104 @@ export default function MapDetailPage() {
     const matchesCountry = !countryFilter || 
       map.countries.some(country => country.c_code === countryFilter);
     const matchesImageType = !imageTypeFilter || map.image_type === imageTypeFilter;
+    const matchesUploadType = !uploadTypeFilter || 
+      (uploadTypeFilter === 'single' && (!map.image_count || map.image_count <= 1)) ||
+      (uploadTypeFilter === 'multiple' && map.image_count && map.image_count > 1);
     const matchesReferenceExamples = !showReferenceExamples || map.starred === true;
     
-    return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry && matchesImageType && matchesReferenceExamples ? map : null;
-  }, [map, search, srcFilter, catFilter, regionFilter, countryFilter, imageTypeFilter, showReferenceExamples]);
-
-  const handleContribute = () => {
-    if (!map) return;
-    setShowContributeConfirm(true);
-  };
-
-  const handleContributeConfirm = async () => {
-    if (!map) return;
+    const matches = matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry && matchesImageType && matchesUploadType && matchesReferenceExamples;
     
-    setIsGenerating(true);
+    // If current map doesn't match filters, navigate to a matching image
+    if (!matches && (search || srcFilter || catFilter || regionFilter || countryFilter || imageTypeFilter || uploadTypeFilter || showReferenceExamples)) {
+      // Navigate to a matching image after a short delay to avoid infinite loops
+      setTimeout(() => {
+        navigateToMatchingImage();
+      }, 100);
+      // Return the current map while loading to show loading state instead of "no match found"
+      return map;
+    }
     
+    return matches ? map : null;
+  }, [map, search, srcFilter, catFilter, regionFilter, countryFilter, imageTypeFilter, uploadTypeFilter, showReferenceExamples]);
+
+  const navigateToMatchingImage = useCallback(async () => {
+    setLoading(true);
     try {
-      const res = await fetch('/api/contribute/from-url', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          url: map.image_url,
-          source: map.source,
-          event_type: map.event_type,
-          epsg: map.epsg,
-          image_type: map.image_type,
-          countries: map.countries.map(c => c.c_code),
-        }),
-      });
-      
-      if (!res.ok) {
-        const errorData = await res.json();
-        throw new Error(errorData.error || 'Failed to create contribution');
-      }
-      
-      const json = await res.json();
-      const newId = json.image_id as string;
-      
-      const modelName = localStorage.getItem('selectedVlmModel');
-      const capRes = await fetch(`/api/images/${newId}/caption`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        body: new URLSearchParams({
-          title: 'Generated Caption',
-          prompt: 'DEFAULT_CRISIS_MAP',
-          ...(modelName && { model_name: modelName }),
-        }),
-      });
-      
-      if (!capRes.ok) {
-        const errorData = await capRes.json();
-        throw new Error(errorData.error || 'Failed to generate caption');
+      const response = await fetch('/api/images/grouped');
+      if (response.ok) {
+        const images = await response.json();
+        
+        const filteredImages = images.filter((img: any) => {
+          const matchesSearch = !search || 
+            img.title?.toLowerCase().includes(search.toLowerCase()) ||
+            img.generated?.toLowerCase().includes(search.toLowerCase()) ||
+            img.source?.toLowerCase().includes(search.toLowerCase()) ||
+            img.event_type?.toLowerCase().includes(search.toLowerCase());
+          
+          const matchesSource = !srcFilter || img.source === srcFilter;
+          const matchesCategory = !catFilter || img.event_type === catFilter;
+          const matchesRegion = !regionFilter || 
+            img.countries?.some((country: any) => country.r_code === regionFilter);
+          const matchesCountry = !countryFilter || 
+            img.countries?.some((country: any) => country.c_code === countryFilter);
+          const matchesImageType = !imageTypeFilter || img.image_type === imageTypeFilter;
+          const matchesUploadType = !uploadTypeFilter || 
+            (uploadTypeFilter === 'single' && (!img.image_count || img.image_count <= 1)) ||
+            (uploadTypeFilter === 'multiple' && img.image_count && img.image_count > 1);
+          const matchesReferenceExamples = !showReferenceExamples || img.starred === true;
+          
+          return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry && matchesImageType && matchesUploadType && matchesReferenceExamples;
+        });
+        
+        if (filteredImages.length > 0) {
+          const firstMatchingImage = filteredImages[0];
+          if (firstMatchingImage && firstMatchingImage.image_id) {
+            navigate(`/map/${firstMatchingImage.image_id}`);
+          }
+        } else {
+          // No matching images, go back to explore
+          navigate('/explore');
+        }
       }
-      
-      // Wait for the VLM response to be processed
-      const captionData = await capRes.json();
-      console.log('Caption generation response:', captionData);
-      
-      // Now navigate to the upload page with the processed data
-      const url = `/upload?imageUrl=${encodeURIComponent(json.image_url)}&isContribution=true&step=2a&imageId=${newId}&imageType=${map.image_type}`;
-      navigate(url);
-      
-    } catch (error: unknown) {
-      console.error('Contribution failed:', error);
-      alert(`Contribution failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    } catch (error) {
+      console.error('Failed to navigate to matching image:', error);
+      navigate('/explore');
     } finally {
-      setIsGenerating(false);
+      setLoading(false);
     }
-  };
+  }, [search, srcFilter, catFilter, regionFilter, countryFilter, imageTypeFilter, uploadTypeFilter, showReferenceExamples, navigate]);
 
-  const handleContributeCancel = () => {
-    setShowContributeConfirm(false);
+  const handleContribute = () => {
+    if (!map) return;
+    
+    // For single image contribution
+    if (!map.all_image_ids || map.all_image_ids.length <= 1) {
+      const imageIds = [map.image_id];
+      const url = `/upload?step=1&contribute=true&imageIds=${imageIds.join(',')}`;
+      navigate(url);
+      return;
+    }
+    
+    // For multi-upload contribution
+    const imageIds = map.all_image_ids;
+    const url = `/upload?step=1&contribute=true&imageIds=${imageIds.join(',')}`;
+    navigate(url);
   };
  
   const createImageData = (map: any, fileName: string) => ({
     image: `images/${fileName}`,
     caption: map.edited || map.generated || '',
     metadata: {
-      image_id: map.image_id,
+      image_id: map.image_count && map.image_count > 1 
+        ? map.all_image_ids || [map.image_id]
+        : map.image_id,
       title: map.title,
       source: map.source,
       event_type: map.event_type,
       image_type: map.image_type,
       countries: map.countries,
-      starred: map.starred
+      starred: map.starred,
+      image_count: map.image_count || 1
     }
   });
 
@@ -706,38 +842,65 @@ export default function MapDetailPage() {
         
         if (crisisImagesFolder) {
           try {
-            const response = await fetch(`/api/images/${map.image_id}/file`);
-            if (!response.ok) throw new Error(`Failed to fetch image ${map.image_id}`);
+            // Get all image IDs for this map
+            const imageIds = map.image_count && map.image_count > 1 
+              ? map.all_image_ids || [map.image_id]
+              : [map.image_id];
             
-            const blob = await response.blob();
-            const fileExtension = map.file_key.split('.').pop() || 'jpg';
-            const fileName = `0001.${fileExtension}`;
+            // Fetch all images for this map
+            const imagePromises = imageIds.map(async (imageId, imgIndex) => {
+              try {
+                const response = await fetch(`/api/images/${imageId}/file`);
+                if (!response.ok) throw new Error(`Failed to fetch image ${imageId}`);
+                
+                const blob = await response.blob();
+                const fileExtension = map.file_key.split('.').pop() || 'jpg';
+                const fileName = `0001_${String(imgIndex + 1).padStart(2, '0')}.${fileExtension}`;
+                
+                crisisImagesFolder.file(fileName, blob);
+                return { success: true, fileName, imageId };
+              } catch (error) {
+                console.error(`Failed to process image ${imageId}:`, error);
+                return { success: false, fileName: '', imageId };
+              }
+            });
+
+            const imageResults = await Promise.all(imagePromises);
+            const successfulImages = imageResults.filter(result => result.success);
             
-            crisisImagesFolder.file(fileName, blob);
+            if (successfulImages.length === 0) {
+              throw new Error('No images could be processed');
+            }
             
             if (mode === 'fine-tuning') {
               const trainData: any[] = [];
               const testData: any[] = [];
               const valData: any[] = [];
 
-              if (String(map?.image_type) === 'crisis_map') {
-                const random = Math.random();
-                if (random < trainSplit / 100) {
-                  trainData.push(createImageData(map, '0001'));
-                } else if (random < (trainSplit + testSplit) / 100) {
-                  testData.push(createImageData(map, '0001'));
-                } else {
-                  valData.push(createImageData(map, '0001'));
-                }
-              } else if (String(map?.image_type) === 'drone_image') {
-                const random = Math.random();
-                if (random < trainSplit / 100) {
-                  trainData.push(createImageData(map, '0001'));
-                } else if (random < (trainSplit + testSplit) / 100) {
-                  testData.push(createImageData(map, '0001'));
-                } else {
-                  valData.push(createImageData(map, '0001'));
+              const imageFiles = successfulImages.map(result => `images/${result.fileName}`);
+              const random = Math.random();
+              
+              const entry = {
+                image: imageFiles.length === 1 ? imageFiles[0] : imageFiles,
+                caption: map.edited || map.generated || '',
+                metadata: {
+                  image_id: imageIds,
+                  title: map.title,
+                  source: map.source,
+                  event_type: map.event_type,
+                  image_type: map.image_type,
+                  countries: map.countries,
+                  starred: map.starred,
+                  image_count: map.image_count || 1
                 }
+              };
+
+              if (random < trainSplit / 100) {
+                trainData.push(entry);
+              } else if (random < (trainSplit + testSplit) / 100) {
+                testData.push(entry);
+              } else {
+                valData.push(entry);
               }
 
               if (crisisFolder) {
@@ -746,17 +909,19 @@ export default function MapDetailPage() {
                 crisisFolder.file('val.jsonl', JSON.stringify(valData, null, 2));
               }
             } else {
+              const imageFiles = successfulImages.map(result => `images/${result.fileName}`);
               const jsonData = {
-                image: `images/${fileName}`,
+                image: imageFiles.length === 1 ? imageFiles[0] : imageFiles,
                 caption: map.edited || map.generated || '',
                 metadata: {
-                  image_id: map.image_id,
+                  image_id: imageIds,
                   title: map.title,
                   source: map.source,
                   event_type: map.event_type,
                   image_type: map.image_type,
                   countries: map.countries,
-                  starred: map.starred
+                  starred: map.starred,
+                  image_count: map.image_count || 1
                 }
               };
               
@@ -819,13 +984,16 @@ export default function MapDetailPage() {
                 image: `images/${fileName}`,
                 caption: map.edited || map.generated || '',
                 metadata: {
-                  image_id: map.image_id,
+                  image_id: map.image_count && map.image_count > 1 
+                    ? map.all_image_ids || [map.image_id]
+                    : map.image_id,
                   title: map.title,
                   source: map.source,
                   event_type: map.event_type,
                   image_type: map.image_type,
                   countries: map.countries,
-                  starred: map.starred
+                  starred: map.starred,
+                  image_count: map.image_count || 1
                 }
               };
               
@@ -888,13 +1056,16 @@ export default function MapDetailPage() {
                 image: `images/${fileName}`,
                 caption: map.edited || map.generated || '',
                 metadata: {
-                  image_id: map.image_id,
+                  image_id: map.image_count && map.image_count > 1 
+                    ? map.all_image_ids || [map.image_id]
+                    : map.image_id,
                   title: map.title,
                   source: map.source,
                   event_type: map.event_type,
                   image_type: map.image_type,
                   countries: map.countries,
-                  starred: map.starred
+                  starred: map.starred,
+                  image_count: map.image_count || 1
                 }
               };
               
@@ -1017,99 +1188,15 @@ export default function MapDetailPage() {
           </div>
         </div>
 
-        {/* Search and Filters */}
-        <div className="mb-6 space-y-4">
-          {/* Layer 1: Search, Reference Examples, Clear Filters */}
-          <div className="flex flex-wrap items-center gap-4">
-            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2 flex-1 min-w-[300px]">
-              <TextInput
-                name="search"
-                placeholder="Search examples..."
-                value={search}
-                onChange={(v) => setSearch(v || '')}
-              />
-            </Container>
-
-
-
-            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-              <Button
-                name="clear-filters"
-                variant="secondary"
-                onClick={clearAllFilters}
-              >
-                Clear Filters
-              </Button>
-            </Container>
-          </div>
-
-          {/* Layer 2: 5 Filter Bars */}
-          <div className="flex flex-wrap items-center gap-4">
-            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-              <SelectInput
-                name="source"
-                placeholder="All Sources"
-                options={sources}
-                value={srcFilter || null}
-                onChange={(v) => setSrcFilter(v as string || '')}
-                keySelector={(o) => o.s_code}
-                labelSelector={(o) => o.label}
-                required={false}
-              />
-            </Container>
-
-            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-              <SelectInput
-                name="category"
-                placeholder="All Categories"
-                options={types}
-                value={catFilter || null}
-                onChange={(v) => setCatFilter(v as string || '')}
-                keySelector={(o) => o.t_code}
-                labelSelector={(o) => o.label}
-                required={false}
-              />
-            </Container>
-
-            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-              <SelectInput
-                name="region"
-                placeholder="All Regions"
-                options={regions}
-                value={regionFilter || null}
-                onChange={(v) => setRegionFilter(v as string || '')}
-                keySelector={(o) => o.r_code}
-                labelSelector={(o) => o.label}
-                required={false}
-              />
-            </Container>
-
-            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-              <MultiSelectInput
-                name="country"
-                placeholder="All Countries"
-                options={countries}
-                value={countryFilter ? [countryFilter] : []}
-                onChange={(v) => setCountryFilter((v as string[])[0] || '')}
-                keySelector={(o) => o.c_code}
-                labelSelector={(o) => o.label}
-              />
-            </Container>
-
-            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-              <SelectInput
-                name="imageType"
-                placeholder="All Image Types"
-                options={imageTypes}
-                value={imageTypeFilter || null}
-                onChange={(v) => setImageTypeFilter(v as string || '')}
-                keySelector={(o) => o.image_type}
-                labelSelector={(o) => o.label}
-                required={false}
-              />
-            </Container>
-          </div>
-        </div>
+        {/* Filter Bar */}
+        <FilterBar
+          sources={sources}
+          types={types}
+          regions={regions}
+          countries={countries}
+          imageTypes={imageTypes}
+          isLoadingFilters={false}
+        />
 
         {view === 'mapDetails' ? (
           <div className="relative">
@@ -1132,28 +1219,115 @@ export default function MapDetailPage() {
                     spacing="comfortable"
                   >
                     <div className={styles.imageContainer}>
-                      {filteredMap.image_url ? (
-                        <img
-                          src={filteredMap.image_url}
-                          alt={filteredMap.file_key}
-                        />
+                      {(map?.image_count && map.image_count > 1) || allImages.length > 1 ? (
+                        // Multi-upload carousel
+                        <div className={styles.carouselContainer}>
+                          <div className={styles.carouselImageWrapper}>
+                            {isLoadingImages ? (
+                              <div className={styles.imagePlaceholder}>
+                                <Spinner className="text-ifrcRed" />
+                                <div>Loading images...</div>
+                              </div>
+                            ) : allImages[currentImageIndex]?.image_url ? (
+                              <img
+                                src={allImages[currentImageIndex].image_url}
+                                alt={allImages[currentImageIndex].file_key}
+                                className={styles.carouselImage}
+                              />
+                            ) : (
+                              <div className={styles.imagePlaceholder}>
+                                No image available
+                              </div>
+                            )}
+                          </div>
+                          
+                          {/* Carousel Navigation */}
+                          <div className={styles.carouselNavigation}>
+                            <Button
+                              name="previous-image"
+                              variant="tertiary"
+                              size={1}
+                              onClick={goToPrevious}
+                              disabled={isLoadingImages}
+                              className={styles.carouselButton}
+                            >
+                              <ChevronLeftLineIcon className="w-4 h-4" />
+                            </Button>
+                            
+                            <div className={styles.carouselIndicators}>
+                              {allImages.map((_, index) => (
+                                <button
+                                  key={index}
+                                  onClick={() => goToImage(index)}
+                                  className={`${styles.carouselIndicator} ${
+                                    index === currentImageIndex ? styles.carouselIndicatorActive : ''
+                                  }`}
+                                  disabled={isLoadingImages}
+                                >
+                                  {index + 1}
+                                </button>
+                              ))}
+                            </div>
+                            
+                            <Button
+                              name="next-image"
+                              variant="tertiary"
+                              size={1}
+                              onClick={goToNext}
+                              disabled={isLoadingImages}
+                              className={styles.carouselButton}
+                            >
+                              <ChevronRightLineIcon className="w-4 h-4" />
+                            </Button>
+                          </div>
+                          
+
+                          
+                          {/* View Image Button for Carousel */}
+                          <div className={styles.viewImageButtonContainer}>
+                            <Button
+                              name="view-full-size-carousel"
+                              variant="secondary"
+                              size={1}
+                              onClick={() => handleViewFullSize(allImages[currentImageIndex])}
+                              disabled={isLoadingImages || !allImages[currentImageIndex]?.image_url}
+                            >
+                              View Image
+                            </Button>
+                          </div>
+                        </div>
                       ) : (
-                        <div className={styles.imagePlaceholder}>
-                          No image available
+                        // Single image display
+                        <div className={styles.singleImageContainer}>
+                          {filteredMap.image_url ? (
+                            <img
+                              src={filteredMap.image_url}
+                              alt={filteredMap.file_key}
+                            />
+                          ) : (
+                            <div className={styles.imagePlaceholder}>
+                              No image available
+                            </div>
+                          )}
+                          
+                          {/* View Image Button for Single Image */}
+                          <div className={styles.viewImageButtonContainer}>
+                            <Button
+                              name="view-full-size-single"
+                              variant="secondary"
+                              size={1}
+                              onClick={() => handleViewFullSize(filteredMap)}
+                              disabled={!filteredMap.image_url}
+                            >
+                              View Image
+                            </Button>
+                          </div>
                         </div>
                       )}
                     </div>
-                  </Container>
-
-                  {/* Details Section */}
-                  <div className={styles.detailsSection}>
-                    <Container
-                      heading="Tags"
-                      headingLevel={3}
-                      withHeaderBorder
-                      withInternalPadding
-                      spacing="comfortable"
-                    >
+                    
+                    {/* Tags Section - Inside Image Container */}
+                    <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
                       <div className={styles.metadataTags}>
                         {filteredMap.image_type !== 'drone_image' && (
                           <span className={styles.metadataTag}>
@@ -1176,8 +1350,22 @@ export default function MapDetailPage() {
                             </span>
                           </>
                         )}
+                        {filteredMap.image_count && filteredMap.image_count > 1 && (
+                          <span className={styles.metadataTag} title={`Multi-upload with ${filteredMap.image_count} images`}>
+                            📷 {filteredMap.image_count}
+                          </span>
+                        )}
+                        {(!filteredMap.image_count || filteredMap.image_count <= 1) && (
+                          <span className={styles.metadataTag} title="Single Upload">
+                            Single
+                          </span>
+                        )}
                       </div>
                     </Container>
+                  </Container>
+
+                  {/* Details Section */}
+                  <div className={styles.detailsSection}>
 
                     {/* Combined Analysis Structure */}
                     {(filteredMap.edited && filteredMap.edited.includes('Description:')) || 
@@ -1275,13 +1463,8 @@ export default function MapDetailPage() {
                         <Button
                           name="contribute"
                           onClick={handleContribute}
-                          disabled={isGenerating}
                         >
-                          {isGenerating ? (
-                            <span>Generating...</span>
-                          ) : (
-                            'Contribute'
-                          )}
+                          Contribute
                         </Button>
                       </Container>
                       
@@ -1384,43 +1567,7 @@ export default function MapDetailPage() {
         </div>
       )}
 
-      {/* Contribute Confirmation Modal */}
-      {showContributeConfirm && (
-        <div className={styles.fullSizeModalOverlay} onClick={handleContributeCancel}>
-          <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
-            <div className={styles.ratingWarningContent}>
-              <p className={styles.ratingWarningText}>
-                This will start a new independent upload with just the image.
-              </p>
-              {!isGenerating && (
-                <div className={styles.ratingWarningButtons}>
-                  <Button
-                    name="confirm-contribute"
-                    variant="secondary"
-                    onClick={handleContributeConfirm}
-                  >
-                    Continue
-                  </Button>
-                  <Button
-                    name="cancel-contribute"
-                    variant="tertiary"
-                    onClick={handleContributeCancel}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              )}
-              {isGenerating && (
-                <div className="flex flex-col items-center gap-2 mt-4">
-                  <Spinner className="text-ifrcRed" />
-                  <div className="text-sm font-medium">Generating...</div>
-                  <div className="text-xs text-gray-600">This might take a few seconds</div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
+
 
       {/* Export Selection Modal */}
       {showExportModal && (
@@ -1454,6 +1601,15 @@ export default function MapDetailPage() {
           }}
         />
       )}
+
+      {/* Full Size Image Modal */}
+      <FullSizeImageModal
+        isOpen={showFullSizeModal}
+        imageUrl={selectedImageForModal?.image_url || null}
+        preview={null}
+        selectedImageData={null}
+        onClose={handleCloseFullSizeModal}
+      />
     </PageContainer>
   );
 } 

frontend/src/pages/UploadPage/UploadPage.module.css

@@ -417,6 +417,11 @@
   align-items: start;
 }
 
+/* When rating section is hidden, image section takes full width */
+.topRow.ratingHidden {
+  grid-template-columns: 1fr;
+}
+
 .imageSection {
   position: sticky;
   top: var(--go-ui-spacing-lg);
@@ -482,6 +487,10 @@
     gap: var(--go-ui-spacing-lg);
   }
   
+  .topRow.ratingHidden {
+    grid-template-columns: 1fr;
+  }
+  
   .mapColumn {
     position: static;
   }
@@ -660,4 +669,214 @@
   font-weight: var(--go-ui-font-weight-medium);
 }
 
+/* Crop modal styles */
+.cropZoomSlider {
+  flex: 1;
+  height: 0.5rem;
+  background-color: var(--go-ui-color-gray-30);
+  border-radius: var(--go-ui-border-radius-lg);
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+}
+
+.cropZoomSlider::-webkit-slider-thumb {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: var(--go-ui-color-red-90);
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid var(--go-ui-color-white);
+  box-shadow: var(--go-ui-box-shadow-sm);
+}
+
+.cropZoomSlider::-moz-range-thumb {
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: var(--go-ui-color-red-90);
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid var(--go-ui-color-white);
+  box-shadow: var(--go-ui-box-shadow-sm);
+  border: none;
+}
+
+.cropZoomSlider:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--go-ui-color-red-40);
+}
+
+/* Carousel styles for multi-upload */
+.carouselContainer {
+  position: relative;
+  width: 100%;
+}
+
+.carouselImageWrapper {
+  position: relative;
+  width: 100%;
+  background-color: var(--go-ui-color-gray-20);
+  border-radius: var(--go-ui-border-radius-lg);
+  overflow: hidden;
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  box-shadow: var(--go-ui-box-shadow-sm);
+  transition: box-shadow var(--go-ui-duration-transition-medium) ease;
+}
+
+.carouselImageWrapper:hover {
+  box-shadow: var(--go-ui-box-shadow-md);
+}
+
+.carouselImage {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  image-rendering: pixelated;
+  display: block;
+}
+
+.carouselNavigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--go-ui-spacing-md);
+  margin-top: var(--go-ui-spacing-md);
+  padding: var(--go-ui-spacing-sm);
+  background-color: var(--go-ui-color-gray-10);
+  border-radius: var(--go-ui-border-radius-md);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+.carouselButton {
+  background-color: var(--go-ui-color-white);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  border-radius: var(--go-ui-border-radius-md);
+  padding: var(--go-ui-spacing-sm);
+  transition: all var(--go-ui-duration-transition-fast) ease;
+  min-width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carouselButton:hover:not(:disabled) {
+  background-color: var(--go-ui-color-gray-20);
+  border-color: var(--go-ui-color-gray-40);
+  transform: translateY(-1px);
+}
+
+.carouselButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.carouselIndicators {
+  display: flex;
+  gap: var(--go-ui-spacing-xs);
+  align-items: center;
+}
+
+.carouselIndicator {
+  background-color: var(--go-ui-color-gray-30);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  border-radius: var(--go-ui-border-radius-sm);
+  padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
+  font-size: var(--go-ui-font-size-sm);
+  font-weight: var(--go-ui-font-weight-medium);
+  color: var(--go-ui-color-gray-70);
+  cursor: pointer;
+  transition: all var(--go-ui-duration-transition-fast) ease;
+  min-width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carouselIndicator:hover:not(:disabled) {
+  background-color: var(--go-ui-color-gray-40);
+  border-color: var(--go-ui-color-gray-50);
+  color: var(--go-ui-color-gray-90);
+}
+
+.carouselIndicatorActive {
+  background-color: var(--go-ui-color-red-90);
+  border-color: var(--go-ui-color-red-90);
+  color: var(--go-ui-color-white);
+}
+
+.carouselIndicatorActive:hover:not(:disabled) {
+  background-color: var(--go-ui-color-red-hover);
+  border-color: var(--go-ui-color-red-hover);
+  color: var(--go-ui-color-white);
+}
+
+.carouselIndicator:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.imageCounter {
+  text-align: center;
+  margin-top: var(--go-ui-spacing-sm);
+  font-size: var(--go-ui-font-size-sm);
+  font-weight: var(--go-ui-font-weight-medium);
+  color: var(--go-ui-color-gray-70);
+  background-color: var(--go-ui-color-gray-10);
+  padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
+  border-radius: var(--go-ui-border-radius-sm);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+/* Single image container */
+.singleImageContainer {
+  position: relative;
+  width: 100%;
+}
+
+/* View image button container */
+.viewImageButtonContainer {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--go-ui-spacing-md);
+  padding: var(--go-ui-spacing-sm);
+  background-color: var(--go-ui-color-gray-10);
+  border-radius: var(--go-ui-border-radius-md);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+/* Responsive adjustments for carousel */
+@media (max-width: 768px) {
+  .carouselNavigation {
+    flex-direction: column;
+    gap: var(--go-ui-spacing-sm);
+  }
+  
+  .carouselIndicators {
+    order: -1;
+    margin-bottom: var(--go-ui-spacing-sm);
+  }
+  
+  .carouselButton {
+    min-width: 36px;
+    height: 36px;
+  }
+  
+  .carouselIndicator {
+    min-width: 28px;
+    height: 28px;
+    font-size: var(--go-ui-font-size-xs);
+  }
+  
+  .imageCounter {
+    font-size: var(--go-ui-font-size-xs);
+  }
+  
+  .viewImageButtonContainer {
+    margin-top: var(--go-ui-spacing-sm);
+  }
+}
+
 

package-lock.json

@@ -6,6 +6,8 @@
     "": {
       "dependencies": {
         "@types/react-simple-maps": "^3.0.6",
+        "react-image-crop": "^11.0.10",
+        "react-simple-crop": "^1.0.2",
         "react-simple-maps": "^3.0.0"
       }
     },
@@ -233,30 +235,43 @@
       }
     },
     "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "loose-envify": "^1.1.0"
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
       },
       "peerDependencies": {
-        "react": "^18.3.1"
+        "react": "^16.14.0"
+      }
+    },
+    "node_modules/react-image-crop": {
+      "version": "11.0.10",
+      "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-11.0.10.tgz",
+      "integrity": "sha512-+5FfDXUgYLLqBh1Y/uQhIycpHCbXkI50a+nbfkB1C0xXXUTwkisHDo2QCB1SQJyHCqIuia4FeyReqXuMDKWQTQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": ">=16.13.1"
       }
     },
     "node_modules/react-is": {
@@ -266,6 +281,16 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/react-simple-crop": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-simple-crop/-/react-simple-crop-1.0.2.tgz",
+      "integrity": "sha512-7cKyU8/M+qR1f0mi1Xk8hFw1SWi2F6kiG3rOnDXaq6BtAL0Kx7d5jOs4F26f4ii0xlnZw43K1WB+A6dKfVBW7Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.6",
+        "react-dom": "^16.8.6"
+      }
+    },
     "node_modules/react-simple-maps": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-simple-maps/-/react-simple-maps-3.0.0.tgz",
@@ -284,13 +309,14 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "loose-envify": "^1.1.0"
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
       }
     },
     "node_modules/topojson-client": {

package.json

@@ -1,6 +1,8 @@
 {
   "dependencies": {
     "@types/react-simple-maps": "^3.0.6",
+    "react-image-crop": "^11.0.10",
+    "react-simple-crop": "^1.0.2",
     "react-simple-maps": "^3.0.0"
   }
 }

py_backend/alembic/versions/0017_add_unknown_values_to_lookup_tables.py

@@ -0,0 +1,40 @@
+"""Add UNKNOWN values to lookup tables
+
+Revision ID: 0017
+Revises: 0016
+Create Date: 2024-01-01 00:00:00.000000
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision = '0017'
+down_revision = '0016'
+branch_labels = None
+depends_on = None
+
+def upgrade():
+    # Add UNKNOWN value to sources table
+    op.execute("""
+      INSERT INTO sources (s_code, label) VALUES ('UNKNOWN', 'Unknown')
+      ON CONFLICT (s_code) DO NOTHING
+    """)
+    
+    # Add UNKNOWN value to event_types table
+    op.execute("""
+      INSERT INTO event_types (t_code, label) VALUES ('UNKNOWN', 'Unknown')
+      ON CONFLICT (t_code) DO NOTHING
+    """)
+    
+    # Add UNKNOWN value to spatial_references table
+    op.execute("""
+      INSERT INTO spatial_references (epsg, srid, proj4, wkt) VALUES ('UNKNOWN', 'UNKNOWN', 'UNKNOWN', 'UNKNOWN')
+      ON CONFLICT (epsg) DO NOTHING
+    """)
+
+def downgrade():
+    # Remove UNKNOWN values from lookup tables
+    op.execute("DELETE FROM sources WHERE s_code = 'UNKNOWN'")
+    op.execute("DELETE FROM event_types WHERE t_code = 'UNKNOWN'")
+    op.execute("DELETE FROM spatial_references WHERE epsg = 'UNKNOWN'")

py_backend/alembic/versions/0018_add_image_count_to_captions.py

@@ -0,0 +1,26 @@
+"""Add image_count to captions table
+
+Revision ID: 0018
+Revises: 0017
+Create Date: 2024-01-01 00:00:00.000000
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '0018'
+down_revision = '0017'
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # Add image_count column to captions table with default value of 1
+    op.add_column('captions', sa.Column('image_count', sa.Integer(), nullable=True, server_default='1'))
+
+
+def downgrade() -> None:
+    # Remove image_count column from captions table
+    op.drop_column('captions', 'image_count')

py_backend/app/crud.py

@@ -67,7 +67,7 @@ def get_images(db: Session):
         db.query(models.Images)
         .options(
             joinedload(models.Images.countries),
-            joinedload(models.Images.captions),
+            joinedload(models.Images.captions).joinedload(models.Captions.images),
         )
         .all()
     )
@@ -78,13 +78,13 @@ def get_image(db: Session, image_id: str):
         db.query(models.Images)
         .options(
             joinedload(models.Images.countries),
-            joinedload(models.Images.captions),
+            joinedload(models.Images.captions).joinedload(models.Captions.images),
         )
         .filter(models.Images.image_id == image_id)
         .first()
     )
 
-def create_caption(db: Session, image_id, title, prompt, model_code, raw_json, text, metadata=None):
+def create_caption(db: Session, image_id, title, prompt, model_code, raw_json, text, metadata=None, image_count=None):
     print(f"Creating caption for image_id: {image_id}")
     print(f"Caption data: title={title}, prompt={prompt}, model={model_code}")
     print(f"Database session ID: {id(db)}")
@@ -109,7 +109,8 @@ def create_caption(db: Session, image_id, title, prompt, model_code, raw_json, t
         schema_id=schema_id,
         raw_json=raw_json,
         generated=text,
-        edited=text
+        edited=text,
+        image_count=image_count
     )
     
     db.add(caption)

py_backend/app/models.py

@@ -1,6 +1,6 @@
 from sqlalchemy import (
     Column, String, DateTime, SmallInteger, Table, ForeignKey, Boolean,
-    CheckConstraint, UniqueConstraint, Text
+    CheckConstraint, UniqueConstraint, Text, Integer
 )
 from sqlalchemy.dialects.postgresql import UUID, TIMESTAMP, CHAR, JSONB
 from sqlalchemy.orm import relationship
@@ -160,6 +160,7 @@ class Captions(Base):
     context     = Column(SmallInteger)
     usability   = Column(SmallInteger)
     starred     = Column(Boolean, default=False)
+    image_count = Column(Integer, nullable=True)
     created_at  = Column(TIMESTAMP(timezone=True), default=datetime.datetime.utcnow)
     updated_at  = Column(TIMESTAMP(timezone=True), onupdate=datetime.datetime.utcnow)
 

py_backend/app/routers/caption.py

@@ -124,6 +124,7 @@ async def create_caption(
     print(f"Using metadata instructions: '{metadata_instructions[:100]}...'")
 
     try:
+        print(f"DEBUG: About to call VLM service with model_name: {model_name}")
         if hasattr(storage, 's3') and settings.STORAGE_PROVIDER != "local":
             response = storage.s3.get_object(
                 Bucket=settings.S3_BUCKET,
@@ -159,6 +160,9 @@ async def create_caption(
             db_session=db,
         )
         
+        print(f"DEBUG: VLM service result: {result}")
+        print(f"DEBUG: Result model field: {result.get('model', 'NOT_FOUND')}")
+        
         # Get the raw response for validation
         raw = result.get("raw_response", {})
         
@@ -184,6 +188,13 @@ async def create_caption(
         # Use the actual model that was used, not the requested model_name
         used_model = result.get("model", model_name) or "STUB_MODEL"
         
+        # Ensure we never use 'random' as the model name in the database
+        if used_model == "random":
+            print(f"WARNING: VLM service returned 'random' as model name, using STUB_MODEL fallback")
+            used_model = "STUB_MODEL"
+        
+        print(f"DEBUG: Final used_model for database: {used_model}")
+        
         # Check if fallback was used
         fallback_used = result.get("fallback_used", False)
         original_model = result.get("original_model", None)

py_backend/app/routers/upload.py

@@ -163,6 +163,101 @@ def list_images(db: Session = Depends(get_db)):
     
     return result
 
+@router.get("/grouped", response_model=List[schemas.ImageOut])
+def list_images_grouped(db: Session = Depends(get_db)):
+    """Get images grouped by shared captions for multi-upload items"""
+    # Get all captions with their associated images
+    captions = crud.get_all_captions_with_images(db)
+    result = []
+    
+    for caption in captions:
+        if not caption.images:
+            continue
+            
+        # Determine the effective image count for this caption
+        # Use caption.image_count if available and valid, otherwise infer from linked images
+        effective_image_count = caption.image_count if caption.image_count is not None and caption.image_count > 0 else len(caption.images)
+        
+        if effective_image_count > 1:
+            # This is a multi-upload item, group them together
+            first_img = caption.images[0]
+            
+            # Combine metadata from all images
+            combined_source = set()
+            combined_event_type = set()
+            combined_epsg = set()
+            
+            for img in caption.images:
+                if img.source:
+                    combined_source.add(img.source)
+                if img.event_type:
+                    combined_event_type.add(img.event_type)
+                if img.epsg:
+                    combined_epsg.add(img.epsg)
+            
+            # Create a combined image dict using the first image as a template
+            img_dict = convert_image_to_dict(first_img, f"/api/images/{first_img.image_id}/file")
+            
+            # Override with combined metadata
+            img_dict["source"] = ", ".join(sorted(list(combined_source))) if combined_source else "OTHER"
+            img_dict["event_type"] = ", ".join(sorted(list(combined_event_type))) if combined_event_type else "OTHER"
+            img_dict["epsg"] = ", ".join(sorted(list(combined_epsg))) if combined_epsg else "OTHER"
+            
+            # Update countries to include all unique countries
+            all_countries = []
+            for img in caption.images:
+                for country in img.countries:
+                    if not any(c["c_code"] == country.c_code for c in all_countries):
+                        all_countries.append({"c_code": country.c_code, "label": country.label, "r_code": country.r_code})
+            img_dict["countries"] = all_countries
+            
+            # Add all image IDs for reference
+            img_dict["all_image_ids"] = [str(img.image_id) for img in caption.images]
+            img_dict["image_count"] = effective_image_count # Use the effective count here
+            
+            # Also ensure the caption-level fields are correctly set from the main caption
+            img_dict["title"] = caption.title
+            img_dict["prompt"] = caption.prompt
+            img_dict["model"] = caption.model
+            img_dict["schema_id"] = caption.schema_id
+            img_dict["raw_json"] = caption.raw_json
+            img_dict["generated"] = caption.generated
+            img_dict["edited"] = caption.edited
+            img_dict["accuracy"] = caption.accuracy
+            img_dict["context"] = caption.context
+            img_dict["usability"] = caption.usability
+            img_dict["starred"] = caption.starred
+            img_dict["created_at"] = caption.created_at
+            img_dict["updated_at"] = caption.updated_at
+
+            result.append(schemas.ImageOut(**img_dict))
+        else:
+            # For single images, add them as usual
+            # Ensure image_count is explicitly 1 for single uploads
+            for img in caption.images: # Even for single, caption.images will be a list of 1
+                img_dict = convert_image_to_dict(img, f"/api/images/{img.image_id}/file")
+                img_dict["all_image_ids"] = [str(img.image_id)]
+                img_dict["image_count"] = 1 # Explicitly set to 1
+                
+                # Also ensure the caption-level fields are correctly set from the main caption
+                img_dict["title"] = caption.title
+                img_dict["prompt"] = caption.prompt
+                img_dict["model"] = caption.model
+                img_dict["schema_id"] = caption.schema_id
+                img_dict["raw_json"] = caption.raw_json
+                img_dict["generated"] = caption.generated
+                img_dict["edited"] = caption.edited
+                img_dict["accuracy"] = caption.accuracy
+                img_dict["context"] = caption.context
+                img_dict["usability"] = caption.usability
+                img_dict["starred"] = caption.starred
+                img_dict["created_at"] = caption.created_at
+                img_dict["updated_at"] = caption.updated_at
+
+                result.append(schemas.ImageOut(**img_dict))
+    
+    return result
+
 @router.get("/{image_id}", response_model=schemas.ImageOut)
 def get_image(image_id: str, db: Session = Depends(get_db)):
     """Get a single image by ID"""
@@ -176,11 +271,41 @@ def get_image(image_id: str, db: Session = Depends(get_db)):
     if not uuid_pattern.match(image_id):
         raise HTTPException(400, "Invalid image ID format")
     
-    img = crud.get_image(db, image_id)
+    img = crud.get_image(db, image_id) # This loads captions
     if not img:
         raise HTTPException(404, "Image not found")
     
     img_dict = convert_image_to_dict(img, f"/api/images/{img.image_id}/file")
+
+    # Enhance img_dict with multi-upload specific fields if applicable
+    if img.captions:
+        # Assuming an image is primarily associated with one "grouping" caption for multi-uploads
+        # We take the first caption and check its linked images
+        main_caption = img.captions[0] 
+        
+        # Refresh the caption to ensure its images relationship is loaded if not already
+        db.refresh(main_caption) 
+        
+        if main_caption.images:
+            all_linked_image_ids = [str(linked_img.image_id) for linked_img in main_caption.images]
+            effective_image_count = main_caption.image_count if main_caption.image_count is not None and main_caption.image_count > 0 else len(main_caption.images)
+            
+            if effective_image_count > 1:
+                img_dict["all_image_ids"] = all_linked_image_ids
+                img_dict["image_count"] = effective_image_count
+            else:
+                # Even for single images, explicitly set image_count to 1
+                img_dict["image_count"] = 1
+                img_dict["all_image_ids"] = [str(img.image_id)] # Ensure it's an array for consistency
+        else:
+            # If caption has no linked images (shouldn't happen for valid data, but for robustness)
+            img_dict["image_count"] = 1
+            img_dict["all_image_ids"] = [str(img.image_id)]
+    else:
+        # If image has no captions, it's a single image by default
+        img_dict["image_count"] = 1
+        img_dict["all_image_ids"] = [str(img.image_id)]
+
     return schemas.ImageOut(**img_dict)
 
 
@@ -192,6 +317,8 @@ async def upload_image(
     epsg: str          = Form(default=""),
     image_type: str    = Form(default="crisis_map"),
     file: UploadFile   = Form(...),
+    title: str = Form(default=""),
+    model_name: Optional[str] = Form(default=None),
     # Drone-specific fields (optional)
     center_lon: Optional[float]  = Form(default=None),
     center_lat: Optional[float]  = Form(default=None),
@@ -301,12 +428,262 @@ async def upload_image(
     except Exception as e:
         url = f"/api/images/{img.image_id}/file"
 
+    # Create caption using VLM
+    prompt_obj = crud.get_active_prompt_by_image_type(db, image_type)
+    
+    if not prompt_obj:
+        raise HTTPException(400, f"No active prompt found for image type '{image_type}'")
+    
+    prompt_text = prompt_obj.label
+    metadata_instructions = prompt_obj.metadata_instructions or ""
+    
+    try:
+        from ..services.vlm_service import vlm_manager
+        result = await vlm_manager.generate_caption(
+            image_bytes=processed_content,
+            prompt=prompt_text,
+            metadata_instructions=metadata_instructions,
+            model_name=model_name,
+            db_session=db,
+        )
+        
+        raw = result.get("raw_response", {})
+        text = result.get("caption", "")
+        metadata = result.get("metadata", {})
+        
+        # Use the actual model that was used by the VLM service
+        actual_model = result.get("model", model_name)
+        
+        # Ensure we never use 'random' as the model name in the database
+        final_model_name = actual_model if actual_model != "random" else "STUB_MODEL"
+        
+        # Create caption linked to the image
+        caption = crud.create_caption(
+            db,
+            image_id=img.image_id,
+            title=title,
+            prompt=prompt_obj.p_code,
+            model_code=final_model_name,
+            raw_json=raw,
+            text=text,
+            metadata=metadata,
+            image_count=1
+        )
+        
+    except Exception as e:
+        print(f"VLM caption generation failed: {str(e)}")
+        # Continue without caption if VLM fails
+    
     img_dict = convert_image_to_dict(img, url)
     # Add preprocessing info to the response
     img_dict['preprocessing_info'] = preprocessing_info
     result = schemas.ImageOut(**img_dict)
     return result
 
+@router.post("/multi", response_model=schemas.ImageOut)
+async def upload_multiple_images(
+    files: List[UploadFile] = Form(...),
+    source: Optional[str] = Form(default=None),
+    event_type: str = Form(default="OTHER"),
+    countries: str = Form(default=""),
+    epsg: str = Form(default=""),
+    image_type: str = Form(default="crisis_map"),
+    title: str = Form(...),
+    model_name: Optional[str] = Form(default=None),
+    # Drone-specific fields (optional)
+    center_lon: Optional[float] = Form(default=None),
+    center_lat: Optional[float] = Form(default=None),
+    amsl_m: Optional[float] = Form(default=None),
+    agl_m: Optional[float] = Form(default=None),
+    heading_deg: Optional[float] = Form(default=None),
+    yaw_deg: Optional[float] = Form(default=None),
+    pitch_deg: Optional[float] = Form(default=None),
+    roll_deg: Optional[float] = Form(default=None),
+    rtk_fix: Optional[bool] = Form(default=None),
+    std_h_m: Optional[float] = Form(default=None),
+    std_v_m: Optional[float] = Form(default=None),
+    db: Session = Depends(get_db)
+):
+    """Upload multiple images and create a single caption for all of them"""
+    
+    if len(files) > 5:
+        raise HTTPException(400, "Maximum 5 images allowed")
+    
+    if len(files) < 1:
+        raise HTTPException(400, "At least one image required")
+    
+    countries_list = [c.strip() for c in countries.split(',') if c.strip()] if countries else []
+    
+    if image_type == "drone_image":
+        if not event_type or event_type.strip() == "":
+            event_type = "OTHER"
+        if not epsg or epsg.strip() == "":
+            epsg = "OTHER"
+    else:
+        if not source or source.strip() == "":
+            source = "OTHER"
+        if not event_type or event_type.strip() == "":
+            event_type = "OTHER"
+        if not epsg or epsg.strip() == "":
+            epsg = "OTHER"
+    
+    if not image_type or image_type.strip() == "":
+        image_type = "crisis_map"
+    
+    if image_type != "drone_image":
+        center_lon = None
+        center_lat = None
+        amsl_m = None
+        agl_m = None
+        heading_deg = None
+        yaw_deg = None
+        pitch_deg = None
+        roll_deg = None
+        rtk_fix = None
+        std_h_m = None
+        std_v_m = None
+    
+    uploaded_images = []
+    image_bytes_list = []
+    
+    # Process each file
+    for file in files:
+        content = await file.read()
+        
+        # Preprocess image if needed
+        try:
+            processed_content, processed_filename, mime_type = ImagePreprocessor.preprocess_image(
+                content, 
+                file.filename,
+                target_format='PNG',
+                quality=95
+            )
+        except Exception as e:
+            print(f"Image preprocessing failed: {str(e)}")
+            processed_content = content
+            processed_filename = file.filename
+            mime_type = 'image/png'
+        
+        sha = crud.hash_bytes(processed_content)
+        key = storage.upload_fileobj(io.BytesIO(processed_content), processed_filename)
+        
+        # Create image record
+        img = crud.create_image(
+            db, source, event_type, key, sha, countries_list, epsg, image_type,
+            center_lon, center_lat, amsl_m, agl_m, heading_deg, yaw_deg, pitch_deg, roll_deg,
+            rtk_fix, std_h_m, std_v_m
+        )
+        
+        uploaded_images.append(img)
+        image_bytes_list.append(processed_content)
+    
+    # Get the first image for URL generation (they all share the same metadata)
+    first_img = uploaded_images[0]
+    
+    try:
+        url = storage.get_object_url(first_img.file_key)
+    except Exception as e:
+        url = f"/api/images/{first_img.image_id}/file"
+    
+    # Create caption for all images
+    # Use the model_name parameter from the request, or let VLM manager choose the best available model
+    prompt_obj = crud.get_active_prompt_by_image_type(db, image_type)
+    
+    if not prompt_obj:
+        raise HTTPException(400, f"No active prompt found for image type '{image_type}'")
+    
+    prompt_text = prompt_obj.label
+    metadata_instructions = prompt_obj.metadata_instructions or ""
+    
+    # Add system instruction for multiple images
+    multi_image_instruction = f"\n\nIMPORTANT: You are analyzing {len(image_bytes_list)} images. Please provide a combined analysis that covers all images together. In your metadata section, provide separate metadata for each image:\n- 'title': ONE shared title for all images\n- 'metadata_images': an object containing individual metadata for each image:\n  - 'image1': {{ 'source': 'data source', 'type': 'event type', 'countries': ['country codes'], 'epsg': 'spatial reference' }}\n  - 'image2': {{ 'source': 'data source', 'type': 'event type', 'countries': ['country codes'], 'epsg': 'spatial reference' }}\n  - etc. for each image\n\nEach image should have its own source, type, countries, and epsg values based on what that specific image shows."
+    metadata_instructions += multi_image_instruction
+    
+    try:
+        from ..services.vlm_service import vlm_manager
+        result = await vlm_manager.generate_multi_image_caption(
+            image_bytes_list=image_bytes_list,
+            prompt=prompt_text,
+            metadata_instructions=metadata_instructions,
+            model_name=model_name,
+            db_session=db,
+        )
+        
+        raw = result.get("raw_response", {})
+        text = result.get("caption", "")
+        metadata = result.get("metadata", {})
+        
+        # Use the actual model that was used by the VLM service
+        actual_model = result.get("model", model_name)
+        
+        # Update individual image metadata if VLM provided it
+        metadata_images = metadata.get("metadata_images", {})
+        if metadata_images and isinstance(metadata_images, dict):
+            for i, img in enumerate(uploaded_images):
+                image_key = f"image{i+1}"
+                if image_key in metadata_images:
+                    img_metadata = metadata_images[image_key]
+                    if isinstance(img_metadata, dict):
+                        # Update image with individual metadata
+                        img.source = img_metadata.get("source", img.source)
+                        img.event_type = img_metadata.get("type", img.event_type)
+                        img.epsg = img_metadata.get("epsg", img.epsg)
+                        img.countries = img_metadata.get("countries", img.countries)
+        
+        # Ensure we never use 'random' as the model name in the database
+        final_model_name = actual_model if actual_model != "random" else "STUB_MODEL"
+        
+        # Create caption linked to the first image
+        caption = crud.create_caption(
+            db,
+            image_id=first_img.image_id,
+            title=title,
+            prompt=prompt_obj.p_code,
+            model_code=final_model_name,
+            raw_json=raw,
+            text=text,
+            metadata=metadata,
+            image_count=len(image_bytes_list)
+        )
+        
+        # Link caption to all images
+        for img in uploaded_images[1:]:
+            img.captions.append(caption)
+        
+        db.commit()
+        
+    except Exception as e:
+        print(f"VLM error: {e}")
+        # Create fallback caption
+        fallback_text = f"Analysis of {len(image_bytes_list)} images"
+        caption = crud.create_caption(
+            db,
+            image_id=first_img.image_id,
+            title=title,
+            prompt=prompt_obj.p_code,
+            model_code="FALLBACK",
+            raw_json={"error": str(e), "fallback": True},
+            text=fallback_text,
+            metadata={},
+            image_count=len(image_bytes_list)
+        )
+        
+        # Link caption to all images
+        for img in uploaded_images[1:]:
+            img.captions.append(caption)
+        
+        db.commit()
+    
+    img_dict = convert_image_to_dict(first_img, url)
+    
+    # Add all image IDs to the response for multi-image uploads
+    if len(uploaded_images) > 1:
+        img_dict["all_image_ids"] = [str(img.image_id) for img in uploaded_images]
+        img_dict["image_count"] = len(uploaded_images)
+    
+    result = schemas.ImageOut(**img_dict)
+    return result
+
 @router.post("/copy", response_model=schemas.ImageOut)
 async def copy_image_for_contribution(
     request: CopyImageRequest,

py_backend/app/schemas.py

@@ -57,6 +57,7 @@ class CaptionOut(BaseModel):
     context: Optional[int] = None
     usability: Optional[int] = None
     starred: bool = False
+    image_count: Optional[int] = None
     created_at: Optional[datetime] = None
     updated_at: Optional[datetime] = None
 
@@ -106,6 +107,10 @@ class ImageOut(BaseModel):
     rtk_fix: Optional[bool] = None
     std_h_m: Optional[float] = None
     std_v_m: Optional[float] = None
+    
+    # Multi-upload fields
+    all_image_ids: Optional[List[str]] = None
+    image_count: Optional[int] = None
 
     class Config:
         from_attributes = True

py_backend/app/services/gemini_service.py

@@ -1,5 +1,5 @@
 from .vlm_service import VLMService, ModelType
-from typing import Dict, Any
+from typing import Dict, Any, List
 import asyncio
 import time
 import re
@@ -73,4 +73,66 @@ class GeminiService(VLMService):
             "recommended_actions": recommended_actions
         }
 
+    async def generate_multi_image_caption(self, image_bytes_list: List[bytes], prompt: str, metadata_instructions: str = "") -> Dict[str, Any]:
+        """Generate caption for multiple images using Google Gemini Vision"""
+        instruction = prompt + "\n\n" + metadata_instructions
+
+        # Create content list with instruction and multiple images
+        content = [instruction]
+        for image_bytes in image_bytes_list:
+            image_part = {
+                "mime_type": "image/jpeg",
+                "data": image_bytes,
+            }
+            content.append(image_part)
+
+        start = time.time()
+        response = await asyncio.to_thread(self.model.generate_content, content)
+        elapsed = time.time() - start
+
+        content = getattr(response, "text", None) or ""
+
+        cleaned_content = content
+        if cleaned_content.startswith("```json"):
+            cleaned_content = re.sub(r"^```json\s*", "", cleaned_content)
+            cleaned_content = re.sub(r"\s*```$", "", cleaned_content)
+
+        try:
+            parsed = json.loads(cleaned_content)
+            description = parsed.get("description", "")
+            analysis = parsed.get("analysis", "")
+            recommended_actions = parsed.get("recommended_actions", "")
+            metadata = parsed.get("metadata", {})
+            
+            # Combine all three parts for backward compatibility
+            caption_text = f"Description: {description}\n\nAnalysis: {analysis}\n\nRecommended Actions: {recommended_actions}"
+            
+            if metadata.get("epsg"):
+                epsg_value = metadata["epsg"]
+                allowed_epsg = ["4326", "3857", "32617", "32633", "32634", "OTHER"]
+                if epsg_value not in allowed_epsg:
+                    metadata["epsg"] = "OTHER"
+        except json.JSONDecodeError:
+            description = ""
+            analysis = content
+            recommended_actions = ""
+            caption_text = content
+            metadata = {}
+
+        raw_response: Dict[str, Any] = {
+            "model": self.model_id,
+            "image_count": len(image_bytes_list)
+        }
+
+        return {
+            "caption": caption_text,
+            "metadata": metadata,
+            "confidence": None,
+            "processing_time": elapsed,
+            "raw_response": raw_response,
+            "description": description,
+            "analysis": analysis,
+            "recommended_actions": recommended_actions
+        }
+
 

py_backend/app/services/gpt4v_service.py

@@ -1,5 +1,5 @@
 from .vlm_service import VLMService, ModelType
-from typing import Dict, Any
+from typing import Dict, Any, List
 import openai
 import base64
 import asyncio
@@ -90,5 +90,89 @@ class GPT4VService(VLMService):
                 "recommended_actions": recommended_actions
             }
             
+        except Exception as e:
+            raise Exception(f"GPT-4 Vision API error: {str(e)}")
+    
+    async def generate_multi_image_caption(self, image_bytes_list: List[bytes], prompt: str, metadata_instructions: str = "") -> Dict[str, Any]:
+        """Generate caption for multiple images using GPT-4 Vision"""
+        try:
+            # Create content array with text and multiple images
+            content = [{"type": "text", "text": prompt + "\n\n" + metadata_instructions}]
+            
+            # Add each image to the content
+            for i, image_bytes in enumerate(image_bytes_list):
+                image_base64 = base64.b64encode(image_bytes).decode('utf-8')
+                content.append({
+                    "type": "image_url",
+                    "image_url": {
+                        "url": f"data:image/jpeg;base64,{image_base64}"
+                    }
+                })
+            
+            response = await asyncio.to_thread(
+                self.client.chat.completions.create,
+                model="gpt-4o",
+                messages=[
+                    {
+                        "role": "user",
+                        "content": content
+                    }
+                ],
+                max_tokens=1200  # Increased for multiple images
+            )
+            
+            content = response.choices[0].message.content
+            
+            cleaned_content = content.strip()
+            if cleaned_content.startswith("```json"):
+                cleaned_content = cleaned_content[7:]
+            if cleaned_content.endswith("```"):
+                cleaned_content = cleaned_content[:-3]
+            cleaned_content = cleaned_content.strip()
+            
+            metadata = {}
+            try:
+                metadata = json.loads(cleaned_content)
+            except json.JSONDecodeError:
+                if "```json" in content:
+                    json_start = content.find("```json") + 7
+                    json_end = content.find("```", json_start)
+                    if json_end > json_start:
+                        json_str = content[json_start:json_end].strip()
+                        try:
+                            metadata = json.loads(json_str)
+                        except json.JSONDecodeError as e:
+                            print(f"JSON parse error: {e}")
+                else:
+                    import re
+                    json_match = re.search(r'\{[^{}]*"metadata"[^{}]*\{[^{}]*\}', content)
+                    if json_match:
+                        try:
+                            metadata = json.loads(json_match.group())
+                        except json.JSONDecodeError:
+                            pass
+            
+            # Extract the three parts from the parsed JSON
+            description = metadata.get("description", "")
+            analysis = metadata.get("analysis", "")
+            recommended_actions = metadata.get("recommended_actions", "")
+            
+            # Combine all three parts for backward compatibility
+            combined_content = f"Description: {description}\n\nAnalysis: {analysis}\n\nRecommended Actions: {recommended_actions}"
+            
+            return {
+                "caption": combined_content,
+                "raw_response": {
+                    "content": content, 
+                    "metadata": metadata,
+                    "extracted_metadata": metadata,
+                    "image_count": len(image_bytes_list)
+                },
+                "metadata": metadata,
+                "description": description,
+                "analysis": analysis,
+                "recommended_actions": recommended_actions
+            }
+            
         except Exception as e:
             raise Exception(f"GPT-4 Vision API error: {str(e)}") 

py_backend/app/services/huggingface_service.py

@@ -1,33 +1,35 @@
 # services/huggingface_service.py
 from .vlm_service import VLMService, ModelType
-from typing import Dict, Any
+from typing import Dict, Any, List
 import aiohttp
 import base64
-import json
 import time
 import re
+import json
 import imghdr
 
 
 class HuggingFaceService(VLMService):
     """
-    Hugging Face Inference Providers (OpenAI-compatible) service.
-    This class speaks to https://router.huggingface.co/v1/chat/completions
-    so you can call many VLMs with the same payload shape.
+    HuggingFace Inference Providers service implementation.
+    Supports OpenAI-compatible APIs.
     """
-
-    def __init__(self, api_key: str, model_id: str = "Qwen/Qwen2.5-VL-7B-Instruct"):
-        super().__init__(f"HF_{model_id.replace('/', '_')}", ModelType.CUSTOM)
+    
+    def __init__(self, api_key: str, model_id: str, providers_url: str):
+        super().__init__("HuggingFace", ModelType.HUGGINGFACE)
         self.api_key = api_key
         self.model_id = model_id
-        self.providers_url = "https://router.huggingface.co/v1/chat/completions"
+        self.providers_url = providers_url
+        self.model_name = model_id
 
     def _guess_mime(self, image_bytes: bytes) -> str:
         kind = imghdr.what(None, h=image_bytes)
+        if kind == "jpeg":
+            return "image/jpeg"
         if kind == "png":
             return "image/png"
-        if kind in ("jpg", "jpeg"):
-            return "image/jpeg"
+        if kind == "gif":
+            return "image/gif"
         if kind == "webp":
             return "image/webp"
         return "image/jpeg"
@@ -127,55 +129,15 @@ class HuggingFaceService(VLMService):
             description = parsed.get("description", "")
             analysis = parsed.get("analysis", cleaned)
             recommended_actions = parsed.get("recommended_actions", "")
-            metadata = parsed.get("metadata", {}) or {}
-        except json.JSONDecodeError:
-            # If not JSON, try to extract metadata from GLM thinking format
-            if "<think>" in cleaned:
-                analysis, metadata = self._extract_glm_metadata(cleaned)
-            else:
-                # Fallback: try to extract any structured information
-                analysis = cleaned
-                metadata = {}
-        
-        # Combine all three parts for backward compatibility
-        caption_text = f"Description: {description}\n\nAnalysis: {analysis}\n\nRecommended Actions: {recommended_actions}"
-        
-        # Validate and clean metadata fields with sensible defaults
-        if isinstance(metadata, dict):
-            # Clean EPSG - default to "OTHER" if not in allowed values
-            if metadata.get("epsg"):
-                allowed = {"4326", "3857", "32617", "32633", "32634", "OTHER"}
-                if str(metadata["epsg"]) not in allowed:
-                    metadata["epsg"] = "OTHER"
-            else:
-                metadata["epsg"] = "OTHER"  # Default when missing
+            metadata = parsed.get("metadata", {})
             
-            # Clean source - default to "OTHER" if not recognized
-            if metadata.get("source"):
-                allowed_sources = {"PDC", "GDACS", "WFP", "GFH", "GGC", "USGS", "OTHER"}
-                if str(metadata["source"]).upper() not in allowed_sources:
-                    metadata["source"] = "OTHER"
-            else:
-                metadata["source"] = "OTHER"
-            
-            # Clean event type - default to "OTHER" if not recognized  
-            if metadata.get("type"):
-                allowed_types = {"BIOLOGICAL_EMERGENCY", "CHEMICAL_EMERGENCY", "CIVIL_UNREST", 
-                               "COLD_WAVE", "COMPLEX_EMERGENCY", "CYCLONE", "DROUGHT", "EARTHQUAKE", 
-                               "EPIDEMIC", "FIRE", "FLOOD", "FLOOD_INSECURITY", "HEAT_WAVE", 
-                               "INSECT_INFESTATION", "LANDSLIDE", "OTHER", "PLUVIAL", 
-                               "POPULATION_MOVEMENT", "RADIOLOGICAL_EMERGENCY", "STORM", 
-                               "TRANSPORTATION_EMERGENCY", "TSUNAMI", "VOLCANIC_ERUPTION"}
-                if str(metadata["type"]).upper() not in allowed_types:
-                    metadata["type"] = "OTHER"
-            else:
-                metadata["type"] = "OTHER"
-            
-            # Ensure countries is always a list
-            if not metadata.get("countries") or not isinstance(metadata.get("countries"), list):
-                metadata["countries"] = []
+            # Combine all three parts for backward compatibility
+            caption_text = f"Description: {description}\n\nAnalysis: {analysis}\n\nRecommended Actions: {recommended_actions}"
+        except json.JSONDecodeError:
+            caption_text = cleaned
 
         elapsed = time.time() - start_time
+
         return {
             "caption": caption_text,
             "metadata": metadata,
@@ -183,70 +145,136 @@ class HuggingFaceService(VLMService):
             "processing_time": elapsed,
             "raw_response": {
                 "model": self.model_id,
-                "response": result,
-                "parsed_successfully": bool(metadata),
+                "content": content,
+                "parsed": parsed if 'parsed' in locals() else None
             },
             "description": description,
             "analysis": analysis,
             "recommended_actions": recommended_actions
         }
 
-    def _extract_glm_metadata(self, content: str) -> tuple[str, dict]:
+    async def generate_multi_image_caption(
+        self,
+        image_bytes_list: List[bytes],
+        prompt: str,
+        metadata_instructions: str = "",
+    ) -> Dict[str, Any]:
         """
-        Extract metadata from GLM thinking format using simple, robust patterns.
-        Focus on extracting what we can and rely on defaults for the rest.
+        Generate caption for multiple images using HF Inference Providers (OpenAI-style).
         """
-        # Remove <think> tags
-        content = re.sub(r'<think>|</think>', '', content)
-        
-        metadata = {}
-        
-        # Simple extraction - just look for key patterns, don't overthink it
-        # Title: Look for quoted strings after "Maybe" or "Title"
-        title_match = re.search(r'(?:Maybe|Title).*?["\']([^"\']{5,50})["\']', content, re.IGNORECASE)
-        if title_match:
-            metadata["title"] = title_match.group(1).strip()
-        
-        # Source: Look for common source names (WFP, PDC, etc.)
-        source_match = re.search(r'\b(WFP|PDC|GDACS|GFH|GGC|USGS)\b', content, re.IGNORECASE)
-        if source_match:
-            metadata["source"] = source_match.group(1).upper()
-        
-        # Type: Look for disaster types
-        disaster_types = ["EARTHQUAKE", "FLOOD", "CYCLONE", "DROUGHT", "FIRE", "STORM", "TSUNAMI", "VOLCANIC"]
-        for disaster_type in disaster_types:
-            if re.search(rf'\b{disaster_type}\b', content, re.IGNORECASE):
-                metadata["type"] = disaster_type
-                break
-        
-        # Countries: Look for 2-letter country codes
-        country_matches = re.findall(r'\b([A-Z]{2})\b', content)
-        valid_countries = []
-        for match in country_matches:
-            # Basic validation - exclude common false positives
-            if match not in ["SO", "IS", "OR", "IN", "ON", "TO", "OF", "AT", "BY", "NO", "GO", "UP", "US"]:
-                valid_countries.append(match)
-        if valid_countries:
-            metadata["countries"] = list(set(valid_countries))  # Remove duplicates
-        
-        # EPSG: Look for 4-digit numbers that could be EPSG codes
-        epsg_match = re.search(r'\b(4326|3857|32617|32633|32634)\b', content)
-        if epsg_match:
-            metadata["epsg"] = epsg_match.group(1)
+        start_time = time.time()
+
+        instruction = (prompt or "").strip()
+        if metadata_instructions:
+            instruction += "\n\n" + metadata_instructions.strip()
+
+        headers = {
+            "Authorization": f"Bearer {self.api_key}",
+            "Content-Type": "application/json",
+        }
+
+        # Create content array with text and multiple images
+        content = [{"type": "text", "text": instruction}]
         
-        # For caption, just use the first part before metadata discussion
-        lines = content.split('\n')
-        caption_lines = []
-        for line in lines:
-            if any(keyword in line.lower() for keyword in ['metadata:', 'now for the metadata', 'let me double-check']):
-                break
-            caption_lines.append(line)
+        # Add each image to the content
+        for image_bytes in image_bytes_list:
+            mime = self._guess_mime(image_bytes)
+            data_url = f"data:{mime};base64,{base64.b64encode(image_bytes).decode('utf-8')}"
+            content.append({"type": "image_url", "image_url": {"url": data_url}})
+
+        # OpenAI-compatible chat payload with one text + multiple image blocks.
+        payload = {
+            "model": self.model_id,
+            "messages": [
+                {
+                    "role": "user",
+                    "content": content,
+                }
+            ],
+            "max_tokens": 800,  # Increased for multiple images
+            "temperature": 0.2,
+        }
+
+        try:
+            async with aiohttp.ClientSession() as session:
+                async with session.post(
+                    self.providers_url,
+                    headers=headers,
+                    json=payload,
+                    timeout=aiohttp.ClientTimeout(total=180),
+                ) as resp:
+                    raw_text = await resp.text()
+                    if resp.status != 200:
+                        # Any non-200 status - throw generic error for fallback handling
+                        raise Exception(f"MODEL_UNAVAILABLE: {self.model_name} is currently unavailable (HTTP {resp.status}). Switching to another model.")
+                    result = await resp.json()
+        except Exception as e:
+            if "MODEL_UNAVAILABLE" in str(e):
+                raise  # Re-raise model unavailable exceptions as-is
+            # Catch any other errors (network, timeout, parsing, etc.) and treat as model unavailable
+            raise Exception(f"MODEL_UNAVAILABLE: {self.model_name} is currently unavailable due to an error. Switching to another model.")
+
+        # Extract model output (string or list-of-blocks)
+        message = (result.get("choices") or [{}])[0].get("message", {})
+        content = message.get("content", "")
         
-        caption_text = '\n'.join(caption_lines).strip()
-        if not caption_text:
-            caption_text = content
+        # GLM models sometimes put content in reasoning_content field
+        if not content and message.get("reasoning_content"):
+            content = message.get("reasoning_content", "")
+
+        if isinstance(content, list):
+            # Some providers may return a list of output blocks (e.g., {"type":"output_text","text":...})
+            parts = []
+            for block in content:
+                if isinstance(block, dict):
+                    parts.append(block.get("text") or block.get("content") or "")
+                else:
+                    parts.append(str(block))
+            content = "\n".join([p for p in parts if p])
+
+        caption = content or ""
+        cleaned = caption.strip()
+
+        # Strip accidental fenced JSON
+        if cleaned.startswith("```json"):
+            cleaned = re.sub(r"^```json\s*", "", cleaned)
+            cleaned = re.sub(r"\s*```$", "", cleaned)
+
+        # Best-effort JSON protocol
+        metadata = {}
+        description = ""
+        analysis = cleaned
+        recommended_actions = ""
         
-        return caption_text, metadata
+        try:
+            parsed = json.loads(cleaned)
+            description = parsed.get("description", "")
+            analysis = parsed.get("analysis", cleaned)
+            recommended_actions = parsed.get("recommended_actions", "")
+            metadata = parsed.get("metadata", {})
+            
+            # Combine all three parts for backward compatibility
+            caption_text = f"Description: {description}\n\nAnalysis: {analysis}\n\nRecommended Actions: {recommended_actions}"
+        except json.JSONDecodeError:
+            caption_text = cleaned
+
+        elapsed = time.time() - start_time
+
+        return {
+            "caption": caption_text,
+            "metadata": metadata,
+            "confidence": None,
+            "processing_time": elapsed,
+            "raw_response": {
+                "model": self.model_id,
+                "content": content,
+                "parsed": parsed if 'parsed' in locals() else None,
+                "image_count": len(image_bytes_list)
+            },
+            "description": description,
+            "analysis": analysis,
+            "recommended_actions": recommended_actions
+        }
 
 
 # --- Generic Model Wrapper for Dynamic Registration ---

py_backend/app/services/stub_vlm_service.py

@@ -1,5 +1,5 @@
 from .vlm_service import VLMService, ModelType
-from typing import Dict, Any
+from typing import Dict, Any, List
 import asyncio
 
 class StubVLMService(VLMService):
@@ -33,4 +33,35 @@ class StubVLMService(VLMService):
                 "countries": [],
                 "epsg": "OTHER"
             }
+        }
+    
+    async def generate_multi_image_caption(self, image_bytes_list: List[bytes], prompt: str, metadata_instructions: str = "") -> dict:
+        """Generate a stub caption for multiple images for testing purposes."""
+        caption = f"This is a stub multi-image caption for testing. Number of images: {len(image_bytes_list)}. Total size: {sum(len(img) for img in image_bytes_list)} bytes. Prompt: {prompt[:50]}..."
+        
+        # Create individual metadata for each image
+        metadata_images = {}
+        for i, img_bytes in enumerate(image_bytes_list):
+            metadata_images[f"image{i+1}"] = {
+                "source": "OTHER",
+                "type": "OTHER",
+                "countries": [],
+                "epsg": "OTHER"
+            }
+        
+        # Return data in the format expected by schema validator
+        return {
+            "caption": caption,
+            "raw_response": {
+                "stub": True,
+                "analysis": caption,
+                "metadata": {
+                    "title": "Stub Multi-Image Generated Title",
+                    "metadata_images": metadata_images
+                }
+            },
+            "metadata": {
+                "title": "Stub Multi-Image Generated Title",
+                "metadata_images": metadata_images
+            }
         } 

py_backend/app/services/vlm_service.py

@@ -1,5 +1,5 @@
 from abc import ABC, abstractmethod
-from typing import Dict, Any, Optional
+from typing import Dict, Any, Optional, List
 import logging
 from enum import Enum
 
@@ -65,6 +65,112 @@ class VLMServiceManager:
     async def generate_caption(self, image_bytes: bytes, prompt: str, metadata_instructions: str = "", model_name: str | None = None, db_session = None) -> dict:
         """Generate caption using the specified model or fallback to available service."""
         
+        service = None
+        if model_name and model_name != "random":
+            service = self.services.get(model_name)
+            if not service:
+                print(f"Model '{model_name}' not found, using fallback")
+        
+        if not service and self.services:
+            # If random is selected or no specific model, choose a random available service
+            if db_session:
+                # Check database availability for random selection
+                try:
+                    from .. import crud
+                    available_models = crud.get_models(db_session)
+                    available_model_codes = [m.m_code for m in available_models if m.is_available]
+                    
+                    print(f"DEBUG: Available models in database: {available_model_codes}")
+                    print(f"DEBUG: Registered services: {list(self.services.keys())}")
+                    
+                    # Filter services to only those marked as available in database
+                    available_services = [s for s in self.services.values() if s.model_name in available_model_codes]
+                    
+                    print(f"DEBUG: Available services after filtering: {[s.model_name for s in available_services]}")
+                    print(f"DEBUG: Service model names: {[s.model_name for s in self.services.values()]}")
+                    print(f"DEBUG: Database model codes: {available_model_codes}")
+                    print(f"DEBUG: Intersection check: {[s.model_name for s in self.services.values() if s.model_name in available_model_codes]}")
+                    
+                    if available_services:
+                        import random
+                        import time
+                        # Use current time as seed for better randomness
+                        random.seed(int(time.time() * 1000000) % 1000000)
+                        
+                        # Shuffle the list first for better randomization
+                        shuffled_services = available_services.copy()
+                        random.shuffle(shuffled_services)
+                        
+                        service = shuffled_services[0]
+                        print(f"Randomly selected service: {service.model_name} (from {len(available_services)} available)")
+                        print(f"DEBUG: All available services were: {[s.model_name for s in available_services]}")
+                        print(f"DEBUG: Shuffled order: {[s.model_name for s in shuffled_services]}")
+                    else:
+                        # Fallback to any available service, prioritizing STUB_MODEL
+                        print(f"WARNING: No services found in database intersection, using fallback")
+                        if "STUB_MODEL" in self.services:
+                            service = self.services["STUB_MODEL"]
+                            print(f"Using STUB_MODEL fallback service: {service.model_name}")
+                        else:
+                            service = next(iter(self.services.values()))
+                            print(f"Using first available fallback service: {service.model_name}")
+                except Exception as e:
+                    print(f"Error checking database availability: {e}, using fallback")
+                    if "STUB_MODEL" in self.services:
+                        service = self.services["STUB_MODEL"]
+                        print(f"Using STUB_MODEL fallback service: {service.model_name}")
+                    else:
+                        service = next(iter(self.services.values()))
+                        print(f"Using fallback service: {service.model_name}")
+            else:
+                # No database session, use service property
+                available_services = [s for s in self.services.values() if s.is_available]
+                if available_services:
+                    import random
+                    service = random.choice(available_services)
+                    print(f"Randomly selected service: {service.model_name}")
+                else:
+                    # Fallback to any available service, prioritizing STUB_MODEL
+                    if "STUB_MODEL" in self.services:
+                        service = self.services["STUB_MODEL"]
+                        print(f"Using STUB_MODEL fallback service: {service.model_name}")
+                    else:
+                        service = next(iter(self.services.values()))
+                        print(f"Using fallback service: {service.model_name}")
+        
+        if not service:
+            raise Exception("No VLM service available")
+        
+        print(f"DEBUG: Selected service for caption generation: {service.model_name}")
+        
+        try:
+            print(f"DEBUG: Calling service {service.model_name} for caption generation")
+            result = await service.generate_caption(image_bytes, prompt, metadata_instructions)
+            result["model"] = service.model_name
+            print(f"DEBUG: Service {service.model_name} returned result with model: {result.get('model', 'NOT_FOUND')}")
+            return result
+        except Exception as e:
+            print(f"Error with {service.model_name}: {e}")
+            # Try other services
+            for other_service in self.services.values():
+                if other_service != service:
+                    try:
+                        result = await other_service.generate_caption(image_bytes, prompt, metadata_instructions)
+                        result["model"] = other_service.model_name
+                        result["fallback_used"] = True
+                        result["original_model"] = service.model_name
+                        result["fallback_reason"] = str(e)
+                        return result
+                    except Exception as fallback_error:
+                        print(f"Fallback service {other_service.model_name} also failed: {fallback_error}")
+                        continue
+            
+            # All services failed
+            raise Exception(f"All VLM services failed. Last error: {str(e)}")
+    
+    async def generate_multi_image_caption(self, image_bytes_list: List[bytes], prompt: str, metadata_instructions: str = "", model_name: str | None = None, db_session = None) -> dict:
+        """Generate caption for multiple images using the specified model or fallback to available service."""
+        
         service = None
         if model_name and model_name != "random":
             service = self.services.get(model_name)
@@ -118,83 +224,33 @@ class VLMServiceManager:
                     service = random.choice(available_services)
                     print(f"Randomly selected service: {service.model_name}")
                 else:
-                    # Fallback to any service
                     service = next(iter(self.services.values()))
                     print(f"Using fallback service: {service.model_name}")
         
         if not service:
-            raise ValueError("No VLM services available")
-        
-        # Track attempts to avoid infinite loops
-        attempted_services = set()
-        max_attempts = len(self.services)
-        
-        while len(attempted_services) < max_attempts:
-            try:
-                result = await service.generate_caption(image_bytes, prompt, metadata_instructions)
-                if isinstance(result, dict):
-                    result["model"] = service.model_name
-                    result["fallback_used"] = len(attempted_services) > 0
-                    if len(attempted_services) > 0:
-                        result["original_model"] = model_name
-                        result["fallback_reason"] = "model_unavailable"
-                return result
-            except Exception as e:
-                error_str = str(e)
-                print(f"Error with service {service.model_name}: {error_str}")
-                
-                # Check if it's a model unavailable error (any type of error)
-                if "MODEL_UNAVAILABLE" in error_str:
-                    attempted_services.add(service.model_name)
-                    print(f"Model {service.model_name} is unavailable, trying another service...")
-                    
-                    # Try to find another available service
-                    if db_session:
-                        try:
-                            from .. import crud
-                            available_models = crud.get_models(db_session)
-                            available_model_codes = [m.m_code for m in available_models if m.is_available]
-                            
-                            # Find next available service that hasn't been attempted
-                            for next_service in self.services.values():
-                                if (next_service.model_name in available_model_codes and 
-                                    next_service.model_name not in attempted_services):
-                                    service = next_service
-                                    print(f"Switching to fallback service: {service.model_name}")
-                                    break
-                            else:
-                                # No more available services, use any untried service
-                                for next_service in self.services.values():
-                                    if next_service.model_name not in attempted_services:
-                                        service = next_service
-                                        print(f"Using untried service as fallback: {service.model_name}")
-                                        break
-                        except Exception as db_error:
-                            print(f"Error checking database availability: {db_error}")
-                            # Fallback to any untried service
-                            for next_service in self.services.values():
-                                if next_service.model_name not in attempted_services:
-                                    service = next_service
-                                    print(f"Using untried service as fallback: {service.model_name}")
-                                    break
-                    else:
-                        # No database session, use any untried service
-                        for next_service in self.services.values():
-                            if next_service.model_name not in attempted_services:
-                                service = next_service
-                                print(f"Using untried service as fallback: {service.model_name}")
-                                break
-                    
-                    if not service:
-                        raise ValueError("No more VLM services available after model failures")
-                    
-                    continue  # Try again with new service
-                else:
-                    # Non-model-unavailable error, don't retry
-                    print(f"Non-model-unavailable error, not retrying: {error_str}")
-                    raise
+            raise Exception("No VLM service available")
         
-        # If we get here, we've tried all services
-        raise ValueError("All VLM services failed due to model unavailability")
+        try:
+            result = await service.generate_multi_image_caption(image_bytes_list, prompt, metadata_instructions)
+            result["model"] = service.model_name
+            return result
+        except Exception as e:
+            print(f"Error with {service.model_name}: {e}")
+            # Try other services
+            for other_service in self.services.values():
+                if other_service != service:
+                    try:
+                        result = await other_service.generate_multi_image_caption(image_bytes_list, prompt, metadata_instructions)
+                        result["model"] = other_service.model_name
+                        result["fallback_used"] = True
+                        result["original_model"] = service.model_name
+                        result["fallback_reason"] = str(e)
+                        return result
+                    except Exception as fallback_error:
+                        print(f"Fallback service {other_service.model_name} also failed: {fallback_error}")
+                        continue
+            
+            # All services failed
+            raise Exception(f"All VLM services failed. Last error: {str(e)}")
 
 vlm_manager = VLMServiceManager() 

py_backend/fix_image_counts.py

@@ -0,0 +1,77 @@
+#!/usr/bin/env python3
+
+import sys
+import os
+sys.path.append('.')
+
+from app.database import SessionLocal
+from app import crud, models
+
+def fix_image_counts():
+    """Update image_count for all existing captions based on their linked images"""
+    db = SessionLocal()
+    
+    try:
+        print("Starting image_count fix for existing multi-uploads...")
+        
+        # Get all captions with their linked images
+        captions = crud.get_all_captions_with_images(db)
+        print(f"Found {len(captions)} captions to process")
+        
+        updated_count = 0
+        skipped_count = 0
+        
+        for caption in captions:
+            # Skip if image_count is already set correctly
+            if caption.image_count is not None and caption.image_count > 0:
+                if caption.image_count == len(caption.images):
+                    skipped_count += 1
+                    continue
+            
+            # Calculate the correct image count
+            correct_image_count = len(caption.images)
+            
+            if correct_image_count == 0:
+                print(f"Warning: Caption {caption.caption_id} has no linked images")
+                continue
+            
+            # Update the image_count
+            old_count = caption.image_count
+            caption.image_count = correct_image_count
+            
+            print(f"Updated caption {caption.caption_id}: {old_count} -> {correct_image_count} (title: '{caption.title}')")
+            updated_count += 1
+        
+        # Commit all changes
+        db.commit()
+        print(f"\nDatabase update complete!")
+        print(f"Updated: {updated_count} captions")
+        print(f"Skipped: {skipped_count} captions (already correct)")
+        
+        # Verify the changes
+        print("\nVerifying changes...")
+        captions_after = crud.get_all_captions_with_images(db)
+        
+        multi_uploads = [c for c in captions_after if c.image_count and c.image_count > 1]
+        single_uploads = [c for c in captions_after if c.image_count == 1]
+        null_counts = [c for c in captions_after if c.image_count is None or c.image_count == 0]
+        
+        print(f"Multi-uploads (image_count > 1): {len(multi_uploads)}")
+        print(f"Single uploads (image_count = 1): {len(single_uploads)}")
+        print(f"Captions with null/zero image_count: {len(null_counts)}")
+        
+        if null_counts:
+            print("\nCaptions still with null/zero image_count:")
+            for c in null_counts[:5]:  # Show first 5
+                print(f"  - {c.caption_id}: {len(c.images)} linked images, image_count={c.image_count}")
+        
+    except Exception as e:
+        print(f"Error: {e}")
+        import traceback
+        traceback.print_exc()
+        db.rollback()
+    finally:
+        db.close()
+
+if __name__ == "__main__":
+    fix_image_counts()