Version One
This commit is contained in:
180
src/app/recipe/page.tsx
Normal file
180
src/app/recipe/page.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
type Analysis = {
|
||||
platform: 'tiktok' | 'instagram' | 'unknown';
|
||||
analysis: {
|
||||
ingredients: Array<{ name: string; quantity: string | null; unit: string | null; notes?: string | null }>;
|
||||
prep_steps: string[];
|
||||
cooking_steps: string[];
|
||||
};
|
||||
description?: string;
|
||||
transcript?: string;
|
||||
thumbnailBase64?: string;
|
||||
title?: string;
|
||||
};
|
||||
|
||||
export default function RecipeAnalyzerPage() {
|
||||
const [url, setUrl] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [result, setResult] = useState<Analysis | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const canSave = !!result && !!url;
|
||||
|
||||
async function onSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setResult(null);
|
||||
try {
|
||||
const res = await fetch('/api/analyze', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ url }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data?.error || 'Failed');
|
||||
setResult(data);
|
||||
} catch (err: any) {
|
||||
setError(err?.message || 'Something went wrong');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function onSave() {
|
||||
if (!result) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await fetch('/api/recipes', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
url,
|
||||
platform: result.platform,
|
||||
title: result.title || '',
|
||||
description: result.description || '',
|
||||
transcript: result.transcript || '',
|
||||
analysis: result.analysis,
|
||||
thumbnailBase64: result.thumbnailBase64,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data?.error || 'Failed to save');
|
||||
alert('Saved!');
|
||||
} catch (err: any) {
|
||||
alert(err?.message || 'Failed to save');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen p-6 md:p-12 lg:p-16 flex flex-col gap-8 max-w-3xl mx-auto">
|
||||
<h1 className="text-3xl md:text-4xl font-bold">Recipe AI from Reels/TikToks</h1>
|
||||
<p className="text-neutral-600 dark:text-neutral-300">
|
||||
Paste a TikTok or Instagram share link. The AI analyzes only the video to extract an ingredient list, prep steps, and cooking steps.
|
||||
</p>
|
||||
|
||||
<form onSubmit={onSubmit} className="flex flex-col gap-3">
|
||||
<input
|
||||
type="url"
|
||||
required
|
||||
placeholder="https://www.tiktok.com/@user/video/123... or https://www.instagram.com/reel/..."
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
className="w-full rounded border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 py-2"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="inline-flex items-center justify-center rounded bg-black text-white dark:bg-white dark:text-black px-4 py-2 disabled:opacity-60"
|
||||
>
|
||||
{loading ? 'Analyzing…' : 'Analyze Video'}
|
||||
</button>
|
||||
{result && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSave}
|
||||
disabled={saving}
|
||||
className="inline-flex items-center justify-center rounded border border-neutral-300 dark:border-neutral-700 px-4 py-2 disabled:opacity-60"
|
||||
>
|
||||
{saving ? 'Saving…' : 'Save Recipe'}
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
|
||||
{error && (
|
||||
<div className="rounded border border-red-300 bg-red-50 text-red-800 dark:bg-red-950 dark:text-red-200 p-3">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={result.title || ''}
|
||||
onChange={(e) => setResult({ ...result, title: e.target.value })}
|
||||
className="w-full rounded border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 py-2"
|
||||
placeholder="Recipe title"
|
||||
/>
|
||||
</div>
|
||||
{result.thumbnailBase64 && (
|
||||
<img src={result.thumbnailBase64} alt="thumbnail" className="w-full h-auto rounded" />
|
||||
)}
|
||||
<div className="text-sm text-neutral-600 dark:text-neutral-300 break-words">
|
||||
<div>
|
||||
<span className="font-medium">Source:</span>{' '}
|
||||
<a href={url} className="underline" target="_blank" rel="noreferrer">
|
||||
{url}
|
||||
</a>
|
||||
</div>
|
||||
{result.description && (
|
||||
<div className="mt-1 whitespace-pre-wrap">
|
||||
<span className="font-medium">Description:</span> {result.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">Ingredients</h2>
|
||||
<ul className="list-disc pl-6 mt-2 space-y-1">
|
||||
{result.analysis.ingredients.map((it, idx) => (
|
||||
<li key={idx}>
|
||||
<span className="font-medium">{it.name}</span>
|
||||
{it.quantity ? ` – ${it.quantity}` : ''}
|
||||
{it.unit ? ` ${it.unit}` : ''}
|
||||
{it.notes ? ` (${it.notes})` : ''}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">Prep Steps</h2>
|
||||
<ol className="list-decimal pl-6 mt-2 space-y-1">
|
||||
{result.analysis.prep_steps.map((s, i) => (
|
||||
<li key={i}>{s}</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">Cooking Steps</h2>
|
||||
<ol className="list-decimal pl-6 mt-2 space-y-1">
|
||||
{result.analysis.cooking_steps.map((s, i) => (
|
||||
<li key={i}>{s}</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user