'use client'


import { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export default function InferenceForm() {
  const [query, setQuery] = useState('')
  const [context, setContext] = useState('')
  const [response, setResponse] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    try {
      const res = await fetch('/api/inference', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query, context }),
      })
      const data = await res.json()
      setResponse(data.response)
    } catch (error) {
      console.error('Error:', error)
      setResponse('An error occurred while processing your request.')
    }
    setLoading(false)
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <Card className="mb-4">
          <CardHeader>
            <CardTitle>Context (Optional)</CardTitle>
          </CardHeader>
          <CardContent>
            <Textarea
              placeholder="Enter any relevant context or background information..."
              value={context}
              onChange={(e) => setContext(e.target.value)}
              className="mb-2"
            />
          </CardContent>
        </Card>
        <Card className="mb-4">
          <CardHeader>
            <CardTitle>Query</CardTitle>
          </CardHeader>
          <CardContent>
            <Input
              type="text"
              placeholder="Enter your question..."
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              className="mb-2"
            />
            <Button type="submit" disabled={loading}>
              {loading ? 'Processing...' : 'Submit'}
            </Button>
          </CardContent>
        </Card>
      </form>
      {response && (
        <Card>
          <CardHeader>
            <CardTitle>Response</CardTitle>
          </CardHeader>
          <CardContent>
            <p>{response}</p>
          </CardContent>
        </Card>
      )}
    </>
  )
}

// app/api/inference/route.ts
import { NextResponse } from 'next/server'

export async function POST(request: Request) {
  const { query, context } = await request.json()

  try {
    const response = await fetch('https://api.together.xyz/inference', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.TOGETHER_API_KEY}`,
      },
      body: JSON.stringify({
        model: 'togethercomputer/llama-2-70b-chat',
        prompt: `Context: ${context}\n\nQuery: ${query}\n\nResponse:`,
        max_tokens: 256,
        temperature: 0.7,
      }),
    })

    const data = await response.json()
    return NextResponse.json({ response: data.output.choices[0].text.trim() })
  } catch (error) {
    console.error('Error:', error)
    return NextResponse.json({ error: 'An error occurred while processing your request.' }, { status: 500 })
  }
}




// app/page.tsx
import InferenceForm from '@/components/inference'

export default function Home() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Educational AI Assistant</h1>
      <InferenceForm />
    </div>
  )
}

add more ui features, login options.