upload flow

docker-compose.yml

@@ -25,15 +25,15 @@ services:
       - postgres
 
   minio:
-    image: minio/minio
+    image: minio/minio:latest
     restart: always
-    command: server /data
+    command: server /data --console-address ":9001"
     environment:
       MINIO_ROOT_USER: promptaid
       MINIO_ROOT_PASSWORD: promptaid
     ports:
-      - "9000:9000"
-      - "9001:9001"
+      - "9000:9000"   # S3 API
+      - "9001:9001"   # web console
     volumes:
       - minio_data:/data
     depends_on:

frontend/src/components/HeaderNav.tsx

@@ -1,4 +1,4 @@
-import { NavLink } from "react-router-dom";
+import { NavLink, useLocation } from "react-router-dom";
 import {
   UploadCloudLineIcon,
   AnalysisIcon,
@@ -20,12 +20,26 @@ const navItems = [
 ];
 
 export default function HeaderNav() {
+  const location = useLocation();
+  
+  const handleNavigation = (e: React.MouseEvent, to: string) => {
+    if (location.pathname === "/upload") {
+      const uploadPage = document.querySelector('[data-step="2"]');
+      if (uploadPage) {
+        e.preventDefault();
+        if (confirm("Changes will not be saved")) {
+          window.location.href = to;
+        }
+      }
+    }
+  };
+
   return (
     <header className="bg-white border-b border-ifrcRed/40">
       <div className="flex items-center justify-between px-6 py-3">
 
         {/* ── Logo + title ─────────────────────────── */}
-        <NavLink to="/" className="flex items-center gap-2">
+        <NavLink to="/" className="flex items-center gap-2" onClick={(e) => handleNavigation(e, "/")}>
           <img src="/ifrc-logo.svg" alt="IFRC logo" className="h-6" />
           <span className="font-semibold">PromptAid Vision</span>
         </NavLink>
@@ -33,7 +47,7 @@ export default function HeaderNav() {
         {/* ── Centre nav links ─────────────────────── */}
         <nav className="flex gap-6">
           {navItems.map(({ to, label, Icon }) => (
-            <NavLink key={to} to={to} className={navLink}>
+            <NavLink key={to} to={to} className={navLink} onClick={(e) => handleNavigation(e, to)}>
               <Icon className="w-4 h-4" /> {label}
             </NavLink>
           ))}

frontend/src/pages/UploadPage.tsx

@@ -9,10 +9,11 @@ import {
   UploadCloudLineIcon,
   ArrowRightLineIcon,
 } from '@ifrc-go/icons';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 export default function UploadPage() {
-  const [step, setStep] = useState<1 | 2>(1);
+  const navigate = useNavigate();
+  const [step, setStep] = useState<1 | 2 | 3>(1);
   const [preview, setPreview] = useState<string | null>(null);
   /* ---------------- local state ----------------- */
 
@@ -35,7 +36,36 @@ export default function UploadPage() {
   const handleCategoryChange = (value: any) => setCategory(String(value));
   const handleCountriesChange = (value: any) => setCountries(Array.isArray(value) ? value.map(String) : []);
 
-  const [draft, setDraft] = useState(''); 
+  const [captionId, setCaptionId] = useState<string | null>(null);
+
+  const [imageUrl, setImageUrl] = useState<string|null>(null);
+
+  const [draft, setDraft] = useState('');
+
+  // Handle navigation with confirmation
+  const handleNavigation = () => {
+    if (step === 2) {
+      if (confirm("Changes will not be saved")) {
+        setStep(1);
+        setFile(null);
+        setPreview(null);
+        setImageUrl(null);
+        setCaptionId(null);
+        setDraft('');
+        setScores({ accuracy: 50, context: 50, usability: 50 });
+      }
+    }
+  };
+
+  const resetToStep1 = () => {
+    setStep(1);
+    setFile(null);
+    setPreview(null);
+    setImageUrl(null);
+    setCaptionId(null);
+    setDraft('');
+    setScores({ accuracy: 50, context: 50, usability: 50 });
+  }; 
   const [scores, setScores] = useState({  
     accuracy: 50,
     context:  50,
@@ -90,6 +120,7 @@ export default function UploadPage() {
       const mapRes = await fetch('/api/maps/', { method: 'POST', body: fd });
       const mapJson = await readJsonSafely(mapRes);
       if (!mapRes.ok) throw new Error(mapJson.error || 'Upload failed');
+      setImageUrl(mapJson.image_url);
 
       const mapIdVal = mapJson.map_id;
       if (!mapIdVal) throw new Error('Upload failed: map_id not found');
@@ -97,12 +128,14 @@ export default function UploadPage() {
     
       /* 2) caption */
       const capRes = await fetch(
-        `/api/maps/${mapIdVal}/caption/`, 
+        `/api/maps/${mapIdVal}/caption`, 
         { method: 'POST' },
       );
       const capJson = await readJsonSafely(capRes);
       if (!capRes.ok) throw new Error(capJson.error || 'Caption failed');
-    
+      setCaptionId(capJson.cap_id);
+      console.log(capJson);
+
       /* 3) continue workflow */
       setDraft(capJson.generated);
       setStep(2);
@@ -114,7 +147,7 @@ export default function UploadPage() {
   /* ------------------------------------------------------------------- */
   return (
     <PageContainer>
-      <div className="mx-auto max-w-3xl text-center px-4 py-10">
+      <div className="mx-auto max-w-3xl text-center px-4 py-10" data-step={step}>
         {/* Title & intro copy */}
         {step === 1 && <>
           <Heading level={2}>Upload Your Crisis Map</Heading>
@@ -134,16 +167,7 @@ export default function UploadPage() {
           </div>
         </>}
 
-        {/* Show uploaded image in step 2 */}
-        {step === 2 && preview &&(
-          <div className="mt-6 flex justify-center">
-            <img
-              src={preview}
-              alt="Uploaded map preview"
-              className="max-h-80 rounded shadow"
-            />
-          </div>
-        )}
+
 
         {/* Drop-zone */}
         {step === 1 && (
@@ -186,6 +210,17 @@ export default function UploadPage() {
           </Button>
         )}
 
+{step === 2 && imageUrl && (
+  <div className="mt-6 flex justify-center">
+    <div className="w-full max-w-3xl max-h-80 overflow-hidden bg-red-50">
+             <img
+         src={preview || undefined}
+         alt="Uploaded map preview"
+         className="w-full h-full object-contain rounded shadow"
+       />
+    </div>
+  </div>
+)}
 
 {step === 2 && (
   <div className="space-y-10">
@@ -286,17 +321,46 @@ export default function UploadPage() {
     <Button
       name="submit"
       className="mt-10"
-      onClick={() =>
-        alert('Stub saved – wire PUT /api/captions/:id later')
-      }
+      onClick={async () => {
+        if (!captionId) return alert("No caption to submit");
+        const body = {
+          edited: draft,
+          accuracy: scores.accuracy,
+          context:  scores.context,
+          usability: scores.usability,
+        };
+        const res = await fetch(`/api/captions/${captionId}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body),
+        });
+        const json = await readJsonSafely(res);
+        if (!res.ok) return alert(json.error || "Save failed");
+        setStep(3);
+      }}
     >
       Submit
     </Button>
-  </div>
-)}
-        
-        
-      </div>
-    </PageContainer>
-  );
+          </div>
+      )}
+
+      {/* Success page */}
+      {step === 3 && (
+        <div className="text-center space-y-6">
+          <Heading level={2}>Saved!</Heading>
+          <p className="text-gray-700">Your caption has been successfully saved.</p>
+          <Button
+            name="upload-another"
+            onClick={resetToStep1}
+            className="mt-6"
+          >
+            Upload Another
+          </Button>
+        </div>
+      )}
+      
+      
+    </div>
+  </PageContainer>
+);
 }

py_backend/app/database.py

@@ -1,17 +1,35 @@
+# app/database.py
+
+import os
+import logging
+
 from sqlalchemy import create_engine
-from sqlalchemy.ext.declarative import declarative_base
-from sqlalchemy.orm import sessionmaker
+from sqlalchemy.orm import sessionmaker, declarative_base
+
 from .config import settings
 
-# Create the SQLAlchemy engine
-engine = create_engine(settings.DATABASE_URL, echo=True)
+# 1) Grab the raw DATABASE_URL (e.g. "postgresql://...:5433/promptaid?schema=public")
+raw_db_url = settings.DATABASE_URL
+logging.getLogger().warning(f"▶️ Raw DATABASE_URL = {raw_db_url!r}")
+
+# 2) Strip off any query string (everything from the first "?" onward)
+clean_db_url = raw_db_url.split("?", 1)[0]
+logging.getLogger().warning(f"▶️ Using clean   URL = {clean_db_url!r}")
+
+# 3) Create the SQLAlchemy engine on that clean URL
+engine = create_engine(
+    clean_db_url,
+    echo=True,            # log all SQL to the console
+    future=True           # recommended for SQLAlchemy 2.0 style
+)
 
-# Each instance of SessionLocal is a database session
+# 4) Configure a session factory
 SessionLocal = sessionmaker(
     autocommit=False,
     autoflush=False,
-    bind=engine
+    bind=engine,
+    future=True
 )
 
-# Base class for ORM models
-Base = declarative_base()
+# 5) Base class for all ORM models
+Base = declarative_base()

py_backend/app/routers/caption.py

@@ -48,3 +48,10 @@ def get_caption(cap_id: str, db: Session = Depends(get_db)):
     if not c:
         raise HTTPException(404, "caption not found")
     return c
+
+@router.put("/captions/{cap_id}", response_model=schemas.CaptionOut)
+def update_caption(cap_id: str, update: schemas.CaptionUpdate, db: Session = Depends(get_db)):
+    c = crud.update_caption(db, cap_id, **update.dict())
+    if not c:
+        raise HTTPException(404, "caption not found")
+    return c

py_backend/app/routers/upload.py

@@ -14,20 +14,41 @@ def get_db():
 
 @router.post("/", response_model=schemas.MapOut)
 async def upload_map(
-    source: str = Form(...),
-    region: str = Form(...),
-    category: str = Form(...),
+    source: str        = Form(...),
+    region: str        = Form(...),
+    category: str      = Form(...),
     countries: list[str] = Form([]),
-    file: UploadFile = Form(...),
-    db: Session = Depends(get_db)
+    file: UploadFile   = Form(...),
+    db: Session        = Depends(get_db)
 ):
     # 1) read & hash
     content = await file.read()
-    sha = crud.hash_bytes(content)
+    sha     = crud.hash_bytes(content)
 
-    # 2) upload to S3
+    # 2) upload to S3/MinIO (or local FS)
     key = storage.upload_fileobj(io.BytesIO(content), file.filename)
 
-    # 3) insert into DB
+    # 3) persist the DB record
     m = crud.create_map(db, source, region, category, key, sha, countries)
-    return m
+
+    # 4) generate a URL for your front‑end
+    #
+    # If you have an S3/MinIO client in storage:
+    try:
+        url = storage.get_presigned_url(key, expires_in=3600)
+    except AttributeError:
+        # fallback: if you’re serving via StaticFiles("/uploads")
+        url = f"/uploads/{key}"
+
+    # 5) return the Map plus that URL
+    return schemas.MapOut(
+        map_id    = m.map_id,
+        file_key  = m.file_key,
+        sha256    = m.sha256,
+        source    = m.source,
+        region    = m.region,
+        category  = m.category,
+        countries = [c.c_code for c in m.countries],  # or however you model it
+        created_at = m.created_at,
+        image_url = url,
+    )

py_backend/app/schemas.py

@@ -1,4 +1,4 @@
-from pydantic import BaseModel, Field
+from pydantic import BaseModel, Field, conint
 from typing import List, Optional
 from uuid import UUID
 
@@ -16,6 +16,7 @@ class MapOut(BaseModel):
     source: str
     region: str
     category: str
+    image_url:  str
 
     class Config:
         orm_mode = True
@@ -37,6 +38,6 @@ class CaptionOut(BaseModel):
 
 class CaptionUpdate(BaseModel):
     edited: str
-    accuracy: int = Field(..., ge=0, le=100)
-    context:  int = Field(..., ge=0, le=100)
-    usability:int = Field(..., ge=0, le=100)
+    accuracy: conint(ge=0, le=100) = None
+    context:  conint(ge=0, le=100) = None
+    usability: conint(ge=0, le=100) = None

py_backend/requirements.txt

@@ -6,4 +6,5 @@ psycopg2-binary
 boto3
 python-dotenv
 pydantic<2.0.0
-openai  # or other VLM client
+openai  # or other VLM client
+pytest