Marble API Generation Quickstart

A developer-focused React application for experimenting with The World Labs' Marble API. This dashboard provides a modular interface to generate 3D worlds from text, images, 360 panoramas, and videos.

Features

• Multi-Modal Generation:
  • Text-to-World: Generate worlds from simple text descriptions.
  • Image-to-World: Upload standard images or 360° panoramas.
  • Video-to-World: Generate worlds from short video clips.
• Operation Management: Track the status of long-running generation tasks.
• Asset Viewer: Inspect uploaded media assets and their metadata.
• World Library: View and access all your generated worlds in a gallery layout.
• Secure API Key Management: User-provided API key via the UI (persisted locally), ensuring no hardcoded secrets in production.

Getting Started

Prerequisites

• Node.js (v20+)
• A World Labs API Key

Installation

1. Clone the repository:

   git clone https://github.com/your-username/pano-to-gs.git
   cd pano-to-gs

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser to http://localhost:5173.

Usage

Important

CORS Restriction: This application currently only works when accessed via http://localhost:5173. The World Labs API and storage servers have a strict CORS policy that will reject uploads and requests from any other domain or port.

1. Enter API Key: On first load, enter your World Labs API Key in the top banner. This key is stored securely in your browser's localStorage.
2. Generate: Choose one of the generation cards (Text, Image, Pano, Video) to start a new world creation task.
3. Monitor: Watch the console logs for detailed API interaction traces (requests, responses, and polling updates).
4. View Results: Once complete, your new world will appear in the "Your Worlds" list at the bottom of the page.

Tech Stack

• Frontend: React, TypeScript, Vite
• Styling: Tailwind CSS
• State Management: React Context API
• Testing: Vitest, React Testing Library

Project Structure

• src/components/: Modular UI components for each API feature (e.g., CreateWorldFromPanoForm, ListView).
• src/context/: Global state management (ApiKeyContext).
• src/utils/: Helper functions for image processing, API interactions, and logging.
• conductor/: Project documentation and architectural guidelines.

Development

• Linting: npm run lint
• Testing: npm test
• Build: npm run build

License

idk dm me