Download templates/ideogram.html from Opera8/tts10: direct link, hf CLI and curl.
- Browser
- Download file 58.6 kB
-
https://huggingface.co/spaces/Opera8/tts10/resolve/main/templates/ideogram.html
- Command line
-
hf download hf://spaces/Opera8/tts10/templates/ideogram.html
-
curl -L -o ideogram.html https://huggingface.co/spaces/Opera8/tts10/resolve/main/templates/ideogram.html
58.6 kB
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>تولید تصویر با Ideogram 4</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap'); | |
| :root { | |
| --app-font: 'Vazirmatn', sans-serif; --app-bg: #F8F9FC; --panel-bg: #FFFFFF; | |
| --panel-border: #EAEFF7; --input-bg: #F6F8FB; --input-border: #E1E7EF; | |
| --text-primary: #1A202C; --text-secondary: #626F86; --text-tertiary: #8A94A6; | |
| --accent-primary: #4A6CFA; --accent-primary-hover: #3553D6; --accent-primary-glow: rgba(74, 108, 250, 0.25); | |
| --accent-secondary: #0FD4A8; --accent-secondary-hover: #0DA986; --accent-secondary-glow: rgba(15, 212, 168, 0.2); | |
| --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03); --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04); | |
| --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05); | |
| --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05); | |
| --radius-card: 24px; --radius-btn: 14px; --radius-input: 12px; | |
| --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } | |
| @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } | |
| @keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } | |
| @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } | |
| @keyframes satellite-pulse-1 { from { transform: scale(0.7) translateX(-50%); opacity: 0.6; } to { transform: scale(1.1) translateX(-50%); opacity: 1; } } | |
| @keyframes satellite-pulse-2 { from { transform: scale(0.7) translateY(-50%); opacity: 0.6; } to { transform: scale(1.1) translateY(-50%); opacity: 1; } } | |
| @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } | |
| @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--app-font); direction: rtl; background-color: var(--app-bg); | |
| color: var(--text-primary); font-size: 16px; line-height: 1.8; margin: 0; | |
| padding: 2.5rem 1rem; min-height: 100vh; display: flex; justify-content: center; | |
| align-items: flex-start; overflow-x: hidden; | |
| background-image: radial-gradient(var(--text-tertiary) 0.5px, transparent 0.5px); | |
| background-size: 20px 20px; background-position: -10px -10px; | |
| } | |
| .app-container { max-width: 680px; width: 95%; margin: 0 auto; } | |
| .app-header { padding: 0.5rem 0 2.5rem 0; text-align: center; margin-bottom: 1.5rem; animation: fadeIn 0.8s 0.2s ease-out backwards; } | |
| .app-header h1 { font-size: 2.5em; font-weight: 900; margin: 0 0 0.8rem 0; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px; } | |
| .app-header p { font-size: 1.05em; color: var(--text-secondary); margin-top: 0; opacity: 0.9; font-weight: 400; line-height: 1.7; } | |
| .main-content { position:relative; padding: 3rem; background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); animation: fadeIn 0.8s 0.4s ease-out backwards; } | |
| .form-group { margin-bottom: 2.2rem; } | |
| label { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--text-primary); font-size: 1.1em; margin-bottom: 1rem; } | |
| label .label-icon { width: 24px; height: 24px; color: var(--accent-primary); } | |
| textarea, input[type="number"] { | |
| width: 100%; padding: 1.1rem; border: 2px solid var(--input-border); border-radius: var(--radius-input); | |
| font-size: 1.05em; box-sizing: border-box; background-color: var(--input-bg); font-family: var(--app-font); | |
| color: var(--text-primary); transition: var(--transition-smooth); resize: vertical; | |
| } | |
| textarea:focus, input[type="number"]:focus { | |
| outline: none; border-color: var(--accent-primary); background-color: #fff; | |
| box-shadow: 0 0 12px var(--accent-primary-glow); | |
| } | |
| .presets-container { display: flex; gap: 10px; margin-top: 0.8rem; flex-wrap: wrap; } | |
| .ratio-preset-btn { | |
| padding: 8px 16px; border: 1px solid var(--input-border); border-radius: var(--radius-input); | |
| background: var(--input-bg); font-family: var(--app-font); font-size: 0.85em; cursor: pointer; | |
| transition: var(--transition-smooth); font-weight: 600; color: var(--text-secondary); | |
| } | |
| .ratio-preset-btn:hover { background: var(--panel-border); color: var(--text-primary); } | |
| .ratio-preset-btn.active { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); } | |
| .generate-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 1.1rem 1.5rem; font-size: 1.25em; font-weight: 800; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 12px -3px var(--accent-primary-glow), 0 6px 12px -3px var(--accent-secondary-glow); } | |
| .generate-btn:hover:not(:disabled) { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px -4px var(--accent-primary-glow), 0 8px 20px -4px var(--accent-secondary-glow); } | |
| .generate-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; color: var(--text-secondary); transform: none; } | |
| .generate-btn .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none;} | |
| .output-section { margin-top: 3rem; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 220px; position: relative; box-sizing: border-box; padding: 2rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth); } | |
| .output-section.has-content { background-color: var(--panel-bg); border: 1px solid var(--panel-border); box-shadow: var(--shadow-lg); padding: 1rem; min-height: auto; } | |
| .status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; line-height: 1.9; } | |
| .loading-animation-wrapper { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem; width: 100%; } | |
| .orbital-loader { width: 110px; height: 110px; position: relative; animation: rotate-loader-orbital 10s linear infinite; } | |
| .orbit { position: absolute; top: 50%; left: 50%; border: 2px dashed rgba(74, 108, 250, 0.35); border-radius: 50%; transform-origin: center center; } | |
| .orbit:nth-child(1) { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; animation: orbit-spin 3.8s linear infinite; } | |
| .orbit:nth-child(2) { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; animation: orbit-spin 4.8s linear infinite reverse; } | |
| .orbit .satellite { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: var(--accent-primary); box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary); } | |
| .orbit:nth-child(1) .satellite { top: 50%; left: -5px; background-color: var(--accent-secondary); animation: satellite-pulse-2 1.4s 0.2s ease-in-out infinite alternate; } | |
| .orbit:nth-child(2) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-1 1.4s 0.4s ease-in-out infinite alternate;} | |
| .loading-text { font-size: 1.2em; font-weight: 700; color: var(--text-primary); text-align: center; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } | |
| #result-content { display: none; width: 100%; text-align: center; animation: fadeIn 0.5s ease-out; } | |
| #result-content h2 { color: var(--text-primary); border-bottom: 2px solid var(--panel-border); padding-bottom: 1rem; margin-bottom: 1rem; font-size: 1.5em; } | |
| #result-image { max-width: 100%; border-radius: var(--radius-card); border: 2px solid var(--accent-secondary); padding: 5px; box-shadow: var(--shadow-lg); cursor: pointer; transition: transform 0.2s ease; } | |
| #result-image:hover { transform: scale(1.02); } | |
| #result-content a.download-btn { | |
| display: none; align-items: center; justify-content: center; gap: 10px; | |
| margin-top: 1.5rem; padding: 0.9rem 1.8rem; font-size: 1.1em; font-weight: 700; | |
| background: linear-gradient(95deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); | |
| color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; | |
| transition: var(--transition-smooth); | |
| box-shadow: 0 5px 10px -2px var(--accent-primary-glow), 0 5px 10px -2px var(--accent-secondary-glow); | |
| text-decoration: none; | |
| } | |
| #result-content a.download-btn:hover { | |
| transform: translateY(-4px) scale(1.03); | |
| box-shadow: 0 7px 18px -3px var(--accent-primary-glow), 0 7px 18px -3px var(--accent-secondary-glow); | |
| } | |
| #result-content a.download-btn svg { width: 20px; height: 20px; } | |
| .prompt-box { | |
| display: none; background-color: #2c3e50; color: #ecf0f1; padding: 1.5rem; | |
| border-radius: var(--radius-input); margin-top: 2rem; font-size: 0.9em; | |
| text-align: left; direction: ltr; overflow-x: auto; animation: fadeIn 0.5s ease-out; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .prompt-box h3 { margin-top: 0; color: #f1c40f; font-size: 1.1em; font-family: var(--app-font); direction: rtl; text-align: right; } | |
| .status-message.error { color: #c53030; font-weight: 600; } | |
| :root { | |
| --guide-bg: rgba(255, 255, 255, 0.98); | |
| --guide-border: rgba(102, 126, 234, 0.2); | |
| --guide-text-title: #2d3748; | |
| --guide-text-body: #4a5568; | |
| --guide-accent: #667eea; | |
| --primary-gradient-guide: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --success-gradient-guide: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%); | |
| --radius-md-guide: 12px; | |
| --radius-lg-guide: 20px; | |
| } | |
| .ip-reset-guide-container { | |
| text-align: right; background: var(--guide-bg); backdrop-filter: blur(10px); padding: 40px; border-radius: var(--radius-lg-guide); | |
| box-shadow: var(--shadow-xl); border: 1px solid var(--guide-border); animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; | |
| width: 100%; position: relative; overflow: hidden; box-sizing: border-box; | |
| } | |
| .ip-reset-guide-container::before { | |
| content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--primary-gradient-guide); | |
| } | |
| .guide-header { display: flex; align-items: center; margin-bottom: 30px; } | |
| .guide-header-icon { width: 60px; height: 60px; margin-left: 20px; animation: float 3s ease-in-out infinite; } | |
| .guide-header h2 { font-size: 1.5rem; color: var(--guide-text-title); font-weight: 700; margin: 0; } | |
| .guide-header p { color: var(--guide-text-body); font-size: 0.8rem; margin-top: 5px; margin-bottom: 0; } | |
| .guide-content { font-size: 0.95rem; color: var(--guide-text-body); line-height: 1.8; } | |
| .info-card { background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: var(--radius-md-guide); padding: 20px; margin: 20px 0; position: relative; overflow: hidden; } | |
| .info-card p { font-size: 0.85rem; line-height: 1.7; margin: 0; } | |
| .info-card::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--primary-gradient-guide); } | |
| .info-card-header { display: flex; align-items: center; margin-bottom: 12px; } | |
| .info-card-icon { width: 24px; height: 24px; margin-left: 12px; } | |
| .info-card-title { font-weight: 600; color: var(--guide-text-title); font-size: 1rem; } | |
| .summary-section { margin-top: 25px; padding: 20px; border-radius: var(--radius-md-guide); background: linear-gradient(135deg, #56ab2f15 0%, #a8e06315 100%); border: 1px solid rgba(86, 171, 47, 0.2); position: relative; overflow: hidden; } | |
| .summary-section::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--success-gradient-guide); } | |
| .summary-header { display: flex; align-items: center; margin-bottom: 10px; } | |
| .summary-icon { width: 24px; height: 24px; margin-left: 10px; } | |
| .summary-title { font-weight: 600; color: #2f5a33; font-size: 1rem; } | |
| .summary-text { color: #2f5a33; font-size: 0.9rem; line-height: 1.7; } | |
| .video-button-container { text-align: center; margin: 25px 0 10px 0; } | |
| .elegant-video-button { display: inline-flex; align-items: center; justify-content: center; padding: 7px 18px; background-color: #f0f2f5; color: var(--guide-accent); border: 1px solid #e2e8f0; text-decoration: none; border-radius: var(--radius-md-guide); font-weight: 600; font-size: 0.8rem; cursor: pointer; font-family: inherit; transition: all 0.3s ease; box-shadow: var(--shadow-sm); } | |
| .elegant-video-button:hover { background: var(--primary-gradient-guide); color: white; border-color: transparent; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3); } | |
| .elegant-video-button-icon { width: 16px; height: 16px; margin-left: 8px; fill: currentColor; } | |
| .guide-actions { display: flex; gap: 15px; margin-top: 30px; padding-top: 25px; border-top: 1px solid #e2e8f0; } | |
| .action-button { padding: 14px 24px; border: none; border-radius: var(--radius-md-guide); font-size: 0.95rem; font-weight: 600; cursor: pointer; flex: 1; transition: var(--transition-smooth); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } | |
| .action-button-icon { width: 20px; height: 20px; margin-right: 0; margin-left: 8px; } | |
| .back-button { background: white; color: var(--guide-text-body); border: 2px solid #e2e8f0; flex: 0.4; } | |
| .back-button:hover { background: #f7fafc; border-color: var(--guide-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); } | |
| .retry-button { background: var(--primary-gradient-guide); color: white; flex: 0.6; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } | |
| .retry-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); } | |
| .fullscreen-modal { | |
| display: none; position: fixed; z-index: 1000; top: 0; left: 0; | |
| width: 100%; height: 100%; background-color: rgba(26, 32, 44, 0.9); | |
| justify-content: center; align-items: center; animation: fadeIn 0.3s ease; | |
| } | |
| .fullscreen-image { | |
| max-width: 90%; max-height: 90%; object-fit: contain; | |
| border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); | |
| } | |
| .close-fullscreen { | |
| position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; | |
| font-weight: bold; cursor: pointer; transition: color 0.2s, transform 0.2s; | |
| } | |
| .close-fullscreen:hover { color: var(--text-tertiary); transform: scale(1.1); } | |
| #subscription-status-badge { display: none; padding: 6px 16px; border-radius: 20px; font-size: 0.9em; font-weight: 700; margin-top: 1.25rem; letter-spacing: 0.5px; animation: fadeIn 0.6s 0.5s ease-out backwards; user-select: none; transition: transform 0.2s ease, opacity 0.2s ease; } | |
| #subscription-status-badge.free-badge { background: linear-gradient(45deg, #6c757d, #495057); color: white; box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3); cursor: pointer; } | |
| #subscription-status-badge.free-badge:hover { transform: scale(1.05); opacity: 0.95; } | |
| #subscription-status-badge.paid-badge { background: linear-gradient(45deg, #FFC107, #ffca2c); color: #333; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3); } | |
| .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(26, 32, 44, 0.5); backdrop-filter: blur(8px); z-index: 1000; animation: modal-fade-in 0.3s ease-out; } | |
| .modal-overlay.active { display: flex; align-items: center; justify-content: center; } | |
| .modal-content { background-color: var(--panel-bg); padding: 2.5rem; border-radius: var(--radius-card); box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); width: 90%; max-width: 450px; text-align: center; position: relative; animation: modal-zoom-in 0.3s cubic-bezier(0.4, 0, 0.2, 1); } | |
| .modal-icon { width: 60px; height: 60px; margin: 0 auto 1.5rem; background: rgba(74, 108, 250, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-primary); } | |
| .modal-icon svg { width: 32px; height: 32px; } | |
| .modal-title { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1rem 0; } | |
| .modal-text { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; margin: 0 0 2rem 0; } | |
| .modal-buttons { display: flex; gap: 1rem; width: 100%; } | |
| .modal-button { flex: 1; padding: 0.8rem 1.5rem; background: var(--accent-primary); color: white; border: none; border-radius: var(--radius-btn); font-family: var(--app-font); font-weight: 600; font-size: 1rem; cursor: pointer; transition: var(--transition-smooth); } | |
| .modal-button:hover { background: var(--accent-primary-hover); transform: translateY(-2px); } | |
| .modal-button.secondary { background: var(--input-bg); color: var(--text-secondary); border: 1px solid var(--input-border); } | |
| .modal-button.secondary:hover { background-color: var(--panel-border); color: var(--text-primary); } | |
| @media (max-width: 600px) { | |
| body { padding: 1.5rem 1rem; } | |
| .main-content { padding: 1.5rem; } | |
| .app-header h1 { font-size: 2em; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <header class="app-header"> | |
| <h1>تولید تصویر با Ideogram 4</h1> | |
| <p>دستور متنی یا ایده خود را بنویسید تا هوش مصنوعی تصویر شما را طراحی کرده و با رزولوشن بالا ارتقا دهد.</p> | |
| <div id="subscription-status-badge" style="display:none; margin-top: 1.25rem;"></div> | |
| </header> | |
| <main class="main-content" id="main-content"> | |
| <form onsubmit="return false;"> | |
| <div class="form-group"> | |
| <label for="prompt"> | |
| <span class="label-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> | |
| </svg> | |
| </span> | |
| پرامپت و دستور متنی شما (فارسی یا انگلیسی): | |
| </label> | |
| <textarea id="prompt" rows="4" placeholder="مثال: یک گربه بانمک با کلاه جادوگری کوچک در حال خواندن کتاب وردها..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| <span class="label-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> | |
| <line x1="9" y1="3" x2="9" y2="21"></line> | |
| </svg> | |
| </span> | |
| نسبت ابعاد تصویر: | |
| </label> | |
| <div class="presets-container"> | |
| <button type="button" class="ratio-preset-btn active" data-width="1024" data-height="1024">۱:۱ مربع (1024x1024)</button> | |
| <button type="button" class="ratio-preset-btn" data-width="1280" data-height="720">۱۶:۹ افقی (1280x720)</button> | |
| <button type="button" class="ratio-preset-btn" data-width="720" data-height="1280">۹:۱۶ عمودی (720x1280)</button> | |
| </div> | |
| <div style="display: flex; gap: 15px; margin-top: 1.2rem;"> | |
| <div style="flex: 1;"> | |
| <span style="font-size: 0.85em; font-weight: 700; color: var(--text-secondary); display:block; margin-bottom:0.5rem;">عرض (Width):</span> | |
| <input type="number" id="width" value="1024" step="64" min="512" max="1536"> | |
| </div> | |
| <div style="flex: 1;"> | |
| <span style="font-size: 0.85em; font-weight: 700; color: var(--text-secondary); display:block; margin-bottom:0.5rem;">ارتفاع (Height):</span> | |
| <input type="number" id="height" value="1024" step="64" min="512" max="1536"> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="submit" id="submit-btn" class="generate-btn"> | |
| <span class="btn-text">✨ تصویر من را بساز!</span> | |
| <div class="spinner"></div> | |
| </button> | |
| </form> | |
| <div id="output-section" class="output-section"> | |
| <div id="status-message" class="status-message">تصویر باکیفیت شده شما در اینجا نمایش داده خواهد شد.</div> | |
| <div id="loading-animation" class="loading-animation-wrapper"> | |
| <div class="orbital-loader"> | |
| <div class="orbit"><div class="satellite"></div></div> | |
| <div class="orbit"><div class="satellite"></div></div> | |
| </div> | |
| <p id="loading-text" class="loading-text"></p> | |
| </div> | |
| <div id="result-content"> | |
| <h2>تصویر نهایی باکیفیت شده:</h2> | |
| <img id="result-image" src="#" alt="تصویر تولید شده توسط Ideogram 4" /> | |
| <div id="upscaled-info-strip" style="display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:10px; margin-bottom:15px;"></div> | |
| <a href="#" id="download-btn" class="download-btn"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> | |
| <polyline points="7 10 12 15 17 10"></polyline> | |
| <line x1="12" y1="15" x2="12" y2="3"></line> | |
| </svg> | |
| <span>دانلود تصویر باکیفیت</span> | |
| </a> | |
| <!-- کادر نمایش پرامپت ارتقا یافته توسط هوش مصنوعی --> | |
| <div id="enhancedPromptBox" class="prompt-box"> | |
| <h3>✨ جزئیات پرامپت بهینهسازی شده توسط سیستم:</h3> | |
| <div id="enhancedPromptText" style="direction: ltr; font-size: 0.9em; line-height: 1.6; text-align: left; color: #bdc3c7;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <div id="fullscreen-modal" class="fullscreen-modal"> | |
| <span id="close-fullscreen" class="close-fullscreen">×</span> | |
| <img id="fullscreen-image" class="fullscreen-image" src="#" alt="نمایش تمام صفحه"> | |
| </div> | |
| <!-- مودال اتمام اعتبار روزانه برای کاربران رایگان --> | |
| <div class="modal-overlay" id="limit-modal"> | |
| <div class="modal-content"> | |
| <div class="modal-icon" style="color: #FFC107; background: rgba(255, 193, 7, 0.1);"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="12" cy="12" r="10"></circle> | |
| <line x1="12" y1="9" x2="12" y2="13"></line> | |
| <line x1="12" y1="17" x2="12.01" y2="17"></line> | |
| </svg> | |
| </div> | |
| <h3 class="modal-title">محدودیت استفاده روزانه</h3> | |
| <p class="modal-text">کاربر گرامی، در نسخه رایگان شما مجاز به انجام روزانه <b>۱ تصویر جدید</b> هستید.<br><br>برای استفاده نامحدود، از این بخش و همه بخش های برنامه میتوانید حساب خود را ارتقا دهید.</p> | |
| <div class="modal-buttons"> | |
| <button class="modal-button secondary" id="close-limit-modal">بستن</button> | |
| <button class="modal-button" id="upgrade-limit-modal" style="background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);">⭐️ ارتقا به نسخه نامحدود</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module"> | |
| const promptInput = document.getElementById('prompt'); | |
| const widthInput = document.getElementById('width'); | |
| const heightInput = document.getElementById('height'); | |
| const presetBtns = document.querySelectorAll('.ratio-preset-btn'); | |
| const submitBtn = document.getElementById('submit-btn'); | |
| const btnText = submitBtn.querySelector('.btn-text'); | |
| const btnSpinner = submitBtn.querySelector('.spinner'); | |
| const outputSection = document.getElementById('output-section'); | |
| const statusMessage = document.getElementById('status-message'); | |
| const loadingAnimation = document.getElementById('loading-animation'); | |
| const loadingText = document.getElementById('loading-text'); | |
| const resultContent = document.getElementById('result-content'); | |
| const resultImage = document.getElementById('result-image'); | |
| const downloadBtn = document.getElementById('download-btn'); | |
| const enhancedPromptBox = document.getElementById('enhancedPromptBox'); | |
| const enhancedPromptText = document.getElementById('enhancedPromptText'); | |
| const fullscreenModal = document.getElementById('fullscreen-modal'); | |
| const fullscreenImage = document.getElementById('fullscreen-image'); | |
| const closeFullscreenBtn = document.getElementById('close-fullscreen'); | |
| let currentRunId = ''; | |
| let pollInterval = null; | |
| let activePollRunId = ''; | |
| let timeoutTimer = null; | |
| let isUpscaleDispatched = false; | |
| // متغیرهای هویتسنجی و وضعیت پرداخت | |
| let userSubscriptionStatus = 'free'; | |
| let userFingerprint = null; | |
| const PREMIUM_PAGE_ID = '1149636'; | |
| // دکمههای ابعاد پیشفرض | |
| presetBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| presetBtns.forEach(b => b.classList.remove('active')); | |
| btn.classList.add('active'); | |
| widthInput.value = btn.dataset.width; | |
| heightInput.value = btn.dataset.height; | |
| }); | |
| }); | |
| // ایجاد اثر انگشت مرورگر | |
| async function getBrowserFingerprint() { | |
| const components = [navigator.userAgent, navigator.language, screen.width + 'x' + screen.height, new Date().getTimezoneOffset(), "canvas-test"]; | |
| const fingerprintString = components.join('---'); | |
| let hash = 0; | |
| for (let i = 0; i < fingerprintString.length; i++) { | |
| hash = ((hash << 5) - hash) + fingerprintString.charCodeAt(i); | |
| hash |= 0; | |
| } | |
| return 'fp_' + Math.abs(hash).toString(16); | |
| } | |
| function isUserPaid(userObject) { | |
| return userObject?.isLogin && userObject.accessible_pages?.some(p => p == PREMIUM_PAGE_ID); | |
| } | |
| // بروزرسانی بخش گرافیکی هدر | |
| function updateUIForSubscriptionStatus(status) { | |
| userSubscriptionStatus = status; | |
| const subscriptionBadge = document.getElementById('subscription-status-badge'); | |
| if (!subscriptionBadge) return; | |
| if (status === 'paid') { | |
| subscriptionBadge.innerHTML = 'نسخه نامحدود'; | |
| subscriptionBadge.className = 'paid-badge'; | |
| subscriptionBadge.onclick = null; | |
| subscriptionBadge.style.cursor = 'default'; | |
| } else { | |
| subscriptionBadge.innerHTML = 'نسخه رایگان (ارتقا)'; | |
| subscriptionBadge.className = 'free-badge'; | |
| subscriptionBadge.style.cursor = 'pointer'; | |
| subscriptionBadge.onclick = (e) => { | |
| e.preventDefault(); | |
| parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM' }, '*'); | |
| }; | |
| } | |
| subscriptionBadge.style.display = 'inline-block'; | |
| } | |
| // دریافت تعداد استفادههای روز جاری | |
| function getDailyUsage() { | |
| if (!userFingerprint) return 0; | |
| const today = new Date().toDateString(); | |
| const storedDate = localStorage.getItem(`ideogram_date_${userFingerprint}`); | |
| if (storedDate !== today) { | |
| return 0; | |
| } | |
| return parseInt(localStorage.getItem(`ideogram_count_${userFingerprint}`) || '0', 10); | |
| } | |
| // افزایش شمارنده استفاده روزانه | |
| function incrementDailyUsage() { | |
| if (!userFingerprint) return; | |
| const today = new Date().toDateString(); | |
| localStorage.setItem(`ideogram_date_${userFingerprint}`, today); | |
| const currentUsage = getDailyUsage(); | |
| localStorage.setItem(`ideogram_count_${userFingerprint}`, (currentUsage + 1).toString()); | |
| } | |
| // رویدادهای مودال اتمام اعتبار روزانه | |
| document.getElementById('close-limit-modal').addEventListener('click', () => { | |
| document.getElementById('limit-modal').classList.remove('active'); | |
| }); | |
| document.getElementById('upgrade-limit-modal').addEventListener('click', () => { | |
| parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM' }, '*'); | |
| }); | |
| document.getElementById('limit-modal').addEventListener('click', (e) => { | |
| if (e.target === document.getElementById('limit-modal')) { | |
| document.getElementById('limit-modal').classList.remove('active'); | |
| } | |
| }); | |
| // دریافت ارتباطات از سمت والد | |
| window.addEventListener('message', (event) => { | |
| if (event.data?.type === 'USER_DATA_RESPONSE') { | |
| if (event.data.error || !event.data.payload) { | |
| updateUIForSubscriptionStatus('free'); | |
| return; | |
| } | |
| try { | |
| const userObject = JSON.parse(event.data.payload); | |
| updateUIForSubscriptionStatus(isUserPaid(userObject) ? 'paid' : 'free'); | |
| } catch (e) { | |
| updateUIForSubscriptionStatus('free'); | |
| } | |
| } | |
| }); | |
| const GPU_QUOTA_ERROR_HTML = ` | |
| <div class="ip-reset-guide-container"> | |
| <div class="guide-header"><svg class="guide-header-icon" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs><lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color: #667eea; stop-opacity: 1;"></stop><stop offset="100%" style="stop-color: #764ba2; stop-opacity: 1;"></stop></lineargradient></defs> <circle cx="50" cy="50" r="45" fill="url(#grad1)" opacity="0.1"></circle><circle cx="50" cy="50" r="35" fill="none" stroke="url(#grad1)" stroke-width="2" opacity="0.3"></circle><path d="M35 50 L45 60 L65 40" stroke="url(#grad1)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="65" cy="35" r="8" fill="#fee140"></circle><path d="M62 35 L68 35 M65 32 L65 38" stroke="white" stroke-width="2" stroke-linecap="round"></path> </svg> | |
| <div> | |
| <h2>یک قدم تا ساخت تصاویر جدید</h2> | |
| <p>نیازمند تغییر نقطه دستیابی</p> | |
| </div> | |
| </div> | |
| <div class="guide-content"> | |
| <div class="info-card"> | |
| <div class="info-card-header"><svg class="info-card-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="#667eea" opacity="0.2"></path><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> <span class="info-card-title">راه حل سریع</span></div> | |
| <p>طبق ویدیو آموزشی پایین بین نقطه دستیابی جابجا شوید تلاش مجدد بزنید تا تصاویر مجدداً تولید بشه.</p> | |
| </div> | |
| <div class="summary-section"> | |
| <div class="summary-header"><svg class="summary-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="#56ab2f" opacity="0.2"></circle><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" stroke="#56ab2f" stroke-width="2"></path><path d="M9 12l2 2 4-4" stroke="#56ab2f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> <span class="summary-title">خلاصه راهنما</span></div> | |
| <div class="summary-text">هربار که این صفحه را مشاهده کردید: از اینترنت سیمکارت استفاده کنید، VPN را خاموش کرده و طبق ویدیو آموزشی پایین نقطه دستیابی رو تغییر دهید. «تلاش مجدد» کلیک کنید. با این روش ساده میتوانید به صورت نامحدود تصویر بسازید! ☘️</div> | |
| </div> | |
| <div class="video-button-container"><button id="tutorialLinkBtn" class="elegant-video-button"> <svg class="elegant-video-button-icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg> <span>دیدن ویدیو آموزشی استفاده نامحدود</span> </button></div> | |
| </div> | |
| <div class="guide-actions"> | |
| <button class="action-button back-button"> <svg class="action-button-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> <span>بازگشت</span> </button> | |
| <button class="action-button retry-button"> <svg class="action-button-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23 4v6h-6M1 20v-6h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> <span>تلاش مجدد</span> </button> | |
| </div> | |
| </div>`; | |
| const setUIState = (state) => { | |
| submitBtn.disabled = state === 'loading'; | |
| if (state === 'loading') { | |
| btnText.style.display = 'none'; | |
| btnSpinner.style.display = 'inline-block'; | |
| outputSection.classList.remove('has-content'); | |
| outputSection.style.padding = ''; | |
| outputSection.style.border = ''; | |
| outputSection.style.background = ''; | |
| statusMessage.style.display = 'none'; | |
| statusMessage.classList.remove('error'); | |
| statusMessage.innerHTML = 'تصویر شما در حال طراحی است، لطفاً شکیبا باشید...'; | |
| resultContent.style.display = 'none'; | |
| enhancedPromptBox.style.display = 'none'; | |
| loadingAnimation.style.display = 'flex'; | |
| } else { | |
| btnText.style.display = 'inline-block'; | |
| btnSpinner.style.display = 'none'; | |
| btnText.textContent = "✨ تصویر من را بساز!"; | |
| if (state !== 'idle') { | |
| loadingAnimation.style.display = 'none'; | |
| outputSection.classList.add('has-content'); | |
| } | |
| } | |
| }; | |
| const hideGpuErrorGuide = () => { | |
| statusMessage.innerHTML = 'تصویر باکیفیت شده شما در اینجا نمایش داده خواهد شد.'; | |
| statusMessage.classList.remove('error'); | |
| outputSection.classList.remove('has-content'); | |
| outputSection.style.padding = ''; | |
| outputSection.style.border = ''; | |
| outputSection.style.background = ''; | |
| }; | |
| const handleTimeout = () => { | |
| if (pollInterval) { | |
| clearInterval(pollInterval); | |
| pollInterval = null; | |
| } | |
| activePollRunId = ''; | |
| setUIState('error'); | |
| statusMessage.style.display = 'block'; | |
| statusMessage.classList.add('error'); | |
| statusMessage.innerHTML = ` | |
| <div style="padding: 1.5rem; text-align: center;"> | |
| <p style="font-weight: 700; font-size: 1.1em; color: #c53030; margin-bottom: 1.5rem; line-height: 1.8;"> | |
| پردازش بیش از حد طولانی شد ممکن است سرور شلوغ باشد میتوانید مجدداً تلاش کنید | |
| </p> | |
| <button type="button" class="action-button retry-button" id="timeout-retry-btn" style="margin: 0 auto; max-width: 200px; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: white; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; padding: 12px 24px; border-radius: var(--radius-btn); cursor: pointer; font-family: var(--app-font); font-weight: 700; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);"> | |
| <svg class="action-button-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 20px; height: 20px; margin: 0; stroke: currentColor;"><path d="M23 4v6h-6M1 20v-6h6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> | |
| <span>تلاش مجدد</span> | |
| </button> | |
| </div> | |
| `; | |
| document.getElementById('timeout-retry-btn').addEventListener('click', () => { | |
| hideGpuErrorGuide(); | |
| submitBtn.click(); | |
| }); | |
| }; | |
| const handleErrorState = (error) => { | |
| if (timeoutTimer) { | |
| clearTimeout(timeoutTimer); | |
| timeoutTimer = null; | |
| } | |
| setUIState('error'); | |
| statusMessage.style.display = 'block'; | |
| statusMessage.classList.add('error'); | |
| const errorMessage = String(error.message || error).toLowerCase(); | |
| if (errorMessage.includes("gpu") || errorMessage.includes("quota") || errorMessage.includes("exceeded") || errorMessage.includes("limit") || errorMessage.includes("capacity")) { | |
| outputSection.style.padding = '0'; | |
| outputSection.style.border = 'none'; | |
| outputSection.style.background = 'transparent'; | |
| statusMessage.innerHTML = GPU_QUOTA_ERROR_HTML; | |
| statusMessage.querySelector('.back-button').addEventListener('click', hideGpuErrorGuide); | |
| statusMessage.querySelector('.retry-button').addEventListener('click', () => { | |
| submitBtn.click(); | |
| }); | |
| statusMessage.querySelector('#tutorialLinkBtn').addEventListener('click', () => { | |
| const tutorialUrl = '#/nav/online/news/getSingle/1149635/eyJpdiI6IjhHVGhPQWJwb3E0cjRXbnFWTW5BaUE9PSIsInZhbHVlIjoiS1V0dTdvT21wbXAwSXZaK1RCTG1pVXZqdlFJa1hXV1RKa2FLem9zU3pXMjd5MmlVOGc2YWY0NVdNR3h3Smp1aSIsIm1hYyI6IjY1NTA5ZDYzMjAzMTJhMGQyMWQ4NjA4ZDgyNGZjZDVlY2MyNjdiMjA2NWYzOWRjY2M4ZmVjYWRlMWNlMWQ3ODEiLCJ0YWciOiIifQ==/21135210'; | |
| parent.postMessage({ type: 'NAVIGATE_TO_URL', url: tutorialUrl }, '*'); | |
| }); | |
| } else { | |
| statusMessage.innerHTML = `<div style="padding: 1rem;"><b>خطای ارتباط!</b><br>مشکلی در برقراری ارتباط با سرور پیش آمده است. لطفاً چند لحظه دیگر امتحان کنید.</div>`; | |
| } | |
| }; | |
| // دریافت جزییات و فراداده JSON ساخته شده توسط هوش مصنوعی | |
| async function fetchPromptMetadata(runId) { | |
| try { | |
| const response = await fetch(`/static/images/${runId}_meta.json`); | |
| if (response.ok) { | |
| const parsedJson = await response.json(); | |
| let displayHtml = ""; | |
| if (parsedJson.high_level_description) { | |
| displayHtml += `<p style="margin-top: 0; color: #f1c40f; font-weight: bold; font-family: var(--app-font); direction: rtl; text-align: right;">توضیحات پیشرفته:</p>`; | |
| displayHtml += `<p style="margin-bottom: 1.5rem; color: #ecf0f1; font-family: var(--app-font); direction: rtl; text-align: right; line-height: 1.7;">${parsedJson.high_level_description}</p>`; | |
| } | |
| displayHtml += `<p style="color: #bdc3c7; font-weight: bold;">Raw Structural JSON Output:</p>`; | |
| displayHtml += `<pre style="white-space: pre-wrap; font-family: monospace; font-size: 12px; margin: 0; background: rgba(0,0,0,0.2); padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05);">${JSON.stringify(parsedJson, null, 2)}</pre>`; | |
| enhancedPromptText.innerHTML = displayHtml; | |
| enhancedPromptBox.style.display = "block"; | |
| } | |
| } catch (e) { | |
| console.warn("Could not fetch metadata:", e); | |
| } | |
| } | |
| // ارسال اتوماتیک درخواست ارتقای کیفیت به اکشن گیتهاب جدید و مجزا | |
| async function dispatchUpscaleAction(runId) { | |
| isUpscaleDispatched = true; | |
| loadingText.textContent = "در حال انتقال تصویر به موتور CodeFormer..."; | |
| try { | |
| const upscalePayload = `VOICECONFIG_UPSCALE_runId_${runId}`; | |
| const response = await fetch('/api/generate', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| prompt: upscalePayload, | |
| width: 1024, | |
| height: 1024, | |
| action_name: 'upscale' // اجرای فایل yml/upscale.py روی رانر مستقل جدید | |
| }) | |
| }); | |
| const data = await response.json(); | |
| if (data.status === 'success') { | |
| // تغییر هدف مانیتورینگ پولینگ به فایل تصویر نهایی باکیفیت شده | |
| startPollingStageTwo(runId); | |
| } else { | |
| throw new Error('خطا در ارجاع به اکشن ارتقا کیفیت.'); | |
| } | |
| } catch (error) { | |
| console.error("Upscale dispatch error:", error); | |
| handleErrorState(error); | |
| } | |
| } | |
| // مرحله اول: مانیتورینگ تولید تصویر خام موقت | |
| function startPollingStageOne(runId) { | |
| if (pollInterval) clearInterval(pollInterval); | |
| activePollRunId = runId; | |
| let pollSeconds = 0; | |
| pollInterval = setInterval(async () => { | |
| if (activePollRunId !== runId) { | |
| clearInterval(pollInterval); | |
| return; | |
| } | |
| pollSeconds += 4; | |
| loadingText.textContent = `در حال پردازش و تولید تصویر اولیه با Ideogram 4... (${pollSeconds} ثانیه)`; | |
| try { | |
| // بررسی اینکه آیا عکس خام تولید شده است یا خیر | |
| const imgCheck = await fetch(`/static/images/${runId}_raw.png`, { method: 'HEAD' }); | |
| if (activePollRunId !== runId) return; | |
| if (imgCheck.ok) { | |
| clearInterval(pollInterval); | |
| // اجرای مرحله دوم: ارسال به CodeFormer روی رانر مجزا | |
| dispatchUpscaleAction(runId); | |
| return; | |
| } | |
| // نظارت بر وضعیت جاری در گیتهاب | |
| const statusRes = await fetch(`/api/status/${runId}`); | |
| if (activePollRunId !== runId) return; | |
| const statusData = await statusRes.json(); | |
| if (statusData.status === 'ready' && !imgCheck.ok) { | |
| // در صورت بروز خطا در گیتهاب اول | |
| clearInterval(pollInterval); | |
| handleErrorState(new Error("GPU quota exceeded")); | |
| } | |
| } catch (e) { | |
| console.error("Error polling stage 1:", e); | |
| } | |
| }, 4000); | |
| } | |
| // مرحله دوم: مانیتورینگ ارتقای کیفیت در اکشن مستقل جدید | |
| function startPollingStageTwo(runId) { | |
| if (pollInterval) clearInterval(pollInterval); | |
| activePollRunId = runId; | |
| let pollSeconds = 0; | |
| pollInterval = setInterval(async () => { | |
| if (activePollRunId !== runId) { | |
| clearInterval(pollInterval); | |
| return; | |
| } | |
| pollSeconds += 4; | |
| loadingText.textContent = `در حال ارتقای کیفیت چهرهها و افزایش رزولوشن (فاکتور ۲)... (${pollSeconds} ثانیه)`; | |
| try { | |
| const imgCheck = await fetch(`/static/images/${runId}.png`, { method: 'HEAD' }); | |
| if (activePollRunId !== runId) return; | |
| if (imgCheck.ok) { | |
| if (timeoutTimer) { | |
| clearTimeout(timeoutTimer); | |
| timeoutTimer = null; | |
| } | |
| clearInterval(pollInterval); | |
| setUIState('success'); | |
| resultImage.src = `/static/images/${runId}.png`; | |
| downloadBtn.style.display = 'inline-flex'; | |
| resultContent.style.display = 'block'; | |
| // دریافت فراداده | |
| fetchPromptMetadata(runId); | |
| // نمایش سایز و ویژگیهای تصویر نهایی | |
| calculateAndShowSizeAsync(`/static/images/${runId}.png`, 'upscaled-info-strip'); | |
| if (userSubscriptionStatus !== 'paid') { | |
| incrementDailyUsage(); | |
| } | |
| return; | |
| } | |
| // بررسی وضعیت رانر دوم | |
| const statusRes = await fetch(`/api/status/${runId}`); | |
| if (activePollRunId !== runId) return; | |
| const statusData = await statusRes.json(); | |
| if (statusData.status === 'ready' && !imgCheck.ok) { | |
| clearInterval(pollInterval); | |
| handleErrorState(new Error("GPU quota exceeded")); | |
| } | |
| } catch (e) { | |
| console.error("Error polling stage 2:", e); | |
| } | |
| }, 4000); | |
| } | |
| function formatBytes(bytes, decimals = 2) { | |
| if (bytes === 0) return '0 بایت'; | |
| const k = 1024, dm = decimals < 0 ? 0 : decimals; | |
| const sizes = ['بایت', 'کیلوبایت', 'مگابایت']; | |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); | |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; | |
| } | |
| async function calculateAndShowSizeAsync(url, containerId) { | |
| try { | |
| const response = await fetch(url, { method: 'HEAD' }); | |
| if (!response.ok) return; | |
| const contentLength = response.headers.get('content-length'); | |
| if (contentLength) { | |
| const sizeInBytes = parseInt(contentLength, 10); | |
| const container = document.getElementById(containerId); | |
| if (container) { | |
| container.innerHTML = ` | |
| <div style="display:flex; align-items:center; gap:5px; font-size:0.8rem; font-weight:700; padding:5px 14px; border-radius:20px; background:linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.08)); color:#065F46; border:1px solid rgba(16, 185, 129, 0.3);"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:13px; height:13px;"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg> | |
| حجم فایل: ${formatBytes(sizeInBytes)} | |
| </div> | |
| <div style="display:flex; align-items:center; gap:5px; font-size:0.8rem; font-weight:700; padding:5px 14px; border-radius:20px; background:linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.08)); color:#065F46; border:1px solid rgba(16, 185, 129, 0.3);"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:13px; height:13px;"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg> | |
| رزولوشن بالا (فاکتور ۲) | |
| </div> | |
| `; | |
| } | |
| } | |
| } catch (err) { console.warn("امکان دریافت حجم تصویر فراهم نشد:", err); } | |
| } | |
| submitBtn.addEventListener('click', async () => { | |
| const promptValue = promptInput.value.trim(); | |
| const widthValue = parseInt(widthInput.value) || 1024; | |
| const heightValue = parseInt(heightInput.value) || 1024; | |
| if (!promptValue) { | |
| alert("لطفاً ابتدا ایده یا توصیف تصویر خود را بنویسید."); | |
| return; | |
| } | |
| // بررسی محدودیت استفاده روزانه برای کاربران رایگان | |
| if (userSubscriptionStatus !== 'paid') { | |
| const usage = getDailyUsage(); | |
| if (usage >= 1) { | |
| document.getElementById('limit-modal').classList.add('active'); | |
| return; | |
| } | |
| } | |
| if (pollInterval) { | |
| clearInterval(pollInterval); | |
| pollInterval = null; | |
| } | |
| if (timeoutTimer) { | |
| clearTimeout(timeoutTimer); | |
| timeoutTimer = null; | |
| } | |
| activePollRunId = ''; | |
| hideGpuErrorGuide(); | |
| isUpscaleDispatched = false; | |
| setUIState('loading'); | |
| currentRunId = 'swap' + Math.random().toString(36).substring(2, 14); | |
| // فعالسازی تایمر خطا (تنظیم شده بر روی ۱۰ دقیقه) | |
| timeoutTimer = setTimeout(() => { | |
| handleTimeout(); | |
| }, 600000); | |
| try { | |
| loadingText.textContent = "در حال تحلیل و ارسال ایده شما به سرور..."; | |
| // بستهبندی پرامپت فارسی در استاندارد Base64 جهت جلوگیری از ترجمه خودکار توسط مترجم گوگل سرور اصلی | |
| const b64Prompt = window.btoa(unescape(encodeURIComponent(promptValue))); | |
| const ideogramPayload = `VOICECONFIG_IDEOGRAM_width_${widthValue}_height_${heightValue}_prompt_${b64Prompt}`; | |
| const response = await fetch('/api/generate', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| prompt: ideogramPayload, | |
| width: widthValue, | |
| height: heightValue, | |
| action_name: 'ideogram' // فعالسازی فرآیند ideogram.py در پوشه yml | |
| }) | |
| }); | |
| const data = await response.json(); | |
| if (data.status === 'success') { | |
| // شروع مانیتورینگ مرحله اول (تولید تصویر خام) | |
| startPollingStageOne(data.run_id); | |
| } else { | |
| throw new Error(data.message || 'خطا در ثبت نوبت صف.'); | |
| } | |
| } catch (error) { | |
| console.error("An error occurred:", error); | |
| handleErrorState(error); | |
| } | |
| }); | |
| resultImage.addEventListener('click', () => { | |
| if (resultImage.src && resultImage.src !== window.location.href + '#') { | |
| fullscreenImage.src = resultImage.src; | |
| fullscreenModal.style.display = 'flex'; | |
| } | |
| }); | |
| const closeModal = () => { fullscreenModal.style.display = 'none'; }; | |
| closeFullscreenBtn.addEventListener('click', closeModal); | |
| fullscreenModal.addEventListener('click', (e) => { if (e.target === fullscreenModal) { closeModal(); } }); | |
| downloadBtn.addEventListener('click', async (event) => { | |
| event.preventDefault(); | |
| const imageUrl = resultImage.src; | |
| if (!imageUrl || imageUrl.endsWith('#')) return; | |
| const absoluteUrl = new URL(imageUrl, window.location.href).href; | |
| if (window.parent && window.parent !== window) { | |
| window.parent.postMessage({ type: 'DOWNLOAD_REQUEST', url: absoluteUrl }, '*'); | |
| } else { | |
| try { | |
| const response = await fetch(absoluteUrl); | |
| const blob = await response.blob(); | |
| const objectUrl = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = objectUrl; | |
| a.download = `ideogram-${Date.now()}.png`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(objectUrl); | |
| } catch (e) { | |
| console.error("Direct download failed:", e); | |
| alert("خطا در دانلود مستقیم فایل."); | |
| } | |
| } | |
| }); | |
| // اجرای فرآیند شناسایی هویت کاربر در زمان لود صفحه | |
| document.addEventListener('DOMContentLoaded', async () => { | |
| userFingerprint = await getBrowserFingerprint(); | |
| if (parent && parent !== window) { | |
| parent.postMessage({ type: 'REQUEST_USER_DATA' }, '*'); | |
| } else { | |
| updateUIForSubscriptionStatus('free'); | |
| } | |
| setUIState('idle'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |