Spaces:

codebyam
/

Prompt_Optimizer

Running

App Files Files Community

codebyam commited on 28 days ago

Commit

beb192a

verified ·

1 Parent(s): aee3e45

Update app.py

Browse files

Files changed (1) hide show

app.py +333 -40

app.py CHANGED Viewed

@@ -106,13 +106,98 @@ async def get_robots_txt():
 @app.get("/", response_class=HTMLResponse)
 async def read_items():
     html_content = """<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="google-site-verification" content="-jY1rLSeurfpAp7kFipbI6puXHQ9Zqv8jYYpekEHfIo" />
   <meta name="msvalidate.01" content="550DC9E80C45FFA7BBF5B0F21D611E65" />
-  <title>Prompt Optimizer Bot</title>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,600;0,700;0,900;1,600&family=Inter:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');
@@ -139,7 +224,6 @@ async def read_items():
       font-family: 'Inter', sans-serif;
       max-width: 720px;
       min-height: 100vh;
-      height: 100vh;
       display: flex;
       flex-direction: column;
       color: var(--ink);
@@ -176,6 +260,7 @@ async def read_items():
       font-size: 1.6rem;
       position: relative;
       letter-spacing: -0.02em;
     }
     .header .logo::after {
       content: "";
@@ -254,13 +339,82 @@ async def read_items():
     .chat-wrapper {
       display: flex;
       flex-direction: column;
-      height: 100%;
-      flex: 1;
       min-height: 0;
       position: relative;
       z-index: 1;
     }
     .chat-window {
       flex: 1;
       overflow-y: auto;
@@ -467,28 +621,102 @@ async def read_items():
     }
     .modal-content {
       background-color: var(--paper);
-      margin: 8% auto;
-      padding: 24px 30px;
       border: 3px solid var(--ink);
-      border-radius: 14px;
-      width: 85%;
       max-width: 640px;
       text-align: left;
       box-shadow: 6px 6px 0 var(--ink);
       font-family: 'Inter', sans-serif;
     }
     .modal-content h1 {
       font-family: 'Fraunces', serif;
       font-weight: 900;
-      margin-top: 0;
     }
     .close {
       color: var(--ink-muted);
-      float: right;
       font-size: 26px;
       font-weight: bold;
       cursor: pointer;
       line-height: 1;
     }
     .close:hover { color: var(--coral); }
@@ -521,6 +749,18 @@ async def read_items():
       40% { opacity: 1; }
     }
     @media (max-width: 600px) {
       body { max-width: 100%; }
       .header { padding: 14px 16px; }
@@ -555,6 +795,17 @@ async def read_items():
         if (event.target == modal) modal.style.display = "none";
       };
       function formatTextWithLineBreaks(text) {
         const escaped = text
           .replace(/&/g, "&amp;")
@@ -661,7 +912,7 @@ async def read_items():
       async function loadHistory() {
         try {
           const result = localStorage.getItem(STORAGE_KEY);
-          const messages = result[STORAGE_KEY] || [];
           messages.forEach((msg) =>
             appendMessage(msg.role, msg.text, { withCopy: msg.withCopy ?? (msg.role === "bot") })
           );
@@ -708,7 +959,9 @@ async def read_items():
           removeLoadingMessage();
           appendMessage(
             "bot",
-            `🚨 Connection error: ${error.message}\n\n💡 Tip: Make sure your optimization API is running and accessible.`
           );
           await saveHistory();
         }
@@ -733,51 +986,91 @@ async def read_items():
 <body>
 <div class="chat-wrapper">
   <div class="header">
-    <div class="logo">Prompt Optimizer<span class="tag">✎ paper edition</span></div>
     <div class="header-actions">
       <div class="button" id="apiKeyBtn">Get API</div>
       <button id="clearBtn">🧹 Clear</button>
     </div>
   </div>
   <div id="chatWindow" class="chat-window">
     <div class="invite bot-message">
-      <div class="avatar bot-avatar"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3v2.2" stroke="white" stroke-width="1.8" stroke-linecap="round"/><circle cx="12" cy="6.4" r="1.1" fill="white"/><rect x="5" y="8" width="14" height="10" rx="3" stroke="white" stroke-width="1.8"/><circle cx="9" cy="13" r="1.3" fill="white"/><circle cx="15" cy="13" r="1.3" fill="white"/><path d="M9 16.2h6" stroke="white" stroke-width="1.6" stroke-linecap="round"/></svg></div>
       <div class="bubble">
-        Hi! Got a rough prompt? ✎ Paste it below — let's tighten it up.
       </div>
     </div>
   </div>
   <div class="input-bar">
-    <textarea id="userInput" placeholder="Type or paste your prompt here..." rows="2"></textarea>
     <button id="sendButton" aria-label="Send message">➤</button>
   </div>
   <div id="apiModal" class="modal">
     <div class="modal-content">
-      <span class="close" id="closeModal">&times;</span>
-      <h1>API Example</h1>
-      <div>Integrate this tool in your projects. Start building cool tech.
-      <h2>Python Code Snippet</h2>
-      <pre><code>
-import requests
-url = "https://codebyam-prompt-optimizer.hf.space/optimize"
-data = {"input_prompt": "This is my sample prompt."}
 response = requests.post(url, json=data)
-print(response.json())
-      </code></pre>
-      <h2>JavaScript Code Snippet</h2>
-      <pre><code>
-const API_ENDPOINT = "https://codebyam-prompt-optimizer.hf.space/optimize";
 const response = await fetch(API_ENDPOINT, {
-  method: "POST",
-  headers: { "Content-Type": "application/json" },
   body: JSON.stringify({ input_prompt: prompt }),
-})
-      </code></pre>
     </div>
   </div>
 </div>
-</body>
-</html>"""
     return html_content

 @app.get("/", response_class=HTMLResponse)
 async def read_items():
     html_content = """<!DOCTYPE html>
+<html lang="en"><head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="google-site-verification" content="-jY1rLSeurfpAp7kFipbI6puXHQ9Zqv8jYYpekEHfIo" />
   <meta name="msvalidate.01" content="550DC9E80C45FFA7BBF5B0F21D611E65" />
+  <!-- Primary SEO meta tags -->
+  <title>Prompt Optimizer — Paste a Rough Prompt, Get It Fixed in Seconds (Free, No Sign-Up)</title>
+  <meta name="description" content="Got a messy prompt? Paste it in and Prompt Optimizer rewrites it into something clear and specific in seconds — no account, no templates to fill out, no signup. Works for ChatGPT, Claude, Gemini, and any AI model." />
+  <meta name="author" content="Prompt Optimizer Bot" />
+  <meta name="robots" content="index, follow" />
+  <link rel="canonical" href="https://codebyam-prompt-optimizer.hf.space/" />
+  <meta name="theme-color" content="#3D5AFE" />
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Prompt Optimizer — Paste a Rough Prompt, Get It Fixed in Seconds" />
+  <meta property="og:description" content="No templates, no signup, no fuss. Paste your rough prompt, get back a clearer, more specific one — instantly. Works with ChatGPT, Claude, Gemini, and any AI model." />
+  <meta property="og:url" content="https://codebyam-prompt-optimizer.hf.space/" />
+  <meta property="og:site_name" content="Prompt Optimizer Bot" />
+  <meta property="og:image" content="https://codebyam-prompt-optimizer.hf.space/og-image.png" />
+  <meta property="og:locale" content="en_US" />
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Prompt Optimizer — Paste a Rough Prompt, Get It Fixed in Seconds" />
+  <meta name="twitter:description" content="No templates, no signup, no fuss. Paste your rough prompt, get back a clearer, more specific one — instantly." />
+  <meta name="twitter:image" content="https://codebyam-prompt-optimizer.hf.space/og-image.png" />
+  <!-- Favicon -->
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect width='24' height='24' rx='6' fill='%233D5AFE'/%3E%3Cpath d='M12 5v2.2' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='8.4' r='1.1' fill='white'/%3E%3Crect x='5' y='10' width='14' height='9' rx='3' stroke='white' stroke-width='1.8'/%3E%3Ccircle cx='9' cy='14.5' r='1.2' fill='white'/%3E%3Ccircle cx='15' cy='14.5' r='1.2' fill='white'/%3E%3C/svg%3E" />
+  <!-- Structured data: WebApplication schema -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    "name": "Prompt Optimizer Bot",
+    "url": "https://codebyam-prompt-optimizer.hf.space/",
+    "description": "Paste a rough AI prompt and get back a clearer, more specific version in seconds. No signup, no templates, no account required.",
+    "applicationCategory": "Utility",
+    "operatingSystem": "Any",
+    "offers": {
+      "@type": "Offer",
+      "price": "0",
+      "priceCurrency": "USD"
+    }
+  }
+  </script>
+  <!-- Structured data: FAQPage schema, mirrors the visible FAQ section in the page body -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    "mainEntity": [
+      {
+        "@type": "Question",
+        "name": "Is Prompt Optimizer free to use?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "Yes. Prompt Optimizer is completely free, with no account or signup required. Just paste your prompt and get an optimized version back."
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "Which AI models does the optimized prompt work with?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "The optimized prompt is model-agnostic, so it works well with ChatGPT, Claude, Gemini, and most other large language models."
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "Do I need to fill out a template or form?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "No. Unlike many prompt tools, there is no template picker or form to fill out. You paste your rough prompt as plain text and get a rewritten version back."
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "What does a prompt optimizer actually do?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "It takes a vague or incomplete prompt and rewrites it to add missing structure, such as clearer intent, constraints, tone, and format, so the AI model produces a more accurate and useful response."
+        }
+      }
+    ]
+  }
+  </script>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,600;0,700;0,900;1,600&family=Inter:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');
       font-family: 'Inter', sans-serif;
       max-width: 720px;
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       color: var(--ink);
       font-size: 1.6rem;
       position: relative;
       letter-spacing: -0.02em;
+      margin: 0;
     }
     .header .logo::after {
       content: "";
     .chat-wrapper {
       display: flex;
       flex-direction: column;
+      height: 100vh;
+      flex-shrink: 0;
       min-height: 0;
       position: relative;
       z-index: 1;
     }
+    /* SEO content: collapsed by default (native <details>), sits below the
+       fixed-height chat app. Closed state is a single toggle line — the
+       chat UI above is completely unaffected either way. */
+    .seo-content {
+		  display: none;
+      background: var(--paper);
+      padding: 14px 24px 20px;
+      border-top: 3px solid var(--ink);
+      position: relative;
+      z-index: 1;
+    }
+    .seo-content > summary {
+      font-family: 'Inter', sans-serif;
+      font-weight: 700;
+      font-size: 0.85em;
+      color: var(--ink-muted);
+      cursor: pointer;
+      list-style: none;
+      padding: 6px 0;
+      user-select: none;
+    }
+    .seo-content > summary::-webkit-details-marker { display: none; }
+    .seo-content > summary::before {
+      content: "▸ ";
+      display: inline-block;
+      transition: transform 0.15s ease;
+    }
+    .seo-content[open] > summary::before {
+      transform: rotate(90deg);
+    }
+    .seo-content .accordion-body {
+      padding-top: 18px;
+    }
+    .seo-heading {
+      font-family: 'Fraunces', serif;
+      font-weight: 700;
+      font-size: 1.3rem;
+      border-bottom: 2px solid var(--ink);
+      padding-bottom: 6px;
+      margin: 0 0 16px;
+    }
+    .seo-content .how-it-works {
+      margin: 0 0 36px;
+      padding-left: 22px;
+      line-height: 1.6;
+    }
+    .seo-content .how-it-works li { margin-bottom: 10px; }
+    .faq-item {
+      background: white;
+      border: 2px solid var(--ink);
+      border-radius: 12px;
+      box-shadow: 3px 3px 0 var(--shadow);
+      padding: 14px 18px;
+      margin-bottom: 14px;
+    }
+    .faq-item h3 {
+      font-family: 'Inter', sans-serif;
+      font-size: 1rem;
+      margin: 0 0 6px;
+    }
+    .faq-item p {
+      margin: 0;
+      line-height: 1.55;
+      color: var(--ink);
+    }
+    @media (max-width: 600px) {
+      .seo-content { padding: 10px 16px 16px; }
+    }
     .chat-window {
       flex: 1;
       overflow-y: auto;
     }
     .modal-content {
       background-color: var(--paper);
+      margin: 6% auto;
+      padding: 0;
       border: 3px solid var(--ink);
+      border-radius: 16px;
+      width: 90%;
       max-width: 640px;
+      max-height: 84vh;
+      overflow-y: auto;
       text-align: left;
       box-shadow: 6px 6px 0 var(--ink);
       font-family: 'Inter', sans-serif;
+      position: relative;
+    }
+    .modal-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 26px 14px;
+      border-bottom: 3px solid var(--ink);
+      background: var(--paper);
+      position: sticky;
+      top: 0;
+      z-index: 1;
     }
     .modal-content h1 {
       font-family: 'Fraunces', serif;
       font-weight: 900;
+      margin: 0;
+      font-size: 1.5rem;
+      position: relative;
+    }
+    .modal-body {
+      padding: 22px 26px 28px;
+    }
+    .modal-tagline {
+      font-family: 'Caveat', cursive;
+      font-weight: 700;
+      font-size: 1.15rem;
+      color: var(--coral);
+      transform: rotate(-1deg);
+      display: inline-block;
+      margin: 0 0 20px;
     }
+    .modal-content .sticky-tag {
+      font-family: 'Caveat', cursive;
+      font-weight: 700;
+      font-size: 1.15rem;
+      background: var(--marigold);
+      color: var(--ink);
+      display: inline-block;
+      padding: 3px 14px 5px 12px;
+      border: 2px solid var(--ink);
+      border-radius: 8px;
+      transform: rotate(-1deg);
+      margin: 0 0 10px;
+    }
+    .code-block {
+      background: var(--paper-2);
+      border: 2px solid var(--ink);
+      border-radius: 12px;
+      box-shadow: 3px 3px 0 var(--shadow);
+      padding: 0;
+      margin-bottom: 20px;
+      overflow: hidden;
+    }
+    .code-block pre {
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      margin: 0;
+      padding: 14px 16px;
+    }
+    .code-block .copy-code-btn {
+      background-color: var(--green);
+      color: white;
+      border: none;
+      border-top: 2px solid var(--ink);
+      border-radius: 0;
+      width: 100%;
+      padding: 8px 14px;
+      font-size: 0.82em;
+      font-weight: 700;
+      font-family: 'Inter', sans-serif;
+      cursor: pointer;
+      transition: background-color 0.12s ease;
+    }
+    .code-block .copy-code-btn:hover { background-color: #3f9c6c; }
     .close {
       color: var(--ink-muted);
       font-size: 26px;
       font-weight: bold;
       cursor: pointer;
       line-height: 1;
+      background: none;
+      border: none;
+      padding: 0 4px;
     }
     .close:hover { color: var(--coral); }
       40% { opacity: 1; }
     }
+    /* Visually-hidden helper for SEO-friendly semantic content
+       that shouldn't alter the existing visual design */
+    .visually-hidden {
+      position: absolute !important;
+      width: 1px; height: 1px;
+      padding: 0; margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
     @media (max-width: 600px) {
       body { max-width: 100%; }
       .header { padding: 14px 16px; }
         if (event.target == modal) modal.style.display = "none";
       };
+      modal.querySelectorAll(".copy-code-btn").forEach((codeBtn) => {
+        codeBtn.addEventListener("click", () => {
+          const codeEl = codeBtn.parentElement.querySelector("code");
+          const codeText = codeEl ? codeEl.innerText : "";
+          navigator.clipboard.writeText(codeText);
+          const originalLabel = codeBtn.textContent;
+          codeBtn.textContent = "Copied!";
+          setTimeout(() => (codeBtn.textContent = originalLabel), 1500);
+        });
+      });
       function formatTextWithLineBreaks(text) {
         const escaped = text
           .replace(/&/g, "&amp;")
       async function loadHistory() {
         try {
           const result = localStorage.getItem(STORAGE_KEY);
+          const messages = result ? JSON.parse(result) : [];
           messages.forEach((msg) =>
             appendMessage(msg.role, msg.text, { withCopy: msg.withCopy ?? (msg.role === "bot") })
           );
           removeLoadingMessage();
           appendMessage(
             "bot",
+            `🚨 Connection error: ${error.message}
+💡 Tip: Make sure your optimization API is running and accessible.`
           );
           await saveHistory();
         }
 <body>
 <div class="chat-wrapper">
   <div class="header">
+    <h1 class="logo">Prompt Optimizer<span class="tag">✎ paper edition</span></h1>
     <div class="header-actions">
       <div class="button" id="apiKeyBtn">Get API</div>
       <button id="clearBtn">🧹 Clear</button>
     </div>
   </div>
   <div id="chatWindow" class="chat-window">
     <div class="invite bot-message">
+      <div class="avatar bot-avatar"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3v2.2" stroke="white" stroke-width="1.8" stroke-linecap="round"></path><circle cx="12" cy="6.4" r="1.1" fill="white"></circle><rect x="5" y="8" width="14" height="10" rx="3" stroke="white" stroke-width="1.8"></rect><circle cx="9" cy="13" r="1.3" fill="white"></circle><circle cx="15" cy="13" r="1.3" fill="white"></circle><path d="M9 16.2h6" stroke="white" stroke-width="1.6" stroke-linecap="round"></path></svg></div>
       <div class="bubble">
+        Hi! Got a rough prompt? ✎ Paste it below — let&#39;s tighten it up.
       </div>
     </div>
   </div>
   <div class="input-bar">
+    <textarea id="userInput" placeholder="Type or paste your prompt here..." rows="2" aria-label="Enter your prompt to optimize"></textarea>
     <button id="sendButton" aria-label="Send message">➤</button>
   </div>
+  <!-- Crawlable SEO content: real copy, but collapsed by default via native
+       <details>. The chat UI above is completely unchanged; this only shows
+       a small toggle line unless the user taps it open. -->
+  <details class="seo-content">
+    <summary>How it works &amp; FAQ</summary>
+    <div class="accordion-body">
+      <h2 class="seo-heading">How Prompt Optimizer works</h2>
+      <ol class="how-it-works">
+        <li><strong>Paste your rough prompt.</strong> No template to pick, no form fields — just plain text, exactly as messy as it already is.</li>
+        <li><strong>Get a rewritten version back.</strong> The tool adds the missing structure: clearer intent, constraints, tone, and format.</li>
+        <li><strong>Copy and use it anywhere.</strong> The optimized prompt works with ChatGPT, Claude, Gemini, or any other AI model.</li>
+      </ol>
+      <h2 class="seo-heading">Frequently asked questions</h2>
+      <div class="faq-item">
+        <h3>Is Prompt Optimizer free to use?</h3>
+        <p>Yes. It's completely free, with no account or signup required. Just paste your prompt and get an optimized version back.</p>
+      </div>
+      <div class="faq-item">
+        <h3>Which AI models does the optimized prompt work with?</h3>
+        <p>The optimized prompt is model-agnostic, so it works well with ChatGPT, Claude, Gemini, and most other large language models.</p>
+      </div>
+      <div class="faq-item">
+        <h3>Do I need to fill out a template or form?</h3>
+        <p>No. Unlike many prompt tools, there's no template picker or form to fill out. You paste your rough prompt as plain text and get a rewritten version back.</p>
+      </div>
+      <div class="faq-item">
+        <h3>What does a prompt optimizer actually do?</h3>
+        <p>It takes a vague or incomplete prompt and rewrites it to add missing structure — clearer intent, constraints, tone, and format — so the AI model produces a more accurate and useful response.</p>
+      </div>
+    </div>
+  </details>
   <div id="apiModal" class="modal">
     <div class="modal-content">
+      <div class="modal-header">
+        <h1>Get API ✎</h1>
+        <button class="close" id="closeModal" aria-label="Close">×</button>
+      </div>
+      <div class="modal-body">
+        <p>Integrate this tool in your own projects</p>
+        <span class="sticky-tag">Python</span>
+        <div class="code-block">
+          <pre><code>import requests
+url = &quot;https://codebyam-prompt-optimizer.hf.space/optimize&quot;
+data = {&quot;input_prompt&quot;: &quot;This is my sample prompt.&quot;}
 response = requests.post(url, json=data)
+print(response.json())</code></pre>
+          <button class="copy-code-btn" data-copy-target="pyCode">Copy</button>
+        </div>
+        <span class="sticky-tag">JavaScript</span>
+        <div class="code-block">
+          <pre><code>const API_ENDPOINT = &quot;https://codebyam-prompt-optimizer.hf.space/optimize&quot;;
 const response = await fetch(API_ENDPOINT, {
+  method: &quot;POST&quot;,
+  headers: { &quot;Content-Type&quot;: &quot;application/json&quot; },
   body: JSON.stringify({ input_prompt: prompt }),
+})</code></pre>
+          <button class="copy-code-btn" data-copy-target="jsCode">Copy</button>
+        </div>
+      </div>
     </div>
   </div>
 </div>
+</div></body></html>"""
     return html_content