[V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{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 }, }, "spin-slow": { "0%": { transform: "rotate(0deg)" }, "100%": { transform: "rotate(360deg)" }, }, "spin-slower": { "0%": { transform: "rotate(0deg)" }, "100%": { transform: "rotate(-360deg)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "spin-slow": "spin-slow 3s linear infinite", "spin-slower": "spin-slower 6s linear infinite", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isMoved="true" isMovedFrom="globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/model-comparison.tsx" "use client" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" export function ModelComparison() { return (

Model Parameters Context MMLU HumanEval Status Luuna-70B 70B 128K 89.2% 76.5% Available GPT-4o ~1.8T 128K 90.1% 78.3% Available Claude-3.5 ~1.5T 200K 88.7% 75.8% Available Llama-3 70B 128K 86.4% 74.2% Limited Mistral-Large 32B 32K 85.9% 73.1% Available

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "LuunaOS AI Platform", description: "Advanced AI platform with state-of-the-art models and tools", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/ai-playground.tsx" isFixed="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Bot, Send, Settings, Share, Download, Copy, Sparkles, RefreshCw, Trash, ImageIcon, Mic } from "lucide-react" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { ModelSelector } from "./model-selector" import { Separator } from "@/components/ui/separator" import { ScrollArea } from "@/components/ui/scroll-area" import { cn } from "@/lib/utils" interface Message { id: string role: "user" | "assistant" | "system" content: string timestamp: Date model?: string loading?: boolean } export function AIPlayground() { const [messages, setMessages] = useState([]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const [temperature, setTemperature] = useState(0.7) const [maxTokens, setMaxTokens] = useState(1024) const [streamResponse, setStreamResponse] = useState(true) const messagesEndRef = useRef(null) const inputRef = useRef(null) // Scroll to bottom of messages useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages]) // Focus input on load useEffect(() => { inputRef.current?.focus() }, []) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!input.trim() || isLoading) return // Add user message const userMessage: Message = { id: Date.now().toString(), role: "user", content: input, timestamp: new Date(), } // Add assistant message (initially loading) const assistantMessage: Message = { id: (Date.now() + 1).toString(), role: "assistant", content: "", timestamp: new Date(), model: "Luuna-70B", loading: true, } setMessages((prev) => [...prev, userMessage, assistantMessage]) setInput("") setIsLoading(true) // Simulate streaming response if (streamResponse) { const response = generateFakeResponse(input) let displayedResponse = "" const words = response.split(" ") for (let i = 0; i < words.length; i++) { await new Promise((resolve) => setTimeout(resolve, 50)) displayedResponse += (i === 0 ? "" : " ") + words[i] setMessages((prev) => prev.map((msg) => msg.id === assistantMessage.id ? { ...msg, content: displayedResponse, loading: i < words.length - 1 } : msg, ), ) } } else { // Simulate non-streaming response await new Promise((resolve) => setTimeout(resolve, 1000)) const response = generateFakeResponse(input) setMessages((prev) => prev.map((msg) => (msg.id === assistantMessage.id ? { ...msg, content: response, loading: false } : msg)), ) } setIsLoading(false) } const generateFakeResponse = (prompt: string): string => { // This is just a simple fake response generator // In a real application, this would call an actual AI model API const responses = [ `I've analyzed your query about "${prompt.substring(0, 30)}${ prompt.length > 30 ? "..." : "" }". Based on the latest research, there are several approaches to consider. First, we should examine the underlying assumptions. The data suggests that this is a complex problem requiring a multifaceted solution. Would you like me to elaborate on any specific aspect?`, `That's an interesting question about "${prompt.substring(0, 30)}${ prompt.length > 30 ? "..." : "" }". From my analysis, there are three key factors to consider: context, methodology, and application. The most current research indicates a paradigm shift in how we approach this topic. I can provide more detailed information if you'd like to explore a particular angle.`, `Regarding "${prompt.substring(0, 30)}${ prompt.length > 30 ? "..." : "" }", I've processed several relevant datasets. The patterns indicate that this is an evolving field with significant recent developments. The consensus among experts suggests a correlation between multiple variables that wasn't previously recognized. Would you like me to explain the practical implications?`, ] return responses[Math.floor(Math.random() * responses.length)] } const clearConversation = () => { setMessages([]) } const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text) // You could add a toast notification here } return (

Chat Image Audio

AI Playground

LIVE

{messages.length === 0 ? (

Start a conversation

Choose a model and start typing to interact with the AI. You can adjust model parameters in the settings panel.

) : ( messages.map((message) => (

{message.role === "assistant" && ( AI )}

{message.loading ? (

) : ( <>

{message.content}

{message.role === "assistant" && (

{message.model || "Luuna-70B"} {message.timestamp.toLocaleTimeString()}

)} )}

{message.role === "user" && ( U )}

)) )}

setInput(e.target.value)}
                          onKeyDown={(e) => {
                            if (e.key === "Enter" && !e.shiftKey) {
                              e.preventDefault()
                              handleSubmit(e)
                            }
                          }}
                        />
                        <div className="absolute bottom-2 right-2 flex space-x-1">
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 rounded-full bg-slate-700/50 text-slate-400 hover:text-slate-200"
                          >
                            <ImageIcon className="h-4 w-4" />
                          </Button>
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 rounded-full bg-slate-700/50 text-slate-400 hover:text-slate-200"
                          >
                            <Mic className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                      <Button
                        type="submit"
                        className="bg-cyan-600 hover:bg-cyan-700 h-10 w-10 rounded-full p-0 flex items-center justify-center"
                        disabled={isLoading || !input.trim()}
                      >
                        {isLoading ? <RefreshCw className="h-5 w-5 animate-spin" /> : <Send className="h-5 w-5" />}
                      </Button>
                    </div>
                  </form>
                </CardFooter>
              </Card>
            </div>

<div className="w-64 ml-4">
              <Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
                <CardHeader className="pb-2">
                  <CardTitle className="text-slate-100 flex items-center text-base">
                    <Settings className="mr-2 h-5 w-5 text-slate-400" />
                    Settings
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="model" className="text-sm text-slate-400">
                      Model
                    </Label>
                    <ModelSelector />
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="temperature" className="text-sm text-slate-400">
                        Temperature
                      </Label>
                      <span className="text-xs text-cyan-400">{temperature.toFixed(1)}</span>
                    </div>
                    <Slider
                      id="temperature"
                      min={0}
                      max={1}
                      step={0.1}
                      value={[temperature]}
                      onValueChange={(value) => setTemperature(value[0])}
                      className="[&>span]:bg-cyan-500"
                    />
                    <div className="flex justify-between text-xs text-slate-500">
                      <span>Precise</span>
                      <span>Creative</span>
                    </div>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="max-tokens" className="text-sm text-slate-400">
                        Max Tokens
                      </Label>
                      <span className="text-xs text-cyan-400">{maxTokens}</span>
                    </div>
                    <Slider
                      id="max-tokens"
                      min={256}
                      max={4096}
                      step={256}
                      value={[maxTokens]}
                      onValueChange={(value) => setMaxTokens(value[0])}
                      className="[&>span]:bg-cyan-500"
                    />
                    <div className="flex justify-between text-xs text-slate-500">
                      <span>Shorter</span>
                      <span>Longer</span>
                    </div>
                  </div>

<div className="flex items-center justify-between">
                    <Label htmlFor="stream" className="text-sm text-slate-400">
                      Stream Response
                    </Label>
                    <Switch
                      id="stream"
                      checked={streamResponse}
                      onCheckedChange={setStreamResponse}
                      className="data-[state=checked]:bg-cyan-500"
                    />
                  </div>

<div className="pt-2">
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full border-slate-700 bg-slate-800/50 hover:bg-slate-700/50 text-xs"
                    >
                      Advanced Settings
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

<TabsContent value="image" className="flex-1 flex flex-col space-y-4 mt-0">
          <Card className="flex-1 flex flex-col bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
            <CardHeader className="pb-2 border-b border-slate-700/50">
              <CardTitle className="text-slate-100 flex items-center text-base">
                <ImageIcon className="mr-2 h-5 w-5 text-purple-500" />
                Image Generation
              </CardTitle>
            </CardHeader>
            <CardContent className="flex-1 p-6 flex items-center justify-center">
              <div className="text-center">
                <ImageIcon className="h-16 w-16 text-slate-600 mx-auto mb-4" />
                <h3 className="text-lg font-medium text-slate-400">Image Generation</h3>
                <p className="text-sm text-slate-500 max-w-md mt-2 mb-4">
                  Generate images from text descriptions using Luuna Vision models.
                </p>
                <Button className="bg-purple-600 hover:bg-purple-700">
                  <Sparkles className="mr-2 h-4 w-4" />
                  Coming Soon
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="audio" className="flex-1 flex flex-col space-y-4 mt-0">
          <Card className="flex-1 flex flex-col bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
            <CardHeader className="pb-2 border-b border-slate-700/50">
              <CardTitle className="text-slate-100 flex items-center text-base">
                <Mic className="mr-2 h-5 w-5 text-blue-500" />
                Audio Processing
              </CardTitle>
            </CardHeader>
            <CardContent className="flex-1 p-6 flex items-center justify-center">
              <div className="text-center">
                <Mic className="h-16 w-16 text-slate-600 mx-auto mb-4" />
                <h3 className="text-lg font-medium text-slate-400">Audio Processing</h3>
                <p className="text-sm text-slate-500 max-w-md mt-2 mb-4">
                  Speech recognition, transcription, and audio generation using Luuna Audio models.
                </p>
                <Button className="bg-blue-600 hover:bg-blue-700">
                  <Sparkles className="mr-2 h-4 w-4" />
                  Coming Soon
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/playground/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/model-selector.tsx"
"use client"

import * as React from "react"
import { Check, ChevronsUpDown } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

const models = [
  {
    value: "luuna-70b",
    label: "Luuna-70B",
    category: "Text",
  },
  {
    value: "luuna-vision",
    label: "Luuna Vision",
    category: "Multimodal",
  },
  {
    value: "luuna-code",
    label: "Luuna Code",
    category: "Code",
  },
  {
    value: "luuna-7b",
    label: "Luuna-7B",
    category: "Text",
  },
  {
    value: "gpt-4o",
    label: "GPT-4o",
    category: "Multimodal",
  },
  {
    value: "claude-3.5",
    label: "Claude-3.5",
    category: "Text",
  },
  {
    value: "llama-3",
    label: "Llama-3",
    category: "Text",
  },
  {
    value: "mistral-large",
    label: "Mistral Large",
    category: "Text",
  },
]

export function ModelSelector() {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("luuna-70b")

return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-full justify-between border-slate-700 bg-slate-800/50 hover:bg-slate-700/50"
        >
          {value ? models.find((model) => model.value === value)?.label : "Select model..."}
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-full p-0 bg-slate-900 border-slate-700">
        <Command>
          <CommandInput placeholder="Search models..." className="h-9" />
          <CommandList>
            <CommandEmpty>No model found.</CommandEmpty>
            <CommandGroup>
              {models.map((model) => (
                <CommandItem
                  key={model.value}
                  value={model.value}
                  onSelect={(currentValue) => {
                    setValue(currentValue === value ? "" : currentValue)
                    setOpen(false)
                  }}
                >
                  <div className="flex items-center justify-between w-full">
                    <div className="flex items-center">
                      <Check className={cn("mr-2 h-4 w-4", value === model.value ? "opacity-100" : "opacity-0")} />
                      {model.label}
                    </div>
                    <span className="text-xs text-slate-500">{model.category}</span>
                  </div>
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]typescriptreact:file="app/experiments/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/experiments/model-selector.tsx"
"use client"

import * as React from "react"
import { Check, ChevronsUpDown } from "lucide-react"

const models = [
  {
    value: "lyrics-model-1",
    label: "LyricsMaster Pro",
    category: "Lyrics",
  },
  {
    value: "lyrics-model-2",
    label: "SongSmith AI",
    category: "Lyrics",
  },
  {
    value: "voice-model-1",
    label: "VocalSynth Ultra",
    category: "Voice",
  },
  {
    value: "voice-model-2",
    label: "VoiceForge AI",
    category: "Voice",
  },
  {
    value: "music-model-1",
    label: "MelodyMaker Pro",
    category: "Music",
  },
  {
    value: "music-model-2",
    label: "BeatCraft AI",
    category: "Music",
  },
  {
    value: "composition-model-1",
    label: "ComposerGenius",
    category: "Composition",
  },
  {
    value: "composition-model-2",
    label: "SongStructure AI",
    category: "Composition",
  },
  {
    value: "video-model-1",
    label: "VisualBeat Pro",
    category: "Video",
  },
  {
    value: "video-model-2",
    label: "MusicVideo AI",
    category: "Video",
  },
]

export function ModelSelector() {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("lyrics-model-1")

return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-full justify-between border-slate-700 bg-slate-800/50 hover:bg-slate-700/50"
        >
          {value ? models.find((model) => model.value === value)?.label : "Select model..."}
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-full p-0 bg-slate-900 border-slate-700">
        <Command>
          <CommandInput placeholder="Search models..." className="h-9" />
          <CommandList>
            <CommandEmpty>No model found.</CommandEmpty>
            <CommandGroup>
              {models.map((model) => (
                <CommandItem
                  key={model.value}
                  value={model.value}
                  onSelect={(currentValue) => {
                    setValue(currentValue === value ? "" : currentValue)
                    setOpen(false)
                  }}
                >
                  <div className="flex items-center justify-between w-full">
                    <div className="flex items-center">
                      <Check className={cn("mr-2 h-4 w-4", value === model.value ? "opacity-100" : "opacity-0")} />
                      {model.label}
                    </div>
                    <span className="text-xs text-slate-500">{model.category}</span>
                  </div>
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]typescriptreact:file="lib/ai-prompts.ts"
// Prompt templates for different AI generation tasks

export const SYSTEM_PROMPTS = {
  lyrics: `You are an expert songwriter and lyricist with experience across multiple genres and styles. 
Your task is to generate original song lyrics based on the user's prompt.
Follow these guidelines:
1. Create lyrics that match the requested genre, theme, and style
2. Include verse and chorus sections clearly labeled
3. Aim for originality while maintaining the requested style
4. Format the lyrics properly with line breaks and section headers
5. Keep the lyrics concise but complete - typically 2-3 verses and a chorus
6. Do not include any explanations or commentary - only output the lyrics themselves`,

voice: `You are a voice generation expert. Your task is to describe in detail how a voice would sound based on the user's specifications.
Since we cannot actually generate audio, provide a detailed description of:
1. The voice characteristics (pitch, tone, timbre, accent)
2. How the voice would pronounce specific words or phrases from the user's prompt
3. The emotional qualities and inflections of the voice
4. Suggestions for post-processing effects that would enhance the voice
Format your response as a detailed voice profile that could be used by a voice actor or voice synthesis system.`,

music: `You are a music composition expert with deep knowledge of music theory and production.
Your task is to describe in detail a musical composition based on the user's prompt.
Include:
1. Detailed description of the musical structure (intro, verse, chorus, bridge, etc.)
2. Key, tempo, and time signature recommendations
3. Instrumentation and arrangement details
4. Production techniques and effects that would enhance the composition
5. References to similar styles or artists that could inspire the production
Format your response as a detailed music production guide.`,

composition: `You are a songwriting coach and music theory expert. Your task is to provide detailed reasoning and guidance for song composition based on the user's prompt.
Provide:
1. Analysis of the thematic elements in the user's request
2. Structural recommendations with reasoning (verse-chorus structure, etc.)
3. Melodic and harmonic suggestions with theoretical justification
4. Explanation of why certain compositional choices would be effective
5. Creative alternatives and variations to consider
Your response should be educational and insightful, helping the user understand the creative and technical decisions behind effective songwriting.`,

video: `You are a music video director and visual artist. Your task is to create a detailed concept for a music video based on the user's prompt.
Include:
1. Visual style and aesthetic direction
2. Scene-by-scene storyboard description
3. Camera techniques and visual effects recommendations
4. Color palette and lighting suggestions
5. Narrative structure or visual themes that complement the music
6. Technical specifications for production
Format your response as a professional music video treatment that could be used by a production team.`,
}

export const getPromptForModel = (modelType: string, userPrompt: string, settings: any = {}) => {
  // Add settings to the prompt if available
  let enhancedPrompt = userPrompt

if (modelType === "voice" && settings) {
    enhancedPrompt += `\n\nVoice settings:
- Pitch: ${settings.pitch}% (${settings.pitch > 50 ? "higher" : "lower"} than normal)
- Gender characteristics: ${settings.gender}% (${settings.gender > 50 ? "more feminine" : "more masculine"})
- Speed: ${settings.speed}% (${settings.speed > 50 ? "faster" : "slower"} than normal)
- Clarity: ${settings.clarity}%
- Emotional intensity: ${settings.emotion}%`
  }

if (modelType === "music" && settings) {
    enhancedPrompt += `\n\nMusic settings:
- Genre: ${settings.genre}
- Tempo: ${settings.tempo} BPM
- Mood: ${settings.mood}
- Featured instruments: ${settings.instruments.join(", ")}`
  }

if (modelType === "video" && settings) {
    enhancedPrompt += `\n\nVideo settings:
- Visual style: ${settings.style}
- Duration: ${settings.duration} seconds
- Resolution: ${settings.resolution}`
  }

return enhancedPrompt
}
[V0_FILE]typescriptreact:file="app/api/admin/auth/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { cookies } from "next/headers"

// Lihtne admin parool - tootmises kasuta turvalisemaid meetodeid
const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || "admin123"

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

if (password === ADMIN_PASSWORD) {
      const cookieStore = await cookies()

// Loo lihtne sessiooni token
      const sessionToken = Buffer.from(`admin-${Date.now()}`).toString("base64")

cookieStore.set("admin-session", sessionToken, {
        httpOnly: true,
        secure: process.env.NODE_ENV === "production",
        maxAge: 60 * 60 * 24, // 24 tundi
        path: "/",
      })

return NextResponse.json({ success: true })
    } else {
      return NextResponse.json({ error: "Vale parool" }, { status: 401 })
    }
  } catch (error) {
    return NextResponse.json({ error: "Serveri viga" }, { status: 500 })
  }
}

export async function GET() {
  try {
    const cookieStore = await cookies()
    const session = cookieStore.get("admin-session")

return NextResponse.json({ authenticated: !!session })
  } catch (error) {
    return NextResponse.json({ authenticated: false })
  }
}

export async function DELETE() {
  try {
    const cookieStore = await cookies()
    cookieStore.delete("admin-session")

return NextResponse.json({ success: true })
  } catch (error) {
    return NextResponse.json({ error: "Serveri viga" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/admin/models/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { cookies } from "next/headers"

// Lihtne andmete salvestamine (tootmises kasuta andmebaasi)
let modelConfigs: any = {
  groq: {
    apiKey: process.env.GROQ_API_KEY || "",
    models: ["llama3-70b-8192", "llama3-8b-8192", "mixtral-8x7b-32768"],
  },
  openai: {
    apiKey: "",
    models: ["gpt-4o", "gpt-4o-mini", "gpt-3.5-turbo"],
  },
  anthropic: {
    apiKey: "",
    models: ["claude-3-5-sonnet-20241022", "claude-3-haiku-20240307"],
  },
  xai: {
    apiKey: process.env.XAI_API_KEY || "",
    models: ["grok-beta"],
  },
}

async function checkAuth() {
  const cookieStore = await cookies()
  const session = cookieStore.get("admin-session")
  return !!session
}

export async function GET() {
  try {
    const isAuthenticated = await checkAuth()
    if (!isAuthenticated) {
      return NextResponse.json({ error: "Pole autoriseeritud" }, { status: 401 })
    }

return NextResponse.json(modelConfigs)
  } catch (error) {
    return NextResponse.json({ error: "Serveri viga" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const isAuthenticated = await checkAuth()
    if (!isAuthenticated) {
      return NextResponse.json({ error: "Pole autoriseeritud" }, { status: 401 })
    }

const updates = await request.json()
    modelConfigs = { ...modelConfigs, ...updates }

return NextResponse.json({ success: true, configs: modelConfigs })
  } catch (error) {
    return NextResponse.json({ error: "Serveri viga" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx"
"use client"

import type React from "react"

export default function AdminLogin() {
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState("")
  const [loading, setLoading] = useState(false)
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const router = useRouter()

useEffect(() => {
    checkAuth()
  }, [])

const checkAuth = async () => {
    try {
      const response = await fetch("/api/admin/auth")
      const data = await response.json()
      if (data.authenticated) {
        setIsAuthenticated(true)
        router.push("/admin/dashboard")
      }
    } catch (error) {
      console.error("Auth check failed:", error)
    }
  }

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError("")

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

const data = await response.json()

if (data.success) {
        router.push("/admin/dashboard")
      } else {
        setError(data.error || "Sisselogimine ebaõnnestus")
      }
    } catch (error) {
      setError("Ühenduse viga")
    } finally {
      setLoading(false)
    }
  }

if (isAuthenticated) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-black to-slate-900 flex items-center justify-center">
        <div className="text-white">Suunan administraatori paneelile...</div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-black to-slate-900 flex items-center justify-center p-4">
      <Card className="w-full max-w-md bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
        <CardHeader className="text-center">
          <div className="flex justify-center mb-4">
            <Shield className="h-12 w-12 text-cyan-500" />
          </div>
          <CardTitle className="text-2xl text-white">Administraatori sisselogimine</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleLogin} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="password" className="text-slate-300">
                Parool
              </Label>
              <div className="relative">
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="bg-slate-800/50 border-slate-700 text-white pr-10"
                  placeholder="Sisesta administraatori parool"
                  required
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="absolute right-0 top-0 h-full px-3 text-slate-400 hover:text-white"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </Button>
              </div>
            </div>

{error && (
              <Alert variant="destructive" className="bg-red-900/20 border-red-800">
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

<Button type="submit" className="w-full bg-cyan-600 hover:bg-cyan-700" disabled={loading}>
              {loading ? "Sisselogimine..." : "Logi sisse"}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/ai/multi-model/route.ts"
import { groq } from "@ai-sdk/groq"
import { openai } from "@ai-sdk/openai"
import { anthropic } from "@ai-sdk/anthropic"
import { xai } from "@ai-sdk/xai"
import { streamText } from "ai"
import { SYSTEM_PROMPTS, getPromptForModel } from "@/lib/ai-prompts"

// Allow responses up to 60 seconds
export const maxDuration = 60

// Lihtne konfiguratsiooni haldus (tootmises kasuta andmebaasi)
let modelConfigs: any = {
  groq: {
    apiKey: process.env.GROQ_API_KEY || "",
    models: ["llama3-70b-8192", "llama3-8b-8192", "mixtral-8x7b-32768"],
  },
  openai: {
    apiKey: process.env.OPENAI_API_KEY || "",
    models: ["gpt-4o", "gpt-4o-mini", "gpt-3.5-turbo"],
  },
  anthropic: {
    apiKey: process.env.ANTHROPIC_API_KEY || "",
    models: ["claude-3-5-sonnet-20241022", "claude-3-haiku-20240307"],
  },
  xai: {
    apiKey: process.env.XAI_API_KEY || "",
    models: ["grok-beta"],
  },
}

function getModelProvider(modelType: string, provider?: string) {
  // Vali sobiv mudel ja pakkuja
  const selectedProvider = provider || "groq" // vaikimisi Groq
  const config = modelConfigs[selectedProvider]

if (!config || !config.apiKey) {
    // Tagasi Groq kui teine pakkuja pole saadaval
    return {
      model: groq("llama3-70b-8192"),
      provider: "groq",
    }
  }

try {
    switch (selectedProvider) {
      case "openai":
        return {
          model: openai(config.models[0] || "gpt-4o-mini", {
            apiKey: config.apiKey,
          }),
          provider: "openai",
        }
      case "anthropic":
        return {
          model: anthropic(config.models[0] || "claude-3-haiku-20240307", {
            apiKey: config.apiKey,
          }),
          provider: "anthropic",
        }
      case "xai":
        return {
          model: xai(config.models[0] || "grok-beta", {
            apiKey: config.apiKey,
          }),
          provider: "xai",
        }
      default:
        return {
          model: groq(config.models[0] || "llama3-70b-8192"),
          provider: "groq",
        }
    }
  } catch (error) {
    console.error(`Error initializing ${selectedProvider}:`, error)
    // Tagasi Groq kui teine mudel ebaõnnestub
    return {
      model: groq("llama3-70b-8192"),
      provider: "groq",
    }
  }
}

export async function POST(req: Request) {
  try {
    const { prompt, modelType, settings, provider } = await req.json()

if (!prompt || !modelType) {
      return new Response(JSON.stringify({ error: "Puuduvad nõutud parameetrid" }), {
        status: 400,
        headers: { "Content-Type": "application/json" },
      })
    }

// Hangi sobiv süsteemi prompt mudeli tüübi põhjal
    const systemPrompt = SYSTEM_PROMPTS[modelType as keyof typeof SYSTEM_PROMPTS] || SYSTEM_PROMPTS.lyrics

// Täienda kasutaja prompti seadetega
    const enhancedPrompt = getPromptForModel(modelType, prompt, settings)

// Vali mudel ja pakkuja
    const { model } = getModelProvider(modelType, provider)

const result = streamText({
      model,
      messages: [
        { role: "system", content: systemPrompt },
        { role: "user", content: enhancedPrompt },
      ],
      maxTokens: 4000,
      temperature: 0.7,
    })

return result.toDataStreamResponse()
  } catch (error) {
    console.error("Viga multi-mudeli AI marsruudis:", error)
    return new Response(JSON.stringify({ error: "Päringu töötlemine ebaõnnestus" }), {
      status: 500,
      headers: { "Content-Type": "application/json" },
    })
  }
}

// API konfiguratsiooni uuendamiseks
export async function PUT(req: Request) {
  try {
    const updates = await req.json()
    modelConfigs = { ...modelConfigs, ...updates }

return new Response(JSON.stringify({ success: true }), {
      headers: { "Content-Type": "application/json" },
    })
  } catch (error) {
    return new Response(JSON.stringify({ error: "Konfiguratsiooni uuendamine ebaõnnestus" }), {
      status: 500,
      headers: { "Content-Type": "application/json" },
    })
  }
}
[V0_FILE]typescriptreact:file="components/ai-models.tsx" isFixed="true" isQuickEdit="true"
"use client"

import React from "react"

import { Code, MessageSquare, Music, Video, ImageIcon } from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"

const models = [
  {
    id: "luuna-70b",
    name: "Luuna-70B",
    description: "Our flagship large language model with 70B parameters",
    category: "Text",
    icon: MessageSquare,
    color: "cyan",
    performance: 92,
    usage: 78,
  },
  {
    id: "luuna-vision",
    name: "Luuna Vision",
    description: "Multimodal model for image understanding and generation",
    category: "Vision",
    icon: ImageIcon,
    color: "purple",
    performance: 88,
    usage: 65,
  },
  {
    id: "luuna-code",
    name: "Luuna Code",
    description: "Specialized model for code generation and completion",
    category: "Code",
    icon: Code,
    color: "green",
    performance: 85,
    usage: 72,
  },
  {
    id: "luuna-7b",
    name: "Luuna-7B",
    description: "Lightweight model optimized for edge devices",
    category: "Text",
    icon: MessageSquare,
    color: "blue",
    performance: 82,
    usage: 58,
  },
  {
    id: "luuna-audio",
    name: "Luuna Audio",
    description: "Speech recognition and audio processing model",
    category: "Audio",
    icon: Music,
    color: "amber",
    performance: 79,
    usage: 45,
  },
  {
    id: "luuna-video",
    name: "Luuna Video",
    description: "Video understanding and generation model",
    category: "Video",
    icon: Video,
    color: "red",
    performance: 76,
    usage: 38,
  },
]

export function AIModels() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {models.map((model) => (
        <Card key={model.id} className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <Badge className={`bg-${model.color}-500/20 text-${model.color}-400 border-${model.color}-500/30`}>
                {model.category}
              </Badge>
              {React.createElement(model.icon, { className: `h-5 w-5 text-${model.color}-500` })}
            </div>
            <CardTitle className="text-slate-100 mt-2">{model.name}</CardTitle>
            <CardDescription className="text-slate-400">{model.description}</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div>
                <div className="flex items-center justify-between mb-1">
                  <div className="text-xs text-slate-500">Performance</div>
                  <div className="text-xs text-cyan-400">{model.performance}%</div>
                </div>
                <Progress value={model.performance} className="h-1.5 bg-slate-800">
                  <div
                    className={`h-full bg-gradient-to-r from-${model.color}-500 to-${model.color}-400 rounded-full`}
                    style={{ width: `${model.performance}%` }}
                  />
                </Progress>
              </div>
              <div>
                <div className="flex items-center justify-between mb-1">
                  <div className="text-xs text-slate-500">Usage</div>
                  <div className="text-xs text-purple-400">{model.usage}%</div>
                </div>
                <Progress value={model.usage} className="h-1.5 bg-slate-800">
                  <div
                    className="h-full bg-gradient-to-r from-purple-500 to-pink-500 rounded-full"
                    style={{ width: `${model.usage}%` }}
                  />
                </Progress>
              </div>
            </div>
          </CardContent>
          <CardFooter>
            <Button className="w-full bg-slate-800 hover:bg-slate-700 text-slate-100">Try Model</Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/model-card.tsx" isQuickEdit="true"
"use client"

import type { LucideIcon } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"

interface ModelCardProps {
  id: string
  name: string
  description: string
  category: string
  icon: LucideIcon
  color: string
  performance: number
  usage: number
  isSelected?: boolean
  onSelect?: () => void
}

export function ModelCard({
  id,
  name,
  description,
  category,
  icon: Icon,
  color,
  performance,
  usage,
  isSelected,
  onSelect,
}: ModelCardProps) {
  const getGradient = () => {
    switch (color) {
      case "cyan":
        return "from-cyan-500 to-blue-500"
      case "green":
        return "from-green-500 to-emerald-500"
      case "blue":
        return "from-blue-500 to-indigo-500"
      case "purple":
        return "from-purple-500 to-pink-500"
      default:
        return "from-cyan-500 to-blue-500"
    }
  }

const getBorderColor = () => {
    switch (color) {
      case "cyan":
        return "border-cyan-500/50"
      case "green":
        return "border-green-500/50"
      case "blue":
        return "border-blue-500/50"
      case "purple":
        return "border-purple-500/50"
      default:
        return "border-cyan-500/50"
    }
  }

const getIconColor = () => {
    switch (color) {
      case "cyan":
        return "text-cyan-500"
      case "green":
        return "text-green-500"
      case "blue":
        return "text-blue-500"
      case "purple":
        return "text-purple-500"
      default:
        return "text-cyan-500"
    }
  }

const getBadgeColor = () => {
    switch (color) {
      case "cyan":
        return "bg-cyan-500/20 text-cyan-400 border-cyan-500/30"
      case "green":
        return "bg-green-500/20 text-green-400 border-green-500/30"
      case "blue":
        return "bg-blue-500/20 text-blue-400 border-blue-500/30"
      case "purple":
        return "bg-purple-500/20 text-purple-400 border-purple-500/30"
      default:
        return "bg-cyan-500/20 text-cyan-400 border-cyan-500/30"
    }
  }

return (
    <div
      className={`bg-slate-800/50 rounded-lg border ${
        isSelected ? getBorderColor() : "border-slate-700/50"
      } p-4 relative overflow-hidden cursor-pointer transition-all duration-200 hover:bg-slate-800/70`}
      onClick={onSelect}
    >
      <div className="flex items-center justify-between mb-2">
        <Badge className={getBadgeColor()}>{category}</Badge>
        <Icon className={getIconColor()} />
      </div>
      <div className="text-lg font-medium text-slate-200 mb-1">{name}</div>
      <div className="text-sm text-slate-400 mb-3">{description}</div>
      <div className="space-y-2">
        <div>
          <div className="flex items-center justify-between mb-1">
            <div className="text-xs text-slate-500">Performance</div>
            <div className="text-xs text-cyan-400">{performance}%</div>
          </div>
          <Progress value={performance} className="h-1.5 bg-slate-700">
            <div
              className={`h-full bg-gradient-to-r ${getGradient()} rounded-full`}
              style={{ width: `${performance}%` }}
            />
          </Progress>
        </div>
        <div>
          <div className="flex items-center justify-between mb-1">
            <div className="text-xs text-slate-500">Usage</div>
            <div className="text-xs text-purple-400">{usage}%</div>
          </div>
          <Progress value={usage} className="h-1.5 bg-slate-700">
            <div
              className="h-full bg-gradient-to-r from-purple-500 to-pink-500 rounded-full"
              style={{ width: `${usage}%` }}
            />
          </Progress>
        </div>
      </div>
      {isSelected && (
        <div className="absolute -bottom-2 -right-2 h-16 w-16 rounded-full bg-gradient-to-r opacity-20 blur-xl from-cyan-500 to-blue-500"></div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/experiments/multi-model-chat.tsx" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import {
  Bot,
  Send,
  Music,
  Mic,
  Video,
  Sparkles,
  RefreshCw,
  Trash,
  Download,
  Copy,
  Play,
  Volume2,
  Sliders,
  Loader2,
  AlertCircle,
} from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { useToast } from "@/hooks/use-toast"

interface Message {
  id: string
  role: "user" | "assistant"
  content: string
  timestamp: Date
  model?: string
  loading?: boolean
  type?: "lyrics" | "voice" | "music" | "composition" | "video"
  modelOutputs?: {
    [key: string]: {
      content: string
      loading: boolean
      error?: string
    }
  }
}

export function MultiModelChat() {
  const [messages, setMessages] = useState<Message[]>([])
  const [input, setInput] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [activeModels, setActiveModels] = useState<string[]>([
    "lyrics-model",
    "voice-model",
    "music-model",
    "composition-model",
    "video-model",
  ])
  const [experimentType, setExperimentType] = useState<"lyrics" | "voice" | "music" | "composition" | "video">("lyrics")
  const [voiceSettings, setVoiceSettings] = useState({
    pitch: 50,
    gender: 50,
    speed: 50,
    clarity: 50,
    emotion: 50,
  })
  const [musicSettings, setMusicSettings] = useState({
    genre: "pop",
    tempo: 120,
    mood: "energetic",
    instruments: ["piano", "guitar", "drums"],
  })
  const [videoSettings, setVideoSettings] = useState({
    style: "modern",
    duration: 30,
    resolution: "1080p",
  })

const messagesEndRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLTextAreaElement>(null)
  const { toast } = useToast()

// Scroll to bottom of messages
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

// Focus input on load
  useEffect(() => {
    inputRef.current?.focus()
  }, [])

const fetchAIResponse = async (
    modelType: string,
    userPrompt: string,
    messageId: string,
    settings: any = {},
  ): Promise<string> => {
    try {
      const response = await fetch("/api/ai/multi-model", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          prompt: userPrompt,
          modelType,
          settings:
            modelType === "voice"
              ? voiceSettings
              : modelType === "music"
                ? musicSettings
                : modelType === "video"
                  ? videoSettings
                  : {},
        }),
      })

if (!response.ok) {
        throw new Error(`API request failed with status ${response.status}`)
      }

// Handle streaming response
      const reader = response.body?.getReader()
      if (!reader) throw new Error("Response body is not readable")

let accumulatedResponse = ""

while (true) {
        const { done, value } = await reader.read()
        if (done) break

// Convert the Uint8Array to a string
        const chunk = new TextDecoder().decode(value)

try {
          // Parse the chunk as JSON
          const lines = chunk
            .split("\n")
            .filter((line) => line.trim() !== "")
            .map((line) => line.replace(/^data: /, ""))

for (const line of lines) {
            if (line === "[DONE]") continue

try {
              const parsedLine = JSON.parse(line)
              if (parsedLine.type === "text" && parsedLine.text) {
                accumulatedResponse += parsedLine.text

// Update the message in state with the accumulated response
                setMessages((prev) =>
                  prev.map((msg) => {
                    if (msg.id === messageId && msg.modelOutputs) {
                      const updatedOutputs = { ...msg.modelOutputs }
                      updatedOutputs[`${modelType}-model`] = {
                        content: accumulatedResponse,
                        loading: true,
                      }
                      return { ...msg, modelOutputs: updatedOutputs }
                    }
                    return msg
                  }),
                )
              }
            } catch (e) {
              console.error("Error parsing line:", line, e)
            }
          }
        } catch (e) {
          console.error("Error processing chunk:", e)
        }
      }

return accumulatedResponse
    } catch (error) {
      console.error(`Error fetching AI response for ${modelType}:`, error)
      throw error
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!input.trim() || isLoading) return

// Add user message
    const userMessage: Message = {
      id: Date.now().toString(),
      role: "user",
      content: input,
      timestamp: new Date(),
      type: experimentType,
    }

// Add assistant message with multiple model outputs
    const assistantMessage: Message = {
      id: (Date.now() + 1).toString(),
      role: "assistant",
      content: "",
      timestamp: new Date(),
      type: experimentType,
      modelOutputs: {},
    }

// Initialize model outputs
    activeModels.forEach((model) => {
      if (assistantMessage.modelOutputs) {
        assistantMessage.modelOutputs[model] = {
          content: "",
          loading: true,
        }
      }
    })

setMessages((prev) => [...prev, userMessage, assistantMessage])
    setInput("")
    setIsLoading(true)

// Process each active model
    const modelPromises = activeModels.map(async (model) => {
      const modelType = model.split("-")[0] // Extract model type from model ID

try {
        // Fetch AI response for this model
        const response = await fetchAIResponse(
          modelType,
          input,
          assistantMessage.id,
          modelType === "voice"
            ? voiceSettings
            : modelType === "music"
              ? musicSettings
              : modelType === "video"
                ? videoSettings
                : {},
        )

// Update the message with the completed response
        setMessages((prev) =>
          prev.map((msg) => {
            if (msg.id === assistantMessage.id && msg.modelOutputs) {
              const updatedOutputs = { ...msg.modelOutputs }
              updatedOutputs[model] = {
                content: response,
                loading: false,
              }
              return { ...msg, modelOutputs: updatedOutputs }
            }
            return msg
          }),
        )
      } catch (error) {
        console.error(`Error with ${model}:`, error)

// Update the message with the error
        setMessages((prev) =>
          prev.map((msg) => {
            if (msg.id === assistantMessage.id && msg.modelOutputs) {
              const updatedOutputs = { ...msg.modelOutputs }
              updatedOutputs[model] = {
                content: "An error occurred while generating the response.",
                loading: false,
                error: error instanceof Error ? error.message : "Unknown error",
              }
              return { ...msg, modelOutputs: updatedOutputs }
            }
            return msg
          }),
        )

toast({
          title: "Error",
          description: `Failed to generate ${modelType} content. Please try again.`,
          variant: "destructive",
        })
      }
    })

// Wait for all models to complete
    try {
      await Promise.all(modelPromises)
    } finally {
      setIsLoading(false)
    }
  }

const clearConversation = () => {
    setMessages([])
  }

const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    toast({
      title: "Copied to clipboard",
      description: "The content has been copied to your clipboard.",
    })
  }

const handleExperimentTypeChange = (value: string) => {
    setExperimentType(value as any)
  }

return (
    <Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
      <CardHeader className="border-b border-slate-700/50">
        <div className="flex items-center justify-between">
          <CardTitle className="text-slate-100 flex items-center">
            <Bot className="mr-2 h-5 w-5 text-purple-500" />
            Multi-Model Music Lab
          </CardTitle>
          <div className="flex items-center space-x-2">
            <Badge variant="outline" className="bg-slate-800/50 text-purple-400 border-purple-500/50">
              <div className="h-1.5 w-1.5 rounded-full bg-purple-500 mr-1 animate-pulse"></div>
              EXPERIMENTAL
            </Badge>
            <Select defaultValue="lyrics" onValueChange={handleExperimentTypeChange}>
              <SelectTrigger className="w-[180px] bg-slate-800/50 border-slate-700">
                <SelectValue placeholder="Experiment Type" />
              </SelectTrigger>
              <SelectContent className="bg-slate-900 border-slate-700">
                <SelectItem value="lyrics">Song Lyrics</SelectItem>
                <SelectItem value="voice">Voice Generation</SelectItem>
                <SelectItem value="music">Music Style</SelectItem>
                <SelectItem value="composition">Song Composition</SelectItem>
                <SelectItem value="video">Music Video</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </CardHeader>
      <CardContent className="p-0">
        <div className="grid grid-cols-12 h-[calc(100vh-20rem)]">
          {/* Model selection sidebar */}
          <div className="col-span-3 border-r border-slate-700/50 p-4">
            <div className="mb-4">
              <h3 className="text-sm font-medium text-slate-300 mb-2">Active Models</h3>
              <div className="space-y-2">
                <ModelToggle
                  id="lyrics-model"
                  label="Lyrics Generator"
                  description="Creates song lyrics based on prompts"
                  icon={Music}
                  color="cyan"
                  isActive={activeModels.includes("lyrics-model")}
                  onToggle={() => {
                    setActiveModels((prev) =>
                      prev.includes("lyrics-model")
                        ? prev.filter((m) => m !== "lyrics-model")
                        : [...prev, "lyrics-model"],
                    )
                  }}
                />
                <ModelToggle
                  id="voice-model"
                  label="Voice Synthesizer"
                  description="Generates customizable voice clips"
                  icon={Mic}
                  color="green"
                  isActive={activeModels.includes("voice-model")}
                  onToggle={() => {
                    setActiveModels((prev) =>
                      prev.includes("voice-model") ? prev.filter((m) => m !== "voice-model") : [...prev, "voice-model"],
                    )
                  }}
                />
                <ModelToggle
                  id="music-model"
                  label="Music Generator"
                  description="Creates music in various styles"
                  icon={Music}
                  color="purple"
                  isActive={activeModels.includes("music-model")}
                  onToggle={() => {
                    setActiveModels((prev) =>
                      prev.includes("music-model") ? prev.filter((m) => m !== "music-model") : [...prev, "music-model"],
                    )
                  }}
                />
                <ModelToggle
                  id="composition-model"
                  label="Composition Assistant"
                  description="Provides reasoning and composition help"
                  icon={Sparkles}
                  color="blue"
                  isActive={activeModels.includes("composition-model")}
                  onToggle={() => {
                    setActiveModels((prev) =>
                      prev.includes("composition-model")
                        ? prev.filter((m) => m !== "composition-model")
                        : [...prev, "composition-model"],
                    )
                  }}
                />
                <ModelToggle
                  id="video-model"
                  label="Video Renderer"
                  description="Creates music videos from prompts"
                  icon={Video}
                  color="pink"
                  isActive={activeModels.includes("video-model")}
                  onToggle={() => {
                    setActiveModels((prev) =>
                      prev.includes("video-model") ? prev.filter((m) => m !== "video-model") : [...prev, "video-model"],
                    )
                  }}
                />
              </div>
            </div>

{/* Settings based on experiment type */}
            <div>
              <h3 className="text-sm font-medium text-slate-300 mb-2">Model Settings</h3>

{experimentType === "voice" && (
                <div className="space-y-4">
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label className="text-xs text-slate-400">Pitch</Label>
                      <span className="text-xs text-cyan-400">{voiceSettings.pitch}%</span>
                    </div>
                    <Slider
                      value={[voiceSettings.pitch]}
                      min={0}
                      max={100}
                      step={1}
                      onValueChange={(value) => setVoiceSettings((prev) => ({ ...prev, pitch: value[0] }))}
                      className="[&>span]:bg-green-500"
                    />
                    <div className="flex justify-between text-xs text-slate-500">
                      <span>Lower</span>
                      <span>Higher</span>
                    </div>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label className="text-xs text-slate-400">Gender</Label>
                      <span className="text-xs text-cyan-400">{voiceSettings.gender}%</span>
                    </div>
                    <Slider
                      value={[voiceSettings.gender]}
                      min={0}
                      max={100}
                      step={1}
                      onValueChange={(value) => setVoiceSettings((prev) => ({ ...prev, gender: value[0] }))}
                      className="[&>span]:bg-green-500"
                    />
                    <div className="flex justify-between text-xs text-slate-500">
                      <span>Masculine</span>
                      <span>Feminine</span>
                    </div>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label className="text-xs text-slate-400">Speed</Label>
                      <span className="text-xs text-cyan-400">{voiceSettings.speed}%</span>
                    </div>
                    <Slider
                      value={[voiceSettings.speed]}
                      min={0}
                      max={100}
                      step={1}
                      onValueChange={(value) => setVoiceSettings((prev) => ({ ...prev, speed: value[0] }))}
                      className="[&>span]:bg-green-500"
                    />
                    <div className="flex justify-between text-xs text-slate-500">
                      <span>Slower</span>
                      <span>Faster</span>
                    </div>
                  </div>
                </div>
              )}

{experimentType === "music" && (
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label className="text-xs text-slate-400">Genre</Label>
                    <Select
                      defaultValue={musicSettings.genre}
                      onValueChange={(value) => setMusicSettings((prev) => ({ ...prev, genre: value }))}
                    >
                      <SelectTrigger className="w-full bg-slate-800/50 border-slate-700 h-8 text-xs">
                        <SelectValue placeholder="Select genre" />
                      </SelectTrigger>
                      <SelectContent className="bg-slate-900 border-slate-700">
                        <SelectItem value="pop">Pop</SelectItem>
                        <SelectItem value="rock">Rock</SelectItem>
                        <SelectItem value="jazz">Jazz</SelectItem>
                        <SelectItem value="electronic">Electronic</SelectItem>
                        <SelectItem value="classical">Classical</SelectItem>
                        <SelectItem value="hip-hop">Hip-Hop</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label className="text-xs text-slate-400">Tempo (BPM)</Label>
                      <span className="text-xs text-cyan-400">{musicSettings.tempo}</span>
                    </div>
                    <Slider
                      value={[musicSettings.tempo]}
                      min={60}
                      max={200}
                      step={1}
                      onValueChange={(value) => setMusicSettings((prev) => ({ ...prev, tempo: value[0] }))}
                      className="[&>span]:bg-purple-500"
                    />
                    <div className="flex justify-between text-xs text-slate-500">
                      <span>Slow</span>
                      <span>Fast</span>
                    </div>
                  </div>

<div className="space-y-2">
                    <Label className="text-xs text-slate-400">Mood</Label>
                    <Select
                      defaultValue={musicSettings.mood}
                      onValueChange={(value) => setMusicSettings((prev) => ({ ...prev, mood: value }))}
                    >
                      <SelectTrigger className="w-full bg-slate-800/50 border-slate-700 h-8 text-xs">
                        <SelectValue placeholder="Select mood" />
                      </SelectTrigger>
                      <SelectContent className="bg-slate-900 border-slate-700">
                        <SelectItem value="energetic">Energetic</SelectItem>
                        <SelectItem value="melancholic">Melancholic</SelectItem>
                        <SelectItem value="relaxed">Relaxed</SelectItem>
                        <SelectItem value="aggressive">Aggressive</SelectItem>
                        <SelectItem value="uplifting">Uplifting</SelectItem>
                        <SelectItem value="dark">Dark</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              )}

{experimentType === "video" && (
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label className="text-xs text-slate-400">Visual Style</Label>
                    <Select
                      defaultValue={videoSettings.style}
                      onValueChange={(value) => setVideoSettings((prev) => ({ ...prev, style: value }))}
                    >
                      <SelectTrigger className="w-full bg-slate-800/50 border-slate-700 h-8 text-xs">
                        <SelectValue placeholder="Select style" />
                      </SelectTrigger>
                      <SelectContent className="bg-slate-900 border-slate-700">
                        <SelectItem value="modern">Modern</SelectItem>
                        <SelectItem value="retro">Retro</SelectItem>
                        <SelectItem value="surreal">Surreal</SelectItem>
                        <SelectItem value="minimalist">Minimalist</SelectItem>
                        <SelectItem value="cinematic">Cinematic</SelectItem>
                        <SelectItem value="anime">Anime</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label className="text-xs text-slate-400">Duration (seconds)</Label>
                      <span className="text-xs text-cyan-400">{videoSettings.duration}s</span>
                    </div>
                    <Slider
                      value={[videoSettings.duration]}
                      min={15}
                      max={180}
                      step={15}
                      onValueChange={(value) => setVideoSettings((prev) => ({ ...prev, duration: value[0] }))}
                      className="[&>span]:bg-pink-500"
                    />
                  </div>

<div className="space-y-2">
                    <Label className="text-xs text-slate-400">Resolution</Label>
                    <Select
                      defaultValue={videoSettings.resolution}
                      onValueChange={(value) => setVideoSettings((prev) => ({ ...prev, resolution: value }))}
                    >
                      <SelectTrigger className="w-full bg-slate-800/50 border-slate-700 h-8 text-xs">
                        <SelectValue placeholder="Select resolution" />
                      </SelectTrigger>
                      <SelectContent className="bg-slate-900 border-slate-700">
                        <SelectItem value="720p">720p</SelectItem>
                        <SelectItem value="1080p">1080p</SelectItem>
                        <SelectItem value="4k">4K</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              )}

{(experimentType === "lyrics" || experimentType === "composition") && (
                <div className="p-4 bg-slate-800/50 rounded-md border border-slate-700/50 text-xs text-slate-400">
                  <p className="mb-2">
                    {experimentType === "lyrics"
                      ? "The lyrics generator creates original song lyrics based on your prompts."
                      : "The composition assistant provides creative reasoning and songwriting guidance."}
                  </p>
                  <p>Try specifying:</p>
                  <ul className="list-disc pl-4 mt-1 space-y-1">
                    <li>Theme or topic</li>
                    <li>Mood or emotion</li>
                    <li>Genre or style</li>
                    <li>Specific keywords</li>
                    {experimentType === "composition" && (
                      <>
                        <li>Song structure</li>
                        <li>Harmonic preferences</li>
                      </>
                    )}
                  </ul>
                </div>
              )}
            </div>
          </div>

{/* Chat area */}
          <div className="col-span-9 flex flex-col">
            <ScrollArea className="flex-1 p-4">
              <div className="space-y-6">
                {messages.length === 0 ? (
                  <div className="flex flex-col items-center justify-center h-64 text-center">
                    <Sparkles className="h-12 w-12 text-slate-600 mb-4" />
                    <h3 className="text-lg font-medium text-slate-400">Start a music experiment</h3>
                    <p className="text-sm text-slate-500 max-w-md mt-2">
                      Enter a prompt to generate content from multiple AI models simultaneously. Compare different
                      outputs side-by-side.
                    </p>
                  </div>
                ) : (
                  messages.map((message) => (
                    <div key={message.id} className="space-y-2">
                      {/* User message */}
                      {message.role === "user" && (
                        <div className="flex items-start justify-end space-x-2">
                          <div className="bg-purple-600/20 border border-purple-500/30 rounded-lg px-4 py-2 max-w-[80%]">
                            <div className="text-sm text-slate-200 whitespace-pre-wrap">{message.content}</div>
                            <div className="mt-1 flex items-center justify-between text-xs text-slate-400">
                              <span>{message.timestamp.toLocaleTimeString()}</span>
                              <Badge variant="outline" className="bg-slate-800/50 border-slate-700 text-xs">
                                {message.type?.charAt(0).toUpperCase() + message.type?.slice(1) || "General"}
                              </Badge>
                            </div>
                          </div>
                          <Avatar className="h-8 w-8">
                            <AvatarImage src="/placeholder.svg?height=40&width=40" alt="User" />
                            <AvatarFallback className="bg-slate-700 text-purple-500">U</AvatarFallback>
                          </Avatar>
                        </div>
                      )}

{/* Assistant message with multiple model outputs */}
                      {message.role === "assistant" && message.modelOutputs && (
                        <div className="space-y-4">
                          <div className="flex items-center space-x-2">
                            <Avatar className="h-8 w-8">
                              <AvatarImage src="/placeholder.svg?height=40&width=40" alt="AI" />
                              <AvatarFallback className="bg-slate-700 text-purple-500">AI</AvatarFallback>
                            </Avatar>
                            <div className="text-sm font-medium text-slate-300">Multi-Model Results</div>
                          </div>

<div className="grid grid-cols-1 gap-3 pl-10">
                            {Object.entries(message.modelOutputs).map(([modelId, output]) => {
                              const modelType = modelId.split("-")[0]
                              const modelIcon =
                                modelType === "lyrics"
                                  ? Music
                                  : modelType === "voice"
                                    ? Mic
                                    : modelType === "music"
                                      ? Music
                                      : modelType === "composition"
                                        ? Sparkles
                                        : modelType === "video"
                                          ? Video
                                          : Bot

const modelColor =
                                modelType === "lyrics"
                                  ? "cyan"
                                  : modelType === "voice"
                                    ? "green"
                                    : modelType === "music"
                                      ? "purple"
                                      : modelType === "composition"
                                        ? "blue"
                                        : modelType === "video"
                                          ? "pink"
                                          : "slate"

const getModelIconClasses = (modelColor: string) => {
                                switch (modelColor) {
                                  case "cyan":
                                    return "bg-cyan-500/20 text-cyan-400"
                                  case "green":
                                    return "bg-green-500/20 text-green-400"
                                  case "purple":
                                    return "bg-purple-500/20 text-purple-400"
                                  case "blue":
                                    return "bg-blue-500/20 text-blue-400"
                                  case "pink":
                                    return "bg-pink-500/20 text-pink-400"
                                  default:
                                    return "bg-slate-500/20 text-slate-400"
                                }
                              }

return (
                                <Card key={modelId} className="bg-slate-800/50 border-slate-700/50">
                                  <CardHeader className="py-2 px-4 flex flex-row items-center justify-between">
                                    <div className="flex items-center space-x-2">
                                      <div
                                        className={`h-6 w-6 rounded-full ${getModelIconClasses(modelColor)} flex items-center justify-center`}
                                      >
                                        <modelIcon className="h-3.5 w-3.5" />
                                      </div>
                                      <h4 className="text-sm font-medium text-slate-200">
                                        {modelType.charAt(0).toUpperCase() + modelType.slice(1)} Model
                                      </h4>
                                    </div>
                                    <div className="flex items-center space-x-1">
                                      <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-6 w-6 text-slate-400 hover:text-slate-200"
                                        onClick={() => copyToClipboard(output.content)}
                                        disabled={output.loading || !!output.error}
                                      >
                                        <Copy className="h-3.5 w-3.5" />
                                      </Button>
                                      {(modelType === "voice" || modelType === "music" || modelType === "video") && (
                                        <Button
                                          variant="ghost"
                                          size="icon"
                                          className="h-6 w-6 text-slate-400 hover:text-slate-200"
                                          disabled={output.loading || !!output.error}
                                        >
                                          <Download className="h-3.5 w-3.5" />
                                        </Button>
                                      )}
                                    </div>
                                  </CardHeader>
                                  <CardContent className="py-3 px-4">
                                    {output.loading ? (
                                      <div className="flex items-center space-x-2 h-20 justify-center">
                                        <Loader2 className="h-5 w-5 text-purple-500 animate-spin" />
                                        <span className="text-sm text-slate-400">Generating response...</span>
                                      </div>
                                    ) : output.error ? (
                                      <Alert variant="destructive" className="bg-red-900/20 border-red-800">
                                        <AlertCircle className="h-4 w-4" />
                                        <AlertTitle>Error</AlertTitle>
                                        <AlertDescription className="text-xs">
                                          Failed to generate content. Please try again.
                                        </AlertDescription>
                                      </Alert>
                                    ) : (
                                      <div className="text-sm text-slate-300 whitespace-pre-wrap">
                                        {output.content}

{/* Voice player UI */}
                                        {modelType === "voice" && (
                                          <div className="mt-4 bg-slate-900/50 rounded-md border border-slate-700/50 p-3">
                                            <div className="flex items-center justify-between mb-3">
                                              <div className="flex items-center space-x-2">
                                                <Button
                                                  variant="outline"
                                                  size="icon"
                                                  className="h-8 w-8 rounded-full bg-purple-600 hover:bg-purple-700 border-none"
                                                >
                                                  <Play className="h-4 w-4" />
                                                </Button>
                                                <div className="h-1 bg-slate-700 rounded-full w-32 relative">
                                                  <div className="absolute h-full w-1/3 bg-purple-500 rounded-full"></div>
                                                </div>
                                              </div>
                                              <div className="flex items-center space-x-2">
                                                <Button
                                                  variant="ghost"
                                                  size="icon"
                                                  className="h-6 w-6 text-slate-400 hover:text-slate-200"
                                                >
                                                  <Volume2 className="h-4 w-4" />
                                                </Button>
                                                <Button
                                                  variant="ghost"
                                                  size="icon"
                                                  className="h-6 w-6 text-slate-400 hover:text-slate-200"
                                                >
                                                  <Sliders className="h-4 w-4" />
                                                </Button>
                                              </div>
                                            </div>
                                            <div className="text-xs text-slate-500">Voice sample • 00:00 / 00:30</div>
                                          </div>
                                        )}

{/* Music player UI */}
                                        {modelType === "music" && (
                                          <div className="mt-4 bg-slate-900/50 rounded-md border border-slate-700/50 p-3">
                                            <div className="flex items-center justify-between mb-3">
                                              <div className="flex items-center space-x-2">
                                                <Button
                                                  variant="outline"
                                                  size="icon"
                                                  className="h-8 w-8 rounded-full bg-purple-600 hover:bg-purple-700 border-none"
                                                >
                                                  <Play className="h-4 w-4" />
                                                </Button>
                                                <div className="h-1 bg-slate-700 rounded-full w-32 relative">
                                                  <div className="absolute h-full w-1/4 bg-purple-500 rounded-full"></div>
                                                </div>
                                              </div>
                                              <div className="flex items-center space-x-2">
                                                <Button
                                                  variant="ghost"
                                                  size="icon"
                                                  className="h-6 w-6 text-slate-400 hover:text-slate-200"
                                                >
                                                  <Volume2 className="h-4 w-4" />
                                                </Button>
                                                <Button
                                                  variant="ghost"
                                                  size="icon"
                                                  className="h-6 w-6 text-slate-400 hover:text-slate-200"
                                                >
                                                  <Download className="h-4 w-4" />
                                                </Button>
                                              </div>
                                            </div>
                                            <div className="text-xs text-slate-500">
                                              {musicSettings.genre} • {musicSettings.tempo} BPM • 00:00 / 01:45
                                            </div>
                                          </div>
                                        )}

{/* Video player UI */}
                                        {modelType === "video" && (
                                          <div className="mt-4 bg-slate-900/50 rounded-md border border-slate-700/50 p-3">
                                            <div className="aspect-video bg-slate-800 rounded-md flex items-center justify-center mb-3">
                                              <div className="text-center">
                                                <Video className="h-10 w-10 text-slate-600 mx-auto mb-2" />
                                                <Button
                                                  variant="outline"
                                                  size="sm"
                                                  className="bg-purple-600 hover:bg-purple-700 border-none"
                                                >
                                                  <Play className="h-4 w-4 mr-2" />
                                                  Preview Video
                                                </Button>
                                              </div>
                                            </div>
                                            <div className="flex items-center justify-between text-xs text-slate-500">
                                              <span>
                                                {videoSettings.resolution} • {videoSettings.duration}s
                                              </span>
                                              <Button
                                                variant="ghost"
                                                size="sm"
                                                className="h-6 text-xs text-slate-400 hover:text-slate-200"
                                              >
                                                <Download className="h-3.5 w-3.5 mr-1" />
                                                Download
                                              </Button>
                                            </div>
                                          </div>
                                        )}
                                      </div>
                                    )}
                                  </CardContent>
                                </Card>
                              )
                            })}
                          </div>
                        </div>
                      )}
                    </div>
                  ))
                )}
                <div ref={messagesEndRef} />
              </div>
            </ScrollArea>

<div className="p-4 border-t border-slate-700/50">
              <form onSubmit={handleSubmit} className="flex space-x-2">
                <div className="flex-1 relative">
                  <Textarea
                    ref={inputRef}
                    placeholder={`Enter a prompt for ${experimentType} generation...`}
                    className="min-h-[80px] resize-none bg-slate-800/50 border-slate-700/50 focus:border-purple-500/50 focus:ring-purple-500/20 text-slate-200"
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" && !e.shiftKey) {
                        e.preventDefault()
                        handleSubmit(e)
                      }
                    }}
                  />
                </div>
                <div className="flex flex-col space-y-2">
                  <Button
                    type="submit"
                    className="bg-purple-600 hover:bg-purple-700 h-10 px-4"
                    disabled={isLoading || !input.trim()}
                  >
                    {isLoading ? <RefreshCw className="h-5 w-5 animate-spin" /> : <Send className="h-5 w-5" />}
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    className="border-slate-700 bg-slate-800/50 hover:bg-slate-700/50 h-10"
                    onClick={clearConversation}
                  >
                    <Trash className="h-5 w-5" />
                  </Button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

// Model toggle component
function ModelToggle({
  id,
  label,
  description,
  icon: Icon,
  color,
  isActive,
  onToggle,
}: {
  id: string
  label: string
  description: string
  icon: React.ElementType
  color: string
  isActive: boolean
  onToggle: () => void
}) {
  const getToggleClasses = () => {
    if (!isActive) return "bg-slate-800/50 border-slate-700/50"

switch (color) {
      case "cyan":
        return "bg-cyan-500/10 border-cyan-500/30"
      case "green":
        return "bg-green-500/10 border-green-500/30"
      case "purple":
        return "bg-purple-500/10 border-purple-500/30"
      case "blue":
        return "bg-blue-500/10 border-blue-500/30"
      case "pink":
        return "bg-pink-500/10 border-pink-500/30"
      default:
        return "bg-slate-800/50 border-slate-700/50"
    }
  }

const getIconClasses = () => {
    switch (color) {
      case "cyan":
        return "bg-cyan-500/20 text-cyan-400"
      case "green":
        return "bg-green-500/20 text-green-400"
      case "purple":
        return "bg-purple-500/20 text-purple-400"
      case "blue":
        return "bg-blue-500/20 text-blue-400"
      case "pink":
        return "bg-pink-500/20 text-pink-400"
      default:
        return "bg-slate-500/20 text-slate-400"
    }
  }

const getSwitchClasses = () => {
    switch (color) {
      case "cyan":
        return "data-[state=checked]:bg-cyan-500"
      case "green":
        return "data-[state=checked]:bg-green-500"
      case "purple":
        return "data-[state=checked]:bg-purple-500"
      case "blue":
        return "data-[state=checked]:bg-blue-500"
      case "pink":
        return "data-[state=checked]:bg-pink-500"
      default:
        return "data-[state=checked]:bg-slate-500"
    }
  }

return (
    <div
      className={`p-3 rounded-md border ${getToggleClasses()} cursor-pointer hover:bg-slate-800/70 transition-colors`}
      onClick={onToggle}
    >
      <div className="flex items-center space-x-2">
        <div className={`h-8 w-8 rounded-full ${getIconClasses()} flex items-center justify-center`}>
          <Icon className="h-4 w-4" />
        </div>
        <div>
          <div className="text-sm font-medium text-slate-200">{label}</div>
          <div className="text-xs text-slate-400">{description}</div>
        </div>
        <div className="ml-auto">
          <Switch checked={isActive} className={getSwitchClasses()} />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="dashboard.tsx" isQuickEdit="true"
"use client"

import { useEffect, useState, useRef } from "react"
import {
  Activity,
  AlertCircle,
  BarChart3,
  Bell,
  CircleOff,
  Command,
  Cpu,
  Database,
  Download,
  Globe,
  HardDrive,
  Hexagon,
  LineChart,
  Lock,
  type LucideIcon,
  MessageSquare,
  Mic,
  Moon,
  Radio,
  RefreshCw,
  Search,
  Settings,
  Shield,
  Sun,
  Terminal,
  Wifi,
  Zap,
  Info,
  Check,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

export default function Dashboard() {
  const [theme, setTheme] = useState<"dark" | "light">("dark")
  const [systemStatus, setSystemStatus] = useState(85)
  const [cpuUsage, setCpuUsage] = useState(42)
  const [memoryUsage, setMemoryUsage] = useState(68)
  const [networkStatus, setNetworkStatus] = useState(92)
  const [securityLevel, setSecurityLevel] = useState(75)
  const [currentTime, setCurrentTime] = useState(new Date())
  const [isLoading, setIsLoading] = useState(true)

const canvasRef = useRef<HTMLCanvasElement>(null)

// Simulate data loading
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 2000)

return () => clearTimeout(timer)
  }, [])

// Update time
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)

return () => clearInterval(interval)
  }, [])

// Simulate changing data
  useEffect(() => {
    const interval = setInterval(() => {
      setCpuUsage(Math.floor(Math.random() * 30) + 30)
      setMemoryUsage(Math.floor(Math.random() * 20) + 60)
      setNetworkStatus(Math.floor(Math.random() * 15) + 80)
      setSystemStatus(Math.floor(Math.random() * 10) + 80)
    }, 3000)

return () => clearInterval(interval)
  }, [])

// Particle effect
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight

const particles: Particle[] = []
    const particleCount = 100

class Particle {
      x: number
      y: number
      size: number
      speedX: number
      speedY: number
      color: string

constructor() {
        this.x = Math.random() * canvas.width
        this.y = Math.random() * canvas.height
        this.size = Math.random() * 3 + 1
        this.speedX = (Math.random() - 0.5) * 0.5
        this.speedY = (Math.random() - 0.5) * 0.5
        this.color = `rgba(${Math.floor(Math.random() * 100) + 100}, ${Math.floor(Math.random() * 100) + 150}, ${Math.floor(Math.random() * 55) + 200}, ${Math.random() * 0.5 + 0.2})`
      }

update() {
        this.x += this.speedX
        this.y += this.speedY

if (this.x > canvas.width) this.x = 0
        if (this.x < 0) this.x = canvas.width
        if (this.y > canvas.height) this.y = 0
        if (this.y < 0) this.y = canvas.height
      }

draw() {
        if (!ctx) return
        ctx.fillStyle = this.color
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
        ctx.fill()
      }
    }

for (let i = 0; i < particleCount; i++) {
      particles.push(new Particle())
    }

function animate() {
      if (!ctx || !canvas) return
      ctx.clearRect(0, 0, canvas.width, canvas.height)

for (const particle of particles) {
        particle.update()
        particle.draw()
      }

requestAnimationFrame(animate)
    }

animate()

const handleResize = () => {
      if (!canvas) return
      canvas.width = canvas.offsetWidth
      canvas.height = canvas.offsetHeight
    }

window.addEventListener("resize", handleResize)

return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [])

// Toggle theme
  const toggleTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark")
  }

// Format time
  const formatTime = (date: Date) => {
    return date.toLocaleTimeString("en-US", {
      hour12: false,
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    })
  }

// Format date
  const formatDate = (date: Date) => {
    return date.toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    })
  }

return (
    <div
      className={`${theme} min-h-screen bg-gradient-to-br from-black to-slate-900 text-slate-100 relative overflow-hidden`}
    >
      {/* Background particle effect */}
      <canvas ref={canvasRef} className="absolute inset-0 w-full h-full opacity-30" />

{/* Loading overlay */}
      {isLoading && (
        <div className="absolute inset-0 bg-black/80 flex items-center justify-center z-50">
          <div className="flex flex-col items-center">
            <div className="relative w-24 h-24">
              <div className="absolute inset-0 border-4 border-cyan-500/30 rounded-full animate-ping"></div>
              <div className="absolute inset-2 border-4 border-t-cyan-500 border-r-transparent border-b-transparent border-l-transparent rounded-full animate-spin"></div>
              <div className="absolute inset-4 border-4 border-r-purple-500 border-t-transparent border-b-transparent border-l-transparent rounded-full animate-spin-slow"></div>
              <div className="absolute inset-6 border-4 border-b-blue-500 border-t-transparent border-r-transparent border-l-transparent rounded-full animate-spin-slower"></div>
              <div className="absolute inset-8 border-4 border-l-green-500 border-t-transparent border-r-transparent border-b-transparent rounded-full animate-spin"></div>
            </div>
            <div className="mt-4 text-cyan-500 font-mono text-sm tracking-wider">SYSTEM INITIALIZING</div>
          </div>
        </div>
      )}

<div className="container mx-auto p-4 relative z-10">
        {/* Header */}
        <header className="flex items-center justify-between py-4 border-b border-slate-700/50 mb-6">
          <div className="flex items-center space-x-2">
            <Hexagon className="h-8 w-8 text-cyan-500" />
            <span className="text-xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
              NEXUS OS
            </span>
          </div>

<div className="flex items-center space-x-3">
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button variant="ghost" size="icon" className="relative text-slate-400 hover:text-slate-100">
                      <Bell className="h-5 w-5" />
                      <span className="absolute -top-1 -right-1 h-2 w-2 bg-cyan-500 rounded-full animate-pulse"></span>
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>Notifications</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>

<TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={toggleTheme}
                      className="text-slate-400 hover:text-slate-100"
                    >
                      {theme === "dark" ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>Toggle theme</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>

{/* Main content */}
        <div className="grid grid-cols-12 gap-6">
          {/* Sidebar */}
          <div className="col-span-12 md:col-span-3 lg:col-span-2">
            <Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm h-full">
              <CardContent className="p-4">
                <nav className="space-y-2">
                  <NavItem icon={Command} label="Dashboard" active />
                  <NavItem icon={Activity} label="Diagnostics" />
                  <NavItem icon={Database} label="Data Center" />
                  <NavItem icon={Globe} label="Network" />
                  <NavItem icon={Shield} label="Security" />
                  <NavItem icon={Terminal} label="Console" />
                  <NavItem icon={MessageSquare} label="Communications" />
                  <NavItem icon={Settings} label="Settings" />
                </nav>

<div className="mt-8 pt-6 border-t border-slate-700/50">
                  <div className="text-xs text-slate-500 mb-2 font-mono">SYSTEM STATUS</div>
                  <div className="space-y-3">
                    <StatusItem label="Core Systems" value={systemStatus} color="cyan" />
                    <StatusItem label="Security" value={securityLevel} color="green" />
                    <StatusItem label="Network" value={networkStatus} color="blue" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Main dashboard */}
          <div className="col-span-12 md:col-span-9 lg:col-span-7">
            <div className="grid gap-6">
              {/* System overview */}
              <Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm overflow-hidden">
                <CardHeader className="border-b border-slate-700/50 pb-3">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-slate-100 flex items-center">
                      <Activity className="mr-2 h-5 w-5 text-cyan-500" />
                      System Overview
                    </CardTitle>
                    <div className="flex items-center space-x-2">
                      <Badge variant="outline" className="bg-slate-800/50 text-cyan-400 border-cyan-500/50 text-xs">
                        <div className="h-1.5 w-1.5 rounded-full bg-cyan-500 mr-1 animate-pulse"></div>
                        LIVE
                      </Badge>
                      <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400">
                        <RefreshCw className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="p-6">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <MetricCard
                      title="CPU Usage"
                      value={cpuUsage}
                      icon={Cpu}
                      trend="up"
                      color="cyan"
                      detail="3.8 GHz | 12 Cores"
                    />
                    <MetricCard
                      title="Memory"
                      value={memoryUsage}
                      icon={HardDrive}
                      trend="stable"
                      color="purple"
                      detail="16.4 GB / 24 GB"
                    />
                    <MetricCard
                      title="Network"
                      value={networkStatus}
                      icon={Wifi}
                      trend="down"
                      color="blue"
                      detail="1.2 GB/s | 42ms"
                    />
                  </div>

<div className="mt-8">
                    <Tabs defaultValue="performance" className="w-full">
                      <div className="flex items-center justify-between mb-4">
                        <TabsList className="bg-slate-800/50 p-1">
                          <TabsTrigger
                            value="performance"
                            className="data-[state=active]:bg-slate-700 data-[state=active]:text-cyan-400"
                          >
                            Performance
                          </TabsTrigger>
                          <TabsTrigger
                            value="processes"
                            className="data-[state=active]:bg-slate-700 data-[state=active]:text-cyan-400"
                          >
                            Processes
                          </TabsTrigger>
                          <TabsTrigger
                            value="storage"
                            className="data-[state=active]:bg-slate-700 data-[state=active]:text-cyan-400"
                          >
                            Storage
                          </TabsTrigger>
                        </TabsList>

<div className="flex items-center space-x-2 text-xs text-slate-400">
                          <div className="flex items-center">
                            <div className="h-2 w-2 rounded-full bg-cyan-500 mr-1"></div>
                            CPU
                          </div>
                          <div className="flex items-center">
                            <div className="h-2 w-2 rounded-full bg-purple-500 mr-1"></div>
                            Memory
                          </div>
                          <div className="flex items-center">
                            <div className="h-2 w-2 rounded-full bg-blue-500 mr-1"></div>
                            Network
                          </div>
                        </div>
                      </div>

<TabsContent value="performance" className="mt-0">
                        <div className="h-64 w-full relative bg-slate-800/30 rounded-lg border border-slate-700/50 overflow-hidden">
                          <PerformanceChart />
                          <div className="absolute bottom-4 right-4 bg-slate-900/80 backdrop-blur-sm rounded-md px-3 py-2 border border-slate-700/50">
                            <div className="text-xs text-slate-400">System Load</div>
                            <div className="text-lg font-mono text-cyan-400">{cpuUsage}%</div>
                          </div>
                        </div>
                      </TabsContent>

<TabsContent value="processes" className="mt-0">
                        <div className="bg-slate-800/30 rounded-lg border border-slate-700/50 overflow-hidden">
                          <div className="grid grid-cols-12 text-xs text-slate-400 p-3 border-b border-slate-700/50 bg-slate-800/50">
                            <div className="col-span-1">PID</div>
                            <div className="col-span-4">Process</div>
                            <div className="col-span-2">User</div>
                            <div className="col-span-2">CPU</div>
                            <div className="col-span-2">Memory</div>
                            <div className="col-span-1">Status</div>
                          </div>

{/* Security & Alerts */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-slate-100 flex items-center text-base">
                      <Shield className="mr-2 h-5 w-5 text-green-500" />
                      Security Status
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex items-center justify-between">
                        <div className="text-sm text-slate-400">Firewall</div>
                        <Badge className="bg-green-500/20 text-green-400 border-green-500/50">Active</Badge>
                      </div>
                      <div className="flex items-center justify-between">
                        <div className="text-sm text-slate-400">Intrusion Detection</div>
                        <Badge className="bg-green-500/20 text-green-400 border-green-500/50">Active</Badge>
                      </div>
                      <div className="flex items-center justify-between">
                        <div className="text-sm text-slate-400">Encryption</div>
                        <Badge className="bg-green-500/20 text-green-400 border-green-500/50">Active</Badge>
                      </div>
                      <div className="flex items-center justify-between">
                        <div className="text-sm text-slate-400">Threat Database</div>
                        <div className="text-sm text-cyan-400">
                          Updated <span className="text-slate-500">12 min ago</span>
                        </div>
                      </div>

<div className="pt-2 mt-2 border-t border-slate-700/50">
                        <div className="flex items-center justify-between mb-2">
                          <div className="text-sm font-medium">Security Level</div>
                          <div className="text-sm text-cyan-400">{securityLevel}%</div>
                        </div>
                        <Progress value={securityLevel} className="h-2 bg-slate-700">
                          <div
                            className="h-full bg-gradient-to-r from-green-500 to-cyan-500 rounded-full"
                            style={{ width: `${securityLevel}%` }}
                          />
                        </Progress>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-slate-100 flex items-center text-base">
                      <AlertCircle className="mr-2 h-5 w-5 text-amber-500" />
                      System Alerts
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      <AlertItem
                        title="Security Scan Complete"
                        time="14:32:12"
                        description="No threats detected in system scan"
                        type="info"
                      />
                      <AlertItem
                        title="Bandwidth Spike Detected"
                        time="13:45:06"
                        description="Unusual network activity on port 443"
                        type="warning"
                      />
                      <AlertItem
                        title="System Update Available"
                        time="09:12:45"
                        description="Version 12.4.5 ready to install"
                        type="update"
                      />
                      <AlertItem
                        title="Backup Completed"
                        time="04:30:00"
                        description="Incremental backup to drive E: successful"
                        type="success"
                      />
                    </div>
                  </CardContent>
                </Card>
              </div>

{/* Communications */}
              <Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
                <CardHeader className="pb-2 flex flex-row items-center justify-between">
                  <CardTitle className="text-slate-100 flex items-center text-base">
                    <MessageSquare className="mr-2 h-5 w-5 text-blue-500" />
                    Communications Log
                  </CardTitle>
                  <Badge variant="outline" className="bg-slate-800/50 text-blue-400 border-blue-500/50">
                    4 New Messages
                  </Badge>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <CommunicationItem
                      sender="System Administrator"
                      time="15:42:12"
                      message="Scheduled maintenance will occur at 02:00. All systems will be temporarily offline."
                      avatar="/placeholder.svg?height=40&width=40"
                      unread
                    />
                    <CommunicationItem
                      sender="Security Module"
                      time="14:30:45"
                      message="Unusual login attempt blocked from IP 192.168.1.45. Added to watchlist."
                      avatar="/placeholder.svg?height=40&width=40"
                      unread
                    />
                    <CommunicationItem
                      sender="Network Control"
                      time="12:15:33"
                      message="Bandwidth allocation adjusted for priority services during peak hours."
                      avatar="/placeholder.svg?height=40&width=40"
                      unread
                    />
                    <CommunicationItem
                      sender="Data Center"
                      time="09:05:18"
                      message="Backup verification complete. All data integrity checks passed."
                      avatar="/placeholder.svg?height=40&width=40"
                      unread
                    />
                  </div>
                </CardContent>
                <CardFooter className="border-t border-slate-700/50 pt-4">
                  <div className="flex items-center w-full space-x-2">
                    <input
                      type="text"
                      placeholder="Type a message..."
                      className="flex-1 bg-slate-800/50 border border-slate-700/50 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-cyan-500"
                    />
                    <Button size="icon" className="bg-blue-600 hover:bg-blue-700">
                      <Mic className="h-4 w-4" />
                    </Button>
                    <Button size="icon" className="bg-cyan-600 hover:bg-cyan-700">
                      <MessageSquare className="h-4 w-4" />
                    </Button>
                  </div>
                </CardFooter>
              </Card>
            </div>
          </div>

{/* Right sidebar */}
          <div className="col-span-12 lg:col-span-3">
            <div className="grid gap-6">
              {/* System time */}
              <Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm overflow-hidden">
                <CardContent className="p-0">
                  <div className="bg-gradient-to-br from-slate-800 to-slate-900 p-6 border-b border-slate-700/50">
                    <div className="text-center">
                      <div className="text-xs text-slate-500 mb-1 font-mono">SYSTEM TIME</div>
                      <div className="text-3xl font-mono text-cyan-400 mb-1">{formatTime(currentTime)}</div>
                      <div className="text-sm text-slate-400">{formatDate(currentTime)}</div>
                    </div>
                  </div>
                  <div className="p-4">
                    <div className="grid grid-cols-2 gap-3">
                      <div className="bg-slate-800/50 rounded-md p-3 border border-slate-700/50">
                        <div className="text-xs text-slate-500 mb-1">Uptime</div>
                        <div className="text-sm font-mono text-slate-200">14d 06:42:18</div>
                      </div>
                      <div className="bg-slate-800/50 rounded-md p-3 border border-slate-700/50">
                        <div className="text-xs text-slate-500 mb-1">Time Zone</div>
                        <div className="text-sm font-mono text-slate-200">UTC-08:00</div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Quick actions */}
              <Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
                <CardHeader className="pb-2">
                  <CardTitle className="text-slate-100 text-base">Quick Actions</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 gap-3">
                    <ActionButton icon={Shield} label="Security Scan" />
                    <ActionButton icon={RefreshCw} label="Sync Data" />
                    <ActionButton icon={Download} label="Backup" />
                    <ActionButton icon={Terminal} label="Console" />
                  </div>
                </CardContent>
              </Card>

{/* Resource allocation */}
              <Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
                <CardHeader className="pb-2">
                  <CardTitle className="text-slate-100 text-base">Resource Allocation</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <div className="flex items-center justify-between mb-1">
                        <div className="text-sm text-slate-400">Processing Power</div>
                        <div className="text-xs text-cyan-400">42% allocated</div>
                      </div>
                      <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
                        <div
                          className="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full"
                          style={{ width: "42%" }}
                        ></div>
                      </div>
                    </div>

<div>
                      <div className="flex items-center justify-between mb-1">
                        <div className="text-sm text-slate-400">Memory Allocation</div>
                        <div className="text-xs text-purple-400">68% allocated</div>
                      </div>
                      <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
                        <div
                          className="h-full bg-gradient-to-r from-purple-500 to-pink-500 rounded-full"
                          style={{ width: "68%" }}
                        ></div>
                      </div>
                    </div>

<div>
                      <div className="flex items-center justify-between mb-1">
                        <div className="text-sm text-slate-400">Network Bandwidth</div>
                        <div className="text-xs text-blue-400">35% allocated</div>
                      </div>
                      <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
                        <div
                          className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full"
                          style={{ width: "35%" }}
                        ></div>
                      </div>
                    </div>

<div className="pt-2 border-t border-slate-700/50">
                      <div className="flex items-center justify-between text-sm">
                        <div className="text-slate-400">Priority Level</div>
                        <div className="flex items-center">
                          <Slider defaultValue={[3]} max={5} step={1} className="w-24 mr-2" />
                          <span className="text-cyan-400">3/5</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Environment controls */}
              <Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
                <CardHeader className="pb-2">
                  <CardTitle className="text-slate-100 text-base">Environment Controls</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <Radio className="text-cyan-500 mr-2 h-4 w-4" />
                        <Label className="text-sm text-slate-400">Power Management</Label>
                      </div>
                      <Switch />
                    </div>

<div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <Lock className="text-cyan-500 mr-2 h-4 w-4" />
                        <Label className="text-sm text-slate-400">Security Protocol</Label>
                      </div>
                      <Switch defaultChecked />
                    </div>

<div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <Zap className="text-cyan-500 mr-2 h-4 w-4" />
                        <Label className="text-sm text-slate-400">Power Saving Mode</Label>
                      </div>
                      <Switch />
                    </div>

<div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <CircleOff className="text-cyan-500 mr-2 h-4 w-4" />
                        <Label className="text-sm text-slate-400">Auto Shutdown</Label>
                      </div>
                      <Switch defaultChecked />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

// Component for nav items
function NavItem({ icon: Icon, label, active }: { icon: LucideIcon; label: string; active?: boolean }) {
  return (
    <Button
      variant="ghost"
      className={`w-full justify-start ${active ? "bg-slate-800/70 text-cyan-400" : "text-slate-400 hover:text-slate-100"}`}
    >
      <Icon className="mr-2 h-4 w-4" />
      {label}
    </Button>
  )
}

// Component for status items
function StatusItem({ label, value, color }: { label: string; value: number; color: string }) {
  const getColor = () => {
    switch (color) {
      case "cyan":
        return "from-cyan-500 to-blue-500"
      case "green":
        return "from-green-500 to-emerald-500"
      case "blue":
        return "from-blue-500 to-indigo-500"
      case "purple":
        return "from-purple-500 to-pink-500"
      default:
        return "from-cyan-500 to-blue-500"
    }
  }

return (
    <div>
      <div className="flex items-center justify-between mb-1">
        <div className="text-xs text-slate-400">{label}</div>
        <div className="text-xs text-slate-400">{value}%</div>
      </div>
      <div className="h-1.5 bg-slate-800 rounded-full overflow-hidden">
        <div className={`h-full bg-gradient-to-r ${getColor()} rounded-full`} style={{ width: `${value}%` }}></div>
      </div>
    </div>
  )
}

// Component for metric cards
function MetricCard({
  title,
  value,
  icon: Icon,
  trend,
  color,
  detail,
}: {
  title: string
  value: number
  icon: LucideIcon
  trend: "up" | "down" | "stable"
  color: string
  detail: string
}) {
  const getIconColor = () => {
    switch (color) {
      case "cyan":
        return "h-5 w-5 text-cyan-500"
      case "green":
        return "h-5 w-5 text-green-500"
      case "blue":
        return "h-5 w-5 text-blue-500"
      case "purple":
        return "h-5 w-5 text-purple-500"
      default:
        return "h-5 w-5 text-cyan-500"
    }
  }

const getColor = () => {
    switch (color) {
      case "cyan":
        return "from-cyan-500 to-blue-500 border-cyan-500/30"
      case "green":
        return "from-green-500 to-emerald-500 border-green-500/30"
      case "blue":
        return "from-blue-500 to-indigo-500 border-blue-500/30"
      case "purple":
        return "from-purple-500 to-pink-500 border-purple-500/30"
      default:
        return "from-cyan-500 to-blue-500 border-cyan-500/30"
    }
  }

const getTrendIcon = () => {
    switch (trend) {
      case "up":
        return <BarChart3 className="h-4 w-4 text-amber-500" />
      case "down":
        return <BarChart3 className="h-4 w-4 rotate-180 text-green-500" />
      case "stable":
        return <LineChart className="h-4 w-4 text-blue-500" />
      default:
        return null
    }
  }

return (
    <div className={`bg-slate-800/50 rounded-lg border ${getColor()} p-4 relative overflow-hidden`}>
      <div className="flex items-center justify-between mb-2">
        <div className="text-sm text-slate-400">{title}</div>
        <Icon className={getIconColor()} />
      </div>
      <div className="text-2xl font-bold mb-1 bg-gradient-to-r bg-clip-text text-transparent from-slate-100 to-slate-300">
        {value}%
      </div>
      <div className="text-xs text-slate-500">{detail}</div>
      <div className="absolute bottom-2 right-2 flex items-center">{getTrendIcon()}</div>
      <div className="absolute -bottom-6 -right-6 h-16 w-16 rounded-full bg-gradient-to-r opacity-20 blur-xl from-cyan-500 to-blue-500"></div>
    </div>
  )
}

// Performance chart component
function PerformanceChart() {
  return (
    <div className="h-full w-full flex items-end justify-between px-4 pt-4 pb-8 relative">
      {/* Y-axis labels */}
      <div className="absolute left-2 top-0 h-full flex flex-col justify-between py-4">
        <div className="text-xs text-slate-500">100%</div>
        <div className="text-xs text-slate-500">75%</div>
        <div className="text-xs text-slate-500">50%</div>
        <div className="text-xs text-slate-500">25%</div>
        <div className="text-xs text-slate-500">0%</div>
      </div>

{/* X-axis grid lines */}
      <div className="absolute left-0 right-0 top-0 h-full flex flex-col justify-between py-4 px-10">
        <div className="border-b border-slate-700/30 w-full"></div>
        <div className="border-b border-slate-700/30 w-full"></div>
        <div className="border-b border-slate-700/30 w-full"></div>
        <div className="border-b border-slate-700/30 w-full"></div>
        <div className="border-b border-slate-700/30 w-full"></div>
      </div>

{/* Chart bars */}
      <div className="flex-1 h-full flex items-end justify-between px-2 z-10">
        {Array.from({ length: 24 }).map((_, i) => {
          const cpuHeight = Math.floor(Math.random() * 60) + 20
          const memHeight = Math.floor(Math.random() * 40) + 40
          const netHeight = Math.floor(Math.random() * 30) + 30

return (
            <div key={i} className="flex space-x-0.5">
              <div
                className="w-1 bg-gradient-to-t from-cyan-500 to-cyan-400 rounded-t-sm"
                style={{ height: `${cpuHeight}%` }}
              ></div>
              <div
                className="w-1 bg-gradient-to-t from-purple-500 to-purple-400 rounded-t-sm"
                style={{ height: `${memHeight}%` }}
              ></div>
              <div
                className="w-1 bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-sm"
                style={{ height: `${netHeight}%` }}
              ></div>
            </div>
          )
        })}
      </div>

{/* X-axis labels */}
      <div className="absolute bottom-0 left-0 right-0 flex justify-between px-10">
        <div className="text-xs text-slate-500">00:00</div>
        <div className="text-xs text-slate-500">06:00</div>
        <div className="text-xs text-slate-500">12:00</div>
        <div className="text-xs text-slate-500">18:00</div>
        <div className="text-xs text-slate-500">24:00</div>
      </div>
    </div>
  )
}

// Process row component
function ProcessRow({
  pid,
  name,
  user,
  cpu,
  memory,
  status,
}: {
  pid: string
  name: string
  user: string
  cpu: number
  memory: number
  status: string
}) {
  return (
    <div className="grid grid-cols-12 py-2 px-3 text-sm hover:bg-slate-800/50">
      <div className="col-span-1 text-slate-500">{pid}</div>
      <div className="col-span-4 text-slate-300">{name}</div>
      <div className="col-span-2 text-slate-400">{user}</div>
      <div className="col-span-2 text-cyan-400">{cpu}%</div>
      <div className="col-span-2 text-purple-400">{memory} MB</div>
      <div className="col-span-1">
        <Badge variant="outline" className="bg-green-500/10 text-green-400 border-green-500/30 text-xs">
          {status}
        </Badge>
      </div>
    </div>
  )
}

// Storage item component
function StorageItem({
  name,
  total,
  used,
  type,
}: {
  name: string
  total: number
  used: number
  type: string
}) {
  const percentage = Math.round((used / total) * 100)

return (
    <div className="bg-slate-800/50 rounded-md p-3 border border-slate-700/50">
      <div className="flex items-center justify-between mb-2">
        <div className="text-sm text-slate-300">{name}</div>
        <Badge variant="outline" className="bg-slate-700/50 text-slate-300 border-slate-600/50 text-xs">
          {type}
        </Badge>
      </div>
      <div className="mb-2">
        <div className="flex items-center justify-between mb-1">
          <div className="text-xs text-slate-500">
            {used} GB / {total} GB
          </div>
          <div className="text-xs text-slate-400">{percentage}%</div>
        </div>
        <Progress value={percentage} className="h-1.5 bg-slate-700">
          <div
            className={`h-full rounded-full ${
              percentage > 90 ? "bg-red-500" : percentage > 70 ? "bg-amber-500" : "bg-cyan-500"
            }`}
            style={{ width: `${percentage}%` }}
          />
        </Progress>
      </div>
      <div className="flex items-center justify-between text-xs">
        <div className="text-slate-500">Free: {total - used} GB</div>
        <Button variant="ghost" size="sm" className="h-6 text-xs px-2 text-slate-400 hover:text-slate-100">
          Details
        </Button>
      </div>
    </div>
  )
}

// Alert item component
function AlertItem({
  title,
  time,
  description,
  type,
}: {
  title: string
  time: string
  description: string
  type: "info" | "warning" | "error" | "success" | "update"
}) {
  const getTypeStyles = () => {
    switch (type) {
      case "info":
        return {
          icon: Info,
          iconClasses: "bg-blue-500/10 border-blue-500/30 text-blue-500",
        }
      case "warning":
        return {
          icon: AlertCircle,
          iconClasses: "bg-amber-500/10 border-amber-500/30 text-amber-500",
        }
      case "error":
        return {
          icon: AlertCircle,
          iconClasses: "bg-red-500/10 border-red-500/30 text-red-500",
        }
      case "success":
        return {
          icon: Check,
          iconClasses: "bg-green-500/10 border-green-500/30 text-green-500",
        }
      case "update":
        return {
          icon: Download,
          iconClasses: "bg-cyan-500/10 border-cyan-500/30 text-cyan-500",
        }
      default:
        return {
          icon: Info,
          iconClasses: "bg-blue-500/10 border-blue-500/30 text-blue-500",
        }
    }
  }

const { icon: Icon, iconClasses } = getTypeStyles()

return (
    <div className="flex items-start space-x-3">
      <div className={`mt-0.5 p-1 rounded-full ${iconClasses}`}>
        <Icon className="h-3 w-3" />
      </div>
      <div>
        <div className="flex items-center">
          <div className="text-sm font-medium text-slate-200">{title}</div>
          <div className="ml-2 text-xs text-slate-500">{time}</div>
        </div>
        <div className="text-xs text-slate-400">{description}</div>
      </div>
    </div>
  )
}

// Communication item component
function CommunicationItem({
  sender,
  time,
  message,
  avatar,
  unread,
}: {
  sender: string
  time: string
  message: string
  avatar: string
  unread?: boolean
}) {
  return (
    <div className={`flex space-x-3 p-2 rounded-md ${unread ? "bg-slate-800/50 border border-slate-700/50" : ""}`}>
      <Avatar className="h-8 w-8">
        <AvatarImage src={avatar || "/placeholder.svg"} alt={sender} />
        <AvatarFallback className="bg-slate-700 text-cyan-500">{sender.charAt(0)}</AvatarFallback>
      </Avatar>
      <div className="flex-1">
        <div className="flex items-center justify-between">
          <div className="text-sm font-medium text-slate-200">{sender}</div>
          <div className="text-xs text-slate-500">{time}</div>
        </div>
        <div className="text-xs text-slate-400 mt-1">{message}</div>
      </div>
      {unread && (
        <div className="flex-shrink-0 self-center">
          <div className="h-2 w-2 rounded-full bg-cyan-500"></div>
        </div>
      )}
    </div>
  )
}

// Action button component
function ActionButton({ icon: Icon, label }: { icon: LucideIcon; label: string }) {
  return (
    <Button
      variant="outline"
      className="h-auto py-3 px-3 border-slate-700 bg-slate-800/50 hover:bg-slate-700/50 flex flex-col items-center justify-center space-y-1 w-full"
    >
      <Icon className="h-5 w-5 text-cyan-500" />
      <span className="text-xs">{label}</span>
    </Button>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
"use client"

import { useEffect, useState, useRef } from "react"
import {
  Activity,
  Bell,
  Brain,
  Command,
  Database,
  Download,
  FileText,
  Globe,
  Hexagon,
  type LucideIcon,
  MessageSquare,
  Moon,
  Search,
  Settings,
  Shield,
  Sparkles,
  Terminal,
} from "lucide-react"

export default function LuunaAIPlatform() {
  const [systemStatus, setSystemStatus] = useState(85)
  const [cpuUsage, setCpuUsage] = useState(42)
  const [memoryUsage, setMemoryUsage] = useState(68)
  const [networkStatus, setNetworkStatus] = useState(92)
  const [securityLevel, setSecurityLevel] = useState(75)
  const [currentTime, setCurrentTime] = useState(new Date())
  const [isLoading, setIsLoading] = useState(true)
  const [selectedModel, setSelectedModel] = useState("luuna-70b")
  const [searchQuery, setSearchQuery] = useState("")

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This