mohitrai76 commited on
Commit
dd12d72
·
verified ·
1 Parent(s): 4bed589

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +3 -19
app.py CHANGED
@@ -362,7 +362,6 @@ body {
362
  color: #E2E8F0; /* Light text color for contrast */
363
  overflow-x: hidden;
364
  }
365
-
366
  /* --- Core Gradio Block Blending --- */
367
  /* Make Gradio's main container transparent to show body background */
368
  .gradio-container {
@@ -371,7 +370,6 @@ body {
371
  border: none !important;
372
  padding: 0 !important;
373
  }
374
-
375
  /* Specific Gradio block elements - subtle transparency */
376
  .block {
377
  background-color: hsla(210, 20%, 25%, 0.5) !important; /* Semi-transparent dark blue-grey */
@@ -382,14 +380,12 @@ body {
382
  margin-bottom: 25px !important;
383
  padding: 25px !important; /* Add internal padding to blocks */
384
  }
385
-
386
  /* Remove default Gradio layout wrappers' backgrounds */
387
  .main-wrapper, .panel-container {
388
  background: transparent !important;
389
  box-shadow: none !important;
390
  border: none !important;
391
  }
392
-
393
  /* --- Application Title and Description --- */
394
  .gradio-header h1 {
395
  color: #8D5BFC !important; /* Vibrant Purple for main title */
@@ -399,7 +395,6 @@ body {
399
  font-weight: 700 !important;
400
  text-align: center;
401
  }
402
-
403
  .gradio-markdown p {
404
  color: #CBD5E0 !important; /* Lighter text for description */
405
  font-size: 1.25em !important;
@@ -407,7 +402,6 @@ body {
407
  margin-bottom: 40px !important;
408
  font-weight: 300;
409
  }
410
-
411
  /* --- Input Components (File, Dropdowns) --- */
412
  .gradio-file, .gradio-dropdown {
413
  background-color: hsla(210, 20%, 18%, 0.7) !important; /* Darker, slightly transparent */
@@ -419,16 +413,13 @@ body {
419
  transition: all 0.3s ease;
420
  box-shadow: 0 4px 15px hsla(0, 0%, 0%, 0.2);
421
  }
422
-
423
  .gradio-file input[type="file"] {
424
  color: #E2E8F0 !important;
425
  }
426
-
427
  .gradio-file:hover, .gradio-dropdown:hover {
428
  border-color: #A78BFA !important; /* Lighter purple on hover */
429
  box-shadow: 0 6px 20px hsla(0, 0%, 0%, 0.3);
430
  }
431
-
432
  /* Focus state for inputs */
433
  .gradio-dropdown.gr-text-input:focus,
434
  .gradio-file input:focus {
@@ -436,7 +427,6 @@ body {
436
  box-shadow: 0 0 20px hsla(260, 90%, 70%, 0.5);
437
  background-color: hsla(210, 20%, 20%, 0.9) !important; /* Slightly less transparent */
438
  }
439
-
440
  /* Labels for inputs */
441
  .gradio-label {
442
  color: #A78BFA !important; /* Soft purple for labels */
@@ -446,7 +436,6 @@ body {
446
  text-align: left;
447
  width: 100%;
448
  }
449
-
450
  /* --- Submit Button --- */
451
  .gradio-button {
452
  background: linear-gradient(90deg, #FF6B8B, #FF8E53) !important; /* Vibrant Pink to Orange gradient */
@@ -465,13 +454,11 @@ body {
465
  text-transform: uppercase; /* Make button text uppercase */
466
  letter-spacing: 1px;
467
  }
468
-
469
  .gradio-button:hover {
470
  background: linear-gradient(90deg, #FF4B7B, #FF7E43) !important;
471
  box-shadow: 0 10px 30px hsla(0, 0%, 0%, 0.5) !important;
472
  transform: translateY(-3px) !important;
473
  }
474
-
475
  /* --- Output Video Player --- */
476
  .gradio-video {
477
  background-color: hsla(210, 20%, 15%, 0.8) !important; /* Darker, more opaque background for video */
@@ -481,7 +468,6 @@ body {
481
  box-shadow: 0 10px 40px hsla(0, 0%, 0%, 0.5) !important; /* Stronger shadow */
482
  margin-top: 40px !important;
483
  }
484
-
485
  /* --- Translated Text Output --- */
486
  .gradio-markdown-output, .gradio-textbox {
487
  background-color: hsla(210, 20%, 18%, 0.7) !important;
@@ -495,7 +481,6 @@ body {
495
  white-space: pre-wrap; /* Preserve line breaks */
496
  box-shadow: 0 4px 15px hsla(0, 0%, 0%, 0.2);
497
  }
498
-
499
  /* Flexbox for the Row to control spacing and alignment */
500
  .gradio-row {
501
  display: flex;
@@ -504,13 +489,11 @@ body {
504
  gap: 20px; /* Space between items in the row */
505
  flex-wrap: wrap; /* Allow items to wrap on smaller screens */
506
  }
507
-
508
  /* Ensure individual components in a row take up appropriate space */
509
  .gradio-row > .gradio-component {
510
  flex: 1; /* Allow components to grow and shrink */
511
  min-width: 250px; /* Minimum width for components in a row */
512
  }
513
-
514
  /* Adjust padding for gr.Blocks content */
515
  .gr-box {
516
  padding: 0 !important; /* Remove internal padding if present to let elements breathe */
@@ -536,8 +519,9 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(
536
  c950='#020617'
537
  )
538
  )) as demo:
539
- gr.Markdown("# DeepDub :A Video Dubbing Application")
540
  gr.Markdown("Upload a video and get a dubbed version with translated audio")
 
541
 
542
  with gr.Row():
543
  video_input = gr.File(label="Upload Video", file_types=[".mp4", ".mov", ".avi", ".mkv"])
@@ -557,7 +541,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(
557
  value=voice_options["Hindi"][0],
558
  interactive=True
559
  )
560
-
561
  output_video = gr.Video(label="Dubbed Video")
562
  submit_btn = gr.Button("Start Dubbing")
563
 
 
362
  color: #E2E8F0; /* Light text color for contrast */
363
  overflow-x: hidden;
364
  }
 
365
  /* --- Core Gradio Block Blending --- */
366
  /* Make Gradio's main container transparent to show body background */
367
  .gradio-container {
 
370
  border: none !important;
371
  padding: 0 !important;
372
  }
 
373
  /* Specific Gradio block elements - subtle transparency */
374
  .block {
375
  background-color: hsla(210, 20%, 25%, 0.5) !important; /* Semi-transparent dark blue-grey */
 
380
  margin-bottom: 25px !important;
381
  padding: 25px !important; /* Add internal padding to blocks */
382
  }
 
383
  /* Remove default Gradio layout wrappers' backgrounds */
384
  .main-wrapper, .panel-container {
385
  background: transparent !important;
386
  box-shadow: none !important;
387
  border: none !important;
388
  }
 
389
  /* --- Application Title and Description --- */
390
  .gradio-header h1 {
391
  color: #8D5BFC !important; /* Vibrant Purple for main title */
 
395
  font-weight: 700 !important;
396
  text-align: center;
397
  }
 
398
  .gradio-markdown p {
399
  color: #CBD5E0 !important; /* Lighter text for description */
400
  font-size: 1.25em !important;
 
402
  margin-bottom: 40px !important;
403
  font-weight: 300;
404
  }
 
405
  /* --- Input Components (File, Dropdowns) --- */
406
  .gradio-file, .gradio-dropdown {
407
  background-color: hsla(210, 20%, 18%, 0.7) !important; /* Darker, slightly transparent */
 
413
  transition: all 0.3s ease;
414
  box-shadow: 0 4px 15px hsla(0, 0%, 0%, 0.2);
415
  }
 
416
  .gradio-file input[type="file"] {
417
  color: #E2E8F0 !important;
418
  }
 
419
  .gradio-file:hover, .gradio-dropdown:hover {
420
  border-color: #A78BFA !important; /* Lighter purple on hover */
421
  box-shadow: 0 6px 20px hsla(0, 0%, 0%, 0.3);
422
  }
 
423
  /* Focus state for inputs */
424
  .gradio-dropdown.gr-text-input:focus,
425
  .gradio-file input:focus {
 
427
  box-shadow: 0 0 20px hsla(260, 90%, 70%, 0.5);
428
  background-color: hsla(210, 20%, 20%, 0.9) !important; /* Slightly less transparent */
429
  }
 
430
  /* Labels for inputs */
431
  .gradio-label {
432
  color: #A78BFA !important; /* Soft purple for labels */
 
436
  text-align: left;
437
  width: 100%;
438
  }
 
439
  /* --- Submit Button --- */
440
  .gradio-button {
441
  background: linear-gradient(90deg, #FF6B8B, #FF8E53) !important; /* Vibrant Pink to Orange gradient */
 
454
  text-transform: uppercase; /* Make button text uppercase */
455
  letter-spacing: 1px;
456
  }
 
457
  .gradio-button:hover {
458
  background: linear-gradient(90deg, #FF4B7B, #FF7E43) !important;
459
  box-shadow: 0 10px 30px hsla(0, 0%, 0%, 0.5) !important;
460
  transform: translateY(-3px) !important;
461
  }
 
462
  /* --- Output Video Player --- */
463
  .gradio-video {
464
  background-color: hsla(210, 20%, 15%, 0.8) !important; /* Darker, more opaque background for video */
 
468
  box-shadow: 0 10px 40px hsla(0, 0%, 0%, 0.5) !important; /* Stronger shadow */
469
  margin-top: 40px !important;
470
  }
 
471
  /* --- Translated Text Output --- */
472
  .gradio-markdown-output, .gradio-textbox {
473
  background-color: hsla(210, 20%, 18%, 0.7) !important;
 
481
  white-space: pre-wrap; /* Preserve line breaks */
482
  box-shadow: 0 4px 15px hsla(0, 0%, 0%, 0.2);
483
  }
 
484
  /* Flexbox for the Row to control spacing and alignment */
485
  .gradio-row {
486
  display: flex;
 
489
  gap: 20px; /* Space between items in the row */
490
  flex-wrap: wrap; /* Allow items to wrap on smaller screens */
491
  }
 
492
  /* Ensure individual components in a row take up appropriate space */
493
  .gradio-row > .gradio-component {
494
  flex: 1; /* Allow components to grow and shrink */
495
  min-width: 250px; /* Minimum width for components in a row */
496
  }
 
497
  /* Adjust padding for gr.Blocks content */
498
  .gr-box {
499
  padding: 0 !important; /* Remove internal padding if present to let elements breathe */
 
519
  c950='#020617'
520
  )
521
  )) as demo:
522
+ gr.Markdown("# DeepDub : A Video Dubbing Application")
523
  gr.Markdown("Upload a video and get a dubbed version with translated audio")
524
+
525
 
526
  with gr.Row():
527
  video_input = gr.File(label="Upload Video", file_types=[".mp4", ".mov", ".avi", ".mkv"])
 
541
  value=voice_options["Hindi"][0],
542
  interactive=True
543
  )
544
+ gr.Markdown("Note : If you see Queue that means someone is using and please wait")
545
  output_video = gr.Video(label="Dubbed Video")
546
  submit_btn = gr.Button("Start Dubbing")
547