Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PromptForge · Simple</title> | |
| <link rel="stylesheet" href="/static/simple.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <header class="header"> | |
| <div class="logo"> | |
| <div class="logo-icon">✨</div> | |
| <span>PromptForge <span class="badge">Simple</span></span> | |
| </div> | |
| <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 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> | |
| </svg> | |
| <span>Advanced Mode</span> | |
| </a> | |
| </header> | |
| <main> | |
| <!-- API Key section with localStorage --> | |
| <div class="card key-card"> | |
| <div class="key-header" onclick="toggleKeySection()"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M21 2l-2 2m-7.5 7.5a5 5 0 1 1-7 7 5 5 0 0 1 7-7zM12 12l6-6"></path> | |
| </svg> | |
| <span>Hugging Face API Key</span> | |
| <svg class="chevron" id="key-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polyline points="6 9 12 15 18 9"></polyline> | |
| </svg> | |
| </div> | |
| <div class="key-body" id="key-body"> | |
| <div class="input-group"> | |
| <input type="password" id="hf-key" placeholder="hf_..." value=""> | |
| <button id="toggle-key" class="icon-btn" title="Show/Hide"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle> | |
| </svg> | |
| </button> | |
| <button id="check-key" class="icon-btn" title="Validate" disabled> | |
| <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> | |
| </button> | |
| </div> | |
| <div class="key-status"> | |
| <span class="dot" id="key-dot"></span> | |
| <span id="key-status-text">No key saved</span> | |
| <button id="clear-key" class="btn-link">Clear</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Target model selector --> | |
| <div class="card model-card"> | |
| <label for="target-model">Output format for:</label> | |
| <select id="target-model"> | |
| <option value="google_ai_studio" selected>🌐 Google AI Studio</option> | |
| <option value="openai">🤖 OpenAI</option> | |
| <option value="anthropic">🧠 Anthropic</option> | |
| <option value="generic">📄 Generic</option> | |
| </select> | |
| </div> | |
| <!-- Instruction input with microphone --> | |
| <div class="card input-card"> | |
| <div class="textarea-wrapper"> | |
| <textarea id="instruction" rows="5" placeholder="مثلاً: یک کامپوننت React با TypeScript بنویس... (فارسی هم مجاز)"></textarea> | |
| <button id="mic-btn" class="mic-btn" title="گفتار به متن (فارسی)"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path> | |
| <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path> | |
| <line x1="12" y1="19" x2="12" y2="22"></line> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Generate button --> | |
| <button id="generate-btn" class="btn-primary"> | |
| <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 | |
| </button> | |
| <!-- Output area --> | |
| <div id="output-area" class="card output-area hidden"> | |
| <div class="output-header"> | |
| <h3>Generated Prompt</h3> | |
| <button id="copy-all" class="btn-secondary"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <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> | |
| Copy All | |
| </button> | |
| </div> | |
| <div id="quad-sections" class="quad-sections"></div> | |
| <button id="export-json" class="btn-link"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <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> | |
| Export JSON | |
| </button> | |
| </div> | |
| <div class="footer-actions"> | |
| <a href="/advanced" class="btn-secondary full-width"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> | |
| </svg> | |
| Switch to Advanced Mode | |
| </a> | |
| </div> | |
| </main> | |
| </div> | |
| <div id="toast"></div> | |
| <script src="/static/simple.js"></script> | |
| </body> | |
| </html> |