<style>
        /* تنظیمات پایه برای حذف فضای سفید اضافی */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow-x: hidden;
        }

        body {
            font-family: 'Courier New', monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #1e1e1e;
            color: #ffffff;
        }

        .container {
            text-align: center;
            max-width: 100%;
        }

        .animated-text {
            font-size: 18px;
            color: #339966;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), 0 0 25px rgba(51, 153, 102, 0.7);
            animation: sway 3s ease-in-out infinite;
            display: inline-block;
        }

        @keyframes sway {
            0% { transform: translate(0, 0) scale(1); }
            25% { transform: translate(-5px, 0) scale(1.05); }
            50% { transform: translate(5px, 0) scale(1); }
            75% { transform: translate(-5px, 0) scale(1.05); }
            100% { transform: translate(0, 0) scale(1); }
        }

        .copy-text {
            cursor: pointer;
            display: inline-block;
            font-size: 22px;
            margin: 20px;
            padding: 10px 30px;
            background-color: #007BFF;
            color: white;
            border-radius: 8px;
            border: none;
            transition: background-color 0.3s, transform 0.2s;
            font-family: 'Courier New', monospace;
        }

        .copy-text:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(0, 0, 0, 0.1);
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1.5s linear infinite;
            margin: 20px auto;
            display: none;
        }

        .code-output {
            font-family: 'Courier New', monospace;
            font-size: 16px;
            background-color: #000000;
            color: #00FF00;
            padding: 10px;
            margin: 10px auto;
            width: 300px;
            height: 50px;
            text-align: left;
            border-radius: 8px;
            display: none;
        }

        .message {
            font-size: 18px;
            color: #28a745;
            margin-top: 20px;
            display: none;
        }

        .message .small-text {
            font-size: 14px;
            margin-top: 10px;
            display: block;
        }

        #change-voice-btn {
            display: none;
            margin-top: 20px;
            text-align: center;
        }

        #change-voice-btn button {
            margin: 0 auto;
            display: block;
        }

        #extra-message {
            display: none;
            margin-top: 20px;
            text-align: center;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .image-container {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 0 auto;
        }

        .image-container img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: relative;
            z-index: 2;
            padding: 10px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;
        }

        .image-container::after {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            width: calc(100% + 10px);
            height: calc(100% + 10px);
            border-radius: 50%;
            border: 5px solid #339966;
            animation: pulse 2s infinite;
            z-index: 1;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.7;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .orbit {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 1px solid transparent;
            border-top: 1px solid #339966;
            z-index: 0;
        }

        .orbit::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 50%;
            width: 10px;
            height: 10px;
            background-color: #339966;
            border-radius: 50%;
            transform: translateX(-50%);
        }

        .orbit1 {
            width: 160px;
            height: 160px;
            animation: rotate-orbit 6s linear infinite;
        }

        .orbit2 {
            width: 180px;
            height: 180px;
            animation: rotate-orbit-reverse 8s linear infinite;
        }

        .orbit3 {
            width: 200px;
            height: 200px;
            animation: rotate-orbit 10s linear infinite;
        }

        @keyframes rotate-orbit {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        @keyframes rotate-orbit-reverse {
            from {
                transform: translate(-50%, -50%) rotate(360deg);
            }
            to {
                transform: translate(-50%, -50%) rotate(0deg);
            }
        }

        .image-container.no-animation::after,
        .image-container.no-animation .orbit {
            animation: none;
        }

        .image-container.no-animation::after {
            border: 5px solid #546e7a;
        }

        .image-container.no-animation img {
            padding: 10px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;
        }
    </style>
<div class="container">
<div class="image-container"><img src="https://app.puzzley.net/uploads/user/Jydo/تغیر صدا با هوش مصنوعی/45d85d2f-1b51-4ee2-a89a-d8e9b66b5d03.jpg" alt="مدل صدای یوسف" width="170" height="170" />
<div class="orbit orbit1"></div>
<div class="orbit orbit2"></div>
<div class="orbit orbit3"></div>
</div>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><span class="animated-text"><strong>مدل صدای حمیرا&nbsp;</strong></span></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><audio controls="controls" controlslist="nodownload">
                <source src="https://app.puzzley.net/uploads/user/Jydo/تغیر صدا با هوش مصنوعی/حمیرا.wav" type="audio/wav" />
            </audio></p>
<p><span style="color: #333333;">صداتو (<span style="font-size: 8pt;">هر صدایی رو</span>) به صدای حمیرا تغییر</span><span style="color: #333333;">&nbsp;بده</span></p>
<p><span style="color: #008000;">و یا متن بنویس تا حمیرا صحبت کنه.</span></p>
<p>&nbsp;</p>
<button class="copy-text" id="copy-text">تولید مدل صدا (<span style="font-size: 8pt;"><b>حمیرا</b></span>)</button>
<div class="spinner" id="spinner"></div>
<div class="code-output" id="code-output"></div>
<p class="message" id="success-message">مدل با موفقیت ساخته شد!✅ <span class="small-text">حالا میتونی با پروژه پایین تغییر صدا انجام بدی.</span></p>
<div id="change-voice-btn" style="text-align: center;"><a href="#/nav/widget/page-builder/getIndex/eyJpdiI6IitmckhCTTRXcWtCcWhCWk5TMTBiaGc9PSIsInZhbHVlIjoiYWRlTnpXM2lIeHlMYThvY2FHdVI4c3FucDhOK1ozREpienloNFJVSWFJM0M2dWwxWjluU1RlWVI3WXpJYXFXUiIsIm1hYyI6IjQzZTJkMzQ3YjQ1YjE5ZTM2ODkxM2MzNDE2M2E2MWU2NjIwMDM2MDU2YTkwN2IyMjIyYmJlY2RkY2NlMzMzMjgiLCJ0YWciOiIifQ%3D%3D/1589906"> <button style="background-color: #1976d2; padding: 16px 32px; border-radius: 8px;"> <span style="color: #ffffff;">شروع تغییر صدا🤖</span> </button> </a></div>
<div id="extra-message" style="display: none;">
<p>&nbsp;</p>
<p><span style="color: #339966;"><strong>آموزش ویدیویی تغییر صدا ⬇️</strong></span></p>
<p><a href="#/nav/online/news/getSingle/1149635/eyJpdiI6Iks5MWpxSUJuVVdzSDZYQmxTZzQxK0E9PSIsInZhbHVlIjoiSTJ1bU0zcDlrTHVJck9oMVRDcHJPZVlLb0dxK1BJMGdGMC9NODE3aVpXMUk0dmF2OENqeUpCVkJIMHBnZ2k5WSIsIm1hYyI6Ijg2NDVlZWI1OTQwNTFjMWIyYjIwZWQ2MGEyNmNkMTJmNDhkNDliNjk5ZWUwOGI3Y2NjMjc4NDdhMmI3OTU3ZDIiLCJ0YWciOiIifQ==/17363717"> اینجا <span style="font-size: 14pt;"><strong>کلیک</strong></span> کنید </a></p>
</div>
</div>
<p>
<script>
    document.getElementById('copy-text').addEventListener('click', function () {
        var spinner = document.getElementById('spinner');
        var codeOutput = document.getElementById('code-output');
        var message = document.getElementById('success-message');
        var changeVoiceBtn = document.getElementById('change-voice-btn');
        var extraMessage = document.getElementById('extra-message');
        var imageContainer = document.querySelector('.image-container');

        spinner.style.display = 'block';
        codeOutput.style.display = 'block';
        message.style.display = 'none';
        changeVoiceBtn.style.display = 'none';
        extraMessage.style.display = 'none';

        // اضافه کردن کلاس 'no-animation' برای توقف انیمیشن‌ها
        imageContainer.classList.add('no-animation');

        var textToCopy = "https://huggingface.co/datasets/Hamed744/Ezmary/resolve/main/Homeyra250.zip?download=true";
        navigator.clipboard.writeText(textToCopy);

        var initialMessages = [
            "در حال ساخت مدل با هوش مصنوعی...",
            "مدل: AI_Model-حمیرا"
        ];

        var processMessages = [
            "بارگذاری...",
            "پردازش...",
            "نهایی‌سازی..."
        ];

        function typeMessage(messageText, callback) {
            let index = 0;
            codeOutput.textContent = '';
            codeOutput.style.display = 'block';
            function type() {
                if (index < messageText.length) {
                    codeOutput.textContent += messageText.charAt(index);
                    index++;
                    setTimeout(type, 100);
                } else if (callback) {
                    callback();
                }
            }

            type();
        }

        let currentLine = 0;
        let totalLines = initialMessages.length;

        function typeInitialMessages() {
            if (currentLine < totalLines) {
                typeMessage(initialMessages[currentLine], function() {
                    currentLine++;
                    setTimeout(typeInitialMessages, 1000);
                });
            } else {
                currentLine = 0;
                setTimeout(typeProcessMessages, 1000);
            }
        }

        function typeProcessMessages() {
            if (currentLine < processMessages.length) {
                typeMessage(processMessages[currentLine], function() {
                    currentLine++;
                    setTimeout(typeProcessMessages, 1000);
                });
            } else {
                setTimeout(function () {
                    spinner.style.display = 'none';
                    codeOutput.style.display = 'none';
                    message.style.display = 'block';
                    changeVoiceBtn.style.display = 'block';
                    extraMessage.style.display = 'block';

                    // حذف کلاس 'no-animation' برای شروع مجدد انیمیشن‌ها
                    imageContainer.classList.remove('no-animation');
                }, 1000);
            }
        }

        typeInitialMessages();
    });
</script>
</p> این کد من یه مشکلی داره وقتی روی تولید مدل صدا کلیک می‌کنم یک لینک به کلیپ برد کپی میشه اما وقتی صفحه رو ترک می‌کنم و دوباره که میام ودوباره که روی تولید مدل صدا کلیک می‌کنم لینک کپی نمی‌شه در واقع هیچی به کلیپ برد کپی نمی‌شه بار بعدی  می‌تونی درست کنی که بار دوم یا سوم یا هرچی که میام دوباره که می‌زنم باز هم کپی بشه  یجورایی باشه اون لینک مثل متن ساده ای باشه که به محض کلیک روی تولید مدل صدا درجا کپی به به کلیپ بورد حتی اگه برنامه سنگین هم باشه یا هرچی