Update app.py

app.py

@@ -183,6 +183,75 @@ async def read_items():
     .copy-btn:hover {
       background-color: #3e8e41;
     }
+
+    .button {
+      background-color: #007bff;
+      color: white;
+      border: none;
+      padding: 12px 24px;
+      font-size: 16px;
+      border-radius: 6px;
+      cursor: pointer;
+      margin-right: 14px;
+    }
+
+    .button:hover {
+      background-color: #0056b3;
+    }
+
+    .modal {
+      display: none;
+      position: fixed;
+      z-index: 1000;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgba(0,0,0,0.6);
+    }
+
+    .modal-content {
+      background-color: #fff;
+      margin: 10% auto;
+      padding: 20px 30px;
+      border-radius: 8px;
+      width: 80%;
+      max-width: 800px;
+      text-align: left;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+    }
+
+    .close {
+      color: #aaa;
+      float: right;
+      font-size: 24px;
+      font-weight: bold;
+      cursor: pointer;
+    }
+
+    .close:hover {
+      color: #000;
+    }
+
+    h2 {
+      border-bottom: 2px solid #ddd;
+      padding-bottom: 8px;
+      margin-top: 20px;
+    }
+
+    pre {
+      background-color: #f0f0f0;
+      border-radius: 5px;
+      padding: 15px;
+      overflow-x: auto;
+    }
+
+    code {
+      font-family: Consolas, "Courier New", monospace;
+      color: #333;
+      display: block;
+    }
     .loading-dots span {
       animation: blink 1.4s infinite both;
     }
@@ -205,6 +274,15 @@ async def read_items():
       const clearBtn = document.getElementById("clearBtn");
       const API_ENDPOINT = "optimize";
       const STORAGE_KEY = "prompt_optimizer_chat_history";
+      const modal = document.getElementById("apiModal");
+      const btn = document.getElementById("apiKeyBtn");
+      const close = document.getElementById("closeModal");
+    
+      btn.onclick = () => modal.style.display = "block";
+      close.onclick = () => modal.style.display = "none";
+      window.onclick = (event) => {
+          if (event.target == modal) modal.style.display = "none";
+      };
       function formatTextWithLineBreaks(text) {
         const escaped = text
           .replace(/&/g, "&")
@@ -332,7 +410,10 @@ async def read_items():
 <div class="chat-wrapper">
   <div class="header">
     <div>Prompt Optimizer</div>
-    <button id="clearBtn">🧹 Clear</button>
+    <div style="display: inline-flex;">
+        <div  class="button">Get API</div>
+        <button id="clearBtn">🧹 Clear</button>
+    </div>
   </div>
   <div id="chatWindow" class="chat-window">
     <div class="invite bot-message">
@@ -346,6 +427,30 @@ async def read_items():
     <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 Model</h1>
+
+      <h2>Python Code Snippet</h2>
+      <pre><code>
+import requests
+url = "http://getresp.com/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 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>