@wasto/cms-components 1.5.10

package/src/components/vision/Vision.tsx

@@ -0,0 +1,447 @@
+/**
+ * Bloc CMS Vision — parcours Lens : photo → tap → carte post-scan (ADR-003 / Phase 6).
+ * WebRTC /offer n’est pas utilisé (MVP).
+ */
+import { useCallback, useState } from "react";
+import {
+    ActivityIndicator,
+    Modal,
+    Platform,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useLocal } from "../../contexts/LocalContext";
+import { useWastoClient } from "../../hooks/useWastoClient";
+import { Button } from "../button/Button";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+import { VisionCapture } from "./VisionCapture";
+import { VisionTapOverlay } from "./VisionTapOverlay";
+import { VisionActionCard, type VisionSuggestion } from "./VisionActionCard";
+
+const DEFAULT_TITLE = "Wast’O Scan";
+const DEFAULT_DESCRIPTION =
+    "Photographiez un déchet, touchez-le sur la photo, puis suivez la consigne locale.";
+const TIPS =
+    "Astuce : bonne lumière, objet centré, un déchet à la fois si possible.";
+
+const MIN_CARD_HEIGHT = 120;
+const MAX_CARD_HEIGHT = 800;
+const DEFAULT_CARD_HEIGHT = 280;
+
+const VISION_SESSION_START_PATH = "/public/vision/sessions/start";
+
+const LOG_TAG = "[Vision]";
+
+function visionDebug(...args: unknown[]) {
+    if (__DEV__) console.log(LOG_TAG, ...args);
+}
+
+function visionWarn(message: string, detail?: unknown) {
+    if (detail !== undefined) console.warn(LOG_TAG, message, detail);
+    else console.warn(LOG_TAG, message);
+}
+
+export type VisionCaptureResult = {
+    uri: string;
+};
+
+export type VisionProps = {
+    /** URL POST /detect (sinon fournie par startSession). */
+    detectUrl?: string;
+    /** @deprecated conservé pour compat CMS ; non utilisé en parcours Lens. */
+    offerUrl?: string;
+    title?: string;
+    description?: string;
+    height?: number;
+    /** Override ville ; sinon LocalContext.selectedCityId. */
+    cityId?: string;
+    /**
+     * Capture custom (sinon expo-image-picker si installé dans l’app hôte).
+     */
+    onRequestCapture?: () => Promise<VisionCaptureResult | null>;
+};
+
+type Phase = "idle" | "capture" | "tap" | "loading" | "card" | "error";
+
+type SessionUrls = {
+    sessionId: string;
+    detectUrl: string;
+};
+
+function clampHeight(h: number | undefined): number {
+    if (typeof h !== "number" || !Number.isFinite(h)) return DEFAULT_CARD_HEIGHT;
+    return Math.max(MIN_CARD_HEIGHT, Math.min(MAX_CARD_HEIGHT, h));
+}
+
+async function defaultCapturePhoto(): Promise<VisionCaptureResult | null> {
+    try {
+        // Peer optional — app hôte doit installer expo-image-picker
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const ImagePicker = require("expo-image-picker") as {
+            requestCameraPermissionsAsync: () => Promise<{ status: string }>;
+            launchCameraAsync: (opts: Record<string, unknown>) => Promise<{
+                canceled: boolean;
+                assets?: Array<{ uri: string }>;
+            }>;
+        };
+        const perm = await ImagePicker.requestCameraPermissionsAsync();
+        if (perm.status !== "granted") {
+            throw new Error("Permission caméra refusée.");
+        }
+        const result = await ImagePicker.launchCameraAsync({
+            quality: 0.85,
+            exif: false,
+        });
+        if (result.canceled || !result.assets?.[0]?.uri) return null;
+        return { uri: result.assets[0].uri };
+    } catch (e) {
+        visionWarn("expo-image-picker indisponible", e);
+        throw new Error(
+            "Installez expo-image-picker dans l’app, ou fournissez onRequestCapture.",
+        );
+    }
+}
+
+export function Vision({
+    detectUrl: detectUrlProp = "",
+    title,
+    description,
+    height: heightProp,
+    cityId: cityIdProp,
+    onRequestCapture,
+}: VisionProps) {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const { selectedCityId } = useLocal();
+    const client = useWastoClient();
+    const cityId = cityIdProp?.trim() || selectedCityId || undefined;
+
+    const [modalVisible, setModalVisible] = useState(false);
+    const [phase, setPhase] = useState<Phase>("idle");
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+    const [imageUri, setImageUri] = useState<string | null>(null);
+    const [tap, setTap] = useState<{ x: number; y: number } | null>(null);
+    const [session, setSession] = useState<SessionUrls | null>(null);
+    const [suggestions, setSuggestions] = useState<VisionSuggestion[]>([]);
+    const [primaryLabel, setPrimaryLabel] = useState<string | null>(null);
+    const [confidence, setConfidence] = useState<number | null>(null);
+    const [requireConfirm, setRequireConfirm] = useState(true);
+    const [busy, setBusy] = useState(false);
+
+    const cardMinHeight = clampHeight(heightProp);
+    const displayTitle = (title && title.trim()) || DEFAULT_TITLE;
+    const displayDescription =
+        (description && description.trim()) || DEFAULT_DESCRIPTION;
+
+    const resetFlow = useCallback(() => {
+        setPhase("capture");
+        setErrorMessage(null);
+        setImageUri(null);
+        setTap(null);
+        setSuggestions([]);
+        setPrimaryLabel(null);
+        setConfidence(null);
+        setBusy(false);
+    }, []);
+
+    const ensureSession = useCallback(async (): Promise<SessionUrls> => {
+        if (session?.detectUrl && session.sessionId) return session;
+
+        const propDetect = detectUrlProp.trim();
+        const res = (await client.request(VISION_SESSION_START_PATH, {
+            method: "POST",
+            body: JSON.stringify({
+                cityId: cityId || undefined,
+            }),
+        })) as {
+            sessionId: string;
+            detectUrl?: string;
+            offerUrl?: string;
+        };
+
+        const detect =
+            propDetect ||
+            res.detectUrl?.trim() ||
+            (res.offerUrl ? res.offerUrl.replace(/\/offer\/?$/, "/detect") : "");
+
+        if (!res.sessionId || !detect) {
+            throw new Error(
+                "Session vision incomplète (sessionId / detectUrl). Vérifiez WASTO_VISION_URL.",
+            );
+        }
+
+        const next = { sessionId: res.sessionId, detectUrl: detect };
+        setSession(next);
+        return next;
+    }, [session, detectUrlProp, client, cityId]);
+
+    const openScan = useCallback(() => {
+        setModalVisible(true);
+        resetFlow();
+    }, [resetFlow]);
+
+    const closeModal = useCallback(() => {
+        setModalVisible(false);
+        setPhase("idle");
+        setBusy(false);
+    }, []);
+
+    const handleCapture = useCallback(async () => {
+        setBusy(true);
+        setErrorMessage(null);
+        try {
+            const capture = onRequestCapture
+                ? await onRequestCapture()
+                : await defaultCapturePhoto();
+            if (!capture?.uri) {
+                setBusy(false);
+                return;
+            }
+            setImageUri(capture.uri);
+            setTap(null);
+            setPhase("tap");
+        } catch (e: unknown) {
+            const msg = e instanceof Error ? e.message : String(e);
+            setErrorMessage(msg);
+            setPhase("error");
+        } finally {
+            setBusy(false);
+        }
+    }, [onRequestCapture]);
+
+    const runDetectAndFinalize = useCallback(
+        async (tapCoords: { x: number; y: number } | null) => {
+            if (!imageUri) return;
+            setBusy(true);
+            setPhase("loading");
+            setErrorMessage(null);
+            try {
+                const sess = await ensureSession();
+
+                const form = new FormData();
+                form.append("image", {
+                    uri: imageUri,
+                    name: "scan.jpg",
+                    type: "image/jpeg",
+                } as unknown as Blob);
+                if (tapCoords) {
+                    form.append("tapX", String(tapCoords.x));
+                    form.append("tapY", String(tapCoords.y));
+                }
+
+                visionDebug("POST detect", { detectUrl: sess.detectUrl, tap: tapCoords });
+                const detectRes = await fetch(sess.detectUrl, {
+                    method: "POST",
+                    body: form,
+                });
+                const detectText = await detectRes.text();
+                if (!detectRes.ok) {
+                    throw new Error(detectText || `Detect HTTP ${detectRes.status}`);
+                }
+                const detectJson = JSON.parse(detectText) as {
+                    detections?: Array<{
+                        label: string;
+                        confidence: number;
+                        bbox?: number[];
+                        tap?: { x: number; y: number };
+                        ts?: number;
+                    }>;
+                };
+
+                const finalizePath = `/public/vision/sessions/${sess.sessionId}/finalize`;
+                const finalized = (await client.request(finalizePath, {
+                    method: "POST",
+                    body: JSON.stringify({
+                        detections: detectJson.detections ?? [],
+                        cityId: cityId || undefined,
+                        tap: tapCoords ?? undefined,
+                    }),
+                })) as {
+                    suggestions?: VisionSuggestion[];
+                    primaryLabel?: string | null;
+                    confidence?: number | null;
+                    requireUserConfirm?: boolean;
+                };
+
+                setSuggestions(finalized.suggestions ?? []);
+                setPrimaryLabel(finalized.primaryLabel ?? null);
+                setConfidence(finalized.confidence ?? null);
+                setRequireConfirm(finalized.requireUserConfirm !== false);
+                setPhase("card");
+            } catch (e: unknown) {
+                const msg = e instanceof Error ? e.message : String(e);
+                visionWarn("detect/finalize failed", e);
+                setErrorMessage(msg);
+                setPhase("error");
+            } finally {
+                setBusy(false);
+            }
+        },
+        [imageUri, ensureSession, client, cityId],
+    );
+
+    const handleConfirm = useCallback(async () => {
+        if (!session?.sessionId) return;
+        setBusy(true);
+        try {
+            await client.request(`/public/vision/sessions/${session.sessionId}/report`, {
+                method: "POST",
+                body: JSON.stringify({
+                    userConfirmed: true,
+                    label: primaryLabel ?? undefined,
+                    confidence: confidence ?? undefined,
+                    actionKind: suggestions.find((s) => s.kind === "SORT_BIN")?.kind,
+                }),
+            });
+            closeModal();
+        } catch (e: unknown) {
+            const msg = e instanceof Error ? e.message : String(e);
+            setErrorMessage(msg);
+            setPhase("error");
+        } finally {
+            setBusy(false);
+        }
+    }, [session, client, primaryLabel, confidence, suggestions, closeModal]);
+
+    const handleWrong = useCallback(async () => {
+        if (session?.sessionId) {
+            try {
+                await client.request(`/public/vision/sessions/${session.sessionId}/report`, {
+                    method: "POST",
+                    body: JSON.stringify({
+                        userConfirmed: false,
+                        metadata: { feedback: "wrong_detection" },
+                    }),
+                });
+            } catch (e) {
+                visionWarn("report wrong failed", e);
+            }
+        }
+        resetFlow();
+    }, [session, client, resetFlow]);
+
+    return (
+        <View
+            style={[
+                cardStyle(theme),
+                styles.card,
+                { minHeight: cardMinHeight },
+            ]}
+        >
+            <Text style={[styles.cardTitle, { color: t.colors.onSurface }]}>
+                {displayTitle}
+            </Text>
+            <Text style={[styles.cardDescription, { color: t.colors.muted }]}>
+                {displayDescription}
+            </Text>
+            {errorMessage && !modalVisible ? (
+                <Text style={[styles.errorInline, { color: t.colors.error }]}>
+                    {errorMessage}
+                </Text>
+            ) : null}
+            <Button onPress={openScan}>Scanner un déchet</Button>
+
+            <Modal
+                visible={modalVisible}
+                animationType="fade"
+                presentationStyle={Platform.OS === "ios" ? "fullScreen" : undefined}
+                statusBarTranslucent
+                onRequestClose={closeModal}
+            >
+                <View style={[styles.modalRoot, { backgroundColor: t.colors.background }]}>
+                    <View style={styles.modalHeader}>
+                        <Text style={[styles.modalTitle, { color: t.colors.onSurface }]}>
+                            {displayTitle}
+                        </Text>
+                        <Button variant="ghost" onPress={closeModal}>
+                            Fermer
+                        </Button>
+                    </View>
+
+                    <View style={styles.modalBody}>
+                        {phase === "capture" ? (
+                            <VisionCapture
+                                tips={TIPS}
+                                onCapture={() => void handleCapture()}
+                                busy={busy}
+                            />
+                        ) : null}
+
+                        {phase === "tap" && imageUri ? (
+                            <VisionTapOverlay
+                                imageUri={imageUri}
+                                tap={tap}
+                                onTap={setTap}
+                                onAnalyzeFull={() => void runDetectAndFinalize(null)}
+                                onConfirmTap={() => void runDetectAndFinalize(tap)}
+                                onRetake={resetFlow}
+                                busy={busy}
+                            />
+                        ) : null}
+
+                        {phase === "loading" ? (
+                            <View style={styles.center}>
+                                <ActivityIndicator size="large" color={t.colors.primary} />
+                                <Text style={{ color: t.colors.muted, marginTop: 12 }}>
+                                    Analyse en cours…
+                                </Text>
+                            </View>
+                        ) : null}
+
+                        {phase === "card" ? (
+                            <VisionActionCard
+                                suggestions={suggestions}
+                                primaryLabel={primaryLabel}
+                                confidence={confidence}
+                                requireConfirm={requireConfirm}
+                                onConfirm={() => void handleConfirm()}
+                                onRetake={resetFlow}
+                                onWrong={() => void handleWrong()}
+                                busy={busy}
+                            />
+                        ) : null}
+
+                        {phase === "error" ? (
+                            <View style={styles.center}>
+                                <Text style={{ color: t.colors.error, fontWeight: "700" }}>
+                                    Impossible d’analyser
+                                </Text>
+                                <Text style={{ color: t.colors.muted, marginTop: 8 }}>
+                                    {errorMessage}
+                                </Text>
+                                <Button onPress={resetFlow} style={styles.retry}>
+                                    Réessayer
+                                </Button>
+                            </View>
+                        ) : null}
+                    </View>
+                </View>
+            </Modal>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    card: {
+        padding: SPACE.cardPad,
+        gap: 10,
+    },
+    cardTitle: { fontSize: 18, fontWeight: "700" },
+    cardDescription: { fontSize: 14, lineHeight: 20 },
+    errorInline: { fontSize: 13 },
+    modalRoot: { flex: 1, paddingTop: Platform.OS === "ios" ? 56 : 24 },
+    modalHeader: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingHorizontal: SPACE.pageX,
+        marginBottom: 8,
+    },
+    modalTitle: { fontSize: 18, fontWeight: "700", flex: 1 },
+    modalBody: { flex: 1, padding: SPACE.pageX },
+    center: { flex: 1, alignItems: "center", justifyContent: "center", gap: 8 },
+    retry: { marginTop: 16, alignSelf: "center", minWidth: 140 },
+});

package/src/components/vision/VisionActionCard.tsx

@@ -0,0 +1,117 @@
+import { StyleSheet, Text, View } from "react-native";
+import { Button } from "../button/Button";
+import { useTheme } from "../../contexts/ThemeContext";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type VisionSuggestion = {
+    kind: string;
+    rank: number;
+    title: string;
+    body: string;
+    payload?: Record<string, unknown>;
+};
+
+export type VisionActionCardProps = {
+    suggestions: VisionSuggestion[];
+    primaryLabel: string | null;
+    confidence: number | null;
+    requireConfirm: boolean;
+    onConfirm: () => void;
+    onRetake: () => void;
+    onWrong: () => void;
+    busy?: boolean;
+};
+
+export function VisionActionCard({
+    suggestions,
+    primaryLabel,
+    confidence,
+    requireConfirm,
+    onConfirm,
+    onRetake,
+    onWrong,
+    busy,
+}: VisionActionCardProps) {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const primary =
+        suggestions.find((s) => s.kind === "SORT_BIN") ||
+        suggestions.find((s) => s.kind === "UNSURE") ||
+        suggestions[0];
+    const pedagogy = suggestions.find((s) => s.kind === "PEDAGOGY");
+    const isUnsure = primary?.kind === "UNSURE";
+
+    return (
+        <View style={styles.root}>
+            <Text style={[styles.kicker, { color: t.colors.muted }]}>
+                Résultat du scan
+                {primaryLabel ? ` · ${primaryLabel}` : ""}
+                {confidence != null ? ` · ${Math.round(confidence * 100)} %` : ""}
+            </Text>
+
+            {primary ? (
+                <View
+                    style={[
+                        cardStyle(theme),
+                        styles.cardPad,
+                        {
+                            borderColor: isUnsure ? t.colors.error : t.colors.primary,
+                            borderWidth: 1.5,
+                        },
+                    ]}
+                >
+                    <Text style={[styles.title, { color: t.colors.onSurface }]}>
+                        {primary.title}
+                    </Text>
+                    <Text style={[styles.body, { color: t.colors.muted }]}>{primary.body}</Text>
+                </View>
+            ) : null}
+
+            {pedagogy ? (
+                <View style={styles.pedagogy}>
+                    <Text style={[styles.title, { color: t.colors.onSurface }]}>
+                        {pedagogy.title}
+                    </Text>
+                    <Text style={[styles.body, { color: t.colors.muted }]}>{pedagogy.body}</Text>
+                </View>
+            ) : null}
+
+            <View style={styles.row}>
+                <Button variant="outline" onPress={onRetake} disabled={busy} style={styles.flexBtn}>
+                    Reprendre
+                </Button>
+                <Button
+                    variant="outline"
+                    onPress={onWrong}
+                    disabled={busy}
+                    style={styles.flexBtn}
+                    textStyle={{ color: t.colors.error }}
+                >
+                    Ce n’est pas ça
+                </Button>
+                {!isUnsure && requireConfirm ? (
+                    <Button
+                        onPress={onConfirm}
+                        disabled={busy}
+                        loading={busy}
+                        style={styles.flexBtn}
+                    >
+                        Confirmer
+                    </Button>
+                ) : null}
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: { gap: 14 },
+    kicker: { fontSize: 13 },
+    cardPad: { padding: SPACE.cardPad, gap: 6 },
+    pedagogy: { gap: 4 },
+    title: { fontSize: 18, fontWeight: "700" },
+    body: { fontSize: 15, lineHeight: 22 },
+    row: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+    flexBtn: { flexGrow: 1, minWidth: 100 },
+});

package/src/components/vision/VisionCapture.tsx

@@ -0,0 +1,30 @@
+import { StyleSheet, Text, View } from "react-native";
+import { Button } from "../button/Button";
+import { useTheme } from "../../contexts/ThemeContext";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type VisionCaptureProps = {
+    tips: string;
+    onCapture: () => void;
+    busy?: boolean;
+};
+
+export function VisionCapture({ tips, onCapture, busy }: VisionCaptureProps) {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+
+    return (
+        <View style={styles.root}>
+            <Text style={[styles.tips, { color: t.colors.muted }]}>{tips}</Text>
+            <Button onPress={onCapture} disabled={busy} loading={busy}>
+                {busy ? "Ouverture…" : "Prendre une photo"}
+            </Button>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: { gap: SPACE.stack },
+    tips: { fontSize: 14, lineHeight: 20 },
+});