Veu3

Running

App Files Files Community

Hamed744 commited on Jun 6

Commit

1b7416e

verified ·

1 Parent(s): 18b1fa7

Update index.html

Browse files

Files changed (1) hide show

index.html +142 -139

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>آلفا TTS - نسخه نهایی</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap');
@@ -11,18 +11,19 @@
             --app-font: 'Vazirmatn', sans-serif;
             --app-header-grad-start: #1a2980;
             --app-header-grad-end: #26d0ce;
-            --app-panel-bg: rgba(255, 255, 255, 0.65);
-            --app-input-bg: rgba(255, 255, 255, 0.7);
             --app-button-bg: #5f27cd;
-            --app-main-bg: linear-gradient(170deg, #e0c3fc 0%, #8ec5fc 100%);
-            --app-text-primary: #1e1e1e;
-            --app-text-secondary: #4a4a4a;
-            --app-border-color: rgba(255, 255, 255, 0.4);
             --radius-card: 24px;
-            --radius-input: 14px;
-            --shadow-card: 0 10px 40px -10px rgba(0,0,0,0.15);
-            --shadow-button: 0 5px 15px -3px rgba(95, 39, 205, 0.5);
-            --speaker-selected-border: 4px solid var(--app-button-bg);
         }
         body {
@@ -31,46 +32,51 @@
             background: var(--app-main-bg);
             color: var(--app-text-primary);
             font-size: 16px;
-            line-height: 1.7;
             margin: 0;
-            padding: 2rem 1rem;
             min-height: 100vh;
-            box-sizing: border-box;
             display: flex;
-            align-items: center;
-            justify-content: center;
         }
         .container {
             max-width: 950px;
-            width: 100%;
-        }
-        .main-content {
-            padding: 2.5rem;
-            background: var(--app-panel-bg);
-            border-radius: var(--radius-card);
-            box-shadow: var(--shadow-card);
-            backdrop-filter: blur(20px);
-            border: 1px solid var(--app-border-color);
         }
-        .app-title {
             text-align: center;
-            margin-bottom: 2.5rem;
         }
-        .app-title h1 {
             font-size: 2.8em;
             font-weight: 800;
-            margin: 0;
-            background: linear-gradient(45deg, var(--app-header-grad-start), var(--app-header-grad-end));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
-        .app-title p {
             font-size: 1.2em;
-            color: var(--app-text-secondary);
-            margin-top: 0.5rem;
         }
         .form-group {
@@ -78,155 +84,144 @@
         }
         label {
-            display: flex;
-            align-items: center;
-            gap: 0.7rem;
             font-weight: 700;
             color: var(--app-text-primary);
             font-size: 1.1em;
-            margin-bottom: 1rem;
         }
         textarea, input[type="text"] {
             width: 100%;
             padding: 1rem;
             border-radius: var(--radius-input);
-            border: 1px solid var(--app-border-color);
             background-color: var(--app-input-bg);
-            box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
             font-family: var(--app-font);
             font-size: 1rem;
             box-sizing: border-box;
             transition: all 0.2s ease-in-out;
         }
         textarea:focus, input[type="text"]:focus {
             outline: none;
             border-color: var(--app-button-bg);
-            box-shadow: 0 0 0 4px rgba(95, 39, 205, 0.2);
         }
-        /* Speaker Selection Grid - NEW DESIGN */
         #speaker-grid {
             display: grid;
-            grid-template-columns: repeat(4, 1fr); /* 4 columns */
             gap: 1.5rem;
         }
         .speaker-card {
             cursor: pointer;
-            position: relative;
             overflow: hidden;
-            border-radius: var(--radius-input);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
-        .speaker-card:hover {
-            transform: scale(1.05);
-            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
         }
         .speaker-card input[type="radio"] {
             display: none;
         }
-        .speaker-card .speaker-visual {
-            border-radius: var(--radius-input);
-            border: 4px solid transparent;
-            transition: border-color 0.3s ease;
-        }
         .speaker-card img {
             width: 100%;
-            height: 200px;
             object-fit: cover;
             display: block;
         }
-        .speaker-card .speaker-name-overlay {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
-            color: white;
-            padding: 2rem 1rem 1rem 1rem;
-            font-weight: 700;
-            font-size: 1.1em;
-            text-align: right;
-            opacity: 0;
-            transform: translateY(20px);
-            transition: opacity 0.3s ease, transform 0.3s ease;
-        }
-        .speaker-card:hover .speaker-name-overlay {
-            opacity: 1;
-            transform: translateY(0);
-        }
-        .speaker-card .selection-tick {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            width: 30px;
-            height: 30px;
-            background-color: var(--app-button-bg);
-            color: white;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transform: scale(0);
-            transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
         }
         .speaker-card input[type="radio"]:checked + .speaker-visual {
             border-color: var(--app-button-bg);
         }
-        .speaker-card input[type="radio"]:checked + .speaker-visual .selection-tick {
-            transform: scale(1);
         }
-        /* Slider */
         .slider-container { display: flex; align-items: center; gap: 1rem; }
         input[type="range"] { flex-grow: 1; cursor: pointer; }
         #temperature-value { font-weight: bold; background-color: var(--app-input-bg); padding: 0.2rem 0.8rem; border-radius: 8px; border: 1px solid var(--app-border-color); min-width: 40px; text-align: center; }
         #generate-btn { width: 100%; padding: 1rem 1.5rem; font-size: 1.2em; font-weight: 700; font-family: var(--app-font); background: var(--app-button-bg); color: white; border: none; border-radius: var(--radius-input); cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-button); }
-        #generate-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 20px -5px rgba(95, 39, 205, 0.6); }
         #generate-btn:disabled { background-color: #999; cursor: not-allowed; box-shadow: none; }
-        #output-section { margin-top: 2.5rem; padding: 1.5rem; background-color: var(--app-input-bg); border-radius: var(--radius-card); min-height: 100px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; }
         #status-message { font-weight: 500; color: var(--app-text-secondary); }
         #audio-player { width: 100%; margin-top: 1rem; display: none; }
-        @media (max-width: 768px) {
-            #speaker-grid { grid-template-columns: repeat(2, 1fr); }
-            .main-content { padding: 1.5rem; }
-            body { padding: 1rem 0.5rem; }
-        }
     </style>
 </head>
 <body>
     <div class="container">
         <main class="main-content">
-            <div class="app-title">
-                <h1>آلفا TTS</h1>
-                <p>جادوی تبدیل متن به صدا</p>
-            </div>
             <form id="tts-form">
                 <div class="form-group">
                     <label for="text-input">📝 متن برای تبدیل</label>
-                    <textarea id="text-input" rows="4" placeholder="اینجا متن خود را به فارسی وارد کنید...">این یک آزمایش برای بررسی کیفیت صدای تولید شده توسط هوش مصنوعی آلفا است.</textarea>
                 </div>
                 <div class="form-group">
                     <label for="prompt-input">🗣️ سبک و لحن گفتار (اختیاری)</label>
                     <input type="text" id="prompt-input" value="با صدایی طبیعی و روان." placeholder="مثال: با لحنی شاد و پرانرژی">
                 </div>
                 <div class="form-group">
                     <label>🎤 گوینده را انتخاب کنید</label>
-                    <div id="speaker-grid"></div>
                 </div>
                 <div class="form-group">
-                    <label for="temperature-slider">🌡️ میزان خلاقیت صدا</label>
                     <div class="slider-container">
                         <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9">
                         <span id="temperature-value">0.9</span>
                     </div>
                 </div>
                 <button type="submit" id="generate-btn">🚀 تولید و پخش صدا</button>
             </form>
             <div id="output-section">
                 <div id="status-message">خروجی صدا در اینجا نمایش داده می‌شود</div>
                 <audio id="audio-player" controls></audio>
@@ -241,19 +236,28 @@
             const GET_DATA_URL_BASE = `${HF_SPACE_URL}/gradio_api/queue/data`;
             const FILE_URL_BASE = `${HF_SPACE_URL}/gradio_api/file=`;
-            const FN_INDEX = 1;
-            const speakers = {
-                "Charon": "شهاب", "Zephyr": "نسیم", "Iapetus": "کیان", "Enceladus": "آوا",
-                "Leda": "لیدا", "Kore": "ترنم", "Puck": "پژمان", "Fenrir": "آرش",
-                "Aoede": "چکاوک", "Callirrhoe": "باران", "Autonoe": "روشنک", "Orus": "داریوش",
-                "Rasalthgeti": "هما", "Algenib": "البرز", "Erinome": "ارمغان", "Despina": "دریا",
-                "Algieba": "آناهیتا", "Umbriel": "سهند", "Pulcherrima": "پریچه��", "Gacrux": "گرشا",
-                "Schedar": "ستاره", "Alnilam": "آرتین", "Achernar": "آناهید", "Laomedeia": "ماندانا",
-                "Sulafat": "سروش", "Sadaltager": "سپهر", "Sadachbia": "سحر", "Vindemiatrix": "پروین",
-                "Zubenelgenubi": "آذر", "Achird": "آرشام"
-            };
             const form = document.getElementById('tts-form');
             const textInput = document.getElementById('text-input');
             const promptInput = document.getElementById('prompt-input');
@@ -265,24 +269,23 @@
             const audioPlayer = document.getElementById('audio-player');
             function createSpeakerCards() {
-                Object.entries(speakers).forEach(([englishName, persianName]) => {
                     const card = document.createElement('label');
                     card.className = 'speaker-card';
-                    card.setAttribute('for', `speaker-${englishName}`);
-                    // استفاده از Unsplash برای عکس‌های واقعی و با کیفیت
-                    const imageUrl = `https://source.unsplash.com/200x200/?portrait,person,${englishName}`;
-                    const isChecked = englishName === 'Charon' ? 'checked' : '';
                     card.innerHTML = `
-                        <input type="radio" name="speaker" value="${englishName}" id="speaker-${englishName}" ${isChecked}>
                         <div class="speaker-visual">
-                            <img src="${imageUrl}" alt="عکس گوینده ${persianName}">
-                            <div class="speaker-name-overlay">${persianName}</div>
-                            <div class="selection-tick">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                    <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
-                                </svg>
-                            </div>
                         </div>
                     `;
                     speakerGrid.appendChild(card);
@@ -363,7 +366,7 @@
                                     }
                                     break;
                                 }
-                            } catch (e) { /* نادیده گرفتن خطاهای پارس کردن */ }
                         }
                         if (finalFilePath) break;
                     }
@@ -375,7 +378,7 @@
                         audioPlayer.style.display = 'block';
                         audioPlayer.play();
                     } else {
-                        throw new Error('فایل صوتی از سرور دریافت نشد.');
                     }
                 } catch (error) {

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>آلفا TTS - رابط کاربری مدرن</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap');
             --app-font: 'Vazirmatn', sans-serif;
             --app-header-grad-start: #1a2980;
             --app-header-grad-end: #26d0ce;
+            --app-panel-bg: #FFFFFF;
+            --app-input-bg: #F7F7F7;
             --app-button-bg: #5f27cd;
+            --app-button-hover-bg: #481e9e;
+            --app-main-bg: linear-gradient(170deg, #F3E8FF 0%, #E0F2FE 100%);
+            --app-text-primary: #2c3e50;
+            --app-text-secondary: #555;
+            --app-border-color: #E0E0E0;
             --radius-card: 24px;
+            --radius-input: 12px;
+            --shadow-card: 0 10px 30px -5px rgba(0,0,0,0.08);
+            --shadow-button: 0 4px 15px -2px rgba(95, 39, 205, 0.4);
+            --speaker-selected-glow: 0 0 15px rgba(95, 39, 205, 0.5);
         }
         body {
             background: var(--app-main-bg);
             color: var(--app-text-primary);
             font-size: 16px;
+            line-height: 1.65;
             margin: 0;
+            padding: 0;
             min-height: 100vh;
             display: flex;
+            flex-direction: column;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
         }
         .container {
             max-width: 950px;
+            width: 95%;
+            margin: 0 auto;
+            padding-bottom: 40px;
         }
+        .app-header {
+            padding: 3rem 1.5rem 5rem 1.5rem;
             text-align: center;
+            background-image: linear-gradient(135deg, var(--app-header-grad-start) 0%, var(--app-header-grad-end) 100%);
+            color: white;
+            border-bottom-left-radius: var(--radius-card);
+            border-bottom-right-radius: var(--radius-card);
+            box-shadow: 0 6px 20px -5px rgba(0,0,0,0.2);
         }
+        .app-header h1 {
             font-size: 2.8em;
             font-weight: 800;
+            margin:0 0 0.5rem 0;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.15);
         }
+        .app-header p {
             font-size: 1.2em;
+            color: rgba(255,255,255,0.9);
+            margin-top:0;
+            opacity: 0.9;
+        }
+        .main-content {
+            padding: 2.5rem;
+            margin: -3.5rem auto 2rem auto;
+            background-color: var(--app-panel-bg);
+            border-radius: var(--radius-card);
+            box-shadow: var(--shadow-card);
         }
         .form-group {
         }
         label {
+            display: block;
             font-weight: 700;
             color: var(--app-text-primary);
             font-size: 1.1em;
+            margin-bottom: 0.8rem;
         }
         textarea, input[type="text"] {
             width: 100%;
             padding: 1rem;
             border-radius: var(--radius-input);
+            border: 2px solid var(--app-border-color);
             background-color: var(--app-input-bg);
+            box-shadow: none;
             font-family: var(--app-font);
             font-size: 1rem;
             box-sizing: border-box;
             transition: all 0.2s ease-in-out;
         }
         textarea:focus, input[type="text"]:focus {
             outline: none;
             border-color: var(--app-button-bg);
+            box-shadow: 0 0 0 3px rgba(95, 39, 205, 0.2);
+            background-color: #fff;
         }
+        /* --- Speaker Selection Grid (طراحی جدید) --- */
+        .speaker-gallery {
+            background-color: var(--app-input-bg);
+            padding: 1.5rem;
+            border-radius: var(--radius-card);
+            border: 1px solid var(--app-border-color);
+        }
         #speaker-grid {
             display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
             gap: 1.5rem;
         }
+        @media (min-width: 768px) {
+            #speaker-grid {
+                grid-template-columns: repeat(4, 1fr);
+            }
+        }
         .speaker-card {
             cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .speaker-card .speaker-visual {
+            border: 3px solid transparent;
+            border-radius: var(--radius-card);
             overflow: hidden;
+            text-align: center;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
+            position: relative;
+            background-color: #fff;
         }
+        .speaker-card:hover .speaker-visual {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
         }
         .speaker-card input[type="radio"] {
             display: none;
         }
         .speaker-card img {
             width: 100%;
+            height: 150px;
             object-fit: cover;
             display: block;
         }
+        .speaker-card .speaker-name {
+            padding: 0.8rem 0.5rem;
+            font-weight: 500;
+            background-color: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(5px);
+            transition: background-color 0.3s ease;
         }
         .speaker-card input[type="radio"]:checked + .speaker-visual {
             border-color: var(--app-button-bg);
+            box-shadow: var(--speaker-selected-glow);
+            transform: translateY(-2px) scale(1.02);
         }
+        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name {
+            background-color: var(--app-button-bg);
+            color: white;
+            font-weight: 700;
         }
+        /* --- Slider --- */
         .slider-container { display: flex; align-items: center; gap: 1rem; }
         input[type="range"] { flex-grow: 1; cursor: pointer; }
         #temperature-value { font-weight: bold; background-color: var(--app-input-bg); padding: 0.2rem 0.8rem; border-radius: 8px; border: 1px solid var(--app-border-color); min-width: 40px; text-align: center; }
+        /* --- Button & Output --- */
         #generate-btn { width: 100%; padding: 1rem 1.5rem; font-size: 1.2em; font-weight: 700; font-family: var(--app-font); background: var(--app-button-bg); color: white; border: none; border-radius: var(--radius-input); cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-button); }
+        #generate-btn:hover:not(:disabled) { background-color: var(--app-button-hover-bg); transform: translateY(-2px); box-shadow: 0 6px 20px -3px rgba(95, 39, 205, 0.5); }
         #generate-btn:disabled { background-color: #999; cursor: not-allowed; box-shadow: none; }
+        #output-section { margin-top: 2.5rem; padding: 1.5rem; background-color: #fff; border-radius: var(--radius-card); min-height: 100px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; border: 1px solid var(--app-border-color); }
         #status-message { font-weight: 500; color: var(--app-text-secondary); }
         #audio-player { width: 100%; margin-top: 1rem; display: none; }
     </style>
 </head>
 <body>
     <div class="container">
+        <header class="app-header">
+            <h1>آلفا TTS</h1>
+            <p>جادوی تبدیل متن به صدا، به سبک شما</p>
+        </header>
         <main class="main-content">
             <form id="tts-form">
                 <div class="form-group">
                     <label for="text-input">📝 متن برای تبدیل</label>
+                    <textarea id="text-input" rows="5" placeholder="اینجا متن خود را به فارسی وارد کنید...">این یک آزمایش برای بررسی کیفیت صدای تولید شده توسط هوش مصنوعی آلفا است.</textarea>
                 </div>
                 <div class="form-group">
                     <label for="prompt-input">🗣️ سبک و لحن گفتار (اختیاری)</label>
                     <input type="text" id="prompt-input" value="با صدایی طبیعی و روان." placeholder="مثال: با لحنی شاد و پرانرژی">
                 </div>
                 <div class="form-group">
                     <label>🎤 گوینده را انتخاب کنید</label>
+                    <div class="speaker-gallery">
+                        <div id="speaker-grid"></div>
+                    </div>
                 </div>
                 <div class="form-group">
+                    <label for="temperature-slider">🌡️ میزان خلاقیت صدا (0.1 تا 1.5)</label>
                     <div class="slider-container">
                         <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9">
                         <span id="temperature-value">0.9</span>
                     </div>
                 </div>
                 <button type="submit" id="generate-btn">🚀 تولید و پخش صدا</button>
             </form>
             <div id="output-section">
                 <div id="status-message">خروجی صدا در اینجا نمایش داده می‌شود</div>
                 <audio id="audio-player" controls></audio>
             const GET_DATA_URL_BASE = `${HF_SPACE_URL}/gradio_api/queue/data`;
             const FILE_URL_BASE = `${HF_SPACE_URL}/gradio_api/file=`;
+            const FN_INDEX = 1;
+            // --- **لیست جدید گویندگان با اسامی فارسی** ---
+            const speakers = [
+                { id: "Charon", name: "شهاب (مرد)" }, { id: "Zephyr", name: "آوا (زن)" },
+                { id: "Achird", name: "نوید (مرد)" }, { id: "Zubenelgenubi", name: "رویا (زن)" },
+                { id: "Vindemiatrix", name: "کیان (مرد)" }, { id: "Sadachbia", name: "پریسا (زن)" },
+                { id: "Sadaltager", name: "آرش (مرد)" }, { id: "Sulafat", name: "شبنم (زن)" },
+                { id: "Laomedeia", name: "سهیل (مرد)" }, { id: "Achernar", name: "مریم (زن)" },
+                { id: "Alnilam", name: "بهرام (مرد)" }, { id: "Schedar", name: "نگار (زن)" },
+                { id: "Gacrux", name: "فرید (مرد)" }, { id: "Pulcherrima", name: "سارا (زن)" },
+                { id: "Umbriel", name: "مانی (مرد)" }, { id: "Algieba", name: "آناهیتا (زن)" },
+                { id: "Despina", name: "دلنواز (زن)" }, { id: "Erinome", name: "رسا (مرد)" },
+                { id: "Algenib", name: "امید (مرد)" }, { id: "Rasalthgeti", name: "الهه (زن)" },
+                { id: "Orus", name: "بردیا (مرد)" }, { id: "Aoede", name: "ترانه (زن)" },
+                { id: "Callirrhoe", name: "نیما (مرد)" }, { id: "Autonoe", name: "هستی (زن)" },
+                { id: "Enceladus", name: "کامیار (مرد)" }, { id: "Iapetus", name: "ستاره (زن)" },
+                { id: "Puck", name: "پویا (مرد)" }, { id: "Kore", name: "مهتاب (زن)" },
+                { id: "Fenrir", name: "سام (مرد)" }, { id: "Leda", name: "لیدا (زن)" }
+            ];
+            // --- عناصر DOM ---
             const form = document.getElementById('tts-form');
             const textInput = document.getElementById('text-input');
             const promptInput = document.getElementById('prompt-input');
             const audioPlayer = document.getElementById('audio-player');
             function createSpeakerCards() {
+                speakers.forEach((speaker) => {
                     const card = document.createElement('label');
                     card.className = 'speaker-card';
+                    card.setAttribute('for', `speaker-${speaker.id}`);
+                    // از یک سرویس عکس پرتره استفاده می‌کنیم
+                    // اگر جنسیت مشخص است، می‌توانیم عکس‌های مرتبط‌تری انتخاب کنیم
+                    const gender = speaker.name.includes('(مرد)') ? 'men' : 'women';
+                    const imageUrl = `https://randomuser.me/api/portraits/${gender}/${speakers.indexOf(speaker) % 100}.jpg`;
+                    const isChecked = speaker.id === 'Charon' ? 'checked' : '';
                     card.innerHTML = `
+                        <input type="radio" name="speaker" value="${speaker.id}" id="speaker-${speaker.id}" ${isChecked}>
                         <div class="speaker-visual">
+                            <img src="${imageUrl}" alt="عکس گوینده ${speaker.name}" loading="lazy">
+                            <div class="speaker-name">${speaker.name}</div>
                         </div>
                     `;
                     speakerGrid.appendChild(card);
                                     }
                                     break;
                                 }
+                            } catch (e) { /* نادیده گرفتن خطاهای پارس */ }
                         }
                         if (finalFilePath) break;
                     }
                         audioPlayer.style.display = 'block';
                         audioPlayer.play();
                     } else {
+                        throw new Error('فایل صوتی از سرور دریافت نشد. کنسول را برای اطلاعات بیشتر بررسی کنید.');
                     }
                 } catch (error) {