[{"data":1,"prerenderedAt":716},["ShallowReactive",2],{"navigation_docs":3,"-sdk":49,"-sdk-surround":712},[4,8,12,16,20,24,28],{"title":5,"path":6,"stem":7},"Introduction","\u002Fintroduction","1.introduction",{"title":9,"path":10,"stem":11},"Installation","\u002Finstallation","2.installation",{"title":13,"path":14,"stem":15},"SDKs","\u002Fsdk","3.sdk",{"title":17,"path":18,"stem":19},"Dashboard","\u002Fdashboard","4.dashboard",{"title":21,"path":22,"stem":23},"HTTP API","\u002Fhttp-api","5.http-api",{"title":25,"path":26,"stem":27},"Image Transformations","\u002Ftransformations","6.transformations",{"title":29,"path":30,"stem":31,"children":32},"Framework Components","\u002Fframeworks","frameworks",[33,37,41,45],{"title":34,"path":35,"stem":36},"Qwik","\u002Fframeworks\u002Fqwik","frameworks\u002Fqwik",{"title":38,"path":39,"stem":40},"React","\u002Fframeworks\u002Freact","frameworks\u002Freact",{"title":42,"path":43,"stem":44},"Svelte","\u002Fframeworks\u002Fsvelte","frameworks\u002Fsvelte",{"title":46,"path":47,"stem":48},"Vue","\u002Fframeworks\u002Fvue","frameworks\u002Fvue",{"id":50,"title":13,"body":51,"description":706,"extension":707,"links":708,"meta":709,"navigation":117,"path":14,"seo":710,"stem":15,"__hash__":711},"docs\u002F3.sdk.md",{"type":52,"value":53,"toc":699},"minimark",[54,63,68,194,198,217,229,233,240,409,413,431,434,607,611,614,695],[55,56,57,58,62],"p",{},"The ",[59,60,61],"code",{},"@pichaflow\u002Fsdk"," provides a programmatic way to interact with the PichaFlow API.",[64,65,67],"h2",{"id":66},"initialization","Initialization",[69,70,75],"pre",{"className":71,"code":72,"language":73,"meta":74,"style":74},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { PichaFlowClient } from '@pichaflow\u002Fsdk';\n\nconst client = new PichaFlowClient({\n  apiKey: 'sk_live_your_secret_key',\n  baseUrl: 'https:\u002F\u002Fapi.pichaflow.com' \u002F\u002F Optional\n});\n","typescript","",[59,76,77,112,119,144,164,183],{"__ignoreMap":74},[78,79,82,86,90,94,97,100,103,106,109],"span",{"class":80,"line":81},"line",1,[78,83,85],{"class":84},"s7zQu","import",[78,87,89],{"class":88},"sMK4o"," {",[78,91,93],{"class":92},"sTEyZ"," PichaFlowClient",[78,95,96],{"class":88}," }",[78,98,99],{"class":84}," from",[78,101,102],{"class":88}," '",[78,104,61],{"class":105},"sfazB",[78,107,108],{"class":88},"'",[78,110,111],{"class":88},";\n",[78,113,115],{"class":80,"line":114},2,[78,116,118],{"emptyLinePlaceholder":117},true,"\n",[78,120,122,126,129,132,135,138,141],{"class":80,"line":121},3,[78,123,125],{"class":124},"spNyl","const",[78,127,128],{"class":92}," client ",[78,130,131],{"class":88},"=",[78,133,134],{"class":88}," new",[78,136,93],{"class":137},"s2Zo4",[78,139,140],{"class":92},"(",[78,142,143],{"class":88},"{\n",[78,145,147,151,154,156,159,161],{"class":80,"line":146},4,[78,148,150],{"class":149},"swJcz","  apiKey",[78,152,153],{"class":88},":",[78,155,102],{"class":88},[78,157,158],{"class":105},"sk_live_your_secret_key",[78,160,108],{"class":88},[78,162,163],{"class":88},",\n",[78,165,167,170,172,174,177,179],{"class":80,"line":166},5,[78,168,169],{"class":149},"  baseUrl",[78,171,153],{"class":88},[78,173,102],{"class":88},[78,175,176],{"class":105},"https:\u002F\u002Fapi.pichaflow.com",[78,178,108],{"class":88},[78,180,182],{"class":181},"sHwdD"," \u002F\u002F Optional\n",[78,184,186,189,192],{"class":80,"line":185},6,[78,187,188],{"class":88},"}",[78,190,191],{"class":92},")",[78,193,111],{"class":88},[64,195,197],{"id":196},"built-in-auto-optimization","Built-in Auto-Optimization",[55,199,200,201,203,204,207,208,211,212,216],{},"By default, the ",[59,202,61],{}," and all framework UI plugins (",[59,205,206],{},"@pichaflow\u002Freact",", ",[59,209,210],{},"@pichaflow\u002Fvue",", etc.) automatically perform ",[213,214,215],"strong",{},"Client-Side Pre-Optimization",".",[55,218,219,220,223,224,228],{},"If a user uploads a massive 24 Megapixel master image, the SDK intercepts the file, uses the browser's native HTML5 Canvas API to strictly scale the longest edge down to 2048px (maintaining aspect ratio), and natively exports it as a highly compressed ",[59,221,222],{},"image\u002Fwebp"," file. This happens instantly in the browser ",[225,226,227],"em",{},"before"," the network request begins, ensuring blazing-fast uploads and zero API limits exceeded.",[64,230,232],{"id":231},"uploading-images-server-side","Uploading Images (Server-Side)",[55,234,235,236,239],{},"When operating from a trusted backend environment (e.g., Node.js, Cloudflare Workers), use your ",[59,237,238],{},"sk_live_"," secret key for direct, zero-friction uploads.",[69,241,243],{"className":71,"code":242,"language":73,"meta":74,"style":74},"const file = \u002F\u002F ... from a file input\nconst response = await client.upload(file, {\n  tags: ['ecommerce', 'boots'],\n  onProgress: (p) => console.log(`Upload progress: ${p}%`)\n});\n\nconsole.log('Asset ID:', response.id);\n",[59,244,245,257,286,317,366,374,378],{"__ignoreMap":74},[78,246,247,249,252,254],{"class":80,"line":81},[78,248,125],{"class":124},[78,250,251],{"class":92}," file ",[78,253,131],{"class":88},[78,255,256],{"class":181}," \u002F\u002F ... from a file input\n",[78,258,259,261,264,266,269,272,274,277,280,283],{"class":80,"line":114},[78,260,125],{"class":124},[78,262,263],{"class":92}," response ",[78,265,131],{"class":88},[78,267,268],{"class":84}," await",[78,270,271],{"class":92}," client",[78,273,216],{"class":88},[78,275,276],{"class":137},"upload",[78,278,279],{"class":92},"(file",[78,281,282],{"class":88},",",[78,284,285],{"class":88}," {\n",[78,287,288,291,293,296,298,301,303,305,307,310,312,315],{"class":80,"line":121},[78,289,290],{"class":149},"  tags",[78,292,153],{"class":88},[78,294,295],{"class":92}," [",[78,297,108],{"class":88},[78,299,300],{"class":105},"ecommerce",[78,302,108],{"class":88},[78,304,282],{"class":88},[78,306,102],{"class":88},[78,308,309],{"class":105},"boots",[78,311,108],{"class":88},[78,313,314],{"class":92},"]",[78,316,163],{"class":88},[78,318,319,322,324,327,330,332,335,338,340,343,345,348,351,354,356,358,361,363],{"class":80,"line":146},[78,320,321],{"class":137},"  onProgress",[78,323,153],{"class":88},[78,325,326],{"class":88}," (",[78,328,55],{"class":329},"sHdIc",[78,331,191],{"class":88},[78,333,334],{"class":124}," =>",[78,336,337],{"class":92}," console",[78,339,216],{"class":88},[78,341,342],{"class":137},"log",[78,344,140],{"class":92},[78,346,347],{"class":88},"`",[78,349,350],{"class":105},"Upload progress: ",[78,352,353],{"class":88},"${",[78,355,55],{"class":92},[78,357,188],{"class":88},[78,359,360],{"class":105},"%",[78,362,347],{"class":88},[78,364,365],{"class":92},")\n",[78,367,368,370,372],{"class":80,"line":166},[78,369,188],{"class":88},[78,371,191],{"class":92},[78,373,111],{"class":88},[78,375,376],{"class":80,"line":185},[78,377,118],{"emptyLinePlaceholder":117},[78,379,381,384,386,388,390,392,395,397,399,402,404,407],{"class":80,"line":380},7,[78,382,383],{"class":92},"console",[78,385,216],{"class":88},[78,387,342],{"class":137},[78,389,140],{"class":92},[78,391,108],{"class":88},[78,393,394],{"class":105},"Asset ID:",[78,396,108],{"class":88},[78,398,282],{"class":88},[78,400,401],{"class":92}," response",[78,403,216],{"class":88},[78,405,406],{"class":92},"id)",[78,408,111],{"class":88},[64,410,412],{"id":411},"secure-client-uploads-hmac-handshake","Secure Client Uploads (HMAC Handshake)",[55,414,415,416,419,420,422,423,426,427,430],{},"When uploading directly from a user's browser, you must ",[213,417,418],{},"never"," expose your ",[59,421,238],{}," key. Instead, initialize the SDK with your ",[59,424,425],{},"pk_live_"," public key and use the ",[59,428,429],{},"secureUpload()"," method.",[55,432,433],{},"This initiates an HMAC-SHA256 handshake. The SDK will first request a temporary, 60-second signature from your backend before transmitting the file directly to the PichaFlow Engine. This prevents malicious actors from spamming your API key and draining your wallet.",[69,435,437],{"className":71,"code":436,"language":73,"meta":74,"style":74},"\u002F\u002F 1. Initialize with Public Key\nconst client = new PichaFlowClient({\n  apiKey: 'pk_live_your_public_key'\n});\n\n\u002F\u002F 2. Use secureUpload\nconst file = \u002F\u002F ... from an input\nconst response = await client.secureUpload(\n  file, \n  {\n    \u002F\u002F Point this to your backend endpoint that signs the request\n    signatureUrl: '\u002Fapi\u002Fmy-backend\u002Fsign-upload', \n    tags: ['ugc', 'avatar']\n  }\n);\n",[59,438,439,444,460,474,482,486,491,502,523,534,540,546,565,594,600],{"__ignoreMap":74},[78,440,441],{"class":80,"line":81},[78,442,443],{"class":181},"\u002F\u002F 1. Initialize with Public Key\n",[78,445,446,448,450,452,454,456,458],{"class":80,"line":114},[78,447,125],{"class":124},[78,449,128],{"class":92},[78,451,131],{"class":88},[78,453,134],{"class":88},[78,455,93],{"class":137},[78,457,140],{"class":92},[78,459,143],{"class":88},[78,461,462,464,466,468,471],{"class":80,"line":121},[78,463,150],{"class":149},[78,465,153],{"class":88},[78,467,102],{"class":88},[78,469,470],{"class":105},"pk_live_your_public_key",[78,472,473],{"class":88},"'\n",[78,475,476,478,480],{"class":80,"line":146},[78,477,188],{"class":88},[78,479,191],{"class":92},[78,481,111],{"class":88},[78,483,484],{"class":80,"line":166},[78,485,118],{"emptyLinePlaceholder":117},[78,487,488],{"class":80,"line":185},[78,489,490],{"class":181},"\u002F\u002F 2. Use secureUpload\n",[78,492,493,495,497,499],{"class":80,"line":380},[78,494,125],{"class":124},[78,496,251],{"class":92},[78,498,131],{"class":88},[78,500,501],{"class":181}," \u002F\u002F ... from an input\n",[78,503,505,507,509,511,513,515,517,520],{"class":80,"line":504},8,[78,506,125],{"class":124},[78,508,263],{"class":92},[78,510,131],{"class":88},[78,512,268],{"class":84},[78,514,271],{"class":92},[78,516,216],{"class":88},[78,518,519],{"class":137},"secureUpload",[78,521,522],{"class":92},"(\n",[78,524,526,529,531],{"class":80,"line":525},9,[78,527,528],{"class":92},"  file",[78,530,282],{"class":88},[78,532,533],{"class":92}," \n",[78,535,537],{"class":80,"line":536},10,[78,538,539],{"class":88},"  {\n",[78,541,543],{"class":80,"line":542},11,[78,544,545],{"class":181},"    \u002F\u002F Point this to your backend endpoint that signs the request\n",[78,547,549,552,554,556,559,561,563],{"class":80,"line":548},12,[78,550,551],{"class":149},"    signatureUrl",[78,553,153],{"class":88},[78,555,102],{"class":88},[78,557,558],{"class":105},"\u002Fapi\u002Fmy-backend\u002Fsign-upload",[78,560,108],{"class":88},[78,562,282],{"class":88},[78,564,533],{"class":92},[78,566,568,571,573,575,577,580,582,584,586,589,591],{"class":80,"line":567},13,[78,569,570],{"class":149},"    tags",[78,572,153],{"class":88},[78,574,295],{"class":92},[78,576,108],{"class":88},[78,578,579],{"class":105},"ugc",[78,581,108],{"class":88},[78,583,282],{"class":88},[78,585,102],{"class":88},[78,587,588],{"class":105},"avatar",[78,590,108],{"class":88},[78,592,593],{"class":92},"]\n",[78,595,597],{"class":80,"line":596},14,[78,598,599],{"class":88},"  }\n",[78,601,603,605],{"class":80,"line":602},15,[78,604,191],{"class":92},[78,606,111],{"class":88},[64,608,610],{"id":609},"delivery-urls","Delivery URLs",[55,612,613],{},"Generate optimized CDN URLs on the fly.",[69,615,617],{"className":71,"code":616,"language":73,"meta":74,"style":74},"const url = client.getDeliveryUrl('path\u002Fto\u002Fimage.jpg', {\n  w: 800,\n  q: 80,\n  f: 'webp'\n});\n",[59,618,619,648,661,673,687],{"__ignoreMap":74},[78,620,621,623,626,628,630,632,635,637,639,642,644,646],{"class":80,"line":81},[78,622,125],{"class":124},[78,624,625],{"class":92}," url ",[78,627,131],{"class":88},[78,629,271],{"class":92},[78,631,216],{"class":88},[78,633,634],{"class":137},"getDeliveryUrl",[78,636,140],{"class":92},[78,638,108],{"class":88},[78,640,641],{"class":105},"path\u002Fto\u002Fimage.jpg",[78,643,108],{"class":88},[78,645,282],{"class":88},[78,647,285],{"class":88},[78,649,650,653,655,659],{"class":80,"line":114},[78,651,652],{"class":149},"  w",[78,654,153],{"class":88},[78,656,658],{"class":657},"sbssI"," 800",[78,660,163],{"class":88},[78,662,663,666,668,671],{"class":80,"line":121},[78,664,665],{"class":149},"  q",[78,667,153],{"class":88},[78,669,670],{"class":657}," 80",[78,672,163],{"class":88},[78,674,675,678,680,682,685],{"class":80,"line":146},[78,676,677],{"class":149},"  f",[78,679,153],{"class":88},[78,681,102],{"class":88},[78,683,684],{"class":105},"webp",[78,686,473],{"class":88},[78,688,689,691,693],{"class":80,"line":166},[78,690,188],{"class":88},[78,692,191],{"class":92},[78,694,111],{"class":88},[696,697,698],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":74,"searchDepth":114,"depth":114,"links":700},[701,702,703,704,705],{"id":66,"depth":114,"text":67},{"id":196,"depth":114,"text":197},{"id":231,"depth":114,"text":232},{"id":411,"depth":114,"text":412},{"id":609,"depth":114,"text":610},"Programmatic interaction with the PichaFlow API via our SDK.","md",null,{},{"title":13,"description":706},"mA3Vg2UMts4UzMKQY4AObKwc4nrH4ZFkGe-vfbeBJtc",[713,715],{"title":9,"path":10,"stem":11,"description":714,"children":-1},"Get up and running with the PichaFlow SDK and components.",{"title":17,"path":18,"stem":19,"description":74,"children":-1},1779934774532]