@cloudgrid-io/cli 0.3.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/cli",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Deploy apps with a single YAML file",
   "publishConfig": {
     "access": "public",

package/templates/CLOUDGRID.md

@@ -92,3 +92,149 @@ app.get('/health', (req, res) => res.json({ status: 'ok' }));
 Sibling services are accessible via auto-injected URLs:
   const apiUrl = process.env.API_URL;
   const res = await fetch(apiUrl + '/endpoint');
+
+## COMMON PATTERNS
+
+### Camera/Upload + AI Vision (TESTED, USE THIS PATTERN)
+
+Frontend HTML for camera capture + file upload:
+```html
+<input type="file" id="fileInput" accept="image/*" capture="environment">
+<video id="video" autoplay playsinline></video>
+<canvas id="canvas" style="display:none"></canvas>
+```
+
+Frontend JS — capture from camera OR file upload, send as base64:
+```javascript
+// File upload handler
+fileInput.addEventListener('change', (e) => {
+  const file = e.target.files[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = (ev) => { capturedImage = ev.target.result; };
+  reader.readAsDataURL(file);
+});
+
+// Camera capture handler
+async function startCamera() {
+  const stream = await navigator.mediaDevices.getUserMedia({
+    video: { facingMode: 'environment', width: { ideal: 1280 } }
+  });
+  video.srcObject = stream;
+}
+function capturePhoto() {
+  const canvas = document.getElementById('canvas');
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  canvas.getContext('2d').drawImage(video, 0, 0);
+  capturedImage = canvas.toDataURL('image/jpeg', 0.8);
+  stream.getTracks().forEach(t => t.stop());
+}
+
+// Send to backend
+async function analyze() {
+  const res = await fetch('/api/analyze', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ image: capturedImage }),
+  });
+  const data = await res.json();
+  // data.text contains the AI analysis
+}
+```
+
+Backend — receive image, strip data URL prefix, call AI vision:
+```javascript
+app.use(express.json({ limit: '10mb' }));
+
+app.post('/api/analyze', async (req, res) => {
+  const { image } = req.body;
+  if (!image) return res.status(400).json({ error: 'No image' });
+
+  // IMPORTANT: strip the data URL prefix before sending to AI
+  const base64 = image.replace(/^data:image\/\w+;base64,/, '');
+  const mediaType = image.match(/^data:(image\/\w+);/)?.[1] || 'image/jpeg';
+
+  const AI_URL = process.env.AI_GATEWAY_URL;
+  const aiRes = await fetch(AI_URL + '/vision', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CloudGrid-App': process.env.APP_NAME,
+    },
+    body: JSON.stringify({
+      image: base64,
+      media_type: mediaType,
+      prompt: 'Describe what you see in this image',
+      max_tokens: 1024,
+    }),
+  });
+  const data = await aiRes.json();
+  res.json({ text: data.text });
+});
+```
+
+CRITICAL RULES for image + AI:
+- ALWAYS set express body limit: express.json({ limit: '10mb' })
+- ALWAYS strip "data:image/...;base64," prefix before sending to AI
+- ALWAYS extract media_type from the data URL (image/jpeg, image/png, etc.)
+- ALWAYS use { facingMode: 'environment' } for rear camera on mobile
+- ALWAYS use canvas.toDataURL('image/jpeg', 0.8) for camera capture (0.8 quality = smaller)
+- NEVER send the raw data URL to the AI gateway — strip the prefix first
+- Supported image types: image/jpeg, image/png, image/gif, image/webp
+
+### AI Chat with Streaming (TESTED)
+```javascript
+// Backend — SSE streaming endpoint
+app.get('/api/chat-stream', async (req, res) => {
+  const prompt = req.query.prompt;
+  res.setHeader('Content-Type', 'text/event-stream');
+  res.setHeader('Cache-Control', 'no-cache');
+
+  const aiRes = await fetch(process.env.AI_GATEWAY_URL + '/chat', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CloudGrid-App': process.env.APP_NAME,
+    },
+    body: JSON.stringify({ prompt, stream: true }),
+  });
+
+  // Pipe SSE from AI gateway to client
+  const reader = aiRes.body.getReader();
+  const decoder = new TextDecoder();
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    res.write(decoder.decode(value));
+  }
+  res.end();
+});
+
+// Frontend — consume SSE stream
+const evtSource = new EventSource('/api/chat-stream?prompt=' + encodeURIComponent(prompt));
+evtSource.onmessage = (e) => {
+  const data = JSON.parse(e.data);
+  if (data.type === 'text') outputDiv.textContent += data.text;
+  if (data.type === 'done') evtSource.close();
+};
+```
+
+### Using @cloudgrid-io/ai SDK (simpler alternative)
+```javascript
+// If you npm install @cloudgrid-io/ai, the SDK handles everything:
+const { ai } = require('@cloudgrid-io/ai');
+
+// Chat
+const result = await ai.chat('Hello');
+console.log(result.text);
+
+// Vision — pass Buffer directly
+const fs = require('fs');
+const photo = fs.readFileSync('photo.jpg');
+const result = await ai.vision(photo, 'Describe this');
+console.log(result.text);
+
+// The SDK auto-reads AI_GATEWAY_URL and APP_NAME from env.
+// Works in both cloudgrid dev and production. Zero config.
+```