{"id":5415,"date":"2025-07-31T08:55:50","date_gmt":"2025-07-31T08:55:50","guid":{"rendered":"https:\/\/sharkxs.com\/models\/"},"modified":"2025-09-29T10:49:26","modified_gmt":"2025-09-29T10:49:26","slug":"models","status":"publish","type":"page","link":"https:\/\/sharkxs.com\/en\/models\/","title":{"rendered":"models"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5415\" class=\"elementor elementor-5415 elementor-5410\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f3ab48 e-flex e-con-boxed e-con e-parent\" data-id=\"1f3ab48\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d22d41 elementor-widget elementor-widget-html\" data-id=\"8d22d41\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<style>\r\n    \/* Der gesamte CSS-Code bleibt unver\u00e4ndert *\/\r\n    * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .ai-studio-wrapper {\r\n        background: #0a0a0a;\r\n        color: #ffffff;\r\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n        padding: 2rem;\r\n        min-height: 100vh;\r\n    }\r\n\r\n    \/* Navigation Tabs *\/\r\n    .nav-container {\r\n        max-width: 1400px;\r\n        margin: 0 auto 3rem;\r\n        display: flex;\r\n        justify-content: center;\r\n    }\r\n\r\n    .nav-tabs {\r\n        display: flex;\r\n        gap: 0.5rem;\r\n        background: rgba(255, 255, 255, 0.05);\r\n        padding: 0.25rem;\r\n        border-radius: 12px;\r\n    }\r\n\r\n    .nav-tab {\r\n        padding: 0.75rem 1.5rem;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n        font-weight: 500;\r\n        color: rgba(255, 255, 255, 0.7);\r\n        border: none;\r\n        background: none;\r\n        font-size: 0.95rem;\r\n    }\r\n\r\n    .nav-tab:hover {\r\n        color: #ffffff;\r\n        background: rgba(255, 255, 255, 0.1);\r\n    }\r\n\r\n    .nav-tab.active {\r\n        background: rgba(59, 130, 246, 0.2);\r\n        color: #3b82f6;\r\n    }\r\n\r\n    \/* Hero Section *\/\r\n    .hero {\r\n        padding: 2rem 0;\r\n        text-align: center;\r\n        max-width: 1400px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .hero h1 {\r\n        font-size: 3rem;\r\n        font-weight: 700;\r\n        margin-bottom: 1rem;\r\n        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n        line-height: 1.2;\r\n    }\r\n\r\n    .hero p {\r\n        font-size: 1.25rem;\r\n        color: rgba(255, 255, 255, 0.6);\r\n        max-width: 600px;\r\n        margin: 0 auto;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    \/* Search and Filters *\/\r\n    .controls {\r\n        max-width: 1400px;\r\n        margin: 2rem auto;\r\n        display: flex;\r\n        gap: 1rem;\r\n        flex-wrap: wrap;\r\n        align-items: center;\r\n    }\r\n\r\n    .search-box {\r\n        flex: 1;\r\n        min-width: 300px;\r\n        position: relative;\r\n    }\r\n\r\n    .search-input {\r\n        width: 100%;\r\n        padding: 0.875rem 1rem 0.875rem 3rem;\r\n        background: rgba(255, 255, 255, 0.05);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 12px;\r\n        color: #ffffff;\r\n        font-size: 0.95rem;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .search-input:focus {\r\n        outline: none;\r\n        border-color: #3b82f6;\r\n        background: rgba(255, 255, 255, 0.08);\r\n    }\r\n\r\n    .search-icon {\r\n        position: absolute;\r\n        left: 1rem;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        width: 20px;\r\n        height: 20px;\r\n        opacity: 0.5;\r\n    }\r\n\r\n    .filter-pills {\r\n        display: flex;\r\n        gap: 0.5rem;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .filter-pill {\r\n        padding: 0.5rem 1rem;\r\n        background: rgba(255, 255, 255, 0.05);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 20px;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n        font-size: 0.875rem;\r\n        color: rgba(255, 255, 255, 0.7);\r\n    }\r\n\r\n    .filter-pill:hover {\r\n        background: rgba(255, 255, 255, 0.1);\r\n        color: #ffffff;\r\n    }\r\n\r\n    .filter-pill.active {\r\n        background: rgba(59, 130, 246, 0.2);\r\n        border-color: #3b82f6;\r\n        color: #3b82f6;\r\n    }\r\n\r\n    \/* Models Grid *\/\r\n    .models-container {\r\n        max-width: 1400px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .models-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\r\n        gap: 1.5rem;\r\n        margin-bottom: 4rem;\r\n    }\r\n\r\n    \/* Model Card *\/\r\n    .model-card {\r\n        background: rgba(255, 255, 255, 0.03);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 16px;\r\n        overflow: hidden;\r\n        transition: all 0.3s ease;\r\n        cursor: pointer;\r\n        position: relative;\r\n    }\r\n\r\n    .model-card:hover {\r\n        transform: translateY(-4px);\r\n        background: rgba(255, 255, 255, 0.05);\r\n        border-color: rgba(59, 130, 246, 0.3);\r\n        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .model-media {\r\n        width: 100%;\r\n        height: 200px;\r\n        background: #000;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .model-image,\r\n    .model-video {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n    }\r\n\r\n    .model-play-overlay {\r\n        position: absolute;\r\n        inset: 0;\r\n        background: rgba(0, 0, 0, 0.4);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        opacity: 0;\r\n        transition: opacity 0.2s ease;\r\n    }\r\n\r\n    .model-card:hover .model-play-overlay {\r\n        opacity: 1;\r\n    }\r\n\r\n    .play-icon {\r\n        width: 48px;\r\n        height: 48px;\r\n        background: rgba(255, 255, 255, 0.9);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .model-content {\r\n        padding: 1.5rem;\r\n    }\r\n\r\n    .model-header {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        gap: 1rem;\r\n        margin-bottom: 1rem;\r\n    }\r\n\r\n    .model-icon {\r\n        width: 40px;\r\n        height: 40px;\r\n        background: rgba(255, 255, 255, 0.05);\r\n        border-radius: 10px;\r\n        padding: 8px;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .model-icon img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n    }\r\n\r\n    .model-info {\r\n        flex: 1;\r\n    }\r\n\r\n    .model-name {\r\n        font-size: 1.125rem;\r\n        font-weight: 600;\r\n        color: #ffffff;\r\n        margin-bottom: 0.25rem;\r\n    }\r\n\r\n    .model-provider {\r\n        font-size: 0.875rem;\r\n        color: rgba(255, 255, 255, 0.5);\r\n    }\r\n\r\n    .model-badges {\r\n        display: flex;\r\n        gap: 0.5rem;\r\n        flex-wrap: wrap;\r\n        margin-left: auto;\r\n    }\r\n\r\n    .badge {\r\n        padding: 0.25rem 0.75rem;\r\n        border-radius: 20px;\r\n        font-size: 0.75rem;\r\n        font-weight: 600;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .badge-new {\r\n        background: linear-gradient(135deg, #10b981 0%, #059669 100%);\r\n        color: #ffffff;\r\n    }\r\n\r\n    .badge-premium {\r\n        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\r\n        color: #ffffff;\r\n    }\r\n\r\n    .badge-fast {\r\n        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\r\n        color: #ffffff;\r\n    }\r\n\r\n    .badge-video {\r\n        background: rgba(59, 130, 246, 0.2);\r\n        color: #3b82f6;\r\n        border: 1px solid rgba(59, 130, 246, 0.3);\r\n    }\r\n\r\n    .badge-image {\r\n        background: rgba(236, 72, 153, 0.2);\r\n        color: #ec4899;\r\n        border: 1px solid rgba(236, 72, 153, 0.3);\r\n    }\r\n    .badge-music {\r\n    background: rgba(168, 85, 247, 0.2);\r\n    color: #a855f7;\r\n    border: 1px solid rgba(168, 85, 247, 0.3);\r\n}\r\n\r\n    .model-description {\r\n        font-size: 0.875rem;\r\n        color: rgba(255, 255, 255, 0.6);\r\n        line-height: 1.6;\r\n        margin-bottom: 1rem;\r\n    }\r\n\r\n    .model-features {\r\n        display: flex;\r\n        gap: 0.5rem;\r\n        flex-wrap: wrap;\r\n        margin-bottom: 1rem;\r\n    }\r\n\r\n    .feature {\r\n        padding: 0.375rem 0.75rem;\r\n        background: rgba(255, 255, 255, 0.05);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 8px;\r\n        font-size: 0.75rem;\r\n        color: rgba(255, 255, 255, 0.7);\r\n    }\r\n\r\n    .model-footer {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding-top: 1rem;\r\n        border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n    }\r\n\r\n    .try-button {\r\n        padding: 0.625rem 1.25rem;\r\n        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\r\n        color: #ffffff;\r\n        border: none;\r\n        border-radius: 8px;\r\n        font-weight: 500;\r\n        font-size: 0.875rem;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n        text-decoration: none;\r\n        display: inline-block;\r\n    }\r\n\r\n    .try-button:hover {\r\n        transform: translateY(-1px);\r\n        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);\r\n        color: #ffffff;\r\n        text-decoration: none;\r\n    }\r\n\r\n    \/* Modal Styles *\/\r\n    .modal {\r\n        display: none;\r\n        position: fixed;\r\n        z-index: 1000;\r\n        left: 0;\r\n        top: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-color: rgba(0, 0, 0, 0.8);\r\n        animation: fadeIn 0.3s ease;\r\n    }\r\n\r\n    .modal-content {\r\n        position: relative;\r\n        background-color: #1a1a1a;\r\n        margin: 2% auto;\r\n        padding: 0;\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        width: 90%;\r\n        max-width: 1200px;\r\n        border-radius: 16px;\r\n        overflow: hidden;\r\n        animation: slideIn 0.3s ease;\r\n    }\r\n\r\n    .modal-close {\r\n        position: absolute;\r\n        right: 1.5rem;\r\n        top: 1.5rem;\r\n        color: #fff;\r\n        font-size: 2rem;\r\n        font-weight: bold;\r\n        cursor: pointer;\r\n        z-index: 10;\r\n        width: 40px;\r\n        height: 40px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background: rgba(0, 0, 0, 0.5);\r\n        border-radius: 50%;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .modal-close:hover {\r\n        background: rgba(0, 0, 0, 0.8);\r\n        transform: rotate(90deg);\r\n    }\r\n\r\n    .modal-body {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 0;\r\n        min-height: 500px;\r\n    }\r\n\r\n    .modal-media {\r\n        background: #000;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        position: relative;\r\n    }\r\n\r\n    .modal-media img,\r\n    .modal-media video {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n        max-height: 70vh;\r\n    }\r\n\r\n    .modal-info {\r\n        padding: 3rem;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 2rem;\r\n    }\r\n\r\n    .modal-header {\r\n        display: flex;\r\n        gap: 1.5rem;\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .modal-icon {\r\n        width: 60px;\r\n        height: 60px;\r\n        background: rgba(255, 255, 255, 0.05);\r\n        border-radius: 12px;\r\n        padding: 12px;\r\n        object-fit: contain;\r\n    }\r\n\r\n    .modal-title {\r\n        font-size: 2rem;\r\n        font-weight: 700;\r\n        margin-bottom: 0.5rem;\r\n        color: #ffffff;\r\n    }\r\n\r\n    .modal-provider {\r\n        font-size: 1.125rem;\r\n        color: rgba(255, 255, 255, 0.6);\r\n    }\r\n\r\n    .modal-description {\r\n        font-size: 1.125rem;\r\n        line-height: 1.8;\r\n        color: rgba(255, 255, 255, 0.8);\r\n    }\r\n\r\n    .modal-features {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 0.75rem;\r\n    }\r\n\r\n    .modal-features .feature {\r\n        padding: 0.5rem 1rem;\r\n        background: rgba(255, 255, 255, 0.1);\r\n        border: 1px solid rgba(255, 255, 255, 0.2);\r\n        border-radius: 8px;\r\n        font-size: 0.875rem;\r\n        color: #ffffff;\r\n    }\r\n\r\n    .modal-actions {\r\n        margin-top: auto;\r\n        padding-top: 2rem;\r\n    }\r\n\r\n    .modal-try-button {\r\n        display: inline-block;\r\n        padding: 1rem 2rem;\r\n        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\r\n        color: #ffffff;\r\n        border-radius: 12px;\r\n        font-weight: 600;\r\n        font-size: 1.125rem;\r\n        text-decoration: none;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .modal-try-button:hover {\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.5);\r\n    }\r\n\r\n    \/* Loading State *\/\r\n    .loading {\r\n        text-align: center;\r\n        padding: 4rem;\r\n        color: rgba(255, 255, 255, 0.5);\r\n    }\r\n\r\n    \/* Empty State *\/\r\n    .empty-state {\r\n        text-align: center;\r\n        padding: 4rem;\r\n        color: rgba(255, 255, 255, 0.5);\r\n    }\r\n\r\n    .empty-state h3 {\r\n        font-size: 1.25rem;\r\n        margin-bottom: 0.5rem;\r\n        color: rgba(255, 255, 255, 0.7);\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 768px) {\r\n        .nav-container {\r\n            padding: 0 1rem;\r\n        }\r\n\r\n        .hero h1 {\r\n            font-size: 2rem;\r\n        }\r\n\r\n        .hero p {\r\n            font-size: 1rem;\r\n        }\r\n\r\n        .controls {\r\n            flex-direction: column;\r\n            align-items: stretch;\r\n        }\r\n\r\n        .search-box {\r\n            min-width: 100%;\r\n        }\r\n\r\n        .models-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .model-badges {\r\n            margin-top: 0.5rem;\r\n            margin-left: 0;\r\n        }\r\n\r\n        .modal-content {\r\n            width: 95%;\r\n            margin: 5% auto;\r\n        }\r\n\r\n        .modal-body {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .modal-media {\r\n            max-height: 40vh;\r\n        }\r\n\r\n        .modal-info {\r\n            padding: 2rem;\r\n        }\r\n\r\n        .modal-title {\r\n            font-size: 1.5rem;\r\n        }\r\n    }\r\n\r\n    \/* Animations *\/\r\n    @keyframes fadeIn {\r\n        from {\r\n            opacity: 0;\r\n            transform: translateY(20px);\r\n        }\r\n        to {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n    }\r\n\r\n    @keyframes slideIn {\r\n        from {\r\n            transform: translateY(-50px);\r\n            opacity: 0;\r\n        }\r\n        to {\r\n            transform: translateY(0);\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    .model-card {\r\n        animation: fadeIn 0.4s ease-out;\r\n        animation-fill-mode: both;\r\n    }\r\n\r\n    .model-card:nth-child(1) { animation-delay: 0.05s; }\r\n    .model-card:nth-child(2) { animation-delay: 0.1s; }\r\n    .model-card:nth-child(3) { animation-delay: 0.15s; }\r\n    .model-card:nth-child(4) { animation-delay: 0.2s; }\r\n    .model-card:nth-child(5) { animation-delay: 0.25s; }\r\n    .model-card:nth-child(6) { animation-delay: 0.3s; }\r\n<\/style>\r\n\r\n<div class=\"ai-studio-wrapper\">\r\n    <!-- Navigation -->\r\n    <div class=\"nav-container\">\r\n        <nav class=\"nav-tabs\">\r\n            <button class=\"nav-tab active\" data-filter=\"all\"><span class=\"nav-text\" data-translate=\"all\">Alle Modelle<\/span><\/button>\r\n            <button class=\"nav-tab\" data-filter=\"video\"><span class=\"nav-text\" data-translate=\"video\">Video<\/span><\/button>\r\n            <button class=\"nav-tab\" data-filter=\"image\"><span class=\"nav-text\" data-translate=\"image\">Bild<\/span><\/button>\r\n            <!-- In der Navigation nach dem Image-Tab einf\u00fcgen -->\r\n<button class=\"nav-tab\" data-filter=\"music\"><span class=\"nav-text\" data-translate=\"music\">Musik<\/span><\/button>\r\n        <\/nav>\r\n    <\/div>\r\n\r\n    <!-- Hero Section -->\r\n    <section class=\"hero\">\r\n        <h1 data-translate=\"ai_models_title\">KI-Modelle f\u00fcr Video & Bild<\/h1>\r\n        <p data-translate=\"ai_models_subtitle\">Entdecke die neueste Generation von KI-Modellen. Erstelle professionelle Videos und Bilder in Sekunden.<\/p>\r\n    <\/section>\r\n\r\n    <!-- Controls -->\r\n    <section class=\"controls\">\r\n        <div class=\"search-box\">\r\n            <svg class=\"search-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"><\/path>\r\n            <\/svg>\r\n            <input type=\"text\" class=\"search-input\" placeholder=\"Modelle durchsuchen...\" id=\"searchInput\">\r\n        <\/div>\r\n        <div class=\"filter-pills\">\r\n            <button class=\"filter-pill\" data-provider=\"google\">Google<\/button>\r\n            <button class=\"filter-pill\" data-provider=\"pixverse\">PixVerse<\/button>\r\n            <button class=\"filter-pill\" data-provider=\"flux\">Flux<\/button>\r\n            <button class=\"filter-pill\" data-tag=\"premium\"><span data-translate=\"premium\">Premium<\/span><\/button>\r\n            <button class=\"filter-pill\" data-tag=\"fast\"><span data-translate=\"fast\">Schnell<\/span><\/button>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Models Container -->\r\n    <main class=\"models-container\">\r\n        <div id=\"modelsGrid\" class=\"models-grid\">\r\n            <!-- Models will be inserted here by JavaScript -->\r\n        <\/div>\r\n    <\/main>\r\n\r\n    <!-- Modal -->\r\n    <div id=\"modelModal\" class=\"modal\">\r\n        <div class=\"modal-content\">\r\n            <span class=\"modal-close\">&times;<\/span>\r\n            <div class=\"modal-body\">\r\n                <div class=\"modal-media\">\r\n                    <!-- Media wird dynamisch eingef\u00fcgt -->\r\n                <\/div>\r\n                <div class=\"modal-info\">\r\n                    <div class=\"modal-header\">\r\n                        <img decoding=\"async\" class=\"modal-icon\" src=\"\" alt=\"\">\r\n                        <div>\r\n                            <h2 class=\"modal-title\"><\/h2>\r\n                            <p class=\"modal-provider\"><\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <p class=\"modal-description\"><\/p>\r\n                    <div class=\"modal-features\"><\/div>\r\n                    <div class=\"modal-actions\">\r\n                        <a href=\"#\" class=\"modal-try-button\" data-translate=\"try_now\">Jetzt ausprobieren<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ Login-Check Variable aus WordPress\r\nconst isUserLoggedIn = typeof window.sharkxsData !== 'undefined' && window.sharkxsData.userId;\r\n\r\n\/\/ Aktuelle Sprache ermitteln\r\nfunction getCurrentLanguage() {\r\n    \/\/ WPML language code\r\n    if (typeof window.sharkxsData !== 'undefined' && window.sharkxsData.currentLang) {\r\n        return window.sharkxsData.currentLang;\r\n    }\r\n    \/\/ URL pr\u00fcfen\r\n    if (window.location.pathname.includes('\/en\/')) {\r\n        return 'en';\r\n    }\r\n    \/\/ Fallback\r\n    return 'de';\r\n}\r\n\r\nconst currentLang = getCurrentLanguage();\r\n\r\n\/\/ URL-Generator Funktion f\u00fcr sprachspezifische Links\r\nfunction getLocalizedUrl(path, modelParam = null) {\r\n    let baseUrl = 'https:\/\/sharkxs.com';\r\n    \r\n    \/\/ F\u00fcr englische Version\r\n    if (currentLang === 'en') {\r\n        baseUrl += '\/en';\r\n    }\r\n    \r\n    \/\/ Pfad hinzuf\u00fcgen\r\n    baseUrl += path;\r\n    \r\n    \/\/ Model-Parameter hinzuf\u00fcgen falls vorhanden\r\n    if (modelParam) {\r\n        baseUrl += '?model=' + modelParam;\r\n    }\r\n    \r\n    return baseUrl;\r\n}\r\n\r\n\/\/ Login-URL Generator\r\nfunction getLoginUrl() {\r\n    return currentLang === 'en' ? 'https:\/\/sharkxs.com\/en\/login\/' : 'https:\/\/sharkxs.com\/login\/';\r\n}\r\n\r\n\/\/ \u00dcbersetzungen (bleibt unver\u00e4ndert)\r\nconst translations = {\r\n    de: {\r\n        all: 'Alle Modelle',\r\n        video: 'Video',\r\n        image: 'Bild',\r\n        ai_models_title: 'KI-Modelle f\u00fcr Video & Bild',\r\n        ai_models_subtitle: 'Entdecke die neueste Generation von KI-Modellen. Erstelle professionelle Videos und Bilder in Sekunden.',\r\n        search_placeholder: 'Modelle durchsuchen...',\r\n        premium: 'Premium',\r\n        fast: 'Schnell',\r\n        try_now: 'Jetzt ausprobieren',\r\n        new_badge: 'NEU',\r\n        no_models_found: 'Keine Modelle gefunden',\r\n        try_adjusting_filters: 'Versuche deine Filtereinstellungen anzupassen',\r\n        music: 'Musik'\r\n    },\r\n    en: {\r\n        all: 'All Models',\r\n        video: 'Video',\r\n        image: 'Image',\r\n        ai_models_title: 'AI Models for Video & Image',\r\n        ai_models_subtitle: 'Discover the latest generation of AI models. Create professional videos and images in seconds.',\r\n        search_placeholder: 'Search models...',\r\n        premium: 'Premium',\r\n        fast: 'Fast',\r\n        try_now: 'Try Now',\r\n        new_badge: 'NEW',\r\n        no_models_found: 'No models found',\r\n        try_adjusting_filters: 'Try adjusting your filter settings',\r\n        music: 'Music'\r\n    }\r\n};\r\n\r\n\/\/ Model-Beschreibungen \u00dcbersetzungen (bleibt unver\u00e4ndert)\r\nconst modelDescriptions = {\r\n    en: {\r\n        'veo3': \"Google's latest text-to-video model with native audio generation. Creates highly realistic 8-second videos.\",\r\n        'veo3-fast': 'Optimized version of Veo3 for super fast generation while maintaining high quality.',\r\n        'veo3-i2v': 'Transform your images into high-quality videos with Veo 3. Supports optional audio generation.',\r\n        'veo3-fast-i2v': 'Fast image-to-video conversion with Veo 3 Fast. Ideal for quick iterations.',\r\n        'veo2-t2v': 'The proven Veo2 model for reliable text-to-video generation.',\r\n        'veo2-i2v': 'Bring your images to life! Veo2 animates static photos with natural movements.',\r\n        'kling-t2v': 'High-quality video rendering from text with precise CFG scaling. Creates smooth, professional videos.',\r\n        'kling-i2v': 'Transforms images into moving clips with smooth motion and high accuracy.',\r\n        'seedance-pro-t2v': \"PRO model from ByteDance with fine control over resolution and camera locking.\",\r\n        'seedance-pro-i2v': 'Creates professional videos from images with optional camera locking and HD settings.',\r\n        'hailuo-pro-t2v': 'Compact text-to-video model with prompt optimizer for dynamic clips.',\r\n        'hailuo-pro-i2v': 'Create crisp short videos from images with integrated prompt optimizer.',\r\n\r\n        'vidu-q1-ref': 'Video with consistent subjects from up to 7 reference images. Perfect for character consistency.',\r\n        'ai-avatar-single': 'Create talking avatar videos from image & text with natural lip synchronization.',\r\n        'ai-avatar-multi': 'Multi-person conversation video with text-to-speech for realistic dialogues.',\r\n        'ai-avatar-audio': 'Create talking avatar videos from image and own audio file with perfect lip synchronization.',\r\n        'ai-avatar-multi-audio': 'Multi-person conversation video from image and audio files. Creates realistic scenes with multiple talking persons.',\r\n        'pixverse-i2v': 'Transform your images into cinematic videos with various art styles.',\r\n        'pixverse-fast-i2v': 'Fast image-to-video generation for rapid prototyping.',\r\n        'pixverse-t2v-fast': 'Direct text-to-video generation with PixVerse Fast.',\r\n        'pixverse-lipsync': 'Perfect lip synchronization for videos with text-to-speech or audio upload.',\r\n        'pixverse-extend': 'Seamlessly extend existing videos! Expand your clips by another 5-8 seconds.',\r\n        'imagen4-ultra': 'The most powerful Imagen variant for highest image quality and particularly detailed results.',\r\n\r\n        'flux-ultra': 'State-of-the-art text-to-image model for professional images in 2K\u20134K resolution.',\r\n        'flux-kontext-edit': 'Combines text and image input for precise image editing and style transfers.',\r\n        'flux-kontext-t2i': 'Extended variant with highest prompt accuracy.',\r\n        'hidream-i1': 'Large open-source image generation model with 17 billion parameters.',\r\n        'hidream-i2i': 'Transforms source images based on prompts.',\r\n        'seedream-v3': \"ByteDance's advanced bilingual text-to-image model for high-quality image generation.\",\r\n        'recraft-v3': 'Advanced text-to-image model with individual style control.',\r\n        'nano-banana-edit': 'Edit multiple images simultaneously with the power of Google Gemini. Describe your desired changes and let AI bring your vision to life.',\r\n'nano-banana': 'Create images with Google Gemini\\'s advanced image understanding technology. Describe your idea and get creative, high-quality results.',\r\n'wan-pro-i2v': 'Generate stunning 6-second 1080p videos from images with Wan 2.1 Enhanced. Perfect for cinematic transformations.',\r\n'seedream-v4': 'Bytedance\\'s Seedream 4 - Creates high-quality images from text with improved quality and speed.',\r\n'seedream-v4-edit': 'Edit multiple images simultaneously with Seedream v4. Combines up to 7 reference images for consistent editing.',\r\n'minimax-music': 'Create professional music from text. Supports lyrics with sections like [intro], [verse], [chorus], [bridge], [outro].'\r\n    }\r\n};\r\n\r\n\/\/ Feature \u00dcbersetzungen (bleibt unver\u00e4ndert)\r\nconst featureTranslations = {\r\n    en: {\r\n        '8s Videos': '8s Videos',\r\n        'Audio-Generierung': 'Audio Generation',\r\n        '4K Qualit\u00e4t': '4K Quality',\r\n        'Fotorealistisch': 'Photorealistic',\r\n        'Schnelle Generierung': 'Fast Generation',\r\n        'Bild-Animation': 'Image Animation',\r\n        'Audio optional': 'Audio Optional',\r\n        'Flexible Dauer': 'Flexible Duration',\r\n        'Zuverl\u00e4ssig': 'Reliable',\r\n        'Nat\u00fcrliche Bewegung': 'Natural Movement',\r\n        'Flexible Formate': 'Flexible Formats',\r\n        '5-10s Videos': '5-10s Videos',\r\n        'CFG-Kontrolle': 'CFG Control',\r\n        'Hohe Qualit\u00e4t': 'High Quality',\r\n        'Negativer Prompt': 'Negative Prompt',\r\n        'Weiche Bewegungen': 'Smooth Movements',\r\n        'Kamera-Kontrolle': 'Camera Control',\r\n        '480p-1080p': '480p-1080p',\r\n        'Kamera-Fixierung': 'Camera Lock',\r\n        'HD-Qualit\u00e4t': 'HD Quality',\r\n        '5s Videos': '5s Videos',\r\n        'Prompt-Optimierer': 'Prompt Optimizer',\r\n        'Schnell': 'Fast',\r\n        'Dynamisch': 'Dynamic',\r\n        'Turbo-Speed': 'Turbo Speed',\r\n        '4K Upscaling': '4K Upscaling',\r\n        'Bis 40s': 'Up to 40s',\r\n        'AI-Enhanced': 'AI-Enhanced',\r\n        'Qualit\u00e4tsboost': 'Quality Boost',\r\n        'Bis 7 Referenzen': 'Up to 7 References',\r\n        'Character-Konsistenz': 'Character Consistency',\r\n        'Flexible Bewegung': 'Flexible Movement',\r\n        'Optional BGM': 'Optional BGM',\r\n        'Text-to-Speech': 'Text-to-Speech',\r\n        '20+ Stimmen': '20+ Voices',\r\n        'Lippensync': 'Lip Sync',\r\n        'Bis 15s': 'Up to 15s',\r\n        '2 Personen': '2 People',\r\n        'Dialog-Szenen': 'Dialog Scenes',\r\n        'Audio-Upload': 'Audio Upload',\r\n        'Perfekte Lippensync': 'Perfect Lip Sync',\r\n        'Turbo-Modus': 'Turbo Mode',\r\n        '2 Audio-Uploads': '2 Audio Uploads',\r\n        'Multi-Person': 'Multi-Person',\r\n        '5-8s Videos': '5-8s Videos',\r\n        'Kunst-Stile': 'Art Styles',\r\n        'Bis 1080p': 'Up to 1080p',\r\n        'Stil-Optionen': 'Style Options',\r\n        'Text-zu-Video': 'Text-to-Video',\r\n        'Video-Verl\u00e4ngerung': 'Video Extension',\r\n        'Nahtlos': 'Seamless',\r\n        '5-8s Erweiterung': '5-8s Extension',\r\n        'H\u00f6chste Qualit\u00e4t': 'Highest Quality',\r\n        'Hochaufl\u00f6send': 'High Resolution',\r\n        'Detailreich': 'Detailed',\r\n        '3 Referenzbilder': '3 Reference Images',\r\n        'Vielf\u00e4ltige Aufl\u00f6sungen': 'Various Resolutions',\r\n        'Professionell': 'Professional',\r\n        'Hochwertig': 'High Quality',\r\n        '2K-4K Aufl\u00f6sung': '2K-4K Resolution',\r\n        'Fotorealismus': 'Photorealism',\r\n        'Kommerziell': 'Commercial',\r\n        'Bild-Bearbeitung': 'Image Editing',\r\n        'Pr\u00e4zise Modifikation': 'Precise Modification',\r\n        'Stil\u00fcbertragung': 'Style Transfer',\r\n        'Objekt-\u00c4nderung': 'Object Modification',\r\n        'H\u00f6chste Genauigkeit': 'Highest Accuracy',\r\n        'Typografie': 'Typography',\r\n        'Exakte Umsetzung': 'Exact Implementation',\r\n        'Maximale Qualit\u00e4t': 'Maximum Quality',\r\n        '17B Parameter': '17B Parameters',\r\n        'Open Source': 'Open Source',\r\n        'Kreativ': 'Creative',\r\n        'Vielseitig': 'Versatile',\r\n        'Bild-Transformation': 'Image Transformation',\r\n        'Stil-Variationen': 'Style Variations',\r\n        'Pr\u00e4zise Kontrolle': 'Precise Control',\r\n        'Multiple Formate': 'Multiple Formats',\r\n        'Stil-Kontrolle': 'Style Control',\r\n        'Fein abgestimmt': 'Fine-tuned',\r\n        'Einzigartig': 'Unique',\r\n        'Kreative Visuals': 'Creative Visuals',\r\n        'Multi-Bild-Bearbeitung': 'Multi-Image Editing',\r\n'KI-gesteuert': 'AI-Powered',\r\n'Batch-Processing': 'Batch Processing',\r\n'Gemini-Powered': 'Gemini-Powered',\r\n'Gemini-Integration': 'Gemini Integration',\r\n'Kreative Prompts': 'Creative Prompts',\r\n'6s Videos': '6s Videos',\r\n'30 FPS': '30 FPS',\r\n'Enhanced Quality': 'Enhanced Quality',\r\n'Bis 7 Bilder': 'Up to 7 Images',\r\n'Konsistente Bearbeitung': 'Consistent Editing',\r\n'Multi-Generation': 'Multi-Generation',\r\n'Hochwertige Bildgenerierung': 'High-Quality Generation',\r\n'Verbesserte Geschwindigkeit': 'Improved Speed',\r\n'60s Songs': '60s Songs',\r\n'Professionelle Musik': 'Professional Music',\r\n'Song-Struktur': 'Song Structure',\r\n'Text-zu-Musik': 'Text-to-Music'\r\n    }\r\n};\r\n\r\n\/\/ Model data - URLs werden dynamisch generiert\r\nconst models = [\r\n    \/\/ Video Models\r\n    {\r\n        id: 'veo3',\r\n        name: 'Veo 3',\r\n        provider: 'Google',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['veo3'] \r\n            ? modelDescriptions.en['veo3']\r\n            : 'Das neueste Text-zu-Video-Modell von Google mit nativer Audio-Generierung. Erstellt hochrealistische 8-Sekunden-Videos.',\r\n        features: ['8s Videos', 'Audio-Generierung', '4K Qualit\u00e4t', 'Fotorealistisch'],\r\n        badges: ['new', 'premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/veo.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754029784.mp4',\r\n        modelId: 'fal-ai\/veo3'\r\n    },\r\n    {\r\n        id: 'veo3-fast',\r\n        name: 'Veo3 Fast',\r\n        provider: 'Google',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['veo3-fast']\r\n            ? modelDescriptions.en['veo3-fast']\r\n            : 'Optimierte Version von Veo3 f\u00fcr super schnelle Generierung bei trotzdem hoher Qualit\u00e4t.',\r\n        features: ['Schnelle Generierung', 'Audio-Generierung', '8s Videos'],\r\n        badges: ['fast'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/veo.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754030845.mp4',\r\n        modelId: 'fal-ai\/veo3\/fast'\r\n    },\r\n    {\r\n        id: 'veo3-i2v',\r\n        name: 'Veo 3 (Image-to-Video)',\r\n        provider: 'Google',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['veo3-i2v']\r\n            ? modelDescriptions.en['veo3-i2v']\r\n            : 'Verwandle deine Bilder in hochwertige Videos mit Veo 3. Unterst\u00fctzt optionale Audio-Generierung.',\r\n        features: ['8s Videos', 'Bild-Animation', 'Audio optional', '4K Qualit\u00e4t'],\r\n        badges: ['new', 'premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/veo.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754061142.mp4',\r\n        modelId: 'eachlabs\/veo-3-image-to-video'\r\n    },\r\n    {\r\n        id: 'veo3-fast-i2v',\r\n        name: 'Veo 3 Fast (Image-to-Video)',\r\n        provider: 'Google',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['veo3-fast-i2v']\r\n            ? modelDescriptions.en['veo3-fast-i2v']\r\n            : 'Schnelle Bild-zu-Video Konvertierung mit Veo 3 Fast. Ideal f\u00fcr schnelle Iterationen.',\r\n        features: ['Schnelle Generierung', '8s Videos', 'Audio optional', 'Bild-Animation'],\r\n        badges: ['fast'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/veo.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754058515.mp4',\r\n        modelId: 'eachlabs\/veo-3-fast-image-to-video'\r\n    },\r\n    \/\/ F\u00fcge diese Modelle zum models Array hinzu:\r\n{\r\n    id: 'nano-banana-edit',\r\n    name: 'Nano Banana Edit',\r\n    provider: 'Google Gemini',\r\n    type: 'image',\r\n    description: currentLang === 'en' && modelDescriptions.en['nano-banana-edit']\r\n        ? modelDescriptions.en['nano-banana-edit']\r\n        : 'Bearbeite mehrere Bilder gleichzeitig mit der Kraft von Google Gemini. Beschreibe deine gew\u00fcnschten \u00c4nderungen und lass die KI deine Vision umsetzen.',\r\n    features: ['Multi-Bild-Bearbeitung', 'KI-gesteuert', 'Batch-Processing', 'Gemini-Powered'],\r\n    badges: ['new', 'premium'],\r\n    icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/nano_banana.jpeg',\r\n    media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/nano_banana_edit.png',\r\n    modelId: 'fal-ai\/nano-banana\/edit'\r\n},\r\n{\r\n    id: 'nano-banana',\r\n    name: 'Nano Banana',\r\n    provider: 'Google Gemini',\r\n    type: 'image',\r\n    description: currentLang === 'en' && modelDescriptions.en['nano-banana']\r\n        ? modelDescriptions.en['nano-banana']\r\n        : 'Erstelle Bilder mit Google Geminis fortschrittlicher Bildverst\u00e4ndnis-Technologie. Beschreibe deine Idee und erhalte kreative, hochwertige Ergebnisse.',\r\n    features: ['Gemini-Integration', 'Kreative Prompts', 'Hohe Qualit\u00e4t', 'Schnell'],\r\n    badges: ['new'],\r\n    icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/nano_banana.jpeg',\r\n    media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/nano_banana.png',\r\n    modelId: 'fal-ai\/nano-banana'\r\n},\r\n{\r\n    id: 'seedream-v4',\r\n    name: 'Seedream v4 (Text-to-Image)',\r\n    provider: 'ByteDance',\r\n    type: 'image',\r\n    description: currentLang === 'en' && modelDescriptions.en['seedream-v4']\r\n        ? modelDescriptions.en['seedream-v4']\r\n        : 'Bytedance\\'s Seedream 4 - Erstellt hochwertige Bilder aus Textbeschreibungen mit verbesserter Qualit\u00e4t und Geschwindigkeit.',\r\n    features: ['Hochwertige Bildgenerierung', 'Verbesserte Geschwindigkeit', 'Multiple Formate', 'Vielseitig'],\r\n    badges: ['new'],\r\n    icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/seedance.jpeg',\r\n    media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/09\/image_1758612731676.png',\r\n    modelId: 'fal-ai\/bytedance\/seedream\/v4\/text-to-image'\r\n},\r\n{\r\n    id: 'seedream-v4-edit',\r\n    name: 'Seedream v4 Edit (Multi-Image)',\r\n    provider: 'ByteDance',\r\n    type: 'image',\r\n    description: currentLang === 'en' && modelDescriptions.en['seedream-v4-edit']\r\n        ? modelDescriptions.en['seedream-v4-edit']\r\n        : 'Bearbeitet mehrere Bilder gleichzeitig mit Seedream v4. Kombiniert bis zu 7 Referenzbilder f\u00fcr konsistente Bearbeitung.',\r\n    features: ['Bis 7 Bilder', 'Konsistente Bearbeitung', 'Multi-Generation', 'Batch-Processing'],\r\n    badges: ['new', 'premium'],\r\n    icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/seedance.jpeg',\r\n    media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/09\/image_1758612489252.png',\r\n    modelId: 'fal-ai\/bytedance\/seedream\/v4\/edit'\r\n},\r\n{\r\n    id: 'minimax-music',\r\n    name: 'MiniMax Music v1.5',\r\n    provider: 'MiniMax',\r\n    type: 'music',\r\n    description: currentLang === 'en' && modelDescriptions.en['minimax-music']\r\n        ? modelDescriptions.en['minimax-music']\r\n        : 'Erstellt professionelle Musik aus Text. Unterst\u00fctzt Songtexte mit Abschnitten wie [intro], [verse], [chorus], [bridge], [outro].',\r\n    features: ['60s Songs', 'Professionelle Musik', 'Song-Struktur', 'Text-zu-Musik'],\r\n    badges: ['new', 'premium'],\r\n    icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/09\/minimax.png',\r\n    media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/09\/NachpoXH9Y_YJjRPEa4Yj_output-1.mp3',\r\n    modelId: 'fal-ai\/minimax-music\/v1.5'\r\n},\r\n{\r\n    id: 'wan-pro-i2v',\r\n    name: 'Wan Pro (Image-to-Video)',\r\n    provider: 'Wan',\r\n    type: 'video',\r\n    description: currentLang === 'en' && modelDescriptions.en['wan-pro-i2v']\r\n        ? modelDescriptions.en['wan-pro-i2v']\r\n        : 'Generiere beeindruckende 6-Sekunden 1080p Videos aus Bildern mit Wan 2.1 Enhanced. Perfekt f\u00fcr cinematische Transformationen.',\r\n    features: ['6s Videos', '1080p', '30 FPS', 'Enhanced Quality'],\r\n    badges: ['premium'],\r\n    icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/sharkXS_logo2.png',\r\n    media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/wan-pro.mp4',\r\n    modelId: 'fal-ai\/wan-pro\/image-to-video'\r\n},\r\n    {\r\n        id: 'veo2-t2v',\r\n        name: 'Veo 2 (Text-to-Video)',\r\n        provider: 'Google',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['veo2-t2v']\r\n            ? modelDescriptions.en['veo2-t2v']\r\n            : 'Das bew\u00e4hrte Veo2-Modell f\u00fcr zuverl\u00e4ssige Text-zu-Video-Generierung.',\r\n        features: ['5-8s Videos', 'Flexible Dauer', 'Zuverl\u00e4ssig'],\r\n        badges: [],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/veo.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754206374.mp4',\r\n        modelId: 'fal-ai\/veo2\/text-to-video'\r\n    },\r\n    {\r\n        id: 'veo2-i2v',\r\n        name: 'Veo 2 (Image-to-Video)',\r\n        provider: 'Google',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['veo2-i2v']\r\n            ? modelDescriptions.en['veo2-i2v']\r\n            : 'Erwecke deine Bilder zum Leben! Veo2 animiert statische Fotos mit nat\u00fcrlichen Bewegungen.',\r\n        features: ['Bild-Animation', 'Nat\u00fcrliche Bewegung', 'Flexible Formate'],\r\n        badges: [],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/veo.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754202890.mp4',\r\n        modelId: 'fal-ai\/veo2\/image-to-video'\r\n    },\r\n    {\r\n        id: 'kling-t2v',\r\n        name: 'Kling v2.1 (Text-to-Video)',\r\n        provider: 'Kling',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['kling-t2v']\r\n            ? modelDescriptions.en['kling-t2v']\r\n            : 'Hochwertiges Video-Rendering aus Text mit pr\u00e4ziser CFG-Skalierung. Erstellt fl\u00fcssige, professionelle Videos.',\r\n        features: ['5-10s Videos', 'CFG-Kontrolle', 'Hohe Qualit\u00e4t', 'Negativer Prompt'],\r\n        badges: ['premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/kling.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754239715.mp4',\r\n        modelId: 'fal-ai\/kling-video\/v2.1\/master\/text-to-video'\r\n    },\r\n    {\r\n        id: 'kling-i2v',\r\n        name: 'Kling v2.1 (Image-to-Video)',\r\n        provider: 'Kling',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['kling-i2v']\r\n            ? modelDescriptions.en['kling-i2v']\r\n            : 'Verwandelt Bilder in bewegte Clips mit weicher Motion und hoher Genauigkeit.',\r\n        features: ['5-10s Videos', 'Weiche Bewegungen', 'CFG-Kontrolle', 'Bild-Animation'],\r\n        badges: ['premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/kling.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754240808.mp4',\r\n        modelId: 'fal-ai\/kling-video\/v2.1\/master\/image-to-video'\r\n    },\r\n    {\r\n        id: 'seedance-pro-t2v',\r\n        name: 'Seedance Pro (Text-to-Video)',\r\n        provider: 'ByteDance',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['seedance-pro-t2v']\r\n            ? modelDescriptions.en['seedance-pro-t2v']\r\n            : 'PRO-Modell von ByteDance mit feiner Steuerung \u00fcber Aufl\u00f6sung und Kamera-Fixierung.',\r\n        features: ['5-10s Videos', 'Kamera-Kontrolle', '480p-1080p', 'Flexible Formate'],\r\n        badges: ['premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/seedance.jpeg',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754241154.mp4',\r\n        modelId: 'fal-ai\/bytedance\/seedance\/v1\/pro\/text-to-video'\r\n    },\r\n    {\r\n        id: 'seedance-pro-i2v',\r\n        name: 'Seedance Pro (Image-to-Video)',\r\n        provider: 'ByteDance',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['seedance-pro-i2v']\r\n            ? modelDescriptions.en['seedance-pro-i2v']\r\n            : 'Erzeugt aus Bildern professionelle Videos mit optionaler Kamera-Fixierung und HD-Settings.',\r\n        features: ['5-10s Videos', 'Kamera-Fixierung', 'HD-Qualit\u00e4t', 'Bild-Animation'],\r\n        badges: ['premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/seedance.jpeg',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754241668.mp4',\r\n        modelId: 'fal-ai\/bytedance\/seedance\/v1\/pro\/image-to-video'\r\n    },\r\n    {\r\n        id: 'hailuo-pro-t2v',\r\n        name: 'Hailuo Pro (Text-to-Video)',\r\n        provider: 'MiniMax',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['hailuo-pro-t2v']\r\n            ? modelDescriptions.en['hailuo-pro-t2v']\r\n            : 'Kompaktes Text-zu-Video-Modell mit Prompt-Optimierer f\u00fcr dynamische Clips.',\r\n        features: ['5s Videos', 'Prompt-Optimierer', 'Schnell', 'Dynamisch'],\r\n        badges: [],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/hailuo.jpeg',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754242395.mp4',\r\n        modelId: 'fal-ai\/minimax\/hailuo-02\/pro\/text-to-video'\r\n    },\r\n    {\r\n        id: 'hailuo-pro-i2v',\r\n        name: 'Hailuo Pro (Image-to-Video)',\r\n        provider: 'MiniMax',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['hailuo-pro-i2v']\r\n            ? modelDescriptions.en['hailuo-pro-i2v']\r\n            : 'Erstelle knackige Kurz-Videos aus Bildern mit integriertem Prompt-Optimierer.',\r\n        features: ['5s Videos', 'Prompt-Optimierer', 'Bild-Animation', 'Schnell'],\r\n        badges: [],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/hailuo.jpeg',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754243288.mp4',\r\n        modelId: 'fal-ai\/minimax\/hailuo-02\/pro\/image-to-video'\r\n    },\r\n    \r\n    {\r\n        id: 'vidu-q1-ref',\r\n        name: 'Vidu Q1 Reference-to-Video',\r\n        provider: 'Vidu',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['vidu-q1-ref']\r\n            ? modelDescriptions.en['vidu-q1-ref']\r\n            : 'Video mit konsistenten Motiven aus bis zu 7 Referenzbildern. Perfekt f\u00fcr Character-Konsistenz.',\r\n        features: ['Bis 7 Referenzen', 'Character-Konsistenz', 'Flexible Bewegung', 'Optional BGM'],\r\n        badges: ['new', 'premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/07\/vidu.jpeg',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754230023.mp4',\r\n        modelId: 'fal-ai\/vidu\/q1\/reference-to-video'\r\n    },\r\n    {\r\n        id: 'ai-avatar-single',\r\n        name: 'Talking Avatar Single',\r\n        provider: 'MultiTalk',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['ai-avatar-single']\r\n            ? modelDescriptions.en['ai-avatar-single']\r\n            : 'Erstelle sprechende Avatar-Videos aus Bild & Text mit nat\u00fcrlicher Lippensynchronisation.',\r\n        features: ['Text-to-Speech', '20+ Stimmen', 'Lippensync', 'Bis 15s'],\r\n        badges: ['new'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/sharkXS_logo2.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/huMN0zTaXmBr2CqzCMps_6c9dd31e1d9a4482877747a52a661a0a.mp4',\r\n        modelId: 'fal-ai\/ai-avatar\/single-text'\r\n    },\r\n    {\r\n        id: 'ai-avatar-multi',\r\n        name: 'Talking Avatar Multi',\r\n        provider: 'MultiTalk',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['ai-avatar-multi']\r\n            ? modelDescriptions.en['ai-avatar-multi']\r\n            : 'Multi-Person Gespr\u00e4chsvideo mit Text-zu-Sprache f\u00fcr realistische Dialoge.',\r\n        features: ['2 Personen', 'Dialog-Szenen', '20+ Stimmen', 'Bis 15s'],\r\n        badges: ['new'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/sharkXS_logo2.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/uAF7N-Ow8WwuvbFw8J4Br_ab27ac57e9464dbea1ef78f7a25469d2.mp4',\r\n        modelId: 'fal-ai\/ai-avatar\/multi-text'\r\n    },\r\n    {\r\n        id: 'ai-avatar-audio',\r\n        name: 'Talking Avatar (Audio Upload)',\r\n        provider: 'MultiTalk',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['ai-avatar-audio']\r\n            ? modelDescriptions.en['ai-avatar-audio']\r\n            : 'Erstelle sprechende Avatar-Videos aus Bild und eigener Audio-Datei mit perfekter Lippensynchronisation.',\r\n        features: ['Audio-Upload', 'Perfekte Lippensync', 'Bis 15s', 'Turbo-Modus'],\r\n        badges: ['premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/sharkXS_logo2.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/huMN0zTaXmBr2CqzCMps_6c9dd31e1d9a4482877747a52a661a0a-1.mp4',\r\n        modelId: 'fal-ai\/ai-avatar'\r\n    },\r\n    {\r\n        id: 'ai-avatar-multi-audio',\r\n        name: 'Talking Avatar Multi (Audio Upload)',\r\n        provider: 'MultiTalk',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['ai-avatar-multi-audio']\r\n            ? modelDescriptions.en['ai-avatar-multi-audio']\r\n            : 'Multi-Person Gespr\u00e4chsvideo aus Bild und Audio-Dateien. Erstellt realistische Szenen mit mehreren sprechenden Personen.',\r\n        features: ['2 Audio-Uploads', 'Multi-Person', 'Perfekte Lippensync', 'Bis 15s'],\r\n        badges: ['premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/sharkXS_logo2.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/lKMkUvzCqKn-gHC0vyUPP_30b76b90c2164f9a926527497c20832b.mp4',\r\n        modelId: 'fal-ai\/ai-avatar\/multi'\r\n    },\r\n    {\r\n        id: 'pixverse-i2v',\r\n        name: 'PixVerse Image-to-Video',\r\n        provider: 'PixVerse',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['pixverse-i2v']\r\n            ? modelDescriptions.en['pixverse-i2v']\r\n            : 'Verwandle deine Bilder in cineastische Videos mit verschiedenen Kunst-Stilen.',\r\n        features: ['5-8s Videos', 'Kunst-Stile', 'Bis 1080p', 'Bild-Animation'],\r\n        badges: ['new'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/07\/pixverse.jpeg',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754207883.mp4',\r\n        modelId: 'fal-ai\/pixverse\/v4.5\/image-to-video'\r\n    },\r\n    {\r\n        id: 'pixverse-fast-i2v',\r\n        name: 'PixVerse Fast (Image-to-Video)',\r\n        provider: 'PixVerse',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['pixverse-fast-i2v']\r\n            ? modelDescriptions.en['pixverse-fast-i2v']\r\n            : 'Schnelle Image-to-Video-Generierung f\u00fcr Rapid Prototyping.',\r\n        features: ['Schnelle Generierung', '5s Videos', 'Stil-Optionen'],\r\n        badges: ['fast'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/07\/pixverse.jpeg',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754210174.mp4',\r\n        modelId: 'fal-ai\/pixverse\/v4.5\/image-to-video\/fast'\r\n    },\r\n    {\r\n        id: 'pixverse-t2v-fast',\r\n        name: 'PixVerse Fast (Text-to-Video)',\r\n        provider: 'PixVerse',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['pixverse-t2v-fast']\r\n            ? modelDescriptions.en['pixverse-t2v-fast']\r\n            : 'Direkte Text-zu-Video-Generierung mit PixVerse Fast.',\r\n        features: ['Text-zu-Video', 'Schnell', 'Kunst-Stile'],\r\n        badges: ['fast'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/07\/pixverse.jpeg',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754210693.mp4',\r\n        modelId: 'fal-ai\/pixverse\/v4.5\/text-to-video\/fast'\r\n    },\r\n    {\r\n        id: 'pixverse-lipsync',\r\n        name: 'PixVerse LipSync',\r\n        provider: 'PixVerse',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['pixverse-lipsync']\r\n            ? modelDescriptions.en['pixverse-lipsync']\r\n            : 'Perfekte Lippensynchronisation f\u00fcr Videos mit Text-to-Speech oder Audio-Upload.',\r\n        features: ['Lippensync', 'Text-to-Speech', 'Audio-Upload'],\r\n        badges: [],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/07\/pixverse.jpeg',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/hsR_KXBJjuF3IIVYIIDA2_output.mp4',\r\n        modelId: 'fal-ai\/pixverse\/lipsync'\r\n    },\r\n    {\r\n        id: 'pixverse-extend',\r\n        name: 'PixVerse Video Extend',\r\n        provider: 'PixVerse',\r\n        type: 'video',\r\n        description: currentLang === 'en' && modelDescriptions.en['pixverse-extend']\r\n            ? modelDescriptions.en['pixverse-extend']\r\n            : 'Verl\u00e4ngere bestehende Videos nahtlos! Erweitere deine Clips um weitere 5-8 Sekunden.',\r\n        features: ['Video-Verl\u00e4ngerung', 'Nahtlos', '5-8s Erweiterung'],\r\n        badges: [],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/07\/pixverse.jpeg',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/video_1754211414.mp4',\r\n        modelId: 'fal-ai\/pixverse\/extend'\r\n    },\r\n    \/\/ Image Models\r\n    {\r\n        id: 'imagen4-ultra',\r\n        name: 'Imagen 4 Ultra',\r\n        provider: 'Google',\r\n        type: 'image',\r\n        description: currentLang === 'en' && modelDescriptions.en['imagen4-ultra']\r\n            ? modelDescriptions.en['imagen4-ultra']\r\n            : 'Die leistungsst\u00e4rkste Imagen-Variante f\u00fcr h\u00f6chste Bildqualit\u00e4t und besonders detaillierte Ergebnisse.',\r\n        features: ['H\u00f6chste Qualit\u00e4t', 'Hochaufl\u00f6send', 'Fotorealistisch', 'Detailreich'],\r\n        badges: ['premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/google.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/pnxtk2zWxF70ArjWIwhar_output-1.png',\r\n        modelId: 'fal-ai\/imagen4\/preview\/ultra'\r\n    },\r\n\r\n    {\r\n        id: 'flux-ultra',\r\n        name: 'Flux Ultra v1.1',\r\n        provider: 'Flux',\r\n        type: 'image',\r\n        description: currentLang === 'en' && modelDescriptions.en['flux-ultra']\r\n            ? modelDescriptions.en['flux-ultra']\r\n            : 'Hochmodernes Text-zu-Bild-Modell f\u00fcr professionelle Bilder in 2K\u20134K Aufl\u00f6sung.',\r\n        features: ['2K-4K Aufl\u00f6sung', 'Fotorealismus', 'Schnell', 'Kommerziell'],\r\n        badges: ['premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/sharkXS_logo2.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/image_1754244507160-scaled.png',\r\n        modelId: 'fal-ai\/flux-pro\/v1.1-ultra'\r\n    },\r\n    {\r\n        id: 'flux-kontext-edit',\r\n        name: 'Flux Kontext Max (Image Editing)',\r\n        provider: 'Flux',\r\n        type: 'image',\r\n        description: currentLang === 'en' && modelDescriptions.en['flux-kontext-edit']\r\n            ? modelDescriptions.en['flux-kontext-edit']\r\n            : 'Kombiniert Text- und Bildinput f\u00fcr pr\u00e4zise Bildbearbeitung und Stil\u00fcbertragungen.',\r\n        features: ['Bild-Bearbeitung', 'Pr\u00e4zise Modifikation', 'Stil\u00fcbertragung', 'Objekt-\u00c4nderung'],\r\n        badges: ['premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/sharkXS_logo2.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/WI2ZOLUEgAIWJVBmplXtv_8cecd0d750b240649c8ad024711d47bf.jpg',\r\n        modelId: 'fal-ai\/flux-pro\/kontext\/max'\r\n    },\r\n    {\r\n        id: 'flux-kontext-t2i',\r\n        name: 'Flux Kontext Max (Text-to-Image)',\r\n        provider: 'Flux',\r\n        type: 'image',\r\n        description: currentLang === 'en' && modelDescriptions.en['flux-kontext-t2i']\r\n            ? modelDescriptions.en['flux-kontext-t2i']\r\n            : 'Erweiterte Variante mit h\u00f6chster Prompt-Genauigkeit.',\r\n        features: ['H\u00f6chste Genauigkeit', 'Typografie', 'Exakte Umsetzung', 'Maximale Qualit\u00e4t'],\r\n        badges: ['premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/sharkXS_logo2.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/image_1754297972039.png',\r\n        modelId: 'fal-ai\/flux-pro\/kontext\/max\/text-to-image'\r\n    },\r\n    {\r\n        id: 'hidream-i1',\r\n        name: 'HiDream I1 (Full)',\r\n        provider: 'HiDream',\r\n        type: 'image',\r\n        description: currentLang === 'en' && modelDescriptions.en['hidream-i1']\r\n            ? modelDescriptions.en['hidream-i1']\r\n            : 'Gro\u00dfes Open-Source-Bildgenerierungsmodell mit 17 Milliarden Parametern.',\r\n        features: ['17B Parameter', 'Open Source', 'Kreativ', 'Vielseitig'],\r\n        badges: ['new'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/sharkXS_logo2.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/image_1754298904718.png',\r\n        modelId: 'fal-ai\/hidream-i1-full'\r\n    },\r\n    {\r\n        id: 'hidream-i2i',\r\n        name: 'HiDream I1 (Image-to-Image)',\r\n        provider: 'HiDream',\r\n        type: 'image',\r\n        description: currentLang === 'en' && modelDescriptions.en['hidream-i2i']\r\n            ? modelDescriptions.en['hidream-i2i']\r\n            : 'Verwandelt Ausgangsbilder basierend auf Prompts.',\r\n        features: ['Bild-Transformation', 'Fotorealistisch', 'Stil-Variationen', 'Pr\u00e4zise Kontrolle'],\r\n        badges: ['premium'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/sharkXS_logo2.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/Download.jpeg',\r\n        modelId: 'fal-ai\/hidream-i1-full\/image-to-image'\r\n    },\r\n    {\r\n        id: 'seedream-v3',\r\n        name: 'SeeDream v3',\r\n        provider: 'ByteDance',\r\n        type: 'image',\r\n        description: currentLang === 'en' && modelDescriptions.en['seedream-v3']\r\n            ? modelDescriptions.en['seedream-v3']\r\n            : 'ByteDances fortschrittliches bilinguales Text-zu-Bild-Modell f\u00fcr hochwertige Bildgenerierung.',\r\n        features: ['Hochwertig', 'Vielseitig', 'Multiple Formate', 'Schnell'],\r\n        badges: ['new'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/sharkXS_logo2.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/image_1754300824126.png',\r\n        modelId: 'eachlabs\/seedream-v3-text-to-image'\r\n    },\r\n    {\r\n        id: 'recraft-v3',\r\n        name: 'Recraft V3 (Text-to-Image)',\r\n        provider: 'Recraft',\r\n        type: 'image',\r\n        description: currentLang === 'en' && modelDescriptions.en['recraft-v3']\r\n            ? modelDescriptions.en['recraft-v3']\r\n            : 'Fortschrittliches Text-zu-Bild-Modell mit individueller Stilkontrolle.',\r\n        features: ['Stil-Kontrolle', 'Fein abgestimmt', 'Einzigartig', 'Kreative Visuals'],\r\n        badges: ['new'],\r\n        icon: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/06\/sharkXS_logo2.png',\r\n        media: 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/08\/image_1754301256315.png',\r\n        modelId: 'fal-ai\/recraft\/v3\/text-to-image'\r\n    }\r\n];\r\n\r\n\/\/ Helper functions\r\nfunction t(key) {\r\n    return translations[currentLang][key] || translations['de'][key] || key;\r\n}\r\n\r\nfunction translateFeature(feature) {\r\n    if (currentLang === 'en' && featureTranslations.en[feature]) {\r\n        return featureTranslations.en[feature];\r\n    }\r\n    return feature;\r\n}\r\n\r\n\/\/ State\r\nlet currentFilter = 'all';\r\nlet searchQuery = '';\r\nlet activeProviders = [];\r\nlet activeTags = [];\r\n\r\n\/\/ DOM Elements\r\nconst modelsGrid = document.getElementById('modelsGrid');\r\nconst searchInput = document.getElementById('searchInput');\r\nconst navTabs = document.querySelectorAll('.nav-tab');\r\nconst filterPills = document.querySelectorAll('.filter-pill');\r\n\r\n\/\/ Modal Elements\r\nconst modal = document.getElementById('modelModal');\r\nconst modalClose = document.querySelector('.modal-close');\r\nconst modalMedia = document.querySelector('.modal-media');\r\nconst modalIcon = document.querySelector('.modal-icon');\r\nconst modalTitle = document.querySelector('.modal-title');\r\nconst modalProvider = document.querySelector('.modal-provider');\r\nconst modalDescription = document.querySelector('.modal-description');\r\nconst modalFeatures = document.querySelector('.modal-features');\r\nconst modalTryButton = document.querySelector('.modal-try-button');\r\n\r\n\/\/ Apply translations on load\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    \/\/ Translate static elements\r\n    document.querySelectorAll('[data-translate]').forEach(element => {\r\n        const key = element.getAttribute('data-translate');\r\n        element.textContent = t(key);\r\n    });\r\n    \r\n    \/\/ Translate search placeholder\r\n    searchInput.placeholder = t('search_placeholder');\r\n});\r\n\r\n\/\/ Render functions\r\nfunction getBadgeClass(badge) {\r\n    const badgeClasses = {\r\n        'new': 'badge-new',\r\n        'premium': 'badge-premium',\r\n        'fast': 'badge-fast',\r\n        'ultra': 'badge-premium'\r\n    };\r\n    return badgeClasses[badge] || '';\r\n}\r\n\r\nfunction getBadgeLabel(badge) {\r\n    const badgeLabels = {\r\n        'new': currentLang === 'en' ? 'NEW' : 'NEU',\r\n        'premium': 'PREMIUM',\r\n        'fast': currentLang === 'en' ? 'FAST' : 'SCHNELL'\r\n    };\r\n    return badgeLabels[badge] || badge.toUpperCase();\r\n}\r\n\r\nfunction renderModel(model) {\r\n    const isVideo = model.type === 'video';\r\n    const isMusic = model.type === 'music';\r\n    \r\n    let mediaElement;\r\n    \r\n    if (isVideo) {\r\n        mediaElement = `<video class=\"model-video\" muted loop>\r\n             <source src=\"${model.media}\" type=\"video\/mp4\">\r\n           <\/video>\r\n           <div class=\"model-play-overlay\">\r\n             <div class=\"play-icon\">\r\n               <svg width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n                 <path d=\"M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z\"\/>\r\n               <\/svg>\r\n             <\/div>\r\n           <\/div>`;\r\n    } else if (isMusic) {\r\n        mediaElement = `\r\n            <div style=\"width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;\">\r\n                <svg width=\"60\" height=\"60\" fill=\"white\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\"\/>\r\n                <\/svg>\r\n            <\/div>\r\n        `;\r\n    } else {\r\n        mediaElement = `<img decoding=\"async\" class=\"model-image\" src=\"${model.media}\" alt=\"${model.name}\">`;\r\n    }\r\n\r\n    \/\/ Dynamische URL-Generierung basierend auf Typ und Sprache\r\n    const pageType = model.type === 'video' ? '\/ai-video' : \r\n                     model.type === 'music' ? '\/music' : \r\n                     '\/ai-image';\r\n    const modelUrl = getLocalizedUrl(pageType, model.modelId);\r\n    const buttonHref = isUserLoggedIn ? modelUrl : getLoginUrl();\r\n    const buttonOnClick = isUserLoggedIn ? '' : 'onclick=\"return true;\"';\r\n\r\n    return `\r\n        <div class=\"model-card\" data-type=\"${model.type}\" data-provider=\"${model.provider.toLowerCase()}\" data-id=\"${model.id}\">\r\n            <div class=\"model-media\">\r\n                ${mediaElement}\r\n            <\/div>\r\n            <div class=\"model-content\">\r\n                <div class=\"model-header\">\r\n                    <div class=\"model-icon\">\r\n                        <img decoding=\"async\" src=\"${model.icon}\" alt=\"${model.provider}\">\r\n                    <\/div>\r\n                    <div class=\"model-info\">\r\n                        <h3 class=\"model-name\">${model.name}<\/h3>\r\n                        <p class=\"model-provider\">${model.provider}<\/p>\r\n                    <\/div>\r\n                    <div class=\"model-badges\">\r\n                        ${model.badges.map(badge => `<span class=\"badge ${getBadgeClass(badge)}\">${getBadgeLabel(badge)}<\/span>`).join('')}\r\n                        <span class=\"badge badge-${model.type}\">${model.type}<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                <p class=\"model-description\">${model.description}<\/p>\r\n                <div class=\"model-features\">\r\n                    ${model.features.map(feature => `<span class=\"feature\">${translateFeature(feature)}<\/span>`).join('')}\r\n                <\/div>\r\n                <div class=\"model-footer\">\r\n                    <a href=\"${buttonHref}\" class=\"try-button\" ${buttonOnClick}>${t('try_now')}<\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    `;\r\n}\r\n\r\nfunction filterModels() {\r\n    const filtered = models.filter(model => {\r\n        \/\/ Type filter\r\n        if (currentFilter !== 'all' && model.type !== currentFilter) {\r\n            return false;\r\n        }\r\n\r\n        \/\/ Search filter\r\n        if (searchQuery && !model.name.toLowerCase().includes(searchQuery.toLowerCase()) &&\r\n            !model.description.toLowerCase().includes(searchQuery.toLowerCase())) {\r\n            return false;\r\n        }\r\n\r\n        \/\/ Provider filter\r\n        if (activeProviders.length > 0 && !activeProviders.includes(model.provider.toLowerCase())) {\r\n            return false;\r\n        }\r\n\r\n        \/\/ Tag filter\r\n        if (activeTags.length > 0) {\r\n            const hasTag = activeTags.some(tag => model.badges.includes(tag));\r\n            if (!hasTag) return false;\r\n        }\r\n\r\n        return true;\r\n    });\r\n\r\n    renderModels(filtered);\r\n}\r\n\r\nfunction renderModels(modelsToRender) {\r\n    if (modelsToRender.length === 0) {\r\n        modelsGrid.innerHTML = `\r\n            <div class=\"empty-state\">\r\n                <h3>${t('no_models_found')}<\/h3>\r\n                <p>${t('try_adjusting_filters')}<\/p>\r\n            <\/div>\r\n        `;\r\n        return;\r\n    }\r\n\r\n    modelsGrid.innerHTML = modelsToRender.map(model => renderModel(model)).join('');\r\n    \r\n    \/\/ Add event listeners for cards\r\n    document.querySelectorAll('.model-card').forEach((card, index) => {\r\n        const model = modelsToRender[index];\r\n        \r\n        \/\/ Click handler for modal\r\n        card.addEventListener('click', function(e) {\r\n            \/\/ Don't open if button was clicked\r\n            if (!e.target.closest('.try-button')) {\r\n                e.preventDefault();\r\n                openModal(model);\r\n            }\r\n        });\r\n        \r\n        \/\/ Video hover effects\r\n        const video = card.querySelector('.model-video');\r\n        if (video) {\r\n            card.addEventListener('mouseenter', () => {\r\n                video.play().catch(() => {});\r\n            });\r\n            card.addEventListener('mouseleave', () => {\r\n                video.pause();\r\n                video.currentTime = 0;\r\n            });\r\n        }\r\n    });\r\n}\r\n\r\n\/\/ Modal functions\r\nfunction openModal(model) {\r\n    \/\/ Insert media (video, image, or audio)\r\n    if (model.type === 'video') {\r\n        modalMedia.innerHTML = `\r\n            <video controls autoplay muted loop>\r\n                <source src=\"${model.media}\" type=\"video\/mp4\">\r\n            <\/video>\r\n        `;\r\n    } else if (model.type === 'music') {\r\n        modalMedia.innerHTML = `\r\n            <div style=\"display: flex; align-items: center; justify-content: center; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\r\n                <div style=\"text-align: center;\">\r\n                    <div style=\"background: rgba(255,255,255,0.1); padding: 3rem; border-radius: 20px; backdrop-filter: blur(10px);\">\r\n                        <svg width=\"80\" height=\"80\" fill=\"white\" viewBox=\"0 0 24 24\" style=\"margin-bottom: 2rem;\">\r\n                            <path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\"\/>\r\n                        <\/svg>\r\n                        <audio controls autoplay style=\"width: 300px;\">\r\n                            <source src=\"${model.media}\" type=\"audio\/mpeg\">\r\n                        <\/audio>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n    } else {\r\n        modalMedia.innerHTML = `<img decoding=\"async\" src=\"${model.media}\" alt=\"${model.name}\">`;\r\n    }\r\n\r\n    \/\/ Insert info\r\n    modalIcon.src = model.icon;\r\n    modalTitle.textContent = model.name;\r\n    modalProvider.textContent = model.provider;\r\n    modalDescription.textContent = model.description;\r\n    \r\n    \/\/ Insert features\r\n    modalFeatures.innerHTML = model.features\r\n        .map(feature => `<span class=\"feature\">${translateFeature(feature)}<\/span>`)\r\n        .join('');\r\n    \r\n    \/\/ Set button URL and text mit dynamischer URL-Generierung\r\n    const pageType = model.type === 'video' ? '\/ai-video' : \r\n                     model.type === 'music' ? '\/music' : \r\n                     '\/ai-image';\r\n    const modelUrl = getLocalizedUrl(pageType, model.modelId);\r\n    modalTryButton.href = isUserLoggedIn ? modelUrl : getLoginUrl();\r\n    modalTryButton.textContent = t('try_now');\r\n    \r\n    \/\/ Show modal\r\n    modal.style.display = 'block';\r\n    document.body.style.overflow = 'hidden'; \/\/ Prevent scrolling\r\n}\r\n\r\nfunction closeModal() {\r\n    modal.style.display = 'none';\r\n    document.body.style.overflow = 'auto'; \/\/ Re-enable scrolling\r\n    \r\n    \/\/ Pause video if present\r\n    const video = modalMedia.querySelector('video');\r\n    if (video) {\r\n        video.pause();\r\n    }\r\n}\r\n\r\n\/\/ Event listeners\r\nnavTabs.forEach(tab => {\r\n    tab.addEventListener('click', () => {\r\n        navTabs.forEach(t => t.classList.remove('active'));\r\n        tab.classList.add('active');\r\n        currentFilter = tab.dataset.filter;\r\n        filterModels();\r\n    });\r\n});\r\n\r\nfilterPills.forEach(pill => {\r\n    pill.addEventListener('click', () => {\r\n        pill.classList.toggle('active');\r\n        \r\n        if (pill.dataset.provider) {\r\n            const provider = pill.dataset.provider;\r\n            if (pill.classList.contains('active')) {\r\n                activeProviders.push(provider);\r\n            } else {\r\n                activeProviders = activeProviders.filter(p => p !== provider);\r\n            }\r\n        } else if (pill.dataset.tag) {\r\n            const tag = pill.dataset.tag;\r\n            if (pill.classList.contains('active')) {\r\n                activeTags.push(tag);\r\n            } else {\r\n                activeTags = activeTags.filter(t => t !== tag);\r\n            }\r\n        }\r\n        \r\n        filterModels();\r\n    });\r\n});\r\n\r\nsearchInput.addEventListener('input', (e) => {\r\n    searchQuery = e.target.value;\r\n    filterModels();\r\n});\r\n\r\n\/\/ Modal event listeners\r\nmodalClose.addEventListener('click', closeModal);\r\n\r\n\/\/ Close modal on outside click\r\nmodal.addEventListener('click', function(e) {\r\n    if (e.target === modal) {\r\n        closeModal();\r\n    }\r\n});\r\n\r\n\/\/ Close modal on ESC key\r\ndocument.addEventListener('keydown', function(e) {\r\n    if (e.key === 'Escape' && modal.style.display === 'block') {\r\n        closeModal();\r\n    }\r\n});\r\n\r\n\/\/ Initial render\r\nfilterModels();\r\n\r\n\/\/ Log login status\r\nconsole.log('User logged in:', isUserLoggedIn);\r\nconsole.log('Current language:', currentLang);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Alle Modelle Video Bild Musik KI-Modelle f\u00fcr Video &#038; Bild Entdecke die neueste Generation von KI-Modellen. Erstelle professionelle Videos und Bilder in Sekunden. Google PixVerse Flux Premium Schnell &times; Jetzt ausprobieren<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5415","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages\/5415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/comments?post=5415"}],"version-history":[{"count":40,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages\/5415\/revisions"}],"predecessor-version":[{"id":6506,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages\/5415\/revisions\/6506"}],"wp:attachment":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/media?parent=5415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}