Spaces:

udd542
/

anycoder-1fb6feb1

Running

File size: 19,891 Bytes

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>AI Prompt Architect | Ultimate Edition</title>
  <!-- Importing FontAwesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- Google Fonts for a clean look -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">

  <style>
    :root {
      --primary-color: #2563eb;
      /* Royal Blue */
      --glow-color: rgba(37, 99, 235, 0.4);
      --accent-color: #0ea5e9;
      --bg-color: #f8fafc;
      --card-bg: rgba(255, 255, 255, 0.9);
      --text-color: #1e293b;
      --text-secondary: #64748b;
      --border-radius: 16px;
      --font-main: 'Inter', sans-serif;
      --font-mono: 'Fira Code', monospace;
      --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 15px var(--glow-color);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: var(--font-main);
      background-color: var(--bg-color);
      /* Responsive Mesh Gradient Background */
      background-image:
        radial-gradient(at 0% 0%, rgba(255, 255, 255, 1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(200, 220, 255, 0.5) 0px, transparent 50%);
      background-attachment: fixed;
      color: var(--text-color);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
    }

    /* --- Header --- */
    header {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 1rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.6);
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: var(--shadow-soft);
      flex-wrap: wrap; /* Allows wrapping on very small screens */
      gap: 10px;
    }

    .brand {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-color);
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: -0.5px;
    }

    .brand i {
      color: var(--primary-color);
      filter: drop-shadow(0 0 5px var(--glow-color));
    }

    .built-with {
      font-size: 0.75rem;
      color: var(--text-secondary);
      text-decoration: none;
      transition: all 0.3s ease;
      padding: 6px 12px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.8);
      font-weight: 600;
      white-space: nowrap;
    }

    .built-with:hover {
      color: var(--primary-color);
      background: white;
      box-shadow: 0 0 10px var(--glow-color);
      transform: translateY(-1px);
    }

    /* --- Main Layout --- */
    main {
      flex: 1;
      display: flex;
      justify-content: center;
      padding: 1.5rem;
      width: 100%;
    }

    .container {
      width: 100%;
      max-width: 1200px;
      display: grid;
      /* Responsive Grid: 2 columns on desktop, 1 on mobile */
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      align-items: start; /* Prevents panels from stretching to same height if content differs */
    }

    /* --- Panels (Glassmorphism) --- */
    .panel {
      background: var(--card-bg);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: var(--border-radius);
      padding: 2rem;
      box-shadow: var(--shadow-glow);
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
      width: 100%;
    }

    /* Decorative glow line at top of panel */
    .panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
      opacity: 0.7;
    }

    .panel:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.15);
    }

    h2 {
      font-size: 1rem;
      color: var(--text-color);
      margin-bottom: 0.25rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    h2 i {
      color: var(--primary-color);
    }

    /* --- Form Elements --- */
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    label {
      font-size: 0.75rem;
      color: var(--text-secondary);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    select,
    textarea,
    input {
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      color: var(--text-color);
      padding: 12px;
      font-family: var(--font-main);
      font-size: 0.9rem;
      outline: none;
      transition: all 0.3s ease;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
      width: 100%; /* Ensures full width in flex/grid */
    }

    select:focus,
    textarea:focus,
    input:focus {
      border-color: var(--primary-color);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    textarea {
      resize: vertical;
      min-height: 120px;
      line-height: 1.5;
    }

    /* --- Button (White Glow Effect) --- */
    .btn-generate {
      background: white;
      color: var(--primary-color);
      font-weight: 700;
      border: 1px solid white;
      padding: 14px;
      border-radius: 8px;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      font-size: 0.9rem;
      margin-top: auto;
      box-shadow: 0 4px 15px rgba(37, 99, 235, 0.15);
      width: 100%;
    }

    .btn-generate:hover {
      box-shadow: 0 0 25px rgba(37, 99, 235, 0.4);
      transform: translateY(-2px);
    }

    .btn-generate:active {
      transform: translateY(0);
    }

    /* --- Output Area --- */
    .output-container {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 300px; /* Ensure height on mobile */
    }

    .output-wrapper {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 1.25rem;
      flex: 1;
      overflow-y: auto;
      font-family: var(--font-mono);
      font-size: 0.85rem;
      color: #334155;
      white-space: pre-wrap;
      position: relative;
      min-height: 250px;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
      width: 100%;
    }

    .output-placeholder {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #94a3b8;
      text-align: center;
      pointer-events: none;
      width: 80%;
    }

    .actions {
      display: flex;
      gap: 10px;
      margin-top: 12px;
    }

    .btn-action {
      flex: 1;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: white;
      color: var(--text-color);
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      font-weight: 500;
      font-size: 0.85rem;
    }

    .btn-action:hover {
      border-color: var(--primary-color);
      color: var(--primary-color);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .btn-clear:hover {
      border-color: #ef4444;
      color: #ef4444;
    }

    /* --- Toast Notification --- */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: white;
      color: var(--text-color);
      padding: 12px 24px;
      border-radius: 50px;
      font-weight: 600;
      font-size: 0.9rem;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 0 15px rgba(37, 99, 235, 0.3);
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      z-index: 1000;
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(37, 99, 235, 0.1);
      white-space: nowrap;
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    /* --- Animations --- */
    @keyframes pulse-glow {
      0% {
        text-shadow: 0 0 5px rgba(37, 99, 235, 0.2);
      }

      50% {
        text-shadow: 0 0 15px rgba(37, 99, 235, 0.6);
      }

      100% {
        text-shadow: 0 0 5px rgba(37, 99, 235, 0.2);
      }
    }

    .brand i {
      animation: pulse-glow 3s infinite;
    }

    /* Scrollbar Styling */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
    }

    /* --- Mobile Specific Adjustments --- */
    @media (max-width: 600px) {
      main {
        padding: 1rem;
      }

      .container {
        gap: 1.5rem;
      }

      .panel {
        padding: 1.5rem;
      }

      h2 {
        font-size: 0.9rem;
      }

      .brand span {
        font-size: 1.1rem;
      }
      
      .output-wrapper {
        font-size: 0.8rem;
      }
    }
  </style>
</head>

<body>

  <!-- Header Section -->
  <header>
    <div class="brand">
      <i class="fa-solid fa-shield-halved"></i>
      <span>Prompt Architect</span>
    </div>
    <!-- CRITICAL: Built with anycoder link -->
    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
      Built with anycoder
    </a>
  </header>

  <!-- Main Application -->
  <main>
    <div class="container">

      <!-- Left Panel: Controls -->
      <section class="panel">
        <h2><i class="fa-solid fa-sliders"></i> Configuration</h2>

        <div class="form-group">
          <label for="aiSelect">Select AI Model</label>
          <select id="aiSelect">
            <option value="gpt4">ChatGPT (GPT-4)</option>
            <option value="gemini">Google Gemini (Pro/Ultra)</option>
            <option value="deepseek">DeepSeek (V3)</option>
            <option value="claude">Anthropic Claude</option>
            <option value="llama">Meta Llama</option>
            <option value="mistral">Mistral AI</option>
          </select>
        </div>

        <div class="form-group">
          <label for="strategySelect">Prompt Strategy (White Hat)</label>
          <select id="strategySelect">
            <option value="standard">Standard Professional</option>
            <option value="chain_of_thought">Chain of Thought (CoT)</option>
            <option value="roleplay">Persona / Roleplay</option>
            <option value="coding">Expert Code Architect</option>
            <option value="creative">Creative Storyteller</option>
            <option value="analysis">Deep Analysis & Critique</option>
          </select>
        </div>

        <div class="form-group">
          <label for="userPrompt">Your Core Task</label>
          <textarea id="userPrompt" placeholder="Describe the task you want the AI to perform in detail..."></textarea>
        </div>

        <button class="btn-generate" id="generateBtn">
          <i class="fa-solid fa-bolt"></i> Construct Prompt
        </button>
      </section>

      <!-- Right Panel: Output -->
      <section class="panel">
        <h2><i class="fa-solid fa-code"></i> Constructed Output</h2>

        <div class="output-container">
          <div class="output-wrapper" id="outputArea">
            <div class="output-placeholder">
              <i class="fa-solid fa-wand-magic-sparkles" style="font-size: 2rem; margin-bottom: 15px; color: #cbd5e1;"></i>
              <br>
              Ready to construct...
            </div>
          </div>
        </div>

        <div class="actions">
          <button class="btn-action btn-copy" id="copyBtn">
            <i class="fa-regular fa-copy"></i> Copy
          </button>
          <button class="btn-action btn-clear" id="clearBtn">
            <i class="fa-solid fa-trash"></i> Clear
          </button>
        </div>
      </section>

    </div>
  </main>

  <!-- Toast Notification Element -->
  <div class="toast" id="toast">
    <i class="fa-solid fa-circle-check" style="color: var(--primary-color);"></i>
    <span id="toastMsg">Action Successful</span>
  </div>

  <script>
    // --- Data: Strategy Templates (White Hat/Ethical) ---
    const strategies = {
      standard: {
        name: "Standard Professional",
        template: (ai, prompt) => `Act as a highly capable ${ai} assistant. Your goal is to provide a comprehensive, accurate, and helpful response to the user's request. Please ensure your answer is well-structured, easy to read, and directly addresses the query.\n\nUser Request:\n${prompt}\n\nResponse:`
      },
      chain_of_thought: {
        name: "Chain of Thought",
        template: (ai, prompt) => `You are an expert analytical ${ai} model. To solve the following problem, please engage in a Chain of Thought reasoning process. Break down the problem, analyze the components, consider potential solutions, and then provide the final answer.\n\nProblem Statement:\n${prompt}\n\nReasoning Process:\n1. [Analyze the request]\n2. [Identify key components]\n3. [Formulate a solution]\n\nFinal Answer:`
      },
      roleplay: {
        name: "Persona / Roleplay",
        template: (ai, prompt) => `For this conversation, I need you to adopt a specific persona. You are no longer just an AI; you are a world-class expert in the field relevant to the user's request. You are insightful, nuanced, and articulate. Respond to the following prompt with the depth and style of this expert persona.\n\nRequest:\n${prompt}\n\nExpert Response:`
      },
      coding: {
        name: "Expert Code Architect",
        template: (ai, prompt) => `Act as a Senior Software Engineer and Code Architect. You are tasked with providing high-quality, efficient, and secure code. Please include comments explaining the logic, suggest best practices, and handle edge cases. If the request involves debugging, analyze the error and provide a fix.\n\nTask:\n${prompt}\n\nImplementation:`
      },
      creative: {
        name: "Creative Storyteller",
        template: (ai, prompt) => `Unleash your creative potential as ${ai}. You are a master storyteller and creative writer. Use vivid imagery, engaging metaphors, and a compelling narrative voice. Avoid clichés and strive for originality.\n\nCreative Prompt:\n${prompt}\n\nStory:`
      },
      analysis: {
        name: "Deep Analysis",
        template: (ai, prompt) => `You are an analytical ${ai} designed for deep critical thinking. Analyze the following text or concept without bias. Identify strengths, weaknesses, implications, and underlying themes. Provide a balanced and thorough critique.\n\nSubject for Analysis:\n${prompt}\n\nAnalysis:`
      }
    };

    // --- DOM Elements ---
    const aiSelect = document.getElementById('aiSelect');
    const strategySelect = document.getElementById('strategySelect');
    const userPrompt = document.getElementById('userPrompt');
    const generateBtn = document.getElementById('generateBtn');
    const outputArea = document.getElementById('outputArea');
    const copyBtn = document.getElementById('copyBtn');
    const clearBtn = document.getElementById('clearBtn');
    const toast = document.getElementById('toast');
    const toastMsg = document.getElementById('toastMsg');

    // --- Functions ---

    // 1. Generate the Prompt
    function generatePrompt() {
      const ai = aiSelect.options[aiSelect.selectedIndex].text;
      const strategyKey = strategySelect.value;
      const rawPrompt = userPrompt.value.trim();

      if (!rawPrompt) {
        showToast("Please enter a task first!", "error");
        userPrompt.focus();
        return;
      }

      const strategy = strategies[strategyKey];
      
      // Simulate processing delay for effect
      outputArea.innerHTML = '<div style="color:var(--primary-color); text-align:center; margin-top:40px;"><i class="fa-solid fa-circle-notch fa-spin" style="font-size: 2rem; margin-bottom:10px;"></i><br>Constructing Prompt...</div>';
      
      setTimeout(() => {
        const finalText = strategy.template(ai, rawPrompt);
        
        // Typewriter effect setup
        outputArea.innerHTML = '';
        let i = 0;
        const speed = 5; // Faster typing for better UX

        function typeWriter() {
          if (i < finalText.length) {
            outputArea.textContent += finalText.charAt(i);
            i++;
            // Auto scroll to bottom
            outputArea.scrollTop = outputArea.scrollHeight;
            setTimeout(typeWriter, speed);
          }
        }
        typeWriter();
        
        showToast("Prompt Constructed Successfully!");
      }, 600);
    }

    // 2. Copy to Clipboard
    function copyToClipboard() {
      const text = outputArea.textContent;
      if (!text || text.includes("Ready to construct")) {
        showToast("Nothing to copy!", "error");
        return;
      }

      navigator.clipboard.writeText(text).then(() => {
        showToast("Copied to clipboard!");
      }).catch(err => {
        showToast("Failed to copy", "error");
        console.error('Async: Could not copy text: ', err);
      });
    }

    // 3. Clear Output
    function clearOutput() {
      outputArea.innerHTML = `
        <div class="output-placeholder">
          <i class="fa-solid fa-wand-magic-sparkles" style="font-size: 2rem; margin-bottom: 15px; color: #cbd5e1;"></i>
          <br>
          Ready to construct...
        </div>
      `;
      userPrompt.value = '';
      showToast("Workspace cleared");
    }

    // 4. Toast Notification System
    function showToast(message, type = "success") {
      toastMsg.textContent = message;
      
      // Styling based on type
      if (type === "error") {
        toast.style.background = "#fff";
        toast.style.color = "#ef4444";
        toast.style.borderColor = "#ef4444";
        toast.querySelector('i').className = "fa-solid fa-circle-exclamation";
        toast.querySelector('i').style.color = "#ef4444";
      } else {
        toast.style.background = "#fff";
        toast.style.color = "var(--text-color)";
        toast.style.borderColor = "rgba(37, 99, 235, 0.1)";
        toast.querySelector('i').className = "fa-solid fa-circle-check";
        toast.querySelector('i').style.color = "var(--primary-color)";
      }

      toast.classList.add('show');
      
      // Hide after 3 seconds
      setTimeout(() => {
        toast.classList.remove('show');
      }, 3000);
    }

    // --- Event Listeners ---
    generateBtn.addEventListener('click', generatePrompt);
    copyBtn.addEventListener('click', copyToClipboard);
    clearBtn.addEventListener('click', clearOutput);

    // Optional: Allow Ctrl+Enter to generate
    userPrompt.addEventListener('keydown', (e) => {
      if (e.ctrlKey && e.key === 'Enter') {
        generatePrompt();
      }
    });

  </script>
</body>

</html>