Arnaud
d8bc077f47
importFromPhoto() accepted a locale param but silently discarded it (named _locale, never read) — now builds a language instruction the same way generate-recipe.ts does for text generation. The AI output schema had no way to signal "couldn't find a recipe in this image" — generateObject would always fabricate a title/fields. Added a `found` boolean the model sets to false in that case; the route now returns 422 instead of creating a garbage recipe and sending the user into the editor with it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
87 lines
2.7 KiB
TypeScript
87 lines
2.7 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);
|
|
|
|
function handleClick() {
|
|
fileRef.current?.click();
|
|
}
|
|
|
|
async function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
setLoading(true);
|
|
|
|
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 {
|
|
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 ? t("analyzingPhoto") : undefined} />
|
|
</div>
|
|
);
|
|
}
|