Eurus Studio - Creative AI Workflow Platform

A cutting-edge Next.js application featuring the stunning Eurus Studio landing page design, built for creative AI workflows and collaborative content creation with advanced image analysis and context-aware processing.

--triggered

✨ Features

🎯 Core Functionality

  • Interactive 3D Canvas: Drag-and-drop nodes with real-time 3D model rendering

  • AI-Powered Workflows: Integrated text, image, and video AI models

  • Real-time Collaboration: Multi-user editing with cursor presence

  • Asset Management: Comprehensive file upload and management system

  • Credit System: Usage tracking and billing integration

  • Visual node-based workflow editor with React Flow

  • AI-powered content generation: Images, videos, and text

  • Advanced image analysis with Azure OpenAI 4o mini integration

  • Context-aware generation - Intelligent content creation based on connected nodes

  • Optimistic UI updates - Instant deletion and real-time collaboration

  • Azure Blob Storage integration for scalable asset management

  • Auto-detection - Dynamic port and base URL recognition

  • Discovery and sharing platform

🎪 Eurus Studio Design

  • Immersive Hero Section: "Irreplacably Creative" with interactive draggable nodes

  • 3D Model Integration: Real-time GLB model rendering with Three.js

  • Scroll-triggered Animations: Smooth transitions and dynamic content

  • Professional Tools Showcase: Video backgrounds and interactive elements

  • Ideas Scroll Section: Animated node interactions and creative prompts

🛠️ Technical Features

  • Next.js 15: Latest React framework with App Router

  • TypeScript: Full type safety and developer experience

  • Tailwind CSS: Utility-first styling with custom animations

  • Three.js Integration: 3D graphics and WebGL rendering

  • Firebase Integration: Authentication and real-time database

  • Azure Blob Storage: Cloud asset management

  • Responsive Design: Mobile-first approach with smooth interactions

Recent Updates (January 2025)

🎯 Context-Based Image Analysis

  • Smart node behavior: Nodes with existing media create NEW analysis nodes when describing images

  • Base state optimization: Empty nodes with image context update directly with descriptions

  • Azure OpenAI 4o mini: Fixed parameter compatibility (max_completion_tokens, temperature: 1, top_p: 1)

  • Intelligent routing: Text generation automatically detects image-to-text requests

🗑️ Optimistic Deletion System

  • Instant UI updates: Nodes and edges delete immediately without waiting for server confirmation

  • Smart edge cleanup: Connected edges automatically removed when nodes are deleted

  • Multiple delete keys: Support for both Delete and Backspace keys

  • Collaborative broadcasting: Real-time deletion sync across all users

🌐 Auto-Detection & Reliability

  • Dynamic port detection: Automatically detects server port (3000, 3001, 3002, etc.)

  • Request-based URL resolution: Uses request headers to determine correct base URL

  • Development flexibility: No more manual port updates when Next.js switches ports

  • Robust error handling: Graceful fallbacks for all network operations

🔧 Technical Improvements

  • Enhanced logging: Comprehensive debug information for troubleshooting

  • Performance optimization: Reduced API call latency and improved response times

  • Context data processing: Better handling of image URLs and metadata

  • Edge case handling: Improved stability for various content types

🚀 Tech Stack

Frontend

  • Framework: Next.js 15 with App Router

  • Language: TypeScript

  • Styling: Tailwind CSS

  • 3D Graphics: Three.js, @react-three/fiber, @react-three/drei

  • Icons: React Icons, Lucide React

  • Animations: Framer Motion, CSS Animations

Backend & Services

  • Authentication: Firebase Auth

  • Database: Firestore

  • Storage: Azure Blob Storage

  • API Routes: Next.js API Routes

  • AI Models: OpenAI, Gemini, Flux, Stable Diffusion

Development

  • Package Manager: pnpm

  • Linting: ESLint

  • Code Formatting: Prettier

  • Version Control: Git

🚀 Getting Started

Quick Setup

# Clone repository
git clone https://github.com/EurusLabs/eurus-studio.git
cd eurus-studio

# Install dependencies
pnpm install

# Set up environment variables
cp azure.env.template .env.local
# Fill in your Azure credentials and API keys

# Add your API keys and configuration
# - Firebase configuration
# - Azure storage credentials
# - AI model API keys

# Start development server
pnpm dev
# Server will auto-detect available port (3000, 3001, 3002, etc.)

📋 For Complete Setup Instructions

See SETUP_GUIDE.md for detailed configuration of:

  • Azure AI Foundry (GPT-4o + SORA)

  • Multi-image composition pipeline

  • Troubleshooting and team collaboration

🎯 New: Multi-Image Composition

Upload multiple images and ask the system to "combine" or "merge" them:

  1. GPT-4o analyzes all images simultaneously

  2. SORA creates video compositions (Azure AI Foundry)

  3. Enhanced FLUX fallback with intelligent prompts

🎤 Enhanced Audio Recording

Ultra-smooth voice-to-text functionality with Azure Whisper:

  • Instant visual feedback with pulsing recording animations

  • Optimized audio settings for clear speech recognition

  • Smart error handling with user-friendly messages

  • Real-time transcription with immediate prompt population

Azure Integration

This project uses Azure Blob Storage and Azure OpenAI for comprehensive AI workflows:

Storage Configuration

  • Storage Account: eurusworkflows

  • Containers: discover-assets, node-autosave

  • Assets: Images, videos, and generated content

  • Management: See AZURE_ASSET_MANAGEMENT.md for detailed instructions

AI Services

  • Azure OpenAI 4o mini: Image analysis and description

  • Azure OpenAI 4.1 nano: Intent processing and context understanding

  • Azure Whisper: Ultra-smooth speech-to-text transcription

  • Optimized parameters: Configured for maximum compatibility and performance

🎮 Usage

Landing Page

  1. Hero Section: Experience the interactive "Irreplacably Creative" canvas

  2. Drag & Drop: Move nodes around the canvas to see real-time interactions

  3. 3D Models: Click on 3D nodes to see GLB models rendered in real-time

  4. Scroll Experience: Smooth scroll through different sections

Authentication

  • Click "Get Started" to open the authentication modal

  • Sign in with email/password or social providers

  • Access the full creative workspace after authentication

Creative Workflows

  • Node-based Interface: Drag and drop AI tools

  • Real-time Preview: See results as you work

  • Collaboration: Work with team members in real-time

  • Asset Management: Upload and organize your creative assets

📁 Project Structure

eurus-studio/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   ├── discover/          # Discovery page
│   ├── pricing/           # Pricing page
│   └── project/           # Project workspace
├── components/            # React components
│   ├── ui/               # Reusable UI components
│   ├── collaboration/    # Real-time collaboration
│   ├── nodes/            # Workflow nodes
│   ├── landing-page.tsx  # Main landing page
│   └── navigation.tsx    # Navigation component
├── lib/                  # Utility libraries
│   ├── models/           # AI model integrations
│   ├── azure-storage.ts  # Azure Blob Storage
│   └── firebase.ts       # Firebase configuration
├── public/               # Static assets
│   ├── images/           # Image assets
│   └── videos/           # Video assets
├── hooks/                # Custom React hooks
├── types/                # TypeScript type definitions
└── styles/               # Global styles

🎨 Key Components

Landing Page Features

  • InfiniteCanvasBackground: Animated particle background

  • DraggableNodesLayer: Interactive node system

  • ProductsScrollSection: AI model showcase with videos

  • IdeasScrollNodesSection: Creative inspiration section

  • Model3D: 3D model rendering with error boundaries

3D Model Integration

  • Error Boundaries: Graceful fallback for 3D model failures

  • Auto-rotation: Smooth 3D model animations

  • Optimized Loading: Preloaded GLB models for performance

🚀 Deployment

Vercel (Recommended)

# Deploy to Vercel
vercel --prod

# Or connect your GitHub repository to Vercel dashboard

Docker

# Build Docker image
docker build -t eurus-studio .

# Run container
docker run -p 3000:3000 eurus-studio

🔧 Configuration

Environment Variables

# Firebase
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id

# Azure Storage
AZURE_STORAGE_CONNECTION_STRING=your_connection_string
AZURE_STORAGE_CONTAINER_NAME=your_container_name

# AI Models
OPENAI_API_KEY=your_openai_key
GEMINI_API_KEY=your_gemini_key

🎯 Performance Optimizations

  • Code Splitting: Dynamic imports for heavy components

  • Image Optimization: Next.js Image component with lazy loading

  • 3D Model Caching: GLB model preloading and caching

  • Bundle Analysis: Optimized bundle sizes

  • SSR/SSG: Server-side rendering for better SEO

🐛 Troubleshooting

Common Issues

3D Models Not Loading

  • Check GLB file paths in /public/images/

  • Ensure files are not corrupted

  • Check browser WebGL support

Firebase Auth Issues

  • Verify environment variables

  • Check Firebase console configuration

  • Ensure auth domain is whitelisted

Performance Issues

  • Reduce 3D model complexity

  • Optimize image sizes

  • Check network requests in DevTools

🤝 Contributing

We welcome contributions! Please follow these steps:

  1. Fork the repository

  2. Create a feature branch (git checkout -b feature/amazing-feature)

  3. Commit your changes (git commit -m 'Add amazing feature')

  4. Push to the branch (git push origin feature/amazing-feature)

  5. Open a Pull Request

Development Guidelines

  • Follow TypeScript best practices

  • Use Tailwind CSS for styling

  • Write meaningful commit messages

  • Add JSDoc comments for complex functions

  • Test your changes thoroughly

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

  • Eurus Studio for the incredible landing page design

  • Three.js community for 3D graphics support

  • Next.js team for the amazing framework

  • Tailwind CSS for the utility-first approach

📞 Support

For support, please:

  • Create an issue in the repository

  • Check the troubleshooting section

  • Review the documentation

Built with ❤️ using Next.js, Three.js, and modern web technologies.

Studio WIP Deployment (stripe-integration)

This branch is connected to an Azure Static Web App (studio-wip) created solely for validating the new Stripe billing flows (subscriptions + pay-as-you-go). Every push to stripe-integration triggers the GitHub Action in .github/workflows/azure-static-web-apps-*.yml and automatically deploys the latest build.

NOTE: This environment points to the Stripe sandbox backend and Firebase staging project. Do not use real production keys.

trigger

NextModel & Tool Schemas

Last updated