| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Photoshop Pro</title> |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet"> |
| <style> |
| :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; |
| --danger-color: #e53e3e; |
| --danger-color-hover: #c53030; |
| --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; |
| --radius-sm: 10px; |
| --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 fadeInBackdrop { from { opacity: 0; } to { opacity: 1; } } |
| @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
| @keyframes pulse-loader { 0% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } 50% { box-shadow: 0 0 60px rgba(56, 189, 248, 0.7); } 100% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } } |
| @keyframes glow-text { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } } |
| @keyframes badge-fade-in { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } |
| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| |
| body { font-family: var(--app-font); background-color: var(--app-bg); color: var(--text-primary); display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 2.5rem 1rem; } |
| .container { max-width: 820px; width: 100%; display: flex; flex-direction: column; gap: 1.5rem; } |
| |
| |
| header { position: relative; text-align: center; margin-bottom: 1rem; padding: 2rem 0; animation: fadeIn 0.8s 0.1s ease-out backwards; overflow: hidden; } |
| #neural-network-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; } |
| h1, .subtitle, #subscription-status-badge { position: relative; z-index: 2; } |
| h1 { font-size: 2.8rem; font-weight: 800; 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; } |
| .subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0; } |
| |
| |
| #subscription-status-badge { display: none; padding: 6px 16px; border-radius: 20px; font-size: 0.85em; font-weight: 700; margin-top: 1rem; display: inline-block; animation: badge-fade-in 0.6s 0.5s ease-out backwards; position: relative; z-index: 2;} |
| #subscription-status-badge.free-badge { background: #64748b; color: white; box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3); } |
| #subscription-status-badge.paid-badge { background: linear-gradient(45deg, #FFC107, #ffca2c); color: #333; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3); } |
| |
| |
| main, .gallery-section { 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.3s ease-out backwards; } |
| .gallery-section { margin-top: 1.5rem; animation-delay: 0.5s; } |
| .form-group { margin-bottom: 2.5rem; } |
| .form-group:last-child { margin-bottom: 0; } |
| .form-label { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--text-primary); font-size: 1.2em; margin-bottom: 1.2rem; } |
| .form-label svg { width: 24px; height: 24px; color: var(--accent-primary); } |
| |
| |
| #upload-area { position: relative; border: 2px dashed var(--input-border); border-radius: var(--radius-input); padding: 2.5rem; text-align: center; cursor: pointer; transition: var(--transition-smooth); background-color: var(--input-bg); min-height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; } |
| #upload-area.drag-over, #upload-area:hover:not(.has-file) { border-color: var(--accent-primary); background-color: #fff; box-shadow: 0 0 15px var(--accent-primary-glow); } |
| #upload-area.has-file { border-style: solid; border-color: var(--panel-border); padding: 0; cursor: default; } |
| #upload-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; } |
| #upload-icon svg { width: 48px; height: 48px; color: var(--accent-primary); stroke-width: 1.5; opacity: 0.8; } |
| #upload-area p { margin: 0; color: var(--text-secondary); font-weight: 500; } |
| #preview-image-main { display: none; width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; } |
| #remove-file-btn-main { display: none; position: absolute; top: 12px; right: 12px; background-color: rgba(26, 32, 44, 0.6); color: white; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; z-index: 10; transition: var(--transition-smooth); padding: 0; } |
| #remove-file-btn-main:hover { background-color: var(--danger-color); transform: scale(1.1); } |
| #upload-area.has-file #upload-content { display: none; } |
| #upload-area.has-file #preview-image-main, #upload-area.has-file #remove-file-btn-main { display: block; } |
| |
| |
| textarea { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-input); border: 2px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset; font-family: var(--app-font); font-size: 1.05rem; box-sizing: border-box; transition: var(--transition-smooth); min-height: 120px; resize: vertical; } |
| textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 4px var(--accent-primary-glow); background-color: #fff; } |
| |
| #submit-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 1.2rem; font-size: 1.3rem; 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 15px -3px var(--accent-primary-glow); margin-top: 1rem; } |
| #submit-btn svg { width: 26px; height: 26px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)); } |
| #submit-btn:hover:not(:disabled) { transform: translateY(-4px) scale(1.01); box-shadow: 0 10px 20px -4px var(--accent-primary-glow); } |
| #submit-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; opacity: 0.7; transform: none; } |
| #submit-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; } |
| |
| .credit-info { font-size: 0.95rem; color: var(--text-tertiary); text-align: center; margin-top: 1rem; font-weight: 600; background: var(--input-bg); padding: 10px; border-radius: var(--radius-input); border: 1px solid var(--input-border); display: none; } |
| .upgrade-btn { display: none; width: 100%; margin-top: 1rem; padding: 1rem; background: linear-gradient(90deg, #FFD54F, #FFC107); border: none; border-radius: var(--radius-btn); color: #212529; font-weight: 800; font-size: 1.1rem; cursor: pointer; text-align: center; font-family: inherit; box-shadow: 0 6px 15px rgba(255, 193, 7, 0.3); transition: transform 0.3s; } |
| .upgrade-btn:hover { transform: translateY(-3px); } |
| |
| |
| #image-result-container { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 2rem; border-top: 1px solid var(--panel-border); animation: fadeIn 0.5s ease-out; } |
| |
| .empty-placeholder { width: 400px; max-width: 100%; height: 300px; border: 2px dashed var(--input-border); border-radius: 20px; background-color: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } |
| .empty-placeholder svg { color: var(--text-tertiary); margin-bottom: 15px; opacity: 0.5; width: 48px; height: 48px; } |
| .empty-placeholder p { color: var(--text-tertiary); font-size: 0.95rem; font-weight: 600; margin: 0; } |
| |
| .generated-image-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; } |
| .generated-image-box img { max-width: 100%; max-height: 500px; border-radius: var(--radius-input); border: 1px solid var(--panel-border); box-shadow: var(--shadow-lg); object-fit: contain; cursor: pointer; transition: transform 0.2s;} |
| .generated-image-box img:hover { transform: scale(1.02); } |
| |
| .generator-container { position: relative; width: 400px; max-width: 100%; height: 300px; border: 2px solid #38bdf8; border-radius: 20px; overflow: hidden; box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); animation: pulse-loader 5s infinite cubic-bezier(0.4, 0, 0.6, 1); background-color: #161b22; color: #f0f6fc; margin: 0 auto; } |
| .noise-layer, .sketch-layer, .building-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
| .noise-layer { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.6"/></svg>') repeat; opacity: 1; animation: fade-noise 7s infinite ease-in-out; } |
| @keyframes fade-noise { 0% { opacity: 1; filter: blur(5px); } 30% { opacity: 0.8; filter: blur(2px); } 100% { opacity: 0; filter: blur(0px); } } |
| .sketch-layer { filter: grayscale(1) contrast(1.5) blur(3px); opacity: 0; animation: reveal-sketch 7s infinite ease-in-out; } |
| @keyframes reveal-sketch { 0% { opacity: 0; } 20% { opacity: 1; } 60% { opacity: 0.5; } 100% { opacity: 0; } } |
| .building-layer { filter: blur(15px); opacity: 0; animation: denoise-color 7s infinite ease-in-out; } |
| @keyframes denoise-color { 0% { opacity: 0; } 40% { opacity: 0.6; filter: blur(5px); } 100% { opacity: 1; filter: blur(0px); } } |
| .pixel-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px), repeating-linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px); opacity: 1; animation: dissolve-grid 7s infinite ease-in-out; } |
| @keyframes dissolve-grid { 0% { opacity: 1; } 70% { opacity: 0.5; } 100% { opacity: 0; } } |
| .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 50%); animation: flow-particles 7s infinite cubic-bezier(0.4, 0, 0.6, 1); } |
| @keyframes flow-particles { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10px, -15px) scale(1.05); } 100% { transform: translate(0, 0) scale(1); } } |
| .text-overlay { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 700; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); animation: glow-text 7s infinite ease-in-out; font-family: var(--app-font); z-index: 2; text-align: center; width: 90%; } |
| .progress-bar { position: absolute; bottom: 0; left: 0; width: 0%; height: 6px; background: linear-gradient(to right, #38bdf8, #bb86fc, #facc15); transition: width 0.3s linear; z-index: 2; } |
| |
| .download-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 300px; padding: 0.9rem; background: var(--accent-primary); color: #fff; border: none; border-radius: var(--radius-btn); font-family: inherit; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); text-decoration: none; box-shadow: 0 4px 10px rgba(74, 108, 250, 0.3); } |
| .download-btn:hover { background: var(--accent-primary-hover); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(74, 108, 250, 0.4); } |
| |
| |
| .history-section { display: none; animation: fadeIn 0.5s ease-out; } |
| .history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } |
| .history-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; margin: 0; } |
| .history-header h3 svg { width: 22px; height: 22px; color: var(--accent-primary); } |
| .danger-btn { background: var(--input-bg); color: var(--danger-color); border: 1px solid var(--danger-color); padding: 6px 14px; border-radius: var(--radius-sm); font-family: inherit; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); font-size: 0.85rem; } |
| .danger-btn:hover { background: var(--danger-color); color: #fff; } |
| |
| .history-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } |
| .history-item { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s; } |
| .history-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--text-tertiary); } |
| .history-item img { width: 100%; height: 200px; object-fit: cover; cursor: pointer; border-bottom: 1px solid var(--input-border); } |
| .history-details { padding: 12px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; overflow: hidden; } |
| .history-prompt { font-size: 0.85rem; color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: auto; text-align: right; } |
| .history-meta { font-size: 0.75rem; color: var(--text-tertiary); display: flex; justify-content: space-between; font-weight: 600; background: var(--panel-bg); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--panel-border); } |
| .history-delete-btn { margin-top: auto; padding: 6px; background: transparent; color: var(--danger-color); border: 1px dashed var(--danger-color); border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 0.8rem; font-weight: 600; transition: var(--transition-smooth); } |
| .history-delete-btn:hover { background: var(--danger-color); color: white; border-style: solid; } |
| |
| |
| .image-view-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(26, 32, 44, 0.95); z-index: 2000; display: flex; flex-direction: column; align-items: center; opacity: 0; animation: fadeInBackdrop 0.3s forwards; overflow-y: auto; padding: 40px 20px; } |
| .image-view-wrapper { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 800px; position: relative; } |
| .image-view-modal img { max-width: 100%; border-radius: var(--radius-card); box-shadow: 0 0 30px rgba(0,0,0,0.5); object-fit: contain; } |
| .image-view-close { position: fixed; top: 20px; right: 20px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3); color: white; font-size: 1.5rem; cursor: pointer; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s; z-index: 2002; backdrop-filter: blur(5px); } |
| .image-view-close:hover { background: rgba(255,255,255,0.3); border-color: white; transform: scale(1.1); } |
| |
| .image-view-toolbar { width: 100%; display: flex; gap: 15px; justify-content: center; background: rgba(0,0,0,0.7); padding: 12px 20px; border-radius: 20px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); } |
| .iv-action-btn { background: var(--accent-primary); color: white; border: none; padding: 10px 18px; border-radius: var(--radius-btn); font-family: inherit; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; font-size: 0.95rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } |
| .iv-action-btn:hover { background: var(--accent-primary-hover); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.4); } |
| .iv-action-btn svg { width: 20px; height: 20px; } |
| .iv-btn-copy { background: #4A5568; } |
| .iv-btn-copy:hover { background: #2D3748; } |
| |
| |
| .confirm-modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(26, 32, 44, 0.7); z-index: 3000; display: flex; align-items: center; justify-content: center; opacity: 0; animation: fadeInBackdrop 0.3s forwards; backdrop-filter: blur(5px); } |
| .confirm-modal-content { background: var(--panel-bg); border-radius: var(--radius-card); padding: 25px; width: 90%; max-width: 400px; text-align: center; box-shadow: var(--shadow-xl); transform: scale(0.9); animation: popIn 0.3s forwards; border: 1px solid var(--panel-border); } |
| @keyframes popIn { to { transform: scale(1); opacity: 1; } } |
| .confirm-icon { width: 60px; height: 60px; color: var(--danger-color); margin: 0 auto 15px; background: rgba(229, 62, 62, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; } |
| .confirm-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; } |
| .confirm-message { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 25px; line-height: 1.6; } |
| .confirm-actions { display: flex; gap: 10px; justify-content: center; } |
| .confirm-btn { flex: 1; padding: 12px; border-radius: var(--radius-btn); font-weight: 700; font-size: 1rem; cursor: pointer; border: none; transition: var(--transition-smooth); font-family: inherit; } |
| .btn-cancel { background: var(--input-bg); color: var(--text-secondary); border: 1px solid var(--input-border); } |
| .btn-cancel:hover { background: #e2e8f0; color: var(--text-primary); } |
| .btn-danger { background: var(--danger-color); color: white; box-shadow: 0 4px 10px rgba(229,62,62,0.3); } |
| .btn-danger:hover { background: #C53030; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(229,62,62,0.4); } |
| |
| @media (max-width: 650px) { |
| main, .gallery-section { padding: 1.5rem; } h1 { font-size: 2.2rem; } |
| .generator-container { height: 250px; } |
| .text-overlay { font-size: 16px; } |
| .history-item img { height: 140px; } |
| .image-view-modal { padding: 60px 15px 30px; } |
| .image-view-toolbar { flex-direction: row; flex-wrap: wrap; padding: 10px; border-radius: 15px; gap: 10px;} |
| .iv-action-btn { flex: 1; min-width: 130px; font-size: 0.85rem; padding: 10px 12px;} |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <header> |
| <canvas id="neural-network-canvas"></canvas> |
| <div style="position: relative; z-index: 2;"> |
| <h1>فتوشاپ هوش مصنوعی ✨</h1> |
| <p class="subtitle">تصاویر خود را با قدرت هوش مصنوعی و به زبان ساده ویرایش کنید</p> |
| <div id="subscription-status-badge">درحال بررسی...</div> |
| </div> |
| </header> |
|
|
| <main> |
| <div class="form-group"> |
| <div class="form-label"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg> |
| ۱. تصویر خود را انتخاب کنید |
| </div> |
| <label id="upload-area" for="file-input"> |
| <div id="upload-content"> |
| <div id="upload-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><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> |
| </div> |
| <img id="preview-image-main" src="" alt="Preview"> |
| <button type="button" id="remove-file-btn-main" title="حذف تصویر">×</button> |
| </label> |
| <input type="file" id="file-input" accept="image/png, image/jpeg, image/webp" hidden> |
| </div> |
| |
| <div class="form-group"> |
| <label class="form-label"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg> |
| ۲. دستور ویرایش را بنویسید |
| </label> |
| <textarea id="prompt-input" placeholder="مثال: پسزمینه را حذف کن و یک ساحل آفتابی قرار بده"></textarea> |
| |
| <div id="credit-info" class="credit-info">درحال بررسی اعتبار...</div> |
| <button id="upgrade-button" class="upgrade-btn">⭐️ ارتقا به نسخه نامحدود</button> |
|
|
| <button id="submit-btn" disabled> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/></svg> |
| <span id="btn-text">ایجاد کن</span> |
| <div class="spinner"></div> |
| </button> |
| </div> |
|
|
| <div class="form-group"> |
| <div class="form-label"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/><path d="M21 14l-1.5 3-3-1.5 3-3 1.5 3z"/><path d="M19.5 2.5l-3 1.5 1.5 3 3-1.5-1.5-3z"/></svg> |
| ۳. نتیجه نهایی |
| </div> |
| <div id="image-result-container"> |
| <div class="empty-placeholder"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg> |
| <p>تصویر و دستور خود را وارد کنید.</p> |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| <section class="gallery-section" id="history-section" style="display: none;"> |
| <div class="history-header"> |
| <h3> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg> |
| تاریخچه ویرایشهای شما |
| </h3> |
| <button id="clear-history-btn" class="danger-btn">حذف همه</button> |
| </div> |
| <div id="history-grid" class="history-grid"></div> |
| </section> |
| </div> |
|
|
| <script> |
| |
| function showCustomConfirm(title, message, onConfirm) { |
| const backdrop = document.createElement('div'); |
| backdrop.className = 'confirm-modal-backdrop'; |
| |
| const content = document.createElement('div'); |
| content.className = 'confirm-modal-content'; |
| |
| content.innerHTML = ` |
| <div class="confirm-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg> |
| </div> |
| <div class="confirm-title">${title}</div> |
| <div class="confirm-message">${message}</div> |
| <div class="confirm-actions"> |
| <button class="confirm-btn btn-cancel" id="confirm-cancel">انصراف</button> |
| <button class="confirm-btn btn-danger" id="confirm-ok">تایید و حذف</button> |
| </div> |
| `; |
| |
| backdrop.appendChild(content); |
| document.body.appendChild(backdrop); |
| |
| const close = () => { |
| backdrop.style.opacity = '0'; |
| setTimeout(() => backdrop.remove(), 300); |
| }; |
| |
| backdrop.querySelector('#confirm-cancel').onclick = close; |
| backdrop.querySelector('#confirm-ok').onclick = () => { |
| onConfirm(); |
| close(); |
| }; |
| backdrop.onclick = (e) => { |
| if(e.target === backdrop) close(); |
| } |
| } |
| |
| |
| const dbName = 'AI_Editor_DB_v3'; |
| const historyStore = 'EditHistory'; |
| const inputStore = 'InputImageStore'; |
| let db; |
| |
| function initDB() { |
| return new Promise((resolve, reject) => { |
| const request = indexedDB.open(dbName, 1); |
| request.onerror = event => reject(event.target.error); |
| request.onsuccess = event => { |
| db = event.target.result; |
| resolve(db); |
| }; |
| request.onupgradeneeded = event => { |
| db = event.target.result; |
| if (!db.objectStoreNames.contains(historyStore)) { |
| db.createObjectStore(historyStore, { keyPath: 'id', autoIncrement: true }); |
| } |
| if (!db.objectStoreNames.contains(inputStore)) { |
| db.createObjectStore(inputStore, { keyPath: 'id' }); |
| } |
| }; |
| }); |
| } |
| |
| |
| function saveInputImage(blob) { |
| return new Promise((resolve, reject) => { |
| if (!db) return resolve(); |
| const tx = db.transaction([inputStore], 'readwrite'); |
| tx.objectStore(inputStore).put({ id: 'current_input', blob: blob }); |
| tx.oncomplete = () => resolve(); |
| tx.onerror = () => reject(); |
| }); |
| } |
| |
| function getInputImage() { |
| return new Promise((resolve) => { |
| if (!db) return resolve(null); |
| const tx = db.transaction([inputStore], 'readonly'); |
| const req = tx.objectStore(inputStore).get('current_input'); |
| req.onsuccess = () => resolve(req.result ? req.result.blob : null); |
| req.onerror = () => resolve(null); |
| }); |
| } |
| |
| function clearInputImage() { |
| return new Promise((resolve) => { |
| if (!db) return resolve(); |
| const tx = db.transaction([inputStore], 'readwrite'); |
| tx.objectStore(inputStore).delete('current_input'); |
| tx.oncomplete = () => resolve(); |
| }); |
| } |
| |
| |
| async function saveToHistory(blob, prompt) { |
| if (!db) await initDB(); |
| return new Promise((resolve, reject) => { |
| const transaction = db.transaction([historyStore], 'readwrite'); |
| const store = transaction.objectStore(historyStore); |
| const newItem = { |
| blob: blob, |
| prompt: prompt, |
| timestamp: Date.now() |
| }; |
| store.add(newItem); |
| |
| const countReq = store.count(); |
| countReq.onsuccess = () => { |
| if (countReq.result > 50) { |
| const extra = countReq.result - 50; |
| const cursorReq = store.openCursor(); |
| let deletedCount = 0; |
| cursorReq.onsuccess = e => { |
| const cursor = e.target.result; |
| if (cursor && deletedCount < extra) { |
| store.delete(cursor.primaryKey); |
| deletedCount++; |
| cursor.continue(); |
| } |
| }; |
| } |
| }; |
| transaction.oncomplete = () => { |
| loadHistory(); |
| resolve(); |
| }; |
| transaction.onerror = e => reject(e.target.error); |
| }); |
| } |
| |
| async function loadHistory() { |
| if (!db) await initDB(); |
| return new Promise((resolve, reject) => { |
| const transaction = db.transaction([historyStore], 'readonly'); |
| const store = transaction.objectStore(historyStore); |
| const request = store.getAll(); |
| request.onsuccess = e => { |
| const items = e.target.result; |
| items.sort((a, b) => b.timestamp - a.timestamp); |
| renderHistory(items); |
| resolve(items); |
| }; |
| request.onerror = e => reject(e.target.error); |
| }); |
| } |
| |
| function renderHistory(items) { |
| const historySection = document.getElementById('history-section'); |
| const grid = document.getElementById('history-grid'); |
| grid.innerHTML = ''; |
| |
| if (items.length === 0) { |
| historySection.style.display = 'none'; |
| return; |
| } |
| |
| historySection.style.display = 'block'; |
| |
| items.forEach(item => { |
| const blobUrl = URL.createObjectURL(item.blob); |
| const safeTitle = item.prompt.replace(/"/g, '"'); |
| const div = document.createElement('div'); |
| div.className = 'history-item'; |
| |
| div.innerHTML = ` |
| <img src="${blobUrl}" alt="History Image" title="برای مشاهده کلیک کنید"> |
| <div class="history-details"> |
| <div class="history-prompt" dir="auto" title="${safeTitle}">${item.prompt}</div> |
| <div class="history-meta"> |
| <span>ویرایش شده</span> |
| </div> |
| <button class="history-delete-btn">حذف تصویر</button> |
| </div> |
| `; |
| |
| div.querySelector('img').addEventListener('click', () => { |
| viewHistoryImage(blobUrl, item.prompt); |
| }); |
| |
| div.querySelector('.history-delete-btn').addEventListener('click', () => { |
| deleteHistoryItem(item.id); |
| }); |
| |
| grid.appendChild(div); |
| }); |
| } |
| |
| window.deleteHistoryItem = function(id) { |
| showCustomConfirm('حذف از سابقه', 'آیا از حذف دائمی این تصویر از حافظه مرورگر خود اطمینان دارید؟', async () => { |
| if (!db) await initDB(); |
| const transaction = db.transaction([historyStore], 'readwrite'); |
| const store = transaction.objectStore(historyStore); |
| store.delete(id); |
| transaction.oncomplete = () => loadHistory(); |
| }); |
| }; |
| |
| document.getElementById('clear-history-btn').addEventListener('click', () => { |
| showCustomConfirm('حذف تمام تصاویر', 'آیا از پاک کردن تمامی تصاویر از سابقه مطمئن هستید؟ این عمل غیرقابل بازگشت است.', async () => { |
| if (!db) await initDB(); |
| const transaction = db.transaction([historyStore], 'readwrite'); |
| const store = transaction.objectStore(historyStore); |
| store.clear(); |
| transaction.oncomplete = () => loadHistory(); |
| }); |
| }); |
| |
| |
| window.viewHistoryImage = function(url, promptText) { |
| const modal = document.createElement('div'); |
| modal.className = 'image-view-modal'; |
| modal.innerHTML = ` |
| <button class="image-view-close" onclick="this.parentElement.remove()">×</button> |
| <div class="image-view-wrapper" onclick="event.stopPropagation()"> |
| <img src="${url}" alt="Full Image" class="full-view-img"> |
| <div class="image-view-toolbar"> |
| <button class="iv-action-btn iv-btn-copy" id="btn-copy-prompt"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> |
| کپی دستور |
| </button> |
| <button class="iv-action-btn" id="btn-download-img"> |
| <svg 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> |
| دانلود تصویر |
| </button> |
| </div> |
| </div> |
| `; |
| |
| modal.querySelector('#btn-download-img').onclick = () => { |
| window.triggerDownload(url); |
| }; |
| |
| |
| const copyBtn = modal.querySelector('#btn-copy-prompt'); |
| copyBtn.onclick = () => { |
| const showSuccess = () => { |
| const originalHtml = copyBtn.innerHTML; |
| copyBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> کپی شد!`; |
| copyBtn.style.background = 'var(--accent-secondary)'; |
| copyBtn.style.color = '#1A202C'; |
| setTimeout(() => { |
| copyBtn.innerHTML = originalHtml; |
| copyBtn.style.background = ''; |
| copyBtn.style.color = ''; |
| }, 2000); |
| }; |
| |
| const fallbackCopy = () => { |
| const textArea = document.createElement("textarea"); |
| textArea.value = promptText; |
| textArea.style.position = "fixed"; |
| textArea.style.top = "-9999px"; |
| textArea.style.left = "-9999px"; |
| document.body.appendChild(textArea); |
| textArea.focus(); |
| textArea.select(); |
| try { |
| document.execCommand('copy'); |
| showSuccess(); |
| } catch (err) { |
| console.error('Fallback copy failed', err); |
| } |
| document.body.removeChild(textArea); |
| }; |
| |
| if (navigator.clipboard && window.isSecureContext) { |
| navigator.clipboard.writeText(promptText).then(showSuccess).catch(fallbackCopy); |
| } else { |
| fallbackCopy(); |
| } |
| }; |
| |
| modal.onclick = (e) => { |
| if(e.target === modal) modal.remove(); |
| }; |
| document.body.appendChild(modal); |
| }; |
| |
| |
| let userSubscriptionStatus = 'free'; |
| let userFingerprint = null; |
| let countdownInterval = null; |
| let freeCreditRemaining = 5; |
| const PREMIUM_PAGE_ID = '1149636'; |
| |
| 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_edit_' + 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 creditInfoDiv = document.getElementById('credit-info'); |
| const upgradeBtn = document.getElementById('upgrade-button'); |
| const badge = document.getElementById('subscription-status-badge'); |
| |
| badge.style.display = 'inline-block'; |
| |
| if (status === 'paid') { |
| badge.textContent = 'کاربر ویژه (نامحدود)'; |
| badge.className = 'paid-badge'; |
| creditInfoDiv.style.display = 'none'; |
| upgradeBtn.style.display = 'none'; |
| checkFormState(); |
| if(countdownInterval) clearInterval(countdownInterval); |
| } else { |
| badge.textContent = 'کاربر رایگان'; |
| badge.className = 'free-badge'; |
| checkFreeUserCredit(); |
| } |
| } |
| |
| async function checkFreeUserCredit() { |
| if (!userFingerprint || userSubscriptionStatus === 'paid') return; |
| const creditInfoDiv = document.getElementById('credit-info'); |
| const upgradeBtn = document.getElementById('upgrade-button'); |
| const submitBtn = document.getElementById('submit-btn'); |
| try { |
| const response = await fetch('/api/check-edit-credit', { |
| method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ fingerprint: userFingerprint }) |
| }); |
| const result = await response.json(); |
| |
| creditInfoDiv.style.display = 'block'; |
| |
| if (result.limit_reached) { |
| freeCreditRemaining = 0; |
| submitBtn.disabled = true; |
| upgradeBtn.style.display = 'block'; |
| startCountdown(result.reset_timestamp); |
| } else { |
| freeCreditRemaining = result.credits_remaining; |
| checkFormState(); |
| upgradeBtn.style.display = 'none'; |
| if(countdownInterval) clearInterval(countdownInterval); |
| creditInfoDiv.innerHTML = `شما <b>${result.credits_remaining}</b> اعتبار ویرایش تصویر برای این هفته دارید.`; |
| } |
| } catch (error) { |
| creditInfoDiv.textContent = "خطا در ارتباط با سیستم اعتبار."; |
| submitBtn.disabled = true; |
| } |
| } |
| |
| function startCountdown(resetTimestamp) { |
| if (countdownInterval) clearInterval(countdownInterval); |
| const creditInfoDiv = document.getElementById('credit-info'); |
| const updateTimer = () => { |
| const timeLeft = Math.max(0, resetTimestamp - (Date.now() / 1000)); |
| if (timeLeft === 0) { |
| clearInterval(countdownInterval); |
| creditInfoDiv.textContent = 'در حال شارژ اعتبارات...'; |
| setTimeout(checkFreeUserCredit, 2000); return; |
| } |
| const d = Math.floor(timeLeft / 86400); |
| const h = Math.floor((timeLeft % 86400) / 3600); |
| const m = Math.floor((timeLeft % 3600) / 60); |
| creditInfoDiv.innerHTML = `<span style="color:var(--danger-color)">اعتبار این هفته تمام شد.</span> زمان شارژ مجدد: ${d} روز و ${h} ساعت`; |
| }; |
| updateTimer(); countdownInterval = setInterval(updateTimer, 60000); |
| } |
| |
| 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'); } |
| } |
| }); |
| |
| |
| document.getElementById('upgrade-button').addEventListener('click', () => { |
| parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM' }, '*'); |
| }); |
| |
| window.triggerDownload = function(url) { |
| parent.postMessage({ type: 'DOWNLOAD_REQUEST', url: url }, '*'); |
| }; |
| |
| |
| const uploadArea = document.getElementById('upload-area'); |
| const fileInput = document.getElementById('file-input'); |
| const previewImage = document.getElementById('preview-image-main'); |
| const removeFileBtn = document.getElementById('remove-file-btn-main'); |
| const promptInput = document.getElementById('prompt-input'); |
| const submitBtn = document.getElementById('submit-btn'); |
| const imageResultContainer = document.getElementById('image-result-container'); |
| |
| let uploadedFile = null; |
| let activePollTimer = null; |
| let activeTimeoutTimer = null; |
| let fakeProgressInterval = null; |
| let isResultProcessed = false; |
| |
| async function handleFile(file) { |
| if (!file || !file.type.startsWith('image/')) return alert('لطفاً یک تصویر انتخاب کنید.'); |
| uploadedFile = file; |
| await saveInputImage(file); |
| |
| const reader = new FileReader(); |
| reader.onload = (e) => { previewImage.src = e.target.result; }; |
| reader.readAsDataURL(file); |
| uploadArea.classList.add('has-file'); |
| checkFormState(); |
| } |
| |
| removeFileBtn.onclick = async (e) => { |
| e.preventDefault(); e.stopPropagation(); |
| uploadedFile = null; fileInput.value = ''; previewImage.src = ''; |
| uploadArea.classList.remove('has-file'); |
| await clearInputImage(); |
| checkFormState(); |
| }; |
| |
| fileInput.onchange = (e) => handleFile(e.target.files[0]); |
| uploadArea.ondragover = (e) => { e.preventDefault(); uploadArea.classList.add('drag-over'); }; |
| uploadArea.ondragleave = () => uploadArea.classList.remove('drag-over'); |
| uploadArea.ondrop = (e) => { e.preventDefault(); uploadArea.classList.remove('drag-over'); handleFile(e.dataTransfer.files[0]); }; |
| |
| function checkFormState() { |
| let limitReached = (userSubscriptionStatus === 'free' && freeCreditRemaining === 0); |
| submitBtn.disabled = limitReached || !(uploadedFile && promptInput.value.trim() !== ''); |
| } |
| promptInput.oninput = checkFormState; |
| |
| |
| function startFakeProgress(targetSeconds) { |
| clearInterval(fakeProgressInterval); |
| const pb = document.getElementById('tv-progress-bar'); |
| if (!pb) return; |
| let currentProg = 0; |
| const intervalMs = 200; |
| const increment = 100 / (targetSeconds * 1000 / intervalMs); |
| |
| pb.style.width = '0%'; |
| fakeProgressInterval = setInterval(() => { |
| currentProg += increment; |
| if(currentProg > 98) { |
| clearInterval(fakeProgressInterval); |
| currentProg = 98; |
| } |
| pb.style.width = `${currentProg}%`; |
| }, intervalMs); |
| } |
| |
| function finishFakeProgress() { |
| clearInterval(fakeProgressInterval); |
| const pb = document.getElementById('tv-progress-bar'); |
| if(pb) pb.style.width = '100%'; |
| } |
| |
| |
| submitBtn.onclick = async () => { |
| if (userSubscriptionStatus !== 'paid') { |
| try { |
| const response = await fetch('/api/check-edit-credit', { |
| method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ fingerprint: userFingerprint }) |
| }); |
| const result = await response.json(); |
| if (result.limit_reached) { |
| updateUIForSubscriptionStatus('free'); |
| alert("محدودیت ویرایش عکس شما به پایان رسیده است."); |
| return; |
| } |
| } catch (err) { alert("عدم ارتباط با سیستم اعتبار."); return; } |
| } |
| |
| if (activePollTimer) clearInterval(activePollTimer); |
| if (activeTimeoutTimer) clearTimeout(activeTimeoutTimer); |
| |
| submitBtn.disabled = true; |
| promptInput.disabled = true; |
| document.getElementById('btn-text').style.display = 'none'; |
| document.querySelector('.spinner').style.display = 'inline-block'; |
| |
| const originalPrompt = promptInput.value.trim(); |
| |
| imageResultContainer.innerHTML = ` |
| <div class="generator-container" style="display:flex;"> |
| <div class="noise-layer"></div><div class="sketch-layer"></div><div class="building-layer"></div><div class="pixel-grid"></div><div class="particles"></div> |
| <div class="text-overlay" id="loading-text">در حال پردازش و ویرایش...</div> |
| <div class="progress-bar" id="tv-progress-bar"></div> |
| </div> |
| `; |
| |
| |
| activeTimeoutTimer = setTimeout(() => { |
| if (isResultProcessed) return; |
| |
| const tvContainer = document.querySelector('.generator-container'); |
| if (tvContainer) { |
| let warnDiv = document.getElementById('timeout-warning-msg'); |
| if (!warnDiv) { |
| warnDiv = document.createElement('div'); |
| warnDiv.id = 'timeout-warning-msg'; |
| warnDiv.style.cssText = "color: var(--danger-color); font-size: 0.95rem; font-weight: 700; text-align: center; margin-top: 15px; padding: 12px; background: rgba(229, 62, 62, 0.1); border-radius: 12px; border: 1px solid rgba(229, 62, 62, 0.3); width: 100%; max-width: 400px; animation: fadeIn 0.5s; line-height: 1.6;"; |
| tvContainer.parentNode.insertBefore(warnDiv, tvContainer.nextSibling); |
| } |
| warnDiv.innerHTML = '⏳ پردازش تصویر بیش از حد طولانی شد.<br>ممکن است سرور شلوغ باشد. میتوانید مجدداً تلاش کنید.'; |
| |
| submitBtn.disabled = false; |
| promptInput.disabled = false; |
| document.getElementById('btn-text').style.display = 'inline-block'; |
| document.querySelector('.spinner').style.display = 'none'; |
| document.getElementById('btn-text').innerHTML = `تلاش مجدد`; |
| } |
| }, 120000); |
| |
| startFakeProgress(50); |
| isResultProcessed = false; |
| |
| const formData = new FormData(); |
| formData.append('image', uploadedFile); |
| formData.append('prompt', originalPrompt); |
| |
| try { |
| const res = await fetch('/api/edit', { |
| method: 'POST', |
| body: formData |
| }); |
| |
| const data = await res.json(); |
| |
| if (data.status === 'success') { |
| activePollTimer = setInterval(async () => { |
| try { |
| const statusRes = await fetch(`/api/status/${data.run_id}`); |
| const statusData = await statusRes.json(); |
| |
| if (statusData.status === 'ready' && !isResultProcessed) { |
| isResultProcessed = true; |
| clearInterval(activePollTimer); |
| clearTimeout(activeTimeoutTimer); |
| finishFakeProgress(); |
| |
| if (userSubscriptionStatus === 'free') { |
| try { |
| await fetch('/api/use-edit-credit', { |
| method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ fingerprint: userFingerprint }) |
| }); |
| checkFreeUserCredit(); |
| } catch (e) { console.error("Error using credit", e); } |
| } |
| |
| const absoluteUrl = window.location.origin + statusData.url; |
| |
| imageResultContainer.innerHTML = ` |
| <div style="font-weight: bold; margin-bottom: 15px; color: var(--accent-primary); text-align:center; font-size: 1.1rem;">ویرایش شما آماده شد! 🎨</div> |
| <div class="generated-image-box"> |
| <img id="result-image-display" src="${statusData.url}" alt="تصویر ویرایش شده"> |
| <button class="download-btn" onclick="triggerDownload('${absoluteUrl}')"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 22px; height: 22px;"><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> |
| دانلود مستقیم تصویر |
| </button> |
| </div> |
| `; |
| |
| |
| try { |
| const imgRes = await fetch(absoluteUrl); |
| if(imgRes.ok) { |
| const blob = await imgRes.blob(); |
| await saveToHistory(blob, originalPrompt); |
| } |
| } catch(e) { |
| console.error('Failed to save history blob', e); |
| } |
| |
| resetBtn(); |
| } |
| } catch(e) { console.error('Polling error', e); } |
| }, 3500); |
| } else { |
| displayError('خطا در ارتباط با گیتهاب سرور.'); |
| } |
| } catch (e) { |
| displayError('خطای اتصال به سرور!'); |
| } |
| }; |
| |
| function displayError(msg) { |
| clearInterval(fakeProgressInterval); |
| clearTimeout(activeTimeoutTimer); |
| imageResultContainer.innerHTML = `<div style="color: var(--danger-color); font-weight:bold; text-align:center; padding: 2rem;">خطا: ${msg}</div>`; |
| resetBtn(); |
| } |
| |
| function resetBtn() { |
| submitBtn.disabled = false; |
| promptInput.disabled = false; |
| document.getElementById('btn-text').style.display = 'inline-block'; |
| document.getElementById('btn-text').textContent = 'ایجاد کن'; |
| document.querySelector('.spinner').style.display = 'none'; |
| checkFormState(); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', async () => { |
| userFingerprint = await getBrowserFingerprint(); |
| parent.postMessage({ type: 'REQUEST_USER_DATA' }, '*'); |
| try { |
| await initDB(); |
| |
| |
| const savedInput = await getInputImage(); |
| if (savedInput) { |
| uploadedFile = savedInput; |
| const reader = new FileReader(); |
| reader.onload = (e) => { previewImage.src = e.target.result; }; |
| reader.readAsDataURL(savedInput); |
| uploadArea.classList.add('has-file'); |
| checkFormState(); |
| } |
| |
| await loadHistory(); |
| } catch (e) { |
| console.error(e); |
| } |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { const canvas = document.getElementById('neural-network-canvas'); if (!canvas) return; const header = canvas.parentElement; const ctx = canvas.getContext('2d'); let particles = []; const particleCount = 20; const maxDistance = 100; const computedStyles = getComputedStyle(document.documentElement); const particleColor = computedStyles.getPropertyValue('--accent-primary').trim(); const lineColor = computedStyles.getPropertyValue('--text-tertiary').trim(); function resizeCanvas() { canvas.width = header.clientWidth; canvas.height = header.clientHeight; init(); } class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (Math.random() - 0.5) * 0.3; this.vy = (Math.random() - 0.5) * 0.3; this.radius = 1.2; } update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) this.vx *= -1; if (this.y < 0 || this.y > canvas.height) this.vy *= -1; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = particleColor; ctx.fill(); } } function init() { particles = []; for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } } function connectParticles() { for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { const dx = particles[i].x - particles[j].x; const dy = particles[i].y - particles[j].y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < maxDistance) { ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.strokeStyle = lineColor; ctx.lineWidth = 0.2; ctx.globalAlpha = 1 - distance / maxDistance; ctx.stroke(); } } } ctx.globalAlpha = 1; } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(particle => { particle.update(); particle.draw(); }); connectParticles(); requestAnimationFrame(animate); } window.addEventListener('resize', resizeCanvas); resizeCanvas(); animate(); }); |
| </script> |
| </body> |
| </html> |
|
|
