Spaces:
Running
Running
To effectively build a comprehensive and resilient image-to-video generation pipeline utilizing the Lora models available in [Hugging Face's Wan2.2 Loras repository](https://huggingface.co/Playtime-AI/Wan2.2-Loras), it is imperative to devise a user-friendly system that streamlines the processes of model loading and generating videos from user-uploaded images. This initiative aims to not only enhance the tool’s performance but also to ensure an enjoyable experience for users at every step of their creative journey.
cf89615 verified | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary-color: #10b981; /* green-500 */ | |
| --secondary-color: #f97316; /* orange-500 */ | |
| --dark-bg: #111827; /* gray-900 */ | |
| --dark-card: #1f2937; /* gray-800 */ | |
| --dark-text: #f9fafb; /* gray-50 */ | |
| --dark-text-secondary: #d1d5db; /* gray-300 */ | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--dark-bg); | |
| color: var(--dark-text); | |
| line-height: 1.6; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--primary-color); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #059669; | |
| } | |
| /* Slider customization */ | |
| input[type="range"] { | |
| height: 6px; | |
| border-radius: 3px; | |
| background: #374151; | |
| outline: none; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: var(--primary-color); | |
| cursor: pointer; | |
| box-shadow: 0 0 2px 0 #555; | |
| transition: background .15s ease-in-out; | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| background: #059669; | |
| } | |
| input[type="range"]::-moz-range-thumb { | |
| width: 20px; | |
| height: 20px; | |
| border: 0; | |
| border-radius: 50%; | |
| background: var(--primary-color); | |
| cursor: pointer; | |
| box-shadow: 0 0 2px 0 #555; | |
| transition: background .15s ease-in-out; | |
| } | |
| /* Custom select arrow */ | |
| select { | |
| background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); | |
| background-repeat: no-repeat; | |
| background-position: right 0.5rem center; | |
| background-size: 1em; | |
| padding-right: 2.5rem; | |
| } | |
| /* Animation for cards */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .container { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| .grid-cols-3 { | |
| grid-template-columns: repeat(1, minmax(0, 1fr)); | |
| } | |
| } |