draply-dev 1.3.2 → 1.3.4

package/bin/cli.js

@@ -97,7 +97,53 @@ function extractClassName(selector) {
   return null;
 }
 
-// ── Call Gemini API ───────────────────────────────────────────────────────────
+// ── Call AI API (Gemini or Groq) ──────────────────────────────────────────────
+function callAI(apiKey, prompt, provider) {
+  if (provider === 'groq') return callGroq(apiKey, prompt);
+  return callGemini(apiKey, prompt);
+}
+
+function callGroq(apiKey, prompt) {
+  return new Promise((resolve, reject) => {
+    const body = JSON.stringify({
+      model: 'llama-3.3-70b-versatile',
+      messages: [{ role: 'user', content: prompt }],
+      temperature: 0.1,
+      max_tokens: 8192
+    });
+
+    const options = {
+      hostname: 'api.groq.com',
+      path: '/openai/v1/chat/completions',
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Length': Buffer.byteLength(body)
+      }
+    };
+
+    const req = https.request(options, res => {
+      const chunks = [];
+      res.on('data', c => chunks.push(c));
+      res.on('end', () => {
+        try {
+          const data = JSON.parse(Buffer.concat(chunks).toString());
+          if (data.error) {
+            reject(new Error(data.error.message || 'Groq API error'));
+            return;
+          }
+          const text = data.choices?.[0]?.message?.content || '';
+          resolve(text);
+        } catch (e) { reject(e); }
+      });
+    });
+    req.on('error', reject);
+    req.write(body);
+    req.end();
+  });
+}
+
 function callGemini(apiKey, prompt) {
   return new Promise((resolve, reject) => {
     const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-lite:generateContent?key=${apiKey}`;
@@ -245,7 +291,7 @@ RULES:
 Return ONLY the complete modified file. No markdown fences, no explanations.`;
 
           try {
-            const result = await callGemini(cfg.apiKey, prompt);
+            const result = await callAI(cfg.apiKey, prompt, cfg.provider || 'groq');
             let code = result.trim();
             if (code.startsWith('```')) {
               code = code.replace(/^```[a-z]*\n?/, '').replace(/\n?```$/, '');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draply-dev",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Visual overlay for any frontend project — move, resize, restyle live in the browser, save to CSS",
   "author": "Arman",
   "type": "commonjs",

package/src/draply-features.js

@@ -257,13 +257,18 @@
 
       <!-- SETTINGS -->
       <div class="ps-settings" id="__ps_settings__">
-        <div class="ps-settings-label">Gemini API Key</div>
+        <div class="ps-settings-label">AI Provider</div>
+        <div class="ps-settings-row" style="margin-bottom:6px">
+          <button class="ps-eb active" id="__ps_prov_groq__" data-prov="groq" style="flex:1;text-align:center">Groq (free)</button>
+          <button class="ps-eb" id="__ps_prov_gemini__" data-prov="gemini" style="flex:1;text-align:center">Gemini</button>
+        </div>
+        <div class="ps-settings-label">API Key</div>
         <div class="ps-settings-row">
-          <input class="ps-settings-input" id="__ps_apikey__" type="password" placeholder="AIza...">
+          <input class="ps-settings-input" id="__ps_apikey__" type="password" placeholder="gsk_...">
           <button class="ps-settings-save" id="__ps_keysave__">Save</button>
         </div>
         <div class="ps-settings-status" id="__ps_keystatus__">
-          Get free key at <a href="https://aistudio.google.com/apikey" target="_blank" style="color:#a855f7">aistudio.google.com</a>
+          Free key → <a href="https://console.groq.com/keys" target="_blank" style="color:#a855f7">console.groq.com</a>
         </div>
       </div>
 
@@ -313,11 +318,30 @@
     const keySaveBtn = document.getElementById('__ps_keysave__');
     const keyStatus = document.getElementById('__ps_keystatus__');
     const aiBtn = document.getElementById('__ps_ai__');
+    const provGroq = document.getElementById('__ps_prov_groq__');
+    const provGemini = document.getElementById('__ps_prov_gemini__');
+    let selectedProvider = 'groq';
+
+    // Provider toggle
+    provGroq.onclick = () => {
+      selectedProvider = 'groq';
+      provGroq.classList.add('active');
+      provGemini.classList.remove('active');
+      apiKeyInput.placeholder = 'gsk_...';
+      keyStatus.innerHTML = 'Free key → <a href="https://console.groq.com/keys" target="_blank" style="color:#a855f7">console.groq.com</a>';
+    };
+    provGemini.onclick = () => {
+      selectedProvider = 'gemini';
+      provGemini.classList.add('active');
+      provGroq.classList.remove('active');
+      apiKeyInput.placeholder = 'AIza...';
+      keyStatus.innerHTML = 'Free key → <a href="https://aistudio.google.com/apikey" target="_blank" style="color:#a855f7">aistudio.google.com</a>';
+    };
 
     function checkApiKey() {
       fetch('/draply-config').then(r => r.json()).then(d => {
         if (d.hasKey) {
-          keyStatus.textContent = '✅ API key configured';
+          keyStatus.textContent = '✅ API key configured (' + (d.provider || 'groq') + ')';
           keyStatus.className = 'ps-settings-status ok';
           aiBtn.disabled = false;
         } else {
@@ -333,14 +357,14 @@
       fetch('/draply-config', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ apiKey: key, provider: 'gemini' })
+        body: JSON.stringify({ apiKey: key, provider: selectedProvider })
       }).then(r => r.json()).then(d => {
         if (d.ok) {
-          keyStatus.textContent = '✅ API key saved!';
+          keyStatus.textContent = '✅ Saved! (' + selectedProvider + ')';
           keyStatus.className = 'ps-settings-status ok';
           apiKeyInput.value = '';
           aiBtn.disabled = false;
-          showToast('🔑 API key saved');
+          showToast('🔑 API key saved (' + selectedProvider + ')');
         }
       });
     };