GitHub deploy: 8ac466cec7cb18a3cdc40223ab11ee9b5f5f569b

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/deploy-to-hf-spaces.yaml

@@ -0,0 +1,58 @@
+name: Deploy to HuggingFace Spaces
+
+on:
+  push:
+    branches:
+      - dev
+      - main
+  workflow_dispatch:
+
+jobs:
+  check-secret:
+    runs-on: ubuntu-latest
+    outputs:
+      token-set: ${{ steps.check-key.outputs.defined }}
+    steps:
+      - id: check-key
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        if: "${{ env.HF_TOKEN != '' }}"
+        run: echo "defined=true" >> $GITHUB_OUTPUT
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: [check-secret]
+    if: needs.check-secret.outputs.token-set == 'true'
+    env:
+      HF_TOKEN: ${{ secrets.HF_TOKEN }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Remove git history
+        run: rm -rf .git
+
+      - name: Prepend YAML front matter to README.md
+        run: |
+          echo "---" > temp_readme.md
+          echo "title: Imagine" >> temp_readme.md
+          echo "emoji: 🐳" >> temp_readme.md
+          echo "colorFrom: purple" >> temp_readme.md
+          echo "colorTo: gray" >> temp_readme.md
+          echo "sdk: docker" >> temp_readme.md
+          echo "pinned: false" >> temp_readme.md
+          echo "app_port: 3000" >> temp_readme.md
+          echo "---" >> temp_readme.md
+          cat README.md >> temp_readme.md
+          mv temp_readme.md README.md
+
+      - name: Configure git
+        run: |
+          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+      - name: Set up Git and push to Space
+        run: |
+          git init --initial-branch=main
+          git add .
+          git commit -m "GitHub deploy: ${{ github.sha }}"
+          git push --force https://arcticaurora:${HF_TOKEN}@huggingface.co/spaces/arcticaurora/imagine main

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+__pycache__/
+.aider*
+# ignore env file
+.env*
+test.py

Dockerfile

@@ -0,0 +1,42 @@
+# Set up the Python environment
+FROM python:3.12 AS python-base
+WORKDIR /app
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Set up Node.js environment
+FROM node:20 AS node-base
+WORKDIR /app
+
+# Copy the frontend code
+COPY package*.json ./
+RUN npm install
+COPY . .
+
+# Combine Python and Node.js
+FROM python-base
+WORKDIR /app
+
+# Copy Node.js files and set up environment
+COPY --from=node-base /app /app
+COPY --from=node-base /usr/local/bin/node /usr/local/bin/
+COPY --from=node-base /usr/local/lib/node_modules /usr/local/lib/node_modules
+RUN ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm && \
+    ln -s /usr/local/bin/node /usr/bin/node && \
+    ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/bin/npm
+
+# Copy the backend code
+COPY app ./app
+
+# Set up a non-root user
+RUN useradd -m -u 1000 appuser
+RUN chown -R appuser:appuser /app
+USER appuser
+
+# Expose the ports the apps run on
+EXPOSE 3000 8000
+
+# Start both the FastAPI backend and Next.js frontend in development mode.
+CMD ["sh", "-c", "npm run dev & uvicorn app.api.main:app --host 0.0.0.0 --port 8000"]

README.md

@@ -0,0 +1,50 @@
+---
+title: Imagine
+emoji: 🐳
+colorFrom: purple
+colorTo: gray
+sdk: docker
+pinned: false
+app_port: 3000
+---
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, install the dependencies:
+```bash
+npm install
+```
+
+Second, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/api/config.py

@@ -0,0 +1,17 @@
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+class Settings:
+    DB_USER = os.getenv("DB_USER")
+    DB_PASSWORD = os.getenv("DB_PASSWORD")
+    DB_HOST = os.getenv("DB_HOST")
+    DB_PORT = os.getenv("DB_PORT")
+    DB_NAME = os.getenv("DB_NAME")
+    OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+    OPENAI_API_BASE = os.getenv("OPENAI_API_BASE")
+    NEXT_PUBLIC_API_URL = os.getenv("NEXT_PUBLIC_API_URL")
+    APP_PASSWORD = os.getenv("APP_PASSWORD")
+
+settings = Settings()

app/api/main.py

@@ -0,0 +1,24 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from .routes import generate_image, enhance_prompt, auth
+
+app = FastAPI()
+
+# Configure CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Adjust this in production
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Include routers
+app.include_router(generate_image.router, prefix="/api")
+app.include_router(enhance_prompt.router, prefix="/api")
+app.include_router(auth.router, prefix="/api")
+
+@app.get("/")
+async def root():
+    return {"message": "Welcome to the Imagine API"}
+

app/api/models/database.py

@@ -0,0 +1,13 @@
+import psycopg2
+from ..config import settings
+
+def get_db_connection():
+    conn = psycopg2.connect(
+        dbname=settings.DB_NAME,
+        user=settings.DB_USER,
+        password=settings.DB_PASSWORD,
+        host=settings.DB_HOST,
+        port=settings.DB_PORT,
+        sslmode='require'
+    )
+    return conn

app/api/routes/auth.py

@@ -0,0 +1,16 @@
+from fastapi import APIRouter, HTTPException
+from pydantic import BaseModel
+from ..config import settings
+
+router = APIRouter()
+
+class PasswordRequest(BaseModel):
+    password: str
+
+@router.post("/check-password")
+async def check_password(request: PasswordRequest):
+    correct_password = settings.APP_PASSWORD
+    if request.password == correct_password:
+        return {"success": True}
+    else:
+        raise HTTPException(status_code=401, detail="Incorrect password")

app/api/routes/enhance_prompt.py

@@ -0,0 +1,13 @@
+from fastapi import APIRouter
+from pydantic import BaseModel
+from ..services.openai_service import enhance_prompt
+
+router = APIRouter()
+
+class PromptRequest(BaseModel):
+    prompt: str
+
+@router.post("/enhance-prompt")
+async def enhance_prompt_route(request: PromptRequest):
+    enhanced_prompt = enhance_prompt(request.prompt)
+    return {"enhancedPrompt": enhanced_prompt}

app/api/routes/generate_image.py

@@ -0,0 +1,159 @@
+from fastapi import APIRouter, HTTPException
+from fastapi.responses import StreamingResponse
+import asyncio
+import json
+from pydantic import BaseModel
+import requests
+from typing import List, Optional
+from ..models.database import get_db_connection
+from ..config import settings
+import psycopg2
+from psycopg2.extras import RealDictCursor
+
+router = APIRouter()
+
+class ImageGenerationRequest(BaseModel):
+    prompt: str
+    width: int
+    height: int
+    model: str
+    number_results: int
+    placeholderId: Optional[str] = None
+
+class Image(BaseModel):
+    url: str
+
+class Batch(BaseModel):
+    id: int
+    prompt: str
+    width: int
+    height: int
+    model: str
+    images: List[Image]
+    status: str
+    tempId: Optional[str] = None
+    createdAt: Optional[str] = None
+
+async def insert_batch(prompt: str, width: int, height: int, model: str, urls: List[str]) -> int:
+    conn = get_db_connection()
+    try:
+        with conn.cursor() as cur:
+            cur.execute('BEGIN')
+            cur.execute(
+                'INSERT INTO batches (prompt, width, height, model) VALUES (%s, %s, %s, %s) RETURNING id',
+                (prompt, width, height, model)
+            )
+            batch_id = cur.fetchone()[0]
+
+            for url in urls:
+                cur.execute(
+                    'INSERT INTO images (batch_id, url) VALUES (%s, %s)',
+                    (batch_id, url)
+                )
+
+            conn.commit()
+            return batch_id
+    except Exception as e:
+        conn.rollback()
+        raise e
+    finally:
+        conn.close()
+
+async def generate_images(request: ImageGenerationRequest):
+    try:
+        response = requests.post(
+            f"{settings.NEXT_PUBLIC_API_URL}/generate-image",
+            json=request.dict(exclude={'placeholderId'})
+        )
+        response.raise_for_status()
+        data = response.json()
+        image_urls = [image['url'] for image in data['batch']['images']]
+        batch_id = await insert_batch(request.prompt, request.width, request.height, request.model, image_urls)
+
+        return Batch(
+            id=batch_id,
+            prompt=request.prompt,
+            width=request.width,
+            height=request.height,
+            model=request.model,
+            images=[Image(url=url) for url in image_urls],
+            status='completed',
+            tempId=request.placeholderId
+        )
+    except Exception as e:
+        return Batch(id=request.placeholderId, status='error')
+
+async def stream_response(request: ImageGenerationRequest):
+    batch = await generate_images(request)
+    yield json.dumps({"batch": batch.dict()}).encode() + b'\n'
+
+@router.post("/generate-image")
+async def generate_image(request: ImageGenerationRequest):
+    return StreamingResponse(stream_response(request), media_type="application/json")
+
+@router.get("/generate-image")
+async def get_batches(page: int = 1, limit: int = 10):
+    offset = (page - 1) * limit
+    conn = get_db_connection()
+    try:
+        with conn.cursor(cursor_factory=RealDictCursor) as cur:
+            cur.execute("""
+                SELECT b.id, b.prompt, b.width, b.height, b.model, array_agg(i.url) as image_urls, b.created_at
+                FROM batches b
+                JOIN images i ON i.batch_id = b.id
+                GROUP BY b.id, b.prompt, b.width, b.height, b.model, b.created_at
+                ORDER BY b.created_at DESC
+                LIMIT %s OFFSET %s
+            """, (limit, offset))
+            batches = cur.fetchall()
+
+            cur.execute('SELECT COUNT(*) FROM batches')
+            total_count = cur.fetchone()['count']
+
+        batches = [
+            Batch(
+                id=row['id'],
+                prompt=row['prompt'],
+                width=row['width'],
+                height=row['height'],
+                model=row['model'],
+                images=[Image(url=url) for url in row['image_urls']],
+                status='completed',
+                createdAt=row['created_at'].isoformat() if row['created_at'] else None
+            ) for row in batches
+        ]
+
+        has_more = total_count > page * limit
+
+        return {"batches": batches, "hasMore": has_more}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to fetch batches: {str(e)}")
+    finally:
+        conn.close()
+
+@router.delete("/generate-image")
+async def delete_batch(id: str):
+    conn = get_db_connection()
+    try:
+        with conn.cursor() as cur:
+            # Check if the id is a UUID (tempId) or a number (actual batch id)
+            is_uuid = len(id) == 36 and '-' in id
+
+            if is_uuid:
+                # If it's a UUID, it means the batch hasn't been saved to the database yet
+                # So we don't need to delete anything from the database
+                return {"success": True}
+
+            # Delete associated images first
+            cur.execute('DELETE FROM images WHERE batch_id = %s', (id,))
+            
+            # Then delete the batch
+            cur.execute('DELETE FROM batches WHERE id = %s', (id,))
+        
+        conn.commit()
+        return {"success": True}
+    except Exception as e:
+        conn.rollback()
+        raise HTTPException(status_code=500, detail=f"Failed to delete batch: {str(e)}")
+    finally:
+        conn.close()

app/api/services/openai_service.py

@@ -0,0 +1,13 @@
+from openai import OpenAI
+from ..config import settings
+
+def enhance_prompt(prompt: str) -> str:
+    client = OpenAI(api_key=settings.OPENAI_API_KEY, base_url=settings.OPENAI_API_BASE)
+    completion = client.chat.completions.create(
+        model="gemini-1.5-flash-latest",
+        messages=[
+            {"role": "system", "content": "You are an AI assistant that enhances image generation prompts. Your task is to take a user's prompt and make it more detailed and descriptive, suitable for high-quality image generation."},
+            {"role": "user", "content": f"Enhance this image generation prompt: {prompt}. Reply with the enhanced prompt only."}
+        ]
+    )
+    return completion.choices[0].message.content

app/globals.css

@@ -0,0 +1,76 @@
+@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;
+    }
+  }

app/layout.tsx

@@ -0,0 +1,28 @@
+import './globals.css'
+import { Inter } from 'next/font/google'
+import Layout from '../components/Layout'
+
+const inter = Inter({ subsets: ['latin'],
+  variable: "--font-sans",
+ })
+
+export const metadata = {
+  title: 'Imagine - AI Image Generation',
+  description: 'Generate amazing images using AI',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.className} bg-neutral-50 dark:bg-amoled-black text-[#141414] dark:text-white`}>
+        <Layout>
+          {children}
+        </Layout>
+      </body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react';
+import GeneratorForm from '../components/ImageGenerator/GeneratorForm';
+import ImageBatch from '../components/Gallery/ImageBatch';
+import { Button } from '../components/ui/button';
+import Navbar from '../components/Navbar';
+
+interface Image {
+  url: string;
+}
+
+interface Batch {
+  id: number | string;
+  prompt: string;
+  width: number;
+  height: number;
+  model: string;
+  images: Image[];
+  createdAt?: string;
+  status?: 'pending' | 'completed' | 'error';
+  tempId?: string;
+}
+
+export default function Home() {
+  const [batches, setBatches] = useState<Batch[]>([]);
+  const [remixBatch, setRemixBatch] = useState<Batch | null>(null);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    fetchPreviousBatches();
+  }, []);
+
+  const fetchPreviousBatches = async (loadMore = false) => {
+    if (isLoading) return;
+    setIsLoading(true);
+    try {
+      const response = await fetch(`/api/generate-image?page=${loadMore ? page + 1 : 1}&limit=10`);
+      if (response.ok) {
+        const data = await response.json();
+        if (loadMore) {
+          setBatches(prev => [...prev, ...data.batches]);
+          setPage(prev => prev + 1);
+        } else {
+          setBatches(data.batches);
+        }
+        setHasMore(data.hasMore);
+      }
+    } catch (error) {
+      console.error('Error fetching previous batches:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGenerate = useCallback((newBatch: Batch & { tempId?: string }, isPlaceholder: boolean) => {
+    const batchWithTimestamp = {
+      ...newBatch,
+      createdAt: newBatch.createdAt || new Date().toISOString()
+    };
+    
+    setBatches((prev) => {
+      const index = prev.findIndex(b => 
+        (typeof b.id === 'number' && b.id === newBatch.id) || 
+        (b.tempId && b.tempId === newBatch.tempId)
+      );
+      if (index !== -1) {
+        // Update existing batch
+        const updatedBatches = [...prev];
+        updatedBatches[index] = {
+          ...batchWithTimestamp,
+          id: typeof newBatch.id === 'number' ? newBatch.id : prev[index].id, // Keep the numeric id if it exists
+          tempId: newBatch.tempId || prev[index].tempId // Keep the tempId for reference
+        };
+        return updatedBatches;
+      } else {
+        // Add new batch
+        return [batchWithTimestamp, ...prev];
+      }
+    });
+  }, []);
+
+  const handleDelete = async (id: number | string) => {
+    // Optimistically remove the batch from the UI
+    setBatches((prev) => prev.filter((batch) => 
+      (typeof batch.id === 'number' && batch.id !== id) && 
+      (batch.tempId !== id)
+    ));
+
+    // Then send the delete request to the server
+    try {
+      const response = await fetch(`/api/generate-image?id=${id}`, {
+        method: 'DELETE',
+      });
+      if (!response.ok) {
+        console.error('Failed to delete batch');
+        // If the deletion fails on the server, you might want to add the batch back to the UI
+        // This would require keeping a copy of the deleted batch or fetching it again from the server
+      }
+    } catch (error) {
+      console.error('Error deleting batch:', error);
+      // Similarly, handle the error case here if you want to revert the UI change
+    }
+  };
+
+  const handleRemix = (batch: Batch) => {
+    setRemixBatch(batch);
+  };
+
+  const handleLoadMore = () => {
+    fetchPreviousBatches(true);
+  };
+
+  const handleReload = useCallback(() => {
+    setPage(1);
+    fetchPreviousBatches();
+  }, []);
+
+  return (
+    <>
+      <Navbar onReload={handleReload} />
+      <div className="flex flex-col md:flex-row flex-1 justify-start py-5">
+        <div className="w-full md:w-80 px-4 md:px-6 mb-6 md:mb-0">
+          <GeneratorForm onGenerate={handleGenerate} remixBatch={remixBatch} />
+        </div>
+        <div className="flex-1 px-4 md:px-6 overflow-x-auto">
+          <div className="layout-content-container flex flex-col w-full">
+            {batches.map((batch) => (
+              <ImageBatch key={batch.id} batch={batch} onDelete={handleDelete} onRemix={handleRemix} />
+            ))}
+            {hasMore && (
+              <div className="flex justify-center mt-4">
+                <Button 
+                  onClick={handleLoadMore} 
+                  disabled={isLoading}
+                  variant="outline"
+                  className="bg-white dark:bg-gray-800 text-[#141414] dark:text-white font-bold"
+                >
+                  {isLoading ? 'Loading...' : 'Load More'}
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

app/password/page.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { Input } from '../../components/ui/input';
+
+export default function PasswordPage() {
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const response = await fetch('/api/check-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password }),
+      });
+
+      if (response.ok) {
+        document.cookie = 'isAuthenticated=true; path=/; max-age=604800'; // Set cookie for 7 days
+        router.push('/');
+      } else {
+        setError('Incorrect password');
+      }
+    } catch (error) {
+      console.error('Error checking password:', error);
+      setError('An error occurred. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-neutral-50 dark:bg-amoled-black">
+      <form onSubmit={handleSubmit} className="w-full max-w-md p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-lg">
+        <h1 className="text-3xl font-bold mb-6 text-center text-gray-800 dark:text-white">Enter Password</h1>
+        <div className="mb-6">
+          <Input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full p-3 text-lg"
+            placeholder="Password"
+          />
+        </div>
+        {error && <p className="text-red-500 mb-4 text-center">{error}</p>}
+        <Button 
+          type="submit" 
+          className="w-full p-3 text-lg font-semibold"
+          disabled={isLoading}
+        >
+          {isLoading ? 'Checking...' : 'Submit'}
+        </Button>
+      </form>
+    </div>
+  );
+}

components/Gallery/BatchMenu.tsx

@@ -0,0 +1,67 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { MoreHorizontal, Trash2, RefreshCw } from 'lucide-react';
+import { Button } from '../ui/button';
+
+interface BatchMenuProps {
+  onDelete: () => void;
+  onRemix: () => void;
+}
+
+export default function BatchMenu({ onDelete, onRemix }: BatchMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <MoreHorizontal className="h-4 w-4" />
+      </Button>
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-50">
+          <div className="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+            <button
+              onClick={() => {
+                onRemix();
+                setIsOpen(false);
+              }}
+              className="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-900 w-full text-left"
+              role="menuitem"
+            >
+              <RefreshCw className="mr-2 h-4 w-4" />
+              <span>Remix</span>
+            </button>
+            <button
+              onClick={() => {
+                onDelete();
+                setIsOpen(false);
+              }}
+              className="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-900 w-full text-left"
+              role="menuitem"
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              <span>Delete</span>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

components/Gallery/ImageBatch.tsx

@@ -0,0 +1,157 @@
+import { useState, useRef, useEffect } from 'react';
+import ImageCard from './ImageCard';
+import BatchMenu from './BatchMenu';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"
+import { Copy, Check } from 'lucide-react';
+import { Button } from '../ui/button';
+
+const formatTimestamp = (timestamp: string | undefined) => {
+  if (!timestamp) return '';
+  
+  const date = new Date(timestamp);
+  if (isNaN(date.getTime())) return '';
+
+  const now = new Date();
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const year = date.getFullYear();
+
+  const timeString = `${hours}:${minutes}`;
+  const dateString = date.getFullYear() === now.getFullYear() 
+    ? `${day}-${month}`
+    : `${day}-${month}-${year}`;
+
+  return `${timeString} ${dateString}`;
+};
+
+interface Image {
+  url: string;
+}
+
+interface Batch {
+  id: number;
+  prompt: string;
+  width: number;
+  height: number;
+  model: string;
+  images: Image[];
+  createdAt?: string;
+  status?: string;
+}
+
+const modelNames: { [key: string]: string } = {
+  'runware:100@1': 'FLUX SCHNELL',
+  'runware:101@1': 'FLUX DEV'
+};
+
+interface ImageBatchProps {
+  batch: Batch;
+  onDelete: (id: number) => void;
+  onRemix: (batch: Batch) => void;
+}
+
+export default function ImageBatch({ batch, onDelete, onRemix }: ImageBatchProps) {
+  const [copied, setCopied] = useState(false);
+  const [isPromptTruncated, setIsPromptTruncated] = useState(false);
+  const promptRef = useRef<HTMLParagraphElement>(null);
+  const modelName = modelNames[batch.model] || batch.model;
+  const [elapsedTime, setElapsedTime] = useState(0);
+
+  useEffect(() => {
+    const checkTruncation = () => {
+      if (promptRef.current) {
+        setIsPromptTruncated(
+          promptRef.current.scrollWidth > promptRef.current.clientWidth
+        );
+      }
+    };
+
+    checkTruncation();
+    window.addEventListener('resize', checkTruncation);
+
+    return () => {
+      window.removeEventListener('resize', checkTruncation);
+    };
+  }, [batch.prompt]);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (batch.status === 'pending') {
+      const startTime = new Date(batch.createdAt || Date.now()).getTime();
+      interval = setInterval(() => {
+        const now = Date.now();
+        setElapsedTime((now - startTime) / 1000);
+      }, 100);
+    }
+    return () => clearInterval(interval);
+  }, [batch.status, batch.createdAt]);
+
+  const handleDelete = () => {
+    onDelete(batch.id);
+  };
+
+  const handleRemix = () => {
+    onRemix(batch);
+  };
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(batch.prompt).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  return (
+    <div className="mb-4 rounded-xl p-3 bg-[#ededed] dark:bg-gray-900">
+      <div className="flex flex-col">
+        <div className="flex items-center justify-between">
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <p ref={promptRef} className="text-[#141414] dark:text-white text-xs font-medium truncate cursor-default max-w-[95%]">{batch.prompt}</p>
+              </TooltipTrigger>
+              {isPromptTruncated && (
+                <TooltipContent side="bottom" align="center" className="max-w-md">
+                  <p className="text-sm">{batch.prompt}</p>
+                </TooltipContent>
+              )}
+            </Tooltip>
+          </TooltipProvider>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6 flex-shrink-0"
+              onClick={copyToClipboard}
+            >
+              {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+            </Button>
+            <BatchMenu onDelete={handleDelete} onRemix={handleRemix} />
+          </div>
+        </div>
+        <p className="text-[#141414] dark:text-white text-[10px] mt-0">
+          {modelName} | {batch.width}x{batch.height}{formatTimestamp(batch.createdAt) && ` • ${formatTimestamp(batch.createdAt)}`}
+        </p>
+      </div>
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mt-2">
+        {batch.images.map((image, index) => (
+          <ImageCard 
+            key={index} 
+            image={image} 
+            batchImages={batch.images} 
+            batchId={batch.id} 
+            status={batch.status}
+            width={batch.width}
+            height={batch.height}
+            elapsedTime={elapsedTime}
+          />
+        ))}
+      </div>
+      {batch.status === 'error' && (
+        <p className="text-red-500 mt-2">Error generating images. Please try again.</p>
+      )}
+    </div>
+  );
+}

components/Gallery/ImageCard.tsx

@@ -0,0 +1,82 @@
+import { useEffect } from 'react';
+import { Fancybox } from "@fancyapps/ui";
+import "@fancyapps/ui/dist/fancybox/fancybox.css";
+
+interface Image {
+  url: string;
+}
+
+interface ImageCardProps {
+  image: Image;
+  batchImages: Image[];
+  batchId: number;
+  status?: 'pending' | 'error' | 'completed';
+  width: number;
+  height: number;
+  elapsedTime: number;
+}
+
+export default function ImageCard({ image, batchImages, batchId, status, width, height, elapsedTime }: ImageCardProps) {
+  useEffect(() => {
+    Fancybox.bind(`[data-fancybox="gallery-${batchId}"]`, {
+      contentClick: "iterateZoom",
+      Images: {
+        Panzoom: {
+          maxScale: 8,
+        },
+      },
+      Toolbar: {
+        display: {
+          left: ["infobar"],
+          middle: [],
+          right: ["iterateZoom", "fullscreen", "download", "thumbs", "close"],
+        }
+      },
+      Thumbs: {
+        type: "classic",
+      },
+    });
+
+    return () => {
+      Fancybox.destroy();
+    };
+  }, [batchId]);
+
+  const aspectRatio = `${width} / ${height}`;
+
+  return (
+    <a
+      href={image.url}
+      data-fancybox={`gallery-${batchId}`}
+      data-src={image.url}
+      className="block relative"
+      style={{ aspectRatio }}
+    >
+      <div
+        className={`w-full h-full bg-center bg-no-repeat bg-cover rounded-xl cursor-pointer overflow-hidden ${
+          status === 'pending' ? 'animate-pulse bg-gray-300 dark:bg-gray-700' : ''
+        }`}
+        style={status !== 'pending' ? {backgroundImage: `url("${image.url}")`} : {}}
+      >
+        {status === 'pending' && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="relative w-16 h-16">
+              <svg className="animate-spin h-16 w-16 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              <div className="absolute inset-0 flex items-center justify-center">
+                <span className="text-primary font-bold">{elapsedTime.toFixed(1)}s</span>
+              </div>
+            </div>
+          </div>
+        )}
+        {status === 'error' && (
+          <div className="flex items-center justify-center h-full bg-red-200 dark:bg-red-900 rounded-xl">
+            <span className="text-red-500 dark:text-red-300">Error</span>
+          </div>
+        )}
+      </div>
+    </a>
+  );
+}

components/Gallery/ImageGrid.tsx

@@ -0,0 +1,20 @@
+import ImageCard from './ImageCard';
+
+interface Image {
+  url: string;
+}
+
+export default function ImageGrid({ title, images, batchId }: { title: string; images: Image[]; batchId: number }) {
+  return (
+    <div className="mb-8">
+      <h2 className="text-[#141414] dark:text-white text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">{title}</h2>
+      <div className="flex overflow-x-auto pb-4">
+        <div className="flex gap-3 md:gap-4 px-4">
+          {images.map((image, index) => (
+            <ImageCard key={index} image={image} batchImages={images} batchId={batchId} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

components/Header.tsx

@@ -0,0 +1,47 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function Header() {
+  return (
+    <header className="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#ededed] px-10 py-3">
+      <div className="flex items-center gap-8">
+        <div className="flex items-center gap-4 text-[#141414]">
+          <div className="size-4">
+            <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fillRule="evenodd" clipRule="evenodd" d="M24 18.4228L42 11.475V34.3663C42 34.7796 41.7457 35.1504 41.3601 35.2992L24 42V18.4228Z" fill="currentColor"></path>
+              <path fillRule="evenodd" clipRule="evenodd" d="M24 8.18819L33.4123 11.574L24 15.2071L14.5877 11.574L24 8.18819ZM9 15.8487L21 20.4805V37.6263L9 32.9945V15.8487ZM27 37.6263V20.4805L39 15.8487V32.9945L27 37.6263ZM25.354 2.29885C24.4788 1.98402 23.5212 1.98402 22.646 2.29885L4.98454 8.65208C3.7939 9.08038 3 10.2097 3 11.475V34.3663C3 36.0196 4.01719 37.5026 5.55962 38.098L22.9197 44.7987C23.6149 45.0671 24.3851 45.0671 25.0803 44.7987L42.4404 38.098C43.9828 37.5026 45 36.0196 45 34.3663V11.475C45 10.2097 44.2061 9.08038 43.0155 8.65208L25.354 2.29885Z" fill="currentColor"></path>
+            </svg>
+          </div>
+          <h2 className="text-[#141414] text-lg font-bold leading-tight tracking-[-0.015em]">ImageGen</h2>
+        </div>
+        <div className="flex items-center gap-9">
+          <Link href="#" className="text-[#141414] text-sm font-medium leading-normal">Home</Link>
+          <Link href="#" className="text-[#141414] text-sm font-medium leading-normal">Explore</Link>
+          <Link href="#" className="text-[#141414] text-sm font-medium leading-normal">Create</Link>
+        </div>
+      </div>
+      <div className="flex flex-1 justify-end gap-8">
+        <label className="flex flex-col min-w-40 !h-10 max-w-64">
+          <div className="flex w-full flex-1 items-stretch rounded-xl h-full">
+            <div className="text-neutral-500 flex border-none bg-[#ededed] items-center justify-center pl-4 rounded-l-xl border-r-0">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
+                <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
+              </svg>
+            </div>
+            <input
+              placeholder="Search"
+              className="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#141414] focus:outline-0 focus:ring-0 border-none bg-[#ededed] focus:border-none h-full placeholder:text-neutral-500 px-4 rounded-l-none border-l-0 pl-2 text-base font-normal leading-normal"
+            />
+          </div>
+        </label>
+        <button className="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-10 px-4 bg-[#ededed] text-[#141414] text-sm font-bold leading-normal tracking-[0.015em]">
+          <span className="truncate">4.6k credits</span>
+        </button>
+        <div
+          className="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10"
+          style={{backgroundImage: 'url("https://cdn.usegalileo.ai/sdxl10/a879f542-e73c-43af-9e70-cc7859996bc5.png")'}}
+        ></div>
+      </div>
+    </header>
+  );
+}

components/ImageGenerator/AspectRatioSelector.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
+
+interface AspectRatioSelectorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function AspectRatioSelector({ value, onChange }: AspectRatioSelectorProps) {
+  return (
+    <div className="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
+      <label className="flex flex-col min-w-40 flex-1">
+        <p className="text-[#141414] dark:text-white text-base font-medium leading-normal pb-2">Aspect Ratio</p>
+        <Select value={value} onValueChange={onChange}>
+          <SelectTrigger className="w-full bg-[#ededed] dark:bg-gray-900 border-none rounded-2xl h-14 px-4">
+            <SelectValue placeholder="Choose aspect ratio" />
+          </SelectTrigger>
+          <SelectContent className="bg-[#ededed] dark:bg-gray-900 rounded-2xl">
+            <SelectItem value="square">Square (1024x1024)</SelectItem>
+            <SelectItem value="portrait">Portrait (832x1216)</SelectItem>
+            <SelectItem value="landscape">Landscape (1216x832)</SelectItem>
+          </SelectContent>
+        </Select>
+      </label>
+    </div>
+  );
+}

components/ImageGenerator/GeneratorForm.tsx

@@ -0,0 +1,157 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Loader2 } from 'lucide-react';
+import ModelSelector from './ModelSelector';
+import PromptInput from './PromptInput';
+import AspectRatioSelector from './AspectRatioSelector';
+import ImageCountSlider from './ImageCountSlider';
+import { Button } from '../ui/button';
+import { v4 as uuidv4 } from 'uuid';
+
+interface Image {
+  url: string;
+}
+
+interface Batch {
+  id: number | string; // Allow string for tempId
+  prompt: string;
+  width: number;
+  height: number;
+  model: string;
+  images: Image[];
+  status?: string;
+  tempId?: string;
+}
+
+export default function GeneratorForm({ onGenerate, remixBatch }: { onGenerate: (batch: Batch, isPlaceholder: boolean) => void, remixBatch: Batch | null }) {
+  const [prompt, setPrompt] = useState('');
+  const [model, setModel] = useState('runware:100@1'); // FLUX SCHNELL as default
+  const [aspectRatio, setAspectRatio] = useState('square');
+  const [imageCount, setImageCount] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (remixBatch) {
+      setPrompt(remixBatch.prompt);
+      setModel(remixBatch.model);
+      setAspectRatio(getAspectRatioFromDimensions(remixBatch.width, remixBatch.height));
+      setImageCount(remixBatch.images.length);
+    }
+  }, [remixBatch]);
+
+  const getAspectRatioFromDimensions = (width: number, height: number) => {
+    if (width === height) return 'square';
+    if (width === 832 && height === 1216) return 'portrait';
+    if (width === 1216 && height === 832) return 'landscape';
+    return 'square'; // Default to square if dimensions don't match known ratios
+  };
+
+  const aspectRatios: { [key: string]: { width: number; height: number } } = {
+    square: { width: 1024, height: 1024 },
+    landscape: { width: 1216, height: 832 },
+    portrait: { width: 832, height: 1216 }
+  };
+
+  const handleGenerate = useCallback(async () => {
+    setError(null);
+    const placeholderId = uuidv4();
+    const placeholderBatch: Batch = {
+      id: placeholderId,
+      prompt,
+      width: aspectRatios[aspectRatio as keyof typeof aspectRatios].width,
+      height: aspectRatios[aspectRatio as keyof typeof aspectRatios].height,
+      model,
+      images: Array(imageCount).fill({ url: '/placeholder-image.png' }),
+      status: 'pending',
+      tempId: placeholderId
+    };
+    onGenerate(placeholderBatch, true);
+
+    try {
+      const response = await fetch('/api/generate-image', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          prompt,
+          width: placeholderBatch.width,
+          height: placeholderBatch.height,
+          model,
+          number_results: imageCount,
+          placeholderId,
+        }),
+      });
+      
+      if (!response.ok) {
+        throw new Error('Failed to generate image');
+      }
+
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error('Failed to read response');
+      }
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        
+        const chunk = new TextDecoder().decode(value);
+        const data = JSON.parse(chunk);
+        
+        if (data.batch) {
+          onGenerate({ ...data.batch, tempId: placeholderId }, false);
+        }
+      }
+    } catch (error) {
+      console.error('Error generating image:', error);
+      setError(error instanceof Error ? error.message : 'An unknown error occurred');
+      onGenerate({ ...placeholderBatch, status: 'error' }, false);
+    }
+  }, [aspectRatio, prompt, model, imageCount, onGenerate, aspectRatios]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+        event.preventDefault();
+        handleGenerate();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleGenerate]);
+
+  return (
+    <div className="layout-content-container flex flex-col w-full md:w-80">
+      <PromptInput value={prompt} onChange={setPrompt} />
+      <ModelSelector value={model} onChange={setModel} />
+      <AspectRatioSelector value={aspectRatio} onChange={setAspectRatio} />
+      <ImageCountSlider value={imageCount} onChange={setImageCount} />
+      {error && (
+        <div className="px-4 py-2 mb-3 text-red-500 bg-red-100 dark:bg-red-900 dark:text-red-100 rounded-md">
+          {error}
+        </div>
+      )}
+      <div className="flex px-4 py-3">
+        <Button 
+          variant="outline" 
+          className="w-full justify-center bg-white dark:bg-gray-800 text-[#141414] dark:text-white font-bold"
+          onClick={handleGenerate}
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <>
+              <Loader2 className="mr-2 size-4 animate-spin" />
+              Generating...
+            </>
+          ) : (
+            'Generate'
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}

components/ImageGenerator/ImageCountSlider.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import React from 'react';
+import { Slider } from '../ui/slider';
+
+interface ImageCountSliderProps {
+  value: number;
+  onChange: (value: number) => void;
+}
+
+export default function ImageCountSlider({ value, onChange }: ImageCountSliderProps) {
+  return (
+    <div className="flex flex-col px-4 py-3">
+      <div className="flex justify-between items-center mb-2">
+        <p className="text-[#141414] dark:text-white text-base font-medium leading-normal">Image Count</p>
+        <p className="text-[#141414] dark:text-white text-sm font-normal leading-normal">{value}</p>
+      </div>
+      <Slider
+        min={1}
+        max={4}
+        step={1}
+        value={[value]}
+        onValueChange={(newValue) => onChange(newValue[0])}
+        className="w-full"
+        formatLabel={(value) => `${value}`}
+      />
+    </div>
+  );
+}

components/ImageGenerator/ModelSelector.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
+
+interface ModelSelectorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function ModelSelector({ value, onChange }: ModelSelectorProps) {
+  return (
+    <div className="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
+      <label className="flex flex-col min-w-40 flex-1">
+        <p className="text-[#141414] dark:text-white text-base font-medium leading-normal pb-2">Model</p>
+        <Select value={value} onValueChange={onChange}>
+          <SelectTrigger className="w-full bg-[#ededed] dark:bg-gray-900 border-none rounded-2xl h-14 px-4">
+            <SelectValue placeholder="Choose model" />
+          </SelectTrigger>
+          <SelectContent className="bg-[#ededed] dark:bg-gray-900 rounded-2xl">
+            <SelectItem value="runware:100@1">FLUX SCHNELL</SelectItem>
+            <SelectItem value="runware:101@1">FLUX DEV</SelectItem>
+          </SelectContent>
+        </Select>
+      </label>
+    </div>
+  )
+}

components/ImageGenerator/PromptInput.tsx

@@ -0,0 +1,101 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Wand2, Undo2 } from 'lucide-react';
+import { Button } from '../ui/button';
+
+interface PromptInputProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function PromptInput({ value, onChange }: PromptInputProps) {
+  const [isEnhancing, setIsEnhancing] = useState(false);
+  const [previousPrompt, setPreviousPrompt] = useState('');
+  const [isEnhanced, setIsEnhanced] = useState(false);
+
+  const enhancePrompt = useCallback(async () => {
+    if (!value.trim() || isEnhancing) return;
+
+    setIsEnhancing(true);
+    setPreviousPrompt(value);
+    try {
+      const response = await fetch('/api/enhance-prompt', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ prompt: value }),
+      });
+      
+      if (!response.ok) {
+        throw new Error('Failed to enhance prompt');
+      }
+
+      const data = await response.json();
+      onChange(data.enhancedPrompt);
+      setIsEnhanced(true);
+    } catch (error) {
+      console.error('Error enhancing prompt:', error);
+    } finally {
+      setIsEnhancing(false);
+    }
+  }, [value, onChange]);
+
+  const undoEnhance = useCallback(() => {
+    onChange(previousPrompt);
+    setIsEnhanced(false);
+  }, [previousPrompt, onChange]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'i') {
+        event.preventDefault();
+        enhancePrompt();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [enhancePrompt]);
+
+  return (
+    <div className="flex flex-col w-full gap-2 px-4 py-3">
+      <div className="flex justify-between items-center">
+        <label htmlFor="prompt-input" className="text-[#141414] dark:text-white text-base font-medium leading-normal">
+          Prompt
+        </label>
+        <div className="flex gap-2">
+          {isEnhanced && (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={undoEnhance}
+              title="Undo enhance"
+              className="h-8 w-8"
+            >
+              <Undo2 className="h-4 w-4" />
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={enhancePrompt}
+            disabled={isEnhancing || !value.trim()}
+            title="Enhance prompt (Ctrl+I / Cmd+I)"
+            className="h-8 w-8"
+          >
+            <Wand2 className={`h-4 w-4 ${isEnhancing ? 'animate-pulse' : ''}`} />
+          </Button>
+        </div>
+      </div>
+      <textarea
+        id="prompt-input"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="Type your prompt here"
+        className="w-full min-h-[150px] p-4 rounded-xl text-[#141414] dark:text-white focus:outline-none focus:ring-0 border-none bg-[#ededed] dark:bg-gray-900 placeholder:text-neutral-500 dark:placeholder:text-gray-400 text-base font-normal leading-normal resize-none"
+      />
+    </div>
+  );
+}

components/Layout.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <div className="relative flex min-h-screen flex-col bg-neutral-50 dark:bg-amoled-black overflow-x-hidden">
+        <main className="flex-grow">
+          {children}
+        </main>
+      </div>
+    </ThemeProvider>
+  );
+}

components/MainContent.tsx

@@ -0,0 +1,27 @@
+import ImageGrid from './Gallery/ImageGrid';
+
+export default function MainContent() {
+  const currentImages = [
+    { url: "https://cdn.usegalileo.ai/stability/01f4939b-b0b4-4a14-ba61-a2f049aa4cde.png" },
+    { url: "https://cdn.usegalileo.ai/stability/43b6ac61-1427-4ddf-8c99-ab43c5cb8746.png" },
+    { url: "https://cdn.usegalileo.ai/stability/84b80f3d-decd-468c-ae69-6deabde1c7b2.png" }
+  ];
+
+  const previousImages = [
+    { url: "https://cdn.usegalileo.ai/stability/318d9396-efa7-485d-8433-2e2de66d869b.png" },
+    { url: "https://cdn.usegalileo.ai/stability/3a91c59c-6f67-4624-b28b-ebba9aea7a60.png" },
+    { url: "https://cdn.usegalileo.ai/stability/aa91a32b-9d69-4382-afdf-f9ca99cef62a.png" }
+  ];
+
+  return (
+    <div className="layout-content-container flex flex-col max-w-[960px] flex-1">
+      <div className="flex flex-wrap justify-between gap-3 p-4">
+        <p className="text-[#141414] text-4xl font-black leading-tight tracking-[-0.033em] min-w-72">
+          Fantasy castle on a hilltop, surrounded by rolling hills and a beautiful sunset, magical, serene, high details, romantic, stylized
+        </p>
+      </div>
+      <ImageGrid title="Current Generation" images={currentImages} batchId={1} />
+      <ImageGrid title="Previously Generated" images={previousImages} batchId={2} />
+    </div>
+  );
+}

components/Navbar.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { ThemeToggle } from './ThemeToggle';
+import { Button } from './ui/button';
+import { useRouter, usePathname } from 'next/navigation';
+import { LogOut, RefreshCw, ImagePlus } from 'lucide-react';
+import { useState } from 'react';
+import Link from 'next/link';
+
+interface NavbarProps {
+  onReload: () => void;
+}
+
+export default function Navbar({ onReload }: NavbarProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isReloading, setIsReloading] = useState(false);
+
+  const handleLogout = () => {
+    // Clear the authentication cookie
+    document.cookie = 'isAuthenticated=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+    // Redirect to the password page
+    router.push('/password');
+  };
+
+  const handleReload = () => {
+    setIsReloading(true);
+    onReload();
+    setTimeout(() => setIsReloading(false), 500); // Reset after 0.5 seconds
+  };
+
+  const handleHomeClick = () => {
+    if (pathname === '/') {
+      window.location.reload();
+    } else {
+      router.push('/');
+    }
+  };
+
+  const isPasswordPage = pathname === '/password';
+
+  return (
+    <header className="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#ededed] dark:border-b-gray-800 px-10 py-0.5 bg-white dark:bg-amoled-black text-[#141414] dark:text-white">
+      <div className="flex items-center gap-4 cursor-pointer" onClick={handleHomeClick}>
+        <ImagePlus className="h-6 w-6 text-primary" />
+        <h2 className="text-lg font-bold leading-tight tracking-[-0.015em]">Imagine</h2>
+      </div>
+      <div className="flex items-center gap-4">
+        {!isPasswordPage && (
+          <>
+            <Button 
+              onClick={handleReload} 
+              variant="ghost" 
+              size="icon" 
+              title="Reload batches"
+              className={`transition-transform duration-500 ease-in-out ${isReloading ? 'rotate-180' : ''}`}
+              disabled={isReloading}
+            >
+              <RefreshCw className={`h-[1.2rem] w-[1.2rem] ${isReloading ? 'animate-spin' : ''}`} />
+              <span className="sr-only">Reload</span>
+            </Button>
+            <ThemeToggle />
+            <Button onClick={handleLogout} variant="ghost" size="icon">
+              <LogOut className="h-[1.2rem] w-[1.2rem]" />
+              <span className="sr-only">Logout</span>
+            </Button>
+          </>
+        )}
+      </div>
+    </header>
+  );
+}

components/SearchInput.tsx

@@ -0,0 +1,17 @@
+export default function SearchInput() {
+  return (
+    <label className="flex flex-col min-w-40 !h-10 max-w-64">
+      <div className="flex w-full flex-1 items-stretch rounded-xl h-full">
+        <div className="text-neutral-500 dark:text-gray-400 flex border-none bg-[#ededed] dark:bg-gray-900 items-center justify-center pl-4 rounded-l-xl border-r-0">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
+            <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
+          </svg>
+        </div>
+        <input
+          placeholder="Search"
+          className="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#141414] dark:text-white focus:outline-0 focus:ring-0 border-none bg-[#ededed] dark:bg-gray-900 focus:border-none h-full placeholder:text-neutral-500 dark:placeholder:text-gray-400 px-4 rounded-l-none border-l-0 pl-2 text-base font-normal leading-normal"
+        />
+      </div>
+    </label>
+  );
+}

components/Sidebar.tsx

@@ -0,0 +1,59 @@
+export default function Sidebar() {
+  return (
+    <div className="layout-content-container flex flex-col w-80">
+      <h2 className="text-[#141414] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Create</h2>
+      <div className="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
+        <label className="flex flex-col min-w-40 flex-1">
+          <p className="text-[#141414] text-base font-medium leading-normal pb-2">Model</p>
+          <select className="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#141414] focus:outline-0 focus:ring-0 border-none bg-[#ededed] focus:border-none h-14 bg-[image:--select-button-svg] placeholder:text-neutral-500 p-4 text-base font-normal leading-normal">
+            <option value="one">Choose model</option>
+            <option value="two">two</option>
+            <option value="three">three</option>
+          </select>
+        </label>
+      </div>
+      <div className="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
+        <label className="flex flex-col min-w-40 flex-1">
+          <p className="text-[#141414] text-base font-medium leading-normal pb-2">Prompt</p>
+          <textarea
+            placeholder="Type your prompt here"
+            className="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#141414] focus:outline-0 focus:ring-0 border-none bg-[#ededed] focus:border-none min-h-36 placeholder:text-neutral-500 p-4 text-base font-normal leading-normal"
+          ></textarea>
+        </label>
+      </div>
+      <div className="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
+        <label className="flex flex-col min-w-40 flex-1">
+          <p className="text-[#141414] text-base font-medium leading-normal pb-2">Aspect Ratio</p>
+          <select className="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#141414] focus:outline-0 focus:ring-0 border-none bg-[#ededed] focus:border-none h-14 bg-[image:--select-button-svg] placeholder:text-neutral-500 p-4 text-base font-normal leading-normal">
+            <option value="one">Choose aspect ratio</option>
+            <option value="two">two</option>
+            <option value="three">three</option>
+          </select>
+        </label>
+      </div>
+      <div className="@container">
+        <div className="relative flex w-full flex-col items-start justify-between gap-3 p-4 @[480px]:flex-row @[480px]:items-center">
+          <div className="flex w-full shrink-[3] items-center justify-between">
+            <p className="text-[#141414] text-base font-medium leading-normal">Image Count</p>
+            <p className="text-[#141414] text-sm font-normal leading-normal @[480px]:hidden">3</p>
+          </div>
+          <div className="flex h-4 w-full items-center gap-4">
+            <div className="flex h-1 flex-1 rounded-sm bg-[#dbdbdb]">
+              <div className="h-full w-[32%] rounded-sm bg-white"></div>
+              <div className="relative"><div className="absolute -left-2 -top-1.5 size-4 rounded-full bg-white"></div></div>
+            </div>
+            <p className="text-[#141414] text-sm font-normal leading-normal hidden @[480px]:block">3</p>
+          </div>
+        </div>
+      </div>
+      <div className="flex px-4 py-3">
+        <button className="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-10 px-4 flex-1 bg-white text-[#141414] gap-2 pl-4 text-sm font-bold leading-normal tracking-[0.015em]">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 256 256">
+            <path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"></path>
+          </svg>
+          <span className="truncate">Dream (0.91)</span>
+        </button>
+      </div>
+    </div>
+  );
+}

components/ThemeToggle.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { Moon, Sun } from 'lucide-react'
+import { Button } from './ui/button'
+
+export function ThemeToggle() {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+    >
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

components/User/CreditDisplay.tsx

@@ -0,0 +1 @@
+// This component is no longer needed and can be removed.

components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { ny } from '@/lib/utils'
+
+const buttonVariants = cva(
+   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+   {
+      variants: {
+         variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+            outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+            secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+            link: 'text-primary underline-offset-4 hover:underline',
+         },
+         size: {
+            default: 'h-10 px-4 py-2',
+            sm: 'h-9 rounded-md px-3',
+            lg: 'h-11 rounded-md px-8',
+            icon: 'h-10 w-10',
+         },
+      },
+      defaultVariants: {
+         variant: 'default',
+         size: 'default',
+      },
+   },
+)
+
+export interface ButtonProps
+   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+   VariantProps<typeof buttonVariants> {
+   asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+   ({ className, variant, size, asChild = false, ...props }, ref) => {
+      const Comp = asChild ? Slot : 'button'
+      return (
+         <Comp
+            className={ny(buttonVariants({ variant, size, className }))}
+            ref={ref}
+            {...props}
+         />
+      )
+   },
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { ny } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={ny(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

components/ui/select.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+
+import { ny } from '@/lib/utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+   React.ElementRef<typeof SelectPrimitive.Trigger>,
+   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+   <SelectPrimitive.Trigger
+      ref={ref}
+      className={ny(
+         'border-input bg-background ring-offset-background placeholder:data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-full border px-3 py-2 text-left text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+         className,
+      )}
+      {...props}
+   >
+      {children}
+      <SelectPrimitive.Icon asChild>
+         <ChevronDown className="size-4 shrink-0 opacity-50" />
+      </SelectPrimitive.Icon>
+   </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+   <SelectPrimitive.ScrollUpButton
+      ref={ref}
+      className={ny(
+         'flex cursor-default items-center justify-center py-1',
+         className,
+      )}
+      {...props}
+   >
+      <ChevronUp className="size-4" />
+   </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+   <SelectPrimitive.ScrollDownButton
+      ref={ref}
+      className={ny(
+         'flex cursor-default items-center justify-center py-1',
+         className,
+      )}
+      {...props}
+   >
+      <ChevronDown className="size-4" />
+   </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName
+  = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+   React.ElementRef<typeof SelectPrimitive.Content>,
+   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+   <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+         ref={ref}
+         className={ny(
+            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-2xl border shadow-md',
+            position === 'popper'
+            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+            className,
+         )}
+         position={position}
+         {...props}
+      >
+         <SelectScrollUpButton />
+         <SelectPrimitive.Viewport
+            className={ny(
+               'p-1',
+               position === 'popper'
+               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+            )}
+         >
+            {children}
+         </SelectPrimitive.Viewport>
+         <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+   </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+   React.ElementRef<typeof SelectPrimitive.Label>,
+   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+   <SelectPrimitive.Label
+      ref={ref}
+      className={ny('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+      {...props}
+   />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+   React.ElementRef<typeof SelectPrimitive.Item>,
+   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+   <SelectPrimitive.Item
+      ref={ref}
+      className={ny(
+         'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+         className,
+      )}
+      {...props}
+   >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+         <SelectPrimitive.ItemIndicator>
+            <Check className="size-4" />
+         </SelectPrimitive.ItemIndicator>
+      </span>
+
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+   </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+   React.ElementRef<typeof SelectPrimitive.Separator>,
+   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+   <SelectPrimitive.Separator
+      ref={ref}
+      className={ny('bg-muted -mx-1 my-1 h-px', className)}
+      {...props}
+   />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+   Select,
+   SelectGroup,
+   SelectValue,
+   SelectTrigger,
+   SelectContent,
+   SelectLabel,
+   SelectItem,
+   SelectSeparator,
+   SelectScrollUpButton,
+   SelectScrollDownButton,
+}

components/ui/slider.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { ny } from '@/lib/utils'
+
+interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+   showSteps?: 'none' | 'half' | 'full'
+   formatLabel?: (value: number) => string
+   formatLabelSide?: string
+}
+
+const Slider = React.forwardRef<
+   React.ElementRef<typeof SliderPrimitive.Root>,
+   SliderProps
+>(({ className, showSteps = 'none', formatLabel, formatLabelSide = 'top', ...props }, ref) => {
+   const { min = 0, max = 100, step = 1, orientation = 'horizontal', value, defaultValue, onValueChange } = props
+   const [hoveredThumbIndex, setHoveredThumbIndex] = React.useState<boolean>(false)
+   const numberOfSteps = Math.floor((max - min) / step)
+   const stepLines = Array.from({ length: numberOfSteps }, (_, index) => index * step + min)
+
+   const initialValue = Array.isArray(value) ? value : (Array.isArray(defaultValue) ? defaultValue : [min, max])
+   const [localValues, setLocalValues] = React.useState<number[]>(initialValue)
+
+   React.useEffect(() => {
+      if (!isEqual(value, localValues))
+         setLocalValues(Array.isArray(value) ? value : (Array.isArray(defaultValue) ? defaultValue : [min, max]))
+   }, [min, max, value])
+
+   const handleValueChange = (newValues: number[]) => {
+      setLocalValues(newValues)
+      if (onValueChange)
+         onValueChange(newValues)
+   }
+
+   function isEqual(array1: number[] | undefined, array2: number[] | undefined) {
+      array1 = array1 ?? []
+      array2 = array2 ?? []
+
+      if (array1.length !== array2.length)
+         return false
+
+      for (let i = 0; i < array1.length; i++) {
+         if (array1[i] !== array2[i])
+            return false
+      }
+
+      return true
+   }
+
+   return (
+      <SliderPrimitive.Root
+         ref={ref}
+         className={ny(
+            'relative flex cursor-pointer touch-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            orientation === 'horizontal' ? 'w-full items-center' : 'h-full justify-center',
+            className,
+         )}
+         min={min}
+         max={max}
+         step={step}
+         value={localValues}
+         onValueChange={value => handleValueChange(value)}
+         {...props}
+         onFocus={() => setHoveredThumbIndex(true)}
+         onBlur={() => setHoveredThumbIndex(false)}
+      >
+         <SliderPrimitive.Track className={ny(
+            'bg-primary/20 relative grow overflow-hidden rounded-full',
+            orientation === 'horizontal' ? 'h-1.5 w-full' : 'h-full w-1.5',
+         )}
+         >
+            <SliderPrimitive.Range className={ny(
+               'bg-primary absolute',
+               orientation === 'horizontal' ? 'h-full' : 'w-full',
+            )}
+            />
+            {showSteps !== undefined && showSteps !== 'none' && stepLines.map((value, index) => {
+               if (value === min || value === max)
+                  return null
+
+               const positionPercentage = ((value - min) / (max - min)) * 100
+               const adjustedPosition = 50 + (positionPercentage - 50) * 0.96
+               return (
+                  <div
+                     key={index}
+                     className={ny(
+                        { 'w-0.5 h-2': orientation !== 'vertical', 'w-2 h-0.5': orientation === 'vertical' },
+                        'bg-muted-foreground absolute',
+                        {
+                           'left-1': orientation === 'vertical' && showSteps === 'half',
+                           'top-1': orientation !== 'vertical' && showSteps === 'half',
+                           'left-0': orientation === 'vertical' && showSteps === 'full',
+                           'top-0': orientation !== 'vertical' && showSteps === 'full',
+                           '-translate-x-1/2': orientation !== 'vertical',
+                           '-translate-y-1/2': orientation === 'vertical',
+                        },
+                     )}
+                     style={{
+                        [orientation === 'vertical' ? 'bottom' : 'left']: `${adjustedPosition}%`,
+                     }}
+                  />
+               )
+            })}
+
+         </SliderPrimitive.Track>
+         {localValues.map((numberStep, index) => (
+            <SliderPrimitive.Thumb
+               key={index}
+               className={ny(
+                  'border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1',
+               )}
+            >
+               {hoveredThumbIndex && formatLabel && (
+                  <div
+                     className={ny(
+                        { 'bottom-8 left-1/2 -translate-x-1/2': formatLabelSide === 'top' },
+                        { 'top-8 left-1/2 -translate-x-1/2': formatLabelSide === 'bottom' },
+                        { 'right-8 -translate-y-1/4': formatLabelSide === 'left' },
+                        { 'left-8 -translate-y-1/4': formatLabelSide === 'right' },
+                        'bg-popover text-popover-foreground absolute z-30 w-max items-center justify-items-center rounded-md border px-2 py-1 text-center shadow-sm',
+                     )}
+                  >
+                     {formatLabel(numberStep)}
+                  </div>
+               )}
+            </SliderPrimitive.Thumb>
+         ))}
+      </SliderPrimitive.Root>
+   )
+})
+
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { ny } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={ny(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function ny(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

middleware.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const isAuthenticated = request.cookies.get('isAuthenticated')?.value === 'true';
+  const isPasswordPage = request.nextUrl.pathname === '/password';
+
+  if (!isAuthenticated && !isPasswordPage) {
+    return NextResponse.redirect(new URL('/password', request.url));
+  }
+
+  if (isAuthenticated && isPasswordPage) {
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
+};

next.config.mjs

@@ -0,0 +1,37 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  typescript: {
+    // !! WARN !!
+    // Dangerously allow production builds to successfully complete even if
+    // your project has type errors.
+    // !! WARN !!
+    ignoreBuildErrors: true,
+  },
+  rewrites: async () => {
+    return [
+      {
+        source: "/api/:path*",
+        destination:
+          process.env.NODE_ENV === "development"
+            ? "http://127.0.0.1:8000/api/:path*"
+            : "/api/",
+      },
+      {
+        source: "/docs",
+        destination:
+          process.env.NODE_ENV === "development"
+            ? "http://127.0.0.1:8000/docs"
+            : "/api/docs",
+      },
+      {
+        source: "/openapi.json",
+        destination:
+          process.env.NODE_ENV === "development"
+            ? "http://127.0.0.1:8000/openapi.json"
+            : "/api/openapi.json",
+      },
+    ];
+  },
+};
+
+export default nextConfig;

nyxbui.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://nyxbui.design/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "fastapi-corrector",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "fastapi-dev": "pip install -r requirements.txt && uvicorn app.api.main:app --reload",
+    "next-dev": "next dev",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@fancyapps/ui": "^5.0.36",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cobe": "^0.6.3",
+    "concurrently": "^9.0.0",
+    "framer-motion": "^11.5.4",
+    "lucide-react": "^0.439.0",
+    "next": "14.2.9",
+    "next-themes": "^0.3.0",
+    "openai": "^4.5.0",
+    "pg": "^8.12.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-spring": "^9.7.4",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^10.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.8",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.9",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5"
+  },
+  "packageManager": "pnpm@9.10.0"
+}