diff --git a/.DS_Store b/.DS_Store
index 3541bb7..fe0b8b9 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
index 2c49d8b..6261338 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
.DS_Store
.DS_Store
.DS_Store
+/.venv
diff --git a/run_app.command b/run_app.command
new file mode 100755
index 0000000..942f0f1
--- /dev/null
+++ b/run_app.command
@@ -0,0 +1,17 @@
+# /opt/miniconda3/bin/python is required by the user
+#!/bin/zsh
+cd "$(dirname "$0")"
+PYTHON_BIN="/opt/miniconda3/bin/python"
+
+# Create a virtual environment if missing, then activate it
+if [[ ! -d ".venv" ]]; then
+ "$PYTHON_BIN" -m venv .venv
+fi
+
+source .venv/bin/activate
+
+# Ensure dependencies are available (skip reinstall if up-to-date)
+pip install -r requirements.txt
+
+# Start the Flask app on port 8888
+exec .venv/bin/python app.py
diff --git a/static/script.js b/static/script.js
index ea86617..2205da3 100644
--- a/static/script.js
+++ b/static/script.js
@@ -23,6 +23,11 @@ document.addEventListener('DOMContentLoaded', () => {
let cachedReferenceImages = [];
const imageDisplayArea = document.querySelector('.image-display-area');
const canvasToolbar = document.querySelector('.canvas-toolbar');
+ const popupOverlay = document.getElementById('popup-overlay');
+ const popupTitleEl = document.getElementById('popup-title');
+ const popupBodyEl = document.getElementById('popup-body');
+ const popupCloseBtn = document.getElementById('popup-close');
+ const popupButtons = document.querySelectorAll('[data-popup-target]');
const ZOOM_STEP = 0.1;
const MIN_ZOOM = 0.4;
const MAX_ZOOM = 4;
@@ -31,6 +36,48 @@ document.addEventListener('DOMContentLoaded', () => {
let isPanning = false;
let lastPointer = { x: 0, y: 0 };
+ const infoContent = {
+ title: 'Thông tin',
+ sections: [
+ {
+ heading: 'Liên hệ',
+ items: [
+ 'Người tạo: Phạm Hưng',
+ 'Group: SDVN - Cộng đồng AI Art',
+ 'Website: sdvn.vn',
+ ],
+ },
+ ],
+ };
+
+ const docsContent = {
+ title: 'Phím tắt và mẹo',
+ sections: [
+ {
+ heading: 'Phím tắt',
+ items: [
+ 'Ctrl/Cmd + Enter → tạo ảnh mới',
+ 'D → tải ảnh hiện tại',
+ 'R → reset zoom/pan vùng hiển thị ảnh',
+ 'Esc → đóng popup thông tin/docs',
+ ],
+ },
+ {
+ heading: 'Thao tác nhanh',
+ items: [
+ 'Kéo ảnh từ lịch sử vào ô tham chiếu để tái sử dụng',
+ 'Tùy chỉnh tỉ lệ và độ phân giải trước khi nhấn Generate',
+ 'API key và prompt được lưu để lần sau không phải nhập lại',
+ ],
+ },
+ ],
+ };
+
+ const POPUP_CONTENT = {
+ info: infoContent,
+ docs: docsContent,
+ };
+
// Load gallery on start
loadSettings();
initializeImageInputs();
@@ -189,11 +236,20 @@ document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.gallery-item').forEach(el => el.classList.remove('active'));
div.classList.add('active');
};
-
+
const img = document.createElement('img');
img.src = withCacheBuster(imageUrl);
img.loading = 'lazy';
-
+ img.draggable = true;
+ img.dataset.source = imageUrl;
+ img.addEventListener('dragstart', event => {
+ event.dataTransfer?.setData('text/uri-list', imageUrl);
+ event.dataTransfer?.setData('text/plain', imageUrl);
+ if (event.dataTransfer) {
+ event.dataTransfer.effectAllowed = 'copy';
+ }
+ });
+
div.appendChild(img);
galleryGrid.appendChild(div);
});
@@ -456,12 +512,19 @@ document.addEventListener('DOMContentLoaded', () => {
slot.classList.remove('drag-over');
});
- slot.addEventListener('drop', event => {
+ slot.addEventListener('drop', async event => {
event.preventDefault();
slot.classList.remove('drag-over');
const file = event.dataTransfer?.files?.[0];
if (file) {
handleSlotFile(index, file);
+ return;
+ }
+
+ const imageUrl = event.dataTransfer?.getData('text/uri-list')
+ || event.dataTransfer?.getData('text/plain');
+ if (imageUrl) {
+ await handleSlotDropFromHistory(index, imageUrl);
}
});
@@ -493,6 +556,24 @@ document.addEventListener('DOMContentLoaded', () => {
reader.readAsDataURL(file);
}
+ async function handleSlotDropFromHistory(index, imageUrl) {
+ try {
+ const response = await fetch(withCacheBuster(imageUrl));
+ if (!response.ok) {
+ console.warn('Failed to fetch history image', response.statusText);
+ return;
+ }
+
+ const blob = await response.blob();
+ const name = imageUrl.split('/').pop()?.split('?')[0] || `history-${index + 1}.png`;
+ const type = blob.type || 'image/png';
+ const file = new File([blob], name, { type });
+ handleSlotFile(index, file);
+ } catch (error) {
+ console.error('Unable to import history image', error);
+ }
+ }
+
function updateSlotVisual(index) {
const slotRecord = imageSlotState[index];
if (!slotRecord) return;
@@ -580,4 +661,57 @@ document.addEventListener('DOMContentLoaded', () => {
return null;
}
}
+
+ popupButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ const target = button.dataset.popupTarget;
+ if (target) {
+ showPopup(target);
+ }
+ });
+ });
+
+ if (popupCloseBtn) {
+ popupCloseBtn.addEventListener('click', closePopup);
+ }
+
+ if (popupOverlay) {
+ popupOverlay.addEventListener('click', event => {
+ if (event.target === popupOverlay) {
+ closePopup();
+ }
+ });
+ }
+
+ document.addEventListener('keydown', event => {
+ if (event.key === 'Escape' && popupOverlay && !popupOverlay.classList.contains('hidden')) {
+ event.preventDefault();
+ closePopup();
+ }
+ });
+
+ function showPopup(type) {
+ const content = POPUP_CONTENT[type];
+ if (!content || !popupOverlay || !popupBodyEl || !popupTitleEl) return;
+
+ popupTitleEl.textContent = content.title;
+ popupBodyEl.innerHTML = content.sections
+ .map(section => {
+ const items = (section.items || []).map(item => `${item}`).join('');
+ return `
+
+ `;
+ })
+ .join('');
+
+ popupOverlay.classList.remove('hidden');
+ }
+
+ function closePopup() {
+ if (!popupOverlay) return;
+ popupOverlay.classList.add('hidden');
+ }
});
diff --git a/static/sdvn-logo.png b/static/sdvn-logo.png
new file mode 100644
index 0000000..303067a
Binary files /dev/null and b/static/sdvn-logo.png differ
diff --git a/static/style.css b/static/style.css
index e5c2d38..0486df4 100644
--- a/static/style.css
+++ b/static/style.css
@@ -63,7 +63,7 @@ body {
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: row;
- justify-content: space-between;
+ justify-content: flex-end;
align-items: center;
gap: 0.75rem;
padding: 1rem;
@@ -111,28 +111,6 @@ body {
cursor: not-allowed;
}
-.toolbar-generate {
- display: flex;
- align-items: center;
- gap: 0.35rem;
-}
-
-.toolbar-generate #generate-btn {
- padding: 0.4rem 1rem;
- font-size: 0.95rem;
- height: 28px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- border-radius: 0.45rem;
- min-width: 90px;
-}
-
-.toolbar-generate #generate-btn {
- padding: 0.35rem 0.9rem;
- font-size: 0.85rem;
- line-height: 1.1;
-}
.brand {
margin-bottom: 2rem;
@@ -148,18 +126,51 @@ body {
}
.badge {
- font-size: 0.75rem;
- background-color: rgba(245, 197, 24, 0.15);
+ font-size: 0.5rem;
+ /* background-color: rgba(245, 197, 24, 0.15); */
color: var(--accent-color);
- padding: 0.25rem 0.5rem;
- border-radius: 999px;
+ padding: 0.2rem 0.3rem;
+ /* border-radius: 999px; */
font-weight: 600;
}
.controls-section {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ flex: 1;
+ min-height: 0;
+}
+
+.controls-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
+ flex: 1;
+ min-height: 0;
+ overflow-y: auto;
+}
+
+.controls-footer {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.controls-footer #generate-btn {
+ padding: 0.4rem 1rem;
+ font-size: 0.95rem;
+ height: 28px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 0.45rem;
+ min-width: 90px;
+}
+
+.controls-footer #generate-btn {
+ padding: 0.35rem 0.9rem;
+ font-size: 0.85rem;
+ line-height: 1.1;
}
.input-group {
@@ -517,6 +528,95 @@ button#generate-btn:disabled {
color: inherit;
}
+.popup-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(3, 3, 10, 0.75);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 50;
+ padding: 1rem;
+}
+
+.popup-card {
+ width: min(520px, 100%);
+ background: rgba(10, 11, 22, 0.96);
+ border: 1px solid var(--border-color);
+ border-radius: 1rem;
+ box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
+ padding: 1.25rem;
+}
+
+.popup-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.popup-header h2 {
+ font-size: 1rem;
+ letter-spacing: 0.3px;
+ color: var(--text-primary);
+}
+
+.popup-close {
+ border: none;
+ background: rgba(255, 255, 255, 0.08);
+ color: var(--text-primary);
+ width: 32px;
+ height: 32px;
+ border-radius: 999px;
+ cursor: pointer;
+ font-size: 1.25rem;
+ line-height: 1;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.popup-close:hover {
+ background: rgba(255, 255, 255, 0.18);
+}
+
+.popup-body {
+ margin-top: 0.75rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.popup-section h3 {
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+ margin-bottom: 0.35rem;
+ letter-spacing: 0.5px;
+ text-transform: uppercase;
+}
+
+.popup-section ul {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ gap: 0.35rem;
+ padding-left: 0;
+}
+
+.popup-section li {
+ font-size: 0.8rem;
+ color: var(--text-primary);
+ padding-left: 1rem;
+ position: relative;
+}
+
+.popup-section li::before {
+ content: '•';
+ position: absolute;
+ left: 0;
+ color: var(--accent-color);
+}
+
/* Gallery Section */
.history-section {
border-radius: 1.25rem;
diff --git a/templates/index.html b/templates/index.html
index 6521467..6b20d7b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,6 +5,7 @@
aPix Image Workspace
+
@@ -15,69 +16,68 @@