|
448 | 448 | grid-template-columns: 1fr; |
449 | 449 | } |
450 | 450 | } |
| 451 | + .title-section { |
| 452 | + display: flex; |
| 453 | + align-items: center; |
| 454 | + gap: 25px; |
| 455 | + margin-bottom: 20px; |
| 456 | + justify-content: center; |
| 457 | +} |
| 458 | + |
| 459 | +.logo-container { |
| 460 | + flex-shrink: 0; |
| 461 | + position: relative; |
| 462 | +} |
| 463 | + |
| 464 | +.project-logo { |
| 465 | + width: 80px; |
| 466 | + height: auto; |
| 467 | + filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15)); |
| 468 | + transition: all 0.3s ease; |
| 469 | +} |
| 470 | + |
| 471 | +.project-logo:hover { |
| 472 | + transform: scale(1.08) rotate(2deg); |
| 473 | + filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.2)); |
| 474 | +} |
| 475 | + |
| 476 | +.title-content { |
| 477 | + flex: 1; |
| 478 | + text-align: left; |
| 479 | + max-width: 800px; |
| 480 | +} |
| 481 | + |
| 482 | +.title { |
| 483 | + font-size: 2.2em; |
| 484 | + margin-bottom: 8px; |
| 485 | + text-align: left; |
| 486 | +} |
| 487 | + |
| 488 | +.subtitle { |
| 489 | + text-align: left; |
| 490 | + margin-bottom: 0; |
| 491 | +} |
| 492 | + |
| 493 | +/* Remove the old project badge */ |
| 494 | +.project-badge { |
| 495 | + display: none; |
| 496 | +} |
| 497 | + |
| 498 | +/* Responsive design */ |
| 499 | +@media (max-width: 768px) { |
| 500 | + .title-section { |
| 501 | + flex-direction: column; |
| 502 | + text-align: center; |
| 503 | + gap: 15px; |
| 504 | + } |
| 505 | + |
| 506 | + .title-content { |
| 507 | + text-align: center; |
| 508 | + } |
| 509 | + |
| 510 | + .title { |
| 511 | + text-align: center; |
| 512 | + font-size: 1.8em; |
| 513 | + } |
| 514 | + |
| 515 | + .subtitle { |
| 516 | + text-align: center; |
| 517 | + } |
| 518 | + |
| 519 | + .project-logo { |
| 520 | + width: 60px; |
| 521 | + } |
| 522 | +} |
451 | 523 | </style> |
452 | 524 | </head> |
453 | 525 | <body> |
454 | 526 | <div class="container"> |
455 | 527 | <div class="header"> |
456 | | - <h1 class="title">JAM-1: A Tiny Flow-based Song Generator with Fine-grained Controllability and Aesthetic Alignment</h1> |
| 528 | + <div class="title-section"> |
| 529 | + <div class="logo-container"> |
| 530 | + <img src="jamify-logo-no-bg.png" alt="Project Jamify Logo" class="project-logo"> |
| 531 | + </div> |
| 532 | + <div class="title-content"> |
| 533 | + <h1 class="title">JAM-1: Fine-Grained Word-Level Control for Lyrics-to-Song Generation</h1> |
457 | 534 | <p class="subtitle">The First Model of Project Jamify</p> |
458 | | - <div class="project-badge">🎵🎸 Project Jamify</div> |
| 535 | + </div> |
| 536 | + </div> |
459 | 537 |
|
460 | 538 | <div class="buttons-container"> |
461 | | - <a href="#" class="btn btn-huggingface"> |
| 539 | + <a href="https://huggingface.co/declare-lab/JAM-1" class="btn btn-huggingface"> |
462 | 540 | 🤗 Hugging Face Model |
463 | 541 | </a> |
464 | | - <a href="#" class="btn btn-demo"> |
| 542 | + <a href="https://huggingface.co/spaces/declare-lab/JAM-1" class="btn btn-demo"> |
465 | 543 | 🎵 Interactive Demo |
466 | 544 | </a> |
467 | | - <a href="#" class="btn btn-arxiv"> |
| 545 | + <a href="https://github.com/declare-lab/jamify" class="btn btn-arxiv"> |
468 | 546 | 📄 arXiv Paper |
469 | 547 | </a> |
470 | 548 | <a href="#" class="btn btn-github"> |
|
0 commit comments