File size: 29,096 Bytes
2d37733
9093067
 
d948455
 
 
 
 
 
 
 
 
 
 
 
9093067
d948455
 
 
 
 
2d37733
 
 
68d53f7
7d6b1f5
68d53f7
d948455
68d53f7
d948455
 
 
2d37733
 
7d6b1f5
d948455
 
 
2d37733
d948455
7d6b1f5
d948455
 
 
 
ad4ca82
 
 
 
 
 
 
 
 
 
 
 
 
 
cd796d6
ad4ca82
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d948455
 
 
 
 
2d37733
7d6b1f5
bd0b7e3
2d37733
 
d948455
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9093067
ad4ca82
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d948455
ad4ca82
 
 
 
 
 
d948455
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bd0b7e3
 
 
 
 
 
 
d948455
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
722a50c
 
d948455
 
 
 
 
 
 
 
 
 
 
 
2d37733
 
 
 
 
 
bd0b7e3
d948455
 
 
 
 
bd0b7e3
d948455
 
 
 
 
 
 
 
 
 
 
719dba0
d948455
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
719dba0
 
d948455
 
 
 
 
 
7d6b1f5
 
 
 
722a50c
7d6b1f5
722a50c
7d6b1f5
 
722a50c
 
 
 
7d6b1f5
722a50c
 
 
 
7d6b1f5
 
 
 
 
 
722a50c
 
 
7d6b1f5
722a50c
 
 
7d6b1f5
 
722a50c
7d6b1f5
 
 
722a50c
 
7d6b1f5
 
 
722a50c
 
7d6b1f5
 
722a50c
 
 
7d6b1f5
 
722a50c
 
 
7d6b1f5
722a50c
 
 
 
 
 
 
 
 
 
 
 
7d6b1f5
722a50c
 
 
 
 
 
7d6b1f5
722a50c
 
 
 
 
7d6b1f5
722a50c
 
7d6b1f5
722a50c
7d6b1f5
 
 
 
722a50c
 
 
 
 
 
 
 
 
 
 
7d6b1f5
 
 
 
 
 
 
 
 
 
 
 
ad4ca82
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d948455
 
7d6b1f5
2d37733
d948455
 
2d37733
722a50c
7d6b1f5
722a50c
 
 
 
 
 
 
 
2d37733
d948455
2d37733
719dba0
d948455
 
 
 
 
 
 
719dba0
 
d948455
722a50c
7d6b1f5
722a50c
 
ad4ca82
722a50c
 
ad4ca82
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bd0b7e3
 
722a50c
d948455
722a50c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7d6b1f5
 
 
 
 
 
 
 
 
 
722a50c
 
 
 
 
d948455
 
 
 
2d37733
 
 
d948455
 
bd0b7e3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ad4ca82
 
bd0b7e3
ad4ca82
 
722a50c
bd0b7e3
722a50c
 
 
 
bd0b7e3
 
722a50c
 
 
 
 
bd0b7e3
84b3b1e
 
722a50c
d948455
bd0b7e3
d948455
2d37733
722a50c
 
 
 
 
 
 
2d37733
 
d950c22
2d37733
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
import os
import requests
import gradio as gr
import uuid
import datetime
from supabase import create_client, Client
from supabase.lib.client_options import ClientOptions
import dotenv
from google.cloud import storage
import json
from pathlib import Path
import mimetypes
from workflow_handler import WanVideoWorkflow
from video_config import MODEL_FRAME_RATES, calculate_frames
import asyncio

dotenv.load_dotenv()

SCRIPT_DIR = Path(__file__).parent
CONFIG_PATH = SCRIPT_DIR / "config.json"
WORKFLOW_PATH = SCRIPT_DIR / "wani2v.json"

loras = [
  {
      #I suggest it to be a gif instead of an mp4!
      "image": "https://huggingface.co/Remade-AI/Squish/resolve/main/example_gifs/person_squish.gif",
      #This is an id you can send to your backend, obviously you can change it
      "id": "06ce6840-f976-4963-9644-b6cf7f323f90",
      #This is the title that is shown on the front end
      "title": "Squish",

      "example_prompt": "In the video, a miniature rodent is presented. The rodent is held in a person's hands. The person then presses on the rodent, causing a sq41sh squish effect. The person keeps pressing down on the rodent, further showing the sq41sh squish effect.",
  },  
  {
      "image": "https://huggingface.co/Remade-AI/Rotate/resolve/main/example_videos/chair-rotate.gif",
      "id": "4ac08cfa-841e-4aa9-9022-c3fc80fb6ef4",
      "title": "Rotate",
      "example_prompt": "The video shows an elderly Asian man's head and shoulders with blurred background, performing a r0t4tion 360 degrees rotation.",
    },
    {
      "image": "https://huggingface.co/Remade-AI/Cakeify/resolve/main/example_gifs/timberland_cakeify.gif",
      "id": "b05c1dc7-a71c-4d24-b512-4877a12dea7e",
      "title": "Cakeify",
      "example_prompt": "The video opens on a woman. A knife, held by a hand, is coming into frame and hovering over the woman. The knife then begins cutting into the woman to c4k3 cakeify it. As the knife slices the woman open, the inside of the woman is revealed to be cake with chocolate layers. The knife cuts through and the contents of the woman are revealed."
    },
      {
      "image": "https://huggingface.co/Remade-AI/Muscle/resolve/main/example_videos/man2_muscle.gif",
      "id": "3c6fd399-e558-43fa-8cd3-828300aac6f8",
      "title": "Muscle",
      "example_prompt": "A man t2k1s takes off clothes revealing a lean muscular body and shows off muscles, looking towards the camera."
    },
    {
      "image": "https://storage.googleapis.com/remade-v2/huggingface_assets/crush_example.gif",
      "id": "d8a2912b-94e4-4227-9c45-356679af34fd",
      "title": "Crush",
      "example_prompt": "The video begins with a cube saying closed source. A hydraulic press positioned above slowly descends towards the cube. Upon contact, the hydraulic press c5us4 crushes it, deforming and flattening the cube, causing the cube to collapse inward until the cube is no longer recognizable."
    },
    {
      "image": "https://storage.googleapis.com/remade-v2/huggingface_assets/decay_example.gif",
      "id": "6b6f64dc-ac14-44b2-b91c-a510cb7f7f32",
      "title": "Decay",
      "example_prompt": "The video shows a man. The d3c4y decay time-lapse begins, causing the man to change. The man is initially whole, but soon he appears to be rotting. The man slowly becomes increasingly shriveled and discolored, and eventually, the man decomposes and falls apart. The man is rotting in the center and appears to be covered in mold, completing the d3c4y decay time-lapse."
    },
    {
      "image": "https://storage.googleapis.com/remade-v2/huggingface_assets/jesus_example.gif",
      "id": "615fe106-fec4-44bb-b28b-2864cb322027",
      "title": "Jesus",
      "example_prompt": "The video begins with a smiling woman with a pink shirt looking at the camera. Then jesus appears behind her as h54g hugs jesus. Jesus embraces the woman, and they both smile in front of a park."
    },
     {
      "image": "https://storage.googleapis.com/remade-v2/huggingface_assets/inflate_example.gif",
      "id": "da2b1c34-7be8-4161-a733-e8b19a98901c",
      "title": "Inflate",
      "example_prompt": "The large, bald man rides a gray donkey, then infl4t3 inflates it, both the man and the donkey expanding into giant, inflated figures against the desert landscape."
    },
  
    
    
    
    
    
    
    
]

# Initialize Supabase client with async support
supabase: Client = create_client(
    os.getenv('SUPABASE_URL'),
    os.getenv('SUPABASE_KEY'),
   
)

def initialize_gcs():
    """Initialize Google Cloud Storage client with credentials from environment"""
    try:
        # Parse service account JSON from environment variable
        service_account_json = os.getenv('SERVICE_ACCOUNT_JSON')
        if not service_account_json:
            raise ValueError("SERVICE_ACCOUNT_JSON environment variable not found")
        
        credentials_info = json.loads(service_account_json)
        
        # Initialize storage client
        storage_client = storage.Client.from_service_account_info(credentials_info)
        print("Successfully initialized Google Cloud Storage client")
        return storage_client
    except Exception as e:
        print(f"Error initializing Google Cloud Storage: {e}")
        raise

def upload_to_gcs(file_path, content_type=None, folder='user_uploads'):
    """
    Uploads a file to Google Cloud Storage
    Args:
        file_path: Path to the file to upload
        content_type: MIME type of the file (optional)
        folder: Folder path in bucket (default: 'user_uploads')
    Returns:
        str: Public URL of the uploaded file
    """
    try:
        bucket_name = 'remade-v2'
        storage_client = initialize_gcs()
        bucket = storage_client.bucket(bucket_name)

        # Get file extension and generate unique filename
        file_extension = Path(file_path).suffix
        if not content_type:
            content_type = mimetypes.guess_type(file_path)[0] or 'application/octet-stream'
        
        # Validate file type
        valid_types = ['image/jpeg', 'image/png', 'image/gif']
        if content_type not in valid_types:
            raise ValueError("Invalid file type. Please upload a JPG, PNG or GIF image.")

        # Generate unique filename with proper path structure
        filename = f"{str(uuid.uuid4())}{file_extension}"
        file_path_in_gcs = f"{folder}/{filename}"
        
        # Create blob and set metadata
        blob = bucket.blob(file_path_in_gcs)
        blob.content_type = content_type
        blob.cache_control = 'public, max-age=31536000'
        
        print(f'Uploading file to GCS: {file_path_in_gcs}')
        
        # Upload the file
        blob.upload_from_filename(
            file_path,
            timeout=120  # 2 minute timeout
        )
        
        # Generate public URL with correct path format
        image_url = f"https://storage.googleapis.com/{bucket_name}/{file_path_in_gcs}"
        print(f"Successfully uploaded to GCS: {image_url}")
        return image_url

    except Exception as e:
        print(f"Error uploading to GCS: {e}")
        raise ValueError(f"Failed to upload image to storage: {str(e)}")

def build_lora_prompt(subject, lora_id):
    """
    Builds a standardized prompt based on the selected LoRA and subject
    """
    # Get LoRA config
    lora_config = next((lora for lora in loras if lora["id"] == lora_id), None)
    if not lora_config:
        raise ValueError(f"Invalid LoRA ID: {lora_id}")
    
    if lora_id == "06ce6840-f976-4963-9644-b6cf7f323f90":  # Squish
        return (
            f"In the video, a miniature {subject} is presented. "
            f"The {subject} is held in a person's hands. "
            f"The person then presses on the {subject}, causing a sq41sh squish effect. "
            f"The person keeps pressing down on the {subject}, further showing the sq41sh squish effect."
        )
    
    elif lora_id == "4ac08cfa-841e-4aa9-9022-c3fc80fb6ef4":  # Rotate
        return (
            f"The video shows a {subject} performing a r0t4tion 360 degrees rotation."
        )
    
    elif lora_id == "b05c1dc7-a71c-4d24-b512-4877a12dea7e":  # Cakeify
        return (
            f"The video opens on a {subject}. A knife, held by a hand, is coming into frame "
            f"and hovering over the {subject}. The knife then begins cutting into the {subject} "
            f"to c4k3 cakeify it. As the knife slices the {subject} open, the inside of the "
            f"{subject} is revealed to be cake with chocolate layers. The knife cuts through "
            f"and the contents of the {subject} are revealed."
        )
    
    elif lora_id == "3c6fd399-e558-43fa-8cd3-828300aac6f8":  # Muscle
        return (
            f"A {subject} t2k1s takes off clothes revealing a lean muscular body and shows off muscles, "
            f"looking towards the camera."
        )
    
    elif lora_id == "d8a2912b-94e4-4227-9c45-356679af34fd":  # Crush
        return (
            f"The video begins with a {subject}. A hydraulic press positioned above slowly descends "
            f"towards the {subject}. Upon contact, the hydraulic press c5us4 crushes it, deforming and "
            f"flattening the {subject}, causing the {subject} to collapse inward until the {subject} is "
            f"no longer recognizable."
        )
    
    elif lora_id == "3c6fd399-e558-43fa-8cd3-828300aac6f8":  # Decay
        return (
            f"The video shows a {subject}. The d3c4y decay time-lapse begins, causing the {subject} to change. "
            f"The {subject} is initially whole, but soon it appears to be rotting. The {subject} slowly becomes "
            f"increasingly shriveled and discolored, and eventually, the {subject} decomposes and falls apart. "
            f"The {subject} is rotting in the center and appears to be covered in mold, completing the d3c4y decay time-lapse."
        )
    
    elif lora_id == "615fe106-fec4-44bb-b28b-2864cb322027":  # Jesus
        return (
            f"The video begins with a {subject} looking at the camera. Then jesus appears behind the {subject} "
            f"as h54g hugs jesus. Jesus embraces the {subject}, and they both smile."
        )
    
    elif lora_id == "da2b1c34-7be8-4161-a733-e8b19a98901c":  # Inflate
        return (
            f"The {subject} infl4t3 inflates, expanding into a giant, inflated figure."
        )
    
    else:
        # Fallback to using the example prompt from the LoRA config
        if "example_prompt" in lora_config:
            # Replace any specific subject in the example with the user's subject
            return lora_config["example_prompt"].replace("rodent", subject).replace("woman", subject).replace("man", subject)
        else:
            raise ValueError(f"Unknown LoRA ID: {lora_id} and no example prompt available")

def poll_generation_status(generation_id):
    """Poll generation status from database"""
    try:
        # Query the database for the current status
        response = supabase.table('generations') \
            .select('*') \
            .eq('generation_id', generation_id) \
            .execute()
        
        if not response.data:
            return None
        
        return response.data[0]
    except Exception as e:
        print(f"Error polling generation status: {e}")
        raise e

async def generate_video(input_image, subject, duration, selected_index, progress=gr.Progress()):
    try:
        # Initialize workflow handler with explicit paths
        workflow_handler = WanVideoWorkflow(
            supabase,
            config_path=str(CONFIG_PATH),
            workflow_path=str(WORKFLOW_PATH)
        )
        
        # Check if the input is a URL (example image) or a file path (user upload)
        if input_image.startswith('http'):
            # It's already a URL, use it directly
            image_url = input_image
        else:
            # It's a file path, upload to GCS
            image_url = upload_to_gcs(input_image)
        
        # Map duration selection to actual seconds
        duration_mapping = {
            "Short (3s)": 3,
            "Long (5s)": 5
        }
        video_duration = duration_mapping[duration]
        
        # Get LoRA config
        lora_config = next((lora for lora in loras if lora["id"] == selected_index), None)
        if not lora_config:
            raise ValueError(f"Invalid LoRA ID: {selected_index}")

        # Generate unique ID
        generation_id = str(uuid.uuid4())

        # Update workflow
        prompt = build_lora_prompt(subject, selected_index)
        workflow_handler.update_prompt(prompt)
        workflow_handler.update_input_image(image_url)
        await workflow_handler.update_lora(lora_config)
        workflow_handler.update_length(video_duration)
        workflow_handler.update_output_name(generation_id)

        # Get final workflow
        workflow = workflow_handler.get_workflow()

        # Store generation data in Supabase
        generation_data = {
            "generation_id": generation_id,
            "user_id": "anonymous",
            "status": "queued",
            "progress": 0,
            "worker_id": None,
            "created_at": datetime.datetime.utcnow().isoformat(),
            "message": {
                "generationId": generation_id,
                "workflow": {
                    "prompt": workflow
                }
            },
            "metadata": {
                "prompt": {
                    "original": subject,
                    "enhanced": subject
                },
                "lora": {
                    "id": selected_index,
                    "strength": 1.0,
                    "name": lora_config["title"]
                },
                "workflow": "img2vid",
                "dimensions": None,
                "input_image_url": image_url,
                "video_length": {"duration": video_duration},
            },
            "error": None,
            "output_url": None,
            "batch_id": None,
            "platform": "huggingface"
        }
        
        # Remove await - the execute() method returns the response directly
        response = supabase.table('generations').insert(generation_data).execute()
        print(f"Stored generation data with ID: {generation_id}")
        
        # Return generation ID for tracking
        return generation_id
        
    except Exception as e:
        print(f"Error in generate_video: {e}")
        raise e

def update_selection(evt: gr.SelectData):
  selected_lora = loras[evt.index]
  sentence = f"Selected LoRA: {selected_lora['title']}"
  return selected_lora['id'], sentence

async def handle_generation(image_input, subject, duration, selected_index, progress=gr.Progress(track_tqdm=True)):
    try:
        if selected_index is None:
            raise gr.Error("You must select a LoRA before proceeding.")
            
        # Generate the video and get generation ID
        generation_id = await generate_video(image_input, subject, duration, selected_index)
        
        # Poll for status updates
        while True:
            generation = poll_generation_status(generation_id)
            
            if not generation:
                raise ValueError(f"Generation {generation_id} not found")
                
            # Update progress
            if 'progress' in generation:
                progress_value = generation['progress']
                progress_bar = f'<div class="progress-container"><div class="progress-bar" style="--current: {progress_value}; --total: 100;"><span class="progress-text">Processing: {progress_value}%</span></div></div><div class="refresh-warning">Please do not refresh this page while processing</div>'
                
                # Check status
                if generation['status'] == 'completed':
                    # Final yield with completed video
                    yield generation['output_url'], generation_id, gr.update(visible=False)
                    break  # Exit the loop
                elif generation['status'] == 'error':
                    raise ValueError(f"Generation failed: {generation.get('error')}")
                else:
                    # Yield progress update
                    yield None, generation_id, gr.update(value=progress_bar, visible=True)
            
            # Wait before next poll
            await asyncio.sleep(2)
            
    except Exception as e:
        print(f"Error in handle_generation: {e}")
        raise e

css = '''
#gen_btn{height: 100%}
#gen_column{align-self: stretch}
#title{text-align: center}
#title h1{font-size: 3em; display:inline-flex; align-items:center}
#title img{width: 100px; margin-right: 0.5em}
#gallery .grid-wrap{height: auto; min-height: 350px}
#gallery .gallery-item {height: 100%; width: 100%; object-fit: cover}
#lora_list{background: var(--block-background-fill);padding: 0 1em .3em; font-size: 90%}
.card_internal{display: flex;height: 100px;margin-top: .5em}
.card_internal img{margin-right: 1em}
.styler{--form-gap-width: 0px !important}
#progress{height:30px}
#progress .generating{display:none}
.progress-container {width: 100%;height: 30px;background-color: #2a2a2a;border-radius: 15px;overflow: hidden;margin-bottom: 20px;position: relative;}
.progress-bar {height: 100%;background-color: #7289DA;width: calc(var(--current) / var(--total) * 100%);transition: width 0.5s ease-in-out}
.progress-text {position: absolute;width: 100%;text-align: center;top: 50%;left: 0;transform: translateY(-50%);color: #ffffff;font-weight: bold;}
.refresh-warning {color: #ff7675;font-weight: bold;text-align: center;margin-top: 5px;}

/* Dark mode Discord styling */
.discord-banner {
    background: linear-gradient(135deg, #7289DA 0%, #5865F2 100%);
    color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    margin: 15px 0;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.discord-banner h3 {
    margin-top: 0;
    font-size: 1.5em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    color: #ffffff;
}
.discord-banner p {
    color: #ffffff;
    margin-bottom: 15px;
}
.discord-banner a {
    display: inline-block;
    background-color: #ffffff;
    color: #5865F2;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 24px;
    margin-top: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: none;
}
.discord-banner a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
    background-color: #f2f2f2;
}
.discord-feature {
    background-color: #2a2a2a;
    border-left: 4px solid #7289DA;
    padding: 12px 15px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: #e0e0e0;
}
.discord-feature-title {
    font-weight: bold;
    color: #7289DA;
}
.discord-locked {
    opacity: 0.7;
    position: relative;
    pointer-events: none;
}
.discord-locked::after {
    content: "🔒 Discord members only";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(114,137,218,0.9);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    white-space: nowrap;
    font-size: 0.9em;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.discord-benefits-list {
    text-align: left;
    display: inline-block;
    margin: 10px 0;
    color: #ffffff;
}
.discord-benefits-list li {
    margin: 10px 0;
    position: relative;
    padding-left: 28px;
    color: #ffffff;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.discord-benefits-list li::before {
    content: "✨";
    position: absolute;
    left: 0;
    color: #FFD700;
}
.locked-option {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Warning message styling */
.warning-message {
    background-color: #2a2a2a;
    border-left: 4px solid #ff7675;
    padding: 12px 15px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: #e0e0e0;
    font-weight: bold;
}

/* Example images and upload section styling */
.upload-section {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.example-images-container {
  flex: 1;
}

.upload-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #7289DA;
}

.example-images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.example-image-item {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.example-image-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.example-image-item.selected {
  border-color: #7289DA;
}

.upload-button {
  margin-top: 15px;
}
'''

with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate", text_size="lg")) as demo:
    selected_index = gr.State(None)
    current_generation_id = gr.State(None)
    
    gr.Markdown("# Remade AI - Wan 2.1 I2V effects LoRAs ")
    
    # Discord banner at the top with improved contrast
    discord_banner = gr.HTML(
        """<div class="discord-banner">
            <h3>✨ Unlock Premium Features! ✨</h3>
            <p>Join our Discord community to access longer videos, 100+ LoRAs, audio features, and faster generation times!</p>
            <a href="https://discord.gg/remade-1" target="_blank">Join Discord Now</a>
        </div>"""
    )
    
    selected_info = gr.HTML("")
    
    with gr.Row():
        with gr.Column(scale=1):
            gallery = gr.Gallery(
                [(item["image"], item["title"]) for item in loras],
                label="Select LoRA",
                allow_preview=False,
                columns=4,
                elem_id="gallery",
                show_share_button=False,
                height="350px",
                object_fit="contain"
            )
            
            # Discord feature callout for LoRAs with better contrast
            gr.HTML(
                """<div class="discord-feature">
                    <span class="discord-feature-title">✨ Discord Members:</span> Access 100+ additional LoRAs beyond these 8 samples!
                </div>"""
            )

            gr.HTML('<div class="section-description">Click an example image or upload your own</div>')
            
            # Reorganized image input section - example images and upload side by side
            with gr.Row():
                with gr.Column(scale=1):
                   
                    example_gallery = gr.Gallery(
                        [
                            ("https://storage.googleapis.com/remade-v2/huggingface_assets/uploads_1c2c6e4c-8938-4464-9355-84508bcca24e.jpg", "Old man"),
                            ("https://storage.googleapis.com/remade-v2/huggingface_assets/uploads_1f2c6ec9-823f-46d2-982f-73c494e51877.jpg", "Young woman"),
                            ("https://storage.googleapis.com/remade-v2/huggingface_assets/uploads_24d949f0-8699-4714-9c82-854e1b963063.jpg", "Puppy"),
                            ("https://storage.googleapis.com/remade-v2/huggingface_assets/uploads_af26651e-be1a-40c0-be18-c42b3bf6d211.png", "Mini toy dancers"),
                            ("https://storage.googleapis.com/remade-v2/huggingface_assets/uploads_d22a894e-a074-4742-9e23-787f001a3184.jpg", "Chair"),
                            ("https://storage.googleapis.com/remade-v2/huggingface_assets/uploads_e6472106-4e9d-4620-b41b-a9bbe4893415.png", "Cartoon boy on bike")
                        ],
                        columns=3,
                        height="300px",
                        object_fit="cover"
                    )
                   
                
                with gr.Column(scale=1):
                    # Single image input component that will be used for both uploaded and example images
                    image_input = gr.Image(type="filepath", label="")
            
            subject = gr.Textbox(label="Describe your subject", placeholder="Cat toy")
            
            # Modified duration options - only one active option
            duration = gr.Radio(
                ["Short (3s)"],
                label="Duration",
                value="Short (3s)"
            )
            
            # Add disabled duration option with Discord callout
            gr.HTML(
                """<div class="discord-feature">
                    <span class="discord-feature-title">⏱️ Discord Members:</span> Access longer video durations (up to 10 seconds)!
                </div>"""
            )
            
            # Add disabled audio button with Discord callout
            with gr.Row():
                button = gr.Button("Generate", variant="primary", elem_id="gen_btn")
                audio_button = gr.Button("Add Audio 🔒", interactive=False)
            
        with gr.Column(scale=1):
            # Warning message about not refreshing
            warning_message = gr.HTML(
                """<div class="warning-message">
                    ⚠️ Please DO NOT refresh the page during generation. GPUs may need to warm up and there is a queue. Please be patient. Thank you!
                </div>""",
                visible=True
            )
            
            # Discord feature callout for generation speed - moved above progress bar
            gr.HTML(
                """<div class="discord-feature">
                    <span class="discord-feature-title">⚡ Discord Members:</span> Enjoy priority queue with faster generation times!
                </div>"""
            )
            
            progress_bar = gr.Markdown(elem_id="progress", visible=False)
            output = gr.Video(interactive=False, label="Output video")
    
    gallery.select(
        update_selection,
        outputs=[selected_index, selected_info]
    )
    
    # Modified function to handle example image selection
    def select_example_image(evt: gr.SelectData):
        """Handle example image selection and return image URL, description, and update image source"""
        example_images = [
            {
                "url": "https://storage.googleapis.com/remade-v2/huggingface_assets/uploads_1c2c6e4c-8938-4464-9355-84508bcca24e.jpg",
                "description": "Old man"
            },
            {
                "url": "https://storage.googleapis.com/remade-v2/huggingface_assets/uploads_1f2c6ec9-823f-46d2-982f-73c494e51877.jpg",
                "description": "Young woman"
            },
            {
                "url": "https://storage.googleapis.com/remade-v2/huggingface_assets/uploads_24d949f0-8699-4714-9c82-854e1b963063.jpg",
                "description": "Puppy"
            },
            {
                "url": "https://storage.googleapis.com/remade-v2/huggingface_assets/uploads_af26651e-be1a-40c0-be18-c42b3bf6d211.png",
                "description": "Mini toy dancers"
            },
            {
                "url": "https://storage.googleapis.com/remade-v2/huggingface_assets/uploads_d22a894e-a074-4742-9e23-787f001a3184.jpg",
                "description": "Chair"
            },
            {
                "url": "https://storage.googleapis.com/remade-v2/huggingface_assets/uploads_e6472106-4e9d-4620-b41b-a9bbe4893415.png",
                "description": "Cartoon boy on bike"
            }
        ]
        
        selected = example_images[evt.index]
        
        # Return the URL, description, and update image source to "example"
        return selected["url"], selected["description"], "example"
    
    # Connect example gallery selection to image_input and subject
    example_gallery.select(
        fn=select_example_image,
        outputs=[image_input, subject]
    )
    
    # Add a custom handler to check if inputs are valid
    def check_inputs(subject, image_input, selected_index):
        if not selected_index:
            return gr.Error("You must select a LoRA before proceeding.")
        if not subject.strip():
            return gr.Error("Please describe your subject.")
        if image_input is None:
            return gr.Error("Please upload an image or select an example image.")
        return None
    
    # Use gr.on for the button click with validation
    button.click(
        fn=check_inputs,
        inputs=[subject, image_input, selected_index],
        outputs=None,
        concurrency_limit=None
    ).success(
        fn=handle_generation,
        inputs=[image_input, subject, duration, selected_index],
        outputs=[output, current_generation_id, progress_bar]
    )
    
    # Add a click handler for the disabled audio button
    audio_button.click(
        fn=lambda: gr.Info("Join our Discord to unlock audio generation features!"),
        inputs=None,
        outputs=None
    )

if __name__ == "__main__":
    demo.queue(default_concurrency_limit=None)
    demo.launch()