| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>خلق تصاویر کارتونی با هوش مصنوعی</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); |
| --error-color: #e53e3e; --error-bg: #fed7d7; |
| --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); |
| |
| --igadlm-alpha-color-warning-bg: #FFFBEB; |
| --igadlm-alpha-color-warning-border: #FBBF24; |
| --igadlm-alpha-color-warning-text: #B45309; |
| |
| |
| --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; |
| |
| } |
| |
| @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 ripple { |
| 0% { top: 96px; left: 96px; width: 8px; height: 8px; opacity: 1; } |
| 100% { top: 0px; left: 0px; width: 200px; height: 200px; opacity: 0; } |
| } |
| |
| |
| @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); } |
| } |
| |
| |
| 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 0; min-height: 100vh; |
| display: flex; justify-content: center; align-items: flex-start; |
| 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: 92%; margin: 0 auto; } |
| .app-header { text-align: center; margin-bottom: 2.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; } |
| .main-content { 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: block; font-weight: 700; color: var(--text-primary); font-size: 1.1em; margin-bottom: 1rem; } |
| |
| .upload-area { border: 2px dashed var(--input-border); border-radius: var(--radius-input); padding: 2rem; text-align: center; cursor: pointer; transition: var(--transition-smooth); background-color: var(--input-bg); } |
| .upload-area:hover, .upload-area.drag-over { border-color: var(--accent-primary); background-color: #fff; box-shadow: 0 0 15px var(--accent-primary-glow); } |
| .upload-icon svg { width: 48px; height: 48px; color: var(--accent-primary); margin-bottom: 1rem; stroke-width: 1.5; opacity: 0.8; } |
| .upload-area p { margin: 0; color: var(--text-secondary); font-weight: 500; } |
| #file-preview { display: none; align-items: center; justify-content: space-between; padding: 1rem; background-color: var(--input-bg); border-radius: var(--radius-input); margin-top: 1rem; animation: fadeIn 0.3s; border: 1px solid var(--panel-border); } |
| #file-info { display: flex; align-items: center; gap: 1rem; overflow: hidden; } |
| #file-info img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } |
| #file-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
| #remove-file-btn { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 1.5rem; transition: all 0.2s; flex-shrink: 0; } |
| #remove-file-btn:hover { color: var(--error-color); transform: scale(1.1); } |
| |
| .style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } |
| .style-card { position: relative; border-radius: var(--radius-input); overflow: hidden; cursor: pointer; border: 3px solid transparent; box-shadow: var(--shadow-md); transition: var(--transition-smooth); } |
| .style-card-image-wrapper { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; } |
| .style-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } |
| .style-card:hover img { transform: scale(1.08); } |
| .style-card-name { position: absolute; bottom: 0; right: 0; left: 0; padding: 1.5rem 1rem 0.8rem 1rem; color: white; font-weight: 700; font-size: 0.95em; text-shadow: 1px 1px 4px rgba(0,0,0,0.7); background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); } |
| .style-card.selected { border-color: var(--accent-primary); transform: scale(1.03); box-shadow: 0 0 25px var(--accent-primary-glow); } |
| .selected-indicator { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: white; padding: 0.4rem; font-size: 0.8em; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transform: translateY(100%); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } |
| .style-card.selected .selected-indicator { transform: translateY(0); opacity: 1; } |
| .selected-indicator svg { width: 14px; height: 14px; stroke: white; stroke-width: 2.5; } |
| |
| .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); } |
| .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; 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: 2rem; } |
| .status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; } |
| .loading-animation-wrapper { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; width: 100%; } |
| |
| |
| .ripple-loader { display: inline-block; position: relative; width: 200px; height: 200px; } |
| .ripple-loader div { position: absolute; border: 4px solid var(--accent-primary); opacity: 1; border-radius: 50%; animation: ripple 2s cubic-bezier(0, 0.2, 0.8, 1) infinite; } |
| .ripple-loader div:nth-child(1) { animation-delay: 0s; background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)); } |
| .ripple-loader div:nth-child(2) { animation-delay: -0.66s; background: linear-gradient(45deg, var(--accent-secondary), var(--accent-primary-hover)); } |
| .ripple-loader div:nth-child(3) { animation-delay: -1.33s; background: linear-gradient(45deg, var(--accent-primary-hover), var(--accent-primary)); } |
| |
| .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 { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem; } |
| #result-content .result-image { max-width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-lg); } |
| #retryBtn { margin-top: 0; } |
| #retryBtn:hover:not(:disabled) { background: var(--accent-secondary-hover); } |
| |
| #downloadBtn { gap: 12px; background: linear-gradient(95deg, #00C9FF 0%, #92FE9D 100%); } |
| #downloadBtn:hover:not(:disabled) { box-shadow: 0 8px 20px -4px rgba(0, 201, 255, 0.4), 0 8px 20px -4px rgba(146, 254, 157, 0.4); } |
| |
| |
| .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); } |
| |
| |
| @media (max-width: 600px) { .main-content { padding: 1.5rem; } .app-header h1 { font-size: 2em; } } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="app-container"> |
| <header class="app-header"> |
| <h1>خلق تصاویر کارتونی</h1> |
| <p>تصویر خود را به یک اثر هنری کارتونی با استایلهای محبوب تبدیل کنید.</p> |
| </header> |
|
|
| <main class="main-content"> |
| <form id="main-form" onsubmit="return false;"> |
| <div class="form-group"> |
| <label>🖼️ تصویر ورودی</label> |
| <label for="imageInput" class="upload-area" id="upload-area"> |
| <div class="upload-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg></div> |
| <p>تصویر خود را اینجا بکشید یا برای انتخاب کلیک کنید</p> |
| </label> |
| <input type="file" id="imageInput" accept="image/*" style="display: none;"> |
| <div id="file-preview"> |
| <div id="file-info"> |
| <img id="preview-img" src="#" alt="Preview"> |
| <span id="file-name"></span> |
| </div> |
| <button type="button" id="remove-file-btn" title="حذف فایل">×</button> |
| </div> |
| </div> |
|
|
| <div class="form-group"> |
| <label>🎨 استایل هنری</label> |
| <div class="style-grid"> |
| <div class="style-card selected" data-value="Studio Ghibli" data-name="استودیو جیبلی"> |
| <div class="style-card-image-wrapper"> |
| <img src="https://uploadkon.ir/uploads/d4e415_25گیبلی-.jpg" alt="Studio Ghibli Style"> |
| <span class="style-card-name">استودیو جیبلی</span> |
| </div> |
| <div class="selected-indicator"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> |
| انتخاب شد |
| </div> |
| </div> |
| <div class="style-card" data-value="Irasutoya Illustration" data-name="ایراسوتویا"> |
| <div class="style-card-image-wrapper"> |
| <img src="https://uploadkon.ir/uploads/f02815_25ایراسوتویا.jpg" alt="Irasutoya Style"> |
| <span class="style-card-name">ایراسوتویا</span> |
| </div> |
| <div class="selected-indicator"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> |
| انتخاب شد |
| </div> |
| </div> |
| <div class="style-card" data-value="The Simpsons" data-name="سیمپسونها"> |
| <div class="style-card-image-wrapper"> |
| <img src="https://uploadkon.ir/uploads/c13615_25سیمپسونها.jpg" alt="The Simpsons Style"> |
| <span class="style-card-name">سیمپسونها</span> |
| </div> |
| <div class="selected-indicator"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> |
| انتخاب شد |
| </div> |
| </div> |
| <div class="style-card" data-value="Snoopy" data-name="اسنوپی"> |
| <div class="style-card-image-wrapper"> |
| <img src="https://uploadkon.ir/uploads/eec215_25اسنوپی.jpg" alt="Snoopy Style"> |
| <span class="style-card-name">اسنوپی</span> |
| </div> |
| <div class="selected-indicator"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> |
| انتخاب شد |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <button type="submit" id="generateBtn" 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="ripple-loader"> |
| <div></div> |
| <div></div> |
| <div></div> |
| </div> |
| <p id="loading-text" class="loading-text">در حال پردازش هوشمند...</p> |
| </div> |
|
|
| <div id="result-content"></div> |
| </div> |
| </main> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| |
| const imageInput = document.getElementById('imageInput'); |
| const generateBtn = document.getElementById('generateBtn'); |
| const btnText = generateBtn.querySelector('.btn-text'); |
| const btnSpinner = generateBtn.querySelector('.spinner'); |
| |
| const uploadArea = document.getElementById('upload-area'); |
| const filePreview = document.getElementById('file-preview'); |
| const previewImg = document.getElementById('preview-img'); |
| const fileNameSpan = document.getElementById('file-name'); |
| const removeFileBtn = document.getElementById('remove-file-btn'); |
| |
| 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 styleCards = document.querySelectorAll('.style-card'); |
| |
| let selectedFile = null; |
| let selectedStyle = 'Studio Ghibli'; |
| let currentRunId = ''; |
| let pollInterval = null; |
| |
| |
| 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>`; |
| |
| |
| |
| styleCards.forEach(card => { |
| card.addEventListener('click', () => { |
| styleCards.forEach(c => c.classList.remove('selected')); |
| card.classList.add('selected'); |
| selectedStyle = card.dataset.value; |
| }); |
| }); |
| |
| |
| const handleFileSelect = (file) => { |
| if (file && file.type.startsWith('image/')) { |
| selectedFile = file; |
| fileNameSpan.textContent = file.name; |
| const reader = new FileReader(); |
| reader.onload = (e) => { previewImg.src = e.target.result; }; |
| reader.readAsDataURL(file); |
| uploadArea.style.display = 'none'; |
| filePreview.style.display = 'flex'; |
| } |
| }; |
| |
| imageInput.addEventListener('change', (e) => handleFileSelect(e.target.files[0])); |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eName => { |
| uploadArea.addEventListener(eName, e => { e.preventDefault(); e.stopPropagation(); }); |
| }); |
| ['dragenter', 'dragover'].forEach(eName => uploadArea.addEventListener(eName, () => uploadArea.classList.add('drag-over'))); |
| ['dragleave', 'drop'].forEach(eName => uploadArea.addEventListener(eName, () => uploadArea.classList.remove('drag-over'))); |
| uploadArea.addEventListener('drop', e => handleFileSelect(e.dataTransfer.files[0])); |
| |
| removeFileBtn.addEventListener('click', () => { |
| imageInput.value = ''; selectedFile = null; |
| uploadArea.style.display = 'block'; |
| filePreview.style.display = 'none'; |
| setUIState('initial'); |
| }); |
| |
| |
| const setUIState = (state, data = {}) => { |
| outputSection.style.padding = ''; |
| outputSection.style.border = ''; |
| outputSection.style.background = ''; |
| |
| generateBtn.disabled = state === 'loading'; |
| btnSpinner.style.display = state === 'loading' ? 'inline-block' : 'none'; |
| btnText.textContent = state === 'loading' ? 'در حال پردازش...' : '✨ تبدیل به کارتون'; |
| statusMessage.style.display = state === 'initial' ? 'block' : 'none'; |
| loadingAnimation.style.display = state === 'loading' ? 'flex' : 'none'; |
| resultContent.innerHTML = ''; |
| outputSection.classList.remove('has-content'); |
| |
| if (state === 'loading') { |
| loadingText.textContent = data.message || 'در حال پردازش هوشمند...'; |
| } else if (state === 'success') { |
| outputSection.classList.add('has-content'); |
| resultContent.innerHTML = `<a href="${data.url}" target="_blank"><img src="${data.url}" class="result-image" alt="Generated Image"></a>`; |
| showDownloadButton(data.url); |
| } else if (state === 'error') { |
| outputSection.classList.add('has-content'); |
| if (data.isQuotaError) { |
| outputSection.style.padding = '0'; |
| outputSection.style.border = 'none'; |
| outputSection.style.background = 'transparent'; |
| |
| resultContent.innerHTML = GPU_QUOTA_ERROR_HTML; |
| |
| resultContent.querySelector('.back-button').addEventListener('click', () => setUIState('initial')); |
| resultContent.querySelector('.retry-button').addEventListener('click', startGeneration); |
| |
| resultContent.querySelector('#tutorialLinkBtn').addEventListener('click', () => { |
| const tutorialUrl = '#/nav/online/news/getSingle/1149635/eyJpdiI6IjhHVGhPQWJwb3E0cjRXbnFWTW5BaUE9PSIsInZhbHVlIjoiS1V0dTdvT21wbXAwSXZaK1RCTG1pVXZqdlFJa1hXV1RKa2FLem9zU3pXMjd5MmlVOGc2YWY0NVdNR3h3Smp1aSIsIm1hYyI6IjY1NTA5ZDYzMjAzMTJhMGQyMWQ4NjA4ZDgyNGZjZDVlY2MyNjdiMjA2NWYzOWRjY2M4ZmVjYWRlMWNlMWQ3ODEiLCJ0YWciOiIifQ==/21135210'; |
| window.parent.postMessage({ type: 'NAVIGATE_TO_URL', url: tutorialUrl }, '*'); |
| }); |
| |
| } else { |
| resultContent.innerHTML = `<div class="status-message" style="color: var(--error-color);">${data.message}</div>`; |
| showRetryButton('تلاش مجدد'); |
| } |
| } |
| }; |
| |
| |
| function safeBase64Encode(str) { |
| return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => { |
| return String.fromCharCode('0x' + p1); |
| })); |
| } |
| |
| |
| function startPolling(runId) { |
| if (pollInterval) clearInterval(pollInterval); |
| |
| pollInterval = setInterval(async () => { |
| try { |
| |
| const webpCheck = await fetch(`/static/images/${runId}.webp`, { method: 'HEAD' }); |
| if (webpCheck.ok) { |
| clearInterval(pollInterval); |
| setUIState('success', { url: `/static/images/${runId}.webp` }); |
| return; |
| } |
| |
| const pngCheck = await fetch(`/static/images/${runId}.png`, { method: 'HEAD' }); |
| if (pngCheck.ok) { |
| clearInterval(pollInterval); |
| setUIState('success', { url: `/static/images/${runId}.png` }); |
| return; |
| } |
| |
| |
| const statusRes = await fetch(`/api/status/${runId}`); |
| const statusData = await statusRes.json(); |
| |
| if (statusData.status === 'ready') { |
| clearInterval(pollInterval); |
| setUIState('success', { url: statusData.url }); |
| } else if (statusData.status === 'failed') { |
| clearInterval(pollInterval); |
| const errorMessage = (statusData.message || "").toLowerCase(); |
| const isQuotaError = errorMessage.includes('exceeded your gpu quota') || errorMessage.includes('too much pending call') || errorMessage.includes("capacity") || errorMessage.includes("gpu"); |
| setUIState('error', { message: statusData.message || "خطا در پردازش تصویر.", isQuotaError }); |
| } |
| } catch (e) { |
| console.error("Error polling status:", e); |
| } |
| }, 4000); |
| } |
| |
| |
| const startGeneration = async () => { |
| if (!selectedFile) { |
| alert("لطفاً یک تصویر انتخاب کنید."); return; |
| } |
| if (pollInterval) clearInterval(pollInterval); |
| |
| setUIState('loading', { message: 'مرحله ۱/۳: در حال آپلود تصویر...' }); |
| |
| currentRunId = 'ghibli' + Math.random().toString(36).substring(2, 14); |
| |
| try { |
| const ext = selectedFile.name.split('.').pop().toLowerCase(); |
| const formData = new FormData(); |
| formData.append('run_id', `${currentRunId}_ghibli_img`); |
| formData.append('ext', ext); |
| formData.append('file', selectedFile); |
| |
| |
| const uploadRes = await fetch('/api/webhook/upload', { method: 'POST', body: formData }); |
| if (!uploadRes.ok) throw new Error("خطا در بارگذاری اولیه تصویر."); |
| |
| setUIState('loading', { message: 'مرحله ۲/۳: ارسال درخواست به صف پردازش...' }); |
| |
| const b64Style = safeBase64Encode(selectedStyle); |
| const ghibliConfigPayload = `GHIBLICONFIG_userRunId_${currentRunId}_imgExt_${ext}_style_${b64Style}`; |
| |
| |
| const response = await fetch('/api/generate', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ |
| prompt: ghibliConfigPayload, |
| width: 1024, |
| height: 1024, |
| action_name: 'ghibli' |
| }) |
| }); |
| |
| const data = await response.json(); |
| if (data.status === 'success') { |
| const targetRunId = data.run_id; |
| setUIState('loading', { message: 'مرحله ۳/۳: در انتظار نتیجه...' }); |
| startPolling(targetRunId); |
| } else { |
| throw new Error(data.message || 'خطا در ثبت فرآیند ناهمگام.'); |
| } |
| |
| } catch (error) { |
| console.error('An error occurred:', error); |
| const errorMessage = (error.message || "").toLowerCase(); |
| const isQuotaError = errorMessage.includes('exceeded your gpu quota') || errorMessage.includes('too much pending call') || errorMessage.includes("capacity") || errorMessage.includes("gpu"); |
| setUIState('error', { message: error.message, isQuotaError }); |
| } |
| }; |
| generateBtn.addEventListener('click', startGeneration); |
| |
| function showRetryButton(text) { |
| const retryBtn = document.createElement('button'); |
| retryBtn.textContent = text; |
| retryBtn.id = 'retryBtn'; |
| retryBtn.className = 'generate-btn'; |
| retryBtn.onclick = () => { |
| selectedFile = null; |
| imageInput.value = ''; |
| uploadArea.style.display = 'block'; |
| filePreview.style.display = 'none'; |
| setUIState('initial'); |
| }; |
| resultContent.appendChild(retryBtn); |
| } |
| |
| function showDownloadButton(imageUrl) { |
| const downloadBtn = document.createElement('button'); |
| downloadBtn.id = 'downloadBtn'; |
| downloadBtn.className = 'generate-btn'; |
| |
| downloadBtn.innerHTML = ` |
| <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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> |
| `; |
| |
| downloadBtn.onclick = (e) => { |
| e.preventDefault(); |
| window.parent.postMessage({ |
| type: 'DOWNLOAD_REQUEST', |
| url: window.location.origin + imageUrl |
| }, '*'); |
| }; |
| |
| resultContent.appendChild(downloadBtn); |
| } |
| |
| setUIState('initial'); |
| }); |
| </script> |
| </body> |
| </html> |
