Sync: Thu Feb 12 07:00:42 UTC 2026

.env.example

@@ -0,0 +1,9 @@
+# Panno-AI-API Config
+GOOGLE_API_KEY=your_gemini_api_key_here
+AUTH_TOKEN=your_secure_random_token_here
+
+# Optional: For GitHub Actions testing
+HF_SPACES_API_URL=https://nzlouislu-panno-ai-api.hf.space
+HF_TOKEN=your_huggingface_write_token
+HF_USERNAME=NZLouislu
+HF_SPACE_NAME=Panno-AI-API

.gitattributes

@@ -0,0 +1,10 @@
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text
+*.pdf filter=lfs diff=lfs merge=lfs -text

.github/workflows/keepalive_hf_spaces.yml

@@ -0,0 +1,41 @@
+name: Keep HF Spaces Alive
+
+on:
+  schedule:
+    - cron: "*/15 * * * *" # Every 15 minutes
+
+  workflow_dispatch: # Allow manual trigger
+
+jobs:
+  ping-api:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+
+    steps:
+      - name: Ping HF Spaces API
+        env:
+          HF_SPACES_URL: ${{ secrets.HF_SPACES_API_URL }}
+        run: |
+          if [ -z "$HF_SPACES_URL" ]; then
+            echo "❌ Error: HF_SPACES_API_URL secret is not set."
+            exit 1
+          fi
+          
+          echo "🔔 Pinging: $HF_SPACES_URL/health"
+          
+          RESPONSE=$(curl -s -o /dev/null -w "%{http_code}" "$HF_SPACES_URL/health")
+          
+          if [ "$RESPONSE" -eq 200 ]; then
+            echo "✅ API is healthy! (Status: $RESPONSE)"
+          else
+            echo "⚠️ API returned unexpected status code: $RESPONSE"
+            # Try to ping root if health fails
+            echo "🔔 Retrying with root URL: $HF_SPACES_URL/"
+            ROOT_RESPONSE=$(curl -s -o /dev/null -w "%{http_code}" "$HF_SPACES_URL/")
+            if [ "$ROOT_RESPONSE" -eq 200 ]; then
+              echo "✅ Root API is responding! (Status: $ROOT_RESPONSE)"
+            else
+              echo "❌ All ping attempts failed. (Root Status: $ROOT_RESPONSE)"
+              exit 1
+            fi
+          fi

.github/workflows/sync_to_hf.yml

@@ -0,0 +1,53 @@
+name: Sync to Hugging Face Spaces
+
+on:
+  push:
+    branches: [main]
+
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          lfs: true
+
+      - name: Push to Hugging Face Space
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+          HF_USERNAME: ${{ secrets.HF_USERNAME }}
+          SPACE_NAME: ${{ secrets.HF_SPACE_NAME }}
+        run: |
+          git config --global user.email "bot@github.com"
+          git config --global user.name "GitHub Actions Bot"
+
+          if [ -z "$HF_TOKEN" ] || [ -z "$HF_USERNAME" ] || [ -z "$SPACE_NAME" ]; then
+            echo "Error: Missing required secrets"
+            echo "Please set HF_TOKEN, HF_USERNAME, and HF_SPACE_NAME in repository secrets"
+            exit 1
+          fi
+
+          git remote add space https://$HF_USERNAME:$HF_TOKEN@huggingface.co/spaces/$HF_USERNAME/$SPACE_NAME || true
+          
+          # Create a temporary orphan branch to squash history
+          # This avoids pushing historical binary blobs that HF rejects
+          git checkout --orphan sync-branch
+          git lfs install
+          git add -A
+          git commit -m "Sync: $(date)"
+          
+          # Push to Hugging Face
+          git push --force space sync-branch:main
+
+      - name: Verify deployment
+        env:
+          HF_USERNAME: ${{ secrets.HF_USERNAME }}
+          SPACE_NAME: ${{ secrets.HF_SPACE_NAME }}
+        run: |
+          echo "Deployment completed!"
+          echo "Check your Space at: https://huggingface.co/spaces/$HF_USERNAME/$SPACE_NAME"
+          echo "API endpoint: https://$HF_USERNAME-$SPACE_NAME.hf.space"

.gitignore

@@ -0,0 +1,40 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.log
+/logs
+/tasks
+
+# local env files
+.env*.local
+.env
+.env.development
+.env.production
+.env.test
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -0,0 +1,34 @@
+# Multi-environment Dockerfile for Panno-AI (Next.js + Python/OpenCV)
+FROM node:18-slim
+
+# 1. Install Python, Pip and OpenCV system dependencies
+RUN apt-get update && apt-get install -y \
+    python3 \
+    python3-pip \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# 2. Install Python dependencies
+COPY requirements.txt .
+RUN pip3 install --no-cache-dir --break-system-packages -r requirements.txt
+
+# 3. Install Node.js dependencies
+COPY package*.json ./
+RUN npm install
+
+# 4. Copy application code
+COPY . .
+
+# 5. Build Next.js application
+ENV NODE_ENV production
+ENV PORT 7860
+RUN npm run build
+
+# 6. Expose HF Space default port
+EXPOSE 7860
+
+# 7. Start the unified application
+CMD ["npm", "start"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Louis Lu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,77 @@
+---
+title: Panno-AI-API
+emoji: 📸
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: false
+---
+
+# PannoAI - AI-Powered 3D Panorama Generator
+
+PannoAI is a cutting-edge web application that transforms standard indoor photos into immersive 360° panoramas using Google's Gemini 2.x Multimodal AI. Designed for real estate, interior design, and digital twins, it provides a seamless experience from image upload to interactive 3D exploration.
+
+## 🚀 Features
+
+- **AI-Driven Scene Analysis**: Leverages `gemini-2.5-flash-image` to analyze uploaded photos and identify flooring, lighting, layout, and architectural styles.
+- **Immersive 3D Viewer**: Built with Three.js and React Three Fiber, featuring smooth orbit controls, auto-rotation, and responsive design.
+- **Intelligent Fallback System**: Implements a robust API key rotation mechanism to bypass quota limits and ensuring high availability.
+- **Premium Aesthetics**: A modern, glassmorphic UI built with Next.js 15, Tailwind CSS, and Framer Motion.
+- **Offline Reliability**: Integrated stable fallback textures and local storage history for a consistent user experience.
+
+## 🛠️ Tech Stack
+
+- **Framework**: [Next.js 15 (App Router)](https://nextjs.org/)
+- **3D Engine**: [Three.js](https://threejs.org/) with [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)
+- **AI Integration**: [Google Gemini API](https://ai.google.dev/)
+- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
+- **Animations**: [Framer Motion](https://www.framer.com/motion/)
+- **Icons**: [Lucide React](https://lucide.dev/)
+
+## 📦 Getting Started
+
+### Prerequisites
+
+- Node.js 18.x or later
+- A Google AI (Gemini) API Key
+
+### Installation
+
+1.  **Clone the repository**:
+    ```bash
+    git clone https://github.com/NZLouislu/panno-ai.git
+    cd panno-ai
+    ```
+
+2.  **Install dependencies**:
+    ```bash
+    npm install
+    ```
+
+3.  **Configure environment variables**:
+    Create a `.env` file in the root directory:
+    ```env
+    Gemini_API=your_primary_api_key
+    # Optional: Add multiple keys for rotation
+    AULouis_Gemini_API=your_backup_key
+    Blog_Gemini_API=your_backup_key
+    Tasky_Gemini_API=your_backup_key
+    ```
+
+4.  **Run the development server**:
+    ```bash
+    npm run dev
+    ```
+
+5.  Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+## 📖 Usage
+
+1.  **Upload**: Click the upload area or drag and drop indoor photos of a room.
+2.  **Generate**: Click "Create 360° Panorama". PannoAI will analyze the images and map them to a high-quality 360° scene.
+3.  **Explore**: Use your mouse or touch to look around the generated 3D room.
+4.  **History**: Your previous creations are saved and can be accessed from the "Your Gallery" section.
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

jest.config.js

@@ -0,0 +1,27 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+    dir: './',
+})
+
+const customJestConfig = {
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+    testEnvironment: 'jest-environment-jsdom',
+    moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+    },
+    collectCoverage: true,
+    coverageThreshold: {
+        global: {
+            branches: 30,
+            functions: 50,
+            lines: 50,
+            statements: 50,
+        },
+    },
+    transformIgnorePatterns: [
+        '/node_modules/(?!lucide-react)/'
+    ],
+}
+
+module.exports = createJestConfig(customJestConfig)

jest.setup.js

@@ -0,0 +1,46 @@
+import '@testing-library/jest-dom'
+
+// Mock global URL.createObjectURL
+global.URL.createObjectURL = jest.fn(() => 'mock-url')
+
+// Mock ResizeObserver
+global.ResizeObserver = class {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+}
+
+// Mock next/image
+jest.mock('next/image', () => ({
+    __esModule: true,
+    default: (props) => {
+        // eslint-disable-next-line @next/next/no-img-element
+        return <img {...props} alt={props.alt} />
+    },
+}))
+
+// Mock lucide-react icons
+jest.mock('lucide-react', () => {
+    return new Proxy({}, {
+        get: (target, prop) => {
+            const Icon = (props) => <div data-testid={`icon-${String(prop)}`} {...props} />
+            Icon.displayName = String(prop)
+            return Icon
+        }
+    })
+})
+
+// Mock framer-motion
+jest.mock('framer-motion', () => ({
+    motion: {
+        div: ({ children, ...props }) => <div {...props}>{children}</div>,
+    },
+    AnimatePresence: ({ children }) => <>{children}</>,
+}))
+// Mock global fetch
+global.fetch = jest.fn(() =>
+    Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({ success: true, url: 'mock-url' }),
+    })
+);

next.config.ts

@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+    /* config options here */
+    images: {
+        domains: ["lh3.googleusercontent.com"], // For Google profile pics
+    },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "panno-ai",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "jest",
+    "test:coverage": "jest --coverage"
+  },
+  "dependencies": {
+    "@google/generative-ai": "^0.21.0",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.0.6",
+    "lucide-react": "^0.474.0",
+    "next": "15.5.12",
+    "next-auth": "^4.24.11",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^2.6.0",
+    "three": "^0.173.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^22.13.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@types/three": "^0.182.0",
+    "eslint": "^9.19.0",
+    "eslint-config-next": "15.1.6",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.7.3"
+  },
+  "overrides": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

packages.txt

@@ -0,0 +1,3 @@
+libgl1-mesa-glx
+libglib2.0-0
+ffmpeg

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+    plugins: {
+        tailwindcss: {},
+    },
+};
+
+export default config;

requirements.txt

@@ -0,0 +1,8 @@
+fastapi
+uvicorn
+opencv-python-headless
+numpy
+requests
+google-generativeai
+python-multipart
+Pillow

scripts/check-stability-balance.js

@@ -0,0 +1,58 @@
+const https = require('https');
+
+const keys = [
+    'sk-EXpDPvj0PnYh2l5cof3JDGctgYUrWHVN1DjvDxDHi9e7Vq7Z',
+    'sk-KSUPdEt40yyHwWkymuCA9w5gefrfgJPha5gH23l5Mjdsn6Hq',
+    'sk-xwPk8wHR3hZR9Ya11LnXci0A70N2QxIwVv9gO43VZ5H3QCrN'
+];
+
+function checkBalance(key) {
+    return new Promise((resolve) => {
+        console.log(`\nChecking Key: ${key.substring(0, 10)}...`);
+
+        const options = {
+            hostname: 'api.stability.ai',
+            path: '/v1/user/balance',
+            method: 'GET',
+            headers: {
+                Authorization: `Bearer ${key}`
+            }
+        };
+
+        const req = https.request(options, (res) => {
+            let data = '';
+            res.on('data', (chunk) => data += chunk);
+            res.on('end', () => {
+                if (res.statusCode === 200) {
+                    const json = JSON.parse(data);
+                    console.log(`✅ Status: OK`);
+                    console.log(`💰 Credits: ${json.credits}`);
+                } else {
+                    console.log(`❌ Status: ${res.statusCode}`);
+                    console.log(`📝 Response: ${data}`);
+                    if (res.statusCode === 402) {
+                        console.log('⚠️ Result: Out of credits (402 Payment Required)');
+                    } else if (res.statusCode === 401) {
+                        console.log('⚠️ Result: Invalid API Key (401 Unauthorized)');
+                    }
+                }
+                resolve();
+            });
+        });
+
+        req.on('error', (e) => {
+            console.error(`❌ Request Error: ${e.message}`);
+            resolve();
+        });
+
+        req.end();
+    });
+}
+
+async function run() {
+    for (const key of keys) {
+        await checkBalance(key);
+    }
+}
+
+run();

scripts/processor.py

@@ -0,0 +1,116 @@
+import cv2
+import numpy as np
+import base64
+import requests
+import sys
+import os
+import json
+
+class PanoEngine:
+    def __init__(self, api_key):
+        self.api_key = api_key
+        # 创建拼接器，全景模式
+        self.stitcher = cv2.Stitcher_create(cv2.Stitcher_PANORAMA)
+
+    def stitch_and_generate_mask(self, image_paths):
+        """1. 使用 OpenCV 拼接并生成掩码"""
+        imgs = []
+        for p in image_paths:
+            img = cv2.imread(p)
+            if img is not None:
+                imgs.append(img)
+        
+        if len(imgs) < 1:
+            raise Exception("No valid images found for stitching.")
+
+        if len(imgs) == 1:
+            # 只有一张图时，直接作为基础图
+            pano = imgs[0]
+        else:
+            # 拼接
+            status, pano = self.stitcher.stitch(imgs)
+            if status != cv2.Stitcher_OK:
+                # 如果拼接失败，回退到第一张图
+                pano = imgs[0]
+
+        # Prepare canvas with strictly 2:1 ratio
+        h, w = pano.shape[:2]
+        canvas_w = w
+        canvas_h = int(w / 2)
+        
+        canvas = np.zeros((canvas_h, canvas_w, 3), dtype=np.uint8)
+        
+        if h > canvas_h:
+            # Prevent vertical stretching: Crop center height
+            start_y = (h - canvas_h) // 2
+            stitched_crop = pano[start_y:start_y+canvas_h, :]
+            canvas = stitched_crop
+        else:
+            # Fill gaps: Center vertically
+            y_offset = (canvas_h - h) // 2
+            canvas[y_offset:y_offset+h, 0:w] = pano
+
+        # Create specialized mask for ceiling/floor inpainting
+        mask = np.ones((canvas_h, canvas_w), dtype=np.uint8) * 255
+        actual_h = min(h, canvas_h)
+        actual_y = (canvas_h - actual_h) // 2
+        mask[actual_y:actual_y+actual_h, 0:w] = 0
+        
+        return canvas, mask
+
+    def stability_inpaint(self, image, mask, prompt):
+        """2. Stability AI v2beta Inpaint API"""
+        url = "https://api.stability.ai/v2beta/stable-image/edit/inpaint"
+        
+        _, img_encoded = cv2.imencode(".png", image)
+        _, mask_encoded = cv2.imencode(".png", mask)
+
+        headers = {
+            "Authorization": f"Bearer {self.api_key}",
+            "Accept": "image/*"
+        }
+
+        files = {
+            "image": ("image.png", img_encoded.tobytes(), "image/png"),
+            "mask": ("mask.png", mask_encoded.tobytes(), "image/png"),
+        }
+
+        data = {
+            "prompt": f"{prompt}, photorealistic 360 panorama, wide angle, immersive view, seamless texture",
+            "output_format": "png",
+        }
+
+        response = requests.post(url, headers=headers, files=files, data=data)
+        
+        if response.status_code != 200:
+            raise Exception(f"Stability API Error ({response.status_code}): {response.text}")
+
+        result_base64 = base64.b64encode(response.content).decode('utf-8')
+        return result_base64
+
+
+if __name__ == "__main__":
+    if len(sys.argv) < 3:
+        print(json.dumps({"success": False, "error": "Insufficient arguments"}))
+        sys.exit(1)
+
+    api_key = sys.argv[1]
+    prompt = sys.argv[2]
+    img_paths = sys.argv[3:]
+
+    try:
+        engine = PanoEngine(api_key)
+        # 某些环境可能没有安装 OpenCV 拼接插件，做个兼容
+        pano, mask = engine.stitch_and_generate_mask(img_paths)
+        
+        # 如果没有配置 API key，仅返回拼接结果（开发者调试用）
+        if not api_key or api_key == "undefined":
+            _, final_encoded = cv2.imencode(".png", pano)
+            res_base64 = base64.b64encode(final_encoded).decode('utf-8')
+            print(json.dumps({"success": True, "image": f"data:image/png;base64,{res_base64}", "note": "Stitched only, no AI"}))
+        else:
+            res_base64 = engine.stability_inpaint(pano, mask, prompt)
+            print(json.dumps({"success": True, "image": f"data:image/png;base64,{res_base64}"}))
+            
+    except Exception as e:
+        print(json.dumps({"success": False, "error": str(e)}))

scripts/test-keys.js

@@ -0,0 +1,60 @@
+const { GoogleGenerativeAI } = require("@google/generative-ai");
+const fs = require("fs");
+
+const logFile = "api_testing_log.txt";
+fs.writeFileSync(logFile, "Starting API Key Tests\n\n");
+
+function log(msg) {
+    console.log(msg);
+    fs.appendFileSync(logFile, msg + "\n");
+}
+
+const keys = [
+    process.env.Gemini_API,
+    process.env.AULouis_Gemini_API,
+    process.env.Blog_Gemini_API,
+    process.env.Tasky_Gemini_API,
+    process.env.Marie_Gemini_API,
+    process.env.AILouis_Gemini_API,
+].filter(Boolean);
+
+async function testKey(key, index) {
+    log(`\n--- Testing Key ${index}: ${key.substring(0, 10)}... ---`);
+    const genAI = new GoogleGenerativeAI(key);
+
+    // Test 1: Basic Ping with 2.0-flash
+    try {
+        const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });
+        const result = await model.generateContent("ping");
+        const response = await result.response;
+        log(`[Key ${index}] 2.0-flash OK`);
+    } catch (error) {
+        log(`[Key ${index}] 2.0-flash FAILED: ${error.message}`);
+    }
+
+    // Test 2: Specific Image Generation with 2.5-flash-image
+    try {
+        const imgModel = genAI.getGenerativeModel({ model: "gemini-2.5-flash-image" });
+        const imgResult = await imgModel.generateContent("test");
+        const imgResponse = await imgResult.response;
+        log(`[Key ${index}] 2.5-flash-image OK`);
+        return true;
+    } catch (error) {
+        log(`[Key ${index}] 2.5-flash-image FAILED: ${error.message}`);
+        return false;
+    }
+}
+
+async function runTests() {
+    log(`Found ${keys.length} keys in current environment.`);
+    if (keys.length === 0) {
+        log("No keys found! Make sure you run with: node --env-file=.env scripts/test-keys.js");
+        return;
+    }
+    for (let i = 0; i < keys.length; i++) {
+        await testKey(keys[i], i);
+    }
+    log("\nTests completed.");
+}
+
+runTests();

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,6 @@
+import NextAuth from "next-auth";
+import { authOptions } from "@/lib/auth";
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

src/app/api/generate/route.ts

@@ -0,0 +1,117 @@
+import { NextRequest, NextResponse } from "next/server";
+import { exec } from "child_process";
+import { promisify } from "util";
+import fs from "fs";
+import path from "path";
+import os from "os";
+import { GoogleGenerativeAI } from "@google/generative-ai";
+
+const execAsync = promisify(exec);
+
+export async function POST(req: NextRequest) {
+    const tempFiles: string[] = [];
+    try {
+        const formData = await req.formData();
+        const prompt = formData.get("prompt") as string || "a photographic 360 panorama";
+        const images = formData.getAll("images") as File[];
+
+        // 1. Save uploaded images to temp directory
+        const tempDir = path.join(os.tmpdir(), `panno-${Date.now()}`);
+        if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir);
+
+        for (let i = 0; i < images.length; i++) {
+            const buffer = Buffer.from(await images[i].arrayBuffer());
+            const fileName = path.join(tempDir, `img_${i}.png`);
+            fs.writeFileSync(fileName, buffer);
+            tempFiles.push(fileName);
+        }
+
+        // 2. Load Config & Keys
+        const stabilityKey = process.env.Home_STABILITY_API_KEY || process.env.STABILITY_API_KEY;
+        const geminiKey = process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY;
+
+        if (!stabilityKey) {
+            throw new Error("Missing STABILITY_API_KEY in Environment Variables.");
+        }
+
+        let result: { image: string | null, method: string } = { image: null, method: "failed" };
+
+        // --- CORE LOGIC: Direct Python Local Execution ---
+        // Since we are in a unified Docker container on HF, we always run locally.
+        try {
+            const pythonScript = path.join(process.cwd(), "scripts", "processor.py");
+            const imageArgs = tempFiles.map(img => `"${img}"`).join(" ");
+
+            console.log("Unified Container: Executing specialized Python engine...");
+
+            // Detect OS and use appropriate python command
+            const pythonCmd = process.platform === "win32" ? "python" : "python3";
+
+            const { stdout } = await execAsync(`${pythonCmd} "${pythonScript}" "${stabilityKey}" "${prompt.replace(/"/g, '\\"')}" ${imageArgs}`, {
+                maxBuffer: 1024 * 1024 * 20,
+                timeout: 120000 // 2 minute limit for heavy processing
+            });
+
+            const parsed = JSON.parse(stdout);
+            if (parsed.success) {
+                result = { image: parsed.image, method: "unified_hf_engine" };
+            } else {
+                throw new Error(parsed.error || "Stitching engine failed");
+            }
+        } catch (err: any) {
+            console.warn("Local Engine Error, attempting Vision Fallback:", err.message);
+
+            // --- FALLBACK: Pure AI Cloud (If Python fails) ---
+            let visionPrompt = prompt;
+            if (geminiKey && tempFiles.length > 0) {
+                try {
+                    const genAI = new GoogleGenerativeAI(geminiKey);
+                    const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });
+                    const visionResult = await model.generateContent([
+                        "Describe room type and style in 10 words.",
+                        { inlineData: { data: fs.readFileSync(tempFiles[0]).toString("base64"), mimeType: "image/png" } }
+                    ]);
+                    visionPrompt = `${prompt}. Style: ${visionResult.response.text()}`;
+                } catch (e) { }
+            }
+
+            const aiFormData = new FormData();
+            aiFormData.append("prompt", `${visionPrompt}, 360 panorama, rectilinear, high quality, seamless`);
+            aiFormData.append("output_format", "webp");
+            aiFormData.append("aspect_ratio", "21:9");
+
+            const response = await fetch("https://api.stability.ai/v2beta/stable-image/generate/ultra", {
+                method: "POST",
+                headers: { "Authorization": `Bearer ${stabilityKey}`, "Accept": "application/json" },
+                body: aiFormData
+            });
+
+            const data = await response.json();
+            if (response.ok && data.image) {
+                result = { image: `data:image/webp;base64,${data.image}`, method: "unified_pure_ai_fallback" };
+            } else {
+                throw new Error(data.message || "All methods failed");
+            }
+        }
+
+        return NextResponse.json({
+            url: result.image,
+            success: true,
+            method: result.method
+        });
+
+    } catch (error: any) {
+        console.error("Unified Pipeline Error:", error.message);
+        return NextResponse.json({
+            success: false,
+            message: error.message || "Process failed"
+        }, { status: 500 });
+    } finally {
+        // Cleanup
+        try {
+            tempFiles.forEach(f => { if (fs.existsSync(f)) fs.unlinkSync(f); });
+            const dir = path.dirname(tempFiles[0]);
+            if (dir && fs.existsSync(dir)) fs.rmdirSync(dir);
+        } catch (e) { }
+    }
+}

src/app/globals.css

@@ -0,0 +1,64 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #020617;
+  --foreground: #f8fafc;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  overflow-x: hidden;
+}
+
+@layer components {
+  .glass {
+    @apply bg-white/5 backdrop-blur-lg border border-white/10;
+  }
+  
+  .glass-card {
+    @apply glass rounded-2xl p-6 shadow-2xl transition-all duration-300 hover:bg-white/10 hover:border-white/20;
+  }
+  
+  .btn-primary {
+    @apply bg-gradient-to-r from-primary to-indigo-500 text-white font-medium py-2 px-6 rounded-xl 
+           transition-all duration-300 hover:scale-[1.02] active:scale-95 shadow-lg shadow-primary/20
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+  
+  .input-field {
+    @apply bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 
+           focus:ring-primary/50 transition-all duration-200 placeholder:text-white/30;
+  }
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #1e293b;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #334155;
+}
+
+.animate-glow {
+  animation: bg-glow 8s ease-in-out infinite alternate;
+}
+
+@keyframes bg-glow {
+  0% { opacity: 0.3; }
+  100% { opacity: 0.7; }
+}
+
+.gradient-text {
+  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-cyan-400;
+}

src/app/layout.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import AuthProvider from "@/components/AuthProvider";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+    title: "PanoAI - 360° Scene Creator",
+    description: "Generate immersive 360-degree panoramas from photos or text using AI.",
+};
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en" suppressHydrationWarning>
+            <head>
+                <link
+                    rel="stylesheet"
+                    href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"
+                />
+                <script
+                    src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"
+                    async
+                ></script>
+            </head>
+            <body className={`${inter.className} min-h-screen antialiased`} suppressHydrationWarning>
+                <AuthProvider>
+
+                    <div className="fixed inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-900/20 via-slate-900 to-black overflow-hidden">
+                        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-primary/20 blur-[120px] rounded-full animate-glow opacity-30" />
+                        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-accent/20 blur-[120px] rounded-full animate-glow opacity-30 delay-1000" />
+                    </div>
+                    {children}
+                </AuthProvider>
+            </body>
+        </html>
+    );
+}

src/app/page.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { useState, useEffect, Suspense } from "react";
+import Navbar from "@/components/Navbar";
+import UploadSection from "@/components/UploadSection";
+import dynamic from "next/dynamic";
+const PanoramaViewer = dynamic(() => import("@/components/PanoramaViewer"), { ssr: false });
+import { History as HistoryIcon, Maximize2, Download, Share2, Layers } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface Panorama {
+    id: string;
+    url: string;
+    prompt: string;
+    timestamp: Date;
+}
+
+export default function Home() {
+    const [currentPano, setCurrentPano] = useState<Panorama | null>(null);
+    const [history, setHistory] = useState<Panorama[]>([]);
+    const [isGenerating, setIsGenerating] = useState(false);
+
+    useEffect(() => {
+        const saved = localStorage.getItem("pano-history");
+        if (saved) {
+            try {
+                const parsed = JSON.parse(saved);
+                if (Array.isArray(parsed)) {
+                    // Only keep local or known stable URLs
+                    const filtered = parsed.filter(item =>
+                        item.url && (
+                            item.url.startsWith("/") ||
+                            item.url.startsWith("data:") ||
+                            item.url.includes("threejs.org") ||
+                            item.url.includes("polyhaven.org")
+                        )
+                    );
+                    setHistory(filtered);
+                    if (filtered.length > 0) setCurrentPano(filtered[0]);
+                }
+            } catch (e) {
+                console.error("Failed to load history");
+            }
+        }
+    }, []);
+
+    useEffect(() => {
+        if (history.length > 0) {
+            try {
+                // Limit history to last 10 items to save LocalStorage space
+                const limitedHistory = history.slice(0, 10);
+                localStorage.setItem("pano-history", JSON.stringify(limitedHistory));
+            } catch (e) {
+                console.warn("Storage quota exceeded, history not fully saved");
+                // If quota exceeded, try saving fewer items
+                try {
+                    localStorage.setItem("pano-history", JSON.stringify(history.slice(0, 3)));
+                } catch (innerError) {
+                    console.error("Critical storage failure:", innerError);
+                }
+            }
+        }
+    }, [history]);
+
+    const handleGenerate = async (prompt: string, images: File[]) => {
+        setIsGenerating(true);
+
+        try {
+            const formData = new FormData();
+            formData.append("prompt", prompt);
+            images.forEach(img => formData.append("images", img));
+
+            const response = await fetch("/api/generate", {
+                method: "POST",
+                body: formData,
+            });
+
+            const result = await response.json();
+
+            if (!response.ok || !result.success) {
+                throw new Error(result.message || "Failed to generate panorama");
+            }
+
+            const newPano = {
+                id: Math.random().toString(36).substr(2, 9),
+                url: result.url,
+                prompt: prompt || "Generated from photos",
+                timestamp: new Date(),
+            };
+
+            setCurrentPano(newPano);
+            setHistory(prev => [newPano, ...prev]);
+        } catch (error: any) {
+            console.error("Generate error:", error);
+            alert(`Generation Error: ${error.message}`);
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    return (
+        <main className="min-h-screen flex flex-col">
+            <Navbar />
+
+            <div className="flex-1 container mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-12 gap-8">
+                {/* Left Side - Controls */}
+                <div className="lg:col-span-4 xl:col-span-3">
+                    <UploadSection onGenerate={handleGenerate} isGenerating={isGenerating} />
+                </div>
+
+                {/* Right Side - Viewer / Gallery */}
+                <div className="lg:col-span-8 xl:col-span-9 flex flex-col gap-6">
+                    <div className="glass-card flex-1 min-h-[500px] flex flex-col p-4">
+                        <div className="flex items-center justify-between mb-4 px-2">
+                            <h3 className="text-xl font-bold flex items-center gap-2">
+                                <Maximize2 className="w-5 h-5 text-primary" />
+                                Immersive View
+                            </h3>
+                            {currentPano && (
+                                <div className="flex gap-2">
+                                    <button className="p-2 glass hover:bg-white/10 rounded-lg transition-colors border-white/5">
+                                        <Download className="w-5 h-5" />
+                                    </button>
+                                    <button className="p-2 glass hover:bg-white/10 rounded-lg transition-colors border-white/5">
+                                        <Share2 className="w-5 h-5" />
+                                    </button>
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="flex-1 relative min-h-[400px]">
+                            <AnimatePresence mode="wait">
+                                {currentPano ? (
+                                    <motion.div
+                                        key={currentPano.id}
+                                        initial={{ opacity: 0, scale: 0.95 }}
+                                        animate={{ opacity: 1, scale: 1 }}
+                                        exit={{ opacity: 0, scale: 1.05 }}
+                                        className="w-full h-full absolute inset-0"
+                                    >
+                                        <Suspense fallback={<div className="w-full h-full bg-slate-900 animate-pulse" />}>
+                                            <PanoramaViewer imageUrl={currentPano.url} />
+                                        </Suspense>
+                                    </motion.div>
+                                ) : (
+                                    <div className="w-full h-full flex flex-col items-center justify-center text-white/20 gap-4 glass rounded-2xl border-white/5 border-dashed border-2">
+                                        <div className="w-20 h-20 bg-white/5 rounded-full flex items-center justify-center animate-pulse">
+                                            <Layers className="w-10 h-10" />
+                                        </div>
+                                        <div className="text-center">
+                                            <p className="text-xl font-semibold">No panoramas yet</p>
+                                            <p className="text-sm">Upload some photos and start generating your first immersive 360° view.</p>
+                                        </div>
+                                    </div>
+                                )}
+                            </AnimatePresence>
+                        </div>
+                    </div>
+
+                    {/* Gallery Section */}
+                    <div className="glass-card">
+                        <div className="flex items-center justify-between mb-6">
+                            <h3 className="text-lg font-semibold flex items-center gap-2">
+                                <HistoryIcon className="w-5 h-5 text-primary" />
+                                Your Gallery
+                            </h3>
+                            <span className="text-xs bg-white/10 px-2 py-1 rounded-full text-white/40">
+                                {history.length} Creations
+                            </span>
+                        </div>
+
+                        {history.length > 0 ? (
+                            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                                {history.map((pano) => (
+                                    <button
+                                        key={pano.id}
+                                        onClick={() => setCurrentPano(pano)}
+                                        className={`group relative aspect-video rounded-xl overflow-hidden border transition-all ${currentPano?.id === pano.id ? 'border-primary ring-2 ring-primary/50' : 'border-white/10 hover:border-white/30'
+                                            }`}
+                                    >
+                                        <img src={pano.url} className="w-full h-full object-cover transition-transform group-hover:scale-110" alt="" />
+                                        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                                            <Maximize2 className="w-6 h-6" />
+                                        </div>
+                                    </button>
+                                ))}
+                            </div>
+                        ) : (
+                            <div className="py-12 flex flex-col items-center justify-center text-white/10 gap-2">
+                                <HistoryIcon className="w-8 h-8" />
+                                <p>No history available</p>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            <footer className="mt-auto py-8 text-center text-white/30 text-sm border-t border-white/5 glass">
+                <p>© 2024 PanoAI Scene Engine • Powered by Gemini Vision</p>
+            </footer>
+        </main>
+    );
+}

src/components/AuthProvider.tsx

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+
+export default function AuthProvider({ children }: { children: React.ReactNode }) {
+    return <SessionProvider>{children}</SessionProvider>;
+}

src/components/Navbar.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useSession, signIn, signOut } from "next-auth/react";
+import { LogIn, LogOut, User, Camera, Github, Rocket, History, Download, Share2 } from "lucide-react";
+import Image from "next/image";
+
+export default function Navbar() {
+    const { data: session } = useSession();
+
+    return (
+        <nav className="flex items-center justify-between px-6 py-4 glass border-b border-white/10 sticky top-0 z-50">
+            <div className="flex items-center gap-2">
+                <div className="w-10 h-10 bg-gradient-to-tr from-primary to-accent rounded-xl flex items-center justify-center shadow-lg shadow-primary/20">
+                    <Camera className="text-white w-6 h-6" />
+                </div>
+                <span className="text-2xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-white/60">
+                    PanoAI
+                </span>
+            </div>
+
+            <div className="hidden md:flex items-center gap-6">
+                <button className="text-white/60 hover:text-white transition-colors flex items-center gap-2">
+                    <Download className="w-4 h-4" />
+                    <span>Export</span>
+                </button>
+                <button className="text-white/60 hover:text-white transition-colors flex items-center gap-2">
+                    <Share2 className="w-4 h-4" />
+                    <span>Share</span>
+                </button>
+                <button className="text-white/60 hover:text-white transition-colors flex items-center gap-2">
+                    <History className="w-4 h-4" />
+                    <span>History</span>
+                </button>
+            </div>
+
+            <div className="flex items-center gap-4">
+                {session ? (
+                    <div className="flex items-center gap-3">
+                        <div className="text-right hidden sm:block">
+                            <p className="text-sm font-medium text-white">{session.user?.name}</p>
+                            <p className="text-xs text-white/50">{session.user?.email}</p>
+                        </div>
+                        {session.user?.image ? (
+                            <Image
+                                src={session.user.image}
+                                alt="Profile"
+                                width={36}
+                                height={36}
+                                className="rounded-full border border-white/20"
+                            />
+                        ) : (
+                            <div className="w-9 h-9 bg-white/10 rounded-full flex items-center justify-center">
+                                <User className="w-5 h-5 text-white/60" />
+                            </div>
+                        )}
+                        <button
+                            onClick={() => signOut()}
+                            className="p-2 hover:bg-white/10 rounded-lg transition-colors text-white/60 hover:text-white"
+                        >
+                            <LogOut className="w-5 h-5" />
+                        </button>
+                    </div>
+                ) : (
+                    <button
+                        onClick={() => signIn("google")}
+                        className="btn-primary flex items-center gap-2"
+                    >
+                        <LogIn className="w-4 h-4" />
+                        <span>Sign In</span>
+                    </button>
+                )}
+            </div>
+        </nav>
+    );
+}

src/components/PanoramaViewer.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from 'react';
+
+interface PanoramaViewerProps {
+    imageUrl: string;
+    className?: string;
+}
+
+declare global {
+    interface Window {
+        pannellum: any;
+    }
+}
+
+const PanoramaViewer: React.FC<PanoramaViewerProps> = ({ imageUrl, className }) => {
+    const viewerRef = useRef<HTMLDivElement>(null);
+    const pannellumInstance = useRef<any>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        // Check if pannellum is loaded
+        const initViewer = () => {
+            if (!window.pannellum) {
+                console.warn("Pannellum not loaded yet, retrying...");
+                setTimeout(initViewer, 500);
+                return;
+            }
+
+            if (viewerRef.current && imageUrl) {
+                // Destroy existing instance if it exists
+                if (pannellumInstance.current) {
+                    try {
+                        pannellumInstance.current.destroy();
+                    } catch (e) {
+                        console.warn("Error destroying pannellum instance:", e);
+                    }
+                }
+
+                try {
+                    // Initialize Pannellum
+                    pannellumInstance.current = window.pannellum.viewer(viewerRef.current, {
+                        type: 'equirectangular',
+                        panorama: imageUrl,
+                        autoLoad: true,
+                        showControls: true,
+                        compass: false, // Set to false by default for cleaner look
+                        mouseZoom: true,
+                        hfov: 100,
+                        vaov: 180,
+                        haov: 360,
+                        crossOrigin: "anonymous"
+                    });
+                    setError(null);
+                } catch (err: any) {
+                    console.error("Pannellum initialization error:", err);
+                    setError(err.message);
+                }
+            }
+        };
+
+        initViewer();
+
+        return () => {
+            if (pannellumInstance.current) {
+                try {
+                    pannellumInstance.current.destroy();
+                } catch (e) { }
+            }
+        };
+    }, [imageUrl]);
+
+    if (error) {
+        return (
+            <div className="w-full h-full flex items-center justify-center bg-slate-900 text-red-400 p-4 text-center">
+                <p>Error loading viewer: {error}<br />Image might be too large or inaccessible.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            ref={viewerRef}
+            className={`w-full h-full rounded-xl overflow-hidden shadow-2xl bg-black border border-slate-700 ${className || ''}`}
+        />
+    );
+};
+
+export default PanoramaViewer;

src/components/UploadSection.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useState } from "react";
+import { Upload, X, Image as ImageIcon, Sparkles } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface UploadSectionProps {
+    onGenerate: (prompt: string, images: File[]) => void;
+    isGenerating: boolean;
+}
+
+export default function UploadSection({ onGenerate, isGenerating }: UploadSectionProps) {
+    const [prompt, setPrompt] = useState("");
+    const [files, setFiles] = useState<File[]>([]);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files) {
+            setFiles((prev) => [...prev, ...Array.from(e.target.files!)]);
+        }
+    };
+
+    const removeFile = (index: number) => {
+        setFiles((prev) => prev.filter((_, i) => i !== index));
+    };
+
+    return (
+        <div className="flex flex-col gap-6">
+            <div className="glass-card">
+                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                    <Upload className="w-5 h-5 text-primary" />
+                    Upload Reference Photos
+                </h3>
+
+                <div
+                    className="border-2 border-dashed border-white/10 rounded-xl p-8 flex flex-col items-center justify-center gap-4 hover:border-primary/50 hover:bg-white/5 transition-all cursor-pointer relative"
+                    onClick={() => document.getElementById("fileInput")?.click()}
+                >
+                    <input
+                        id="fileInput"
+                        type="file"
+                        multiple
+                        accept="image/*"
+                        className="hidden"
+                        onChange={handleFileChange}
+                    />
+                    <div className="w-12 h-12 bg-white/5 rounded-full flex items-center justify-center">
+                        <Upload className="w-6 h-6 text-white/40" />
+                    </div>
+                    <div className="text-center">
+                        <p className="font-medium">Click to browse or drag and drop</p>
+                        <p className="text-sm text-white/30">(Supports multiple JPG/PNG photos)</p>
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-4 gap-2 mt-4">
+                    <AnimatePresence>
+                        {files.map((file, i) => (
+                            <motion.div
+                                key={i}
+                                initial={{ scale: 0, opacity: 0 }}
+                                animate={{ scale: 1, opacity: 1 }}
+                                exit={{ scale: 0, opacity: 0 }}
+                                className="relative aspect-square rounded-lg overflow-hidden group border border-white/10"
+                            >
+                                <img
+                                    src={URL.createObjectURL(file)}
+                                    alt="Preview"
+                                    className="w-full h-full object-cover"
+                                />
+                                <button
+                                    onClick={(e) => { e.stopPropagation(); removeFile(i); }}
+                                    className="absolute top-1 right-1 p-1 bg-black/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+                                >
+                                    <X className="w-3 h-3" />
+                                </button>
+                            </motion.div>
+                        ))}
+                    </AnimatePresence>
+                </div>
+            </div>
+
+            <div className="glass-card">
+                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                    <Sparkles className="w-5 h-5 text-primary" />
+                    Generation Details
+                </h3>
+
+                <label className="text-xs uppercase tracking-wider text-white/40 mb-2 block">
+                    Style / Description (Optional)
+                </label>
+                <textarea
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    placeholder="e.g., A modern living room with warm sunset lighting and panoramic window views..."
+                    className="w-full h-32 input-field resize-none mb-4"
+                />
+
+                <button
+                    onClick={() => onGenerate(prompt, files)}
+                    disabled={isGenerating || (!prompt && files.length === 0)}
+                    className="w-full btn-primary py-4 flex items-center justify-center gap-2"
+                >
+                    {isGenerating ? (
+                        <div className="flex items-center gap-2">
+                            <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                            <span>Generating...</span>
+                        </div>
+                    ) : (
+                        <>
+                            <Sparkles className="w-5 h-5" />
+                            <span>Create 360° Panorama</span>
+                        </>
+                    )}
+                </button>
+            </div>
+        </div>
+    );
+}

src/lib/auth.ts

@@ -0,0 +1,23 @@
+import { NextAuthOptions } from "next-auth";
+import GoogleProvider from "next-auth/providers/google";
+
+export const authOptions: NextAuthOptions = {
+    providers: [
+        GoogleProvider({
+            clientId: process.env.GOOGLE_CLIENT_ID || "",
+            clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
+        }),
+    ],
+    secret: process.env.NEXTAUTH_SECRET,
+    pages: {
+        signIn: "/",
+    },
+    callbacks: {
+        async session({ session, token }) {
+            if (session.user) {
+                (session.user as any).id = token.sub;
+            }
+            return session;
+        },
+    },
+};

src/lib/gemini.ts

@@ -0,0 +1,36 @@
+import { GoogleGenerativeAI } from "@google/generative-ai";
+
+function getApiKeys() {
+    return [
+        process.env.GEMINI_API_KEY,
+        process.env.GEMINI_API_KEY_SECONDARY,
+    ].filter(Boolean) as string[];
+}
+
+export async function getGeminiModel(index = 0, modelName = "gemini-2.0-flash") {
+    const keys = getApiKeys();
+    if (index >= keys.length) {
+        throw new Error("All Gemini API keys have been exhausted.");
+    }
+
+    const genAI = new GoogleGenerativeAI(keys[index]);
+    return genAI.getGenerativeModel({ model: modelName });
+}
+
+export async function generateWithFallback(
+    fn: (model: any) => Promise<any>,
+    index = 0,
+    modelName = "gemini-2.0-flash"
+): Promise<any> {
+    const keys = getApiKeys();
+    try {
+        const model = await getGeminiModel(index, modelName);
+        return await fn(model);
+    } catch (error: any) {
+        console.warn(`API key ${index} for model ${modelName} failed, trying next...`, error.message);
+        if (index + 1 < keys.length) {
+            return await generateWithFallback(fn, index + 1, modelName);
+        }
+        throw error;
+    }
+}

src/tests/Navbar.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import Navbar from '@/components/Navbar'
+import { useSession, signIn, signOut } from 'next-auth/react'
+
+// Mocks are already setup in global or hoisted.
+// But we need to control useSession specifically here.
+// In jest.setup.js? No, I mocked it globally?
+// No, I mocked it in Navbar.test.tsx previously.
+// But jest resets mocks.
+// So I mock it here again.
+
+jest.mock('next-auth/react', () => ({
+    useSession: jest.fn(() => ({ data: null, status: 'unauthenticated' })),
+    signIn: jest.fn(),
+    signOut: jest.fn(),
+}))
+
+describe('Navbar', () => {
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    it('renders logo and sign in button when logged out', () => {
+        (useSession as jest.Mock).mockReturnValue({ data: null, status: 'unauthenticated' })
+
+        render(<Navbar />)
+
+        expect(screen.getByText('PanoAI')).toBeInTheDocument()
+        const signInBtn = screen.getByText('Sign In')
+        expect(signInBtn).toBeInTheDocument()
+
+        fireEvent.click(signInBtn)
+        expect(signIn).toHaveBeenCalledWith('google')
+    })
+
+    it('renders user info and sign out button when logged in', () => {
+        const mockUser = { name: 'Test User', email: 'test@example.com', image: 'test.jpg' };
+        (useSession as jest.Mock).mockReturnValue({
+            data: { user: mockUser },
+            status: 'authenticated'
+        })
+
+        render(<Navbar />)
+
+        expect(screen.getByText('Test User')).toBeInTheDocument()
+        expect(screen.getByText('test@example.com')).toBeInTheDocument()
+
+        // Sign out button is an icon button. LogOut icon mocked as icon-LogOut
+        // Find by icon testid
+        const signOutBtn = screen.getByTestId('icon-LogOut').closest('button')
+
+        fireEvent.click(signOutBtn!)
+        expect(signOut).toHaveBeenCalled()
+    })
+})

src/tests/PanoramaViewer.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react'
+import PanoramaViewer from '@/components/PanoramaViewer'
+
+describe('PanoramaViewer', () => {
+    it('renders the container div', () => {
+        render(<PanoramaViewer imageUrl="test.jpg" />)
+        // Since it's Pannellum, it just renders a div with a ref
+        const container = document.querySelector('div[id^="panorama-"]');
+        expect(container).toBeDefined();
+    })
+})

src/tests/UploadSection.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import UploadSection from '@/components/UploadSection'
+
+describe('UploadSection', () => {
+    const mockOnGenerate = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    it('renders upload area and input', () => {
+        render(<UploadSection onGenerate={mockOnGenerate} isGenerating={false} />)
+        expect(screen.getByText('Upload Reference Photos')).toBeInTheDocument()
+        expect(screen.getByPlaceholderText(/A modern living room/)).toBeInTheDocument()
+    })
+
+    it('calls onGenerate when button clicked', () => {
+        render(<UploadSection onGenerate={mockOnGenerate} isGenerating={false} />)
+        const textarea = screen.getByPlaceholderText(/A modern living room/)
+        fireEvent.change(textarea, { target: { value: 'Beautiful sunset' } })
+
+        const button = screen.getByText(/Create 360/)
+        fireEvent.click(button)
+
+        expect(mockOnGenerate).toHaveBeenCalledWith('Beautiful sunset', [])
+    })
+})

src/tests/api.test.ts

@@ -0,0 +1,108 @@
+import { POST } from '@/app/api/generate/route'
+import { exec } from 'child_process'
+import fs from 'fs'
+
+// Mock next/server
+jest.mock('next/server', () => ({
+    NextResponse: {
+        json: (body: any, init?: any) => ({
+            json: async () => body,
+            status: init?.status || 200,
+        }),
+    },
+}))
+
+// Mock child_process
+jest.mock('child_process', () => ({
+    exec: jest.fn(),
+}))
+
+// Mock fs and os
+jest.mock('fs', () => ({
+    existsSync: jest.fn().mockReturnValue(true),
+    mkdirSync: jest.fn(),
+    writeFileSync: jest.fn(),
+    unlinkSync: jest.fn(),
+    rmdirSync: jest.fn(),
+}))
+
+jest.mock('os', () => ({
+    tmpdir: () => '/tmp',
+}))
+
+const createMockRequest = (body: any) => ({
+    formData: async () => {
+        const data = new Map();
+        Object.keys(body).forEach(key => {
+            if (Array.isArray(body[key])) {
+                data.set(key, body[key]);
+            } else {
+                data.set(key, body[key]);
+            }
+        });
+        return {
+            get: (key: string) => body[key],
+            getAll: (key: string) => Array.isArray(body[key]) ? body[key] : [body[key]],
+        };
+    },
+}) as any
+
+describe('Generate API (Hybrid Pipeline)', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+        process.env.STABILITY_API_KEY = 'test-key'
+        jest.spyOn(console, 'error').mockImplementation(() => { })
+        jest.spyOn(console, 'log').mockImplementation(() => { })
+    })
+
+    it('returns success for valid request via hybrid pipeline', async () => {
+        const mockImage = new File(['test'], 'test.png', { type: 'image/png' })
+        const req = createMockRequest({
+            prompt: 'test prompt',
+            images: [mockImage]
+        })
+
+        const mockStdout = JSON.stringify({
+            success: true,
+            image: 'data:image/png;base64,mockdata'
+        });
+
+        (exec as unknown as jest.Mock).mockImplementation((cmd, options, callback) => {
+            const cb = typeof options === 'function' ? options : callback;
+            process.nextTick(() => cb(null, mockStdout, ''));
+        })
+
+        const response = await POST(req)
+        const json = await response.json()
+
+        expect(response.status).toBe(200)
+        expect(json.success).toBe(true)
+        // Check if images were "saved" (our mock should have triggered fs.writeFileSync)
+        expect(fs.writeFileSync).toHaveBeenCalled()
+        expect(json.method).toBe('cv_ai_hybrid')
+    })
+
+    it('returns 500 on pipeline failure', async () => {
+        const mockImage = new File(['test'], 'test.png', { type: 'image/png' })
+        const req = createMockRequest({
+            prompt: 'fail',
+            images: [mockImage]
+        })
+
+        const mockError = JSON.stringify({
+            success: false,
+            error: 'AI Error'
+        });
+
+        (exec as unknown as jest.Mock).mockImplementation((cmd, options, callback) => {
+            const cb = typeof options === 'function' ? options : callback;
+            cb(null, mockError, '')
+        })
+
+        const response = await POST(req)
+        const json = await response.json()
+
+        expect(response.status).toBe(500)
+        expect(json.message).toBe('AI Error')
+    })
+})

src/tests/gemini.test.ts

@@ -0,0 +1,77 @@
+import { generateWithFallback } from "@/lib/gemini";
+import { GoogleGenerativeAI } from "@google/generative-ai";
+
+jest.mock("@google/generative-ai");
+
+describe("Gemini API Fallback", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        process.env.GEMINI_API_KEY = "key1";
+        process.env.GEMINI_API_KEY_SECONDARY = "key2";
+
+        // Suppress console warnings in tests
+        jest.spyOn(console, 'warn').mockImplementation(() => { });
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("should use the first key if successful", async () => {
+        const mockGenerateContent = jest.fn().mockResolvedValue({
+            response: { text: () => "Success" }
+        });
+
+        (GoogleGenerativeAI as jest.Mock).mockImplementation(() => ({
+            getGenerativeModel: () => ({
+                generateContent: mockGenerateContent,
+            }),
+        }));
+
+        const result = await generateWithFallback(async (model) => {
+            return await model.generateContent("test");
+        });
+
+        expect(result.response.text()).toBe("Success");
+        expect(GoogleGenerativeAI).toHaveBeenCalledTimes(1);
+        expect(GoogleGenerativeAI).toHaveBeenCalledWith("key1");
+    });
+
+    it("should fallback to second key if first fails", async () => {
+        const mockGenerateContent = jest.fn()
+            .mockRejectedValueOnce(new Error("Quota exceeded"))
+            .mockResolvedValueOnce({ response: { text: () => "Success 2" } });
+
+        (GoogleGenerativeAI as jest.Mock).mockImplementation(() => ({
+            getGenerativeModel: () => ({
+                generateContent: mockGenerateContent,
+            }),
+        }));
+
+        const result = await generateWithFallback(async (model) => {
+            return await model.generateContent("test");
+        });
+
+        expect(result.response.text()).toBe("Success 2");
+        expect(GoogleGenerativeAI).toHaveBeenCalledTimes(2);
+        expect(GoogleGenerativeAI).toHaveBeenNthCalledWith(1, "key1");
+        expect(GoogleGenerativeAI).toHaveBeenNthCalledWith(2, "key2");
+    });
+
+    it("should throw error when all keys exhausted", async () => {
+        const mockGenerateContent = jest.fn()
+            .mockRejectedValue(new Error("Quota exceeded"));
+
+        (GoogleGenerativeAI as jest.Mock).mockImplementation(() => ({
+            getGenerativeModel: () => ({
+                generateContent: mockGenerateContent,
+            }),
+        }));
+
+        await expect(generateWithFallback(async (model) => {
+            return await model.generateContent("test");
+        })).rejects.toThrow("Quota exceeded");
+
+        expect(GoogleGenerativeAI).toHaveBeenCalledTimes(2);
+    });
+});

src/tests/page.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
+import Home from '@/app/page'
+
+// Mock dependencies
+jest.mock('next-auth/react', () => ({
+    useSession: jest.fn(() => ({ data: null })),
+    signIn: jest.fn(),
+    signOut: jest.fn(),
+}))
+
+jest.mock('next/dynamic', () => () => {
+    const DynamicComponent = () => <div>PanoramaViewer Mock</div>
+    DynamicComponent.displayName = 'PanoramaViewer'
+    return DynamicComponent
+})
+
+// Mock child components
+jest.mock('@/components/Navbar', () => () => <div data-testid="navbar">Navbar</div>)
+jest.mock('@/components/UploadSection', () => ({ onGenerate, isGenerating }: any) => (
+    <div data-testid="upload-section">
+        <button onClick={() => onGenerate('test prompt', [])} disabled={isGenerating}>Generate</button>
+    </div>
+))
+
+describe('Home Page', () => {
+    beforeEach(() => {
+        localStorage.clear()
+        jest.clearAllMocks()
+        jest.useFakeTimers()
+    })
+
+    afterEach(() => {
+        jest.useRealTimers()
+    })
+
+    it('renders initial state correctly', () => {
+        render(<Home />)
+        expect(screen.getByTestId('navbar')).toBeInTheDocument()
+        expect(screen.getByTestId('upload-section')).toBeInTheDocument()
+        expect(screen.getByText('No panoramas yet')).toBeInTheDocument()
+        expect(screen.getByText('Your Gallery')).toBeInTheDocument()
+        expect(screen.getByText('0 Creations')).toBeInTheDocument()
+    })
+
+    it('generates panorama successfully', async () => {
+        // Mock fetch success
+        (global.fetch as jest.Mock).mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                success: true,
+                url: 'data:image/png;base64,mock',
+                method: 'cv_ai_hybrid'
+            })
+        });
+
+        render(<Home />)
+        const generateBtn = screen.getByText('Generate')
+
+        await act(async () => {
+            fireEvent.click(generateBtn)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText('PanoramaViewer Mock')).toBeInTheDocument()
+        })
+
+        expect(screen.getByText('1 Creations')).toBeInTheDocument()
+    })
+
+    it('loads history from localStorage', async () => {
+        const mockHistory = [{
+            id: 'test-id',
+            url: '/mock-local-url.jpg',
+            prompt: 'test prompt',
+            timestamp: new Date().toISOString()
+        }]
+
+        Storage.prototype.getItem = jest.fn(() => JSON.stringify(mockHistory));
+
+        render(<Home />)
+
+        await waitFor(() => {
+            expect(screen.getByText('1 Creations')).toBeInTheDocument()
+        })
+        expect(screen.getByText('PanoramaViewer Mock')).toBeInTheDocument()
+    })
+})

src/types/index.ts

@@ -0,0 +1,15 @@
+export interface Panorama {
+    id: string;
+    url: string;
+    prompt: string;
+    timestamp: Date;
+}
+
+export interface UserSession {
+    user: {
+        name?: string | null;
+        email?: string | null;
+        image?: string | null;
+        id?: string;
+    };
+}

src/types/three.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="@react-three/fiber" />
+
+import * as THREE from 'three'
+import { ThreeElements } from '@react-three/fiber'
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements { }
+    }
+}
+
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements { }
+    }
+}

tailwind.config.ts

@@ -0,0 +1,35 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+    content: [
+        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            colors: {
+                background: "var(--background)",
+                foreground: "var(--foreground)",
+                primary: {
+                    DEFAULT: "#6366f1",
+                    dark: "#4f46e5",
+                },
+                accent: {
+                    DEFAULT: "#f43f5e",
+                    dark: "#e11d48",
+                },
+            },
+            backgroundImage: {
+                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+                "gradient-conic":
+                    "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+            },
+            animation: {
+                'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+            },
+        },
+    },
+    plugins: [],
+};
+export default config;

tasks/panno-ai-api.md

@@ -0,0 +1,152 @@
+# Panno-AI-API 项目详细设计与实施指南
+
+## 1. 项目背景与需求分析
+### 1.1 核心痛点
+- **环境限制**：Vercel 等 Serverless 平台不支持 OpenCV (C++) 底层编译库，无法进行物理图像拼接。
+- **性能瓶颈**：全景图拼接属于 CPU/内存密集型任务，Serverless 函数容易超时且资源受限。
+- **模型依赖**：未来的拼接算法可能需要深度学习模型（如深度估算），需要一个真正的服务器环境。
+
+### 1.2 项目目标
+构建一个专门运行在 Hugging Face Spaces 上的 Python 运算引擎，为前端提供高精度的全景图生成服务。
+
+---
+
+## 2. 核心功能规范
+### 2.1 智能拼接管道 (CV Pipeline)
+- **输入检测**：自动识别上传图片的重叠区域。
+- **Stitching 算法**：利用 OpenCV 的 `Stitcher` 类（基于 SIFT/SURF 特征点）进行特征匹配。
+- **几何校正**：将拼接后的图像投影为 2:1 的等距柱状全景视图。
+
+### 2.2 AI 智能缝隙补全 (AI Inpainting)
+- **掩码生成**：自动识别拼接后留下的黑边（通常是天花板和地面）。
+- **生成式扩展**：调用 Stability AI SDK，利用图像上下文和用户提示词（Prompt）进行“无缝补全”。
+
+### 2.3 视觉特征分析
+- 利用 Gemini 2.0 Flash 视觉能力分析参考图，确保补全的纹理（如木地板、石膏顶）与原图 100% 匹配。
+
+---
+
+## 3. 接口设计 (API Specification)
+
+### 接口 URL: `POST /v1/generate`
+
+#### 3.1 请求头 (Headers)
+| Key | Value | 说明 |
+| :--- | :--- | :--- |
+| `Content-Type` | `application/json` | |
+| `X-API-Key` | `PROD_SECRET_PASSWORD` | 用于 Vercel 与 HF 之间的身份校验 |
+
+#### 3.2 请求体 (Request Body)
+```json
+{
+  "prompt": "现代简约风格客厅，阳光充足",
+  "style": "photographic",
+  "images": [
+    "data:image/png;base64,iVBORw0K...", // 原始参考图1
+    "data:image/png;base64,iVBORw0K..."  // 原始参考图2
+  ]
+}
+```
+
+#### 3.3 返回体 (Response Body)
+```json
+{
+  "success": true,
+  "image": "data:image/webp;base64,UklGRk...", // 最终全景图
+  "method": "cv_ai_hybrid",                  // 处理方法
+  "details": {
+    "num_stitched": 5,
+    "has_inpainting": true
+  }
+}
+```
+
+---
+
+## 4. 核心实现代码预览
+
+### 4.1 FastAPI 主入口 (`main.py`)
+```python
+from fastapi import FastAPI, HTTPException, Header
+from pydantic import BaseModel
+import base64
+import os
+from service.processor import process_panorama # 封装拼接逻辑
+
+app = FastAPI()
+
+class PannoRequest(BaseModel):
+    prompt: str
+    images: list[str]
+    style: str = "photographic"
+
+@app.post("/v1/generate")
+async def generate(request: PannoRequest, x_api_key: str = Header(None)):
+    # 1. 简易安全校验
+    if x_api_key != os.getenv("AUTH_TOKEN"):
+        raise HTTPException(status_code=403, detail="Unauthorized")
+    
+    try:
+        # 2. 调用处理函数
+        result_base64 = process_panorama(request.images, request.prompt)
+        return {
+            "success": True, 
+            "image": f"data:image/webp;base64,{result_base64}",
+            "method": "cv_ai_hybrid"
+        }
+    except Exception as e:
+        return {"success": False, "error": str(e)}
+```
+
+---
+
+## 5. Hugging Face 部署关键配置
+
+### 5.1 `packages.txt` (系统依赖)
+HF 的 Docker 基础镜像通过此文件安装系统库。
+```text
+libgl1-mesa-glx
+libglib2.0-ext
+git
+python3-opencv
+```
+
+### 5.2 `requirements.txt` (Python 依赖)
+```text
+fastapi
+uvicorn
+opencv-python-headless
+numpy
+requests
+google-generativeai
+python-multipart
+```
+
+---
+
+## 6. 与前端 Next.js 的配合流程
+
+### 6.1 通信链路
+1.  **用户操作**：在前端页面上传 5 张照片，点击“生成”。
+2.  **Next.js 接收**：Next.js 后端路由 `api/generate` 接收到 Base64 图片。
+3.  **分发请求**：Next.js 通过 `fetch` 将数据转发给 Hugging Face 上的 Panno-AI-API。
+4.  **后端运算**：HF 上的 Python 引擎进行拼接和 AI 扩图，返回最终大图。
+5.  **前端展示**：Next.js 将结果直接传回浏览器预览，并保存至用户的 LocalStorage 或数据库。
+
+### 6.2 环境变量同步
+- **Vercel 后台配置**:
+  - `REMOTE_WORKER_URL`: 指向 HF Space 的地址。
+  - `REMOTE_WORKER_KEY`: 与 HF 上的 `AUTH_TOKEN` 保持一致。
+  
+- **Hugging Face 后台配置**:
+  - `AUTH_TOKEN`: 自定义强密码。
+  - `STABILITY_API_KEY`: AI 补全密钥。
+  - `GEMINI_API_KEY`: 视觉分析密钥。
+
+---
+
+## 7. 下一步行动 (Action Plan)
+1.  **初始化仓库**：在 `Panno-AI-API` 目录下创建上述文件。
+2.  **本地测试**：在本地使用 `uvicorn main:app --reload` 运行 API。
+3.  **HF 部署**：推送代码到 GitHub 关联 HF Space 自动构建。
+4.  **联调**：在本地 Next.js 中填入 HF 的测试参数进行端到端测试。

test_output_v2.txt

@@ -0,0 +1,58 @@
+node.exe : FAIL src/tests/Navbar.test.tsx
+At line:1 char:1
++ & "C:\nvm\nodejs/node.exe" "C:\nvm\nodejs/node_mo
+dules/npm/bin/npx-cl ...
++ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+~~~~~~~~~~~~~~~~~~~~
+    + CategoryInfo          : NotSpecified: (FAIL  
+   src/tests/Navbar.test.tsx:String) [], RemoteEx  
+  ception
+    + FullyQualifiedErrorId : NativeCommandError
+ 
+  ??? Test suite failed to run
+
+    Cannot find module '@testing-library/dom' from 
+'node_modules/@testing-library/react/dist/pure.js'
+
+    Require stack:
+      node_modules/@testing-library/react/dist/pure
+.js
+      node_modules/@testing-library/react/dist/inde
+x.js
+      src/tests/Navbar.test.tsx
+
+      12 |     it('renders logo 
+and sign in button', () =>
+ {
+      13 |         render(
+    > 14 |            
+ <SessionProvider session=
+{null}>
+         |                ^
+
+      15 |                 <[3
+3mNavbar />
+      16 |             </
+[39mSessionProvider>
+      17 |         )
+
+      at Resolver._throwModNotFoundError (node_modu
+les/jest-resolve/build/index.js:863:11)
+      at Object.<anonymous> (node_modules/@testing-
+library/react/dist/pure.js:46:12)
+      at Object.<anonymous> (node_modules/@testing-
+library/react/dist/index.js:7:13)
+      at Object.<anonymous> (src/tests/Navbar.test.
+tsx:14:16)
+
+----------|---------|----------|---------|---------|-------------------
+File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
+----------|---------|----------|---------|---------|-------------------
+All files |       0 |        0 |       0 |       0 |                   
+----------|---------|----------|---------|---------|-------------------
+Test Suites: 1 failed, 1 total
+Tests:       0 total
+Snapshots:   0 total
+Time:        1.233 s
+Ran all test suites matching src/tests/Navbar.test.
+tsx.

tests/test_api_local.py

@@ -0,0 +1,11 @@
+import requests
+
+def test_health():
+    try:
+        response = requests.get("http://localhost:7860/")
+        print(f"Health check: {response.json()}")
+    except Exception as e:
+        print(f"Server not running or error: {e}")
+
+if __name__ == "__main__":
+    test_health()

tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "types": [
+      "@react-three/fiber",
+      "jest"
+    ],
+    "target": "ES2017"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}