Home

🌺 Orchid Continuum Widget Showcase

Embeddable orchid collection widgets for the Five Cities Orchid Society. Perfect for integration with Neon One CMS and other websites.

✅

API Status: FastAPI-compatible endpoints are now live! Test health endpoint

🚀 Live API Demo

Test the FastAPI-compatible endpoints that power our widget system.

API Endpoints

GET /api/v2/health System health check GET /api/v2/stats Database statistics GET /api/v2/orchids?limit=3 Orchid data (JSON)

Response Format

{
  "id": 1,
  "scientific_name": "Orchidaceae species",
  "genus": "Cattleya",
  "species": "labiata",
  "description": "Beautiful orchid with...",
  "photo_url": "https://drive.google.com/...",
  "drive_id": "1abc..."
}
                    

Basic Gallery Widget

A simple gallery showing featured orchids from the collection.

Implementation Code:

<!-- Include the widget script -->
<script src="{{ request.url_root }}static/orchid-widget.js"></script>

<!-- Add widget container -->
<div data-orchid-widget data-limit="6" data-theme="light"></div>

<!-- Widget auto-initializes on page load -->
                

Dark Theme Widget

Perfect for websites with dark themes or modern design aesthetics.

Implementation Code:

Genus-Specific Widget

Display orchids from a specific genus - perfect for educational content.

Implementation Code:

<div data-orchid-widget 
     data-limit="3" 
     data-genus="Cattleya" 
     data-theme="light">
</div>
                

Compact Widget

A smaller widget perfect for sidebars or limited space areas.

Implementation Code:

<div data-orchid-widget 
     data-limit="2" 
     style="max-width: 400px;">
</div>
                

Integration with Neon One CMS

Quick Setup (3 steps):

Add the widget script to your website header
Place the widget div where you want the gallery to appear
Configure with data attributes for customization

Complete Code Example:

<!DOCTYPE html>
<html>
<head>
  <!-- Add to your website header -->
  <script src="{{ request.url_root }}static/orchid-widget.js"></script>
</head>
<body>
  <!-- Place anywhere in your content -->
  <div data-orchid-widget 
       data-limit="6" 
       data-theme="light" 
       data-genus="Cattleya">
  </div>
  
  <!-- Widget auto-initializes on page load -->
</body>
</html>
                

Available Options:

data-limit - Number of orchids to display (default: 6)
data-theme - "light" or "dark" (default: light)
data-genus - Filter by specific genus (optional)
data-api-base-url - Custom API endpoint (optional)

API Documentation

Orchid Data Endpoint

GET /api/v2/orchids?limit=6&genus=Cattleya

Returns orchid data in JSON format with photos, scientific names, and descriptions.

Database Statistics

GET /api/v2/stats

Returns collection statistics including total orchids and photos available.

Individual Orchid

GET /api/v2/orchids/{id}

Returns detailed information for a specific orchid including full AI descriptions.

Health Check

GET /api/v2/health

Returns API status and basic system information.

FastAPI Architecture

✅ What's Complete

✓ PostgreSQL database with 5,945+ orchid records
✓ FastAPI-compatible endpoints running on Flask
✓ CORS enabled for cross-domain embedding
✓ JavaScript SDK for easy integration
✓ React component for modern frameworks
✓ Responsive design for mobile/desktop

🚀 Next Steps

→ Docker deployment configuration
→ Standalone FastAPI server for production
→ Advanced search and filtering
→ Authentication for admin features
→ Real-time data synchronization
→ Analytics and usage tracking

Built with ❤️ by the Five Cities Orchid Society | Contact Support | View Full Collection