Arnaud
f0340859fa
The photo-import flow used one vision-capable model to both read the photo and structure the full recipe (quantities, steps, timing) in a single call. Split it into two: a vision model recognizes what's in the picture, then a text model reconstructs the recipe from that description — same pattern the pantry photo-scan already uses for recognition, and lets structuring use whichever model is actually configured for text generation. Still counts as one AI-quota unit. v0.37.0
100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
import { useRouter } from "next/navigation";
|
|
import { Camera, Loader2 } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { Button } from "@/components/ui/button";
|
|
import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
|
|
|
|
export function PhotoImportButton() {
|
|
const t = useTranslations("recipe");
|
|
const router = useRouter();
|
|
const fileRef = useRef<HTMLInputElement>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [stage, setStage] = useState<"recognizing" | "generating">("recognizing");
|
|
const stageTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
function handleClick() {
|
|
fileRef.current?.click();
|
|
}
|
|
|
|
async function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
setLoading(true);
|
|
setStage("recognizing");
|
|
// The photo-import flow is two sequential AI calls (vision recognition,
|
|
// then text generation) behind a single request/response — there's no
|
|
// real progress signal to react to, so this just approximates the
|
|
// handoff point for the loading copy.
|
|
stageTimerRef.current = setTimeout(() => setStage("generating"), 5000);
|
|
|
|
try {
|
|
const base64 = await new Promise<string>((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
const result = reader.result as string;
|
|
// Strip the data:mime/type;base64, prefix
|
|
const comma = result.indexOf(",");
|
|
resolve(comma !== -1 ? result.slice(comma + 1) : result);
|
|
};
|
|
reader.onerror = () => reject(reader.error);
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
const res = await fetch("/api/v1/ai/import-photo", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
imageBase64: base64,
|
|
mimeType: file.type,
|
|
}),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
if (res.status === 422) throw new Error(t("photoNoRecipeFound"));
|
|
const data = await res.json().catch(() => ({})) as { error?: string };
|
|
throw new Error(data.error ?? `Request failed: ${res.status}`);
|
|
}
|
|
|
|
const { id } = await res.json() as { id: string };
|
|
router.push(`/recipes/${id}/edit`);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : t("photoImportFailed"));
|
|
} finally {
|
|
if (stageTimerRef.current) clearTimeout(stageTimerRef.current);
|
|
setLoading(false);
|
|
// Reset input so the same file can be re-selected
|
|
if (fileRef.current) fileRef.current.value = "";
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<input
|
|
ref={fileRef}
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
className="hidden"
|
|
onChange={handleFile}
|
|
/>
|
|
<Button onClick={handleClick} disabled={loading} variant="outline">
|
|
{loading ? (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Camera className="mr-2 h-4 w-4" />
|
|
)}
|
|
{t("importFromPhoto")}
|
|
</Button>
|
|
<FakeProgressBar
|
|
active={loading}
|
|
durationMs={12000}
|
|
label={loading ? (stage === "recognizing" ? t("recognizingPhoto") : t("writingRecipe")) : undefined}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|