contribute flow & UI refine

frontend/src/components/Card.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-
-export interface CardProps {
-  className?: string
-  children: React.ReactNode
-}
-
-export default function Card({ children, className = '' }: CardProps) {
-  return (
-    <div
-      className={
-        `bg-white rounded-lg shadow p-6 ` +
-        className
-      }
-    >
-      {children}
-    </div>
-  )
-}
-

frontend/src/components/HeaderNav.tsx

@@ -1,5 +1,5 @@
 import { useLocation, useNavigate } from "react-router-dom";
-import { Button, PageContainer } from "@ifrc-go/ui";
+import { Button, PageContainer, Container } from "@ifrc-go/ui";
 import {
   UploadCloudLineIcon,
   AnalysisIcon,
@@ -28,46 +28,62 @@ export default function HeaderNav() {
       >
         <div 
           className="flex items-center gap-4 min-w-0 cursor-pointer group transition-all duration-200 hover:scale-105" 
-          onClick={() => navigate('/')}
+          onClick={() => {
+            if (location.pathname === "/upload") {
+              if ((window as any).confirmNavigationIfNeeded) {
+                (window as any).confirmNavigationIfNeeded('/');
+                return;
+              }
+              if (!confirm("You have unsaved changes. Are you sure you want to leave?")) {
+                return;
+              }
+            }
+            navigate('/');
+          }}
         >
           <div className="p-2 rounded-lg bg-gradient-to-br from-ifrcRed/10 to-ifrcRed/20 group-hover:from-ifrcRed/20 group-hover:to-ifrcRed/30 transition-all duration-200">
             <GoMainIcon className="h-8 w-8 flex-shrink-0 text-ifrcRed" />
           </div>
           <div className="flex flex-col">
             <span className="font-bold text-xl text-gray-900 leading-tight">PromptAid Vision</span>
-            <span className="text-sm text-gray-500 font-medium">AI-Powered Image Analysis</span>
           </div>
         </div>
 
-        <nav className="flex items-center space-x-2 bg-gray-50/80 rounded-xl p-2 backdrop-blur-sm">
+        <nav className="flex items-center space-x-4 bg-gray-50/80 rounded-xl p-2 backdrop-blur-sm">
           {navItems.map(({ to, label, Icon }) => {
-            const isActive = location.pathname === to;
+            const isActive = location.pathname === to || 
+              (to === '/explore' && location.pathname.startsWith('/map/'));
             return (
               <div key={to} className="relative">
-                <Button
-                  name={label.toLowerCase()}
-                  variant={isActive ? "primary" : "tertiary"}
-                  size={1}
-                  className={`transition-all duration-200 ${
-                    isActive 
-                      ? 'shadow-lg shadow-ifrcRed/20 transform scale-105' 
-                      : 'hover:bg-white hover:shadow-md hover:scale-105'
-                  }`}
-                  onClick={() => {
+                <Container withInternalPadding className="p-2">
+                  <Button
+                    name={label.toLowerCase()}
+                    variant={isActive ? "primary" : "tertiary"}
+                    size={1}
+                    className={`transition-all duration-200 ${
+                      isActive 
+                        ? 'shadow-lg shadow-ifrcRed/20 transform scale-105' 
+                        : 'hover:bg-white hover:shadow-md hover:scale-105'
+                    }`}
+                                      onClick={() => {
                     if (location.pathname === "/upload") {
-                      const uploadPage = document.querySelector('[data-step="2"]');
-                      if (uploadPage && !confirm("Changes will not be saved")) {
+                      if ((window as any).confirmNavigationIfNeeded) {
+                        (window as any).confirmNavigationIfNeeded(to);
+                        return;
+                      }
+                      if (!confirm("You have unsaved changes. Are you sure you want to leave?")) {
                         return;
                       }
                     }
                     navigate(to);
                   }}
-                >
-                  <Icon className={`w-4 h-4 transition-transform duration-200 ${
-                    isActive ? 'scale-110' : 'group-hover:scale-110'
-                  }`} /> 
-                  <span className="inline ml-2 font-semibold">{label}</span>
-                </Button>
+                  >
+                    <Icon className={`w-4 h-4 transition-transform duration-200 ${
+                      isActive ? 'scale-110' : 'group-hover:scale-110'
+                    }`} /> 
+                    <span className="inline ml-2 font-semibold">{label}</span>
+                  </Button>
+                </Container>
                 {isActive && (
                   <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-8 h-1 bg-ifrcRed rounded-full animate-pulse"></div>
                 )}
@@ -81,7 +97,18 @@ export default function HeaderNav() {
           variant="tertiary"
           size={1}
           className="transition-all duration-200 hover:bg-blue-50 hover:text-blue-600 hover:shadow-md hover:scale-105"
-          onClick={() => navigate('/help')}
+          onClick={() => {
+            if (location.pathname === "/upload") {
+              if ((window as any).confirmNavigationIfNeeded) {
+                (window as any).confirmNavigationIfNeeded('/help');
+                return;
+              }
+              if (!confirm("You have unsaved changes. Are you sure you want to leave?")) {
+                return;
+              }
+            }
+            navigate('/help');
+          }}
         >
           <QuestionLineIcon className="w-4 h-4" />
           <span className="inline ml-2 font-semibold">Help & Support</span>

frontend/src/pages/DevPage.tsx

@@ -35,7 +35,7 @@ export default function DevPage() {
           }
         }
       })
-      .catch(err => {
+      .catch(() => {
 
       });
   };
@@ -183,10 +183,10 @@ export default function DevPage() {
                   onClick={() => {
                     fetch('/api/models')
                       .then(r => r.json())
-                      .then(data => {
+                      .then(() => {
                         alert('Models API response received successfully');
                       })
-                      .catch(err => {
+                      .catch(() => {
                         alert('Models API error occurred');
                       });
                   }}
@@ -202,10 +202,10 @@ export default function DevPage() {
                     if (!selectedModel) return;
                     fetch(`/api/models/${selectedModel}/test`)
                       .then(r => r.json())
-                      .then(data => {
+                      .then(() => {
                         alert('Model test completed successfully');
                       })
-                      .catch(err => {
+                      .catch(() => {
                         alert('Model test failed');
                       });
                   }}

frontend/src/pages/ExplorePage/ExplorePage.module.css

@@ -1,3 +1,7 @@
+.tabSelector {
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
 .metadataTags {
   display: flex;
   flex-wrap: wrap;
@@ -7,7 +11,7 @@
 
 .metadataTag {
   padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
-  background-color: var(--go-ui-color-red-10);
+  background-color: var(--go-ui-color-red-5);
   color: var(--go-ui-color-red-90);
   font-size: var(--go-ui-font-size-xs);
   border-radius: var(--go-ui-border-radius-md);
@@ -18,30 +22,29 @@
 }
 
 .metadataTag:hover {
-  background-color: var(--go-ui-color-red-20);
-  transform: translateY(-1px);
-  box-shadow: var(--go-ui-box-shadow-xs);
+  background-color: var(--go-ui-color-red-10);
+  border-color: var(--go-ui-color-red-30);
 }
 
 .metadataTagSource {
   padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
-  background-color: var(--go-ui-color-blue-10);
-  color: var(--go-ui-color-blue-90);
+  background-color: var(--go-ui-color-red-5);
+  color: var(--go-ui-color-red-90);
   font-size: var(--go-ui-font-size-xs);
   border-radius: var(--go-ui-border-radius-md);
   font-weight: var(--go-ui-font-weight-medium);
-  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-blue-20);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-red-20);
   white-space: nowrap;
 }
 
 .metadataTagType {
   padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
-  background-color: var(--go-ui-color-red-90);
-  color: var(--go-ui-color-white);
+  background-color: var(--go-ui-color-red-5);
+  color: var(--go-ui-color-red-90);
   font-size: var(--go-ui-font-size-xs);
   border-radius: var(--go-ui-border-radius-md);
   font-weight: var(--go-ui-font-weight-medium);
-  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-red-90);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-red-20);
   white-space: nowrap;
 }
 

frontend/src/pages/ExplorePage/ExplorePage.tsx

@@ -1,11 +1,9 @@
-import { PageContainer, TextInput, SelectInput, MultiSelectInput, Button, Container } from '@ifrc-go/ui';
+import { PageContainer, TextInput, SelectInput, MultiSelectInput, Container, SegmentInput } from '@ifrc-go/ui';
 import { useState, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { StarLineIcon } from '@ifrc-go/icons';
 import styles from './ExplorePage.module.css';
 
-interface CaptionWithImageOut {
-  cap_id: string;
+interface ImageWithCaptionOut {
   image_id: string;
   title: string;
   prompt: string;
@@ -31,19 +29,25 @@ interface CaptionWithImageOut {
 
 export default function ExplorePage() {
   const navigate = useNavigate();
-  const [captions, setCaptions] = useState<CaptionWithImageOut[]>([]);
+  const [view, setView] = useState<'explore' | 'mapDetails'>('explore');
+  const [captions, setCaptions] = useState<ImageWithCaptionOut[]>([]);
   const [search, setSearch] = useState('');
   const [srcFilter, setSrcFilter] = useState('');
   const [catFilter, setCatFilter] = useState('');
   const [regionFilter, setRegionFilter] = useState('');
   const [countryFilter, setCountryFilter] = useState('');
-  const [showStarredOnly, setShowStarredOnly] = useState(false);
   const [sources, setSources] = useState<{s_code: string, label: string}[]>([]);
   const [types, setTypes] = useState<{t_code: string, label: string}[]>([]);
   const [regions, setRegions] = useState<{r_code: string, label: string}[]>([]);
   const [countries, setCountries] = useState<{c_code: string, label: string, r_code: string}[]>([]);
+  const [imageTypes, setImageTypes] = useState<{image_type: string, label: string}[]>([]);
   const [isLoadingFilters, setIsLoadingFilters] = useState(true);
 
+  const viewOptions = [
+    { key: 'explore' as const, label: 'Explore' },
+    { key: 'mapDetails' as const, label: 'Map Details' }
+  ];
+
   const fetchCaptions = () => {
     setIsLoadingFilters(true);
     fetch('/api/captions')
@@ -55,10 +59,12 @@ export default function ExplorePage() {
       })
       .then(data => {
         if (Array.isArray(data)) {
-          setCaptions(data);
-
+          const imagesWithCaptions = data.filter((item: any) => {
+            const hasCaption = item.title && item.generated && item.model;
+            return hasCaption;
+          });
+          setCaptions(imagesWithCaptions);
         } else {
-  
           setCaptions([]);
         }
       })
@@ -107,191 +113,147 @@ export default function ExplorePage() {
       fetch('/api/countries').then(r => {
         if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
         return r.json();
-      })
-    ]).then(([sourcesData, typesData, regionsData, countriesData]) => {
-
-      
-      if (Array.isArray(sourcesData)) {
-        setSources(sourcesData);
-      } else {
-
-        setSources([]);
-      }
-      
-      if (Array.isArray(typesData)) {
-        setTypes(typesData);
-      } else {
-
-        setTypes([]);
-      }
-      
-      if (Array.isArray(regionsData)) {
-        setRegions(regionsData);
-      } else {
-
-        setRegions([]);
-      }
-      
-      if (Array.isArray(countriesData)) {
-        setCountries(countriesData);
-      } else {
-
-        setCountries([]);
-      }
-      
-      setIsLoadingFilters(false);
+      }),
+      fetch('/api/image-types').then(r => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
+        return r.json();
+      }),
+    ]).then(([sourcesData, typesData, regionsData, countriesData, imageTypesData]) => {
+      setSources(sourcesData);
+      setTypes(typesData);
+      setRegions(regionsData);
+      setCountries(countriesData);
+      setImageTypes(imageTypesData);
     }).catch(() => {
-
-      setSources([]);
-      setTypes([]);
-      setRegions([]);
-      setCountries([]);
+    }).finally(() => {
       setIsLoadingFilters(false);
     });
   }, []);
 
   const filtered = useMemo(() => {
-    if (!Array.isArray(captions)) {
-      
-      return [];
-    }
-    
     return captions.filter(c => {
-      const searchLower = search.toLowerCase();
-      const searchMatch = !search || 
-        c.file_key.toLowerCase().includes(searchLower) ||
-        c.source.toLowerCase().includes(searchLower) ||
-        c.event_type.toLowerCase().includes(searchLower) ||
-        c.title.toLowerCase().includes(searchLower) ||
-        (c.edited && c.edited.toLowerCase().includes(searchLower)) ||
-        (c.generated && c.generated.toLowerCase().includes(searchLower));
+      const matchesSearch = !search || 
+        c.title?.toLowerCase().includes(search.toLowerCase()) ||
+        c.generated?.toLowerCase().includes(search.toLowerCase()) ||
+        c.source?.toLowerCase().includes(search.toLowerCase()) ||
+        c.event_type?.toLowerCase().includes(search.toLowerCase());
       
-      const sourceMatch = !srcFilter || c.source === srcFilter;
-      const typeMatch = !catFilter || c.event_type === catFilter;
-      const regionMatch = !regionFilter || (c.countries && c.countries.some(c => c.r_code === regionFilter));
-      const countryMatch = !countryFilter || (c.countries && c.countries.some(c => c.c_code === countryFilter));
-      const starredMatch = !showStarredOnly || c.starred === true;
+      const matchesSource = !srcFilter || c.source === srcFilter;
+      const matchesCategory = !catFilter || c.event_type === catFilter;
+      const matchesRegion = !regionFilter || 
+        c.countries.some(country => country.r_code === regionFilter);
+      const matchesCountry = !countryFilter || 
+        c.countries.some(country => country.c_code === countryFilter);
       
-      return searchMatch && sourceMatch && typeMatch && regionMatch && countryMatch && starredMatch;
+      return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry;
     });
   }, [captions, search, srcFilter, catFilter, regionFilter, countryFilter]);
 
+  const toggleStarred = (imageId: string) => {
+    setCaptions(prev => prev.map(c => 
+      c.image_id === imageId ? { ...c, starred: !c.starred } : c
+    ));
+    
+    fetch(`/api/images/${imageId}/caption`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ starred: !captions.find(c => c.image_id === imageId)?.starred })
+    }).catch(() => {
+      setCaptions(prev => prev.map(c => 
+        c.image_id === imageId ? { ...c, starred: !c.starred } : c
+      ));
+    });
+  };
+
   return (
     <PageContainer>
       <Container
-        heading="Explore Examples"
+        heading="Explore"
         headingLevel={2}
         withHeaderBorder
         withInternalPadding
         className="max-w-7xl mx-auto"
       >
-        <div className="space-y-6">
-          {/* Header Section */}
-          <div className="flex justify-between items-center">
-            <div>
-              <p className="text-gray-600 mt-1">Browse and search through uploaded crisis maps</p>
-            </div>
-            <div className="flex gap-2">
-              <Button
-                name="reference-examples"
-                variant={showStarredOnly ? "primary" : "secondary"}
-                onClick={() => setShowStarredOnly(!showStarredOnly)}
-              >
-                <StarLineIcon className="w-4 h-4" />
-                <span className="inline ml-2">Reference Examples</span>
-              </Button>
-              <Button
-                name="export"
-                variant="secondary"
-                onClick={() => {
-                  const data = {
-                    captions: captions,
-                    filters: {
-                      sources: sources,
-                      types: types,
-                      regions: regions,
-                      countries: countries
-                    },
-                    timestamp: new Date().toISOString()
-                  };
-                  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-                  const url = URL.createObjectURL(blob);
-                  const a = document.createElement('a');
-                  a.href = url;
-                  a.download = `promptaid-vision-captions-${new Date().toISOString().split('T')[0]}.json`;
-                  document.body.appendChild(a);
-                  a.click();
-                  document.body.removeChild(a);
-                  URL.revokeObjectURL(url);
-                }}
-              >
-                Export
-              </Button>
-            </div>
-          </div>
+        <div className={styles.tabSelector}>
+          <SegmentInput
+            name="explore-view"
+            value={view}
+            onChange={(value) => {
+              if (value === 'explore' || value === 'mapDetails') {
+                setView(value);
+                if (value === 'mapDetails' && captions.length > 0) {
+                  navigate(`/map/${captions[0].image_id}`);
+                }
+              }
+            }}
+            options={viewOptions}
+            keySelector={(o) => o.key}
+            labelSelector={(o) => o.label}
+          />
+        </div>
 
-          {/* Filters Bar */}
-          <Container heading="Search & Filters" headingLevel={3} withHeaderBorder withInternalPadding>
-            <div className="flex flex-wrap gap-4 items-center">
-              <TextInput
-                name="search"
-                placeholder="Search by filename, title…"
-                value={search}
-                onChange={(e) => setSearch(e || '')}
-                className="flex-1 min-w-[12rem]"
-              />
+        {view === 'explore' ? (
+          <div className="space-y-6">
+            {/* Search and Filters */}
+            <div className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <TextInput
+                  name="search"
+                  placeholder="Search examples..."
+                  value={search}
+                  onChange={(v) => setSearch(v || '')}
+                />
 
-              <SelectInput
-                name="source"
-                placeholder={isLoadingFilters ? "Loading..." : "All Sources"}
-                options={sources}
-                value={srcFilter || null}
-                onChange={(v) => setSrcFilter(v as string || '')}
-                keySelector={(o) => o.s_code}
-                labelSelector={(o) => o.label}
-                required={false}
-                disabled={isLoadingFilters}
-              />
+                <SelectInput
+                  name="source"
+                  placeholder={isLoadingFilters ? "Loading..." : "All Sources"}
+                  options={sources}
+                  value={srcFilter || null}
+                  onChange={(v) => setSrcFilter(v as string || '')}
+                  keySelector={(o) => o.s_code}
+                  labelSelector={(o) => o.label}
+                  required={false}
+                  disabled={isLoadingFilters}
+                />
 
-              <SelectInput
-                name="type"
-                placeholder={isLoadingFilters ? "Loading..." : "All Types"}
-                options={types}
-                value={catFilter || null}
-                onChange={(v) => setCatFilter(v as string || '')}
-                keySelector={(o) => o.t_code}
-                labelSelector={(o) => o.label}
-                required={false}
-                disabled={isLoadingFilters}
-              />
+                <SelectInput
+                  name="category"
+                  placeholder={isLoadingFilters ? "Loading..." : "All Categories"}
+                  options={types}
+                  value={catFilter || null}
+                  onChange={(v) => setCatFilter(v as string || '')}
+                  keySelector={(o) => o.t_code}
+                  labelSelector={(o) => o.label}
+                  required={false}
+                  disabled={isLoadingFilters}
+                />
 
-              <SelectInput
-                name="region"
-                placeholder={isLoadingFilters ? "Loading..." : "All Regions"}
-                options={regions}
-                value={regionFilter || null}
-                onChange={(v) => setRegionFilter(v as string || '')}
-                keySelector={(o) => o.r_code}
-                labelSelector={(o) => o.label}
-                required={false}
-                disabled={isLoadingFilters}
-              />
+                <SelectInput
+                  name="region"
+                  placeholder={isLoadingFilters ? "Loading..." : "All Regions"}
+                  options={regions}
+                  value={regionFilter || null}
+                  onChange={(v) => setRegionFilter(v as string || '')}
+                  keySelector={(o) => o.r_code}
+                  labelSelector={(o) => o.label}
+                  required={false}
+                  disabled={isLoadingFilters}
+                />
 
-              <MultiSelectInput
-                name="country"
-                placeholder={isLoadingFilters ? "Loading..." : "All Countries"}
-                options={countries}
-                value={countryFilter ? [countryFilter] : []}
-                onChange={(v) => setCountryFilter((v as string[])[0] || '')}
-                keySelector={(o) => o.c_code}
-                labelSelector={(o) => o.label}
-                disabled={isLoadingFilters}
-              />
+                <MultiSelectInput
+                  name="country"
+                  placeholder={isLoadingFilters ? "Loading..." : "All Countries"}
+                  options={countries}
+                  value={countryFilter ? [countryFilter] : []}
+                  onChange={(v) => setCountryFilter((v as string[])[0] || '')}
+                  keySelector={(o) => o.c_code}
+                  labelSelector={(o) => o.label}
+                  disabled={isLoadingFilters}
+                />
+              </div>
             </div>
-          </Container>
 
-          {/* Results Section */}
-          <Container heading="Results" headingLevel={3} withHeaderBorder withInternalPadding>
+            {/* Results Section */}
             <div className="space-y-4">
               <div className="flex justify-between items-center">
                 <p className="text-sm text-gray-600">
@@ -302,7 +264,7 @@ export default function ExplorePage() {
               {/* List */}
               <div className="space-y-4">
                 {filtered.map(c => (
-                  <div key={c.cap_id} className={styles.mapItem} onClick={() => navigate(`/map/${c.image_id}?captionId=${c.cap_id}`)}>
+                  <div key={c.image_id} className={styles.mapItem} onClick={() => navigate(`/map/${c.image_id}`)}>
                     <div className={styles.mapItemImage} style={{ width: '120px', height: '80px' }}>
                       {c.image_url ? (
                         <img 
@@ -325,17 +287,24 @@ export default function ExplorePage() {
                       <div className={styles.mapItemMetadata}>
                         <div className={styles.metadataTags}>
                           <span className={styles.metadataTagSource}>
-                            {c.source}
+                            {sources.find(s => s.s_code === c.source)?.label || c.source}
                           </span>
                           <span className={styles.metadataTagType}>
-                            {c.event_type}
-                          </span>
-                          <span className={styles.metadataTag}>
-                            {c.epsg}
+                            {types.find(t => t.t_code === c.event_type)?.label || c.event_type}
                           </span>
                           <span className={styles.metadataTag}>
-                            {c.image_type}
+                            {imageTypes.find(it => it.image_type === c.image_type)?.label || c.image_type}
                           </span>
+                          {c.countries && c.countries.length > 0 && (
+                            <>
+                              <span className={styles.metadataTag}>
+                                {regions.find(r => r.r_code === c.countries[0].r_code)?.label || 'Unknown Region'}
+                              </span>
+                              <span className={styles.metadataTag}>
+                                {c.countries.map(country => country.label).join(', ')}
+                              </span>
+                            </>
+                          )}
                         </div>
                       </div>
                     </div>
@@ -349,8 +318,15 @@ export default function ExplorePage() {
                 )}
               </div>
             </div>
-          </Container>
-        </div>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <div className="text-center py-12">
+              <p className="text-gray-500">Map Details view coming soon...</p>
+              <p className="text-sm text-gray-400 mt-2">This will show detailed information about individual maps</p>
+            </div>
+          </div>
+        )}
       </Container>
     </PageContainer>
   );

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

@@ -1,3 +1,7 @@
+.tabSelector {
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
 .backButton {
   margin-bottom: var(--go-ui-spacing-lg);
 }
@@ -43,7 +47,7 @@
 
 .metadataTag {
   padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
-  background-color: var(--go-ui-color-red-10);
+  background-color: var(--go-ui-color-red-5);
   color: var(--go-ui-color-red-90);
   font-size: var(--go-ui-font-size-sm);
   border-radius: var(--go-ui-border-radius-md);
@@ -53,9 +57,8 @@
 }
 
 .metadataTag:hover {
-  background-color: var(--go-ui-color-red-20);
-  transform: translateY(-1px);
-  box-shadow: var(--go-ui-box-shadow-xs);
+  background-color: var(--go-ui-color-red-10);
+  border-color: var(--go-ui-color-red-30);
 }
 
 .captionContainer {

frontend/src/pages/MapDetailsPage/MapDetailPage.tsx

@@ -1,38 +1,53 @@
-import { PageContainer, Button, Container, Spinner } from '@ifrc-go/ui';
+import { PageContainer, Container, Button, Spinner, SegmentInput } from '@ifrc-go/ui';
+import { useParams, useNavigate } from 'react-router-dom';
 import { useState, useEffect } from 'react';
-import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
 import styles from './MapDetailPage.module.css';
 
 interface MapOut {
   image_id: string;
   file_key: string;
-  image_url: string;
+  sha256: string;
   source: string;
   event_type: string;
   epsg: string;
   image_type: string;
-  countries?: Array<{
+  image_url: string;
+  countries: Array<{
     c_code: string;
     label: string;
     r_code: string;
   }>;
-  captions?: Array<{
-    title: string;
-    generated: string;
-    edited?: string;
-            cap_id?: string;
-  }>;
+  title?: string;
+  prompt?: string;
+  model?: string;
+  schema_id?: string;
+  raw_json?: any;
+  generated?: string;
+  edited?: string;
+  accuracy?: number;
+  context?: number;
+  usability?: number;
+  starred?: boolean;
+  created_at?: string;
+  updated_at?: string;
 }
 
 export default function MapDetailPage() {
   const { mapId } = useParams<{ mapId: string }>();
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const captionId = searchParams.get('captionId');
+  const [view, setView] = useState<'explore' | 'mapDetails'>('mapDetails');
   const [map, setMap] = useState<MapOut | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [sources, setSources] = useState<{s_code: string, label: string}[]>([]);
+  const [types, setTypes] = useState<{t_code: string, label: string}[]>([]);
+  const [imageTypes, setImageTypes] = useState<{image_type: string, label: string}[]>([]);
+  const [regions, setRegions] = useState<{r_code: string, label: string}[]>([]);
 
+  const viewOptions = [
+    { key: 'explore' as const, label: 'Explore' },
+    { key: 'mapDetails' as const, label: 'Map Details' }
+  ];
 
   useEffect(() => {
     if (!mapId) {
@@ -58,14 +73,76 @@ export default function MapDetailPage() {
       });
   }, [mapId]);
 
-  const handleContribute = () => {
+  useEffect(() => {
+    Promise.all([
+      fetch('/api/sources').then(r => r.json()),
+      fetch('/api/types').then(r => r.json()),
+      fetch('/api/image-types').then(r => r.json()),
+      fetch('/api/regions').then(r => r.json()),
+    ]).then(([sourcesData, typesData, imageTypesData, regionsData]) => {
+      setSources(sourcesData);
+      setTypes(typesData);
+      setImageTypes(imageTypesData);
+      setRegions(regionsData);
+    }).catch(console.error);
+  }, []);
+
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  const handleContribute = async () => {
     if (!map) return;
     
-    const url = captionId ? 
-      `/upload?mapId=${map.image_id}&step=2&captionId=${captionId}` : 
-      `/upload?mapId=${map.image_id}&step=2`;
-    navigate(url);
+    setIsGenerating(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: 'Analyze this crisis map and provide a detailed description of the emergency situation, affected areas, and key information shown in the map.',
+          ...(modelName && { model_name: modelName }),
+        }),
+      });
+      
+      if (!capRes.ok) {
+        const errorData = await capRes.json();
+        throw new Error(errorData.error || 'Failed to generate caption');
+      }
+      
+      const url = `/upload?imageUrl=${encodeURIComponent(json.image_url)}&isContribution=true&step=2a&imageId=${newId}`;
+      navigate(url);
+      
+    } catch (error: any) {
+      console.error('Contribution failed:', error);
+      alert(`Contribution failed: ${error.message || 'Unknown error'}`);
+    } finally {
+      setIsGenerating(false);
+    }
   };
+ 
 
   if (loading) {
     return (
@@ -103,123 +180,121 @@ export default function MapDetailPage() {
 
   return (
     <PageContainer>
-      <div className={styles.backButton}>
-        <Button
-          name="back"
-          variant="secondary"
-          onClick={() => navigate('/explore')}
-        >
-          ← Back to Explore
-        </Button>
-      </div>
-
-      <div className={styles.gridLayout}>
-        {/* Image Section */}
-        <Container
-          heading="Map Image"
-          headingLevel={3}
-          withHeaderBorder
-          withInternalPadding
-          spacing="comfortable"
-        >
-          <div className={styles.imageContainer}>
-            {map.image_url ? (
-              <img
-                src={map.image_url}
-                alt={map.file_key}
-              />
-            ) : (
-              <div className={styles.imagePlaceholder}>
-                No image available
-              </div>
-            )}
-          </div>
-        </Container>
+      <Container
+        heading="Explore"
+        headingLevel={2}
+        withHeaderBorder
+        withInternalPadding
+        className="max-w-7xl mx-auto"
+      >
+        <div className={styles.tabSelector}>
+          <SegmentInput
+            name="map-details-view"
+            value={view}
+            onChange={(value) => {
+              if (value === 'mapDetails' || value === 'explore') {
+                setView(value);
+                if (value === 'explore') {
+                  navigate('/explore');
+                }
+              }
+            }}
+            options={viewOptions}
+            keySelector={(o) => o.key}
+            labelSelector={(o) => o.label}
+          />
+        </div>
 
-        {/* Details Section */}
-        <div className={styles.detailsSection}>
-          <Container
-            heading="Title"
-            headingLevel={3}
-            withHeaderBorder
-            withInternalPadding
-            spacing="comfortable"
-          >
-            <div className="text-gray-700">
-              {map.captions && map.captions.length > 0 ? map.captions[0].title : '— no title —'}
-            </div>
-          </Container>
+        {view === 'mapDetails' ? (
+          <>
+            <div className={styles.gridLayout}>
+              {/* Image Section */}
+              <Container
+                heading={map.title || "Map Image"}
+                headingLevel={2}
+                withHeaderBorder
+                withInternalPadding
+                spacing="comfortable"
+              >
+                <div className={styles.imageContainer}>
+                  {map.image_url ? (
+                    <img
+                      src={map.image_url}
+                      alt={map.file_key}
+                    />
+                  ) : (
+                    <div className={styles.imagePlaceholder}>
+                      No image available
+                    </div>
+                  )}
+                </div>
+              </Container>
 
-          <Container
-            heading="Metadata"
-            headingLevel={3}
-            withHeaderBorder
-            withInternalPadding
-            spacing="comfortable"
-          >
-            <div className={styles.metadataTags}>
-              <span className={styles.metadataTag}>
-                {map.source}
-              </span>
-              <span className={styles.metadataTag}>
-                {map.event_type}
-              </span>
-              <span className={styles.metadataTag}>
-                {map.epsg}
-              </span>
-              <span className={styles.metadataTag}>
-                {map.image_type}
-              </span>
-            </div>
-          </Container>
+              {/* Details Section */}
+              <div className={styles.detailsSection}>
+                <Container
+                  heading="Tags"
+                  headingLevel={3}
+                  withHeaderBorder
+                  withInternalPadding
+                  spacing="comfortable"
+                >
+                  <div className={styles.metadataTags}>
+                    <span className={styles.metadataTag}>
+                      {sources.find(s => s.s_code === map.source)?.label || map.source}
+                    </span>
+                    <span className={styles.metadataTag}>
+                      {types.find(t => t.t_code === map.event_type)?.label || map.event_type}
+                    </span>
+                    <span className={styles.metadataTag}>
+                      {imageTypes.find(it => it.image_type === map.image_type)?.label || map.image_type}
+                    </span>
+                    {map.countries && map.countries.length > 0 && (
+                      <>
+                        <span className={styles.metadataTag}>
+                          {regions.find(r => r.r_code === map.countries[0].r_code)?.label || 'Unknown Region'}
+                        </span>
+                        <span className={styles.metadataTag}>
+                          {map.countries.map(country => country.label).join(', ')}
+                        </span>
+                      </>
+                    )}
+                  </div>
+                </Container>
 
-          <Container
-            heading="Generated Caption"
-            headingLevel={3}
-            withHeaderBorder
-            withInternalPadding
-            spacing="comfortable"
-          >
-            <div className={styles.captionContainer}>
-              {map.captions && map.captions.length > 0 ? (
-                map.captions.map((caption, index) => (
-                  <div 
-                    key={index} 
-                    className={`${styles.captionText} ${
-                      captionId && map.captions && map.captions[index] && 
-                      'cap_id' in map.captions[index] && 
-                      map.captions[index].cap_id === captionId ? 
-                      styles.highlightedCaption : ''
-                    }`}
-                  >
-                    <p>{caption.edited || caption.generated}</p>
-                    {captionId && map.captions && map.captions[index] && 
-                     'cap_id' in map.captions[index] && 
-                     map.captions[index].cap_id === captionId && (
-                      <div className={styles.captionHighlight}>
-                        ← This is the caption you selected
+                <Container
+                  heading="Description"
+                  headingLevel={3}
+                  withHeaderBorder
+                  withInternalPadding
+                  spacing="comfortable"
+                >
+                  <div className={styles.captionContainer}>
+                    {map.generated ? (
+                      <div className={styles.captionText}>
+                        <p>{map.edited || map.generated}</p>
                       </div>
+                    ) : (
+                      <p>— no caption yet —</p>
                     )}
                   </div>
-                ))
-              ) : (
-                <p>— no caption yet —</p>
-              )}
+                </Container>
+              </div>
             </div>
-          </Container>
-        </div>
-      </div>
 
-      {/* Contribute Section */}
-      <div className={styles.contributeSection}>
-        <Button
-          name="contribute"
-          onClick={handleContribute}
-          className={styles.contributeButton}
-        >
-          Contribute
-        </Button>
-      </div>
+            {/* Contribute Section */}
+            <div className="flex justify-center mt-8">
+              <Button
+                name="contribute"
+                onClick={handleContribute}
+                disabled={isGenerating}
+              >
+                {isGenerating ? 'Generating...' : 'Contribute'}
+              </Button>
+            </div>
+          </>
+        ) : null}
+      </Container>
     </PageContainer>
   );
 } 

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

@@ -493,3 +493,5 @@
   padding: var(--go-ui-spacing-lg);
   box-shadow: var(--go-ui-box-shadow-xs);
 }
+
+

frontend/src/pages/UploadPage/UploadPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import type { DragEvent } from 'react';
 import {
   PageContainer, Heading, Button,
@@ -9,15 +9,17 @@ import {
   ArrowRightLineIcon,
   DeleteBinLineIcon,
 } from '@ifrc-go/icons';
-import { Link, useSearchParams } from 'react-router-dom';
+import { Link, useSearchParams, useNavigate } from 'react-router-dom';
 import styles from './UploadPage.module.css';
 
 const SELECTED_MODEL_KEY = 'selectedVlmModel';
 
 export default function UploadPage() {
   const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
   const [step, setStep] = useState<1 | '2a' | '2b' | 3>(1);
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingContribution, setIsLoadingContribution] = useState(false);
   const stepRef = useRef(step);
   const uploadedImageIdRef = useRef<string | null>(null);
   const [preview, setPreview] = useState<string | null>(null);
@@ -59,7 +61,10 @@ export default function UploadPage() {
       fetch('/api/image-types').then(r => r.json()),
       fetch('/api/countries').then(r => r.json()),
       fetch('/api/models').then(r => r.json())
-    ]).then(([sourcesData, typesData, spatialData, imageTypesData, countriesData]) => {
+    ]).then(([sourcesData, typesData, spatialData, imageTypesData, countriesData, modelsData]) => {
+      if (!localStorage.getItem(SELECTED_MODEL_KEY) && modelsData?.length) {
+        localStorage.setItem(SELECTED_MODEL_KEY, modelsData[0].m_code);
+      }
       setSources(sourcesData);
       setTypes(typesData);
       setSpatialReferences(spatialData);
@@ -73,73 +78,143 @@ export default function UploadPage() {
     });
   }, []);
 
+
+
+  const handleNavigation = (to: string) => {
+    if (uploadedImageIdRef.current) {
+      if (confirm("Leave page? Your uploaded image will be deleted.")) {
+        fetch(`/api/images/${uploadedImageIdRef.current}`, { method: "DELETE" })
+          .then(() => {
+            navigate(to);
+          })
+          .catch(console.error);
+      }
+    } else {
+      navigate(to);
+    }
+  };
+
   useEffect(() => {
-    const handleBeforeUnload = () => {
-      if (uploadedImageIdRef.current && stepRef.current !== 3) {
+    (window as any).confirmNavigationIfNeeded = (to: string) => {
+      handleNavigation(to);
+    };
+    
+    return () => {
+      delete (window as any).confirmNavigationIfNeeded;
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (uploadedImageIdRef.current) {
+        const message = 'You have an uploaded image that will be deleted if you leave this page. Are you sure you want to leave?';
+        event.preventDefault();
+        event.returnValue = message;
+        return message;
+      }
+    };
+
+    const handleCleanup = () => {
+      if (uploadedImageIdRef.current) {
         fetch(`/api/images/${uploadedImageIdRef.current}`, { method: "DELETE" }).catch(console.error);
       }
     };
 
+    const handleGlobalClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      const link = target.closest('a[href]') || target.closest('[data-navigate]');
+      
+      if (link && uploadedImageIdRef.current) {
+        const href = link.getAttribute('href') || link.getAttribute('data-navigate');
+        if (href && href !== '#' && !href.startsWith('javascript:') && !href.startsWith('mailto:')) {
+          event.preventDefault();
+          event.stopPropagation();
+          handleNavigation(href);
+        }
+      }
+    };
+
     window.addEventListener('beforeunload', handleBeforeUnload);
+    document.addEventListener('click', handleGlobalClick, true);
+    
     return () => {
       window.removeEventListener('beforeunload', handleBeforeUnload);
-      if (uploadedImageIdRef.current && stepRef.current !== 3) {
-        fetch(`/api/images/${uploadedImageIdRef.current}`, { method: "DELETE" }).catch(console.error);
-      }
+      document.removeEventListener('click', handleGlobalClick, true);
+      handleCleanup();
     };
   }, []);
 
-  const [captionId, setCaptionId] = useState<string | null>(null);
   const [imageUrl, setImageUrl] = useState<string|null>(null);
   const [draft, setDraft] = useState('');
   
   useEffect(() => {
-    const mapId = searchParams.get('mapId');
+    const imageUrlParam = searchParams.get('imageUrl');
     const stepParam = searchParams.get('step');
-    const captionIdParam = searchParams.get('captionId');
+    const imageIdParam = searchParams.get('imageId');
     
-    if (mapId && stepParam === '2') {
-      fetch(`/api/images/${mapId}`)
-        .then(response => response.json())
-        .then(mapData => {
-          setImageUrl(mapData.image_url);
-          setSource(mapData.source);
-          setEventType(mapData.event_type);
-          setEpsg(mapData.epsg);
-          setImageType(mapData.image_type);
-          
-          setUploadedImageId(mapId);
-          
-          if (captionIdParam) {
-            setCaptionId(captionIdParam);
-            const existingCaption = mapData.captions?.find((c: any) => c.cap_id === captionIdParam);
-            if (existingCaption) {
-              setDraft(existingCaption.edited || existingCaption.generated);
-              setTitle(existingCaption.title || 'Generated Caption');
-            }
-            
-            if (mapData.countries && Array.isArray(mapData.countries)) {
-              setCountries(mapData.countries.map((c: any) => c.c_code));
-            }
-            
-            handleStepChange('2a');
-          } else {
-            setCaptionId(null);
-            setDraft('');
-            setTitle('');
-
-            
-            if (mapData.countries && Array.isArray(mapData.countries)) {
-              setCountries(mapData.countries.map((c: any) => c.c_code));
-            }
-            
-            handleStepChange('2a');
-          }
-        })
-        .catch(err => {
-          alert('Failed to load map data. Please try again.');
-        });
-    }
+                if (imageUrlParam) {
+        setImageUrl(imageUrlParam);
+        
+        if (stepParam === '2a' && imageIdParam) {
+          setIsLoadingContribution(true);
+          setUploadedImageId(imageIdParam);
+          fetch(`/api/images/${imageIdParam}`)
+            .then(res => res.json())
+            .then(data => {
+              if (data.image_type) setImageType(data.image_type);
+              
+              if (data.generated) setDraft(data.generated);
+              
+              let extractedMetadata = data.raw_json?.extracted_metadata;
+              console.log('Raw extracted_metadata:', extractedMetadata);
+              
+              if (!extractedMetadata && data.generated) {
+                try {
+                  const parsedGenerated = JSON.parse(data.generated);
+                  console.log('Parsed generated field:', parsedGenerated);
+                  if (parsedGenerated.metadata) {
+                    extractedMetadata = parsedGenerated;
+                    console.log('Using metadata from generated field');
+                  }
+                } catch (e) {
+                  console.log('Could not parse generated field as JSON:', e);
+                }
+              }
+              
+              if (extractedMetadata) {
+                const metadata = extractedMetadata.metadata || extractedMetadata;
+                console.log('Final metadata to apply:', metadata);
+                if (metadata.title) {
+                  console.log('Setting title to:', metadata.title);
+                  setTitle(metadata.title);
+                }
+                if (metadata.source) {
+                  console.log('Setting source to:', metadata.source);
+                  setSource(metadata.source);
+                }
+                if (metadata.type) {
+                  console.log('Setting event type to:', metadata.type);
+                  setEventType(metadata.type);
+                }
+                if (metadata.epsg) {
+                  console.log('Setting EPSG to:', metadata.epsg);
+                  setEpsg(metadata.epsg);
+                }
+                if (metadata.countries && Array.isArray(metadata.countries)) {
+                  console.log('Setting countries to:', metadata.countries);
+                  setCountries(metadata.countries);
+                }
+              } else {
+                console.log('No metadata found to extract');
+              }
+              
+              setStep('2a');
+              setIsLoadingContribution(false);
+            })
+            .catch(console.error)
+            .finally(() => setIsLoadingContribution(false));
+        }
+      }
   }, [searchParams]);
 
   const resetToStep1 = () => {
@@ -147,7 +222,7 @@ export default function UploadPage() {
     setFile(null);
     setPreview(null);
     setImageUrl(null);
-    setCaptionId(null);
+    
     setDraft('');
     setTitle('');
     setScores({ accuracy: 50, context: 50, usability: 50 });
@@ -162,15 +237,15 @@ export default function UploadPage() {
   const [isFullSizeModalOpen, setIsFullSizeModalOpen] = useState(false);
 
 
-  const onDrop = useCallback((e: DragEvent<HTMLDivElement>) => {
+  const onDrop = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     const dropped = e.dataTransfer.files?.[0];
     if (dropped) setFile(dropped);
-  }, []);
+  };
 
-  const onFileChange = useCallback((file: File | undefined, _name: string) => {
+  const onFileChange = (file: File | undefined, _name: string) => {
     if (file) setFile(file);
-  }, []);
+  };
 
   useEffect(() => {
     if (!file) {
@@ -242,16 +317,18 @@ export default function UploadPage() {
       );
       const capJson = await readJsonSafely(capRes);
       if (!capRes.ok) throw new Error(capJson.error || 'Caption failed');
-      setCaptionId(capJson.cap_id);
+      setUploadedImageId(mapIdVal);                     
+
 
       const extractedMetadata = capJson.raw_json?.extracted_metadata;
       if (extractedMetadata) {
-        if (extractedMetadata.title) setTitle(extractedMetadata.title);
-        if (extractedMetadata.source) setSource(extractedMetadata.source);
-        if (extractedMetadata.type) setEventType(extractedMetadata.type);
-        if (extractedMetadata.epsg) setEpsg(extractedMetadata.epsg);
-        if (extractedMetadata.countries && Array.isArray(extractedMetadata.countries)) {
-          setCountries(extractedMetadata.countries);
+        const metadata = extractedMetadata.metadata || extractedMetadata;
+        if (metadata.title) setTitle(metadata.title);
+        if (metadata.source) setSource(metadata.source);
+        if (metadata.type) setEventType(metadata.type);
+        if (metadata.epsg) setEpsg(metadata.epsg);
+        if (metadata.countries && Array.isArray(metadata.countries)) {
+          setCountries(metadata.countries);
         }
       }
 
@@ -264,8 +341,69 @@ export default function UploadPage() {
     }
   }
 
+  async function handleGenerateFromUrl() {
+    if (!imageUrl) return;
+    setIsLoading(true);
+    try {
+      // 1) Create a NEW image from server-side URL fetch
+      const res = await fetch('/api/contribute/from-url', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          url: imageUrl,
+          source,
+          event_type: eventType,
+          epsg,
+          image_type: imageType,
+          countries,
+        }),
+      });
+      const json = await readJsonSafely(res);
+      if (!res.ok) throw new Error(json.error || 'Upload failed');
+  
+      const newId = json.image_id as string;
+      setUploadedImageId(newId);
+      setImageUrl(json.image_url);
+  
+      const modelName = localStorage.getItem(SELECTED_MODEL_KEY) || undefined;
+      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:
+            'Analyze this crisis map and provide a detailed description of the emergency situation, affected areas, and key information shown in the map.',
+          ...(modelName && { model_name: modelName }),
+        }),
+      });
+      const capJson = await readJsonSafely(capRes);
+      if (!capRes.ok) throw new Error(capJson.error || 'Caption failed');
+  
+      const extractedMetadata = capJson.raw_json?.extracted_metadata;
+      if (extractedMetadata) {
+        const metadata = extractedMetadata.metadata || extractedMetadata;
+        if (metadata.title) setTitle(metadata.title);
+        if (metadata.source) setSource(metadata.source);
+        if (metadata.type) setEventType(metadata.type);
+        if (metadata.epsg) setEpsg(metadata.epsg);
+        if (metadata.countries && Array.isArray(metadata.countries)) {
+          setCountries(metadata.countries);
+        }
+      }
+  
+      setDraft(capJson.generated || '');
+      handleStepChange('2a');
+    } catch (err) {
+      handleApiError(err, 'Upload');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  
+
   async function handleSubmit() {
-    if (!captionId) return alert("No caption to submit");
+    console.log('handleSubmit called with:', { uploadedImageId, title, draft });
+    if (!uploadedImageId) return alert("No image to submit");
     
     try {
       const metadataBody = {
@@ -275,6 +413,7 @@ export default function UploadPage() {
         image_type: imageType,
         countries: countries,
       };
+      console.log('Updating metadata:', metadataBody);
       const metadataRes = await fetch(`/api/images/${uploadedImageId}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
@@ -290,7 +429,8 @@ export default function UploadPage() {
         context: scores.context,
         usability: scores.usability,
       };
-      const captionRes = await fetch(`/api/captions/${captionId}`, {
+      console.log('Updating caption:', captionBody);
+      const captionRes = await fetch(`/api/images/${uploadedImageId}/caption`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(captionBody),
@@ -306,115 +446,50 @@ export default function UploadPage() {
   }
 
   async function handleDelete() {
+    console.log('handleDelete called with uploadedImageId:', uploadedImageId);
     if (!uploadedImageId) {
-      
-      alert('No caption to delete. Please try refreshing the page.');
+      alert('No image to delete. Please try refreshing the page.');
       return;
     }
     
-    if (confirm("Are you sure you want to delete this caption? This action cannot be undone.")) {
+    if (confirm("Delete this image? This cannot be undone.")) {
       try {
-        const captionsResponse = await fetch(`/api/images/${uploadedImageId}/captions`);
-        let hasOtherCaptions = false;
+        console.log('Deleting image with ID:', uploadedImageId);
+        const res = await fetch(`/api/images/${uploadedImageId}`, {
+          method: "DELETE",
+        });
         
-        if (captionsResponse.ok) {
-          const captions = await captionsResponse.json();
-          hasOtherCaptions = captions.some((cap: any) => cap.cap_id !== captionId);
+        if (!res.ok) {
+          const json = await readJsonSafely(res);
+          throw new Error(json.error || `Delete failed with status ${res.status}`);
         }
         
-        if (hasOtherCaptions) {
-          if (captionId) {
-            const capRes = await fetch(`/api/captions/${captionId}`, {
-              method: "DELETE",
-            });
-            if (!capRes.ok) {
-              throw new Error('Failed to delete caption');
-            }
-          }
+        // If this was a contribution, navigate to explore page
+        if (searchParams.get('isContribution') === 'true') {
+          navigate('/explore');
         } else {
-          const res = await fetch(`/api/images/${uploadedImageId}`, {
-            method: "DELETE",
-          });
-          
-          if (!res.ok) {
-            const json = await readJsonSafely(res);
-    
-            throw new Error(json.error || `Delete failed with status ${res.status}`);
-          }
+          resetToStep1();
         }
-        
-        resetToStep1();
       } catch (err) {
-
         handleApiError(err, 'Delete');
       }
     }
   }
 
-  const handleProcessCaption = useCallback(async () => {
-    if (!uploadedImageId) {
-      alert('No image ID available to create a new caption.');
-      return;
-    }
-
-    setIsLoading(true);
 
-    try {
-      if (captionId) {
-        const captionBody = {
-          title: title,
-          edited: draft || '',
-        };
-        const captionRes = await fetch(`/api/captions/${captionId}`, {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(captionBody),
-        });
-        if (!captionRes.ok) throw new Error('Failed to update caption');
-      } else {
-        const capRes = await fetch(
-          `/api/images/${uploadedImageId}/caption`, 
-          { 
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/x-www-form-urlencoded',
-            },
-            body: new URLSearchParams({
-              title: 'New Contribution Caption',
-              prompt: 'Describe this crisis map in detail',
-              ...(localStorage.getItem(SELECTED_MODEL_KEY) && {
-                model_name: localStorage.getItem(SELECTED_MODEL_KEY)!
-              })
-            })
-          }
-        );
-        const capJson = await readJsonSafely(capRes);
-        if (!capRes.ok) throw new Error(capJson.error || 'Caption failed');
-
-        setCaptionId(capJson.cap_id);
-        setDraft(capJson.generated);
-      }
-      
-      handleStepChange('2b');
-    } catch (err) {
-      handleApiError(err, 'Create New Caption');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [uploadedImageId, title, captionId, draft]);
 
   return (
     <PageContainer>
-      <div className={styles.uploadContainer} data-step={step}>
-        {/* Drop-zone */}
-        {step === 1 && (
-          <Container
-            heading="Upload Your Image"
-            headingLevel={2}
-            withHeaderBorder
-            withInternalPadding
-            headingClassName="text-center"
-          >
+      <Container
+        heading="Upload Your Image"
+        headingLevel={2}
+        withHeaderBorder
+        withInternalPadding
+        className="max-w-7xl mx-auto"
+      >
+        <div className={styles.uploadContainer} data-step={step}>
+          {/* Drop-zone */}
+          {step === 1 && !searchParams.get('step') && (
             <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 turn emergency maps
@@ -479,8 +554,7 @@ export default function UploadPage() {
               </label>
               </div>
             </div>
-          </Container>
-        )}
+          )}
 
         {/* Loading state */}
         {isLoading && (
@@ -490,16 +564,33 @@ export default function UploadPage() {
           </div>
         )}
 
+        {/* Loading contribution data */}
+        {isLoadingContribution && (
+          <div className={styles.loadingContainer}>
+            <Spinner className="text-ifrcRed" />
+            <p className={styles.loadingText}>Loading contribution...</p>
+          </div>
+        )}
+
         {/* Generate button */}
         {step === 1 && !isLoading && (
           <div className={styles.generateButtonContainer}>
-            <Button
-              name="generate"
-              disabled={!file}
-              onClick={handleGenerate}
-            >
-              Generate
-            </Button>
+            {imageUrl ? (
+              <Button
+                name="generate-from-url"
+                onClick={handleGenerateFromUrl}
+              >
+                Generate Caption
+              </Button>
+            ) : (
+              <Button
+                name="generate"
+                disabled={!file}
+                onClick={handleGenerate}
+              >
+                Generate
+              </Button>
+            )}
           </div>
         )}
 
@@ -612,18 +703,17 @@ export default function UploadPage() {
                     </IconButton>
                     <Button
                       name="confirm-metadata"
-                      onClick={() => {
-                        if (imageUrl && !file) {
-                          handleProcessCaption();
+                      onClick={async () => {
+                        if (imageUrl && !uploadedImageId) {
+                          await handleGenerateFromUrl();
+                        } else if (imageUrl && !file) {
+                          handleStepChange('2b');
                         } else {
                           handleStepChange('2b');
                         }
                       }}
                     >
-                      {imageUrl && !file ? 
-                        (captionId ? 'Edit Caption' : 'Create New Caption') : 
-                        'Next'
-                      }
+                      Next
                     </Button>
                   </div>
                 </Container>
@@ -778,7 +868,9 @@ export default function UploadPage() {
             </div>
           </div>
         )}
-      </div>
+
+        </div>
+      </Container>
     </PageContainer>
   );
 }

frontend/src/types.ts

@@ -1,17 +0,0 @@
-export interface MapOut {
-  map_id: string;
-  file_key: string;
-  sha256: string;
-  source: string;
-  region: string;
-  category: string;
-  caption?: {
-    cap_id: string;
-    map_id: string;
-    generated: string;
-    edited?: string;
-    accuracy?: number;
-    context?: number;
-    usability?: number;
-  };
-} 

py_backend/alembic/versions/b8fc40bfe3c7_initial_schema_seed.py

@@ -42,6 +42,7 @@ def _guess_region(alpha2: str) -> str:
 def upgrade():
     op.execute('CREATE EXTENSION IF NOT EXISTS pgcrypto;')
     
+    # Drop any old tables if they exist (idempotent for initial setup)
     op.execute("DROP TABLE IF EXISTS captions CASCADE;")
     op.execute("DROP TABLE IF EXISTS image_countries CASCADE;")
     op.execute("DROP TABLE IF EXISTS images CASCADE;")
@@ -188,7 +189,6 @@ def upgrade():
         ('BLIP2_OPT_2_7B','BLIP Image Captioning','custom',true,'{"provider":"huggingface","model_id":"Salesforce/blip-image-captioning-base"}'),
         ('VIT_GPT2','Vit gpt2 image captioning','custom',true,'{"provider":"huggingface","model_id":"nlpconnect/vit-gpt2-image-captioning"}')
     """)
-
     op.execute("""
       INSERT INTO json_schemas (schema_id,title,schema,version) VALUES
         ('[email protected]','Default Caption Schema',
@@ -205,6 +205,7 @@ def upgrade():
         )
     op.execute("INSERT INTO countries (c_code,label,r_code) VALUES ('XX','Not Applicable','OTHER')")
 
+    # ---- Images table now includes the single caption/interpretation fields ----
     op.create_table(
         'images',
         sa.Column('image_id', postgresql.UUID(as_uuid=True),
@@ -218,7 +219,26 @@ def upgrade():
         sa.Column('image_type', sa.String(), sa.ForeignKey('image_types.image_type'), nullable=False),
         sa.Column('created_at', sa.TIMESTAMP(timezone=True), server_default=sa.text('NOW()'), nullable=False),
         sa.Column('captured_at', sa.TIMESTAMP(timezone=True), nullable=True),
+
+        # --- merged caption fields ---
+        sa.Column('title', sa.String(), nullable=True),
+        sa.Column('prompt', sa.String(), nullable=True),
+        sa.Column('model', sa.String(), sa.ForeignKey('models.m_code'), nullable=True),
+        sa.Column('schema_id', sa.String(), sa.ForeignKey('json_schemas.schema_id'), nullable=True),
+        sa.Column('raw_json', postgresql.JSONB(astext_type=sa.Text()), nullable=True),
+        sa.Column('generated', sa.Text(), nullable=True),
+        sa.Column('edited', sa.Text(), nullable=True),
+        sa.Column('accuracy', sa.SmallInteger()),
+        sa.Column('context', sa.SmallInteger()),
+        sa.Column('usability', sa.SmallInteger()),
+        sa.Column('starred', sa.Boolean(), server_default=sa.text('false')),
+        sa.Column('updated_at', sa.TIMESTAMP(timezone=True), nullable=True),
+
+        sa.CheckConstraint('accuracy  IS NULL OR (accuracy  BETWEEN 0 AND 100)', name='chk_images_accuracy'),
+        sa.CheckConstraint('context   IS NULL OR (context   BETWEEN 0 AND 100)', name='chk_images_context'),
+        sa.CheckConstraint('usability IS NULL OR (usability BETWEEN 0 AND 100)', name='chk_images_usability')
     )
+
     op.create_table(
         'image_countries',
         sa.Column('image_id', postgresql.UUID(as_uuid=True), nullable=False),
@@ -227,42 +247,12 @@ def upgrade():
         sa.ForeignKeyConstraint(['image_id'], ['images.image_id'], ondelete='CASCADE'),
         sa.ForeignKeyConstraint(['c_code'], ['countries.c_code'])
     )
-    op.create_table(
-        'captions',
-        sa.Column('cap_id', postgresql.UUID(as_uuid=True),
-                  server_default=sa.text('gen_random_uuid()'),
-                  primary_key=True),
-        sa.Column('image_id', postgresql.UUID(as_uuid=True),
-                  sa.ForeignKey('images.image_id', ondelete='CASCADE'),
-                  nullable=False),
-        sa.Column('title', sa.String(), nullable=False),
-        sa.Column('prompt', sa.String(), nullable=False),
-        sa.Column('model', sa.String(), sa.ForeignKey('models.m_code'), nullable=False),
-        sa.Column('schema_id', sa.String(), sa.ForeignKey('json_schemas.schema_id'), nullable=False),
-        sa.Column('raw_json', postgresql.JSONB(astext_type=sa.Text()), nullable=False),
-        sa.Column('generated', sa.Text(), nullable=False),
-        sa.Column('edited', sa.Text(), nullable=True),
-        sa.Column('accuracy', sa.SmallInteger()),
-        sa.Column('context', sa.SmallInteger()),
-        sa.Column('usability', sa.SmallInteger()),
-        sa.Column('starred', sa.Boolean(), server_default=sa.text('false')),
-        sa.Column('created_at', sa.TIMESTAMP(timezone=True), server_default=sa.text('NOW()'), nullable=False),
-        sa.Column('updated_at', sa.TIMESTAMP(timezone=True), nullable=True),
-        sa.CheckConstraint('accuracy  IS NULL OR (accuracy  BETWEEN 0 AND 100)', name='chk_captions_accuracy'),
-        sa.CheckConstraint('context   IS NULL OR (context   BETWEEN 0 AND 100)', name='chk_captions_context'),
-        sa.CheckConstraint('usability IS NULL OR (usability BETWEEN 0 AND 100)', name='chk_captions_usability')
-    )
 
     op.create_index('ix_images_created_at', 'images', ['created_at'])
-    op.create_index('ix_captions_created_at', 'captions', ['created_at'])
-    op.create_index('ix_captions_image_id', 'captions', ['image_id'])
 
 
 def downgrade():
-    op.drop_index('ix_captions_image_id', table_name='captions')
-    op.drop_index('ix_captions_created_at', table_name='captions')
     op.drop_index('ix_images_created_at', table_name='images')
-    op.drop_table('captions')
     op.drop_table('image_countries')
     op.drop_table('images')
     op.drop_table('json_schemas')

py_backend/app/crud.py

@@ -2,6 +2,7 @@ import io, hashlib
 from typing import Optional
 from sqlalchemy.orm import Session, joinedload
 from . import models, schemas
+from fastapi import HTTPException
 
 def hash_bytes(data: bytes) -> str:
     """Compute SHA-256 hex digest of the data."""
@@ -26,30 +27,26 @@ def create_image(db: Session, src, type_code, key, sha, countries: list[str], ep
     return img
 
 def get_images(db: Session):
-    """Get all images with their captions"""
+    """Get all images with their countries"""
     return (
         db.query(models.Images)
         .options(
-            joinedload(models.Images.captions),
             joinedload(models.Images.countries),
         )
         .all()
     )
 
 def get_image(db: Session, image_id: str):
-    """Get a single image by ID with its captions"""
+    """Get a single image by ID with its countries"""
     return (
         db.query(models.Images)
         .options(
-            joinedload(models.Images.captions),
             joinedload(models.Images.countries),
         )
         .filter(models.Images.image_id == image_id)
         .first()
     )
 
-
-
 def create_caption(db: Session, image_id, title, prompt, model_code, raw_json, text, metadata=None):
     print(f"Creating caption for image_id: {image_id}")
     print(f"Caption data: title={title}, prompt={prompt}, model={model_code}")
@@ -59,93 +56,99 @@ def create_caption(db: Session, image_id, title, prompt, model_code, raw_json, t
     if metadata:
         raw_json["extracted_metadata"] = metadata
     
-    c = models.Captions(
-        image_id=image_id,
-        title=title,
-        prompt=prompt,
-        model=model_code,
-        schema_id="[email protected]",
-        raw_json=raw_json,
-        generated=text,
-        edited=text
-    )
-    db.add(c)
+    img = db.get(models.Images, image_id)
+    if not img:
+        raise HTTPException(404, "Image not found")
+    
+    img.title = title
+    img.prompt = prompt
+    img.model = model_code
+    img.schema_id = "[email protected]"
+    img.raw_json = raw_json
+    img.generated = text
+    img.edited = text
+    
     print(f"About to commit caption to database...")
     db.commit()
     print(f"Caption commit successful!")
-    db.refresh(c)
-    print(f"Caption created successfully with ID: {c.cap_id}")
-    return c
+    db.refresh(img)
+    print(f"Caption created successfully for image: {img.image_id}")
+    return img
 
-def get_caption(db: Session, cap_id: str):
-    return db.get(models.Captions, cap_id)
+def get_caption(db: Session, image_id: str):
+    """Get caption data for a specific image"""
+    return db.get(models.Images, image_id)
 
 def get_captions_by_image(db: Session, image_id: str):
-    """Get all captions for a specific image"""
-    return db.query(models.Captions).filter(models.Captions.image_id == image_id).all()
+    """Get caption data for a specific image (now just returns the image)"""
+    img = db.get(models.Images, image_id)
+    if img and img.title:
+        return [img]
+    return []
 
 def get_all_captions_with_images(db: Session):
-    """Get all captions with their associated image data"""
-    results = db.query(
-        models.Captions,
-        models.Images.file_key,
-        models.Images.source,
-        models.Images.event_type,
-        models.Images.epsg,
-        models.Images.image_type
-    ).join(
-        models.Images, models.Captions.image_id == models.Images.image_id
+    """Get all images that have caption data"""
+    print(f"DEBUG: Querying database for images with caption data...")
+    
+    total_images = db.query(models.Images).count()
+    print(f"DEBUG: Total images in database: {total_images}")
+
+    images_with_title = db.query(models.Images).filter(
+        models.Images.title.isnot(None)
+    ).count()
+    print(f"DEBUG: Images with title field: {images_with_title}")
+    
+    images_with_generated = db.query(models.Images).filter(
+        models.Images.generated.isnot(None)
+    ).count()
+    print(f"DEBUG: Images with generated field: {images_with_generated}")
+    
+    images_with_model = db.query(models.Images).filter(
+        models.Images.model.isnot(None)
+    ).count()
+    print(f"DEBUG: Images with model field: {images_with_model}")
+    
+    results = db.query(models.Images).filter(
+        models.Images.title.isnot(None)
     ).all()
     
-    captions_with_images = []
-    for caption, file_key, source, event_type, epsg, image_type in results:
-        caption_dict = {
-            "cap_id": caption.cap_id,
-            "image_id": caption.image_id,
-            "title": caption.title,
-            "prompt": caption.prompt,
-            "model": caption.model,
-            "schema_id": caption.schema_id,
-            "raw_json": caption.raw_json,
-            "generated": caption.generated,
-            "edited": caption.edited,
-            "accuracy": caption.accuracy,
-            "context": caption.context,
-            "usability": caption.usability,
-            "starred": caption.starred,
-            "created_at": caption.created_at,
-            "updated_at": caption.updated_at,
-            "file_key": file_key,
-            "image_url": f"/api/images/{caption.image_id}/file",
-            "source": source,
-            "event_type": event_type,
-            "epsg": epsg,
-            "image_type": image_type,
-            "countries": []
-        }
-        captions_with_images.append(caption_dict)
+    print(f"DEBUG: Query returned {len(results)} results")
+    for img in results:
+        print(f"DEBUG: Image {img.image_id}: title='{img.title}', generated='{img.generated}', model='{img.model}'")
     
-    return captions_with_images
+    return results
 
-def update_caption(db: Session, cap_id: str, update: schemas.CaptionUpdate):
-    c = get_caption(db, cap_id)
-    if not c:
+def update_caption(db: Session, image_id: str, update: schemas.CaptionUpdate):
+    """Update caption data for an image"""
+    img = db.get(models.Images, image_id)
+    if not img:
         return None
     
     for field, value in update.dict(exclude_unset=True).items():
-        setattr(c, field, value)
+        setattr(img, field, value)
     
     db.commit()
-    db.refresh(c)
-    return c
+    db.refresh(img)
+    return img
 
-def delete_caption(db: Session, cap_id: str):
-    """Delete a caption by ID"""
-    c = get_caption(db, cap_id)
-    if not c:
+def delete_caption(db: Session, image_id: str):
+    """Delete caption data for an image (sets caption fields to None)"""
+    img = db.get(models.Images, image_id)
+    if not img:
         return False
     
-    db.delete(c)
+    img.title = None
+    img.prompt = None
+    img.model = None
+    img.schema_id = None
+    img.raw_json = None
+    img.generated = None
+    img.edited = None
+    img.accuracy = None
+    img.context = None
+    img.usability = None
+    img.starred = False
+    
     db.commit()
     return True
 

py_backend/app/database.py

@@ -7,10 +7,8 @@ from sqlalchemy.orm import sessionmaker, declarative_base
 from .config import settings
 
 raw_db_url = settings.DATABASE_URL
-logging.getLogger().warning(f"Raw DATABASE_URL = {raw_db_url!r}")
-
 clean_db_url = raw_db_url.split("?", 1)[0]
-logging.getLogger().warning(f"Using clean URL = {clean_db_url!r}")
+print(f"database: {clean_db_url.split('@')[-1].split('/')[-1]}")
 
 engine = create_engine(
     clean_db_url,

py_backend/app/images.py

@@ -0,0 +1,15 @@
+# backend/app/schemas/images.py
+from pydantic import BaseModel, AnyHttpUrl, Field
+from typing import List, Optional
+
+class CreateImageFromUrlIn(BaseModel):
+    url: str 
+    source: str
+    event_type: str
+    epsg: str
+    image_type: str
+    countries: List[str] = Field(default_factory=list)
+
+class CreateImageFromUrlOut(BaseModel):
+    image_id: str
+    image_url: str

py_backend/app/main.py

@@ -2,6 +2,9 @@ from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 from app.routers import upload, caption, metadata, models
 from app.config import settings
+from app.routers.images import router as images_router
+
+
 
 app = FastAPI(title="PromptAid Vision")
 
@@ -16,10 +19,14 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-app.include_router(upload.router,   prefix="/api/images", tags=["images"])
 app.include_router(caption.router,  prefix="/api",      tags=["captions"])
 app.include_router(metadata.router, prefix="/api",      tags=["metadata"])
 app.include_router(models.router,   prefix="/api",      tags=["models"])
+app.include_router(upload.router,   prefix="/api/images", tags=["images"])
+app.include_router(images_router,  prefix="/api/contribute", tags=["contribute"])
+
+print("🚀 PromptAid Vision API server ready")
+print("📊 Available endpoints: /api/images, /api/captions, /api/metadata, /api/models")
 
 
 

py_backend/app/models.py

@@ -74,44 +74,35 @@ class JSONSchema(Base):
 
 class Images(Base):
     __tablename__ = "images"
-
-    image_id   = Column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
-    file_key   = Column(String, nullable=False)
-    sha256     = Column(String, nullable=False)
-    source     = Column(String, ForeignKey("sources.s_code"), nullable=False)
-    event_type = Column(String, ForeignKey("event_types.t_code"), nullable=False)
-    epsg       = Column(String, ForeignKey("spatial_references.epsg"), nullable=True)
-    image_type = Column(String, ForeignKey("image_types.image_type"), nullable=False)
-    created_at = Column(TIMESTAMP(timezone=True), default=datetime.datetime.utcnow)
-    captured_at = Column(TIMESTAMP(timezone=True))
-
-    countries = relationship("Country", secondary=image_countries, backref="images")
-    captions  = relationship("Captions", back_populates="image", cascade="all, delete-orphan")
-
-class Captions(Base):
-    __tablename__ = "captions"
     __table_args__ = (
-        CheckConstraint('accuracy  IS NULL OR (accuracy  BETWEEN 0 AND 100)', name='chk_captions_accuracy'),
-        CheckConstraint('context   IS NULL OR (context   BETWEEN 0 AND 100)', name='chk_captions_context'),
-        CheckConstraint('usability IS NULL OR (usability BETWEEN 0 AND 100)', name='chk_captions_usability'),
+        CheckConstraint('accuracy  IS NULL OR (accuracy  BETWEEN 0 AND 100)', name='chk_images_accuracy'),
+        CheckConstraint('context   IS NULL OR (context   BETWEEN 0 AND 100)', name='chk_images_context'),
+        CheckConstraint('usability IS NULL OR (usability BETWEEN 0 AND 100)', name='chk_images_usability'),
     )
 
-    cap_id     = Column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
-    image_id   = Column(UUID(as_uuid=True), ForeignKey("images.image_id", ondelete="CASCADE"), nullable=False)
-    title      = Column(String, nullable=False)
-    prompt     = Column(String, nullable=False)
-    model      = Column(String, ForeignKey("models.m_code"), nullable=False)
-    schema_id  = Column(String, ForeignKey("json_schemas.schema_id"), nullable=False)
-    raw_json   = Column(JSONB, nullable=False)
-    generated  = Column(Text, nullable=False)
+    image_id    = Column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
+    file_key    = Column(String, nullable=False)
+    sha256      = Column(String, nullable=False)
+    source      = Column(String, ForeignKey("sources.s_code"), nullable=False)
+    event_type  = Column(String, ForeignKey("event_types.t_code"), nullable=False)
+    epsg        = Column(String, ForeignKey("spatial_references.epsg"), nullable=False)
+    image_type  = Column(String, ForeignKey("image_types.image_type"), nullable=False)
+    created_at  = Column(TIMESTAMP(timezone=True), default=datetime.datetime.utcnow)
+    captured_at = Column(TIMESTAMP(timezone=True))
+
+    title      = Column(String, nullable=True)
+    prompt     = Column(String, nullable=True)
+    model      = Column(String, ForeignKey("models.m_code"), nullable=True)
+    schema_id  = Column(String, ForeignKey("json_schemas.schema_id"), nullable=True)
+    raw_json   = Column(JSONB, nullable=True)
+    generated  = Column(Text, nullable=True)
     edited     = Column(Text)
     accuracy   = Column(SmallInteger)
     context    = Column(SmallInteger)
     usability  = Column(SmallInteger)
     starred    = Column(Boolean, default=False)
-    created_at = Column(TIMESTAMP(timezone=True), default=datetime.datetime.utcnow)
     updated_at = Column(TIMESTAMP(timezone=True), onupdate=datetime.datetime.utcnow)
 
-    image   = relationship("Images", back_populates="captions")
-    schema  = relationship("JSONSchema")
-    model_r = relationship("Models", foreign_keys=[model])
+    countries = relationship("Country", secondary=image_countries, backref="images")
+    schema    = relationship("JSONSchema")
+    model_r   = relationship("Models", foreign_keys=[model])

py_backend/app/routers/caption.py

@@ -17,47 +17,43 @@ if settings.OPENAI_API_KEY:
     try:
         gpt4v_service = GPT4VService(settings.OPENAI_API_KEY)
         vlm_manager.register_service(gpt4v_service)
-        print(f"DEBUG: Registered GPT-4 Vision service: {gpt4v_service.model_name}")
+        print(f"✓ GPT-4 Vision service registered")
     except Exception as e:
-        print(f"DEBUG: Failed to register GPT-4 Vision service: {e}")
+        print(f"✗ GPT-4 Vision service failed: {e}")
 else:
-    print("DEBUG: No OpenAI API key found")
+    print("○ GPT-4 Vision service not configured")
 
 if settings.GOOGLE_API_KEY:
     try:
         gemini_service = GeminiService(settings.GOOGLE_API_KEY)
         vlm_manager.register_service(gemini_service)
-        print(f"DEBUG: Registered Gemini service: {gemini_service.model_name}")
+        print(f"✓ Gemini service registered")
     except Exception as e:
-        print(f"DEBUG: Failed to register Gemini service: {e}")
+        print(f"✗ Gemini service failed: {e}")
 else:
-    print("DEBUG: No Google API key found")
+    print("○ Gemini service not configured")
 
 if settings.HF_API_KEY:
-    print(f"DEBUG: Hugging Face API key found: {settings.HF_API_KEY[:10]}...")
     try:
         llava_service = LLaVAService(settings.HF_API_KEY)
         vlm_manager.register_service(llava_service)
-        print(f"DEBUG: Registered LLaVA service: {llava_service.model_name}")
         
         blip2_service = BLIP2Service(settings.HF_API_KEY)
         vlm_manager.register_service(blip2_service)
-        print(f"DEBUG: Registered BLIP2 service: {blip2_service.model_name}")
         
         instructblip_service = InstructBLIPService(settings.HF_API_KEY)
         vlm_manager.register_service(instructblip_service)
-        print(f"DEBUG: Registered InstructBLIP service: {instructblip_service.model_name}")
         
-        print("DEBUG: Successfully registered Hugging Face services")
+        print(f"✓ Hugging Face services registered (LLaVA, BLIP2, InstructBLIP)")
     except Exception as e:
-        print(f"DEBUG: Failed to register Hugging Face services: {e}")
+        print(f"✗ Hugging Face services failed: {e}")
         import traceback
         traceback.print_exc()
 else:
-    print("DEBUG: No Hugging Face API key found")
+    print("○ Hugging Face services not configured")
 
-print(f"DEBUG: Registered services: {list(vlm_manager.services.keys())}")
-print(f"DEBUG: Available models: {vlm_manager.get_available_models()}")
+print(f"✓ Available models: {', '.join(vlm_manager.get_available_models())}")
+print(f"✓ Total services: {len(vlm_manager.services)}")
 
 router = APIRouter()
 
@@ -70,7 +66,7 @@ def get_db():
 
 @router.post(
     "/images/{image_id}/caption",
-    response_model=schemas.CaptionOut,
+    response_model=schemas.ImageOut,
 )
 async def create_caption(
     image_id: str,
@@ -98,20 +94,17 @@ async def create_caption(
 
     metadata = {}
     try:
-        print(f"DEBUG: calling VLM with model={model_name}")
         result = await vlm_manager.generate_caption(
             image_bytes=img_bytes,
             prompt=prompt,
             model_name=model_name,
         )
         text = result.get("caption", "")
-        used_model = result.get("model", "UNKNOWN_MODEL")
+        used_model = model_name or "STUB_MODEL"
         raw = result.get("raw_response", {})
         metadata = result.get("metadata", {})
-        print(f"DEBUG: got caption: {text[:100]}… (model={used_model})")
-        print(f"DEBUG: extracted metadata: {metadata}")
     except Exception as e:
-        print(f"DEBUG: VLM error, falling back: {e}")
+        print(f"VLM error, using fallback: {e}")
         text = "This is a fallback caption due to VLM service error."
         used_model = "STUB_MODEL"
         raw = {"error": str(e), "fallback": True}
@@ -127,67 +120,130 @@ async def create_caption(
         text=text,
         metadata=metadata,
     )
-    return c
+    
+    db.refresh(c)
+    
+    from .upload import convert_image_to_dict
+    try:
+        url = storage.generate_presigned_url(c.file_key, expires_in=3600)
+    except Exception:
+        url = f"/api/images/{c.image_id}/file"
+    
+    img_dict = convert_image_to_dict(c, url)
+    return schemas.ImageOut(**img_dict)
 
 @router.get(
-    "/captions/{cap_id}",
-    response_model=schemas.CaptionOut,
+    "/images/{image_id}/caption",
+    response_model=schemas.ImageOut,
 )
 def get_caption(
-    cap_id: str,
+    image_id: str,
     db: Session = Depends(get_db),
 ):
-    caption = crud.get_caption(db, cap_id)
-    if not caption:
+    caption = crud.get_caption(db, image_id)
+    if not caption or not caption.title:
         raise HTTPException(404, "caption not found")
-    return caption
+    
+    db.refresh(caption)
+    
+    from .upload import convert_image_to_dict
+    try:
+        url = storage.generate_presigned_url(caption.file_key, expires_in=3600)
+    except Exception:
+        url = f"/api/images/{caption.image_id}/file"
+    
+    img_dict = convert_image_to_dict(caption, url)
+    return schemas.ImageOut(**img_dict)
 
 @router.get(
     "/images/{image_id}/captions",
-    response_model=List[schemas.CaptionOut],
+    response_model=List[schemas.ImageOut],
 )
 def get_captions_by_image(
     image_id: str,
     db: Session = Depends(get_db),
 ):
-    """Get all captions for a specific image"""
+    """Get caption data for a specific image"""
     captions = crud.get_captions_by_image(db, image_id)
-    return captions
+    
+    from .upload import convert_image_to_dict
+    result = []
+    for caption in captions:
+        db.refresh(caption)
+        
+        try:
+            url = storage.generate_presigned_url(caption.file_key, expires_in=3600)
+        except Exception:
+            url = f"/api/images/{caption.image_id}/file"
+        
+        img_dict = convert_image_to_dict(caption, url)
+        result.append(schemas.ImageOut(**img_dict))
+    
+    return result
 
 @router.get(
     "/captions",
-    response_model=List[schemas.CaptionWithImageOut],
+    response_model=List[schemas.ImageOut],
 )
 def get_all_captions_with_images(
     db: Session = Depends(get_db),
 ):
-    """Get all captions with their associated image data"""
+    """Get all images that have caption data"""
+    print(f"DEBUG: Fetching all captions with images...")
     captions = crud.get_all_captions_with_images(db)
-    return captions
+    print(f"DEBUG: Found {len(captions)} images with caption data")
+    
+    from .upload import convert_image_to_dict
+    result = []
+    for caption in captions:
+        print(f"DEBUG: Processing image {caption.image_id}, title: {caption.title}, generated: {caption.generated}, model: {caption.model}")
+        
+        db.refresh(caption)
+        
+        try:
+            url = storage.generate_presigned_url(caption.file_key, expires_in=3600)
+        except Exception:
+            url = f"/api/images/{caption.image_id}/file"
+        
+        img_dict = convert_image_to_dict(caption, url)
+        result.append(schemas.ImageOut(**img_dict))
+    
+    print(f"DEBUG: Returning {len(result)} formatted results")
+    return result
 
 @router.put(
-    "/captions/{cap_id}",
-    response_model=schemas.CaptionOut,
+    "/images/{image_id}/caption",
+    response_model=schemas.ImageOut,
 )
 def update_caption(
-    cap_id: str,
+    image_id: str,
     update: schemas.CaptionUpdate,
     db: Session = Depends(get_db),
 ):
-    caption = crud.update_caption(db, cap_id, update)
+    caption = crud.update_caption(db, image_id, update)
     if not caption:
         raise HTTPException(404, "caption not found")
-    return caption
+    
+    db.refresh(caption)
+    
+    from .upload import convert_image_to_dict
+    try:
+        url = storage.generate_presigned_url(caption.file_key, expires_in=3600)
+    except Exception:
+        url = f"/api/images/{caption.image_id}/file"
+    
+    img_dict = convert_image_to_dict(caption, url)
+    return schemas.ImageOut(**img_dict)
 
 @router.delete(
-    "/captions/{cap_id}",
+    "/images/{image_id}/caption",
 )
 def delete_caption(
-    cap_id: str,
+    image_id: str,
     db: Session = Depends(get_db),
 ):
-    """Delete a caption by ID"""
-    success = crud.delete_caption(db, cap_id)
+    """Delete caption data for an image"""
+    success = crud.delete_caption(db, image_id)
     if not success:
         raise HTTPException(404, "caption not found")
     return {"message": "Caption deleted successfully"}

py_backend/app/routers/images.py

@@ -0,0 +1,95 @@
+import hashlib
+import mimetypes
+from fastapi import APIRouter, HTTPException, Depends
+from sqlalchemy.orm import Session
+
+from ..database import SessionLocal
+from ..models import Images, image_countries
+from ..images import CreateImageFromUrlIn, CreateImageFromUrlOut
+from .. import storage
+from ..storage import upload_bytes, get_object_url
+
+router = APIRouter()
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+@router.post("/from-url", response_model=CreateImageFromUrlOut)
+async def create_image_from_url(payload: CreateImageFromUrlIn, db: Session = Depends(get_db)):
+    print(f"DEBUG: Received payload: {payload}")
+    try:
+        if payload.url.startswith('/api/images/') and '/file' in payload.url:
+            image_id = payload.url.split('/api/images/')[1].split('/file')[0]
+            print(f"DEBUG: Extracted image_id: {image_id}")
+        else:
+            raise HTTPException(status_code=400, detail="Invalid image URL format")
+        
+        existing_image = db.query(Images).filter(Images.image_id == image_id).first()
+        if not existing_image:
+            raise HTTPException(status_code=404, detail="Source image not found")
+        print(f"DEBUG: Found existing image: {existing_image.image_id}")
+        
+        try:
+            response = storage.s3.get_object(
+                Bucket=storage.settings.S3_BUCKET,
+                Key=existing_image.file_key,
+            )
+            data = response["Body"].read()
+            content_type = "image/jpeg"
+            print(f"DEBUG: Downloaded image data: {len(data)} bytes")
+        except Exception as e:
+            raise HTTPException(status_code=400, detail=f"Failed to fetch image from storage: {e}")
+        
+        if len(data) > 25 * 1024 * 1024:
+            raise HTTPException(status_code=413, detail="Image too large")
+
+        ext = mimetypes.guess_extension(content_type) or ".jpg"
+        key = upload_bytes(data, filename=f"contributed{ext}", content_type=content_type)
+        image_url = get_object_url(key, expires_in=86400)
+        print(f"DEBUG: Uploaded new image with key: {key}")
+
+        sha = hashlib.sha256(data).hexdigest()
+        print(f"DEBUG: Creating new Images object...")
+
+        img = Images(
+            file_key=key,
+            sha256=sha,
+            source=payload.source,
+            event_type=payload.event_type,
+            epsg=payload.epsg,
+            image_type=payload.image_type,
+            title="no title",
+            prompt="",
+            model="STUB_MODEL",
+            schema_id="[email protected]",
+            raw_json={},
+            generated="",
+            edited="",
+            accuracy=50,
+            context=50,
+            usability=50,
+            starred=False
+        )
+        print(f"DEBUG: Images object created: {img}")
+        db.add(img)
+        db.flush()  # get image_id
+        print(f"DEBUG: New image_id: {img.image_id}")
+
+        for c in payload.countries:
+            db.execute(image_countries.insert().values(image_id=img.image_id, c_code=c))
+
+        db.commit()
+        print(f"DEBUG: Database commit successful")
+
+        result = CreateImageFromUrlOut(image_id=str(img.image_id), image_url=image_url)
+        print(f"DEBUG: Returning result: {result}")
+        return result
+        
+    except Exception as e:
+        print(f"DEBUG: Exception occurred: {type(e).__name__}: {str(e)}")
+        db.rollback()
+        raise HTTPException(status_code=500, detail=f"Failed to create image: {str(e)}")

py_backend/app/routers/metadata.py

@@ -12,13 +12,13 @@ def get_db():
     finally:
         db.close()
 
-@router.put("/maps/{map_id}/metadata", response_model=schemas.CaptionOut)
+@router.put("/maps/{map_id}/metadata", response_model=schemas.ImageOut)
 def update_metadata(
     map_id: str,
     update: schemas.CaptionUpdate,
     db: Session = Depends(get_db)
 ):
-    c = crud.update_caption(db, map_id, **update.model_dump(exclude_unset=True))
+    c = crud.update_caption(db, map_id, update)
     if not c:
         raise HTTPException(404, "caption not found")
     return c

py_backend/app/routers/models.py

@@ -57,7 +57,7 @@ def get_model_info(model_code: str, db: Session = Depends(get_db)):
 async def test_model(model_code: str, db: Session = Depends(get_db)):
     """Test a specific model with a sample image"""
     try:
-        service = vlm_manager.get_service(model_code)
+        service = vlm_manager.services.get(model_code)
         if not service:
             raise HTTPException(404, "Model service not found")
         

py_backend/app/routers/upload.py

@@ -1,12 +1,22 @@
 from fastapi import APIRouter, UploadFile, Form, Depends, HTTPException, Response
+from pydantic import BaseModel
 import io
 from sqlalchemy.orm import Session
 from .. import crud, schemas, storage, database
 from typing import List
 import boto3
+import time
 
 router = APIRouter()
 
+class CopyImageRequest(BaseModel):
+    source_image_id: str
+    source: str
+    event_type: str
+    countries: str = ""
+    epsg: str = ""
+    image_type: str = "crisis_map"
+
 def get_db():
     db = database.SessionLocal()
     try:
@@ -17,6 +27,14 @@ def get_db():
 
 def convert_image_to_dict(img, image_url):
     """Helper function to convert SQLAlchemy image model to dict for Pydantic"""
+    countries_list = []
+    if hasattr(img, 'countries') and img.countries is not None:
+        try:
+            countries_list = [{"c_code": c.c_code, "label": c.label, "r_code": c.r_code} for c in img.countries]
+        except Exception as e:
+            print(f"Warning: Error processing countries for image {img.image_id}: {e}")
+            countries_list = []
+    
     img_dict = {
         "image_id": img.image_id,
         "file_key": img.file_key,
@@ -26,35 +44,28 @@ def convert_image_to_dict(img, image_url):
         "epsg": img.epsg,
         "image_type": img.image_type,
         "image_url": image_url,
-        "countries": [{"c_code": c.c_code, "label": c.label, "r_code": c.r_code} for c in img.countries],
-        "captions": []
+        "countries": countries_list,
+        "title": img.title,
+        "prompt": img.prompt,
+        "model": img.model,
+        "schema_id": img.schema_id,
+        "raw_json": img.raw_json,
+        "generated": img.generated,
+        "edited": img.edited,
+        "accuracy": img.accuracy,
+        "context": img.context,
+        "usability": img.usability,
+        "starred": img.starred if img.starred is not None else False,
+        "created_at": img.created_at,
+        "updated_at": img.updated_at
     }
     
-    if img.captions and len(img.captions) > 0:
-        img_dict["captions"] = [{
-            "cap_id": caption.cap_id,
-            "image_id": caption.image_id,
-            "title": caption.title,
-            "prompt": caption.prompt,
-            "model": caption.model,
-            "schema_id": caption.schema_id,
-            "raw_json": caption.raw_json,
-            "generated": caption.generated,
-            "edited": caption.edited,
-            "accuracy": caption.accuracy,
-            "context": caption.context,
-            "usability": caption.usability,
-            "starred": caption.starred,
-            "created_at": caption.created_at,
-            "updated_at": caption.updated_at
-        } for caption in img.captions]
-    
     return img_dict
 
 
 @router.get("/", response_model=List[schemas.ImageOut])
 def list_images(db: Session = Depends(get_db)):
-    """Get all images with their captions"""
+    """Get all images with their caption data"""
     images = crud.get_images(db)
     result = []
     for img in images:
@@ -115,6 +126,51 @@ async def upload_image(
     result = schemas.ImageOut(**img_dict)
     return result
 
+@router.post("/copy", response_model=schemas.ImageOut)
+async def copy_image_for_contribution(
+    request: CopyImageRequest,
+    db: Session = Depends(get_db)
+):
+    """Copy an existing image for contribution purposes, creating a new image_id"""
+    source_img = crud.get_image(db, request.source_image_id)
+    if not source_img:
+        raise HTTPException(404, "Source image not found")
+    
+    try:
+        response = storage.s3.get_object(
+            Bucket=storage.settings.S3_BUCKET,
+            Key=source_img.file_key,
+        )
+        image_content = response["Body"].read()
+        
+        new_filename = f"contribution_{request.source_image_id}_{int(time.time())}.jpg"
+        new_key = storage.upload_fileobj(io.BytesIO(image_content), new_filename)
+        
+        countries_list = [c.strip() for c in request.countries.split(',') if c.strip()] if request.countries else []
+        
+        new_img = crud.create_image(
+            db, 
+            request.source, 
+            request.event_type, 
+            new_key, 
+            source_img.sha256,
+            countries_list, 
+            request.epsg, 
+            request.image_type
+        )
+        
+        try:
+            url = storage.generate_presigned_url(new_key, expires_in=3600)
+        except Exception as e:
+            url = f"/api/images/{new_img.image_id}/file"
+        
+        img_dict = convert_image_to_dict(new_img, url)
+        result = schemas.ImageOut(**img_dict)
+        return result
+        
+    except Exception as e:
+        raise HTTPException(500, f"Failed to copy image: {str(e)}")
+
 @router.get("/{image_id}/file")
 async def get_image_file(image_id: str, db: Session = Depends(get_db)):
     """Serve the actual image file"""
@@ -142,10 +198,16 @@ def update_image_metadata(
     db: Session = Depends(get_db)
 ):
     """Update image metadata (source, type, epsg, image_type, countries)"""
+    print(f"DEBUG: Updating metadata for image {image_id}")
+    print(f"DEBUG: Metadata received: {metadata}")
+    
     img = crud.get_image(db, image_id)
     if not img:
+        print(f"DEBUG: Image {image_id} not found in database")
         raise HTTPException(404, "Image not found")
     
+    print(f"DEBUG: Found image {image_id} in database")
+    
     try:
         if metadata.source is not None:
             img.source = metadata.source
@@ -155,22 +217,36 @@ def update_image_metadata(
             img.epsg = metadata.epsg
         if metadata.image_type is not None:
             img.image_type = metadata.image_type
+        
         if metadata.countries is not None:
-            img.countries = []
+            print(f"DEBUG: Updating countries to: {metadata.countries}")
+            img.countries.clear()
             for country_code in metadata.countries:
                 country = crud.get_country(db, country_code)
                 if country:
                     img.countries.append(country)
+                    print(f"DEBUG: Added country: {country_code}")
         
         db.commit()
-        return {"message": "Image metadata updated successfully"}
+        db.refresh(img)
+        print(f"DEBUG: Metadata update successful for image {image_id}")
+        
+        try:
+            url = storage.generate_presigned_url(img.file_key, expires_in=3600)
+        except Exception:
+            url = f"/api/images/{img.image_id}/file"
+        
+        img_dict = convert_image_to_dict(img, url)
+        return schemas.ImageOut(**img_dict)
+        
     except Exception as e:
         db.rollback()
+        print(f"DEBUG: Metadata update failed for image {image_id}: {str(e)}")
         raise HTTPException(500, f"Failed to update image metadata: {str(e)}")
 
 @router.delete("/{image_id}")
 def delete_image(image_id: str, db: Session = Depends(get_db)):
-    """Delete an image and its associated caption"""
+    """Delete an image and its associated caption data"""
     img = crud.get_image(db, image_id)
     if not img:
         raise HTTPException(404, "Image not found")

py_backend/app/schemas.py

@@ -27,40 +27,12 @@ class ImageOut(BaseModel):
     image_type: str
     image_url: str
     countries: List["CountryOut"] = []
-    captions: List["CaptionOut"] = []
-
-    class Config:
-        from_attributes = True
-
-class CaptionOut(BaseModel):
-    cap_id: UUID
-    image_id: UUID
-    title: str
-    prompt: str
-    model: str
-    schema_id: str
-    raw_json: dict
-    generated: str
-    edited: Optional[str] = None
-    accuracy: Optional[int] = None
-    context: Optional[int] = None
-    usability: Optional[int] = None
-    starred: bool = False
-    created_at: Optional[datetime] = None
-    updated_at: Optional[datetime] = None
-
-    class Config:
-        from_attributes = True
-
-class CaptionWithImageOut(BaseModel):
-    cap_id: UUID
-    image_id: UUID
-    title: str
-    prompt: str
-    model: str
-    schema_id: str
-    raw_json: dict
-    generated: str
+    title: Optional[str] = None
+    prompt: Optional[str] = None
+    model: Optional[str] = None
+    schema_id: Optional[str] = None
+    raw_json: Optional[dict] = None
+    generated: Optional[str] = None
     edited: Optional[str] = None
     accuracy: Optional[int] = None
     context: Optional[int] = None
@@ -68,19 +40,17 @@ class CaptionWithImageOut(BaseModel):
     starred: bool = False
     created_at: Optional[datetime] = None
     updated_at: Optional[datetime] = None
-    file_key: str
-    image_url: str
-    source: str
-    event_type: str
-    epsg: str
-    image_type: str
-    countries: List["CountryOut"] = []
 
     class Config:
         from_attributes = True
 
 class CaptionUpdate(BaseModel):
     title: Optional[str] = None
+    prompt: Optional[str] = None
+    model: Optional[str] = None
+    schema_id: Optional[str] = None
+    raw_json: Optional[dict] = None
+    generated: Optional[str] = None
     edited: Optional[str] = None
     accuracy: Optional[int] = None
     context: Optional[int] = None

py_backend/app/services/gpt4v_service.py

@@ -2,9 +2,8 @@ from .vlm_service import VLMService, ModelType
 from typing import Dict, Any
 import openai
 import base64
-import io
 import asyncio
-from PIL import Image
+import json
 
 class GPT4VService(VLMService):
     """GPT-4 Vision service implementation"""
@@ -56,45 +55,44 @@ class GPT4VService(VLMService):
             )
             
             content = response.choices[0].message.content
-            print(f"DEBUG: Raw AI response: {content[:200]}...")
             
-            import json
-            import re
-            
-            cleaned_content = content
-            if content.startswith('```json'):
-                cleaned_content = re.sub(r'^```json\s*', '', content)
-                cleaned_content = re.sub(r'\s*```$', '', cleaned_content)
-                print(f"DEBUG: Cleaned content: {cleaned_content[:200]}...")
+            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:
-                parsed = json.loads(cleaned_content)
-                caption = parsed.get("analysis", content)
-                metadata = parsed.get("metadata", {})
-                
-                if metadata.get("epsg"):
-                    epsg_value = metadata["epsg"]
-                    allowed_epsg = ["4326", "3857", "32617", "32633", "32634", "OTHER"]
-                    if epsg_value not in allowed_epsg:
-                        print(f"DEBUG: Invalid EPSG value '{epsg_value}', setting to 'OTHER'")
-                        metadata["epsg"] = "OTHER"
-                
-                print(f"DEBUG: Successfully parsed JSON, metadata: {metadata}")
-            except json.JSONDecodeError as e:
-                print(f"DEBUG: JSON parse error: {e}")
-                caption = content
-                metadata = {}
+                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
             
             return {
-                "caption": caption,
-                "metadata": metadata,
-                "confidence": 0.9,
-                "processing_time": 0.0,
+                "caption": cleaned_content,
                 "raw_response": {
-                    "model": "gpt-4o",
-                    "usage": response.usage.dict() if response.usage else None,
-                    "finish_reason": response.choices[0].finish_reason
-                }
+                    "content": content, 
+                    "metadata": metadata,
+                    "extracted_metadata": metadata
+                },
+                "metadata": metadata
             }
             
         except Exception as e:

py_backend/app/services/stub_vlm_service.py

@@ -8,24 +8,12 @@ class StubVLMService(VLMService):
     def __init__(self):
         super().__init__("STUB_MODEL", ModelType.CUSTOM)
     
-    async def generate_caption(self, image_bytes: bytes, prompt: str) -> Dict[str, Any]:
-        """Generate a stub caption"""
-        print(f"DEBUG: StubVLMService: Generating stub caption")
-        print(f"DEBUG: StubVLMService: Image size: {len(image_bytes)}")
-        print(f"DEBUG: StubVLMService: Prompt: {prompt[:100]}...")
-        
-        await asyncio.sleep(0.1)
-        
-        caption = "This is a stub caption generated for testing purposes. The image appears to contain geographic or crisis-related information."
-        print(f"DEBUG: StubVLMService: Generated caption: {caption}")
+    async def generate_caption(self, image_bytes: bytes, prompt: str) -> dict:
+        """Generate a stub caption for testing purposes."""
+        caption = f"This is a stub caption for testing. Image size: {len(image_bytes)} bytes. Prompt: {prompt[:50]}..."
         
         return {
             "caption": caption,
-            "confidence": 0.85,
-            "processing_time": 0.1,
-            "raw_response": {
-                "stub": True,
-                "prompt": prompt,
-                "image_size": len(image_bytes)
-            }
+            "raw_response": {"stub": True, "caption": caption},
+            "metadata": {}
         } 

py_backend/app/services/vlm_service.py

@@ -58,45 +58,35 @@ class VLMServiceManager:
             return self.services.get(self.default_service)
         return None
     
-    def get_available_models(self) -> Dict[str, Dict[str, Any]]:
-        """Get information about all available models"""
-        return {
-            name: service.get_model_info() 
-            for name, service in self.services.items()
-        }
+    def get_available_models(self) -> list:
+        """Get list of available model names"""
+        return list(self.services.keys())
     
-    async def generate_caption(self, image_bytes: bytes, prompt: str, model_name: str = None) -> Dict[str, Any]:
-        """Generate caption using specified or default model"""
-        print(f"DEBUG: VLM Manager: Looking for model_name: {model_name}")
-        print(f"DEBUG: VLM Manager: Available services: {list(self.services.keys())}")
+    async def generate_caption(self, image_bytes: bytes, prompt: str, model_name: str | None = None) -> dict:
+        """Generate caption using the specified model or fallback to available service."""
         
+        # Find appropriate service
         service = None
         if model_name:
-            service = self.get_service(model_name)
-            print(f"DEBUG: VLM Manager: Found service for {model_name}: {service is not None}")
-            if not service:
-                raise ValueError(f"Model {model_name} not found")
-        else:
-            service = self.get_default_service()
+            service = self.services.get(model_name)
             if not service:
-                raise ValueError("No default model available")
+                print(f"Model '{model_name}' not found, using fallback")
         
-        if not service.is_available:
-            raise ValueError(f"Model {service.model_name} is not available")
+        # Fallback to first available service
+        if not service and self.services:
+            service = next(iter(self.services.values()))
+            print(f"Using fallback service: {service.model_name}")
         
-        print(f"DEBUG: VLM Manager: Using service: {service.model_name}")
+        if not service:
+            raise ValueError("No VLM services available")
         
         try:
-            print(f"DEBUG: VLM Manager: Calling generate_caption on {service.model_name}")
             result = await service.generate_caption(image_bytes, prompt)
-            result["model"] = service.model_name
-            print(f"DEBUG: VLM Manager: Successfully generated caption with {service.model_name}")
+            if isinstance(result, dict):
+                result["model"] = service.model_name
             return result
         except Exception as e:
-            print(f"DEBUG: VLM Manager: Error generating caption with {service.model_name}: {str(e)}")
-            import traceback
-            traceback.print_exc()
-            logger.error(f"Error generating caption with {service.model_name}: {str(e)}")
+            print(f"Error generating caption: {str(e)}")
             raise
 
 vlm_manager = VLMServiceManager() 

py_backend/app/storage.py

@@ -1,8 +1,11 @@
 import io
+import mimetypes
+from uuid import uuid4
+from typing import BinaryIO, Optional
+
 import boto3
 import botocore
-from uuid import uuid4
-from typing import BinaryIO
+
 from .config import settings
 
 s3 = boto3.client(
@@ -10,25 +13,39 @@ s3 = boto3.client(
     endpoint_url=settings.S3_ENDPOINT,
     aws_access_key_id=settings.S3_ACCESS_KEY,
     aws_secret_access_key=settings.S3_SECRET_KEY,
+    region_name=getattr(settings, "S3_REGION", None),
 )
 
-def upload_fileobj(fileobj: BinaryIO, filename: str) -> str:
+# Optional settings you can add to your config:
+# - S3_PUBLIC_URL_BASE: str | None  (e.g. "https://cdn.example.com" or bucket website endpoint)
+# - S3_PUBLIC_READ: bool            (True if the bucket/objects are world-readable)
+
+def _ensure_bucket() -> None:
     """
-    Uploads a file-like object to the configured S3 bucket,
-    automatically creating the bucket if it doesn't exist.
-    Returns the object key.
+    Make sure the bucket exists. Safe to call on every upload.
     """
-    key = f"maps/{uuid4()}_{filename}"
-
     try:
         s3.head_bucket(Bucket=settings.S3_BUCKET)
     except botocore.exceptions.ClientError as e:
-        s3.create_bucket(Bucket=settings.S3_BUCKET)
+        # Create bucket. Some providers need LocationConstraint; MinIO typically doesn't.
+        create_kwargs = {"Bucket": settings.S3_BUCKET}
+        region = getattr(settings, "S3_REGION", None)
+        # For AWS S3 outside us-east-1 you must pass LocationConstraint.
+        if region and (settings.S3_ENDPOINT is None or "amazonaws.com" in str(settings.S3_ENDPOINT).lower()):
+            create_kwargs["CreateBucketConfiguration"] = {"LocationConstraint": region}
+        s3.create_bucket(**create_kwargs)
 
-    fileobj.seek(0)
-    s3.upload_fileobj(fileobj, settings.S3_BUCKET, key)
 
-    return key
+def get_object_url(key: str, *, expires_in: int = 3600) -> str:
+    """
+    Return a browser-usable URL for the object.
+    If S3_PUBLIC_URL_BASE is set, return a public URL. Otherwise, return a presigned URL.
+    """
+    public_base = getattr(settings, "S3_PUBLIC_URL_BASE", None)
+    if public_base:
+        return f"{public_base.rstrip('/')}/{key}"
+    return generate_presigned_url(key, expires_in=expires_in)
+
 
 def generate_presigned_url(key: str, expires_in: int = 3600) -> str:
     """
@@ -39,3 +56,95 @@ def generate_presigned_url(key: str, expires_in: int = 3600) -> str:
         Params={"Bucket": settings.S3_BUCKET, "Key": key},
         ExpiresIn=expires_in,
     )
+
+
+def upload_fileobj(
+    fileobj: BinaryIO,
+    filename: str,
+    *,
+    content_type: Optional[str] = None,
+    cache_control: Optional[str] = "public, max-age=31536000, immutable",
+) -> str:
+    """
+    Upload a file-like object to the configured S3 bucket.
+    Returns the object key (not the URL).
+    """
+    _ensure_bucket()
+
+    # Build a namespaced key; keep original filename tail if helpful
+    safe_name = filename or "upload.bin"
+    key = f"maps/{uuid4()}_{safe_name}"
+
+    # Guess content type if not provided
+    ct = content_type or (mimetypes.guess_type(safe_name)[0] or "application/octet-stream")
+
+    # Make sure we read from the start
+    try:
+        fileobj.seek(0)
+    except Exception:
+        pass
+
+    extra_args = {"ContentType": ct}
+    if cache_control:
+        extra_args["CacheControl"] = cache_control
+    if getattr(settings, "S3_PUBLIC_READ", False):
+        # Only set this if your bucket policy allows public read
+        extra_args["ACL"] = "public-read"
+
+    s3.upload_fileobj(fileobj, settings.S3_BUCKET, key, ExtraArgs=extra_args)
+    return key
+
+
+def upload_bytes(
+    data: bytes,
+    filename: str,
+    *,
+    content_type: Optional[str] = None,
+    cache_control: Optional[str] = "public, max-age=31536000, immutable",
+) -> str:
+    """
+    Convenience helper to upload raw bytes (e.g., after server-side URL download).
+    """
+    buf = io.BytesIO(data)
+    return upload_fileobj(buf, filename, content_type=content_type, cache_control=cache_control)
+
+
+def copy_object(
+    src_key: str,
+    *,
+    new_filename: Optional[str] = None,
+    cache_control: Optional[str] = "public, max-age=31536000, immutable",
+) -> str:
+    """
+    Server-side copy within the same bucket (no download/upload round-trip).
+    Useful for 'duplicate' endpoints if you already know the source key.
+    Returns the NEW object key.
+    """
+    _ensure_bucket()
+    tail = new_filename or src_key.split("/")[-1]
+    dest_key = f"maps/{uuid4()}_{tail}"
+
+    extra_args = {}
+    if cache_control:
+        extra_args["CacheControl"] = cache_control
+    if getattr(settings, "S3_PUBLIC_READ", False):
+        extra_args["ACL"] = "public-read"
+
+    s3.copy(
+        {"Bucket": settings.S3_BUCKET, "Key": src_key},
+        settings.S3_BUCKET,
+        dest_key,
+        ExtraArgs=extra_args or None,
+    )
+    return dest_key
+
+
+def delete_object(key: str) -> None:
+    """
+    Delete an object (best-effort).
+    """
+    try:
+        s3.delete_object(Bucket=settings.S3_BUCKET, Key=key)
+    except botocore.exceptions.ClientError:
+        # Swallow to keep deletes idempotent for callers
+        pass

py_backend/tests/test_explore_page.py

@@ -176,9 +176,9 @@ def test_database_consistency():
         images = db.query(models.Images).all()
         print(f"  + Total images in database: {len(images)}")
         
-        # Check if captions exist
-        captions = db.query(models.Captions).all()
-        print(f"  + Total captions in database: {len(captions)}")
+        # Check if images have caption data
+        images_with_captions = db.query(models.Images).filter(models.Images.title.isnot(None)).all()
+        print(f"  + Images with caption data: {len(images_with_captions)}")
         
         # Check metadata tables
         sources = db.query(models.Source).all()
@@ -191,9 +191,6 @@ def test_database_consistency():
         print(f"  + Total countries: {len(countries)}")
         
         # Check relationships
-        images_with_captions = db.query(models.Images).join(models.Captions).all()
-        print(f"  + Images with captions: {len(images_with_captions)}")
-        
         images_with_countries = db.query(models.Images).join(models.Images.countries).all()
         print(f"  + Images with countries: {len(images_with_countries)}")
         
@@ -234,7 +231,7 @@ def create_test_data():
             raw_json={"test": True},
             text="This is a test caption for the explore page."
         )
-        print(f"  + Created test caption: {caption.cap_id}")
+        print(f"  + Created test caption: {caption.image_id}")
         
         return img.image_id
         

py_backend/tests/test_upload_flow.py

@@ -14,39 +14,34 @@ from app.database import SessionLocal
 from app import crud, models
 
 def test_database_connection():
-    """Test if we can connect to database and create records"""
+    """Test basic database connectivity and table creation"""
     db = SessionLocal()
     try:
         print("Testing database connection...")
         
-        # Test creating an image
+        # Test basic query
+        sources = db.query(models.Source).all()
+        print(f"Found {len(sources)} sources in database")
+        
+        # Test image creation
         test_img = models.Images(
-            source="OTHER",
-            type="OTHER", 
             file_key="test_key",
-            sha256="test_sha256",
+            sha256="test_sha",
+            source="OTHER",
+            event_type="OTHER",
             epsg="4326",
-            image_type="crisis_map"
-        )
-        
-        db.add(test_img)
-        db.flush()
-        print(f"Created test image with ID: {test_img.image_id}")
-        
-        # Create a test caption
-        test_caption = models.Captions(
-            image_id=test_img.image_id,
-            title="Test Caption",
+            image_type="crisis_map",
+            title="Test Title",
             prompt="Test prompt",
             model="STUB_MODEL",
+            schema_id="[email protected]",
             raw_json={"test": True},
-            generated="This is a test caption",
-            edited="This is a test caption"
+            generated="This is a test caption"
         )
         
-        db.add(test_caption)
+        db.add(test_img)
         db.commit()
-        print(f"Created test caption with ID: {test_caption.cap_id}")
+        print(f"Created test image with ID: {test_img.image_id}")
         
         # Clean up
         db.delete(test_img)
@@ -88,7 +83,7 @@ def test_crud_functions():
             raw_json={"test_crud": True},
             text="This is a test CRUD caption"
         )
-        print(f"CRUD create_caption successful: {caption.cap_id}")
+        print(f"CRUD create_caption successful for image: {caption.image_id}")
         
         # Clean up
         db.delete(img)
@@ -144,20 +139,21 @@ def test_complete_upload_flow():
             
             if caption_response.status_code == 200:
                 caption_result = caption_response.json()
-                caption_id = caption_result['cap_id']
-                print(f"Caption created! Caption ID: {caption_id}")
+                caption_id = caption_result['image_id']  # Now using image_id instead of cap_id
+                print(f"Caption created successfully! Caption ID: {caption_id}")
                 
                 # Step 3: Submit caption via API
                 print("3. Submitting caption via API...")
                 submit_data = {
-                    'edited': 'This is a test caption for the upload flow.',
-                    'accuracy': 75,
-                    'context': 80,
-                    'usability': 70
+                    'title': 'Test Caption',
+                    'edited': 'This is an edited test caption',
+                    'accuracy': 85,
+                    'context': 90,
+                    'usability': 80
                 }
                 
                 submit_response = requests.put(
-                    f'http://localhost:8080/api/captions/{caption_id}',
+                    f'http://localhost:8080/api/images/{image_id}/caption',
                     json=submit_data
                 )
                 print(f"Submit response status: {submit_response.status_code}")
@@ -165,113 +161,64 @@ def test_complete_upload_flow():
                 if submit_response.status_code == 200:
                     print("Caption submitted successfully!")
                     
-                    # Step 4: Check if image appears in list
-                    print("4. Checking if image appears in list...")
-                    time.sleep(1)  # Give a moment for database to settle
-                    
-                    list_response = requests.get('http://localhost:8080/api/images/')
-                    print(f"List response status: {list_response.status_code}")
-                    
-                    if list_response.status_code == 200:
-                        images = list_response.json()
-                        print(f"Total images in list: {len(images)}")
-                        
-                        # Check if our uploaded image is in the list
-                        uploaded_image = next((img for img in images if img['image_id'] == image_id), None)
-                        if uploaded_image:
-                            print("SUCCESS: Uploaded image found in list!")
-                            print(f"Image details: {uploaded_image}")
-                        else:
-                            print("ERROR: Uploaded image NOT found in list!")
-                            print("Available image IDs:", [img['image_id'] for img in images])
-                    
-                    # Step 5: Check database directly
-                    print("5. Checking database directly...")
+                    # Verify in database
+                    print("4. Verifying in database...")
                     db = SessionLocal()
                     try:
-                        # Check images table
-                        db_image = db.query(models.Images).filter(models.Images.image_id == image_id).first()
-                        if db_image:
-                            print(f"SUCCESS: Image found in database: {db_image.image_id}")
-                            print(f"Image source: {db_image.source}, event_type: {db_image.event_type}")
-                        else:
-                            print("ERROR: Image NOT found in database!")
-                        
-                        # Check captions table
-                        db_caption = db.query(models.Captions).filter(models.Captions.image_id == image_id).first()
+                        db_caption = crud.get_caption(db, image_id)
                         if db_caption:
-                            print(f"SUCCESS: Caption found in database: {db_caption.cap_id}")
+                            print(f"SUCCESS: Caption found in database for image: {db_caption.image_id}")
+                            print(f"Title: {db_caption.title}")
+                            print(f"Edited: {db_caption.edited}")
+                            print(f"Accuracy: {db_caption.accuracy}")
                         else:
-                            print("ERROR: Caption NOT found in database!")
-                        
-                        # Check total counts
-                        total_images = db.query(models.Images).count()
-                        total_captions = db.query(models.Captions).count()
-                        print(f"Total images in database: {total_images}")
-                        print(f"Total captions in database: {total_captions}")
-                        
+                            print("ERROR: Caption not found in database")
                     finally:
                         db.close()
-                    
-                    # Clean up
-                    print("6. Cleaning up...")
-                    delete_response = requests.delete(f'http://localhost:8080/api/images/{image_id}')
-                    print(f"Delete status: {delete_response.status_code}")
-                    
                 else:
-                    print(f"ERROR: Caption submission failed: {submit_response.text}")
+                    print(f"Caption submission failed: {submit_response.text}")
             else:
-                print(f"ERROR: Caption creation failed: {caption_response.text}")
+                print(f"Caption creation failed: {caption_response.text}")
         else:
-            print(f"ERROR: Upload failed: {response.text}")
+            print(f"Upload failed: {response.text}")
             
     except Exception as e:
-        print(f"ERROR: Upload flow test failed: {e}")
+        print(f"Upload flow test failed: {e}")
+        import traceback
+        traceback.print_exc()
 
 def test_deletion_logic():
-    """Test that images are only deleted when appropriate"""
-    print("\n=== Testing Deletion Logic ===")
+    """Test the deletion logic for images"""
+    print("=== Testing Deletion Logic ===")
     
-    # Test 1: Upload and verify image exists
-    print("1. Uploading test image...")
-    test_content = b"deletion test image data"
-    files = {'file': ('deletion_test.jpg', test_content, 'image/jpeg')}
+    # Create test image data
+    test_content = b"test image data for deletion test"
+    test_filename = "test_deletion.jpg"
+    
+    # Step 1: Upload image via API
+    print("1. Uploading image via API...")
+    files = {'file': (test_filename, io.BytesIO(test_content), 'image/jpeg')}
     data = {
         'source': 'OTHER',
-        'type': 'OTHER',
+        'type': 'OTHER', 
         'countries': ['US'],
         'epsg': '4326',
         'image_type': 'crisis_map'
     }
     
     try:
-        upload_response = requests.post('http://localhost:8080/api/images/', files=files, data=data, timeout=30)
-        print(f"   Upload status: {upload_response.status_code}")
+        response = requests.post('http://localhost:8080/api/images/', files=files, data=data)
+        print(f"Upload response status: {response.status_code}")
         
-        if upload_response.status_code == 200:
-            upload_result = upload_response.json()
-            image_id = upload_result.get('image_id')
-            print(f"   ✓ Upload successful! Image ID: {image_id}")
-            
-            # Test 2: Verify image exists in database
-            print("2. Verifying image exists in database...")
-            time.sleep(0.5)
-            
-            list_response = requests.get('http://localhost:8080/api/images/', timeout=10)
-            if list_response.status_code == 200:
-                images = list_response.json()
-                uploaded_image = next((img for img in images if img.get('image_id') == image_id), None)
-                
-                if uploaded_image:
-                    print("   ✓ Image found in database!")
-                else:
-                    print("   ✗ ERROR: Image NOT found in database!")
-                    return False
+        if response.status_code == 200:
+            upload_result = response.json()
+            image_id = upload_result['image_id']
+            print(f"Upload successful! Image ID: {image_id}")
             
-            # Test 3: Create caption
-            print("3. Creating caption...")
+            # Step 2: Create caption via API
+            print("2. Creating caption via API...")
             caption_data = {
-                'title': 'Deletion Test Caption',
+                'title': 'Test Caption for Deletion',
                 'prompt': 'Describe this test image'
             }
             
@@ -279,66 +226,43 @@ def test_deletion_logic():
                 f'http://localhost:8080/api/images/{image_id}/caption',
                 data=caption_data
             )
-            print(f"   Caption creation status: {caption_response.status_code}")
+            print(f"Caption response status: {caption_response.status_code}")
             
             if caption_response.status_code == 200:
-                caption_result = caption_response.json()
-                caption_id = caption_result.get('cap_id')
-                print(f"   ✓ Caption created! Caption ID: {caption_id}")
+                print("Caption created successfully!")
                 
-                # Test 4: Submit caption (simulating successful submission)
-                print("4. Submitting caption (simulating successful submission)...")
-                submit_data = {
-                    'edited': 'This is a test caption for deletion logic.',
-                    'accuracy': 85,
-                    'context': 90,
-                    'usability': 80
-                }
-                
-                submit_response = requests.put(
-                    f'http://localhost:8080/api/captions/{caption_id}',
-                    json=submit_data
+                # Step 3: Test image deletion
+                print("3. Testing image deletion...")
+                delete_response = requests.delete(
+                    f'http://localhost:8080/api/images/{image_id}'
                 )
-                print(f"   Submit status: {submit_response.status_code}")
+                print(f"Delete response status: {delete_response.status_code}")
                 
-                if submit_response.status_code == 200:
-                    print("   ✓ Caption submitted successfully!")
-                    
-                    # Test 5: Verify image still exists after submission (should NOT be deleted)
-                    print("5. Verifying image still exists after submission...")
-                    time.sleep(1)
+                if delete_response.status_code == 200:
+                    print("Image deleted successfully!")
                     
-                    list_response = requests.get('http://localhost:8080/api/images/', timeout=10)
-                    if list_response.status_code == 200:
-                        images = list_response.json()
-                        submitted_image = next((img for img in images if img.get('image_id') == image_id), None)
-                        
-                        if submitted_image:
-                            print("   ✓ SUCCESS: Image still exists after submission!")
-                            caption = submitted_image.get('caption')
-                            if caption:
-                                print(f"   ✓ Caption edited: {caption.get('edited', 'N/A')}")
-                                print(f"   ✓ Accuracy: {caption.get('accuracy', 'N/A')}")
-                            else:
-                                print("   ✗ ERROR: Caption not found in submitted image!")
+                    # Verify image is completely removed
+                    print("4. Verifying image deletion...")
+                    db = SessionLocal()
+                    try:
+                        db_image = crud.get_image(db, image_id)
+                        if db_image:
+                            print("ERROR: Image still exists when it should have been deleted")
                         else:
-                            print("   ✗ ERROR: Image was deleted after submission!")
-                            return False
-                    
-                    # Clean up
-                    print("6. Cleaning up...")
-                    delete_response = requests.delete(f'http://localhost:8080/api/images/{image_id}', timeout=10)
-                    print(f"   Delete status: {delete_response.status_code}")
-                    
+                            print("SUCCESS: Image completely removed from database")
+                    finally:
+                        db.close()
                 else:
-                    print(f"   ✗ ERROR: Caption submission failed: {submit_response.text}")
+                    print(f"Image deletion failed: {delete_response.text}")
             else:
-                print(f"   ✗ ERROR: Caption creation failed: {caption_response.text}")
+                print(f"Caption creation failed: {caption_response.text}")
         else:
-            print(f"   ✗ ERROR: Upload failed: {upload_response.text}")
+            print(f"Upload failed: {response.text}")
             
     except Exception as e:
-        print(f"   ✗ ERROR: Deletion logic test failed: {e}")
+        print(f"Deletion logic test failed: {e}")
+        import traceback
+        traceback.print_exc()
 
 if __name__ == "__main__":
     test_database_connection()