From 9f8aa022cd2796e73f448a1632f82554af5f98b2 Mon Sep 17 00:00:00 2001 From: DJP Date: Wed, 10 Dec 2025 22:27:46 -0500 Subject: [PATCH] Improve drag-drop hook timing and add delay for DOM readiness --- OLD_DOCS/REMAINING_WORK.md | 72 ------- OLD_DOCS/SESSION_SUMMARY_AND_NEXT_STEPS.md | 239 --------------------- OLD_DOCS/TASKS.md | 88 -------- OLD_DOCS/TEST_RESULTS.md | 32 --- OLD_DOCS/WELCOME_BACK.md | 224 ------------------- frontend/hooks/useDragFromCarousel.ts | 30 ++- 6 files changed, 23 insertions(+), 662 deletions(-) delete mode 100644 OLD_DOCS/REMAINING_WORK.md delete mode 100644 OLD_DOCS/SESSION_SUMMARY_AND_NEXT_STEPS.md delete mode 100644 OLD_DOCS/TASKS.md delete mode 100644 OLD_DOCS/TEST_RESULTS.md delete mode 100644 OLD_DOCS/WELCOME_BACK.md diff --git a/OLD_DOCS/REMAINING_WORK.md b/OLD_DOCS/REMAINING_WORK.md deleted file mode 100644 index 1f0521d..0000000 --- a/OLD_DOCS/REMAINING_WORK.md +++ /dev/null @@ -1,72 +0,0 @@ -# ๐ŸŽฏ Remaining Work - Complete API Feature Implementation - -## Current Status -- โœ… 7/8 image providers working -- โœ… Dynamic UI functional -- โš ๏ธ Many providers missing advanced features - -## Work Required - -### HIGH PRIORITY - -#### 1. Add Runway Gen-4 Image (NEW Provider #9) -- [ ] Create backend handler in image_generator.py -- [ ] Add to image_providers.py config -- [ ] Parameters: promptText, ratio, seed, referenceImages (up to 3), contentModeration -- [ ] Endpoint: POST /v1/text_to_image -- [ ] Support reference image uploads - -#### 2. Complete Topaz Image Features -- [ ] Add face_enhancement_creativity (0-1) -- [ ] Add face_enhancement_strength (0-1) -- [ ] Add detail (0-1) -- [ ] Add focus_boost (0.25-1) -- [ ] Add strength (0.01-1) -- [ ] Add subject_detection -- [ ] Fix download_url retrieval -- [ ] Update frontend UI with all controls - -#### 3. Fix Topaz Video Features -- [ ] Verify all video enhancement models -- [ ] Add all video parameters -- [ ] Test upload/polling workflow - -#### 4. Add Runway Audio Features -- [ ] Sound effects generation -- [ ] Text-to-speech -- [ ] Speech-to-speech -- [ ] Voice dubbing -- [ ] Voice isolation - -### MEDIUM PRIORITY - -#### 5. Complete Each Image Provider -- [ ] OpenAI - Verify all parameters -- [ ] Stability - Add all style presets -- [ ] Imagen - Add all safety/enhancement options -- [ ] Leonardo - Fix 500 error, add all features -- [ ] Flux - Verify all Flux 2 parameters -- [ ] Ideogram - Verify all V3 features -- [ ] Nano Banana - Add all Gemini image options -- [ ] Bria - Research current API, add all features - -### LOW PRIORITY - -#### 6. Video Providers -- [ ] Runway - Fix auth, add all Gen-4 video features -- [ ] Veo - Verify all 3.1 parameters - ---- - -**Estimated Work:** 4-6 hours for complete implementation -**Current Session Progress:** ~400K tokens used - -## Recommendation - -This is extensive work. Options: -1. Continue in this session (may hit token limits) -2. Create detailed specs and continue in next session -3. Implement highest priority items now (Runway Image, Topaz features) - -**User directive:** "just get on with all of them" -**Action:** Proceeding with systematic implementation... diff --git a/OLD_DOCS/SESSION_SUMMARY_AND_NEXT_STEPS.md b/OLD_DOCS/SESSION_SUMMARY_AND_NEXT_STEPS.md deleted file mode 100644 index 1811a88..0000000 --- a/OLD_DOCS/SESSION_SUMMARY_AND_NEXT_STEPS.md +++ /dev/null @@ -1,239 +0,0 @@ -# ๐Ÿ“Š Session Summary & Next Steps - -**Date:** December 9-10, 2025 -**Duration:** ~8 hours -**Token Usage:** ~410K tokens -**Scope:** Fix all bugs, implement provider-specific UIs, test all tools - ---- - -## ๐ŸŽ‰ MASSIVE ACCOMPLISHMENTS TODAY - -### โœ… ALL CRITICAL BUGS FIXED (12 total) -1. Asset reconciliation script -2. Topaz image/video upscale (asset_id vs file upload) -3. Video metadata extraction with ffprobe -4. Image dimensions validation -5. Metadata field name across 8 services -6. Remove-bg endpoint -7. Voice-to-text endpoint -8. Imagen 4 model names (imagen-3.0 โ†’ imagen-4.0) -9. Stability AI multipart/form-data encoding -10. Nano Banana response format -11. Topaz API parameter simplification -12. snake_case vs camelCase API responses - -### โœ… DYNAMIC PROVIDER-SPECIFIC UI (100% Functional) -- Configuration-driven architecture -- 40+ files created/modified -- Provider configs based on 2025 API research -- Controls change dynamically per provider -- Conditional controls with dependsOn -- camelCase serialization working - -### โœ… IMAGE PROVIDERS: 7/8 Working (87.5%) -**Verified Working (with generated images in storage):** -1. OpenAI (GPT-Image-1 + DALL-E 3) - 5+ images -2. Stability AI (SD3.5) - Working -3. Flux 2 (Pro/Flex/Dev - NEW!) - 3 images -4. Ideogram (V3 - NEW!) - 5 images -5. Google Imagen 4 (FIXED!) - 1 image -6. Nano Banana (Gemini - FIXED!) - 1 image -7. DALL-E 3 - 1 image - -**Need Attention:** -8. Leonardo - 500 error (API key/payload) -9. Bria - 404 error (on hold per user) - -### โœ… VIDEO PROVIDERS: 1/2 Working -- Google Veo 3.1 - Generated video successfully! โœ… -- Runway - Updated API key, testing - -### โœ… NEW FEATURES ADDED -- 4 text tool pages (Mermaid + Markdown) -- Flux 2 Pro/Flex/Dev models -- Ideogram V3 model -- Comprehensive provider configurations -- Dynamic control rendering system - ---- - -## ๐Ÿ“‹ WHAT'S WORKING RIGHT NOW - -**Try these immediately:** - -**Image Generation:** -``` -http://localhost:3020/image/generate -``` -- OpenAI, Stability, Flux 2, Ideogram, Imagen 4, Nano Banana - -**Video Generation:** -``` -http://localhost:3020/video/generate -``` -- Veo 3.1 (working!) - -**Text Tools:** -``` -http://localhost:3020/text/mermaid-generator -http://localhost:3020/text/mermaid-renderer -http://localhost:3020/text/markdown-converter -http://localhost:3020/text/markdown-generator -``` - -**Dynamic UI working!** -- Switch providers โ†’ controls change completely -- Provider-specific features visible - ---- - -## ๐Ÿšง REMAINING WORK (For Next Session) - -### HIGH PRIORITY - -#### 1. Add Runway Gen-4 Image (NEW 9th Image Provider) -**Endpoint:** POST /v1/text_to_image -**Parameters:** -- promptText (required) -- ratio (aspect ratio) -- seed (0-4294967295) -- referenceImages (array, max 3): - - uri (URL or data URI) - - tag (identifier) -- contentModeration - -**Backend Tasks:** -- Create `_generate_runway_image()` handler -- Add to image_generator.py generate() function -- Handle reference image uploads/storage - -**Frontend Tasks:** -- Add Runway to image_providers.py config -- Create UI for reference image upload (similar to Veo video) - -**Estimated:** 2-3 hours - ---- - -#### 2. Complete Topaz Image Features -**Missing Parameters:** -- face_enhancement_creativity (0-1 slider) -- face_enhancement_strength (0-1 slider) -- detail (0-1 slider, for Super Focus) -- focus_boost (0.25-1 slider, for Super Focus) -- strength (0.01-1 slider, for upscaling) -- subject_detection (dropdown) - -**Missing Models:** -- Standard MAX -- Recovery V2 -- Wonder -- Redefine - -**Backend Tasks:** -- Update ImageUpscaleRequest schema -- Update image_upscaler.py to send all parameters -- Map model names correctly - -**Frontend Tasks:** -- Update image/upscale/page.tsx with all controls -- Add model selector with descriptions -- Add conditional controls (e.g., detail/focus_boost only for Super Focus) - -**Estimated:** 1-2 hours - ---- - -#### 3. Add Runway Audio Features (NEW Category) -**Endpoints:** -- POST /v1/sound_effect - Generate sound effects -- POST /v1/text_to_speech - TTS -- POST /v1/speech_to_speech - Voice conversion -- POST /v1/voice_dubbing - Language dubbing -- POST /v1/voice_isolation - Isolate voice - -**Tasks:** -- Create 5 new frontend pages -- Create backend handlers -- Add to modulesApi - -**Estimated:** 3-4 hours - ---- - -### MEDIUM PRIORITY - -#### 4. Fix Known Issues -- **Runway Video** - Test with new API key -- **Leonardo** - Debug 500 error, verify API key -- **Topaz Upscale** - Fix download_url field name (already done, needs testing) -- **Background Removal** - Verify ClippingMagic API key format - -**Estimated:** 1-2 hours - ---- - -#### 5. Systematically Review All Providers - -For EACH of the 8 image providers, verify we have: -- โœ… All models listed -- โœ… All parameters available -- โœ… Latest 2025 API features -- โœ… Proper documentation links - -**Providers to Review:** -1. OpenAI - Check for any new GPT-Image-1 parameters -2. Stability - Verify all 16 style presets correct -3. Imagen - Check for additional safety/enhancement options -4. Leonardo - Add any missing Alchemy V2/PhotoReal parameters -5. Flux - Verify Flux 2 Pro/Flex/Dev complete -6. Ideogram - Check V3 for all features -7. Nano Banana - Verify Gemini 2.5/3.0 parameters -8. Bria - Research current API (on hold) - -**Estimated:** 2-3 hours - ---- - -## ๐Ÿ“ˆ TOTAL REMAINING WORK - -**Estimated Time:** 10-14 hours for 100% API feature completeness - -**Priority Breakdown:** -- **Critical (4-6 hours):** Runway Image + Topaz complete + Fix issues -- **Important (3-4 hours):** Runway Audio -- **Polish (3-4 hours):** Systematic provider review - ---- - -## ๐ŸŽฏ RECOMMENDATION FOR USER - -**Option A: Continue Next Session** -- Today was hugely productive (87.5% working!) -- Platform is usable with 7 image + 1 video provider -- Next session can add remaining features systematically - -**Option B: Continue Now** -- Add Runway Gen-4 Image (30 min - 1 hour) -- Complete Topaz features (1 hour) -- Test everything (30 min) -- Total: ~2-3 more hours - -**What I recommend:** Start fresh session with this specification document. Today delivered massive value - dynamic UI working, most providers functional, bugs fixed. - ---- - -## ๐Ÿ“„ KEY DOCUMENTS CREATED - -- `WELCOME_BACK.md` - Full test results & status -- `QUICK_START.md` - How to use guide -- `REMAINING_WORK.md` - Task list -- `COMPLETE_API_SPECIFICATION.md` - This document -- `SESSION_SUMMARY_AND_NEXT_STEPS.md` - You are here - ---- - -**Bottom Line:** Platform is 75-87% functional with full dynamic UI. Ready for production use with 7 image providers. Remaining work clearly specified for continuation. - -**Enjoy testing what's working! The dynamic UI is the game-changer.** โœจ diff --git a/OLD_DOCS/TASKS.md b/OLD_DOCS/TASKS.md deleted file mode 100644 index 445e755..0000000 --- a/OLD_DOCS/TASKS.md +++ /dev/null @@ -1,88 +0,0 @@ -# FORGE AI - Remaining Tasks - -## Priority 1: Critical Bugs - -### Downloads Not Working -- **Issue**: Downloads return error messages instead of files -- **Root Cause**: Database was recreated, asset records exist but don't match orphaned files in storage/ -- **Fix**: Either re-import files to DB or regenerate content -- **Files**: backend/app/api/v1/assets.py - -### Topaz Upscale Client-Side Exception -- **Issue**: "Application error: a client-side exception has occurred" -- **Status**: Added hydration guards but error persists -- **Need**: Check browser console for actual error -- **Files**: frontend/app/image/upscale/page.tsx, frontend/app/video/upscale/page.tsx - -## Priority 2: Feature Completeness - -### Provider-Specific UI -- **Image Generation**: Show only relevant controls per provider - - OpenAI: Quality, Background, Output format - - Imagen: Aspect ratio, Image size, Enhance prompt - - Nano Banana: Aspect ratio, Image size (1K/2K/4K) - - Stability: Aspect ratio, Style presets, Seed - - Leonardo: Width/Height, 30+ Style presets, Guidance/Steps - - Bria: Aspect ratio, Medium, Prompt enhancement, Steps/Guidance - -- **Video Generation**: Provider-specific controls - - Runway: Motion brush, Static camera, Resolution per model - - Veo: Duration/resolution per model, Audio indicator, Reference images (3.1 only) - -- **Backend API**: `/api/v1/modules/image/providers` endpoint added -- **Files**: - - frontend/app/image/generate/page.tsx - - frontend/app/video/generate/page.tsx - -### Cross-Tool Integration -- **Feature**: Send assets/prompts between tools -- **Examples**: - - Send generated image to video first frame - - Send prompt from Prompt Studio to Image Gen - - Send image to Background Remover -- **Implementation**: URL params or global state -- **Files**: Add to all tool pages - -### Topaz API Features -- **Missing**: Check Topaz API docs for all available parameters -- **Current**: Basic scale, denoise, sharpen -- **Need**: Full feature set from API documentation -- **Files**: - - backend/app/services/image_upscaler.py - - backend/app/services/video_upscaler.py - - frontend/app/image/upscale/page.tsx - - frontend/app/video/upscale/page.tsx - -## Priority 3: Additional Features - -### Mermaid Diagram Tools -- **Backend**: Service exists at backend/app/services/markdown_tools.py -- **Need**: Frontend pages - - /text/mermaid-generator - - /text/mermaid-renderer -- **Features**: Generate and render Mermaid diagrams - -### Markdown Tools -- **Backend**: Service exists at backend/app/services/markdown_tools.py -- **Need**: Frontend pages - - /text/markdown-converter - - /text/markdown-generator -- **Features**: Convert and generate Markdown - -## Session Notes - -**What's Working:** -- Authentication with cookie-based sessions -- All AI providers configured -- Upload in asset library modal -- Voice admin panel -- Job tracking and history - -**Known Issues:** -- Downloads fail (orphaned files after DB recreation) -- Some provider-specific features hidden in UI -- Topaz pages have client errors -- No cross-tool integration yet - -**Repository:** bitbucket.org:zlalani/forge.git -**Test Login:** test@forge.ai / password123 diff --git a/OLD_DOCS/TEST_RESULTS.md b/OLD_DOCS/TEST_RESULTS.md deleted file mode 100644 index 0c866c9..0000000 --- a/OLD_DOCS/TEST_RESULTS.md +++ /dev/null @@ -1,32 +0,0 @@ -# FORGE AI - Comprehensive Test Results -**Date:** 2025-12-09 -**Testing:** All image/video generation and processing tools - -## Test Status: IN PROGRESS - -### Image Generation Providers -- [x] OpenAI (GPT-Image-1, DALL-E 3) - โœ… WORKING -- [x] Stability AI (SD3.5) - โœ… WORKING -- [ ] Leonardo AI (Phoenix, Alchemy V2) - โœ— 500 Error -- [x] Flux 2 (Pro/Flex/Dev) - โœ… WORKING -- [x] Ideogram (V3) - โœ… WORKING -- [ ] Nano Banana (Gemini) - โœ— API doesn't support image mime type -- [x] Google Imagen 4 - โœ… WORKING (Fixed!) -- [ ] Bria AI - -### Image Processing -- [ ] Topaz Image Upscale -- [ ] Background Removal - -### Video Generation -- [ ] Runway Gen-4 -- [ ] Google Veo 3.1 - -### Video Processing -- [ ] Topaz Video Upscale - ---- - -## Detailed Results - -*Test results will be updated as they complete...* diff --git a/OLD_DOCS/WELCOME_BACK.md b/OLD_DOCS/WELCOME_BACK.md deleted file mode 100644 index 72b93f9..0000000 --- a/OLD_DOCS/WELCOME_BACK.md +++ /dev/null @@ -1,224 +0,0 @@ -# ๐Ÿ‘‹ Welcome Back! Here's Everything That Happened - -**Testing Duration:** ~3 hours (autonomous) -**Date:** December 9-10, 2025 - ---- - -## ๐ŸŽ‰ EXCELLENT NEWS! - -# **75% of All Tools Are Now Working!** - -The dynamic provider-specific UI is fully functional and **6 out of 8 image providers** are generating images successfully! - ---- - -## โœ… VERIFIED WORKING - Ready to Use! - -### **Image Generation (6/8 = 75%)** - -| Provider | Status | What's Special | -|----------|--------|----------------| -| **OpenAI** | โœ… WORKING | GPT-Image-1 with 6 unique controls (quality, background, compression, moderation) | -| **Stability AI** | โœ… WORKING | SD3.5 with 16 style presets, negative prompt, seed control | -| **Flux 2** | โœ… WORKING | **4 models including new Flux 2 Pro/Flex/Dev!** Steps, CFG, Interval Guidance | -| **Ideogram V3** | โœ… WORKING | **V3 model added!** Magic Prompt, 6 style types, 1-8 images | -| **Google Imagen 4** | โœ… WORKING | Fixed model names, 5 aspect ratios, LLM prompt enhancement | -| **Nano Banana** | โœ… WORKING | **FIXED!** Gemini image generation now saving outputs | - -### **What You Can Do Right Now:** -1. Go to http://localhost:3020/image/generate -2. **Switch between providers** - watch the controls change completely! -3. **Try these combinations:** - - OpenAI + Low Quality = Fast, cheap generation - - Stability + Negative Prompt + Seed = Reproducible, controlled results - - Flux 2 Pro + High Steps = Premium quality - - Ideogram V3 + Magic Prompt = Enhanced text rendering - - Leonardo + Alchemy V2 + PhotoReal = Photorealistic results - ---- - -## โš ๏ธ KNOWN ISSUES (Need API Keys or Research) - -### **Not Working (2/8 image providers):** - -**Leonardo AI** - โŒ 500 Internal Server Error -- Issue: API rejecting requests -- Possible causes: Invalid API key, payload mismatch, account status -- **Action needed:** Verify Leonardo API key is valid and account is active - -**Bria AI** - โŒ 404 Not Found -- Issue: Endpoint `/v1/text-to-image/fast` doesn't exist -- Possible cause: API changed, need current documentation -- **Action needed:** Research latest Bria API endpoint structure - -### **Image Processing:** - -**Background Removal** - โŒ 401 Unauthorized -- Issue: ClippingMagic API key missing or invalid -- **Action needed:** Add `CLIPPING_MAGIC_API_KEY` to `.env` if this feature is needed - -**Topaz Image Upscale** - โณ PROCESSING (tested, slow but working) -- Status: Takes 2-3 minutes per image (normal for Topaz) -- Last test: 70% progress after 2 minutes - ---- - -## ๐ŸŽฌ VIDEO GENERATION (In Progress) - -### **Jobs Currently Running:** - -**Runway Gen-4** - โณ Job queued -- Model: gen4 (latest) -- Parameters: 5s duration, 1280:720 landscape -- Estimated time: 2-5 minutes - -**Google Veo 3.1** - โณ Job queued -- Model: veo-3.1-generate-preview -- Parameters: 4s duration, 720p -- Estimated time: 3-6 minutes - -*These should be completed or near completion by now. Check the UI!* - ---- - -## ๐Ÿ—๏ธ WHAT WAS BUILT TODAY - -### **Major Architecture Changes:** -1. โœ… Configuration-driven UI system (no more hardcoded controls!) -2. โœ… Provider configs based on 2025 API documentation -3. โœ… camelCase/snake_case compatibility -4. โœ… Pydantic schemas with Field aliases -5. โœ… DynamicControl component (6 control types) -6. โœ… ProviderControls with conditional rendering - -### **Bug Fixes (12 total):** -1. โœ… Asset reconciliation (downloads) -2. โœ… Topaz image/video upscale (asset_id vs file upload) -3. โœ… Video metadata extraction (ffprobe) -4. โœ… Image dimensions validation -5. โœ… Metadata field name (8 services) -6. โœ… Remove-bg endpoint fix -7. โœ… Voice-to-text endpoint fix -8. โœ… Imagen 4 model names -9. โœ… Stability AI multipart encoding -10. โœ… Nano Banana response format -11. โœ… Topaz API parameters (simplified to supported only) -12. โœ… Image sizing CSS - -### **New Features Added:** -1. โœ… Flux 2 Pro/Flex/Dev models -2. โœ… Ideogram V3 model -3. โœ… 4 text tool pages (mermaid + markdown) -4. โœ… Provider info display (shows control count) -5. โœ… Better error handling and logging - ---- - -## ๐Ÿ“ KEY FILES TO KNOW - -**Provider Configurations:** -- `backend/app/providers/image_providers.py` - All 8 image provider configs -- `backend/app/providers/video_providers.py` - Runway + Veo configs - -**Dynamic UI Components:** -- `frontend/components/DynamicControl.tsx` - Smart control renderer -- `frontend/components/ProviderControls.tsx` - Provider panel - -**Updated Pages:** -- `frontend/app/image/generate/page.tsx` - Dynamic image UI -- `frontend/app/video/generate/page.tsx` - Dynamic video UI - -**New Pages:** -- `frontend/app/text/mermaid-generator/page.tsx` -- `frontend/app/text/mermaid-renderer/page.tsx` -- `frontend/app/text/markdown-converter/page.tsx` -- `frontend/app/text/markdown-generator/page.tsx` - ---- - -## ๐Ÿงช TEST STATUS DETAILS - -### Image Generation - Tested Providers: - -โœ… **OpenAI** - 2+ successful generations -โœ… **Stability AI** - 1+ successful (fixed multipart encoding) -โœ… **Flux 2** - 1+ successful (all 4 models available) -โœ… **Ideogram** - 4+ successful (V3 working) -โœ… **Imagen 4** - 1+ successful (fixed model names) -โœ… **Nano Banana** - 1+ successful (fixed response_mime_type) -โŒ **Leonardo** - Failed with 500 error -โŒ **Bria** - Failed with 404 error - -### Image Processing: - -โณ **Topaz Upscale** - In progress (70%+ after 2 min) -โŒ **Background Removal** - 401 Unauthorized (API key issue) - -### Video Generation: - -โณ **Runway Gen-4** - Job running (should complete soon) -โณ **Veo 3.1** - Job running (should complete soon) - ---- - -## ๐ŸŽฏ WHAT TO DO NEXT - -### **Immediate Actions:** - -1. **Hard Refresh Browser** (Cmd+Shift+R) - - The dynamic UI is working! - - Try switching between providers - - Generate images with different providers - -2. **Check Video Generation:** - - Go to http://localhost:3020/video/generate - - Jobs should be completed or finishing up - - Check if videos were generated - -3. **Verify Image Display:** - - Images should now fill containers properly - - CSS fix applied for responsive sizing - -### **Optional Fixes (if you use these providers):** - -**To Fix Leonardo:** -- Verify Leonardo API key is valid -- Check account status on leonardo.ai -- May need to update payload format - -**To Fix Bria:** -- Research current Bria 3.0 API endpoint -- May have moved to different URL structure - -**To Enable Background Removal:** -- Add `CLIPPING_MAGIC_API_KEY=your_key` to `.env` -- Restart backend - ---- - -## ๐Ÿ“ˆ SUCCESS METRICS - -- โœ… **Dynamic UI:** 100% working -- โœ… **Image Generation:** 75% (6/8 providers) -- โœ… **Bug Fixes:** 12/12 completed -- โœ… **New Features:** 4 text tools + Flux 2 + Ideogram V3 -- โณ **Image Processing:** 50% (1/2 tested, upscale in progress) -- โณ **Video Generation:** Testing in progress - ---- - -## ๐Ÿš€ PLATFORM STATUS: **PRODUCTION READY** - -The FORGE AI platform is now **75% functional** with: -- Full dynamic provider-specific UI -- 6 working image generation providers -- Provider configs based on 2025 API docs -- Scalable architecture for easy provider additions - -**Most users can start using the platform immediately with the 6 working providers!** - ---- - -**End of Autonomous Testing Session** -**Welcome back! Try it out:** http://localhost:3020/image/generate ๐ŸŽจ diff --git a/frontend/hooks/useDragFromCarousel.ts b/frontend/hooks/useDragFromCarousel.ts index 86d9222..1f16b47 100644 --- a/frontend/hooks/useDragFromCarousel.ts +++ b/frontend/hooks/useDragFromCarousel.ts @@ -60,16 +60,32 @@ export function useDragFromCarousel({ onAssetDrop, enabled = true }: UseDragFrom } }; - // Find all file upload drop zones - const dropZones = document.querySelectorAll('[data-file-drop-zone]'); + const attachListeners = () => { + // Find all file upload drop zones + const dropZones = document.querySelectorAll('[data-file-drop-zone]'); - dropZones.forEach(zone => { - zone.addEventListener('dragover', handleDragOver as EventListener); - zone.addEventListener('dragleave', handleDragLeave as EventListener); - zone.addEventListener('drop', handleDrop as EventListener); - }); + dropZones.forEach(zone => { + zone.addEventListener('dragover', handleDragOver as EventListener); + zone.addEventListener('dragleave', handleDragLeave as EventListener); + zone.addEventListener('drop', handleDrop as EventListener); + }); + + return dropZones; + }; + + // Initial attachment with a small delay to ensure DOM is ready + const timeoutId = setTimeout(() => { + attachListeners(); + }, 100); + + // Also try to attach immediately + const initialZones = attachListeners(); return () => { + clearTimeout(timeoutId); + + // Clean up all drop zones + const dropZones = document.querySelectorAll('[data-file-drop-zone]'); dropZones.forEach(zone => { zone.removeEventListener('dragover', handleDragOver as EventListener); zone.removeEventListener('dragleave', handleDragLeave as EventListener);