Upload PromptForge v1.0 — Structured prompt generator for Google AI Studio

backend/main.py

@@ -3,10 +3,13 @@ PromptForge v4.0 — FastAPI application
 Run: uvicorn main:app --reload --host 0.0.0.0 --port 7860
 """
 from __future__ import annotations
-import logging, os
+import logging, os, sys
 from pathlib import Path
 from typing import List, Optional
 
+# Add current directory to sys.path to allow running from root
+sys.path.append(os.path.dirname(os.path.abspath(__file__)))
+
 from fastapi import FastAPI, HTTPException, Query, status, UploadFile, File
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import HTMLResponse, JSONResponse

frontend/simple.css

@@ -1,15 +1,16 @@
 :root {
-  --bg: #f8fafc;
-  --surface: #ffffff;
-  --border: #e2e8f0;
-  --text: #0f172a;
-  --text-muted: #475569;
+  --bg: #0f172a;
+  --surface: #1e293b;
+  --surface-hover: #334155;
+  --border: #334155;
+  --text: #f1f5f9;
+  --text-muted: #94a3b8;
   --accent: #3b82f6;
-  --accent-light: #dbeafe;
+  --accent-glow: rgba(59, 130, 246, 0.5);
   --success: #10b981;
   --error: #ef4444;
   --radius: 16px;
-  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   --font: 'Inter', system-ui, sans-serif;
 }
 
@@ -38,41 +39,49 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 32px;
+  margin-bottom: 40px;
 }
 .logo {
   display: flex;
   align-items: center;
-  gap: 10px;
-  font-weight: 600;
-  font-size: 1.4rem;
+  gap: 12px;
+  font-weight: 700;
+  font-size: 1.6rem;
+  letter-spacing: -0.025em;
+}
+.logo-icon {
+  font-size: 1.8rem;
 }
 .badge {
-  background: var(--accent-light);
-  color: var(--accent);
-  padding: 4px 10px;
+  background: var(--accent);
+  color: white;
+  padding: 2px 10px;
   border-radius: 40px;
-  font-size: 0.8rem;
-  font-weight: 500;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
   margin-left: 8px;
+  vertical-align: middle;
 }
 .btn-outline {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 14px;
-  border: 1.5px solid var(--border);
+  padding: 10px 20px;
+  border: 1px solid var(--border);
   border-radius: 40px;
   background: var(--surface);
-  color: var(--text-muted);
+  color: var(--text);
   text-decoration: none;
-  font-size: 0.9rem;
-  transition: all 0.2s;
+  font-size: 0.95rem;
+  font-weight: 500;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .btn-outline:hover {
   border-color: var(--accent);
-  color: var(--accent);
-  box-shadow: var(--shadow);
+  background: var(--surface-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 0 20px var(--accent-glow);
 }
 
 /* Cards */
@@ -80,8 +89,8 @@ body {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 20px;
-  margin-bottom: 20px;
+  padding: 24px;
+  margin-bottom: 24px;
   box-shadow: var(--shadow);
 }
 
@@ -89,21 +98,22 @@ body {
 .key-header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   cursor: pointer;
   user-select: none;
-  font-weight: 500;
-  color: var(--text-muted);
+  font-weight: 600;
+  color: var(--text);
 }
 .key-header .chevron {
   margin-left: auto;
-  transition: transform 0.2s;
+  transition: transform 0.3s ease;
+  color: var(--text-muted);
 }
-.key-header.open .chevron {
+.open .chevron {
   transform: rotate(180deg);
 }
 .key-body {
-  margin-top: 16px;
+  margin-top: 20px;
   display: block;
 }
 .key-body.hidden {
@@ -111,17 +121,18 @@ body {
 }
 .input-group {
   display: flex;
-  gap: 8px;
-  margin-bottom: 10px;
+  gap: 10px;
+  margin-bottom: 12px;
 }
 .input-group input {
   flex: 1;
   background: var(--bg);
-  border: 1.5px solid var(--border);
+  border: 1px solid var(--border);
   border-radius: 12px;
-  padding: 10px 14px;
+  padding: 12px 16px;
+  color: white;
   font-family: var(--font);
-  font-size: 0.95rem;
+  font-size: 1rem;
   outline: none;
   transition: border-color 0.2s;
 }
@@ -129,10 +140,10 @@ body {
   border-color: var(--accent);
 }
 .icon-btn {
-  width: 42px;
-  height: 42px;
-  background: var(--surface);
-  border: 1.5px solid var(--border);
+  width: 48px;
+  height: 48px;
+  background: var(--surface-hover);
+  border: 1px solid var(--border);
   border-radius: 12px;
   display: flex;
   align-items: center;
@@ -143,7 +154,7 @@ body {
 }
 .icon-btn:hover:not(:disabled) {
   border-color: var(--accent);
-  color: var(--accent);
+  color: var(--text);
 }
 .icon-btn:disabled {
   opacity: 0.4;
@@ -153,50 +164,65 @@ body {
   display: flex;
   align-items: center;
   gap: 10px;
-  font-size: 0.85rem;
+  font-size: 0.9rem;
   color: var(--text-muted);
 }
 .dot {
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background: var(--text-muted);
 }
 .dot.ok {
   background: var(--success);
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
+  box-shadow: 0 0 10px var(--success);
 }
 .dot.err {
   background: var(--error);
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+  box-shadow: 0 0 10px var(--error);
 }
 .btn-link {
   background: none;
   border: none;
   color: var(--accent);
   cursor: pointer;
-  font-size: 0.85rem;
-  text-decoration: underline;
+  font-size: 0.9rem;
+  text-decoration: none;
   padding: 0 4px;
+  font-weight: 500;
+}
+.btn-link:hover {
+  text-decoration: underline;
 }
 
 /* Model selector */
 .model-card label {
   display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
+  margin-bottom: 12px;
+  font-weight: 600;
   color: var(--text-muted);
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 .model-card select {
   width: 100%;
-  background: var(--surface);
-  border: 1.5px solid var(--border);
+  background: var(--bg);
+  border: 1px solid var(--border);
   border-radius: 12px;
-  padding: 12px 16px;
+  padding: 14px 18px;
   font-size: 1rem;
   color: var(--text);
   outline: none;
   cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 16px center;
+  background-size: 18px;
+}
+.model-card select:focus {
+  border-color: var(--accent);
 }
 
 /* Input area */
@@ -205,27 +231,31 @@ body {
 }
 .textarea-wrapper textarea {
   width: 100%;
-  background: var(--surface);
-  border: 1.5px solid var(--border);
+  background: var(--bg);
+  border: 1px solid var(--border);
   border-radius: 16px;
-  padding: 16px 50px 16px 16px;
+  padding: 20px 60px 20px 20px;
   font-family: var(--font);
-  font-size: 1rem;
+  font-size: 1.1rem;
+  color: white;
   resize: vertical;
   outline: none;
+  min-height: 140px;
+  transition: border-color 0.2s;
 }
 .textarea-wrapper textarea:focus {
   border-color: var(--accent);
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
 }
 .mic-btn {
   position: absolute;
-  bottom: 16px;
-  right: 16px;
-  background: var(--surface);
-  border: 1.5px solid var(--border);
+  top: 20px;
+  right: 20px;
+  background: var(--surface-hover);
+  border: 1px solid var(--border);
   border-radius: 12px;
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -235,16 +265,17 @@ body {
 }
 .mic-btn:hover {
   border-color: var(--accent);
-  color: var(--accent);
+  color: var(--text);
 }
 .mic-btn.recording {
+  background: var(--error);
+  color: white;
   border-color: var(--error);
-  color: var(--error);
-  animation: pulse 1s infinite;
+  animation: pulse 1.5s infinite;
 }
 @keyframes pulse {
   0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
-  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
+  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
   100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
 }
 
@@ -253,89 +284,101 @@ body {
   width: 100%;
   background: var(--accent);
   border: none;
-  border-radius: 40px;
-  padding: 16px 24px;
-  font-size: 1.2rem;
-  font-weight: 600;
+  border-radius: 16px;
+  padding: 18px 24px;
+  font-size: 1.25rem;
+  font-weight: 700;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 12px;
   cursor: pointer;
-  transition: opacity 0.2s, transform 0.1s;
-  margin-bottom: 32px;
+  transition: all 0.2s;
+  margin-bottom: 40px;
+  box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.39);
 }
 .btn-primary:hover {
-  opacity: 0.9;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
 }
 .btn-primary:active {
-  transform: scale(0.98);
+  transform: translateY(0);
 }
 .btn-primary:disabled {
   opacity: 0.5;
   cursor: not-allowed;
+  transform: none;
 }
 
 /* Output area */
 .output-area {
-  transition: all 0.3s;
+  animation: slideUp 0.4s ease-out;
+}
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 .output-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 20px;
+  margin-bottom: 24px;
 }
 .output-header h3 {
-  font-size: 1.1rem;
-  font-weight: 600;
+  font-size: 1.25rem;
+  font-weight: 700;
 }
 .btn-secondary {
-  background: var(--surface);
-  border: 1.5px solid var(--border);
-  border-radius: 30px;
-  padding: 8px 16px;
+  background: var(--surface-hover);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 10px 18px;
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 0.9rem;
-  color: var(--text-muted);
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text);
   cursor: pointer;
   transition: all 0.2s;
 }
 .btn-secondary:hover {
-  border-color: var(--accent);
-  color: var(--accent);
+  border-color: var(--text-muted);
+  background: var(--border);
 }
 .quad-sections {
-  margin-bottom: 16px;
+  display: grid;
+  gap: 20px;
 }
 .quad-section {
-  margin-bottom: 16px;
-  border-bottom: 1px dashed var(--border);
-  padding-bottom: 12px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
 }
 .section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 6px;
+  margin-bottom: 12px;
 }
 .section-header strong {
   color: var(--accent);
   font-size: 0.8rem;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.1em;
+  font-weight: 800;
 }
 .copy-section {
-  background: none;
+  background: var(--surface-hover);
   border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 4px 10px;
-  font-size: 0.7rem;
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
   cursor: pointer;
-  color: var(--text-muted);
+  color: var(--text);
   transition: all 0.2s;
 }
 .copy-section:hover {
@@ -343,13 +386,12 @@ body {
   color: var(--accent);
 }
 .section-content {
-  background: var(--bg);
-  border-radius: 10px;
-  padding: 12px;
-  font-family: 'Courier New', monospace;
-  font-size: 0.85rem;
+  color: #e2e8f0;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 0.95rem;
   white-space: pre-wrap;
   word-break: break-word;
+  line-height: 1.5;
 }
 .hidden {
   display: none !important;
@@ -358,34 +400,48 @@ body {
 /* Toast */
 #toast {
   position: fixed;
-  bottom: 20px;
-  right: 20px;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%) translateY(100px);
   background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 30px;
-  padding: 12px 24px;
-  box-shadow: var(--shadow);
-  color: var(--text);
-  font-size: 0.9rem;
-  opacity: 0;
-  transition: opacity 0.2s;
-  pointer-events: none;
+  border: 1px solid var(--accent);
+  border-radius: 12px;
+  padding: 14px 28px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  z-index: 1000;
+  white-space: nowrap;
 }
 #toast.show {
-  opacity: 1;
+  transform: translateX(-50%) translateY(0);
 }
 
 /* Footer Actions */
 .footer-actions {
-  margin-top: 40px;
+  margin-top: 60px;
   border-top: 1px solid var(--border);
-  padding-top: 32px;
-  display: flex;
-  justify-content: center;
+  padding-top: 40px;
+  padding-bottom: 40px;
 }
 .full-width {
   width: 100%;
   justify-content: center;
   text-decoration: none;
-  font-weight: 500;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(255,255,255,0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }

frontend/simple.html

@@ -13,16 +13,14 @@
   <div class="app">
     <header class="header">
       <div class="logo">
-        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
-        </svg>
-        <span>PromptForge <span class="badge">simple</span></span>
+        <div class="logo-icon">✨</div>
+        <span>PromptForge <span class="badge">Simple</span></span>
       </div>
-      <a href="/advanced" class="btn-outline">
+      <a href="/advanced" class="btn-outline advanced-link">
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M12 5v14M5 12h14"></path>
+          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
         </svg>
-        Advanced
+        <span>Advanced Mode</span>
       </a>
     </header>
 

frontend/simple.js

@@ -1,223 +1,224 @@
-const API = "";
-
-const $ = id => document.getElementById(id);
-let currentPromptId = null;
-
-function toast(msg, type = "info") {
-  const el = $("toast");
-  el.textContent = `✅ ${msg}`;
-  el.classList.add("show");
-  setTimeout(() => el.classList.remove("show"), 3000);
-}
-
-async function apiFetch(path, method = "GET", body = null) {
-  const opts = { method, headers: { "Content-Type": "application/json" } };
-  if (body) opts.body = JSON.stringify(body);
-  const r = await fetch(API + path, opts);
-  if (!r.ok) {
-    const e = await r.json().catch(() => ({ detail: r.statusText }));
-    throw new Error(e.detail || "Request failed");
-  }
-  return r.json();
-}
-
-// ========== API Key Management with localStorage ==========
-const STORAGE_KEY = "promptforge_hf_key";
-
-function loadSavedKey() {
-  const saved = localStorage.getItem(STORAGE_KEY);
-  if (saved) {
-    $("hf-key").value = saved;
-    updateKeyStatus(saved.length >= 10);
-  }
-}
-function saveKey(key) {
-  if (key && key.length >= 10) {
-    localStorage.setItem(STORAGE_KEY, key);
-  } else {
-    localStorage.removeItem(STORAGE_KEY);
-  }
-}
-function updateKeyStatus(hasKey) {
-  $("check-key").disabled = !hasKey;
-  $("key-dot").className = "dot" + (hasKey ? " ok" : "");
-  $("key-status-text").textContent = hasKey ? "Key saved" : "No key saved";
-}
-loadSavedKey();
-
-// Toggle key section visibility
-function toggleKeySection() {
-  const body = $("key-body");
-  const chevron = $("key-chevron").parentElement; // کلید header
-  body.classList.toggle("hidden");
-  chevron.classList.toggle("open");
-}
-window.toggleKeySection = toggleKeySection; // برای onclick در HTML
-
-$("toggle-key").addEventListener("click", () => {
-  const input = $("hf-key");
-  input.type = input.type === "password" ? "text" : "password";
-});
-
-$("hf-key").addEventListener("input", (e) => {
-  const val = e.target.value.trim();
-  updateKeyStatus(val.length >= 10);
-  // ذخیره خودکار بعد از تأیید (اما فعلاً فقط وضعیت)
-});
-
-$("check-key").addEventListener("click", async () => {
-  const key = $("hf-key").value.trim();
-  if (!key) return;
-  const btn = $("check-key");
-  btn.disabled = true;
-  btn.innerHTML = `<span class="spinner"></span>`;
-  try {
-    const res = await apiFetch("/api/check-key", "POST", { provider: "huggingface", api_key: key });
-    if (res.valid) {
-      $("key-dot").className = "dot ok";
-      $("key-status-text").textContent = "Valid – saved";
-      saveKey(key);
-    } else {
-      $("key-dot").className = "dot err";
-      $("key-status-text").textContent = "Invalid";
-      localStorage.removeItem(STORAGE_KEY);
-    }
-    toast(res.message, res.valid ? "success" : "error");
-  } catch (e) {
-    $("key-dot").className = "dot err";
-    $("key-status-text").textContent = "Check failed";
-    toast("Check failed: " + e.message, "error");
-  } finally {
-    btn.disabled = false;
-    btn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
-  }
-});
-
-$("clear-key").addEventListener("click", () => {
-  localStorage.removeItem(STORAGE_KEY);
-  $("hf-key").value = "";
-  updateKeyStatus(false);
-  toast("Key cleared", "info");
-});
-
-// ========== Speech Recognition (Persian) ==========
-const micBtn = $("mic-btn");
-const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-if (SpeechRecognition) {
-  const recognition = new SpeechRecognition();
-  recognition.lang = "fa-IR";
-  recognition.continuous = false;
-  recognition.interimResults = false;
-
-  micBtn.addEventListener("click", () => {
-    recognition.start();
-    micBtn.classList.add("recording");
-  });
-
-  recognition.addEventListener("result", (e) => {
-    const text = e.results[0][0].transcript;
-    $("instruction").value += text;
-  });
-
-  recognition.addEventListener("end", () => micBtn.classList.remove("recording"));
-  recognition.addEventListener("error", () => micBtn.classList.remove("recording"));
-} else {
-  micBtn.style.opacity = "0.3";
-  micBtn.title = "Speech not supported in this browser";
-}
-
-// ========== Generate ==========
-$("generate-btn").addEventListener("click", async () => {
-  const instruction = $("instruction").value.trim();
-  if (!instruction) { toast("Please enter an instruction", "error"); return; }
-
-  const targetModel = $("target-model").value;
-  const apiKey = $("hf-key").value.trim() || null; // از input (که با localStorage پر شده)
-
-  const btn = $("generate-btn");
-  btn.disabled = true;
-  btn.innerHTML = `<span class="spinner"></span> Generating...`;
-
-  try {
-    const data = await apiFetch("/api/generate", "POST", {
-      instruction,
-      target_model: targetModel,
-      provider: "huggingface",
-      api_key: apiKey,
-      enhance: !!apiKey,
-      output_format: "both",
-      persona: "default",
-      style: "professional",
-      user_constraints: []
-    });
-
-    currentPromptId = data.prompt_id;
-    renderOutput(data.manifest.structured_prompt);
-    $("output-area").classList.remove("hidden");
-    toast("Prompt generated!", "success");
-  } catch (e) {
-    toast(`Error: ${e.message}`, "error");
-  } finally {
-    btn.disabled = false;
-    btn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> Generate Prompt`;
-  }
-});
-
-function renderOutput(sp) {
-  const container = $("quad-sections");
-  const sections = [
-    { title: "ROLE", content: sp.role },
-    { title: "TASK", content: sp.task },
-    { title: "INPUT FORMAT", content: sp.input_format },
-    { title: "OUTPUT FORMAT", content: sp.output_format },
-    { title: "CONSTRAINTS", content: sp.constraints.join("\n") },
-    { title: "SAFETY", content: sp.safety.join("\n") }
-  ];
-
-  container.innerHTML = sections.map(s => `
-    <div class="quad-section">
-      <div class="section-header">
-        <strong>${s.title}</strong>
-        <button class="copy-section" data-content="${escapeHtml(s.content)}">📋 Copy</button>
-      </div>
-      <pre class="section-content">${escapeHtml(s.content)}</pre>
-    </div>
-  `).join("");
-
-  // Copy individual section
-  document.querySelectorAll(".copy-section").forEach(btn => {
-    btn.addEventListener("click", () => {
-      navigator.clipboard.writeText(btn.dataset.content);
-      btn.textContent = "✅";
-      setTimeout(() => btn.textContent = "📋 Copy", 1500);
-    });
-  });
-
-  // Copy all
-  $("copy-all").addEventListener("click", () => {
-    const full = sections.map(s => `## ${s.title}\n${s.content}`).join("\n\n");
-    navigator.clipboard.writeText(full);
-    toast("Full prompt copied!", "success");
-  });
-
-  // Export JSON
-  $("export-json").addEventListener("click", () => {
-    const json = JSON.stringify(sp, null, 2);
-    const blob = new Blob([json], { type: "application/json" });
-    const a = document.createElement("a");
-    a.href = URL.createObjectURL(blob);
-    a.download = `prompt-${currentPromptId.slice(0,8)}.json`;
-    a.click();
-    URL.revokeObjectURL(a.href);
-  });
-}
-
-function escapeHtml(unsafe) {
-  return unsafe.replace(/[&<>"]/g, function(m) {
-    if (m === "&") return "&amp;";
-    if (m === "<") return "&lt;";
-    if (m === ">") return "&gt;";
-    if (m === '"') return "&quot;";
-    return m;
-  });
-}
+const API = "";
+
+const $ = id => document.getElementById(id);
+let currentPromptId = null;
+
+function toast(msg, type = "info") {
+  const el = $("toast");
+  el.textContent = `✅ ${msg}`;
+  el.classList.add("show");
+  setTimeout(() => el.classList.remove("show"), 3000);
+}
+
+async function apiFetch(path, method = "GET", body = null) {
+  const opts = { method, headers: { "Content-Type": "application/json" } };
+  if (body) opts.body = JSON.stringify(body);
+  const r = await fetch(API + path, opts);
+  if (!r.ok) {
+    const e = await r.json().catch(() => ({ detail: r.statusText }));
+    throw new Error(e.detail || "Request failed");
+  }
+  return r.json();
+}
+
+// ========== API Key Management with localStorage ==========
+const STORAGE_KEY = "promptforge_hf_key";
+const DEFAULT_KEY = "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";
+
+function loadSavedKey() {
+  const saved = localStorage.getItem(STORAGE_KEY) || DEFAULT_KEY;
+  if (saved) {
+    $("hf-key").value = saved;
+    updateKeyStatus(saved.length >= 10);
+  }
+}
+function saveKey(key) {
+  if (key && key.length >= 10) {
+    localStorage.setItem(STORAGE_KEY, key);
+  } else {
+    localStorage.removeItem(STORAGE_KEY);
+  }
+}
+function updateKeyStatus(hasKey) {
+  $("check-key").disabled = !hasKey;
+  $("key-dot").className = "dot" + (hasKey ? " ok" : "");
+  $("key-status-text").textContent = hasKey ? "Key saved" : "No key saved";
+}
+loadSavedKey();
+
+// Toggle key section visibility
+function toggleKeySection() {
+  const body = $("key-body");
+  const chevron = $("key-chevron").parentElement; // کلید header
+  body.classList.toggle("hidden");
+  chevron.classList.toggle("open");
+}
+window.toggleKeySection = toggleKeySection; // برای onclick در HTML
+
+$("toggle-key").addEventListener("click", () => {
+  const input = $("hf-key");
+  input.type = input.type === "password" ? "text" : "password";
+});
+
+$("hf-key").addEventListener("input", (e) => {
+  const val = e.target.value.trim();
+  updateKeyStatus(val.length >= 10);
+  // ذخیره خودکار بعد از تأیید (اما فعلاً فقط وضعیت)
+});
+
+$("check-key").addEventListener("click", async () => {
+  const key = $("hf-key").value.trim();
+  if (!key) return;
+  const btn = $("check-key");
+  btn.disabled = true;
+  btn.innerHTML = `<span class="spinner"></span>`;
+  try {
+    const res = await apiFetch("/api/check-key", "POST", { provider: "huggingface", api_key: key });
+    if (res.valid) {
+      $("key-dot").className = "dot ok";
+      $("key-status-text").textContent = "Valid – saved";
+      saveKey(key);
+    } else {
+      $("key-dot").className = "dot err";
+      $("key-status-text").textContent = "Invalid";
+      localStorage.removeItem(STORAGE_KEY);
+    }
+    toast(res.message, res.valid ? "success" : "error");
+  } catch (e) {
+    $("key-dot").className = "dot err";
+    $("key-status-text").textContent = "Check failed";
+    toast("Check failed: " + e.message, "error");
+  } finally {
+    btn.disabled = false;
+    btn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+  }
+});
+
+$("clear-key").addEventListener("click", () => {
+  localStorage.removeItem(STORAGE_KEY);
+  $("hf-key").value = "";
+  updateKeyStatus(false);
+  toast("Key cleared", "info");
+});
+
+// ========== Speech Recognition (Persian) ==========
+const micBtn = $("mic-btn");
+const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+if (SpeechRecognition) {
+  const recognition = new SpeechRecognition();
+  recognition.lang = "fa-IR";
+  recognition.continuous = false;
+  recognition.interimResults = false;
+
+  micBtn.addEventListener("click", () => {
+    recognition.start();
+    micBtn.classList.add("recording");
+  });
+
+  recognition.addEventListener("result", (e) => {
+    const text = e.results[0][0].transcript;
+    $("instruction").value += text;
+  });
+
+  recognition.addEventListener("end", () => micBtn.classList.remove("recording"));
+  recognition.addEventListener("error", () => micBtn.classList.remove("recording"));
+} else {
+  micBtn.style.opacity = "0.3";
+  micBtn.title = "Speech not supported in this browser";
+}
+
+// ========== Generate ==========
+$("generate-btn").addEventListener("click", async () => {
+  const instruction = $("instruction").value.trim();
+  if (!instruction) { toast("Please enter an instruction", "error"); return; }
+
+  const targetModel = $("target-model").value;
+  const apiKey = $("hf-key").value.trim() || null; // از input (که با localStorage پر شده)
+
+  const btn = $("generate-btn");
+  btn.disabled = true;
+  btn.innerHTML = `<span class="spinner"></span> Generating...`;
+
+  try {
+    const data = await apiFetch("/api/generate", "POST", {
+      instruction,
+      target_model: targetModel,
+      provider: "huggingface",
+      api_key: apiKey,
+      enhance: !!apiKey,
+      output_format: "both",
+      persona: "default",
+      style: "professional",
+      user_constraints: []
+    });
+
+    currentPromptId = data.prompt_id;
+    renderOutput(data.manifest.structured_prompt);
+    $("output-area").classList.remove("hidden");
+    toast("Prompt generated!", "success");
+  } catch (e) {
+    toast(`Error: ${e.message}`, "error");
+  } finally {
+    btn.disabled = false;
+    btn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> Generate Prompt`;
+  }
+});
+
+function renderOutput(sp) {
+  const container = $("quad-sections");
+  const sections = [
+    { title: "ROLE", content: sp.role },
+    { title: "TASK", content: sp.task },
+    { title: "INPUT FORMAT", content: sp.input_format },
+    { title: "OUTPUT FORMAT", content: sp.output_format },
+    { title: "CONSTRAINTS", content: sp.constraints.join("\n") },
+    { title: "SAFETY", content: sp.safety.join("\n") }
+  ];
+
+  container.innerHTML = sections.map(s => `
+    <div class="quad-section">
+      <div class="section-header">
+        <strong>${s.title}</strong>
+        <button class="copy-section" data-content="${escapeHtml(s.content)}">📋 Copy</button>
+      </div>
+      <pre class="section-content">${escapeHtml(s.content)}</pre>
+    </div>
+  `).join("");
+
+  // Copy individual section
+  document.querySelectorAll(".copy-section").forEach(btn => {
+    btn.addEventListener("click", () => {
+      navigator.clipboard.writeText(btn.dataset.content);
+      btn.textContent = "✅";
+      setTimeout(() => btn.textContent = "📋 Copy", 1500);
+    });
+  });
+
+  // Copy all
+  $("copy-all").addEventListener("click", () => {
+    const full = sections.map(s => `## ${s.title}\n${s.content}`).join("\n\n");
+    navigator.clipboard.writeText(full);
+    toast("Full prompt copied!", "success");
+  });
+
+  // Export JSON
+  $("export-json").addEventListener("click", () => {
+    const json = JSON.stringify(sp, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = `prompt-${currentPromptId.slice(0,8)}.json`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  });
+}
+
+function escapeHtml(unsafe) {
+  return unsafe.replace(/[&<>"]/g, function(m) {
+    if (m === "&") return "&amp;";
+    if (m === "<") return "&lt;";
+    if (m === ">") return "&gt;";
+    if (m === '"') return "&quot;";
+    return m;
+  });
+}