[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" isEdit="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { ChefHat, Sparkles, Utensils, Globe, BookOpen, Users } from "lucide-react" import CulinaryGlobe from "@/components/culinary-globe" import AIChefAvatar from "@/components/ai-chef-avatar" import FeaturedRecipes from "@/components/featured-recipes" export default function HomePage() { return (

{/* Hero Section */}

The Future of Culinary Experiences

AI-Powered Culinary Metaverse

Experience the fusion of Michelin-starred AI chefs and immersive cooking in our next-gen gastronomy platform.

{["Neural Recipes", "AI Personalization", "3D Cooking", "Global Cuisine"].map((feature, i) => (

{i > 0 &&

} {feature}

))}

{/* Features Section */}

Quantum Chef AI Engine

Our AI-powered platform learns your preferences and creates personalized culinary experiences

{[ { icon: , title: "AI Recipe Generation", description: "Create unique recipes based on your preferences, dietary requirements, and available ingredients", }, { icon: , title: "Neural Cooking Assistant", description: "Get real-time guidance from your AI sous chef as you cook with adaptive instructions", }, { icon: , title: "Smart Kitchen Sync", description: "Connect with IoT devices to control your smart kitchen appliances and track inventory", }, { icon: , title: "Cultural Fusion", description: "Explore authentic cuisines from around the world with AI-validated cultural authenticity", }, { icon: , title: "NFT Recipe Collection", description: "Collect, trade, and share unique AI-generated recipes as digital collectibles", }, { icon: , title: "Global Community", description: "Join cooking challenges and masterclasses with chefs and food enthusiasts worldwide", }, ].map((feature, i) => (

{feature.icon}

{feature.title}

{feature.description}

))}

{/* 3D Experience Section */}

Immersive Experience

Culinary Metaverse

Step into our 3D culinary world where you can explore global cuisines, attend virtual masterclasses, and interact with AI chefs in a fully immersive environment.

{feature}

{/* Featured Recipes */}

Featured Recipes

AI-generated culinary masterpieces from around the world

{/* CTA Section */}

Ready to Transform Your Culinary Experience?

Join thousands of food enthusiasts and professional chefs in our AI-powered culinary platform

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/recipe-card.tsx" isMerged="true" isEdit="true" "use client" import { useState } from "react" import Image from "next/image" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Clock, ChefHat, Heart, Share2 } from "lucide-react" interface RecipeCardProps { id: string title: string image: string chef: string time: string difficulty: "Easy" | "Medium" | "Hard" tags: string[] likes: number } export default function RecipeCard({ id, title, image, chef, time, difficulty, tags, likes }: RecipeCardProps) { const [liked, setLiked] = useState(false) const [likeCount, setLikeCount] = useState(likes) const handleLike = () => { if (liked) { setLikeCount(likeCount - 1) } else { setLikeCount(likeCount + 1) } setLiked(!liked) } const difficultyColor = { Easy: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300", Medium: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300", Hard: "bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300", } return (

{difficulty}

{tags.slice(0, 2).map((tag, i) => ( {tag} ))} {tags.length > 2 && ( +{tags.length - 2} )}

{title}

{chef}

{time}

) } [V0_FILE]typescriptreact:file="components/featured-recipes.tsx" isMerged="true" isEdit="true" import RecipeCard from "./recipe-card" export default function FeaturedRecipes() { const recipes = [ { id: "1", title: "Molecular Gastronomy Saffron Risotto", image: "/placeholder.svg?height=300&width=500", chef: "AI Chef Aria", time: "45 min", difficulty: "Medium" as const, tags: ["Italian", "Molecular", "Fusion"], likes: 342, }, { id: "2", title: "Neuro-Adaptive Chocolate Soufflé", image: "/placeholder.svg?height=300&width=500", chef: "AI Chef Quantum", time: "60 min", difficulty: "Hard" as const, tags: ["Dessert", "French", "Molecular"], likes: 289, }, { id: "3", title: "Cultural Fusion Kimchi Tacos", image: "/placeholder.svg?height=300&width=500", chef: "AI Chef Nova", time: "30 min", difficulty: "Easy" as const, tags: ["Korean", "Mexican", "Fusion"], likes: 421, }, { id: "4", title: "Quantum-Infused Levitating Soufflé", image: "/placeholder.svg?height=300&width=500", chef: "AI Chef Pixel", time: "75 min", difficulty: "Hard" as const, tags: ["Molecular", "French", "Experimental"], likes: 198, }, ] return (

{recipes.map((recipe) => ( ))}

) } [V0_FILE]typescriptreact:file="components/ai-chef-avatar.tsx" isMerged="true" isEdit="true" "use client" import { useEffect, useRef } from "react" import { Canvas, useFrame, useThree } from "@react-three/fiber" import { OrbitControls, useGLTF, Environment, SpotLight } from "@react-three/drei" import { Suspense } from "react" import { Button } from "@/components/ui/button" import { Sparkles } from "lucide-react" function ChefModel() { // Using a duck model as a placeholder for the AI chef avatar const { scene } = useGLTF("/assets/3d/duck.glb") const modelRef = useRef() useFrame((state) => { if (modelRef.current) { modelRef.current.rotation.y = Math.sin(state.clock.getElapsedTime() * 0.5) * 0.2 } }) return } function ChefSpotlight() { const spotlightRef = useRef() useFrame((state) => { if (spotlightRef.current) { const time = state.clock.getElapsedTime() spotlightRef.current.position.x = Math.sin(time * 0.2) * 3 spotlightRef.current.position.z = Math.cos(time * 0.2) * 3 } }) return ( ) } function ChefScene() { const { camera } = useThree() useEffect(() => { camera.position.set(0, 0, 5) }, [camera]) return ( <> ) } export default function AIChefAvatar() { return (

AI Chef Aria

) } [V0_FILE]typescriptreact:file="components/culinary-globe.tsx" isMerged="true" isEdit="true" "use client" import { useRef } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { Suspense } from "react" import { OrbitControls, useTexture, Environment } from "@react-three/drei" import { Badge } from "@/components/ui/badge" function Globe() { const meshRef = useRef() const texture = useTexture("/assets/3d/texture_earth.jpg") useFrame(() => { if (meshRef.current) { meshRef.current.rotation.y += 0.001 } }) return ( ) } function CulinaryHotspots() { const hotspots = [ { position: [0, 2, 0.5], cuisine: "Italian" }, { position: [1.5, 1, 1], cuisine: "Japanese" }, { position: [-1.5, 0.5, 1.5], cuisine: "Mexican" }, { position: [0.5, -1.5, 1.5], cuisine: "Indian" }, { position: [-1, -1, 1.8], cuisine: "Thai" }, ] return hotspots.map((hotspot, index) => ( )) } export default function CulinaryGlobe() { return (

{["Italian", "Japanese", "Mexican", "Indian", "Thai", "French", "Chinese"].map((cuisine, i) => ( {cuisine} ))}

Global Culinary Explorer

Discover authentic recipes from around the world with AI-validated cultural authenticity

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import { ThemeProvider } from "@/components/theme-provider" import "./globals.css" import type { Metadata } from "next" import Link from "next/link" export const metadata: Metadata = { title: "Sapid Food - AI-Powered Culinary Platform", description: "Next-gen AI gastronomy platform combining Michelin-starred AI chefs with immersive cooking experiences", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

Sapid Food

{children}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" isEdit="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="app/admin/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { ChefHat, Sparkles, BookOpen, Calendar, Globe, Lock, Shield, Database } from "lucide-react" import { generateRecipe, generateMealPlan, generateCulturalStory } from "@/lib/content-generator" import AdminHeader from "@/components/admin/admin-header" import RecipePreview from "@/components/admin/recipe-preview" import AIModelSelector from "@/components/admin/ai-model-selector" import ImageGenerator from "@/components/admin/image-generator" import Image from "next/image" import FoodPoetryGenerator from "@/components/admin/food-poetry-generator" export default function AdminPage() { const [activeTab, setActiveTab] = useState("recipe-generator") const [isGenerating, setIsGenerating] = useState(false) const [generatedContent, setGeneratedContent] = useState(null) // Recipe generator form state const [recipeForm, setRecipeForm] = useState({ cuisine: "", dietaryRestrictions: [] as string[], difficultyLevel: "medium", availableIngredients: "", }) // Meal plan generator form state const [mealPlanForm, setMealPlanForm] = useState({ dietaryPreferences: [] as string[], caloriesPerDay: 2000, mealsPerDay: 3, }) // Cultural story generator form state const [storyForm, setStoryForm] = useState({ dishName: "", culture: "", }) const handleRecipeGenerate = async () => { setIsGenerating(true) try { const recipe = await generateRecipe({ cuisine: recipeForm.cuisine, dietaryRestrictions: recipeForm.dietaryRestrictions, difficultyLevel: recipeForm.difficultyLevel, availableIngredients: recipeForm.availableIngredients .split(",") .map((i) => i.trim()) .filter(Boolean), }) setGeneratedContent(recipe) } catch (error) { console.error("Error generating recipe:", error) } finally { setIsGenerating(false) } } const handleMealPlanGenerate = async () => { setIsGenerating(true) try { const mealPlan = await generateMealPlan({ dietaryPreferences: mealPlanForm.dietaryPreferences, caloriesPerDay: mealPlanForm.caloriesPerDay, mealsPerDay: mealPlanForm.mealsPerDay, }) setGeneratedContent(mealPlan) } catch (error) { console.error("Error generating meal plan:", error) } finally { setIsGenerating(false) } } const handleStoryGenerate = async () => { setIsGenerating(true) try { const story = await generateCulturalStory({ dishName: storyForm.dishName, culture: storyForm.culture, }) setGeneratedContent({ story }) } catch (error) { console.error("Error generating cultural story:", error) } finally { setIsGenerating(false) } } const toggleDietaryRestriction = (restriction: string) => { setRecipeForm((prev) => { if (prev.dietaryRestrictions.includes(restriction)) { return { ...prev, dietaryRestrictions: prev.dietaryRestrictions.filter((r) => r !== restriction), } } else { return { ...prev, dietaryRestrictions: [...prev.dietaryRestrictions, restriction], } } }) } const toggleDietaryPreference = (preference: string) => { setMealPlanForm((prev) => { if (prev.dietaryPreferences.includes(preference)) { return { ...prev, dietaryPreferences: prev.dietaryPreferences.filter((p) => p !== preference), } } else { return { ...prev, dietaryPreferences: [...prev.dietaryPreferences, preference], } } }) } return (

Admin Portal AI Content Orchestrator for Sapid Food

{[ { icon: , label: "Recipe Generator", id: "recipe-generator" }, { icon: , label: "Meal Plan Creator", id: "meal-plan" }, { icon: , label: "Cultural Stories", id: "cultural-stories" }, { icon: , label: "Content Library", id: "content-library" }, { icon: , label: "Security Settings", id: "security" }, ].map((item) => ( ))}

AI Model Settings

Recipe Generator Meal Plan Cultural Stories

Image Generator Food Poetry AI Recipe Generator Create unique recipes with our Quantum Chef AI Engine

Cuisine

Difficulty Level

Dietary Restrictions

{[ "vegetarian", "vegan", "gluten-free", "dairy-free", "keto", "low-carb", "paleo", "nut-free", ].map((restriction) => ( toggleDietaryRestriction(restriction)} > {restriction} ))}

Available Ingredients (comma separated)

setRecipeForm({ ...recipeForm, availableIngredients: e.target.value })}
                      />
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button
                      onClick={handleRecipeGenerate}
                      disabled={isGenerating || !recipeForm.cuisine}
                      className="w-full bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white border-0"
                    >
                      {isGenerating ? (
                        <>
                          <svg
                            className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              className="opacity-25"
                              cx="12"
                              cy="12"
                              r="10"
                              stroke="currentColor"
                              strokeWidth="4"
                            ></circle>
                            <path
                              className="opacity-75"
                              fill="currentColor"
                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                            ></path>
                          </svg>
                          Generating Recipe...
                        </>
                      ) : (
                        <>
                          <Sparkles className="w-5 h-5 mr-2" />
                          Generate Recipe
                        </>
                      )}
                    </Button>
                  </CardFooter>
                </Card>

{generatedContent && activeTab === "recipe-generator" && <RecipePreview recipe={generatedContent} />}
              </TabsContent>

<TabsContent value="meal-plan" className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Calendar className="w-5 h-5 mr-2 text-amber-500" />
                      Weekly Meal Plan Generator
                    </CardTitle>
                    <CardDescription>Create personalized meal plans with nutritional balance</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="calories">Calories Per Day</Label>
                        <Input
                          id="calories"
                          type="number"
                          value={mealPlanForm.caloriesPerDay}
                          onChange={(e) =>
                            setMealPlanForm({
                              ...mealPlanForm,
                              caloriesPerDay: Number.parseInt(e.target.value) || 2000,
                            })
                          }
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="meals">Meals Per Day</Label>
                        <Select
                          value={mealPlanForm.mealsPerDay.toString()}
                          onValueChange={(value) =>
                            setMealPlanForm({ ...mealPlanForm, mealsPerDay: Number.parseInt(value) })
                          }
                        >
                          <SelectTrigger id="meals">
                            <SelectValue placeholder="Select number of meals" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="2">2 meals</SelectItem>
                            <SelectItem value="3">3 meals</SelectItem>
                            <SelectItem value="4">4 meals</SelectItem>
                            <SelectItem value="5">5 meals</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

<div className="space-y-2">
                      <Label>Dietary Preferences</Label>
                      <div className="flex flex-wrap gap-2">
                        {[
                          "balanced",
                          "high-protein",
                          "low-carb",
                          "vegetarian",
                          "vegan",
                          "paleo",
                          "mediterranean",
                          "keto",
                        ].map((preference) => (
                          <Badge
                            key={preference}
                            variant={mealPlanForm.dietaryPreferences.includes(preference) ? "default" : "outline"}
                            className={`cursor-pointer ${mealPlanForm.dietaryPreferences.includes(preference) ? "bg-amber-500 hover:bg-amber-600" : ""}`}
                            onClick={() => toggleDietaryPreference(preference)}
                          >
                            {preference}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button
                      onClick={handleMealPlanGenerate}
                      disabled={isGenerating || mealPlanForm.dietaryPreferences.length === 0}
                      className="w-full bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white border-0"
                    >
                      {isGenerating ? (
                        <>
                          <svg
                            className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              className="opacity-25"
                              cx="12"
                              cy="12"
                              r="10"
                              stroke="currentColor"
                              strokeWidth="4"
                            ></circle>
                            <path
                              className="opacity-75"
                              fill="currentColor"
                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                            ></path>
                          </svg>
                          Generating Meal Plan...
                        </>
                      ) : (
                        <>
                          <Sparkles className="w-5 h-5 mr-2" />
                          Generate Meal Plan
                        </>
                      )}
                    </Button>
                  </CardFooter>
                </Card>

{generatedContent && activeTab === "meal-plan" && (
                  <Card>
                    <CardHeader>
                      <CardTitle>Generated Meal Plan</CardTitle>
                      <CardDescription>7-day meal plan with {mealPlanForm.mealsPerDay} meals per day</CardDescription>
                    </CardHeader>
                    <CardContent className="max-h-[600px] overflow-y-auto">
                      {generatedContent.weekly_plan && (
                        <div className="space-y-6">
                          {generatedContent.weekly_plan.map((day: any, index: number) => (
                            <div key={index} className="space-y-4">
                              <h3 className="text-lg font-semibold border-b pb-2">{day.day}</h3>
                              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                {day.meals.map((meal: any, mealIndex: number) => (
                                  <Card key={mealIndex} className="overflow-hidden">
                                    <CardHeader className="bg-zinc-100 dark:bg-zinc-800 p-4">
                                      <CardTitle className="text-base">{meal.meal_type}</CardTitle>
                                    </CardHeader>
                                    <CardContent className="p-4">
                                      <h4 className="font-medium">{meal.recipe_name}</h4>
                                      <p className="text-sm text-zinc-600 dark:text-zinc-400 mt-1">
                                        {meal.brief_description}
                                      </p>
                                      <div className="flex items-center gap-4 mt-2 text-sm">
                                        <div className="flex items-center">
                                          <span className="font-medium">{meal.calories}</span>
                                          <span className="text-zinc-500 ml-1">cal</span>
                                        </div>
                                        <div className="flex items-center gap-1">
                                          <span className="font-medium">{meal.macros.protein_grams}g</span>
                                          <span className="text-zinc-500">protein</span>
                                        </div>
                                        <div className="flex items-center gap-1">
                                          <span className="font-medium">{meal.macros.carbs_grams}g</span>
                                          <span className="text-zinc-500">carbs</span>
                                        </div>
                                      </div>
                                    </CardContent>
                                  </Card>
                                ))}
                              </div>
                            </div>
                          ))}

<div className="space-y-4 mt-8">
                            <h3 className="text-lg font-semibold">Shopping List</h3>
                            {generatedContent.shopping_list.map((category: any, index: number) => (
                              <div key={index}>
                                <h4 className="font-medium text-amber-600 dark:text-amber-400">{category.category}</h4>
                                <ul className="mt-2 grid grid-cols-1 md:grid-cols-2 gap-2">
                                  {category.items.map((item: string, itemIndex: number) => (
                                    <li key={itemIndex} className="flex items-center gap-2">
                                      <div className="w-2 h-2 rounded-full bg-amber-500" />
                                      <span>{item}</span>
                                    </li>
                                  ))}
                                </ul>
                              </div>
                            ))}
                          </div>

<div className="space-y-2 mt-8">
                            <h3 className="text-lg font-semibold">Meal Prep Tips</h3>
                            <ul className="space-y-2">
                              {generatedContent.meal_prep_tips.map((tip: string, index: number) => (
                                <li key={index} className="flex items-start gap-2">
                                  <div className="w-5 h-5 rounded-full bg-amber-500 flex items-center justify-center flex-shrink-0 mt-0.5">
                                    <span className="text-white text-xs">{index + 1}</span>
                                  </div>
                                  <span>{tip}</span>
                                </li>
                              ))}
                            </ul>
                          </div>
                        </div>
                      )}
                    </CardContent>
                    <CardFooter className="flex justify-between">
                      <Button variant="outline">Edit Plan</Button>
                      <Button>Save Plan</Button>
                    </CardFooter>
                  </Card>
                )}
              </TabsContent>

<TabsContent value="cultural-stories" className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Globe className="w-5 h-5 mr-2 text-amber-500" />
                      Cultural Culinary Stories
                    </CardTitle>
                    <CardDescription>Generate rich cultural context and history for dishes</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="dish-name">Dish Name</Label>
                        <Input
                          id="dish-name"
                          placeholder="e.g., Paella, Sushi, Tagine"
                          value={storyForm.dishName}
                          onChange={(e) => setStoryForm({ ...storyForm, dishName: e.target.value })}
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="culture">Cultural Origin</Label>
                        <Select
                          value={storyForm.culture}
                          onValueChange={(value) => setStoryForm({ ...storyForm, culture: value })}
                        >
                          <SelectTrigger id="culture">
                            <SelectValue placeholder="Select culture" />
                          </SelectTrigger>
                          <SelectContent>
                            {[
                              "Spanish",
                              "Japanese",
                              "Moroccan",
                              "Italian",
                              "Indian",
                              "Mexican",
                              "Thai",
                              "French",
                              "Chinese",
                              "Lebanese",
                              "Greek",
                              "Korean",
                              "Vietnamese",
                              "Brazilian",
                              "Ethiopian",
                            ].map((culture) => (
                              <SelectItem key={culture} value={culture}>
                                {culture}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button
                      onClick={handleStoryGenerate}
                      disabled={isGenerating || !storyForm.dishName || !storyForm.culture}
                      className="w-full bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white border-0"
                    >
                      {isGenerating ? (
                        <>
                          <svg
                            className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              className="opacity-25"
                              cx="12"
                              cy="12"
                              r="10"
                              stroke="currentColor"
                              strokeWidth="4"
                            ></circle>
                            <path
                              className="opacity-75"
                              fill="currentColor"
                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                            ></path>
                          </svg>
                          Generating Story...
                        </>
                      ) : (
                        <>
                          <BookOpen className="w-5 h-5 mr-2" />
                          Generate Cultural Story
                        </>
                      )}
                    </Button>
                  </CardFooter>
                </Card>

{generatedContent && activeTab === "cultural-stories" && generatedContent.story && (
                  <Card>
                    <CardHeader>
                      <CardTitle>Cultural Story: {storyForm.dishName}</CardTitle>
                      <CardDescription>The history and cultural significance of this dish</CardDescription>
                    </CardHeader>
                    <CardContent className="prose dark:prose-invert max-w-none">
                      <div className="max-h-[600px] overflow-y-auto">
                        {generatedContent.story.split("\n\n").map((paragraph: string, index: number) => (
                          <p key={index}>{paragraph}</p>
                        ))}
                      </div>
                    </CardContent>
                    <CardFooter className="flex justify-between">
                      <Button variant="outline">Edit Story</Button>
                      <Button>Publish Story</Button>
                    </CardFooter>
                  </Card>
                )}
              </TabsContent>

<TabsContent value="food-poetry" className="space-y-6">
                <FoodPoetryGenerator />
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/admin/admin-header.tsx" isMerged="true" isEdit="true"
"use client"

import { Badge } from "@/components/ui/badge"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Bell, ChefHat, Menu, Search, Settings, User, LogOut } from "lucide-react"

export default function AdminHeader() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

return (
    <header className="bg-white dark:bg-zinc-800 border-b border-zinc-200 dark:border-zinc-700 sticky top-0 z-50">
      <div className="container flex h-16 items-center justify-between">
        <div className="flex items-center gap-2 md:gap-4">
          <Button
            variant="ghost"
            size="icon"
            className="md:hidden"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            <Menu className="h-5 w-5" />
            <span className="sr-only">Toggle menu</span>
          </Button>

<Link href="/" className="flex items-center gap-2">
            <ChefHat className="h-6 w-6 text-amber-500" />
            <span className="font-bold text-lg hidden md:inline-block">Sapid Food</span>
            <Badge variant="outline" className="ml-2 text-xs">
              Admin
            </Badge>
          </Link>

<nav className="hidden md:flex items-center gap-6 ml-6">
            {["Dashboard", "Content", "Analytics", "Settings"].map((item) => (
              <Link
                key={item}
                href="#"
                className="text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:text-amber-500 dark:hover:text-amber-400 transition-colors"
              >
                {item}
              </Link>
            ))}
          </nav>
        </div>

<Button variant="ghost" size="icon" className="relative">
            <Bell className="h-5 w-5" />
            <span className="absolute top-1 right-1 w-2 h-2 rounded-full bg-amber-500" />
            <span className="sr-only">Notifications</span>
          </Button>

<DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                <Avatar className="h-8 w-8">
                  <AvatarImage src="/placeholder.svg" alt="Admin" />
                  <AvatarFallback className="bg-amber-100 text-amber-800">AD</AvatarFallback>
                </Avatar>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-56" align="end" forceMount>
              <DropdownMenuLabel className="font-normal">
                <div className="flex flex-col space-y-1">
                  <p className="text-sm font-medium leading-none">Admin</p>
                  <p className="text-xs leading-none text-zinc-500">admin@sapid.food</p>
                </div>
              </DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <User className="mr-2 h-4 w-4" />
                <span>Profile</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Settings className="mr-2 h-4 w-4" />
                <span>Settings</span>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <LogOut className="mr-2 h-4 w-4" />
                <span>Log out</span>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

{isMobileMenuOpen && (
        <div className="md:hidden border-t border-zinc-200 dark:border-zinc-700">
          <div className="container py-4 space-y-4">
            <div className="relative">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-zinc-500" />
              <input
                type="search"
                placeholder="Search..."
                className="rounded-md border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 pl-8 pr-3 py-2 text-sm w-full focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400"
              />
            </div>

<nav className="space-y-2">
              {["Dashboard", "Content", "Analytics", "Settings"].map((item) => (
                <Link
                  key={item}
                  href="#"
                  className="block px-3 py-2 rounded-md text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 hover:text-amber-500 dark:hover:text-amber-400 transition-colors"
                >
                  {item}
                </Link>
              ))}
            </nav>
          </div>
        </div>
      )}
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/admin/recipe-preview.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Clock, Utensils, User, Heart, Share2, Save } from "lucide-react"
import { useState } from "react"
import ImageGenerator from "@/components/admin/image-generator"

interface RecipePreviewProps {
  recipe: any
}

export default function RecipePreview({ recipe }: RecipePreviewProps) {
  const [recipeImage, setRecipeImage] = useState<string | null>(null)

const handleSetRecipeImage = (imageUrl: string) => {
    setRecipeImage(imageUrl)
  }

if (!recipe || recipe.error) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="text-red-500">Error Generating Recipe</CardTitle>
          <CardDescription>There was an error generating the recipe. Please try again.</CardDescription>
        </CardHeader>
        <CardContent>
          <p>{recipe?.error || "Unknown error"}</p>
        </CardContent>
      </Card>
    )
  }

return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle className="text-2xl">{recipe.title}</CardTitle>
            <CardDescription className="mt-2">{recipe.description}</CardDescription>
          </div>
          <Badge
            className={`
            ${recipe.difficulty === "easy" ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300" : ""}
            ${recipe.difficulty === "medium" ? "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300" : ""}
            ${recipe.difficulty === "hard" ? "bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300" : ""}
          `}
          >
            {recipe.difficulty.charAt(0).toUpperCase() + recipe.difficulty.slice(1)}
          </Badge>
        </div>

<div className="flex flex-wrap gap-2 mt-4">
          {recipe.tags &&
            recipe.tags.map((tag: string, index: number) => (
              <Badge key={index} variant="outline">
                {tag}
              </Badge>
            ))}
        </div>

<div className="flex flex-wrap gap-6 mt-4 text-sm text-zinc-600 dark:text-zinc-400">
          <div className="flex items-center gap-1">
            <Clock className="w-4 h-4" />
            <span>Prep: {recipe.prep_time_minutes} min</span>
          </div>
          <div className="flex items-center gap-1">
            <Utensils className="w-4 h-4" />
            <span>Cook: {recipe.cook_time_minutes} min</span>
          </div>
          <div className="flex items-center gap-1">
            <User className="w-4 h-4" />
            <span>Serves: {recipe.servings}</span>
          </div>
        </div>
      </CardHeader>

<CardContent className="space-y-6">
        {recipeImage && (
          <div className="mb-6">
            <img src={recipeImage || "/placeholder.svg"} alt={recipe.title} className="w-full rounded-lg shadow-lg" />
          </div>
        )}

<div>
          <h3 className="text-lg font-semibold mb-3">Ingredients</h3>
          <ul className="space-y-2">
            {recipe.ingredients &&
              recipe.ingredients.map((ingredient: any, index: number) => (
                <li key={index} className="flex items-start gap-2">
                  <div className="w-2 h-2 rounded-full bg-amber-500 mt-2" />
                  <span>
                    {ingredient.quantity} {ingredient.unit} {ingredient.name}
                  </span>
                </li>
              ))}
          </ul>
        </div>

<div>
          <h3 className="text-lg font-semibold mb-3">Instructions</h3>
          <ol className="space-y-4">
            {recipe.instructions &&
              recipe.instructions.map((instruction: string, index: number) => (
                <li key={index} className="flex items-start gap-3">
                  <div className="flex-shrink-0 w-6 h-6 rounded-full bg-amber-500 flex items-center justify-center text-white text-sm">
                    {index + 1}
                  </div>
                  <p>{instruction}</p>
                </li>
              ))}
          </ol>
        </div>

{recipe.nutritional_info && (
          <div>
            <h3 className="text-lg font-semibold mb-3">Nutritional Information</h3>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {Object.entries(recipe.nutritional_info).map(([key, value]: [string, any]) => (
                <div key={key} className="bg-zinc-50 dark:bg-zinc-800 p-3 rounded-lg">
                  <p className="text-sm text-zinc-500 dark:text-zinc-400">
                    {key
                      .split("_")
                      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                      .join(" ")}
                  </p>
                  <p className="text-lg font-semibold">
                    {value} {key.includes("calories") ? "kcal" : "g"}
                  </p>
                </div>
              ))}
            </div>
          </div>
        )}

{recipe.cultural_background && (
          <div>
            <h3 className="text-lg font-semibold mb-3">Cultural Background</h3>
            <p className="text-zinc-700 dark:text-zinc-300">{recipe.cultural_background}</p>
          </div>
        )}
      </CardContent>

<CardFooter className="flex justify-between">
        <div className="flex gap-2">
          <Button variant="outline" size="sm">
            <Heart className="w-4 h-4 mr-2" />
            Save
          </Button>
          <Button variant="outline" size="sm">
            <Share2 className="w-4 h-4 mr-2" />
            Share
          </Button>
        </div>

<Button className="bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white border-0">
          <Save className="w-4 h-4 mr-2" />
          Publish Recipe
        </Button>
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/admin/ai-model-selector.tsx" isMerged="true" isEdit="true"
"use client"

import { useState } from "react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

export default function AIModelSelector() {
  const [model, setModel] = useState("gpt-4")
  const [temperature, setTemperature] = useState(0.7)
  const [useGeneticAlgorithm, setUseGeneticAlgorithm] = useState(false)

return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="ai-model">AI Model</Label>
        <Select value={model} onValueChange={setModel}>
          <SelectTrigger id="ai-model">
            <SelectValue placeholder="Select model" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="gpt-4">GPT-4 (Standard)</SelectItem>
            <SelectItem value="gpt-4-turbo">GPT-4 Turbo</SelectItem>
            <SelectItem value="chef-gpt">ChefGPT (Fine-tuned)</SelectItem>
            <SelectItem value="genetic-algorithm">Genetic Recipe Optimizer</SelectItem>
          </SelectContent>
        </Select>
      </div>

<div className="space-y-2">
        <div className="flex justify-between">
          <Label htmlFor="temperature">Creativity (Temperature)</Label>
          <span className="text-sm text-zinc-500">{temperature.toFixed(1)}</span>
        </div>
        <Slider
          id="temperature"
          min={0}
          max={1}
          step={0.1}
          value={[temperature]}
          onValueChange={(value) => setTemperature(value[0])}
        />
        <div className="flex justify-between text-xs text-zinc-500">
          <span>Conservative</span>
          <span>Creative</span>
        </div>
      </div>

<div className="flex items-center justify-between">
        <Label htmlFor="genetic-algorithm" className="cursor-pointer">
          Enable Genetic Algorithm
        </Label>
        <Switch id="genetic-algorithm" checked={useGeneticAlgorithm} onCheckedChange={setUseGeneticAlgorithm} />
      </div>

{useGeneticAlgorithm && (
        <div className="rounded-md bg-amber-50 dark:bg-amber-950/30 p-3 text-sm text-amber-800 dark:text-amber-300 border border-amber-200 dark:border-amber-900">
          Genetic Algorithm will optimize recipes based on user preferences and engagement metrics.
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="lib/content-generator.ts" isMerged="true" isEdit="true"
"use server"

import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"

interface RecipeParams {
  cuisine: string
  dietaryRestrictions?: string[]
  difficultyLevel?: string
  availableIngredients?: string[]
}

interface MealPlanParams {
  dietaryPreferences: string[]
  caloriesPerDay: number
  mealsPerDay: number
}

interface CulturalStoryParams {
  dishName: string
  culture: string
}

export async function generateRecipe(params: RecipeParams) {
  const { cuisine, dietaryRestrictions = [], difficultyLevel = "medium", availableIngredients = [] } = params

try {
    const prompt = `Generate a detailed ${cuisine} recipe that is ${difficultyLevel} difficulty.
    
    Dietary restrictions: ${dietaryRestrictions.length > 0 ? dietaryRestrictions.join(", ") : "None"}
    Available ingredients: ${availableIngredients.length > 0 ? availableIngredients.join(", ") : "Use common ingredients"}
    
    Format the response as a JSON object with the following structure:
    {
      "title": "Recipe Title",
      "description": "Brief description of the dish",
      "prep_time_minutes": 30,
      "cook_time_minutes": 45,
      "servings": 4,
      "difficulty": "${difficultyLevel}",
      "ingredients": [
        {
          "name": "Ingredient name",
          "quantity": "Amount",
          "unit": "Unit of measurement"
        }
      ],
      "instructions": [
        "Step 1 instruction",
        "Step 2 instruction"
      ],
      "nutritional_info": {
        "calories": 350,
        "protein_grams": 20,
        "carbs_grams": 30,
        "fat_grams": 15
      },
      "tags": ["tag1", "tag2"],
      "cultural_background": "Brief cultural context of the dish"
    }`

const { text } = await generateText({
      model: openai("gpt-4o"),
      prompt,
      system: "You are a professional chef with expertise in global cuisines.",
    })

return JSON.parse(text)
  } catch (error) {
    console.error("Error generating recipe:", error)
    return { error: "Failed to generate recipe" }
  }
}

export async function generateMealPlan(params: MealPlanParams) {
  const { dietaryPreferences, caloriesPerDay, mealsPerDay } = params

try {
    const prompt = `Generate a 7-day meal plan with ${mealsPerDay} meals per day.
    
    Dietary preferences: ${dietaryPreferences.join(", ")}
    Target calories: ${caloriesPerDay} calories per day
    
    Format the response as a JSON object with the following structure:
    {
      "weekly_plan": [
        {
          "day": "Monday",
          "meals": [
            {
              "meal_type": "Breakfast",
              "recipe_name": "Recipe name",
              "brief_description": "Brief description",
              "calories": 500,
              "macros": {
                "protein_grams": 20,
                "carbs_grams": 30,
                "fat_grams": 15
              }
            }
          ]
        }
      ],
      "shopping_list": [
        {
          "category": "Produce",
          "items": ["Item 1", "Item 2"]
        }
      ],
      "meal_prep_tips": ["Tip 1", "Tip 2"]
    }`

const { text } = await generateText({
      model: openai("gpt-4o"),
      prompt,
      system: "You are a nutritionist and meal planning expert.",
    })

return JSON.parse(text)
  } catch (error) {
    console.error("Error generating meal plan:", error)
    return { error: "Failed to generate meal plan" }
  }
}

export async function generateCulturalStory(params: CulturalStoryParams) {
  const { dishName, culture } = params

try {
    const prompt = `Tell the cultural story and history behind ${dishName} from ${culture} cuisine.
    Include:
    - Origins of the dish
    - Historical significance
    - How it evolved over time
    - Traditional preparation methods
    - Cultural context and importance
    - Regional variations if applicable
    - Modern interpretations
    
    Make the narrative engaging and informative.`

const { text } = await generateText({
      model: openai("gpt-4o"),
      prompt,
      system: "You are a culinary historian with expertise in global food cultures.",
    })

return text
  } catch (error) {
    console.error("Error generating cultural story:", error)
    return { error: "Failed to generate cultural story" }
  }
}

[V0_FILE]typescriptreact:file="app/api/recipe/route.ts" isMerged="true" isEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { cuisine, dietaryRestrictions, difficultyLevel, availableIngredients } = body

if (!cuisine) {
      return NextResponse.json({ error: "Cuisine is required" }, { status: 400 })
    }

const prompt = `Generate a detailed ${cuisine} recipe that is ${difficultyLevel || "medium"} difficulty.
    
    Dietary restrictions: ${dietaryRestrictions?.length > 0 ? dietaryRestrictions.join(", ") : "None"}
    Available ingredients: ${availableIngredients?.length > 0 ? availableIngredients.join(", ") : "Use common ingredients"}
    
    Format the response as a JSON object with the following structure:
    {
      "title": "Recipe Title",
      "description": "Brief description of the dish",
      "prep_time_minutes": 30,
      "cook_time_minutes": 45,
      "servings": 4,
      "difficulty": "${difficultyLevel || "medium"}",
      "ingredients": [
        {
          "name": "Ingredient name",
          "quantity": "Amount",
          "unit": "Unit of measurement"
        }
      ],
      "instructions": [
        "Step 1 instruction",
        "Step 2 instruction"
      ],
      "nutritional_info": {
        "calories": 350,
        "protein_grams": 20,
        "carbs_grams": 30,
        "fat_grams": 15
      },
      "tags": ["tag1", "tag2"],
      "cultural_background": "Brief cultural context of the dish"
    }`

const { text } = await generateText({
      model: openai("gpt-4o"),
      prompt,
      system: "You are a professional chef with expertise in global cuisines.",
    })

const recipe = JSON.parse(text)

return NextResponse.json(recipe)
  } catch (error) {
    console.error("Error generating recipe:", error)
    return NextResponse.json({ error: "Failed to generate recipe" }, { status: 500 })
  }
}

[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }

[V0_FILE]typescriptreact:file="components/recipe-generator.tsx" isMerged="true" isEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { ChefHat, Sparkles } from "lucide-react"
import RecipePreview from "@/components/admin/recipe-preview"

export default function RecipeGenerator() {
  const [isGenerating, setIsGenerating] = useState(false)
  const [generatedRecipe, setGeneratedRecipe] = useState<any>(null)

const [recipeForm, setRecipeForm] = useState({
    cuisine: "",
    dietaryRestrictions: [] as string[],
    difficultyLevel: "medium",
    availableIngredients: "",
  })

const handleGenerate = async () => {
    setIsGenerating(true)

try {
      const response = await fetch("/api/recipe", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          cuisine: recipeForm.cuisine,
          dietaryRestrictions: recipeForm.dietaryRestrictions,
          difficultyLevel: recipeForm.difficultyLevel,
          availableIngredients: recipeForm.availableIngredients
            .split(",")
            .map((i) => i.trim())
            .filter(Boolean),
        }),
      })

if (!response.ok) {
        throw new Error("Failed to generate recipe")
      }

const recipe = await response.json()
      setGeneratedRecipe(recipe)
    } catch (error) {
      console.error("Error generating recipe:", error)
    } finally {
      setIsGenerating(false)
    }
  }

const toggleDietaryRestriction = (restriction: string) => {
    setRecipeForm((prev) => {
      if (prev.dietaryRestrictions.includes(restriction)) {
        return {
          ...prev,
          dietaryRestrictions: prev.dietaryRestrictions.filter((r) => r !== restriction),
        }
      } else {
        return {
          ...prev,
          dietaryRestrictions: [...prev.dietaryRestrictions, restriction],
        }
      }
    })
  }

return (
    <div className="space-y-8">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <ChefHat className="w-5 h-5 mr-2 text-amber-500" />
            AI Recipe Generator
          </CardTitle>
          <CardDescription>Create unique recipes with our Quantum Chef AI Engine</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="cuisine">Cuisine</Label>
              <Select
                value={recipeForm.cuisine}
                onValueChange={(value) => setRecipeForm({ ...recipeForm, cuisine: value })}
              >
                <SelectTrigger id="cuisine">
                  <SelectValue placeholder="Select cuisine" />
                </SelectTrigger>
                <SelectContent>
                  {[
                    "Italian",
                    "Japanese",
                    "Mexican",
                    "Indian",
                    "Thai",
                    "French",
                    "Chinese",
                    "Mediterranean",
                    "Middle Eastern",
                    "American",
                    "Korean",
                    "Spanish",
                    "Vietnamese",
                    "Moroccan",
                    "Brazilian",
                  ].map((cuisine) => (
                    <SelectItem key={cuisine} value={cuisine}>
                      {cuisine}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="difficulty">Difficulty Level</Label>
              <Select
                value={recipeForm.difficultyLevel}
                onValueChange={(value) => setRecipeForm({ ...recipeForm, difficultyLevel: value })}
              >
                <SelectTrigger id="difficulty">
                  <SelectValue placeholder="Select difficulty" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="easy">Easy</SelectItem>
                  <SelectItem value="medium">Medium</SelectItem>
                  <SelectItem value="hard">Hard</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="space-y-2">
            <Label>Dietary Restrictions</Label>
            <div className="flex flex-wrap gap-2">
              {["vegetarian", "vegan", "gluten-free", "dairy-free", "keto", "low-carb", "paleo", "nut-free"].map(
                (restriction) => (
                  <Badge
                    key={restriction}
                    variant={recipeForm.dietaryRestrictions.includes(restriction) ? "default" : "outline"}
                    className={`cursor-pointer ${recipeForm.dietaryRestrictions.includes(restriction) ? "bg-amber-500 hover:bg-amber-600" : ""}`}
                    onClick={() => toggleDietaryRestriction(restriction)}
                  >
                    {restriction}
                  </Badge>
                ),
              )}
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="ingredients">Available Ingredients (comma separated)</Label>
            <Textarea
              id="ingredients"
              placeholder="e.g., chicken, rice, tomatoes, olive oil"
              value={recipeForm.availableIngredients}
              onChange={(e) => setRecipeForm({ ...recipeForm, availableIngredients: e.target.value })}
            />
          </div>
        </CardContent>
        <CardFooter>
          <Button
            onClick={handleGenerate}
            disabled={isGenerating || !recipeForm.cuisine}
            className="w-full bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white border-0"
          >
            {isGenerating ? (
              <>
                <svg
                  className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                >
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  ></path>
                </svg>
                Generating Recipe...
              </>
            ) : (
              <>
                <Sparkles className="w-5 h-5 mr-2" />
                Generate Recipe
              </>
            )}
          </Button>
        </CardFooter>
      </Card>

{generatedRecipe && <RecipePreview recipe={generatedRecipe} />}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/generate/page.tsx" isMerged="true" isEdit="true"
import RecipeGenerator from "@/components/recipe-generator"

export default function GeneratePage() {
  return (
    <div className="container py-12">
      <div className="max-w-3xl mx-auto">
        <h1 className="text-3xl font-bold mb-8">Generate AI Recipes</h1>
        <RecipeGenerator />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/admin/image-generator.tsx" isMerged="true" isEdit="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Sparkles, ImageIcon } from "lucide-react"

export default function ImageGenerator() {
  const [prompt, setPrompt] = useState("")
  const [generatedImage, setGeneratedImage] = useState<string | null>(null)
  const [isGenerating, setIsGenerating] = useState(false)

const handleGenerate = async () => {
    setIsGenerating(true)
    try {
      const response = await fetch("/api/generate-image", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ prompt }),
      })

if (!response.ok) {
        throw new Error("Failed to generate image")
      }

const data = await response.json()
      setGeneratedImage(data.image)
    } catch (error) {
      console.error("Error generating image:", error)
    } finally {
      setIsGenerating(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center">
          <ImageIcon className="w-5 h-5 mr-2 text-amber-500" />
          AI Image Generator
        </CardTitle>
        <CardDescription>Create custom images for recipes and stories</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="image-prompt">Image Prompt</Label>
          <Input
            id="image-prompt"
            placeholder="Describe the image you want to generate"
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
          />
        </div>
        {generatedImage && (
          <div className="mt-4">
            <img
              src={generatedImage || "/placeholder.svg"}
              alt="Generated image"
              className="w-full rounded-lg shadow-lg"
            />
          </div>
        )}
      </CardContent>
      <CardFooter>
        <Button
          onClick={handleGenerate}
          disabled={isGenerating || !prompt}
          className="w-full bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white border-0"
        >
          {isGenerating ? (
            <>
              <svg
                className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
              >
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path
                  className="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                ></path>
              </svg>
              Generating Image...
            </>
          ) : (
            <>
              <Sparkles className="w-5 h-5 mr-2" />
              Generate Image
            </>
          )}
        </Button>
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/api/generate-image/route.ts" isMerged="true" isEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { experimental_generateImage as generateImage } from "ai"
import { fireworks } from "@ai-sdk/fireworks"

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { prompt } = body

if (!prompt) {
      return NextResponse.json({ error: "Prompt is required" }, { status: 400 })
    }

const { image } = await generateImage({
      model: fireworks.image("accounts/fireworks/models/SSD-1B"),
      prompt: prompt,
    })

return NextResponse.json({ image })
  } catch (error) {
    console.error("Error generating image:", error)
    return NextResponse.json({ error: "Failed to generate image" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/chat/route.ts" isEdit="true"
import { openai } from "@ai-sdk/openai"
import { streamText } from "ai"
import { z } from "zod"
import type { NextRequest } from "next/server"

// Allow streaming responses up to 30 seconds
export const maxDuration = 30

export async function POST(req: NextRequest) {
  const { messages } = await req.json()

return result.toDataStreamResponse()
}

[V0_FILE]typescriptreact:file="components/chat/chat-interface.tsx" isEdit="true"
"use client"

import { useRef, useEffect } from "react"
import { useChat } from "ai/react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"

export function ChatInterface() {
  const chatContainerRef = useRef<HTMLDivElement>(null)

const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: "/api/chat",
    onResponse: (response) => {
      if (response.status === 401) {
        console.error("Unauthorized access to chat API")
      }
    },
  })

useEffect(() => {
    if (chatContainerRef.current) {
      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight
    }
  }, [messages])

const renderToolInvocation = (part: any) => {
    const callId = part.toolInvocation.toolCallId

switch (part.toolInvocation.toolName) {
      case "getWeatherInformation":
        switch (part.toolInvocation.state) {
          case "call":
            return (
              <div key={callId} className="text-sm text-zinc-500">
                Getting weather information for {part.toolInvocation.args.city}...
              </div>
            )
          case "result":
            return (
              <div key={callId}>
                Weather in {part.toolInvocation.args.city}: {part.toolInvocation.result}
              </div>
            )
        }
        break

case "getRecipeRecommendation":
        switch (part.toolInvocation.state) {
          case "call":
            return (
              <div key={callId} className="text-sm text-zinc-500">
                Getting recipe recommendation...
              </div>
            )
          case "result":
            return <div key={callId}>Recipe Recommendation: {part.toolInvocation.result}</div>
        }
        break

case "getNutritionalInfo":
        switch (part.toolInvocation.state) {
          case "call":
            return (
              <div key={callId} className="text-sm text-zinc-500">
                Getting nutritional information for {part.toolInvocation.args.food}...
              </div>
            )
          case "result":
            return <div key={callId}>Nutritional Information: {part.toolInvocation.result}</div>
        }
        break

case "getSeasonalIngredients":
        switch (part.toolInvocation.state) {
          case "call":
            return (
              <div key={callId} className="text-sm text-zinc-500">
                Getting seasonal ingredients...
              </div>
            )
          case "result":
            return <div key={callId}>Seasonal Ingredients: {part.toolInvocation.result}</div>
        }
        break

case "convertMeasurement":
        switch (part.toolInvocation.state) {
          case "call":
            return (
              <div key={callId} className="text-sm text-zinc-500">
                Converting measurement...
              </div>
            )
          case "result":
            return <div key={callId}>Conversion Result: {part.toolInvocation.result}</div>
        }
        break
    }
  }

return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle>Sapid Food AI Assistant</CardTitle>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-[400px] pr-4" ref={chatContainerRef}>
          {messages.map((message, i) => (
            <div key={i} className={`flex ${message.role === "user" ? "justify-end" : "justify-start"} mb-4`}>
              <div className={`flex items-end ${message.role === "user" ? "flex-row-reverse" : "flex-row"}`}>
                <Avatar className="w-8 h-8">
                  <AvatarFallback>{message.role === "user" ? "U" : "AI"}</AvatarFallback>
                </Avatar>
                <div
                  className={`mx-2 p-3 rounded-lg ${message.role === "user" ? "bg-blue-500 text-white" : "bg-gray-200 dark:bg-gray-700"}`}
                >
                  {message.parts.map((part: any, index: number) => (
                    <div key={index}>{part.type === "text" ? part.text : renderToolInvocation(part)}</div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </ScrollArea>
      </CardContent>
      <CardFooter>
        <form onSubmit={handleSubmit} className="flex w-full space-x-2">
          <Input
            value={input}
            onChange={handleInputChange}
            placeholder="Ask about recipes, nutrition, or cooking tips..."
            className="flex-grow"
          />
          <Button type="submit">Send</Button>
        </form>
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/chat/page.tsx" isMerged="true" isEdit="true"
import { ChatInterface } from "@/components/chat/chat-interface"

export default function ChatPage() {
  return (
    <div className="container py-12">
      <h1 className="text-3xl font-bold mb-8 text-center">Chat with Sapid Food AI</h1>
      <ChatInterface />
    </div>
  )
}

[V0_FILE]typescript:file="app/api/generate-poem/route.ts" isMerged="true" isEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { openai } from "@ai-sdk/openai"
import { streamText } from "ai"

export async function POST(request: NextRequest) {
  const { topic } = await request.json()

const stream = streamText({
    model: openai("gpt-4-turbo"),
    prompt: `Write a short, creative poem about ${topic} in the context of food and cooking. The poem should be no longer than 4 lines.`,
  })

return new NextResponse(stream.toReadableStream())
}

[V0_FILE]typescriptreact:file="components/admin/food-poetry-generator.tsx" isMerged="true" isEdit="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Sparkles } from "lucide-react"

export default function FoodPoetryGenerator() {
  const [topic, setTopic] = useState("")
  const [poem, setPoem] = useState("")
  const [isGenerating, setIsGenerating] = useState(false)

const generatePoem = async () => {
    setIsGenerating(true)
    setPoem("")

try {
      const response = await fetch("/api/generate-poem", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ topic }),
      })

if (!response.ok) {
        throw new Error("Failed to generate poem")
      }

const reader = response.body?.getReader()
      if (!reader) {
        throw new Error("Failed to read response")
      }

while (true) {
        const { done, value } = await reader.read()
        if (done) break
        const text = new TextDecoder().decode(value)
        setPoem((prev) => prev + text)
      }
    } catch (error) {
      console.error("Error generating poem:", error)
      setPoem("Error generating poem. Please try again.")
    } finally {
      setIsGenerating(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center">
          <Sparkles className="w-5 h-5 mr-2 text-amber-500" />
          Food Poetry Generator
        </CardTitle>
        <CardDescription>Generate creative food-related poetry</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Input placeholder="Enter a food-related topic" value={topic} onChange={(e) => setTopic(e.target.value)} />
        </div>
        {poem && (
          <div className="mt-4 p-4 bg-zinc-100 dark:bg-zinc-800 rounded-md">
            <pre className="whitespace-pre-wrap font-serif text-lg">{poem}</pre>
          </div>
        )}
      </CardContent>
      <CardFooter>
        <Button
          onClick={generatePoem}
          disabled={isGenerating || !topic}
          className="w-full bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white border-0"
        >
          {isGenerating ? (
            <>
              <svg
                className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
              >
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path
                  className="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                ></path>
              </svg>
              Generating Poem...
            </>
          ) : (
            <>
              <Sparkles className="w-5 h-5 mr-2" />
              Generate Poem
            </>
          )}
        </Button>
      </CardFooter>
    </Card>
  )
}
</article></body></html>