This demo sends a Base64 image to /process-image. Replace with HTTPS server and KMS in production.
No output yet
No output yet
No output yet
stripe listen --forward-to localhost:4242/webhooknpx http-server . -p 5500then open http: //localhost:5500/stripe_ssa_demo.html/create-checkout-session./create-checkout-sessionto call Stripe using your secret key. Record SSA acceptance server-side with timestamp and user metadata before creating a session.readyrequire('dotenv').config(); const express=require('express'); const bodyParser=require('body-parser'); const vision=require('@google-cloud/vision'); const crypto=require('crypto'); const { v4: uuidv4 } =require('uuid'); const client=new vision.ImageAnnotatorClient(); // ensure GOOGLE_APPLICATION_CREDENTIALS env set const app=express(); app.use(bodyParser.json({ limit:'10mb' })); /* Simple in-memory store for demo */ const store= {} ; /* Helper: basic AES-GCM encryption (use KMS in production) */ function encryptAesGcmJson(plaintextObj, passphrase) { const iv=crypto.randomBytes(12); const salt=crypto.randomBytes(16); const key=crypto.pbkdf2Sync(passphrase, salt, 250000, 32, 'sha256'); const cipher=crypto.createCipheriv('aes-256-gcm', key, iv); const json=Buffer.from(JSON.stringify(plaintextObj), 'utf8'); const encrypted=Buffer.concat([cipher.update(json), cipher.final()]); const tag=cipher.getAuthTag(); return { salt: salt.toString('base64'), iv: iv.toString('base64'), tag: tag.toString('base64'), data: encrypted.toString('base64') } ; } /* AI mapping stub: map OCR text to eviction form fields */ function aiMapOcrToForm(ocrText) { const form= {} ; const lines=ocrText.split('\n').map(l=>l.trim()).filter(Boolean); for(const line of lines) { if(line.match(/^\d { 1, 5 } \s+\w+/)) form.propertyAddress=line; if(line.toLowerCase().includes('tenant') || line.match(/[A-Z][a-z]+\s[A-Z][a-z]+/)) form.tenantName=form.tenantName || line; if(line.match(/\$\s?\d+/)) form.claimAmount=line.match(/\$\s?[\d, ]+/)[0]; } form.tenantName=form.tenantName || 'Unknown Tenant'; form.propertyAddress=form.propertyAddress || 'Unknown Address'; form.claimAmount=form.claimAmount || '$10,000'; return form; } /* POST /process-image Body: { filename, imageBase64, userMeta } Returns: { id, ocrText, mappedForm, encryptedBlobId (if stored) } */ app.post('/process-image', async (req, res)=> { try { const { filename, imageBase64, userMeta } =req.body; if( !imageBase64) return res.status(400).json({ error: 'no image' }); // 1) OCR using Google Vision const imageBuffer=Buffer.from(imageBase64, 'base64'); const [result]=await client.textDetection({ image: { content: imageBuffer } }); const ocrText=(result.fullTextAnnotation && result.fullTextAnnotation.text) || ''; // 2) AI map OCR -> structured court form const mapped=aiMapOcrToForm(ocrText); // 3) Create audit record and optionally encrypt before storage const id=uuidv4(); const audit= { id, filename, userMeta, processedAt: new Date().toISOString(), ocrSnippet: ocrText.slice(0, 200) } ; const serverPass=process.env.SERVER_ENC_PASSPHRASE || 'demo-server-pass'; const enc=encryptAesGcmJson({ mapped, audit } , serverPass); // Persist encrypted blob (demo in-memory) store[id]= { audit, mapped, encrypted: enc } ; // 4) Return structured data (minimal) and id reference return res.json({ id, mappedForm: mapped, encryptedBlobId: id, audit: { id: audit.id, processedAt: audit.processedAt } }); } catch (err) { console.error(err); return res.status(500).json({ error: 'processing failed' }); } }); app.get('/encrypted/:id', (req, res)=> { const rec=store[req.params.id]; if( !rec) return res.status(404).json({ error: 'not found' }); res.json({ id: req.params.id, encrypted: rec.encrypted, audit: rec.audit }); }); const PORT=process.env.PORT || 3000; app.listen(PORT, ()=>console.log(`server listening on $ { PORT } `)); PORT=4242 BASE_URL=http: //localhost:4242 GOOGLE_APPLICATION_CREDENTIALS=/path/to/your/google-credentials.json SERVER_ENC_PASSPHRASE=demo-server-pass /* Place your CSS styles in this file */ h1 { text-align: center; font-family: "Source Sans Pro", sans-serif; font-weight: normal; } :root { --bg: #f6f7fb; --card: #ffffff; --accent: #b80606; --muted: #556072; --success: #0b9a5a; --warn: #e6a800; --danger: #c62828; --glass: rgba(255, 255, 255, 0.8); --radius: 12px; --shadow: 0 8px 30px rgba(11, 18, 30, .06); --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; } /* Page layout */ body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); color: #0b1220; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } .container { max-width: 1080px; margin: 32px auto; padding: 20px; } /* Card */ .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; overflow: hidden; } /* Heading */ .h3 { font-size: 1.25rem; color: var(--accent); margin: 0 0 12px 0; font-weight: 700; } /* Grid */ .grid { display: grid; grid-template-columns: 1fr 420px; gap: 16px; } @media (max-width:980px) { .grid { grid-template-columns: 1fr; padding: 0 } } /* Form inputs */ .label { display: block; font-weight: 600; margin-bottom: 6px; color: #1f2937 } .input, input[type="file"], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #e6eef8; border-radius: 10px; background: transparent; box-sizing: border-box; font-size: 14px; } .input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 4px 18px rgba(184, 6, 6, 0.08); } /* Buttons */ .button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 0; cursor: pointer; font-weight: 700; color: #fff; background: linear-gradient(180deg, var(--accent) 0%, #910404 100%); } .button.secondary { background: #2d3748; } .button.ghost { background: transparent; color: var(--accent); border: 1px dashed #f0dede; } /* Small helpers */ .note { font-size: 13px; color: var(--muted); margin-top: 8px } .mono { font-family: var(--mono); font-size: 13px; background: #0b12201a; padding: 8px; border-radius: 8px } .row { display: flex; gap: 10px; align-items: center } .col { display: flex; flex-direction: column; gap: 8px } /* Preview / mapped form card */ .preview { border: 1px dashed #e6eef8; padding: 12px; border-radius: 10px; background: linear-gradient(180deg, #fff, #fcfcff); min-height: 120px; } .preview h4 { margin: 0 0 8px 0; font-size: 13px } .field { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f4f7fb } .field:last-child { border-bottom: 0 } .field .k { color: #334155; font-weight: 700 } .field .v { color: #0b1220; max-width: 70%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } /* Status badges */ .badge { display: inline-block; padding: 6px 8px; border-radius: 999px; font-weight: 700; font-size: 12px; color: #fff } .badge.ok { background: var(--success) } .badge.pending { background: var(--warn); color: #2b2b00 } .badge.halted { background: var(--danger) } /* Log area */ .log { background: #0b12201a; color: #0b1220; padding: 10px; border-radius: 10px; font-family: var(--mono); max-height: 160px; overflow: auto; border: 1px solid #eef2f7; } /* File preview thumbnails */ .thumb-grid { display: flex; gap: 8px; flex-wrap: wrap } .thumb { width: 86px; height: 86px; border-radius: 8px; overflow: hidden; border: 1px solid #e8eef8; background: #f8fafc; display: flex; align-items: center; justify-content: center; } .thumb img { max-width: 100%; max-height: 100%; object-fit: cover } /* Footer small actions */ .footer-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; justify-content: space-between } .small { font-size: 13px; color: var(--muted) } /* Utility classes */ .hidden { display: none } .center { text-align: center }
This is some text with a footnote.
Clicks on the footnote: 0
function getRandomColor() { var letters='0123456789ABCDEF'; var color='#'; for (var i=0; i < 6; i++) { color+=letters[Math.floor(Math.random() * 16)]; } return color; } // Example of how to use the function var randomColor=getRandomColor(); console.log(randomColor);