Javascript - How can I get this kind of data in JS?

infopcgood
June 17, 2023
259 views
0 votes
2 Answers

so I am trying to use NovelAI’s image generation in my small project. However, when I tried to use the API this happened.
First, this screenshot is the F12 menu of NovelAI’s official site opened in Firefox. When i decode this base64 string it gives me a nice zip file which contains the generated image_0.png.
But when I try receiving it with async fetch() I only get this kind of data, and it is unusable.
apparently this looks like the decoded version of the Base64 string I saw earlier,but when I save it, rename it to ~~~.zip, and try unzip it it doesn’t work, it says the file is corrupted.
This is my source code, what could be the problem?

    await fetch("https://api.novelai.net/ai/generate-image",{method:"POST",headers: {'Content-Type':'application/json','Authorization': `Bearer ${accessToken}`,'Accept': "*/*"},body:JSON.stringify({
        "input": `masterpiece, best quality, ${queryparse.data.input}`,
        "model": model,
        "action": "generate",
        "parameters": {
            "width": 768,
            "height": 512,
            "scale": 11,
            "sampler": "k_dpmpp_2m",
            "steps": 28,
            "seed": getRandomInt(10000000000),
            "n_samples": 1,
            "ucPreset": 0,
            "qualityToggle": true,
            "sm": false,
            "sm_dyn": false,
            "dynamic_thresholding": false,
            "controlnet_strength": 1,
            "legacy": false,
            "add_original_image": false,
            "negative_prompt": "lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry"}})}
    ).then(async (response) => {
        ctx.status = response.status
        // ctx.response = response.data // i am a genius        ok apparently i wasn't
        ctx.body = (await response.text())
    })

I also tried with the axios library but it also didn’t work, just gave me something similar to that.

Answers

Chosen as BEST ANSWER
- infopcgood
- June 17, 2023 at 6:17 pm
- 0 votes
0
Solved, response.arrayBuffer() worked for raw data. To be specific, I used this to return the Base64 version of the data:
```
function arrayBufferToBase64(buffer: ArrayBuffer) {
    let binary = '';
    const bytes = new Uint8Array( buffer );
    const len = bytes.byteLength;
    for (let i = 0; i < len; i+=1) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return btoa( binary );
}

// ~~~~~ some code ~~~~~
    ).then(async (response) => {
        ctx.status = response.status
        ctx.body = arrayBufferToBase64(await response.arrayBuffer())
    })
    await next()
})
```
if anyone needs to use NovelAI's API for image generation here is the way to get the Base64 data of the returned ZIP file. Also, it is named images.zip and contains a single image file called image_0.png.