script.js

// ==================== Configuration ====================
const CONFIG = {
  apiUrl: "http://127.0.0.1:8045/v1",
  apiKey: "sk-5dddd30292e943a2bb7a88e127a1917d",
  model: "gemini-3-pro-image",
  maxHistoryItems: 12,
};

// ==================== State Management ====================
const state = {
  currentPrompt: "",
  currentSize: "1024x1024",
  generatedImages: [],
};

// ==================== DOM Elements ====================
const elements = {
  form: document.getElementById("generatorForm"),
  promptInput: document.getElementById("prompt"),
  generateBtn: document.getElementById("generateBtn"),
  emptyState: document.getElementById("emptyState"),
  loadingState: document.getElementById("loadingState"),
  resultState: document.getElementById("resultState"),
  errorState: document.getElementById("errorState"),
  resultImage: document.getElementById("resultImage"),
  resultPrompt: document.getElementById("resultPrompt"),
  resultSize: document.getElementById("resultSize"),
  resultTime: document.getElementById("resultTime"),
  errorMessage: document.getElementById("errorMessage"),
  retryBtn: document.getElementById("retryBtn"),
  downloadBtn: document.getElementById("downloadBtn"),
  copyBtn: document.getElementById("copyBtn"),
  galleryGrid: document.getElementById("galleryGrid"),
  galleryEmpty: document.getElementById("galleryEmpty"),
  clearGalleryBtn: document.getElementById("clearGalleryBtn"),
  toast: document.getElementById("toast"),
  toastText: document.getElementById("toastText"),
  confirmModal: document.getElementById("confirmModal"),
  confirmTitle: document.getElementById("confirmTitle"),
  confirmMessage: document.getElementById("confirmMessage"),
  confirmOk: document.getElementById("confirmOk"),
  confirmCancel: document.getElementById("confirmCancel"),
};

// ==================== Utility Functions ====================
function showToast(message) {
  elements.toastText.textContent = message;
  elements.toast.classList.remove("hidden");

  setTimeout(() => {
    elements.toast.classList.add("hidden");
  }, 3000);
}

// Custom confirm dialog
function showConfirm(title, message) {
  return new Promise((resolve) => {
    elements.confirmTitle.textContent = title;
    elements.confirmMessage.textContent = message;
    elements.confirmModal.classList.remove("hidden");

    // 防止重复绑定事件
    const handleOk = () => {
      cleanup();
      resolve(true);
    };

    const handleCancel = () => {
      cleanup();
      resolve(false);
    };

    const handleOverlayClick = (e) => {
      if (e.target === elements.confirmModal) {
        cleanup();
        resolve(false);
      }
    };

    const cleanup = () => {
      elements.confirmModal.classList.add("hidden");
      elements.confirmOk.removeEventListener("click", handleOk);
      elements.confirmCancel.removeEventListener("click", handleCancel);
      elements.confirmModal.removeEventListener("click", handleOverlayClick);
    };

    elements.confirmOk.addEventListener("click", handleOk);
    elements.confirmCancel.addEventListener("click", handleCancel);
    elements.confirmModal.addEventListener("click", handleOverlayClick);
  });
}

function formatTime(date) {
  const now = new Date();
  const diff = now - date;
  const seconds = Math.floor(diff / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);

  if (days > 0) return `${days}天前`;
  if (hours > 0) return `${hours}小时前`;
  if (minutes > 0) return `${minutes}分钟前`;
  return "刚刚";
}

function setState(newState) {
  // Hide all states
  elements.emptyState.classList.add("hidden");
  elements.loadingState.classList.add("hidden");
  elements.resultState.classList.add("hidden");
  elements.errorState.classList.add("hidden");

  // Show the requested state
  switch (newState) {
    case "empty":
      elements.emptyState.classList.remove("hidden");
      break;
    case "loading":
      elements.loadingState.classList.remove("hidden");
      break;
    case "result":
      elements.resultState.classList.remove("hidden");
      break;
    case "error":
      elements.errorState.classList.remove("hidden");
      break;
  }
}

function saveToLocalStorage() {
  try {
    localStorage.setItem(
      "generatedImages",
      JSON.stringify(state.generatedImages)
    );
  } catch (error) {
    console.error("Failed to save to localStorage:", error);
  }
}

function loadFromLocalStorage() {
  try {
    const saved = localStorage.getItem("generatedImages");
    if (saved) {
      state.generatedImages = JSON.parse(saved);
      renderGallery();
    }
  } catch (error) {
    console.error("Failed to load from localStorage:", error);
  }
}

// ==================== API Functions ====================
async function generateImage(prompt, size) {
  const response = await fetch(`${CONFIG.apiUrl}/chat/completions`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${CONFIG.apiKey}`,
    },
    body: JSON.stringify({
      model: CONFIG.model,
      messages: [
        {
          role: "user",
          content: prompt,
        },
      ],
      extra_body: {
        size: size,
      },
    }),
  });

  if (!response.ok) {
    const errorData = await response.json().catch(() => ({}));
    throw new Error(
      errorData.error?.message ||
        `HTTP ${response.status}: ${response.statusText}`
    );
  }

  const data = await response.json();

  if (!data.choices || !data.choices[0] || !data.choices[0].message) {
    throw new Error("Invalid response format from API");
  }

  let imageContent = data.choices[0].message.content;

  if (!imageContent) {
    throw new Error("No image content in response");
  }

  // 解析 markdown 格式的图片链接: ![image](data:image/...)
  // 或者直接返回的 base64 data URL
  let imageUrl = imageContent;
  
  // 检查是否是 markdown 格式
  const markdownImageRegex = /!\[.*?\]\((data:image\/[^)]+)\)/;
  const match = imageContent.match(markdownImageRegex);
  
  if (match && match[1]) {
    // 提取 markdown 中的 data URL
    imageUrl = match[1];
  } else if (!imageContent.startsWith('data:image/') && !imageContent.startsWith('http')) {
    // 如果既不是 data URL 也不是 http URL，可能是纯 base64
    // 尝试添加 data URL 前缀
    if (imageContent.match(/^[A-Za-z0-9+/=]+$/)) {
      imageUrl = `data:image/png;base64,${imageContent}`;
    }
  }

  return imageUrl;
}

// ==================== Image Generation ====================
async function handleGenerate(event) {
  event.preventDefault();

  const prompt = elements.promptInput.value.trim();
  const sizeRadio = document.querySelector('input[name="size"]:checked');
  const size = sizeRadio ? sizeRadio.value : "1024x1024";

  if (!prompt) {
    showToast("请输入图片描述");
    return;
  }

  state.currentPrompt = prompt;
  state.currentSize = size;

  // Update UI
  setState("loading");
  elements.generateBtn.disabled = true;
  elements.generateBtn.classList.add("loading");

  try {
    const startTime = Date.now();
    const imageUrl = await generateImage(prompt, size);
    const endTime = Date.now();
    const duration = ((endTime - startTime) / 1000).toFixed(1);

    // Display result
    elements.resultImage.src = imageUrl;
    elements.resultPrompt.textContent = prompt;
    elements.resultSize.textContent = size;
    elements.resultTime.textContent = `${duration}秒`;
    setState("result");

    // Save to history
    const imageData = {
      id: Date.now(),
      prompt,
      size,
      url: imageUrl,
      timestamp: new Date().toISOString(),
    };

    state.generatedImages.unshift(imageData);

    // Keep only the latest items
    if (state.generatedImages.length > CONFIG.maxHistoryItems) {
      state.generatedImages = state.generatedImages.slice(
        0,
        CONFIG.maxHistoryItems
      );
    }

    saveToLocalStorage();
    renderGallery();

    showToast("图片生成成功！");
  } catch (error) {
    console.error("Generation error:", error);
    elements.errorMessage.textContent = error.message || "生成失败，请稍后重试";
    setState("error");
    showToast("生成失败");
  } finally {
    elements.generateBtn.disabled = false;
    elements.generateBtn.classList.remove("loading");
  }
}

// ==================== Gallery Functions ====================
function renderGallery() {
  if (state.generatedImages.length === 0) {
    elements.galleryGrid.innerHTML = "";
    elements.galleryEmpty.classList.remove("hidden");
    return;
  }

  elements.galleryEmpty.classList.add("hidden");

  elements.galleryGrid.innerHTML = state.generatedImages
    .map(
      (image) => `
        <div class="gallery-item" data-id="${image.id}">
            <img src="${image.url}" alt="${
        image.prompt
      }" class="gallery-item-image" loading="lazy">
            <div class="gallery-item-info">
                <div class="gallery-item-prompt">${image.prompt}</div>
                <div class="gallery-item-meta">
                    ${image.size} • ${formatTime(new Date(image.timestamp))}
                </div>
            </div>
        </div>
    `
    )
    .join("");

  // Add click handlers
  document.querySelectorAll(".gallery-item").forEach((item) => {
    item.addEventListener("click", () => {
      const id = parseInt(item.dataset.id);
      const image = state.generatedImages.find((img) => img.id === id);
      if (image) {
        displayImage(image);
        // Scroll to result
        document
          .querySelector("#generator")
          .scrollIntoView({ behavior: "smooth" });
      }
    });
  });
}

function displayImage(imageData) {
  elements.resultImage.src = imageData.url;
  elements.resultPrompt.textContent = imageData.prompt;
  elements.resultSize.textContent = imageData.size;
  elements.resultTime.textContent = formatTime(new Date(imageData.timestamp));
  setState("result");
}

async function clearGallery() {
  const confirmed = await showConfirm(
    "清空历史记录",
    "确定要清空所有历史记录吗?此操作无法撤销。"
  );
  
  if (confirmed) {
    state.generatedImages = [];
    saveToLocalStorage();
    renderGallery();
    setState("empty");
    showToast("历史记录已清空");
  }
}


// ==================== Download & Copy Functions ====================
async function downloadImage() {
  try {
    const imageUrl = elements.resultImage.src;
    const response = await fetch(imageUrl);
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);

    const a = document.createElement("a");
    a.href = url;
    a.download = `ai-image-${Date.now()}.png`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);

    showToast("图片下载成功");
  } catch (error) {
    console.error("Download error:", error);
    showToast("下载失败");
  }
}

async function copyImageUrl() {
  try {
    const imageUrl = elements.resultImage.src;
    await navigator.clipboard.writeText(imageUrl);
    showToast("链接已复制到剪贴板");
  } catch (error) {
    console.error("Copy error:", error);
    showToast("复制失败");
  }
}

// ==================== Event Listeners ====================
elements.form.addEventListener("submit", handleGenerate);
elements.retryBtn.addEventListener("click", handleGenerate);
elements.downloadBtn.addEventListener("click", downloadImage);
elements.copyBtn.addEventListener("click", copyImageUrl);
elements.clearGalleryBtn.addEventListener("click", clearGallery);

// Size card selection visual feedback
document.querySelectorAll(".size-card").forEach((card) => {
  card.addEventListener("click", () => {
    const radio = card.querySelector('input[type="radio"]');
    if (radio) {
      radio.checked = true;
    }
  });
});

// Smooth scroll for navigation links
document.querySelectorAll(".nav-link").forEach((link) => {
  link.addEventListener("click", (e) => {
    e.preventDefault();
    const targetId = link.getAttribute("href");
    const targetElement = document.querySelector(targetId);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: "smooth" });
    }
  });
});

// ==================== Initialization ====================
function init() {
  loadFromLocalStorage();
  setState("empty");

  console.log("AI Image Generator initialized");
  console.log(`API: ${CONFIG.apiUrl}`);
  console.log(`Model: ${CONFIG.model}`);
}

// Start the application
init();